npm - @uniformdev/design-system - Versions diffs - 19.3.0 → 19.6.0 - Mend

@uniformdev/design-system 19.3.0 → 19.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -37,21 +37,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);
@@ -586,6 +618,16 @@ var inputSelectCompact = css2`
   border-radius: var(--rounded-base);
 `;
+// src/styles/Accessibility.styles.ts
+import { css as css3 } from "@emotion/react";
+var accessibleHidden = css3`
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;
 // src/styles/Animations.styles.ts
 import { keyframes } from "@emotion/react";
 var growSubtle = keyframes`
@@ -679,8 +721,8 @@ to {
 `;
 // src/styles/Scrollbar.styles.ts
-import { css as css3 } from "@emotion/react";
-var scrollbarStyles = css3`
+import { css as css4 } from "@emotion/react";
+var scrollbarStyles = css4`
   @supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
     /*
         #d1d5db = bg-gray-300
@@ -709,22 +751,22 @@ var scrollbarStyles = css3`
 `;
 // src/components/AddButton/AddButton.tsx
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 // src/components/Shortcuts/ShortcutRevealer.tsx
 import React2, { useContext, useEffect as useEffect2, useState } from "react";
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
-import { css as css4 } from "@emotion/react";
-var ShortcutRevealerContainer = css4`
+import { css as css5 } from "@emotion/react";
+var ShortcutRevealerContainer = css5`
   position: absolute;
 `;
-var ShortcutRevealerHotKeyContainer = css4`
+var ShortcutRevealerHotKeyContainer = css5`
   display: flex;
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var ShortcutRevealerHotKey = css4`
+var ShortcutRevealerHotKey = css5`
   background: linear-gradient(to bottom right, var(--gray-100), var(--gray-200));
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-600);
@@ -830,8 +872,8 @@ function Hotkey({ shortcut }) {
 }
 // src/components/AddButton/AddButton.styles.ts
-import { css as css5 } from "@emotion/react";
-var addButton = css5`
+import { css as css6 } from "@emotion/react";
+var addButton = css6`
   --max-size: clamp(2.5rem, 100vw, 3.5rem);
   align-items: center;
   box-shadow: var(--shadow-base);
@@ -907,7 +949,7 @@ var AddButton = ({
           ShortcutRevealer,
           {
             shortcut,
-            css: css6`
+            css: css7`
             top: -2rem;
             left: -1.5rem;
           `
@@ -930,8 +972,8 @@ import { MdSettings } from "react-icons/md";
 import React3 from "react";
 // src/components/Icons/Icon.styles.ts
-import { css as css7 } from "@emotion/react";
-var IconImg = css7`
+import { css as css8 } from "@emotion/react";
+var IconImg = css8`
   display: hidden;
   ${mq("sm")} {
@@ -943,19 +985,19 @@ var IconImg = css7`
     vertical-align: middle;
   }
 `;
-var IconColorDefault = css7`
+var IconColorDefault = css8`
   color: var(--brand-secondary-3);
 `;
-var IconColorRed = css7`
+var IconColorRed = css8`
   color: var(--brand-secondary-5);
 `;
-var IconColorGray = css7`
+var IconColorGray = css8`
   color: var(--gray-500);
 `;
-var IconColorCurrent = css7`
+var IconColorCurrent = css8`
   color: currentColor;
 `;
-var IconColorAction = css7`
+var IconColorAction = css8`
   color: var(--primary-action-default);
 `;
@@ -1323,6 +1365,25 @@ var infoFilledIcon = GenIcon({
   ]
 });
 var settings = (props) => /* @__PURE__ */ jsx7(Icon, { ...props, icon: MdSettings });
+var queryStringIcon = 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,
@@ -1334,12 +1395,13 @@ var customIcons = {
   "canvas-alert": canvasAlertIcon,
   warning: warningIcon,
   "info-filled": infoFilledIcon,
-  settings
+  settings,
+  "query-string": queryStringIcon
 };
 // src/components/AddListButton/AddListButton.styles.ts
-import { css as css8 } from "@emotion/react";
-var AddListButtonBtn = css8`
+import { css as css9 } from "@emotion/react";
+var AddListButtonBtn = css9`
   align-items: center;
   background: transparent;
   border: none;
@@ -1360,21 +1422,21 @@ var AddListButtonBtn = css8`
     box-shadow: var(--shadow-base);
   }
 `;
-var AddListButtonTheme = (theme) => css8`
+var AddListButtonTheme = (theme) => css9`
   color: ${theme};
 `;
-var AddListButtonBtnSmall = css8`
+var AddListButtonBtnSmall = css9`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => css8`
+var AddListButtonIconMathPlus = (disabled, theme) => css9`
   box-sizing: border-box;
   background: ${disabled ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
-var AddListButtonIcon = css8`
+var AddListButtonIcon = css9`
   border-radius: var(--rounded-full);
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 `;
@@ -1428,32 +1490,32 @@ var AddListButton = ({
 import { CgClose } from "react-icons/cg";
 // src/components/Typography/styles/Heading.styles.ts
-import { css as css9 } from "@emotion/react";
-var h1 = css9`
+import { css as css10 } from "@emotion/react";
+var h1 = css10`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h2 = css9`
+var h2 = css10`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h3 = css9`
+var h3 = css10`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h4 = css9`
+var h4 = css10`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h5 = css9`
+var h5 = css10`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h6 = css9`
+var h6 = css10`
   font-size: var(--fs-base);
 `;
-var commonHeadingAttr = (withMarginBottom) => css9`
-  font-weight: var(--fw-bold);
+var commonHeadingAttr = (withMarginBottom) => css10`
+  font-weight: var(--fw-regular);
   font-family: var(--ff-base);
   margin-top: 0;
   margin-bottom: ${withMarginBottom ? "var(--spacing-base)" : "0"};
 `;
-var commonLineHeight = css9`
+var commonLineHeight = css10`
   line-height: 1.25;
 `;
@@ -1486,8 +1548,8 @@ var Heading = ({
 };
 // src/components/Badges/Badge.styles.ts
-import { css as css10 } from "@emotion/react";
-var BadgeContainer = css10`
+import { css as css11 } from "@emotion/react";
+var BadgeContainer = css11`
   --caution-desc: rgb(161, 98, 7);
   --caution-title: rgb(133, 77, 14);
   --caution-container: rgb(254, 252, 232);
@@ -1511,43 +1573,43 @@ var BadgeContainer = css10`
   border-radius: var(--rounded-base);
   display: inline-block;
 `;
-var ExtraSmall = css10`
+var ExtraSmall = css11`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xxs);
 `;
-var Small = css10`
+var Small = css11`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var Base = css10`
+var Base = css11`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
-var Caution = css10`
+var Caution = css11`
   background-color: var(--caution-container);
   color: var(--caution-title);
 `;
-var Info = css10`
+var Info = css11`
   background-color: var(--info-container);
   color: var(--info-title);
 `;
-var Note = css10`
+var Note = css11`
   background-color: var(--note-container);
   color: var(--note-title);
 `;
-var Success = css10`
+var Success = css11`
   background-color: var(--success-container);
   color: var(--success-title);
 `;
-var Error2 = css10`
+var Error2 = css11`
   background-color: var(--danger-container);
   color: var(--danger-title);
 `;
-var Unimportant = css10`
+var Unimportant = css11`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var UppercaseText = css10`
+var UppercaseText = css11`
   text-transform: uppercase;
 `;
@@ -1593,23 +1655,23 @@ import * as React4 from "react";
 import { CgExternal } from "react-icons/cg";
 // src/components/Typography/styles/Link.styles.ts
-import { css as css11 } from "@emotion/react";
-var link = css11`
+import { css as css12 } from "@emotion/react";
+var link = css12`
   display: inline-flex;
   transition: color var(--duration-fast) var(--timing-ease-out);
   word-break: break-word;
 `;
-var linkColorDefault = css11`
+var linkColorDefault = css12`
   color: var(--primary-action-default);
   &:hover {
     color: var(--primary-action-hover);
   }
 `;
-var linkColorDestructive = css11`
+var linkColorDestructive = css12`
   color: var(--brand-secondary-5);
 `;
-var linkColorCurrent = css11`
+var linkColorCurrent = css12`
   color: currentColor;
 `;
@@ -1636,8 +1698,8 @@ var Link = React4.forwardRef(
 var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props }) }));
 // src/components/Typography/styles/Paragraph.styles.ts
