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

package/dist/index.js

@@ -1447,6 +1447,7 @@ __export(src_exports, {
   ParameterToggle: () => ParameterToggle,
   ParameterToggleInner: () => ParameterToggleInner,
   Popover: () => Popover2,
+  ProgressBar: () => ProgressBar,
   ProgressList: () => ProgressList,
   ProgressListItem: () => ProgressListItem,
   ResolveIcon: () => ResolveIcon,
@@ -1485,6 +1486,7 @@ __export(src_exports, {
   VerticalRhythm: () => VerticalRhythm,
   WarningMessage: () => WarningMessage,
   accessibleHidden: () => accessibleHidden,
+  addPathSegmentToPathname: () => addPathSegmentToPathname,
   borderTopIcon: () => borderTopIcon,
   breakpoints: () => breakpoints,
   button: () => button,
@@ -1513,6 +1515,8 @@ __export(src_exports, {
   fadeOutBottom: () => fadeOutBottom,
   fullWidthScreenIcon: () => fullWidthScreenIcon,
   getDrawerAttributes: () => getDrawerAttributes,
+  getParentPath: () => getParentPath,
+  getPathSegment: () => getPathSegment,
   growSubtle: () => growSubtle,
   imageTextIcon: () => imageTextIcon,
   infoFilledIcon: () => infoFilledIcon,
@@ -1520,6 +1524,8 @@ __export(src_exports, {
   inputError: () => inputError,
   inputSelect: () => inputSelect,
   isMacLike: () => isMacLike,
+  isSecureURL: () => isSecureURL,
+  isValidUrl: () => isValidUrl,
   jsonIcon: () => jsonIcon,
   labelText: () => labelText,
   loaderAnimationData: () => loader_default,
@@ -1817,6 +1823,9 @@ var Theme = ({ disableReset = false }) => {
   ] });
 };
 
+// src/utils/index.ts
+init_emotion_jsx_shim();
+
 // src/utils/Breakpoints.ts
 init_emotion_jsx_shim();
 var import_react_use = require("react-use");
@@ -1832,13 +1841,55 @@ var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
 var supports = (cssProp) => `@supports (${cssProp})`;
 var cq = (size) => `@container (min-width: ${size})`;
 
-// src/utils/index.ts
-init_emotion_jsx_shim();
-
 // src/utils/replaceUnderscoreInString.ts
 init_emotion_jsx_shim();
 var replaceUnderscoreInString = (title) => (title == null ? void 0 : title.includes("_")) ? title.replaceAll("_", " ") : title;
 
+// src/utils/url.ts
+init_emotion_jsx_shim();
+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
 init_emotion_jsx_shim();
 var import_react2 = require("react");
@@ -13155,6 +13206,7 @@ var Menu = ({
       import_Menu.Menu,
       {
         ...menuState,
+        "data-auto-resize-opt-in": true,
         focusable: false,
         "aria-label": menuLabel,
         ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
@@ -13218,14 +13270,48 @@ function renderWithIcon(children, icon) {
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 init_emotion_jsx_shim();
 var import_react35 = require("@emotion/react");
+var buttonSizeBase = import_react35.css`
+  --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 = import_react35.css`
+  --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 = import_react35.css`
+  --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 = import_react35.css`
   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);
@@ -13238,15 +13324,19 @@ var ButtonWithMenuContainer = import_react35.css`
   &:focus {
     border-color: var(--gray-700);
   }
+
+  svg {
+    width: var(--svg-size);
+    height: var(--svg-size);
+  }
 `;
 var ButtonWithMenuBtn = import_react35.css`
+  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;
@@ -13263,8 +13353,17 @@ var ButtonWithMenuBtn = import_react35.css`
   }
 `;
 var ButtonWithMenuIcon = import_react35.css`
-  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 = import_react35.css`
   background: var(--brand-secondary-1);
@@ -13304,6 +13403,24 @@ var buttonGhostDisabled = import_react35.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
+var buttonSecondaryOutline = import_react35.css`
+  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 = import_react35.css`
+  background: var(--white);
+  color: var(--gray-400);
+  border-color: var(--gray-400);
+`;
+var buttonWithMenuIconOffset = import_react35.css`
+  margin-left: -10px;
+`;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
@@ -13311,30 +13428,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__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
-      css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
+      css: [
+        sizes2[size],
+        ButtonWithMenuContainer,
+        disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
+      ],
       "data-testid": "multioptions-button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "button",
           {
             type: "button",
@@ -13343,7 +13473,10 @@ var ButtonWithMenu = ({
             onClick: onButtonClick,
             "data-testid": "multioptions-button-main",
             ...buttonProps,
-            children: buttonText
+            children: [
+              icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
+              buttonText
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -13351,7 +13484,7 @@ var ButtonWithMenu = ({
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_CgChevronDown2.CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_CgChevronDown2.CgChevronDown, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -15102,24 +15235,6 @@ init_emotion_jsx_shim();
 init_emotion_jsx_shim();
 var import_react72 = require("react");
 
-// src/utils/url.ts
-init_emotion_jsx_shim();
-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/Caption.tsx
 init_emotion_jsx_shim();
 
@@ -17490,10 +17605,16 @@ var cardBaseTitleStyles = import_react93.css`
   font-size: var(--fs-sm);
   color: var(--gray-500);
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var cardBaseSubtitleStyles = import_react93.css`
   font-size: var(--fs-xs);
   color: var(--gray-500);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var cardBaseMenuButtonStyles = import_react93.css`
   padding: var(--spacing-2xs);
@@ -17521,8 +17642,8 @@ var MediaCard = ({
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Card, { tag: "button", css: cardBaseStyles, ...cardProps, onClick, children: [
     /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: cardBaseCoverIconWrapperStyles, children: cover }),
     /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: cardBaseContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: cardBaseTitleStyles, "data-testid": "card-title", children: title }),
           !infoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: { display: "flex", cursor: "default" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             Popover2,
@@ -17537,9 +17658,9 @@ var MediaCard = ({
             }
           ) })
         ] }),
-        !subtitle ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: cardBaseSubtitleStyles, children: subtitle })
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: cardBaseSubtitleStyles, children: subtitle }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }),
+      sideSection ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(VerticalRhythm, { align: "center", justify: "center", onClick: (e) => e.stopPropagation(), children: !menuItems || Array.isArray(menuItems) && !menuItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         Menu,
         {
@@ -20229,33 +20350,93 @@ var ParameterToggleInner = (0, import_react120.forwardRef)(
   }
 );
 
+// src/components/ProgressBar/ProgressBar.tsx
+init_emotion_jsx_shim();
+
+// src/components/ProgressBar/ProgressBar.styles.ts
+init_emotion_jsx_shim();
+var import_react121 = require("@emotion/react");
+var container = import_react121.css`
+  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: import_react121.css`
+    background-color: var(--accent-light);
+  `,
+  secondary: import_react121.css`
+    background-color: var(--brand-secondary-5);
+  `
+};
+var bar = import_react121.css`
+  position: absolute;
+  inset: 0;
+  transition: transform var(--duration-fast) var(--timing-ease-out);
+  transform-origin: 0 center;
+`;
+
+// src/components/ProgressBar/ProgressBar.tsx
+var import_jsx_runtime108 = require("@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__ */ (0, import_jsx_runtime108.jsx)(
+    "div",
+    {
+      className,
+      css: container,
+      role: "progressbar",
+      "aria-busy": valuePercentage !== 100,
+      "aria-invalid": false,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": valueNow,
+      children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        "div",
+        {
+          css: [bar, themeMap[theme]],
+          style: {
+            transform: `scaleX(${valuePercentage / 100})`
+          },
+          "aria-label": `${current} / ${max}`
+        }
+      )
+    }
+  );
+}
+
 // src/components/ProgressList/ProgressList.tsx
 init_emotion_jsx_shim();
-var import_react122 = require("@emotion/react");
+var import_react123 = require("@emotion/react");
 var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
 var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
 var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
-var import_react123 = require("react");
+var import_react124 = require("react");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
 init_emotion_jsx_shim();
-var import_react121 = require("@emotion/react");
-var progressListStyles = import_react121.css`
+var import_react122 = require("@emotion/react");
+var progressListStyles = import_react122.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react121.css`
+var progressListItemStyles = import_react122.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react123.useMemo)(() => {
+  const itemsWithStatus = (0, import_react124.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -20267,8 +20448,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       ProgressListItem,
       {
         status,
@@ -20288,7 +20469,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = (0, import_react123.useMemo)(() => {
+  const icon = (0, import_react124.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -20299,14 +20480,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react123.useMemo)(() => {
+  const statusStyles = (0, import_react124.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react122.css`
+      return errorLevel === "caution" ? import_react123.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react122.css`
+          ` : import_react123.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -20314,37 +20495,37 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react122.css`
+      completed: import_react123.css`
         opacity: 0.75;
       `,
-      inProgress: import_react122.css`
+      inProgress: import_react123.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react122.css`
+      queued: import_react123.css`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react125 = require("@emotion/react");
+var import_react126 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react126 = require("react");
+var import_react127 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react124 = require("@emotion/react");
-var segmentedControlStyles = import_react124.css`
+var import_react125 = require("@emotion/react");
+var segmentedControlStyles = import_react125.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -20363,14 +20544,14 @@ var segmentedControlStyles = import_react124.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react124.css`
+var segmentedControlVerticalStyles = import_react125.css`
   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 = import_react124.css`
+var segmentedControlItemStyles = import_react125.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -20378,10 +20559,10 @@ var segmentedControlItemStyles = import_react124.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react124.css`
+var segmentedControlInputStyles = import_react125.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => import_react124.css`
+var segmentedControlLabelStyles = (checked, disabled) => import_react125.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -20448,23 +20629,23 @@ var segmentedControlLabelStyles = (checked, disabled) => import_react124.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react124.css`
+var segmentedControlLabelIconOnlyStyles = import_react125.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react124.css`
+var segmentedControlLabelCheckStyles = import_react125.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react124.css`
+var segmentedControlLabelContentStyles = import_react125.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react124.css``;
+var segmentedControlLabelTextStyles = import_react125.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -20476,7 +20657,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react126.useCallback)(
+  const onOptionChange = (0, import_react127.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -20484,18 +20665,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react126.useMemo)(() => {
+  const sizeStyles = (0, import_react127.useMemo)(() => {
     const map = {
-      sm: (0, import_react125.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react125.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react125.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react126.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react126.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react126.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react126.useMemo)(() => {
+  const isIconOnly = (0, import_react127.useMemo)(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -20503,11 +20684,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__ */ (0, import_jsx_runtime109.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
               "label",
               {
                 css: [
@@ -20516,7 +20697,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -20528,10 +20709,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -20549,18 +20730,18 @@ init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react127 = require("@emotion/react");
-var lightFadingOut = import_react127.keyframes`
+var import_react128 = require("@emotion/react");
+var lightFadingOut = import_react128.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react127.css`
+var skeletonStyles = import_react128.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -20568,7 +20749,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
   "div",
   {
     css: [
@@ -20593,8 +20774,8 @@ var React23 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react128 = require("@emotion/react");
-var SwitchInputContainer = import_react128.css`
+var import_react129 = require("@emotion/react");
+var SwitchInputContainer = import_react129.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -20603,7 +20784,7 @@ var SwitchInputContainer = import_react128.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react128.css`
+var SwitchInput = import_react129.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -20641,7 +20822,7 @@ var SwitchInput = import_react128.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react128.css`
+var SwitchInputDisabled = import_react129.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -20649,7 +20830,7 @@ var SwitchInputDisabled = import_react128.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react128.css`
+var SwitchInputLabel = import_react129.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -20671,26 +20852,26 @@ var SwitchInputLabel = import_react128.css`
     top: 0;
   }
 `;
-var SwitchText = import_react128.css`
+var SwitchText = import_react129.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_jsx_runtime111.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -20702,8 +20883,8 @@ var React24 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react129 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react129.css`
+var import_react130 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react130.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -20714,67 +20895,67 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react129.css`
+var tableHead = import_react130.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react129.css`
+var tableRow = import_react130.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react129.css`
+var tableCellHead = import_react130.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react131 = require("react");
+var import_react132 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react130 = require("@emotion/react");
-var tabButtonStyles = import_react130.css`
+var import_react131 = require("@emotion/react");
+var tabButtonStyles = import_react131.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -20791,30 +20972,30 @@ var tabButtonStyles = import_react130.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react130.css`
+var tabButtonGroupStyles = import_react131.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react131.createContext)(null);
+var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react132.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react131.useContext)(CurrentTabContext);
+  const context = (0, import_react132.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react131.useMemo)(() => {
+  const selected = (0, import_react132.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react131.useEffect)(() => {
+  (0, import_react132.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -20822,24 +21003,24 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react131.useEffect)(() => {
+  (0, import_react132.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -20847,8 +21028,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react132 = require("@emotion/react");
-var StatusBulletContainer = import_react132.css`
+var import_react133 = require("@emotion/react");
+var StatusBulletContainer = import_react133.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -20865,33 +21046,33 @@ var StatusBulletContainer = import_react132.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react132.css`
+var StatusBulletBase = import_react133.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react132.css`
+var StatusBulletSmall = import_react133.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react132.css`
+var StatusDraft = import_react133.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react132.css`
+var StatusModified = import_react133.css`
   &: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 = import_react132.css`
+var StatusError = import_react133.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -20904,19 +21085,19 @@ var StatusError = import_react132.css`
     );
   }
 `;
-var StatusPublished = import_react132.css`
+var StatusPublished = import_react133.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react132.css`
+var StatusOrphan = import_react133.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -20934,7 +21115,7 @@ var StatusBullet = ({
     Previous: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
     "span",
     {
       role: "status",
@@ -21050,6 +21231,7 @@ var StatusBullet = ({
   ParameterToggle,
   ParameterToggleInner,
   Popover,
+  ProgressBar,
   ProgressList,
   ProgressListItem,
   ResolveIcon,
@@ -21088,6 +21270,7 @@ var StatusBullet = ({
   VerticalRhythm,
   WarningMessage,
   accessibleHidden,
+  addPathSegmentToPathname,
   borderTopIcon,
   breakpoints,
   button,
@@ -21116,6 +21299,8 @@ var StatusBullet = ({
   fadeOutBottom,
   fullWidthScreenIcon,
   getDrawerAttributes,
+  getParentPath,
+  getPathSegment,
   growSubtle,
   imageTextIcon,
   infoFilledIcon,
@@ -21123,6 +21308,8 @@ var StatusBullet = ({
   inputError,
   inputSelect,
   isMacLike,
+  isSecureURL,
+  isValidUrl,
   jsonIcon,
   labelText,
   loaderAnimationData,