@uniformdev/design-system 19.77.0 → 19.77.1-alpha.47

package/dist/esm/index.js

@@ -27,7 +27,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root, :host {
+        :root, :host, ::backdrop {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -133,12 +133,22 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* max text width */
           --prose: 65ch;
 
+          /* elevation */
+          --elevation-0: none;
+          --elevation-100: 0 0 2px 0 rgba(13, 24, 39, 0.08), 0 2px 4px 0 rgba(17, 24, 39, 0.08);
+          --elevation-200: 0 0 2px 0 rgba(17, 24, 39, 0.07), 0 2px 4px 0 rgba(13, 24, 39, 0.07), 0 4px 8px 0 rgba(17, 24, 39, 0.07);
+          --elevation-300: 0 8px 16px 0 rgba(17, 24, 39, 0.06), 0 2px 4px 0 rgba(13, 24, 39, 0.06), 0 4px 8px 0 rgba(17, 24, 39, 0.06);
+          --elevation-400: 0 8px 16px 0 rgba(17, 24, 39, 0.05), 0 16px 24px 0 rgba(13, 24, 39, 0.05), 0 4px 8px 0 rgba(17, 24, 39, 0.05);
+          --elevation-500: 0 8px 16px 0 rgba(17, 24, 39, 0.04), 0 16px 24px 0 rgba(13, 24, 39, 0.04), 0 24px 32px 0 rgba(17, 24, 39, 0.04);
+          --elevation-600: 0 32px 40px 0 rgba(17, 24, 39, 0.03), 0 16px 24px 0 rgba(13, 24, 39, 0.03), 0 24px 32px 0 rgba(17, 24, 39, 0.03);
+
+          /* deprecated in favour of --elevation-* variables */
           /* brand shadow styles */
-          --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
-          --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
-            rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
-          --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
-          --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
+          --shadow-sm: var(--elevation-100);
+          --shadow-base: var(--elevation-200);
+          --shadow-md: var(--elevation-300);
+          --shadow-xl: var(--elevation-600);
+          /* deprecated in favour of --elevation-* variables */
 
           /* rounder corners  */
           --rounded-sm: 0.125rem;   /* 2px */
@@ -13093,6 +13103,13 @@ var detailsContent = css41`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
+var detailsContentIndented = css41`
+  margin-left: calc(1.25rem / 2);
+  border-left: 1px solid var(--gray-300);
+  padding-top: calc(var(--spacing-md) / 2);
+  padding-left: var(--spacing-base);
+  padding-bottom: var(--spacing-sm);
+`;
 var summary = css41`
   align-items: center;
   cursor: pointer;
@@ -13107,6 +13124,9 @@ var summary = css41`
     display: none;
   }
 `;
+var summaryCompact = css41`
+  padding: 0;
+`;
 var summaryIcon = css41`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
@@ -13122,6 +13142,8 @@ var Details = ({
   children,
   isOpenByDefault = false,
   isOpen,
+  isIndented = false,
+  isCompact = false,
   onChange,
   ...props
 }) => {
@@ -13143,7 +13165,7 @@ var Details = ({
       ref: detailsRef,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs25("summary", { "data-testid": "summary", css: summary, children: [
+        /* @__PURE__ */ jsxs25("summary", { "data-testid": "summary", css: [summary, isCompact ? summaryCompact : null], children: [
           /* @__PURE__ */ jsx42(
             Icon,
             {
@@ -13155,7 +13177,14 @@ var Details = ({
           ),
           summary2
         ] }),
-        memoizedIsOpen ? /* @__PURE__ */ jsx42("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+        memoizedIsOpen ? /* @__PURE__ */ jsx42(
+          "div",
+          {
+            "data-testid": "details-content",
+            css: [detailsContent, isIndented ? detailsContentIndented : null],
+            children
+          }
+        ) : null
       ]
     }
   );
@@ -13410,10 +13439,12 @@ var useCurrentDrawer = () => {
 };
 var Drawer = React13.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
+    var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    return drawerTakeoverStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: drawerTakeoverStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
+    const resolvedStickyStackIdRef = useRef3((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
       /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx44(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
@@ -13825,19 +13856,29 @@ import { MdWarning } from "@react-icons/all-files/md/MdWarning";
 
 // src/components/Input/styles/ErrorMessage.styles.ts
 import { css as css47 } from "@emotion/react";
-var ErrorText = css47`
+var errorMessageStyles = css47`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
   gap: var(--spacing-sm);
 `;
+var errorMessageTextStyles = css47`
+  /* We hide the text at width 5rem or below */
+  max-width: max(0px, calc((100% - 5rem) * 9999));
+  overflow: hidden;
+`;
+var errorMessageTextTruncatedStyles = css47`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
 
 // src/components/Input/ErrorMessage.tsx
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
+var ErrorMessage = ({ message, testId, truncated = false, ...otherProps }) => {
+  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: errorMessageStyles, "data-testid": testId, ...otherProps, title: message, children: [
     /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
-    message
+    /* @__PURE__ */ jsx51("span", { css: [errorMessageTextStyles, truncated ? errorMessageTextTruncatedStyles : null], children: message })
   ] }) : null;
 };
 
@@ -14571,6 +14612,15 @@ var imgLoaded = css54`
 var brokenImage = css54`
   height: 160px;
 `;
+var brokenImageMessage = css54`
+  position: absolute;
+  bottom: var(--spacing-xs);
+  left: var(--spacing-xs);
+  width: 100%;
+  justify-content: center;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--fs-sm);
+`;
 var variantFillImageWrapper = css54`
   display: flex;
   justify-content: center;
@@ -14579,6 +14629,7 @@ var variantFillImageWrapper = css54`
 `;
 var variantFillImageImg = css54`
   height: inherit;
+  width: inherit;
 `;
 
 // src/components/Image/ImageBroken.tsx
@@ -14617,7 +14668,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -14696,18 +14747,26 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
-          /* @__PURE__ */ jsx66(
-            ImageBroken,
-            {
-              css: [brokenImage, img, imgLoaded],
-              width,
-              height,
-              "data-testid": "broken-image"
-            }
-          ),
-          /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText })
-        ] }) : null
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              position: "relative",
+              ...variant === "fill-container" ? {} : { width, height }
+            },
+            children: [
+              /* @__PURE__ */ jsx66(
+                ImageBroken,
+                {
+                  css: [brokenImage, img, imgLoaded],
+                  "data-testid": "broken-image"
+                }
+              ),
+              /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -15087,10 +15146,10 @@ var IntegrationLoadingFrame = css58`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment11, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx72(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx72(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -15332,7 +15391,7 @@ var IntegrationModalHeaderContentWrapper = css63`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment12, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15373,7 +15432,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ jsxs49(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment11, { children: [
     /* @__PURE__ */ jsx78(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx78(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -15959,7 +16018,7 @@ var Popover = css71`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment13, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15973,7 +16032,7 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment12, { children: [
     /* @__PURE__ */ jsx87(
       PopoverDisclosure,
       {
@@ -15981,7 +16040,7 @@ var Popover2 = ({
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment13, { children: [
+        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment12, { children: [
           /* @__PURE__ */ jsx87(Icon, { icon, iconColor, size: iconSize }),
           /* @__PURE__ */ jsx87("span", { hidden: true, children: buttonText })
         ] })
@@ -16004,9 +16063,11 @@ var cardBase = css72`
   min-height: unset;
   outline: none;
   cursor: pointer;
+  transition: border-color var(--duration-xfast) ease-in-out;
 
   &:hover {
     --mediacard-title-color: var(--brand-secondary-1);
+    border-color: var(--primary-action-hover);
   }
 `;
 var coverWrapper = css72`
@@ -16083,7 +16144,7 @@ var MediaCard = ({
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, children: [
+  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, "data-testId": "card-item", children: [
     /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: coverWrapper, children: cover }),
     /* @__PURE__ */ jsx88("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
@@ -16115,7 +16176,16 @@ var MediaCard = ({
           children: /* @__PURE__ */ jsx88(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx88("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
+              menuTrigger: /* @__PURE__ */ jsx88(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "More options",
+                  css: menuButton,
+                  "data-testId": "button-more",
+                  children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                }
+              ),
               menuLabel: `Menu of ${title2}`,
               children: menuItems
             }
@@ -16128,7 +16198,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React19 from "react";
+import React19, { useEffect as useEffect10, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css73 } from "@emotion/react";
@@ -16140,26 +16210,33 @@ var modalWrapperStyles = css73`
   justify-content: center;
   z-index: var(--z-drawer);
 `;
-var modalBackdropStyles = css73`
-  position: absolute;
-  inset: 0;
-  background-color: var(--brand-secondary-1);
-  opacity: 0.4;
-`;
 var modalStyles = css73`
   position: relative;
+  max-width: calc(100% - var(--spacing-base) * 2);
+  max-height: calc(100% - var(--spacing-base) * 2);
+  padding: 0;
+  background-color: transparent;
+  z-index: 1;
+
+  &::backdrop {
+    background-color: var(--brand-secondary-1);
+    opacity: 0.4;
+  }
+`;
+var modalInnerStyles = css73`
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  max-width: calc(100% - var(--spacing-base) * 2);
-  max-height: calc(100% - var(--spacing-base) * 2);
   gap: var(--spacing-base);
   background: var(--gray-50);
+  color: unset;
+  padding: var(--spacing-base);
+  box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-300);
-  padding: var(--spacing-base);
-  color: unset;
-  z-index: 1;
 `;
 var modalHeaderStyles = css73`
   display: flex;
@@ -16168,6 +16245,9 @@ var modalHeaderStyles = css73`
   font-size: var(--fs-md);
   line-height: 1.2;
 `;
+var modalHeaderHeaderStyles = css73`
+  max-width: calc(100% - 3rem);
+`;
 var modalCloseButtonStyles = css73`
   display: block;
   padding: 0;
@@ -16195,47 +16275,63 @@ var Modal = React19.forwardRef(
     onRequestClose,
     width = defaultModalWidth,
     height = defaultModalHeight,
-    wrapperClassName,
     withoutContentPadding = false,
     buttonGroup,
     ...modalProps
   }, ref) => {
+    const dialogRef = useRef6(null);
     useShortcut({
       handler: onRequestClose,
       shortcut: "escape"
     });
-    return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ jsx89("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ jsxs59(
-        "dialog",
-        {
-          ref,
-          css: modalStyles,
-          style: { width, height },
-          "data-testid": "side-dialog",
-          ...modalProps,
-          children: [
-            /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-              /* @__PURE__ */ jsx89("div", { children: header }),
-              /* @__PURE__ */ jsx89(
-                Button,
-                {
-                  type: "button",
-                  onClick: onRequestClose,
-                  css: modalCloseButtonStyles,
-                  title: "Close dialog",
-                  buttonType: "ghost",
-                  "data-testid": "close-dialog",
-                  children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-            buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
-          ]
-        }
-      )
-    ] });
+    useEffect10(() => {
+      var _a;
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+      return () => {
+        var _a2;
+        return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+      };
+    }, []);
+    return /* @__PURE__ */ jsx89(
+      "dialog",
+      {
+        ref: (element) => {
+          dialogRef.current = element;
+          if (!ref) {
+            return;
+          }
+          if (typeof ref === "function") {
+            ref(element);
+          } else {
+            ref.current = element;
+          }
+        },
+        css: modalStyles,
+        style: { width, height: height === "auto" ? "min-content" : height },
+        "data-testid": "side-dialog",
+        onClick: onRequestClose,
+        ...modalProps,
+        children: /* @__PURE__ */ jsxs59("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+            /* @__PURE__ */ jsx89("div", { css: modalHeaderHeaderStyles, children: header }),
+            /* @__PURE__ */ jsx89(
+              Button,
+              {
+                type: "button",
+                onClick: onRequestClose,
+                css: modalCloseButtonStyles,
+                title: "Close dialog",
+                buttonType: "ghost",
+                "data-testid": "close-dialog",
+                children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+          buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
+        ] })
+      }
+    );
   }
 );
 Modal.displayName = "Modal";
@@ -16800,7 +16896,7 @@ var previewModalImage = css79`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment14, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState9(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
@@ -16818,7 +16914,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx95(Fragment14, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx95(Fragment13, { children: createPortal2(
     /* @__PURE__ */ jsx95(
       Modal,
       {
@@ -16955,6 +17051,7 @@ var ParameterShell = ({
   onResetOverriddenValue,
   title: title2,
   children,
+  isParameterGroup = false,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = useState10(void 0);
@@ -16998,7 +17095,7 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx98("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
             hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx98(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
@@ -17017,7 +17114,7 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx98(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx98("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx98("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment15, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef13(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -17031,7 +17128,7 @@ var ParameterImageInner = forwardRef13((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs66(Fragment14, { children: [
     /* @__PURE__ */ jsx99(
       "input",
       {
@@ -17146,7 +17243,7 @@ var ParameterLinkInner = forwardRef15(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment16, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17172,7 +17269,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment15, { children: [
     /* @__PURE__ */ jsx102(
       ParameterInput,
       {
@@ -17337,7 +17434,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect14, useRef as useRef7 } from "react";
+import { useEffect as useEffect15, useRef as useRef8 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -17358,10 +17455,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect10(() => {
+  useEffect11(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -17570,7 +17667,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef7, useState as useState11 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17608,7 +17705,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment17, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx103, 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
@@ -17914,16 +18011,16 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
   };
   const [editor] = useLexicalComposerContext2();
   const [linkPopoverState, setLinkPopoverState] = useState11();
-  const linkPopoverElRef = useRef6(null);
+  const linkPopoverElRef = useRef7(null);
   const [isEditorFocused, setIsEditorFocused] = useState11(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState11(false);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -18024,7 +18121,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect11(() => {
+  useEffect12(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18051,7 +18148,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment16, { children: [
     /* @__PURE__ */ jsx103(
       NodeEventPlugin,
       {
@@ -18116,7 +18213,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
@@ -18140,7 +18237,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect12(() => {
+  useEffect13(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -18173,8 +18270,8 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
-import { Fragment as Fragment18, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useState as useState12 } from "react";
+import { Fragment as Fragment17, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -18316,7 +18413,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -18326,7 +18423,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18411,7 +18508,7 @@ var RichTextToolbar = ({ config, customControls }) => {
           children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment18, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment17, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
@@ -18574,7 +18671,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18631,7 +18728,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment19, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18742,7 +18839,7 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
       RichText,
       {
@@ -18780,14 +18877,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = useRef7(null);
+  const editorContainerRef = useRef8(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect14(() => {
+  useEffect15(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect14(() => {
+  useEffect15(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -18799,7 +18896,7 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
       /* @__PURE__ */ jsx106(
@@ -18825,7 +18922,7 @@ var RichText = ({
       /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
       /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
       /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx106(Fragment19, { children })
+      /* @__PURE__ */ jsx106(Fragment18, { children })
     ] })
   ] });
 };
@@ -19432,14 +19529,14 @@ var SwitchText = css92`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs76(Fragment20, { children: [
+    return /* @__PURE__ */ jsxs76(Fragment19, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
         /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
         /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
@@ -19519,7 +19616,7 @@ var TableCellData = React24.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext5, useContext as useContext6, useEffect as useEffect15, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useContext as useContext6, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -19569,7 +19666,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useTabState({ ...props, selectedId: selected });
-  useEffect15(() => {
+  useEffect16(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -19578,7 +19675,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.history.pushState(null, "", hashValue);
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }