@uniformdev/design-system 20.49.4-alpha.102 → 20.49.4-alpha.124

package/dist/esm/index.js

@@ -10631,12 +10631,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 useEffect14, useMemo as useMemo6, useRef as useRef9, useState as useState14 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo6, useRef as useRef10, useState as useState15 } 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";
 
 // src/components/Swatch/Swatch.styles.ts
 import { css as css74 } from "@emotion/react";
@@ -11038,12 +11039,50 @@ var QuickFilter = ({
   resultsComponent,
   hasNoResultsMessage = "",
   searchPlaceholderText = "Search...",
-  maxContainerSize = "4rem"
+  maxContainerSize = "4rem",
+  onOpen,
+  onClose,
+  menuPlacement = "bottom-end",
+  menuGetAnchorRect,
+  menuUpdatePosition
 }) => {
   const hasSelectedItems = selectedItems && (selectedItems == null ? void 0 : selectedItems.length) > 0;
+  const containerRef = useRef9(null);
+  const hasPositionedRef = useRef9(false);
+  const [open, setOpen] = useState14(false);
+  useEffect14(() => {
+    if (open) {
+      onOpen == null ? void 0 : onOpen();
+    } else {
+      onClose == null ? void 0 : onClose();
+    }
+  }, [open, onOpen, onClose]);
+  const defaultGetAnchorRect = () => {
+    var _a;
+    const rect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!rect) {
+      return null;
+    }
+    return {
+      x: rect.right,
+      y: rect.top - rect.height,
+      width: 0,
+      height: rect.height
+    };
+  };
+  const defaultUpdatePosition = ({ updatePosition }) => {
+    if (!hasPositionedRef.current) {
+      hasPositionedRef.current = true;
+      updatePosition();
+    }
+  };
+  const resolvedGetAnchorRect = menuGetAnchorRect === null ? void 0 : menuGetAnchorRect != null ? menuGetAnchorRect : defaultGetAnchorRect;
+  const resolvedUpdatePosition = menuUpdatePosition === null ? void 0 : menuUpdatePosition != null ? menuUpdatePosition : defaultUpdatePosition;
+  const useDefaultUpdatePosition = menuUpdatePosition === void 0;
   return /* @__PURE__ */ jsxs64(
     HorizontalRhythm,
     {
+      ref: containerRef,
       gap: "sm",
       align: "center",
       css: [
@@ -11063,6 +11102,16 @@ var QuickFilter = ({
             searchPlaceholder: searchPlaceholderText,
             disableSearch: totalResults < maxCount,
             disabled: disabled2,
+            placement: menuPlacement,
+            getAnchorRect: resolvedGetAnchorRect,
+            updatePosition: resolvedUpdatePosition,
+            onClose: () => {
+              if (useDefaultUpdatePosition) {
+                hasPositionedRef.current = false;
+              }
+              setOpen(false);
+            },
+            open,
             menuTrigger: /* @__PURE__ */ jsxs64(
               "div",
               {
@@ -11090,7 +11139,7 @@ var QuickFilter = ({
                       }
                     ) : null
                   ] }),
-                  /* @__PURE__ */ jsx98("div", { css: QuickFilterFullMenu(maxContainerSize), children: selectedItems && selectedItems.length > 0 ? /* @__PURE__ */ jsxs64(
+                  /* @__PURE__ */ jsx98("div", { css: QuickFilterFullMenu(maxContainerSize), children: selectedItems && selectedItems.length > 0 ? addButtonText !== null ? /* @__PURE__ */ jsxs64(
                     Button,
                     {
                       type: "button",
@@ -11101,12 +11150,15 @@ var QuickFilter = ({
                       buttonType: "tertiary",
                       variant: "soft",
                       css: QuickFilterTruncatedButton,
+                      onClick: () => {
+                        setOpen(true);
+                      },
                       children: [
                         /* @__PURE__ */ jsx98("span", { children: addButtonText }),
                         /* @__PURE__ */ jsx98(Icon, { icon: CgMathPlus2, iconColor: "currentColor", size: "1rem" })
                       ]
                     }
-                  ) : /* @__PURE__ */ jsxs64(
+                  ) : null : /* @__PURE__ */ jsxs64(
                     Button,
                     {
                       type: "button",
@@ -11117,6 +11169,9 @@ var QuickFilter = ({
                       buttonType: "tertiary",
                       variant: "soft",
                       css: QuickFilterTruncatedButton,
+                      onClick: () => {
+                        setOpen(true);
+                      },
                       children: [
                         iconLeft ? /* @__PURE__ */ jsx98(Icon, { icon: iconLeft, iconColor: "currentColor", size: "1rem" }) : null,
                         /* @__PURE__ */ jsx98("span", { children: buttonText })
@@ -11155,6 +11210,7 @@ var QuickFilter = ({
 import { Fragment as Fragment10, jsx as jsx99, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var LabelsQuickFilter = ({
   buttonText,
+  addButtonText,
   items,
   selectedIds,
   onSelect,
@@ -11164,9 +11220,15 @@ var LabelsQuickFilter = ({
   totalResults,
   onCreateLabel,
   withoutPortal = false,
-  maxContainerSize = "4rem"
+  maxContainerSize = "4rem",
+  onOpen,
+  onClose,
+  menuPlacement,
+  menuGetAnchorRect,
+  menuUpdatePosition,
+  maxCount = 0
 }) => {
-  const [searchTerm, setSearchTerm] = useState14("");
+  const [searchTerm, setSearchTerm] = useState15("");
   const selectedIdsSet = useMemo6(
     () => selectedIds instanceof Set ? selectedIds : new Set(selectedIds),
     [selectedIds]
@@ -11312,7 +11374,7 @@ var LabelsQuickFilter = ({
       isCreateSelected: isCreateSelected2
     };
   }, [filteredItems, searchTerm, selectedIdsSet]);
-  const createLabelStateRef = useRef9({ searchTerm, canCreateLabel, isCreateDisabled, onCreateLabel });
+  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;
@@ -11320,7 +11382,7 @@ var LabelsQuickFilter = ({
       onCreateLabel2(searchTerm2);
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!onCreateLabel) {
       return;
     }
@@ -11335,12 +11397,19 @@ var LabelsQuickFilter = ({
       testId,
       selectedItems,
       buttonText,
+      addButtonText,
       onSearchTermChanged: setSearchTerm,
       hasNoResultsMessage: filteredItems.length === 0 ? "No matching results" : "",
       totalResults: computedTotalResults,
       onItemRemoved: onDeselect,
       disabled: disabled2,
       maxContainerSize,
+      onOpen,
+      onClose,
+      menuPlacement,
+      menuGetAnchorRect,
+      menuUpdatePosition,
+      maxCount,
       children: [
         filteredItems.map((item) => {
           if (!item.isGroup && item.parent) {
@@ -11384,7 +11453,7 @@ import {
   usePopoverContext,
   usePopoverStore as usePopoverStore2
 } from "@ariakit/react";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 
 // src/components/Popover/PopoverBody.tsx
 import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
@@ -11428,7 +11497,7 @@ var Popover3 = ({
   ...otherProps
 }) => {
   const popover2 = usePopoverStore2({ placement });
-  useEffect15(() => {
+  useEffect16(() => {
     onInit == null ? void 0 : onInit({ store: popover2 });
   }, [popover2]);
   return /* @__PURE__ */ jsxs66(PopoverProvider2, { store: popover2, children: [
@@ -11819,7 +11888,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, { useEffect as useEffect16, useRef as useRef10 } from "react";
+import React16, { useEffect as useEffect17, useRef as useRef11 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -11923,8 +11992,8 @@ var Modal = React16.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = useRef10(false);
-    const dialogRef = useRef10(null);
+    const mouseDownInsideModal = useRef11(false);
+    const dialogRef = useRef11(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -11936,7 +12005,7 @@ var Modal = React16.forwardRef(
       },
       shortcut: "escape"
     });
-    useEffect16(() => {
+    useEffect17(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -12372,7 +12441,7 @@ var ObjectGridItemCoverButton = ({
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect17, useRef as useRef11, useState as useState15 } from "react";
+import { useEffect as useEffect18, useRef as useRef12, useState as useState16 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css87 } from "@emotion/react";
@@ -12398,12 +12467,12 @@ var ObjectGridItemHeading2 = ({
   tooltip,
   ...props
 }) => {
-  const [hasTruncation, setHasTruncation] = useState15(false);
-  const headingRef = useRef11(null);
+  const [hasTruncation, setHasTruncation] = useState16(false);
+  const headingRef = useRef12(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
-  useEffect17(() => {
+  useEffect18(() => {
     const currentHeading = headingRef.current;
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -13098,7 +13167,7 @@ var ParameterGroup = forwardRef21(
 import { forwardRef as forwardRef23, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -13141,7 +13210,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] = useState16(false);
+  const [showModal, setShowModal] = useState17(false);
   return imageSrc ? /* @__PURE__ */ jsxs85("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx126(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx126(
@@ -13173,7 +13242,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css99 } from "@emotion/react";
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 import { css as css97 } from "@emotion/react";
@@ -13621,7 +13690,7 @@ var ParameterShell = ({
   menuWithoutPortal,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState17(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState18(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs86("div", { css: inputContainer2, ...props, id, children: [
@@ -13758,7 +13827,7 @@ var ParameterInputInner = forwardRef24(({ enableMouseWheel = false, ...props },
 });
 
 // src/components/ParameterInputs/ParameterLabels.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo7, useRef as useRef13 } from "react";
 import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
 var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
@@ -13820,6 +13889,8 @@ var ParameterLabelsInner = (props) => {
   var _a;
   const { label: label2 } = useParameterShell();
   const { onChange } = props;
+  const containerRef = useRef13(null);
+  const hasPositionedRef = useRef13(false);
   const selectedValues = useMemo7(
     () => {
       var _a2, _b;
@@ -13865,6 +13936,7 @@ var ParameterLabelsInner = (props) => {
   return /* @__PURE__ */ jsx132(
     "div",
     {
+      ref: containerRef,
       style: {
         // set the container size to the width of the parent
         // this prevents the quick filter from triggering the responsive styles
@@ -13875,6 +13947,7 @@ var ParameterLabelsInner = (props) => {
         {
           testId: "parameter-labels-quick-filter",
           buttonText: (_a = props.buttonText) != null ? _a : typeof label2 === "string" ? label2 : "Add labels",
+          addButtonText: props.addButtonText,
           items,
           selectedIds,
           onSelect: handleSelect,
@@ -13882,7 +13955,34 @@ var ParameterLabelsInner = (props) => {
           disabled: props.isDisabled,
           onCreateLabel: props == null ? void 0 : props.onCreateLabel,
           totalResults: items.filter((item) => !item.isGroup).length,
-          maxContainerSize: "0rem"
+          maxContainerSize: "0rem",
+          onOpen: props.onOpen,
+          onClose: () => {
+            var _a2;
+            hasPositionedRef.current = false;
+            (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
+          },
+          menuPlacement: "bottom-start",
+          menuGetAnchorRect: () => {
+            var _a2;
+            const rect = (_a2 = containerRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+            if (!rect) {
+              return null;
+            }
+            return {
+              x: rect.left - (rect.width + 24),
+              y: rect.top - rect.height,
+              width: 0,
+              height: rect.height
+            };
+          },
+          menuUpdatePosition: ({ updatePosition }) => {
+            if (!hasPositionedRef.current) {
+              hasPositionedRef.current = true;
+              updatePosition();
+            }
+          },
+          maxCount: props.maxCount
         }
       )
     }
@@ -14105,7 +14205,7 @@ import { forwardRef as forwardRef27 } from "react";
 import { forwardRef as forwardRef26, useCallback as useCallback9, useMemo as useMemo8 } from "react";
 
 // src/components/Slider/SliderLabels.tsx
-import { useEffect as useEffect18, useRef as useRef12, useState as useState18 } from "react";
+import { useEffect as useEffect19, useRef as useRef14, useState as useState19 } from "react";
 
 // src/components/Slider/styles/Slider.styles.ts
 import { css as css100 } from "@emotion/react";
@@ -14530,9 +14630,9 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
   }));
 }
 function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
-  const containerRef = useRef12(null);
-  const [measuredWidth, setMeasuredWidth] = useState18(containerWidth);
-  useEffect18(() => {
+  const containerRef = useRef14(null);
+  const [measuredWidth, setMeasuredWidth] = useState19(containerWidth);
+  useEffect19(() => {
     if (containerRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -14910,7 +15010,7 @@ var defaultParameterConfiguration = {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect27, useState as useState24 } from "react";
+import { useEffect as useEffect28, useState as useState25 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -14931,10 +15031,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect19(() => {
+  useEffect20(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -15193,10 +15293,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 useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 var ImprovedAssetSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext2();
-  useEffect20(() => {
+  useEffect21(() => {
     editor.getRootElement();
     const onRootClick = (event) => {
       if (event.target !== editor.getRootElement()) {
@@ -15267,7 +15367,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect21, useRef as useRef13, useState as useState19 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect22, useRef as useRef15, useState as useState20 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -15640,17 +15740,17 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = useLexicalComposerContext3();
-  const [linkPopoverState, setLinkPopoverState] = useState19();
-  const linkPopoverElRef = useRef13(null);
-  const [isEditorFocused, setIsEditorFocused] = useState19(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState19(false);
-  useEffect21(() => {
+  const [linkPopoverState, setLinkPopoverState] = useState20();
+  const linkPopoverElRef = useRef15(null);
+  const [isEditorFocused, setIsEditorFocused] = useState20(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState20(false);
+  useEffect22(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -15788,7 +15888,7 @@ function LinkNodePlugin({
       }
     });
   }, [editor, positioningAnchorEl]);
-  useEffect21(() => {
+  useEffect22(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -15892,7 +15992,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect22, useRef as useRef14 } from "react";
+import { useEffect as useEffect23, useRef as useRef16 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -15947,8 +16047,8 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef14(false);
-  useEffect22(() => {
+  const isInListItemNode = useRef16(false);
+  useEffect23(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       () => {
@@ -15965,7 +16065,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_NORMAL
     );
   }, [editor]);
-  useEffect22(() => {
+  useEffect23(() => {
     return mergeRegister3(
       editor.registerCommand(
         INDENT_CONTENT_COMMAND,
@@ -16014,7 +16114,7 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3, $setSelection } from "lexical";
-import { forwardRef as forwardRef28, useCallback as useCallback11, useEffect as useEffect23, useLayoutEffect, useState as useState20 } from "react";
+import { forwardRef as forwardRef28, useCallback as useCallback11, useEffect as useEffect24, useLayoutEffect, useState as useState21 } from "react";
 import { jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
@@ -16029,7 +16129,7 @@ var tableActionMenuTrigger = css103`
 `;
 var TableActionMenuTrigger = forwardRef28((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = useState20({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState21({ x: 0, y: 0 });
   useLayoutEffect(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16063,16 +16163,16 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, updateTableCellNode] = useState20(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState20({
+  const [tableCellNode, updateTableCellNode] = useState21(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState21({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = useState20(0);
+  const [menuTriggerKey, setMenuTriggerKey] = useState21(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
-  useEffect23(() => {
+  useEffect24(() => {
     return editor.registerMutationListener(
       TableCellNode,
       (nodeMutations) => {
@@ -16086,7 +16186,7 @@ function TableActionMenu({
       { skipInitialization: true }
     );
   }, [editor, tableCellNode]);
-  useEffect23(() => {
+  useEffect24(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection3();
       if ($isTableSelection(selection)) {
@@ -16261,10 +16361,10 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, setTableMenuCellNode] = useState20(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState20(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState20(null);
-  useEffect23(() => {
+  const [tableCellNode, setTableMenuCellNode] = useState21(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState21(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState21(null);
+  useEffect24(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
     menuPortalEl.appendChild(newPortalEl);
@@ -16308,7 +16408,7 @@ function TableCellActionMenuContainer({
       setTableMenuCellNodeElem(null);
     }
   }, [editor, setTableMenuCellNodeElem]);
-  useEffect23(() => {
+  useEffect24(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         $moveMenu();
@@ -16347,7 +16447,7 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef15, useState as useState21 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect25, useMemo as useMemo9, useRef as useRef17, useState as useState22 } 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;
@@ -16374,14 +16474,14 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef15(null);
-  const resizerRef = useRef15(null);
-  const tableRectRef = useRef15(null);
-  const mouseStartPosRef = useRef15(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = useState21(null);
-  const [activeCell, updateActiveCell] = useState21(null);
-  const [isMouseDown, updateIsMouseDown] = useState21(false);
-  const [draggingDirection, updateDraggingDirection] = useState21(null);
+  const targetRef = useRef17(null);
+  const resizerRef = useRef17(null);
+  const tableRectRef = useRef17(null);
+  const mouseStartPosRef = useRef17(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = useState22(null);
+  const [activeCell, updateActiveCell] = useState22(null);
+  const [isMouseDown, updateIsMouseDown] = useState22(false);
+  const [draggingDirection, updateDraggingDirection] = useState22(null);
   const resetState = useCallback12(() => {
     updateActiveCell(null);
     targetRef.current = null;
@@ -16392,7 +16492,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
   const isMouseDownOnEvent = (event) => {
     return (event.buttons & 1) === 1;
   };
-  useEffect24(() => {
+  useEffect25(() => {
     const onMouseMove = (event) => {
       setTimeout(() => {
         const target = event.target;
@@ -16691,11 +16791,11 @@ import {
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect25, useState as useState22 } from "react";
+import { useEffect as useEffect26, useState as useState23 } from "react";
 var TableSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext7();
-  const [closestTableCellNode, setClosestTableCellNode] = useState22(null);
-  useEffect25(() => {
+  const [closestTableCellNode, setClosestTableCellNode] = useState23(null);
+  useEffect26(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND2,
       () => {
@@ -16717,7 +16817,7 @@ var TableSelectionPlugin = () => {
       COMMAND_PRIORITY_NORMAL2
     );
   }, [editor]);
-  useEffect25(() => {
+  useEffect26(() => {
     const onControlA = (event) => {
       if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
         if (!closestTableCellNode) {
@@ -16764,7 +16864,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback13, useEffect as useEffect26 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect27 } from "react";
 
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
@@ -16780,7 +16880,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 useState23 } from "react";
+import { useMemo as useMemo10, useState as useState24 } from "react";
 var useRichTextToolbarState = ({ config }) => {
   var _a;
   const enabledBuiltInFormats = useMemo10(() => {
@@ -16801,7 +16901,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState23([]);
+  const [activeFormats, setActiveFormats] = useState24([]);
   const visibleFormatsWithIcon = useMemo10(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -16822,7 +16922,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState23("paragraph");
+  const [activeElement, setActiveElement] = useState24("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -16837,7 +16937,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState23(false);
+  const [isLink, setIsLink] = useState24(false);
   const linkElementVisible = useMemo10(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -17065,7 +17165,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect26(() => {
+  useEffect27(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND3,
       (_payload) => {
@@ -17075,7 +17175,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect26(() => {
+  useEffect27(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -17476,12 +17576,12 @@ var RichText = ({
   placeholder
 }) => {
   const [editor] = useLexicalComposerContext9();
-  useEffect27(() => {
+  useEffect28(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect27(() => {
+  useEffect28(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
         const previousEditorState = prevEditorState.toJSON();
@@ -17498,16 +17598,16 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  useEffect27(() => {
+  useEffect28(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = useState24(null);
+  const [editorContainerRef, setEditorContainerRef] = useState25(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = useState24(null);
+  const [portalContainerRef, setPortalContainerRef] = useState25(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
@@ -17915,7 +18015,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css111 } from "@emotion/react";
-import { useCallback as useCallback15, useEffect as useEffect28, useMemo as useMemo13, useRef as useRef16, useState as useState25 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect29, useMemo as useMemo13, useRef as useRef18, useState as useState26 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css110 } from "@emotion/react";
@@ -18094,9 +18194,9 @@ var SegmentedControl = ({
   // deprecated, destructured to prevent spreading to DOM
   ...props
 }) => {
-  const wrapperRef = useRef16(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState25(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState25(false);
+  const wrapperRef = useRef18(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState26(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState26(false);
   const onOptionChange = useCallback15(
     (event) => {
       if (event.target.checked) {
@@ -18117,7 +18217,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo13(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  useEffect28(() => {
+  useEffect29(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -18247,7 +18347,7 @@ var Skeleton = ({
 );
 
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect29, useRef as useRef17 } from "react";
+import { useEffect as useEffect30, useRef as useRef19 } from "react";
 
 // src/components/Spinner/Spinner.styles.ts
 import { css as css113 } from "@emotion/react";
@@ -18687,8 +18787,8 @@ var Spinner = ({
   label: label2,
   isPaused
 }) => {
-  const ref = useRef17(null);
-  useEffect29(() => {
+  const ref = useRef19(null);
+  useEffect30(() => {
     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]);
@@ -18756,7 +18856,7 @@ var Spinner = ({
 };
 
 // src/components/StackedModal/hooks/StackedModalProvider.tsx
-import { createContext as createContext6, useCallback as useCallback16, useContext as useContext6, useMemo as useMemo14, useRef as useRef18, useState as useState26 } from "react";
+import { createContext as createContext6, useCallback as useCallback16, useContext as useContext6, useMemo as useMemo14, useRef as useRef20, useState as useState27 } from "react";
 import { jsx as jsx153 } from "@emotion/react/jsx-runtime";
 var StackedModalContext = createContext6(null);
 function useStackedModal() {
@@ -18776,9 +18876,9 @@ function useStepTransition(index) {
   };
 }
 function StackedModalProvider({ children, totalSteps, initialStep }) {
-  const [currentStep, setCurrentStep] = useState26(initialStep);
-  const [direction, setDirection] = useState26("forward");
-  const previousStepRef = useRef18(initialStep);
+  const [currentStep, setCurrentStep] = useState27(initialStep);
+  const [direction, setDirection] = useState27("forward");
+  const previousStepRef = useRef20(initialStep);
   const nextStep = useCallback16(() => {
     setCurrentStep((prev) => {
       if (prev >= totalSteps - 1) {