-import { css as css12 } from "@emotion/react";
-var paragraph = css12`
+import { css as css13 } from "@emotion/react";
+var paragraph = css13`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
@@ -1683,17 +1745,17 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
 };
 // src/components/Typography/styles/IntegrationHeaderSection.styles.ts
-import { css as css13 } from "@emotion/react";
-var IntegrationHeaderSectionContainer = css13`
+import { css as css14 } from "@emotion/react";
+var IntegrationHeaderSectionContainer = css14`
   margin-bottom: var(--spacing-lg);
 `;
-var IntegrationHeaderSectionTitleContainer = css13`
+var IntegrationHeaderSectionTitleContainer = css14`
   align-items: center;
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
 `;
-var IntegrationHeaderSectionTitleGroup = css13`
+var IntegrationHeaderSectionTitleGroup = css14`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -1704,26 +1766,26 @@ var IntegrationHeaderSectionTitleGroup = css13`
     gap: var(--spacing-md);
   }
 `;
-var IntegrationHeaderSectionTitle = css13`
-  font-size: clamp(1.75rem, var(--fluid-font-base), 3.25rem);
-  font-weight: var(--fw-bold);
+var IntegrationHeaderSectionTitle = css14`
+  font-size: clamp(1.75rem, var(--fluid-font-base), 2.25rem);
+  font-weight: var(--fw-regular);
   margin: 0;
 `;
-var IntegrationHeaderSectionText = css13``;
-var IntegrationHeaderSectionIconContainer = css13`
+var IntegrationHeaderSectionText = css14``;
+var IntegrationHeaderSectionIconContainer = css14`
   position: relative;
   max-width: 100px;
 `;
-var IntegrationHeaderSectionIcon = css13`
+var IntegrationHeaderSectionIcon = css14`
   position: absolute;
   inset: 0;
   margin: auto;
   width: clamp(32px, calc(4vw + 1rem), 44px);
 `;
-var IntegrationHeaderSectionHexIcon = css13`
+var IntegrationHeaderSectionHexIcon = css14`
   width: clamp(52px, calc(6vw + 1rem), 100px);
 `;
-var IntegrationHeaderSectionDocsLink = css13`
+var IntegrationHeaderSectionDocsLink = css14`
   ${mq("sm")} {
     margin-left: auto;
   }
@@ -1811,8 +1873,8 @@ var IntegrationHeaderSection = ({
 import { CgChevronLeft } from "react-icons/cg";
 // src/components/Typography/styles/PageHeaderSection.styles.ts
-import { css as css14 } from "@emotion/react";
-var PageHeaderSectionContainer = css14`
+import { css as css15 } from "@emotion/react";
+var PageHeaderSectionContainer = css15`
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--spacing-lg);
@@ -1824,7 +1886,7 @@ var PageHeaderSectionContainer = css14`
     gap: var(--spacing-lg);
   }
 `;
-var PageHeaderSectionDetails = css14`
+var PageHeaderSectionDetails = css15`
   flex-grow: 1;
   max-width: var(--prose);
   order: 1;
@@ -1833,7 +1895,7 @@ var PageHeaderSectionDetails = css14`
     order: 0;
   }
 `;
-var PageHeaderSectionLinkContainer = css14`
+var PageHeaderSectionLinkContainer = css15`
   align-items: center;
   color: var(--primary-action-default);
   display: flex;
@@ -1843,10 +1905,10 @@ var PageHeaderSectionLinkContainer = css14`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionLinkIcon = css14`
+var PageHeaderSectionLinkIcon = css15`
   margin-left: -0.5rem;
 `;
-var PageHeaderSectionLink = css14`
+var PageHeaderSectionLink = css15`
   color: var(--primary-action-default);
   font-size: var(--fs-sm);
@@ -1854,7 +1916,7 @@ var PageHeaderSectionLink = css14`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionChildContainer = css14`
+var PageHeaderSectionChildContainer = css15`
   align-items: center;
   display: flex;
   gap: var(--spacing-lg);
@@ -1871,7 +1933,7 @@ var PageHeaderSectionChildContainer = css14`
     order: 1;
   }
 `;
-var PageHeaderSectionTitle = css14`
+var PageHeaderSectionTitle = css15`
   margin-block: 0 var(--spacing-base);
 `;
@@ -1912,8 +1974,8 @@ var PageHeaderSection = ({
 };
 // src/components/Alerts/InlineAlert.styles.ts
-import { css as css15 } from "@emotion/react";
-var InlineAlertContainer = css15`
+import { css as css16 } from "@emotion/react";
+var InlineAlertContainer = css16`
   background: var(--brand-primary-1);
   border-radius: var(--rounded-2xl);
   color: var(--white);
@@ -1974,13 +2036,13 @@ var SetArrowPosition = (position) => {
   };
   return options[position];
 };
-var InlineAlertTriangle = (position) => css15`
+var InlineAlertTriangle = (position) => css16`
   &:before {
     border: 12px solid transparent;
     ${SetArrowPosition(position)}
   }
 `;
-var InlineAlertCloseBtn = css15`
+var InlineAlertCloseBtn = css16`
   background: none;
   border: none;
   padding: 0;
@@ -1988,10 +2050,10 @@ var InlineAlertCloseBtn = css15`
   top: var(--spacing-sm);
   right: var(--spacing-sm);
 `;
-var InlineAlertTitle = css15`
+var InlineAlertTitle = css16`
   margin: 0;
 `;
