@homebound/beam 2.415.5 → 2.416.0

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   safeKeys,
   toToggleState,
   useTestIds
-} from "./chunk-ZQBDHF22.js";
+} from "./chunk-XH44AYND.js";
 
 // src/Css.ts
 var CssBuilder = class _CssBuilder {
@@ -5127,7 +5127,7 @@ function CollapseToggle(props) {
 import { useContext as useContext11 } from "react";
 
 // src/inputs/Autocomplete.tsx
-import { useRef as useRef25 } from "react";
+import { useCallback as useCallback13, useRef as useRef25 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition5 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
 
@@ -8133,7 +8133,7 @@ var RowState = class {
     }
   }
   /** Used by node when doing `console.log(rs)`. */
-  [Symbol.for("nodejs.util.inspect.custom")]() {
+  [/* @__PURE__ */ Symbol.for("nodejs.util.inspect.custom")]() {
     return `RowState@${this.row.id}`;
   }
 };
@@ -8709,7 +8709,7 @@ function Menu(props) {
     const { items: items2, ...others } = tree;
     const [itemsSection, persistentSection] = items2;
     if (search) {
-      const filteredChildren = itemsSection.children.filter((item) => contains(item.value.label, search));
+      const filteredChildren = (itemsSection.children ?? []).filter((item) => contains(item.value.label, search));
       const { items: items3, ...otherValues } = itemsSection.value;
       const filteredValue = items3?.filter((item) => contains(item.label, search));
       return {
@@ -9159,18 +9159,21 @@ function ListBoxChip({ label }) {
 }
 
 // src/inputs/Value.ts
+var VALUE_PREFIX = "__VALUE--";
 function keyToValue(key) {
   if (typeof key === "number") {
     return key;
   } else if (typeof key === "string") {
-    if (key === "__VALUE:null") {
+    if (key === `${VALUE_PREFIX}null` || key === "__VALUE:null") {
       return null;
-    } else if (key === "__VALUE:undefined") {
+    } else if (key === `${VALUE_PREFIX}undefined` || key === "__VALUE:undefined") {
       return void 0;
-    } else if (key.startsWith("__VALUE:boolean:")) {
-      return key.split(":")[2] === "true";
-    } else if (key.startsWith("__VALUE:number")) {
-      return Number(key.split(":")[2]);
+    } else if (key.startsWith(`${VALUE_PREFIX}boolean--`) || key.startsWith("__VALUE:boolean:")) {
+      const parts = key.includes("--boolean--") ? key.split("--") : key.split(":");
+      return parts[parts.length - 1] === "true";
+    } else if (key.startsWith(`${VALUE_PREFIX}number--`) || key.startsWith("__VALUE:number:")) {
+      const parts = key.includes("--number--") ? key.split("--") : key.split(":");
+      return Number(parts[parts.length - 1]);
     } else {
       return key;
     }
@@ -9182,13 +9185,13 @@ function valueToKey(value) {
   if (typeof value === "string") {
     return value;
   } else if (typeof value === "number") {
-    return `__VALUE:number:${value}`;
+    return `${VALUE_PREFIX}number--${value}`;
   } else if (typeof value === "boolean") {
-    return `__VALUE:boolean:${value}`;
+    return `${VALUE_PREFIX}boolean--${value}`;
   } else if (value === null) {
-    return "__VALUE:null";
+    return `${VALUE_PREFIX}null`;
   } else if (value === void 0) {
-    return "__VALUE:undefined";
+    return `${VALUE_PREFIX}undefined`;
   } else {
     throw new Error(`Unsupported value ${value}`);
   }
@@ -9759,7 +9762,8 @@ function VirtualizedOptions(props) {
     allowCollapsing
   } = props;
   const virtuosoRef = useRef21(null);
-  const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
+  const focusedKey = state.selectionManager.focusedKey;
+  const focusedItem = focusedKey != null ? state.collection.getItem(focusedKey) : null;
   const selectedItem = state.selectionManager.selectedKeys.size > 0 ? state.collection.getItem([...state.selectionManager.selectedKeys.values()][0]) : void 0;
   useEffect12(
     () => {
@@ -10203,23 +10207,22 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }
+  const comboBoxChildren = useCallback11(
+    ([item]) => /* @__PURE__ */ jsx55(Item3, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
     placeholder: !values || values.length === 0 ? placeholder : "",
     label: props.label,
     inputValue: fieldState.inputValue,
-    // where we might want to do flatmap and return diff kind of array (children ? add level prop) inside children callback - can put markup wrapper div adds padding
-    // so we're not doing it multiple places
     items: fieldState.filteredOptions,
     isDisabled,
     isReadOnly,
     onInputChange,
     onOpenChange,
-    children: ([item]) => (
-      // what we're telling it to render. look at padding here - don't have to pass down to tree option - filtered options is where we're flat mapping
-      /* @__PURE__ */ jsx55(Item3, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item)))
-    )
+    children: comboBoxChildren
   };
   const state = useComboBoxState({
     ...comboBoxProps,
@@ -10229,6 +10232,7 @@ function TreeSelectFieldBase(props) {
   state.selectionManager.state = useMultipleSelectionState({
     selectionMode: "multiple",
     selectedKeys: fieldState.selectedKeys,
+    disabledKeys: Object.keys(disabledOptionsWithReasons),
     onSelectionChange: (newKeys) => {
       if (newKeys === "all") {
         return;
@@ -10521,7 +10525,9 @@ function ComboBoxInput(props) {
           onKeyDown: (e) => {
             if (isMultiSelect) {
               if (isTree) {
-                const item = state.collection.getItem(state.selectionManager.focusedKey);
+                const focusedKey = state.selectionManager.focusedKey;
+                if (focusedKey == null) return;
+                const item = state.collection.getItem(focusedKey);
                 if (item && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
                   if (!isLeveledNode(item)) return;
                   const leveledOption = item.value;
@@ -10543,7 +10549,10 @@ function ComboBoxInput(props) {
                 if (state.isOpen) {
                   e.preventDefault();
                 }
-                state.selectionManager.toggleSelection(state.selectionManager.focusedKey);
+                const focusedKey = state.selectionManager.focusedKey;
+                if (focusedKey != null) {
+                  state.selectionManager.toggleSelection(focusedKey);
+                }
                 return;
               }
               if (e.key === "Escape") {
@@ -10731,6 +10740,10 @@ function ComboBoxBase(props) {
   const listBoxRef = useRef24(null);
   const popoverRef = useRef24(null);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const comboBoxChildren = useCallback12(
+    (item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -10740,7 +10753,7 @@ function ComboBoxBase(props) {
     isReadOnly,
     onInputChange,
     onOpenChange,
-    children: (item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item)))
+    children: comboBoxChildren
   };
   const state = useComboBoxState2({
     ...comboBoxProps,
@@ -10765,7 +10778,8 @@ function ComboBoxBase(props) {
     // Do not allow an empty selection if single select mode
     disallowEmptySelection: !multiselect,
     selectedKeys,
-    onSelectionChange
+    onSelectionChange,
+    disabledKeys: Object.keys(disabledOptionsWithReasons)
   });
   const [debouncedSearch] = useDebounce(searchValue, 300);
   useEffect15(() => {
@@ -10939,6 +10953,10 @@ function Autocomplete(props) {
     ...others
   } = props;
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const comboBoxChildren = useCallback13(
+    (item) => /* @__PURE__ */ jsx58(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     isDisabled: !!disabled,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -10947,8 +10965,9 @@ function Autocomplete(props) {
     items: options,
     // Allow the user to type in a value that is not in the list. Allows for the text to stay in the input when the user clicks away
     allowsCustomValue: true,
-    children: (item) => /* @__PURE__ */ jsx58(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    children: comboBoxChildren,
     onSelectionChange: (key) => {
+      if (key == null) return;
       const selectedItem = options.find((i) => getOptionValue(i) === key);
       if (selectedItem) {
         onInputChange(getOptionLabel(selectedItem));
@@ -11154,7 +11173,7 @@ function DateFieldMock(props) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRef28, useState as useState23 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect16, useRef as useRef28, useState as useState23 } from "react";
 import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
 import { isDateRange } from "react-day-picker";
 import { useOverlayTriggerState } from "react-stately";
@@ -11334,7 +11353,7 @@ function DateFieldBase(props) {
       );
     }
   }, [value, dateFormat]);
-  const onChange = useCallback13(
+  const onChange = useCallback14(
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
@@ -11787,7 +11806,6 @@ function RadioGroupField(props) {
       /* @__PURE__ */ jsx70(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ jsxs41("div", { ...radioGroupProps, children: [
         options.map((option) => {
-          const isDisabled = state.isDisabled || !!option.disabled;
           return /* @__PURE__ */ jsx70(Fragment18, { children: maybeTooltip({
             title: resolveTooltip(option.disabled),
             placement: "bottom",
@@ -11796,7 +11814,8 @@ function RadioGroupField(props) {
               {
                 parentId: name,
                 option,
-                state: { ...state, isDisabled },
+                state,
+                isOptionDisabled: !!option.disabled,
                 ...otherProps,
                 ...tid[option.value]
               }
@@ -11814,13 +11833,18 @@ function Radio(props) {
     parentId,
     option: { description, label, value },
     state,
+    isOptionDisabled,
     ...others
   } = props;
-  const disabled = state.isDisabled;
   const labelId = `${parentId}-${value}-label`;
   const descriptionId = `${parentId}-${value}-description`;
   const ref = useRef30(null);
-  const { inputProps } = useRadio({ value, "aria-labelledby": labelId }, state, ref);
+  const { inputProps, isDisabled } = useRadio(
+    { value, "aria-labelledby": labelId, isDisabled: isOptionDisabled },
+    state,
+    ref
+  );
+  const disabled = isDisabled;
   const { focusProps, isFocusVisible } = useFocusRing6();
   const { hoverProps, isHovered } = useHover12({ isDisabled: disabled });
   return /* @__PURE__ */ jsxs41("label", { css: Css.df.cursorPointer.mb1.if(disabled).add("cursor", "initial").$, ...hoverProps, children: [
@@ -13428,10 +13452,10 @@ function maybeApply(maybeFn) {
 }
 
 // src/components/Table/hooks/useColumnResizeHandlers.ts
-import { useCallback as useCallback14, useRef as useRef37 } from "react";
+import { useCallback as useCallback15, useRef as useRef37 } from "react";
 function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
   const hasLockedColumnsRef = useRef37(false);
-  const distributeAdjustment = useCallback14(
+  const distributeAdjustment = useCallback15(
     (rightColumns, totalRightWidth, adjustment) => {
       const updates = {};
       let remainingAdjustment = adjustment;
@@ -13446,7 +13470,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     []
   );
-  const calculateResizeUpdates = useCallback14(
+  const calculateResizeUpdates = useCallback15(
     (columnId, newWidth, columnIndex) => {
       if (!tableWidth || !columnSizes || columnSizes.length === 0) {
         return null;
@@ -13492,7 +13516,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [tableWidth, columnSizes, columns, distributeAdjustment]
   );
-  const calculatePreviewWidth = useCallback14(
+  const calculatePreviewWidth = useCallback15(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -13502,7 +13526,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [calculateResizeUpdates]
   );
-  const handleColumnResize = useCallback14(
+  const handleColumnResize = useCallback15(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -13558,10 +13582,10 @@ function useScrollStorage(tableId, enabled = true) {
 }
 
 // src/hooks/useRenderCount.ts
-import { useCallback as useCallback15, useRef as useRef38 } from "react";
+import { useCallback as useCallback16, useRef as useRef38 } from "react";
 function useRenderCount() {
   const ref = useRef38(/* @__PURE__ */ new Map());
-  const getCount = useCallback15((id) => {
+  const getCount = useCallback16((id) => {
     const count = ref.current.get(id) || 1;
     ref.current.set(id, count + 1);
     return { "data-render": count };
@@ -14078,7 +14102,7 @@ function ToggleChips(props) {
 
 // src/components/Accordion.tsx
 import { useId, useResizeObserver as useResizeObserver2 } from "@react-aria/utils";
-import { useCallback as useCallback16, useEffect as useEffect19, useMemo as useMemo25, useRef as useRef40, useState as useState29 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo25, useRef as useRef40, useState as useState29 } from "react";
 import { useFocusRing as useFocusRing10 } from "react-aria";
 import { jsx as jsx84, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 function Accordion(props) {
@@ -14110,13 +14134,13 @@ function Accordion(props) {
   useEffect19(() => {
     setContentHeight(expanded && contentRef.current ? `${contentRef.current.scrollHeight}px` : "0");
   }, [expanded]);
-  const onResize = useCallback16(() => {
+  const onResize = useCallback17(() => {
     if (contentRef.current && expanded) {
       setContentHeight(`${contentRef.current.scrollHeight}px`);
     }
   }, [expanded, setContentHeight]);
   useResizeObserver2({ ref: contentRef, onResize });
-  const toggle = useCallback16(() => {
+  const toggle = useCallback17(() => {
     setExpanded((prev) => !prev);
     if (setExpandedIndex) setExpandedIndex(index);
     if (onToggle) onToggle();
@@ -14308,7 +14332,7 @@ import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
 import { useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
-import { useCallback as useCallback17, useEffect as useEffect22, useRef as useRef42, useState as useState31 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect22, useRef as useRef42, useState as useState31 } from "react";
 import { FocusScope as FocusScope4, OverlayContainer as OverlayContainer2, useDialog, useModal as useModal2, useOverlay as useOverlay2, usePreventScroll } from "react-aria";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -14407,7 +14431,7 @@ function Modal(props) {
   const [hasScroll, setHasScroll] = useState31(forceScrolling ?? false);
   useResizeObserver3({
     ref: modalBodyRef,
-    onResize: useCallback17(
+    onResize: useCallback18(
       () => {
         const target = modalBodyRef.current;
         if (forceScrolling === void 0 && !isFixedHeight) {
@@ -14638,7 +14662,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback21, useEffect as useEffect24, useMemo as useMemo33, useRef as useRef44, useState as useState37 } from "react";
+import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo33, useRef as useRef44, useState as useState37 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -14864,7 +14888,7 @@ function BoundDateRangeField(props) {
 }
 
 // src/forms/BoundForm.tsx
-import { useCallback as useCallback19, useMemo as useMemo30 } from "react";
+import { useCallback as useCallback20, useMemo as useMemo30 } from "react";
 
 // src/forms/BoundIconCardField.tsx
 import { Observer as Observer6 } from "mobx-react";
@@ -14893,7 +14917,7 @@ function BoundIconCardField(props) {
 import { Observer as Observer7 } from "mobx-react";
 
 // src/inputs/IconCardGroup.tsx
-import { useCallback as useCallback18, useMemo as useMemo29, useState as useState33 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo29, useState as useState33 } from "react";
 import { mergeProps as mergeProps11, useField } from "react-aria";
 import { jsx as jsx100, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 function IconCardGroup(props) {
@@ -14910,7 +14934,7 @@ function IconCardGroup(props) {
   } = props;
   const [selected, setSelected] = useState33(values);
   const exclusiveOptions = useMemo29(() => options.filter((o) => o.exclusive), [options]);
-  const toggleValue = useCallback18(
+  const toggleValue = useCallback19(
     (value) => {
       if (isDisabled) return;
       const option = options.find((o) => o.value === value);
@@ -15573,7 +15597,7 @@ var listFieldPrefix = "listField";
 function BoundForm(props) {
   const { rows, formState } = props;
   const tid = useTestIds({}, "boundForm");
-  const getRowKey = useCallback19((row, rowType) => {
+  const getRowKey = useCallback20((row, rowType) => {
     return `${rowType}-${Object.keys(row).join("-")}`;
   }, []);
   return /* @__PURE__ */ jsx115("div", { ...tid, children: /* @__PURE__ */ jsx115(FormLines, { width: "full", gap: 3.5, children: rows.map(
@@ -15915,7 +15939,7 @@ function IconButtonList({ content, selectedIcon, onIconClick }) {
 }
 
 // src/components/Toast/ToastContext.tsx
-import { createContext as createContext5, useCallback as useCallback20, useContext as useContext14, useMemo as useMemo31, useState as useState35 } from "react";
+import { createContext as createContext5, useCallback as useCallback21, useContext as useContext14, useMemo as useMemo31, useState as useState35 } from "react";
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 var ToastContext = createContext5({
   setNotice: () => {
@@ -15927,7 +15951,7 @@ var ToastContext = createContext5({
 });
 function ToastProvider(props) {
   const [notice, setNotice] = useState35();
-  const clear = useCallback20(() => setNotice(void 0), [setNotice]);
+  const clear = useCallback21(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo31(() => ({ setNotice, notice, clear }), [notice, clear]);
   return /* @__PURE__ */ jsx122(ToastContext.Provider, { value: contextValue, children: props.children });
 }
@@ -16087,7 +16111,7 @@ function SectionNavLink(props) {
   const { sectionWithRef, activeSection } = props;
   const { section, ref: sectionRef } = sectionWithRef;
   const active = activeSection === sectionWithRef.sectionKey;
-  const handleNavClick = useCallback21(() => {
+  const handleNavClick = useCallback22(() => {
     sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
   }, [sectionRef]);
   const tids = useTestIds(props);
@@ -17299,7 +17323,7 @@ function PreventBrowserScroll({ children }) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback22, useContext as useContext15, useMemo as useMemo38, useState as useState41 } from "react";
+import React18, { useCallback as useCallback23, useContext as useContext15, useMemo as useMemo38, useState as useState41 } from "react";
 import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -17314,15 +17338,15 @@ var RightPaneContext = React18.createContext({
 function RightPaneProvider({ children }) {
   const [rightPaneContent, setRightPaneContent] = useState41(void 0);
   const [isRightPaneOpen, setIsRightPaneOpen] = useState41(false);
-  const openInPane = useCallback22(
+  const openInPane = useCallback23(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = useCallback22(() => setIsRightPaneOpen(false), []);
-  const clearPane = useCallback22(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const closePane = useCallback23(() => setIsRightPaneOpen(false), []);
+  const clearPane = useCallback23(() => setRightPaneContent(void 0), [setRightPaneContent]);
   const context = useMemo38(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
@@ -17466,7 +17490,10 @@ function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
   const buttonRef = useRef47(null);
-  const { menuTriggerProps, menuProps } = useMenuTrigger4({ isDisabled: !!disabled }, state, buttonRef);
+  const {
+    menuTriggerProps,
+    menuProps: { autoFocus: _af, ...menuProps }
+  } = useMenuTrigger4({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
     isTextButton(trigger) ? defaultTestId(labelOr(trigger, "buttonDatePicker")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
@@ -17687,7 +17714,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback23, useRef as useRef50 } from "react";
+import { useCallback as useCallback24, useRef as useRef50 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext7, useContext as useContext17 } from "react";
@@ -17711,19 +17738,19 @@ function DnDGrid(props) {
   const reorderViaKeyboard = useRef50(false);
   const transformFrom = useRef50({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
-  const getGridItems = useCallback23(() => {
+  const getGridItems = useCallback24(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback23(() => {
+  const getGridItemIdOrder = useCallback24(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback23(() => {
+  const initReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       dragEl.current.classList.add(activeGridItemClass);
     }
   }, [getGridItemIdOrder]);
-  const commitReorder = useCallback23(() => {
+  const commitReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -17733,7 +17760,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder]);
-  const cancelReorder = useCallback23(() => {
+  const cancelReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -17755,7 +17782,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems]);
-  const onMove = useCallback23((e) => {
+  const onMove = useCallback24((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
       const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -17776,7 +17803,7 @@ function DnDGrid(props) {
       }
     }
   }, []);
-  const onDragStart = useCallback23(
+  const onDragStart = useCallback24(
     (e) => {
       if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
         initReorder();
@@ -17806,7 +17833,7 @@ function DnDGrid(props) {
     },
     [initReorder, onMove]
   );
-  const onDragEnd = useCallback23(
+  const onDragEnd = useCallback24(
     (e) => {
       if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
         e.preventDefault();
@@ -17822,7 +17849,7 @@ function DnDGrid(props) {
     },
     [commitReorder, onMove]
   );
-  const onDragHandleKeyDown = useCallback23(
+  const onDragHandleKeyDown = useCallback24(
     (e) => {
       const moveHandle = e.target;
       if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
@@ -18077,7 +18104,7 @@ function HbSpinnerProvider({ quips = [], children }) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback24, useEffect as useEffect29, useRef as useRef51, useState as useState43 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef51, useState as useState43 } from "react";
 import { jsx as jsx161, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function MaxLines({ maxLines, children }) {
   const elRef = useRef51(null);
@@ -18090,7 +18117,7 @@ function MaxLines({ maxLines, children }) {
   useEffect29(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback24(() => {
+  const onResize = useCallback25(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
@@ -18103,7 +18130,7 @@ function MaxLines({ maxLines, children }) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback25, useMemo as useMemo44, useRef as useRef52, useState as useState44 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo44, useRef as useRef52, useState as useState44 } from "react";
 import { jsx as jsx162, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 function ScrollShadows(props) {
   const { children, xss, horizontal = false, bgColor = "rgba(255,255,255,1)" /* White */ } = props;
@@ -18127,7 +18154,7 @@ function ScrollShadows(props) {
       { ...commonStyles, ...endShadowStyles2, ...Css.add("background", endGradient).$ }
     ];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback25(
+  const updateScrollProps = useCallback26(
     (el) => {
       const { scrollTop, scrollHeight, clientHeight, scrollWidth, scrollLeft, clientWidth } = el;
       const start = horizontal ? scrollLeft : scrollTop;
@@ -18138,7 +18165,7 @@ function ScrollShadows(props) {
     },
     [horizontal]
   );
-  const onResize = useCallback25(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  const onResize = useCallback26(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
   useResizeObserver6({ ref: scrollRef, onResize });
   return /* @__PURE__ */ jsxs80(
     "div",
@@ -18166,10 +18193,10 @@ function ScrollShadows(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback26, useEffect as useEffect30 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect30 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback26(
+  const onClose = useCallback27(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -18186,7 +18213,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback26(
+  const triggerNotice = useCallback27(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -18215,7 +18242,7 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback26((id) => onClose(id), [onClose]);
+  const closeNotice = useCallback27((id) => onClose(id), [onClose]);
   const useSnackbarOffset = ({ bottom }) => useEffect30(() => {
     setOffset({ bottom });
     return () => setOffset({});
@@ -18720,10 +18747,10 @@ function hideTabs(props) {
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback28 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback27((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback28((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 export {