@uniformdev/design-system 19.5.1-alpha.22 → 19.6.0

package/dist/index.js

@@ -152,6 +152,7 @@ __export(src_exports, {
   UniformLogoLarge: () => UniformLogoLarge,
   VerticalRhythm: () => VerticalRhythm,
   WarningMessage: () => WarningMessage,
+  accessibleHidden: () => accessibleHidden,
   borderTopIcon: () => borderTopIcon,
   breakpoints: () => breakpoints,
   button: () => button,
@@ -835,9 +836,19 @@ var inputSelectCompact = import_react4.css`
   border-radius: var(--rounded-base);
 `;
 
-// src/styles/Animations.styles.ts
+// src/styles/Accessibility.styles.ts
 var import_react5 = require("@emotion/react");
-var growSubtle = import_react5.keyframes`
+var accessibleHidden = import_react5.css`
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;
+
+// src/styles/Animations.styles.ts
+var import_react6 = require("@emotion/react");
+var growSubtle = import_react6.keyframes`
   0%,
   100% {
     transform: scale(1);
@@ -848,7 +859,7 @@ var growSubtle = import_react5.keyframes`
     opacity: 1;
   }
 `;
-var fadeInBottom = import_react5.keyframes`
+var fadeInBottom = import_react6.keyframes`
   0% {
     opacity: 0;
     transform: translateY(10px);
@@ -858,7 +869,7 @@ var fadeInBottom = import_react5.keyframes`
     transform: translateY(0);
   }
 `;
-var fadeInTop = import_react5.keyframes`
+var fadeInTop = import_react6.keyframes`
   0% {
     opacity: 0;
     transform: translateY(-10px);
@@ -868,7 +879,7 @@ var fadeInTop = import_react5.keyframes`
     transform: translateY(0);
   }
 `;
-var fadeOutBottom = import_react5.keyframes`
+var fadeOutBottom = import_react6.keyframes`
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -878,7 +889,7 @@ var fadeOutBottom = import_react5.keyframes`
     transform: translateY(10px);
   }
 `;
-var fadeIn = import_react5.keyframes`
+var fadeIn = import_react6.keyframes`
   0% {
     opacity: 0;
   }
@@ -886,11 +897,11 @@ var fadeIn = import_react5.keyframes`
     opacity: 1;
   }
 `;
-var ripple = import_react5.keyframes`
+var ripple = import_react6.keyframes`
 to {
   transform: scale(4);
 }`;
-var skeletonLoading = import_react5.keyframes`
+var skeletonLoading = import_react6.keyframes`
 0% {
   background-color: var(--gray-100);
 }
@@ -898,7 +909,7 @@ var skeletonLoading = import_react5.keyframes`
   background-color: var(--gray-200);
 }
 `;
