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

package/dist/esm/index.js

@@ -618,6 +618,16 @@ var inputSelectCompact = css2`
   border-radius: var(--rounded-base);
 `;
 
+// src/styles/Accessibility.styles.ts
+import { css as css3 } from "@emotion/react";
+var accessibleHidden = css3`
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;
+
 // src/styles/Animations.styles.ts
 import { keyframes } from "@emotion/react";
 var growSubtle = keyframes`
@@ -711,8 +721,8 @@ to {
 `;
 
 // src/styles/Scrollbar.styles.ts
-import { css as css3 } from "@emotion/react";
-var scrollbarStyles = css3`
+import { css as css4 } from "@emotion/react";
+var scrollbarStyles = css4`
   @supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
     /*
         #d1d5db = bg-gray-300
@@ -741,22 +751,22 @@ var scrollbarStyles = css3`
 `;
 
 // src/components/AddButton/AddButton.tsx
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
 import React2, { useContext, useEffect as useEffect2, useState } from "react";
 
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
-import { css as css4 } from "@emotion/react";
-var ShortcutRevealerContainer = css4`
+import { css as css5 } from "@emotion/react";
+var ShortcutRevealerContainer = css5`
   position: absolute;
 `;
-var ShortcutRevealerHotKeyContainer = css4`
+var ShortcutRevealerHotKeyContainer = css5`
   display: flex;
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var ShortcutRevealerHotKey = css4`
+var ShortcutRevealerHotKey = css5`
   background: linear-gradient(to bottom right, var(--gray-100), var(--gray-200));
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-600);
@@ -862,8 +872,8 @@ function Hotkey({ shortcut }) {
 }
 
 // src/components/AddButton/AddButton.styles.ts
-import { css as css5 } from "@emotion/react";
-var addButton = css5`
+import { css as css6 } from "@emotion/react";
+var addButton = css6`
   --max-size: clamp(2.5rem, 100vw, 3.5rem);
   align-items: center;
   box-shadow: var(--shadow-base);
@@ -939,7 +949,7 @@ var AddButton = ({
           ShortcutRevealer,
           {
             shortcut,
-            css: css6`
+            css: css7`
             top: -2rem;
             left: -1.5rem;
           `
@@ -962,8 +972,8 @@ import { MdSettings } from "react-icons/md";
 import React3 from "react";
 
 // src/components/Icons/Icon.styles.ts
-import { css as css7 } from "@emotion/react";
-var IconImg = css7`
+import { css as css8 } from "@emotion/react";
+var IconImg = css8`
   display: hidden;
 
   ${mq("sm")} {
@@ -975,19 +985,19 @@ var IconImg = css7`
     vertical-align: middle;
   }
 `;
-var IconColorDefault = css7`
+var IconColorDefault = css8`
   color: var(--brand-secondary-3);
 `;
-var IconColorRed = css7`
+var IconColorRed = css8`
   color: var(--brand-secondary-5);
 `;
-var IconColorGray = css7`
+var IconColorGray = css8`
   color: var(--gray-500);
 `;
-var IconColorCurrent = css7`
+var IconColorCurrent = css8`
   color: currentColor;
 `;
-var IconColorAction = css7`
+var IconColorAction = css8`
   color: var(--primary-action-default);
 `;
 
@@ -1390,8 +1400,8 @@ var customIcons = {
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
-import { css as css8 } from "@emotion/react";
-var AddListButtonBtn = css8`
+import { css as css9 } from "@emotion/react";
+var AddListButtonBtn = css9`
   align-items: center;
   background: transparent;
   border: none;
@@ -1412,21 +1422,21 @@ var AddListButtonBtn = css8`
     box-shadow: var(--shadow-base);
   }
 `;
-var AddListButtonTheme = (theme) => css8`
+var AddListButtonTheme = (theme) => css9`
   color: ${theme};
 `;
-var AddListButtonBtnSmall = css8`
+var AddListButtonBtnSmall = css9`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => css8`
+var AddListButtonIconMathPlus = (disabled, theme) => css9`
   box-sizing: border-box;
   background: ${disabled ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
-var AddListButtonIcon = css8`
+var AddListButtonIcon = css9`
   border-radius: var(--rounded-full);
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 `;
@@ -1480,32 +1490,32 @@ var AddListButton = ({
 import { CgClose } from "react-icons/cg";
 
 // src/components/Typography/styles/Heading.styles.ts
-import { css as css9 } from "@emotion/react";
-var h1 = css9`
+import { css as css10 } from "@emotion/react";
+var h1 = css10`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h2 = css9`
+var h2 = css10`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h3 = css9`
+var h3 = css10`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h4 = css9`
+var h4 = css10`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h5 = css9`
+var h5 = css10`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h6 = css9`
+var h6 = css10`
   font-size: var(--fs-base);
 `;
-var commonHeadingAttr = (withMarginBottom) => css9`
+var commonHeadingAttr = (withMarginBottom) => css10`
   font-weight: var(--fw-regular);
   font-family: var(--ff-base);
   margin-top: 0;
   margin-bottom: ${withMarginBottom ? "var(--spacing-base)" : "0"};
 `;
-var commonLineHeight = css9`
+var commonLineHeight = css10`
   line-height: 1.25;
 `;
 
@@ -1538,8 +1548,8 @@ var Heading = ({
 };
 
 // src/components/Badges/Badge.styles.ts
-import { css as css10 } from "@emotion/react";
-var BadgeContainer = css10`
+import { css as css11 } from "@emotion/react";
+var BadgeContainer = css11`
   --caution-desc: rgb(161, 98, 7);
   --caution-title: rgb(133, 77, 14);
   --caution-container: rgb(254, 252, 232);
@@ -1563,43 +1573,43 @@ var BadgeContainer = css10`
   border-radius: var(--rounded-base);
   display: inline-block;
 `;
-var ExtraSmall = css10`
+var ExtraSmall = css11`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xxs);
 `;
-var Small = css10`
+var Small = css11`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var Base = css10`
+var Base = css11`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
-var Caution = css10`
+var Caution = css11`
   background-color: var(--caution-container);
   color: var(--caution-title);
 `;
-var Info = css10`
+var Info = css11`
   background-color: var(--info-container);
   color: var(--info-title);
 `;
-var Note = css10`
+var Note = css11`
   background-color: var(--note-container);
   color: var(--note-title);
 `;
-var Success = css10`
+var Success = css11`
   background-color: var(--success-container);
   color: var(--success-title);
 `;
-var Error2 = css10`
+var Error2 = css11`
   background-color: var(--danger-container);
   color: var(--danger-title);
 `;
-var Unimportant = css10`
+var Unimportant = css11`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var UppercaseText = css10`
+var UppercaseText = css11`
   text-transform: uppercase;
 `;
 
@@ -1645,23 +1655,23 @@ import * as React4 from "react";
 import { CgExternal } from "react-icons/cg";
 
 // src/components/Typography/styles/Link.styles.ts
-import { css as css11 } from "@emotion/react";
-var link = css11`
+import { css as css12 } from "@emotion/react";
+var link = css12`
   display: inline-flex;
   transition: color var(--duration-fast) var(--timing-ease-out);
   word-break: break-word;
 `;
-var linkColorDefault = css11`
+var linkColorDefault = css12`
   color: var(--primary-action-default);
 
   &:hover {
     color: var(--primary-action-hover);
   }
 `;
-var linkColorDestructive = css11`
+var linkColorDestructive = css12`
   color: var(--brand-secondary-5);
 `;
-var linkColorCurrent = css11`
+var linkColorCurrent = css12`
   color: currentColor;
 `;
 
@@ -1688,8 +1698,8 @@ var Link = React4.forwardRef(
 var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props }) }));
 
 // src/components/Typography/styles/Paragraph.styles.ts
-import { css as css12 } from "@emotion/react";
-var paragraph = css12`
+import { css as css13 } from "@emotion/react";
+var paragraph = css13`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -1735,17 +1745,17 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
 };
 
 // src/components/Typography/styles/IntegrationHeaderSection.styles.ts
