@uniformdev/design-system 19.155.0 → 19.157.0

package/dist/index.js

@@ -17220,8 +17220,10 @@ var details = import_react76.css`
   }
 `;
 var detailsContent = import_react76.css`
+  position: relative;
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
+  z-index: 1;
 `;
 var detailsContentIndented = import_react76.css`
   margin-left: calc(1.25rem / 2);
@@ -19334,11 +19336,12 @@ init_emotion_jsx_shim();
 
 // src/components/MediaCard/MediaCard.tsx
 init_emotion_jsx_shim();
-var import_react108 = require("react");
+var import_react109 = require("react");
 
 // src/components/Popover/Popover.tsx
 init_emotion_jsx_shim();
 var import_react106 = require("@ariakit/react");
+var import_react107 = require("react");
 var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
 var Popover3 = ({
   iconColor = "action",
@@ -19351,9 +19354,14 @@ var Popover3 = ({
   trigger: trigger2,
   children,
   baseId,
+  onInit,
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react106.PopoverProvider, { placement, children: [
+  const popover2 = (0, import_react106.usePopoverStore)({ placement });
+  (0, import_react107.useEffect)(() => {
+    onInit == null ? void 0 : onInit({ store: popover2 });
+  }, [popover2]);
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react106.PopoverProvider, { store: popover2, children: [
     /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react106.PopoverDisclosure,
       {
@@ -19372,8 +19380,8 @@ var Popover3 = ({
 
 // src/components/MediaCard/MediaCard.styles.ts
 init_emotion_jsx_shim();
-var import_react107 = require("@emotion/react");
-var cardBase = import_react107.css`
+var import_react108 = require("@emotion/react");
+var cardBase = import_react108.css`
   --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
@@ -19397,7 +19405,7 @@ var cardBase = import_react107.css`
     cursor: default;
   }
 `;
-var coverWrapper = import_react107.css`
+var coverWrapper = import_react108.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -19410,10 +19418,10 @@ var coverWrapper = import_react107.css`
   outline: none;
   border: 0;
 `;
-var contentWrapper = import_react107.css`
+var contentWrapper = import_react108.css`
   padding: var(--spacing-sm);
 `;
-var title = import_react107.css`
+var title = import_react108.css`
   font-size: var(--fs-sm);
   color: var(--mediacard-title-color);
   white-space: nowrap;
@@ -19428,7 +19436,7 @@ var title = import_react107.css`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var subtitle = import_react107.css`
+var subtitle = import_react108.css`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
@@ -19438,13 +19446,13 @@ var subtitle = import_react107.css`
   border: 0;
   background-color: transparent;
 `;
-var sideSection = import_react107.css`
+var sideSection = import_react108.css`
   cursor: default;
 `;
-var menuSection = import_react107.css`
+var menuSection = import_react108.css`
   cursor: default;
 `;