-var InlineAlertParagraph = css15`
+var InlineAlertParagraph = css16`
   margin: 0;
 `;
@@ -10475,11 +10537,11 @@ var AnimationFile = ({
 import { CgClose as CgClose2 } from "react-icons/cg";
 // src/components/Banner/Banner.styles.ts
-import { css as css17 } from "@emotion/react";
+import { css as css18 } from "@emotion/react";
 // src/styles/functionalColors.styles.ts
-import { css as css16 } from "@emotion/react";
-var functionalColors = css16`
+import { css as css17 } from "@emotion/react";
+var functionalColors = css17`
   --caution-desc: rgb(161, 98, 7);
   --caution-icon: rgb(250, 204, 21);
   --caution-title: rgb(133, 77, 14);
@@ -10507,7 +10569,7 @@ var functionalColors = css16`
 `;
 // src/components/Banner/Banner.styles.ts
-var bannerStyles = css17`
+var bannerStyles = css18`
   ${functionalColors}
   --border-color: var(--info-icon);
@@ -10541,11 +10603,11 @@ var bannerStyles = css17`
     --background-color: var(--success-container);
   }
 `;
-var bannerAnimatedStyles = css17`
+var bannerAnimatedStyles = css18`
   animation: ${slideInTtb} var(--duration-xfast) ease-out;
 `;
-var bannerContentStyles = css17``;
-var bannerDismissButtonStyles = css17`
+var bannerContentStyles = css18``;
+var bannerDismissButtonStyles = css18`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10594,15 +10656,15 @@ var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props
 };
 // src/components/Brand/UniformLogo.styles.ts
-import { css as css18 } from "@emotion/react";
-var SVG = css18`
+import { css as css19 } from "@emotion/react";
+var SVG = css19`
   display: block;
 `;
-var SVGLight = css18`
+var SVGLight = css19`
   background: transparent;
   color: var(--brand-secondary-1);
 `;
-var SVGDark = css18`
+var SVGDark = css19`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
@@ -10682,6 +10744,83 @@ var UniformLogo = ({
     }
   ) });
 };
