@uniformdev/design-system 19.54.0 → 19.54.2-alpha.12

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) => {
@@ -11525,6 +11569,7 @@ var Menu = ({
       BaseMenu,
       {
         ...menuState,
+        "data-auto-resize-opt-in": true,
         focusable: false,
         "aria-label": menuLabel,
         ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
@@ -11586,14 +11631,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);
@@ -11606,15 +11685,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;
@@ -11631,8 +11714,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);
@@ -11672,6 +11764,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";
@@ -11679,30 +11789,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",
@@ -11711,7 +11834,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(
@@ -11719,7 +11845,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
           }
         )
@@ -13405,23 +13531,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`
@@ -15706,10 +15815,16 @@ var cardBaseTitleStyles = css72`
   font-size: var(--fs-sm);
   color: var(--gray-500);
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var cardBaseSubtitleStyles = css72`
   font-size: var(--fs-xs);
   color: var(--gray-500);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var cardBaseMenuButtonStyles = css72`
   padding: var(--spacing-2xs);
@@ -15737,8 +15852,8 @@ var MediaCard = ({
   return /* @__PURE__ */ jsxs58(Card, { tag: "button", css: cardBaseStyles, ...cardProps, onClick, children: [
     /* @__PURE__ */ jsx87("div", { css: cardBaseCoverIconWrapperStyles, children: cover }),
     /* @__PURE__ */ jsx87("div", { css: cardBaseContentStyles, 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 }, children: [
-        /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
           /* @__PURE__ */ jsx87("div", { css: cardBaseTitleStyles, "data-testid": "card-title", children: title }),
           !infoPopover ? null : /* @__PURE__ */ jsx87("div", { css: { display: "flex", cursor: "default" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx87(
             Popover2,
@@ -15753,9 +15868,9 @@ var MediaCard = ({
             }
           ) })
         ] }),
-        !subtitle ? null : /* @__PURE__ */ jsx87("div", { css: cardBaseSubtitleStyles, children: subtitle })
+        subtitle ? /* @__PURE__ */ jsx87("div", { css: cardBaseSubtitleStyles, children: subtitle }) : null
       ] }),
-      /* @__PURE__ */ jsx87("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }),
+      sideSection ? /* @__PURE__ */ jsx87("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }) : null,
       /* @__PURE__ */ jsx87(VerticalRhythm, { align: "center", justify: "center", onClick: (e) => e.stopPropagation(), children: !menuItems || Array.isArray(menuItems) && !menuItems.length ? null : /* @__PURE__ */ jsx87(
         Menu,
         {
@@ -18443,29 +18558,85 @@ 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 css85 } from "@emotion/react";
+import { css as css86 } 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 css84 } from "@emotion/react";
-var progressListStyles = css84`
+import { css as css85 } from "@emotion/react";
+var progressListStyles = css85`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css84`
+var progressListItemStyles = css85`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // 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);
@@ -18479,8 +18650,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,
@@ -18513,12 +18684,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css85`
+      return errorLevel === "caution" ? css86`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css85`
+          ` : css86`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18526,35 +18697,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css85`
+      completed: css86`
         opacity: 0.75;
       `,
-      inProgress: css85`
+      inProgress: css86`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css85`
+      queued: css86`
         opacity: 0.5;
       `
     };
     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: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css87 } from "@emotion/react";
+import { css as css88 } 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 css86 } from "@emotion/react";
-var segmentedControlStyles = css86`
+import { css as css87 } from "@emotion/react";
+var segmentedControlStyles = css87`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18573,14 +18744,14 @@ var segmentedControlStyles = css86`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css86`
+var segmentedControlVerticalStyles = css87`
   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 = css86`
+var segmentedControlItemStyles = css87`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18588,10 +18759,10 @@ var segmentedControlItemStyles = css86`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css86`
+var segmentedControlInputStyles = css87`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css86`
+var segmentedControlLabelStyles = (checked, disabled) => css87`
   position: relative;
   display: flex;
   align-items: center;
@@ -18658,23 +18829,23 @@ var segmentedControlLabelStyles = (checked, disabled) => css86`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css86`
+var segmentedControlLabelIconOnlyStyles = css87`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css86`
+var segmentedControlLabelCheckStyles = css87`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css86`
+var segmentedControlLabelContentStyles = css87`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css86``;
+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,
@@ -18696,16 +18867,16 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css87({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css87({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css87({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css88({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css88({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css88({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx110(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -18713,11 +18884,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: [
@@ -18726,7 +18897,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx110(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -18738,10 +18909,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 })
                   ] })
                 ]
               }
@@ -18755,18 +18926,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css88, keyframes as keyframes4 } from "@emotion/react";
+import { css as css89, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css88`
+var skeletonStyles = css89`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // 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",
@@ -18774,7 +18945,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx110(
+}) => /* @__PURE__ */ jsx111(
   "div",
   {
     css: [
@@ -18797,8 +18968,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css89 } from "@emotion/react";
-var SwitchInputContainer = css89`
+import { css as css90 } from "@emotion/react";
+var SwitchInputContainer = css90`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -18807,7 +18978,7 @@ var SwitchInputContainer = css89`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css89`
+var SwitchInput = css90`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -18845,7 +19016,7 @@ var SwitchInput = css89`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css89`
+var SwitchInputDisabled = css90`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18853,7 +19024,7 @@ var SwitchInputDisabled = css89`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css89`
+var SwitchInputLabel = css90`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -18875,14 +19046,14 @@ var SwitchInputLabel = css89`
     top: 0;
   }
 `;
-var SwitchText = css89`
+var SwitchText = css90`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // 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;
@@ -18891,10 +19062,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
     ] });
   }
@@ -18904,8 +19075,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css90 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90`
+import { css as css91 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css91`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18916,55 +19087,55 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90
     padding: ${cellPadding};
   }
 `;
-var tableHead = css90`
+var tableHead = css91`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css90`
+var tableRow = css91`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css90`
+var tableCellHead = css91`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // 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 });
   }
 );
 
@@ -18978,8 +19149,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css91 } from "@emotion/react";
-var tabButtonStyles = css91`
+import { css as css92 } from "@emotion/react";
+var tabButtonStyles = css92`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -18996,14 +19167,14 @@ var tabButtonStyles = css91`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css91`
+var tabButtonGroupStyles = css92`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // 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);
@@ -19032,24 +19203,24 @@ 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
-import { css as css92 } from "@emotion/react";
-var StatusBulletContainer = css92`
+import { css as css93 } from "@emotion/react";
+var StatusBulletContainer = css93`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19066,33 +19237,33 @@ var StatusBulletContainer = css92`
     display: block;
   }
 `;
-var StatusBulletBase = css92`
+var StatusBulletBase = css93`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css92`
+var StatusBulletSmall = css93`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css92`
+var StatusDraft = css93`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css92`
+var StatusModified = css93`
   &: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 = css92`
+var StatusError = css93`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19105,19 +19276,19 @@ var StatusError = css92`
     );
   }
 `;
-var StatusPublished = css92`
+var StatusPublished = css93`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css92`
+var StatusOrphan = css93`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // 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,
@@ -19135,7 +19306,7 @@ var StatusBullet = ({
     Previous: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx115(
     "span",
     {
       role: "status",
@@ -19250,6 +19421,7 @@ export {
   ParameterToggle,
   ParameterToggleInner,
   Popover2 as Popover,
+  ProgressBar,
   ProgressList,
   ProgressListItem,
   ResolveIcon,
@@ -19288,6 +19460,7 @@ export {
   VerticalRhythm,
   WarningMessage,
   accessibleHidden,
+  addPathSegmentToPathname,
   borderTopIcon,
   breakpoints,
   button,
@@ -19316,6 +19489,8 @@ export {
   fadeOutBottom,
   fullWidthScreenIcon,
   getDrawerAttributes,
+  getParentPath,
+  getPathSegment,
   growSubtle,
   imageTextIcon,
   infoFilledIcon,
@@ -19323,6 +19498,8 @@ export {
   inputError,
   inputSelect,
   isMacLike,
+  isSecureURL,
+  isValidUrl,
   jsonIcon,
   labelText,
   loader_default as loaderAnimationData,