From 1ec84ae4f40f8b287865ee7618a5e75cfc76d89c Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Fri, 4 Oct 2024 12:43:02 -0400
Subject: [PATCH 01/31] Update CHANGELOG.md 14.5.0 (#3750)

**What does this PR do?** A clear and concise description with your
runway ticket url.


**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/CHANGELOG.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/playbook/CHANGELOG.md b/playbook/CHANGELOG.md
index 75c3509657..7080805df6 100644
--- a/playbook/CHANGELOG.md
+++ b/playbook/CHANGELOG.md
@@ -1,3 +1,40 @@
+# 🐝 Improved Usability, Flexibility, Customization and More! 🐝
+##### October 1, 2024 
+
+![1450](https://github.com/user-attachments/assets/04a54556-9148-4a9e-8ff2-4902c59aef18)
+
+We’re back! 14.5.0 is live in Nitro and is packed with improvements, bug fixes and more! 
+This release focuses on continued improvements to usability, customization, and visual consistency!
+
+[14.5.0](https://github.com/powerhome/playbook/tree/14.5.0) full list of changes:
+
+**Kit Enhancements:**
+- Enable Kits Instead of Text for Radio Label - React Only [\#3691](https://github.com/powerhome/playbook/pull/3691) ([nickamantia](https://github.com/nickamantia))
+- Remove marginBottom from Typeahead Kit [\#3680](https://github.com/powerhome/playbook/pull/3680) ([elisashapiro](https://github.com/elisashapiro))
+
+
+**Fixed Bugs:**
+- Fixing Minimizing the Dropdown When Clicking Outside [\#3688](https://github.com/powerhome/playbook/pull/3688) ([carloslimasd](https://github.com/carloslimasd))
+- Make Dialog Close 'x' Icons Same Size [\#3706](https://github.com/powerhome/playbook/pull/3706) ([kangaree](https://github.com/kangaree))
+
+
+
+**Improvements:**
+- Bump Highcharts Packages to Latest [\#3708](https://github.com/powerhome/playbook/pull/3708) ([kangaree](https://github.com/kangaree))
+- Remove FA from the Playbook Website [\#3687](https://github.com/powerhome/playbook/pull/3687) ([skduncan](https://github.com/skduncan))
+- Add Comment When Merge to Master for RC [\#3727](https://github.com/powerhome/playbook/pull/3727) ([markdoeswork](https://github.com/markdoeswork))
+- Fix Spacing on Radio kit Children Doc Example [\#3730](https://github.com/powerhome/playbook/pull/3730) ([elisashapiro](https://github.com/elisashapiro))
+- Add Multiple Pagination Components Example and Dynamic Key Copy [\#3715](https://github.com/powerhome/playbook/pull/3715) ([elisashapiro](https://github.com/elisashapiro))
+- Bump to ci-kubed v8.6.0 [no-cache] [\#3639](https://github.com/powerhome/playbook/pull/3639) ([TeamTeaTime](https://github.com/TeamTeaTime))
+- Add Comment Script for RCs [\#3717](https://github.com/powerhome/playbook/pull/3717) ([markdoeswork](https://github.com/markdoeswork))
+- Use New Icons [\#3648](https://github.com/powerhome/playbook/pull/3648) ([markdoeswork](https://github.com/markdoeswork))
+
+**New Kits:**
+- Drawer Beta Kit [\#3686](https://github.com/powerhome/playbook/pull/3686) ([markdoeswork](https://github.com/markdoeswork))
+
+
+[Full Changelog](https://github.com/powerhome/playbook/compare/14.4.0...14.5.0)
+
 # Spot Everyone at a Glance: Meet the New Multiple Users Component!
 ##### September 18, 2024 
 

From caa3c8ad471a78490a0c39f92220551889ceebe0 Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Fri, 4 Oct 2024 13:24:17 -0400
Subject: [PATCH 02/31] [PBNTR-529] Children for MultiLevelSelect (#3661)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[Runway Story](https://runway.powerhrg.com/backlog_items/PBNTR-529)

This PR:
- ✅ Creates MultiLevelSelect.Options subcomponent
- ✅ Backwards compatible so none subcomponent structure also works
- ✅ Render children next to Checkbox/Radios

<img width="855" alt="Screenshot 2024-10-01 at 9 41 45 PM"
src="https://github.com/user-attachments/assets/20ff1dac-0173-4e0e-8396-ed43d70c530c">

<img width="825" alt="Screenshot 2024-10-01 at 9 42 02 PM"
src="https://github.com/user-attachments/assets/f5fa5c6f-e4fd-4409-a53f-5ef838dc53d3">
---
 .../_multi_level_select.tsx                   | 423 ++++++++----------
 .../pb_multi_level_select/context/index.tsx   |   5 +
 .../docs/_multi_level_select_default.jsx      |   2 +-
 .../_multi_level_select_with_children.jsx     | 105 +++++
 .../docs/_multi_level_select_with_children.md |   1 +
 ...level_select_with_children_with_radios.jsx | 106 +++++
 ..._level_select_with_children_with_radios.md |   1 +
 .../pb_multi_level_select/docs/example.yml    |   3 +
 .../pb_multi_level_select/docs/index.js       |   2 +
 .../multi_level_select_options.tsx            | 149 ++++++
 10 files changed, 568 insertions(+), 229 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx

diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
index 911d22ab02..07cd852766 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
@@ -1,14 +1,17 @@
-import React, { useState, useEffect, useRef } from "react"
-import classnames from "classnames"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import Checkbox from "../pb_checkbox/_checkbox"
-import Radio from "../pb_radio/_radio"
-import Body from "../pb_body/_body"
-import Icon from "../pb_icon/_icon"
-import FormPill from "../pb_form_pill/_form_pill"
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
-import { cloneDeep } from "lodash"
+import React, { useState, useEffect, useRef } from "react";
+import classnames from "classnames";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props";
+import Icon from "../pb_icon/_icon";
+import FormPill from "../pb_form_pill/_form_pill";
+import { cloneDeep } from "lodash";
+import MultiLevelSelectOptions from "./multi_level_select_options";
+import MultiLevelSelectContext from "./context";
 
 import {
   getAncestorsOfUnchecked,
@@ -18,7 +21,7 @@ import {
   getDefaultCheckedItems,
   recursiveCheckParent,
   getExpandedItems,
-} from "./_helper_functions"
+} from "./_helper_functions";
 
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
@@ -30,9 +33,9 @@ type MultiLevelSelectProps = {
   inputName?: string
   name?: string
   returnAllSelected?: boolean
-  treeData?: { [key: string]: string }[]
+  treeData?: { [key: string]: string; }[] | any
   onSelect?: (prop: { [key: string]: any }) => void
-  selectedIds?: string[]
+  selectedIds?: string[] | any
   variant?: "multi" | "single"
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
@@ -52,126 +55,132 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     onSelect = () => null,
     selectedIds,
     variant = "multi",
+    children,
     pillColor = "primary"
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
     className
-  )
+  );
 
-  const dropdownRef = useRef(null)
+  const dropdownRef = useRef(null);
 
   // State for whether dropdown is open or closed
-  const [isDropdownClosed, setIsDropdownClosed] = useState(true)
+  const [isDropdownClosed, setIsDropdownClosed] = useState(true);
   // State from onChange for textinput, to use for filtering to create typeahead
-  const [filterItem, setFilterItem] = useState("")
+  const [filterItem, setFilterItem] = useState("");
   // FormattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState([])
+  const [formattedData, setFormattedData] = useState([]);
   // State for the return of returnAllSelected
-  const [returnedArray, setReturnedArray] = useState([])
+  const [returnedArray, setReturnedArray] = useState([]);
   // State for default return
-  const [defaultReturn, setDefaultReturn] = useState([])
+  const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds)
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items
-  const [expanded, setExpanded] = useState(initialExpandedItems)
+  const [expanded, setExpanded] = useState(initialExpandedItems);
 
   // Single Select specific state
   const [singleSelectedItem, setSingleSelectedItem] = useState({
     id: [],
     value: "",
-    item: []
-  })
+    item: [],
+  });
 
   const arrowDownElementId = `arrow_down_${id}`
   const arrowUpElementId = `arrow_up_${id}`
 
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
-      return
+      return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      item.checked = check
-      item.children = modifyRecursive(item.children, check)
-      return item
-    })
-  }
+      item.checked = check;
+      item.children = modifyRecursive(item.children, check);
+      return item;
+    });
+  };
 
-   // Function to map over data and add parent_id + depth property to each item
+  // Function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     selectedIds: string[],
-    parent_id: string = null,
-    depth = 0,
+    parent_id: string | null = null,
+    depth = 0
   ) => {
     if (!Array.isArray(treeData)) {
-      return
+      return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
-        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
+        checked: Boolean(
+          selectedIds && selectedIds.length && selectedIds.includes(item.id)
+        ),
         parent_id,
         depth,
-      }
+      };
       if (newItem.children && newItem.children.length > 0) {
         const children =
           item.checked && !returnAllSelected
             ? modifyRecursive(item.children, true)
-            : item.children
+            : item.children;
         newItem.children = addCheckedAndParentProperty(
           children,
           selectedIds,
           newItem.id,
           depth + 1
-        )
+        );
       }
-      return newItem
-    })
-  }
+      return newItem;
+    });
+  };
 
   useEffect(() => {
     const formattedData = addCheckedAndParentProperty(
       treeData,
       variant === "single" ? [selectedIds?.[0]] : selectedIds
-    )
+    );
 
-    setFormattedData(formattedData)
+    setFormattedData(formattedData);
 
     if (variant === "single") {
       // No selectedIds, reset state
       if (selectedIds?.length === 0 || !selectedIds?.length) {
-        setSingleSelectedItem({ id: [], value: "", item: []})
+        setSingleSelectedItem({ id: [], value: "", item: [] });
       } else {
         // If there is a selectedId but no current item, set the selectedItem
         if (selectedIds?.length !== 0 && !singleSelectedItem.value) {
-          const selectedItem = filterFormattedDataById(formattedData, selectedIds[0])
+          const selectedItem = filterFormattedDataById(
+            formattedData,
+            selectedIds[0]
+          );
 
           if (!selectedItem.length) {
-            setSingleSelectedItem({ id: [], value: "", item: []})
+            setSingleSelectedItem({ id: [], value: "", item: [] });
           } else {
-            const { id, value } = selectedItem[0]
-            setSingleSelectedItem({ id: [id], value, item: selectedItem})
+            const { id, value } = selectedItem[0];
+            setSingleSelectedItem({ id: [id], value, item: selectedItem });
           }
         }
       }
     }
-  }, [treeData, selectedIds])
+  }, [treeData, selectedIds]);
 
   useEffect(() => {
     if (returnAllSelected) {
-      setReturnedArray(getCheckedItems(formattedData))
+      setReturnedArray(getCheckedItems(formattedData));
     } else if (variant === "single") {
-      setDefaultReturn(singleSelectedItem.item)
+      setDefaultReturn(singleSelectedItem.item);
     } else {
-      setDefaultReturn(getDefaultCheckedItems(formattedData))
+      setDefaultReturn(getDefaultCheckedItems(formattedData));
     }
-  }, [formattedData])
+  }, [formattedData]);
 
   useEffect(() => {
     // Function to handle clicks outside the dropdown
@@ -184,16 +193,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       ) {
         setIsDropdownClosed(true)
       }
-    }
+    };
     // Attach the event listener
-    window.addEventListener("click", handleClickOutside)
+    window.addEventListener("click", handleClickOutside);
     // Clean up the event listener on unmount
     return () => {
-      window.removeEventListener("click", handleClickOutside)
-    }
-  }, [])
-
-
+      window.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
 
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -202,69 +209,67 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     check: boolean
   ) => {
     if (!Array.isArray(tree)) {
-      return
+      return;
     }
     return tree.map((item: any) => {
-      if (item.id != id) item.children = modifyValue(id, item.children, check)
+      if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        item.checked = check
+        item.checked = check;
 
         if (variant === "single") {
           // Single select: no children should be checked
-          item.children = modifyRecursive(item.children, !check)
+          item.children = modifyRecursive(item.children, !check);
         } else {
-          item.children = modifyRecursive(item.children, check)
+          item.children = modifyRecursive(item.children, check);
         }
       }
 
-      return item
-    })
-  }
+      return item;
+    });
+  };
 
   // Clone tree, check items + children
   const checkItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData)
+    const tree = cloneDeep(formattedData);
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, true)
+      return modifyValue(item.id, tree, true);
     } else {
-      const checkedTree = modifyValue(item.id, tree, true)
-      return recursiveCheckParent(item, checkedTree)
+      const checkedTree = modifyValue(item.id, tree, true);
+      return recursiveCheckParent(item, checkedTree);
     }
-  }
+  };
 
   // Clone tree, uncheck items + children
   const unCheckItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData)
+    const tree = cloneDeep(formattedData);
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, false)
+      return modifyValue(item.id, tree, false);
     } else {
-      const uncheckedTree = modifyValue(item.id, tree, false)
-      return getAncestorsOfUnchecked(uncheckedTree, item)
+      const uncheckedTree = modifyValue(item.id, tree, false);
+      return getAncestorsOfUnchecked(uncheckedTree, item);
     }
-  }
+  };
 
   // setFormattedData with proper properties
   const changeItem = (item: { [key: string]: any }, check: boolean) => {
-    const tree = check ? checkItem(item) : unCheckItem(item)
-    setFormattedData(tree)
-
-    return tree
-  }
+    const tree = check ? checkItem(item) : unCheckItem(item);
+    setFormattedData(tree);
 
- 
+    return tree;
+  };
 
   // Click event for x on form pill
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
     // Prevents the dropdown from closing when clicking on the pill
-    event.stopPropagation()
-    const updatedTree = changeItem(clickedItem, false)
+    event.stopPropagation();
+    const updatedTree = changeItem(clickedItem, false);
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree))
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree))
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-  }
+  };
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
@@ -272,163 +277,114 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
     ) {
-      return
+      return;
     }
-    setIsDropdownClosed(!isDropdownClosed)
-  }
+    setIsDropdownClosed(!isDropdownClosed);
+  };
 
   // Main function to handle any click inside dropdown
   const handledropdownItemClick = (e: any, check: boolean) => {
-    const clickedItem = e.target.parentNode.id
+    const clickedItem = e.target.parentNode.id;
     // Setting filterItem to "" will clear textinput and clear typeahead
-    setFilterItem("")
+    setFilterItem("");
 
-    const filtered = filterFormattedDataById(formattedData, clickedItem)
-    const updatedTree = changeItem(filtered[0], check)
+    const filtered = filterFormattedDataById(formattedData, clickedItem);
+    const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree))
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree))
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-  }
+  };
 
   // Single select
-  const handleRadioButtonClick = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const { id, value: inputText } = e.target
+  const handleRadioButtonClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value: inputText } = e.target;
     // The radio button needs a unique ID, this grabs the ID before the hyphen
-    const selectedItemID = id.match(/^[^-]*/)[0]
+    const selectedItemID = id.match(/^[^-]*/)[0];
     // Reset tree checked state, triggering useEffect
-    const treeWithNoSelections = modifyRecursive(formattedData, false)
+    const treeWithNoSelections = modifyRecursive(formattedData, false);
     // Update tree with single selection
-    const treeWithSelectedItem = modifyValue(selectedItemID, treeWithNoSelections, true)
-    const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
-
-    setFormattedData(treeWithSelectedItem)
-    setSingleSelectedItem({id: [selectedItemID], value: inputText, item: selectedItem})
+    const treeWithSelectedItem = modifyValue(
+      selectedItemID,
+      treeWithNoSelections,
+      true
+    );
+    const selectedItem = filterFormattedDataById(
+      treeWithSelectedItem,
+      selectedItemID
+    );
+
+    setFormattedData(treeWithSelectedItem);
+    setSingleSelectedItem({
+      id: [selectedItemID],
+      value: inputText,
+      item: selectedItem,
+    });
     // Reset the filter to always display dropdown options on click
-    setFilterItem("")
-    setIsDropdownClosed(true)
+    setFilterItem("");
+    setIsDropdownClosed(true);
 
-    onSelect(selectedItem)
+    onSelect(selectedItem);
   };
 
   // Single select: reset the tree state upon typing
   const handleRadioInputChange = (inputText: string) => {
-    modifyRecursive(formattedData, false)
-    setDefaultReturn([])
-    setSingleSelectedItem({id: [], value: inputText, item: []})
-    setFilterItem(inputText)
+    modifyRecursive(formattedData, false);
+    setDefaultReturn([]);
+    setSingleSelectedItem({ id: [], value: inputText, item: [] });
+    setFilterItem(inputText);
   };
 
-  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1
+  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1;
 
   // Handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation()
-    const clickedItem = filterFormattedDataById(formattedData, id)
+    event.stopPropagation();
+    const clickedItem = filterFormattedDataById(formattedData, id);
     if (clickedItem) {
-      let expandedArray = [...expanded]
-      const itemExpanded = isTreeRowExpanded(clickedItem[0])
+      let expandedArray = [...expanded];
+      const itemExpanded = isTreeRowExpanded(clickedItem[0]);
 
       if (itemExpanded)
-        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
-      else expandedArray.push(clickedItem[0].id)
+        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
+      else expandedArray.push(clickedItem[0].id);
 
-      setExpanded(expandedArray)
+      setExpanded(expandedArray);
     }
-  }
+  };
 
   const itemsSelectedLength = () => {
-    let items
+    let items;
     if (returnAllSelected && returnedArray && returnedArray.length) {
-      items = returnedArray.length
+      items = returnedArray.length;
     } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
-      items = defaultReturn.length
+      items = defaultReturn.length;
     }
-    return items
-  }
+    return items;
+  };
 
   // Rendering formattedData to UI based on typeahead
-  const renderNestedOptions = (items: { [key: string]: any }[]) => {
-    return (
-      <ul>
-        {Array.isArray(items) &&
-          items.map((item: { [key: string]: any }) => {
-            return (
-              <div key={item.id}>
-                <li
-                    className={"dropdown_item"}
-                    data-name={item.id}
-                >
-                  <div className="dropdown_item_checkbox_row">
-                    { !item.parent_id && !item.children ? null :
-                        <div
-                            key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
-                        >
-                          <CircleIconButton
-                              className={
-                                item.children && item.children.length > 0
-                                  ? ""
-                                  : "toggle_icon"
-                              }
-                              icon={
-                                isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
-                              }
-                              onClick={(event: any) =>
-                                handleToggleClick(item.id, event)
-                              }
-                              variant="link"
-                          />
-                        </div>
-                    }
-                    { variant === "single" ? (
-                      item.hideRadio ? (
-                        <Body>{item.label}</Body>
-                      ) :
-                      <Radio
-                          checked={item.checked}
-                          id={`${item.id}-${item.label}`}
-                          label={item.label}
-                          name={inputName}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
-                            handleRadioButtonClick(e)
-                          )}
-                          padding={item.children ? 'none' : 'xs'}
-                          type="radio"
-                          value={item.label}
-                      />
-                    ) : (
-                      <Checkbox
-                          id={item.id}
-                          text={item.label}
-                      >
-                        <input
-                            checked={item.checked}
-                            name={item.label}
-                            onChange={(e) => {
-                              handledropdownItemClick(e, !item.checked)
-                            }}
-                            type="checkbox"
-                            value={item.label}
-                        />
-                      </Checkbox>
-                    )}
-                  </div>
-                  {isTreeRowExpanded(item) &&
-                    item.children &&
-                    item.children.length > 0 &&
-                    (variant === "single" || !filterItem) && ( // Show children if expanded is true
-                      <div>{renderNestedOptions(item.children)}</div>
-                    )}
-                </li>
-              </div>
-            )
-          })}
-      </ul>
-    )
-  }
+  const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
+    const hasOptionsChild = React.Children.toArray(props.children).some(
+      (child: any) => child.type === MultiLevelSelect.Options
+    );
+
+    if (hasOptionsChild) {
+      return React.Children.map(props.children, (child) => {
+        if (child.type === MultiLevelSelect.Options) {
+          return React.cloneElement(child, { items });
+        }
+        return null;
+      });
+    } else {
+      // If no children, use the default rendering
+      return (
+        <MultiLevelSelectOptions items={items} />
+      );
+    }
+  };
+
 
   return (
     <div
@@ -438,12 +394,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         className={classes}
         id={id}
     >
-      <div
-          className="wrapper"
+      <MultiLevelSelectContext.Provider value={{
+          variant,
+          inputName,
+          renderNestedOptions,
+          isTreeRowExpanded,
+          handleToggleClick,
+          handleRadioButtonClick,
+          handledropdownItemClick,
+          filterItem,
+      }}>
+      <div className="wrapper" 
           ref={dropdownRef}
       >
-        <div
-            className="input_wrapper"
+        <div className="input_wrapper" 
             onClick={handleInputWrapperClick}
         >
           <div className="input_inner_container">
@@ -509,15 +473,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
             <input
                 id="multiselect_input"
-                onChange={(e) =>{
+                onChange={(e) => {
                   variant === "single"
                     ? handleRadioInputChange(e.target.value)
-                    : setFilterItem(e.target.value)
+                    : setFilterItem(e.target.value);
                 }}
                 onClick={() => setIsDropdownClosed(false)}
                 placeholder={
                   inputDisplay === "none" && itemsSelectedLength()
-                    ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
+                    ? `${itemsSelectedLength()} ${
+                        itemsSelectedLength() === 1 ? "item" : "items"
+                      } selected`
                     : "Start typing..."
                 }
                 value={singleSelectedItem.value || filterItem}
@@ -546,15 +512,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
 
         <div className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}>
-          {renderNestedOptions(
-            filterItem
-              ? findByFilter(formattedData, filterItem)
-              : formattedData
-          )}
+            {renderNestedOptions(
+              filterItem ? findByFilter(formattedData, filterItem) : formattedData
+            )}
         </div>
       </div>
+      </MultiLevelSelectContext.Provider>
     </div>
-  )
-}
+  );
+};
+
+MultiLevelSelect.Options = MultiLevelSelectOptions;
 
