npm - @uniformdev/design-system - Versions diffs - 19.55.2-alpha.37 → 19.55.2-alpha.45 - Mend

@uniformdev/design-system 19.55.2-alpha.37 → 19.55.2-alpha.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1887,9 +1887,9 @@ var AddListButtonBtnSmall = css9`
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => css9`
+var AddListButtonIconMathPlus = (disabled2, theme) => css9`
   box-sizing: border-box;
-  background: ${disabled ? "var(--gray-300)" : theme};
+  background: ${disabled2 ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
@@ -1903,7 +1903,7 @@ import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var AddListButton = ({
   buttonText = "Add Item",
   onButtonClick,
-  disabled,
+  disabled: disabled2,
   icon = "math-plus",
   variant = "regular",
   theme = "var(--primary-action-default)",
@@ -1925,7 +1925,7 @@ var AddListButton = ({
       css: [variantStylesMap[variant], AddListButtonTheme(theme)],
       onClick: onButtonClick,
       title: buttonText,
-      disabled,
+      disabled: disabled2,
       ...buttonProps,
       children: [
         icon === "math-plus" ? /* @__PURE__ */ jsx8(
@@ -1934,7 +1934,7 @@ var AddListButton = ({
             icon: mapIcon[icon],
             iconColor: "currentColor",
             size: "1.25em",
-            css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled, theme)]
+            css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled2, theme)]
           }
         ) : /* @__PURE__ */ jsx8(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
         buttonText
@@ -1980,12 +1980,13 @@ var commonLineHeight = css10`
 import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
 var Heading = ({
   level = 2,
+  as,
   asSpan,
   withMarginBottom = true,
   children,
   ...hAttributes
 }) => {
-  const Heading2 = asSpan ? "span" : `h${level}`;
+  const Heading2 = (as != null ? as : asSpan) ? "span" : `h${level}`;
   const headingStyle = {
     1: h1,
     2: h2,
@@ -11742,7 +11743,7 @@ import * as React9 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 import { jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 var MenuItem = React9.forwardRef(
-  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
+  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active: active2, ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
       const resolvedProps2 = { ...originalProps };
@@ -11766,7 +11767,7 @@ var MenuItem = React9.forwardRef(
         "data-testid": "button-menu",
         ...menuState,
         ...resolvedProps,
-        css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
+        css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }
@@ -11945,7 +11946,7 @@ var ButtonWithMenu = ({
   buttonType = "secondary",
   buttonText,
   icon,
-  disabled,
+  disabled: disabled2,
   children,
   placement,
   size = "lg",
@@ -11981,7 +11982,7 @@ var ButtonWithMenu = ({
       css: [
         sizes2[size],
         ButtonWithMenuContainer,
-        disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
+        disabled2 ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
       children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
@@ -11990,7 +11991,7 @@ var ButtonWithMenu = ({
           {
             type: "button",
             css: ButtonWithMenuBtn,
-            disabled,
+            disabled: disabled2,
             onClick: onButtonClick,
             "data-testid": "multioptions-button-main",
             ...buttonProps,
@@ -12000,8 +12001,8 @@ var ButtonWithMenu = ({
             ]
           }
         ),
-        disabled ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
-      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
+        disabled2 ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
+      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
@@ -12361,7 +12362,7 @@ var Card = ({
   menuItems,
   children,
   titleWithMarginBottom = true,
-  disabled,
+  disabled: disabled2,
   tag: Tag = "div",
   menuButtonTestId,
   ...props
@@ -12377,7 +12378,7 @@ var Card = ({
           {
             "aria-label": "More options",
             type: "button",
-            disabled,
+            disabled: disabled2,
             css: CardMenu,
             "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
             children: /* @__PURE__ */ jsx31(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
@@ -13827,8 +13828,8 @@ var fieldsetBody = css48`
 // src/components/Input/Fieldset.tsx
 import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var Fieldset = React15.forwardRef(
-  ({ legend, disabled, children, invert, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
+  ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
       /* @__PURE__ */ jsx51("div", { css: fieldsetBody, children })
     ] });
@@ -14187,7 +14188,7 @@ var InputInlineSelect = ({
   options,
   value,
   onChange,
-  disabled,
+  disabled: disabled2,
   ...props
 }) => {
   var _a;
@@ -14213,14 +14214,14 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled)
+              if (!disabled2)
                 setMenuVisible((prev) => !prev);
             },
-            disabled,
+            disabled: disabled2,
             ...props,
             children: [
               /* @__PURE__ */ jsx57("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled ? null : /* @__PURE__ */ jsx57(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              disabled2 ? null : /* @__PURE__ */ jsx57(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
@@ -14256,7 +14257,7 @@ import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
 import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
-  disabled = false,
+  disabled: disabled2 = false,
   placeholder = "Keyword search",
   inputFieldName = "keywordSearch",
   disabledFieldSubmission = false,
@@ -14285,7 +14286,7 @@ var InputKeywordSearch = ({
       icon: value ? /* @__PURE__ */ jsx58("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx58(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx58(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
-      disabled,
+      disabled: disabled2,
       "aria-label": placeholder,
       css: [
         compact ? {
@@ -14294,6 +14295,7 @@ var InputKeywordSearch = ({
         } : null,
         rounded ? { borderRadius: "var(--rounded-full)" } : null
       ],
+      "data-testid": "input-search",
       ...props
     }
   );
@@ -14369,7 +14371,7 @@ var InputToggle = React17.forwardRef(
   ({
     label,
     type,
-    disabled,
+    disabled: disabled2,
     checked,
     name,
     caption,
@@ -14387,7 +14389,7 @@ var InputToggle = React17.forwardRef(
     return /* @__PURE__ */ jsxs37(
       Label,
       {
-        css: [inputToggleLabel, disabled ? inputDisabled : void 0],
+        css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
           /* @__PURE__ */ jsx60(
@@ -14398,7 +14400,7 @@ var InputToggle = React17.forwardRef(
               css: toggleInput,
               checked,
               name,
-              disabled,
+              disabled: disabled2,
               ...props
             }
           ),
@@ -14504,7 +14506,7 @@ var imgLoading = css54`
   opacity: 0;
 `;
 var imgLoaded = css54`
-  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
+  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
 var brokenImage = css54`
@@ -14557,7 +14559,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 // src/components/Image/Image.tsx
 import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
-var MIN_LOADING_MS = 500;
+var MIN_LOADING_MS = 100;
 function Image({
   alt,
   src,
@@ -15158,8 +15160,8 @@ var Tile = css60`
 // src/components/Tiles/Tile.tsx
 import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, disabled, ...props }) => {
-  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, disabled, ...props, children });
+var Tile2 = ({ children, disabled: disabled2, ...props }) => {
+  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, disabled: disabled2, ...props, children });
 };
 // src/components/Tiles/styles/TileContainer.styles.ts
@@ -15238,6 +15240,7 @@ var IntegrationModalHeaderTitleGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
+  padding: 0 var(--spacing-base);
 `;
 var IntegrationModalHeaderTitle = css63`
   margin-top: 0;
@@ -15246,6 +15249,12 @@ var IntegrationModalHeaderMenuPlacement = css63`
   margin-bottom: var(--spacing-base);
 `;
 var IntegrationModalHeaderContentWrapper = css63`
+  background: var(--white);
+  display: flex;
+  padding: var(--spacing-base);
+  flex-direction: column;
+  gap: var(--spacing-base);
+  height: 100%;
   position: relative;
   z-index: var(--z-10);
 `;
@@ -15575,7 +15584,7 @@ import { jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
-  active,
+  active: active2,
   disableShadow = false,
   children,
   labelTestId,
@@ -15587,7 +15596,7 @@ var ScrollableListInputItem = ({
       css: [
         ScrollableListItemContainer,
         disableShadow ? void 0 : ScrollableListItemShadow,
-        active ? ScrollableListItemActive : void 0
+        active2 ? ScrollableListItemActive : void 0
       ],
       ...props,
       children: /* @__PURE__ */ jsxs53("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
@@ -15601,10 +15610,10 @@ var ScrollableListInputItem = ({
           {
             icon: CgCheck2,
             iconColor: "currentColor",
-            css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
+            css: [ScrollableListIcon, active2 ? ScrollableListIconVisible : void 0],
             size: 24,
             "data-testid": "check-mark",
-            "data-test-active": active
+            "data-test-active": active2
           }
         )
       ] })
@@ -15618,7 +15627,7 @@ import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
-  active,
+  active: active2,
   disableShadow,
   ...props
 }) => {
@@ -15628,7 +15637,7 @@ var ScrollableListItem = ({
       css: [
         ScrollableListItemContainer,
         disableShadow ? void 0 : ScrollableListItemShadow,
-        active ? ScrollableListItemActive : void 0
+        active2 ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
         /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
@@ -15640,7 +15649,7 @@ var ScrollableListItem = ({
           {
             icon: CgCheck3,
             iconColor: "currentColor",
-            css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
+            css: [ScrollableListIcon, active2 ? ScrollableListIconVisible : void 0],
             size: 24
           }
         )
@@ -16118,30 +16127,110 @@ var Modal = React19.forwardRef(
     });
     return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
       /* @__PURE__ */ jsx88("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ jsxs59("dialog", { ref, css: modalStyles, style: { width, height }, ...modalProps, children: [
-        /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-          /* @__PURE__ */ jsx88("div", { children: header }),
-          /* @__PURE__ */ jsx88(
-            Button,
-            {
-              type: "button",
-              onClick: onRequestClose,
-              css: modalCloseButtonStyles,
-              title: "Close dialog",
-              buttonType: "ghost",
-              "data-testid": "close-dialog",
-              children: /* @__PURE__ */ jsx88(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx88("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-        buttonGroup ? /* @__PURE__ */ jsx88(HorizontalRhythm, { children: buttonGroup }) : null
-      ] })
+      /* @__PURE__ */ jsxs59(
+        "dialog",
+        {
+          ref,
+          css: modalStyles,
+          style: { width, height },
+          "data-testid": "side-dialog",
+          ...modalProps,
+          children: [
+            /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+              /* @__PURE__ */ jsx88("div", { children: header }),
+              /* @__PURE__ */ jsx88(
+                Button,
+                {
+                  type: "button",
+                  onClick: onRequestClose,
+                  css: modalCloseButtonStyles,
+                  title: "Close dialog",
+                  buttonType: "ghost",
+                  "data-testid": "close-dialog",
+                  children: /* @__PURE__ */ jsx88(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx88("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+            buttonGroup ? /* @__PURE__ */ jsx88(HorizontalRhythm, { children: buttonGroup }) : null
+          ]
+        }
+      )
     ] });
   }
 );
 Modal.displayName = "Modal";
+// src/components/Pagination/Pagination.tsx
+import Paginate from "react-paginate";
+// src/components/Pagination/Pagniation.styles.ts
+import { css as css74 } from "@emotion/css";
+var container = css74`
+  align-items: center;
+  display: flex;
+`;
+var disabled = css74`
+  opacity: var(--opacity-50);
+`;
+var disabledLink = css74`
+  cursor: pointer-default;
+`;
+var pageLink = css74`
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-base);
+`;
+var prevNextControls = css74`
+  padding: var(--spacing-sm) var(--spacing-base);
+`;
+var active = css74`
+  border-radius: var(--rounded-base);
+  background: var(--gray-200);
+`;
+var page = css74`
+  margin-left: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+`;
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
+function Pagination({
+  limit,
+  offset,
+  total,
+  onPageChange
+}) {
+  if (limit < 1) {
+    return null;
+  }
+  const pageCount = Math.ceil(total / limit);
+  const currentPage = Math.ceil(offset / limit);
+  if (pageCount <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx89(
+    Paginate,
+    {
+      forcePage: currentPage,
+      previousLabel: /* @__PURE__ */ jsx89("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx89("div", { className: prevNextControls, children: ">" }),
+      breakLabel: "...",
+      pageCount,
+      marginPagesDisplayed: 2,
+      pageRangeDisplayed: 5,
+      onPageChange: ({ selected }) => {
+        onPageChange(limit, selected * limit);
+      },
+      containerClassName: container,
+      disabledClassName: disabled,
+      disabledLinkClassName: disabledLink,
+      pageLinkClassName: pageLink,
+      activeClassName: active,
+      pageClassName: page
+    }
+  );
+}
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
 import { createContext as createContext5, useContext as useContext6 } from "react";
 var ParameterShellContext = createContext5({
@@ -16164,8 +16253,8 @@ var useParameterShell = () => {
 };
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
-import { css as css74 } from "@emotion/react";
-var inputIconBtn = css74`
+import { css as css75 } from "@emotion/react";
+var inputIconBtn = css75`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -16191,7 +16280,7 @@ var inputIconBtn = css74`
 `;
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -16203,7 +16292,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx89(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsx90(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
       css: inputIconBtn,
@@ -16212,7 +16301,7 @@ var LabelLeadingIcon = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx90(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -16228,8 +16317,8 @@ var LabelLeadingIcon = ({
 var ConnectToDataElementButton = LabelLeadingIcon;
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css75 } from "@emotion/react";
-var inputContainer2 = css75`
+import { css as css76 } from "@emotion/react";
+var inputContainer2 = css76`
   position: relative;
   scroll-margin: var(--spacing-2xl);
@@ -16242,14 +16331,14 @@ var inputContainer2 = css75`
     }
   }
 `;
-var labelText2 = css75`
+var labelText2 = css76`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css75`
+var input2 = css76`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -16293,18 +16382,18 @@ var input2 = css75`
     color: var(--gray-400);
   }
 `;
-var selectInput = css75`
+var selectInput = css76`
   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 = css75`
+var inputWrapper = css76`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css75`
+var inputIcon2 = css76`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -16320,7 +16409,7 @@ var inputIcon2 = css75`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css75`
+var inputToggleLabel2 = css76`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -16331,7 +16420,7 @@ var inputToggleLabel2 = css75`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css75`
+var toggleInput2 = css76`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -16370,7 +16459,7 @@ var toggleInput2 = css75`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css75`
+var inlineLabel2 = css76`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -16386,7 +16475,7 @@ var inlineLabel2 = css75`
     }
   }
 `;
-var inputMenu = css75`
+var inputMenu = css76`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -16402,11 +16491,11 @@ var inputMenu = css75`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css75`
+var textarea2 = css76`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = css75`
+var dataConnectButton = css76`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -16441,7 +16530,7 @@ var dataConnectButton = css75`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css75`
+var linkParameterBtn = css76`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -16450,7 +16539,7 @@ var linkParameterBtn = css75`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css75`
+var linkParameterControls = css76`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -16459,7 +16548,7 @@ var linkParameterControls = css75`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css75`
+var linkParameterInput = (withExternalLinkIcon) => css76`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -16472,7 +16561,7 @@ var linkParameterInput = (withExternalLinkIcon) => css75`
     }
   }
 `;
-var linkParameterIcon = css75`
+var linkParameterIcon = css76`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -16487,14 +16576,14 @@ var linkParameterIcon = css75`
 `;
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
   id,
   onConnectDatasource,
   caption,
-  disabled,
+  disabled: disabled2,
   children
 }) {
   return /* @__PURE__ */ jsxs61("div", { "data-testid": "parameter-data-connect-button", children: [
@@ -16508,33 +16597,33 @@ function ParameterDataResource({
         type: "button",
         css: dataConnectButton,
         "aria-controls": id,
-        disabled,
+        disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx90("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx90(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx91("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx91(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx90(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx91(Caption, { children: caption }) : null
   ] });
 }
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css76 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css76`
+import { css as css77 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css77`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css76`
+var ParameterDrawerHeaderTitleGroup = css77`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css76`
+var ParameterDrawerHeaderTitle = css77`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -16542,12 +16631,12 @@ var ParameterDrawerHeaderTitle = css76`
 `;
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs62("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs62("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx91(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx92(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
@@ -16557,8 +16646,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef10 } from "react";
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css77 } from "@emotion/react";
-var fieldsetStyles = css77`
+import { css as css78 } from "@emotion/react";
+var fieldsetStyles = css78`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -16569,7 +16658,7 @@ var fieldsetStyles = css77`
     }
   }
 `;
-var fieldsetLegend2 = css77`
+var fieldsetLegend2 = css78`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -16577,11 +16666,11 @@ var fieldsetLegend2 = css77`
 `;
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx92, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef10(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs63("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx92("legend", { css: fieldsetLegend2, children: legend }),
+      /* @__PURE__ */ jsx93("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -16595,15 +16684,15 @@ import { useState as useState10 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
-import { css as css78 } from "@emotion/react";
-var previewWrapper = css78`
+import { css as css79 } from "@emotion/react";
+var previewWrapper = css79`
   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 = css78`
+var previewLink = css79`
   display: block;
   width: 100%;
@@ -16611,7 +16700,7 @@ var previewLink = css78`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = css78`
+var previewModalWrapper = css79`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -16620,7 +16709,7 @@ var previewModalWrapper = css78`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = css78`
+var previewModalImage = css79`
   display: flex;
   height: 100%;
   width: 100%;
@@ -16632,33 +16721,33 @@ var previewModalImage = css78`
 `;
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx94, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState10(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx93(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx93(
+    /* @__PURE__ */ jsx94(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx94(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx94(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx93(Fragment15, { children: createPortal2(
-    /* @__PURE__ */ jsx93(
+  return open ? /* @__PURE__ */ jsx94(Fragment15, { children: createPortal2(
+    /* @__PURE__ */ jsx94(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
         withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ jsx93(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx93("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx94(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx94("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx94(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -16666,25 +16755,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css80 } from "@emotion/react";
+import { css as css81 } from "@emotion/react";
 import { useState as useState11 } from "react";
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx94("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx94("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx95("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx95("span", { "aria-labelledby": id, css: labelText2, children });
 };
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef11(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsx96(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx95(
+        menuTrigger: /* @__PURE__ */ jsx96(
           "button",
           {
             className: "parameter-menu",
@@ -16692,7 +16781,7 @@ var ParameterMenuButton = forwardRef11(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx95(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx96(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -16702,8 +16791,8 @@ var ParameterMenuButton = forwardRef11(
 );
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css79 } from "@emotion/react";
-var emptyParameterShell = css79`
+import { css as css80 } from "@emotion/react";
+var emptyParameterShell = css80`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
@@ -16711,7 +16800,7 @@ var emptyParameterShell = css79`
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css79`
+var emptyParameterShellText = css80`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -16719,7 +16808,7 @@ var emptyParameterShellText = css79`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css79`
+var overrideMarker = css80`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -16730,7 +16819,7 @@ var overrideMarker = css79`
 `;
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -16804,23 +16893,23 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx96(
+      actionItems ? /* @__PURE__ */ jsx97(
         "div",
         {
           css: [
             inputMenu,
-            css80`
+            css81`
                 opacity: var(--opacity-100);
               `,
-            menuItems ? css80`
+            menuItems ? css81`
                     right: var(--spacing-md);
                   ` : void 0
           ],
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx96(
+      menuItems ? /* @__PURE__ */ jsx97(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx97(
         ParameterShellContext.Provider,
         {
           value: {
@@ -16832,29 +16921,29 @@ var ParameterShell = ({
           },
           children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx96(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx97(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx96(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx96(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx96(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx96(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ jsx97(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx97(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ jsx97(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx97(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx96("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx97("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx96(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx96("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx96("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx97(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx97("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx97("span", { hidden: true, children: "reset overridden value to default" }) }) });
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx98, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef12(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs66(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx97(ParameterImageInner, { ref, ...innerProps }),
+      /* @__PURE__ */ jsx98(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
@@ -16864,7 +16953,7 @@ var ParameterImageInner = forwardRef12((props, ref) => {
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
   return /* @__PURE__ */ jsxs66(Fragment16, { children: [
-    /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsx98(
       "input",
       {
         css: input2,
@@ -16876,21 +16965,21 @@ var ParameterImageInner = forwardRef12((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx97(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx98(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx99 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef13((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx98(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx98(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx99(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx99(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef13(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx98(
+    return /* @__PURE__ */ jsx99(
       "input",
       {
         css: input2,
@@ -16907,18 +16996,18 @@ var ParameterInputInner = forwardRef13(
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef14(
-  ({ disabled, onConnectLink, externalLink, ...props }, ref) => {
+  ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx100(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx99(
+        children: /* @__PURE__ */ jsx100(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -16932,12 +17021,12 @@ var ParameterLink = forwardRef14(
   }
 );
 var ParameterLinkInner = forwardRef14(
-  ({ externalLink, onConnectLink, disabled, buttonText = "Select link", ...props }, ref) => {
+  ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx99("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText });
+      return /* @__PURE__ */ jsx100("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
     return /* @__PURE__ */ jsxs67("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx100(
         "input",
         {
           type: "text",
@@ -16950,18 +17039,18 @@ var ParameterLinkInner = forwardRef14(
         }
       ),
       /* @__PURE__ */ jsxs67("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx100(
           "button",
           {
             type: "button",
             css: linkParameterBtn,
-            disabled,
+            disabled: disabled2,
             onClick: onConnectLink,
             title: "edit current selection",
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx99(
+        externalLink ? /* @__PURE__ */ jsx100(
           "a",
           {
             href: externalLink,
@@ -16969,7 +17058,7 @@ var ParameterLinkInner = forwardRef14(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx99(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx100(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -16978,7 +17067,7 @@ var ParameterLinkInner = forwardRef14(
 );
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17005,7 +17094,7 @@ var ParameterNameAndPublicIdInput = ({
   };
   autoFocus == null ? void 0 : autoFocus();
   return /* @__PURE__ */ jsxs68(Fragment17, { children: [
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx101(
       ParameterInput,
       {
         id: nameIdField,
@@ -17024,7 +17113,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx101(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -17038,11 +17127,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx100(
+        menuItems: /* @__PURE__ */ jsx101(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx100(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx101(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -17050,12 +17139,12 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx100(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx101(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css84 } from "@emotion/react";
+import { css as css85 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -17207,23 +17296,23 @@ function DisableStylesPlugin() {
 }
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css81 } from "@emotion/css";
-var textBold = css81`
+import { css as css82 } from "@emotion/css";
+var textBold = css82`
   font-weight: 700;
 `;
-var textItalic = css81`
+var textItalic = css82`
   font-style: italic;
 `;
-var textUnderline = css81`
+var textUnderline = css82`
   text-decoration: underline;
 `;
-var textStrikethrough = css81`
+var textStrikethrough = css82`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css81`
+var textUnderlineStrikethrough = css82`
   text-decoration: underline line-through;
 `;
-var textCode = css81`
+var textCode = css82`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -17234,68 +17323,68 @@ var textCode = css81`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css81`
+var textSuperscript = css82`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css81`
+var textSubscript = css82`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css81`
+var linkElement = css82`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css81`
+var h12 = css82`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css81`
+var h22 = css82`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css81`
+var h32 = css82`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css81`
+var h42 = css82`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css81`
+var h52 = css82`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css81`
+var h62 = css82`
   font-size: var(--fs-base);
 `;
-var heading1Element = css81`
+var heading1Element = css82`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css81`
+var heading2Element = css82`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css81`
+var heading3Element = css82`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css81`
+var heading4Element = css82`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css81`
+var heading5Element = css82`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css81`
+var heading6Element = css82`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css81`
+var paragraphElement = css82`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
@@ -17303,7 +17392,7 @@ var paragraphElement = css81`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css81`
+var orderedListElement = css82`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17332,7 +17421,7 @@ var orderedListElement = css81`
     }
   }
 `;
-var unorderedListElement = css81`
+var unorderedListElement = css82`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17353,13 +17442,13 @@ var unorderedListElement = css81`
     }
   }
 `;
-var listItemElement = css81`
+var listItemElement = css82`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css81`
+var nestedListItemElement = css82`
   list-style-type: none;
 `;
-var blockquoteElement = css81`
+var blockquoteElement = css82`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17369,7 +17458,7 @@ var blockquoteElement = css81`
     margin-bottom: 0;
   }
 `;
-var codeElement = css81`
+var codeElement = css82`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17386,7 +17475,7 @@ var codeElement = css81`
 `;
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -17440,7 +17529,7 @@ var getSelectedNode = (selection) => {
 };
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx102, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17727,16 +17816,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css82`
+var linkPopover = css83`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css82`
+var linkPopoverContainer = css83`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css82`
+var linkPopoverAnchor = css83`
   ${link}
   ${linkColorDefault}
 `;
@@ -17884,7 +17973,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     });
   };
   return /* @__PURE__ */ jsxs69(Fragment18, { children: [
-    /* @__PURE__ */ jsx101(
+    /* @__PURE__ */ jsx102(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -17894,7 +17983,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx101(
+    linkPopoverState ? /* @__PURE__ */ jsx102(
       "div",
       {
         css: linkPopover,
@@ -17904,7 +17993,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs69("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx101(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx102(
             "a",
             {
               href: parsePath(
@@ -17916,7 +18005,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx102(
             Button,
             {
               size: "xs",
@@ -17924,7 +18013,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx101(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx102(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -17949,7 +18038,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect12 } from "react";
-import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx103 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -17979,11 +18068,11 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx102(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx103(TabIndentationPlugin, {});
 }
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css84 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -18006,8 +18095,8 @@ import {
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
-import { Fragment as Fragment19, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var toolbar = css83`
+import { Fragment as Fragment19, jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -18019,7 +18108,7 @@ var toolbar = css83`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css83`
+var toolbarGroup = css84`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -18035,7 +18124,7 @@ var toolbarGroup = css83`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css83`
+var richTextToolbarButton = css84`
   align-items: center;
   appearance: none;
   border: 0;
@@ -18048,17 +18137,17 @@ var richTextToolbarButton = css83`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css83`
+var richTextToolbarButtonActive = css84`
   background: var(--gray-200);
 `;
-var toolbarIcon = css83`
+var toolbarIcon = css84`
   color: inherit;
 `;
-var toolbarChevron = css83`
+var toolbarChevron = css84`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx103(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx104(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -18175,7 +18264,7 @@ var RichTextToolbar = ({ config, customControls }) => {
         menuTrigger: /* @__PURE__ */ jsxs70("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx103(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx104(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -18185,7 +18274,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx103(
+          ].map((element) => /* @__PURE__ */ jsx104(
             MenuItem,
             {
               onClick: () => {
@@ -18195,12 +18284,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx103(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx104(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
     visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx103(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx103(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx104(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx104(
         "button",
         {
           onClick: () => {
@@ -18210,16 +18299,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx103(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx104(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx103("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx103(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx104("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx104(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx103(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx104(
             MenuItem,
             {
               onClick: () => {
@@ -18233,18 +18322,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx103(
+      linkElementVisible ? /* @__PURE__ */ jsx104(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx104(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
       visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment19, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx103(
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx104(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx104(
           "button",
           {
             onClick: () => {
@@ -18254,10 +18343,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx103(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx104(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx104(
           "button",
           {
             onClick: () => {
@@ -18267,32 +18356,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx103(
+      quoteElementVisible ? /* @__PURE__ */ jsx104(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx104(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx103(
+      codeElementVisible ? /* @__PURE__ */ jsx104(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx104(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx103("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx104("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -18406,7 +18495,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx105, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18445,7 +18534,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx105(
           ParameterRichTextInner,
           {
             value,
@@ -18463,23 +18552,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx104(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx104(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx105(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx105(Fragment20, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css84`
+var editorWrapper = css85`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css84`
+var editorContainer = css85`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css84`
+var editorPlaceholder = css85`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18490,7 +18579,7 @@ var editorPlaceholder = css84`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css84`
+var editorInput = css85`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18575,7 +18664,7 @@ var ParameterRichTextInner = ({
     editable: !readOnly
   };
   return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    /* @__PURE__ */ jsx104("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx104(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx104(
+    /* @__PURE__ */ jsx105("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx105(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx105(
       RichText,
       {
         onChange,
@@ -18632,19 +18721,19 @@ var RichText = ({
     };
   }, []);
   return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx104(RichTextToolbar_default, { config, customControls }),
+    readOnly ? null : /* @__PURE__ */ jsx105(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx105(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx104(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx104("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx105(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx105("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx104(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx104(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx105(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx105(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx105(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -18654,21 +18743,21 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx104(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx104(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx104(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx104(Fragment20, { children })
+      /* @__PURE__ */ jsx105(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx105(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx105(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx105(Fragment20, { children })
     ] })
   ] });
 };
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx105, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef15(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx105(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx105(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx106(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx106(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef15(
@@ -18683,10 +18772,10 @@ var ParameterSelectInner = forwardRef15(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx105("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx106("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx105("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx106("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -18696,14 +18785,14 @@ var ParameterSelectInner = forwardRef15(
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx107 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef16((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx106(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx106(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx107(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx107(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     "textarea",
     {
       css: [input2, textarea2],
@@ -18717,24 +18806,24 @@ var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx107, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef17((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx108(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx108(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef17(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs73("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx107("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx107("span", { css: inlineLabel2, children: label })
+      /* @__PURE__ */ jsx108("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx108("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css85 } from "@emotion/react";
-var container = css85`
+import { css as css86, keyframes as keyframes4 } from "@emotion/react";
+var container2 = css86`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -18744,14 +18833,42 @@ var container = css85`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css85`
-    background-color: var(--accent-light);
+  primary: css86`
+    --progress-color: var(--accent-light);
+  `,
+  secondary: css86`
+    --progress-color: var(--accent-alt-light);
   `,
-  secondary: css85`
-    background-color: var(--brand-secondary-5);
+  destructive: css86`
+    --progress-color: var(--brand-secondary-5);
   `
 };
-var bar = css85`
+var slidingBackgroundPosition = keyframes4`
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 64px 0;
+  }
+`;
+var determinate = css86`
+  background-color: var(--progress-color);
+`;
+var indeterminate = css86`
+  background-image: linear-gradient(
+    45deg,
+    var(--progress-color) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--progress-color) 50%,
+    var(--progress-color) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 64px 64px;
+  animation: ${slidingBackgroundPosition} 1s linear infinite;
+`;
+var bar = css86`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -18759,25 +18876,35 @@ var bar = css85`
 `;
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
-function ProgressBar({ className, current, max, theme = "primary" }) {
+import { jsx as jsx109 } from "@emotion/react/jsx-runtime";
+function ProgressBar({
+  current,
+  max,
+  theme = "primary",
+  variant = "determinate",
+  ...props
+}) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx109(
     "div",
     {
-      className,
-      css: container,
+      css: container2,
       role: "progressbar",
       "aria-busy": valuePercentage !== 100,
       "aria-invalid": false,
       "aria-valuemin": 0,
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
-      children: /* @__PURE__ */ jsx108(
+      ...props,
+      children: /* @__PURE__ */ jsx109(
         "div",
         {
-          css: [bar, themeMap[theme]],
+          css: [
+            themeMap[theme],
+            variant === "indeterminate" ? indeterminate : determinate,
+            bar
+          ],
           style: {
             transform: `scaleX(${valuePercentage / 100})`
           },
@@ -18789,28 +18916,28 @@ function ProgressBar({ className, current, max, theme = "primary" }) {
 }
 // src/components/ProgressList/ProgressList.tsx
-import { css as css87 } from "@emotion/react";
+import { css as css88 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo4 } from "react";
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css86 } from "@emotion/react";
-var progressListStyles = css86`
+import { css as css87 } from "@emotion/react";
+var progressListStyles = css87`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css86`
+var progressListItemStyles = css87`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -18824,8 +18951,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx109("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx110("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx110(
       ProgressListItem,
       {
         status,
@@ -18858,12 +18985,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css87`
+      return errorLevel === "caution" ? css88`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css87`
+          ` : css88`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18871,35 +18998,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css87`
+      completed: css88`
         opacity: 0.75;
       `,
-      inProgress: css87`
+      inProgress: css88`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css87`
+      queued: css88`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx109(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx110(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsx110(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs74("div", { children: [
       children,
-      /* @__PURE__ */ jsx109("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx110("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css89 } from "@emotion/react";
+import { css as css90 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css88 } from "@emotion/react";
-var segmentedControlStyles = css88`
+import { css as css89 } from "@emotion/react";
+var segmentedControlStyles = css89`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18918,14 +19045,14 @@ var segmentedControlStyles = css88`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css88`
+var segmentedControlVerticalStyles = css89`
   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 = css88`
+var segmentedControlItemStyles = css89`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18933,10 +19060,10 @@ var segmentedControlItemStyles = css88`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css88`
+var segmentedControlInputStyles = css89`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css88`
+var segmentedControlLabelStyles = (checked, disabled2) => css89`
   position: relative;
   display: flex;
   align-items: center;
@@ -18978,7 +19105,7 @@ var segmentedControlLabelStyles = (checked, disabled) => css88`
   // once Firefox supports :has selector
   @supports not selector(:has(*)) {
     // equivalent to &:has(:checked:not(:disabled))
-    ${checked && !disabled ? `
+    ${checked && !disabled2 ? `
     background-color: var(--segmented-control-selected-color);
     outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
     box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
@@ -18988,45 +19115,45 @@ var segmentedControlLabelStyles = (checked, disabled) => css88`
     // equivalent to &:hover:not(:has(:disabled, :checked))
     &:hover {
-      ${!checked && !disabled ? `background-color: var(--gray-100);` : void 0}
+      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
     }
     // equivalent to &:has(:disabled)
-    ${disabled ? `
+    ${disabled2 ? `
       color: var(--gray-400);
       cursor: default;` : void 0}
     // equivalent to &:has(:checked:disabled)
-    ${checked && disabled && `
+    ${checked && disabled2 && `
     color: var(--gray-50);
     background-color: var(--gray-400);
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css88`
+var segmentedControlLabelIconOnlyStyles = css89`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css88`
+var segmentedControlLabelCheckStyles = css89`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css88`
+var segmentedControlLabelContentStyles = css89`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css88``;
+var segmentedControlLabelTextStyles = css89``;
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
   value,
   onChange,
   noCheckmark = false,
-  disabled = false,
+  disabled: disabled2 = false,
   orientation = "horizontal",
   size = "md",
   ...props
@@ -19041,28 +19168,28 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css89({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css89({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css89({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css90({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css90({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css90({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
         const text = option.label ? option.label : option.icon ? null : String(option.value);
-        const isDisabled = disabled || option.disabled;
-        return /* @__PURE__ */ jsx110(
+        const isDisabled = disabled2 || option.disabled;
+        return /* @__PURE__ */ jsx111(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx110("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
+            children: /* @__PURE__ */ jsx111("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
               "label",
               {
                 css: [
@@ -19071,7 +19198,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx110(
+                  /* @__PURE__ */ jsx111(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -19083,10 +19210,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx110(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx111(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx110(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx110("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx111(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ jsx111("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -19100,18 +19227,18 @@ var SegmentedControl = ({
 };
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css90, keyframes as keyframes4 } from "@emotion/react";
-var lightFadingOut = keyframes4`
+import { css as css91, keyframes as keyframes5 } from "@emotion/react";
+var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css90`
+var skeletonStyles = css91`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -19119,7 +19246,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx111(
+}) => /* @__PURE__ */ jsx112(
   "div",
   {
     css: [
@@ -19142,8 +19269,8 @@ var Skeleton = ({
 import * as React23 from "react";
 // src/components/Switch/Switch.styles.ts
-import { css as css91 } from "@emotion/react";
-var SwitchInputContainer = css91`
+import { css as css92 } from "@emotion/react";
+var SwitchInputContainer = css92`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -19152,7 +19279,7 @@ var SwitchInputContainer = css91`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css91`
+var SwitchInput = css92`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -19190,7 +19317,7 @@ var SwitchInput = css91`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css91`
+var SwitchInputDisabled = css92`
   opacity: var(--opacity-50);
   cursor: not-allowed;
@@ -19198,11 +19325,10 @@ var SwitchInputDisabled = css91`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css91`
+var SwitchInputLabel = css92`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
-  font-weight: var(--fw-bold);
   line-height: 1.25;
   padding-inline: var(--spacing-2xl) 0;
@@ -19220,14 +19346,14 @@ var SwitchInputLabel = css91`
     top: 0;
   }
 `;
-var SwitchText = css91`
+var SwitchText = css92`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx113, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -19236,10 +19362,10 @@ var Switch = React23.forwardRef(
     }
     return /* @__PURE__ */ jsxs76(Fragment21, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx112("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx112("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx113("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx113("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx112("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx113("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -19249,8 +19375,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 // src/components/Table/Table.styles.ts
-import { css as css92 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92`
+import { css as css93 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css93`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -19261,55 +19387,55 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92
     padding: ${cellPadding};
   }
 `;
-var tableHead = css92`
+var tableHead = css93`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css92`
+var tableRow = css93`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css92`
+var tableCellHead = css93`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 // src/components/Table/Table.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx114("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx114("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx114("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx114("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx114("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx114("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx114("td", { ref, ...otherProps, children });
   }
 );
@@ -19323,8 +19449,8 @@ import {
 } from "reakit/Tab";
 // src/components/Tabs/Tabs.styles.ts
-import { css as css93 } from "@emotion/react";
-var tabButtonStyles = css93`
+import { css as css94 } from "@emotion/react";
+var tabButtonStyles = css94`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -19341,14 +19467,14 @@ var tabButtonStyles = css93`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css93`
+var tabButtonGroupStyles = css94`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -19378,24 +19504,24 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx114(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx115(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx115(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx115(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx115(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css94 } from "@emotion/react";
-var StatusBulletContainer = css94`
+import { css as css95 } from "@emotion/react";
+var StatusBulletContainer = css95`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19412,33 +19538,33 @@ var StatusBulletContainer = css94`
     display: block;
   }
 `;
-var StatusBulletBase = css94`
+var StatusBulletBase = css95`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css94`
+var StatusBulletSmall = css95`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css94`
+var StatusDraft = css95`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css94`
+var StatusModified = css95`
   &: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 = css94`
+var StatusError = css95`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19451,24 +19577,24 @@ var StatusError = css94`
     );
   }
 `;
-var StatusPublished = css94`
+var StatusPublished = css95`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css94`
+var StatusOrphan = css95`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css94`
+var StatusUnknown = css95`
   &:before {
     background: var(--brand-secondary-1);
   }
 `;
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19487,7 +19613,7 @@ var StatusBullet = ({
     Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx116(
     "span",
     {
       role: "status",
@@ -19575,6 +19701,7 @@ export {
   Modal,
   MultilineChip,
   PageHeaderSection,
+  Pagination,
   Paragraph,
   ParameterDataResource,
   ParameterDrawerHeader,