@uniformdev/design-system 19.96.1-alpha.13 → 19.99.0

package/dist/esm/index.js

@@ -33,13 +33,17 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --brand-primary-3: #83c6e1; /* slate blue */
 
           /* secondary colours */
-          --brand-secondary-1: #1f2b34; /* carbon */
+          --brand-secondary-1: var(--typography-base); /* carbon */
           --brand-secondary-2: var(--gray-50);
           --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) */
+
+          /* text colours */
+          --typography-base: #1f2b34;
+
           /* purple spectrum */
           --purple-rain-100: #dccbff;
           --purple-rain-200: #c2a5ff;
@@ -63,6 +67,9 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --primary-action-hover: #1264ff;
           --primary-action-active: #0043c2;
 
+          --action-destructive-default: var(--brand-secondary-5);
+          --action-destructive-hover: #e07571;
+
           /* tertiary action */
           --tertiary-action-default: var(--gray-700);
           --tertiary-action-hover: var(--gray-600);
@@ -89,6 +96,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --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);
           --ring: 0 0 0 0 var(--white), 0 0 0 2px var(--brand-primary-3);
@@ -577,6 +585,41 @@ var buttonGhostUnimportant = css`
 
 // src/components/Input/styles/Inputs.styles.ts
 import { css as css2 } from "@emotion/react";
+
+// src/components/Button/Button.tsx
+import * as React2 from "react";
+import { Button as BaseButton } from "reakit/Button";
+import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
+var Button = React2.forwardRef(
+  ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
+    const buttonTheme = {
+      primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
+      "accent-alt-dark": buttonAccentAltDark,
+      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
+      destructive: buttonDestructive,
+      secondary: buttonSecondary,
+      secondaryInvert: buttonSecondaryInvert,
+      ghost: buttonGhost,
+      ghostDestructive: buttonGhostDestructive,
+      unimportant: buttonUnimportant,
+      ghostUnimportant: buttonGhostUnimportant,
+      tertiary: buttonTertiary,
+      tertiaryOutline: buttonTertiaryOutline
+    };
+    const btnSize = {
+      zero: "padding: 0",
+      xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
+      sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
+      md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
+      lg: "padding: var(--spacing-sm) var(--spacing-base)",
+      xl: "padding: 0.75rem var(--spacing-md)"
+    };
+    return /* @__PURE__ */ jsx3(BaseButton, { ref, css: [button, buttonTheme[buttonType], btnSize[size]], ...props, children });
+  }
+);
+
+// src/components/Input/styles/Inputs.styles.ts
 var inputContainer = css2`
   position: relative;
 `;
@@ -586,27 +629,33 @@ var labelText = css2`
   align-items: center;
 `;
 var input = (whiteSpaceWrap) => css2`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-400);
-  border-radius: var(--rounded-md);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding: var(--spacing-base) var(--spacing-md) var(--spacing-base) var(--spacing-base);
+  padding: var(--input-padding);
+  min-height: 46px;
   width: 100%;
   position: relative;
   white-space: ${whiteSpaceWrap};
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
 
   &::placeholder {
     color: var(--gray-400);
   }
 
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
   &:focus,
   &:focus-within {
-    border-color: var(--brand-secondary-1);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
@@ -625,9 +674,39 @@ var input = (whiteSpaceWrap) => css2`
       no-repeat 50% 45%;
     background-size: contain;
   }
+
+  &:where([type='range']) {
+    appearance: auto;
+    border: none;
+    box-shadow: none;
+
+    &:focus,
+    &:focus-within {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  &:where([type='file']) {
+    border: none;
+    padding: var(--spacing-2xs);
+  }
+
+  &::file-selector-button {
+    ${button}
+    ${buttonSecondaryInvert}
+    padding: 0.375rem 0.625rem;
+    font-size: var(--fs-sm);
+    margin-right: var(--spacing-base);
+  }
 `;
 var inputError = css2`
-  border-color: var(--brand-secondary-5);
+  border-color: var(--action-destructive-default);
+  box-shadow: var(--elevation-100);
+
+  &:hover {
+    border-color: var(--action-destructive-hover);
+  }
 `;
 var inputIcon = css2`
   align-items: center;
@@ -891,7 +970,7 @@ var scrollbarStyles = css4`
 import { css as css7 } from "@emotion/react";
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
-import React2, { useContext, useEffect as useEffect2, useState } from "react";
+import React3, { useContext, useEffect as useEffect2, useState } from "react";
 
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
 import { css as css5 } from "@emotion/react";
@@ -950,9 +1029,9 @@ function useShortcut({
 }
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
-import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
 var loggedHotkeyConsole = false;
-var Context = React2.createContext(false);
+var Context = React3.createContext(false);
 var revealHotkey = ["ctrl+F1", "ctrl+shift+/"];
 function ShortcutContext({ children }) {
   const [reveal, setReveal] = useState(false);
@@ -975,7 +1054,7 @@ function ShortcutContext({ children }) {
     },
     activeWhenEditing: true
   });
-  return /* @__PURE__ */ jsx3(Context.Provider, { value: reveal, children });
+  return /* @__PURE__ */ jsx4(Context.Provider, { value: reveal, children });
 }
 function computeDisplayedHotkey(shortcut) {
   return shortcut.replace(/meta/g, "\u2318").replace(/option/g, "\u2325").replace(/shift/g, "\u21E7").replace(/ctrl/g, "\u2303");
@@ -994,18 +1073,18 @@ function ShortcutRevealer({
     finalShortcut = macifyShortcut(shortcut);
   }
   const displayedShortcut = computeDisplayedHotkey(finalShortcut);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       css: [ShortcutRevealerContainer, typeof className === "object" ? className : void 0],
       className: typeof className === "string" ? className : "",
-      children: /* @__PURE__ */ jsx3(Hotkey, { shortcut: displayedShortcut })
+      children: /* @__PURE__ */ jsx4(Hotkey, { shortcut: displayedShortcut })
     }
   );
 }
 function Hotkey({ shortcut }) {
   const hk = shortcut.split("+");
-  return /* @__PURE__ */ jsx3("div", { css: ShortcutRevealerHotKeyContainer, children: hk.map((key) => /* @__PURE__ */ jsx3("span", { css: ShortcutRevealerHotKey, children: key.toUpperCase() }, key)) });
+  return /* @__PURE__ */ jsx4("div", { css: ShortcutRevealerHotKeyContainer, children: hk.map((key) => /* @__PURE__ */ jsx4("span", { css: ShortcutRevealerHotKey, children: key.toUpperCase() }, key)) });
 }
 
 // src/components/AddButton/AddButton.styles.ts
