@uniformdev/design-system 19.45.0 → 19.45.2-alpha.6

package/dist/esm/index.js

@@ -15181,57 +15181,67 @@ var ScrollableListItem = ({
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 import { css as css67, keyframes as keyframes3 } from "@emotion/react";
-var bounceFade = keyframes3`
+function bounceFade(size) {
+  const bounceHeight = size === "lg" ? 10 : 5;
+  return keyframes3`
     0%, 100% {
-        opacity: 1.0;
-        transform: translateY(0);
+      opacity: 1.0;
+      transform: translateY(0);
     }
     30% {
-        opacity: 0.6;
+      opacity: 0.6;
     }
     80% {
-        opacity: 0.4;
-        transform: translateY(-10px);
+      opacity: 0.4;
+      transform: translateY(-${bounceHeight}px);
     }
     90% {
       opacity: 0.2;
-        transform: translateY(-5px);
+      transform: translateY(-${bounceHeight / 2}px);
     }
 `;
+}
 var loader = css67`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = css67`
-  background-color: var(--gray-700);
-  display: block;
-  border-radius: var(--rounded-full);
-  animation: ${bounceFade} 0.75s infinite ease-in-out;
-  width: 8px;
-  height: 8px;
-  margin: 0 var(--spacing-xs);
-  transform: translateY(0);
+function loadingDot(size) {
+  const dotSize = size === "lg" ? 8 : 4;
+  return css67`
+    background-color: var(--gray-700);
+    display: block;
+    border-radius: var(--rounded-full);
+    animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
+    width: ${dotSize}px;
+    height: ${dotSize}px;
+    margin: 0 var(--spacing-${size === "lg" ? "xs" : "2xs"});
+    transform: translateY(0);
 
-  &:nth-of-type(1) {
-    animation-delay: 0.15s;
-  }
+    &:nth-of-type(1) {
+      animation-delay: 0.15s;
+    }
 
-  &:nth-of-type(2) {
-    animation-delay: 0.3s;
-  }
+    &:nth-of-type(2) {
+      animation-delay: 0.3s;
+    }
 
-  &:nth-of-type(3) {
-    animation-delay: 0.6s;
-  }
-`;
+    &:nth-of-type(3) {
+      animation-delay: 0.6s;
+    }
+  `;
+}
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx81, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = ({ ...props }) => {
+var LoadingIndicator = ({
+  size = "lg",
+  ...props
+}) => {
+  const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs53("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx81("span", { css: loadingDot }),
-    /* @__PURE__ */ jsx81("span", { css: loadingDot }),
-    /* @__PURE__ */ jsx81("span", { css: loadingDot })
+    /* @__PURE__ */ jsx81("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx81("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx81("span", { css: dotStyle })
   ] });
 };
 
@@ -15724,17 +15734,6 @@ var textarea2 = css71`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = css71`
-  background: var(--white);
-`;
-var img = css71`
-  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
-  object-fit: contain;
-  max-width: 100%;
-  height: auto;
-  opacity: var(--opacity-0);
-  margin: var(--spacing-sm) auto 0;
-`;
 var dataConnectButton = css71`
   align-items: center;
   appearance: none;
@@ -15921,6 +15920,7 @@ import { forwardRef as forwardRef11, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { useCallback as useCallback3, useEffect as useEffect9, useState as useState9 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/utils/url.ts
 var isValidUrl = (url, options = {}) => {
@@ -15932,17 +15932,113 @@ var isValidUrl = (url, options = {}) => {
   }
 };
 
+// src/components/ParameterInputs/styles/ParameterImage.styles.ts
+import { css as css74 } from "@emotion/react";
+var imageWrapper = css74`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--gray-50);
+  max-width: 100%;
+  max-height: 100%;
+`;
+var imageWrapperLoading = css74`
+  animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
+`;
+var img = css74`
+  object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  opacity: var(--opacity-0);
+  margin: 0 auto;
+`;
+var imgLoading = css74`
+  opacity: 0;
+`;
+var imgLoaded = css74`
+  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
+  opacity: 1;
+`;
+var brokenImage = css74`
+  height: 160px;
+`;
+var previewWrapper = css74`
+  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 = css74`
+  display: block;
+  width: 100%;
+
+  img {
+    max-height: 9rem;
+  }
+`;
+var previewModalWrapper = css74`
+  background: var(--gray-50);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  border: solid 1px var(--gray-300);
+  border-radius: var(--rounded-sm);
+`;
+var previewModalImage = css74`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  img {
+    max-height: 100%;
+  }
+`;
+
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
+  const [showModal, setShowModal] = useState9(false);
+  return imageSrc ? /* @__PURE__ */ jsxs60("div", { css: previewWrapper, children: [
+    /* @__PURE__ */ jsx88(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx88(
+      "button",
+      {
+        css: previewLink,
+        onClick: () => {
+          setShowModal(true);
+        },
+        children: /* @__PURE__ */ jsx88(Image, { src: imageSrc })
+      }
+    )
+  ] }) : null;
+}
+var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
+  return open ? /* @__PURE__ */ jsx88(Fragment12, { children: createPortal2(
+    /* @__PURE__ */ jsx88(
+      Modal,
+      {
+        header: "Image Preview",
+        onRequestClose,
+        withoutContentPadding: true,
+        buttonGroup: /* @__PURE__ */ jsx88(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx88("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx88(Image, { src: imageSrc, css: previewModalImage }) })
+      }
+    ),
+    document.body
+  ) }) : null;
+};
+var Image = ({ src, className }) => {
   const [loading, setLoading] = useState9(false);
   const [loadErrorText, setLoadErrorText] = useState9("");
   const errorText = "The text you provided is not a valid URL";
   const updateImageSrc = useCallback3(() => {
     let message = "";
     try {
-      if (imageSrc !== "") {
-        const url = String(imageSrc).startsWith("//") ? `${location.protocol}${imageSrc}` : String(imageSrc);
+      if (src !== "") {
+        const url = String(src).startsWith("//") ? `${location.protocol}${src}` : String(src);
         if (!isValidUrl(url) || !url.startsWith("https")) {
           throw Error(errorText);
         }
@@ -15952,43 +16048,49 @@ function ParameterImagePreview({ imageSrc }) {
       message = errorText;
     }
     setLoadErrorText(message);
-  }, [setLoadErrorText, imageSrc]);
+  }, [setLoadErrorText, src]);
   useEffect9(() => {
     updateImageSrc();
-  }, [imageSrc]);
+  }, [src]);
   const handleLoadEvent = () => {
     setLoadErrorText("");
-    if (imageSrc) {
+    if (src) {
       setLoading(true);
     }
     const timer = setTimeout(() => {
       setLoading(false);
-    }, 200);
+    }, 1e3);
     return () => clearTimeout(timer);
   };
   const handleErrorEvent = () => {
     setLoadErrorText("The value you provided is not a valid image URL");
   };
-  return /* @__PURE__ */ jsxs60("div", { css: imageWrapper, children: [
-    imageSrc && !loadErrorText ? /* @__PURE__ */ jsx88(
-      "img",
-      {
-        src: imageSrc,
-        css: img,
-        alt: "image preview",
-        onLoad: handleLoadEvent,
-        onError: handleErrorEvent,
-        loading: "lazy",
-        "data-testid": "parameter-image-preview"
-      }
-    ) : null,
-    imageSrc && loadErrorText ? /* @__PURE__ */ jsxs60(Fragment12, { children: [
-      /* @__PURE__ */ jsx88(BrokenImage, { css: img }),
-      /* @__PURE__ */ jsx88(ErrorMessage, { message: loadErrorText })
-    ] }) : null,
-    loading && /* @__PURE__ */ jsx88(LoadingIcon, {})
-  ] });
-}
+  return /* @__PURE__ */ jsxs60(
+    "span",
+    {
+      className,
+      css: [imageWrapper, loading ? imageWrapperLoading : null],
+      children: [
+        src && !loadErrorText ? /* @__PURE__ */ jsx88(
+          "img",
+          {
+            src,
+            css: [img, loading ? imgLoading : imgLoaded],
+            alt: "image preview",
+            onLoad: handleLoadEvent,
+            onError: handleErrorEvent,
+            loading: "lazy",
+            "data-testid": "parameter-image-preview"
+          }
+        ) : null,
+        src && loadErrorText ? /* @__PURE__ */ jsxs60(Fragment12, { children: [
+          /* @__PURE__ */ jsx88(BrokenImage, { css: [brokenImage, img, imgLoaded] }),
+          /* @__PURE__ */ jsx88(ErrorMessage, { message: loadErrorText })
+        ] }) : null
+      ]
+    }
+  );
+};
 var BrokenImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs60(
     "svg",
@@ -16058,8 +16160,8 @@ var ParameterMenuButton = forwardRef10(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css74 } from "@emotion/react";
-var emptyParameterShell = css74`
+import { css as css75 } from "@emotion/react";
+var emptyParameterShell = css75`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
@@ -16067,7 +16169,7 @@ var emptyParameterShell = css74`
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css74`
+var emptyParameterShellText = css75`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -16075,7 +16177,7 @@ var emptyParameterShellText = css74`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css74`
+var overrideMarker = css75`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -16128,6 +16230,7 @@ var extractParameterProps = (props) => {
 var ParameterShell = ({
   label,
   labelLeadingIcon,
+  labelTrailingIcon,
   hiddenLabel,
   id,
   errorMessage,
@@ -16148,12 +16251,14 @@ var ParameterShell = ({
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs61("div", { css: inputContainer2, ...props, children: [
     hiddenLabel || title ? null : /* @__PURE__ */ jsxs61(ParameterLabel, { id, css: labelText2, children: [
-      labelLeadingIcon ? labelLeadingIcon : null,
-      label
+      labelLeadingIcon != null ? labelLeadingIcon : null,
+      label,
+      labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     !title ? null : /* @__PURE__ */ jsxs61(ParameterLabel, { id, asSpan: true, children: [
-      labelLeadingIcon ? labelLeadingIcon : null,
-      title
+      labelLeadingIcon != null ? labelLeadingIcon : null,
+      title,
+      labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs61("div", { css: inputWrapper, children: [
       menuItems ? /* @__PURE__ */ jsx91(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
@@ -16187,10 +16292,15 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx91(Tooltip, { title:
 
 // src/components/ParameterInputs/ParameterImage.tsx
 import { Fragment as Fragment13, jsx as jsx92, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef11((props, ref) => {
-  const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx92(ParameterShell, { "data-testid": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx92(ParameterImageInner, { ref, ...innerProps, disablePreview: props.disablePreview }) });
-});
+var ParameterImage = forwardRef11(
+  ({ children, ...props }, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ jsxs62(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
+      /* @__PURE__ */ jsx92(ParameterImageInner, { ref, ...innerProps }),
+      children
+    ] });
+  }
+);
 var ParameterImageInner = forwardRef11((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
@@ -16387,7 +16497,7 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css79 } from "@emotion/react";
+import { css as css80 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -16539,23 +16649,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css75 } from "@emotion/css";
-var textBold = css75`
+import { css as css76 } from "@emotion/css";
+var textBold = css76`
   font-weight: 700;
 `;
-var textItalic = css75`
+var textItalic = css76`
   font-style: italic;
 `;
-var textUnderline = css75`
+var textUnderline = css76`
   text-decoration: underline;
 `;
-var textStrikethrough = css75`
+var textStrikethrough = css76`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css75`
+var textUnderlineStrikethrough = css76`
   text-decoration: underline line-through;
 `;
-var textCode = css75`
+var textCode = css76`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -16566,68 +16676,68 @@ var textCode = css75`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css75`
+var textSuperscript = css76`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css75`
+var textSubscript = css76`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css75`
+var linkElement = css76`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css75`
+var h12 = css76`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css75`
+var h22 = css76`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css75`
+var h32 = css76`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css75`
+var h42 = css76`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css75`
+var h52 = css76`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css75`
+var h62 = css76`
   font-size: var(--fs-base);
 `;
-var heading1Element = css75`
+var heading1Element = css76`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css75`
+var heading2Element = css76`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css75`
+var heading3Element = css76`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css75`
+var heading4Element = css76`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css75`
+var heading5Element = css76`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css75`
+var heading6Element = css76`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css75`
+var paragraphElement = css76`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -16635,7 +16745,7 @@ var paragraphElement = css75`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css75`
+var orderedListElement = css76`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -16664,7 +16774,7 @@ var orderedListElement = css75`
     }
   }
 `;
-var unorderedListElement = css75`
+var unorderedListElement = css76`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -16685,13 +16795,13 @@ var unorderedListElement = css75`
     }
   }
 `;
-var listItemElement = css75`
+var listItemElement = css76`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css75`
+var nestedListItemElement = css76`
   list-style-type: none;
 `;
-var blockquoteElement = css75`
+var blockquoteElement = css76`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -16701,7 +16811,7 @@ var blockquoteElement = css75`
     margin-bottom: 0;
   }
 `;
-var codeElement = css75`
+var codeElement = css76`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -16718,7 +16828,7 @@ var codeElement = css75`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css77 } from "@emotion/react";
+import { css as css78 } 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";
@@ -16737,12 +16847,12 @@ import {
 import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef6, useState as useState11 } from "react";
 
 // src/components/Popover/Popover.styles.ts
-import { css as css76 } from "@emotion/react";
-var PopoverBtn = css76`
+import { css as css77 } from "@emotion/react";
+var PopoverBtn = css77`
   border: none;
   background: none;
 `;
-var PopoverDefaulterTriggerBtn = css76`
+var PopoverDefaulterTriggerBtn = css77`
   border: none;
   background: none;
   padding: var(--spacing-2xs);
@@ -16752,7 +16862,7 @@ var PopoverDefaulterTriggerBtn = css76`
     background-color: rgba(0, 0, 0, 0.05);
   }
 `;
-var Popover = css76`
+var Popover = css77`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -17088,16 +17198,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css77`
+var linkPopover = css78`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css77`
+var linkPopoverContainer = css78`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css77`
+var linkPopoverAnchor = css78`
   ${link}
   ${linkColorDefault}
 `;