+var UniformLogoLarge = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs10(
+    "svg",
+    {
+      width: "250",
+      height: "64",
+      viewBox: "0 0 250 64",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs10("g", { clipPath: "url(#clip0)", children: [
+          /* @__PURE__ */ jsx19("path", { d: "M18.3804 0L0 10.6131V31.8393L18.3804 21.2262L36.7654 10.6131L18.3804 0Z", fill: "#7BB3FF" }),
+          /* @__PURE__ */ jsx19(
+            "path",
+            {
+              d: "M18.3804 42.4524V21.2262L0 31.8393V53.0655L18.3804 63.6786L36.7654 53.0655V31.8393L18.3804 42.4524Z",
+              fill: "#498DFF"
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            "path",
+            {
+              d: "M36.7654 10.6132L18.3804 21.2263L36.7654 31.8394V53.0656L55.1458 42.4525V21.2263L36.7654 10.6132Z",
+              fill: "#E61408"
+            }
+          ),
+          /* @__PURE__ */ jsx19("path", { d: "M141.257 21.2081H134.598V45.5052H141.257V21.2081Z", fill: "currentColor" }),
+          /* @__PURE__ */ jsx19("path", { d: "M141.496 10.0277H134.355V16.6874H141.496V10.0277Z", fill: "currentColor" }),
+          /* @__PURE__ */ jsx19(
+            "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__ */ jsx19(
+            "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__ */ jsx19(
+            "path",
+            {
+              d: "M203.067 23.2074L199.605 21.2081H196.412V45.5052H203.072V26.8907H211.429V21.2081H206.53L203.067 23.2074Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            "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__ */ jsx19(
+            "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__ */ jsx19(
+            "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__ */ jsx19("defs", { children: /* @__PURE__ */ jsx19("clipPath", { id: "clip0", children: /* @__PURE__ */ jsx19("rect", { width: "250", height: "63.6786", fill: "currentColor" }) }) })
+      ]
+    }
+  );
+};
 // src/components/Button/Button.tsx
 import * as React5 from "react";
@@ -10727,8 +10866,8 @@ import {
 import { Portal } from "reakit/Portal";
 // src/components/Menu/Menu.styles.ts
-import { css as css19 } from "@emotion/react";
-var menu = css19`
+import { css as css20 } from "@emotion/react";
+var menu = css20`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -10780,12 +10919,12 @@ var Menu = ({
 };
 // src/components/Menu/MenuGroup.styles.ts
-import { css as css20 } from "@emotion/react";
-var MenuGroupContainer = css20`
+import { css as css21 } from "@emotion/react";
+var MenuGroupContainer = css21`
   display: flex;
   flex-direction: column;
 `;
-var MenuTitle = css20`
+var MenuTitle = css21`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -10806,8 +10945,8 @@ import * as React7 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 // src/components/Menu/MenuItem.styles.ts
-import { css as css21 } from "@emotion/react";
-var menuItem = (textTheme) => css21`
+import { css as css22 } from "@emotion/react";
+var menuItem = (textTheme) => css22`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -10833,7 +10972,7 @@ var menuItem = (textTheme) => css21`
     outline: none;
   }
 `;
-var menuItemWithIcon = css21`
+var menuItemWithIcon = css22`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -10845,7 +10984,7 @@ var menuItemWithIcon = css21`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = css21`
+var menuItemSeparator = css22`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -10897,8 +11036,8 @@ import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
 var MenuItemSeparator = () => /* @__PURE__ */ jsx24("hr", { css: menuItemSeparator });
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-import { css as css22 } from "@emotion/react";
-var ButtonWithMenuContainer = css22`
+import { css as css23 } from "@emotion/react";
+var ButtonWithMenuContainer = css23`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -10919,7 +11058,7 @@ var ButtonWithMenuContainer = css22`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = css22`
+var ButtonWithMenuBtn = css23`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -10942,19 +11081,19 @@ var ButtonWithMenuBtn = css22`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = css22`
+var ButtonWithMenuIcon = css23`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = css22`
+var buttonPrimary2 = css23`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = css22`
+var buttonPrimaryDisabled = css23`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = css22`
+var buttonSecondary2 = css23`
   background: var(--primary-action-default);
   color: var(--white);
@@ -10962,17 +11101,17 @@ var buttonSecondary2 = css22`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = css22`
+var buttonSecondaryDisabled = css23`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = css22`
+var buttonUnimportant2 = css23`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = css22`
+var buttonUnimportantDisabled = css23`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = css22`
+var buttonGhost2 = css23`
   background: transparent;
   color: var(--brand-secondary-3);
@@ -10980,7 +11119,7 @@ var buttonGhost2 = css22`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = css22`
+var buttonGhostDisabled = css23`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
@@ -11041,18 +11180,18 @@ var ButtonWithMenu = ({
 };
 // src/components/Callout/Callout.tsx
-import { css as css24 } from "@emotion/react";
+import { css as css25 } from "@emotion/react";
 // src/components/Callout/Callout.styles.ts
-import { css as css23 } from "@emotion/react";
-var calloutContainer = css23`
+import { css as css24 } from "@emotion/react";
+var calloutContainer = css24`
   ${functionalColors}
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = css23`
+var calloutContainerCompact = css24`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -11064,25 +11203,25 @@ var calloutContainerCompact = css23`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = css23`
+var calloutInner = css24`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = css23`
+var calloutBody = css24`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = css23`
+var calloutBodyCompact = css24`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = css23`
+var calloutIconWrap = css24`
   flex-shrink: 0;
 `;
-var calloutTitle = css23`
+var calloutTitle = css24`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = css23`
+var calloutIcon = css24`
   width: 1.25rem;
   height: 1.25rem;
 `;
@@ -11216,91 +11355,91 @@ import { jsx as jsx27, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--caution-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--caution-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--danger-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--danger-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--danger-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--danger-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--info-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--info-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--note-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--note-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--success-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--success-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: css24`
+    descriptionColor: css25`
       color: var(--success-desc);
     `,
-    iconColor: css24`
+    iconColor: css25`
       color: var(--success-icon);
     `,
-    containerStyles: css24`
+    containerStyles: css25`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -11338,8 +11477,8 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
 import { CgMoreAlt } from "react-icons/cg";
 // src/components/Card/Card.styles.ts
-import { css as css25 } from "@emotion/react";
-var CardContainer = css25`
+import { css as css26 } from "@emotion/react";
+var CardContainer = css26`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11352,7 +11491,7 @@ var CardContainer = css25`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => css25`
+var CardTitle = (marginBottom) => css26`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -11360,7 +11499,7 @@ var CardTitle = (marginBottom) => css25`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = css25`
+var CardMenu = css26`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -11423,12 +11562,12 @@ var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
 };
 // src/components/Card/CardContainer.styles.ts
-import { css as css26 } from "@emotion/react";
-var CardContainerWrapper = (bgColor) => css26`
+import { css as css27 } from "@emotion/react";
+var CardContainerWrapper = (bgColor) => css27`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => css26`
+var CardContainerInner = ({ padding, withLastColumn }) => css27`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -11457,8 +11596,8 @@ var CardContainer2 = ({
 import { CgMoreAlt as CgMoreAlt2 } from "react-icons/cg";
 // src/components/Layout/styles/Container.styles.ts
-import { css as css27 } from "@emotion/react";
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => css27`
+import { css as css28 } from "@emotion/react";
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => css28`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -11496,8 +11635,8 @@ var Container2 = ({
 };
 // src/components/Layout/styles/HorizontalRhythm.styles.ts
-import { css as css28 } from "@emotion/react";
-var HorizontalRhythmContainer = (size) => css28`
+import { css as css29 } from "@emotion/react";
+var HorizontalRhythmContainer = (size) => css29`
   display: flex;
   gap: var(--spacing-${size});
 `;
@@ -11515,11 +11654,11 @@ var HorizontalRhythm = ({
 };
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
-import { css as css29 } from "@emotion/react";
-var TwoColumnLayoutContainer = (bgColor) => css29`
+import { css as css30 } from "@emotion/react";
+var TwoColumnLayoutContainer = (bgColor) => css30`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => css29`
+var TwoColumnLayoutInner = (invertLayout) => css30`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -11535,8 +11674,8 @@ var TwoColumnLayoutInner = (invertLayout) => css29`
     }`}
   }
 `;
-var TwoColumnLayoutMain = css29``;
-var TwoColumnLayoutSupporting = css29`
+var TwoColumnLayoutMain = css30``;
+var TwoColumnLayoutSupporting = css30`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
@@ -11557,8 +11696,8 @@ var TwoColumnLayout = ({
 };
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-import { css as css30 } from "@emotion/react";
-var VerticalRhythmContainer = (size) => css30`
+import { css as css31 } from "@emotion/react";
+var VerticalRhythmContainer = (size) => css31`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -11572,8 +11711,8 @@ var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
 };
 // src/components/Card/LoadingCardSkeleton.styles.ts
-import { css as css31 } from "@emotion/react";
-var LoadingCardSkeleton = css31`
+import { css as css32 } from "@emotion/react";
+var LoadingCardSkeleton = css32`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   color: var(--gray-400);
   border-radius: var(--rounded-base);
@@ -11581,21 +11720,21 @@ var LoadingCardSkeleton = css31`
   min-height: 160px;
   position: relative;
 `;
-var LoadingText = css31`
+var LoadingText = css32`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
   display: block;
 `;
-var LoadingTitle = css31`
+var LoadingTitle = css32`
   width: clamp(200px, 100vw, 60%);
   height: var(--spacing-md);
 `;
-var LoadingTimeStamp = css31`
+var LoadingTimeStamp = css32`
   width: clamp(200px, 100vw, 30%);
   height: var(--spacing-sm);
 `;
-var LoadingMenuIcon = css31`
+var LoadingMenuIcon = css32`
   animation: ${fadeIn} 1s linear infinite alternate;
   position: absolute;
   top: var(--spacing-md);
@@ -11616,8 +11755,8 @@ var LoadingCardSkeleton2 = () => {
 import { CgClose as CgClose3 } from "react-icons/cg";
 // src/components/Chip/Chip.styles.ts
-import { css as css32 } from "@emotion/react";
-var ChipContainer = css32`
+import { css as css33 } from "@emotion/react";
+var ChipContainer = css33`
   border-radius: var(--rounded-full);
   background: lime;
   cursor: pointer;
@@ -11635,20 +11774,20 @@ var ChipContainer = css32`
     }
   }
 `;
-var ChipText = css32`
+var ChipText = css33`
   line-height: 1;
 `;
-var ChipIcon = css32`
+var ChipIcon = css33`
   align-items: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
-var ChipSeparator = css32`
+var ChipSeparator = css33`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
 `;
-var ChipTiny = css32`
+var ChipTiny = css33`
   font-size: var(--fs-xs);
   padding-inline: var(--spacing-sm);
@@ -11656,7 +11795,7 @@ var ChipTiny = css32`
     padding-block: var(--spacing-xs);
   }
 `;
-var ChipSmall = css32`
+var ChipSmall = css33`
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-base);
@@ -11664,7 +11803,7 @@ var ChipSmall = css32`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipMedium = css32`
+var ChipMedium = css33`
   font-size: var(--fs-base);
   padding-inline: var(--spacing-base);
@@ -11672,17 +11811,59 @@ var ChipMedium = css32`
     padding-block: var(--spacing-sm);
   }
 `;
-var ChipThemeAccentLight = css32`
-  background: var(--accent-primary-surface);
+var ChipThemeAccentLight = css33`
+  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 = css33`
+  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 = css33`
+  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,
@@ -11692,20 +11873,20 @@ var ChipThemeAccentLight = css32`
   }
   [data-icon] {
-    color: var(--accent-primary);
+    color: var(--accent-alt-light);
   }
 `;
-var ChipThemeAccentDark = css32`
-  background: var(--accent-primary);
+var ChipAltThemeAccentDark = css33`
+  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,
@@ -11714,7 +11895,7 @@ var ChipThemeAccentDark = css32`
     color: var(--white);
   }
 `;
-var ChipThemeNeutralLight = css32`
+var ChipThemeNeutralLight = css33`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
@@ -11723,7 +11904,7 @@ var ChipThemeNeutralLight = css32`
     background: var(--gray-400);
   }
 `;
-var ChipThemeNeutralDark = css32`
+var ChipThemeNeutralDark = css33`
   background: var(--gray-700);
   color: var(--white);
@@ -11736,7 +11917,7 @@ var ChipThemeNeutralDark = css32`
     background: var(--gray-900);
   }
 `;
-var ChipActionButton = css32`
+var ChipActionButton = css33`
   background: transparent;
   border: none;
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
@@ -11761,6 +11942,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
   };
@@ -11788,8 +11971,8 @@ var DismissibleChipAction = ({ onDismiss, ...props }) => {
 };
 // src/components/Counter/Counter.styles.ts
-import { css as css33 } from "@emotion/react";
-var counterContainer = (bgColor) => css33`
+import { css as css34 } from "@emotion/react";
+var counterContainer = (bgColor) => css34`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -11802,16 +11985,16 @@ var counterContainer = (bgColor) => css33`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = css33`
+var counterZeroValue = css34`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = css33`
+var counterTripleValue = css34`
   position: relative;
 `;
-var counterIcon = css33`
+var counterIcon = css34`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -11836,7 +12019,7 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
 };
 // src/components/DashedBox/DashedBox.styles.ts
-import { css as css34 } from "@emotion/react";
+import { css as css35 } from "@emotion/react";
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -11855,7 +12038,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css34`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css35`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11885,8 +12068,8 @@ var DashedBox = ({
 import * as React8 from "react";
 // src/components/Details/Details.styles.ts
-import { css as css35 } from "@emotion/react";
-var details = css35`
+import { css as css36 } from "@emotion/react";
+var details = css36`
   cursor: pointer;
   &[open] {
     & > summary svg {
@@ -11894,11 +12077,11 @@ var details = css35`
     }
   }
 `;
-var detailsContent = css35`
+var detailsContent = css36`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = css35`
+var summary = css36`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -11911,11 +12094,11 @@ var summary = css35`
     display: none;
   }
 `;
-var summaryIcon = css35`
+var summaryIcon = css36`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = css35`
+var summaryIconVisiblyHidden = css36`
   visibility: hidden;
 `;
@@ -11962,8 +12145,8 @@ import React11, { useEffect as useEffect6, useMemo, useRef as useRef2 } from "re
 import { CgChevronRight } from "react-icons/cg";
 // src/components/Drawer/Drawer.styles.ts
-import { css as css36, keyframes as keyframes2 } from "@emotion/react";
-var drawerStyles = (bgColor = "var(--white)") => css36`
+import { css as css37, keyframes as keyframes2 } from "@emotion/react";
+var drawerStyles = (bgColor = "var(--white)") => css37`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -11973,7 +12156,7 @@ var drawerStyles = (bgColor = "var(--white)") => css36`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = css36`
+var drawerCloseButtonStyles = css37`
   align-self: flex-end;
   background: transparent;
   border: none;
@@ -11981,17 +12164,17 @@ var drawerCloseButtonStyles = css36`
   padding: var(--spacing-xs);
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = css36`
+var drawerHeaderStyles = css37`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = css36`
+var drawerRendererStyles = css37`
   inset: 0;
   overflow: hidden;
   z-index: 40;
 `;
-var drawerInnerStyles = css36`
+var drawerInnerStyles = css37`
   height: 100%;
   padding: 0 var(--spacing-base) var(--spacing-base);
   overflow: auto;
@@ -12012,7 +12195,7 @@ var slideDrawerIn = keyframes2`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = css36`
+var drawerWrapperStyles = css37`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -12023,7 +12206,7 @@ var drawerWrapperStyles = css36`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = css36`
+var drawerWrapperOverlayStyles = css37`
   position: absolute;
   inset: 0;
   background: rgba(31, 43, 52, 0.4);
@@ -12249,8 +12432,8 @@ var DrawerInner = ({
 };
 // src/components/Input/styles/CaptionText.styles.ts
-import { css as css37 } from "@emotion/react";
-var CaptionText = (dynamicSize) => css37`
+import { css as css38 } from "@emotion/react";
+var CaptionText = (dynamicSize) => css38`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -12268,20 +12451,20 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 import { forwardRef as forwardRef4 } from "react";
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-import { css as css38 } from "@emotion/react";
-var CheckboxWithInfoContainer = css38`
+import { css as css39 } from "@emotion/react";
+var CheckboxWithInfoContainer = css39`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = css38`
+var CheckboxWithInfoLabel = css39`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = css38`
+var CheckboxWithInfoInput = css39`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -12314,7 +12497,7 @@ var CheckboxWithInfoInput = css38`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = css38`
+var InfoDialogContainer = css39`
   position: relative;
   &:hover {
@@ -12323,7 +12506,7 @@ var InfoDialogContainer = css38`
     }
   }
 `;
-var InfoDialogMessage = css38`
+var InfoDialogMessage = css39`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -12363,8 +12546,8 @@ var CheckboxWithInfo = forwardRef4(
 import { MdWarning } from "react-icons/md";
 // src/components/Input/styles/ErrorMessage.styles.ts
-import { css as css39 } from "@emotion/react";
-var ErrorText = css39`
+import { css as css40 } from "@emotion/react";
+var ErrorText = css40`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -12384,9 +12567,9 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 import * as React12 from "react";
 // src/components/Input/styles/Fieldset.styles.ts
-import { css as css40 } from "@emotion/react";
+import { css as css41 } from "@emotion/react";
 function fieldsetContainer(invert) {
-  const base = css40`
+  const base = css41`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
@@ -12398,18 +12581,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    css40`
+    css41`
           background: white;
         `,
     base
   ] : [
-    css40`
+    css41`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = css40`
+var fieldsetLegend = css41`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -12419,7 +12602,7 @@ var fieldsetLegend = css40`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = css40`
+var fieldsetBody = css41`
   clear: left;
 `;
@@ -12438,8 +12621,8 @@ var Fieldset = React12.forwardRef(
 import { MdInfoOutline } from "react-icons/md";
 // src/components/Input/styles/InfoMessage.styles.tsx
-import { css as css41 } from "@emotion/react";
-var InfoText = css41`
+import { css as css42 } from "@emotion/react";
+var InfoText = css42`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
@@ -12448,7 +12631,7 @@ var InfoText = css41`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = css41`
+var InfoIcon2 = css42`
   color: var(--info-icon);
 `;
@@ -12483,14 +12666,14 @@ var Label = ({ children, className, testId, ...props }) => {
 import { MdWarning as MdWarning2 } from "react-icons/md";
 // src/components/Input/styles/WarningMessage.styles.tsx
-import { css as css42 } from "@emotion/react";
-var WarningText = css42`
+import { css as css43 } from "@emotion/react";
+var WarningText = css43`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = css42`
+var WarningIcon = css43`
   color: var(--alert);
 `;
@@ -12701,17 +12884,17 @@ function InputComboBox(props) {
 }
 // src/components/Input/InputInlineSelect.tsx
-import { css as css44 } from "@emotion/react";
+import { css as css45 } from "@emotion/react";
 import { useRef as useRef3, useState as useState5 } from "react";
 import { CgChevronDown as CgChevronDown2 } from "react-icons/cg";
 // src/components/Input/styles/InputInlineSelect.styles.ts
-import { css as css43 } from "@emotion/react";
-var inlineSelectContainer = css43`
+import { css as css44 } from "@emotion/react";
+var inlineSelectContainer = css44`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = css43`
+var inlineSelectBtn = css44`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -12735,7 +12918,7 @@ var inlineSelectBtn = css43`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = css43`
+var inlineSelectMenu = css44`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -12746,7 +12929,7 @@ var inlineSelectMenu = css43`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = css43`
+var inlineSelectBtnOptions = css44`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -12762,7 +12945,7 @@ var inlineSelectBtnOptions = css43`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = css43`
+var inlineSelectMenuClosed = css44`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -12790,7 +12973,7 @@ var InputInlineSelect = ({
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : css44`
+      css: !classNameContainer ? inlineSelectContainer : css45`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -13069,34 +13252,34 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
 };
 // src/components/LimitsBar/LimitsBar.styles.ts
-import { css as css45 } from "@emotion/react";
-var LimitsBarContainer = css45`
+import { css as css46 } from "@emotion/react";
+var LimitsBarContainer = css46`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css45`
+var LimitsBarProgressBar = css46`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css45`
+var LimitsBarProgressBarLine = css46`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css45`
+var LimitsBarLabelContainer = css46`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css45`
+var LimitsBarLabel = css46`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css45`
+var LimitsBarBgColor = (statusColor) => css46`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css45`
+var LimitsBarTextColor = (statusColor) => css46`
   color: ${statusColor};
 `;
@@ -13146,8 +13329,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 // src/components/LinkList/LinkList.styles.ts
-import { css as css46 } from "@emotion/react";
-var LinkListContainer = (padding) => css46`
+import { css as css47 } from "@emotion/react";
+var LinkListContainer = (padding) => css47`
   padding: ${padding};
   ${mq("sm")} {
@@ -13166,14 +13349,14 @@ var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) =>
 };
 // src/components/List/ScrollableList.tsx
-import { css as css48 } from "@emotion/react";
+import { css as css49 } from "@emotion/react";
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css47 } from "@emotion/react";
-var ScrollableListContainer = css47`
+import { css as css48 } from "@emotion/react";
+var ScrollableListContainer = css48`
   position: relative;
 `;
-var ScrollableListInner = css47`
+var ScrollableListInner = css48`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -13197,7 +13380,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ jsx60(
       "span",
       {
-        css: css48`
+        css: css49`
             ${labelText}
           `,
         children: label
@@ -13211,8 +13394,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck } from "react-icons/cg";
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css49 } from "@emotion/react";
-var ScrollableListItemContainer = css49`
+import { css as css50 } from "@emotion/react";
+var ScrollableListItemContainer = css50`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -13221,13 +13404,13 @@ var ScrollableListItemContainer = css49`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = css49`
+var ScrollableListItemShadow = css50`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = css49`
+var ScrollableListItemActive = css50`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css49`
+var ScrollableListItemBtn = css50`
   align-items: center;
   border: none;
   background: transparent;
@@ -13242,27 +13425,27 @@ var ScrollableListItemBtn = css49`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css49`
+var ScrollableListInputLabel = css50`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css49`
+var ScrollableListInputText = css50`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = css49`
+var ScrollableListHiddenInput = css50`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css49`
+var ScrollableListIcon = css50`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -13270,7 +13453,7 @@ var ScrollableListIcon = css49`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = css49`
+var ScrollableListIconVisible = css50`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
@@ -13350,7 +13533,7 @@ var ScrollableListItem = ({
 };
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css50, keyframes as keyframes3 } from "@emotion/react";
+import { css as css51, keyframes as keyframes3 } from "@emotion/react";
 var bounceFade = keyframes3`
     0%, 100% {
         opacity: 1.0;
@@ -13368,11 +13551,11 @@ var bounceFade = keyframes3`
         transform: translateY(-5px);
     }
 `;
-var loader = css50`
+var loader = css51`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = css50`
+var loadingDot = css51`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -13409,8 +13592,8 @@ var LoadingIndicator = ({ ...props }) => {
 import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef4 } from "react";
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css51 } from "@emotion/react";
-var loadingOverlayContainer = css51`
+import { css as css52 } from "@emotion/react";
+var loadingOverlayContainer = css52`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -13418,24 +13601,24 @@ var loadingOverlayContainer = css51`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css51`
+var loadingOverlayVisible = css52`
   display: flex;
 `;
