@uniformdev/design-system 19.3.0 → 19.6.0

package/dist/index.js

@@ -149,8 +149,10 @@ __export(src_exports, {
   TwoColumnLayout: () => TwoColumnLayout,
   UniformBadge: () => UniformBadge,
   UniformLogo: () => UniformLogo,
+  UniformLogoLarge: () => UniformLogoLarge,
   VerticalRhythm: () => VerticalRhythm,
   WarningMessage: () => WarningMessage,
+  accessibleHidden: () => accessibleHidden,
   borderTopIcon: () => borderTopIcon,
   breakpoints: () => breakpoints,
   button: () => button,
@@ -189,6 +191,7 @@ __export(src_exports, {
   macifyShortcut: () => macifyShortcut,
   mq: () => mq,
   numberInput: () => numberInput,
+  queryStringIcon: () => queryStringIcon,
   rectangleRoundedIcon: () => rectangleRoundedIcon,
   replaceUnderscoreInString: () => replaceUnderscoreInString,
   ripple: () => ripple,
@@ -252,21 +255,53 @@ var Theme = ({ disableReset = false }) => {
           /* secondary colours */
           --brand-secondary-1: #1f2b34; /* carbon */
           --brand-secondary-2: #ecf1f1; /* silver */
-          --brand-secondary-3: #2ECDB4; /* maroon */
+          --brand-secondary-3: var(--purple-rain-500);
           --brand-secondary-5: #d9534f; /* brick red */
 
 
+          /* new colour range 4th May 2023 (may the fourth be with you) */
+          /* purple spectrum */
+          --purple-rain-100: #dccbff;
+          --purple-rain-200: #c2a5ff;
+          --purple-rain-300: #a87eff;
+          --purple-rain-400: #9068e3;
+          --purple-rain-500: #7953c6;
+          --purple-rain-600: #6340a9;
+
+          /* raspberry spectrum*/
+          --raspberry-beret-100: #ffbee1;
+          --raspberry-beret-200: #ff94ce;
+          --raspberry-beret-300: #ff6aba;
+          --raspberry-beret-400: #ff40a7;
+          --raspberry-beret-500: #f5168e;
+          --raspberry-beret-600: #f5168e;
+          --raspberry-beret-700: #f5168e;
+
+
           /* action colours */
           --primary-action-default: #0052ed; /* new blue */
           --primary-action-hover: #1264ff;
           --primary-action-active: #0043c2;
 
+          /* accent dark */
+          --accent-dark: var(--purple-rain-500);
+          --accent-dark-hover: var(--purple-rain-400);
+          --accent-dark-active: var(--purple-rain-600);
+
+          /* accent light */
+          --accent-light: var(--purple-rain-200);
+          --accent-light-hover: var(--purple-rain-100);
+          --accent-light-active: var(--purple-rain-300);
 
-          /* accent primary */
-          --accent-primary: #2ECDB4;
-          --accent-primary-surface: #f7d4e4;
-          --accent-primary-hover: #eb4793;
-          --accent-primary-active: #e51a78;
+          /* accent alt dark */
+          --accent-alt-dark: var(--raspberry-beret-600);
+          --accent-alt-dark-hover: var(--raspberry-beret-500);
+          --accent-alt-dark-active: var(--raspberry-beret-700);
+
+          /* accent alt light */
+          --accent-alt-light: var(--raspberry-beret-200);
+          --accent-alt-light-hover: var(--raspberry-beret-100);
+          --accent-alt-light-active: var(--raspberry-beret-300);
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
@@ -801,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);
@@ -814,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);
@@ -824,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);
@@ -834,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);
@@ -844,7 +889,7 @@ var fadeOutBottom = import_react5.keyframes`
     transform: translateY(10px);
   }
 `;
-var fadeIn = import_react5.keyframes`
+var fadeIn = import_react6.keyframes`
   0% {
     opacity: 0;
   }
@@ -852,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);
 }
@@ -864,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);
@@ -874,7 +919,7 @@ to {
   transform: translateX(0);
 }
 `;
-var fadeInRtl = import_react5.keyframes`
+var fadeInRtl = import_react6.keyframes`
 from {
   opacity: 0;
   transform: translateX(10px);
@@ -884,7 +929,7 @@ to {
   transform: translateX(0);
 }
 `;
-var slideInTtb = import_react5.keyframes`
+var slideInTtb = import_react6.keyframes`
 from {
   transform: translateY(-100%);
 }
@@ -894,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
@@ -924,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);
@@ -988,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(
@@ -1021,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;
   }
@@ -1045,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);
@@ -1122,7 +1167,7 @@ var AddButton = ({
           ShortcutRevealer,
           {
             shortcut,
-            css: import_react10.css`
+            css: import_react11.css`
             top: -2rem;
             left: -1.5rem;
           `
@@ -1142,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")} {
@@ -1158,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]) => {
@@ -1202,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 });
@@ -1236,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");
@@ -1538,6 +1583,25 @@ var infoFilledIcon = (0, import_react_icons.GenIcon)({
   ]
 });
 var settings = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { ...props, icon: import_md.MdSettings });
+var queryStringIcon = (0, import_react_icons.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6.23255 11.3213L6.32008 14.993H8.79253L8.85817 13.2128C9.86466 13.198 10.7472 13.0274 11.5057 12.701C12.2788 12.3746 12.8841 11.8776 13.3217 11.21C13.7739 10.5424 14 9.6968 14 8.67316C14 7.67918 13.7812 6.84098 13.3436 6.15855C12.9206 5.46129 12.3298 4.92721 11.5713 4.55633C10.8274 4.18544 9.96676 4 8.98945 4C7.9392 4 7.03483 4.20028 6.27631 4.60083C5.53239 5.00139 4.96351 5.5503 4.56966 6.24757C4.17582 6.94483 3.98619 7.73853 4.00078 8.62865H6.64828C6.64828 7.93139 6.85249 7.38248 7.26092 6.98192C7.66935 6.56653 8.23823 6.35883 8.96757 6.35883C9.66773 6.35883 10.2293 6.56653 10.6523 6.98192C11.0754 7.38248 11.2869 7.9388 11.2869 8.6509C11.2869 9.39267 11.1045 9.95642 10.7399 10.3421C10.3752 10.7279 9.88654 10.9875 9.27389 11.121C8.66125 11.2545 7.98296 11.3213 7.23904 11.3213H6.23255ZM6.29819 19.5104C6.63369 19.8368 7.05671 20 7.56724 20C8.07778 20 8.4935 19.8368 8.81441 19.5104C9.13532 19.1841 9.29577 18.7909 9.29577 18.331C9.29577 17.8563 9.13532 17.4557 8.81441 17.1293C8.4935 16.803 8.07778 16.6398 7.56724 16.6398C7.05671 16.6398 6.63369 16.803 6.29819 17.1293C5.97729 17.4557 5.81683 17.8563 5.81683 18.331C5.81683 18.7909 5.97729 19.1841 6.29819 19.5104ZM12 14V16.012H20V14H12ZM12 17.988V20H20V17.988H12Z"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1549,12 +1613,13 @@ var customIcons = {
   "canvas-alert": canvasAlertIcon,
   warning: warningIcon,
   "info-filled": infoFilledIcon,
-  settings
+  settings,
+  "query-string": queryStringIcon
 };
 
 // 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;
@@ -1575,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);
 `;
@@ -1643,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`
-  font-weight: var(--fw-bold);
+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;
 `;
 
@@ -1701,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);
@@ -1726,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;
 `;
 
@@ -1808,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;
 `;
 
@@ -1851,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);
 
@@ -1863,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,
@@ -1898,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;
@@ -1919,26 +1984,26 @@ var IntegrationHeaderSectionTitleGroup = import_react20.css`
     gap: var(--spacing-md);
   }
 `;
-var IntegrationHeaderSectionTitle = import_react20.css`
-  font-size: clamp(1.75rem, var(--fluid-font-base), 3.25rem);
-  font-weight: var(--fw-bold);
+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;
   }
@@ -2026,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);
@@ -2039,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;
@@ -2048,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;
@@ -2058,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);
 
@@ -2069,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);
@@ -2086,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);
 `;
 
@@ -2127,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);
@@ -2189,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;
@@ -2203,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;
 `;
 
@@ -10690,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);
@@ -10722,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);
@@ -10756,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;
@@ -10809,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);
 `;
