From 693a86cf01b702e32bc509d6dc72c5d3a266927f Mon Sep 17 00:00:00 2001
From: Sam Duncan <samkduncan@gmail.com>
Date: Mon, 21 Oct 2024 10:29:08 -0500
Subject: [PATCH 1/9] [PLAY-1510] Loading state for Rails form, resolution of
 Dialog loading (#3753)

**What does this PR do?** A clear and concise description with your
runway ticket url.
https://runway.powerhrg.com/backlog_items/PLAY-1510

**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
---
 playbook/app/entrypoints/playbook-rails.js    |  2 +
 playbook/app/javascript/plugins.js            |  2 +
 .../pb_dialog/docs/_dialog_loading.html.erb   | 37 ++++++++++++++----
 .../pb_dialog/docs/_dialog_loading.md         |  2 -
 .../docs/_form_form_with_loading.html.erb     | 39 +++++++++++++++++++
 .../pb_form/docs/_form_form_with_loading.md   |  1 +
 .../pb_kits/playbook/pb_form/docs/example.yml |  1 +
 playbook/app/pb_kits/playbook/pb_form/form.rb |  2 +
 .../pb_kits/playbook/pb_form/formHelper.js    | 27 +++++++++++++
 playbook/lib/playbook/pb_forms_helper.rb      |  4 +-
 10 files changed, 107 insertions(+), 10 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
 create mode 100644 playbook/app/pb_kits/playbook/pb_form/formHelper.js

diff --git a/playbook/app/entrypoints/playbook-rails.js b/playbook/app/entrypoints/playbook-rails.js
index 6c11e2a8a8..7769cb5fb9 100644
--- a/playbook/app/entrypoints/playbook-rails.js
+++ b/playbook/app/entrypoints/playbook-rails.js
@@ -1,5 +1,7 @@
 // Forms
 import 'kits/pb_form/pb_form_validation'
+import formHelper from 'kits/pb_form/formHelper'
+window.formHelper = formHelper
 
 // Date Picker
 import datePickerHelper from 'kits/pb_date_picker/date_picker_helper'
diff --git a/playbook/app/javascript/plugins.js b/playbook/app/javascript/plugins.js
index d27f3cec4a..0ecdf5e1e6 100644
--- a/playbook/app/javascript/plugins.js
+++ b/playbook/app/javascript/plugins.js
@@ -6,3 +6,5 @@ export { default as PbTextarea } from '../pb_kits/playbook/pb_textarea'
 export { default as PbTooltip } from '../pb_kits/playbook/pb_tooltip'
 export { default as PbTypeahead } from '../pb_kits/playbook/pb_typeahead'
 export { default as dialogHelper } from '../pb_kits/playbook/pb_dialog/dialogHelper'
+export { default as formHelper } from '../pb_kits/playbook/pb_form/formHelper'
+
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
index 5d8254f492..764f0d9559 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-loading", 
-    size: "sm", 
-    title: "Loading Exmaple", 
-    text: "Make a loading request?", 
-    cancel_button: "Cancel Button", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay", 
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+
+<script>
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+        loadingButton.addEventListener("click", function() {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+
+        });
+  }
+</script>
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
index ad7fbfab33..de0f291d1a 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
+++ b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
new file mode 100644
index 0000000000..e0702b1303
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
@@ -0,0 +1,39 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<script>
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_disabled_loading", "_enabled");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_disabled", "_enabled");
+
+                setTimeout(function() {
+                    submitButton.disabled = false;
+                    submitButton.className = currentClass;
+
+                    if (cancelButton) {
+                        cancelButton.disabled = false;
+                        cancelButton.className = cancelClass;
+                    }
+                }, 5000);
+            }
+        });
+    }
+</script>
+
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
new file mode 100644
index 0000000000..eef1260771
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
@@ -0,0 +1 @@
+Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/example.yml b/playbook/app/pb_kits/playbook/pb_form/docs/example.yml
index b04c3fdc51..19f029d494 100644
--- a/playbook/app/pb_kits/playbook/pb_form/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/example.yml
@@ -3,3 +3,4 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
+  - form_form_with_loading: Default + Loading
diff --git a/playbook/app/pb_kits/playbook/pb_form/form.rb b/playbook/app/pb_kits/playbook/pb_form/form.rb
index dc7b2574dd..d931173922 100644
--- a/playbook/app/pb_kits/playbook/pb_form/form.rb
+++ b/playbook/app/pb_kits/playbook/pb_form/form.rb
@@ -7,6 +7,7 @@ class Form < ::Playbook::KitBase
                          type: Playbook::Props::Base
       prop :form_system_options, deprecated: "Use options instead",
                                  type: Playbook::Props::Base
+      prop :loading, type: Playbook::Props::Boolean, default: false
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
@@ -22,6 +23,7 @@ def form_options
           aria: aria,
           class: classname,
           data: data,
+          loading: loading,
           validate: validate,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end
diff --git a/playbook/app/pb_kits/playbook/pb_form/formHelper.js b/playbook/app/pb_kits/playbook/pb_form/formHelper.js
new file mode 100644
index 0000000000..1c0fdb72d1
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form/formHelper.js
@@ -0,0 +1,27 @@
+const formHelper = () => {
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_enabled", "_disabled_loading");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+                submitButton.disabled = true;
+                submitButton.className = newClass;
+
+                if (cancelButton) {
+                    cancelButton.disabled = true;
+                    cancelButton.className = newCancelClass;
+                }
+            }
+        });
+    }
+};
+
+export default formHelper;
diff --git a/playbook/lib/playbook/pb_forms_helper.rb b/playbook/lib/playbook/pb_forms_helper.rb
index c2b4c11d7a..f515b5db13 100755
--- a/playbook/lib/playbook/pb_forms_helper.rb
+++ b/playbook/lib/playbook/pb_forms_helper.rb
@@ -22,9 +22,10 @@ module PbFormsHelper
     # @param data [Hash] hash of data attributes
     # @param validate [Boolean] whether validation should be triggered or not
     # @see [#form_with] for other options
-    def pb_form_with(data: {}, validate: false, **kwargs, &block)
+    def pb_form_with(data: {}, validate: false, loading: false, **kwargs, &block)
       data = data.merge("pb-form-validation" => validate)
       classname = ["pb-form", kwargs[:class]].join(" ")
+      classname += " pb_form_loading" if loading
       options = kwargs.merge(
         class: classname,
         data: data,
@@ -33,6 +34,7 @@ def pb_form_with(data: {}, validate: false, **kwargs, &block)
 
       content_for(:pb_js, javascript_tag(<<~JS))
         window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
+        window.addEventListener("DOMContentLoaded", () => formHelper())
       JS
 
       form_with(**options, &block)

From f4c5e2fd7f91cf286220ea89f16ae0c7b6b87f3b Mon Sep 17 00:00:00 2001
From: Nick Amantia <92755007+nickamantia@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:35:56 -0400
Subject: [PATCH 2/9] [PBNTR-389](Dropdown work - States & Variant Prop [ 1 of
 5]) (#3828)

[PBNTR-389](https://runway.powerhrg.com/backlog_items/PBNTR-389)

This PR adds new state styles and a variant prop with a subtle doc
example!

<img width="754" alt="Screenshot 2024-09-30 at 2 04 45 PM"
src="https://github.com/user-attachments/assets/1a732f3b-ab25-4fd4-ba6f-547ff26bf05a">



**How to test?** Steps to confirm the desired behavior:
1. Go to the dropdown kit and confirm styles!

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
---
 .../playbook/pb_dropdown/_dropdown.scss       | 87 ++++++++++++++++++-
 .../playbook/pb_dropdown/_dropdown.tsx        |  9 +-
 .../docs/_dropdown_separators_hidden.html.erb |  9 ++
 .../docs/_dropdown_separators_hidden.jsx      | 33 +++++++
 .../docs/_dropdown_subtle_variant.html.erb    | 10 +++
 .../docs/_dropdown_subtle_variant.jsx         | 34 ++++++++
 .../docs/_dropdown_subtle_variant.md          |  1 +
 .../playbook/pb_dropdown/docs/example.yml     |  4 +
 .../playbook/pb_dropdown/docs/index.js        |  2 +
 .../pb_kits/playbook/pb_dropdown/dropdown.rb  | 11 ++-
 10 files changed, 195 insertions(+), 5 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md

diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
index a64e52f2aa..05b26b4b07 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
@@ -69,15 +69,21 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
 
         &[class*="_focused"] {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
 
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
+
+          &:hover, &:focus {
+            .pb_body_kit {
+              color: $primary;
+            }
+          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -87,7 +93,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $primary !important;
+            background-color: $product_1_background !important;
           }
         }
       }
@@ -125,6 +131,81 @@
     }
   }
 