@@ -17344,7 +17454,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css78 } from "@emotion/react";
+import { css as css79 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -17368,7 +17478,7 @@ import {
 } from "lexical";
 import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
 import { Fragment as Fragment16, jsx as jsx98, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
-var toolbar = css78`
+var toolbar = css79`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -17380,7 +17490,7 @@ var toolbar = css78`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css78`
+var toolbarGroup = css79`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -17396,7 +17506,7 @@ var toolbarGroup = css78`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css78`
+var richTextToolbarButton = css79`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17409,13 +17519,13 @@ var richTextToolbarButton = css78`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css78`
+var richTextToolbarButtonActive = css79`
   background: var(--gray-200);
 `;
-var toolbarIcon = css78`
+var toolbarIcon = css79`
   color: inherit;
 `;
-var toolbarChevron = css78`
+var toolbarChevron = css79`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -17829,18 +17939,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = css79`
+var editorWrapper = css80`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css79`
+var editorContainer = css80`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css79`
+var editorPlaceholder = css80`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -17851,7 +17961,7 @@ var editorPlaceholder = css79`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css79`
+var editorInput = css80`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18132,21 +18242,21 @@ var Popover2 = ({
 };
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css81 } from "@emotion/react";
+import { css as css82 } 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 css80 } from "@emotion/react";
-var progressListStyles = css80`
+import { css as css81 } from "@emotion/react";
+var progressListStyles = css81`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css80`
+var progressListItemStyles = css81`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -18201,12 +18311,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css81`
+      return errorLevel === "caution" ? css82`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css81`
+          ` : css82`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18214,13 +18324,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css81`
+      completed: css82`
         opacity: 0.75;
       `,
-      inProgress: css81`
+      inProgress: css82`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css81`
+      queued: css82`
         opacity: 0.5;
       `
     };
@@ -18236,13 +18346,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css84 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css82 } from "@emotion/react";
-var segmentedControlStyles = css82`
+import { css as css83 } from "@emotion/react";
+var segmentedControlStyles = css83`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18261,14 +18371,14 @@ var segmentedControlStyles = css82`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css82`
+var segmentedControlVerticalStyles = css83`
   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 = css82`
+var segmentedControlItemStyles = css83`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18276,10 +18386,10 @@ var segmentedControlItemStyles = css82`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css82`
+var segmentedControlInputStyles = css83`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css82`
+var segmentedControlLabelStyles = (checked, disabled) => css83`
   position: relative;
   display: flex;
   align-items: center;
@@ -18346,20 +18456,20 @@ var segmentedControlLabelStyles = (checked, disabled) => css82`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css82`
+var segmentedControlLabelIconOnlyStyles = css83`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css82`
+var segmentedControlLabelCheckStyles = css83`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css82`
+var segmentedControlLabelContentStyles = css83`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css82``;
+var segmentedControlLabelTextStyles = css83``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx105, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
@@ -18384,9 +18494,9 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css83({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css83({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css83({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css84({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css84({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css84({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -18443,12 +18553,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css84, keyframes as keyframes4 } from "@emotion/react";
+import { css as css85, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css84`
+var skeletonStyles = css85`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -18485,8 +18595,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css85 } from "@emotion/react";
-var SwitchInputContainer = css85`
+import { css as css86 } from "@emotion/react";
+var SwitchInputContainer = css86`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -18495,7 +18605,7 @@ var SwitchInputContainer = css85`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css85`
+var SwitchInput = css86`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -18533,7 +18643,7 @@ var SwitchInput = css85`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css85`
+var SwitchInputDisabled = css86`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18541,7 +18651,7 @@ var SwitchInputDisabled = css85`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css85`
+var SwitchInputLabel = css86`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -18563,7 +18673,7 @@ var SwitchInputLabel = css85`
     top: 0;
   }
 `;
-var SwitchText = css85`
+var SwitchText = css86`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -18592,8 +18702,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css86 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css86`
+import { css as css87 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css87`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18604,15 +18714,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css86
     padding: ${cellPadding};
   }
 `;
-var tableHead = css86`
+var tableHead = css87`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css86`
+var tableRow = css87`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css86`
+var tableCellHead = css87`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -18666,8 +18776,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css87 } from "@emotion/react";
-var tabButtonStyles = css87`
+import { css as css88 } from "@emotion/react";
+var tabButtonStyles = css88`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -18684,7 +18794,7 @@ var tabButtonStyles = css87`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css87`
+var tabButtonGroupStyles = css88`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -18736,8 +18846,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css88 } from "@emotion/react";
-var StatusBulletContainer = css88`
+import { css as css89 } from "@emotion/react";
+var StatusBulletContainer = css89`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -18754,33 +18864,33 @@ var StatusBulletContainer = css88`
     display: block;
   }
 `;
-var StatusBulletBase = css88`
+var StatusBulletBase = css89`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css88`
+var StatusBulletSmall = css89`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css88`
+var StatusDraft = css89`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css88`
+var StatusModified = css89`
   &: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 = css88`
+var StatusError = css89`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -18793,12 +18903,12 @@ var StatusError = css88`
     );
   }
 `;
-var StatusPublished = css88`
+var StatusPublished = css89`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css88`
+var StatusOrphan = css89`
   &:before {
     background: var(--brand-secondary-5);
   }