@@ -10897,6 +10962,83 @@ var UniformLogo = ({
     }
   ) });
 };
+var UniformLogoLarge = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "svg",
+    {
+      width: "250",
+      height: "64",
+      viewBox: "0 0 250 64",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { clipPath: "url(#clip0)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M18.3804 0L0 10.6131V31.8393L18.3804 21.2262L36.7654 10.6131L18.3804 0Z", fill: "#7BB3FF" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M18.3804 42.4524V21.2262L0 31.8393V53.0655L18.3804 63.6786L36.7654 53.0655V31.8393L18.3804 42.4524Z",
+              fill: "#498DFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M36.7654 10.6132L18.3804 21.2263L36.7654 31.8394V53.0656L55.1458 42.4525V21.2263L36.7654 10.6132Z",
+              fill: "#E61408"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M141.257 21.2081H134.598V45.5052H141.257V21.2081Z", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M141.496 10.0277H134.355V16.6874H141.496V10.0277Z", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M151.073 13.2832V21.2082H146.602V26.8907H151.073V45.5053H157.733V26.8907H163.078V21.2082H157.733V15.7147H163.078V10.0277H156.711L151.073 13.2832Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M173.137 20.965L167.5 24.2205V42.4929L173.137 45.7484H183.489L189.127 42.4929V24.2205L183.489 20.965H173.137ZM182.467 40.0613H174.155V26.6475H182.467V40.0613Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M203.067 23.2074L199.605 21.2081H196.412V45.5052H203.072V26.8907H211.429V21.2081H206.53L203.067 23.2074Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M116.069 20.965L112.187 23.2074L108.301 20.965H105.685V45.5052H112.345V26.6475H120.653V45.5052H127.312V24.2205L121.675 20.965H116.069Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M91.7401 40.0614H83.4279V21.2081H76.7728V42.4929L82.4103 45.7484H88.2819L91.7311 43.7537L91.7356 43.7582L91.7401 43.7537V43.7582L95.1847 45.7484H98.3952V21.2081H91.7401V40.0614Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M244.813 20.965H240.148L235.582 23.5856L231.061 20.965H226.396L222.947 22.9552L219.498 20.965H216.288V45.5052H222.947V26.6475H230.044V45.5052H236.699V26.6475H243.795V45.5052H250.45V24.2205L244.813 20.965Z",
+              fill: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "250", height: "63.6786", fill: "currentColor" }) }) })
+      ]
+    }
+  );
+};
 
 // src/components/Button/Button.tsx
 var React5 = __toESM(require("react"));
@@ -10938,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);
@@ -10991,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);
@@ -11017,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);
@@ -11044,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;
@@ -11056,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);
@@ -11108,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);
@@ -11130,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);
@@ -11153,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);
 
@@ -11173,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);
 
@@ -11191,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);
 `;
@@ -11252,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;
@@ -11275,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;
 `;
@@ -11427,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);
     `
@@ -11549,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);
@@ -11563,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);
@@ -11571,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);
@@ -11634,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);
@@ -11668,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};
@@ -11707,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});
 `;
@@ -11726,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;
@@ -11746,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);
@@ -11768,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});
@@ -11783,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);
@@ -11792,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);
@@ -11827,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;
@@ -11846,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);
 
@@ -11867,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);
 
@@ -11875,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);
 
