@uniformdev/design-system 19.53.1-alpha.41 → 19.54.2-alpha.3

package/dist/esm/index.js

@@ -274,6 +274,50 @@ var cq = (size) => `@container (min-width: ${size})`;
 // src/utils/replaceUnderscoreInString.ts
 var replaceUnderscoreInString = (title) => (title == null ? void 0 : title.includes("_")) ? title.replaceAll("_", " ") : title;
 
+// src/utils/url.ts
+var isSecureURL = (value = "") => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:";
+  } catch (e) {
+    return false;
+  }
+};
+var isValidUrl = (urlString, options = {}) => {
+  try {
+    const isRelativeToLocation = /^([/.])/.test(urlString);
+    const url = new URL(
+      urlString,
+      options.allowRelative && isRelativeToLocation ? "https://defaultbaseurl.com" : void 0
+    );
+    if (options.isSecure) {
+      return url.protocol === "https:";
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+var addPathSegmentToPathname = (path, pathSegment) => {
+  return `/${path.substring(1).split("/").filter((s) => s).concat(pathSegment).join("/")}`;
+};
+var getPathSegment = (path) => {
+  return path.split("/").pop() || path;
+};
+var getParentPath = (path, noRootSlash) => {
+  var _a;
+  if (path === "/") {
+    return "";
+  }
+  const pathSegments = path == null ? void 0 : path.split("/");
+  if ((pathSegments == null ? void 0 : pathSegments.length) === 2) {
+    return noRootSlash ? "" : "/";
+  } else {
+    pathSegments == null ? void 0 : pathSegments.pop();
+    return (_a = pathSegments == null ? void 0 : pathSegments.join("/")) != null ? _a : "n/a";
+  }
+};
+
 // src/utils/useOutsideClick.tsx
 import { useEffect } from "react";
 var useOutsideClick = (containerRef, handler) => {
@@ -328,34 +372,6 @@ var buttonRippleEffect = (props) => css`
     transition: background 0s;
   }
 `;
-var buttonAccentAltDark = css`
-  background: var(--accent-alt-dark);
-  color: var(--white);
-
-  &:disabled {
-    background: var(--gray-300);
-    color: var(--white);
-  }
-
-  ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
-`;
-var buttonAccentAltDarkOutline = css`
-  background: var(--white);
-  color: var(--accent-alt-dark);
-  box-shadow: 0 0 0 1px var(--accent-alt-dark);
-  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
-
-  &:hover {
-    color: var(--primary-action-hover);
-  }
-
-  &:disabled {
-    color: var(--gray-300);
-    box-shadow: 0 0 0 1px var(--gray-300);
-  }
-
-  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
-`;
 var buttonPrimary = css`
   background: var(--brand-secondary-1);
   color: var(--white);
@@ -1053,9 +1069,6 @@ var IconImg = css8`
     vertical-align: middle;
   }
 `;
-var IconWhite = css8`
-  color: var(--white);
-`;
 var IconColorDefault = css8`
   color: var(--brand-secondary-3);
 `;
@@ -1110,7 +1123,6 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   const isIconName = typeof icon === "string";
   const { iconsMap, isLoading } = useIconContext();
   const customColor = {
-    white: IconWhite,
     action: IconColorAction,
     default: IconColorDefault,
     gray: IconColorGray,
@@ -1720,60 +1732,6 @@ var diamondFill = GenIcon({
     }
   ]
 });
-var magicWand = GenIcon({
-  tag: "svg",
-  attr: {
-    role: "img",
-    viewBox: "0 0 24 24"
-  },
-  child: [
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillOpacity: "0.5",
-        d: "M12.6021 0.799316C12.5443 0.799316 12.487 0.802204 12.4305 0.807862C12.3484 1.91145 11.5902 2.79082 10.6387 2.88601C10.6338 2.9516 10.6313 3.01798 10.6313 3.08503C10.6313 3.15208 10.6338 3.21846 10.6387 3.28405C11.5902 3.37924 12.3484 4.25862 12.4305 5.3622C12.487 5.36786 12.5443 5.37074 12.6021 5.37074C12.6599 5.37074 12.7171 5.36786 12.7737 5.3622C12.8558 4.25862 13.614 3.37924 14.5655 3.28405C14.5704 3.21846 14.5729 3.15208 14.5729 3.08503C14.5729 3.01798 14.5704 2.9516 14.5655 2.88601C13.614 2.79082 12.8558 1.91145 12.7737 0.807862C12.7171 0.802204 12.6599 0.799316 12.6021 0.799316Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillOpacity: "0.5",
-        d: "M17.8945 12.4247C17.8367 12.4247 17.7795 12.4276 17.7229 12.4332C17.6409 13.5368 16.8826 14.4162 15.9311 14.5114C15.9262 14.577 15.9237 14.6433 15.9237 14.7104C15.9237 14.7774 15.9262 14.8438 15.9311 14.9094C16.8826 15.0046 17.6409 15.884 17.7229 16.9876C17.7795 16.9932 17.8367 16.9961 17.8945 16.9961C17.9523 16.9961 18.0096 16.9932 18.0661 16.9876C18.1482 15.884 18.9064 15.0046 19.858 14.9094C19.8628 14.8438 19.8653 14.7774 19.8653 14.7104C19.8653 14.6433 19.8628 14.577 19.858 14.5114C18.9064 14.4162 18.1482 13.5368 18.0661 12.4332C18.0096 12.4276 17.9523 12.4247 17.8945 12.4247Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillOpacity: "0.5",
-        d: "M21.571 1.6413C21.509 1.6413 21.4476 1.6449 21.387 1.65195C21.299 3.02718 20.4858 4.12302 19.4653 4.24164C19.4601 4.32337 19.4574 4.40609 19.4574 4.48965C19.4574 4.57321 19.4601 4.65592 19.4653 4.73766C20.4858 4.85628 21.299 5.95211 21.387 7.32734C21.4476 7.33439 21.509 7.33799 21.571 7.33799C21.633 7.33799 21.6944 7.33439 21.755 7.32734C21.8431 5.95211 22.6562 4.85628 23.6767 4.73766C23.6819 4.65592 23.6846 4.57321 23.6846 4.48965C23.6846 4.40609 23.6819 4.32337 23.6767 4.24164C22.6562 4.12302 21.8431 3.02718 21.755 1.65195C21.6944 1.6449 21.633 1.6413 21.571 1.6413Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        d: "M15.6875 11.9141L12.5116 8.73823L2.07262 19.1773C1.9166 19.3333 1.9166 19.5862 2.07262 19.7422L4.68354 22.3532C4.83956 22.5092 5.0925 22.5092 5.24852 22.3532L15.6875 11.9141Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M16.8929 4.92196L19.5038 7.53288L14.8688 12.1679L12.2578 9.55702L16.8929 4.92196ZM19.7863 7.2504C19.9423 7.40641 19.9423 7.65936 19.7863 7.81537L15.6875 11.9141L12.5116 8.73823L16.6104 4.63947C16.7664 4.48346 17.0194 4.48346 17.1754 4.63947L19.7863 7.2504Z"
-      },
-      child: []
-    }
-  ]
-});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1797,8 +1755,7 @@ var customIcons = {
   "clear-formatting": clearFormatting,
   "yes-no": yesNoIcon,
   "diamond-outline": diamondOutline,
-  "diamond-fill": diamondFill,
-  "magic-wand": magicWand
+  "diamond-fill": diamondFill
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -11387,8 +11344,6 @@ var Button = React6.forwardRef(
     const buttonTheme = {
       primary: buttonPrimary,
       primaryInvert: buttonPrimaryInvert,
-      "accent-alt-dark": buttonAccentAltDark,
-      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
       destructive: buttonDestructive,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
@@ -11675,14 +11630,48 @@ function renderWithIcon(children, icon) {
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 import { css as css26 } from "@emotion/react";
+var buttonSizeBase = css26`
+  --icon-padding: var(--spacing-xs);
+  --svg-size: 1rem;
+  --line-offset: -5px;
+  font-size: var(--fs-sm);
+
+  > button {
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+`;
+var buttonSizeSmall = css26`
+  --icon-padding: var(--spacing-xs);
+  --svg-size: 0.85rem;
+  --line-offset: -1px;
+  font-size: var(--fs-sm);
+
+  > button {
+    padding: var(--spacing-xs) var(--spacing-base);
+  }
+`;
+var buttonSizeLarge = css26`
+  --icon-padding: var(--spacing-sm);
+  --svg-size: 1.5rem;
+  --line-offset: -5px;
+  font-size: var(--fs-sm);
+  line-height: 1.25;
+
+  > button {
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+`;
 var ButtonWithMenuContainer = css26`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
   color: var(--white);
   display: inline-flex;
-  font-size: var(--fs-sm);
   position: relative;
+  min-height: 24px;
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out);
 
   &:active {
     opacity: var(--opacity-75);
@@ -11695,15 +11684,19 @@ var ButtonWithMenuContainer = css26`
   &:focus {
     border-color: var(--gray-700);
   }
+
+  svg {
+    width: var(--svg-size);
+    height: var(--svg-size);
+  }
 `;
 var ButtonWithMenuBtn = css26`
+  align-items: center;
   border: 1px solid transparent;
   background: transparent;
-  border-radius: var(--rounded-base);
-  padding: var(--spacing-sm) var(--spacing-base);
-  font-weight: var(--fw-medium);
-  letter-spacing: 0.025rem;
-  line-height: 1.25;
+  line-height: 1;
+  display: inline-flex;
+  gap: var(--spacing-xs);
 
   &:focus {
     outline: none;
@@ -11720,8 +11713,17 @@ var ButtonWithMenuBtn = css26`
   }
 `;
 var ButtonWithMenuIcon = css26`
-  padding: var(--spacing-sm);
-  border-left: 1px solid currentColor;
+  padding: var(--icon-padding);
+  position: relative;
+
+  &:before {
+    background: currentColor;
+    content: '';
+    display: block;
+    inset: var(--line-offset) auto var(--line-offset) -1px;
+    width: 1px;
+    position: absolute;
+  }
 `;
 var buttonPrimary2 = css26`
   background: var(--brand-secondary-1);
@@ -11761,6 +11763,24 @@ var buttonGhostDisabled = css26`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
+var buttonSecondaryOutline = css26`
+  background: var(--white);
+  color: var(--primary-action-default);
+  border-color: var(--primary-action-default);
+
+  &:hover {
+    color: var(--primary-action-hover);
+    border-color: var(--primary-action-hover);
+  }
+`;
+var buttonSecondaryOutlineDisabled = css26`
+  background: var(--white);
+  color: var(--gray-400);
+  border-color: var(--gray-400);
+`;
+var buttonWithMenuIconOffset = css26`
+  margin-left: -10px;
+`;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 import { jsx as jsx27, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
@@ -11768,30 +11788,43 @@ var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
   buttonText,
+  icon,
   disabled,
   children,
   placement,
+  size = "lg",
   ...buttonProps
 }) => {
   const buttonTheme = {
     primary: buttonPrimary2,
     secondary: buttonSecondary2,
     ghost: buttonGhost2,
-    unimportant: buttonUnimportant2
+    unimportant: buttonUnimportant2,
+    secondaryOutline: buttonSecondaryOutline
   };
   const buttonDisabledTheme = {
     primary: buttonPrimaryDisabled,
     secondary: buttonSecondaryDisabled,
     ghost: buttonGhostDisabled,
-    unimportant: buttonUnimportantDisabled
+    unimportant: buttonUnimportantDisabled,
+    secondaryOutline: buttonSecondaryOutlineDisabled
+  };
+  const sizes2 = {
+    base: buttonSizeBase,
+    sm: buttonSizeSmall,
+    lg: buttonSizeLarge
   };
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
+      css: [
+        sizes2[size],
+        ButtonWithMenuContainer,
+        disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
+      ],
       "data-testid": "multioptions-button",
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -11800,7 +11833,10 @@ var ButtonWithMenu = ({
             onClick: onButtonClick,
             "data-testid": "multioptions-button-main",
             ...buttonProps,
-            children: buttonText
+            children: [
+              icon ? /* @__PURE__ */ jsx27(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
+              buttonText
+            ]
           }
         ),
         /* @__PURE__ */ jsx27(
@@ -11808,7 +11844,7 @@ var ButtonWithMenu = ({
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -13494,23 +13530,6 @@ IconButton.displayName = "IconButton";
 // src/components/Image/Image.tsx
 import { useCallback as useCallback2, useEffect as useEffect7, useState as useState8 } from "react";
 
-// src/utils/url.ts
-var isValidUrl = (urlString, options = {}) => {
-  try {
-    const isRelativeToLocation = /^([/.])/.test(urlString);
-    const url = new URL(
-      urlString,
-      options.allowRelative && isRelativeToLocation ? "https://defaultbaseurl.com" : void 0
-    );
-    if (options.isSecure) {
-      return url.protocol === "https:";
-    }
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css45 } from "@emotion/react";
 var CaptionText = (dynamicSize) => css45`
@@ -15474,7 +15493,6 @@ import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
 import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
-  icon,
   active,
   disableShadow,
   ...props
@@ -15488,10 +15506,7 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
-          icon,
-          /* @__PURE__ */ jsx83("span", { children: buttonText })
-        ] }),
+        /* @__PURE__ */ jsx83("span", { children: buttonText }),
         /* @__PURE__ */ jsx83(
           Icon,
           {
@@ -16487,7 +16502,6 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css80 } from "@emotion/react";
 import { useState as useState11 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
@@ -16603,7 +16617,6 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
-  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
   title,
@@ -16625,18 +16638,6 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx96(
-        "div",
-        {
-          css: [
-            inputMenu,
-            menuItems ? css80`
-                    right: 1.25rem;
-                  ` : void 0
-          ],
-          children: actionItems
-        }
-      ) : null,
       menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
       /* @__PURE__ */ jsx96(
         ParameterShellContext.Provider,
@@ -16873,7 +16874,7 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css84 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -17025,23 +17026,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css81 } from "@emotion/css";
-var textBold = css81`
+import { css as css80 } from "@emotion/css";
+var textBold = css80`
   font-weight: 700;
 `;
-var textItalic = css81`
+var textItalic = css80`
   font-style: italic;
 `;
-var textUnderline = css81`
+var textUnderline = css80`
   text-decoration: underline;
 `;
-var textStrikethrough = css81`
+var textStrikethrough = css80`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css81`
+var textUnderlineStrikethrough = css80`
   text-decoration: underline line-through;
 `;
-var textCode = css81`
+var textCode = css80`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -17052,68 +17053,68 @@ var textCode = css81`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css81`
+var textSuperscript = css80`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css81`
+var textSubscript = css80`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css81`
+var linkElement = css80`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css81`
+var h12 = css80`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css81`
+var h22 = css80`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css81`
+var h32 = css80`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css81`
+var h42 = css80`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css81`
+var h52 = css80`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css81`
+var h62 = css80`
   font-size: var(--fs-base);
 `;
-var heading1Element = css81`
+var heading1Element = css80`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css81`
+var heading2Element = css80`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css81`
+var heading3Element = css80`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css81`
+var heading4Element = css80`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css81`
+var heading5Element = css80`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css81`
+var heading6Element = css80`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css81`
+var paragraphElement = css80`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -17121,7 +17122,7 @@ var paragraphElement = css81`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css81`
+var orderedListElement = css80`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17150,7 +17151,7 @@ var orderedListElement = css81`
     }
   }
 `;
-var unorderedListElement = css81`
+var unorderedListElement = css80`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17171,13 +17172,13 @@ var unorderedListElement = css81`
     }
   }
 `;
-var listItemElement = css81`
+var listItemElement = css80`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css81`
+var nestedListItemElement = css80`
   list-style-type: none;
 `;