-var fadeInLtr = import_react5.keyframes`
+var fadeInLtr = import_react6.keyframes`
 from {
   opacity: 0;
   transform: translateX(-10px);
@@ -908,7 +919,7 @@ to {
   transform: translateX(0);
 }
 `;
-var fadeInRtl = import_react5.keyframes`
+var fadeInRtl = import_react6.keyframes`
 from {
   opacity: 0;
   transform: translateX(10px);
@@ -918,7 +929,7 @@ to {
   transform: translateX(0);
 }
 `;
-var slideInTtb = import_react5.keyframes`
+var slideInTtb = import_react6.keyframes`
 from {
   transform: translateY(-100%);
 }
@@ -928,8 +939,8 @@ to {
 `;
 
 // src/styles/Scrollbar.styles.ts
-var import_react6 = require("@emotion/react");
-var scrollbarStyles = import_react6.css`
+var import_react7 = require("@emotion/react");
+var scrollbarStyles = import_react7.css`
   @supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
     /*
         #d1d5db = bg-gray-300
@@ -958,22 +969,22 @@ var scrollbarStyles = import_react6.css`
 `;
 
 // src/components/AddButton/AddButton.tsx
-var import_react10 = require("@emotion/react");
+var import_react11 = require("@emotion/react");
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
-var import_react7 = require("@emotion/react");
-var ShortcutRevealerContainer = import_react7.css`
+var import_react8 = require("@emotion/react");
+var ShortcutRevealerContainer = import_react8.css`
   position: absolute;
 `;
-var ShortcutRevealerHotKeyContainer = import_react7.css`
+var ShortcutRevealerHotKeyContainer = import_react8.css`
   display: flex;
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var ShortcutRevealerHotKey = import_react7.css`
+var ShortcutRevealerHotKey = import_react8.css`
   background: linear-gradient(to bottom right, var(--gray-100), var(--gray-200));
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-600);
@@ -1022,11 +1033,11 @@ function useShortcut({
 // src/components/Shortcuts/ShortcutRevealer.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 var loggedHotkeyConsole = false;
-var Context = import_react8.default.createContext(false);
+var Context = import_react9.default.createContext(false);
 var revealHotkey = ["ctrl+F1", "ctrl+shift+/"];
 function ShortcutContext({ children }) {
-  const [reveal, setReveal] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [reveal, setReveal] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     if (!loggedHotkeyConsole) {
       loggedHotkeyConsole = true;
       console.log(
@@ -1055,7 +1066,7 @@ function ShortcutRevealer({
   macShortcut,
   className
 }) {
-  const reveal = (0, import_react8.useContext)(Context);
+  const reveal = (0, import_react9.useContext)(Context);
   if (!reveal || !shortcut.includes("+") && shortcut.length > 1) {
     return null;
   }
@@ -1079,8 +1090,8 @@ function Hotkey({ shortcut }) {
 }
 
 // src/components/AddButton/AddButton.styles.ts
-var import_react9 = require("@emotion/react");
-var addButton = import_react9.css`
+var import_react10 = require("@emotion/react");
+var addButton = import_react10.css`
   --max-size: clamp(2.5rem, 100vw, 3.5rem);
   align-items: center;
   box-shadow: var(--shadow-base);
@@ -1156,7 +1167,7 @@ var AddButton = ({
           ShortcutRevealer,
           {
             shortcut,
-            css: import_react10.css`
+            css: import_react11.css`
             top: -2rem;
             left: -1.5rem;
           `
@@ -1176,11 +1187,11 @@ var import_react_icons = require("react-icons");
 var import_md = require("react-icons/md");
 
 // src/components/Icons/Icon.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/components/Icons/Icon.styles.ts
-var import_react11 = require("@emotion/react");
-var IconImg = import_react11.css`
+var import_react12 = require("@emotion/react");
+var IconImg = import_react12.css`
   display: hidden;
 
   ${mq("sm")} {
@@ -1192,38 +1203,38 @@ var IconImg = import_react11.css`
     vertical-align: middle;
   }
 `;
-var IconColorDefault = import_react11.css`
+var IconColorDefault = import_react12.css`
   color: var(--brand-secondary-3);
 `;
-var IconColorRed = import_react11.css`
+var IconColorRed = import_react12.css`
   color: var(--brand-secondary-5);
 `;
-var IconColorGray = import_react11.css`
+var IconColorGray = import_react12.css`
   color: var(--gray-500);
 `;
-var IconColorCurrent = import_react11.css`
+var IconColorCurrent = import_react12.css`
   color: currentColor;
 `;
-var IconColorAction = import_react11.css`
+var IconColorAction = import_react12.css`
   color: var(--primary-action-default);
 `;
 
 // src/components/Icons/IconsProvider.tsx
 var import_param_case = require("param-case");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
-var IconContext = (0, import_react12.createContext)({
+var IconContext = (0, import_react13.createContext)({
   /** object mapping of available icons */
   iconsMap: {},
   /** sets the loading state of the icon */
   isLoading: true
 });
 function useIconContext() {
-  return (0, import_react12.useContext)(IconContext);
+  return (0, import_react13.useContext)(IconContext);
 }
 function IconsProvider({ children }) {
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
-  const [iconsMap, setIconsMap] = (0, import_react12.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const [iconsMap, setIconsMap] = (0, import_react13.useState)({});
   const initializeIconsMap = async () => {
     const allCssGgIcons = await import("react-icons/cg");
     const iconMap = Object.entries(allCssGgIcons).reduce((map, [key, icon]) => {
@@ -1236,7 +1247,7 @@ function IconsProvider({ children }) {
     setIconsMap({ ...iconMap, ...customIcons });
     setIsLoading(false);
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     initializeIconsMap();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconContext.Provider, { value: { iconsMap, isLoading }, children });
@@ -1270,7 +1281,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
-var Icon = import_react13.default.memo(IconInner);
+var Icon = import_react14.default.memo(IconInner);
 
 // src/components/Icons/customIcons.tsx
 var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
@@ -1607,8 +1618,8 @@ var customIcons = {
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
-var import_react14 = require("@emotion/react");
-var AddListButtonBtn = import_react14.css`
+var import_react15 = require("@emotion/react");
+var AddListButtonBtn = import_react15.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -1629,21 +1640,21 @@ var AddListButtonBtn = import_react14.css`
     box-shadow: var(--shadow-base);
   }
 `;
-var AddListButtonTheme = (theme) => import_react14.css`
+var AddListButtonTheme = (theme) => import_react15.css`
   color: ${theme};
 `;
-var AddListButtonBtnSmall = import_react14.css`
+var AddListButtonBtnSmall = import_react15.css`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => import_react14.css`
+var AddListButtonIconMathPlus = (disabled, theme) => import_react15.css`
   box-sizing: border-box;
   background: ${disabled ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
-var AddListButtonIcon = import_react14.css`
+var AddListButtonIcon = import_react15.css`
   border-radius: var(--rounded-full);
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 `;
@@ -1697,32 +1708,32 @@ var AddListButton = ({
 var import_cg4 = require("react-icons/cg");
 
 // src/components/Typography/styles/Heading.styles.ts
-var import_react15 = require("@emotion/react");
-var h1 = import_react15.css`
+var import_react16 = require("@emotion/react");
+var h1 = import_react16.css`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h2 = import_react15.css`
+var h2 = import_react16.css`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h3 = import_react15.css`
+var h3 = import_react16.css`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h4 = import_react15.css`
+var h4 = import_react16.css`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h5 = import_react15.css`
+var h5 = import_react16.css`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h6 = import_react15.css`
+var h6 = import_react16.css`
   font-size: var(--fs-base);
 `;
-var commonHeadingAttr = (withMarginBottom) => import_react15.css`
+var commonHeadingAttr = (withMarginBottom) => import_react16.css`
   font-weight: var(--fw-regular);
   font-family: var(--ff-base);
   margin-top: 0;
   margin-bottom: ${withMarginBottom ? "var(--spacing-base)" : "0"};
 `;
-var commonLineHeight = import_react15.css`
+var commonLineHeight = import_react16.css`
   line-height: 1.25;
 `;
 
@@ -1755,8 +1766,8 @@ var Heading = ({
 };
 
 // src/components/Badges/Badge.styles.ts
-var import_react16 = require("@emotion/react");
-var BadgeContainer = import_react16.css`
+var import_react17 = require("@emotion/react");
+var BadgeContainer = import_react17.css`
   --caution-desc: rgb(161, 98, 7);
   --caution-title: rgb(133, 77, 14);
   --caution-container: rgb(254, 252, 232);
@@ -1780,43 +1791,43 @@ var BadgeContainer = import_react16.css`
   border-radius: var(--rounded-base);
   display: inline-block;
 `;
-var ExtraSmall = import_react16.css`
+var ExtraSmall = import_react17.css`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xxs);
 `;
-var Small = import_react16.css`
+var Small = import_react17.css`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var Base = import_react16.css`
+var Base = import_react17.css`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
-var Caution = import_react16.css`
+var Caution = import_react17.css`
   background-color: var(--caution-container);
   color: var(--caution-title);
 `;
-var Info = import_react16.css`
+var Info = import_react17.css`
   background-color: var(--info-container);
   color: var(--info-title);
 `;
-var Note = import_react16.css`
+var Note = import_react17.css`
   background-color: var(--note-container);
   color: var(--note-title);
 `;
-var Success = import_react16.css`
+var Success = import_react17.css`
   background-color: var(--success-container);
   color: var(--success-title);
 `;
-var Error2 = import_react16.css`
+var Error2 = import_react17.css`
   background-color: var(--danger-container);
   color: var(--danger-title);
 `;
-var Unimportant = import_react16.css`
+var Unimportant = import_react17.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var UppercaseText = import_react16.css`
+var UppercaseText = import_react17.css`
   text-transform: uppercase;
 `;
 
@@ -1862,23 +1873,23 @@ var React4 = __toESM(require("react"));
 var import_cg2 = require("react-icons/cg");
 
 // src/components/Typography/styles/Link.styles.ts
-var import_react17 = require("@emotion/react");
-var link = import_react17.css`
+var import_react18 = require("@emotion/react");
+var link = import_react18.css`
   display: inline-flex;
   transition: color var(--duration-fast) var(--timing-ease-out);
   word-break: break-word;
 `;
-var linkColorDefault = import_react17.css`
+var linkColorDefault = import_react18.css`
   color: var(--primary-action-default);
 
   &:hover {
     color: var(--primary-action-hover);
   }
 `;
-var linkColorDestructive = import_react17.css`
+var linkColorDestructive = import_react18.css`
   color: var(--brand-secondary-5);
 `;
-var linkColorCurrent = import_react17.css`
+var linkColorCurrent = import_react18.css`
   color: currentColor;
 `;
 
@@ -1905,8 +1916,8 @@ var Link = React4.forwardRef(
 var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Link, { ...props }) }));
 
 // src/components/Typography/styles/Paragraph.styles.ts
-var import_react18 = require("@emotion/react");
-var paragraph = import_react18.css`
+var import_react19 = require("@emotion/react");
+var paragraph = import_react19.css`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -1917,10 +1928,10 @@ var paragraph = import_react18.css`
 
 // src/components/Typography/Paragraph.tsx
 var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
-var import_react19 = require("@emotion/react");
+var import_react20 = require("@emotion/react");
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
-    const paragraphContent = htmlContent.map((html, index) => /* @__PURE__ */ (0, import_react19.createElement)(
+    const paragraphContent = htmlContent.map((html, index) => /* @__PURE__ */ (0, import_react20.createElement)(
       "p",
       {
         ...pAttributes,
@@ -1952,17 +1963,17 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
 };
 
 // src/components/Typography/styles/IntegrationHeaderSection.styles.ts
-var import_react20 = require("@emotion/react");
-var IntegrationHeaderSectionContainer = import_react20.css`
+var import_react21 = require("@emotion/react");
+var IntegrationHeaderSectionContainer = import_react21.css`
   margin-bottom: var(--spacing-lg);
 `;
-var IntegrationHeaderSectionTitleContainer = import_react20.css`
+var IntegrationHeaderSectionTitleContainer = import_react21.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
 `;
-var IntegrationHeaderSectionTitleGroup = import_react20.css`
+var IntegrationHeaderSectionTitleGroup = import_react21.css`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -1973,26 +1984,26 @@ var IntegrationHeaderSectionTitleGroup = import_react20.css`
     gap: var(--spacing-md);
   }
 `;
-var IntegrationHeaderSectionTitle = import_react20.css`
+var IntegrationHeaderSectionTitle = import_react21.css`
   font-size: clamp(1.75rem, var(--fluid-font-base), 2.25rem);
   font-weight: var(--fw-regular);
   margin: 0;
 `;
-var IntegrationHeaderSectionText = import_react20.css``;
-var IntegrationHeaderSectionIconContainer = import_react20.css`
+var IntegrationHeaderSectionText = import_react21.css``;
+var IntegrationHeaderSectionIconContainer = import_react21.css`
   position: relative;
   max-width: 100px;
 `;
-var IntegrationHeaderSectionIcon = import_react20.css`
+var IntegrationHeaderSectionIcon = import_react21.css`
   position: absolute;
   inset: 0;
   margin: auto;
   width: clamp(32px, calc(4vw + 1rem), 44px);
 `;
-var IntegrationHeaderSectionHexIcon = import_react20.css`
+var IntegrationHeaderSectionHexIcon = import_react21.css`
   width: clamp(52px, calc(6vw + 1rem), 100px);
 `;
-var IntegrationHeaderSectionDocsLink = import_react20.css`
+var IntegrationHeaderSectionDocsLink = import_react21.css`
   ${mq("sm")} {
     margin-left: auto;
   }
@@ -2080,8 +2091,8 @@ var IntegrationHeaderSection = ({
 var import_cg3 = require("react-icons/cg");
 
 // src/components/Typography/styles/PageHeaderSection.styles.ts
-var import_react21 = require("@emotion/react");
-var PageHeaderSectionContainer = import_react21.css`
+var import_react22 = require("@emotion/react");
+var PageHeaderSectionContainer = import_react22.css`
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--spacing-lg);
@@ -2093,7 +2104,7 @@ var PageHeaderSectionContainer = import_react21.css`
     gap: var(--spacing-lg);
   }
 `;
-var PageHeaderSectionDetails = import_react21.css`
+var PageHeaderSectionDetails = import_react22.css`
   flex-grow: 1;
   max-width: var(--prose);
   order: 1;
@@ -2102,7 +2113,7 @@ var PageHeaderSectionDetails = import_react21.css`
     order: 0;
   }
 `;
-var PageHeaderSectionLinkContainer = import_react21.css`
+var PageHeaderSectionLinkContainer = import_react22.css`
   align-items: center;
   color: var(--primary-action-default);
   display: flex;
@@ -2112,10 +2123,10 @@ var PageHeaderSectionLinkContainer = import_react21.css`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionLinkIcon = import_react21.css`
+var PageHeaderSectionLinkIcon = import_react22.css`
   margin-left: -0.5rem;
 `;
-var PageHeaderSectionLink = import_react21.css`
+var PageHeaderSectionLink = import_react22.css`
   color: var(--primary-action-default);
   font-size: var(--fs-sm);
 
@@ -2123,7 +2134,7 @@ var PageHeaderSectionLink = import_react21.css`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionChildContainer = import_react21.css`
+var PageHeaderSectionChildContainer = import_react22.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-lg);
@@ -2140,7 +2151,7 @@ var PageHeaderSectionChildContainer = import_react21.css`
     order: 1;
   }
 `;
-var PageHeaderSectionTitle = import_react21.css`
+var PageHeaderSectionTitle = import_react22.css`
   margin-block: 0 var(--spacing-base);
 `;
 
@@ -2181,8 +2192,8 @@ var PageHeaderSection = ({
 };
 
 // src/components/Alerts/InlineAlert.styles.ts
-var import_react22 = require("@emotion/react");
-var InlineAlertContainer = import_react22.css`
+var import_react23 = require("@emotion/react");
+var InlineAlertContainer = import_react23.css`
   background: var(--brand-primary-1);
   border-radius: var(--rounded-2xl);
   color: var(--white);
@@ -2243,13 +2254,13 @@ var SetArrowPosition = (position) => {
   };
   return options[position];
 };
-var InlineAlertTriangle = (position) => import_react22.css`
+var InlineAlertTriangle = (position) => import_react23.css`
   &:before {
     border: 12px solid transparent;
     ${SetArrowPosition(position)}
   }
 `;
-var InlineAlertCloseBtn = import_react22.css`
+var InlineAlertCloseBtn = import_react23.css`
   background: none;
   border: none;
   padding: 0;
@@ -2257,10 +2268,10 @@ var InlineAlertCloseBtn = import_react22.css`
   top: var(--spacing-sm);
   right: var(--spacing-sm);
 `;
-var InlineAlertTitle = import_react22.css`
+var InlineAlertTitle = import_react23.css`
   margin: 0;
 `;
-var InlineAlertParagraph = import_react22.css`
+var InlineAlertParagraph = import_react23.css`
   margin: 0;
 `;
 
@@ -10744,11 +10755,11 @@ var AnimationFile = ({
 var import_cg5 = require("react-icons/cg");
 
 // src/components/Banner/Banner.styles.ts
-var import_react24 = require("@emotion/react");
+var import_react25 = require("@emotion/react");
 
 // src/styles/functionalColors.styles.ts
-var import_react23 = require("@emotion/react");
-var functionalColors = import_react23.css`
+var import_react24 = require("@emotion/react");
+var functionalColors = import_react24.css`
   --caution-desc: rgb(161, 98, 7);
   --caution-icon: rgb(250, 204, 21);
   --caution-title: rgb(133, 77, 14);
@@ -10776,7 +10787,7 @@ var functionalColors = import_react23.css`
 `;
 
 // src/components/Banner/Banner.styles.ts
-var bannerStyles = import_react24.css`
+var bannerStyles = import_react25.css`
   ${functionalColors}
 
   --border-color: var(--info-icon);
@@ -10810,11 +10821,11 @@ var bannerStyles = import_react24.css`
     --background-color: var(--success-container);
   }
 `;
-var bannerAnimatedStyles = import_react24.css`
+var bannerAnimatedStyles = import_react25.css`
   animation: ${slideInTtb} var(--duration-xfast) ease-out;
 `;
-var bannerContentStyles = import_react24.css``;
-var bannerDismissButtonStyles = import_react24.css`
+var bannerContentStyles = import_react25.css``;
+var bannerDismissButtonStyles = import_react25.css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10863,15 +10874,15 @@ var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props
 };
 
 // src/components/Brand/UniformLogo.styles.ts
-var import_react25 = require("@emotion/react");
-var SVG = import_react25.css`
+var import_react26 = require("@emotion/react");
+var SVG = import_react26.css`
   display: block;
 `;
-var SVGLight = import_react25.css`
+var SVGLight = import_react26.css`
   background: transparent;
   color: var(--brand-secondary-1);
 `;
-var SVGDark = import_react25.css`
+var SVGDark = import_react26.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
@@ -11069,8 +11080,8 @@ var import_Menu = require("reakit/Menu");
 var import_Portal = require("reakit/Portal");
 
 // src/components/Menu/Menu.styles.ts
-var import_react26 = require("@emotion/react");
-var menu = import_react26.css`
+var import_react27 = require("@emotion/react");
+var menu = import_react27.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -11122,12 +11133,12 @@ var Menu = ({
 };
 
 // src/components/Menu/MenuGroup.styles.ts
-var import_react27 = require("@emotion/react");
-var MenuGroupContainer = import_react27.css`
+var import_react28 = require("@emotion/react");
+var MenuGroupContainer = import_react28.css`
   display: flex;
   flex-direction: column;
 `;
-var MenuTitle = import_react27.css`
+var MenuTitle = import_react28.css`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -11148,8 +11159,8 @@ var React7 = __toESM(require("react"));
 var import_reakit = require("reakit");
 
 // src/components/Menu/MenuItem.styles.ts
-var import_react28 = require("@emotion/react");
-var menuItem = (textTheme) => import_react28.css`
+var import_react29 = require("@emotion/react");
+var menuItem = (textTheme) => import_react29.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11175,7 +11186,7 @@ var menuItem = (textTheme) => import_react28.css`
     outline: none;
   }
 `;
-var menuItemWithIcon = import_react28.css`
+var menuItemWithIcon = import_react29.css`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -11187,7 +11198,7 @@ var menuItemWithIcon = import_react28.css`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = import_react28.css`
+var menuItemSeparator = import_react29.css`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -11239,8 +11250,8 @@ var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("hr", { css: menuItemSeparator });
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-var import_react29 = require("@emotion/react");
-var ButtonWithMenuContainer = import_react29.css`
+var import_react30 = require("@emotion/react");
+var ButtonWithMenuContainer = import_react30.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -11261,7 +11272,7 @@ var ButtonWithMenuContainer = import_react29.css`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = import_react29.css`
+var ButtonWithMenuBtn = import_react30.css`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -11284,19 +11295,19 @@ var ButtonWithMenuBtn = import_react29.css`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = import_react29.css`
+var ButtonWithMenuIcon = import_react30.css`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = import_react29.css`
+var buttonPrimary2 = import_react30.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react29.css`
+var buttonPrimaryDisabled = import_react30.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react29.css`
+var buttonSecondary2 = import_react30.css`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -11304,17 +11315,17 @@ var buttonSecondary2 = import_react29.css`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = import_react29.css`
+var buttonSecondaryDisabled = import_react30.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react29.css`
+var buttonUnimportant2 = import_react30.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = import_react29.css`
+var buttonUnimportantDisabled = import_react30.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react29.css`
+var buttonGhost2 = import_react30.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -11322,7 +11333,7 @@ var buttonGhost2 = import_react29.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react29.css`
+var buttonGhostDisabled = import_react30.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
@@ -11383,18 +11394,18 @@ var ButtonWithMenu = ({
 };
 
 // src/components/Callout/Callout.tsx
-var import_react31 = require("@emotion/react");
+var import_react32 = require("@emotion/react");
 
 // src/components/Callout/Callout.styles.ts
-var import_react30 = require("@emotion/react");
-var calloutContainer = import_react30.css`
+var import_react31 = require("@emotion/react");
+var calloutContainer = import_react31.css`
   ${functionalColors}
 
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = import_react30.css`
+var calloutContainerCompact = import_react31.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -11406,25 +11417,25 @@ var calloutContainerCompact = import_react30.css`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = import_react30.css`
+var calloutInner = import_react31.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = import_react30.css`
+var calloutBody = import_react31.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = import_react30.css`
+var calloutBodyCompact = import_react31.css`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = import_react30.css`
+var calloutIconWrap = import_react31.css`
   flex-shrink: 0;
 `;
-var calloutTitle = import_react30.css`
+var calloutTitle = import_react31.css`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = import_react30.css`
+var calloutIcon = import_react31.css`
   width: 1.25rem;
   height: 1.25rem;
 `;
@@ -11558,91 +11569,91 @@ var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--caution-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--caution-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--info-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--info-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--note-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--note-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: import_react31.css`
+    descriptionColor: import_react32.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react31.css`
+    iconColor: import_react32.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react31.css`
+    containerStyles: import_react32.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -11680,8 +11691,8 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
 var import_cg7 = require("react-icons/cg");
 
 // src/components/Card/Card.styles.ts
-var import_react32 = require("@emotion/react");
-var CardContainer = import_react32.css`
+var import_react33 = require("@emotion/react");
+var CardContainer = import_react33.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11694,7 +11705,7 @@ var CardContainer = import_react32.css`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => import_react32.css`
+var CardTitle = (marginBottom) => import_react33.css`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -11702,7 +11713,7 @@ var CardTitle = (marginBottom) => import_react32.css`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = import_react32.css`
+var CardMenu = import_react33.css`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -11765,12 +11776,12 @@ var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
 };
 
 // src/components/Card/CardContainer.styles.ts
-var import_react33 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react33.css`
+var import_react34 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react34.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react33.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react34.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -11799,8 +11810,8 @@ var CardContainer2 = ({
 var import_cg8 = require("react-icons/cg");
 
 // src/components/Layout/styles/Container.styles.ts
-var import_react34 = require("@emotion/react");
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react34.css`
+var import_react35 = require("@emotion/react");
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react35.css`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -11838,8 +11849,8 @@ var Container2 = ({
 };
 
 // src/components/Layout/styles/HorizontalRhythm.styles.ts
-var import_react35 = require("@emotion/react");
-var HorizontalRhythmContainer = (size) => import_react35.css`
+var import_react36 = require("@emotion/react");
+var HorizontalRhythmContainer = (size) => import_react36.css`
   display: flex;
   gap: var(--spacing-${size});
 `;
@@ -11857,11 +11868,11 @@ var HorizontalRhythm = ({
 };
 
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
-var import_react36 = require("@emotion/react");
-var TwoColumnLayoutContainer = (bgColor) => import_react36.css`
+var import_react37 = require("@emotion/react");
+var TwoColumnLayoutContainer = (bgColor) => import_react37.css`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => import_react36.css`
+var TwoColumnLayoutInner = (invertLayout) => import_react37.css`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -11877,8 +11888,8 @@ var TwoColumnLayoutInner = (invertLayout) => import_react36.css`
     }`}
   }
 `;
-var TwoColumnLayoutMain = import_react36.css``;
-var TwoColumnLayoutSupporting = import_react36.css`
+var TwoColumnLayoutMain = import_react37.css``;
+var TwoColumnLayoutSupporting = import_react37.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
@@ -11899,8 +11910,8 @@ var TwoColumnLayout = ({
 };
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-var import_react37 = require("@emotion/react");
-var VerticalRhythmContainer = (size) => import_react37.css`
+var import_react38 = require("@emotion/react");
+var VerticalRhythmContainer = (size) => import_react38.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -11914,8 +11925,8 @@ var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
 };
 
 // src/components/Card/LoadingCardSkeleton.styles.ts
-var import_react38 = require("@emotion/react");
-var LoadingCardSkeleton = import_react38.css`
+var import_react39 = require("@emotion/react");
+var LoadingCardSkeleton = import_react39.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   color: var(--gray-400);
   border-radius: var(--rounded-base);
@@ -11923,21 +11934,21 @@ var LoadingCardSkeleton = import_react38.css`
   min-height: 160px;
   position: relative;
 `;
-var LoadingText = import_react38.css`
+var LoadingText = import_react39.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
   display: block;
 `;
-var LoadingTitle = import_react38.css`
+var LoadingTitle = import_react39.css`
   width: clamp(200px, 100vw, 60%);
   height: var(--spacing-md);
 `;
-var LoadingTimeStamp = import_react38.css`
+var LoadingTimeStamp = import_react39.css`
   width: clamp(200px, 100vw, 30%);
   height: var(--spacing-sm);
 `;
-var LoadingMenuIcon = import_react38.css`
+var LoadingMenuIcon = import_react39.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   position: absolute;
   top: var(--spacing-md);
@@ -11958,8 +11969,8 @@ var LoadingCardSkeleton2 = () => {
 var import_cg9 = require("react-icons/cg");
 
 // src/components/Chip/Chip.styles.ts
-var import_react39 = require("@emotion/react");
-var ChipContainer = import_react39.css`
+var import_react40 = require("@emotion/react");
+var ChipContainer = import_react40.css`
   border-radius: var(--rounded-full);
   background: lime;
   cursor: pointer;
@@ -11977,20 +11988,20 @@ var ChipContainer = import_react39.css`
     }
   }
 `;
-var ChipText = import_react39.css`
+var ChipText = import_react40.css`
   line-height: 1;
 `;
-var ChipIcon = import_react39.css`
+var ChipIcon = import_react40.css`
   align-items: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
-var ChipSeparator = import_react39.css`
+var ChipSeparator = import_react40.css`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
 `;
-var ChipTiny = import_react39.css`
+var ChipTiny = import_react40.css`
   font-size: var(--fs-xs);
   padding-inline: var(--spacing-sm);
 
@@ -11998,7 +12009,7 @@ var ChipTiny = import_react39.css`
     padding-block: var(--spacing-xs);
   }
 `;
-var ChipSmall = import_react39.css`
+var ChipSmall = import_react40.css`
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-base);
 
@@ -12006,7 +12017,7 @@ var ChipSmall = import_react39.css`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipMedium = import_react39.css`
+var ChipMedium = import_react40.css`
   font-size: var(--fs-base);
   padding-inline: var(--spacing-base);
 
@@ -12014,7 +12025,7 @@ var ChipMedium = import_react39.css`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipThemeAccentLight = import_react39.css`
+var ChipThemeAccentLight = import_react40.css`
   background: var(--accent-light);
   color: var(--brand-secondary-1);
 
@@ -12037,7 +12048,7 @@ var ChipThemeAccentLight = import_react39.css`
     color: var(--accent-light);
   }
 `;
-var ChipThemeAccentDark = import_react39.css`
+var ChipThemeAccentDark = import_react40.css`
   background: var(--accent-dark);
   color: var(--white);
 
@@ -12056,7 +12067,7 @@ var ChipThemeAccentDark = import_react39.css`
     color: var(--white);
   }
 `;
-var ChipAltThemeAccentLight = import_react39.css`
+var ChipAltThemeAccentLight = import_react40.css`
   background: var(--accent-alt-light);
   color: var(--brand-secondary-1);
 
@@ -12079,7 +12090,7 @@ var ChipAltThemeAccentLight = import_react39.css`
     color: var(--accent-alt-light);
   }
 `;
-var ChipAltThemeAccentDark = import_react39.css`
+var ChipAltThemeAccentDark = import_react40.css`
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -12098,7 +12109,7 @@ var ChipAltThemeAccentDark = import_react39.css`
     color: var(--white);
   }
 `;
-var ChipThemeNeutralLight = import_react39.css`
+var ChipThemeNeutralLight = import_react40.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
 
@@ -12107,7 +12118,7 @@ var ChipThemeNeutralLight = import_react39.css`
     background: var(--gray-400);
   }
 `;
-var ChipThemeNeutralDark = import_react39.css`
+var ChipThemeNeutralDark = import_react40.css`
   background: var(--gray-700);
   color: var(--white);
 
@@ -12120,7 +12131,7 @@ var ChipThemeNeutralDark = import_react39.css`
     background: var(--gray-900);
   }
 `;
-var ChipActionButton = import_react39.css`
+var ChipActionButton = import_react40.css`
   background: transparent;
   border: none;
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
@@ -12174,8 +12185,8 @@ var DismissibleChipAction = ({ onDismiss, ...props }) => {
 };
 
 // src/components/Counter/Counter.styles.ts
-var import_react40 = require("@emotion/react");
-var counterContainer = (bgColor) => import_react40.css`
+var import_react41 = require("@emotion/react");
+var counterContainer = (bgColor) => import_react41.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -12188,16 +12199,16 @@ var counterContainer = (bgColor) => import_react40.css`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = import_react40.css`
+var counterZeroValue = import_react41.css`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = import_react40.css`
+var counterTripleValue = import_react41.css`
   position: relative;
 `;
-var counterIcon = import_react40.css`
+var counterIcon = import_react41.css`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -12222,7 +12233,7 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
-var import_react41 = require("@emotion/react");
+var import_react42 = require("@emotion/react");
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -12241,7 +12252,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react41.css`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react42.css`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -12271,8 +12282,8 @@ var DashedBox = ({
 var React8 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
-var import_react42 = require("@emotion/react");
-var details = import_react42.css`
+var import_react43 = require("@emotion/react");
+var details = import_react43.css`
   cursor: pointer;
   &[open] {
     & > summary svg {
@@ -12280,11 +12291,11 @@ var details = import_react42.css`
     }
   }
 `;
-var detailsContent = import_react42.css`
+var detailsContent = import_react43.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = import_react42.css`
+var summary = import_react43.css`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -12297,11 +12308,11 @@ var summary = import_react42.css`
     display: none;
   }
 `;
-var summaryIcon = import_react42.css`
+var summaryIcon = import_react43.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = import_react42.css`
+var summaryIconVisiblyHidden = import_react43.css`
   visibility: hidden;
 `;
 
@@ -12344,12 +12355,12 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_cg10 = require("react-icons/cg");
 
 // src/components/Drawer/Drawer.styles.ts
-var import_react43 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react43.css`
+var import_react44 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react44.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -12359,7 +12370,7 @@ var drawerStyles = (bgColor = "var(--white)") => import_react43.css`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react43.css`
+var drawerCloseButtonStyles = import_react44.css`
   align-self: flex-end;
   background: transparent;
   border: none;
@@ -12367,23 +12378,23 @@ var drawerCloseButtonStyles = import_react43.css`
   padding: var(--spacing-xs);
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react43.css`
+var drawerHeaderStyles = import_react44.css`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = import_react43.css`
+var drawerRendererStyles = import_react44.css`
   inset: 0;
   overflow: hidden;
   z-index: 40;
 `;
-var drawerInnerStyles = import_react43.css`
+var drawerInnerStyles = import_react44.css`
   height: 100%;
   padding: 0 var(--spacing-base) var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
-var slideDrawerIn = import_react43.keyframes`
+var slideDrawerIn = import_react44.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -12398,7 +12409,7 @@ var slideDrawerIn = import_react43.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react43.css`
+var drawerWrapperStyles = import_react44.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -12409,7 +12420,7 @@ var drawerWrapperStyles = import_react43.css`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = import_react43.css`
+var drawerWrapperOverlayStyles = import_react44.css`
   position: absolute;
   inset: 0;
   background: rgba(31, 43, 52, 0.4);
@@ -12417,9 +12428,9 @@ var drawerWrapperOverlayStyles = import_react43.css`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react44.createContext)({
+var DrawerContext = (0, import_react45.createContext)({
   drawersRegistry: [],
   registerDrawer: () => {
   },
@@ -12427,7 +12438,7 @@ var DrawerContext = (0, import_react44.createContext)({
   }
 });
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react44.useState)([]);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react45.useState)([]);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -12435,7 +12446,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react44.useCallback)(
+  const registerDrawer = (0, import_react45.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a;
@@ -12457,7 +12468,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react44.useCallback)(
+  const unregisterDrawer = (0, import_react45.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -12470,7 +12481,7 @@ var DrawerProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
 };
 var useDrawer = () => {
-  return (0, import_react44.useContext)(DrawerContext);
+  return (0, import_react45.useContext)(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -12487,13 +12498,13 @@ function isEqualDrawerInstance(a, b) {
 }
 
 // src/components/Drawer/DrawerRenderer.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
-var CurrentDrawerRendererContext = (0, import_react45.createContext)({});
+var CurrentDrawerRendererContext = (0, import_react46.createContext)({});
 var useCurrentDrawerRenderer = () => {
-  return (0, import_react45.useContext)(CurrentDrawerRendererContext);
+  return (0, import_react46.useContext)(CurrentDrawerRendererContext);
 };
 var DrawerRenderer = ({
   stackId,
@@ -12557,7 +12568,7 @@ var DrawerWrapper = ({
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var Drawer = import_react46.default.forwardRef(
+var Drawer = import_react47.default.forwardRef(
   ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
     const drawerRendererProps = { width, minWidth, maxWidth, position };
     const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
@@ -12579,8 +12590,8 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer } = useDrawer();
-  const closeButtonRef = (0, import_react46.useRef)(null);
-  const component = (0, import_react46.useMemo)(() => {
+  const closeButtonRef = (0, import_react47.useRef)(null);
+  const component = (0, import_react47.useMemo)(() => {
     const headerId = `dialog-header-${stackId}-${id}`;
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
@@ -12611,7 +12622,7 @@ var DrawerInner = ({
       }
     );
   }, [children, header, id, stackId, bgColor, onRequestClose, ref, testId]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     registerDrawer({
       drawer: {
         id,
@@ -12628,15 +12639,15 @@ var DrawerInner = ({
       }
     });
   }, [component, instanceKey, registerDrawer]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     return () => unregisterDrawer({ id, stackId, instanceKey });
   }, [id, stackId, instanceKey, unregisterDrawer]);
   return null;
 };
 
 // src/components/Input/styles/CaptionText.styles.ts
-var import_react47 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react47.css`
+var import_react48 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react48.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -12651,23 +12662,23 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-var import_react48 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react48.css`
+var import_react49 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react49.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react48.css`
+var CheckboxWithInfoLabel = import_react49.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react48.css`
+var CheckboxWithInfoInput = import_react49.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -12700,7 +12711,7 @@ var CheckboxWithInfoInput = import_react48.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react48.css`
+var InfoDialogContainer = import_react49.css`
   position: relative;
 
   &:hover {
@@ -12709,7 +12720,7 @@ var InfoDialogContainer = import_react48.css`
     }
   }
 `;
-var InfoDialogMessage = import_react48.css`
+var InfoDialogMessage = import_react49.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -12733,7 +12744,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react49.forwardRef)(
+var CheckboxWithInfo = (0, import_react50.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -12749,8 +12760,8 @@ var CheckboxWithInfo = (0, import_react49.forwardRef)(
 var import_md2 = require("react-icons/md");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
-var import_react50 = require("@emotion/react");
-var ErrorText = import_react50.css`
+var import_react51 = require("@emotion/react");
+var ErrorText = import_react51.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -12770,9 +12781,9 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 var React12 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
-var import_react51 = require("@emotion/react");
+var import_react52 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react51.css`
+  const base = import_react52.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -12784,18 +12795,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react51.css`
+    import_react52.css`
           background: white;
         `,
     base
   ] : [
-    import_react51.css`
+    import_react52.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react51.css`
+var fieldsetLegend = import_react52.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -12805,7 +12816,7 @@ var fieldsetLegend = import_react51.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react51.css`
+var fieldsetBody = import_react52.css`
   clear: left;
 `;
 
@@ -12824,8 +12835,8 @@ var Fieldset = React12.forwardRef(
 var import_md3 = require("react-icons/md");
 
 // src/components/Input/styles/InfoMessage.styles.tsx
-var import_react52 = require("@emotion/react");
-var InfoText = import_react52.css`
+var import_react53 = require("@emotion/react");
+var InfoText = import_react53.css`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
 
@@ -12834,7 +12845,7 @@ var InfoText = import_react52.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = import_react52.css`
+var InfoIcon2 = import_react53.css`
   color: var(--info-icon);
 `;
 
@@ -12869,14 +12880,14 @@ var Label = ({ children, className, testId, ...props }) => {
 var import_md4 = require("react-icons/md");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
-var import_react53 = require("@emotion/react");
-var WarningText = import_react53.css`
+var import_react54 = require("@emotion/react");
+var WarningText = import_react54.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react53.css`
+var WarningIcon = import_react54.css`
   color: var(--alert);
 `;
 
@@ -13087,17 +13098,17 @@ function InputComboBox(props) {
 }
 
 // src/components/Input/InputInlineSelect.tsx
-var import_react55 = require("@emotion/react");
-var import_react56 = require("react");
+var import_react56 = require("@emotion/react");
+var import_react57 = require("react");
 var import_cg11 = require("react-icons/cg");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
-var import_react54 = require("@emotion/react");
-var inlineSelectContainer = import_react54.css`
+var import_react55 = require("@emotion/react");
+var inlineSelectContainer = import_react55.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react54.css`
+var inlineSelectBtn = import_react55.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -13121,7 +13132,7 @@ var inlineSelectBtn = import_react54.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react54.css`
+var inlineSelectMenu = import_react55.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -13132,7 +13143,7 @@ var inlineSelectMenu = import_react54.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react54.css`
+var inlineSelectBtnOptions = import_react55.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -13148,7 +13159,7 @@ var inlineSelectBtnOptions = import_react54.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react54.css`
+var inlineSelectMenuClosed = import_react55.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -13168,15 +13179,15 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react56.useState)(false);
-  const divRef = (0, import_react56.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react57.useState)(false);
+  const divRef = (0, import_react57.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react55.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react56.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -13407,7 +13418,7 @@ var Textarea = ({
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
-var import_react57 = __toESM(require("@monaco-editor/react"));
+var import_react58 = __toESM(require("@monaco-editor/react"));
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
@@ -13419,7 +13430,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     effectiveHeight = minEditorHeightPx;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-    import_react57.default,
+    import_react58.default,
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
@@ -13455,34 +13466,34 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-var import_react58 = require("@emotion/react");
-var LimitsBarContainer = import_react58.css`
+var import_react59 = require("@emotion/react");
+var LimitsBarContainer = import_react59.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react58.css`
+var LimitsBarProgressBar = import_react59.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react58.css`
+var LimitsBarProgressBarLine = import_react59.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react58.css`
+var LimitsBarLabelContainer = import_react59.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react58.css`
+var LimitsBarLabel = import_react59.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react58.css`
+var LimitsBarBgColor = (statusColor) => import_react59.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react58.css`
+var LimitsBarTextColor = (statusColor) => import_react59.css`
   color: ${statusColor};
 `;
 
@@ -13532,8 +13543,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-var import_react59 = require("@emotion/react");
-var LinkListContainer = (padding) => import_react59.css`
+var import_react60 = require("@emotion/react");
+var LinkListContainer = (padding) => import_react60.css`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -13552,14 +13563,14 @@ var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) =>
 };
 
 // src/components/List/ScrollableList.tsx
-var import_react61 = require("@emotion/react");
+var import_react62 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
-var import_react60 = require("@emotion/react");
-var ScrollableListContainer = import_react60.css`
+var import_react61 = require("@emotion/react");
+var ScrollableListContainer = import_react61.css`
   position: relative;
 `;
-var ScrollableListInner = import_react60.css`
+var ScrollableListInner = import_react61.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -13583,7 +13594,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "span",
       {
-        css: import_react61.css`
+        css: import_react62.css`
             ${labelText}
           `,
         children: label
@@ -13597,8 +13608,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 var import_cg12 = require("react-icons/cg");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-var import_react62 = require("@emotion/react");
-var ScrollableListItemContainer = import_react62.css`
+var import_react63 = require("@emotion/react");
+var ScrollableListItemContainer = import_react63.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -13607,13 +13618,13 @@ var ScrollableListItemContainer = import_react62.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react62.css`
+var ScrollableListItemShadow = import_react63.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react62.css`
+var ScrollableListItemActive = import_react63.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react62.css`
+var ScrollableListItemBtn = import_react63.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -13628,27 +13639,27 @@ var ScrollableListItemBtn = import_react62.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react62.css`
+var ScrollableListInputLabel = import_react63.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react62.css`
+var ScrollableListInputText = import_react63.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react62.css`
+var ScrollableListHiddenInput = import_react63.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react62.css`
+var ScrollableListIcon = import_react63.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -13656,7 +13667,7 @@ var ScrollableListIcon = import_react62.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react62.css`
+var ScrollableListIconVisible = import_react63.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -13736,8 +13747,8 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-var import_react63 = require("@emotion/react");
-var bounceFade = import_react63.keyframes`
+var import_react64 = require("@emotion/react");
+var bounceFade = import_react64.keyframes`
     0%, 100% {
         opacity: 1.0;
         transform: translateY(0);
@@ -13754,11 +13765,11 @@ var bounceFade = import_react63.keyframes`
         transform: translateY(-5px);
     }
 `;
-var loader = import_react63.css`
+var loader = import_react64.css`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = import_react63.css`
+var loadingDot = import_react64.css`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -13792,11 +13803,11 @@ var LoadingIndicator = ({ ...props }) => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-var import_react64 = require("@emotion/react");
-var loadingOverlayContainer = import_react64.css`
+var import_react65 = require("@emotion/react");
+var loadingOverlayContainer = import_react65.css`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -13804,24 +13815,24 @@ var loadingOverlayContainer = import_react64.css`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react64.css`
+var loadingOverlayVisible = import_react65.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react64.css`
+var loadingOverlayHidden = import_react65.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react64.css`
+var loadingOverlayBackground = (bgColor) => import_react65.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react64.css`
+var loadingOverlayBody = import_react65.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react64.css`
+var loadingOverlayMessage = import_react65.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -13838,14 +13849,14 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = (0, import_react65.useRef)(null);
-  const onLoopComplete = (0, import_react65.useCallback)(() => {
+  const lottieRef = (0, import_react66.useRef)(null);
+  const onLoopComplete = (0, import_react66.useCallback)(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -13916,12 +13927,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_react67 = require("@emotion/react");
+var import_react68 = require("@emotion/react");
 var import_cg14 = require("react-icons/cg");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-var import_react66 = require("@emotion/react");
-var IntegrationTileContainer = import_react66.css`
+var import_react67 = require("@emotion/react");
+var IntegrationTileContainer = import_react67.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13952,22 +13963,22 @@ var IntegrationTileContainer = import_react66.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react66.css`
+var IntegrationTileBtnDashedBorder = import_react67.css`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = import_react66.css`
+var IntegrationTileTitle = import_react67.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react66.css`
+var IntegrationTitleLogo = import_react67.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react66.css`
+var IntegrationTileName = import_react67.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -13980,7 +13991,7 @@ var IntegrationTileName = import_react66.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react66.css`
+var IntegrationAddedText = import_react67.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -13995,7 +14006,7 @@ var IntegrationAddedText = import_react66.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react66.css`
+var IntegrationCustomBadgeText = (theme) => import_react67.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -14009,26 +14020,26 @@ var IntegrationCustomBadgeText = (theme) => import_react66.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react66.css`
+var IntegrationAuthorBadgeIcon = import_react67.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react66.css`
+var IntegrationTitleFakeButton = import_react67.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react66.css`
+var IntegrationTileFloatingButton = import_react67.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react66.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react67.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -14075,7 +14086,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg14.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react67.css`
+              css: import_react68.css`
               order: 1;
             `
             }
@@ -14085,7 +14096,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg14.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react67.css`
+              css: import_react68.css`
               order: -1;
             `
             }
@@ -14173,8 +14184,8 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-var import_react68 = require("@emotion/react");
-var import_react69 = require("react");
+var import_react69 = require("@emotion/react");
+var import_react70 = require("react");
 var import_cg16 = require("react-icons/cg");
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
@@ -14185,12 +14196,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react69.useState)(false);
+  const [upVote, setUpVote] = (0, import_react70.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -14222,7 +14233,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                 "span",
                 {
-                  css: import_react68.css`
+                  css: import_react69.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -14242,8 +14253,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-var import_react70 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react70.css`
+var import_react71 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react71.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14270,17 +14281,17 @@ var IntegrationLoadingTileContainer = import_react70.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react70.css`
+var IntegrationLoadingTileImg = import_react71.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react70.css`
+var IntegrationLoadingTileText = import_react71.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react70.css`
+var IntegrationLoadingFrame = import_react71.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -14296,13 +14307,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-var import_react71 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react71.css`
+var import_react72 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react72.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react71.css`
+var IntegrationModalImage = import_react72.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -14391,13 +14402,13 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-var import_react72 = require("@emotion/react");
-var TileContainerWrapper = import_react72.css`
+var import_react73 = require("@emotion/react");
+var TileContainerWrapper = import_react73.css`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = import_react72.css`
+var TileContainerInner = import_react73.css`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
@@ -14410,31 +14421,31 @@ var TileContainer = ({ children, ...props }) => {
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-var import_react73 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react73.css`
+var import_react74 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react74.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react73.css`
+var IntegrationModalHeaderGroup = import_react74.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react73.css`
+var IntegrationModalHeaderTitleGroup = import_react74.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react73.css`
+var IntegrationModalHeaderTitle = import_react74.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react73.css`
+var IntegrationModalHeaderMenuPlacement = import_react74.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react73.css`
+var IntegrationModalHeaderContentWrapper = import_react74.css`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -14496,12 +14507,12 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react75 = __toESM(require("react"));
+var import_react76 = __toESM(require("react"));
 var import_Tooltip = require("reakit/Tooltip");
 
 // src/components/Tooltip/Tooltip.styles.ts
-var import_react74 = require("@emotion/react");
-var TooltipContainer = import_react74.css`
+var import_react75 = require("@emotion/react");
+var TooltipContainer = import_react75.css`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -14509,7 +14520,7 @@ var TooltipContainer = import_react74.css`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = import_react74.css`
+var TooltipArrowStyles = import_react75.css`
   svg {
     fill: var(--gray-300);
   }
@@ -14520,7 +14531,7 @@ var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
   return !title ? children : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react75.default.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react76.default.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
@@ -14529,8 +14540,8 @@ function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-var import_react76 = require("@emotion/react");
-var inputIconBtn = import_react76.css`
+var import_react77 = require("@emotion/react");
+var inputIconBtn = import_react77.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -14587,8 +14598,8 @@ var ConnectToDataElementButton = ({
 };
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-var import_react77 = require("react");
-var ParameterShellContext = (0, import_react77.createContext)({
+var import_react78 = require("react");
+var ParameterShellContext = (0, import_react78.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -14597,7 +14608,7 @@ var ParameterShellContext = (0, import_react77.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = (0, import_react77.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = (0, import_react78.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -14608,8 +14619,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-var import_react78 = require("@emotion/react");
-var inputContainer2 = import_react78.css`
+var import_react79 = require("@emotion/react");
+var inputContainer2 = import_react79.css`
   position: relative;
 
   &:hover,
@@ -14621,14 +14632,14 @@ var inputContainer2 = import_react78.css`
     }
   }
 `;
-var labelText2 = import_react78.css`
+var labelText2 = import_react79.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = import_react78.css`
+var input2 = import_react79.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -14672,18 +14683,18 @@ var input2 = import_react78.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react78.css`
+var selectInput = import_react79.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = import_react78.css`
+var inputWrapper = import_react79.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react78.css`
+var inputIcon2 = import_react79.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -14699,7 +14710,7 @@ var inputIcon2 = import_react78.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react78.css`
+var inputToggleLabel2 = import_react79.css`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -14710,7 +14721,7 @@ var inputToggleLabel2 = import_react78.css`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = import_react78.css`
+var toggleInput2 = import_react79.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -14749,7 +14760,7 @@ var toggleInput2 = import_react78.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react78.css`
+var inlineLabel2 = import_react79.css`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -14765,7 +14776,7 @@ var inlineLabel2 = import_react78.css`
     }
   }
 `;
-var inputMenu = import_react78.css`
+var inputMenu = import_react79.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -14781,14 +14792,14 @@ var inputMenu = import_react78.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react78.css`
+var textarea2 = import_react79.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = import_react78.css`
+var imageWrapper = import_react79.css`
   background: var(--white);
 `;
-var img = import_react78.css`
+var img = import_react79.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -14796,7 +14807,7 @@ var img = import_react78.css`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = import_react78.css`
+var dataConnectButton = import_react79.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -14831,7 +14842,7 @@ var dataConnectButton = import_react78.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react78.css`
+var linkParameterBtn = import_react79.css`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -14840,7 +14851,7 @@ var linkParameterBtn = import_react78.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react78.css`
+var linkParameterControls = import_react79.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -14849,13 +14860,13 @@ var linkParameterControls = import_react78.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react78.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react79.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
 `;
-var linkParameterIcon = import_react78.css`
+var linkParameterIcon = import_react79.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -14904,20 +14915,20 @@ function ParameterDataResource({
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-var import_react79 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react79.css`
+var import_react80 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react80.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react79.css`
+var ParameterDrawerHeaderTitleGroup = import_react80.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react79.css`
+var ParameterDrawerHeaderTitle = import_react80.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -14937,11 +14948,11 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-var import_react80 = require("@emotion/react");
-var fieldsetStyles = import_react80.css`
+var import_react81 = require("@emotion/react");
+var fieldsetStyles = import_react81.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -14952,7 +14963,7 @@ var fieldsetStyles = import_react80.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react80.css`
+var fieldsetLegend2 = import_react81.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -14961,7 +14972,7 @@ var fieldsetLegend2 = import_react80.css`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react81.forwardRef)(
+var ParameterGroup = (0, import_react82.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("legend", { css: fieldsetLegend2, children: legend }),
@@ -14971,10 +14982,10 @@ var ParameterGroup = (0, import_react81.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
@@ -14983,9 +14994,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react82.forwardRef)(
+var ParameterMenuButton = (0, import_react83.forwardRef)(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       Menu,
@@ -15009,15 +15020,15 @@ var ParameterMenuButton = (0, import_react82.forwardRef)(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-var import_react83 = require("@emotion/react");
-var emptyParameterShell = import_react83.css`
+var import_react84 = require("@emotion/react");
+var emptyParameterShell = import_react84.css`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = import_react83.css`
+var emptyParameterShellText = import_react84.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -15025,7 +15036,7 @@ var emptyParameterShellText = import_react83.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react83.css`
+var overrideMarker = import_react84.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -15095,7 +15106,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react84.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react85.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { css: inputContainer2, ...props, children: [
@@ -15139,7 +15150,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime8
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react85.forwardRef)((props, ref) => {
+var ParameterImage = (0, import_react86.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ParameterImageInner, { ref, ...innerProps }) });
 });
@@ -15173,14 +15184,14 @@ var BrokenImage = ({ ...props }) => {
     }
   );
 };
-var ParameterImageInner = (0, import_react85.forwardRef)(
+var ParameterImageInner = (0, import_react86.forwardRef)(
   ({ ...props }, ref) => {
     const { value } = props;
     const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
-    const [loading, setLoading] = (0, import_react85.useState)(false);
-    const deferredValue = (0, import_react85.useDeferredValue)(value);
+    const [loading, setLoading] = (0, import_react86.useState)(false);
+    const deferredValue = (0, import_react86.useDeferredValue)(value);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = (0, import_react85.useCallback)(() => {
+    const updateImageSrc = (0, import_react86.useCallback)(() => {
       let message = void 0;
       try {
         if (value !== "") {
@@ -15208,7 +15219,7 @@ var ParameterImageInner = (0, import_react85.forwardRef)(
         onManuallySetErrorMessage(errorText);
       }
     };
-    (0, import_react85.useEffect)(() => {
+    (0, import_react86.useEffect)(() => {
       updateImageSrc();
     }, [value]);
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
@@ -15243,13 +15254,13 @@ var ParameterImageInner = (0, import_react85.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterInput.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react86.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react87.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react86.forwardRef)(
+var ParameterInputInner = (0, import_react87.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
@@ -15268,9 +15279,9 @@ var ParameterInputInner = (0, import_react86.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react87.forwardRef)(
+var ParameterLink = (0, import_react88.forwardRef)(
   ({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
@@ -15293,7 +15304,7 @@ var ParameterLink = (0, import_react87.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react87.forwardRef)(
+var ParameterLinkInner = (0, import_react88.forwardRef)(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { css: inputWrapper, children: [
@@ -15415,9 +15426,9 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
-var ParameterRichText = (0, import_react88.forwardRef)(
+var ParameterRichText = (0, import_react89.forwardRef)(
   ({
     label,
     labelLeadingIcon,
@@ -15450,7 +15461,7 @@ var ParameterRichText = (0, import_react88.forwardRef)(
     );
   }
 );
-var ParameterRichTextInner = (0, import_react88.forwardRef)(({ ...props }, ref) => {
+var ParameterRichTextInner = (0, import_react89.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "textarea",
@@ -15465,15 +15476,15 @@ var ParameterRichTextInner = (0, import_react88.forwardRef)(({ ...props }, ref)
 });
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react89.forwardRef)(
+var ParameterSelect = (0, import_react90.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react89.forwardRef)(
+var ParameterSelectInner = (0, import_react90.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
@@ -15497,13 +15508,13 @@ var ParameterSelectInner = (0, import_react89.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-var import_react90 = require("react");
+var import_react91 = require("react");
 var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react90.forwardRef)((props, ref) => {
+var ParameterTextarea = (0, import_react91.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react90.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react91.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "textarea",
@@ -15518,13 +15529,13 @@ var ParameterTextareaInner = (0, import_react90.forwardRef)(({ ...props }, ref)
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react91.forwardRef)((props, ref) => {
+var ParameterToggle = (0, import_react92.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react91.forwardRef)(
+var ParameterToggleInner = (0, import_react92.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -15539,13 +15550,13 @@ var import_Popover = require("reakit/Popover");
 var import_Portal2 = require("reakit/Portal");
 
 // src/components/Popover/Popover.styles.ts
-var import_react92 = require("@emotion/react");
-var PopoverBtn = import_react92.css`
+var import_react93 = require("@emotion/react");
+var PopoverBtn = import_react93.css`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = import_react92.css`
+var Popover = import_react93.css`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15580,19 +15591,19 @@ var Popover2 = ({
 };
 
 // src/components/ProgressList/ProgressList.tsx
-var import_react94 = require("@emotion/react");
-var import_react95 = require("react");
+var import_react95 = require("@emotion/react");
+var import_react96 = require("react");
 var import_cg17 = require("react-icons/cg");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-var import_react93 = require("@emotion/react");
-var progressListStyles = import_react93.css`
+var import_react94 = require("@emotion/react");
+var progressListStyles = import_react94.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react93.css`
+var progressListItemStyles = import_react94.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -15601,7 +15612,7 @@ var progressListItemStyles = import_react93.css`
 // src/components/ProgressList/ProgressList.tsx
 var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react95.useMemo)(() => {
+  const itemsWithStatus = (0, import_react96.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -15634,7 +15645,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const Icon2 = (0, import_react95.useMemo)(() => {
+  const Icon2 = (0, import_react96.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -15645,14 +15656,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react95.useMemo)(() => {
+  const statusStyles = (0, import_react96.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react94.css`
+      return errorLevel === "caution" ? import_react95.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react94.css`
+          ` : import_react95.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -15660,13 +15671,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react94.css`
+      completed: import_react95.css`
         opacity: 0.75;
       `,
-      inProgress: import_react94.css`
+      inProgress: import_react95.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react94.css`
+      queued: import_react95.css`
         opacity: 0.5;
       `
     };
@@ -15682,13 +15693,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react97 = require("@emotion/react");
-var import_react98 = require("react");
+var import_react98 = require("@emotion/react");
+var import_react99 = require("react");
 var import_cg18 = require("react-icons/cg");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-var import_react96 = require("@emotion/react");
-var segmentedControlStyles = import_react96.css`
+var import_react97 = require("@emotion/react");
+var segmentedControlStyles = import_react97.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -15707,14 +15718,14 @@ var segmentedControlStyles = import_react96.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react96.css`
+var segmentedControlVerticalStyles = import_react97.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_react96.css`
+var segmentedControlItemStyles = import_react97.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -15722,14 +15733,10 @@ var segmentedControlItemStyles = import_react96.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react96.css`
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+var segmentedControlInputStyles = import_react97.css`
+  ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = import_react96.css`
+var segmentedControlLabelStyles = import_react97.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -15766,20 +15773,20 @@ var segmentedControlLabelStyles = import_react96.css`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react96.css`
+var segmentedControlLabelIconOnlyStyles = import_react97.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react96.css`
+var segmentedControlLabelCheckStyles = import_react97.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react96.css`
+var segmentedControlLabelContentStyles = import_react97.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react96.css``;
+var segmentedControlLabelTextStyles = import_react97.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
@@ -15794,7 +15801,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react98.useCallback)(
+  const onOptionChange = (0, import_react99.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -15802,15 +15809,15 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react98.useMemo)(() => {
+  const sizeStyles = (0, import_react99.useMemo)(() => {
     const map = {
-      sm: (0, import_react97.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react97.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react97.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react98.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react98.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react98.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react98.useMemo)(() => {
+  const isIconOnly = (0, import_react99.useMemo)(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
@@ -15863,12 +15870,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-var import_react99 = require("@emotion/react");
-var lightFadingOut = import_react99.keyframes`
+var import_react100 = require("@emotion/react");
+var lightFadingOut = import_react100.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react99.css`
+var skeletonStyles = import_react100.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -15905,8 +15912,8 @@ var Skeleton = ({
 var React19 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react100 = require("@emotion/react");
-var SwitchInputContainer = import_react100.css`
+var import_react101 = require("@emotion/react");
+var SwitchInputContainer = import_react101.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -15915,7 +15922,7 @@ var SwitchInputContainer = import_react100.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react100.css`
+var SwitchInput = import_react101.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -15953,7 +15960,7 @@ var SwitchInput = import_react100.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react100.css`
+var SwitchInputDisabled = import_react101.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -15961,7 +15968,7 @@ var SwitchInputDisabled = import_react100.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react100.css`
+var SwitchInputLabel = import_react101.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -15983,7 +15990,7 @@ var SwitchInputLabel = import_react100.css`
     top: 0;
   }
 `;
-var SwitchText = import_react100.css`
+var SwitchText = import_react101.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -16012,28 +16019,28 @@ var Switch = React19.forwardRef(
 var React20 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react101 = require("@emotion/react");
-var table = import_react101.css`
+var import_react102 = require("@emotion/react");
+var table = import_react102.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react101.css`
+var tableHead = import_react102.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react101.css`
+var tableRow = import_react102.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react101.css`
+var tableCellHead = import_react102.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react101.css`
+var tableCellData = import_react102.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
@@ -16074,12 +16081,12 @@ var TableCellData = React20.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react103 = require("react");
+var import_react104 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react102 = require("@emotion/react");
-var tabButtonStyles = import_react102.css`
+var import_react103 = require("@emotion/react");
+var tabButtonStyles = import_react103.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -16096,7 +16103,7 @@ var tabButtonStyles = import_react102.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react102.css`
+var tabButtonGroupStyles = import_react103.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -16104,22 +16111,22 @@ var tabButtonGroupStyles = import_react102.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react103.createContext)(null);
+var CurrentTabContext = (0, import_react104.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react103.useContext)(CurrentTabContext);
+  const context = (0, import_react104.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_react103.useMemo)(() => {
+  const selected = (0, import_react104.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_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -16127,7 +16134,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
@@ -16148,8 +16155,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react104 = require("@emotion/react");
-var StatusBulletContainer = import_react104.css`
+var import_react105 = require("@emotion/react");
+var StatusBulletContainer = import_react105.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -16166,44 +16173,44 @@ var StatusBulletContainer = import_react104.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react104.css`
+var StatusBulletBase = import_react105.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react104.css`
+var StatusBulletSmall = import_react105.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react104.css`
+var StatusDraft = import_react105.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react104.css`
+var StatusModified = import_react105.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = import_react104.css`
+var StatusError = import_react105.css`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = import_react104.css`
+var StatusPublished = import_react105.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react104.css`
+var StatusOrphan = import_react105.css`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -16362,6 +16369,7 @@ var StatusBullet = ({
   UniformLogoLarge,
   VerticalRhythm,
   WarningMessage,
+  accessibleHidden,
   borderTopIcon,
   breakpoints,
   button,