+  &.separators_hidden {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+
+        [class*="pb_dropdown_option"] {
+          border: none;
+        }
+      }
+    }
+  }
+
+  &.subtle {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        
+        [class*="pb_dropdown_option"]:first-child {
+          margin-top: $space_xs;
+        }
+
+        [class*="pb_dropdown_option"]:last-child {
+          margin-bottom: $space_xs;
+        }
+
+        [class*="pb_dropdown_option"] {
+          margin: $space_xs;
+          padding: $space_xs;
+          border-radius: $border_radius_md;
+          border-bottom: none;
+          position: relative;
+        
+          &::after {
+            content: "";
+            position: absolute;
+            left: -$space_xs;
+            right: -$space_xs;
+            bottom: -4.5px;
+            height: 1px;
+            background: $border_light;
+          }
+        }
+        
+        [class*="pb_dropdown_option"]:last-child::after {
+          display: none; 
+        }
+      }
+    }
+  
+    &.separators_hidden {
+      .dropdown_wrapper {
+        .pb_dropdown_container {
+          [class*="pb_dropdown_option"]:first-child {
+            margin-top: $space_xs;
+          }
+  
+          [class*="pb_dropdown_option"]:last-child {
+            margin-bottom: $space_xs;
+          }
+
+          [class*="pb_dropdown_option"] {
+            padding: $space_xxs $space_xs;
+            margin: $space_xxs $space_xs;
+     
+            &::after {
+              height: 0px;
+            }
+
+            &[class*="selected"] {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
index 27234c3fec..28af6eb76a 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
@@ -35,7 +35,9 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
+    separators: boolean;
     triggerRef?: any;
+    variant?: "default" | "subtle";
 };
 
 interface DropdownComponent
@@ -62,15 +64,20 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
         label,
         onSelect,
         options,
-        triggerRef
+        separators = true,
+        triggerRef,
+        variant = "default",
     } = props;
 
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
+    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
+        separatorsClass,
         className
     );
 
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
new file mode 100644
index 0000000000..98d2b41939
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+<%= pb_rails("dropdown", props: {options: options, separators: false}) %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
new file mode 100644
index 0000000000..053c60e339
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSeparatorsHidden = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        separators={false}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownSeparatorsHidden
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
new file mode 100644
index 0000000000..8e37f2390f
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
new file mode 100644
index 0000000000..e2686d36b3
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSubtleVariant = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <>
+     <Dropdown
+         options={options}
+         separators={false}
+         variant="subtle"
+         {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownSubtleVariant
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
new file mode 100644
index 0000000000..723805e823
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
@@ -0,0 +1 @@
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
index f707a2907c..5a88bb3075 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
@@ -1,6 +1,7 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -10,9 +11,11 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -23,6 +26,7 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
+  - dropdown_separators_hidden: Separators Hidden
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
index e246c75bf3..6753fe53cb 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
@@ -13,3 +13,5 @@ export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
+export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
+export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
index 4f839b17f0..30e6cbd2f5 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
@@ -13,13 +13,18 @@ class Dropdown < Playbook::KitBase
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default subtle],
+                     default: "default"
+      prop :separators, type: Playbook::Props::Boolean,
+                        default: true
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
-        generate_classname("pb_dropdown")
+        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
       end
 
     private
@@ -32,6 +37,10 @@ def input_default_value
         default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
+      def separators_class
+        separators ? "" : "separators_hidden"
+      end
+
       def options_with_blank
         blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
       end

From d7b8e5e0a4685d2be8b53d703dbbb6e74d594e66 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Tue, 22 Oct 2024 15:37:46 -0400
Subject: [PATCH 3/9] [PLAY-1581] Height, minHeight, maxHeight for Card, Flex,
 FlexItem, & Dialog (#3749)

**What does this PR do?** A clear and concise description with your
runway ticket url.
https://runway.powerhrg.com/backlog_items/PLAY-1581


In order to achieve the height functionality that the story demanded, we
introduced a new utility function for handling specific global
properties that require _dynamic_ values (any px, %, or vh, etc). This
has been on our Todo list for a looooong time, and I'm so happy we were
able to knock out the work here in this story!

The work in this PR adds the following props for react: **minHeight,
maxHeight, height** for React
The work in this PR adds the following props for rails: **min_height,
max_height, height** for Rails

For now, these are applied to a few of our utility kits: Card, Flex,
FlexItem, Dialog

We have a path forward to apply to all other kits, but for now this work
unblocks the Template work for the PB-In-Nitro team, without shipping
changes to every kit which would move this to a much higher risk-level.


**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to dialog, flex, flex_item, or card.
2. Add a height prop with a value.
3. See your styles get applied.


#### Checklist:
- [X] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [X] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [X] **TESTS** I have added test coverage to my code.
---
 .../app/pb_kits/playbook/pb_card/_card.tsx    |  6 ++-
 .../pb_kits/playbook/pb_dialog/_dialog.tsx    |  6 ++-
 .../app/pb_kits/playbook/pb_flex/_flex.tsx    |  4 +-
 .../pb_kits/playbook/pb_flex/_flex_item.tsx   | 10 ++++-
 .../playbook/pb_flex/flex_item.html.erb       |  9 ++--
 .../app/pb_kits/playbook/pb_flex/flex_item.rb |  9 +++-
 .../pb_kits/playbook/pb_popover/_popover.tsx  |  2 +-
 .../playbook/utilities/globalPropNames.mjs    |  3 ++
 .../pb_kits/playbook/utilities/globalProps.ts | 41 ++++++++++++++++++-
 playbook/lib/playbook/kit_base.rb             | 22 +++++++++-
 10 files changed, 95 insertions(+), 17 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 149130d8b2..4c0a4eb6f5 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
+
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
+  const dynamicInlineProps = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -135,6 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
+            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -163,6 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
+              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
index e25eb702ae..32e5443019 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
+  const dynamicInlineProps = globalInlineProps(props); 
+
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
+            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
+              
               >
                 <Flex align="center"
                     orientation="column"
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
index e683f5407a..d5de3e6067 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
+++ b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
+        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
index 6c61d55cb0..b8a27e9704 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
+++ b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
+  const dynamicInlineProps = globalInlineProps(props)
+  const combinedStyles = {
+    ...fixedStyle,
+    ...dynamicInlineProps
+  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={fixedStyle}
+        style={combinedStyles}
     >
       {children}
     </div>
diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
index 240e1ce109..96c6c7af2f 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    style: object.style_value,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, 
+  style: object.inline_styles
+) do %> 
   <%= content.presence %>
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
index dc99471511..caa11d6c9f 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
@@ -20,8 +20,13 @@ def classname
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def style_value
-        "flex-basis: #{fixed_size};" if fixed_size.present?
+      def inline_styles
+        styles = []
+        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
+        styles << "height: #{height};" if height.present?
+        styles << "min-height: #{min_height};" if min_height.present?
+        styles << "max-height: #{max_height};" if max_height.present?
+        styles.join(" ")
       end
 
     private
diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
index d77febae64..a302194c67 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
diff --git a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
index d41b00be0b..a9f5db1490 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
+++ b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
@@ -1,4 +1,7 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index 9dd67b7223..b4b093fa5b 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -170,12 +170,24 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string 
+}
+
+type MaxHeight = {
+  maxHeight?: string
+}
+
+type MinHeight = {
+  minHeight?: string
+}
+
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -498,7 +510,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  }
+  },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +537,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+// New function for inline styles
+export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
+  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_INLINE_CATEGORIES[key](props);
+    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
+  }, {});
+
+  return styles; // Return the styles object directly
+}
+
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 470a296929..8920188997 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -73,6 +73,10 @@ class KitBase < ViewComponent::Base
     prop :aria, type: Playbook::Props::HashProp, default: {}
     prop :html_options, type: Playbook::Props::HashProp, default: {}
     prop :children, type: Playbook::Props::Proc
+    prop :style, type: Playbook::Props::HashProp, default: {}
+    prop :height
+    prop :min_height
+    prop :max_height
 
     def object
       self
@@ -82,6 +86,14 @@ def combined_html_options
       default_html_options.merge(html_options.deep_merge(data_attributes))
     end
 
+    def global_inline_props
+      {
+        height: height,
+        min_height: min_height,
+        max_height: max_height,
+      }.compact
+    end
+
     # rubocop:disable Layout/CommentIndentation
     # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
     # The pb_content_tag generates HTML content tags for rails kits with flexible options.
@@ -113,12 +125,15 @@ def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}
   private
 
     def default_options
-      {
+      options = {
         id: id,
         data: data,
         class: classname,
         aria: aria,
       }
+      inline_styles = dynamic_inline_props
+      options[:style] = inline_styles if inline_styles.present?
+      options
     end
 
     def default_html_options
@@ -131,5 +146,10 @@ def data_attributes
         aria: aria,
       }.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
     end
+
+    def dynamic_inline_props
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" if value.present? }.compact
+      styles.join(" ").presence
+    end
   end
 end