-var blockquoteElement = css81`
+var blockquoteElement = css80`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17187,7 +17188,7 @@ var blockquoteElement = css81`
     margin-bottom: 0;
   }
 `;
-var codeElement = css81`
+var codeElement = css80`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17204,7 +17205,7 @@ var codeElement = css81`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css81 } 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";
@@ -17545,16 +17546,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 = css81`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css82`
+var linkPopoverContainer = css81`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css82`
+var linkPopoverAnchor = css81`
   ${link}
   ${linkColorDefault}
 `;
@@ -17801,7 +17802,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css82 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -17825,7 +17826,7 @@ import {
 } from "lexical";
 import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
 import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var toolbar = css83`
+var toolbar = css82`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -17837,7 +17838,7 @@ var toolbar = css83`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css83`
+var toolbarGroup = css82`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -17853,7 +17854,7 @@ var toolbarGroup = css83`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css83`
+var richTextToolbarButton = css82`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17866,13 +17867,13 @@ var richTextToolbarButton = css83`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css83`
+var richTextToolbarButtonActive = css82`
   background: var(--gray-200);
 `;
-var toolbarIcon = css83`
+var toolbarIcon = css82`
   color: inherit;
 `;
-var toolbarChevron = css83`
+var toolbarChevron = css82`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -18286,18 +18287,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = css84`
+var editorWrapper = css83`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css84`
+var editorContainer = css83`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css84`
+var editorPlaceholder = css83`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18308,7 +18309,7 @@ var editorPlaceholder = css84`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css84`
+var editorInput = css83`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18550,6 +18551,62 @@ var ParameterToggleInner = forwardRef17(
   }
 );
 
+// src/components/ProgressBar/ProgressBar.styles.ts
+import { css as css84 } from "@emotion/react";
+var container = css84`
+  background: var(--gray-50);
+  margin-block: var(--spacing-sm);
+  position: relative;
+  overflow: hidden;
+  height: 1rem;
+  border-radius: var(--rounded-sm);
+  border: solid 1px var(--gray-300);
+`;
+var themeMap = {
+  primary: css84`
+    background-color: var(--accent-light);
+  `,
+  secondary: css84`
+    background-color: var(--brand-secondary-5);
+  `
+};
+var bar = css84`
+  position: absolute;
+  inset: 0;
+  transition: transform var(--duration-fast) var(--timing-ease-out);
+  transform-origin: 0 center;
+`;
+
+// src/components/ProgressBar/ProgressBar.tsx
+import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
+function ProgressBar({ className, current, max, theme = "primary" }) {
+  const valueNow = Math.min(current, max);
+  const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
+  return /* @__PURE__ */ jsx108(
+    "div",
+    {
+      className,
+      css: container,
+      role: "progressbar",
+      "aria-busy": valuePercentage !== 100,
+      "aria-invalid": false,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": valueNow,
+      children: /* @__PURE__ */ jsx108(
+        "div",
+        {
+          css: [bar, themeMap[theme]],
+          style: {
+            transform: `scaleX(${valuePercentage / 100})`
+          },
+          "aria-label": `${current} / ${max}`
+        }
+      )
+    }
+  );
+}
+
 // src/components/ProgressList/ProgressList.tsx
 import { css as css86 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
@@ -18572,7 +18629,7 @@ var progressListItemStyles = css85`
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx108, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -18586,8 +18643,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx108("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx109("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx109(
       ProgressListItem,
       {
         status,
@@ -18646,10 +18703,10 @@ var ProgressListItem = ({
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx108(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx108("div", { children: /* @__PURE__ */ jsx108(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx109(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs74("div", { children: [
       children,
-      /* @__PURE__ */ jsx108("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx109("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
@@ -18781,7 +18838,7 @@ var segmentedControlLabelContentStyles = css87`
 var segmentedControlLabelTextStyles = css87``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx109, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -18812,7 +18869,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx110(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -18820,11 +18877,11 @@ var SegmentedControl = ({
       children: options.map((option, index) => {
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled || option.disabled;
-        return /* @__PURE__ */ jsx109(
+        return /* @__PURE__ */ jsx110(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx109("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
+            children: /* @__PURE__ */ jsx110("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
               "label",
               {
                 css: [
@@ -18833,7 +18890,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx110(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -18845,10 +18902,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx109(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx110(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx109(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx109("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx110(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ jsx110("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -18873,7 +18930,7 @@ var skeletonStyles = css89`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -18881,7 +18938,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx110(
+}) => /* @__PURE__ */ jsx111(
   "div",
   {
     css: [
@@ -18989,7 +19046,7 @@ var SwitchText = css90`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment20, jsx as jsx111, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -18998,10 +19055,10 @@ var Switch = React23.forwardRef(
     }
     return /* @__PURE__ */ jsxs76(Fragment20, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx111("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx111("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx112("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx112("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx111("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx112("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -19038,40 +19095,40 @@ var tableCellHead = css91`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx113("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx112("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("td", { ref, ...otherProps, children });
   }
 );
 
@@ -19110,7 +19167,7 @@ var tabButtonGroupStyles = css92`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -19139,19 +19196,19 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx113(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx114(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx113(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx114(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx113(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx114(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx113(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx114(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
@@ -19224,7 +19281,7 @@ var StatusOrphan = css93`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19242,7 +19299,7 @@ var StatusBullet = ({
     Previous: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx115(
     "span",
     {
       role: "status",
@@ -19357,6 +19414,7 @@ export {
   ParameterToggle,
   ParameterToggleInner,
   Popover2 as Popover,
+  ProgressBar,
   ProgressList,
   ProgressListItem,
   ResolveIcon,
@@ -19395,11 +19453,10 @@ export {
   VerticalRhythm,
   WarningMessage,
   accessibleHidden,
+  addPathSegmentToPathname,
   borderTopIcon,
   breakpoints,
   button,
-  buttonAccentAltDark,
-  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,
@@ -19425,6 +19482,8 @@ export {
   fadeOutBottom,
   fullWidthScreenIcon,
   getDrawerAttributes,
+  getParentPath,
+  getPathSegment,
   growSubtle,
   imageTextIcon,
   infoFilledIcon,
@@ -19432,6 +19491,8 @@ export {
   inputError,
   inputSelect,
   isMacLike,
+  isSecureURL,
+  isValidUrl,
   jsonIcon,
   labelText,
   loader_default as loaderAnimationData,