-var loadingOverlayHidden = css51`
+var loadingOverlayHidden = css52`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css51`
+var loadingOverlayBackground = (bgColor) => css52`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css51`
+var loadingOverlayBody = css52`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css51`
+var loadingOverlayMessage = css52`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -13530,12 +13713,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { css as css53 } from "@emotion/react";
+import { css as css54 } from "@emotion/react";
 import { CgAdd as CgAdd2, CgChevronRight as CgChevronRight2 } from "react-icons/cg";
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-import { css as css52 } from "@emotion/react";
-var IntegrationTileContainer = css52`
+import { css as css53 } from "@emotion/react";
+var IntegrationTileContainer = css53`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13566,22 +13749,22 @@ var IntegrationTileContainer = css52`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = css52`
+var IntegrationTileBtnDashedBorder = css53`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = css52`
+var IntegrationTileTitle = css53`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = css52`
+var IntegrationTitleLogo = css53`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = css52`
+var IntegrationTileName = css53`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -13594,7 +13777,7 @@ var IntegrationTileName = css52`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = css52`
+var IntegrationAddedText = css53`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -13609,7 +13792,7 @@ var IntegrationAddedText = css52`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => css52`
+var IntegrationCustomBadgeText = (theme) => css53`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -13623,26 +13806,26 @@ var IntegrationCustomBadgeText = (theme) => css52`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = css52`
+var IntegrationAuthorBadgeIcon = css53`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = css52`
+var IntegrationTitleFakeButton = css53`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = css52`
+var IntegrationTileFloatingButton = css53`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => css52`
+var IntegrationTileFloatingButtonMessage = (clicked) => css53`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -13689,7 +13872,7 @@ var CreateTeamIntegrationTile = ({
               icon: CgChevronRight2,
               iconColor: "currentColor",
               size: 20,
-              css: css53`
+              css: css54`
               order: 1;
             `
             }
@@ -13699,7 +13882,7 @@ var CreateTeamIntegrationTile = ({
               icon: CgAdd2,
               iconColor: "currentColor",
               size: 16,
-              css: css53`
+              css: css54`
               order: -1;
             `
             }
@@ -13787,7 +13970,7 @@ var EditTeamIntegrationTile = ({
 };
 // src/components/Tiles/IntegrationComingSoon.tsx
-import { css as css54 } from "@emotion/react";
+import { css as css55 } from "@emotion/react";
 import { useEffect as useEffect8, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
@@ -13836,7 +14019,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ jsx69(
                 "span",
                 {
-                  css: css54`
+                  css: css55`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -13856,8 +14039,8 @@ var IntegrationComingSoon = ({
 };
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-import { css as css55 } from "@emotion/react";
-var IntegrationLoadingTileContainer = css55`
+import { css as css56 } from "@emotion/react";
+var IntegrationLoadingTileContainer = css56`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13884,17 +14067,17 @@ var IntegrationLoadingTileContainer = css55`
     }
   }
 `;
-var IntegrationLoadingTileImg = css55`
+var IntegrationLoadingTileImg = css56`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = css55`
+var IntegrationLoadingTileText = css56`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = css55`
+var IntegrationLoadingFrame = css56`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -13910,13 +14093,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-import { css as css56 } from "@emotion/react";
-var IntegrationModalIconContainer = css56`
+import { css as css57 } from "@emotion/react";
+var IntegrationModalIconContainer = css57`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = css56`
+var IntegrationModalImage = css57`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -13936,6 +14119,9 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
         iconSrc = iconUrl.href;
       }
     } catch (e) {
+      if (icon == null ? void 0 : icon.startsWith("/")) {
+        iconSrc = icon;
+      }
     }
   }
   return /* @__PURE__ */ jsxs46("div", { css: IntegrationModalIconContainer, children: [
@@ -13954,7 +14140,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
         /* @__PURE__ */ jsx71("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx71(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ jsx71(
+    CompIcon ? /* @__PURE__ */ jsx71(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx71(
       "img",
       {
         src: iconSrc,
@@ -13963,7 +14149,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
         css: IntegrationModalImage,
         ...imgProps
       }
-    )
+    ) : null
   ] });
 };
@@ -14002,13 +14188,13 @@ var IntegrationTile = ({
 };
 // src/components/Tiles/styles/TileContainer.styles.ts
-import { css as css57 } from "@emotion/react";
-var TileContainerWrapper = css57`
+import { css as css58 } from "@emotion/react";
+var TileContainerWrapper = css58`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = css57`
+var TileContainerInner = css58`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
@@ -14021,31 +14207,31 @@ var TileContainer = ({ children, ...props }) => {
 };
 // src/components/Modal/IntegrationModalHeader.styles.ts
-import { css as css58 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css58`
+import { css as css59 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css59`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css58`
+var IntegrationModalHeaderGroup = css59`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css58`
+var IntegrationModalHeaderTitleGroup = css59`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css58`
+var IntegrationModalHeaderTitle = css59`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css58`
+var IntegrationModalHeaderMenuPlacement = css59`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css58`
+var IntegrationModalHeaderContentWrapper = css59`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -14116,8 +14302,8 @@ import {
 } from "reakit/Tooltip";
 // src/components/Tooltip/Tooltip.styles.ts
-import { css as css59 } from "@emotion/react";
-var TooltipContainer = css59`
+import { css as css60 } from "@emotion/react";
+var TooltipContainer = css60`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -14125,7 +14311,7 @@ var TooltipContainer = css59`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = css59`
+var TooltipArrowStyles = css60`
   svg {
     fill: var(--gray-300);
   }
@@ -14145,8 +14331,8 @@ function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
 }
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-import { css as css60 } from "@emotion/react";
-var inputIconBtn = css60`
+import { css as css61 } from "@emotion/react";
+var inputIconBtn = css61`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -14224,8 +14410,8 @@ var useParameterShell = () => {
 };
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css61 } from "@emotion/react";
-var inputContainer2 = css61`
+import { css as css62 } from "@emotion/react";
+var inputContainer2 = css62`
   position: relative;
   &:hover,
@@ -14237,14 +14423,14 @@ var inputContainer2 = css61`
     }
   }
 `;
-var labelText2 = css61`
+var labelText2 = css62`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css61`
+var input2 = css62`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -14288,18 +14474,18 @@ var input2 = css61`
     color: var(--gray-400);
   }
 `;
-var selectInput = css61`
+var selectInput = css62`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = css61`
+var inputWrapper = css62`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css61`
+var inputIcon2 = css62`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -14315,7 +14501,7 @@ var inputIcon2 = css61`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css61`
+var inputToggleLabel2 = css62`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -14326,7 +14512,7 @@ var inputToggleLabel2 = css61`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css61`
+var toggleInput2 = css62`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -14365,7 +14551,7 @@ var toggleInput2 = css61`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css61`
+var inlineLabel2 = css62`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -14381,7 +14567,7 @@ var inlineLabel2 = css61`
     }
   }
 `;
-var inputMenu = css61`
+var inputMenu = css62`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -14397,14 +14583,14 @@ var inputMenu = css61`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css61`
+var textarea2 = css62`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = css61`
+var imageWrapper = css62`
   background: var(--white);
 `;
-var img = css61`
+var img = css62`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -14412,7 +14598,7 @@ var img = css61`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = css61`
+var dataConnectButton = css62`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -14447,7 +14633,7 @@ var dataConnectButton = css61`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css61`
+var linkParameterBtn = css62`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -14456,7 +14642,7 @@ var linkParameterBtn = css61`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css61`
+var linkParameterControls = css62`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -14465,12 +14651,13 @@ var linkParameterControls = css61`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css61`
+var linkParameterInput = (withExternalLinkIcon) => css62`
   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 = css61`
+var linkParameterIcon = css62`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -14519,20 +14706,20 @@ function ParameterDataResource({
 }
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css62 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css62`
+import { css as css63 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css62`
+var ParameterDrawerHeaderTitleGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css62`
+var ParameterDrawerHeaderTitle = css63`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -14555,8 +14742,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef8 } from "react";
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css63 } from "@emotion/react";
-var fieldsetStyles = css63`
+import { css as css64 } from "@emotion/react";
+var fieldsetStyles = css64`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -14567,7 +14754,7 @@ var fieldsetStyles = css63`
     }
   }
 `;
-var fieldsetLegend2 = css63`
+var fieldsetLegend2 = css64`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -14624,15 +14811,15 @@ var ParameterMenuButton = forwardRef9(
 );
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css64 } from "@emotion/react";
-var emptyParameterShell = css64`
+import { css as css65 } from "@emotion/react";
+var emptyParameterShell = css65`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = css64`
+var emptyParameterShellText = css65`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -14640,7 +14827,7 @@ var emptyParameterShellText = css64`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css64`
+var overrideMarker = css65`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -15158,13 +15345,13 @@ import {
 import { Portal as Portal2 } from "reakit/Portal";
 // src/components/Popover/Popover.styles.ts
-import { css as css65 } from "@emotion/react";
-var PopoverBtn = css65`
+import { css as css66 } from "@emotion/react";
+var PopoverBtn = css66`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = css65`
+var Popover = css66`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15199,19 +15386,19 @@ var Popover2 = ({
 };
 // src/components/ProgressList/ProgressList.tsx
-import { css as css67 } from "@emotion/react";
+import { css as css68 } from "@emotion/react";
 import { useMemo as useMemo2 } from "react";
 import { CgCheckO, CgRadioCheck, CgRecord } from "react-icons/cg";
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css66 } from "@emotion/react";
-var progressListStyles = css66`
+import { css as css67 } from "@emotion/react";
+var progressListStyles = css67`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css66`
+var progressListItemStyles = css67`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -15266,12 +15453,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo2(() => {
     if (error) {
-      return errorLevel === "caution" ? css67`
+      return errorLevel === "caution" ? css68`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css67`
+          ` : css68`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -15279,13 +15466,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css67`
+      completed: css68`
         opacity: 0.75;
       `,
-      inProgress: css67`
+      inProgress: css68`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css67`
+      queued: css68`
         opacity: 0.5;
       `
     };