@@ -1058,7 +1137,7 @@ var addButton = css6`
 `;
 
 // src/components/AddButton/AddButton.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
 var AddButton = ({
   buttonText = "Add",
   onClick,
@@ -1082,7 +1161,7 @@ var AddButton = ({
       css: addButton,
       ...props,
       children: [
-        shortcut ? /* @__PURE__ */ jsx4(
+        shortcut ? /* @__PURE__ */ jsx5(
           ShortcutRevealer,
           {
             shortcut,
@@ -1092,7 +1171,7 @@ var AddButton = ({
           `
           }
         ) : null,
-        /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx4("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "currentColor" }) })
+        /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx5("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "currentColor" }) })
       ]
     }
   );
@@ -1108,7 +1187,7 @@ import { GenIcon } from "@react-icons/all-files";
 import { MdSettings } from "@react-icons/all-files/md/MdSettings";
 
 // src/components/Icons/Icon.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/components/Icons/Icon.styles.ts
 import { css as css8 } from "@emotion/react";
@@ -1145,7 +1224,7 @@ var IconColorAccentLight = css8`
 
 // src/components/Icons/IconsProvider.tsx
 import { createContext, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
-import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
 var IconContext = createContext({
   /** object mapping of available icons */
   iconsMap: {},
@@ -1166,11 +1245,11 @@ function IconsProvider({ children }) {
   useEffect3(() => {
     initializeIconsMap();
   }, []);
-  return /* @__PURE__ */ jsx5(IconContext.Provider, { value: { iconsMap, isLoading }, children });
+  return /* @__PURE__ */ jsx6(IconContext.Provider, { value: { iconsMap, isLoading }, children });
 }
 
 // src/components/Icons/Icon.tsx
-import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }) => {
   const isIconName = typeof icon === "string";
   const { iconsMap, isLoading } = useIconContext();
@@ -1194,12 +1273,12 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ jsx6(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
+  return /* @__PURE__ */ jsx7(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
-var Icon = React3.memo(IconInner);
+var Icon = React4.memo(IconInner);
 
 // src/components/Icons/customIcons.tsx
-import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
 var rectangleRoundedIcon = GenIcon({
   tag: "svg",
   attr: {
@@ -1498,7 +1577,7 @@ var infoFilledIcon = GenIcon({
   ]
 });
 var settingsIcon = MdSettings;
-var settings = (props) => /* @__PURE__ */ jsx7(Icon, { ...props, icon: MdSettings });
+var settings = (props) => /* @__PURE__ */ jsx8(Icon, { ...props, icon: MdSettings });
 var queryStringIcon = GenIcon({
   tag: "svg",
   attr: {
@@ -1839,6 +1918,96 @@ var magicWand = GenIcon({
     }
   ]
 });
+var listViewShort = GenIcon({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 10C2 9.44772 2.44772 9 3 9H21C21.5523 9 22 9.44772 22 10C22 10.5523 21.5523 11 21 11H3C2.44772 11 2 10.5523 2 10Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z"
+      },
+      child: []
+    }
+  ]
+});
+var listViewLong = GenIcon({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: 'M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4C22 4.55228 21.5523 5 21 5H3C2.44772 5 2 4.55228 2 4Z"'
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 8C2 7.44772 2.44772 7 3 7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H3C2.44772 9 2 8.55228 2 8Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 16C2 15.4477 2.44772 15 3 15H21C21.5523 15 22 15.4477 22 16C22 16.5523 21.5523 17 21 17H3C2.44772 17 2 16.5523 2 16Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M2 20C2 19.4477 2.44772 19 3 19H21C21.5523 19 22 19.4477 22 20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20Z"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1863,7 +2032,9 @@ var customIcons = {
   "yes-no": yesNoIcon,
   "diamond-outline": diamondOutline,
   "diamond-fill": diamondFill,
-  "magic-wand": magicWand
+  "magic-wand": magicWand,
+  "list-view-short": listViewShort,
+  "list-view-long": listViewLong
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -1909,7 +2080,7 @@ var AddListButtonIcon = css9`
 `;
 
 // src/components/AddListButton/AddListButton.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var AddListButton = ({
   buttonText = "Add Item",
   onButtonClick,
@@ -1938,7 +2109,7 @@ var AddListButton = ({
       disabled: disabled2,
       ...buttonProps,
       children: [
-        icon === "math-plus" ? /* @__PURE__ */ jsx8(
+        icon === "math-plus" ? /* @__PURE__ */ jsx9(
           Icon,
           {
             icon: mapIcon[icon],
@@ -1946,7 +2117,7 @@ var AddListButton = ({
             size: "1.25em",
             css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled2, theme)]
           }
-        ) : /* @__PURE__ */ jsx8(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
+        ) : /* @__PURE__ */ jsx9(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
         buttonText
       ]
     }
@@ -1987,7 +2158,7 @@ var commonLineHeight = css10`
 `;
 
 // src/components/Typography/Heading.tsx
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
 var Heading = ({
   level = 2,
   as,
@@ -2005,7 +2176,7 @@ var Heading = ({
     5: h5,
     6: h6
   };
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Heading2,
     {
       ...hAttributes,
@@ -2083,7 +2254,7 @@ var UppercaseText = css11`
 `;
 
 // src/components/Badges/Badge.tsx
-import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
 var Badge = ({
   text,
   theme = "unimportant",
@@ -2104,7 +2275,7 @@ var Badge = ({
     sm: Small,
     base: Base
   };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       css: [
@@ -2121,7 +2292,7 @@ var Badge = ({
 
 // src/components/Typography/Link.tsx
 import { CgExternal } from "@react-icons/all-files/cg/CgExternal";
-import * as React4 from "react";
+import * as React5 from "react";
 
 // src/components/Typography/styles/Link.styles.ts
 import { css as css12 } from "@emotion/react";
@@ -2145,8 +2316,8 @@ var linkColorCurrent = css12`
 `;
 
 // src/components/Typography/Link.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var Link = React4.forwardRef(
+import { jsx as jsx12, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+var Link = React5.forwardRef(
   ({ external, text, linkColor = "default", children, ...props }, ref) => {
     const textColor = {
       currentColor: linkColorCurrent,
@@ -2154,17 +2325,17 @@ var Link = React4.forwardRef(
       destructive: linkColorDestructive
     };
     const externalAttrs = external ? {
-      target: "_blanks",
+      target: "_blank",
       rel: "noreferrer noopener"
     } : {};
-    return /* @__PURE__ */ jsxs4("a", { css: [link, textColor[linkColor]], ...props, ...externalAttrs, ref, children: [
+    return /* @__PURE__ */ jsxs4("a", { css: [link, textColor[linkColor]], ...externalAttrs, ...props, ref, children: [
       text,
-      external ? /* @__PURE__ */ jsx11(Icon, { icon: CgExternal, iconColor: "currentColor", size: 24 }) : null,
+      external ? /* @__PURE__ */ jsx12(Icon, { icon: CgExternal, iconColor: "currentColor", size: 20 }) : null,
       children
     ] });
   }
 );
-var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props, onClick }) }));
+var LinkWithRef = React5.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ jsx12(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx12(Link, { ...props, onClick }) }));
 
 // src/components/Typography/styles/Paragraph.styles.ts
 import { css as css13 } from "@emotion/react";
@@ -2178,7 +2349,7 @@ var paragraph = css13`
 `;
 
 // src/components/Typography/Paragraph.tsx
-import { Fragment as Fragment2, jsx as jsx12 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13 } from "@emotion/react/jsx-runtime";
 import { createElement } from "@emotion/react";
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
@@ -2192,9 +2363,9 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
         dangerouslySetInnerHTML: { __html: html }
       }
     ));
-    return /* @__PURE__ */ jsx12(Fragment2, { children: paragraphContent });
+    return /* @__PURE__ */ jsx13(Fragment2, { children: paragraphContent });
   }
-  return htmlContent ? /* @__PURE__ */ jsx12(
+  return htmlContent ? /* @__PURE__ */ jsx13(
     "p",
     {
       ...pAttributes,
@@ -2202,7 +2373,7 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
       className: typeof className === "string" ? className : "",
       dangerouslySetInnerHTML: { __html: htmlContent }
     }
-  ) : /* @__PURE__ */ jsx12(
+  ) : /* @__PURE__ */ jsx13(
     "p",
     {
       ...pAttributes,
@@ -2261,10 +2432,10 @@ var IntegrationHeaderSectionDocsLink = css14`
 `;
 
 // src/components/Typography/IntegrationHeaderSection.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var IntegrationHeaderSectionHexImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 100 116", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "path",
       {
         d: "M50 2L98.4974 30V86L50 114L1.50258 86V30L50 2Z",
@@ -2273,7 +2444,7 @@ var IntegrationHeaderSectionHexImage = ({ ...props }) => {
         strokeWidth: "2"
       }
     ),
-    /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs5(
       "linearGradient",
       {
         id: "paint0_linear_154_2529",
@@ -2283,8 +2454,8 @@ var IntegrationHeaderSectionHexImage = ({ ...props }) => {
         y2: "6.75894",
         gradientUnits: "userSpaceOnUse",
         children: [
-          /* @__PURE__ */ jsx13("stop", { stopColor: "#1768B2" }),
-          /* @__PURE__ */ jsx13("stop", { offset: "1", stopColor: "#B3EFE4" })
+          /* @__PURE__ */ jsx14("stop", { stopColor: "#1768B2" }),
+          /* @__PURE__ */ jsx14("stop", { offset: "1", stopColor: "#B3EFE4" })
         ]
       }
     ) })
@@ -2305,14 +2476,14 @@ var IntegrationHeaderSection = ({
     /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionContainer, ...props, children: [
       /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleContainer, children: [
         icon ? /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionIconContainer, children: [
-          /* @__PURE__ */ jsx13(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
-          CompIcon ? /* @__PURE__ */ jsx13(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx13("img", { src: icon, alt: title2, css: IntegrationHeaderSectionIcon }) : null
+          /* @__PURE__ */ jsx14(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
+          CompIcon ? /* @__PURE__ */ jsx14(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx14("img", { src: icon, alt: title2, css: IntegrationHeaderSectionIcon }) : null
         ] }) : null,
         /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
-          /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title2 }),
-          badgeText ? /* @__PURE__ */ jsx13(Badge, { text: badgeText }) : null,
-          menu ? /* @__PURE__ */ jsx13("div", { children: menu }) : null,
-          docsLink ? /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14("h1", { css: IntegrationHeaderSectionTitle, children: title2 }),
+          badgeText ? /* @__PURE__ */ jsx14(Badge, { text: badgeText }) : null,
+          menu ? /* @__PURE__ */ jsx14("div", { children: menu }) : null,
+          docsLink ? /* @__PURE__ */ jsx14(
             Link,
             {
               href: docsLink,
@@ -2325,7 +2496,7 @@ var IntegrationHeaderSection = ({
           ) : null
         ] })
       ] }),
-      description ? /* @__PURE__ */ jsx13(
+      description ? /* @__PURE__ */ jsx14(
         Paragraph,
         {
           css: IntegrationHeaderSectionText,
@@ -2407,7 +2578,7 @@ var PageHeaderSectionTitle = css15`
 `;
 
 // src/components/Typography/PageHeaderSection.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var PageHeaderSection = ({
   title: title2,
   desc,
@@ -2424,8 +2595,8 @@ var PageHeaderSection = ({
   return /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionContainer, "data-testid": "page-header", children: [
     /* @__PURE__ */ jsxs6("section", { css: PageHeaderSectionDetails, children: [
       linkText && linkProps && linkManagerComponent ? /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionLinkContainer, children: [
-        /* @__PURE__ */ jsx14(Icon, { icon: CgChevronLeft, size: 18, css: PageHeaderSectionLinkIcon, iconColor: "currentColor" }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(Icon, { icon: CgChevronLeft, size: 18, css: PageHeaderSectionLinkIcon, iconColor: "currentColor" }),
+        /* @__PURE__ */ jsx15(
           LinkWithRef,
           {
             linkManagerComponent,
@@ -2436,10 +2607,10 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx14(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title2 }),
+      /* @__PURE__ */ jsx15(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title2 }),
       desc
     ] }),
-    children ? /* @__PURE__ */ jsx14("div", { css: PageHeaderSectionChildContainer, children }) : null
+    children ? /* @__PURE__ */ jsx15("div", { css: PageHeaderSectionChildContainer, children }) : null
   ] });
 };
 
@@ -2528,7 +2699,7 @@ var InlineAlertParagraph = css16`
 `;
 
 // src/components/Alerts/InlineAlert.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var InlineAlert = ({
   id,
   title: title2,
@@ -2538,9 +2709,9 @@ var InlineAlert = ({
   ...btnProps
 }) => {
   return /* @__PURE__ */ jsxs7("div", { role: "alert", id, css: [InlineAlertContainer, InlineAlertTriangle(arrowPosition), positionCss], children: [
-    /* @__PURE__ */ jsx15("button", { type: "button", "aria-controls": id, title: "close alert", css: InlineAlertCloseBtn, ...btnProps, children: /* @__PURE__ */ jsx15(Icon, { icon: CgClose, iconColor: "currentColor", size: 24 }) }),
-    /* @__PURE__ */ jsx15(Heading, { level: 3, css: InlineAlertTitle, children: title2 }),
-    /* @__PURE__ */ jsx15("p", { css: InlineAlertParagraph, children: text })
+    /* @__PURE__ */ jsx16("button", { type: "button", "aria-controls": id, title: "close alert", css: InlineAlertCloseBtn, ...btnProps, children: /* @__PURE__ */ jsx16(Icon, { icon: CgClose, iconColor: "currentColor", size: 24 }) }),
+    /* @__PURE__ */ jsx16(Heading, { level: 3, css: InlineAlertTitle, children: title2 }),
+    /* @__PURE__ */ jsx16("p", { css: InlineAlertParagraph, children: text })
   ] });
 };
 
@@ -10978,7 +11149,7 @@ var spinner_default = {
 
 // src/components/AnimationFile/AnimationFile.tsx
 import Lottie from "lottie-react";
-import { jsx as jsx16 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx17 } from "@emotion/react/jsx-runtime";
 var AnimationFile = ({
   label,
   loop,
@@ -10987,7 +11158,7 @@ var AnimationFile = ({
   height = "auto",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Lottie,
     {
       role: "graphics-symbol",
@@ -11005,7 +11176,7 @@ var AnimationFile = ({
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import React5 from "react";
+import React6 from "react";
 import {
   Tooltip as ReakitTooltip,
   TooltipArrow,
@@ -11031,7 +11202,7 @@ var TooltipArrowStyles = css17`
 `;
 
 // src/components/Tooltip/Tooltip.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 function Tooltip({
   children,
   title: title2,
@@ -11042,7 +11213,7 @@ function Tooltip({
 }) {
   const tooltip = useTooltipState({ placement });
   return !title2 ? children : /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx17(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React5.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsx18(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React6.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ jsxs8(
       ReakitTooltip,
       {
@@ -11052,7 +11223,7 @@ function Tooltip({
         css: TooltipContainer,
         visible: visible != null ? visible : tooltip.visible,
         children: [
-          /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+          /* @__PURE__ */ jsx18(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
           title2
         ]
       }
@@ -11098,7 +11269,7 @@ var avatarSizeXlStyles = css18`
 `;
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var avatarSizeStylesMap = {
   xs: avatarSizeXsStyles,
   sm: avatarSizeSmStyles,
@@ -11107,8 +11278,8 @@ var avatarSizeStylesMap = {
   xl: avatarSizeXlStyles
 };
 var Avatar = ({ src, label = "", children, size = "md", ...props }) => {
-  return /* @__PURE__ */ jsx18(Tooltip, { title: label, children: /* @__PURE__ */ jsxs9("div", { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
-    !src ? null : /* @__PURE__ */ jsx18("img", { role: "presentation", src, css: avatarImageStyles }),
+  return /* @__PURE__ */ jsx19(Tooltip, { title: label, children: /* @__PURE__ */ jsxs9("div", { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+    !src ? null : /* @__PURE__ */ jsx19("img", { role: "presentation", src, css: avatarImageStyles }),
     children
   ] }) });
 };
@@ -11272,7 +11443,7 @@ var bannerDismissButtonStyles = css21`
 `;
 
 // src/components/Banner/Banner.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props }) => {
   return /* @__PURE__ */ jsxs11(
     "div",
@@ -11282,8 +11453,8 @@ var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props
       "data-type": type,
       ...props,
       children: [
-        /* @__PURE__ */ jsx19("div", { css: bannerContentStyles, children }),
-        !onDismiss ? null : /* @__PURE__ */ jsx19("button", { type: "button", css: bannerDismissButtonStyles, title: "Dismiss banner", onClick: onDismiss, children: /* @__PURE__ */ jsx19(CgClose2, {}) })
+        /* @__PURE__ */ jsx20("div", { css: bannerContentStyles, children }),
+        !onDismiss ? null : /* @__PURE__ */ jsx20("button", { type: "button", css: bannerDismissButtonStyles, title: "Dismiss banner", onClick: onDismiss, children: /* @__PURE__ */ jsx20(CgClose2, {}) })
       ]
     }
   );
@@ -11304,7 +11475,7 @@ var SVGDark = css22`
 `;
 
 // src/components/Brand/UniformBadge.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 var UniformBadge = ({
   theme = "light",
   ...props
@@ -11321,21 +11492,21 @@ var UniformBadge = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "path",
           {
             d: "M19.3444 4.35168L7 11.484V25.7181L19.3444 18.5858L31.6583 11.484L19.3444 4.35168Z",
             fill: "#84ADFF"
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "path",
           {
             d: "M19.3444 32.8505V18.5858L7 25.7182V39.9523L19.3444 47.0846L31.6583 39.9523V25.7182L19.3444 32.8505Z",
             fill: "#5786FF"
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "path",
           {
             d: "M31.6583 11.484L19.3444 18.5858L31.6583 25.7182V39.9523L44.0027 32.8505V18.5858L31.6583 11.484Z",
@@ -11348,12 +11519,12 @@ var UniformBadge = ({
 };
 
 // src/components/Brand/UniformLogo.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var UniformLogo = ({
   theme = "light",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx21("div", { "data-testid": "uniform-Logo", children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx22("div", { "data-testid": "uniform-Logo", children: /* @__PURE__ */ jsxs13(
     "svg",
     {
       width: "153",
@@ -11364,16 +11535,16 @@ var UniformLogo = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ jsx21("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
+        /* @__PURE__ */ jsx22(
           "path",
           {
             d: "M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",
             fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ jsx21("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
+        /* @__PURE__ */ jsx22(
           "path",
           {
             d: "M86.45 12.98h-4.076v14.87h4.076V12.98Zm.146-6.843h-4.371v4.076h4.37V6.137Zm5.861 1.993v4.85h-2.736v3.477h2.736V27.85h4.076V16.457h3.27V12.98h-3.27V9.617h3.27v-3.48h-3.896l-3.45 1.992Zm13.503 4.7-3.45 1.993v11.183l3.45 1.992h6.335l3.45-1.992V14.823l-3.45-1.992h-6.335Zm5.71 11.688h-5.087v-8.21h5.087v8.21Zm12.607-10.315-2.119-1.224h-1.954v14.87h4.076V16.457h5.115V12.98h-2.999l-2.119 1.224ZM71.034 12.83l-2.375 1.373-2.379-1.372h-1.6v15.018h4.075V16.31h5.084v11.54h4.076V14.823l-3.45-1.992h-3.431ZM56.145 24.517h-5.087V12.98h-4.073v13.027l3.45 1.992h3.593l2.111-1.22.003.002.003-.003v.003l2.108 1.218h1.965v-15.02h-4.073v11.538Zm93.68-11.687h-2.855l-2.794 1.604-2.767-1.603h-2.854l-2.111 1.218-2.111-1.218h-1.965v15.018h4.076V16.31h4.343v11.54h4.073V16.31h4.343v11.54h4.073V14.823l-3.451-1.992Z",
@@ -11396,59 +11567,59 @@ var UniformLogoLarge = ({ ...props }) => {
       ...props,
       children: [
         /* @__PURE__ */ jsxs13("g", { clipPath: "url(#clip0)", children: [
-          /* @__PURE__ */ jsx21("path", { d: "M18.3804 0L0 10.6131V31.8393L18.3804 21.2262L36.7654 10.6131L18.3804 0Z", fill: "#7BB3FF" }),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("path", { d: "M18.3804 0L0 10.6131V31.8393L18.3804 21.2262L36.7654 10.6131L18.3804 0Z", fill: "#7BB3FF" }),
+          /* @__PURE__ */ jsx22(
             "path",
             {
               d: "M18.3804 42.4524V21.2262L0 31.8393V53.0655L18.3804 63.6786L36.7654 53.0655V31.8393L18.3804 42.4524Z",
               fill: "#498DFF"
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "path",
             {
               d: "M36.7654 10.6132L18.3804 21.2263L36.7654 31.8394V53.0656L55.1458 42.4525V21.2263L36.7654 10.6132Z",
               fill: "#E61408"
             }
           ),
-          /* @__PURE__ */ jsx21("path", { d: "M141.257 21.2081H134.598V45.5052H141.257V21.2081Z", fill: "currentColor" }),
-          /* @__PURE__ */ jsx21("path", { d: "M141.496 10.0277H134.355V16.6874H141.496V10.0277Z", fill: "currentColor" }),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("path", { d: "M141.257 21.2081H134.598V45.5052H141.257V21.2081Z", fill: "currentColor" }),
+          /* @__PURE__ */ jsx22("path", { d: "M141.496 10.0277H134.355V16.6874H141.496V10.0277Z", fill: "currentColor" }),
+          /* @__PURE__ */ jsx22(
             "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__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "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__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "path",
             {
               d: "M203.067 23.2074L199.605 21.2081H196.412V45.5052H203.072V26.8907H211.429V21.2081H206.53L203.067 23.2074Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "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__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "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__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "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",
@@ -11456,45 +11627,12 @@ var UniformLogoLarge = ({ ...props }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0", children: /* @__PURE__ */ jsx21("rect", { width: "250", height: "63.6786", fill: "currentColor" }) }) })
+        /* @__PURE__ */ jsx22("defs", { children: /* @__PURE__ */ jsx22("clipPath", { id: "clip0", children: /* @__PURE__ */ jsx22("rect", { width: "250", height: "63.6786", fill: "currentColor" }) }) })
       ]
     }
   );
 };
 
-// src/components/Button/Button.tsx
-import * as React6 from "react";
-import { Button as BaseButton } from "reakit/Button";
-import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
-var Button = React6.forwardRef(
-  ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
-    const buttonTheme = {
-      primary: buttonPrimary,
-      primaryInvert: buttonPrimaryInvert,
-      "accent-alt-dark": buttonAccentAltDark,
-      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
-      destructive: buttonDestructive,
-      secondary: buttonSecondary,
-      secondaryInvert: buttonSecondaryInvert,
-      ghost: buttonGhost,
-      ghostDestructive: buttonGhostDestructive,
-      unimportant: buttonUnimportant,
-      ghostUnimportant: buttonGhostUnimportant,
-      tertiary: buttonTertiary,
-      tertiaryOutline: buttonTertiaryOutline
-    };
-    const btnSize = {
-      zero: "padding: 0",
-      xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
-      sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
-      md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
-      lg: "padding: var(--spacing-sm) var(--spacing-base)",
-      xl: "padding: 0.75rem var(--spacing-md)"
-    };
-    return /* @__PURE__ */ jsx22(BaseButton, { ref, css: [button, buttonTheme[buttonType], btnSize[size]], ...props, children });
-  }
-);
-
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 import { CgChevronDown } from "@react-icons/all-files/cg/CgChevronDown";
 import { CgMathPlus as CgMathPlus2 } from "@react-icons/all-files/cg/CgMathPlus";
@@ -11709,6 +11847,7 @@ var Menu = React8.forwardRef(function Menu2({
     /* @__PURE__ */ jsx26(
       BaseMenu,
       {
+        unmountOnHide: true,
         gutter: 0,
         shift: menu.parent ? -4 : 0,
         ...props,
@@ -14126,7 +14265,7 @@ function InputComboBox(props) {
           var _a2, _b;
           return {
             ...base,
-            color: "#828282",
+            color: "var(--typography-base)",
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.singleValue) == null ? void 0 : _b.call(_a2, base, sProps)
           };
         },
@@ -14134,7 +14273,7 @@ function InputComboBox(props) {
           var _a2, _b;
           return {
             ...base,
-            padding: "var(--spacing-base)",
+            padding: "12px var(--spacing-base) 12px var(--spacing-sm)",
             gap: "2px",
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.valueContainer) == null ? void 0 : _b.call(_a2, base, sProps)
           };
@@ -14166,15 +14305,16 @@ function InputComboBox(props) {
             ...base,
             className: "input-combobox-control",
             // Used to provide overriding styles for blue focus ring and offset borders
-            border: state.isFocused ? "1px solid transparent" : "1px solid var(--gray-400)",
+            border: state.isFocused ? "1px solid var(--accent-dark-active)" : "1px solid var(--gray-300)",
             lineHeight: 1.25,
-            outline: state.isFocused ? "1px solid var(--brand-secondary-1)" : "none",
+            outline: "none",
             outlineOffset: 0,
-            minHeight: "58px",
+            minHeight: "48px",
             // matches the min-height of other input fields
-            boxShadow: "none",
+            boxShadow: state.isFocused ? "var(--elevation-100)" : "none",
             "&:hover": {
-              boxShadow: "none"
+              boxShadow: "none",
+              borderColor: "var(--accent-dark-hover)"
             },
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b.call(_a2, base, state)
           };
@@ -14205,7 +14345,7 @@ function InputComboBox(props) {
           var _a2, _b;
           return {
             ...base,
-            color: state.isDisabled ? "var(--gray-500)" : "var(--gray-700)",
+            color: state.isDisabled ? "var(--gray-300)" : "var(--gray-700)",
             backgroundColor: state.isDisabled ? "transparent" : state.isSelected ? "var(--gray-200)" : state.isFocused ? "var(--gray-100)" : "transparent",
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.option) == null ? void 0 : _b.call(_a2, base, state)
           };
@@ -14232,7 +14372,7 @@ function InputComboBox(props) {
             background: "var(--gray-100)",
             ":hover": {
               color: "var(--white)",
-              background: "var(--brand-secondary-5)",
+              background: "var(--action-destructive-default)",
               transition: "color var(--duration-fast) var(--timing-ease-out), background-color var(--duration-fast) var(--timing-ease-out)"
             }
           };
@@ -16014,10 +16154,10 @@ import { useCallback as useCallback4 } from "react";
 
 // src/components/Popover/Popover.tsx
 import {
-  Popover as ReakitPopover,
+  Popover as AriakitPopover,
   PopoverDisclosure,
-  usePopoverState
-} from "reakit/Popover";
+  PopoverProvider
+} from "@ariakit/react";
 
 // src/components/Popover/Popover.styles.ts
 import { css as css71 } from "@emotion/react";
@@ -16060,14 +16200,13 @@ var Popover2 = ({
   testId,
   trigger,
   children,
+  baseId,
   ...otherProps
 }) => {
-  const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs57(PopoverProvider, { placement, children: [
     /* @__PURE__ */ jsx88(
       PopoverDisclosure,
       {
-        ...popover,
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
@@ -16077,7 +16216,7 @@ var Popover2 = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx88(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx88(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
 
@@ -16324,7 +16463,9 @@ var Modal = React19.forwardRef(
       lg: modalSizeLarge
     };
     useShortcut({
-      handler: onRequestClose,
+      handler: () => {
+        onRequestClose();
+      },
       shortcut: "escape"
     });
     useEffect10(() => {
@@ -16338,7 +16479,7 @@ var Modal = React19.forwardRef(
       (_a = dialogRef.current) == null ? void 0 : _a.showModal();
       return () => {
         var _a2;
-        return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
     return /* @__PURE__ */ jsx90(
@@ -16598,7 +16739,7 @@ var input2 = css76`
 
   &:focus,
   &:focus-within {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
     box-shadow: var(--elevation-100);
     border: 1px solid var(--accent-dark-active);
     outline: none;
@@ -16611,7 +16752,7 @@ var input2 = css76`
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -16754,7 +16895,7 @@ var dataConnectButton = css76`
   box-sizing: border-box;
   background-color: var(--white);
   border: 1px solid var(--primary-action-default);
-  border-radius: var(--rounded-md);
+  border-radius: var(--rounded-sm);
   color: var(--primary-action-default);
   display: flex;
   padding: var(--spacing-sm);
@@ -16772,12 +16913,12 @@ var dataConnectButton = css76`
   &:focus,
   &:focus-within {
     outline: 1px solid var(--gray-300);
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
   }
 
   &:disabled:hover,
   &:disabled {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
     pointer-events: none;
@@ -18848,7 +18989,7 @@ var editorInput = css85`
 
   &:focus,
   &:focus-within {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
     box-shadow: var(--elevation-100);
     border: 1px solid var(--accent-dark-hover);
     outline: none;
@@ -19443,47 +19584,41 @@ var SegmentedControl = ({
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
+        var _a;
         if (!option) {
           return null;
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx113(
-          Tooltip,
+        return /* @__PURE__ */ jsx113(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx113("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
+          "label",
           {
-            title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx113("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
-              "label",
-              {
-                css: [
-                  segmentedControlLabelStyles(option.value === value, isDisabled),
-                  sizeStyles,
-                  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
-                ],
-                children: [
-                  /* @__PURE__ */ jsx113(
-                    "input",
-                    {
-                      css: segmentedControlInputStyles,
-                      type: "radio",
-                      name,
-                      value: index,
-                      checked: option.value === value,
-                      onChange: onOptionChange,
-                      disabled: isDisabled
-                    }
-                  ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx113(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx113(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx113("span", { css: segmentedControlLabelTextStyles, children: text })
-                  ] })
-                ]
-              }
-            ) })
-          },
-          JSON.stringify(option.value)
-        );
+            css: [
+              segmentedControlLabelStyles(option.value === value, isDisabled),
+              sizeStyles,
+              isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+            ],
+            children: [
+              /* @__PURE__ */ jsx113(
+                "input",
+                {
+                  css: segmentedControlInputStyles,
+                  type: "radio",
+                  name,
+                  value: index,
+                  checked: option.value === value,
+                  onChange: onOptionChange,
+                  disabled: isDisabled
+                }
+              ),
+              option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx113(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ jsx113(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ jsx113("span", { css: segmentedControlLabelTextStyles, children: text })
+              ] })
+            ]
+          }
+        ) }) }, JSON.stringify(option.value));
       })
     }
   );
@@ -19875,11 +20010,11 @@ var toastContainerStyles = css95`
     cursor: pointer;
   }
   .Toastify__toast-body {
+    display: flex;
+    align-items: flex-start;
     margin: auto 0;
     flex: 1 1 auto;
     padding: var(--spacing-sm);
-    display: flex;
-    align-items: center;
   }
   .Toastify__toast-body > div:last-child {
     word-break: break-word;
@@ -19887,6 +20022,7 @@ var toastContainerStyles = css95`
   }
   .Toastify__toast-icon {
     margin-inline-end: var(--spacing-base);
+    margin-block-start: var(--spacing-2xs);
     width: 16px;
     flex-shrink: 0;
     display: flex;