-import { css as css13 } from "@emotion/react";
-var IntegrationHeaderSectionContainer = css13`
+import { css as css14 } from "@emotion/react";
+var IntegrationHeaderSectionContainer = css14`
   margin-bottom: var(--spacing-lg);
 `;
-var IntegrationHeaderSectionTitleContainer = css13`
+var IntegrationHeaderSectionTitleContainer = css14`
   align-items: center;
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
 `;
-var IntegrationHeaderSectionTitleGroup = css13`
+var IntegrationHeaderSectionTitleGroup = css14`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -1756,26 +1766,26 @@ var IntegrationHeaderSectionTitleGroup = css13`
     gap: var(--spacing-md);
   }
 `;
-var IntegrationHeaderSectionTitle = css13`
+var IntegrationHeaderSectionTitle = css14`
   font-size: clamp(1.75rem, var(--fluid-font-base), 2.25rem);
   font-weight: var(--fw-regular);
   margin: 0;
 `;
-var IntegrationHeaderSectionText = css13``;
-var IntegrationHeaderSectionIconContainer = css13`
+var IntegrationHeaderSectionText = css14``;
+var IntegrationHeaderSectionIconContainer = css14`
   position: relative;
   max-width: 100px;
 `;
-var IntegrationHeaderSectionIcon = css13`
+var IntegrationHeaderSectionIcon = css14`
   position: absolute;
   inset: 0;
   margin: auto;
   width: clamp(32px, calc(4vw + 1rem), 44px);
 `;
-var IntegrationHeaderSectionHexIcon = css13`
+var IntegrationHeaderSectionHexIcon = css14`
   width: clamp(52px, calc(6vw + 1rem), 100px);
 `;
-var IntegrationHeaderSectionDocsLink = css13`
+var IntegrationHeaderSectionDocsLink = css14`
   ${mq("sm")} {
     margin-left: auto;
   }
@@ -1863,8 +1873,8 @@ var IntegrationHeaderSection = ({
 import { CgChevronLeft } from "react-icons/cg";
 
 // src/components/Typography/styles/PageHeaderSection.styles.ts
-import { css as css14 } from "@emotion/react";
-var PageHeaderSectionContainer = css14`
+import { css as css15 } from "@emotion/react";
+var PageHeaderSectionContainer = css15`
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--spacing-lg);
@@ -1876,7 +1886,7 @@ var PageHeaderSectionContainer = css14`
     gap: var(--spacing-lg);
   }
 `;
-var PageHeaderSectionDetails = css14`
+var PageHeaderSectionDetails = css15`
   flex-grow: 1;
   max-width: var(--prose);
   order: 1;
@@ -1885,7 +1895,7 @@ var PageHeaderSectionDetails = css14`
     order: 0;
   }
 `;
-var PageHeaderSectionLinkContainer = css14`
+var PageHeaderSectionLinkContainer = css15`
   align-items: center;
   color: var(--primary-action-default);
   display: flex;
@@ -1895,10 +1905,10 @@ var PageHeaderSectionLinkContainer = css14`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionLinkIcon = css14`
+var PageHeaderSectionLinkIcon = css15`
   margin-left: -0.5rem;
 `;
-var PageHeaderSectionLink = css14`
+var PageHeaderSectionLink = css15`
   color: var(--primary-action-default);
   font-size: var(--fs-sm);
 
@@ -1906,7 +1916,7 @@ var PageHeaderSectionLink = css14`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionChildContainer = css14`
+var PageHeaderSectionChildContainer = css15`
   align-items: center;
   display: flex;
   gap: var(--spacing-lg);
@@ -1923,7 +1933,7 @@ var PageHeaderSectionChildContainer = css14`
     order: 1;
   }
 `;
-var PageHeaderSectionTitle = css14`
+var PageHeaderSectionTitle = css15`
   margin-block: 0 var(--spacing-base);
 `;
 
@@ -1964,8 +1974,8 @@ var PageHeaderSection = ({
 };
 
 // src/components/Alerts/InlineAlert.styles.ts
-import { css as css15 } from "@emotion/react";
-var InlineAlertContainer = css15`
+import { css as css16 } from "@emotion/react";
+var InlineAlertContainer = css16`
   background: var(--brand-primary-1);
   border-radius: var(--rounded-2xl);
   color: var(--white);
@@ -2026,13 +2036,13 @@ var SetArrowPosition = (position) => {
   };
   return options[position];
 };
-var InlineAlertTriangle = (position) => css15`
+var InlineAlertTriangle = (position) => css16`
   &:before {
     border: 12px solid transparent;
     ${SetArrowPosition(position)}
   }
 `;
-var InlineAlertCloseBtn = css15`
+var InlineAlertCloseBtn = css16`
   background: none;
   border: none;
   padding: 0;
@@ -2040,10 +2050,10 @@ var InlineAlertCloseBtn = css15`
   top: var(--spacing-sm);
   right: var(--spacing-sm);
 `;
-var InlineAlertTitle = css15`
+var InlineAlertTitle = css16`
   margin: 0;
 `;
-var InlineAlertParagraph = css15`
+var InlineAlertParagraph = css16`
   margin: 0;
 `;
 
@@ -10527,11 +10537,11 @@ var AnimationFile = ({
 import { CgClose as CgClose2 } from "react-icons/cg";
 
 // src/components/Banner/Banner.styles.ts
-import { css as css17 } from "@emotion/react";
+import { css as css18 } from "@emotion/react";
 
 // src/styles/functionalColors.styles.ts
-import { css as css16 } from "@emotion/react";
-var functionalColors = css16`
+import { css as css17 } from "@emotion/react";
+var functionalColors = css17`
   --caution-desc: rgb(161, 98, 7);
   --caution-icon: rgb(250, 204, 21);
   --caution-title: rgb(133, 77, 14);
@@ -10559,7 +10569,7 @@ var functionalColors = css16`
 `;
 
 // src/components/Banner/Banner.styles.ts
-var bannerStyles = css17`
+var bannerStyles = css18`
   ${functionalColors}
 
   --border-color: var(--info-icon);
@@ -10593,11 +10603,11 @@ var bannerStyles = css17`
     --background-color: var(--success-container);
   }
 `;
-var bannerAnimatedStyles = css17`
+var bannerAnimatedStyles = css18`
   animation: ${slideInTtb} var(--duration-xfast) ease-out;
 `;
-var bannerContentStyles = css17``;
-var bannerDismissButtonStyles = css17`
+var bannerContentStyles = css18``;
+var bannerDismissButtonStyles = css18`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10646,15 +10656,15 @@ var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props
 };
 
 // src/components/Brand/UniformLogo.styles.ts
-import { css as css18 } from "@emotion/react";
-var SVG = css18`
+import { css as css19 } from "@emotion/react";
+var SVG = css19`
   display: block;
 `;
-var SVGLight = css18`
+var SVGLight = css19`
   background: transparent;
   color: var(--brand-secondary-1);
 `;