@@ -15301,13 +15488,13 @@ var ProgressListItem = ({
 };
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css69 } from "@emotion/react";
+import { css as css70 } from "@emotion/react";
 import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
 import { CgCheck as CgCheck4 } from "react-icons/cg";
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css68 } from "@emotion/react";
-var segmentedControlStyles = css68`
+import { css as css69 } from "@emotion/react";
+var segmentedControlStyles = css69`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -15326,14 +15513,14 @@ var segmentedControlStyles = css68`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css68`
+var segmentedControlVerticalStyles = css69`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css68`
+var segmentedControlItemStyles = css69`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -15341,14 +15528,10 @@ var segmentedControlItemStyles = css68`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css68`
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+var segmentedControlInputStyles = css69`
+  ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = css68`
+var segmentedControlLabelStyles = css69`
   position: relative;
   display: flex;
   align-items: center;
@@ -15385,20 +15568,20 @@ var segmentedControlLabelStyles = css68`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css68`
+var segmentedControlLabelIconOnlyStyles = css69`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css68`
+var segmentedControlLabelCheckStyles = css69`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css68`
+var segmentedControlLabelContentStyles = css69`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css68``;
+var segmentedControlLabelTextStyles = css69``;
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx93, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
@@ -15423,9 +15606,9 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo3(() => {
     const map = {
-      sm: css69({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css69({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css69({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css70({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css70({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css70({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -15482,12 +15665,12 @@ var SegmentedControl = ({
 };
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css70, keyframes as keyframes4 } from "@emotion/react";
+import { css as css71, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css70`
+var skeletonStyles = css71`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -15524,8 +15707,8 @@ var Skeleton = ({
 import * as React19 from "react";
 // src/components/Switch/Switch.styles.ts
-import { css as css71 } from "@emotion/react";
-var SwitchInputContainer = css71`
+import { css as css72 } from "@emotion/react";
+var SwitchInputContainer = css72`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -15534,7 +15717,7 @@ var SwitchInputContainer = css71`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css71`
+var SwitchInput = css72`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -15572,7 +15755,7 @@ var SwitchInput = css71`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css71`
+var SwitchInputDisabled = css72`
   opacity: var(--opacity-50);
   cursor: not-allowed;
@@ -15580,7 +15763,7 @@ var SwitchInputDisabled = css71`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css71`
+var SwitchInputLabel = css72`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -15602,7 +15785,7 @@ var SwitchInputLabel = css71`
     top: 0;
   }
 `;