-var menuButton = import_react107.css`
+var menuButton = import_react108.css`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -19468,7 +19476,7 @@ var MediaCard = ({
   buttonType,
   ...cardProps
 }) => {
-  const onStopPropogation = (0, import_react108.useCallback)((e) => {
+  const onStopPropogation = (0, import_react109.useCallback)((e) => {
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
@@ -19528,12 +19536,12 @@ var MediaCard = ({
 // src/components/Modal/Modal.tsx
 init_emotion_jsx_shim();
 var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
-var import_react110 = __toESM(require("react"));
+var import_react111 = __toESM(require("react"));
 
 // src/components/Modal/Modal.styles.ts
 init_emotion_jsx_shim();
-var import_react109 = require("@emotion/react");
-var modalStyles = import_react109.css`
+var import_react110 = require("@emotion/react");
+var modalStyles = import_react110.css`
   border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -19547,16 +19555,16 @@ var modalStyles = import_react109.css`
     opacity: 0.4;
   }
 `;
-var modalSizeSmall = import_react109.css`
+var modalSizeSmall = import_react110.css`
   width: clamp(280px, 100vw, 400px);
 `;
-var modalSizeMedium = import_react109.css`
+var modalSizeMedium = import_react110.css`
   width: clamp(280px, 100vw, 600px);
 `;
-var modalSizeLarge = import_react109.css`
+var modalSizeLarge = import_react110.css`
   width: clamp(280px, 100vw, 800px);
 `;
-var modalInnerStyles = import_react109.css`
+var modalInnerStyles = import_react110.css`
   position: relative;
   width: 100%;
   display: flex;
@@ -19569,7 +19577,7 @@ var modalInnerStyles = import_react109.css`
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
 `;
-var modalHeaderStyles = import_react109.css`
+var modalHeaderStyles = import_react110.css`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
@@ -19577,10 +19585,10 @@ var modalHeaderStyles = import_react109.css`
   font-family: var(--ff-base);
   line-height: 1.2;
 `;
-var modalHeaderHeaderStyles = import_react109.css`
+var modalHeaderHeaderStyles = import_react110.css`
   max-width: calc(100% - 3rem);
 `;
-var modalCloseButtonStyles = import_react109.css`
+var modalCloseButtonStyles = import_react110.css`
   background: transparent;
   border: none;
   color: var(--gray-300);
@@ -19595,7 +19603,7 @@ var modalCloseButtonStyles = import_react109.css`
     color: var(--gray-400);
   }
 `;
-var modalContentStyles = import_react109.css`
+var modalContentStyles = import_react110.css`
   position: relative;
   flex: 1;
   overflow: auto;
@@ -19604,10 +19612,10 @@ var modalContentStyles = import_react109.css`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = import_react109.css`
+var modalDialogWrapper = import_react110.css`
   padding: 0 var(--spacing-lg) var(--spacing-md);
 `;
-var modalDialogInnerStyles = import_react109.css`
+var modalDialogInnerStyles = import_react110.css`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
   > div {
     gap: 0;
@@ -19618,7 +19626,7 @@ var modalDialogInnerStyles = import_react109.css`
 var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = import_react110.default.forwardRef(
+var Modal = import_react111.default.forwardRef(
   ({
     header: header2,
     children,
@@ -19631,7 +19639,7 @@ var Modal = import_react110.default.forwardRef(
     withoutContentBackground = false,
     ...modalProps
   }, ref) => {
-    const dialogRef = (0, import_react110.useRef)(null);
+    const dialogRef = (0, import_react111.useRef)(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -19643,7 +19651,7 @@ var Modal = import_react110.default.forwardRef(
       },
       shortcut: "escape"
     });
-    (0, import_react110.useEffect)(() => {
+    (0, import_react111.useEffect)(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -19723,9 +19731,9 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
 init_emotion_jsx_shim();
-var import_react111 = require("react");
+var import_react112 = require("react");
 var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
-var ModalDialog = (0, import_react111.forwardRef)(
+var ModalDialog = (0, import_react112.forwardRef)(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       Modal,
@@ -19824,8 +19832,8 @@ function Pagination({
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
 init_emotion_jsx_shim();
-var import_react112 = require("react");
-var ParameterShellContext = (0, import_react112.createContext)({
+var import_react113 = require("react");
+var ParameterShellContext = (0, import_react113.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -19834,7 +19842,7 @@ var ParameterShellContext = (0, import_react112.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react112.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react113.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -19849,8 +19857,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react113 = require("@emotion/react");
-var inputIconBtn = import_react113.css`
+var import_react114 = require("@emotion/react");
+var inputIconBtn = import_react114.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -19918,8 +19926,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 init_emotion_jsx_shim();
-var import_react114 = require("@emotion/react");
-var inputContainer2 = import_react114.css`
+var import_react115 = require("@emotion/react");
+var inputContainer2 = import_react115.css`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -19932,14 +19940,14 @@ var inputContainer2 = import_react114.css`
     }
   }
 `;
-var labelText2 = import_react114.css`
+var labelText2 = import_react115.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input3 = import_react114.css`
+var input3 = import_react115.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -19987,18 +19995,18 @@ var input3 = import_react114.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react114.css`
+var selectInput = import_react115.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = import_react114.css`
+var inputWrapper = import_react115.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react114.css`
+var inputIcon2 = import_react115.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -20014,7 +20022,7 @@ var inputIcon2 = import_react114.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react114.css`
+var inputToggleLabel2 = import_react115.css`
   --inline-label-color: var(--typography-base);
   align-items: center;
   cursor: pointer;
@@ -20029,7 +20037,7 @@ var inputToggleLabel2 = import_react114.css`
     --inline-label-color: var(--gray-400);
   }
 `;
-var toggleInput2 = import_react114.css`
+var toggleInput2 = import_react115.css`
   appearance: none;
   border: 1px solid var(--gray-200);
   background: var(--white);
@@ -20082,7 +20090,7 @@ var toggleInput2 = import_react114.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react114.css`
+var inlineLabel2 = import_react115.css`
   color: var(--inline-label-color);
   padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
@@ -20099,7 +20107,7 @@ var inlineLabel2 = import_react114.css`
     }
   }
 `;
-var inputMenu = import_react114.css`
+var inputMenu = import_react115.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -20107,10 +20115,10 @@ var inputMenu = import_react114.css`
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
 `;
-var inputActionItems = import_react114.css`
+var inputActionItems = import_react115.css`
   display: flex;
 `;
-var inputMenuHover = import_react114.css`
+var inputMenuHover = import_react115.css`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -20120,11 +20128,11 @@ var inputMenuHover = import_react114.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react114.css`
+var textarea2 = import_react115.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = import_react114.css`
+var dataConnectButton = import_react115.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -20159,7 +20167,7 @@ var dataConnectButton = import_react114.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react114.css`
+var linkParameterBtn = import_react115.css`
   border-radius: var(--rounded-base);
   background: transparent;
   border: none;
@@ -20168,7 +20176,7 @@ var linkParameterBtn = import_react114.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react114.css`
+var linkParameterControls = import_react115.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -20177,7 +20185,7 @@ var linkParameterControls = import_react114.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react114.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react115.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -20190,7 +20198,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react114.css`
     }
   }
 `;
-var linkParameterIcon = import_react114.css`
+var linkParameterIcon = import_react115.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -20243,20 +20251,20 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react115 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react115.css`
+var import_react116 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react116.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react115.css`
+var ParameterDrawerHeaderTitleGroup = import_react116.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react115.css`
+var ParameterDrawerHeaderTitle = import_react116.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -20277,12 +20285,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 init_emotion_jsx_shim();
-var import_react117 = require("react");
+var import_react118 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react116 = require("@emotion/react");
-var fieldsetStyles = import_react116.css`
+var import_react117 = require("@emotion/react");
+var fieldsetStyles = import_react117.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -20293,7 +20301,7 @@ var fieldsetStyles = import_react116.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react116.css`
+var fieldsetLegend2 = import_react117.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -20302,7 +20310,7 @@ var fieldsetLegend2 = import_react116.css`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react117.forwardRef)(
+var ParameterGroup = (0, import_react118.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("legend", { css: fieldsetLegend2, children: legend }),
@@ -20313,24 +20321,24 @@ var ParameterGroup = (0, import_react117.forwardRef)(
 
 // src/components/ParameterInputs/ParameterImage.tsx
 init_emotion_jsx_shim();
-var import_react124 = require("react");
+var import_react125 = require("react");
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 init_emotion_jsx_shim();
-var import_react119 = require("react");
+var import_react120 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
 init_emotion_jsx_shim();
-var import_react118 = require("@emotion/react");
-var previewWrapper = import_react118.css`
+var import_react119 = require("@emotion/react");
+var previewWrapper = import_react119.css`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = import_react118.css`
+var previewLink = import_react119.css`
   display: block;
   width: 100%;
 
@@ -20338,7 +20346,7 @@ var previewLink = import_react118.css`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = import_react118.css`
+var previewModalWrapper = import_react119.css`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -20347,7 +20355,7 @@ var previewModalWrapper = import_react118.css`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = import_react118.css`
+var previewModalImage = import_react119.css`
   display: flex;
   height: 100%;
   width: 100%;
@@ -20361,7 +20369,7 @@ var previewModalImage = import_react118.css`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = (0, import_react119.useState)(false);
+  const [showModal, setShowModal] = (0, import_react120.useState)(false);
   return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { css: previewWrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
@@ -20393,8 +20401,8 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 init_emotion_jsx_shim();
-var import_react122 = require("@emotion/react");
-var import_react123 = require("react");
+var import_react123 = require("@emotion/react");
+var import_react124 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 init_emotion_jsx_shim();
@@ -20405,9 +20413,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 init_emotion_jsx_shim();
-var import_react120 = require("react");
+var import_react121 = require("react");
 var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react120.forwardRef)(
+var ParameterMenuButton = (0, import_react121.forwardRef)(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       Menu,
@@ -20432,14 +20440,14 @@ var ParameterMenuButton = (0, import_react120.forwardRef)(
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
 init_emotion_jsx_shim();
-var import_react121 = require("@emotion/react");
-var emptyParameterShell = import_react121.css`
+var import_react122 = require("@emotion/react");
+var emptyParameterShell = import_react122.css`
   border-radius: var(--rounded-sm);
   flex-grow: 1;
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = import_react121.css`
+var emptyParameterShellText = import_react122.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -20447,7 +20455,7 @@ var emptyParameterShellText = import_react121.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react121.css`
+var overrideMarker = import_react122.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -20518,7 +20526,7 @@ var ParameterShell = ({
   isParameterGroup = false,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react123.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react124.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: inputContainer2, ...props, id, children: [
@@ -20539,7 +20547,7 @@ var ParameterShell = ({
           css: [
             inputMenu,
             inputActionItems,
-            menuItems ? import_react122.css`
+            menuItems ? import_react123.css`
                     right: var(--spacing-md);
                   ` : void 0
           ],
@@ -20584,7 +20592,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime1
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react124.forwardRef)(
+var ParameterImage = (0, import_react125.forwardRef)(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -20593,10 +20601,10 @@ var ParameterImage = (0, import_react124.forwardRef)(
     ] });
   }
 );
-var ParameterImageInner = (0, import_react124.forwardRef)((props, ref) => {
+var ParameterImageInner = (0, import_react125.forwardRef)((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
-  const deferredValue = (0, import_react124.useDeferredValue)(value);
+  const deferredValue = (0, import_react125.useDeferredValue)(value);
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       "input",
@@ -20616,13 +20624,13 @@ var ParameterImageInner = (0, import_react124.forwardRef)((props, ref) => {
 
 // src/components/ParameterInputs/ParameterInput.tsx
 init_emotion_jsx_shim();
-var import_react125 = require("react");
+var import_react126 = require("react");
 var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react125.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react126.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react125.forwardRef)(
+var ParameterInputInner = (0, import_react126.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
@@ -20642,9 +20650,9 @@ var ParameterInputInner = (0, import_react125.forwardRef)(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
-var import_react126 = require("react");
+var import_react127 = require("react");
 var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react126.forwardRef)(
+var ParameterLink = (0, import_react127.forwardRef)(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
@@ -20667,7 +20675,7 @@ var ParameterLink = (0, import_react126.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react126.forwardRef)(
+var ParameterLinkInner = (0, import_react127.forwardRef)(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -20726,6 +20734,8 @@ var ParameterMultiSelectInner = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     InputComboBox,
     {
+      menuPortalTarget: document.body,
+      menuPlacement: "auto",
       ...props,
       isMulti: true,
       isClearable: (_a = props.isClearable) != null ? _a : false,
@@ -20733,6 +20743,10 @@ var ParameterMultiSelectInner = (props) => {
       "aria-label": label,
       classNamePrefix: "parameter-multi-select-combobox",
       styles: {
+        menuPortal: (base) => ({
+          ...base,
+          zIndex: "var(--z-tooltip)"
+        }),
         valueContainer: (base) => ({
           ...base,
           padding: "0 var(--spacing-sm)",
@@ -20846,7 +20860,7 @@ var ParameterNameAndPublicIdInput = ({
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 init_emotion_jsx_shim();
-var import_react133 = require("@emotion/react");
+var import_react134 = require("@emotion/react");
 var import_list3 = require("@lexical/list");
 var import_markdown = require("@lexical/markdown");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -20953,7 +20967,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_fast_equals2 = require("fast-equals");
 var import_lexical6 = require("lexical");
-var import_react134 = require("react");
+var import_react135 = require("react");
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 init_emotion_jsx_shim();
@@ -20976,10 +20990,10 @@ init_emotion_jsx_shim();
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_utils2 = require("@lexical/utils");
 var import_lexical = require("lexical");
-var import_react127 = require("react");
+var import_react128 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  (0, import_react127.useEffect)(() => {
+  (0, import_react128.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -21174,13 +21188,13 @@ var codeElement = import_css2.css`
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 init_emotion_jsx_shim();
-var import_react128 = require("@emotion/react");
+var import_react129 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
 var import_utils3 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical3 = require("lexical");
-var import_react129 = require("react");
+var import_react130 = require("react");
 
 // src/components/ParameterInputs/rich-text/utils.ts
 init_emotion_jsx_shim();
@@ -21506,16 +21520,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = import_react128.css`
+var linkPopover = import_react129.css`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = import_react128.css`
+var linkPopoverContainer = import_react129.css`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react128.css`
+var linkPopoverAnchor = import_react129.css`
   ${link}
   ${linkColorDefault}
 `;
@@ -21524,17 +21538,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react129.useState)();
-  const linkPopoverElRef = (0, import_react129.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react129.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react129.useState)(false);
-  (0, import_react129.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react130.useState)();
+  const linkPopoverElRef = (0, import_react130.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react130.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react130.useState)(false);
+  (0, import_react130.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react129.useEffect)(() => {
+  (0, import_react130.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -21603,7 +21617,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react129.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react130.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -21635,7 +21649,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  (0, import_react129.useEffect)(() => {
+  (0, import_react130.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -21723,7 +21737,7 @@ var import_list = require("@lexical/list");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_lexical4 = require("lexical");
-var import_react130 = require("react");
+var import_react131 = require("react");
 var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical4.$getSelection)();
@@ -21747,7 +21761,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  (0, import_react130.useEffect)(() => {
+  (0, import_react131.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -21759,7 +21773,7 @@ function ListIndentPlugin({ maxDepth }) {
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
 init_emotion_jsx_shim();
-var import_react131 = require("@emotion/react");
+var import_react132 = require("@emotion/react");
 var import_code2 = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
@@ -21767,9 +21781,9 @@ var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_utils6 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react132 = require("react");
+var import_react133 = require("react");
 var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react131.css`
+var toolbar = import_react132.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -21781,7 +21795,7 @@ var toolbar = import_react131.css`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = import_react131.css`
+var toolbarGroup = import_react132.css`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -21797,7 +21811,7 @@ var toolbarGroup = import_react131.css`
     width: 1px;
   }
 `;
-var richTextToolbarButton = import_react131.css`
+var richTextToolbarButton = import_react132.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -21810,13 +21824,13 @@ var richTextToolbarButton = import_react131.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = import_react131.css`
+var richTextToolbarButtonActive = import_react132.css`
   background: var(--gray-200);
 `;
-var toolbarIcon = import_react131.css`
+var toolbarIcon = import_react132.css`
   color: inherit;
 `;
-var toolbarChevron = import_react131.css`
+var toolbarChevron = import_react132.css`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -21871,7 +21885,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = (0, import_react132.useCallback)(() => {
+  const updateToolbar = (0, import_react133.useCallback)(() => {
     const selection = (0, import_lexical5.$getSelection)();
     if (!(0, import_lexical5.$isRangeSelection)(selection)) {
       return;
@@ -21910,7 +21924,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  (0, import_react132.useEffect)(() => {
+  (0, import_react133.useEffect)(() => {
     return editor.registerCommand(
       import_lexical5.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -21920,7 +21934,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       import_lexical5.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react132.useEffect)(() => {
+  (0, import_react133.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -22060,26 +22074,26 @@ var RichTextToolbar = ({ config, customControls }) => {
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = (0, import_react132.useMemo)(() => {
+  const enabledBuiltInFormats = (0, import_react133.useMemo)(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = (0, import_react132.useMemo)(() => {
+  const enabledBuiltInElements = (0, import_react133.useMemo)(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = (0, import_react132.useMemo)(() => {
+  const enabledBuiltInFormatsWithIcon = (0, import_react133.useMemo)(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = (0, import_react132.useState)([]);
-  const visibleFormatsWithIcon = (0, import_react132.useMemo)(() => {
+  const [activeFormats, setActiveFormats] = (0, import_react133.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react133.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -22089,7 +22103,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = (0, import_react132.useMemo)(() => {
+  const visibleFormatsWithoutIcon = (0, import_react133.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -22099,11 +22113,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = (0, import_react132.useState)("paragraph");
+  const [activeElement, setActiveElement] = (0, import_react133.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = (0, import_react132.useMemo)(() => {
+  const visibleTextualElements = (0, import_react133.useMemo)(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -22114,24 +22128,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = (0, import_react132.useState)(false);
-  const linkElementVisible = (0, import_react132.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react133.useState)(false);
+  const linkElementVisible = (0, import_react133.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = (0, import_react132.useMemo)(() => {
+  const visibleLists = (0, import_react133.useMemo)(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = (0, import_react132.useMemo)(() => {
+  const quoteElementVisible = (0, import_react133.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = (0, import_react132.useMemo)(() => {
+  const codeElementVisible = (0, import_react133.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = (0, import_react132.useMemo)(() => {
+  const visibleElementsWithIcons = (0, import_react133.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -22230,18 +22244,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = import_react133.css`
+var editorWrapper = import_react134.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react133.css`
+var editorContainer = import_react134.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = import_react133.css`
+var editorPlaceholder = import_react134.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -22252,7 +22266,7 @@ var editorPlaceholder = import_react133.css`
   top: var(--spacing-sm);
   user-select: none;
 `;
-var editorInput = import_react133.css`
+var editorInput = import_react134.css`
   background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
@@ -22374,14 +22388,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = (0, import_react134.useRef)(null);
+  const editorContainerRef = (0, import_react135.useRef)(null);
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react134.useEffect)(() => {
+  (0, import_react135.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react134.useEffect)(() => {
+  (0, import_react135.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -22393,7 +22407,7 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  (0, import_react134.useEffect)(() => {
+  (0, import_react135.useEffect)(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
@@ -22429,15 +22443,15 @@ var RichText = ({
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 init_emotion_jsx_shim();
-var import_react135 = require("react");
+var import_react136 = require("react");
 var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react135.forwardRef)(
+var ParameterSelect = (0, import_react136.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react135.forwardRef)(
+var ParameterSelectInner = (0, import_react136.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
@@ -22462,13 +22476,13 @@ var ParameterSelectInner = (0, import_react135.forwardRef)(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 init_emotion_jsx_shim();
-var import_react136 = require("react");
+var import_react137 = require("react");
 var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react136.forwardRef)((props, ref) => {
+var ParameterTextarea = (0, import_react137.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react136.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react137.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     "textarea",
@@ -22484,13 +22498,13 @@ var ParameterTextareaInner = (0, import_react136.forwardRef)(({ ...props }, ref)
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 init_emotion_jsx_shim();
-var import_react137 = require("react");
+var import_react138 = require("react");
 var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react137.forwardRef)((props, ref) => {
+var ParameterToggle = (0, import_react138.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react137.forwardRef)(
+var ParameterToggleInner = (0, import_react138.forwardRef)(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -22506,8 +22520,8 @@ init_emotion_jsx_shim();
 
 // src/components/ProgressBar/ProgressBar.styles.ts
 init_emotion_jsx_shim();
-var import_react138 = require("@emotion/react");
-var container3 = import_react138.css`
+var import_react139 = require("@emotion/react");
+var container3 = import_react139.css`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -22517,17 +22531,17 @@ var container3 = import_react138.css`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: import_react138.css`
+  primary: import_react139.css`
     --progress-color: var(--accent-light);
   `,
-  secondary: import_react138.css`
+  secondary: import_react139.css`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: import_react138.css`
+  destructive: import_react139.css`
     --progress-color: var(--brand-secondary-5);
   `
 };
-var slidingBackgroundPosition = import_react138.keyframes`
+var slidingBackgroundPosition = import_react139.keyframes`
   from {
     background-position: 0 0;
   }
@@ -22535,10 +22549,10 @@ var slidingBackgroundPosition = import_react138.keyframes`
     background-position: 64px 0;
   }
 `;
-var determinate = import_react138.css`
+var determinate = import_react139.css`
   background-color: var(--progress-color);
 `;
-var indeterminate = import_react138.css`
+var indeterminate = import_react139.css`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -22552,7 +22566,7 @@ var indeterminate = import_react138.css`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = import_react138.css`
+var bar = import_react139.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -22601,22 +22615,22 @@ function ProgressBar({
 
 // src/components/ProgressList/ProgressList.tsx
 init_emotion_jsx_shim();
-var import_react140 = require("@emotion/react");
+var import_react141 = require("@emotion/react");
 var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
 var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
 var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
-var import_react141 = require("react");
+var import_react142 = require("react");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
 init_emotion_jsx_shim();
-var import_react139 = require("@emotion/react");
-var progressListStyles = import_react139.css`
+var import_react140 = require("@emotion/react");
+var progressListStyles = import_react140.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react139.css`
+var progressListItemStyles = import_react140.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -22625,7 +22639,7 @@ var progressListItemStyles = import_react139.css`
 // src/components/ProgressList/ProgressList.tsx
 var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react141.useMemo)(() => {
+  const itemsWithStatus = (0, import_react142.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -22658,7 +22672,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = (0, import_react141.useMemo)(() => {
+  const icon = (0, import_react142.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -22669,14 +22683,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react141.useMemo)(() => {
+  const statusStyles = (0, import_react142.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react140.css`
+      return errorLevel === "caution" ? import_react141.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react140.css`
+          ` : import_react141.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -22684,13 +22698,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react140.css`
+      completed: import_react141.css`
         opacity: 0.75;
       `,
-      inProgress: import_react140.css`
+      inProgress: import_react141.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react140.css`
+      queued: import_react141.css`
         opacity: 0.5;
       `
     };
@@ -22707,17 +22721,17 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react143 = require("@emotion/react");
+var import_react144 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react144 = require("react");
+var import_react145 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react142 = require("@emotion/react");
-var segmentedControlRootStyles = import_react142.css`
+var import_react143 = require("@emotion/react");
+var segmentedControlRootStyles = import_react143.css`
   position: relative;
 `;
-var segmentedControlScrollIndicatorsStyles = import_react142.css`
+var segmentedControlScrollIndicatorsStyles = import_react143.css`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -22745,17 +22759,17 @@ var segmentedControlScrollIndicatorsStyles = import_react142.css`
     background: linear-gradient(to left, var(--background-color) 10%, transparent);
   }
 `;
-var segmentedControlScrollIndicatorStartVisibleStyles = import_react142.css`
+var segmentedControlScrollIndicatorStartVisibleStyles = import_react143.css`
   &::before {
     opacity: 1;
   }
 `;
-var segmentedControlScrollIndicatorEndVisibleStyles = import_react142.css`
+var segmentedControlScrollIndicatorEndVisibleStyles = import_react143.css`
   &::after {
     opacity: 1;
   }
 `;
-var segmentedControlWrapperStyles = import_react142.css`
+var segmentedControlWrapperStyles = import_react143.css`
   overflow-y: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
@@ -22764,7 +22778,7 @@ var segmentedControlWrapperStyles = import_react142.css`
     height: 0px;
   }
 `;
-var segmentedControlStyles = import_react142.css`
+var segmentedControlStyles = import_react143.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -22783,14 +22797,14 @@ var segmentedControlStyles = import_react142.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react142.css`
+var segmentedControlVerticalStyles = import_react143.css`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = import_react142.css`
+var segmentedControlItemStyles = import_react143.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -22798,10 +22812,10 @@ var segmentedControlItemStyles = import_react142.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react142.css`
+var segmentedControlInputStyles = import_react143.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react142.css`
+var segmentedControlLabelStyles = (checked, disabled2) => import_react143.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -22868,20 +22882,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react142.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react142.css`
+var segmentedControlLabelIconOnlyStyles = import_react143.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react142.css`
+var segmentedControlLabelCheckStyles = import_react143.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react142.css`
+var segmentedControlLabelContentStyles = import_react143.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react142.css`
+var segmentedControlLabelTextStyles = import_react143.css`
   white-space: nowrap;
 `;
 
@@ -22901,10 +22915,10 @@ var SegmentedControl = ({
   currentBackgroundColor = "white",
   ...props
 }) => {
-  const wrapperRef = (0, import_react144.useRef)(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react144.useState)(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react144.useState)(false);
-  const onOptionChange = (0, import_react144.useCallback)(
+  const wrapperRef = (0, import_react145.useRef)(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react145.useState)(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react145.useState)(false);
+  const onOptionChange = (0, import_react145.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -22912,19 +22926,19 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react144.useMemo)(() => {
+  const sizeStyles = (0, import_react145.useMemo)(() => {
     const map = {
-      sm: (0, import_react143.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react143.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react143.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
-      xl: (0, import_react143.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react144.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react144.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react144.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: (0, import_react144.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react144.useMemo)(() => {
+  const isIconOnly = (0, import_react145.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  (0, import_react144.useEffect)(() => {
+  (0, import_react145.useEffect)(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -23019,12 +23033,12 @@ init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react145 = require("@emotion/react");
-var lightFadingOut = import_react145.keyframes`
+var import_react146 = require("@emotion/react");
+var lightFadingOut = import_react146.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react145.css`
+var skeletonStyles = import_react146.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -23063,8 +23077,8 @@ var React24 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react146 = require("@emotion/react");
-var SwitchInputContainer = import_react146.css`
+var import_react147 = require("@emotion/react");
+var SwitchInputContainer = import_react147.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -23073,7 +23087,7 @@ var SwitchInputContainer = import_react146.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react146.css`
+var SwitchInput = import_react147.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -23111,7 +23125,7 @@ var SwitchInput = import_react146.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react146.css`
+var SwitchInputDisabled = import_react147.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -23119,7 +23133,7 @@ var SwitchInputDisabled = import_react146.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react146.css`
+var SwitchInputLabel = import_react147.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -23140,7 +23154,7 @@ var SwitchInputLabel = import_react146.css`
     top: 0;
   }
 `;
-var SwitchText = import_react146.css`
+var SwitchText = import_react147.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -23171,8 +23185,8 @@ var React25 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react147 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react147.css`
+var import_react148 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react148.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -23183,15 +23197,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react147.css`
+var tableHead = import_react148.css`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react147.css`
+var tableRow = import_react148.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react147.css`
+var tableCellHead = import_react148.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -23237,13 +23251,13 @@ var TableCellData = React25.forwardRef(
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react149 = require("@ariakit/react");
-var import_react150 = require("react");
+var import_react150 = require("@ariakit/react");
+var import_react151 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react148 = require("@emotion/react");
-var tabButtonStyles = import_react148.css`
+var import_react149 = require("@emotion/react");
+var tabButtonStyles = import_react149.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -23260,7 +23274,7 @@ var tabButtonStyles = import_react148.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react148.css`
+var tabButtonGroupStyles = import_react149.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -23269,7 +23283,7 @@ var tabButtonGroupStyles = import_react148.css`
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react149.useTabStore)();
+  const context = (0, import_react150.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -23283,13 +23297,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react150.useMemo)(() => {
+  const selected = (0, import_react151.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_react149.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = (0, import_react150.useCallback)(
+  const tab = (0, import_react150.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react151.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -23300,28 +23314,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react150.useEffect)(() => {
+  (0, import_react151.useEffect)(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react149.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react150.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react149.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react150.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react149.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react150.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react149.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react150.TabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -23329,8 +23343,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react151 = require("@emotion/react");
-var StatusBulletContainer = import_react151.css`
+var import_react152 = require("@emotion/react");
+var StatusBulletContainer = import_react152.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -23347,33 +23361,33 @@ var StatusBulletContainer = import_react151.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react151.css`
+var StatusBulletBase = import_react152.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react151.css`
+var StatusBulletSmall = import_react152.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react151.css`
+var StatusDraft = import_react152.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusModified = import_react151.css`
+var StatusModified = import_react152.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusError = import_react151.css`
+var StatusError = import_react152.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -23386,22 +23400,22 @@ var StatusError = import_react151.css`
     );
   }
 `;
-var StatusPublished = import_react151.css`
+var StatusPublished = import_react152.css`
   &:before {
     background: var(--accent-dark);
   }
 `;
-var StatusOrphan = import_react151.css`
+var StatusOrphan = import_react152.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react151.css`
+var StatusUnknown = import_react152.css`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = import_react151.css`
+var StatusDeleted = import_react152.css`
   &:before {
     background: var(--error);
   }