@@ -11883,17 +12025,59 @@ var ChipMedium = import_react39.css`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipThemeAccentLight = import_react39.css`
-  background: var(--accent-primary-surface);
+var ChipThemeAccentLight = import_react40.css`
+  background: var(--accent-light);
+  color: var(--brand-secondary-1);
+
+  &:hover,
+  &:focus {
+    background: var(--accent-light-hover);
+  }
+
+  &:active {
+    background: var(--accent-light-active);
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: var(--white);
+  }
+
+  [data-icon] {
+    color: var(--accent-light);
+  }
+`;
+var ChipThemeAccentDark = import_react40.css`
+  background: var(--accent-dark);
+  color: var(--white);
+
+  &:hover,
+  &:focus {
+    background: var(--accent-dark-hover);
+  }
+
+  &:active {
+    background: var(--accent-dark-active);
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: var(--white);
+  }
+`;
+var ChipAltThemeAccentLight = import_react40.css`
+  background: var(--accent-alt-light);
   color: var(--brand-secondary-1);
 
   &:hover,
   &:focus {
-    background: var(--accent-primary-hover);
+    background: var(--accent-alt-light-hover);
   }
 
   &:active {
-    background: var(--accent-primary-active);
+    background: var(--accent-alt-light-active);
   }
 
   &:hover,
@@ -11903,20 +12087,20 @@ var ChipThemeAccentLight = import_react39.css`
   }
 
   [data-icon] {
-    color: var(--accent-primary);
+    color: var(--accent-alt-light);
   }
 `;
-var ChipThemeAccentDark = import_react39.css`
-  background: var(--accent-primary);
+var ChipAltThemeAccentDark = import_react40.css`
+  background: var(--accent-alt-dark);
   color: var(--white);
 
   &:hover,
   &:focus {
-    background: var(--accent-primary-hover);
+    background: var(--accent-alt-dark-hover);
   }
 
   &:active {
-    background: var(--accent-primary-active);
+    background: var(--accent-alt-dark-active);
   }
 
   &:hover,
@@ -11925,7 +12109,7 @@ var ChipThemeAccentDark = 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);
 
@@ -11934,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);
 
@@ -11947,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;
@@ -11972,6 +12156,8 @@ var Chip = ({
   const chipTheme = {
     "accent-light": ChipThemeAccentLight,
     "accent-dark": ChipThemeAccentDark,
+    "accent-alt-light": ChipAltThemeAccentLight,
+    "accent-alt-dark": ChipAltThemeAccentDark,
     "neutral-light": ChipThemeNeutralLight,
     "neutral-dark": ChipThemeNeutralDark
   };
@@ -11999,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);
@@ -12013,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);
@@ -12047,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",
@@ -12066,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);
@@ -12096,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 {
@@ -12105,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;
@@ -12122,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;
 `;
 
@@ -12169,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);
@@ -12184,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;
@@ -12192,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;
@@ -12223,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;
@@ -12234,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);
@@ -12242,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: () => {
   },
@@ -12252,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;
@@ -12260,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;
@@ -12282,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) => {
@@ -12295,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();
@@ -12312,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,
@@ -12382,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();
@@ -12404,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",
@@ -12436,7 +12622,7 @@ var DrawerInner = ({
       }
     );
   }, [children, header, id, stackId, bgColor, onRequestClose, ref, testId]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     registerDrawer({
       drawer: {
         id,
@@ -12453,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)"};
@@ -12476,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;
@@ -12525,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 {
@@ -12534,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);
@@ -12558,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: [
@@ -12574,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;
@@ -12595,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);
 
@@ -12609,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;
@@ -12630,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;
 `;
 
@@ -12649,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);
 
@@ -12659,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);
 `;
 
@@ -12694,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);
 `;
 
@@ -12912,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);
@@ -12946,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;
@@ -12957,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);
@@ -12973,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;
@@ -12993,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}
             `,
@@ -13232,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 }) => {
@@ -13244,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",
@@ -13280,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};
 `;
 
@@ -13357,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")} {
@@ -13377,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);
@@ -13408,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
@@ -13422,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);
@@ -13432,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;
@@ -13453,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);
@@ -13481,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;
 `;
 