-var SVGDark = css18`
+var SVGDark = css19`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
@@ -10856,8 +10866,8 @@ import {
 import { Portal } from "reakit/Portal";
 
 // src/components/Menu/Menu.styles.ts
-import { css as css19 } from "@emotion/react";
-var menu = css19`
+import { css as css20 } from "@emotion/react";
+var menu = css20`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -10909,12 +10919,12 @@ var Menu = ({
 };
 
 // src/components/Menu/MenuGroup.styles.ts
-import { css as css20 } from "@emotion/react";
-var MenuGroupContainer = css20`
+import { css as css21 } from "@emotion/react";
+var MenuGroupContainer = css21`
   display: flex;
   flex-direction: column;
 `;
-var MenuTitle = css20`
+var MenuTitle = css21`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -10935,8 +10945,8 @@ import * as React7 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 
 // src/components/Menu/MenuItem.styles.ts
-import { css as css21 } from "@emotion/react";
-var menuItem = (textTheme) => css21`
+import { css as css22 } from "@emotion/react";
+var menuItem = (textTheme) => css22`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -10962,7 +10972,7 @@ var menuItem = (textTheme) => css21`
     outline: none;
   }
 `;
-var menuItemWithIcon = css21`
+var menuItemWithIcon = css22`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -10974,7 +10984,7 @@ var menuItemWithIcon = css21`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = css21`
+var menuItemSeparator = css22`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -11026,8 +11036,8 @@ import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
 var MenuItemSeparator = () => /* @__PURE__ */ jsx24("hr", { css: menuItemSeparator });
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-import { css as css22 } from "@emotion/react";
-var ButtonWithMenuContainer = css22`
+import { css as css23 } from "@emotion/react";
+var ButtonWithMenuContainer = css23`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -11048,7 +11058,7 @@ var ButtonWithMenuContainer = css22`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = css22`
+var ButtonWithMenuBtn = css23`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -11071,19 +11081,19 @@ var ButtonWithMenuBtn = css22`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = css22`
+var ButtonWithMenuIcon = css23`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = css22`
+var buttonPrimary2 = css23`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = css22`
+var buttonPrimaryDisabled = css23`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = css22`
+var buttonSecondary2 = css23`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -11091,17 +11101,17 @@ var buttonSecondary2 = css22`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = css22`
+var buttonSecondaryDisabled = css23`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = css22`
+var buttonUnimportant2 = css23`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = css22`
+var buttonUnimportantDisabled = css23`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = css22`
+var buttonGhost2 = css23`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -11109,7 +11119,7 @@ var buttonGhost2 = css22`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = css22`
+var buttonGhostDisabled = css23`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
@@ -11170,18 +11180,18 @@ var ButtonWithMenu = ({
 };
 
 // src/components/Callout/Callout.tsx
-import { css as css24 } from "@emotion/react";
+import { css as css25 } from "@emotion/react";
 
 // src/components/Callout/Callout.styles.ts
-import { css as css23 } from "@emotion/react";
-var calloutContainer = css23`
+import { css as css24 } from "@emotion/react";
+var calloutContainer = css24`
   ${functionalColors}
 
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = css23`
+var calloutContainerCompact = css24`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -11193,25 +11203,25 @@ var calloutContainerCompact = css23`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = css23`
+var calloutInner = css24`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = css23`
+var calloutBody = css24`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = css23`
+var calloutBodyCompact = css24`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = css23`
+var calloutIconWrap = css24`
   flex-shrink: 0;
 `;
-var calloutTitle = css23`
+var calloutTitle = css24`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = css23`
+var calloutIcon = css24`
   width: 1.25rem;
   height: 1.25rem;
 `;
@@ -11345,91 +11355,91 @@ import { jsx as jsx27, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--caution-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--caution-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--danger-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--danger-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--danger-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--danger-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--info-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--info-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--note-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--note-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--success-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--success-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--success-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--success-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -11467,8 +11477,8 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
 import { CgMoreAlt } from "react-icons/cg";
 
 // src/components/Card/Card.styles.ts
-import { css as css25 } from "@emotion/react";
-var CardContainer = css25`
+import { css as css26 } from "@emotion/react";
+var CardContainer = css26`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11481,7 +11491,7 @@ var CardContainer = css25`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => css25`
+var CardTitle = (marginBottom) => css26`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -11489,7 +11499,7 @@ var CardTitle = (marginBottom) => css25`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = css25`
+var CardMenu = css26`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -11552,12 +11562,12 @@ var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
 };
 
 // src/components/Card/CardContainer.styles.ts
-import { css as css26 } from "@emotion/react";
-var CardContainerWrapper = (bgColor) => css26`
+import { css as css27 } from "@emotion/react";
+var CardContainerWrapper = (bgColor) => css27`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => css26`
+var CardContainerInner = ({ padding, withLastColumn }) => css27`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -11586,8 +11596,8 @@ var CardContainer2 = ({
 import { CgMoreAlt as CgMoreAlt2 } from "react-icons/cg";
 
 // src/components/Layout/styles/Container.styles.ts
-import { css as css27 } from "@emotion/react";
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => css27`
+import { css as css28 } from "@emotion/react";
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => css28`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -11625,8 +11635,8 @@ var Container2 = ({
 };
 
 // src/components/Layout/styles/HorizontalRhythm.styles.ts
-import { css as css28 } from "@emotion/react";
-var HorizontalRhythmContainer = (size) => css28`
+import { css as css29 } from "@emotion/react";
+var HorizontalRhythmContainer = (size) => css29`
   display: flex;
   gap: var(--spacing-${size});
 `;
@@ -11644,11 +11654,11 @@ var HorizontalRhythm = ({
 };
 
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
-import { css as css29 } from "@emotion/react";
-var TwoColumnLayoutContainer = (bgColor) => css29`
+import { css as css30 } from "@emotion/react";
+var TwoColumnLayoutContainer = (bgColor) => css30`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => css29`
+var TwoColumnLayoutInner = (invertLayout) => css30`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -11664,8 +11674,8 @@ var TwoColumnLayoutInner = (invertLayout) => css29`
     }`}
   }
 `;
-var TwoColumnLayoutMain = css29``;
-var TwoColumnLayoutSupporting = css29`
+var TwoColumnLayoutMain = css30``;
+var TwoColumnLayoutSupporting = css30`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
@@ -11686,8 +11696,8 @@ var TwoColumnLayout = ({
 };
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-import { css as css30 } from "@emotion/react";
-var VerticalRhythmContainer = (size) => css30`
+import { css as css31 } from "@emotion/react";
+var VerticalRhythmContainer = (size) => css31`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -11701,8 +11711,8 @@ var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
 };
 
 // src/components/Card/LoadingCardSkeleton.styles.ts
-import { css as css31 } from "@emotion/react";
-var LoadingCardSkeleton = css31`
+import { css as css32 } from "@emotion/react";
+var LoadingCardSkeleton = css32`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   color: var(--gray-400);
   border-radius: var(--rounded-base);
@@ -11710,21 +11720,21 @@ var LoadingCardSkeleton = css31`
   min-height: 160px;
   position: relative;
 `;
-var LoadingText = css31`
+var LoadingText = css32`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
   display: block;
 `;
-var LoadingTitle = css31`
+var LoadingTitle = css32`
   width: clamp(200px, 100vw, 60%);
   height: var(--spacing-md);
 `;
-var LoadingTimeStamp = css31`
+var LoadingTimeStamp = css32`
   width: clamp(200px, 100vw, 30%);
   height: var(--spacing-sm);
 `;
-var LoadingMenuIcon = css31`
+var LoadingMenuIcon = css32`
   animation: ${fadeIn} 1s linear infinite alternate;
   position: absolute;
   top: var(--spacing-md);
@@ -11745,8 +11755,8 @@ var LoadingCardSkeleton2 = () => {
 import { CgClose as CgClose3 } from "react-icons/cg";
 
 // src/components/Chip/Chip.styles.ts
-import { css as css32 } from "@emotion/react";
-var ChipContainer = css32`
+import { css as css33 } from "@emotion/react";
+var ChipContainer = css33`
   border-radius: var(--rounded-full);
   background: lime;
   cursor: pointer;
@@ -11764,20 +11774,20 @@ var ChipContainer = css32`
     }
   }
 `;
-var ChipText = css32`
+var ChipText = css33`
   line-height: 1;
 `;
-var ChipIcon = css32`
+var ChipIcon = css33`
   align-items: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
-var ChipSeparator = css32`
+var ChipSeparator = css33`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
 `;
-var ChipTiny = css32`
+var ChipTiny = css33`
   font-size: var(--fs-xs);
   padding-inline: var(--spacing-sm);
 
@@ -11785,7 +11795,7 @@ var ChipTiny = css32`
     padding-block: var(--spacing-xs);
   }
 `;
-var ChipSmall = css32`
+var ChipSmall = css33`
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-base);
 
@@ -11793,7 +11803,7 @@ var ChipSmall = css32`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipMedium = css32`
+var ChipMedium = css33`
   font-size: var(--fs-base);
   padding-inline: var(--spacing-base);
 
@@ -11801,7 +11811,7 @@ var ChipMedium = css32`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipThemeAccentLight = css32`
+var ChipThemeAccentLight = css33`
   background: var(--accent-light);
   color: var(--brand-secondary-1);
 
@@ -11824,7 +11834,7 @@ var ChipThemeAccentLight = css32`
     color: var(--accent-light);
   }
 `;
-var ChipThemeAccentDark = css32`
+var ChipThemeAccentDark = css33`
   background: var(--accent-dark);
   color: var(--white);
 
@@ -11843,7 +11853,7 @@ var ChipThemeAccentDark = css32`
     color: var(--white);
   }
 `;
-var ChipAltThemeAccentLight = css32`
+var ChipAltThemeAccentLight = css33`
   background: var(--accent-alt-light);
   color: var(--brand-secondary-1);
 
@@ -11866,7 +11876,7 @@ var ChipAltThemeAccentLight = css32`
     color: var(--accent-alt-light);
   }
 `;
-var ChipAltThemeAccentDark = css32`
+var ChipAltThemeAccentDark = css33`
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -11885,7 +11895,7 @@ var ChipAltThemeAccentDark = css32`
     color: var(--white);
   }
 `;
-var ChipThemeNeutralLight = css32`
+var ChipThemeNeutralLight = css33`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
 
@@ -11894,7 +11904,7 @@ var ChipThemeNeutralLight = css32`
     background: var(--gray-400);
   }
 `;
-var ChipThemeNeutralDark = css32`
+var ChipThemeNeutralDark = css33`
   background: var(--gray-700);
   color: var(--white);
 
@@ -11907,7 +11917,7 @@ var ChipThemeNeutralDark = css32`
     background: var(--gray-900);
   }
 `;
-var ChipActionButton = css32`
+var ChipActionButton = css33`
   background: transparent;
   border: none;
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
@@ -11961,8 +11971,8 @@ var DismissibleChipAction = ({ onDismiss, ...props }) => {
 };
 
 // src/components/Counter/Counter.styles.ts
-import { css as css33 } from "@emotion/react";
-var counterContainer = (bgColor) => css33`
+import { css as css34 } from "@emotion/react";
+var counterContainer = (bgColor) => css34`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -11975,16 +11985,16 @@ var counterContainer = (bgColor) => css33`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = css33`
+var counterZeroValue = css34`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = css33`
+var counterTripleValue = css34`
   position: relative;
 `;
-var counterIcon = css33`
+var counterIcon = css34`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -12009,7 +12019,7 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
-import { css as css34 } from "@emotion/react";
+import { css as css35 } from "@emotion/react";
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -12028,7 +12038,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css34`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css35`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -12058,8 +12068,8 @@ var DashedBox = ({
 import * as React8 from "react";
 
 // src/components/Details/Details.styles.ts
-import { css as css35 } from "@emotion/react";
-var details = css35`
+import { css as css36 } from "@emotion/react";
+var details = css36`
   cursor: pointer;
   &[open] {
     & > summary svg {
@@ -12067,11 +12077,11 @@ var details = css35`
     }
   }
 `;
-var detailsContent = css35`
+var detailsContent = css36`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = css35`
+var summary = css36`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -12084,11 +12094,11 @@ var summary = css35`
     display: none;
   }
 `;
-var summaryIcon = css35`
+var summaryIcon = css36`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = css35`
+var summaryIconVisiblyHidden = css36`
   visibility: hidden;
 `;
 
@@ -12135,8 +12145,8 @@ import React11, { useEffect as useEffect6, useMemo, useRef as useRef2 } from "re
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
-import { css as css36, keyframes as keyframes2 } from "@emotion/react";
-var drawerStyles = (bgColor = "var(--white)") => css36`
+import { css as css37, keyframes as keyframes2 } from "@emotion/react";
+var drawerStyles = (bgColor = "var(--white)") => css37`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -12146,7 +12156,7 @@ var drawerStyles = (bgColor = "var(--white)") => css36`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = css36`
+var drawerCloseButtonStyles = css37`
   align-self: flex-end;
   background: transparent;
   border: none;
@@ -12154,17 +12164,17 @@ var drawerCloseButtonStyles = css36`
   padding: var(--spacing-xs);
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = css36`
+var drawerHeaderStyles = css37`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = css36`
+var drawerRendererStyles = css37`
   inset: 0;
   overflow: hidden;
   z-index: 40;
 `;
-var drawerInnerStyles = css36`
+var drawerInnerStyles = css37`
   height: 100%;
   padding: 0 var(--spacing-base) var(--spacing-base);
   overflow: auto;
@@ -12185,7 +12195,7 @@ var slideDrawerIn = keyframes2`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = css36`
+var drawerWrapperStyles = css37`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -12196,7 +12206,7 @@ var drawerWrapperStyles = css36`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = css36`
+var drawerWrapperOverlayStyles = css37`
   position: absolute;
   inset: 0;
   background: rgba(31, 43, 52, 0.4);
@@ -12422,8 +12432,8 @@ var DrawerInner = ({
 };
 
 // src/components/Input/styles/CaptionText.styles.ts
-import { css as css37 } from "@emotion/react";
-var CaptionText = (dynamicSize) => css37`
+import { css as css38 } from "@emotion/react";
+var CaptionText = (dynamicSize) => css38`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -12441,20 +12451,20 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 import { forwardRef as forwardRef4 } from "react";
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-import { css as css38 } from "@emotion/react";
-var CheckboxWithInfoContainer = css38`
+import { css as css39 } from "@emotion/react";
+var CheckboxWithInfoContainer = css39`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = css38`
+var CheckboxWithInfoLabel = css39`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = css38`
+var CheckboxWithInfoInput = css39`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -12487,7 +12497,7 @@ var CheckboxWithInfoInput = css38`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = css38`
+var InfoDialogContainer = css39`
   position: relative;
 
   &:hover {
@@ -12496,7 +12506,7 @@ var InfoDialogContainer = css38`
     }
   }
 `;
-var InfoDialogMessage = css38`
+var InfoDialogMessage = css39`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -12536,8 +12546,8 @@ var CheckboxWithInfo = forwardRef4(
 import { MdWarning } from "react-icons/md";
 
 // src/components/Input/styles/ErrorMessage.styles.ts
-import { css as css39 } from "@emotion/react";
-var ErrorText = css39`
+import { css as css40 } from "@emotion/react";
+var ErrorText = css40`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -12557,9 +12567,9 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 import * as React12 from "react";
 
 // src/components/Input/styles/Fieldset.styles.ts
-import { css as css40 } from "@emotion/react";
+import { css as css41 } from "@emotion/react";
 function fieldsetContainer(invert) {
-  const base = css40`
+  const base = css41`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -12571,18 +12581,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    css40`
+    css41`
           background: white;
         `,
     base
   ] : [
-    css40`
+    css41`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = css40`
+var fieldsetLegend = css41`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -12592,7 +12602,7 @@ var fieldsetLegend = css40`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = css40`
+var fieldsetBody = css41`
   clear: left;
 `;
 
@@ -12611,8 +12621,8 @@ var Fieldset = React12.forwardRef(
 import { MdInfoOutline } from "react-icons/md";
 
 // src/components/Input/styles/InfoMessage.styles.tsx
-import { css as css41 } from "@emotion/react";
-var InfoText = css41`
+import { css as css42 } from "@emotion/react";
+var InfoText = css42`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
 
@@ -12621,7 +12631,7 @@ var InfoText = css41`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = css41`
+var InfoIcon2 = css42`
   color: var(--info-icon);
 `;
 
@@ -12656,14 +12666,14 @@ var Label = ({ children, className, testId, ...props }) => {
 import { MdWarning as MdWarning2 } from "react-icons/md";
 
 // src/components/Input/styles/WarningMessage.styles.tsx
-import { css as css42 } from "@emotion/react";
-var WarningText = css42`
+import { css as css43 } from "@emotion/react";
+var WarningText = css43`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = css42`
+var WarningIcon = css43`
   color: var(--alert);
 `;
 
@@ -12874,17 +12884,17 @@ function InputComboBox(props) {
 }
 
 // src/components/Input/InputInlineSelect.tsx
-import { css as css44 } from "@emotion/react";
+import { css as css45 } from "@emotion/react";
 import { useRef as useRef3, useState as useState5 } from "react";
 import { CgChevronDown as CgChevronDown2 } from "react-icons/cg";
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
-import { css as css43 } from "@emotion/react";
-var inlineSelectContainer = css43`
+import { css as css44 } from "@emotion/react";
+var inlineSelectContainer = css44`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = css43`
+var inlineSelectBtn = css44`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -12908,7 +12918,7 @@ var inlineSelectBtn = css43`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = css43`
+var inlineSelectMenu = css44`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -12919,7 +12929,7 @@ var inlineSelectMenu = css43`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = css43`
+var inlineSelectBtnOptions = css44`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -12935,7 +12945,7 @@ var inlineSelectBtnOptions = css43`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = css43`
+var inlineSelectMenuClosed = css44`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -12963,7 +12973,7 @@ var InputInlineSelect = ({
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : css44`
+      css: !classNameContainer ? inlineSelectContainer : css45`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -13242,34 +13252,34 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-import { css as css45 } from "@emotion/react";
-var LimitsBarContainer = css45`
+import { css as css46 } from "@emotion/react";
+var LimitsBarContainer = css46`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css45`
+var LimitsBarProgressBar = css46`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css45`
+var LimitsBarProgressBarLine = css46`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css45`
+var LimitsBarLabelContainer = css46`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css45`
+var LimitsBarLabel = css46`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css45`
+var LimitsBarBgColor = (statusColor) => css46`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css45`
+var LimitsBarTextColor = (statusColor) => css46`
   color: ${statusColor};
 `;
 
@@ -13319,8 +13329,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-import { css as css46 } from "@emotion/react";
-var LinkListContainer = (padding) => css46`
+import { css as css47 } from "@emotion/react";
+var LinkListContainer = (padding) => css47`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -13339,14 +13349,14 @@ var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) =>
 };
 
 // src/components/List/ScrollableList.tsx
-import { css as css48 } from "@emotion/react";
+import { css as css49 } from "@emotion/react";
 
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css47 } from "@emotion/react";
-var ScrollableListContainer = css47`
+import { css as css48 } from "@emotion/react";
+var ScrollableListContainer = css48`
   position: relative;
 `;
-var ScrollableListInner = css47`
+var ScrollableListInner = css48`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -13370,7 +13380,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ jsx60(
       "span",
       {
-        css: css48`
+        css: css49`
             ${labelText}
           `,
         children: label
@@ -13384,8 +13394,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck } from "react-icons/cg";
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css49 } from "@emotion/react";
-var ScrollableListItemContainer = css49`
+import { css as css50 } from "@emotion/react";
+var ScrollableListItemContainer = css50`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -13394,13 +13404,13 @@ var ScrollableListItemContainer = css49`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = css49`
+var ScrollableListItemShadow = css50`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = css49`
+var ScrollableListItemActive = css50`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css49`
+var ScrollableListItemBtn = css50`
   align-items: center;
   border: none;
   background: transparent;
@@ -13415,27 +13425,27 @@ var ScrollableListItemBtn = css49`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css49`
+var ScrollableListInputLabel = css50`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css49`
+var ScrollableListInputText = css50`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = css49`
+var ScrollableListHiddenInput = css50`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css49`
+var ScrollableListIcon = css50`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -13443,7 +13453,7 @@ var ScrollableListIcon = css49`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = css49`
+var ScrollableListIconVisible = css50`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -13523,7 +13533,7 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css50, keyframes as keyframes3 } from "@emotion/react";
+import { css as css51, keyframes as keyframes3 } from "@emotion/react";
 var bounceFade = keyframes3`
     0%, 100% {
         opacity: 1.0;
@@ -13541,11 +13551,11 @@ var bounceFade = keyframes3`
         transform: translateY(-5px);
     }
 `;
-var loader = css50`
+var loader = css51`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = css50`
+var loadingDot = css51`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -13582,8 +13592,8 @@ var LoadingIndicator = ({ ...props }) => {
 import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef4 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css51 } from "@emotion/react";
-var loadingOverlayContainer = css51`
+import { css as css52 } from "@emotion/react";
+var loadingOverlayContainer = css52`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -13591,24 +13601,24 @@ var loadingOverlayContainer = css51`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css51`
+var loadingOverlayVisible = css52`
   display: flex;
 `;
-var loadingOverlayHidden = css51`
+var loadingOverlayHidden = css52`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css51`
+var loadingOverlayBackground = (bgColor) => css52`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css51`
+var loadingOverlayBody = css52`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css51`
+var loadingOverlayMessage = css52`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -13703,12 +13713,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { css as css53 } from "@emotion/react";
+import { css as css54 } from "@emotion/react";
 import { CgAdd as CgAdd2, CgChevronRight as CgChevronRight2 } from "react-icons/cg";
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-import { css as css52 } from "@emotion/react";
-var IntegrationTileContainer = css52`
+import { css as css53 } from "@emotion/react";
+var IntegrationTileContainer = css53`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13739,22 +13749,22 @@ var IntegrationTileContainer = css52`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = css52`
+var IntegrationTileBtnDashedBorder = css53`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = css52`
+var IntegrationTileTitle = css53`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = css52`
+var IntegrationTitleLogo = css53`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = css52`
+var IntegrationTileName = css53`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -13767,7 +13777,7 @@ var IntegrationTileName = css52`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = css52`
+var IntegrationAddedText = css53`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -13782,7 +13792,7 @@ var IntegrationAddedText = css52`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => css52`
+var IntegrationCustomBadgeText = (theme) => css53`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -13796,26 +13806,26 @@ var IntegrationCustomBadgeText = (theme) => css52`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = css52`
+var IntegrationAuthorBadgeIcon = css53`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = css52`
+var IntegrationTitleFakeButton = css53`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = css52`
+var IntegrationTileFloatingButton = css53`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => css52`
+var IntegrationTileFloatingButtonMessage = (clicked) => css53`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -13862,7 +13872,7 @@ var CreateTeamIntegrationTile = ({
               icon: CgChevronRight2,
               iconColor: "currentColor",
               size: 20,
-              css: css53`
+              css: css54`
               order: 1;
             `
             }
@@ -13872,7 +13882,7 @@ var CreateTeamIntegrationTile = ({
               icon: CgAdd2,
               iconColor: "currentColor",
               size: 16,
-              css: css53`
+              css: css54`
               order: -1;
             `
             }
@@ -13960,7 +13970,7 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-import { css as css54 } from "@emotion/react";
+import { css as css55 } from "@emotion/react";
 import { useEffect as useEffect8, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
@@ -14009,7 +14019,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ jsx69(
                 "span",
                 {
-                  css: css54`
+                  css: css55`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -14029,8 +14039,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-import { css as css55 } from "@emotion/react";
-var IntegrationLoadingTileContainer = css55`
+import { css as css56 } from "@emotion/react";
+var IntegrationLoadingTileContainer = css56`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14057,17 +14067,17 @@ var IntegrationLoadingTileContainer = css55`
     }
   }
 `;
-var IntegrationLoadingTileImg = css55`
+var IntegrationLoadingTileImg = css56`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = css55`
+var IntegrationLoadingTileText = css56`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = css55`
+var IntegrationLoadingFrame = css56`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -14083,13 +14093,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-import { css as css56 } from "@emotion/react";
-var IntegrationModalIconContainer = css56`
+import { css as css57 } from "@emotion/react";
+var IntegrationModalIconContainer = css57`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = css56`
+var IntegrationModalImage = css57`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -14178,13 +14188,13 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-import { css as css57 } from "@emotion/react";
-var TileContainerWrapper = css57`
+import { css as css58 } from "@emotion/react";
+var TileContainerWrapper = css58`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = css57`
+var TileContainerInner = css58`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
@@ -14197,31 +14207,31 @@ var TileContainer = ({ children, ...props }) => {
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-import { css as css58 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css58`
+import { css as css59 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css59`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css58`
+var IntegrationModalHeaderGroup = css59`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css58`
+var IntegrationModalHeaderTitleGroup = css59`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css58`
+var IntegrationModalHeaderTitle = css59`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css58`
+var IntegrationModalHeaderMenuPlacement = css59`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css58`
+var IntegrationModalHeaderContentWrapper = css59`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -14292,8 +14302,8 @@ import {
 } from "reakit/Tooltip";
 
 // src/components/Tooltip/Tooltip.styles.ts
-import { css as css59 } from "@emotion/react";
-var TooltipContainer = css59`
+import { css as css60 } from "@emotion/react";
+var TooltipContainer = css60`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -14301,7 +14311,7 @@ var TooltipContainer = css59`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = css59`
+var TooltipArrowStyles = css60`
   svg {
     fill: var(--gray-300);
   }
@@ -14321,8 +14331,8 @@ function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-import { css as css60 } from "@emotion/react";
-var inputIconBtn = css60`
+import { css as css61 } from "@emotion/react";
+var inputIconBtn = css61`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -14400,8 +14410,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css61 } from "@emotion/react";
-var inputContainer2 = css61`
+import { css as css62 } from "@emotion/react";
+var inputContainer2 = css62`
   position: relative;
 
   &:hover,
@@ -14413,14 +14423,14 @@ var inputContainer2 = css61`
     }
   }
 `;
-var labelText2 = css61`
+var labelText2 = css62`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css61`
+var input2 = css62`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -14464,18 +14474,18 @@ var input2 = css61`
     color: var(--gray-400);
   }
 `;
-var selectInput = css61`
+var selectInput = css62`
   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 = css61`
+var inputWrapper = css62`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css61`
+var inputIcon2 = css62`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -14491,7 +14501,7 @@ var inputIcon2 = css61`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css61`
+var inputToggleLabel2 = css62`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -14502,7 +14512,7 @@ var inputToggleLabel2 = css61`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css61`
+var toggleInput2 = css62`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -14541,7 +14551,7 @@ var toggleInput2 = css61`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css61`
+var inlineLabel2 = css62`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -14557,7 +14567,7 @@ var inlineLabel2 = css61`
     }
   }
 `;
-var inputMenu = css61`
+var inputMenu = css62`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -14573,14 +14583,14 @@ var inputMenu = css61`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css61`
+var textarea2 = css62`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = css61`
+var imageWrapper = css62`
   background: var(--white);
 `;
-var img = css61`
+var img = css62`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -14588,7 +14598,7 @@ var img = css61`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = css61`
+var dataConnectButton = css62`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -14623,7 +14633,7 @@ var dataConnectButton = css61`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css61`
+var linkParameterBtn = css62`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -14632,7 +14642,7 @@ var linkParameterBtn = css61`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css61`
+var linkParameterControls = css62`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -14641,13 +14651,13 @@ var linkParameterControls = css61`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css61`
+var linkParameterInput = (withExternalLinkIcon) => css62`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
 `;
-var linkParameterIcon = css61`
+var linkParameterIcon = css62`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -14696,20 +14706,20 @@ function ParameterDataResource({
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css62 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css62`
+import { css as css63 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css62`
+var ParameterDrawerHeaderTitleGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css62`
+var ParameterDrawerHeaderTitle = css63`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -14732,8 +14742,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef8 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css63 } from "@emotion/react";
-var fieldsetStyles = css63`
+import { css as css64 } from "@emotion/react";
+var fieldsetStyles = css64`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -14744,7 +14754,7 @@ var fieldsetStyles = css63`
     }
   }
 `;
-var fieldsetLegend2 = css63`
+var fieldsetLegend2 = css64`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -14801,15 +14811,15 @@ var ParameterMenuButton = forwardRef9(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css64 } from "@emotion/react";
-var emptyParameterShell = css64`
+import { css as css65 } from "@emotion/react";
+var emptyParameterShell = css65`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = css64`
+var emptyParameterShellText = css65`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -14817,7 +14827,7 @@ var emptyParameterShellText = css64`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css64`
+var overrideMarker = css65`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -15335,13 +15345,13 @@ import {
 import { Portal as Portal2 } from "reakit/Portal";
 
 // src/components/Popover/Popover.styles.ts
-import { css as css65 } from "@emotion/react";
-var PopoverBtn = css65`
+import { css as css66 } from "@emotion/react";
+var PopoverBtn = css66`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = css65`
+var Popover = css66`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15376,19 +15386,19 @@ var Popover2 = ({
 };
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css67 } from "@emotion/react";
+import { css as css68 } from "@emotion/react";
 import { useMemo as useMemo2 } from "react";
 import { CgCheckO, CgRadioCheck, CgRecord } from "react-icons/cg";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css66 } from "@emotion/react";
-var progressListStyles = css66`
+import { css as css67 } from "@emotion/react";
+var progressListStyles = css67`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css66`
+var progressListItemStyles = css67`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -15443,12 +15453,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo2(() => {
     if (error) {
-      return errorLevel === "caution" ? css67`
+      return errorLevel === "caution" ? css68`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css67`
+          ` : css68`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -15456,13 +15466,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css67`
+      completed: css68`
         opacity: 0.75;
       `,
-      inProgress: css67`
+      inProgress: css68`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css67`
+      queued: css68`
         opacity: 0.5;
       `
     };
@@ -15478,13 +15488,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css69 } from "@emotion/react";
+import { css as css70 } from "@emotion/react";
 import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
 import { CgCheck as CgCheck4 } from "react-icons/cg";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css68 } from "@emotion/react";
-var segmentedControlStyles = css68`
+import { css as css69 } from "@emotion/react";
+var segmentedControlStyles = css69`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -15503,14 +15513,14 @@ var segmentedControlStyles = css68`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css68`
+var segmentedControlVerticalStyles = css69`
   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 = css68`
+var segmentedControlItemStyles = css69`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -15518,14 +15528,10 @@ var segmentedControlItemStyles = css68`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css68`
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+var segmentedControlInputStyles = css69`
+  ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = css68`
+var segmentedControlLabelStyles = css69`
   position: relative;
   display: flex;
   align-items: center;
@@ -15562,20 +15568,20 @@ var segmentedControlLabelStyles = css68`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css68`
+var segmentedControlLabelIconOnlyStyles = css69`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css68`
+var segmentedControlLabelCheckStyles = css69`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css68`
+var segmentedControlLabelContentStyles = css69`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css68``;
+var segmentedControlLabelTextStyles = css69``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx93, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
@@ -15600,9 +15606,9 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo3(() => {
     const map = {
-      sm: css69({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css69({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css69({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css70({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css70({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css70({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -15659,12 +15665,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css70, keyframes as keyframes4 } from "@emotion/react";
+import { css as css71, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css70`
+var skeletonStyles = css71`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -15701,8 +15707,8 @@ var Skeleton = ({
 import * as React19 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css71 } from "@emotion/react";
-var SwitchInputContainer = css71`
+import { css as css72 } from "@emotion/react";
+var SwitchInputContainer = css72`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -15711,7 +15717,7 @@ var SwitchInputContainer = css71`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css71`
+var SwitchInput = css72`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -15749,7 +15755,7 @@ var SwitchInput = css71`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css71`
+var SwitchInputDisabled = css72`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -15757,7 +15763,7 @@ var SwitchInputDisabled = css71`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css71`
+var SwitchInputLabel = css72`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -15779,7 +15785,7 @@ var SwitchInputLabel = css71`
     top: 0;
   }
 `;
-var SwitchText = css71`
+var SwitchText = css72`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -15808,28 +15814,28 @@ var Switch = React19.forwardRef(
 import * as React20 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css72 } from "@emotion/react";
-var table = css72`
+import { css as css73 } from "@emotion/react";
+var table = css73`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css72`
+var tableHead = css73`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css72`
+var tableRow = css73`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css72`
+var tableCellHead = css73`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css72`
+var tableCellData = css73`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
@@ -15879,8 +15885,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css73 } from "@emotion/react";
-var tabButtonStyles = css73`
+import { css as css74 } from "@emotion/react";
+var tabButtonStyles = css74`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -15897,7 +15903,7 @@ var tabButtonStyles = css73`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css73`
+var tabButtonGroupStyles = css74`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -15949,8 +15955,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css74 } from "@emotion/react";
-var StatusBulletContainer = css74`
+import { css as css75 } from "@emotion/react";
+var StatusBulletContainer = css75`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -15967,44 +15973,44 @@ var StatusBulletContainer = css74`
     display: block;
   }
 `;
-var StatusBulletBase = css74`
+var StatusBulletBase = css75`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css74`
+var StatusBulletSmall = css75`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css74`
+var StatusDraft = css75`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css74`
+var StatusModified = css75`
   &: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 = css74`
+var StatusError = css75`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = css74`
+var StatusPublished = css75`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css74`
+var StatusOrphan = css75`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -16162,6 +16168,7 @@ export {
   UniformLogoLarge,
   VerticalRhythm,
   WarningMessage,
+  accessibleHidden,
   borderTopIcon,
   breakpoints,
   button,