@uniformdev/design-system 19.50.0 → 19.50.2-alpha.45

package/dist/index.js

@@ -1487,6 +1487,8 @@ __export(src_exports, {
   borderTopIcon: () => borderTopIcon,
   breakpoints: () => breakpoints,
   button: () => button,
+  buttonAccentAltDark: () => buttonAccentAltDark,
+  buttonAccentAltDarkOutline: () => buttonAccentAltDarkOutline,
   buttonDestructive: () => buttonDestructive,
   buttonGhost: () => buttonGhost,
   buttonGhostDestructive: () => buttonGhostDestructive,
@@ -1894,6 +1896,34 @@ var buttonRippleEffect = (props) => import_react3.css`
     transition: background 0s;
   }
 `;
+var buttonAccentAltDark = import_react3.css`
+  background: var(--accent-alt-dark);
+  color: var(--white);
+
+  &:disabled {
+    background: var(--gray-300);
+    color: var(--white);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
+`;
+var buttonAccentAltDarkOutline = import_react3.css`
+  background: var(--white);
+  color: var(--accent-alt-dark);
+  box-shadow: 0 0 0 1px var(--accent-alt-dark);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonPrimary = import_react3.css`
   background: var(--brand-secondary-1);
   color: var(--white);
@@ -2604,6 +2634,9 @@ var IconImg = import_react12.css`
     vertical-align: middle;
   }
 `;
+var IconWhite = import_react12.css`
+  color: var(--white);
+`;
 var IconColorDefault = import_react12.css`
   color: var(--brand-secondary-3);
 `;
@@ -2659,6 +2692,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   const isIconName = typeof icon === "string";
   const { iconsMap, isLoading } = useIconContext();
   const customColor = {
+    white: IconWhite,
     action: IconColorAction,
     default: IconColorDefault,
     gray: IconColorGray,
@@ -3268,6 +3302,60 @@ var diamondFill = (0, import_all_files.GenIcon)({
     }
   ]
 });
+var magicWand = (0, import_all_files.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M12.6021 0.799316C12.5443 0.799316 12.487 0.802204 12.4305 0.807862C12.3484 1.91145 11.5902 2.79082 10.6387 2.88601C10.6338 2.9516 10.6313 3.01798 10.6313 3.08503C10.6313 3.15208 10.6338 3.21846 10.6387 3.28405C11.5902 3.37924 12.3484 4.25862 12.4305 5.3622C12.487 5.36786 12.5443 5.37074 12.6021 5.37074C12.6599 5.37074 12.7171 5.36786 12.7737 5.3622C12.8558 4.25862 13.614 3.37924 14.5655 3.28405C14.5704 3.21846 14.5729 3.15208 14.5729 3.08503C14.5729 3.01798 14.5704 2.9516 14.5655 2.88601C13.614 2.79082 12.8558 1.91145 12.7737 0.807862C12.7171 0.802204 12.6599 0.799316 12.6021 0.799316Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M17.8945 12.4247C17.8367 12.4247 17.7795 12.4276 17.7229 12.4332C17.6409 13.5368 16.8826 14.4162 15.9311 14.5114C15.9262 14.577 15.9237 14.6433 15.9237 14.7104C15.9237 14.7774 15.9262 14.8438 15.9311 14.9094C16.8826 15.0046 17.6409 15.884 17.7229 16.9876C17.7795 16.9932 17.8367 16.9961 17.8945 16.9961C17.9523 16.9961 18.0096 16.9932 18.0661 16.9876C18.1482 15.884 18.9064 15.0046 19.858 14.9094C19.8628 14.8438 19.8653 14.7774 19.8653 14.7104C19.8653 14.6433 19.8628 14.577 19.858 14.5114C18.9064 14.4162 18.1482 13.5368 18.0661 12.4332C18.0096 12.4276 17.9523 12.4247 17.8945 12.4247Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M21.571 1.6413C21.509 1.6413 21.4476 1.6449 21.387 1.65195C21.299 3.02718 20.4858 4.12302 19.4653 4.24164C19.4601 4.32337 19.4574 4.40609 19.4574 4.48965C19.4574 4.57321 19.4601 4.65592 19.4653 4.73766C20.4858 4.85628 21.299 5.95211 21.387 7.32734C21.4476 7.33439 21.509 7.33799 21.571 7.33799C21.633 7.33799 21.6944 7.33439 21.755 7.32734C21.8431 5.95211 22.6562 4.85628 23.6767 4.73766C23.6819 4.65592 23.6846 4.57321 23.6846 4.48965C23.6846 4.40609 23.6819 4.32337 23.6767 4.24164C22.6562 4.12302 21.8431 3.02718 21.755 1.65195C21.6944 1.6449 21.633 1.6413 21.571 1.6413Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M15.6875 11.9141L12.5116 8.73823L2.07262 19.1773C1.9166 19.3333 1.9166 19.5862 2.07262 19.7422L4.68354 22.3532C4.83956 22.5092 5.0925 22.5092 5.24852 22.3532L15.6875 11.9141Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16.8929 4.92196L19.5038 7.53288L14.8688 12.1679L12.2578 9.55702L16.8929 4.92196ZM19.7863 7.2504C19.9423 7.40641 19.9423 7.65936 19.7863 7.81537L15.6875 11.9141L12.5116 8.73823L16.6104 4.63947C16.7664 4.48346 17.0194 4.48346 17.1754 4.63947L19.7863 7.2504Z"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -3291,7 +3379,8 @@ var customIcons = {
   "clear-formatting": clearFormatting,
   "yes-no": yesNoIcon,
   "diamond-outline": diamondOutline,
-  "diamond-fill": diamondFill
+  "diamond-fill": diamondFill,
+  "magic-wand": magicWand
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -12920,6 +13009,8 @@ var Button = React6.forwardRef(
     const buttonTheme = {
       primary: buttonPrimary,
       primaryInvert: buttonPrimaryInvert,
+      "accent-alt-dark": buttonAccentAltDark,
+      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
       destructive: buttonDestructive,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
@@ -16969,6 +17060,7 @@ var import_CgCheck4 = require("@react-icons/all-files/cg/CgCheck");
 var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({
   buttonText,
+  icon,
   active,
   disableShadow,
   ...props
@@ -16982,7 +17074,10 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: buttonText }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
+          icon,
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: buttonText })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Icon,
           {
@@ -17929,7 +18024,7 @@ var ParameterGroup = (0, import_react99.forwardRef)(
 
 // src/components/ParameterInputs/ParameterImage.tsx
 init_emotion_jsx_shim();
-var import_react105 = require("react");
+var import_react106 = require("react");
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 init_emotion_jsx_shim();
@@ -18110,7 +18205,8 @@ var Image = ({ src, className }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 init_emotion_jsx_shim();
-var import_react104 = require("react");
+var import_react104 = require("@emotion/react");
+var import_react105 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 init_emotion_jsx_shim();
@@ -18228,13 +18324,14 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
   title,
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react104.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react105.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: inputContainer2, ...props, children: [
@@ -18249,6 +18346,18 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        "div",
+        {
+          css: [
+            inputMenu,
+            menuItems ? import_react104.css`
+                    right: 1.25rem;
+                  ` : void 0
+          ],
+          children: actionItems
+        }
+      ) : null,
       menuItems ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         ParameterShellContext.Provider,
@@ -18280,7 +18389,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime9
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react105.forwardRef)(
+var ParameterImage = (0, import_react106.forwardRef)(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -18289,10 +18398,10 @@ var ParameterImage = (0, import_react105.forwardRef)(
     ] });
   }
 );
-var ParameterImageInner = (0, import_react105.forwardRef)((props, ref) => {
+var ParameterImageInner = (0, import_react106.forwardRef)((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
-  const deferredValue = (0, import_react105.useDeferredValue)(value);
+  const deferredValue = (0, import_react106.useDeferredValue)(value);
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       "input",
@@ -18312,13 +18421,13 @@ var ParameterImageInner = (0, import_react105.forwardRef)((props, ref) => {
 
 // src/components/ParameterInputs/ParameterInput.tsx
 init_emotion_jsx_shim();
-var import_react106 = require("react");
+var import_react107 = require("react");
 var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react106.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react107.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react106.forwardRef)(
+var ParameterInputInner = (0, import_react107.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -18338,9 +18447,9 @@ var ParameterInputInner = (0, import_react106.forwardRef)(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
-var import_react107 = require("react");
+var import_react108 = require("react");
 var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react107.forwardRef)(
+var ParameterLink = (0, import_react108.forwardRef)(
   ({ disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
@@ -18363,7 +18472,7 @@ var ParameterLink = (0, import_react107.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react107.forwardRef)(
+var ParameterLinkInner = (0, import_react108.forwardRef)(
   ({ externalLink, onConnectLink, disabled, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -18489,7 +18598,7 @@ var ParameterNameAndPublicIdInput = ({
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 init_emotion_jsx_shim();
-var import_react114 = require("@emotion/react");
+var import_react115 = require("@emotion/react");
 var import_list3 = require("@lexical/list");
 var import_markdown = require("@lexical/markdown");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -18596,7 +18705,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_fast_equals2 = require("fast-equals");
 var import_lexical6 = require("lexical");
-var import_react115 = require("react");
+var import_react116 = require("react");
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 init_emotion_jsx_shim();
@@ -18619,10 +18728,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_react108 = require("react");
+var import_react109 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  (0, import_react108.useEffect)(() => {
+  (0, import_react109.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -18817,13 +18926,13 @@ var codeElement = import_css.css`
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 init_emotion_jsx_shim();
-var import_react109 = require("@emotion/react");
+var import_react110 = 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_react110 = require("react");
+var import_react111 = require("react");
 
 // src/components/ParameterInputs/rich-text/utils.ts
 init_emotion_jsx_shim();
@@ -19149,16 +19258,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_react109.css`
+var linkPopover = import_react110.css`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = import_react109.css`
+var linkPopoverContainer = import_react110.css`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react109.css`
+var linkPopoverAnchor = import_react110.css`
   ${link}
   ${linkColorDefault}
 `;
@@ -19167,17 +19276,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react110.useState)();
-  const linkPopoverElRef = (0, import_react110.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react110.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react110.useState)(false);
-  (0, import_react110.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react111.useState)();
+  const linkPopoverElRef = (0, import_react111.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react111.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react111.useState)(false);
+  (0, import_react111.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -19246,7 +19355,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react110.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react111.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -19278,7 +19387,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -19366,7 +19475,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_react111 = require("react");
+var import_react112 = require("react");
 var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical4.$getSelection)();
@@ -19390,7 +19499,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  (0, import_react111.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -19402,7 +19511,7 @@ function ListIndentPlugin({ maxDepth }) {
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
 init_emotion_jsx_shim();
-var import_react112 = require("@emotion/react");
+var import_react113 = require("@emotion/react");
 var import_code2 = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
@@ -19410,9 +19519,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_react113 = require("react");
+var import_react114 = require("react");
 var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react112.css`
+var toolbar = import_react113.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -19424,7 +19533,7 @@ var toolbar = import_react112.css`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = import_react112.css`
+var toolbarGroup = import_react113.css`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -19440,7 +19549,7 @@ var toolbarGroup = import_react112.css`
     width: 1px;
   }
 `;
-var richTextToolbarButton = import_react112.css`
+var richTextToolbarButton = import_react113.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -19453,13 +19562,13 @@ var richTextToolbarButton = import_react112.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = import_react112.css`
+var richTextToolbarButtonActive = import_react113.css`
   background: var(--gray-200);
 `;
-var toolbarIcon = import_react112.css`
+var toolbarIcon = import_react113.css`
   color: inherit;
 `;
-var toolbarChevron = import_react112.css`
+var toolbarChevron = import_react113.css`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -19514,7 +19623,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = (0, import_react113.useCallback)(() => {
+  const updateToolbar = (0, import_react114.useCallback)(() => {
     const selection = (0, import_lexical5.$getSelection)();
     if (!(0, import_lexical5.$isRangeSelection)(selection)) {
       return;
@@ -19553,7 +19662,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react114.useEffect)(() => {
     return editor.registerCommand(
       import_lexical5.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -19563,7 +19672,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       import_lexical5.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react114.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -19703,26 +19812,26 @@ var RichTextToolbar = ({ config, customControls }) => {
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = (0, import_react113.useMemo)(() => {
+  const enabledBuiltInFormats = (0, import_react114.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_react113.useMemo)(() => {
+  const enabledBuiltInElements = (0, import_react114.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_react113.useMemo)(() => {
+  const enabledBuiltInFormatsWithIcon = (0, import_react114.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_react113.useState)([]);
-  const visibleFormatsWithIcon = (0, import_react113.useMemo)(() => {
+  const [activeFormats, setActiveFormats] = (0, import_react114.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react114.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -19732,7 +19841,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = (0, import_react113.useMemo)(() => {
+  const visibleFormatsWithoutIcon = (0, import_react114.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -19742,11 +19851,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = (0, import_react113.useState)("paragraph");
+  const [activeElement, setActiveElement] = (0, import_react114.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = (0, import_react113.useMemo)(() => {
+  const visibleTextualElements = (0, import_react114.useMemo)(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -19757,24 +19866,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = (0, import_react113.useState)(false);
-  const linkElementVisible = (0, import_react113.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react114.useState)(false);
+  const linkElementVisible = (0, import_react114.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = (0, import_react113.useMemo)(() => {
+  const visibleLists = (0, import_react114.useMemo)(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = (0, import_react113.useMemo)(() => {
+  const quoteElementVisible = (0, import_react114.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = (0, import_react113.useMemo)(() => {
+  const codeElementVisible = (0, import_react114.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = (0, import_react113.useMemo)(() => {
+  const visibleElementsWithIcons = (0, import_react114.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -19873,18 +19982,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = import_react114.css`
+var editorWrapper = import_react115.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react114.css`
+var editorContainer = import_react115.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = import_react114.css`
+var editorPlaceholder = import_react115.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -19895,7 +20004,7 @@ var editorPlaceholder = import_react114.css`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = import_react114.css`
+var editorInput = import_react115.css`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -20017,14 +20126,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = (0, import_react115.useRef)(null);
+  const editorContainerRef = (0, import_react116.useRef)(null);
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react115.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react115.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -20069,15 +20178,15 @@ var RichText = ({
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 init_emotion_jsx_shim();
-var import_react116 = require("react");
+var import_react117 = require("react");
 var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react116.forwardRef)(
+var ParameterSelect = (0, import_react117.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react116.forwardRef)(
+var ParameterSelectInner = (0, import_react117.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
@@ -20102,13 +20211,13 @@ var ParameterSelectInner = (0, import_react116.forwardRef)(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 init_emotion_jsx_shim();
-var import_react117 = require("react");
+var import_react118 = require("react");
 var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react117.forwardRef)((props, ref) => {
+var ParameterTextarea = (0, import_react118.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react117.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react118.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     "textarea",
@@ -20124,13 +20233,13 @@ var ParameterTextareaInner = (0, import_react117.forwardRef)(({ ...props }, ref)
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 init_emotion_jsx_shim();
-var import_react118 = require("react");
+var import_react119 = require("react");
 var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react118.forwardRef)((props, ref) => {
+var ParameterToggle = (0, import_react119.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react118.forwardRef)(
+var ParameterToggleInner = (0, import_react119.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -20142,22 +20251,22 @@ var ParameterToggleInner = (0, import_react118.forwardRef)(
 
 // src/components/ProgressList/ProgressList.tsx
 init_emotion_jsx_shim();
-var import_react120 = require("@emotion/react");
+var import_react121 = 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_react121 = require("react");
+var import_react122 = require("react");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
 init_emotion_jsx_shim();
-var import_react119 = require("@emotion/react");
-var progressListStyles = import_react119.css`
+var import_react120 = require("@emotion/react");
+var progressListStyles = import_react120.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react119.css`
+var progressListItemStyles = import_react120.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -20166,7 +20275,7 @@ var progressListItemStyles = import_react119.css`
 // src/components/ProgressList/ProgressList.tsx
 var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react121.useMemo)(() => {
+  const itemsWithStatus = (0, import_react122.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -20199,7 +20308,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = (0, import_react121.useMemo)(() => {
+  const icon = (0, import_react122.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -20210,14 +20319,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react121.useMemo)(() => {
+  const statusStyles = (0, import_react122.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react120.css`
+      return errorLevel === "caution" ? import_react121.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react120.css`
+          ` : import_react121.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -20225,13 +20334,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react120.css`
+      completed: import_react121.css`
         opacity: 0.75;
       `,
-      inProgress: import_react120.css`
+      inProgress: import_react121.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react120.css`
+      queued: import_react121.css`
         opacity: 0.5;
       `
     };
@@ -20248,14 +20357,14 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react123 = require("@emotion/react");
+var import_react124 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react124 = require("react");
+var import_react125 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react122 = require("@emotion/react");
-var segmentedControlStyles = import_react122.css`
+var import_react123 = require("@emotion/react");
+var segmentedControlStyles = import_react123.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -20274,14 +20383,14 @@ var segmentedControlStyles = import_react122.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react122.css`
+var segmentedControlVerticalStyles = import_react123.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_react122.css`
+var segmentedControlItemStyles = import_react123.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -20289,10 +20398,10 @@ var segmentedControlItemStyles = import_react122.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react122.css`
+var segmentedControlInputStyles = import_react123.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => import_react122.css`
+var segmentedControlLabelStyles = (checked, disabled) => import_react123.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -20359,20 +20468,20 @@ var segmentedControlLabelStyles = (checked, disabled) => import_react122.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react122.css`
+var segmentedControlLabelIconOnlyStyles = import_react123.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react122.css`
+var segmentedControlLabelCheckStyles = import_react123.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react122.css`
+var segmentedControlLabelContentStyles = import_react123.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react122.css``;
+var segmentedControlLabelTextStyles = import_react123.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
@@ -20387,7 +20496,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react124.useCallback)(
+  const onOptionChange = (0, import_react125.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -20395,15 +20504,15 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react124.useMemo)(() => {
+  const sizeStyles = (0, import_react125.useMemo)(() => {
     const map = {
-      sm: (0, import_react123.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react123.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react123.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react124.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react124.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react124.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react124.useMemo)(() => {
+  const isIconOnly = (0, import_react125.useMemo)(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
@@ -20460,12 +20569,12 @@ init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react125 = require("@emotion/react");
-var lightFadingOut = import_react125.keyframes`
+var import_react126 = require("@emotion/react");
+var lightFadingOut = import_react126.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react125.css`
+var skeletonStyles = import_react126.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -20504,8 +20613,8 @@ var React23 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react126 = require("@emotion/react");
-var SwitchInputContainer = import_react126.css`
+var import_react127 = require("@emotion/react");
+var SwitchInputContainer = import_react127.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -20514,7 +20623,7 @@ var SwitchInputContainer = import_react126.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react126.css`
+var SwitchInput = import_react127.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -20552,7 +20661,7 @@ var SwitchInput = import_react126.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react126.css`
+var SwitchInputDisabled = import_react127.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -20560,7 +20669,7 @@ var SwitchInputDisabled = import_react126.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react126.css`
+var SwitchInputLabel = import_react127.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -20582,7 +20691,7 @@ var SwitchInputLabel = import_react126.css`
     top: 0;
   }
 `;
-var SwitchText = import_react126.css`
+var SwitchText = import_react127.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -20613,8 +20722,8 @@ var React24 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react127 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react127.css`
+var import_react128 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react128.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -20625,15 +20734,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react127.css`
+var tableHead = import_react128.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react127.css`
+var tableRow = import_react128.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react127.css`
+var tableCellHead = import_react128.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -20679,13 +20788,13 @@ var TableCellData = React24.forwardRef(
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react129 = require("react");
+var import_react130 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react128 = require("@emotion/react");
-var tabButtonStyles = import_react128.css`
+var import_react129 = require("@emotion/react");
+var tabButtonStyles = import_react129.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -20702,7 +20811,7 @@ var tabButtonStyles = import_react128.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react128.css`
+var tabButtonGroupStyles = import_react129.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -20710,22 +20819,22 @@ var tabButtonGroupStyles = import_react128.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react129.createContext)(null);
+var CurrentTabContext = (0, import_react130.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react129.useContext)(CurrentTabContext);
+  const context = (0, import_react130.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react129.useMemo)(() => {
+  const selected = (0, import_react130.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_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react129.useEffect)(() => {
+  (0, import_react130.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -20733,7 +20842,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react129.useEffect)(() => {
+  (0, import_react130.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
@@ -20758,8 +20867,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react130 = require("@emotion/react");
-var StatusBulletContainer = import_react130.css`
+var import_react131 = require("@emotion/react");
+var StatusBulletContainer = import_react131.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -20776,33 +20885,33 @@ var StatusBulletContainer = import_react130.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react130.css`
+var StatusBulletBase = import_react131.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react130.css`
+var StatusBulletSmall = import_react131.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react130.css`
+var StatusDraft = import_react131.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react130.css`
+var StatusModified = import_react131.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react130.css`
+var StatusError = import_react131.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -20815,12 +20924,12 @@ var StatusError = import_react130.css`
     );
   }
 `;
-var StatusPublished = import_react130.css`
+var StatusPublished = import_react131.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react130.css`
+var StatusOrphan = import_react131.css`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -21001,6 +21110,8 @@ var StatusBullet = ({
   borderTopIcon,
   breakpoints,
   button,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,