@@ -13561,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);
@@ -13579,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);
@@ -13617,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;
@@ -13629,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;
 `;
@@ -13663,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();
@@ -13741,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);
@@ -13777,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;
@@ -13805,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);
@@ -13820,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)"};
@@ -13834,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);
@@ -13900,7 +14086,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg14.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react67.css`
+              css: import_react68.css`
               order: 1;
             `
             }
@@ -13910,7 +14096,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg14.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react67.css`
+              css: import_react68.css`
               order: -1;
             `
             }
@@ -13998,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 = ({
@@ -14010,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 () => {
@@ -14047,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);
           `,
@@ -14067,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);
@@ -14095,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);
 `;
@@ -14121,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;
@@ -14147,6 +14333,9 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
         iconSrc = iconUrl.href;
       }
     } catch (e) {
+      if (icon == null ? void 0 : icon.startsWith("/")) {
+        iconSrc = icon;
+      }
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: IntegrationModalIconContainer, children: [
@@ -14165,7 +14354,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "img",
       {
         src: iconSrc,
@@ -14174,7 +14363,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
         css: IntegrationModalImage,
         ...imgProps
       }
-    )
+    ) : null
   ] });
 };
 
@@ -14213,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);
@@ -14232,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);
 `;
@@ -14318,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);
@@ -14331,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);
   }
@@ -14342,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
@@ -14351,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);
@@ -14409,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,
@@ -14419,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,
@@ -14430,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,
@@ -14443,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;
@@ -14494,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);
@@ -14521,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;
@@ -14532,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);
@@ -14571,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);
@@ -14587,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);
@@ -14603,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%;
@@ -14618,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;
@@ -14653,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;
@@ -14662,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);
@@ -14671,12 +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 ? "var(--spacing-2xl)" : "var(--spacing-xl)"} + var(--spacing-base)
+    ${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;
@@ -14725,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;
@@ -14758,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;
@@ -14773,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);
@@ -14782,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 }),
@@ -14792,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");
@@ -14804,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,
@@ -14830,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);
@@ -14846,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;
@@ -14916,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: [
@@ -14960,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 }) });
 });
@@ -14994,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 !== "") {
@@ -15029,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: [
@@ -15064,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)(
@@ -15089,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)(
@@ -15114,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: [
@@ -15236,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,
@@ -15271,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",
@@ -15286,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)(
@@ -15318,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",
@@ -15339,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: [
@@ -15360,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);
@@ -15401,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;
@@ -15422,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";
@@ -15455,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;
     }
@@ -15466,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);
@@ -15481,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;
       `
     };
@@ -15503,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);
@@ -15528,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);
   }
@@ -15543,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;
@@ -15587,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");
@@ -15615,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);
@@ -15623,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)(
@@ -15684,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);
 `;
@@ -15726,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;
@@ -15736,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);
@@ -15774,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;
 
@@ -15782,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;
@@ -15804,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;
@@ -15833,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);
 `;
 
@@ -15895,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;
@@ -15917,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);
@@ -15925,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);
@@ -15948,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);
     }
@@ -15969,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);
@@ -15987,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);
   }
@@ -16180,8 +16366,10 @@ var StatusBullet = ({
   TwoColumnLayout,
   UniformBadge,
   UniformLogo,
+  UniformLogoLarge,
   VerticalRhythm,
   WarningMessage,
+  accessibleHidden,
   borderTopIcon,
   breakpoints,
   button,
@@ -16220,6 +16408,7 @@ var StatusBullet = ({
   macifyShortcut,
   mq,
   numberInput,
+  queryStringIcon,
   rectangleRoundedIcon,
   replaceUnderscoreInString,
   ripple,