-var SwitchText = css71`
+var SwitchText = css72`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -15631,28 +15814,28 @@ var Switch = React19.forwardRef(
 import * as React20 from "react";
 // src/components/Table/Table.styles.ts
-import { css as css72 } from "@emotion/react";
-var table = css72`
+import { css as css73 } from "@emotion/react";
+var table = css73`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css72`
+var tableHead = css73`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css72`
+var tableRow = css73`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css72`
+var tableCellHead = css73`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css72`
+var tableCellData = css73`
   padding: var(--spacing-base) var(--spacing-md);
 `;
@@ -15702,8 +15885,8 @@ import {
 } from "reakit/Tab";
 // src/components/Tabs/Tabs.styles.ts
-import { css as css73 } from "@emotion/react";
-var tabButtonStyles = css73`
+import { css as css74 } from "@emotion/react";
+var tabButtonStyles = css74`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -15720,7 +15903,7 @@ var tabButtonStyles = css73`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css73`
+var tabButtonGroupStyles = css74`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -15772,8 +15955,8 @@ var TabContent = ({ children, ...props }) => {
 };
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css74 } from "@emotion/react";
-var StatusBulletContainer = css74`
+import { css as css75 } from "@emotion/react";
+var StatusBulletContainer = css75`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -15790,44 +15973,44 @@ var StatusBulletContainer = css74`
     display: block;
   }
 `;
-var StatusBulletBase = css74`
+var StatusBulletBase = css75`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css74`
+var StatusBulletSmall = css75`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css74`
+var StatusDraft = css75`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css74`
+var StatusModified = css75`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = css74`
+var StatusError = css75`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = css74`
+var StatusPublished = css75`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css74`
+var StatusOrphan = css75`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -15982,8 +16165,10 @@ export {
   TwoColumnLayout,
   UniformBadge,
   UniformLogo,
+  UniformLogoLarge,
   VerticalRhythm,
   WarningMessage,
+  accessibleHidden,
   borderTopIcon,
   breakpoints,
   button,
@@ -16022,6 +16207,7 @@ export {
   macifyShortcut,
   mq,
   numberInput,
+  queryStringIcon,
   rectangleRoundedIcon,
   replaceUnderscoreInString,
   ripple,