-export default MultiLevelSelect
\ No newline at end of file
+export default MultiLevelSelect;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
new file mode 100644
index 0000000000..b974b5ef6b
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const MultiLevelSelectContext = createContext<any>({});
+
+export default MultiLevelSelectContext;
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
index e364900c70..cb2be03263 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
@@ -87,4 +87,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
new file mode 100644
index 0000000000..8d1f7d4b4a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
@@ -0,0 +1,105 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import Badge from "../../pb_badge/_badge";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        status: "active",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            status: "active",
+            variant: "primary",
+
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+                status: "Inactive",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        status: "Inactive",
+        variant: "error",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectWithChildren = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-with-children"
+          onSelect={(selectedNodes) =>
+            console.log("Selected Items", selectedNodes)
+          }
+          treeData={treeData}
+          {...props}
+      >
+        <MultiLevelSelect.Options>
+        {(item) => (
+          <Badge 
+              marginLeft="sm"
+              text={item.status} 
+              variant={item.status === "active" ? "success" : "warning"} 
+          />
+        )}
+        </MultiLevelSelect.Options>
+      </MultiLevelSelect>
+    </div>
+  );
+};
+
+export default MultiLevelSelectWithChildren;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
new file mode 100644
index 0000000000..d0aeb8d340
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
@@ -0,0 +1 @@
+The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
new file mode 100644
index 0000000000..a6c03f7859
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import Badge from "../../pb_badge/_badge";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        status: "active",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            status: "active",
+            variant: "primary",
+
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+                status: "Inactive",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        status: "Inactive",
+        variant: "error",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectWithChildrenWithRadios = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-with-children"
+          onSelect={(selectedNodes) =>
+            console.log("Selected Items", selectedNodes)
+          }
+          treeData={treeData}
+          variant="single"
+          {...props}
+      >
+        <MultiLevelSelect.Options>
+          {(item) => (
+            <Badge 
+                marginLeft="sm"
+                text={item.status} 
+                variant={item.status === "active" ? "success" : "warning"} 
+            />
+          )}
+        </MultiLevelSelect.Options>
+      </MultiLevelSelect>
+    </div>
+  );
+};
+
+export default MultiLevelSelectWithChildrenWithRadios;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
new file mode 100644
index 0000000000..b4f8fbc2a6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
@@ -0,0 +1 @@
+The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels. 
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
index c232dee812..273db8bb68 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
@@ -15,3 +15,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_with_children: Checkboxes With Children
+  - multi_level_select_with_children_with_radios: Single Select With Children
+
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js
index 6b8be4ec17..7c3e1fd0fc 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js
@@ -4,3 +4,5 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
+export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
+export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
new file mode 100644
index 0000000000..c9a0c4e208
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
@@ -0,0 +1,149 @@
+import React, {useContext} from "react";
+import classnames from "classnames";
+import MultiLevelSelectContext from "./context";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props";
+import Checkbox from "../pb_checkbox/_checkbox";
+import Radio from "../pb_radio/_radio";
+import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
+import Body from "../pb_body/_body";
+
+type MultiLevelSelectOptionsProps = {
+  aria?: { [key: string]: string },
+  children?: React.ReactNode | ((item: any) => React.ReactNode),
+  className?: string,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+} & GlobalProps;
+
+const MultiLevelSelectOptions = ({
+  children,
+  items,
+  ...props
+}: MultiLevelSelectOptionsProps) => {
+const {
+  variant,
+  inputName,
+  renderNestedOptions,
+  isTreeRowExpanded,
+  handleToggleClick,
+  handleRadioButtonClick,
+  handledropdownItemClick,
+  filterItem,
+} = useContext(MultiLevelSelectContext)
+
+const {
+  aria = {},
+  className,
+  data = {},
+  htmlOptions = {},
+} = props;
+
+const ariaProps = buildAriaProps(aria);
+const dataProps = buildDataProps(data);
+const htmlProps = buildHtmlProps(htmlOptions);
+const classes = classnames(
+  buildCss("pb_multi_level_select_options"),
+  globalProps(props),
+  className
+);
+
+  return (
+    <ul
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+    >
+      {Array.isArray(items) &&
+        items.map((item: { [key: string]: any }) => {
+          return (
+            <div key={item.id}>
+              <li className={"dropdown_item"} 
+                  data-name={item.id}
+              >
+                <div className="dropdown_item_checkbox_row">
+                  {!item.parent_id && !item.children ? null : (
+                    <div
+                        key={
+                          isTreeRowExpanded(item)
+                            ? "chevron-down"
+                            : "chevron-right"
+                        }
+                    >
+                      <CircleIconButton
+                          className={
+                            item.children && item.children.length > 0
+                              ? ""
+                              : "toggle_icon"
+                          }
+                          icon={
+                            isTreeRowExpanded(item)
+                              ? "chevron-down"
+                              : "chevron-right"
+                          }
+                          onClick={(event: React.MouseEvent) =>
+                            handleToggleClick(item.id, event)
+                          }
+                          variant="link"
+                      />
+                    </div>
+                  )}
+                  {variant === "single" ? (
+                    item.hideRadio ? (
+                      <Body>{item.label}</Body>
+                    ) : (
+                      <Radio
+                          checked={item.checked}
+                          id={`${item.id}-${item.label}`}
+                          label={item.label}
+                          name={inputName}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleRadioButtonClick(e)
+                          }
+                          padding={item.children ? "none" : "xs"}
+                          type="radio"
+                          value={item.label}
+                      />
+                    )
+                  ) : (
+                    <Checkbox id={item.id} 
+                        text={item.label}
+                    >
+                        <input
+                            checked={item.checked}
+                            name={item.label}
+                            onChange={(e) => {
+                              handledropdownItemClick(e, !item.checked);
+                            }}
+                            type="checkbox"
+                            value={item.label}
+                        />
+                    </Checkbox>
+                  )}
+                  {/* Render children next to the checkbox */}
+                  {children && (
+                    typeof children === "function" ? children(item) : children
+                  )}
+                </div>
+                {isTreeRowExpanded(item) &&
+                  item.children &&
+                  item.children.length > 0 &&
+                  (variant === "single" || !filterItem) && (
+                    <div>{renderNestedOptions(item.children)}</div>
+                  )}
+              </li>
+            </div>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default MultiLevelSelectOptions;
\ No newline at end of file

From d9b5807efe18ace170bf2a42bc2bf9d9845c7ce8 Mon Sep 17 00:00:00 2001
From: Ben Langfeld <blangfeld@powerhrg.com>
Date: Fri, 4 Oct 2024 15:38:35 -0300
Subject: [PATCH 03/31] More storage for CI image builds (#3767)

https://ci.powerapp.cloud/blue/organizations/jenkins/powerhome%2Fplaybook/detail/master/996/pipeline/

---------

Co-authored-by: Thomas Jung <thomas.jung@powerhrg.com>
---
 Jenkinsfile | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Jenkinsfile b/Jenkinsfile
index 2dea7c0e79..233dcc2588 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -25,6 +25,9 @@ app.build(
                 memory: '10Gi',
             ]
         ],
+        storageConfig: [
+          size: '15Gi',
+        ],
       ])
     }
 

From 555543ae9026a4c1fb5f2503a4c80136e91e4c6b Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Mon, 7 Oct 2024 15:43:33 -0400
Subject: [PATCH 04/31] Encrypted OpenAI Key (#3774)

**What does this PR do?** A clear and concise description with your
runway ticket url.
Encrypted OpenAI key using bin/deployer from the playbook-website
folder.

**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-website/config/deploy/prs/secrets.yaml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml
index 291e953d37..0ca6d4c76e 100644
--- a/playbook-website/config/deploy/prs/secrets.yaml
+++ b/playbook-website/config/deploy/prs/secrets.yaml
@@ -1,6 +1,7 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:ydJ6vKcPVMp9SxRCxgKH3AgAX5JjeoGn7fDKf77XkhODoTZnRHpkyiAezdhFhakCajJFHmaOttWytEVJiMg9DoW111f4AWsNQ+awVztblsCUmT1ZPgZtAGH8H76RKzl3adRy466E3FFoBzQf2FZhP5fdDRSmhzlHWUZdtrfDt/g=,iv:fDmiR4EzqRJ72pl4xLjG5Lv3bw6ijE7hqDHY9HqBcF8=,tag:vzpbilZlEFKlKrt9Rl9zvA==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:ufQrClZMvpS72OLyRqlO4jisNfnC793ASma61YUOssmQ2gUb/H/U5loD731e4a1fI6dADN66cjQbEnBGwNz0tU58dPMFlR5wSf+bs+JH2Jgn+w==,iv:m3oKFJrByerC7/DPezR0j98Jsolqp8IOm67trL0zJwc=,tag:JAGhc5ts+QBO+DDttXgSVw==,type:str]
+    open_ai: ENC[AES256_GCM,data:zVXNbSHsux6JriiGW50+nApdnFZ88wO9pqIc/gOPf51zjKYPH8VZ0zNNXyE2McwZdWI7XqcNuUKFQdMZXl9sWZqfNV4cyrVXc4/XwRscv4yzY+PNKlHmCrI+s/rrqrnOkdMrpf68Vud0ifjuA+0c5YVeCWheSuc44S+XufG/ZxjIwFuQlxNn8pQvFsI3gDkc8UF1v+a0+Umh2fms5ybkOoTnEzFI04HlMak=,iv:CbZdq8QY413G8mwRiIstLrMM9tCIpw1J1pd7sGczSds=,tag:bga4kHU2AxqAtymi4EwXUw==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
@@ -16,8 +17,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-09-12T19:37:14Z"
-    mac: ENC[AES256_GCM,data:V4LLnTmHRV39R4VNTsQ5Qc2xjjsE0LuSGYJu2W+ERJkwwCcQe1B874xgSttSQs4aiXybjedqLiveHsr42NGuTvjKDXDxXChffp0bdp/eHB22Av8aONEz9Nbqwr4uBI8SvRPRWL0cT5oFVYR18/cVcxYUYhwreCR5hkg0x+xTF4o=,iv:KsKq/7TqDDCKeIUWW+NGJNNypdiBxth8yeIKMOLjq2k=,tag:i9++nJGiPipwXj7H1dimLQ==,type:str]
+    lastmodified: "2024-10-07T19:35:37Z"
+    mac: ENC[AES256_GCM,data:dCiQ3NiH/4kqwVYLyk54SY1RzDffQMmbGx5diR2EyvktuqUpcRgx0TpUkMO4calsKwxv7ujffDpuo+CT2eNjt/b5Thuu6VUYqTr76jqeoyDWAZ4m0EA4q9Gz5Q4n1Y4FPEkhBAmaNfcWERV9zDOgTjdbG3IYEdKgKORHpSEUE4E=,iv:Rx966gFBzEdqynjMsaS5H+YiYDQjKm1IXQah8sK2+hk=,tag:YYVxK7SRk5YLkyJ5KdL0/g==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.7.3

From 61fca9a96d192227ec239999b493082afa2db963 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Tue, 8 Oct 2024 11:01:30 -0400
Subject: [PATCH 05/31] Updating Secrets & Git Ignore (#3776)

**What does this PR do?** A clear and concise description with your
runway ticket url.


**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.
---
 .gitignore                                                  | 1 +
 playbook-website/.gitignore                                 | 1 +
 playbook-website/config/application.rb                      | 4 ++++
 playbook-website/config/deploy/prs/secrets.yaml             | 6 +++---
 .../config/deploy/templates/deployment.yaml.erb             | 5 +++++
 playbook-website/config/deploy/templates/secret.yaml.erb    | 1 +
 playbook-website/config/deploy/templates/shell.yaml.erb     | 5 +++++
 playbook-website/config/initializers/openai.rb              | 3 +++
 8 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 playbook-website/config/initializers/openai.rb

diff --git a/.gitignore b/.gitignore
index 02f42a1b6b..29825090aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ node_modules
 yarn-error.log
 playbook/stats.json
 *.dec.*
+.env
diff --git a/playbook-website/.gitignore b/playbook-website/.gitignore
index 7589e0e431..651de6e0c6 100644
--- a/playbook-website/.gitignore
+++ b/playbook-website/.gitignore
@@ -35,4 +35,5 @@ yarn-debug.log*
 # Vite uses dotenv and suggests to ignore local-only env files. See
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local
+.env
 
diff --git a/playbook-website/config/application.rb b/playbook-website/config/application.rb
index 786e521774..547d78312c 100644
--- a/playbook-website/config/application.rb
+++ b/playbook-website/config/application.rb
@@ -38,6 +38,10 @@ class Application < Rails::Application
     # config.eager_load_paths << Rails.root.join("extras")
 
     # Don't generate system test files.
+
     config.generators.system_tests = nil
+
+    openai_api_key = ENV["OPENAI_API_KEY"]
+    Rails.application.config.openai_api_key = openai_api_key
   end
 end
diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml
index 0ca6d4c76e..cab0cc21d0 100644
--- a/playbook-website/config/deploy/prs/secrets.yaml
+++ b/playbook-website/config/deploy/prs/secrets.yaml
@@ -1,7 +1,7 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:ydJ6vKcPVMp9SxRCxgKH3AgAX5JjeoGn7fDKf77XkhODoTZnRHpkyiAezdhFhakCajJFHmaOttWytEVJiMg9DoW111f4AWsNQ+awVztblsCUmT1ZPgZtAGH8H76RKzl3adRy466E3FFoBzQf2FZhP5fdDRSmhzlHWUZdtrfDt/g=,iv:fDmiR4EzqRJ72pl4xLjG5Lv3bw6ijE7hqDHY9HqBcF8=,tag:vzpbilZlEFKlKrt9Rl9zvA==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:ufQrClZMvpS72OLyRqlO4jisNfnC793ASma61YUOssmQ2gUb/H/U5loD731e4a1fI6dADN66cjQbEnBGwNz0tU58dPMFlR5wSf+bs+JH2Jgn+w==,iv:m3oKFJrByerC7/DPezR0j98Jsolqp8IOm67trL0zJwc=,tag:JAGhc5ts+QBO+DDttXgSVw==,type:str]
-    open_ai: ENC[AES256_GCM,data:zVXNbSHsux6JriiGW50+nApdnFZ88wO9pqIc/gOPf51zjKYPH8VZ0zNNXyE2McwZdWI7XqcNuUKFQdMZXl9sWZqfNV4cyrVXc4/XwRscv4yzY+PNKlHmCrI+s/rrqrnOkdMrpf68Vud0ifjuA+0c5YVeCWheSuc44S+XufG/ZxjIwFuQlxNn8pQvFsI3gDkc8UF1v+a0+Umh2fms5ybkOoTnEzFI04HlMak=,iv:CbZdq8QY413G8mwRiIstLrMM9tCIpw1J1pd7sGczSds=,tag:bga4kHU2AxqAtymi4EwXUw==,type:str]
+    open_ai: ENC[AES256_GCM,data:duAVK9S9gDz3XkzzP7b/mfUuOU+PEGTXXL9e7y8puhs1eJbaCTavKpdWeRJLlGZEDTW3KlyBl/WBcfSRrPEwIX4BOqiiYUin2TwTSyhsGIenUbka05CalBmq1T/H0Js=,iv:GP0Ug3Z0iWP8cpeFOyG6eyuovcfNs1K7/Q7CoNsZXZU=,tag:IH1NqrIksHBgRjpUv4sTLA==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
@@ -17,8 +17,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-07T19:35:37Z"
-    mac: ENC[AES256_GCM,data:dCiQ3NiH/4kqwVYLyk54SY1RzDffQMmbGx5diR2EyvktuqUpcRgx0TpUkMO4calsKwxv7ujffDpuo+CT2eNjt/b5Thuu6VUYqTr76jqeoyDWAZ4m0EA4q9Gz5Q4n1Y4FPEkhBAmaNfcWERV9zDOgTjdbG3IYEdKgKORHpSEUE4E=,iv:Rx966gFBzEdqynjMsaS5H+YiYDQjKm1IXQah8sK2+hk=,tag:YYVxK7SRk5YLkyJ5KdL0/g==,type:str]
+    lastmodified: "2024-10-08T14:44:56Z"
+    mac: ENC[AES256_GCM,data:lABCE3dB+TN7l0SB13j0/pEE++5wYiL7Hr7yC93S7q6ehFXpPQBXHzZnWJnFzW2+Qi774hR5C04jypCWpcrbNr6hb6l8EM27ssp1NJFC/SBGdPaLgUiiuJcHoCGfhF0T4VgaYZc/sATiYCyfvQn9h9W7+XkakCQyD5GVuqXf07c=,iv:gxeGlWZEtVHO68kAtdz7bJCNGzbcanUzqX73lYeDMwo=,tag:5z//KnPmKcWdWhc9yGBLNg==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.7.3
diff --git a/playbook-website/config/deploy/templates/deployment.yaml.erb b/playbook-website/config/deploy/templates/deployment.yaml.erb
index 343681a9bf..a3220c1c94 100644
--- a/playbook-website/config/deploy/templates/deployment.yaml.erb
+++ b/playbook-website/config/deploy/templates/deployment.yaml.erb
@@ -50,6 +50,11 @@ spec:
                 secretKeyRef:
                   name: playbook
                   key: sentry-dsn
+            - name: OPEN_AI
+              valueFrom:
+                secretKeyRef:
+                  name: playbook
+                  key: open-ai
           livenessProbe:
             httpGet:
               path: /health_check/site
diff --git a/playbook-website/config/deploy/templates/secret.yaml.erb b/playbook-website/config/deploy/templates/secret.yaml.erb
index 77b3f039ca..1110c51c2f 100644
--- a/playbook-website/config/deploy/templates/secret.yaml.erb
+++ b/playbook-website/config/deploy/templates/secret.yaml.erb
@@ -9,3 +9,4 @@ type: Opaque
 data:
   secret-key-base: <%= Base64.encode64(appConfig.fetch("secretKeyBase")).gsub("\n", "").strip %>
   sentry-dsn: <%= Base64.encode64(appConfig.fetch("sentry_dsn")).gsub("\n", "").strip %>
+  open-ai: <%= Base64.encode64(appConfig.fetch("open_ai")).gsub("\n", "").strip %>
diff --git a/playbook-website/config/deploy/templates/shell.yaml.erb b/playbook-website/config/deploy/templates/shell.yaml.erb
index 7f8f4d4717..8305c84094 100644
--- a/playbook-website/config/deploy/templates/shell.yaml.erb
+++ b/playbook-website/config/deploy/templates/shell.yaml.erb
@@ -41,6 +41,11 @@ template:
             value: "true"
           - name: RAILS_LOG_TO_STDOUT
             value: "true"
+          - name: OPEN_AI
+            valueFrom:
+              secretKeyRef:
+                name: playbook
+                key: open-ai
         resources:
           limits:
             cpu: 0.3
diff --git a/playbook-website/config/initializers/openai.rb b/playbook-website/config/initializers/openai.rb
new file mode 100644
index 0000000000..457e6095b6
--- /dev/null
+++ b/playbook-website/config/initializers/openai.rb
@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Rails.application.config.openai_api_key = ENV["OPENAI_API_KEY"]

From e07eeee62779992d23c4592c80a30afe9c012770 Mon Sep 17 00:00:00 2001
From: powerhome-software-apply
 <125933697+powerhome-software-apply@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:20:36 -0300
Subject: [PATCH 06/31] Setup SOPS

---
 .sops.yaml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.sops.yaml b/.sops.yaml
index f315deb821..ff8b71d1dc 100644
--- a/.sops.yaml
+++ b/.sops.yaml
@@ -6,9 +6,13 @@ creation_rules:
           - arn: "arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c"
           - arn: "arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c"
             role: "arn:aws:iam::205083374951:role/playbook-admins"
+          - arn: "arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c"
+            role: "arn:aws:iam::205083374951:role/forever-people"
 
   - key_groups:
       - kms:
           - arn: "arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41"
           - arn: "arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41"
             role: "arn:aws:iam::205083374951:role/playbook-admins"
+          - arn: "arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41"
+            role: "arn:aws:iam::205083374951:role/forever-people"

From 6f900630911b2b97c9276f0292183ec476714254 Mon Sep 17 00:00:00 2001
From: Ben Langfeld <blangfeld@powerhrg.com>
Date: Wed, 9 Oct 2024 11:02:22 -0400
Subject: [PATCH 07/31] Re-encrypt secrets for FVR access (#3783)

Updates the deployer image, and re-encrypts the secrets files to grant
the `forever-people` ARN access to the secrets. This unlocks FVR's
ability to place MySQL user secrets for
https://github.com/powerhome/playbook/pull/3778
---
 playbook-website/bin/deployer                 |  2 +-
 .../config/deploy/production/secrets.yaml     | 23 ++++++++++-------
 .../config/deploy/prs/secrets.yaml            | 25 +++++++++++--------
 .../config/deploy/staging/secrets.yaml        | 23 ++++++++++-------
 4 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/playbook-website/bin/deployer b/playbook-website/bin/deployer
index 55164ffd8e..03b6590d8d 100755
--- a/playbook-website/bin/deployer
+++ b/playbook-website/bin/deployer
@@ -7,7 +7,7 @@ if [ -t 0 ]; then
   AWS_CREDS_MOUNT="--mount type=bind,source=${HOME}/.aws/credentials,destination=/root/.aws/credentials,readonly"
 fi
 
-DEPLOYER_IMAGE="image-registry.powerapp.cloud/app/deployer:master-467d8015ffc91fc62c347367db792bb6de0eeea8-1439"
+DEPLOYER_IMAGE="image-registry.powerapp.cloud/app/deployer:main-559f8a815f07c3e04dc82bf416c403ef80f6eacb-42"
 DEPLOYER_MOUNTS="${AWS_CREDS_MOUNT} --mount type=bind,source=$(pwd),destination=/app --mount type=bind,source=${HOME}/.kube,destination=/root/.kube"
 RUN_DEPLOYER="docker run --tty ${INTERACTIVE} ${EXTRA_ARGS} --rm --env AWS_ACCESS_KEY_ID --env AWS_SECRET_ACCESS_KEY ${DEPLOYER_MOUNTS} ${DEPLOYER_IMAGE}"
 
diff --git a/playbook-website/config/deploy/production/secrets.yaml b/playbook-website/config/deploy/production/secrets.yaml
index 8d8b1dd44c..35a7fcf0da 100644
--- a/playbook-website/config/deploy/production/secrets.yaml
+++ b/playbook-website/config/deploy/production/secrets.yaml
@@ -1,23 +1,28 @@
 appConfig:
-    secretKeyBase: ENC[AES256_GCM,data:utBa4kM3fNPxfLSDALiJvOz6KVlzSefm/K3xDLrKQYypDY2TbreTY5QpeOH6l49D9zMD5i8XGwn3p9f6OEDg4uwzWLSUw0c6U7EcQkrxmRpvOLiOKz2SX8B3xWv3rdLwNs50LHINvjQcjdJviAo9R/oxLxEs6Ds/snSxYXbKQcs=,iv:p0zTY4f3gXqTLJRSjdhX+WsO2/eA6d/rh3S38O4XvuE=,tag:QjENfqpSSZ4hlvvoAuzRJA==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:p1TU1BvZqZyqo3WPVhGQKqT5IB9zsdA/LkEltdp2zNir3Xub7+yKWg5PXVhjCkDii90MPXSEd08zZYUHZQsTdWI6A/f/jMj1DepJhhPq7H8hpQ==,iv:NHG0oirvwkU2dRh9K0eyEjxyA8WAXRXt9HCGyOmKkrg=,tag:kDJqiCE+n5XoSJMVYqbFBQ==,type:str]
+    secretKeyBase: ENC[AES256_GCM,data:pTc2zofEnukd275BCaIpHOM5LokYsaYdgyGPHH6tggclP8Fj2S3/s7UREfDDuNZdAWAelmfWj3AY6xhtmdNRXt0F1UDvrNw0aCDAUqQK/jfHvgCtPQ2ncdZdpoUeEzmTaHUu3JVCphrCBFWxYrSvQg5qfx/docSiGR/PtaWTgOA=,iv:NwUXrRidkh5gT0E90h8CH9qtddboQnd2uvQfPXVkfM0=,tag:vJ5vPuSFeiRc+kDX5tY3Jg==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:pnb9JEfwZ0wCe+eh1CChiKiYAyyMeRtMvJEy9HyY9HFyleFB336Q6nVFx1D74LSxgNbrZiBqg/aA1ZysYCIDRciN6LOMlFAn5AAbMhpYcdNbLQ==,iv:j8l3ISTxrLVF21VRTDkqcmxeMt8jPrZDzDW9rHZ84lc=,tag:eMnHnxYQ+uAIhba0bDNuAA==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
-          created_at: "2023-09-12T17:54:03Z"
-          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgGYWcyxf9B5fC0BIXbcdcWHAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMTtG/4IC1DRbS0sO0AgEQgDtkAetmvS1Gc4T4SBgXkXzEtZ11EIGuPKbxG4IHpv/Lf1taPKmf02QDhxEiMWCc57jkeWwCSLapvSTIQQ==
+          created_at: "2024-10-09T14:15:47Z"
+          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgE1qwTrUkCGbpiPQPZ2Wy+lAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQM5uYzVUOAppdO0PKyAgEQgDtfwSqTGPBcAQB/DMjvu5ePLTHSR+Yb8KhkFICf598s5H4VonhIO7zQROhfUurkPSXK9omJ2WMGuULDiQ==
           aws_profile: ""
         - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
           role: arn:aws:iam::205083374951:role/playbook-admins
-          created_at: "2023-09-12T17:54:03Z"
-          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgEAsmw6mIADb67KveUG6MUfAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMkfv8wA9Ec5IztTyEAgEQgDuXn1EN5zG2dP7pJpU4nE/KiJ1krq+UizveI0mSylzpKmRz0BFPtpj6kNv/pANo+YwCNKm5uVOGSkBfRw==
+          created_at: "2024-10-09T14:15:47Z"
+          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgEzvPVSKC0gdgIl7GsNe51uAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMJfl/u6aJQu7MHZ5XAgEQgDu7iEdG6TL87qMoOGrGyEK1jcRq12uyCzOyAGhqkcE7XaWFuqP6ukaU2J12ZHVqAGHQNyhdqGN3sGQSOw==
+          aws_profile: ""
+        - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
+          role: arn:aws:iam::205083374951:role/forever-people
+          created_at: "2024-10-09T14:15:47Z"
+          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgF0x/5dkX78lPXUwfrdoJ7JAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMX2NSksmyhVS1j4q5AgEQgDsx23n3n0AtKWp7logPrzOrVwBMD8zhzC3QJyV6iDk7ia4Wk0OubJd84MPo4thMo1HPd0Xjhy4oXBTjUw==
           aws_profile: ""
     gcp_kms: []
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-09-12T19:35:17Z"
-    mac: ENC[AES256_GCM,data:GBtmDnvvc+KwYkBML0M8+e02FgpfbY68FfCGSHxMUuAvjPYLHLZVA99pMtsKsFWdSiwRsZLcU6xoJm3y9YRLSGSJ0/7NzdVM5386tuSSm+RdqdcYNYU9hrcf1XhmMDT/enyjYsUP9p5f6sAPorQgj9VHv/1yV6ppZ5SRfrNr8v4=,iv:l7Wt0uqtrEeIAa9CWB7HPpnPJPPbYoAYzD7jIzw3/ao=,tag:ooQCNoR0QdBYsv/tOiLRqA==,type:str]
+    lastmodified: "2024-10-09T14:15:48Z"
+    mac: ENC[AES256_GCM,data:8Rq2gIcrWSNzsI79Lo/UOU5wZnyPG/AwODq2K6mYlPwBK0BhkAxKKMmMBCJzBNMWEFX33loqXnPjLE2Y6Cx8WSuI7EvISIzv6ekoRR5n8QnCOarH8zz/DZOnjgQI9F+fn0kRUEMIdyIduiDjAafXyp6RDlHUl7JxxSKaObFQoL0=,iv:xGadGENEQ4RE1GKuJTh0xeZ8hlWr7dSvwYHGTUIcTeM=,tag:r0j68SWB1Fl82iH8KjK0zw==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.7.3
+    version: 3.8.1
diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml
index cab0cc21d0..db8589ca50 100644
--- a/playbook-website/config/deploy/prs/secrets.yaml
+++ b/playbook-website/config/deploy/prs/secrets.yaml
@@ -1,24 +1,29 @@
 appConfig:
-    secretKeyBase: ENC[AES256_GCM,data:ydJ6vKcPVMp9SxRCxgKH3AgAX5JjeoGn7fDKf77XkhODoTZnRHpkyiAezdhFhakCajJFHmaOttWytEVJiMg9DoW111f4AWsNQ+awVztblsCUmT1ZPgZtAGH8H76RKzl3adRy466E3FFoBzQf2FZhP5fdDRSmhzlHWUZdtrfDt/g=,iv:fDmiR4EzqRJ72pl4xLjG5Lv3bw6ijE7hqDHY9HqBcF8=,tag:vzpbilZlEFKlKrt9Rl9zvA==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:ufQrClZMvpS72OLyRqlO4jisNfnC793ASma61YUOssmQ2gUb/H/U5loD731e4a1fI6dADN66cjQbEnBGwNz0tU58dPMFlR5wSf+bs+JH2Jgn+w==,iv:m3oKFJrByerC7/DPezR0j98Jsolqp8IOm67trL0zJwc=,tag:JAGhc5ts+QBO+DDttXgSVw==,type:str]
-    open_ai: ENC[AES256_GCM,data:duAVK9S9gDz3XkzzP7b/mfUuOU+PEGTXXL9e7y8puhs1eJbaCTavKpdWeRJLlGZEDTW3KlyBl/WBcfSRrPEwIX4BOqiiYUin2TwTSyhsGIenUbka05CalBmq1T/H0Js=,iv:GP0Ug3Z0iWP8cpeFOyG6eyuovcfNs1K7/Q7CoNsZXZU=,tag:IH1NqrIksHBgRjpUv4sTLA==,type:str]
+    secretKeyBase: ENC[AES256_GCM,data:tX9TTqw+teUH3ugGOXIfCMSE1fofM8YBfei2cXLB8Wbmsxp+bsoIgByMtgAbyHzov73P2PaJhQWWo/fG2W7Zj8T0gQ5BcK9mVFUkbt/+SmQpbbprLeIpauN4Gar2QWzyzJPIVEUopf3gdEERx3a+2rbMotJ4rB8Xfvv9OO4sOy4=,iv:H7nM7+ERPsNpehyuaAXSotrG8YCMhL1VSNAmFggs+Q4=,tag:eE+MuzvnCuQ6XKAKMMkrsA==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:9k5OGZqUcLote0IAJt7GJBsDxN3iJxoVtfPn9RKYfV1KZzNNWyeTZKC/PmjdjKotNbXzLPUSIPbtV8bk2DmttOwQr/r0xbnaTcRT2CWh/4XwVA==,iv:qML16zZMGBSO9nz7kSihlvn5uLj1s+RDSSqOb1jivGw=,tag:XvsrAuIAgAboayg2ZN1KZQ==,type:str]
+    open_ai: ENC[AES256_GCM,data:ewKDrouP0ZuMNAr19DvqBIzYdRInruWH7GxPX2ZH79DVJkT53qLFqzQMIBScqai40WXQmFLNicLnnbHVK+Xcv0tq/xBHtS7BANIwa5XJnWo56jYR3mOdbAcw+ZNFrks=,iv:c5veWRGGydflJ38TFf56ei9GI0tCnE24TLxJGFHscdE=,tag:rGLKDJesBs5JTNt83dsmoA==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
-          created_at: "2023-09-12T17:53:37Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgHC1WOVOEbBuNn+YEN+OKiFAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMGQ04cBdxcLtN+PMRAgEQgDvbxveKjEU0mIfKAh7I3yjnnrUSDl1UymkOJYlz4MaKw+MNze2Q1zIX0FzkwSFLFcW/7NguN5/FQ1thZw==
+          created_at: "2024-10-09T14:15:23Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFd2W8ic6/TkyA8p8wcv5IGAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMPj5cEbt+ndJRHdEMAgEQgDuThOL+h28iSGmeB/TcKDZZ61OXEzoWxD3Io9pC63eWkHhJjcQJO/Cklequ8L43LZh9ISXUhWBdm7Nlbg==
           aws_profile: ""
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
           role: arn:aws:iam::205083374951:role/playbook-admins
-          created_at: "2023-09-12T17:53:37Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgHs+bIDMZJ9K5YoWkyxqXpxAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMv1q+HlWt0cTzINo0AgEQgDuDojVpcg6NuTpVs8Q2ojw9MnIGfuQ4OI14tvSE78863Esk0Tvgno/oqxDjSfWqIV0kmV/h5hapIm/C3w==
+          created_at: "2024-10-09T14:15:23Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFTilLgQ0cpyV0/bCSqiidWAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMHJQrlVXmV3auRC97AgEQgDuvJdg6V6f/H15ui2BVgII+a7sUe4I3Suwcjy/Jl4o9+E7GKETkWm8RLpWdwI0yP65GmjLRkmoqnGERlg==
+          aws_profile: ""
+        - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
+          role: arn:aws:iam::205083374951:role/forever-people
+          created_at: "2024-10-09T14:15:23Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFNq+jUXbUie4tTLRqUg0niAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMBG8uY6UVCCS+9t0lAgEQgDsURce9Oc/zXJFhLivk3rJP4KZRsUrc5qB/6z43P0c3IXvNN3PtTLl+/yPGpZ1zmukv4aBBU0GuVOh0Bw==
           aws_profile: ""
     gcp_kms: []
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-08T14:44:56Z"
-    mac: ENC[AES256_GCM,data:lABCE3dB+TN7l0SB13j0/pEE++5wYiL7Hr7yC93S7q6ehFXpPQBXHzZnWJnFzW2+Qi774hR5C04jypCWpcrbNr6hb6l8EM27ssp1NJFC/SBGdPaLgUiiuJcHoCGfhF0T4VgaYZc/sATiYCyfvQn9h9W7+XkakCQyD5GVuqXf07c=,iv:gxeGlWZEtVHO68kAtdz7bJCNGzbcanUzqX73lYeDMwo=,tag:5z//KnPmKcWdWhc9yGBLNg==,type:str]
+    lastmodified: "2024-10-09T14:15:23Z"
+    mac: ENC[AES256_GCM,data:Sm8hMCHoRGSVa+0/QbBWk60xkl0vn2pHk061liryW8OyAw7brVakAndBgReYeVlks1OS+fuKfc4RsoU3qJWBStJyffxNS5vbXWCugW+HnmbTNK3jBO++Ij2X8qXceWVYQnNXR3N0BTYx9YdyriGNtbtF6jz6PSZN3pUBcpbgLn8=,iv:2tg6O2Tg+o7myXbYlhd/36y1d25fB3h0UuxWXQZWv4Y=,tag:0wJnXb4pXZiUYQWdZSr2ng==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.7.3
+    version: 3.8.1
diff --git a/playbook-website/config/deploy/staging/secrets.yaml b/playbook-website/config/deploy/staging/secrets.yaml
index ae5aa11956..02c18a3628 100644
--- a/playbook-website/config/deploy/staging/secrets.yaml
+++ b/playbook-website/config/deploy/staging/secrets.yaml
@@ -1,23 +1,28 @@
 appConfig:
-    secretKeyBase: ENC[AES256_GCM,data:T9rr+yNvQIiOKYgGO8p2MM+iqDius270ooqlHTwNDMMXrApWsybNBLIy88tupU/FDm01/FI7ggUZXKbO7WJvBFyxnY/nAQFbw5Xv58lsEGjIrIWAfwANd96NuCOjahnG6PRnICyLbxenQfK7gjXzdxNzRWeRhGFHp/hj29JVx9k=,iv:wB2eCtbFsCXXrPgCOUj2abpBdgsq0iOxL8AiN7wL/Hs=,tag:B3ZaXCT2IlcLmKhR/XrQ4Q==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:mZ68vE4jCVVi+xrOBnhldUwvObAIdo4HzAXg/r7J+x0BdYTH7SMQWL70mNdVyjbW+KA6aYq6VY6kOIa4FgcUfgBP6cmNDoE4SwTSosUTBm0r3Q==,iv:vqtZKpp7ALuQJYrkDpgn+sjvmEMq9tzBVlc/2hcj8qE=,tag:JByaTyGLemz1Z0wuqzjVBg==,type:str]
+    secretKeyBase: ENC[AES256_GCM,data:kOsJ3LgAPCPZ4Vdm/EBFksqneV7tSeFqKrI965UEqkZ7EQ7n/STuE0vte90/oMF1C0eBYzwHEsnT/1kPirKn5/Rz4np2M1jQIvucTfk7QMd76fueIS2lXtLw155rYL8iEh5JyxviOJNfL93U3FiySo1Fa8+1FoOqvlnHa4+/Uoo=,iv:pjEQHF499TYjNEe+O95G3VgqpAfUyJPtVws8nl3zw4k=,tag:38L8NgqyGQu8ueIBS8NcmQ==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:8vuODktXtDvYOUKS5XR7JJ0t9sX0urMWdmIeu66wwvqfGNJogacXj097PqM4MHLIsl0DICJen/2xA+uvUSV+ZVqJH7gCqeY3fH4XwMhE8dKZZA==,iv:5NYs+MiDZiR41cuazIFPXC3IKJsJgbl4eoRvTym0dTo=,tag:XP1rGTjYcl5nMUScJ/3w/A==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
-          created_at: "2023-09-12T17:53:51Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFAHaaoyZIhorapEiPc+qICAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMX8BKJ5TiL9Pi1CvvAgEQgDuKgTNkmLECrXQsOPMINqkAT5HzdOqKY/7QT3wS6+EcgVF/kVSD++0yceqYZY6urOFZs9AcPoffFghlGw==
+          created_at: "2024-10-09T14:15:36Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgF5FR6Zmbb2LmX/Ok1UTBQ1AAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMGDGnVWMmvb8v8r8JAgEQgDt6so3JsL9WSkXPw1VsgKL0K1S5G0J1of4jczsf7uJp4lCWyzYzN3iK0aD/ZMDQfq/CHkAo3da9NodoZg==
           aws_profile: ""
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
           role: arn:aws:iam::205083374951:role/playbook-admins
-          created_at: "2023-09-12T17:53:51Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgEkSuHel9uABP7kWsy3YHNXAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMjUBIc+aCDRrVDqTOAgEQgDu8ZcejevO0RMIsndJbpN47yZ/kCIhfsLGv7YQ2CamhWhAP5b4V3Bz7aY+bFkXEmsumaSbQB2j+e+vL5Q==
+          created_at: "2024-10-09T14:15:36Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgE7Au4PrldyBvUsxJu2XM0WAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQM6DF1DaKLw/6qWGHAAgEQgDsjGaEv60fzlf3o7oHNGPanagVIHk7eNWBzpgjAH256rJoC7mXeSn2qFEnRjLYOA1/4LeLgXD3B0+bHAQ==
+          aws_profile: ""
+        - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
+          role: arn:aws:iam::205083374951:role/forever-people
+          created_at: "2024-10-09T14:15:36Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgG3HMs993vA2J7ym2Gaf0jXAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMg1PVXgdv92RavP2NAgEQgDvx4LuwYEmnAGtCR1j8B0DhkL0sIowwUrJgQKcpf3453ixUzxs+vnILsUajTxm3RVpWxoPV1OjNxRfLew==
           aws_profile: ""
     gcp_kms: []
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-09-12T19:36:52Z"
-    mac: ENC[AES256_GCM,data:7fTUBII1iCtdGe4QZFkXw5j+P2vUhRJF6Ny4CxeTzZctRi+upYME23maBPpzEFjKU0J9S1jLl1XFodOSZe5Sc3E1UEOBhs1/J7rvuEhWZC5QkKXVrq/UzNkDPO9eTQmE7XA6/w0TLx++xcy9iSHIsrLubidAU3EO5R4eaiaT3gw=,iv:zfDYlma2ltcRHWw47rn/kSJjJX3s95Xg5kvBM96Koz4=,tag:GiHRN/m9Q6GAITAFmPZobg==,type:str]
+    lastmodified: "2024-10-09T14:15:37Z"
+    mac: ENC[AES256_GCM,data:XOHOpmOsuCjeaB+85g3SyDw5FtA+PakIGJURGMQhKXQtT/OHjAgepUDhloI8b92RntAOIRqD1GhB5lwHpfNUk0ZVVIQ/uwwwIOuQWZLhq3c+V+ItcPyCQgF2GCy9yTxaiyNABBDpGRPeLFr+kP2R2Yri9mROhuHaNmkdCp1ftbc=,iv:iRlk5I0cdM5H42YKnsgpg3F9/rs1lvWy6y8TIXKvhqU=,tag:7JSWiFdFTGyvXBMuvd0XMw==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.7.3
+    version: 3.8.1

From 6fcfb7e103ea8029804c35cee7c14a3d92505e53 Mon Sep 17 00:00:00 2001
From: Aaron Kuehler <aaron.kuehler@powerhrg.com>
Date: Wed, 9 Oct 2024 11:50:41 -0400
Subject: [PATCH 08/31] Fix staging and production deployments (#3782)

Deployments to non-pr environments are broken.

-
https://milano.powerapp.cloud/powerhome/playbook/staging/deploys/9880200#

```
key not found: "open_ai"
```

First, https://github.com/powerhome/playbook/pull/3776 only added
values for the `open_ai` value to the `prs` environment - IE review
stacks. The project still needs valaues for staging and production.

Second, even if these values were present, the env var name the
application is looking for and the env var name used by the deployment
are different.


https://github.com/powerhome/playbook/blob/ddf4db1da92383ac58e8c6f17669a0d38629c7c2/playbook-website/config/initializers/openai.rb#L3

---------

Co-authored-by: Jasper <jasperfurniss@gmail.com>
---
 playbook-website/config/deploy/production/secrets.yaml       | 5 +++--
 playbook-website/config/deploy/staging/secrets.yaml          | 5 +++--
 playbook-website/config/deploy/templates/deployment.yaml.erb | 4 ++--
 playbook-website/config/deploy/templates/shell.yaml.erb      | 2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/playbook-website/config/deploy/production/secrets.yaml b/playbook-website/config/deploy/production/secrets.yaml
index 35a7fcf0da..50ecb25332 100644
--- a/playbook-website/config/deploy/production/secrets.yaml
+++ b/playbook-website/config/deploy/production/secrets.yaml
@@ -1,6 +1,7 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:pTc2zofEnukd275BCaIpHOM5LokYsaYdgyGPHH6tggclP8Fj2S3/s7UREfDDuNZdAWAelmfWj3AY6xhtmdNRXt0F1UDvrNw0aCDAUqQK/jfHvgCtPQ2ncdZdpoUeEzmTaHUu3JVCphrCBFWxYrSvQg5qfx/docSiGR/PtaWTgOA=,iv:NwUXrRidkh5gT0E90h8CH9qtddboQnd2uvQfPXVkfM0=,tag:vJ5vPuSFeiRc+kDX5tY3Jg==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:pnb9JEfwZ0wCe+eh1CChiKiYAyyMeRtMvJEy9HyY9HFyleFB336Q6nVFx1D74LSxgNbrZiBqg/aA1ZysYCIDRciN6LOMlFAn5AAbMhpYcdNbLQ==,iv:j8l3ISTxrLVF21VRTDkqcmxeMt8jPrZDzDW9rHZ84lc=,tag:eMnHnxYQ+uAIhba0bDNuAA==,type:str]
+    open_ai: ENC[AES256_GCM,data:He7ruscMUMlif05pZhA7f0/rjVt1oG8qzJKGXO6SxHVKZ5t062dD3covgJAGqjCh9aH4wcjCS2xyhBNJWbqjcLhrYsLHuZB4URLfA1CyhJa+maReOCOH88vTutFdIYY=,iv:cZBzbIWxtp+sq3mcE+YGeHeALlSADsU7uXgmKgbmQc8=,tag:a09iJDiJRQ5ImhndwPeYkA==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
@@ -21,8 +22,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T14:15:48Z"
-    mac: ENC[AES256_GCM,data:8Rq2gIcrWSNzsI79Lo/UOU5wZnyPG/AwODq2K6mYlPwBK0BhkAxKKMmMBCJzBNMWEFX33loqXnPjLE2Y6Cx8WSuI7EvISIzv6ekoRR5n8QnCOarH8zz/DZOnjgQI9F+fn0kRUEMIdyIduiDjAafXyp6RDlHUl7JxxSKaObFQoL0=,iv:xGadGENEQ4RE1GKuJTh0xeZ8hlWr7dSvwYHGTUIcTeM=,tag:r0j68SWB1Fl82iH8KjK0zw==,type:str]
+    lastmodified: "2024-10-09T15:15:57Z"
+    mac: ENC[AES256_GCM,data:VXYQZHkMLlAppSm5tEbLSEVJtjaPzgW3ePN8tzvoxyIsGe/zr8QkuP7EcXbPdk3HxOwcSh+X0TfF/AOi2cZHChQYH6I69JgbXuYp5dHRWymGe9TIF0GbaChyWK1tbfSadty9BOqb6CtzwD/tMF59G8BvLElqekpTf71h2IaFC8k=,iv:7wbclLhQrBJJ8+M8lGJSUr6Td4YjSYitX4AUmZmp7XE=,tag:jbFgriGrENcoKHxR5jqC5w==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.8.1
diff --git a/playbook-website/config/deploy/staging/secrets.yaml b/playbook-website/config/deploy/staging/secrets.yaml
index 02c18a3628..9365badf28 100644
--- a/playbook-website/config/deploy/staging/secrets.yaml
+++ b/playbook-website/config/deploy/staging/secrets.yaml
@@ -1,6 +1,7 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:kOsJ3LgAPCPZ4Vdm/EBFksqneV7tSeFqKrI965UEqkZ7EQ7n/STuE0vte90/oMF1C0eBYzwHEsnT/1kPirKn5/Rz4np2M1jQIvucTfk7QMd76fueIS2lXtLw155rYL8iEh5JyxviOJNfL93U3FiySo1Fa8+1FoOqvlnHa4+/Uoo=,iv:pjEQHF499TYjNEe+O95G3VgqpAfUyJPtVws8nl3zw4k=,tag:38L8NgqyGQu8ueIBS8NcmQ==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:8vuODktXtDvYOUKS5XR7JJ0t9sX0urMWdmIeu66wwvqfGNJogacXj097PqM4MHLIsl0DICJen/2xA+uvUSV+ZVqJH7gCqeY3fH4XwMhE8dKZZA==,iv:5NYs+MiDZiR41cuazIFPXC3IKJsJgbl4eoRvTym0dTo=,tag:XP1rGTjYcl5nMUScJ/3w/A==,type:str]
+    open_ai: ENC[AES256_GCM,data:XX6uvmMSXUvaZFcLR4o5zOmZaQDodlRP4tpZ9Od73pnk4sA6VEaPoqBk3AHr0Ret5KD0WhE2TLnMt2UVEv4+xeRcct0lJtN/n+xXODXsGXoRYRRF7hiYGTJJewT5glY=,iv:tOWyS9Ep+TmP4MtY6LEez9XcD/mWERVV2sbEXQU8rrc=,tag:v3sv3+FzybiKijYY7ncqYg==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
@@ -21,8 +22,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T14:15:37Z"
-    mac: ENC[AES256_GCM,data:XOHOpmOsuCjeaB+85g3SyDw5FtA+PakIGJURGMQhKXQtT/OHjAgepUDhloI8b92RntAOIRqD1GhB5lwHpfNUk0ZVVIQ/uwwwIOuQWZLhq3c+V+ItcPyCQgF2GCy9yTxaiyNABBDpGRPeLFr+kP2R2Yri9mROhuHaNmkdCp1ftbc=,iv:iRlk5I0cdM5H42YKnsgpg3F9/rs1lvWy6y8TIXKvhqU=,tag:7JSWiFdFTGyvXBMuvd0XMw==,type:str]
+    lastmodified: "2024-10-09T15:15:44Z"
+    mac: ENC[AES256_GCM,data:zU8gmGa8a6HK0pC9Vn8za0W33frXOcQwSpfGJg0XVE2688PvAIp1D7yHPGS/ncZ56geVr9AGAlScwiAnhG1SVwUPUEi2ryfRCvyrlXwHlwvVP1/bmehmF7MP6jbfj4r6XRjdcKI6fTpkPsNdZ7718VAqxh8VFNNcuHU9NoXGTBM=,iv:sgQStIeMoF15XjH6FgOKIng5nqOhYeeqRAu7AeyrVz4=,tag:coDyxtBzfaTR5ERuC3Azbw==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.8.1
diff --git a/playbook-website/config/deploy/templates/deployment.yaml.erb b/playbook-website/config/deploy/templates/deployment.yaml.erb
index a3220c1c94..c1396a2d99 100644
--- a/playbook-website/config/deploy/templates/deployment.yaml.erb
+++ b/playbook-website/config/deploy/templates/deployment.yaml.erb
@@ -50,7 +50,7 @@ spec:
                 secretKeyRef:
                   name: playbook
                   key: sentry-dsn
-            - name: OPEN_AI
+            - name: OPEN_AI_KEY
               valueFrom:
                 secretKeyRef:
                   name: playbook
@@ -77,4 +77,4 @@ spec:
               "memory" => "256Mi",
               "ephemeral-storage" => "100Mi"
             }
-          } %> 
+          } %>
diff --git a/playbook-website/config/deploy/templates/shell.yaml.erb b/playbook-website/config/deploy/templates/shell.yaml.erb
index 8305c84094..6c4344a74b 100644
--- a/playbook-website/config/deploy/templates/shell.yaml.erb
+++ b/playbook-website/config/deploy/templates/shell.yaml.erb
@@ -41,7 +41,7 @@ template:
             value: "true"
           - name: RAILS_LOG_TO_STDOUT
             value: "true"
-          - name: OPEN_AI
+          - name: OPENAI_API_KEY
             valueFrom:
               secretKeyRef:
                 name: playbook

From c9d28b847e450176763d42b883292538a46042d3 Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:16:24 -0400
Subject: [PATCH 09/31] [PBNTR-442] Advanced Table kit "toggle all" is inverted
 in Rails (#3790)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-442](https://runway.powerhrg.com/backlog_items/PBNTR-442) address
the current incorrect behavior for the "toggle all" icon in the Rails
Advanced Table kit. For both headers (see [default doc
ex](https://playbook.powerapp.cloud/kits/advanced_table/rails?sort=year_asc#default-required-props))
and subheaders (see [subheader doc
ex](https://playbook.powerapp.cloud/kits/advanced_table/rails#subrow-headers))
the toggle all button will just switch the rows that are closed to open
and vice versa.

The desired behavior is to open all rows and close them in sync - if
only some are open, the first click should open all of them, and from
then on close all/open all in sync (see [React doc
examples](https://playbook.powerapp.cloud/kits/advanced_table/react#default-required-props)
for expected behavior here). This PR updates the PbEnhancedElement logic
(and moves script tag javascript from two kit html.erb files to the
index.js).

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


https://github.com/user-attachments/assets/7d280ee3-373a-42aa-98cf-dc056f2dc913



**How to test?** Steps to confirm the desired behavior:
1. Go to the rails advanced table [default doc
example](https://pr3790.playbook.beta.gm.powerapp.cloud/kits/advanced_table/rails#default-required-props).
2. Click on one of the years to expand that row. Then click on the
toggle all icon next to the "Year" label. This should open the other two
years so all three are open. Click on the toggle all icon again and all
three year sections should close.
3. Keep clicking around the doc example - behavior should be consistent
no matter which rows start open/closed.
4. Go to the rails advanced table [subrow headers doc
example](https://pr3790.playbook.beta.gm.powerapp.cloud/kits/advanced_table/rails#subrow-headers).
5. Click on one of the years to expand that row, click on the Q1 section
to open it further, then click on one of the months in the nested
section. Then click on the toggle all icon of the subrow header next to
the "Month" label. This should open the other month so both are open.
Click on the toggle all icon again and both month sections should close.
6. Keep clicking around the doc example - behavior should be consistent
no matter which rows start open/closed.


#### 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_advanced_table/index.js       | 60 +++++++++++++++++++
 .../pb_advanced_table/table_header.html.erb   | 10 +---
 .../table_subrow_header.html.erb              | 10 +---
 3 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js
index fa6e2523bf..ec9c1a71b5 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js
@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
+  
+  static expandedRows = new Set()
+  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id)
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id)
+        }
+      }
       this.toggleElement(this.target)
     })
   }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
+
+  static handleToggleAllHeaders(element) {
+    const table = element.closest('.pb_table')
+    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
+    
+    const expandedRows = Array.from(firstLevelButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedRows.length === firstLevelButtons.length) {
+      expandedRows.forEach(button => {
+        button.click()
+      })
+      this.expandedRows.clear()
+    } else {
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+  static handleToggleAllSubRows(element, rowDepth) {
+    const parentElement = element.closest(".toggle-content")
+    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
+    
+    const expandedSubRows = Array.from(subrowButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedSubRows.length === subrowButtons.length) {
+      expandedSubRows.forEach(button => {
+        button.click()
+      })
+    } else {
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+}
+
+window.expandAllRows = (element) => {
+  PbAdvancedTable.handleToggleAllHeaders(element)
 }
+window.expandAllSubRows = (element, rowDepth) => {
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
+}
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
index f98b8bfda3..fa857e1926 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
\ No newline at end of file
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
index 8870a1f9ea..8815af0bf0 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
@@ -23,12 +23,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
\ No newline at end of file
+<% end %>
\ No newline at end of file

From 9ccb2f7f6ee63ed72e9388e910d39dac14434297 Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Tue, 15 Oct 2024 14:28:44 -0400
Subject: [PATCH 10/31] [PBNTR-606] Add Reset Functionality to Rails side of
 MultiLevelSelect (#3792)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[Runway Story](https://runway.powerhrg.com/backlog_items/PBNTR-606)

This PR:
- ✅ Adds reset functionality to rails side of kit so it can be used
within nitro_search_playbook_filter in Nitro
- ✅ Unblocks [this
work](https://runway.powerhrg.com/backlog_items/FIRST-1537) for First
Contact
- ✅ Creates reset doc example on rails side to showcase how to use
exposed function
---
 .../_multi_level_select.tsx                   | 17 ++++
 .../docs/_multi_level_select_reset.html.erb   | 93 +++++++++++++++++++
 .../docs/_multi_level_select_reset.md         |  1 +
 .../pb_multi_level_select/docs/example.yml    |  1 +
 4 files changed, 112 insertions(+)
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md

diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
index 07cd852766..bb1c92e1f7 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
@@ -202,6 +202,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (id) {
+      // Attach the clear function to the window, scoped by the id
+      (window as any)[`clearMultiLevelSelect_${id}`] = () => {
+        const resetData = modifyRecursive(formattedData, false);
+        setFormattedData(resetData);
+        setReturnedArray([]);
+        setDefaultReturn([]);
+        setSingleSelectedItem({ id: [], value: "", item: [] });
+        onSelect([]);
+      };
+      return () => {
+        delete (window as any)[`clearMultiLevelSelect_${id}`];
+      };
+    }
+  }, [formattedData, id, onSelect]);
+
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
     id: string,
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
new file mode 100644
index 0000000000..c8959a350d
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
@@ -0,0 +1,93 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-reset-example",
+    name: "my_array",
+    tree_data: treeData,
+    return_all_selected: true
+}) %>
+
+<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
+
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
+
+    exampleResetButton.addEventListener("click", () => {
+        clearMultiLevelSelectById('multi-level-select-reset-example');
+      });
+    function clearMultiLevelSelectById(id) {
+      const clearFunction = window[`clearMultiLevelSelect_${id}`];
+      if (clearFunction) {
+        clearFunction();
+      } else {
+        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
+      }
+    }
+  })
+</script>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
new file mode 100644
index 0000000000..bfe15aa20f
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
@@ -0,0 +1 @@
+In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work. 
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
index 273db8bb68..09f50945e4 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
@@ -7,6 +7,7 @@ examples:
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_reset: Reset Selection
 
   react:
   - multi_level_select_default: Default

From 88302fb76475937ac9c57acccab95be273f436e3 Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:24:25 -0400
Subject: [PATCH 11/31] [PBNTR-600] Filter Kit - Filter Kit displaying zero
 results (#3799)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-600](https://runway.powerhrg.com/backlog_items/PBNTR-600)
improves the React Filter kit's UI so it more closely matches the Rails
side. Specifically, this code update allows for "Results: 0" to appear
in the context of the filter kit if there are no results for a filtered
search; previously, the "Results: " TitleCount component would just
disappear if there were no Results. If the Filter's results prop is
undefined, the "Results: " TitleCount component will not appear, which
is logical behavior.

**Screenshots:** Screenshots to visualize your addition/change
_Screenshots on their way_
Current production behavior: Results 1+ shows "Results: 1" (first
filter) but Results: 0 does not appear (second filter)
<img width="1489" alt="react filter doc ex current if 1 or 0"
src="https://github.com/user-attachments/assets/b13dfff8-2d22-4263-9009-dcc08c666ea3">
New behavior for default template Filter: "Results: 0" appears
<img width="1476" alt="react filter shows 0"
src="https://github.com/user-attachments/assets/413a29f4-0871-4654-bee3-7f7d0f4a9038">
New behavior for single template Filter - 0 Results and XXX Results both
appear now
<img width="1281" alt="0 or multiple results in single template"
src="https://github.com/user-attachments/assets/6271b730-2b4e-45e6-8b39-89176e2b5197">
If Results prop is undefined, "Results: " will not appear
<img width="1280" alt="undefined results in both templates"
src="https://github.com/user-attachments/assets/92f28284-dad2-4410-961c-264565310f78">
Screenshot from an alpha in nitro-web on local - Results: 0 now appears
on our React Basic Table Template filter
<img width="1553" alt="local alpha showing react results 0 in templates"
src="https://github.com/user-attachments/assets/9115ce0f-2206-4b9a-b156-3e8c1faff727">


**How to test?** Steps to confirm the desired behavior:
1. Go to review env [react filter kit default doc
example](https://pr3799.playbook.beta.gm.powerapp.cloud/kits/filter/react#default)-
see "Results: 0" in second filter in example.
2. Compare to current React Filter kit implementation - can test by
going to [React Basic Table
template](https://nitroqa.powerhrg.com/dev_docs/playbook/templates/demos/basic_table/react)
and searching something that will have no results like "first
name=elisashapiro". Observe how the "Results: " section just disappears.
3. Compare to Rails Filter kit behavior in current production Playbook
[Rails default doc
example](https://playbook.powerapp.cloud/kits/filter/rails#default) and
the [Rails Basic Table
template](https://nitroqa.powerhrg.com/dev_docs/playbook/templates/demos/basic_table/rails)
- "Results: 0" appears for in both places.


#### 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.~~
---
 .../app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx  | 6 ++++--
 .../app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
index 922324ed08..de66e3ed24 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
@@ -13,6 +13,7 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
+    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
+    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results && title) {
+    if (results != null && results >=0 && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results) {
+    } else if (results !=null && results >=0 ) {
       return (
         <>
           {justResults()}
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
index b670c057a5..f57bfa097d 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={1}
+          results={0}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line

From 86b841a15d3e0cb3b7f6921ee321099f64ee1992 Mon Sep 17 00:00:00 2001
From: Carlos Lima <carloslimasd@gmail.com>
Date: Thu, 17 Oct 2024 09:10:16 -0300
Subject: [PATCH 12/31] [PBNTR-568] Adding React Dropdown cleaning feature
 (#3793)

**What does this PR do?**
Adding React Dropdown cleaning feature

**Screenshots:**
<img width="883" alt="image"
src="https://github.com/user-attachments/assets/b1080c00-9299-46ac-a481-196ca05026ff">

**How to test?**
1. Go to the Dropdown kit page
2. Scroll down to the Clear Selection doc

#### 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.tsx        | 24 ++++++++--
 .../docs/_dropdown_clear_selection.jsx        | 45 +++++++++++++++++++
 .../docs/_dropdown_clear_selection.md         |  1 +
 .../playbook/pb_dropdown/docs/example.yml     |  1 +
 .../playbook/pb_dropdown/docs/index.js        |  1 +
 .../subcomponents/DropdownOption.tsx          |  2 +-
 .../subcomponents/DropdownTrigger.tsx         |  4 +-
 7 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md

diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
index 5940e22e29..27234c3fec 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -38,7 +38,14 @@ type DropdownProps = {
     triggerRef?: any;
 };
 
-const Dropdown = (props: DropdownProps) => {
+interface DropdownComponent
+    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
+    Option: typeof DropdownOption;
+    Trigger: typeof DropdownTrigger;
+    Container: typeof DropdownContainer;
+}
+
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -125,7 +132,7 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });    
+    });
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -175,6 +182,14 @@ const Dropdown = (props: DropdownProps) => {
         dark
     });
 
+    useImperativeHandle(ref, () => ({
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
+    }));
 
     return (
         <div {...ariaProps}
@@ -258,8 +273,9 @@ const Dropdown = (props: DropdownProps) => {
             </DropdownContext.Provider>
         </div>
     )
-};
+}) as DropdownComponent
 
+Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
new file mode 100644
index 0000000000..eeece1ec52
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+
+export default DropdownClearSelection
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
new file mode 100644
index 0000000000..b251ffaea6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
@@ -0,0 +1 @@
+To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
\ 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 5f4d445870..f707a2907c 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
@@ -22,6 +22,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_clear_selection: Clear Selection
   # - 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 92feffe44a..e246c75bf3 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 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'
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
index b7363a9ed4..83061dc21e 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
-    selected.label === option.label
+    selected?.label === option.label
       ? "selected"
       : "list"
   }`;
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
index 2c172828c1..984425c7c7 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     !autocomplete && "select_only"
   );
 
-  const customDisplayPlaceholder = selected.label ? (
+  const customDisplayPlaceholder = selected?.label ? (
     <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const defaultDisplayPlaceholder = selected.label
+  const defaultDisplayPlaceholder = selected?.label
     ? selected.label
     : autocomplete
     ? ""

From 8c1763c07ef162bd8547a75f698af961161570ea Mon Sep 17 00:00:00 2001
From: Sam Duncan <samkduncan@gmail.com>
Date: Thu, 17 Oct 2024 09:27:44 -0500
Subject: [PATCH 13/31] [PLAY-1580] Automatic Release Improvements - Semver
 Targets Trigger Correct RCs  (#3808)

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

The RC script should automatically detect the Semver label (Major,
Minor, Patch) on each merged PR. Based on the detected Semver target,
the script should create the correct versioned RC (e.g., 14.3.0 for
Minor, 15.0.0 for Major). This will ensure consistency and reduce manual
intervention in the release process.

- The RC script must check for a Semver label on each PR (Major, Minor,
Patch). If no label is present, the script should return an error and
fail.
- The script should automatically generate the correct RC based on the
Semver label:
    - Major: Bump the major version (e.g., 2.0.0)
    - Minor: Bump the minor version (e.g., 1.1.0)
    - Patch: Bump the patch version (e.g., 1.0.1)
- Update documentation to reflect the Semver auto-detection process.
---
 .../github-actions-release-candidate.yml      | 160 +++++++++++-------
 1 file changed, 95 insertions(+), 65 deletions(-)

diff --git a/.github/workflows/github-actions-release-candidate.yml b/.github/workflows/github-actions-release-candidate.yml
index 0df9bed6c3..cd76ad76bd 100644
--- a/.github/workflows/github-actions-release-candidate.yml
+++ b/.github/workflows/github-actions-release-candidate.yml
@@ -15,6 +15,27 @@ jobs:
       GEM_HOST_API_KEY: ${{ secrets.RUBYGEMS_API_KEY }}
       NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
     steps:
+      - name: Check for required Semver labels
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const requiredLabels = ['Major', 'Minor', 'Patch'];
+            const { data: labels } = await github.rest.issues.listLabelsOnIssue({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+            const presentLabels = labels.map(label => label.name);
+            const presentRequiredLabel = requiredLabels.filter(label => presentLabels.includes(label));
+
+            if (presentRequiredLabels.length === 0) {
+              core.setFailed('Your pull request is missing a required Semver label: (${requiredLabels.join(', ')})');
+            else if (presentRequiredLabels.length > 1) {
+              core.setFailed('Your pull request has multiple Semver labels. Please use only one.')
+            } else {
+              console.log('Pull request has a required Semver label.');
+            }
       - uses: actions/checkout@v3
       - name: 'Enable registry auth'
         shell: bash
@@ -30,79 +51,88 @@ jobs:
         with:
           bundler-cache: true
       - name: Python Setup
-        uses: actions/setup-python@v4 
-        with: 
+        uses: actions/setup-python@v4
+        with:
           python-version: '3.9'
       - name: Set Git Config
         run: |
           git config --local user.name "${{ github.actor }}"
           git config --local user.email "${{ github.actor }}@users.noreply.github.com"
-      - name: Grab Current Version and Set New RC Version
-        id: set-version
+      - name: Determine version increment type
+        id: version-label
         run: |
-          current_npm_version=$(node -pe "require('./package.json').version")
-          
-          if [[ $current_npm_version == *"-rc."* ]]; then
-            new_npm_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+          if [[ ${{ contains(github.event.pull_request.labels.*.name, 'Major') }} == 'true' ]]; then
+            echo "INCREMENT=major" >> $GITHUB_OUTPUT
+          elif [[ ${{ contains(github.event.pull_request.labels.*.name, 'Minor') }} == 'true' ]]; then
+            echo "INCREMENT=minor" >> $GITHUB_OUTPUT
+          elif [[ ${{ contains(github.event.pull_request.labels.*.name, 'Patch') }} == 'true' ]]; then
+            echo "INCREMENT=patch" >> $GITHUB_OUTPUT
           else
-            new_npm_version=$(yarn version --preminor --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
-          fi
-          
-          new_npm_version=${new_npm_version#v}
-          new_ruby_version=$(echo $new_npm_version | sed 's/-rc\./.pre.rc./')
-          
-          echo "new_npm_version=${new_npm_version}" >> $GITHUB_ENV
-          echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
-      - name: Check if version exists and increment if necessary
-        run: |
-          max_attempts=100
-          attempt=0
-          current_version="${{ env.new_npm_version }}"
-          while [ $attempt -lt $max_attempts ]; do
-            if npm view playbook-ui@$current_version version &>/dev/null; then
-              echo "Version $current_version already exists. Incrementing..."
-              current_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
-              current_version=${current_version#v}
-            else
-              echo "Version $current_version is available."
-              break
-            fi
-            attempt=$((attempt+1))
-          done
-          if [ $attempt -eq $max_attempts ]; then
-            echo "Error: Maximum attempts reached. Unable to find an available version."
+            echo "No valid version label found. Please add a Major, Minor, or Patch label to the PR."
             exit 1
           fi
-          echo "new_npm_version=${current_version}" >> $GITHUB_ENV
-          new_ruby_version=$(echo $current_version | sed 's/-rc\./.pre.rc./')
-          echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
-      - name: Update Version.rb
-        run: |
-          gem install bundler
-          bundle
-          bin/rails pb_release:action[${{env.new_ruby_version}}]
-      - name: Distribute and Publish (NPM)
-        run: |
-          yarn install
-          bundle
-          yarn release
-          npm pack
-          npm publish --registry https://registry.npmjs.org playbook-ui-${{ env.new_npm_version }}.tgz --tag rc
-      - name: Distribute and Publish (RubyGems)
-        run: |
-          bin/build_gem
-          gem build lib/playbook_ui_docs.gemspec
-          rm -rf dist/playbook-doc.js dist/playbook-rails.js dist/app  dist/pb_doc_helper.rb dist/menu.yml
-          gem push playbook_ui-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
-          gem push playbook_ui_docs-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
-      - name: Create GitHub Release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh release create v${{ env.new_npm_version }} \
-            --title "Release Candidate v${{ env.new_npm_version }}" \
-            --notes "This is a release candidate version. Please test thoroughly before promoting to a stable release." \
-            --prerelease
+      # - name: Grab Current Version and Set New RC Version
+      #   id: set-version
+      #   run: |
+      #     current_npm_version=$(node -pe "require('./package.json').version")
+
+      #     new_npm_version=$(yarn version --pre${{ steps.version-label.outputs.INCREMENT }} --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+
+      #     new_npm_version=${new_npm_version#v}
+      #     new_ruby_version=$(echo $new_npm_version | sed 's/-rc\./.pre.rc./')
+
+      #     echo "new_npm_version=${new_npm_version}" >> $GITHUB_ENV
+      #     echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
+      # - name: Check if version exists and increment if necessary
+      #   run: |
+      #     max_attempts=100
+      #     attempt=0
+      #     current_version="${{ env.new_npm_version }}"
+      #     while [ $attempt -lt $max_attempts ]; do
+      #       if npm view playbook-ui@$current_version version &>/dev/null; then
+      #         echo "Version $current_version already exists. Incrementing..."
+      #         current_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+      #         current_version=${current_version#v}
+      #       else
+      #         echo "Version $current_version is available."
+      #         break
+      #       fi
+      #       attempt=$((attempt+1))
+      #     done
+      #     if [ $attempt -eq $max_attempts ]; then
+      #       echo "Error: Maximum attempts reached. Unable to find an available version."
+      #       exit 1
+      #     fi
+      #     echo "new_npm_version=${current_version}" >> $GITHUB_ENV
+      #     new_ruby_version=$(echo $current_version | sed 's/-rc\./.pre.rc./')
+      #     echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
+      # - name: Update Version.rb
+      #   run: |
+      #     gem install bundler
+      #     bundle
+      #     bin/rails pb_release:action[${{env.new_ruby_version}}]
+      # - name: Distribute and Publish (NPM)
+      #   run: |
+      #     yarn install
+      #     bundle
+      #     yarn release
+      #     npm pack
+      #     npm publish --registry https://registry.npmjs.org playbook-ui-${{ env.new_npm_version }}.tgz --tag rc
+      # - name: Distribute and Publish (RubyGems)
+      #   run: |
+      #     bin/build_gem
+      #     gem build lib/playbook_ui_docs.gemspec
+      #     rm -rf dist/playbook-doc.js dist/playbook-rails.js dist/app  dist/pb_doc_helper.rb dist/menu.yml
+      #     gem push playbook_ui-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
+      #     gem push playbook_ui_docs-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
+      # - name: Create GitHub Release
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #   run: |
+      #     gh release create v${{ env.new_npm_version }} \
+      #       --title "Release Candidate v${{ env.new_npm_version }}" \
+      #       --notes "This is a release candidate version. Please test thoroughly before promoting to a stable release." \
+      #       --prerelease
       - name: Leave PR comment
         uses: actions/github-script@v6
         env:
@@ -140,7 +170,7 @@ jobs:
                 issue_number: pullRequestNumber,
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                body: `You merged this pr to master branch: 
+                body: `You merged this pr to master branch:
                 - Ruby Gem: [${{env.RUBY_GEM_VERSION}}](${{env.RUBY_GEM_LINK}})
                 - NPM: [${{env.NPM_VERSION}}](${{env.NPM_LINK}})`
               });

From ac745f419677528f2fb541b4e5d6b8b5e4098334 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Thu, 17 Oct 2024 10:39:30 -0400
Subject: [PATCH 14/31] Fix (#3814)

**What does this PR do?** A clear and concise description with your
runway ticket url.


**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.
---
 .github/workflows/github-actions-release-candidate.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/github-actions-release-candidate.yml b/.github/workflows/github-actions-release-candidate.yml
index cd76ad76bd..63024049a9 100644
--- a/.github/workflows/github-actions-release-candidate.yml
+++ b/.github/workflows/github-actions-release-candidate.yml
@@ -31,7 +31,7 @@ jobs:
 
             if (presentRequiredLabels.length === 0) {
               core.setFailed('Your pull request is missing a required Semver label: (${requiredLabels.join(', ')})');
-            else if (presentRequiredLabels.length > 1) {
+            } else if (presentRequiredLabels.length > 1) {
               core.setFailed('Your pull request has multiple Semver labels. Please use only one.')
             } else {
               console.log('Pull request has a required Semver label.');

From 07aa6fd9ff07cbe5e8cbba15f8c6606705f13c13 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Thu, 17 Oct 2024 11:07:28 -0400
Subject: [PATCH 15/31] Revert "Fix" (#3815)

Reverts powerhome/playbook#3814
---
 .github/workflows/github-actions-release-candidate.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/github-actions-release-candidate.yml b/.github/workflows/github-actions-release-candidate.yml
index 63024049a9..cd76ad76bd 100644
--- a/.github/workflows/github-actions-release-candidate.yml
+++ b/.github/workflows/github-actions-release-candidate.yml
@@ -31,7 +31,7 @@ jobs:
 
             if (presentRequiredLabels.length === 0) {
               core.setFailed('Your pull request is missing a required Semver label: (${requiredLabels.join(', ')})');
-            } else if (presentRequiredLabels.length > 1) {
+            else if (presentRequiredLabels.length > 1) {
               core.setFailed('Your pull request has multiple Semver labels. Please use only one.')
             } else {
               console.log('Pull request has a required Semver label.');

From dd19284b71a78e42b52b249ae175d131734d9f0e Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Thu, 17 Oct 2024 11:16:50 -0400
Subject: [PATCH 16/31] Revert "[PLAY-1580] Automatic Release Improvements -
 Semver Targets Trigger Correct RCs " (#3816)

Reverts powerhome/playbook#3808
---
 .../github-actions-release-candidate.yml      | 160 +++++++-----------
 1 file changed, 65 insertions(+), 95 deletions(-)

diff --git a/.github/workflows/github-actions-release-candidate.yml b/.github/workflows/github-actions-release-candidate.yml
index cd76ad76bd..0df9bed6c3 100644
--- a/.github/workflows/github-actions-release-candidate.yml
+++ b/.github/workflows/github-actions-release-candidate.yml
@@ -15,27 +15,6 @@ jobs:
       GEM_HOST_API_KEY: ${{ secrets.RUBYGEMS_API_KEY }}
       NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
     steps:
-      - name: Check for required Semver labels
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const requiredLabels = ['Major', 'Minor', 'Patch'];
-            const { data: labels } = await github.rest.issues.listLabelsOnIssue({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-            });
-            const presentLabels = labels.map(label => label.name);
-            const presentRequiredLabel = requiredLabels.filter(label => presentLabels.includes(label));
-
-            if (presentRequiredLabels.length === 0) {
-              core.setFailed('Your pull request is missing a required Semver label: (${requiredLabels.join(', ')})');
-            else if (presentRequiredLabels.length > 1) {
-              core.setFailed('Your pull request has multiple Semver labels. Please use only one.')
-            } else {
-              console.log('Pull request has a required Semver label.');
-            }
       - uses: actions/checkout@v3
       - name: 'Enable registry auth'
         shell: bash
@@ -51,88 +30,79 @@ jobs:
         with:
           bundler-cache: true
       - name: Python Setup
-        uses: actions/setup-python@v4
-        with:
+        uses: actions/setup-python@v4 
+        with: 
           python-version: '3.9'
       - name: Set Git Config
         run: |
           git config --local user.name "${{ github.actor }}"
           git config --local user.email "${{ github.actor }}@users.noreply.github.com"
-      - name: Determine version increment type
-        id: version-label
+      - name: Grab Current Version and Set New RC Version
+        id: set-version
         run: |
-          if [[ ${{ contains(github.event.pull_request.labels.*.name, 'Major') }} == 'true' ]]; then
-            echo "INCREMENT=major" >> $GITHUB_OUTPUT
-          elif [[ ${{ contains(github.event.pull_request.labels.*.name, 'Minor') }} == 'true' ]]; then
-            echo "INCREMENT=minor" >> $GITHUB_OUTPUT
-          elif [[ ${{ contains(github.event.pull_request.labels.*.name, 'Patch') }} == 'true' ]]; then
-            echo "INCREMENT=patch" >> $GITHUB_OUTPUT
+          current_npm_version=$(node -pe "require('./package.json').version")
+          
+          if [[ $current_npm_version == *"-rc."* ]]; then
+            new_npm_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
           else
-            echo "No valid version label found. Please add a Major, Minor, or Patch label to the PR."
+            new_npm_version=$(yarn version --preminor --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+          fi
+          
+          new_npm_version=${new_npm_version#v}
+          new_ruby_version=$(echo $new_npm_version | sed 's/-rc\./.pre.rc./')
+          
+          echo "new_npm_version=${new_npm_version}" >> $GITHUB_ENV
+          echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
+      - name: Check if version exists and increment if necessary
+        run: |
+          max_attempts=100
+          attempt=0
+          current_version="${{ env.new_npm_version }}"
+          while [ $attempt -lt $max_attempts ]; do
+            if npm view playbook-ui@$current_version version &>/dev/null; then
+              echo "Version $current_version already exists. Incrementing..."
+              current_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
+              current_version=${current_version#v}
+            else
+              echo "Version $current_version is available."
+              break
+            fi
+            attempt=$((attempt+1))
+          done
+          if [ $attempt -eq $max_attempts ]; then
+            echo "Error: Maximum attempts reached. Unable to find an available version."
             exit 1
           fi
-      # - name: Grab Current Version and Set New RC Version
-      #   id: set-version
-      #   run: |
-      #     current_npm_version=$(node -pe "require('./package.json').version")
-
-      #     new_npm_version=$(yarn version --pre${{ steps.version-label.outputs.INCREMENT }} --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
-
-      #     new_npm_version=${new_npm_version#v}
-      #     new_ruby_version=$(echo $new_npm_version | sed 's/-rc\./.pre.rc./')
-
-      #     echo "new_npm_version=${new_npm_version}" >> $GITHUB_ENV
-      #     echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
-      # - name: Check if version exists and increment if necessary
-      #   run: |
-      #     max_attempts=100
-      #     attempt=0
-      #     current_version="${{ env.new_npm_version }}"
-      #     while [ $attempt -lt $max_attempts ]; do
-      #       if npm view playbook-ui@$current_version version &>/dev/null; then
-      #         echo "Version $current_version already exists. Incrementing..."
-      #         current_version=$(yarn version --prerelease --preid rc --no-git-tag-version | grep "New version:" | awk '{print $4}')
-      #         current_version=${current_version#v}
-      #       else
-      #         echo "Version $current_version is available."
-      #         break
-      #       fi
-      #       attempt=$((attempt+1))
-      #     done
-      #     if [ $attempt -eq $max_attempts ]; then
-      #       echo "Error: Maximum attempts reached. Unable to find an available version."
-      #       exit 1
-      #     fi
-      #     echo "new_npm_version=${current_version}" >> $GITHUB_ENV
-      #     new_ruby_version=$(echo $current_version | sed 's/-rc\./.pre.rc./')
-      #     echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
-      # - name: Update Version.rb
-      #   run: |
-      #     gem install bundler
-      #     bundle
-      #     bin/rails pb_release:action[${{env.new_ruby_version}}]
-      # - name: Distribute and Publish (NPM)
-      #   run: |
-      #     yarn install
-      #     bundle
-      #     yarn release
-      #     npm pack
-      #     npm publish --registry https://registry.npmjs.org playbook-ui-${{ env.new_npm_version }}.tgz --tag rc
-      # - name: Distribute and Publish (RubyGems)
-      #   run: |
-      #     bin/build_gem
-      #     gem build lib/playbook_ui_docs.gemspec
-      #     rm -rf dist/playbook-doc.js dist/playbook-rails.js dist/app  dist/pb_doc_helper.rb dist/menu.yml
-      #     gem push playbook_ui-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
-      #     gem push playbook_ui_docs-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
-      # - name: Create GitHub Release
-      #   env:
-      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      #   run: |
-      #     gh release create v${{ env.new_npm_version }} \
-      #       --title "Release Candidate v${{ env.new_npm_version }}" \
-      #       --notes "This is a release candidate version. Please test thoroughly before promoting to a stable release." \
-      #       --prerelease
+          echo "new_npm_version=${current_version}" >> $GITHUB_ENV
+          new_ruby_version=$(echo $current_version | sed 's/-rc\./.pre.rc./')
+          echo "new_ruby_version=${new_ruby_version}" >> $GITHUB_ENV
+      - name: Update Version.rb
+        run: |
+          gem install bundler
+          bundle
+          bin/rails pb_release:action[${{env.new_ruby_version}}]
+      - name: Distribute and Publish (NPM)
+        run: |
+          yarn install
+          bundle
+          yarn release
+          npm pack
+          npm publish --registry https://registry.npmjs.org playbook-ui-${{ env.new_npm_version }}.tgz --tag rc
+      - name: Distribute and Publish (RubyGems)
+        run: |
+          bin/build_gem
+          gem build lib/playbook_ui_docs.gemspec
+          rm -rf dist/playbook-doc.js dist/playbook-rails.js dist/app  dist/pb_doc_helper.rb dist/menu.yml
+          gem push playbook_ui-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
+          gem push playbook_ui_docs-${{ env.new_ruby_version }}.gem --host https://rubygems.org/ --key ${{ env.GEM_HOST_API_KEY }}
+      - name: Create GitHub Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create v${{ env.new_npm_version }} \
+            --title "Release Candidate v${{ env.new_npm_version }}" \
+            --notes "This is a release candidate version. Please test thoroughly before promoting to a stable release." \
+            --prerelease
       - name: Leave PR comment
         uses: actions/github-script@v6
         env:
@@ -170,7 +140,7 @@ jobs:
                 issue_number: pullRequestNumber,
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                body: `You merged this pr to master branch:
+                body: `You merged this pr to master branch: 
                 - Ruby Gem: [${{env.RUBY_GEM_VERSION}}](${{env.RUBY_GEM_LINK}})
                 - NPM: [${{env.NPM_VERSION}}](${{env.NPM_LINK}})`
               });

From 580161f45123097c98fb75af7a23bc57490fd65c Mon Sep 17 00:00:00 2001
From: Mark Rosenberg <38965626+markdoeswork@users.noreply.github.com>
Date: Thu, 17 Oct 2024 11:18:28 -0400
Subject: [PATCH 17/31] [PLAY-1566] Multiple User Bubble Size Prop (#3719)

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

Added Size prop for multi user stacked kit's bubble variant

All the deets are [in this
figma](https://www.figma.com/design/Q1mz4nRApKN5rlzqCV4IC0/Multiple-User-Bubble?node-id=3701-1514&t=8SZl8NL1XQV1BelO-0)

I had to manually map out a bunch of sizing and position css, I didn't
use tokens because not all of the sizes matched our tokens.

review env link
https://pr3719.playbook.beta.hq.powerapp.cloud/kits/multiple_users_stacked/react#sizes


![screenshot-127_0_0_1_3000-2024_09_27-11_35_41](https://github.com/user-attachments/assets/ea4da377-4e83-41d7-9f9d-ba24c8d9a4e4)
---
 .../_multiple_users_stacked.scss              | 234 ++++++++----
 .../_multiple_users_stacked.test.js           |  10 +-
 .../_multiple_users_stacked.tsx               |  24 +-
 .../_multiple_users_stacked_size.html.erb     | 336 ++++++++++++++++++
 .../docs/_multiple_users_stacked_size.jsx     |  97 +++++
 .../docs/example.yml                          |   2 +
 .../pb_multiple_users_stacked/docs/index.js   |   1 +
 .../multiple_users_stacked.html.erb           |  34 +-
 .../multiple_users_stacked.rb                 |  32 +-
 .../kits/multiple_users_stacked_spec.rb       |   4 +-
 10 files changed, 686 insertions(+), 88 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx

diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
index d1ed6e11ab..c083ee2de7 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
@@ -3,6 +3,76 @@
 @import "../tokens/opacity";
 @import "../pb_avatar/avatar";
 
+$sizes: (
+  "avatar": ("sm": 38px, "md": 60px, "lg": 80px, "xl": 100px),
+  "first-item-double": ("sm": 20px, "md": 32px, "lg": 44px, "xl": 56px),
+  "first-item-triple": ("sm": 16px, "md": 24px, "lg": 32px, "xl": 44px),
+  "first-item-quadruple": ("sm": 16px, "md": 28px, "lg": 36px, "xl": 44px),
+  "second-item-double": ("sm": 12px, "md": 16px, "lg": 20px, "xl": 24px),
+  "second-item-triple": ("sm": 12px, "md": 20px, "lg": 24px, "xl": 32px),
+  "second-item-quadruple": ("sm": 12px, "md": 20px, "lg": 28px, "xl": 32px),
+  "third-item-triple": ("sm": 10px, "md": 16px, "lg": 20px, "xl": 24px),
+  "third-item-quadruple": ("sm": 10px, "md": 16px, "lg": 24px, "xl": 24px),
+  "fourth-item": ("sm": 8px, "md": 12px, "lg": 16px, "xl": 16px)
+);
+
+$positions: (
+  "second-item-double": (
+    "sm": ("top": null, "bottom": 5px, "right": 4px, "left": null),
+    "md": ("top": null, "bottom": 10px, "right": 8px, "left": null),
+    "lg": ("top": 46px, "bottom": null, "right": 12px, "left": null),
+    "xl": ("top": 58px, "bottom": null, "right": 14px, "left": null)
+  ),
+  "second-item-triple": (
+    "sm": ("top": 12px, "bottom": null, "right": 2px, "left": null),
+    "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
+    "lg": ("top": 32px, "bottom": null, "right": 9px, "left": null),
+    "xl": ("top": 41px, "bottom": null, "right": 11px, "left": null)
+  ),
+  "second-item-quadruple": (
+    "sm": ("top": null, "bottom": 9px, "right": 4px, "left": null),
+    "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
+    "lg": ("top": 31px, "bottom": null, "right": 6px, "left": null),
+    "xl": ("top": 43px, "bottom": null, "right": 9px, "left": null)
+  ),
+  "third-item-triple": (
+    "sm": ("top": null, "bottom": 3px, "right": null, "left": 11px),
+    "md": ("top": null, "bottom": 6px, "right": null, "left": 16px),
+    "lg": ("top": null, "bottom": 10px, "right": null, "left": 23px),
+    "xl": ("top": null, "bottom": 13px, "right": null, "left": 27px)
+  ),
+  "third-item-quadruple": (
+    "sm": ("top": null, "bottom": 3px, "right": null, "left": 9px),
+    "md": ("top": null, "bottom": 5px, "right": null, "left": 15px),
+    "lg": ("top": null, "bottom": 7px, "right": null, "left": 20px),
+    "xl": ("top": null, "bottom": 11px, "right": null, "left": 27px)
+  ),
+  "fourth-item": (
+    "sm": ("top": 5px, "bottom": null, "right": 6px, "left": null),
+    "md": ("top": 7px, "bottom": null, "right": 12px, "left": null),
+    "lg": ("top": 9px, "bottom": null, "right": 16px, "left": null),
+    "xl": ("top": 16px, "bottom": null, "right": 24px, "left": null)
+  ),
+  "first-item-double": (
+    "sm": ("top": 4px, "bottom": null, "right": null, "left": 3px),
+    "md": ("top": 6px, "bottom": null, "right": null, "left": 8px),
+    "lg": ("top": 8px, "bottom": null, "right": null, "left": 8px),
+    "xl": ("top": 10px, "bottom": null, "right": null, "left": 10px)
+  ),
+  "first-item-triple": (
+    "sm": ("top": 4px, "bottom": null, "right": null, "left": 4px),
+    "md": ("top": 7px, "bottom": null, "right": null, "left": 7px),
+    "lg": ("top": 10px, "bottom": null, "right": null, "left": 10px),
+    "xl": ("top": 12px, "bottom": null, "right": null, "left": 12px)
+  ),
+  "first-item-quadruple": (
+    "sm": ("top": 5px, "bottom": null, "right": null, "left": 3px),
+    "md": ("top": 7px, "bottom": null, "right": null, "left": 5px),
+    "lg": ("top": 9px, "bottom": null, "right": null, "left": 7px),
+    "xl": ("top": 16px, "bottom": null, "right": null, "left": 10px)
+  )
+);
+
 @mixin avatar-size($size) {
   height: $size;
   width: $size;
@@ -27,8 +97,8 @@
   $stacked_size: 18px;
   $max_to_display: 1, 2;
   display: inline-flex;
-  width: $container_size;
-  height: $container_size;
+  width: 28px;
+  height: 28px;
   flex-basis: $container_size;
   position: relative;
   flex-shrink: 0;
@@ -48,7 +118,7 @@
     }
   }
   &[class*=_single] .pb_multiple_users_stacked_item {
-    @include avatar-size($container_size);
+    @include avatar-size(28px);
   }
   [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     @include position((bottom: 0, right: 0));
@@ -71,72 +141,106 @@
     color: transparent;
   }
 
-  &[class*=_bubble] {
-    @include avatar-size($bubble_container_size);
-    background-color: $bg_light;
-    border-radius: 50%;
-
-    &.dark {
-      background-color: $card_dark;
-    }
-    
-    [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
-      &.dark {
-        .avatar_wrapper {
-          border: $border_size solid $border_dark;
-        }
-      }
-    }
-
-    [class^=pb_avatar_kit] {
-      &.first_item {
-        @include position((top: 4px, left: 3px));
-        @include avatar-size(20px);
-
-        &.triple_bubble {
-          @include position((top: 4px, left: 4px));
-          @include avatar-size(16px);
+  // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
+  @each $size_name, $size_value in $avatar-sizes {
+      &[class*=_bubble_][class*=_size_#{$size_name}] {
+        // Set bubble container size based on the class
+        $bubble_container_size: $size_value;
+        $container_size: $size_value;
+  
+        // Apply the bubble container size
+        @include avatar-size($bubble_container_size);
+        width: $bubble_container_size;
+        height: $bubble_container_size;
+        flex-basis: $bubble_container_size;
+  
+        background-color: $bg_light;
+        border-radius: 50%;
+  
+        &.dark {
+          background-color: $card_dark;
         }
-
-        &.quadruple_bubble {
-          @include position((top: 5px, left: 3px));
-          @include avatar-size(16px);
-        }
-      }
-
-      &.second_item {
-        @include position((bottom: 5px, right: 4px));
-        @include avatar-size(12px);
-
-        &.triple_bubble {
-          @include position((top: 13px, right: 2px));
+  
+        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+          @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
+  
+          &.dark {
+            .avatar_wrapper {
+              border: $border_size solid $border_dark;
+            }
+          }
+  
+          .avatar_wrapper {
+            border: $border_size solid $white;
+          }
         }
-
-        &.quadruple_bubble {
-          @include position((bottom: 9px, right: 4px));
+  
+        [class^=pb_avatar_kit] {
+          // First Item
+          &.first_item {
+            @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
+            @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
+        
+            &.double_bubble {
+              @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
+            }
+        
+            &.triple_bubble {
+              @include position(map-get(map-get($positions, 'first-item-triple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'first-item-triple'), $size_name));
+            }
+        
+            &.quadruple_bubble {
+              @include position(map-get(map-get($positions, 'first-item-quadruple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'first-item-quadruple'), $size_name));
+            }
+          }
+        
+          // Second Item
+          &.second_item {
+            @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
+        
+            &.double_bubble {
+              @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'second-item-double'), $size_name));
+            }
+        
+            &.triple_bubble {
+              @include position(map-get(map-get($positions, 'second-item-triple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'second-item-triple'), $size_name));
+            }
+        
+            &.quadruple_bubble {
+              @include position(map-get(map-get($positions, 'second-item-quadruple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'second-item-quadruple'), $size_name));
+            }
+          }
+        
+          // Third Item
+          &.third_item {
+            @include position(map-get(map-get($positions, 'third-item-triple'), $size_name));
+            @include avatar-size(map-get(map-get($sizes, 'third-item-triple'), $size_name));
+        
+            &.quadruple_bubble {
+              @include position(map-get(map-get($positions, 'third-item-quadruple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'third-item-quadruple'), $size_name));
+            }
+          }
+        
+          // Fourth Item
+          &.fourth_item {
+            @include position(map-get(map-get($positions, 'fourth-item'), $size_name));
+            @include avatar-size(map-get(map-get($sizes, 'fourth-item'), $size_name));
+          }
         }
-      }
-
-      &.third_item {
-        @include position((bottom: 3px, left: 11px));
-        @include avatar-size(10px);
-
-        &.quadruple_bubble {
-          @include position((bottom: 3px, left: 9px));
+        
+        &[class*=_single_bubble] {
+          [class^=pb_avatar_kit].first_item {
+            @include position((top: 0, left: 0));
+            @include avatar-size($bubble_container_size);
+          }
         }
       }
-
-      &.fourth_item {
-        @include position((top: 5px, right: 6px));
-        @include avatar-size(8px);
-      }
-    }
-  }
-
-  &[class*=_single_bubble] {
-    [class^=pb_avatar_kit].first_item {
-      @include position((top: 0, left: 0));
-      @include avatar-size($bubble_container_size);
     }
   }
-}
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
index c347044725..37c7e10af3 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
@@ -81,7 +81,7 @@ const MultipleUsersStackedSingleBubble = () => {
 test('should have a single bubble', () => {
     render(<MultipleUsersStackedSingleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -113,7 +113,7 @@ const MultipleUsersStackedDoubleBubble = () => {
 test('should have a double bubble', () => {
     render(<MultipleUsersStackedDoubleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -153,7 +153,7 @@ const MultipleUsersStackedTripleBubble = () => {
 test('should have a triple bubble', () => {
     render(<MultipleUsersStackedTripleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -208,7 +208,7 @@ const MultipleUsersStackedQuadrupleBubble = () => {
 test('should have a quadruple bubble', () => {
     render(<MultipleUsersStackedQuadrupleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -224,4 +224,4 @@ test('should have a quadruple bubble', () => {
 
     const fourthItem = kit.querySelector('.fourth_item');
     expect(fourthItem).toBeInTheDocument();
-})
\ No newline at end of file
+})
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
index 1d71b974a5..79ab5d83ed 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
@@ -14,6 +14,7 @@ type MultipleUsersStackedProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  size?: "md" | "lg" | "sm" | "xl" 
   users: Array<{ [key: string]: string }>,
   variant: "default" | "bubble",
 }
@@ -27,14 +28,17 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     htmlOptions = {},
     id,
     users,
+    size = "sm",
     variant = "default",
   } = props
 
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
   const isBubble = variant === "bubble"
+  const doubleBubble = isBubble && users.length === 2
   const tripleBubble = isBubble && users.length === 3
   const quadrupleBubble = isBubble && users.length > 3
+  const sizeClass = isBubble ? `size_${size}` : ""  
   const displayCount = () => {
     return moreThanTwo ? 1 : users.length
   }
@@ -43,17 +47,19 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
-    { single: onlyOne, bubble: isBubble }), globalProps(props), className)
+    { single: onlyOne, bubble: isBubble }, sizeClass),
+    globalProps(props),
+    className)
 
   const firstUser = () => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
             {...userObject}
-            className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+            className={`pb_multiple_users_stacked_item first_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
             dark={dark}
             key={index}
-            size={isBubble ? "sm" : "xs"}
+            size={isBubble ? "md" : "xs"}
         />
       )
     })
@@ -65,10 +71,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+              className={`pb_multiple_users_stacked_item second_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
               dark={dark}
               key={index}
-              size="xs"
+              size={isBubble ? "md" : "xs"}
           />
         )
       })
@@ -81,10 +87,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
+              className={`pb_multiple_users_stacked_item third_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
               dark={dark}
               key={index}
-              size="xs"
+              size="md"
           />
         )
       })
@@ -97,10 +103,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className="pb_multiple_users_stacked_item fourth_item"
+              className="pb_multiple_users_stacked_item fourth_item quadruple_bubble"
               dark={dark}
               key={index}
-              size="xs"
+              size="md"
           />
         )
       })
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
new file mode 100644
index 0000000000..f73fa21ee2
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
@@ -0,0 +1,336 @@
+<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      variant: "bubble",
+      size: "sm",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "sm",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+        size: "sm",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: { 
+      size: "sm",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+
+<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+    <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "md",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+
+<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "lg",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "xl",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
new file mode 100644
index 0000000000..531f6e2de5
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import Flex from '../../pb_flex/_flex'
+import Title from '../../pb_title/_title'
+import MultipleUsersStacked from '../_multiple_users_stacked'
+
+const MultipleUsersStackedSize = (props) => {
+  const sizes = [
+    { label: 'S', size: 'sm' },
+    { label: 'M', size: 'md' },
+    { label: 'L', size: 'lg' },
+    { label: 'XL', size: 'xl' },
+  ]
+
+  const usersList = [
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+      {
+        name: 'Beverly Reyes',
+        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+      {
+        name: 'Beverly Reyes',
+        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+      },
+      {
+        name: 'Keith Craig',
+        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+      },
+      {
+        name: 'Alicia Cooper',
+        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+      },
+    ],
+  ]
+
+  return (
+    <>
+      {sizes.map(({ label, size }) => (
+        <Flex key={size}
+            orientation="column"
+        >
+          <Title paddingTop='sm' >{label}</Title>
+          <Flex>
+            {usersList.map((users, index) => (
+              <Flex key={index}
+                  paddingRight='sm'
+              >
+                <MultipleUsersStacked
+                    size={size}
+                    users={users}
+                    variant="bubble"
+                    {...props}
+                />
+              </Flex>
+            ))}
+          </Flex>
+          <br />
+        </Flex>
+      ))}
+    </>
+  )
+}
+
+export default MultipleUsersStackedSize
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
index fde4f3211b..18b2112af3 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
@@ -3,11 +3,13 @@ examples:
   rails:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
+  - multiple_users_stacked_size: Sizes
 
 
   react:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
+  - multiple_users_stacked_size: Sizes
 
   swift: 
   - multiple_users_stacked_default_swift: Default
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
index ec6c88a5e4..936773f536 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
@@ -1,2 +1,3 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
 export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
+export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
index 1b004c88e9..3b94e94e71 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
@@ -1,5 +1,15 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
+  <%= pb_rails(
+    "avatar",
+    props: object.users[0].merge({
+      classname: "pb_multiple_users_stacked_item first_item" +
+                 (object.double_bubble ? " double_bubble" : "") +
+                 (object.triple_bubble ? " triple_bubble" : "") +
+                 (object.quadruple_bubble ? " quadruple_bubble" : ""),
+      dark: object.dark,
+      size: 'xs'          
+    })
+  ) %>
 
   <% unless object.only_one %>
     <% if object.more_than_two && !object.bubble %>
@@ -8,14 +18,26 @@
         text: "+#{object.users.count - object.display_count}",
         variant: "primary",
         rounded: true,
-        classname: "pb_multiple_users_stacked_item second_item" }) %>
+        classname: "pb_multiple_users_stacked_item second_item"
+      }) %>
     <% elsif object.bubble %>
-      <% object.users.slice(1,3).each_with_index do |item, idx| %>
-        <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
+      <% object.users.slice(1, 3).each_with_index do |item, idx| %>
+        <%= pb_rails(
+          "avatar",
+          props: item.merge({
+            classname: object.bubble_classname(idx),
+            dark: object.dark
+          })
+        ) %>
       <% end %>
     <% else %>
-      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
+      <%= pb_rails(
+        "avatar",
+        props: object.users[1].merge({
+          classname: "pb_multiple_users_stacked_item second_item",
+          dark: object.dark
+        })
+      ) %>
     <% end %>
   <% end %>
-
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
index cc1be5dbf6..d7d7762dbf 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
@@ -4,6 +4,9 @@ module Playbook
   module PbMultipleUsersStacked
     class MultipleUsersStacked < Playbook::KitBase
       prop :users, type: Playbook::Props::HashArray, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg xl],
+                  default: "sm"
 
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default bubble],
@@ -25,6 +28,10 @@ def bubble
         variant == "bubble"
       end
 
+      def double_bubble
+        bubble && users.count === 2
+      end
+
       def triple_bubble
         bubble && users.count === 3
       end
@@ -33,8 +40,31 @@ def quadruple_bubble
         bubble && users.count > 3
       end
 
+      def size_class
+        "size_#{size}" if bubble
+      end
+
       def classname
-        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
+        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class, size_class)
+      end
+
+      def bubble_classname(index)
+        base_classname = "pb_multiple_users_stacked_item "
+
+        case index
+        when 0
+          base_classname += "second_item"
+          base_classname += " double_bubble" if double_bubble
+          base_classname += " triple_bubble" if triple_bubble
+          base_classname += " quadruple_bubble" if quadruple_bubble
+        when 1
+          base_classname += "third_item"
+          base_classname += " quadruple_bubble" if quadruple_bubble
+        else
+          base_classname += "fourth_item"
+        end
+
+        base_classname
       end
 
     private
diff --git a/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb b/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb
index 5e913d37cc..52d0d368a7 100644
--- a/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb
+++ b/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb
@@ -16,8 +16,8 @@
       expect(subject.new(users: [{ name: "1", image_url: "1" }]).classname).to eq "pb_multiple_users_stacked_kit_single"
       expect(subject.new(users: [], classname: "additional_class").classname).to eq "pb_multiple_users_stacked_kit additional_class"
       expect(subject.new(users: [], dark: true).classname).to eq "pb_multiple_users_stacked_kit dark"
-      expect(subject.new(users: [], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_bubble"
-      expect(subject.new(users: [{ name: "1", image_url: "1" }], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_single_bubble"
+      expect(subject.new(users: [], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_bubble_size_sm"
+      expect(subject.new(users: [{ name: "1", image_url: "1" }], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_single_bubble_size_sm"
     end
   end
 

From e36f8da69b3946d30288707972553058165de163 Mon Sep 17 00:00:00 2001
From: Sam Duncan <samkduncan@gmail.com>
Date: Thu, 17 Oct 2024 13:19:04 -0500
Subject: [PATCH 18/31] [PLAY-1592] Show htmlOptions as a Global Prop  (#3755)

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

As a Playbook user, I want the htmlOptions prop to display in Playbook
as a global prop instead of a kit prop (which is false) so that there is
no confusion to what type of prop htmlOptions is.

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


**How to test?** Steps to confirm the desired behavior:
1. Go to any kit page
2. Ensure you are in the react tab
3. Scroll down to the available props list
4. The "htmlOptions" prop should not appear under the kit props list,
but will show under the global props list.


#### 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.

Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com>
---
 .../components/AvailableProps/globalPropsValues.ts        | 5 +++++
 .../app/javascript/components/AvailableProps/index.tsx    | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts b/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
index 949a2f54be..92a30ed8b8 100644
--- a/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
+++ b/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
@@ -78,6 +78,11 @@ const globalPropsValues = [
     type: "union",
     values: '"wrap" | "nowrap" | "wrapReverse"'
   },
+  {
+    prop: "htmlOptions",
+    type: "object",
+    values: "{ [key: string]: string | number | boolean | (() => void); }"
+  },
   {
     prop: "id",
     type: "string",
diff --git a/playbook-website/app/javascript/components/AvailableProps/index.tsx b/playbook-website/app/javascript/components/AvailableProps/index.tsx
index f37ee20812..daea96b73f 100644
--- a/playbook-website/app/javascript/components/AvailableProps/index.tsx
+++ b/playbook-website/app/javascript/components/AvailableProps/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Card, Nav, SectionSeparator, NavItem } from 'playbook-ui'
 import GlobalProps from './globalProps'
+import GlobalPropsValues from './globalPropsValues'
 import KitProps from './kitProps'
 
 type AvailablePropsType = {
@@ -10,8 +11,15 @@ type AvailablePropsType = {
 
 const AvailableProps = ({ availableProps, darkMode }: AvailablePropsType) => {
   const props = JSON.parse(availableProps)
+  const globalPropsNames = GlobalPropsValues.map(prop => prop.prop)
   const [showKitTab, setShowKitTab] = useState(true)
 
+  for(var propName in props) {
+    if(globalPropsNames.includes(propName)) {
+      delete props[propName]
+    }
+  }
+
   return (
     <>
       <Card padding="none" dark={darkMode}>

From e64b8dc07e7ef48ec11fc1336ffe2953df910875 Mon Sep 17 00:00:00 2001
From: Aaron Kuehler <aaron.kuehler@powerhrg.com>
Date: Thu, 17 Oct 2024 14:20:19 -0400
Subject: [PATCH 19/31] Add rdbms to playbook-website (#3778)

**What does this PR do?**

Add a mysql database cluster to playbook's website.

Depends on:
- https://github.com/powerhome/software/pull/869
- https://github.com/powerhome/pac-namespaces/pull/447

The UX team asked Forever People to help add a MySQL cluster to the
playbook-website's Rails app. This PR:

- Adds the percona-xtradb-cluster-operator to the playbook namespaces to
manage the `pxc` Kubernetes Custom Resource
- Adds a `pxc` custom resource to represent the mysql cluster
- Adds a migration hook / pod to run Rails migrations in the deployment
pipeline before the new application image is started
- Adds the ability to add and manage DB users, passwords, and grants via
the application configuration (values.yaml and secrets.yaml)

#### 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.
---
 docker-compose.yml                            |  20 ++-
 milano.production.yml                         |   6 +-
 milano.staging.yml                            |   6 +-
 milano.yml                                    |   4 +-
 playbook-website/Gemfile                      |   1 +
 playbook-website/Gemfile.lock                 |   2 +
 .../app/models/application_record.rb          |   5 +
 playbook-website/bin/deploy                   |   5 +
 playbook-website/bin/deployment_helpers       |  87 +++++++++++++
 playbook-website/bin/mysql/user-setup.sh      | 120 ++++++++++++++++++
 playbook-website/bin/pre_deploy               |  19 +++
 playbook-website/bin/priority_deploy          |  15 +++
 playbook-website/bin/setup                    |   9 +-
 playbook-website/config/application.rb        |   2 +-
 playbook-website/config/database.yml          |  27 ++++
 .../config/deploy/production/secrets.yaml     |  17 ++-
 .../config/deploy/prs/secrets.yaml            |  17 ++-
 .../config/deploy/staging/secrets.yaml        |  17 ++-
 .../deploy/templates/deployment.yaml.erb      |  12 ++
 .../deploy/templates/migration-hook.yaml.erb  |  57 +++++++++
 .../templates/operators/pxc-operator.yml      |  67 ++++++++++
 .../deploy/templates/priority/mysql.yaml.erb  | 120 ++++++++++++++++++
 playbook-website/config/deploy/values.yaml    |  19 +++
 playbook-website/db/schema.rb                 |  14 ++
 24 files changed, 656 insertions(+), 12 deletions(-)
 create mode 100644 playbook-website/app/models/application_record.rb
 create mode 100644 playbook-website/bin/deployment_helpers
 create mode 100644 playbook-website/bin/mysql/user-setup.sh
 create mode 100755 playbook-website/bin/pre_deploy
 create mode 100644 playbook-website/bin/priority_deploy
 create mode 100644 playbook-website/config/database.yml
 create mode 100644 playbook-website/config/deploy/templates/migration-hook.yaml.erb
 create mode 100644 playbook-website/config/deploy/templates/operators/pxc-operator.yml
 create mode 100644 playbook-website/config/deploy/templates/priority/mysql.yaml.erb
 create mode 100644 playbook-website/db/schema.rb

diff --git a/docker-compose.yml b/docker-compose.yml
index 08164e4db4..04f7f9ce60 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -16,6 +16,24 @@ services:
         - image-registry.powerapp.cloud/playbook/playbook:main
     volumes:
       - .:/home/app/src
-      - bundle:/usr/local/bundle
+      - bundle:/usr/local/rvm/gems
     ports:
       - "8089:3000"
+    depends_on:
+      db:
+        condition: service_healthy
+  db:
+    platform: linux/x86_64
+    image: percona:8.0.36-28@sha256:1128d56e64711ed65cb0c57041048967ee5875a2167d708d327885fd1f995fa0
+    init: true
+    ports:
+      - 3306
+    environment:
+      MYSQL_ROOT_HOST: "%"
+      MYSQL_ROOT_PASSWORD: password
+    healthcheck:
+      test: ["CMD", "mysql", "-u", "root", "-ppassword", "-e", "SHOW DATABASES;"]
+      interval: 5s
+      timeout: 2s
+      retries: 5
+      start_period: 20s
diff --git a/milano.production.yml b/milano.production.yml
index 66f7a0dc03..7141e513a1 100644
--- a/milano.production.yml
+++ b/milano.production.yml
@@ -3,11 +3,15 @@ dependencies:
 
 machine:
   directory: playbook-website/
+  environment:
+    CLUSTER: app-prod-hq
 
 deploy: &deploy
   max_commits: # Automatically deploy all commits, no matter how many.
+  pre:
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/pre_deploy"
   override:
-    - ./bin/deployer bash -lc "cluster=app-prod-hq environment=${ENVIRONMENT} tag=${REVISION} deploy_url=${DEPLOY_URL} bin/deploy"
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/deploy"
 
 rollback:
   <<: *deploy
diff --git a/milano.staging.yml b/milano.staging.yml
index da46d2664c..eb9be7627e 100644
--- a/milano.staging.yml
+++ b/milano.staging.yml
@@ -3,11 +3,15 @@ dependencies:
 
 machine:
   directory: playbook-website/
+  environment:
+    CLUSTER: app-beta-hq
 
 deploy: &deploy
   max_commits: # Automatically deploy all commits, no matter how many.
+  pre:
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/pre_deploy"
   override:
-    - ./bin/deployer bash -lc "cluster=app-beta-hq environment=${ENVIRONMENT} tag=${REVISION} deploy_url=${DEPLOY_URL} bin/deploy"
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/deploy"
 
 rollback:
   <<: *deploy
diff --git a/milano.yml b/milano.yml
index d1ebd7a604..7c94d7b562 100644
--- a/milano.yml
+++ b/milano.yml
@@ -6,8 +6,10 @@ machine:
 
 deploy: &deploy
   max_commits: # Automatically deploy all commits, no matter how many.
+  pre:
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/pre_deploy"
   override:
-    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} deploy_url=${DEPLOY_URL} bin/deploy"
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/deploy"
 
 rollback:
   <<: *deploy
diff --git a/playbook-website/Gemfile b/playbook-website/Gemfile
index e74c01ade0..ee48ba3d67 100644
--- a/playbook-website/Gemfile
+++ b/playbook-website/Gemfile
@@ -7,6 +7,7 @@ ruby "3.3.0"
 
 gem "playbook_ui", path: "../playbook"
 
+gem "mysql2", "0.5.6"
 gem "rails", "~> 7.0.8"
 gem "turbo-rails", "~> 1.4.0"
 gem "puma", "~> 6.3"
diff --git a/playbook-website/Gemfile.lock b/playbook-website/Gemfile.lock
index 3bc1bfb9fe..4bc4e355a4 100644
--- a/playbook-website/Gemfile.lock
+++ b/playbook-website/Gemfile.lock
@@ -140,6 +140,7 @@ GEM
     mini_mime (1.1.5)
     minitest (5.25.1)
     msgpack (1.7.2)
+    mysql2 (0.5.6)
     net-imap (0.4.15)
       date
       net-protocol
@@ -332,6 +333,7 @@ DEPENDENCIES
   front_matter_parser (~> 1.0.1)
   health_check
   listen
+  mysql2 (= 0.5.6)
   playbook_ui!
   psych (< 4)
   puma (~> 6.3)
diff --git a/playbook-website/app/models/application_record.rb b/playbook-website/app/models/application_record.rb
new file mode 100644
index 0000000000..08dc537989
--- /dev/null
+++ b/playbook-website/app/models/application_record.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationRecord < ActiveRecord::Base
+  primary_abstract_class
+end
diff --git a/playbook-website/bin/deploy b/playbook-website/bin/deploy
index 06a9bebad7..32a13a5d2e 100755
--- a/playbook-website/bin/deploy
+++ b/playbook-website/bin/deploy
@@ -21,6 +21,11 @@ fi
 
 extraBindings="{\"ingress\":{\"hosts\":[\"${deploy_url}\"]}}"
 
+# Priority resources
+source "${workDir}/bin/priority_deploy"
+priority_deploy
+
+# Application Deployment
 krane render \
     --filenames=${workDir}/config/deploy/templates \
     --bindings="@${workDir}/config/deploy/values.yaml" $environmentValuesFile $environmentSecretsFile "image_tag=${tag}" "environment=${environment}" $extraBindings \
diff --git a/playbook-website/bin/deployment_helpers b/playbook-website/bin/deployment_helpers
new file mode 100644
index 0000000000..b1d5769600
--- /dev/null
+++ b/playbook-website/bin/deployment_helpers
@@ -0,0 +1,87 @@
+#!/bin/bash
+
+set -eo pipefail
+
+: ${baseline:="review"}
+
+function setup_colors() {
+    if [[ -t 2 ]] && [[ -z "${NO_COLOR-}" ]] && [[ "${TERM-}" != "dumb" ]]; then
+        NOFORMAT='\033[0m'
+        RED='\033[0;31m'
+        GREEN='\033[0;32m'
+        ORANGE='\033[0;33m'
+        BLUE='\033[0;34m'
+        PURPLE='\033[0;35m'
+        CYAN='\033[0;36m'
+        YELLOW='\033[1;33m'
+    else
+        NOFORMAT='' RED='' GREEN='' ORANGE='' BLUE='' PURPLE='' CYAN='' YELLOW=''
+    fi
+}
+export -f setup_colors
+setup_colors
+
+function begin {
+    local message=$1
+
+    echo "\
+
+=======================================
+BEGIN: $message
+=======================================
+"
+}
+export -f begin
+
+function succeed {
+    local message=$1
+
+    echo -e "\
+${GREEN}
+=======================================
+SUCCESS: $message
+=======================================
+${NOFORMAT}"
+}
+export -f succeed
+
+function fail {
+    local message=$1
+
+    echo -e "\
+#{RED}
+=======================================
+ERROR: $message
+=======================================
+#{NOFORMAT}"
+    exit 1
+}
+export -f fail
+
+function instance_name {
+    local inst=$environment
+    echo "$inst"
+}
+export -f instance_name
+
+function log() {
+    echo >&2 -e "[$cluster][$namespace][$task_name] ${1-}"
+}
+
+log "BEGIN: $task_name"
+trap 'log "${RED:-}ERROR: $task_name - $cluster / $namespace${NOFORMAT:-}"' ERR
+
+function decrypt() {
+    local encrypted_file_path=
+    encrypted_file_path="$1"
+
+    local decrypted_file_path=
+    decrypted_file_path="$2"
+
+    secrets="$(sops --decrypt "$encrypted_file_path")"
+    if [ ! -e "$decrypted_file_path" ]
+    then
+        log "writing decrypted secrets for: $encrypted_file_path"
+        echo -n "$secrets" > "$decrypted_file_path"
+    fi
+}
diff --git a/playbook-website/bin/mysql/user-setup.sh b/playbook-website/bin/mysql/user-setup.sh
new file mode 100644
index 0000000000..543339bfe9
--- /dev/null
+++ b/playbook-website/bin/mysql/user-setup.sh
@@ -0,0 +1,120 @@
+#!/bin/bash
+
+ cluster="$1"
+ namespace="$2"
+
+ctrl="kubectl --context $cluster -n $namespace"
+
+mysql_pod=$($ctrl get pods --no-headers -o custom-columns=":metadata.name" | grep 'pxc-0$')
+secret_po_name=$($ctrl get pxc -o jsonpath='{.items[0].spec.secretsName}')
+root_pwd=$(eval "$ctrl get secrets $secret_po_name -o jsonpath='{.data.root}'" | base64 --decode )
+
+if [ -z "$mysql_pod" ]; then
+  exit 0
+fi
+
+mysql_pod="$mysql_pod -c pxc"
+
+users=$($ctrl get configmap mysql-users-playbook -o=jsonpath='{.data.users}' | sed 's/^"//;s/"$//;s/\\\"/\"/g')
+
+custom_users=()
+mysql_commands=()
+
+clean_up_users() {
+  local percona_users=("root" "clustercheck" "monitor" "operator" "pmmserver" "proxyadmin" "replication" "xtrabackup")
+  local target_users=("$@")
+
+  if [ ${#target_users[@]} -gt 0 ]; then
+    for element in "${target_users[@]}"; do
+      percona_users+=("$element")
+    done
+  fi
+
+  excluded_users_list=$(printf "'%s'," "${percona_users[@]}")
+  excluded_users_list=${excluded_users_list%,}
+
+  command="SELECT CONCAT(\"'\", user, \"'@'\", host, \"'\") FROM mysql.user WHERE NOT (user LIKE 'mysql%' OR user IN ($excluded_users_list));"
+
+  users_to_delete=$($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -N -e"$command")
+
+  echo "--- List of MySQL users to delete:"
+  echo $users_to_delete
+  #  Loop through the list of users and execute DROP USER statements
+  #  we can't use `delete from` statement as if it will be once deleted,
+  #  we will be unable to recreate it with the same name/password/grants due to mysql security policy
+  for user in $users_to_delete; do
+    $($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -e "DROP USER $user;")
+  done
+}
+
+if [ -z "$users" ]; then
+  clean_up_users "${custom_users[@]}"
+  exit 0
+fi
+
+# Extract the count of user objects
+count=$(echo "$users" | grep -o '{' | wc -l)
+
+if [ "$count" -eq 0 ]; then
+  clean_up_users "${custom_users[@]}"
+  exit 0
+fi
+
+for (( i=1; i<=$count; i++ )); do
+  # Extracting each user block
+  block=$(echo "$users" | awk -v RS='},' 'NR=='$i'')
+
+  name=$(echo "$block" | grep -o '"name":"[^"]*"' | awk -F\" '{print $4}')
+  grant=$(echo "$block" | grep -o '"grant":"[^"]*"' | awk -F\" '{print $4}')
+  user_pwd=$(eval "$ctrl get secrets $secret_po_name -o jsonpath='{.data.$name}'" )
+
+  custom_users+=("$name")
+
+  if [ -z "$user_pwd" ]; then
+    echo "No password in $secret_po_name for user $name"
+    exit 1
+  else
+    user_pwd=$(echo "$user_pwd" | base64 --decode)
+  fi
+
+  mysql_commands+=("CREATE USER IF NOT EXISTS '$name'@'%' IDENTIFIED BY '$user_pwd'")
+
+  # Extract dbs and append '.*' to each one
+  dbs_raw=$(echo "$block" | grep -o '"dbs":\["[^]]*"' | sed 's/"dbs":\["//' | sed 's/"//g' | sed 's/,/, /g')
+  IFS=', ' read -ra dbs_array <<< "$dbs_raw"
+  for db in "${dbs_array[@]}"; do
+    mysql_commands+=("GRANT $grant ON ${db}.* TO '$name'@'%'")
+  done
+done
+
+clean_up_users "${custom_users[@]}"
+
+# get list of users with 'mysql_native_password' plugin
+users_w_deprecated_auth=$($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -Bse "SELECT CONCAT(user, '@', host) FROM mysql.user WHERE plugin = 'mysql_native_password';")
+
+# alter authentication plugin
+for user in $users_w_deprecated_auth; do
+  uname=$(echo "$user" | cut -d "@" -f 1)
+  user_pwd=$(eval "$ctrl get secrets $secret_po_name -o jsonpath='{.data.$uname}'" )
+  if [ -n "$user_pwd" ]; then
+    user_pwd=$(echo "$user_pwd" | base64 --decode)
+    quoted_username=$(echo "$user" | sed "s/\(.*\)@\(.*\)/'\1'@'\2'/")
+    mysql_commands+=("ALTER USER $quoted_username IDENTIFIED WITH caching_sha2_password BY '$user_pwd'")
+  fi
+done
+
+mysql_commands+=("FLUSH PRIVILEGES;")
+
+IFS=';'
+joint_output="${mysql_commands[*]}"
+unset IFS
+
+$($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -e "$joint_output")
+
+if [ $? -eq 0 ]; then
+  echo "$joint_output" | sed "s/BY '[^']*'/BY '***'/g" | tr ';' '\n'
+  echo "--- Users CREATED with password and granted permissions."
+else
+  echo "--- User creation and permission granting FAILED"
+  exit 1
+fi
diff --git a/playbook-website/bin/pre_deploy b/playbook-website/bin/pre_deploy
new file mode 100755
index 0000000000..d7576eeb99
--- /dev/null
+++ b/playbook-website/bin/pre_deploy
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+task_name="Predeployment"
+source "$(dirname $(realpath $0))/deployment_helpers"
+
+log ">>> Installing dependencies at $tag into $environment ($cluster # $namespace)"
+
+instance=$(environment=$environment instance_name)
+
+operatorResources=$(krane render \
+    --filenames=/app/config/deploy/templates/operators \
+    --current-sha=${tag}) || exit $?
+echo "$operatorResources" | krane deploy ${namespace} ${cluster} \
+    --selector="app.kubernetes.io/component=operator" \
+    --verbose-log-prefix \
+    --global-timeout=300s \
+    --stdin
+
+log "${GREEN}SUCCESS: $task_name - $cluster / $namespace${NOFORMAT}"
diff --git a/playbook-website/bin/priority_deploy b/playbook-website/bin/priority_deploy
new file mode 100644
index 0000000000..0bdb807bbb
--- /dev/null
+++ b/playbook-website/bin/priority_deploy
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+priorityResources=$(krane render \
+                          --filenames="$(pwd)/config/deploy/templates/priority" \
+                          --bindings="@${workDir}/config/deploy/values.yaml" $environmentValuesFile $environmentSecretsFile "image_tag=${tag}" "environment=${environment}" $extraBindings \
+                          --current-sha=${tag}) || exit $?
+
+echo "$priorityResources" | krane deploy ${namespace} ${cluster} \
+                                  --selector="app.kubernetes.io/name=playbook,app.kubernetes.io/part-of=priority-deploy" \
+                                  --verbose-log-prefix \
+                                  --global-timeout=10m \
+                                  --stdin
+
+### run post priority scripts
+"${workDir}/bin/mysql/user-setup.sh" "$cluster" "$namespace"
diff --git a/playbook-website/bin/setup b/playbook-website/bin/setup
index 1ac8ce0b7a..a8044c64ea 100755
--- a/playbook-website/bin/setup
+++ b/playbook-website/bin/setup
@@ -16,10 +16,17 @@ FileUtils.chdir APP_ROOT do
   puts '== Installing dependencies =='
   system! 'gem install bundler --conservative'
   system('bundle check') || system!('bundle install')
-
   # Install JavaScript dependencies
   system! 'bin/yarn'
 
+  # puts "\n== Copying sample files =="
+  # unless File.exist?("config/database.yml")
+  #   FileUtils.cp "config/database.yml.sample", "config/database.yml"
+  # end
+
+  puts "\n== Preparing database =="
+  system! "bin/rails db:prepare"
+
   puts "\n== Removing old logs and tempfiles =="
   system! 'bin/rails log:clear tmp:clear'
 
diff --git a/playbook-website/config/application.rb b/playbook-website/config/application.rb
index 547d78312c..ccfb275613 100644
--- a/playbook-website/config/application.rb
+++ b/playbook-website/config/application.rb
@@ -6,7 +6,7 @@
 # Pick the frameworks you want:
 require "active_model/railtie"
 require "active_job/railtie"
-# require "active_record/railtie"
+require "active_record/railtie"
 # require "active_storage/engine"
 require "action_controller/railtie"
 # require "action_mailer/railtie"
diff --git a/playbook-website/config/database.yml b/playbook-website/config/database.yml
new file mode 100644
index 0000000000..a5273910b1
--- /dev/null
+++ b/playbook-website/config/database.yml
@@ -0,0 +1,27 @@
+base: &base
+  adapter: mysql2
+  pool: <%= ENV['DATABASE_POOL'] || ENV['RAILS_MAX_THREADS'] || 5 %>
+  timeout: <%= ENV['DATABASE_TIMEOUT'] || 5000 %>
+  username: <%= ENV['DATABASE_USER'] || "root" %>
+  password: <%= ENV['DATABASE_PASSWORD'] || "password" %>
+  host: <%= ENV['DATABASE_HOST'] || "db" %>
+  database: <%= ENV['DATABASE_NAME'] || "playbook_website" %>
+  advisory_locks: <%= ENV['DATABASE_ADVISORY_LOCKS'] || false %>
+
+development:
+  <<: *base
+  database: playbook_website_dev
+
+test:
+  <<: *base
+  database: playbook_website_test
+  username: <%= ENV['DATABASE_USER'] || "root" %>
+
+review:
+  <<: *base
+
+staging:
+  <<: *base
+
+production:
+  <<: *base
diff --git a/playbook-website/config/deploy/production/secrets.yaml b/playbook-website/config/deploy/production/secrets.yaml
index 50ecb25332..f11748c1aa 100644
--- a/playbook-website/config/deploy/production/secrets.yaml
+++ b/playbook-website/config/deploy/production/secrets.yaml
@@ -2,6 +2,19 @@ appConfig:
     secretKeyBase: ENC[AES256_GCM,data:pTc2zofEnukd275BCaIpHOM5LokYsaYdgyGPHH6tggclP8Fj2S3/s7UREfDDuNZdAWAelmfWj3AY6xhtmdNRXt0F1UDvrNw0aCDAUqQK/jfHvgCtPQ2ncdZdpoUeEzmTaHUu3JVCphrCBFWxYrSvQg5qfx/docSiGR/PtaWTgOA=,iv:NwUXrRidkh5gT0E90h8CH9qtddboQnd2uvQfPXVkfM0=,tag:vJ5vPuSFeiRc+kDX5tY3Jg==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:pnb9JEfwZ0wCe+eh1CChiKiYAyyMeRtMvJEy9HyY9HFyleFB336Q6nVFx1D74LSxgNbrZiBqg/aA1ZysYCIDRciN6LOMlFAn5AAbMhpYcdNbLQ==,iv:j8l3ISTxrLVF21VRTDkqcmxeMt8jPrZDzDW9rHZ84lc=,tag:eMnHnxYQ+uAIhba0bDNuAA==,type:str]
     open_ai: ENC[AES256_GCM,data:He7ruscMUMlif05pZhA7f0/rjVt1oG8qzJKGXO6SxHVKZ5t062dD3covgJAGqjCh9aH4wcjCS2xyhBNJWbqjcLhrYsLHuZB4URLfA1CyhJa+maReOCOH88vTutFdIYY=,iv:cZBzbIWxtp+sq3mcE+YGeHeALlSADsU7uXgmKgbmQc8=,tag:a09iJDiJRQ5ImhndwPeYkA==,type:str]
+database:
+    passwords:
+        root: ENC[AES256_GCM,data:nDfX3v48uA4GelHiENJK72WR4QaHfNM=,iv:1pQEajcbP6Se9TUIjM9FChsGS02DWSrObHsC1Y+srbI=,tag:FIcrACADrNiXWKW0LmKbaQ==,type:str]
+        proxyadmin: ENC[AES256_GCM,data:wJocaatR/RSxgVJkMSPvP1qNlOIAZBc=,iv:yDwiFOujQAUvu50A4AcZAhwIZ45oVbB+ov92+wzC2eI=,tag:h3YnYRlzmjjU7eJIewSh5A==,type:str]
+        xtrabackup: ENC[AES256_GCM,data:sHdJ8nIBvwDh+oSrTAg7DageobzjXhs=,iv:ITkA5erLjdD04ikNDiIHo+VNQ4C2qJ0ACwuf83LThQ0=,tag:Nt1w8xeDAgzlcuSzZTMV3Q==,type:str]
+        clustercheck: ENC[AES256_GCM,data:0HhHODIwTtarziG6UlNWPSmgSYXbYVk=,iv:LKJ1uypr3QBbDWoRKTpHS4cw16KtJDaLPT3YIvytIbo=,tag:yEIXVSQNpz6l5c4igqeTcA==,type:str]
+        monitor: ENC[AES256_GCM,data:FCgUZ+0LRGboG8RObAttvqaZ0I5r474=,iv:K0crq4vV4kgFJ13z6orMKai0v1nW4iblCgskgzsX1mQ=,tag:JyBPNRAgiySgss2AFQ6LYg==,type:str]
+        pmmserver: ENC[AES256_GCM,data:5uIvdwcHvc08j4nyI3Dz9uef+omXCjg=,iv:QWUPM/beeqmqo0Sdw44BTACnzVFOmSH7dfPVNLFdaqg=,tag:Iq5ZCD9Wafglanhwd1Vo6A==,type:str]
+        operator: ENC[AES256_GCM,data:VchIqmam5gyZh3a9QU15m7fJK6meJ1w=,iv:kk2UvLMiu7Hir0AfBuH0CA348LhWCmvnkvhJzMqqpJI=,tag:t9syBAwmnS4s95X97Ne/Ug==,type:str]
+        replication: ENC[AES256_GCM,data:RCkm/S9hsu8ot7GExCXD1JXOdPzUyis=,iv:2rFI0hjihBvbtId7jLXs4IqS/H/KttN+FeWux/bfnFY=,tag:BvCsay3WONt2l+ZGgrfhxA==,type:str]
+        webapp: ENC[AES256_GCM,data:AiSQqvWKYklNkIw9vxz2HMBsR6NIVXU=,iv:wJxILj6WcWIXvsmTm6QpfAMVhtcp83u9F8BUZs/t1TQ=,tag:pJGCBOTXuy3mfl2yDK5qBw==,type:str]
+        migrator: ENC[AES256_GCM,data:eEdeN7i0gH8tTSxVq4BLH0BvTy5s+Qs=,iv:Fowkiy9rc+3x6pjGUC2wsY44zNHIUQGkriP/0FDQkjs=,tag:pDtxnA1ymaQRCNi3hpCg2Q==,type:str]
+        webapp_readonly: ENC[AES256_GCM,data:sc3vdWirNtrBls+8gArufmYD+YxhoIY=,iv:KROKBT1qwZVf6zQ3a0N51I5mbL74g+gucSXJtqbgGDk=,tag:E8XRjcfsXcPbCyuc6MlmIA==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
@@ -22,8 +35,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T15:15:57Z"
-    mac: ENC[AES256_GCM,data:VXYQZHkMLlAppSm5tEbLSEVJtjaPzgW3ePN8tzvoxyIsGe/zr8QkuP7EcXbPdk3HxOwcSh+X0TfF/AOi2cZHChQYH6I69JgbXuYp5dHRWymGe9TIF0GbaChyWK1tbfSadty9BOqb6CtzwD/tMF59G8BvLElqekpTf71h2IaFC8k=,iv:7wbclLhQrBJJ8+M8lGJSUr6Td4YjSYitX4AUmZmp7XE=,tag:jbFgriGrENcoKHxR5jqC5w==,type:str]
+    lastmodified: "2024-10-09T16:27:54Z"
+    mac: ENC[AES256_GCM,data:XZUMDOE+3t8dqAGGi1kZa7JCeC4yHKtBLKMAptq9rDfVqu+j8jjQpN6GuoHarhCSNmo14gOeN619YwSDpowgqY1WTv4LSRMBy2/zZfyd+dIfAnDpvIOMAB2nFj6QoAzRRZjR7j54/oXLJUaySyVB6Wfe8gz4JXBwkaXS2qKDr6Q=,iv:Q05Ig42Jcdx8TOJImzv2OVIRhkKAloE+GSPCKP/OC0s=,tag:Ib3otL+28qidtoYGWqXxYA==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.8.1
diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml
index db8589ca50..44cb2f815e 100644
--- a/playbook-website/config/deploy/prs/secrets.yaml
+++ b/playbook-website/config/deploy/prs/secrets.yaml
@@ -2,6 +2,19 @@ appConfig:
     secretKeyBase: ENC[AES256_GCM,data:tX9TTqw+teUH3ugGOXIfCMSE1fofM8YBfei2cXLB8Wbmsxp+bsoIgByMtgAbyHzov73P2PaJhQWWo/fG2W7Zj8T0gQ5BcK9mVFUkbt/+SmQpbbprLeIpauN4Gar2QWzyzJPIVEUopf3gdEERx3a+2rbMotJ4rB8Xfvv9OO4sOy4=,iv:H7nM7+ERPsNpehyuaAXSotrG8YCMhL1VSNAmFggs+Q4=,tag:eE+MuzvnCuQ6XKAKMMkrsA==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:9k5OGZqUcLote0IAJt7GJBsDxN3iJxoVtfPn9RKYfV1KZzNNWyeTZKC/PmjdjKotNbXzLPUSIPbtV8bk2DmttOwQr/r0xbnaTcRT2CWh/4XwVA==,iv:qML16zZMGBSO9nz7kSihlvn5uLj1s+RDSSqOb1jivGw=,tag:XvsrAuIAgAboayg2ZN1KZQ==,type:str]
     open_ai: ENC[AES256_GCM,data:ewKDrouP0ZuMNAr19DvqBIzYdRInruWH7GxPX2ZH79DVJkT53qLFqzQMIBScqai40WXQmFLNicLnnbHVK+Xcv0tq/xBHtS7BANIwa5XJnWo56jYR3mOdbAcw+ZNFrks=,iv:c5veWRGGydflJ38TFf56ei9GI0tCnE24TLxJGFHscdE=,tag:rGLKDJesBs5JTNt83dsmoA==,type:str]
+database:
+    passwords:
+        root: ENC[AES256_GCM,data:xIIpSFhtwuTyIkKtIEn0zIC+IrfJZeU=,iv:7hSo3KUZ8ujfVk/T2Hnv8v0IaanH370w7klGd9HRG9Q=,tag:U58Pf57vVHDqCDlS0jIlvQ==,type:str]
+        proxyadmin: ENC[AES256_GCM,data:nmOiIeM3EqnsJXQStcYOLDNJy3FB7h8=,iv:8uORWJHsVKm9c/v4AKXsD5Iwau9QLw3TTp0OOlYwwck=,tag:+tBl/LPwhcnqBrHm1OKF/w==,type:str]
+        xtrabackup: ENC[AES256_GCM,data:xsRzRtnZtfesmQChZrF4qa7UEeBv2FY=,iv:OVwhRcAIfRAwDBhriq3l5rJxG+sBP34czF6PmA7TUgo=,tag:ThL2czkqs1cJkHF1+Ac6tw==,type:str]
+        clustercheck: ENC[AES256_GCM,data:QMXMALsTWZ3nhPUQCBrSZ8EjX/9R4vQ=,iv:05OTLP+H5Zv0g9v9L3vnGSs/j8jinP9nAeKL/DcvU3E=,tag:WnWUzbXe6EujA8bBbQaVLw==,type:str]
+        monitor: ENC[AES256_GCM,data:QNI7y7ZIiIbGhx2Ou6LGTZcevsT5Pew=,iv:uwzYfjGJEVaT+Uya/zYNiZd4j2iv2D6bE1uQpikAYis=,tag:uQ+QEN4Jg9k0z1GIiclQ6g==,type:str]
+        pmmserver: ENC[AES256_GCM,data:aw+6klR8I9Is2z/7HP4w6RvVOR0Mzmk=,iv:TOli7mz6QgEEzHkqfKJqSbmgr8JCtnAvIQzHzg4nXU8=,tag:brsgeMPlI+JD2RLCzZ8+zw==,type:str]
+        operator: ENC[AES256_GCM,data:IkRgcdpfnm7r7rZz2a5092xBmNOBLKw=,iv:SJSvFzK0LhcpZRdC1mtB62BMd9G7BMxE8y9W/mvbdU0=,tag:81UCk/KCNpqljoeXLzr6uA==,type:str]
+        replication: ENC[AES256_GCM,data:ica6B3ekPiaY2rc/Xs0K8D4v9NIUows=,iv:yiduzxuZJC28Ci96a6IgCxX8kG/xojEVLZfc6B+bcU4=,tag:BCvR+NANOM/2B5uyA5/5YQ==,type:str]
+        webapp: ENC[AES256_GCM,data:IAe84IbWb3c/QYI7doZ/bjQ3e9X6NXQ=,iv:Wp3mAAvSQ/Af9fP633Vr0EgCImGP7eAjN/AcIHsxS3w=,tag:UcECml6q4G0hyYbcOnIQsg==,type:str]
+        migrator: ENC[AES256_GCM,data:+manxHLfyLJwaiS/pLFBnTyhAUzna+0=,iv:jJPHbO0sBQP2mu55uomoxRt2DGkAOyeAl/KFKjEnA7g=,tag:8MAyL3lkQTsVwoBw/wNuVA==,type:str]
+        webapp_readonly: ENC[AES256_GCM,data:QtmYwMEZWWpGsG0GRtaY0ldS2L0vDYA=,iv:mZ/RtJETHVUZBjXWxa3Yrr0Sf5m3u3ao1FZDSHcNVpo=,tag:lgW4ckJy9wDsPEdt9nTK/Q==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
@@ -22,8 +35,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T14:15:23Z"
-    mac: ENC[AES256_GCM,data:Sm8hMCHoRGSVa+0/QbBWk60xkl0vn2pHk061liryW8OyAw7brVakAndBgReYeVlks1OS+fuKfc4RsoU3qJWBStJyffxNS5vbXWCugW+HnmbTNK3jBO++Ij2X8qXceWVYQnNXR3N0BTYx9YdyriGNtbtF6jz6PSZN3pUBcpbgLn8=,iv:2tg6O2Tg+o7myXbYlhd/36y1d25fB3h0UuxWXQZWv4Y=,tag:0wJnXb4pXZiUYQWdZSr2ng==,type:str]
+    lastmodified: "2024-10-09T16:20:19Z"
+    mac: ENC[AES256_GCM,data:qG/8X0ZyqRkCAaQvxqghiYPmPsqhRoq7WAeh8MvkzfAdYWuEp3UIcOqG/CYs77A9770537CYearWkuskXRvYxDyTHdMasqyvayxxl3INwkZgqWWY9fcePLS76FL0nXq8jKz4rQg39148PgeYbYEQuz72wq6CmlXRLj6jg1cyAJw=,iv:24lVuaQcM+GyKg8A8+ek462zm9rXj/D7B5tli6hxJF4=,tag:mX/8OUwt6Mb7dn/Tmx8VkA==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.8.1
diff --git a/playbook-website/config/deploy/staging/secrets.yaml b/playbook-website/config/deploy/staging/secrets.yaml
index 9365badf28..b364148685 100644
--- a/playbook-website/config/deploy/staging/secrets.yaml
+++ b/playbook-website/config/deploy/staging/secrets.yaml
@@ -2,6 +2,19 @@ appConfig:
     secretKeyBase: ENC[AES256_GCM,data:kOsJ3LgAPCPZ4Vdm/EBFksqneV7tSeFqKrI965UEqkZ7EQ7n/STuE0vte90/oMF1C0eBYzwHEsnT/1kPirKn5/Rz4np2M1jQIvucTfk7QMd76fueIS2lXtLw155rYL8iEh5JyxviOJNfL93U3FiySo1Fa8+1FoOqvlnHa4+/Uoo=,iv:pjEQHF499TYjNEe+O95G3VgqpAfUyJPtVws8nl3zw4k=,tag:38L8NgqyGQu8ueIBS8NcmQ==,type:str]
     sentry_dsn: ENC[AES256_GCM,data:8vuODktXtDvYOUKS5XR7JJ0t9sX0urMWdmIeu66wwvqfGNJogacXj097PqM4MHLIsl0DICJen/2xA+uvUSV+ZVqJH7gCqeY3fH4XwMhE8dKZZA==,iv:5NYs+MiDZiR41cuazIFPXC3IKJsJgbl4eoRvTym0dTo=,tag:XP1rGTjYcl5nMUScJ/3w/A==,type:str]
     open_ai: ENC[AES256_GCM,data:XX6uvmMSXUvaZFcLR4o5zOmZaQDodlRP4tpZ9Od73pnk4sA6VEaPoqBk3AHr0Ret5KD0WhE2TLnMt2UVEv4+xeRcct0lJtN/n+xXODXsGXoRYRRF7hiYGTJJewT5glY=,iv:tOWyS9Ep+TmP4MtY6LEez9XcD/mWERVV2sbEXQU8rrc=,tag:v3sv3+FzybiKijYY7ncqYg==,type:str]
+database:
+    passwords:
+        root: ENC[AES256_GCM,data:cRdz9hWx4RmdMmOir00dBX7J0TE3hBg=,iv:DZ5KDjhIzLWT8SzKtoawhVhv6zvK9z9zG/izg70X/04=,tag:Ap7n0oEIgu8NfmJkTJKXrQ==,type:str]
+        proxyadmin: ENC[AES256_GCM,data:dDeprOtOPGV6NapCoaOcl5L8sgcOSCE=,iv:wXWKJ8pArDVCPauU1kNvspaeLBiqbLjdEXXt0t5sAhg=,tag:sziTzyCsrVihiqH87obr+g==,type:str]
+        xtrabackup: ENC[AES256_GCM,data:YQSZCfvn2zM47DlJ11dMfXwKRNtbLCk=,iv:U9TvTWE2f6z1FB3xBlPSrJrgBeneZosDZI80/x19LzA=,tag:ZzkCs1nqbqjCCRy+KpNZmQ==,type:str]
+        clustercheck: ENC[AES256_GCM,data:UBCBw802YZnqtZk6Sck87RTNvYL8XWI=,iv:ZslmsPbCnhNcdhUEdhAAk0SCRQoatQNHCaw0D54u2D8=,tag:Xd/HfrDZMN6umy+HJb41tw==,type:str]
+        monitor: ENC[AES256_GCM,data:e6NjQgt9E8SHiXNGMAi+Z82WIKT1gqM=,iv:ynE1Jrz7oQqqmVNNzqo9Trkk52OrEd56HOQfpLBeY/M=,tag:DYyPpJiweD+z89kkgIDebA==,type:str]
+        pmmserver: ENC[AES256_GCM,data:92h/4RrrR8K7gXSXopZPA+qWdwoLCkc=,iv:C8tABUx7iJUKagazJt3O9Ow/MHRxgUE3xbbR8MlcT5I=,tag:4aDmKJKj+JJpYAASzeeLUw==,type:str]
+        operator: ENC[AES256_GCM,data:9Qb+nW2jEPHOyfHOjZQYvoCIRfs93rU=,iv:rOqCYY6nrEmYGsIHYtw+xRvPn6TRQCcNB/EUTw4WtGM=,tag:NfcN9ZhJ6gBXANxDPP3fnw==,type:str]
+        replication: ENC[AES256_GCM,data:tYyhKwh17Eh5Cl+OtcUhB12Isnew6vg=,iv:O84q03Yz3bLTmaMiBi9HLk2grbMmAIFehOjTn1Iyl1A=,tag:VIxzLLEAHNOnTDoUBtYJ2A==,type:str]
+        webapp: ENC[AES256_GCM,data:8xcWhzx5M8U/7CKJpwSJLUzTt1kFkaI=,iv:UK0Y9+rgRJlcSt0/Nsh+uYE2seO+XGl4+vHcpwd8wDw=,tag:7CimZ310KliXTI1D9aJB5Q==,type:str]
+        migrator: ENC[AES256_GCM,data:ns2KCG6ivLFldBuPfB0yO6odnBRSUfg=,iv:G3ZHzpb/3c+IuDD3NXXEwNozXMgqB4k1d3+nwl9FXtI=,tag:bIqe4CCswBLXhNnHOWCCBA==,type:str]
+        webapp_readonly: ENC[AES256_GCM,data:A+wxbSY08SYgzRpWBSsfSNyWkm/1NcQ=,iv:d6mTiGOPCAFhCftyYunIgQJqBKCN3fmI5Eiz8HPl528=,tag:hanVevwzajabijbgtqsPmw==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
@@ -22,8 +35,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T15:15:44Z"
-    mac: ENC[AES256_GCM,data:zU8gmGa8a6HK0pC9Vn8za0W33frXOcQwSpfGJg0XVE2688PvAIp1D7yHPGS/ncZ56geVr9AGAlScwiAnhG1SVwUPUEi2ryfRCvyrlXwHlwvVP1/bmehmF7MP6jbfj4r6XRjdcKI6fTpkPsNdZ7718VAqxh8VFNNcuHU9NoXGTBM=,iv:sgQStIeMoF15XjH6FgOKIng5nqOhYeeqRAu7AeyrVz4=,tag:coDyxtBzfaTR5ERuC3Azbw==,type:str]
+    lastmodified: "2024-10-09T16:26:13Z"
+    mac: ENC[AES256_GCM,data:4oDOX4judp5IwSWIwz0TjModHhgYdIDLlij0m4S7qVeoluGaDSdn8Xx5bhaTOapYxzk1xIzrCuRhAeMFnieBhJ4l8V9XBGxRYDOobYPCJzXuWJFF80T+QoOe2JyjMB84LjtA6qUTn4cvul/tW7hMQ7ySKVr94oHpNW6lx24N2JM=,iv:EDoIKM6S044f764iz73LJBG+NRBqyy+ev6lCK+12cHg=,tag:pR8fl4g7ppG14Mym05P2uQ==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.8.1
diff --git a/playbook-website/config/deploy/templates/deployment.yaml.erb b/playbook-website/config/deploy/templates/deployment.yaml.erb
index c1396a2d99..73a80b7732 100644
--- a/playbook-website/config/deploy/templates/deployment.yaml.erb
+++ b/playbook-website/config/deploy/templates/deployment.yaml.erb
@@ -1,3 +1,6 @@
+<%
+  database_user = database["application_user"]
+%>
 apiVersion: apps/v1
 kind: Deployment
 metadata:
@@ -55,6 +58,15 @@ spec:
                 secretKeyRef:
                   name: playbook
                   key: open-ai
+            - name: DATABASE_HOST
+              value: database-haproxy
+            - name: DATABASE_USER
+              value: <%= database_user %>
+            - name: DATABASE_PASSWORD
+              valueFrom:
+                secretKeyRef:
+                  name: database-secrets
+                  key: <%= database_user %>
           livenessProbe:
             httpGet:
               path: /health_check/site
diff --git a/playbook-website/config/deploy/templates/migration-hook.yaml.erb b/playbook-website/config/deploy/templates/migration-hook.yaml.erb
new file mode 100644
index 0000000000..33bcae85c1
--- /dev/null
+++ b/playbook-website/config/deploy/templates/migration-hook.yaml.erb
@@ -0,0 +1,57 @@
+<%
+  migrate_user = database["allprivs_user"]
+%>
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "db-migrate-<%= deployment_id.downcase %>"
+  labels:
+    app: playbook
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/version: <%= image_tag %>
+    app.kubernetes.io/component: db-migrate
+    app.kubernetes.io/part-of: playbook
+    app.kubernetes.io/managed-by: krane
+  annotations:
+    krane.shopify.io/timeout-override: 30m
+spec:
+  restartPolicy: Never
+  shareProcessNamespace: true
+  containers:
+  - name: db-migrate
+    image: "image-registry.powerapp.cloud/playbook/playbook:<%= image_tag %>"
+    workingDir: /home/app/src/playbook-website
+    command:
+      - bin/rails
+    args:
+      - db:prepare
+    env:
+      - name: SECRET_KEY_BASE
+        valueFrom:
+          secretKeyRef:
+            name: playbook
+            key: secret-key-base
+      - name: RACK_ENV
+        value: <%= appConfig["rackEnv"] %>
+      - name: RAILS_ENV
+        value: <%= appConfig["railsEnv"] %>
+      - name: RAILS_LOG_TO_STDOUT
+        value: "true"
+      - name: DATABASE_HOST
+        value: database-haproxy
+      - name: DATABASE_USER
+        value: "<%= migrate_user %>"
+      - name: DATABASE_PASSWORD
+        valueFrom:
+          secretKeyRef:
+            name: database-secrets
+            key: "<%= migrate_user %>"
+    resources:
+      limits:
+        memory: 700Mi
+        ephemeral-storage: 100Mi
+      requests:
+        cpu: 0.1
+        memory: 500Mi
+        ephemeral-storage: 100Mi
diff --git a/playbook-website/config/deploy/templates/operators/pxc-operator.yml b/playbook-website/config/deploy/templates/operators/pxc-operator.yml
new file mode 100644
index 0000000000..e94a395d52
--- /dev/null
+++ b/playbook-website/config/deploy/templates/operators/pxc-operator.yml
@@ -0,0 +1,67 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: percona-xtradb-cluster-operator
+  labels:
+    app.kubernetes.io/component: operator
+    app.kubernetes.io/instance: percona-xtradb-cluster-operator
+    app.kubernetes.io/name: percona-xtradb-cluster-operator
+    app.kubernetes.io/part-of: percona-xtradb-cluster-operator
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/component: operator
+      app.kubernetes.io/instance: percona-xtradb-cluster-operator
+      app.kubernetes.io/name: percona-xtradb-cluster-operator
+      app.kubernetes.io/part-of: percona-xtradb-cluster-operator
+  strategy:
+    rollingUpdate:
+      maxUnavailable: 1
+    type: RollingUpdate
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/component: operator
+        app.kubernetes.io/instance: percona-xtradb-cluster-operator
+        app.kubernetes.io/name: percona-xtradb-cluster-operator
+        app.kubernetes.io/part-of: percona-xtradb-cluster-operator
+    spec:
+      serviceAccountName: percona-xtradb-cluster-operator
+      containers:
+        - name: percona-xtradb-cluster-operator
+          image: percona/percona-xtradb-cluster-operator:1.15.0@sha256:6f7d8d4e472b8c4d166573cc7bb714bbb0fdf1535142b6138c62fdecbf881df9
+          ports:
+          - containerPort: 8080
+            name: metrics
+            protocol: TCP
+          command:
+          - percona-xtradb-cluster-operator
+          imagePullPolicy: Always
+          env:
+            - name: WATCH_NAMESPACE
+              valueFrom:
+                fieldRef:
+                  apiVersion: v1
+                  fieldPath: metadata.namespace
+            - name: POD_NAME
+              valueFrom:
+                fieldRef:
+                  apiVersion: v1
+                  fieldPath: metadata.name
+            - name: OPERATOR_NAME
+              value: "percona-xtradb-cluster-operator"
+          livenessProbe:
+            failureThreshold: 3
+            httpGet:
+              path: /metrics
+              port: metrics
+              scheme: HTTP
+          resources:
+            requests:
+              cpu: "200m"
+              memory: "256Mi"
+              ephemeral-storage: 100Mi
+            limits:
+              memory: "256Mi"
+              ephemeral-storage: 100Mi
diff --git a/playbook-website/config/deploy/templates/priority/mysql.yaml.erb b/playbook-website/config/deploy/templates/priority/mysql.yaml.erb
new file mode 100644
index 0000000000..da8a0ada7e
--- /dev/null
+++ b/playbook-website/config/deploy/templates/priority/mysql.yaml.erb
@@ -0,0 +1,120 @@
+<%
+  pxc_cluster_size    = 3
+%>
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: database-secrets
+  labels:
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/version: <%= image_tag %>
+    app.kubernetes.io/component: database
+    app.kubernetes.io/part-of: priority-deploy
+    app.kubernetes.io/managed-by: krane
+type: Opaque
+data:
+  root: <%= Base64.encode64(database.dig("passwords", "root")) %>
+  proxyadmin: <%= Base64.encode64(database.dig("passwords", "proxyadmin")) %>
+  xtrabackup: <%= Base64.encode64(database.dig("passwords", "xtrabackup")) %>
+  clustercheck: <%= Base64.encode64(database.dig("passwords", "clustercheck")) %>
+  monitor: <%= Base64.encode64(database.dig("passwords", "monitor")) %>
+  pmmserver: <%= Base64.encode64(database.dig("passwords", "pmmserver")) %>
+  operator: <%= Base64.encode64(database.dig("passwords", "operator")) %>
+  replication: <%= Base64.encode64(database.dig("passwords", "replication")) %>
+  webapp: <%= Base64.encode64(database.dig("passwords", "webapp")) %>
+  migrator: <%= Base64.encode64(database.dig("passwords", "migrator")) %>
+  webapp_readonly: <%= Base64.encode64(database.dig("passwords", "webapp_readonly")) %>
+---
+apiVersion: pxc.percona.com/v1
+kind: PerconaXtraDBCluster
+metadata:
+  name: database
+  labels:
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/component: database
+    app.kubernetes.io/part-of: priority-deploy
+    app.kubernetes.io/managed-by: krane
+  annotations:
+    krane.shopify.io/timeout-override: 400s
+  finalizers: []
+spec:
+  crVersion: 1.15.0
+  secretsName: database-secrets
+  allowUnsafeConfigurations: false
+  pause: false
+  updateStrategy: SmartUpdate
+  pxc:
+    size: <%= pxc_cluster_size %>
+    image: percona/percona-xtradb-cluster:8.0.36@sha256:b5cc4034ccfb0186d6a734cb749ae17f013b027e9e64746b2c876e8beef379b3
+    autoRecovery: true
+    resources:
+      requests:
+        memory: 200M
+        cpu: "0.2"
+        ephemeral-storage: 500Mi
+      limits:
+        memory: 1G
+        ephemeral-storage: 500Mi
+    affinity:
+      antiAffinityTopologyKey: "kubernetes.io/hostname"
+    podDisruptionBudget:
+      maxUnavailable: 1
+    volumeSpec:
+      persistentVolumeClaim:
+        storageClassName: <%= database["storageClass"] %>
+        accessModes: [ "ReadWriteOnce" ]
+        resources:
+          requests:
+            storage: <%= database["volumeSize"] %>
+    gracePeriod: 600
+    configuration: |
+      [mysqld]
+      pxc_strict_mode=MASTER
+      log_bin_trust_function_creators=ON
+  haproxy:
+    enabled: true
+    size: 3
+    image: percona/haproxy:2.8.5@sha256:941f3bd0977bff9145e904bf8f8298a1a024d7f03152edaea0cf65fd1c137340
+    resources:
+      requests:
+        memory: 100M
+        cpu: 100m
+        ephemeral-storage: 500Mi
+      limits:
+        memory: 200M
+        ephemeral-storage: 500Mi
+    sidecarResources:
+      requests:
+        memory: 50M
+        cpu: 100m
+        ephemeral-storage: 250Mi
+      limits:
+        memory: 100M
+        ephemeral-storage: 250Mi
+    affinity:
+      antiAffinityTopologyKey: "kubernetes.io/hostname"
+    podDisruptionBudget:
+      maxUnavailable: 1
+    gracePeriod: 30
+    annotations:
+      fluentbit.io/exclude: "true"
+  pmm:
+    enabled: false
+<% if database["users"] %>
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: mysql-users-playbook
+  labels:
+    app.kubernetes.io/component: database
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/part-of: priority-deploy
+    app.kubernetes.io/managed-by: krane
+data:
+  users: '<%= database["users"].to_json %>'
+<% end %>
diff --git a/playbook-website/config/deploy/values.yaml b/playbook-website/config/deploy/values.yaml
index 6eb52762f9..87d4b76bcc 100644
--- a/playbook-website/config/deploy/values.yaml
+++ b/playbook-website/config/deploy/values.yaml
@@ -1,3 +1,22 @@
 appConfig:
   rackEnv: "production"
   railsEnv: "production"
+
+database:
+  users:
+    - name: webapp
+      dbs:
+        - playbook_website
+      grant: 'SELECT, INSERT, UPDATE, DELETE'
+    - name: migrator
+      dbs:
+        - playbook_website
+      grant: 'ALL'
+    - name: webapp_readonly
+      dbs:
+        - playbook_website
+      grant: 'SELECT'
+  allprivs_user: migrator
+  application_user: webapp
+  storageClass: staging-performance
+  volumeSize: 1Gi
diff --git a/playbook-website/db/schema.rb b/playbook-website/db/schema.rb
new file mode 100644
index 0000000000..a3b0495167
--- /dev/null
+++ b/playbook-website/db/schema.rb
@@ -0,0 +1,14 @@
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# This file is the source Rails uses to define your schema when running `bin/rails
+# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to
+# be faster and is potentially less error prone than running all of your
+# migrations from scratch. Old migrations may fail to apply correctly if those
+# migrations use external dependencies or application code.
+#
+# It's strongly recommended that you check this file into your version control system.
+
+ActiveRecord::Schema[7.0].define(version: 0) do
+end

From 750c2670af63d32f763127cbc3a82643506cd68c Mon Sep 17 00:00:00 2001
From: Sam Duncan <samkduncan@gmail.com>
Date: Thu, 17 Oct 2024 15:27:53 -0500
Subject: [PATCH 20/31] [PLAY-1580-1] Semver Targets Trigger Correct RCs -
 Label Check Action (#3818)

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

Adding a Github action that checks for Semver target labels on the Pull
Requests. This action will run whenever a label is added to the PR to
ensure that a target label is present.
---
 .../workflows/github-actions-check-labels.yml | 28 +++++++++++++++++++
 .../github-actions-release-candidate.yml      |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/github-actions-check-labels.yml

diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml
new file mode 100644
index 0000000000..9abd440d89
--- /dev/null
+++ b/.github/workflows/github-actions-check-labels.yml
@@ -0,0 +1,28 @@
+name: Check Labels
+run-name: ${{ github.actor }} is checking labels 🚀
+on:
+  pull_request:
+    types: [ labeled, unlabeled ]
+jobs:
+  Checking-Labels:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Semver label
+        run: |
+          LABELS=$(jq -r '.pull_request.labels[].name' "$GITHUB_EVENT_PATH")
+          SEMVER_PATTERN="^(major|minor|patch)$"
+
+          SEMVER_LABELS=$(echo "$LABELS" | grep -iE "$SEMVER_PATTERN" || true)
+          SEMVER_LABEL_COUNT=$(echo "$SEMVER_LABELS" | wc -l)
+
+          if [ "$SEMVER_LABEL_COUNT" -eq 0 ]; then
+            echo "Error: No Semver label found. Please add exactly one of: major, minor, patch (case-insensitive)"
+            exit 1
+          elif [ "$SEMVER_LABEL_COUNT" -gt 1 ]; then
+            echo "Error: Multiple Semver labels found. Please ensure only one is present:"
+            echo "$SEMVER_LABELS"
+            exit 1
+          else
+            NORMALIZED_LABEL=$(echo "$SEMVER_LABELS" | tr '[:upper:]' '[:lower:]')
+            echo "Valid Semver label found: $NORMALIZED_LABEL"
+          fi
\ No newline at end of file
diff --git a/.github/workflows/github-actions-release-candidate.yml b/.github/workflows/github-actions-release-candidate.yml
index 0df9bed6c3..cc7659fd04 100644
--- a/.github/workflows/github-actions-release-candidate.yml
+++ b/.github/workflows/github-actions-release-candidate.yml
@@ -146,4 +146,4 @@ jobs:
               });
             } else {
               console.log('No pull request found for this commit');
-            }
+            }
\ No newline at end of file

From 9ce2b095439fe6c0f74cac17c8d8497c80723e24 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Thu, 17 Oct 2024 16:30:12 -0400
Subject: [PATCH 21/31] Revert "[PLAY-1580-1] Semver Targets Trigger Correct
 RCs - Label Check Action" (#3820)

Reverts powerhome/playbook#3818
---
 .../workflows/github-actions-check-labels.yml | 28 -------------------
 .../github-actions-release-candidate.yml      |  2 +-
 2 files changed, 1 insertion(+), 29 deletions(-)
 delete mode 100644 .github/workflows/github-actions-check-labels.yml

diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml
deleted file mode 100644
index 9abd440d89..0000000000
--- a/.github/workflows/github-actions-check-labels.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Check Labels
-run-name: ${{ github.actor }} is checking labels 🚀
-on:
-  pull_request:
-    types: [ labeled, unlabeled ]
-jobs:
-  Checking-Labels:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for Semver label
-        run: |
-          LABELS=$(jq -r '.pull_request.labels[].name' "$GITHUB_EVENT_PATH")
-          SEMVER_PATTERN="^(major|minor|patch)$"
-
-          SEMVER_LABELS=$(echo "$LABELS" | grep -iE "$SEMVER_PATTERN" || true)
-          SEMVER_LABEL_COUNT=$(echo "$SEMVER_LABELS" | wc -l)
-
-          if [ "$SEMVER_LABEL_COUNT" -eq 0 ]; then
-            echo "Error: No Semver label found. Please add exactly one of: major, minor, patch (case-insensitive)"
-            exit 1
-          elif [ "$SEMVER_LABEL_COUNT" -gt 1 ]; then
-            echo "Error: Multiple Semver labels found. Please ensure only one is present:"
-            echo "$SEMVER_LABELS"
-            exit 1
-          else
-            NORMALIZED_LABEL=$(echo "$SEMVER_LABELS" | tr '[:upper:]' '[:lower:]')
-            echo "Valid Semver label found: $NORMALIZED_LABEL"
-          fi
\ No newline at end of file
diff --git a/.github/workflows/github-actions-release-candidate.yml b/.github/workflows/github-actions-release-candidate.yml
index cc7659fd04..0df9bed6c3 100644
--- a/.github/workflows/github-actions-release-candidate.yml
+++ b/.github/workflows/github-actions-release-candidate.yml
@@ -146,4 +146,4 @@ jobs:
               });
             } else {
               console.log('No pull request found for this commit');
-            }
\ No newline at end of file
+            }

From f9a7d22328982436a6c770d0456afde27f5a4091 Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Mon, 21 Oct 2024 07:12:26 -0400
Subject: [PATCH 22/31] [PBNTR-614] Custom Cells for Advanced Table (#3821)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allowing for custom cells in Advanced Table

[Runway Story](https://runway.powerhrg.com/backlog_items/PBNTR-614)

[CSB
here](https://codesandbox.io/p/sandbox/advanced-table-custom-cell-gjzxtw)

<img width="1277" alt="Screenshot 2024-10-18 at 1 29 16 PM"
src="https://github.com/user-attachments/assets/235fb0e0-7b26-4493-8c34-b82e170121e3">
---
 .../pb_advanced_table/_advanced_table.tsx     | 32 +++++++--
 .../docs/_advanced_table_custom_cell.jsx      | 72 +++++++++++++++++++
 .../docs/_advanced_table_custom_cell.md       |  5 ++
 .../pb_advanced_table/docs/example.yml        |  2 +
 .../playbook/pb_advanced_table/docs/index.js  |  1 +
 5 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
index 154676418d..52b0c7fcf4 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const columnHelper = createColumnHelper()
 
   //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[]) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,6 +101,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
+    // Use customRenderer if provided, otherwise default rendering
+    if (customRenderer) {
+      return customRenderer(row, getValue())
+    }
+
       switch (row.depth) {
         case 0: {
           return (
@@ -134,18 +139,31 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column) => {
+      columnDefinitions.map((column, index) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
       }
-      if (column.cellAccessors) {
-        columnStructure.cell = createCellFunction(column.cellAccessors)
-      }
-      return columnStructure
-    })
+
+  // Use the custom renderer if provided, EXCEPT for the first column
+  if (index !== 0) {
+    if (column.cellAccessors || column.customRenderer) {
+      columnStructure.cell = createCellFunction(
+        column.cellAccessors,
+        column.customRenderer
+      )
+    }
+  } else {
+    // For the first column, apply createCellFunction without customRenderer
+    if (column.cellAccessors) {
+      columnStructure.cell = createCellFunction(column.cellAccessors)
+    }
+  }
+
+  return columnStructure
+})
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
new file mode 100644
index 0000000000..b1c5bad58d
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
@@ -0,0 +1,72 @@
+import React from "react"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCustomCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      customRenderer: (row, value) => (
+        <Pill text={value} 
+            variant="success"    
+        />
+      ), 
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>, 
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      customRenderer: (row, value) => (
+        <Flex alignItems="end" 
+            orientation="column"
+        >
+          <Detail bold 
+              color="default" 
+              text={value} 
+          />
+          <Caption size="xs">{row.original.graduatedStudents}</Caption>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableCustomCell
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
new file mode 100644
index 0000000000..5ad9e1c219
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
@@ -0,0 +1,5 @@
+The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived. 
+
+See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
+
+See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
index aec491e8e9..87fb7abf3d 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
+
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -15,3 +16,4 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_custom_cell: Custom Components for Cells
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
index c67f4b9bbd..d7992a808a 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
+export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'

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 23/31] [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 24/31] [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 25/31] [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 26/31] [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 27/31] [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 28/31] [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 29/31] [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 30/31] 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 31/31] 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