@uniformdev/design-system 20.55.2 → 20.56.1-alpha.5

package/dist/esm/index.js

@@ -4059,7 +4059,7 @@ var UniformLogoLarge = ({ ...props }) => {
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 import { CgChevronDown as CgChevronDown3 } from "@react-icons/all-files/cg/CgChevronDown";
 import { MdCheckCircle } from "@react-icons/all-files/md/MdCheckCircle";
-import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 import { css as css23 } from "@emotion/react";
@@ -4914,7 +4914,8 @@ var MenuSelect = forwardRef6(
 );
 
 // src/components/Menu/SearchableMenu.tsx
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useMenuContext } from "@ariakit/react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css28 } from "@emotion/react";
@@ -6168,9 +6169,11 @@ var SearchableMenu = (props) => {
     }
   );
 };
-function MenuSearch({ onSearchTextChanged, searchPlaceholder }) {
+function MenuSearch({ onSearchTextChanged, searchPlaceholder, onSearchEnterKeyDown }) {
   const searchInputRef = useRef2(null);
   const hasFocusedRef = useRef2(false);
+  const [currentSearchText, setCurrentSearchText] = useState5("");
+  const menu = useMenuContext();
   useEffect4(() => {
     if (hasFocusedRef.current || !searchInputRef.current) {
       return;
@@ -6182,11 +6185,71 @@ function MenuSearch({ onSearchTextChanged, searchPlaceholder }) {
       }
     }, 50);
   });
+  const handleSearchTextChanged = (text) => {
+    setCurrentSearchText(text);
+    onSearchTextChanged(text);
+  };
+  useEffect4(() => {
+    if (!menu) {
+      return;
+    }
+    if (!currentSearchText) {
+      menu.setActiveId(null);
+      return;
+    }
+    const timer = setTimeout(() => {
+      var _a;
+      const { renderedItems } = menu.getState();
+      const enabledItems = renderedItems.filter((item) => !item.disabled);
+      if (enabledItems.length > 0) {
+        menu.setActiveId(enabledItems[0].id);
+        (_a = enabledItems[0].element) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+      } else {
+        menu.setActiveId(null);
+      }
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [menu, currentSearchText]);
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    if (!menu) {
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const { renderedItems, activeId } = menu.getState();
+      const enabledItems = renderedItems.filter((item) => !item.disabled);
+      if (enabledItems.length === 0) {
+        return;
+      }
+      const currentIndex = activeId ? enabledItems.findIndex((item) => item.id === activeId) : -1;
+      let nextIndex;
+      if (e.key === "ArrowDown") {
+        nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+      }
+      const nextItem = enabledItems[nextIndex];
+      menu.setActiveId(nextItem.id);
+      (_a = nextItem.element) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+    }
+    if (e.key === "Enter") {
+      const { activeId, renderedItems } = menu.getState();
+      if (activeId) {
+        e.preventDefault();
+        const activeItem = renderedItems.find((item) => item.id === activeId);
+        (_b = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _b.click();
+      } else {
+        onSearchEnterKeyDown == null ? void 0 : onSearchEnterKeyDown();
+      }
+    }
+  };
   return /* @__PURE__ */ jsx49(
     DebouncedInputKeywordSearch,
     {
       ref: searchInputRef,
-      onSearchTextChanged,
+      onSearchTextChanged: handleSearchTextChanged,
+      onKeyDown: handleKeyDown,
       rounded: true,
       compact: "xs",
       placeholder: searchPlaceholder != null ? searchPlaceholder : "Search..."
@@ -6464,7 +6527,7 @@ var ButtonWithMenu = ({
   const buttonSize = size === "base" ? "md" : size;
   const btnSize2 = getButtonSize(buttonSize);
   const variant = "variant" in buttonProps && buttonProps.variant === "soft" ? "soft" : void 0;
-  const [showSuccess, setShowSuccess] = useState5(false);
+  const [showSuccess, setShowSuccess] = useState6(false);
   const previousDisabledRef = useRef3(disabledValue);
   useEffect5(() => {
     if (previousDisabledRef.current === "loading" && disabledValue === false) {
@@ -6578,7 +6641,7 @@ var ButtonWithMenu = ({
 
 // src/components/Calendar/Calendar.tsx
 import { isToday, parseDate, today } from "@internationalized/date";
-import { useCallback as useCallback3, useState as useState6 } from "react";
+import { useCallback as useCallback3, useState as useState7 } from "react";
 import {
   Button as AriaButton,
   Calendar as AriaCalendar,
@@ -6705,13 +6768,16 @@ var Calendar = ({
   minValue,
   maxValue,
   onChange,
+  styles: stylesProp,
   autoFocus,
   isDisabled,
   isInvalid,
   isReadOnly,
+  withTodayButton = true,
+  isDateUnavailable,
   ...props
 }) => {
-  const [focusedValue, setFocusedValue] = useState6(void 0);
+  const [focusedValue, setFocusedValue] = useState7(void 0);
   const today_date = today(timeZone);
   const minDate = tryParseDate(minValue);
   const maxDate = tryParseDate(maxValue);
@@ -6740,6 +6806,9 @@ var Calendar = ({
         isDisabled,
         isReadOnly,
         isInvalid,
+        isDateUnavailable: isDateUnavailable ? (date) => {
+          return isDateUnavailable(date.toDate(timeZone));
+        } : void 0,
         children: [
           /* @__PURE__ */ jsxs34("header", { css: header, children: [
             /* @__PURE__ */ jsx52(Heading, { css: [h6, headerTitle] }),
@@ -6760,22 +6829,26 @@ var Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx52(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx52(
-            CalendarCell,
-            {
-              css: [
-                cell,
-                minDate && date.compare(minDate) < 0 ? cellIsOutsideRange : null,
-                maxDate && date.compare(maxDate) > 0 ? cellIsOutsideRange : null,
-                isToday(date, timeZone) ? cellIsToday : null
-              ],
-              date
-            }
-          ) })
+          /* @__PURE__ */ jsx52(CalendarGrid, { children: (date) => {
+            var _a, _b;
+            return /* @__PURE__ */ jsx52(
+              CalendarCell,
+              {
+                css: [
+                  cell,
+                  minDate && date.compare(minDate) < 0 ? cellIsOutsideRange : null,
+                  maxDate && date.compare(maxDate) > 0 ? cellIsOutsideRange : null,
+                  isToday(date, timeZone) ? cellIsToday : null,
+                  ...(_b = (_a = stylesProp == null ? void 0 : stylesProp.calendarCell) == null ? void 0 : _a.call(stylesProp, date.toDate(timeZone))) != null ? _b : []
+                ],
+                date
+              }
+            );
+          } })
         ]
       }
     ),
-    /* @__PURE__ */ jsx52("div", { css: actions, children: /* @__PURE__ */ jsx52(Button, { onClick: gotoToday, buttonType: "ghost", children: "Today" }) })
+    withTodayButton ? /* @__PURE__ */ jsx52("div", { css: actions, children: /* @__PURE__ */ jsx52(Button, { onClick: gotoToday, buttonType: "ghost", children: "Today" }) }) : null
   ] });
 };
 
@@ -7236,6 +7309,14 @@ var ChipIcon = css48`
   display: flex;
   opacity: var(--opacity-50);
 `;
+var ChipXxs = css48`
+  height: 1rem;
+  font-size: var(--fs-xs);
+
+  > :where(span:last-of-type) {
+    padding: 0 var(--spacing-sm);
+  }
+`;
 var ChipTiny = (withIcon) => css48`
   font-size: var(--fs-xs);
   padding-inline: ${withIcon ? "calc(var(--spacing-2xs) + 2px) var(--spacing-sm)" : "var(--spacing-sm)"};
@@ -7470,6 +7551,7 @@ var Chip = ({
   ...props
 }) => {
   const chipSize = {
+    xxs: ChipXxs,
     xs: ChipTiny(Boolean(icon)),
     sm: ChipSmall,
     md: ChipMedium
@@ -7842,7 +7924,7 @@ import {
 } from "@ariakit/react";
 import { CalendarDate as CalendarDate3, parseDate as parseDate2, parseTime as parseTime2, Time as Time2 } from "@internationalized/date";
 import { CgCalendar } from "@react-icons/all-files/cg/CgCalendar";
-import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect6, useMemo, useState as useState7 } from "react";
+import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect6, useMemo, useState as useState8 } from "react";
 
 // src/components/Popover/Popover.styles.ts
 import { css as css53 } from "@emotion/react";
@@ -8092,6 +8174,15 @@ var TIMEZONE_OPTIONS = timeZoneOptions.map((v) => {
   }
   return a.value.localeCompare(b.value);
 });
+function getDraftState(parsedValue) {
+  var _a;
+  const timeZone = (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone();
+  return {
+    date: tryToCalendarDate(parsedValue),
+    time: (_a = tryToTime(parsedValue)) != null ? _a : new Time2(0, 0),
+    timeZone: TIMEZONE_OPTIONS.find(({ value }) => value === timeZone)
+  };
+}
 var DateTimePickerContext = createContext2({
   clearValue() {
   },
@@ -8137,19 +8228,17 @@ var DateTimePicker = ({
     () => tryParseAbsoluteToDateString(maxVisible, value == null ? void 0 : value.timeZone),
     [maxVisible, value == null ? void 0 : value.timeZone]
   );
-  const [draftDate, setDraftDate] = useState7(null);
-  const [draftTime, setDraftTime] = useState7(null);
-  const [draftTimeZone, setDraftTimeZone] = useState7(() => {
-    const timeZone = (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone();
-    return TIMEZONE_OPTIONS.find(({ value: value2 }) => value2 === timeZone);
-  });
+  const draftState = useMemo(() => getDraftState(parsedValue), [parsedValue]);
+  const [draftDate, setDraftDate] = useState8(() => draftState.date);
+  const [draftTime, setDraftTime] = useState8(() => draftState.time);
+  const [draftTimeZone, setDraftTimeZone] = useState8(() => draftState.timeZone);
   useEffect6(() => {
-    var _a;
     if (visible) {
-      setDraftDate(tryToCalendarDate(parsedValue));
-      setDraftTime((_a = tryToTime(parsedValue)) != null ? _a : new Time2(0, 0));
+      setDraftDate(draftState.date);
+      setDraftTime(draftState.time);
+      setDraftTimeZone(draftState.timeZone);
     }
-  }, [parsedValue, visible]);
+  }, [draftState, visible]);
   const handleDateChange = useCallback4((isoDate) => {
     setDraftDate(parseDate2(isoDate));
   }, []);
@@ -8528,7 +8617,7 @@ var DragHandle = forwardRef16(
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React14, { createContext as createContext4, useContext as useContext4, useEffect as useEffect7, useRef as useRef5, useState as useState10 } from "react";
+import React14, { createContext as createContext4, useContext as useContext4, useEffect as useEffect7, useRef as useRef5, useState as useState11 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -8639,7 +8728,7 @@ var drawerWrapperOverlayStyles = css58`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useId, useState as useState9 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useId, useState as useState10 } from "react";
 import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   providerId: "",
@@ -8654,9 +8743,9 @@ var DrawerContext = createContext3({
   }
 });
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = useState9([]);
+  const [drawersRegistry, setDrawersRegistry] = useState10([]);
   const providerId = useId();
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState9(void 0);
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState10(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -8790,7 +8879,7 @@ var DrawerInner = ({
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
   const closeButtonRef = useRef5(null);
-  const [rendererElement, setRendererElement] = useState10(null);
+  const [rendererElement, setRendererElement] = useState11(null);
   useEffect7(() => {
     registerDrawer({
       drawer: {
@@ -9136,7 +9225,7 @@ var IconButton = forwardRef17(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
 
 // src/components/Image/Image.styles.ts
 import { css as css63 } from "@emotion/react";
@@ -9239,8 +9328,8 @@ function Image({
   errorFallbackSrc,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = useState11(true);
-  const [loadErrorText, setLoadErrorText] = useState11("");
+  const [loading, setLoading] = useState12(true);
+  const [loadErrorText, setLoadErrorText] = useState12("");
   const { currentSrc, currentSrcSet, tryFallback } = useImageLoadFallback({
     src: src != null ? src : "",
     srcSet,
@@ -9610,7 +9699,7 @@ var EditTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css66 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
-import { useEffect as useEffect11, useState as useState12 } from "react";
+import { useEffect as useEffect11, useState as useState13 } from "react";
 import { jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
@@ -9620,7 +9709,7 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState12(false);
+  const [upVote, setUpVote] = useState13(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
@@ -10190,7 +10279,7 @@ import {
   useEffect as useEffect13,
   useMemo as useMemo5,
   useRef as useRef8,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/utils/useDebouncedCallback.ts
@@ -10281,11 +10370,11 @@ var KeyValueInput = ({
   showIconColumn = false,
   renderIconSelector
 }) => {
-  const [isDragging, setIsDragging] = useState13(false);
-  const [indexToFocus, setIndexToFocus] = useState13(null);
+  const [isDragging, setIsDragging] = useState14(false);
+  const [indexToFocus, setIndexToFocus] = useState14(null);
   const popoverStoresMap = useRef8({});
   const keyInputRefsMap = useRef8({});
-  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = useState13(
+  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = useState14(
     () => new Set(value.map((item) => item.value))
   );
   const sensors = useSensors(
@@ -10658,13 +10747,13 @@ var KeyValueInputItem = ({
 // src/components/LabelsQuickFilter/LabelsQuickFilter.tsx
 import { TbChevronRight as TbChevronRight2 } from "@react-icons/all-files/tb/TbChevronRight";
 import { TbTags } from "@react-icons/all-files/tb/TbTags";
-import { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo6, useRef as useRef10, useState as useState15 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo6, useState as useState16 } from "react";
 
 // src/components/QuickFilter/QuickFilter.tsx
 import { CgMathPlus as CgMathPlus2 } from "@react-icons/all-files/cg/CgMathPlus";
 import { CgTag } from "@react-icons/all-files/cg/CgTag";
 import { TbWashDryclean } from "@react-icons/all-files/tb/TbWashDryclean";
-import { useEffect as useEffect14, useRef as useRef9, useState as useState14 } from "react";
+import { useEffect as useEffect14, useRef as useRef9, useState as useState15 } from "react";
 
 // src/components/Swatch/Swatch.styles.ts
 import { css as css74 } from "@emotion/react";
@@ -11071,12 +11160,13 @@ var QuickFilter = ({
   onClose,
   menuPlacement = "right-start",
   menuGetAnchorRect,
-  menuUpdatePosition
+  menuUpdatePosition,
+  onSearchEnterKeyDown
 }) => {
   const hasSelectedItems = selectedItems && (selectedItems == null ? void 0 : selectedItems.length) > 0;
   const containerRef = useRef9(null);
   const hasPositionedRef = useRef9(false);
-  const [open, setOpen] = useState14(false);
+  const [open, setOpen] = useState15(false);
   useEffect14(() => {
     if (open) {
       onOpen == null ? void 0 : onOpen();
@@ -11129,6 +11219,7 @@ var QuickFilter = ({
             searchPlaceholder: searchPlaceholderText,
             disableSearch: totalResults < maxCount,
             disabled: disabled2,
+            onSearchEnterKeyDown,
             placement: menuPlacement,
             getAnchorRect: resolvedGetAnchorRect,
             updatePosition: resolvedUpdatePosition,
@@ -11255,7 +11346,7 @@ var LabelsQuickFilter = ({
   menuUpdatePosition,
   maxCount = 0
 }) => {
-  const [searchTerm, setSearchTerm] = useState15("");
+  const [searchTerm, setSearchTerm] = useState16("");
   const selectedIdsSet = useMemo6(
     () => selectedIds instanceof Set ? selectedIds : new Set(selectedIds),
     [selectedIds]
@@ -11405,33 +11496,21 @@ var LabelsQuickFilter = ({
       group.id
     );
   };
-  const { canCreateLabel, isCreateDisabled, isCreateSelected } = useMemo6(() => {
-    const canCreateLabel2 = !!searchTerm;
+  const { canCreateLabel, isCreateDisabled } = useMemo6(() => {
+    const derivedPublicId = searchTerm.toLowerCase().replace(/ /g, "-").replace(/[^A-Za-z0-9$-]+/g, "");
+    const publicIdExists = items.some((item) => item.id === derivedPublicId);
+    const canCreateLabel2 = !!searchTerm && !publicIdExists;
     const isCreateDisabled2 = filteredItems.some((item) => item.name === searchTerm);
-    const isCreateSelected2 = selectedIdsSet.has(searchTerm);
     return {
       canCreateLabel: canCreateLabel2,
-      isCreateDisabled: isCreateDisabled2,
-      isCreateSelected: isCreateSelected2
+      isCreateDisabled: isCreateDisabled2
     };
-  }, [filteredItems, searchTerm, selectedIdsSet]);
-  const createLabelStateRef = useRef10({ searchTerm, canCreateLabel, isCreateDisabled, onCreateLabel });
-  createLabelStateRef.current = { searchTerm, canCreateLabel, isCreateDisabled, onCreateLabel };
-  const handleEnterKey = useCallback8((e) => {
-    const { searchTerm: searchTerm2, canCreateLabel: canCreateLabel2, isCreateDisabled: isCreateDisabled2, onCreateLabel: onCreateLabel2 } = createLabelStateRef.current;
-    if (e.key === "Enter" && canCreateLabel2 && onCreateLabel2 && !isCreateDisabled2) {
-      onCreateLabel2(searchTerm2);
+  }, [filteredItems, items, searchTerm]);
+  const handleSearchEnterKeyDown = useCallback8(() => {
+    if (canCreateLabel && !isCreateDisabled && onCreateLabel) {
+      onCreateLabel(searchTerm);
     }
-  }, []);
-  useEffect15(() => {
-    if (!onCreateLabel) {
-      return;
-    }
-    window.addEventListener("keydown", handleEnterKey);
-    return () => {
-      window.removeEventListener("keydown", handleEnterKey);
-    };
-  }, [handleEnterKey, onCreateLabel]);
+  }, [canCreateLabel, isCreateDisabled, onCreateLabel, searchTerm]);
   return /* @__PURE__ */ jsxs65(
     QuickFilter,
     {
@@ -11451,6 +11530,7 @@ var LabelsQuickFilter = ({
       menuGetAnchorRect,
       menuUpdatePosition,
       maxCount,
+      onSearchEnterKeyDown: onCreateLabel ? handleSearchEnterKeyDown : void 0,
       children: [
         filteredItems.map((item) => {
           if (!item.isGroup && item.parent) {
@@ -11463,23 +11543,16 @@ var LabelsQuickFilter = ({
         }),
         canCreateLabel && onCreateLabel ? /* @__PURE__ */ jsxs65(Fragment10, { children: [
           filteredItems.length > 0 ? /* @__PURE__ */ jsx99(MenuItemSeparator, {}) : null,
-          /* @__PURE__ */ jsx99(
-            SelectableMenuItem,
-            {
-              selected: isCreateSelected,
-              disabled: isCreateDisabled,
-              onClick: () => onCreateLabel(searchTerm),
-              tabIndex: 0,
-              selectStyles: "checkbox-select",
-              children: /* @__PURE__ */ jsxs65(HorizontalRhythm, { align: "center", gap: "sm", children: [
-                /* @__PURE__ */ jsx99("span", { children: "Create:" }),
-                /* @__PURE__ */ jsxs65(HorizontalRhythm, { gap: "sm", align: "center", children: [
-                  /* @__PURE__ */ jsx99(Swatch, { variant: "swatch-default", size: "small" }),
-                  searchTerm
-                ] })
+          /* @__PURE__ */ jsx99(MenuItem, { hideOnClick: false, disabled: isCreateDisabled, onClick: () => onCreateLabel(searchTerm), children: /* @__PURE__ */ jsxs65(HorizontalRhythm, { align: "center", gap: "sm", css: { fontSize: "var(--fs-sm)" }, children: [
+            /* @__PURE__ */ jsx99("span", { css: { width: "var(--spacing-base)", flexShrink: 0 } }),
+            /* @__PURE__ */ jsxs65(HorizontalRhythm, { align: "center", gap: "sm", children: [
+              /* @__PURE__ */ jsx99("span", { children: "Create:" }),
+              /* @__PURE__ */ jsxs65(HorizontalRhythm, { gap: "sm", align: "center", children: [
+                /* @__PURE__ */ jsx99(Swatch, { variant: "swatch-default", size: "small" }),
+                searchTerm
               ] })
-            }
-          )
+            ] })
+          ] }) })
         ] }) : null
       ]
     }
@@ -11494,7 +11567,7 @@ import {
   usePopoverContext,
   usePopoverStore as usePopoverStore2
 } from "@ariakit/react";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/components/Popover/PopoverBody.tsx
 import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
@@ -11538,7 +11611,7 @@ var Popover3 = ({
   ...otherProps
 }) => {
   const popover2 = usePopoverStore2({ placement });
-  useEffect16(() => {
+  useEffect15(() => {
     onInit == null ? void 0 : onInit({ store: popover2 });
   }, [popover2]);
   return /* @__PURE__ */ jsxs66(PopoverProvider2, { store: popover2, children: [
@@ -11548,6 +11621,7 @@ var Popover3 = ({
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
+        disabled: otherProps.disabled,
         children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs66(Fragment11, { children: [
           /* @__PURE__ */ jsx101(Icon, { icon, iconColor, size: iconSize2 }),
           /* @__PURE__ */ jsx101("span", { hidden: true, children: buttonText })
@@ -11591,12 +11665,13 @@ var LimitsBarTextColor = (statusColor) => css77`
 
 // src/components/LimitsBar/LimitsBar.tsx
 import { jsx as jsx102, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
-var LimitsBar = ({ current, max, popoverContent }) => {
+var LimitsBar = ({ current, max, popoverContent, barColor, ...props }) => {
   const maxPercentage = 100;
   const isUnlimited = max < 0;
   const progressBarValue = isUnlimited ? maxPercentage : Math.min(Math.ceil(current / max * maxPercentage), maxPercentage);
   const percentage = isUnlimited ? 0 : current / max * 100;
   const getBarColor = () => {
+    if (barColor) return barColor;
     if (isUnlimited) return "var(--utility-success-icon)";
     if (percentage >= 100) return "var(--utility-danger-icon)";
     if (percentage >= 90) return "var(--utility-caution-icon)";
@@ -11613,7 +11688,7 @@ var LimitsBar = ({ current, max, popoverContent }) => {
   const displayText = isUnlimited ? `${current} of unlimited` : `${current} of ${max}`;
   const ariaValueMax = isUnlimited ? -1 : max;
   const ariaValueText = displayText;
-  return /* @__PURE__ */ jsxs67("div", { css: [LimitsBarContainer, functionalColors], children: [
+  return /* @__PURE__ */ jsxs67("div", { css: [LimitsBarContainer, functionalColors], ...props, children: [
     /* @__PURE__ */ jsx102(
       "div",
       {
@@ -11929,7 +12004,7 @@ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
 // src/components/Modal/Modal.tsx
 import { PortalContext } from "@ariakit/react";
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React16, { useCallback as useCallback9, useEffect as useEffect17, useRef as useRef11, useState as useState16 } from "react";
+import React16, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef10, useState as useState17 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -12033,9 +12108,9 @@ var Modal = React16.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = useRef11(false);
-    const dialogRef = useRef11(null);
-    const [portalTarget, setPortalTarget] = useState16(null);
+    const mouseDownInsideModal = useRef10(false);
+    const dialogRef = useRef10(null);
+    const [portalTarget, setPortalTarget] = useState17(null);
     const setDialogRef = useCallback9(
       (element) => {
         dialogRef.current = element;
@@ -12059,7 +12134,7 @@ var Modal = React16.forwardRef(
       },
       shortcut: "escape"
     });
-    useEffect17(() => {
+    useEffect16(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -12485,7 +12560,7 @@ var ObjectGridItemCoverButton = ({
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect18, useRef as useRef12, useState as useState17 } from "react";
+import { useEffect as useEffect17, useRef as useRef11, useState as useState18 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css87 } from "@emotion/react";
@@ -12511,12 +12586,12 @@ var ObjectGridItemHeading2 = ({
   tooltip,
   ...props
 }) => {
-  const [hasTruncation, setHasTruncation] = useState17(false);
-  const headingRef = useRef12(null);
+  const [hasTruncation, setHasTruncation] = useState18(false);
+  const headingRef = useRef11(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
-  useEffect18(() => {
+  useEffect17(() => {
     const currentHeading = headingRef.current;
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -13211,7 +13286,7 @@ var ParameterGroup = forwardRef21(
 import { forwardRef as forwardRef23, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -13254,7 +13329,7 @@ var previewModalImage = css96`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { Fragment as Fragment13, jsx as jsx126, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState18(false);
+  const [showModal, setShowModal] = useState19(false);
   return imageSrc ? /* @__PURE__ */ jsxs85("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx126(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx126(
@@ -13286,7 +13361,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css99 } from "@emotion/react";
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 import { css as css97 } from "@emotion/react";
@@ -13739,7 +13814,7 @@ var ParameterShell = ({
   menuWithoutPortal,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState19(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState20(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs86("div", { css: inputContainer2, ...props, id, children: [
@@ -13876,7 +13951,7 @@ var ParameterInputInner = forwardRef24(({ enableMouseWheel = false, ...props },
 });
 
 // src/components/ParameterInputs/ParameterLabels.tsx
-import { useMemo as useMemo7, useRef as useRef13 } from "react";
+import { useMemo as useMemo7, useRef as useRef12 } from "react";
 import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
 var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
@@ -13938,8 +14013,8 @@ var ParameterLabelsInner = (props) => {
   var _a;
   const { label: label2 } = useParameterShell();
   const { onChange } = props;
-  const containerRef = useRef13(null);
-  const hasPositionedRef = useRef13(false);
+  const containerRef = useRef12(null);
+  const hasPositionedRef = useRef12(false);
   const selectedValues = useMemo7(
     () => {
       var _a2, _b;
@@ -14254,7 +14329,7 @@ import { forwardRef as forwardRef27 } from "react";
 import { forwardRef as forwardRef26, useCallback as useCallback10, useMemo as useMemo8 } from "react";
 
 // src/components/Slider/SliderLabels.tsx
-import { useEffect as useEffect19, useRef as useRef14, useState as useState20 } from "react";
+import { useEffect as useEffect18, useRef as useRef13, useState as useState21 } from "react";
 
 // src/components/Slider/styles/Slider.styles.ts
 import { css as css100 } from "@emotion/react";
@@ -14679,9 +14754,9 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
   }));
 }
 function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
-  const containerRef = useRef14(null);
-  const [measuredWidth, setMeasuredWidth] = useState20(containerWidth);
-  useEffect19(() => {
+  const containerRef = useRef13(null);
+  const [measuredWidth, setMeasuredWidth] = useState21(containerWidth);
+  useEffect18(() => {
     if (containerRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -15059,7 +15134,7 @@ var defaultParameterConfiguration = {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect28, useState as useState26 } from "react";
+import { useEffect as useEffect27, useState as useState27 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -15080,10 +15155,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect19 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect20(() => {
+  useEffect19(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -15342,10 +15417,10 @@ var tableHeaderElement = css101`
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { $insertFirst } from "@lexical/utils";
 import { $createParagraphNode, $getRoot, $insertNodes } from "lexical";
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect20 } from "react";
 var ImprovedAssetSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext2();
-  useEffect21(() => {
+  useEffect20(() => {
     editor.getRootElement();
     const onRootClick = (event) => {
       if (event.target !== editor.getRootElement()) {
@@ -15416,7 +15491,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback11, useEffect as useEffect22, useRef as useRef15, useState as useState21 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef14, useState as useState22 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -15789,17 +15864,17 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = useLexicalComposerContext3();
-  const [linkPopoverState, setLinkPopoverState] = useState21();
-  const linkPopoverElRef = useRef15(null);
-  const [isEditorFocused, setIsEditorFocused] = useState21(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState21(false);
-  useEffect22(() => {
+  const [linkPopoverState, setLinkPopoverState] = useState22();
+  const linkPopoverElRef = useRef14(null);
+  const [isEditorFocused, setIsEditorFocused] = useState22(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState22(false);
+  useEffect21(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -15937,7 +16012,7 @@ function LinkNodePlugin({
       }
     });
   }, [editor, positioningAnchorEl]);
-  useEffect22(() => {
+  useEffect21(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16041,7 +16116,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect23, useRef as useRef16 } from "react";
+import { useEffect as useEffect22, useRef as useRef15 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -16096,8 +16171,8 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef16(false);
-  useEffect23(() => {
+  const isInListItemNode = useRef15(false);
+  useEffect22(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       () => {
@@ -16114,7 +16189,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_NORMAL
     );
   }, [editor]);
-  useEffect23(() => {
+  useEffect22(() => {
     return mergeRegister3(
       editor.registerCommand(
         INDENT_CONTENT_COMMAND,
@@ -16163,7 +16238,7 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3, $setSelection } from "lexical";
-import { forwardRef as forwardRef28, useCallback as useCallback12, useEffect as useEffect24, useLayoutEffect, useState as useState22 } from "react";
+import { forwardRef as forwardRef28, useCallback as useCallback12, useEffect as useEffect23, useLayoutEffect, useState as useState23 } from "react";
 import { jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
@@ -16178,7 +16253,7 @@ var tableActionMenuTrigger = css103`
 `;
 var TableActionMenuTrigger = forwardRef28((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = useState22({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState23({ x: 0, y: 0 });
   useLayoutEffect(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16212,16 +16287,16 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, updateTableCellNode] = useState22(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState22({
+  const [tableCellNode, updateTableCellNode] = useState23(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState23({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = useState22(0);
+  const [menuTriggerKey, setMenuTriggerKey] = useState23(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
-  useEffect24(() => {
+  useEffect23(() => {
     return editor.registerMutationListener(
       TableCellNode,
       (nodeMutations) => {
@@ -16235,7 +16310,7 @@ function TableActionMenu({
       { skipInitialization: true }
     );
   }, [editor, tableCellNode]);
-  useEffect24(() => {
+  useEffect23(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection3();
       if ($isTableSelection(selection)) {
@@ -16410,10 +16485,10 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, setTableMenuCellNode] = useState22(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState22(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState22(null);
-  useEffect24(() => {
+  const [tableCellNode, setTableMenuCellNode] = useState23(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState23(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState23(null);
+  useEffect23(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
     menuPortalEl.appendChild(newPortalEl);
@@ -16457,7 +16532,7 @@ function TableCellActionMenuContainer({
       setTableMenuCellNodeElem(null);
     }
   }, [editor, setTableMenuCellNodeElem]);
-  useEffect24(() => {
+  useEffect23(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         $moveMenu();
@@ -16496,7 +16571,7 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback13, useEffect as useEffect25, useMemo as useMemo9, useRef as useRef17, useState as useState23 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef16, useState as useState24 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment17, jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
@@ -16523,14 +16598,14 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef17(null);
-  const resizerRef = useRef17(null);
-  const tableRectRef = useRef17(null);
-  const mouseStartPosRef = useRef17(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = useState23(null);
-  const [activeCell, updateActiveCell] = useState23(null);
-  const [isMouseDown, updateIsMouseDown] = useState23(false);
-  const [draggingDirection, updateDraggingDirection] = useState23(null);
+  const targetRef = useRef16(null);
+  const resizerRef = useRef16(null);
+  const tableRectRef = useRef16(null);
+  const mouseStartPosRef = useRef16(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = useState24(null);
+  const [activeCell, updateActiveCell] = useState24(null);
+  const [isMouseDown, updateIsMouseDown] = useState24(false);
+  const [draggingDirection, updateDraggingDirection] = useState24(null);
   const resetState = useCallback13(() => {
     updateActiveCell(null);
     targetRef.current = null;
@@ -16541,7 +16616,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
   const isMouseDownOnEvent = (event) => {
     return (event.buttons & 1) === 1;
   };
-  useEffect25(() => {
+  useEffect24(() => {
     const onMouseMove = (event) => {
       setTimeout(() => {
         const target = event.target;
@@ -16840,11 +16915,11 @@ import {
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect26, useState as useState24 } from "react";
+import { useEffect as useEffect25, useState as useState25 } from "react";
 var TableSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext7();
-  const [closestTableCellNode, setClosestTableCellNode] = useState24(null);
-  useEffect26(() => {
+  const [closestTableCellNode, setClosestTableCellNode] = useState25(null);
+  useEffect25(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND2,
       () => {
@@ -16866,7 +16941,7 @@ var TableSelectionPlugin = () => {
       COMMAND_PRIORITY_NORMAL2
     );
   }, [editor]);
-  useEffect26(() => {
+  useEffect25(() => {
     const onControlA = (event) => {
       if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
         if (!closestTableCellNode) {
@@ -16913,7 +16988,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback14, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect26 } from "react";
 
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
@@ -16929,7 +17004,7 @@ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
 var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 
 // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
-import { useMemo as useMemo10, useState as useState25 } from "react";
+import { useMemo as useMemo10, useState as useState26 } from "react";
 var useRichTextToolbarState = ({ config }) => {
   var _a;
   const enabledBuiltInFormats = useMemo10(() => {
@@ -16950,7 +17025,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState25([]);
+  const [activeFormats, setActiveFormats] = useState26([]);
   const visibleFormatsWithIcon = useMemo10(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -16971,7 +17046,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState25("paragraph");
+  const [activeElement, setActiveElement] = useState26("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -16986,7 +17061,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState25(false);
+  const [isLink, setIsLink] = useState26(false);
   const linkElementVisible = useMemo10(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -17214,7 +17289,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect27(() => {
+  useEffect26(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND3,
       (_payload) => {
@@ -17224,7 +17299,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect27(() => {
+  useEffect26(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -17625,12 +17700,12 @@ var RichText = ({
   placeholder
 }) => {
   const [editor] = useLexicalComposerContext9();
-  useEffect28(() => {
+  useEffect27(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect28(() => {
+  useEffect27(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
         const previousEditorState = prevEditorState.toJSON();
@@ -17647,16 +17722,16 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  useEffect28(() => {
+  useEffect27(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = useState26(null);
+  const [editorContainerRef, setEditorContainerRef] = useState27(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = useState26(null);
+  const [portalContainerRef, setPortalContainerRef] = useState27(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
@@ -18064,7 +18139,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css111 } from "@emotion/react";
-import { useCallback as useCallback16, useEffect as useEffect29, useMemo as useMemo13, useRef as useRef18, useState as useState27 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect28, useMemo as useMemo13, useRef as useRef17, useState as useState28 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css110 } from "@emotion/react";
@@ -18243,9 +18318,9 @@ var SegmentedControl = ({
   // deprecated, destructured to prevent spreading to DOM
   ...props
 }) => {
-  const wrapperRef = useRef18(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState27(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState27(false);
+  const wrapperRef = useRef17(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState28(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState28(false);
   const onOptionChange = useCallback16(
     (event) => {
       if (event.target.checked) {
@@ -18266,7 +18341,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo13(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  useEffect29(() => {
+  useEffect28(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -18396,7 +18471,7 @@ var Skeleton = ({
 );
 
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect30, useRef as useRef19 } from "react";
+import { useEffect as useEffect29, useRef as useRef18 } from "react";
 
 // src/components/Spinner/Spinner.styles.ts
 import { css as css113 } from "@emotion/react";
@@ -18836,8 +18911,8 @@ var Spinner = ({
   label: label2,
   isPaused
 }) => {
-  const ref = useRef19(null);
-  useEffect30(() => {
+  const ref = useRef18(null);
+  useEffect29(() => {
     var _a, _b, _c;
     (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
   }, [width]);
@@ -18905,7 +18980,7 @@ var Spinner = ({
 };
 
 // src/components/StackedModal/hooks/StackedModalProvider.tsx
-import { createContext as createContext6, useCallback as useCallback17, useContext as useContext6, useMemo as useMemo14, useRef as useRef20, useState as useState28 } from "react";
+import { createContext as createContext6, useCallback as useCallback17, useContext as useContext6, useMemo as useMemo14, useRef as useRef19, useState as useState29 } from "react";
 import { jsx as jsx153 } from "@emotion/react/jsx-runtime";
 var StackedModalContext = createContext6(null);
 function useStackedModal() {
@@ -18925,9 +19000,9 @@ function useStepTransition(index) {
   };
 }
 function StackedModalProvider({ children, totalSteps, initialStep }) {
-  const [currentStep, setCurrentStep] = useState28(initialStep);
-  const [direction, setDirection] = useState28("forward");
-  const previousStepRef = useRef20(initialStep);
+  const [currentStep, setCurrentStep] = useState29(initialStep);
+  const [direction, setDirection] = useState29("forward");
+  const previousStepRef = useRef19(initialStep);
   const nextStep = useCallback17(() => {
     setCurrentStep((prev) => {
       if (prev >= totalSteps - 1) {