From a04ad24b3ea998885ee74cd8bb76d2f48c9a0c52 Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:38:40 -0400
Subject: [PATCH 4/9] [PBNTR-595] Follow up to Fixed Width Filter issue on
 Templates (#3827)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-595](https://runway.powerhrg.com/backlog_items/PBNTR-595)
implements the popoverProps component on the Filter kit which will
unblock PBNTR's template work by allowing the team to set an optimal
Filter Popover width on our templates without using inline styling or a
separate scss file.

PopoverProps are connected to the embedded Popover within the Filter kit
(by spreading the popoverProps prop React, and by merging popover_props
to the rest of the props in Rails). A "Popover Props" doc example has
been added to the Rails and React kit pages which shows using the
popover prop to set a custom width on the filter popover. The Popover
kit itself now accepts a width prop to allow us to achieve this - no doc
example necessary at this time.

This is associated with an [alpha PR here](linktocome) to demonstrate
its use to prevent the Rails template popover width from jumping every
time an item is added to the Filter's Typeahead.

**Screenshots:** Screenshots to visualize your addition/change
Rails Popover Props doc example
<img width="1343" alt="for PR popover props doc ex rails"
src="https://github.com/user-attachments/assets/042ee607-5353-43c5-a583-aca143663577">
React Popover Props doc example
<img width="1338" alt="for PR popover props doc ex react"
src="https://github.com/user-attachments/assets/bb2d7d15-f52b-4772-9aee-ece6906bc69e">
Rails Template with `popover_props` applying a set width to avoid the
filter popover jumping with each additional typeahead entry
desktop+mobile
<img width="1530" alt="for PR rails template desktop filter fixed width"
src="https://github.com/user-attachments/assets/a9545f90-af36-4f2a-9dcb-b9a3c25f44b2">
<img width="194" alt="for PR rails template mobile filter fixed width"
src="https://github.com/user-attachments/assets/6e658743-4146-41e9-8e80-74f9c7494452">


**How to test?** Steps to confirm the desired behavior:
1. Go to the filter kit review env page, specifically to the Popover
Props doc example
([rails](https://pr3827.playbook.beta.px.powerapp.cloud/kits/filter#popover-props),
[react](https://pr3827.playbook.beta.px.powerapp.cloud/kits/filter/react#popover-props))
2. Click on Filter popover button and see a smaller-than-usual Filter
popover appear. Compare to other doc examples on the page (default,
etc.) to see the difference.
3. Go to the [rails template
page](https://pr43315.nitro-web.beta.hq.powerapp.cloud/dev_docs/playbook/templates/demos/basic_table/rails)
in the review environment with alpha from this PR.
4. Open the Filter and add several items to the typeahead. The width of
the popover should not jump with every additional entry.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
~~- [ ] **TESTS** I have added test coverage to my code.~~
---
 .../pb_filter/Filter/FilterDouble.tsx         |  2 +
 .../pb_filter/Filter/FilterSingle.tsx         |  2 +
 .../pb_filter/Filter/FiltersPopover.tsx       |  5 +-
 .../docs/_filter_popover_props.html.erb       | 41 +++++++++++
 .../pb_filter/docs/_filter_popover_props.jsx  | 71 +++++++++++++++++++
 .../docs/_filter_popover_props_rails.md       |  1 +
 .../docs/_filter_popover_props_react.md       |  1 +
 .../playbook/pb_filter/docs/example.yml       |  3 +
 .../pb_kits/playbook/pb_filter/docs/index.js  |  1 +
 .../playbook/pb_filter/filter.html.erb        |  4 +-
 .../app/pb_kits/playbook/pb_filter/filter.rb  |  2 +
 .../pb_kits/playbook/pb_popover/_popover.tsx  |  6 +-
 .../pb_popover/docs/_popover_default.html.erb |  2 +-
 .../pb_kits/playbook/pb_popover/popover.rb    |  4 +-
 14 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
 create mode 100644 playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md

diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
index 7d15d84d12..ecb21b72ad 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
@@ -34,6 +34,7 @@ const FilterDouble = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
@@ -49,6 +50,7 @@ const FilterDouble = ({
           maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
+          popoverProps={popoverProps}
       >
           {children}
       </FiltersPopover>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
index 4d8b285f01..950575006b 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
@@ -33,6 +33,7 @@ const FilterSingle = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterSingleProps): React.ReactElement => {
   return (
@@ -52,6 +53,7 @@ const FilterSingle = ({
                 maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
+                popoverProps={popoverProps}
             >
             {children}
             </FiltersPopover>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
index 72ce03420a..362915bcc0 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
+import { GenericObject } from '../../types'
 
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
@@ -9,8 +10,9 @@ type FiltersPopoverProps = {
   maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+  popoverProps?: GenericObject,
 }
-const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -33,6 +35,7 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
+        {...popoverProps}
     >
         <div className="pb-form">
           {typeof children === 'function'
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
new file mode 100644
index 0000000000..da96315cce
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_popover_props",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { width: "250px" },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
new file mode 100644
index 0000000000..d98bb00b04
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+const FilterPopoverProps = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+
+  const popoverProps = {
+    width: "250px"
+  }
+
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        popoverProps={popoverProps}
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
+              {...props}
+          />
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterPopoverProps
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
new file mode 100644
index 0000000000..2b57fbbd17
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
new file mode 100644
index 0000000000..b95652ba24
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml b/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
index dce7ebf254..b38f20e5ee 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
@@ -10,6 +10,7 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
 
   react:
   - filter_default: Default
@@ -21,3 +22,5 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
+
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/index.js b/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
index b8ecc76ae8..a204c56a8d 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
+export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb b/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
index bf52558263..e29aef6667 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
@@ -71,13 +71,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/filter.rb b/playbook/app/pb_kits/playbook/pb_filter/filter.rb
index 5eb81e25a5..0e0567cea6 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/filter.rb
+++ b/playbook/app/pb_kits/playbook/pb_filter/filter.rb
@@ -15,6 +15,8 @@ class Filter < Playbook::KitBase
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                        default: "bottom-start"
+      prop :popover_props, type: Playbook::Props::HashProp,
+                           default: {}
 
       def classname
         generate_classname("pb_filter_kit").rstrip
diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
index a302194c67..4cf9eec90a 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
     targetId,
   } = props;
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
       maxHeight ? { maxHeight: maxHeight } : {},
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {}
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
     );
   };
   const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
   } = props;
 
   useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         placement={placement}
         referenceElement={referenceElement}
         targetId={targetId}
+        width={width}
         zIndex={zIndex}
         {...props}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb b/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
index 0f8ff1a668..7bed04c76a 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_popover/popover.rb b/playbook/app/pb_kits/playbook/pb_popover/popover.rb
index 48a53630ff..ca5e02bc0e 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/popover.rb
+++ b/playbook/app/pb_kits/playbook/pb_popover/popover.rb
@@ -12,6 +12,7 @@ class Popover < Playbook::KitBase
       prop :max_width
       prop :min_width
       prop :min_height
+      prop :width
       prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ def width_height_helper
         out += "max-width: #{max_width}; " if max_width.present?
         out += "min-height: #{min_height}; " if min_height.present?
         out += "min-width: #{min_width};" if min_width.present?
+        out += "width: #{width};" if width.present?
         out
       end
 
       def width_height_class_helper
-        "overflow_handling" if max_height || max_width
+        "overflow_handling" if max_height || max_width || width
       end
 
       def data

From bd2066e500d8ad015db43a94d1d300805c9394ef Mon Sep 17 00:00:00 2001
From: Mark Rosenberg <38965626+markdoeswork@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:39:40 -0400
Subject: [PATCH 5/9] [PLAY-1549] Update react modal version (#3819)

**What does this PR do?** A clear and concise description with your
runway ticket url.
Runway https://runway.powerhrg.com/backlog_items/PLAY-1549

This is just a story to upgrade `react-modal`, because we want to keep
things up to date

There are no major updates if you look at the commits its mostly bug
fixes https://github.com/reactjs/react-modal/commits/master/

There are no issues i've encountered in personal regression testing

I made a nitro Alpha https://github.com/powerhome/nitro-web/pull/43287
---
 playbook/package.json |  4 ++--
 yarn.lock             | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/playbook/package.json b/playbook/package.json
index 3e212713f4..3a7483dc69 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -60,7 +60,7 @@
     "@types/react": "17.0.54",
     "@types/react-dom": "^18.0.11",
     "@types/react-highlight-words": "^0.16.5",
-    "@types/react-modal": "3.13.1",
+    "@types/react-modal": "3.16.1",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -83,7 +83,7 @@
     "react-dropzone": "^10.2.2",
     "react-highlight-words": "^0.20.0",
     "react-joyride": "^2.8.2",
-    "react-modal": "^3.12.1",
+    "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-select": "5.8.0",
     "react-trix": "0.10.1",
diff --git a/yarn.lock b/yarn.lock
index 8ee891a259..c8d70630c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3932,10 +3932,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-modal@3.13.1":
-  version "3.13.1"
-  resolved "https://npm.powerapp.cloud/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a"
-  integrity sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==
+"@types/react-modal@3.16.1":
+  version "3.16.1"
+  resolved "https://npm.powerapp.cloud/@types/react-modal/-/react-modal-3.16.1.tgz#0d65e078b1290acfef8083b8cd92b7692e899720"
+  integrity sha512-HsH2E3luJ2hdVOAovq93x/r+CmWqbhwT8hXW05KMp3zzbSEZsBn4egnMGU/VLwScwlCRPTyZgIEPqLycaz5EOw==
   dependencies:
     "@types/react" "*"
 
@@ -10115,7 +10115,7 @@ react-lifecycles-compat@^3.0.0:
   resolved "https://npm.powerapp.cloud/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-modal@^3.12.1:
+react-modal@^3.16.1:
   version "3.16.1"
   resolved "https://npm.powerapp.cloud/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
   integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==

From abf83a5f5a89d43033037280cb5855ddae842df1 Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:42:55 -0400
Subject: [PATCH 6/9] [PLAY-1601] Bump react-zoom-pan-pinch from 2.6.1 to 3.6.0
 (#3817)

**What does this PR do?**
Upgrade react-zoom-pan-pinch from 2.6.1 to 3.6.0

Fix "pinch" bug on mobile and tablet by avoiding [3.6.1
version](https://github.com/BetterTyped/react-zoom-pan-pinch/releases/tag/v3.6.1)
which has a bug with "double click" and "two fingers" on zoom.
See discussion in [GitHub
issues](https://github.com/BetterTyped/react-zoom-pan-pinch/issues/487).
Someone made a
[PR](https://github.com/BetterTyped/react-zoom-pan-pinch/pull/499) which
hasn't been merged yet, so this might be fixed in later versions.

**How to test?**
Go through the Lightbox kit for any regressions


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
---
 playbook/package.json | 2 +-
 yarn.lock             | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/playbook/package.json b/playbook/package.json
index 3a7483dc69..7912739d79 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -87,7 +87,7 @@
     "react-popper": "^2.3.0",
     "react-select": "5.8.0",
     "react-trix": "0.10.1",
-    "react-zoom-pan-pinch": "^2.6.1",
+    "react-zoom-pan-pinch": "3.6.0",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.77.6",
     "terser": "^5.31.3",
diff --git a/yarn.lock b/yarn.lock
index c8d70630c2..a06995b3b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10190,10 +10190,10 @@ react-trix@0.10.1:
   dependencies:
     trix "^1.3.1"
 
-react-zoom-pan-pinch@^2.6.1:
-  version "2.6.1"
-  resolved "https://npm.powerapp.cloud/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.6.1.tgz#5719fdd9515dc1f379a23350cbf99edd540b1281"
-  integrity sha512-4Cgdnn6OwN4DomY/E9NpAf0TyCtslEgwdYn96ZV/f5LKuw/FE3gcIBJiaKFmMGThDGV0yKN5mzO8noi34+UE4Q==
+react-zoom-pan-pinch@3.6.0:
+  version "3.6.0"
+  resolved "https://npm.powerapp.cloud/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.0.tgz#aea299a27d120a96b832fd953b2490ca9bfc4954"
+  integrity sha512-qLAFbDmlRwwJ7F3KXIoT5zxVZD34ZO0a5jI65URmTUjthapoQ0UCAF8oxpSJV0bSVszI5T3WV/U4Jd6ypwOnAQ==
 
 react@^17.0.2:
   version "17.0.2"

From 32add9da65484318a5542eddfd7d7f7544b6ad86 Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:51:12 -0400
Subject: [PATCH 7/9] [PLAY-1548] Upgrade intl-tel-input to Latest and Make
 Fixes (#3791)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What does this PR do?**

- Bump intl-tel-input from 18.0.15 to 24.6.0

From the package update:
- the drop down arrow and the area code switch places so area code is to
the left of the number input
- flag sizes are smaller - from "20 x 15" to "16 x 12"
- the "active" checkmark in the dropdown was removed
- more countries
- placeholders remove the leading 0's ("070 123 4567" becomes "70 123
4567")
- when using preferredCountries, there is no "separator" between the
preferred and the rest

Custom fixes made:
- Update the
`playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss`
copy. See
[PLAY-1506](https://runway.powerhrg.com/backlog_items/PLAY-1506) for
more details- we added it so we could theme properly.
- Use intlTelInput from package instead of window. Use
'intl-tel-input/build/js/intlTelInputWithUtils.js'
- Update class names (e.g., flag -> country)
- Turn off "country search" default
- Turn off "format as you type" default as there are issues with
validation
- Turn off "globe" blank default. Set initial country fallback to match
current behavior- otherwise a blank "globe" shows and you don't have a
country area code selected
- Make CSS edits for this globe, even though it's not seen.
- Change dropdown to not be the full width of the input
- Use utils so a placeholder is added
- Make various CSS fixes for dropdown, selected country, and  input
- Change "preferredCountries" to new "countryOrder" prop
- Fix type errors
- The "country" button area hover matches the rest of the input.
Previously, it was ever so slightly darker (you have to zoom in to
notice). There is still a cursor button, though.
- Set padding by using CSS variables to fix Phone Number Inputs in
Dialogs

**Screenshots:**
![Screenshot 2024-10-21 at 9 27
41 AM](https://github.com/user-attachments/assets/43efbff7-19e4-45c2-8e39-cc81876ef211)
![Screenshot 2024-10-21 at 9 21
00 AM](https://github.com/user-attachments/assets/73e08c9d-72e8-4e7a-bc8b-e583d582ad9e)


**How to test?** Steps to confirm the desired behavior:
1. Go to the Phone Number Input Kit
2. Test all doc examples for both Rails and React
3. Test on Nitro.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
---
 .../_phone_number_input.scss                  |  104 +-
 .../_phone_number_input.tsx                   |   21 +-
 ..._phone_number_input_preferred_countries.md |    2 +-
 .../pb_phone_number_input/intlTelInput.scss   | 1780 ++++++++---------
 .../playbook/pb_phone_number_input/types.d.ts |    5 +-
 playbook/package.json                         |    2 +-
 yarn.lock                                     |    8 +-
 7 files changed, 960 insertions(+), 962 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
index 6b6adfb8ba..bee3513ac0 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
@@ -5,7 +5,54 @@ $transform-rotate-deg: 135deg;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
+:root {
+  --iti-arrow-padding: #{$space_xs};
+  --iti-spacer-horizontal: #{$space_sm};
+  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
+}
+
 .pb_phone_number_input {
+  .iti {
+    width: 100%;
+  }
+
+  .iti__flag {
+    margin-right: 6px;
+  }
+
+  .iti__a11y-text {
+    display: none;
+  }
+
+  .iti__selected-dial-code {
+    font-family: $font_family_base;
+    font-size: $font_base;
+    line-height: 1.5;
+    letter-spacing: $lspace_normal;
+    font-weight: $regular;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    -moz-font-feature-settings: "liga" on;
+    color: $charcoal;
+  }
+
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  .iti__country-list .iti__flag, .iti__country-name {
+    margin-right: $space_xs;
+  }
+  [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
+    margin-right: 0;
+    margin-left: $space_xs;
+  }
+
+  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
+  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
+    background-color: transparent;
+  }
+
   input::placeholder {
     color: $focus_input_light;
   }
@@ -15,13 +62,13 @@ $flag-min-resolution: 192dpi;
       border-color: $primary !important;
     }
 
-    .iti__selected-flag:focus-visible {
+    .iti__selected-country:focus-visible {
       outline-style: none;
     }
   }
 
   .iti__country {
-    padding: 5px 10px 5px 16px;
+    padding: 5px $space_xs 5px $space_sm;
     transition: $transition_default;
   }
 
@@ -29,8 +76,23 @@ $flag-min-resolution: 192dpi;
     border-bottom: 1px solid $border_light !important;  
   }
 
-  .iti__selected-flag {
-    padding: 0 $space_xxs 0 $space_sm;
+  .iti__selected-country-primary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .iti__flag {
+      margin-right: 0;
+    }
+  }
+
+  .iti__selected-country {
+    position: absolute;
+    top: 0;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border-width: 0;
     border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
@@ -51,24 +113,24 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-    background-color: $focus_input_light;
-  }
-
-  .iti__flag-container:hover + .text_input {
+  .iti__country-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
     border-radius: 1px;
   }
 
-  .iti--separate-dial-code {
-    width: 100%;
+  .iti__flag.iti__globe {
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+    background-position: center;
+    height: 16px;
+    width: 16px;
+    background-size: 16px 16px;
   }
 
-  .iti--separate-dial-code .iti__selected-flag {
+  .iti--show-flags .iti__selected-country {
     background-color: rgba($white, $opacity_1);
   }
 
@@ -136,10 +198,12 @@ $flag-min-resolution: 192dpi;
   .iti__dropdown-content {
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
+    position: absolute;
+    top: 100%;
   }
 
   &.dark {
-    .iti--allow-dropdown .iti__flag-container {
+    .iti--allow-dropdown .iti__country-container {
       background-color: rgba($white, 0);
 
       &:hover {
@@ -149,13 +213,13 @@ $flag-min-resolution: 192dpi;
           background-color: rgba($white, 0.15);
         }
 
-        .iti__selected-flag {
+        .iti__selected-country {
           background-color: rgba($white, 0);
         }
       }
     }
 
-    .iti__selected-flag {
+    .iti__selected-country {
       background-color: rgba($white, 0);
       color: $white;
     }
@@ -196,11 +260,15 @@ $flag-min-resolution: 192dpi;
         background-color: rgba($white, 0.025) !important;
       }
     }
-  }
 
+    .iti__selected-dial-code {
+      color: $white;
+    }
+  }
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+      background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
index ecdf4f4f7b..5cd84a7d14 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
@@ -1,8 +1,7 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/js/utils.js'
+import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -50,7 +49,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  const countryData = intlTelInput.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
@@ -214,14 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
 
+  // If an initial country is not specified, the "globe" icon will show
+  // Always set a country
+  const fallbackCountry =
+    preferredCountries.length > 0 ? preferredCountries[0] :
+      onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+        "af";
+
   useEffect(() => {
     const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
-      preferredCountries,
+      countryOrder: preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry,
-      onlyCountries
+      initialCountry: initialCountry || fallbackCountry,
+      onlyCountries,
+      countrySearch: false,
+      fixDropdownWidth: false,
+      formatAsYouType: false,
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md b/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
index 01c22b7dff..0613f5ed32 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
@@ -1 +1 @@
-Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
index 1140d3a9bd..933dbe8e32 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
@@ -1,4 +1,29 @@
 /* @import "intl-tel-input/build/css/intlTelInput.css"; */
+// If you update intl-tel-input, make sure to move this over
+// And replace the relative path urls with the images from unpkg
+:root {
+  --iti-hover-color: rgba(0, 0, 0, 0.05);
+  --iti-border-color: #ccc;
+  --iti-dialcode-color: #999;
+  --iti-dropdown-bg: white;
+  --iti-spacer-horizontal: 8px;
+  --iti-flag-height: 12px;
+  --iti-flag-width: 16px;
+  --iti-border-width: 1px;
+  --iti-arrow-height: 4px;
+  --iti-arrow-width: 6px;
+  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
+  --iti-arrow-padding: 6px;
+  --iti-arrow-color: #555;
+  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
+  --iti-flag-sprite-width: 3904px;
+  --iti-flag-sprite-height: 12px;
+  --iti-mobile-popup-margin: 30px;
+}
+
 .iti {
   position: relative;
   display: inline-block;
@@ -12,70 +37,95 @@
 .iti__v-hide {
   visibility: hidden;
 }
+.iti__a11y-text {
+  width: 1px;
+  height: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+}
 .iti input.iti__tel-input,
 .iti input.iti__tel-input[type=text],
 .iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding-right: 36px;
-  margin-right: 0;
+  margin: 0 !important;
 }
-.iti__flag-container {
+.iti__country-container {
   position: absolute;
   top: 0;
   bottom: 0;
-  right: 0;
-  padding: 1px;
+  padding: var(--iti-border-width);
 }
-.iti__selected-flag {
+.iti__selected-country {
   z-index: 1;
   position: relative;
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 6px 0 8px;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+  font-weight: inherit;
+  line-height: inherit;
+  text-decoration: none;
+}
+.iti__selected-country-primary {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
 }
 .iti__arrow {
-  margin-left: 6px;
+  margin-left: var(--iti-arrow-padding);
   width: 0;
   height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #555;
+  border-left: var(--iti-triangle-border) solid transparent;
+  border-right: var(--iti-triangle-border) solid transparent;
+  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
 }
 [dir=rtl] .iti__arrow {
-  margin-right: 6px;
+  margin-right: var(--iti-arrow-padding);
   margin-left: 0;
 }
 .iti__arrow--up {
   border-top: none;
-  border-bottom: 4px solid #555;
+  border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
 }
 .iti__dropdown-content {
+  border-radius: 3px;
+  background-color: var(--iti-dropdown-bg);
+}
+.iti--inline-dropdown .iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  margin-left: -1px;
+  margin-top: 3px;
+  margin-left: calc(var(--iti-border-width) * -1);
+  border: var(--iti-border-width) solid var(--iti-border-color);
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
-  background-color: white;
-  border: 1px solid #ccc;
-  max-height: 200px;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-}
-.iti__dropdown-content--dropup {
-  bottom: 100%;
-  margin-bottom: -1px;
 }
 .iti__search-input {
   width: 100%;
   border-width: 0;
+  border-radius: 3px;
+}
+.iti__search-input + .iti__country-list {
+  border-top: 1px solid var(--iti-border-color);
 }
 .iti__country-list {
   list-style: none;
   padding: 0;
   margin: 0;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.iti--inline-dropdown .iti__country-list {
+  max-height: 185px;
 }
 .iti--flexible-dropdown-width .iti__country-list {
   white-space: nowrap;
@@ -85,90 +135,45 @@
     white-space: normal;
   }
 }
-.iti__flag-box {
-  display: inline-block;
-  width: 20px;
-}
-.iti__divider {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px solid #ccc;
-}
 .iti__country {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  padding: 8px var(--iti-spacer-horizontal);
   outline: none;
 }
 .iti__dial-code {
-  color: #999;
+  color: var(--iti-dialcode-color);
 }
 .iti__country.iti__highlight {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti__flag-box, .iti__country-name {
-  margin-right: 6px;
+  background-color: var(--iti-hover-color);
 }
-[dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
-  margin-right: 0;
-  margin-left: 6px;
-}
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
-  padding-right: 6px;
-  padding-left: 52px;
-  margin-left: 0;
+.iti__country-list .iti__flag, .iti__country-name {
+  margin-right: var(--iti-spacer-horizontal);
 }
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
-  padding-right: 52px;
-  padding-left: 6px;
+[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
   margin-right: 0;
+  margin-left: var(--iti-spacer-horizontal);
 }
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
-  right: 0;
-  left: auto;
-}
-.iti--allow-dropdown .iti__flag-container:hover {
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
   cursor: pointer;
 }
-.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
-  cursor: default;
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
+  background-color: var(--iti-hover-color);
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
-  background-color: transparent;
+.iti .iti__selected-dial-code {
+  margin-left: 4px;
 }
-.iti--separate-dial-code .iti__selected-flag {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
-  margin-left: 6px;
-}
-[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+[dir=rtl] .iti .iti__selected-dial-code {
   margin-left: 0;
-  margin-right: 6px;
+  margin-right: 4px;
 }
 .iti--container {
-  position: absolute;
+  position: fixed;
   top: -1000px;
   left: -1000px;
   z-index: 1060;
-  padding: 1px;
+  padding: var(--iti-border-width);
 }
 .iti--container:hover {
   cursor: pointer;
@@ -181,15 +186,14 @@
   left: 0;
   right: 0;
   position: fixed;
-  padding: 30px;
+  padding: var(--iti-mobile-popup-margin);
   display: flex;
   flex-direction: column;
-  justify-content: center;
-}
-.iti--fullscreen-popup.iti--container.iti--country-search {
   justify-content: flex-start;
 }
 .iti--fullscreen-popup .iti__dropdown-content {
+  display: flex;
+  flex-direction: column;
   max-height: 100%;
   position: relative;
 }
@@ -199,1092 +203,1006 @@
 }
 
 .iti__flag {
-  width: 20px;
-}
-.iti__flag.iti__be {
-  width: 18px;
-}
-.iti__flag.iti__ch {
-  width: 15px;
-}
-.iti__flag.iti__mc {
-  width: 19px;
-}
-.iti__flag.iti__ne {
-  width: 18px;
-}
-.iti__flag.iti__np {
-  width: 13px;
-}
-.iti__flag.iti__va {
-  width: 15px;
-}
-@media (min-resolution: 2x) {
-  .iti__flag {
-    background-size: 5762px 15px;
-  }
-}
-.iti__flag.iti__ac {
-  height: 10px;
-  background-position: 0px 0px;
-}
-.iti__flag.iti__ad {
-  height: 14px;
-  background-position: -22px 0px;
-}
-.iti__flag.iti__ae {
-  height: 10px;
-  background-position: -44px 0px;
-}
-.iti__flag.iti__af {
-  height: 14px;
-  background-position: -66px 0px;
-}
-.iti__flag.iti__ag {
-  height: 14px;
-  background-position: -88px 0px;
-}
-.iti__flag.iti__ai {
-  height: 10px;
-  background-position: -110px 0px;
-}
-.iti__flag.iti__al {
-  height: 15px;
-  background-position: -132px 0px;
-}
-.iti__flag.iti__am {
-  height: 10px;
-  background-position: -154px 0px;
-}
-.iti__flag.iti__ao {
-  height: 14px;
-  background-position: -176px 0px;
-}
-.iti__flag.iti__aq {
-  height: 14px;
-  background-position: -198px 0px;
-}
-.iti__flag.iti__ar {
-  height: 13px;
-  background-position: -220px 0px;
-}
-.iti__flag.iti__as {
-  height: 10px;
-  background-position: -242px 0px;
-}
-.iti__flag.iti__at {
-  height: 14px;
-  background-position: -264px 0px;
-}
-.iti__flag.iti__au {
-  height: 10px;
-  background-position: -286px 0px;
-}
-.iti__flag.iti__aw {
-  height: 14px;
-  background-position: -308px 0px;
-}
-.iti__flag.iti__ax {
-  height: 13px;
-  background-position: -330px 0px;
-}
-.iti__flag.iti__az {
-  height: 10px;
-  background-position: -352px 0px;
-}
-.iti__flag.iti__ba {
-  height: 10px;
-  background-position: -374px 0px;
-}
-.iti__flag.iti__bb {
-  height: 14px;
-  background-position: -396px 0px;
+  --iti-flag-offset: 100px;
+  height: var(--iti-flag-height);
+  width: var(--iti-flag-width);
+  border-radius: 1px;
+  box-shadow: 0px 0px 1px 0px #888;
+  background-image: var(--iti-path-flags-1x);
+  background-repeat: no-repeat;
+  background-position: var(--iti-flag-offset) 0;
+  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
 }
-.iti__flag.iti__bd {
-  height: 12px;
-  background-position: -418px 0px;
+
+.iti__ac {
+  --iti-flag-offset: 0px;
 }
-.iti__flag.iti__be {
-  height: 15px;
-  background-position: -440px 0px;
+
+.iti__ad {
+  --iti-flag-offset: -16px;
 }
-.iti__flag.iti__bf {
-  height: 14px;
-  background-position: -460px 0px;
+
+.iti__ae {
+  --iti-flag-offset: -32px;
 }
-.iti__flag.iti__bg {
-  height: 12px;
-  background-position: -482px 0px;
+
+.iti__af {
+  --iti-flag-offset: -48px;
 }
-.iti__flag.iti__bh {
-  height: 12px;
-  background-position: -504px 0px;
+
+.iti__ag {
+  --iti-flag-offset: -64px;
 }
-.iti__flag.iti__bi {
-  height: 12px;
-  background-position: -526px 0px;
+
+.iti__ai {
+  --iti-flag-offset: -80px;
 }
-.iti__flag.iti__bj {
-  height: 14px;
-  background-position: -548px 0px;
+
+.iti__al {
+  --iti-flag-offset: -96px;
 }
-.iti__flag.iti__bl {
-  height: 14px;
-  background-position: -570px 0px;
+
+.iti__am {
+  --iti-flag-offset: -112px;
 }
-.iti__flag.iti__bm {
-  height: 10px;
-  background-position: -592px 0px;
+
+.iti__ao {
+  --iti-flag-offset: -128px;
 }
-.iti__flag.iti__bn {
-  height: 10px;
-  background-position: -614px 0px;
+
+.iti__ar {
+  --iti-flag-offset: -144px;
 }
-.iti__flag.iti__bo {
-  height: 14px;
-  background-position: -636px 0px;
+
+.iti__as {
+  --iti-flag-offset: -160px;
 }
-.iti__flag.iti__bq {
-  height: 14px;
-  background-position: -658px 0px;
+
+.iti__at {
+  --iti-flag-offset: -176px;
 }
-.iti__flag.iti__br {
-  height: 14px;
-  background-position: -680px 0px;
+
+.iti__au {
+  --iti-flag-offset: -192px;
 }
-.iti__flag.iti__bs {
-  height: 10px;
-  background-position: -702px 0px;
+
+.iti__aw {
+  --iti-flag-offset: -208px;
 }
-.iti__flag.iti__bt {
-  height: 14px;
-  background-position: -724px 0px;
+
+.iti__ax {
+  --iti-flag-offset: -224px;
 }
-.iti__flag.iti__bv {
-  height: 15px;
-  background-position: -746px 0px;
+
+.iti__az {
+  --iti-flag-offset: -240px;
 }
-.iti__flag.iti__bw {
-  height: 14px;
-  background-position: -768px 0px;
+
+.iti__ba {
+  --iti-flag-offset: -256px;
 }
-.iti__flag.iti__by {
-  height: 10px;
-  background-position: -790px 0px;
+
+.iti__bb {
+  --iti-flag-offset: -272px;
 }
-.iti__flag.iti__bz {
-  height: 12px;
-  background-position: -812px 0px;
+
+.iti__bd {
+  --iti-flag-offset: -288px;
 }
-.iti__flag.iti__ca {
-  height: 10px;
-  background-position: -834px 0px;
+
+.iti__be {
+  --iti-flag-offset: -304px;
 }
-.iti__flag.iti__cc {
-  height: 10px;
-  background-position: -856px 0px;
+
+.iti__bf {
+  --iti-flag-offset: -320px;
 }
-.iti__flag.iti__cd {
-  height: 15px;
-  background-position: -878px 0px;
+
+.iti__bg {
+  --iti-flag-offset: -336px;
 }
-.iti__flag.iti__cf {
-  height: 14px;
-  background-position: -900px 0px;
+
+.iti__bh {
+  --iti-flag-offset: -352px;
 }
-.iti__flag.iti__cg {
-  height: 14px;
-  background-position: -922px 0px;
+
+.iti__bi {
+  --iti-flag-offset: -368px;
 }
-.iti__flag.iti__ch {
-  height: 15px;
-  background-position: -944px 0px;
+
+.iti__bj {
+  --iti-flag-offset: -384px;
 }
-.iti__flag.iti__ci {
-  height: 14px;
-  background-position: -961px 0px;
+
+.iti__bl {
+  --iti-flag-offset: -400px;
 }
-.iti__flag.iti__ck {
-  height: 10px;
-  background-position: -983px 0px;
+
+.iti__bm {
+  --iti-flag-offset: -416px;
 }
-.iti__flag.iti__cl {
-  height: 14px;
-  background-position: -1005px 0px;
+
+.iti__bn {
+  --iti-flag-offset: -432px;
 }
-.iti__flag.iti__cm {
-  height: 14px;
-  background-position: -1027px 0px;
+
+.iti__bo {
+  --iti-flag-offset: -448px;
 }
-.iti__flag.iti__cn {
-  height: 14px;
-  background-position: -1049px 0px;
+
+.iti__bq {
+  --iti-flag-offset: -464px;
 }
-.iti__flag.iti__co {
-  height: 14px;
-  background-position: -1071px 0px;
+
+.iti__br {
+  --iti-flag-offset: -480px;
 }
-.iti__flag.iti__cp {
-  height: 14px;
-  background-position: -1093px 0px;
+
+.iti__bs {
+  --iti-flag-offset: -496px;
 }
-.iti__flag.iti__cq {
-  height: 12px;
-  background-position: -1115px 0px;
+
+.iti__bt {
+  --iti-flag-offset: -512px;
 }
-.iti__flag.iti__cr {
-  height: 12px;
-  background-position: -1137px 0px;
+
+.iti__bw {
+  --iti-flag-offset: -528px;
 }
-.iti__flag.iti__cu {
-  height: 10px;
-  background-position: -1159px 0px;
+
+.iti__by {
+  --iti-flag-offset: -544px;
 }
-.iti__flag.iti__cv {
-  height: 12px;
-  background-position: -1181px 0px;
+
+.iti__bz {
+  --iti-flag-offset: -560px;
 }
-.iti__flag.iti__cw {
-  height: 14px;
-  background-position: -1203px 0px;
+
+.iti__ca {
+  --iti-flag-offset: -576px;
 }
-.iti__flag.iti__cx {
-  height: 10px;
-  background-position: -1225px 0px;
+
+.iti__cc {
+  --iti-flag-offset: -592px;
 }
-.iti__flag.iti__cy {
-  height: 14px;
-  background-position: -1247px 0px;
+
+.iti__cd {
+  --iti-flag-offset: -608px;
 }
-.iti__flag.iti__cz {
-  height: 14px;
-  background-position: -1269px 0px;
+
+.iti__cf {
+  --iti-flag-offset: -624px;
 }
-.iti__flag.iti__de {
-  height: 12px;
-  background-position: -1291px 0px;
+
+.iti__cg {
+  --iti-flag-offset: -640px;
 }
-.iti__flag.iti__dg {
-  height: 10px;
-  background-position: -1313px 0px;
+
+.iti__ch {
+  --iti-flag-offset: -656px;
 }
-.iti__flag.iti__dj {
-  height: 14px;
-  background-position: -1335px 0px;
+
+.iti__ci {
+  --iti-flag-offset: -672px;
 }
-.iti__flag.iti__dk {
-  height: 15px;
-  background-position: -1357px 0px;
+
+.iti__ck {
+  --iti-flag-offset: -688px;
 }
-.iti__flag.iti__dm {
-  height: 10px;
-  background-position: -1379px 0px;
+
+.iti__cl {
+  --iti-flag-offset: -704px;
 }
-.iti__flag.iti__do {
-  height: 14px;
-  background-position: -1401px 0px;
+
+.iti__cm {
+  --iti-flag-offset: -720px;
 }
-.iti__flag.iti__dz {
-  height: 14px;
-  background-position: -1423px 0px;
+
+.iti__cn {
+  --iti-flag-offset: -736px;
 }
-.iti__flag.iti__ea {
-  height: 14px;
-  background-position: -1445px 0px;
+
+.iti__co {
+  --iti-flag-offset: -752px;
 }
-.iti__flag.iti__ec {
-  height: 14px;
-  background-position: -1467px 0px;
+
+.iti__cr {
+  --iti-flag-offset: -768px;
 }
-.iti__flag.iti__ee {
-  height: 13px;
-  background-position: -1489px 0px;
+
+.iti__cu {
+  --iti-flag-offset: -784px;
 }
-.iti__flag.iti__eg {
-  height: 14px;
-  background-position: -1511px 0px;
+
+.iti__cv {
+  --iti-flag-offset: -800px;
 }
-.iti__flag.iti__eh {
-  height: 10px;
-  background-position: -1533px 0px;
+
+.iti__cw {
+  --iti-flag-offset: -816px;
 }
-.iti__flag.iti__er {
-  height: 10px;
-  background-position: -1555px 0px;
+
+.iti__cx {
+  --iti-flag-offset: -832px;
 }
-.iti__flag.iti__es {
-  height: 14px;
-  background-position: -1577px 0px;
+
+.iti__cy {
+  --iti-flag-offset: -848px;
 }
-.iti__flag.iti__et {
-  height: 10px;
-  background-position: -1599px 0px;
+
+.iti__cz {
+  --iti-flag-offset: -864px;
 }
-.iti__flag.iti__eu {
-  height: 14px;
-  background-position: -1621px 0px;
+
+.iti__de {
+  --iti-flag-offset: -880px;
 }
-.iti__flag.iti__ez {
-  height: 14px;
-  background-position: -1643px 0px;
+
+.iti__dj {
+  --iti-flag-offset: -896px;
 }
-.iti__flag.iti__fi {
-  height: 12px;
-  background-position: -1665px 0px;
+
+.iti__dk {
+  --iti-flag-offset: -912px;
 }
-.iti__flag.iti__fj {
-  height: 10px;
-  background-position: -1687px 0px;
+
+.iti__dm {
+  --iti-flag-offset: -928px;
 }
-.iti__flag.iti__fk {
-  height: 10px;
-  background-position: -1709px 0px;
+
+.iti__do {
+  --iti-flag-offset: -944px;
 }
-.iti__flag.iti__fm {
-  height: 11px;
-  background-position: -1731px 0px;
+
+.iti__dz {
+  --iti-flag-offset: -960px;
 }
-.iti__flag.iti__fo {
-  height: 15px;
-  background-position: -1753px 0px;
+
+.iti__ec {
+  --iti-flag-offset: -976px;
 }
-.iti__flag.iti__fr {
-  height: 14px;
-  background-position: -1775px 0px;
+
+.iti__ee {
+  --iti-flag-offset: -992px;
 }
-.iti__flag.iti__fx {
-  height: 14px;
-  background-position: -1797px 0px;
+
+.iti__eg {
+  --iti-flag-offset: -1008px;
 }
-.iti__flag.iti__ga {
-  height: 15px;
-  background-position: -1819px 0px;
+
+.iti__eh {
+  --iti-flag-offset: -1024px;
 }
-.iti__flag.iti__gb {
-  height: 10px;
-  background-position: -1841px 0px;
+
+.iti__er {
+  --iti-flag-offset: -1040px;
 }
-.iti__flag.iti__gd {
-  height: 12px;
-  background-position: -1863px 0px;
+
+.iti__es {
+  --iti-flag-offset: -1056px;
 }
-.iti__flag.iti__ge {
-  height: 14px;
-  background-position: -1885px 0px;
+
+.iti__et {
+  --iti-flag-offset: -1072px;
 }
-.iti__flag.iti__gf {
-  height: 14px;
-  background-position: -1907px 0px;
+
+.iti__fi {
+  --iti-flag-offset: -1088px;
 }
-.iti__flag.iti__gg {
-  height: 14px;
-  background-position: -1929px 0px;
+
+.iti__fj {
+  --iti-flag-offset: -1104px;
 }
-.iti__flag.iti__gh {
-  height: 14px;
-  background-position: -1951px 0px;
+
+.iti__fk {
+  --iti-flag-offset: -1120px;
 }
-.iti__flag.iti__gi {
-  height: 10px;
-  background-position: -1973px 0px;
+
+.iti__fm {
+  --iti-flag-offset: -1136px;
 }
-.iti__flag.iti__gl {
-  height: 14px;
-  background-position: -1995px 0px;
+
+.iti__fo {
+  --iti-flag-offset: -1152px;
 }
-.iti__flag.iti__gm {
-  height: 14px;
-  background-position: -2017px 0px;
+
+.iti__fr {
+  --iti-flag-offset: -1168px;
 }
-.iti__flag.iti__gn {
-  height: 14px;
-  background-position: -2039px 0px;
+
+.iti__ga {
+  --iti-flag-offset: -1184px;
 }
-.iti__flag.iti__gp {
-  height: 14px;
-  background-position: -2061px 0px;
+
+.iti__gb {
+  --iti-flag-offset: -1200px;
 }
-.iti__flag.iti__gq {
-  height: 14px;
-  background-position: -2083px 0px;
+
+.iti__gd {
+  --iti-flag-offset: -1216px;
 }
-.iti__flag.iti__gr {
-  height: 14px;
-  background-position: -2105px 0px;
+
+.iti__ge {
+  --iti-flag-offset: -1232px;
 }
-.iti__flag.iti__gs {
-  height: 10px;
-  background-position: -2127px 0px;
+
+.iti__gf {
+  --iti-flag-offset: -1248px;
 }
-.iti__flag.iti__gt {
-  height: 13px;
-  background-position: -2149px 0px;
+
+.iti__gg {
+  --iti-flag-offset: -1264px;
 }
-.iti__flag.iti__gu {
-  height: 11px;
-  background-position: -2171px 0px;
+
+.iti__gh {
+  --iti-flag-offset: -1280px;
 }
-.iti__flag.iti__gw {
-  height: 10px;
-  background-position: -2193px 0px;
+
+.iti__gi {
+  --iti-flag-offset: -1296px;
 }
-.iti__flag.iti__gy {
-  height: 12px;
-  background-position: -2215px 0px;
+
+.iti__gl {
+  --iti-flag-offset: -1312px;
 }
-.iti__flag.iti__hk {
-  height: 14px;
-  background-position: -2237px 0px;
+
+.iti__gm {
+  --iti-flag-offset: -1328px;
 }
-.iti__flag.iti__hm {
-  height: 10px;
-  background-position: -2259px 0px;
+
+.iti__gn {
+  --iti-flag-offset: -1344px;
 }
-.iti__flag.iti__hn {
-  height: 10px;
-  background-position: -2281px 0px;
+
+.iti__gp {
+  --iti-flag-offset: -1360px;
 }
-.iti__flag.iti__hr {
-  height: 10px;
-  background-position: -2303px 0px;
+
+.iti__gq {
+  --iti-flag-offset: -1376px;
 }
-.iti__flag.iti__ht {
-  height: 12px;
-  background-position: -2325px 0px;
+
+.iti__gr {
+  --iti-flag-offset: -1392px;
 }
-.iti__flag.iti__hu {
-  height: 10px;
-  background-position: -2347px 0px;
+
+.iti__gt {
+  --iti-flag-offset: -1408px;
 }
-.iti__flag.iti__ic {
-  height: 14px;
-  background-position: -2369px 0px;
+
+.iti__gu {
+  --iti-flag-offset: -1424px;
 }
-.iti__flag.iti__id {
-  height: 14px;
-  background-position: -2391px 0px;
+
+.iti__gw {
+  --iti-flag-offset: -1440px;
 }
-.iti__flag.iti__ie {
-  height: 10px;
-  background-position: -2413px 0px;
+
+.iti__gy {
+  --iti-flag-offset: -1456px;
 }
-.iti__flag.iti__il {
-  height: 15px;
-  background-position: -2435px 0px;
+
+.iti__hk {
+  --iti-flag-offset: -1472px;
 }
-.iti__flag.iti__im {
-  height: 10px;
-  background-position: -2457px 0px;
+
+.iti__hn {
+  --iti-flag-offset: -1488px;
 }
-.iti__flag.iti__in {
-  height: 14px;
-  background-position: -2479px 0px;
+
+.iti__hr {
+  --iti-flag-offset: -1504px;
 }
-.iti__flag.iti__io {
-  height: 10px;
-  background-position: -2501px 0px;
+
+.iti__ht {
+  --iti-flag-offset: -1520px;
 }
-.iti__flag.iti__iq {
-  height: 14px;
-  background-position: -2523px 0px;
+
+.iti__hu {
+  --iti-flag-offset: -1536px;
 }
-.iti__flag.iti__ir {
-  height: 12px;
-  background-position: -2545px 0px;
+
+.iti__id {
+  --iti-flag-offset: -1552px;
 }
-.iti__flag.iti__is {
-  height: 15px;
-  background-position: -2567px 0px;
+
+.iti__ie {
+  --iti-flag-offset: -1568px;
 }
-.iti__flag.iti__it {
-  height: 14px;
-  background-position: -2589px 0px;
+
+.iti__il {
+  --iti-flag-offset: -1584px;
 }
-.iti__flag.iti__je {
-  height: 12px;
-  background-position: -2611px 0px;
+
+.iti__im {
+  --iti-flag-offset: -1600px;
 }
-.iti__flag.iti__jm {
-  height: 10px;
-  background-position: -2633px 0px;
+
+.iti__in {
+  --iti-flag-offset: -1616px;
 }
-.iti__flag.iti__jo {
-  height: 10px;
-  background-position: -2655px 0px;
+
+.iti__io {
+  --iti-flag-offset: -1632px;
 }
-.iti__flag.iti__jp {
-  height: 14px;
-  background-position: -2677px 0px;
+
+.iti__iq {
+  --iti-flag-offset: -1648px;
 }
-.iti__flag.iti__ke {
-  height: 14px;
-  background-position: -2699px 0px;
+
+.iti__ir {
+  --iti-flag-offset: -1664px;
 }
-.iti__flag.iti__kg {
-  height: 12px;
-  background-position: -2721px 0px;
+
+.iti__is {
+  --iti-flag-offset: -1680px;
 }
-.iti__flag.iti__kh {
-  height: 13px;
-  background-position: -2743px 0px;
+
+.iti__it {
+  --iti-flag-offset: -1696px;
 }
-.iti__flag.iti__ki {
-  height: 10px;
-  background-position: -2765px 0px;
+
+.iti__je {
+  --iti-flag-offset: -1712px;
 }
-.iti__flag.iti__km {
-  height: 12px;
-  background-position: -2787px 0px;
+
+.iti__jm {
+  --iti-flag-offset: -1728px;
 }
-.iti__flag.iti__kn {
-  height: 14px;
-  background-position: -2809px 0px;
+
+.iti__jo {
+  --iti-flag-offset: -1744px;
 }
-.iti__flag.iti__kp {
-  height: 10px;
-  background-position: -2831px 0px;
+
+.iti__jp {
+  --iti-flag-offset: -1760px;
 }
-.iti__flag.iti__kr {
-  height: 14px;
-  background-position: -2853px 0px;
+
+.iti__ke {
+  --iti-flag-offset: -1776px;
 }
-.iti__flag.iti__kw {
-  height: 10px;
-  background-position: -2875px 0px;
+
+.iti__kg {
+  --iti-flag-offset: -1792px;
 }
-.iti__flag.iti__ky {
-  height: 10px;
-  background-position: -2897px 0px;
+
+.iti__kh {
+  --iti-flag-offset: -1808px;
 }
-.iti__flag.iti__kz {
-  height: 10px;
-  background-position: -2919px 0px;
+
+.iti__ki {
+  --iti-flag-offset: -1824px;
 }
-.iti__flag.iti__la {
-  height: 14px;
-  background-position: -2941px 0px;
+
+.iti__km {
+  --iti-flag-offset: -1840px;
 }
-.iti__flag.iti__lb {
-  height: 14px;
-  background-position: -2963px 0px;
+
+.iti__kn {
+  --iti-flag-offset: -1856px;
 }
-.iti__flag.iti__lc {
-  height: 10px;
-  background-position: -2985px 0px;
+
+.iti__kp {
+  --iti-flag-offset: -1872px;
 }
-.iti__flag.iti__li {
-  height: 12px;
-  background-position: -3007px 0px;
+
+.iti__kr {
+  --iti-flag-offset: -1888px;
 }
-.iti__flag.iti__lk {
-  height: 10px;
-  background-position: -3029px 0px;
+
+.iti__kw {
+  --iti-flag-offset: -1904px;
 }
-.iti__flag.iti__lr {
-  height: 11px;
-  background-position: -3051px 0px;
+
+.iti__ky {
+  --iti-flag-offset: -1920px;
 }
-.iti__flag.iti__ls {
-  height: 14px;
-  background-position: -3073px 0px;
+
+.iti__kz {
+  --iti-flag-offset: -1936px;
 }
-.iti__flag.iti__lt {
-  height: 12px;
-  background-position: -3095px 0px;
+
+.iti__la {
+  --iti-flag-offset: -1952px;
 }
-.iti__flag.iti__lu {
-  height: 12px;
-  background-position: -3117px 0px;
+
+.iti__lb {
+  --iti-flag-offset: -1968px;
 }
-.iti__flag.iti__lv {
-  height: 10px;
-  background-position: -3139px 0px;
+
+.iti__lc {
+  --iti-flag-offset: -1984px;
 }
-.iti__flag.iti__ly {
-  height: 10px;
-  background-position: -3161px 0px;
+
+.iti__li {
+  --iti-flag-offset: -2000px;
 }
-.iti__flag.iti__ma {
-  height: 14px;
-  background-position: -3183px 0px;
+
+.iti__lk {
+  --iti-flag-offset: -2016px;
 }
-.iti__flag.iti__mc {
-  height: 15px;
-  background-position: -3205px 0px;
+
+.iti__lr {
+  --iti-flag-offset: -2032px;
 }
-.iti__flag.iti__md {
-  height: 10px;
-  background-position: -3226px 0px;
+
+.iti__ls {
+  --iti-flag-offset: -2048px;
 }
-.iti__flag.iti__me {
-  height: 10px;
-  background-position: -3248px 0px;
+
+.iti__lt {
+  --iti-flag-offset: -2064px;
 }
-.iti__flag.iti__mf {
-  height: 14px;
-  background-position: -3270px 0px;
+
+.iti__lu {
+  --iti-flag-offset: -2080px;
 }
-.iti__flag.iti__mg {
-  height: 14px;
-  background-position: -3292px 0px;
+
+.iti__lv {
+  --iti-flag-offset: -2096px;
 }
-.iti__flag.iti__mh {
-  height: 11px;
-  background-position: -3314px 0px;
+
+.iti__ly {
+  --iti-flag-offset: -2112px;
 }
-.iti__flag.iti__mk {
-  height: 10px;
-  background-position: -3336px 0px;
+
+.iti__ma {
+  --iti-flag-offset: -2128px;
 }
-.iti__flag.iti__ml {
-  height: 14px;
-  background-position: -3358px 0px;
+
+.iti__mc {
+  --iti-flag-offset: -2144px;
 }
-.iti__flag.iti__mm {
-  height: 14px;
-  background-position: -3380px 0px;
+
+.iti__md {
+  --iti-flag-offset: -2160px;
 }
-.iti__flag.iti__mn {
-  height: 10px;
-  background-position: -3402px 0px;
+
+.iti__me {
+  --iti-flag-offset: -2176px;
 }
-.iti__flag.iti__mo {
-  height: 14px;
-  background-position: -3424px 0px;
+
+.iti__mf {
+  --iti-flag-offset: -2192px;
 }
-.iti__flag.iti__mp {
-  height: 10px;
-  background-position: -3446px 0px;
+
+.iti__mg {
+  --iti-flag-offset: -2208px;
 }
-.iti__flag.iti__mq {
-  height: 14px;
-  background-position: -3468px 0px;
+
+.iti__mh {
+  --iti-flag-offset: -2224px;
 }
-.iti__flag.iti__mr {
-  height: 14px;
-  background-position: -3490px 0px;
+
+.iti__mk {
+  --iti-flag-offset: -2240px;
 }
-.iti__flag.iti__ms {
-  height: 10px;
-  background-position: -3512px 0px;
+
+.iti__ml {
+  --iti-flag-offset: -2256px;
 }
-.iti__flag.iti__mt {
-  height: 14px;
-  background-position: -3534px 0px;
+
+.iti__mm {
+  --iti-flag-offset: -2272px;
 }
-.iti__flag.iti__mu {
-  height: 14px;
-  background-position: -3556px 0px;
+
+.iti__mn {
+  --iti-flag-offset: -2288px;
 }
-.iti__flag.iti__mv {
-  height: 14px;
-  background-position: -3578px 0px;
+
+.iti__mo {
+  --iti-flag-offset: -2304px;
 }
-.iti__flag.iti__mw {
-  height: 14px;
-  background-position: -3600px 0px;
+
+.iti__mp {
+  --iti-flag-offset: -2320px;
 }
-.iti__flag.iti__mx {
-  height: 12px;
-  background-position: -3622px 0px;
+
+.iti__mq {
+  --iti-flag-offset: -2336px;
 }
-.iti__flag.iti__my {
-  height: 10px;
-  background-position: -3644px 0px;
+
+.iti__mr {
+  --iti-flag-offset: -2352px;
 }
-.iti__flag.iti__mz {
-  height: 14px;
-  background-position: -3666px 0px;
+
+.iti__ms {
+  --iti-flag-offset: -2368px;
 }
-.iti__flag.iti__na {
-  height: 14px;
-  background-position: -3688px 0px;
+
+.iti__mt {
+  --iti-flag-offset: -2384px;
 }
-.iti__flag.iti__nc {
-  height: 10px;
-  background-position: -3710px 0px;
+
+.iti__mu {
+  --iti-flag-offset: -2400px;
 }
-.iti__flag.iti__ne {
-  height: 15px;
-  background-position: -3732px 0px;
+
+.iti__mv {
+  --iti-flag-offset: -2416px;
 }
-.iti__flag.iti__nf {
-  height: 10px;
-  background-position: -3752px 0px;
+
+.iti__mw {
+  --iti-flag-offset: -2432px;
 }
-.iti__flag.iti__ng {
-  height: 10px;
-  background-position: -3774px 0px;
+
+.iti__mx {
+  --iti-flag-offset: -2448px;
 }
-.iti__flag.iti__ni {
-  height: 12px;
-  background-position: -3796px 0px;
+
+.iti__my {
+  --iti-flag-offset: -2464px;
 }
-.iti__flag.iti__nl {
-  height: 14px;
-  background-position: -3818px 0px;
+
+.iti__mz {
+  --iti-flag-offset: -2480px;
 }
-.iti__flag.iti__no {
-  height: 15px;
-  background-position: -3840px 0px;
+
+.iti__na {
+  --iti-flag-offset: -2496px;
 }
-.iti__flag.iti__np {
-  height: 15px;
-  background-position: -3862px 0px;
+
+.iti__nc {
+  --iti-flag-offset: -2512px;
 }
-.iti__flag.iti__nr {
-  height: 10px;
-  background-position: -3877px 0px;
+
+.iti__ne {
+  --iti-flag-offset: -2528px;
 }
-.iti__flag.iti__nu {
-  height: 10px;
-  background-position: -3899px 0px;
+
+.iti__nf {
+  --iti-flag-offset: -2544px;
 }
-.iti__flag.iti__nz {
-  height: 10px;
-  background-position: -3921px 0px;
+
+.iti__ng {
+  --iti-flag-offset: -2560px;
 }
-.iti__flag.iti__om {
-  height: 10px;
-  background-position: -3943px 0px;
+
+.iti__ni {
+  --iti-flag-offset: -2576px;
 }
-.iti__flag.iti__pa {
-  height: 14px;
-  background-position: -3965px 0px;
+
+.iti__nl {
+  --iti-flag-offset: -2592px;
 }
-.iti__flag.iti__pe {
-  height: 14px;
-  background-position: -3987px 0px;
+
+.iti__no {
+  --iti-flag-offset: -2608px;
 }
-.iti__flag.iti__pf {
-  height: 14px;
-  background-position: -4009px 0px;
+
+.iti__np {
+  --iti-flag-offset: -2624px;
 }
-.iti__flag.iti__pg {
-  height: 15px;
-  background-position: -4031px 0px;
+
+.iti__nr {
+  --iti-flag-offset: -2640px;
 }
-.iti__flag.iti__ph {
-  height: 10px;
-  background-position: -4053px 0px;
+
+.iti__nu {
+  --iti-flag-offset: -2656px;
 }
-.iti__flag.iti__pk {
-  height: 14px;
-  background-position: -4075px 0px;
+
+.iti__nz {
+  --iti-flag-offset: -2672px;
 }
-.iti__flag.iti__pl {
-  height: 13px;
-  background-position: -4097px 0px;
+
+.iti__om {
+  --iti-flag-offset: -2688px;
 }
-.iti__flag.iti__pm {
-  height: 14px;
-  background-position: -4119px 0px;
+
+.iti__pa {
+  --iti-flag-offset: -2704px;
 }
-.iti__flag.iti__pn {
-  height: 10px;
-  background-position: -4141px 0px;
+
+.iti__pe {
+  --iti-flag-offset: -2720px;
 }
-.iti__flag.iti__pr {
-  height: 14px;
-  background-position: -4163px 0px;
+
+.iti__pf {
+  --iti-flag-offset: -2736px;
 }
-.iti__flag.iti__ps {
-  height: 10px;
-  background-position: -4185px 0px;
+
+.iti__pg {
+  --iti-flag-offset: -2752px;
 }
-.iti__flag.iti__pt {
-  height: 14px;
-  background-position: -4207px 0px;
+
+.iti__ph {
+  --iti-flag-offset: -2768px;
 }
-.iti__flag.iti__pw {
-  height: 13px;
-  background-position: -4229px 0px;
+
+.iti__pk {
+  --iti-flag-offset: -2784px;
 }
-.iti__flag.iti__py {
-  height: 11px;
-  background-position: -4251px 0px;
+
+.iti__pl {
+  --iti-flag-offset: -2800px;
 }
-.iti__flag.iti__qa {
-  height: 8px;
-  background-position: -4273px 0px;
+
+.iti__pm {
+  --iti-flag-offset: -2816px;
 }
-.iti__flag.iti__re {
-  height: 14px;
-  background-position: -4295px 0px;
+
+.iti__pr {
+  --iti-flag-offset: -2832px;
 }
-.iti__flag.iti__ro {
-  height: 14px;
-  background-position: -4317px 0px;
+
+.iti__ps {
+  --iti-flag-offset: -2848px;
 }
-.iti__flag.iti__rs {
-  height: 14px;
-  background-position: -4339px 0px;
+
+.iti__pt {
+  --iti-flag-offset: -2864px;
 }
-.iti__flag.iti__ru {
-  height: 14px;
-  background-position: -4361px 0px;
+
+.iti__pw {
+  --iti-flag-offset: -2880px;
 }
-.iti__flag.iti__rw {
-  height: 14px;
-  background-position: -4383px 0px;
+
+.iti__py {
+  --iti-flag-offset: -2896px;
 }
-.iti__flag.iti__sa {
-  height: 14px;
-  background-position: -4405px 0px;
+
+.iti__qa {
+  --iti-flag-offset: -2912px;
 }
-.iti__flag.iti__sb {
-  height: 10px;
-  background-position: -4427px 0px;
+
+.iti__re {
+  --iti-flag-offset: -2928px;
 }
-.iti__flag.iti__sc {
-  height: 10px;
-  background-position: -4449px 0px;
+
+.iti__ro {
+  --iti-flag-offset: -2944px;
 }
-.iti__flag.iti__sd {
-  height: 10px;
-  background-position: -4471px 0px;
+
+.iti__rs {
+  --iti-flag-offset: -2960px;
 }
-.iti__flag.iti__se {
-  height: 13px;
-  background-position: -4493px 0px;
+
+.iti__ru {
+  --iti-flag-offset: -2976px;
 }
-.iti__flag.iti__sg {
-  height: 14px;
-  background-position: -4515px 0px;
+
+.iti__rw {
+  --iti-flag-offset: -2992px;
 }
-.iti__flag.iti__sh {
-  height: 10px;
-  background-position: -4537px 0px;
+
+.iti__sa {
+  --iti-flag-offset: -3008px;
 }
-.iti__flag.iti__si {
-  height: 10px;
-  background-position: -4559px 0px;
+
+.iti__sb {
+  --iti-flag-offset: -3024px;
 }
-.iti__flag.iti__sj {
-  height: 15px;
-  background-position: -4581px 0px;
+
+.iti__sc {
+  --iti-flag-offset: -3040px;
 }
-.iti__flag.iti__sk {
-  height: 14px;
-  background-position: -4603px 0px;
+
+.iti__sd {
+  --iti-flag-offset: -3056px;
 }
-.iti__flag.iti__sl {
-  height: 14px;
-  background-position: -4625px 0px;
+
+.iti__se {
+  --iti-flag-offset: -3072px;
 }
-.iti__flag.iti__sm {
-  height: 15px;
-  background-position: -4647px 0px;
+
+.iti__sg {
+  --iti-flag-offset: -3088px;
 }
-.iti__flag.iti__sn {
-  height: 14px;
-  background-position: -4669px 0px;
+
+.iti__sh {
+  --iti-flag-offset: -3104px;
 }
-.iti__flag.iti__so {
-  height: 14px;
-  background-position: -4691px 0px;
+
+.iti__si {
+  --iti-flag-offset: -3120px;
 }
-.iti__flag.iti__sr {
-  height: 14px;
-  background-position: -4713px 0px;
+
+.iti__sj {
+  --iti-flag-offset: -3136px;
 }
-.iti__flag.iti__ss {
-  height: 10px;
-  background-position: -4735px 0px;
+
+.iti__sk {
+  --iti-flag-offset: -3152px;
 }
-.iti__flag.iti__st {
-  height: 10px;
-  background-position: -4757px 0px;
+
+.iti__sl {
+  --iti-flag-offset: -3168px;
 }
-.iti__flag.iti__su {
-  height: 10px;
-  background-position: -4779px 0px;
+
+.iti__sm {
+  --iti-flag-offset: -3184px;
 }
-.iti__flag.iti__sv {
-  height: 12px;
-  background-position: -4801px 0px;
+
+.iti__sn {
+  --iti-flag-offset: -3200px;
 }
-.iti__flag.iti__sx {
-  height: 14px;
-  background-position: -4823px 0px;
+
+.iti__so {
+  --iti-flag-offset: -3216px;
 }
-.iti__flag.iti__sy {
-  height: 14px;
-  background-position: -4845px 0px;
+
+.iti__sr {
+  --iti-flag-offset: -3232px;
 }
-.iti__flag.iti__sz {
-  height: 14px;
-  background-position: -4867px 0px;
+
+.iti__ss {
+  --iti-flag-offset: -3248px;
 }
-.iti__flag.iti__ta {
-  height: 10px;
-  background-position: -4889px 0px;
+
+.iti__st {
+  --iti-flag-offset: -3264px;
 }
-.iti__flag.iti__tc {
-  height: 10px;
-  background-position: -4911px 0px;
+
+.iti__sv {
+  --iti-flag-offset: -3280px;
 }
-.iti__flag.iti__td {
-  height: 14px;
-  background-position: -4933px 0px;
+
+.iti__sx {
+  --iti-flag-offset: -3296px;
 }
-.iti__flag.iti__tf {
-  height: 14px;
-  background-position: -4955px 0px;
+
+.iti__sy {
+  --iti-flag-offset: -3312px;
 }
-.iti__flag.iti__tg {
-  height: 13px;
-  background-position: -4977px 0px;
+
+.iti__sz {
+  --iti-flag-offset: -3328px;
 }
-.iti__flag.iti__th {
-  height: 14px;
-  background-position: -4999px 0px;
+
+.iti__tc {
+  --iti-flag-offset: -3344px;
 }
-.iti__flag.iti__tj {
-  height: 10px;
-  background-position: -5021px 0px;
+
+.iti__td {
+  --iti-flag-offset: -3360px;
 }
-.iti__flag.iti__tk {
-  height: 10px;
-  background-position: -5043px 0px;
+
+.iti__tg {
+  --iti-flag-offset: -3376px;
 }
-.iti__flag.iti__tl {
-  height: 10px;
-  background-position: -5065px 0px;
+
+.iti__th {
+  --iti-flag-offset: -3392px;
 }
-.iti__flag.iti__tm {
-  height: 14px;
-  background-position: -5087px 0px;
+
+.iti__tj {
+  --iti-flag-offset: -3408px;
 }
-.iti__flag.iti__tn {
-  height: 14px;
-  background-position: -5109px 0px;
+
+.iti__tk {
+  --iti-flag-offset: -3424px;
 }
-.iti__flag.iti__to {
-  height: 10px;
-  background-position: -5131px 0px;
+
+.iti__tl {
+  --iti-flag-offset: -3440px;
 }
-.iti__flag.iti__tr {
-  height: 14px;
-  background-position: -5153px 0px;
+
+.iti__tm {
+  --iti-flag-offset: -3456px;
 }
-.iti__flag.iti__tt {
-  height: 12px;
-  background-position: -5175px 0px;
+
+.iti__tn {
+  --iti-flag-offset: -3472px;
 }
-.iti__flag.iti__tv {
-  height: 10px;
-  background-position: -5197px 0px;
+
+.iti__to {
+  --iti-flag-offset: -3488px;
 }
-.iti__flag.iti__tw {
-  height: 14px;
-  background-position: -5219px 0px;
+
+.iti__tr {
+  --iti-flag-offset: -3504px;
 }
-.iti__flag.iti__tz {
-  height: 14px;
-  background-position: -5241px 0px;
+
+.iti__tt {
+  --iti-flag-offset: -3520px;
 }
-.iti__flag.iti__ua {
-  height: 14px;
-  background-position: -5263px 0px;
+
+.iti__tv {
+  --iti-flag-offset: -3536px;
 }
-.iti__flag.iti__ug {
-  height: 14px;
-  background-position: -5285px 0px;
+
+.iti__tw {
+  --iti-flag-offset: -3552px;
 }
-.iti__flag.iti__uk {
-  height: 10px;
-  background-position: -5307px 0px;
+
+.iti__tz {
+  --iti-flag-offset: -3568px;
 }
-.iti__flag.iti__um {
-  height: 11px;
-  background-position: -5329px 0px;
+
+.iti__ua {
+  --iti-flag-offset: -3584px;
 }
-.iti__flag.iti__un {
-  height: 14px;
-  background-position: -5351px 0px;
+
+.iti__ug {
+  --iti-flag-offset: -3600px;
 }
-.iti__flag.iti__us {
-  height: 11px;
-  background-position: -5373px 0px;
+
+.iti__us {
+  --iti-flag-offset: -3616px;
 }
-.iti__flag.iti__uy {
-  height: 14px;
-  background-position: -5395px 0px;
+
+.iti__uy {
+  --iti-flag-offset: -3632px;
 }
-.iti__flag.iti__uz {
-  height: 10px;
-  background-position: -5417px 0px;
+
+.iti__uz {
+  --iti-flag-offset: -3648px;
 }
-.iti__flag.iti__va {
-  height: 15px;
-  background-position: -5439px 0px;
+
+.iti__va {
+  --iti-flag-offset: -3664px;
 }
-.iti__flag.iti__vc {
-  height: 14px;
-  background-position: -5456px 0px;
+
+.iti__vc {
+  --iti-flag-offset: -3680px;
 }
-.iti__flag.iti__ve {
-  height: 14px;
-  background-position: -5478px 0px;
+
+.iti__ve {
+  --iti-flag-offset: -3696px;
 }
-.iti__flag.iti__vg {
-  height: 10px;
-  background-position: -5500px 0px;
+
+.iti__vg {
+  --iti-flag-offset: -3712px;
 }
-.iti__flag.iti__vi {
-  height: 14px;
-  background-position: -5522px 0px;
+
+.iti__vi {
+  --iti-flag-offset: -3728px;
 }
-.iti__flag.iti__vn {
-  height: 14px;
-  background-position: -5544px 0px;
+
+.iti__vn {
+  --iti-flag-offset: -3744px;
 }
-.iti__flag.iti__vu {
-  height: 12px;
-  background-position: -5566px 0px;
+
+.iti__vu {
+  --iti-flag-offset: -3760px;
 }
-.iti__flag.iti__wf {
-  height: 14px;
-  background-position: -5588px 0px;
+
+.iti__wf {
+  --iti-flag-offset: -3776px;
 }
-.iti__flag.iti__ws {
-  height: 10px;
-  background-position: -5610px 0px;
+
+.iti__ws {
+  --iti-flag-offset: -3792px;
 }
-.iti__flag.iti__xk {
-  height: 15px;
-  background-position: -5632px 0px;
+
+.iti__xk {
+  --iti-flag-offset: -3808px;
 }
-.iti__flag.iti__ye {
-  height: 14px;
-  background-position: -5654px 0px;
+
+.iti__ye {
+  --iti-flag-offset: -3824px;
 }
-.iti__flag.iti__yt {
-  height: 14px;
-  background-position: -5676px 0px;
+
+.iti__yt {
+  --iti-flag-offset: -3840px;
 }
-.iti__flag.iti__za {
-  height: 14px;
-  background-position: -5698px 0px;
+
+.iti__za {
+  --iti-flag-offset: -3856px;
 }
-.iti__flag.iti__zm {
-  height: 14px;
-  background-position: -5720px 0px;
+
+.iti__zm {
+  --iti-flag-offset: -3872px;
 }
-.iti__flag.iti__zw {
-  height: 10px;
-  background-position: -5742px 0px;
+
+.iti__zw {
+  --iti-flag-offset: -3888px;
 }
 
-.iti__flag {
-  height: 15px;
-  box-shadow: 0px 0px 1px 0px #888;
-  background-repeat: no-repeat;
-  background-color: #dbdbdb;
-  background-position: 20px 0;
+.iti__globe {
+  background-image: var(--iti-path-globe-1x);
+  background-size: contain;
+  background-position: right;
+  box-shadow: none;
+  height: 19px;
 }
 
-.iti__flag.iti__np {
-  background-color: transparent;
+@media (min-resolution: 2x) {
+  .iti__flag {
+    background-image: var(--iti-path-flags-2x);
+  }
+  .iti__globe {
+    background-image: var(--iti-path-globe-2x);
+  }
 }
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts b/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
index 7215d16eba..168ba33c65 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
@@ -1 +1,4 @@
-declare module 'intl-tel-input'
\ No newline at end of file
+declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
+    const intlTelInput: any;
+    export default intlTelInput;
+}
\ No newline at end of file
diff --git a/playbook/package.json b/playbook/package.json
index 7912739d79..8888bd9e13 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -39,7 +39,7 @@
     "flatpickr": "^4.6.13",
     "highcharts": "^11.4.8",
     "highcharts-react-official": "^3.2.1",
-    "intl-tel-input": "^18.0.15"
+    "intl-tel-input": "^24.6.0"
   },
   "devDependencies": {
     "@actions/core": "1.10.0",
diff --git a/yarn.lock b/yarn.lock
index a06995b3b4..bc890a2c0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7324,10 +7324,10 @@ intersection-observer@^0.10.0:
   resolved "https://npm.powerapp.cloud/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
   integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
 
-intl-tel-input@^18.0.15:
-  version "18.5.3"
-  resolved "https://npm.powerapp.cloud/intl-tel-input/-/intl-tel-input-18.5.3.tgz#20b18431cb802d33c118f52e332e218e641ec09b"
-  integrity sha512-ncFqSpkdGf2YC/FvAiwBH44KAeRG8L7aqDODEpOvMAT3ZpBtvc/WtwaQ/6X4+HKDTlGkobdBjr6P3nAMwO8jtA==
+intl-tel-input@^24.6.0:
+  version "24.6.0"
+  resolved "https://npm.powerapp.cloud/intl-tel-input/-/intl-tel-input-24.6.0.tgz#f3b070b337f6981493b2c3b9d28e31828ce32a2f"
+  integrity sha512-3ZlxJk7IOhNCRRxGrAcGiP1uzZFaDEQUIHNHk516RORZpOoPh1kqZP8ksE8nm+/5HZk+tRV7F/iex0aWnkkixQ==
 
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"

From 8141506df0837cadb89c625419efb44544e91fbc Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Wed, 23 Oct 2024 09:25:16 -0400
Subject: [PATCH 8/9] Version Bump 14.6.0 (#3835)

Version bump PR
---
 playbook-website/Gemfile.lock    | 2 +-
 playbook/Gemfile.lock            | 2 +-
 playbook/lib/playbook/version.rb | 4 ++--
 playbook/package.json            | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/playbook-website/Gemfile.lock b/playbook-website/Gemfile.lock
index 4bc4e355a4..dde6ef761d 100644
--- a/playbook-website/Gemfile.lock
+++ b/playbook-website/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ../playbook
   specs:
-    playbook_ui (14.5.0)
+    playbook_ui (14.6.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)
diff --git a/playbook/Gemfile.lock b/playbook/Gemfile.lock
index 5faece6284..98fa51d2da 100644
--- a/playbook/Gemfile.lock
+++ b/playbook/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    playbook_ui (14.5.0)
+    playbook_ui (14.6.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)
diff --git a/playbook/lib/playbook/version.rb b/playbook/lib/playbook/version.rb
index 79c9d8f37a..97fbbe200c 100644
--- a/playbook/lib/playbook/version.rb
+++ b/playbook/lib/playbook/version.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "14.4.0"
-  VERSION = "14.5.0"
+  PREVIOUS_VERSION = "14.5.0"
+  VERSION = "14.6.0"
 end
diff --git a/playbook/package.json b/playbook/package.json
index 8888bd9e13..bf8236bca2 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playbook-ui",
-  "version": "14.5.0",
+  "version": "14.6.0",
   "description": "Nitro's Design System",
   "main": "./dist/playbook.js",
   "types": "./dist/types/index.d.ts",

From 70085cc41c37a21b47619b46ca8c463687e623af Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Wed, 23 Oct 2024 12:52:17 -0400
Subject: [PATCH 9/9] Revert "[PLAY-1581] Height, minHeight, maxHeight for
 Card, Flex, FlexItem, & Dialog" (#3842)

Reverts powerhome/playbook#3749
---
 .../app/pb_kits/playbook/pb_card/_card.tsx    |  6 +--
 .../pb_kits/playbook/pb_dialog/_dialog.tsx    |  6 +--
 .../app/pb_kits/playbook/pb_flex/_flex.tsx    |  4 +-
 .../pb_kits/playbook/pb_flex/_flex_item.tsx   | 10 +----
 .../playbook/pb_flex/flex_item.html.erb       |  9 ++--
 .../app/pb_kits/playbook/pb_flex/flex_item.rb |  9 +---
 .../pb_kits/playbook/pb_popover/_popover.tsx  |  2 +-
 .../playbook/utilities/globalPropNames.mjs    |  3 --
 .../pb_kits/playbook/utilities/globalProps.ts | 41 +------------------
 playbook/lib/playbook/kit_base.rb             | 22 +---------
 10 files changed, 17 insertions(+), 95 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 4c0a4eb6f5..149130d8b2 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,7 +49,6 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
-
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -108,7 +107,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
-  const dynamicInlineProps = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -137,7 +135,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
-            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -166,7 +163,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
-              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
index 32e5443019..e25eb702ae 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,8 +91,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
-  const dynamicInlineProps = globalInlineProps(props); 
-
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -186,7 +184,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
-            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -195,7 +192,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
-              
               >
                 <Flex align="center"
                     orientation="column"
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
index d5de3e6067..e683f5407a 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
+++ b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,7 +61,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -84,7 +83,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
-        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
index b8a27e9704..6c61d55cb0 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
+++ b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,20 +35,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
-  const dynamicInlineProps = globalInlineProps(props)
-  const combinedStyles = {
-    ...fixedStyle,
-    ...dynamicInlineProps
-  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={combinedStyles}
+        style={fixedStyle}
     >
       {children}
     </div>
diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
index 96c6c7af2f..240e1ce109 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div, 
-  style: object.inline_styles
-) do %> 
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
index caa11d6c9f..dc99471511 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
@@ -20,13 +20,8 @@ def classname
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def inline_styles
-        styles = []
-        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
-        styles << "height: #{height};" if height.present?
-        styles << "min-height: #{min_height};" if min_height.present?
-        styles << "max-height: #{max_height};" if max_height.present?
-        styles.join(" ")
+      def style_value
+        "flex-basis: #{fixed_size};" if fixed_size.present?
       end
 
     private
diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
index 4cf9eec90a..d67921b5c7 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
diff --git a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
index a9f5db1490..d41b00be0b 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
+++ b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
@@ -1,7 +1,4 @@
 export default [
-  "minHeight",
-  "maxHeight",
-  "height",
   "left",
   "bottom",
   "right",
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index b4b093fa5b..9dd67b7223 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -170,24 +170,12 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
-type Height = {
-  height?: string 
-}
-
-type MaxHeight = {
-  maxHeight?: string
-}
-
-type MinHeight = {
-  minHeight?: string
-}
-
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -510,22 +498,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  },
-
-}
-
-const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
-  heightProps: ({ height }: Height) => {
-    return height ? { height } : {}; 
-  },
-
-  maxHeightProps: ({ maxHeight }: MaxHeight) => {
-    return maxHeight ? { maxHeight } : {};
-  },
-
-  minHeightProps: ({ minHeight }: MinHeight) => {
-    return minHeight ? { minHeight } : {}; 
-  },
+  }
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -537,16 +510,6 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
-// New function for inline styles
-export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
-  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
-    const result = PROP_INLINE_CATEGORIES[key](props);
-    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
-  }, {});
-
-  return styles; // Return the styles object directly
-}
-
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 8920188997..470a296929 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -73,10 +73,6 @@ class KitBase < ViewComponent::Base
     prop :aria, type: Playbook::Props::HashProp, default: {}
     prop :html_options, type: Playbook::Props::HashProp, default: {}
     prop :children, type: Playbook::Props::Proc
-    prop :style, type: Playbook::Props::HashProp, default: {}
-    prop :height
-    prop :min_height
-    prop :max_height
 
     def object
       self
@@ -86,14 +82,6 @@ def combined_html_options
       default_html_options.merge(html_options.deep_merge(data_attributes))
     end
 
-    def global_inline_props
-      {
-        height: height,
-        min_height: min_height,
-        max_height: max_height,
-      }.compact
-    end
-
     # rubocop:disable Layout/CommentIndentation
     # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
     # The pb_content_tag generates HTML content tags for rails kits with flexible options.
@@ -125,15 +113,12 @@ def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}
   private
 
     def default_options
-      options = {
+      {
         id: id,
         data: data,
         class: classname,
         aria: aria,
       }
-      inline_styles = dynamic_inline_props
-      options[:style] = inline_styles if inline_styles.present?
-      options
     end
 
     def default_html_options
@@ -146,10 +131,5 @@ def data_attributes
         aria: aria,
       }.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
     end
-
-    def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" if value.present? }.compact
-      styles.join(" ").presence
-    end
   end
 end