@strapi/design-system 2.0.0-beta.5 → 2.0.0-rc.7

package/dist/index.js

@@ -25,7 +25,9 @@ const Dialog$1 = require("@radix-ui/react-dialog");
 const ScrollArea = require("@radix-ui/react-scroll-area");
 const number = require("@internationalized/number");
 const Popover$1 = require("@radix-ui/react-popover");
+const Progress = require("@radix-ui/react-progress");
 const RadioGroup = require("@radix-ui/react-radio-group");
+const Switch = require("@radix-ui/react-switch");
 const Tabs$1 = require("@radix-ui/react-tabs");
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -56,7 +58,9 @@ const AlertDialog__namespace = /* @__PURE__ */ _interopNamespace(AlertDialog);
 const Dialog__namespace = /* @__PURE__ */ _interopNamespace(Dialog$1);
 const ScrollArea__namespace = /* @__PURE__ */ _interopNamespace(ScrollArea);
 const Popover__namespace = /* @__PURE__ */ _interopNamespace(Popover$1);
+const Progress__namespace = /* @__PURE__ */ _interopNamespace(Progress);
 const RadioGroup__namespace = /* @__PURE__ */ _interopNamespace(RadioGroup);
+const Switch__namespace = /* @__PURE__ */ _interopNamespace(Switch);
 const Tabs__namespace = /* @__PURE__ */ _interopNamespace(Tabs$1);
 const createContext = (rootComponentName, defaultContext) => {
   const Context = React__namespace.createContext(defaultContext);
@@ -465,25 +469,38 @@ const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item)`
   overflow: hidden;
 
   &:first-child {
-    border-top-left-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
-    border-top-right-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
   }
 
   &:last-child {
-    border-bottom-left-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
-    border-bottom-right-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
+    border-bottom-left-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem;
   }
 
   & + & {
     border-top: ${(props) => props.$size === "S" ? `solid 1px ${props.theme.colors.neutral200}` : "unset"};
   }
 
+  &[data-state='open'] {
+    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+  }
+
   /* This applies our desired focus effect correctly. */
   &:focus-within {
     position: relative;
     z-index: 1;
     box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
   }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: box-shadow ${(props) => props.theme.motion.timings["120"]}
+      ${(props) => props.theme.motion.easings.easeOutQuad};
+  }
 `;
 const Trigger$7 = React__namespace.forwardRef(
   ({ caretPosition = "left", description, icon: Icon, children, ...restProps }, forwardedRef) => {
@@ -499,10 +516,11 @@ const Trigger$7 = React__namespace.forwardRef(
               fontWeight: size === "S" ? "bold" : void 0,
               ellipsis: true,
               variant: size === "M" ? "delta" : void 0,
+              textAlign: "left",
               children
             }
           ),
-          description && size === "M" ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: description }) : null
+          description && size === "M" ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { textAlign: "left", children: description }) : null
         ] })
       ] }),
       caretPosition === "right" ? /* @__PURE__ */ jsxRuntime.jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null
@@ -1166,51 +1184,32 @@ const Base = styledComponents.styled(Flex)`
     `;
 }};
 `;
-const BaseButton = forwardRef(
-  ({ disabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseButtonWrapper,
-      {
-        ref,
-        "aria-disabled": disabled,
-        disabled,
-        tag: "button",
-        type: "button",
-        padding: 2,
-        hasRadius: true,
-        background: "neutral0",
-        borderColor: "neutral200",
-        cursor: "pointer",
-        ...props,
-        children
-      }
-    );
-  }
-);
-const BaseButtonWrapper = styledComponents.styled(Flex)`
-  &[aria-disabled='true'] {
-    pointer-events: none;
-  }
-
-  ${focus}
-`;
-const BaseLink = forwardRef(
-  ({ href, rel = "noreferrer noopener", target = "_self", disabled = false, isExternal = false, ...props }, ref) => {
+const BaseLinkImpl = forwardRef(
+  ({ href, disabled = false, isExternal = false, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Box,
+      BaseLink,
       {
         tag: "a",
         ref,
-        target: isExternal ? "_blank" : target,
-        rel: isExternal ? rel : void 0,
-        href: disabled ? "#" : href,
+        target: isExternal ? "_blank" : void 0,
+        rel: isExternal ? "noreferrer noopener" : void 0,
+        href,
+        tabIndex: disabled ? -1 : void 0,
         "aria-disabled": disabled,
-        cursor: "pointer",
+        pointerEvents: disabled ? "none" : void 0,
+        cursor: disabled ? void 0 : "pointer",
         ...props
       }
     );
   }
 );
+const BaseLink = styledComponents.styled(Box)`
+  text-decoration: none;
+
+  &:visited {
+    color: inherit;
+  }
+`;
 const Divider$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", textColor: "neutral500", children: "/" }) });
 };
@@ -1224,30 +1223,34 @@ const AlignedList = styledComponents.styled(Flex)`
     margin-left: ${({ theme }) => `calc(-1*${theme.spaces[2]})`};
   }
 `;
-const Breadcrumbs = ({ label, children, ...props }) => {
-  const childrenArray = React__namespace.Children.toArray(children);
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-label": label, tag: "nav", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(AlignedList, { tag: "ol", children: React__namespace.Children.map(childrenArray, (child, index) => {
-    const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { inline: true, tag: "li", children: [
-      child,
-      shouldDisplayDivider && /* @__PURE__ */ jsxRuntime.jsx(Divider$1, {})
-    ] });
-  }) }) });
-};
-Breadcrumbs.displayName = "Breadcrumbs";
-const Crumb = ({ children, isCurrent = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-  Typography,
-  {
-    variant: "pi",
-    textColor: "neutral800",
-    fontWeight: isCurrent ? "bold" : "regular",
-    "aria-current": isCurrent,
-    ...props,
-    children
+const Breadcrumbs = React__namespace.forwardRef(
+  ({ label, children, ...props }, forwardedRef) => {
+    const childrenArray = React__namespace.Children.toArray(children);
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-label": label, tag: "nav", ...props, ref: forwardedRef, children: /* @__PURE__ */ jsxRuntime.jsx(AlignedList, { tag: "ol", children: React__namespace.Children.map(childrenArray, (child, index) => {
+      const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;
+      return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { inline: true, tag: "li", children: [
+        child,
+        shouldDisplayDivider && /* @__PURE__ */ jsxRuntime.jsx(Divider$1, {})
+      ] });
+    }) }) });
   }
-) });
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+const Crumb = React__namespace.forwardRef(
+  ({ children, isCurrent = false, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, ref: forwardedRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Typography,
+    {
+      variant: "pi",
+      textColor: "neutral800",
+      fontWeight: isCurrent ? "bold" : "regular",
+      "aria-current": isCurrent,
+      ...props,
+      children
+    }
+  ) })
+);
 Crumb.displayName = "Crumb";
-const StyledLink = styledComponents.styled(BaseLink)`
+const StyledLink = styledComponents.styled(BaseLinkImpl)`
   border-radius: ${({ theme }) => theme.borderRadius};
   color: ${({ theme }) => theme.colors.neutral600};
   font-size: ${({ theme }) => theme.fontSizes[1]};
@@ -1261,9 +1264,22 @@ const StyledLink = styledComponents.styled(BaseLink)`
     color: ${({ theme }) => theme.colors.neutral700};
   }
 `;
-const CrumbLink = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...props, children });
+const CrumbLink = React__namespace.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ref: forwardedRef, ...props, children }));
 CrumbLink.displayName = "CrumbLink";
 const stripReactIdOfColon = (str) => str.replaceAll(":", "");
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+}
+function useComposedRefs(...refs) {
+  return React__namespace.useCallback(composeRefs(...refs), refs);
+}
 const isSSR = () => typeof window === "undefined" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
 const useReactId = React__namespace["useId".toString()] || (() => void 0);
@@ -1313,7 +1329,7 @@ const DANGER = "danger";
 const SUCCESS = "success";
 const GHOST = "ghost";
 const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT];
-const VARIANTS$1 = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
+const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
 const BUTTON_SIZES = ["S", "M", "L"];
 const getVariantColorName = (variant2) => {
   if (variant2 === SUCCESS_LIGHT || variant2 === DANGER_LIGHT) {
@@ -1322,7 +1338,7 @@ const getVariantColorName = (variant2) => {
   if (variant2 === TERTIARY) {
     return "neutral";
   }
-  if (variant2 === DEFAULT || variant2 === SECONDARY || VARIANTS$1.every((vari) => vari !== variant2)) {
+  if (variant2 === DEFAULT || variant2 === SECONDARY || VARIANTS.every((vari) => vari !== variant2)) {
     return "primary";
   }
   return `${variant2}`;
@@ -1332,6 +1348,7 @@ const getDisabledStyle = ({ theme }) => {
     border: 1px solid ${theme.colors.neutral200};
     background: ${theme.colors.neutral150};
     color: ${theme.colors.neutral600};
+    cursor: default;
   `;
 };
 const getHoverStyle = ({ theme, $variant }) => {
@@ -1418,6 +1435,8 @@ const getVariantStyle = ({ theme, $variant }) => {
     }
     default: {
       return styledComponents.css`
+        border: 1px solid ${theme.colors.buttonPrimary600};
+        background: ${theme.colors.buttonPrimary600};
         color: ${theme.colors.buttonNeutral0};
       `;
     }
@@ -1450,21 +1469,22 @@ const Button = forwardRef(
         disabled: isDisabled,
         $size: size,
         $variant: variant2,
+        tag: "button",
         onClick: handleClick,
-        alignItems: "center",
-        background: "buttonPrimary600",
-        borderColor: "buttonPrimary600",
+        hasRadius: true,
         gap: 2,
-        inline: fullWidth,
-        justifyContent: fullWidth ? "center" : void 0,
+        inline: true,
+        alignItems: "center",
+        justifyContent: "center",
+        width: fullWidth ? "100%" : void 0,
         paddingLeft: 4,
         paddingRight: 4,
-        width: fullWidth ? "100%" : void 0,
+        cursor: "pointer",
         ...props,
         children: [
-          (startIcon || loading) && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(LoaderAnimated, {}) : startIcon }),
+          (startIcon || loading) && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", "aria-hidden": true, flex: "1 0 1.2rem", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(LoaderAnimated, {}) : startIcon }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: size === "S" ? "pi" : void 0, fontWeight: "bold", children }),
-          endIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { "aria-hidden": true, children: endIcon })
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", "aria-hidden": true, flex: "1 0 1.2rem", children: endIcon })
         ]
       }
     );
@@ -1482,20 +1502,10 @@ const LoaderAnimated = styledComponents.styled(icons.Loader)`
   animation: ${rotation$2} 2s infinite linear;
   will-change: transform;
 `;
-const ButtonWrapper = styledComponents.styled(BaseButton)`
+const ButtonWrapper = styledComponents.styled(Flex)`
   height: ${({ theme, $size }) => theme.sizes.button[$size]};
-
-  svg {
-    height: 1.2rem;
-  }
-
-  &[aria-disabled='true'] {
-    ${getDisabledStyle}
-
-    &:active {
-      ${getDisabledStyle}
-    }
-  }
+  text-decoration: none;
+  ${getVariantStyle}
 
   &:hover {
     ${getHoverStyle}
@@ -1505,7 +1515,9 @@ const ButtonWrapper = styledComponents.styled(BaseButton)`
     ${getActiveStyle}
   }
 
-  ${getVariantStyle}
+  &[aria-disabled='true'] {
+    ${getDisabledStyle}
+  }
 
   @media (prefers-reduced-motion: no-preference) {
     transition:
@@ -1515,8 +1527,8 @@ const ButtonWrapper = styledComponents.styled(BaseButton)`
   }
 `;
 const Link = forwardRef(
-  ({ children, href, disabled = false, startIcon, endIcon, isExternal = true, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(LinkWrapper$2, { ref, href, disabled, isExternal, ...props, children: [
+  ({ children, href, disabled = false, startIcon, endIcon, isExternal = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(LinkWrapper$1, { ref, href, disabled, isExternal, ...props, children: [
       startIcon,
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { textColor: disabled ? "neutral600" : "primary600", children }),
       endIcon,
@@ -1524,7 +1536,7 @@ const Link = forwardRef(
     ] });
   }
 );
-const LinkWrapper$2 = styledComponents.styled(BaseLink)`
+const LinkWrapper$1 = styledComponents.styled(BaseLinkImpl)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -1540,7 +1552,9 @@ const LinkWrapper$2 = styledComponents.styled(BaseLink)`
   }
 
   &:hover {
-    color: ${({ theme }) => theme.colors.primary500};
+    span {
+      color: ${({ theme }) => theme.colors.primary500};
+    }
   }
 
   &:active {
@@ -1719,37 +1733,41 @@ const Menu = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   SubTrigger,
   Trigger: Trigger$6
 }, Symbol.toStringTag, { value: "Module" }));
-const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
-  const contentRef = React__namespace.useRef(null);
-  const [internalIsOpen, setInternalIsOpen] = React__namespace.useState(false);
-  const handleReachEnd = (entry) => {
-    if (onReachEnd) {
-      onReachEnd(entry);
-    }
-  };
-  const handleOpenChange = (isOpen) => {
-    if (isOpen && typeof onOpen === "function") {
-      onOpen();
-    } else if (!isOpen && typeof onClose === "function") {
-      onClose();
-    }
-    setInternalIsOpen(isOpen);
-  };
-  const generatedId = useId();
-  const intersectionId = `intersection-${stripReactIdOfColon(generatedId)}`;
-  useIntersection(contentRef, handleReachEnd, {
-    selectorToWatch: `#${intersectionId}`,
-    /**
-     * We need to know when the select is open because only then will viewportRef
-     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
-     */
-    skipWhen: !internalIsOpen
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$7, { onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Trigger$6, { ...props, children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$6, { intersectionId, popoverPlacement, children })
-  ] });
-};
+const SimpleMenu = React__namespace.forwardRef(
+  ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }, forwardedRef) => {
+    const triggerRef = React__namespace.useRef(null);
+    const composedRef = useComposedRefs(forwardedRef, triggerRef);
+    const contentRef = React__namespace.useRef(null);
+    const [internalIsOpen, setInternalIsOpen] = React__namespace.useState(false);
+    const handleReachEnd = (entry) => {
+      if (onReachEnd) {
+        onReachEnd(entry);
+      }
+    };
+    const handleOpenChange = (isOpen) => {
+      if (isOpen && typeof onOpen === "function") {
+        onOpen();
+      } else if (!isOpen && typeof onClose === "function") {
+        onClose();
+      }
+      setInternalIsOpen(isOpen);
+    };
+    const generatedId = useId();
+    const intersectionId = `intersection-${stripReactIdOfColon(generatedId)}`;
+    useIntersection(contentRef, handleReachEnd, {
+      selectorToWatch: `#${intersectionId}`,
+      /**
+       * We need to know when the select is open because only then will viewportRef
+       * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+       */
+      skipWhen: !internalIsOpen
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root$7, { onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Trigger$6, { ref: composedRef, ...props, children: props.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(Content$6, { ref: contentRef, intersectionId, popoverPlacement, children })
+    ] });
+  }
+);
 const MenuItem = Item$3;
 const StyledButton = styledComponents.styled(SimpleMenu)`
   padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
@@ -1760,16 +1778,19 @@ const StyledButton = styledComponents.styled(SimpleMenu)`
     background-color: ${({ theme }) => theme.colors.neutral200};
   }
 `;
-const CrumbSimpleMenu = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { endIcon: null, size: "S", ...props, children });
+const CrumbSimpleMenu = React__namespace.forwardRef(
+  ({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ref: forwardedRef, endIcon: null, size: "S", ...props, children })
+);
 CrumbSimpleMenu.displayName = "CrumbSimpleMenu";
 const CardContext = React__namespace.createContext({ id: "" });
 const useCard = () => React__namespace.useContext(CardContext);
-const Card = ({ id, ...props }) => {
+const Card = React__namespace.forwardRef(({ id, ...props }, forwardedRef) => {
   const generatedId = useId(id);
   const context = React__namespace.useMemo(() => ({ id: generatedId }), [generatedId]);
   return /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
+      ref: forwardedRef,
       id,
       tabIndex: 0,
       hasRadius: true,
@@ -1783,10 +1804,10 @@ const Card = ({ id, ...props }) => {
       ...props
     }
   ) });
-};
-const CardActionImpl = ({ position, ...restProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(CardAction, { $position: position, ...restProps, direction: "row", gap: 2 });
-};
+});
+const CardActionImpl = React__namespace.forwardRef(({ position, ...restProps }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(CardAction, { ref: forwardedRef, $position: position, ...restProps, direction: "row", gap: 2 });
+});
 const CardAction = styledComponents.styled(Flex)`
   position: absolute;
   top: ${({ theme }) => theme.spaces[3]};
@@ -1837,19 +1858,6 @@ const CardBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(CardBadgeWrapper, {
 const CardBody = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { ...props, alignItems: "flex-start" }) });
 };
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => refs.forEach((ref) => setRef(ref, node));
-}
-function useComposedRefs(...refs) {
-  return React__namespace.useCallback(composeRefs(...refs), refs);
-}
 const CheckIcon = ({ fill, ...props }) => {
   const { colors } = styledComponents.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1932,10 +1940,10 @@ const CheckboxImpl = React__namespace.forwardRef(({ children, ...restProps }, fo
     /* @__PURE__ */ jsxRuntime.jsx(Typography, { tag: "label", textColor: "neutral800", htmlFor: labelId, children })
   ] });
 });
-const CardCheckbox = (props) => {
+const CardCheckbox = React__namespace.forwardRef((props, forwardedRef) => {
   const { id } = useCard();
-  return /* @__PURE__ */ jsxRuntime.jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { "aria-labelledby": `${id}-title`, ...props }) });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { "aria-labelledby": `${id}-title`, ...props, ref: forwardedRef }) });
+});
 const BreakBox = styledComponents.styled(Box)`
   word-break: break-all;
 `;
@@ -2967,7 +2975,7 @@ lodash.exports;
     }
     var runInContext = function runInContext2(context) {
       context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-      var Array2 = context.Array, Date2 = context.Date, Error2 = context.Error, Function2 = context.Function, Math = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError = context.TypeError;
+      var Array2 = context.Array, Date2 = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -2993,7 +3001,7 @@ lodash.exports;
         }
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date2 && Date2.now !== root.Date.now && Date2.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
-      var nativeCeil = Math.ceil, nativeFloor = Math.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math.max, nativeMin = Math.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math.random, nativeReverse = arrayProto.reverse;
+      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
       var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
       var metaMap = WeakMap && new WeakMap();
       var realNames = {};
@@ -4739,7 +4747,7 @@ lodash.exports;
         return setWrapToString(result2, func, bitmask);
       }
       function createRound(methodName) {
-        var func = Math[methodName];
+        var func = Math2[methodName];
         return function(number2, precision) {
           number2 = toNumber(number2);
           precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
@@ -7862,6 +7870,7 @@ const Input$2 = React__namespace.forwardRef(
     hasError: hasErrorProp,
     required: requiredProp,
     className,
+    size = "M",
     ...props
   }, ref) => {
     const { id, error, hint, name, required } = useField("Input");
@@ -7880,14 +7889,13 @@ const Input$2 = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       InputWrapper,
       {
-        paddingLeft: 3,
-        paddingRight: 3,
-        paddingTop: 2,
-        paddingBottom: 2,
         gap: 2,
         justifyContent: "space-between",
         $hasError: hasError || hasErrorProp,
         $disabled: disabled,
+        $size: size,
+        $hasLeftAction: Boolean(startAction),
+        $hasRightAction: Boolean(endAction),
         className,
         children: [
           startAction,
@@ -7897,13 +7905,12 @@ const Input$2 = React__namespace.forwardRef(
               id,
               name,
               ref,
+              $size: size,
               "aria-describedby": ariaDescription,
               "aria-invalid": hasError || hasErrorProp,
               "aria-disabled": disabled,
               disabled,
               "data-disabled": disabled ? "" : void 0,
-              $hasLeftAction: Boolean(startAction),
-              $hasRightAction: Boolean(endAction),
               onChange: handleChange,
               "aria-required": required || requiredProp,
               ...props
@@ -7928,6 +7935,19 @@ const InputElement = styledComponents.styled.input`
   width: 100%;
   background: inherit;
 
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[1]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[2]};
+        `;
+  }
+}};
+
   ::placeholder {
     color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
@@ -7949,6 +7969,21 @@ const InputWrapper = styledComponents.styled(Flex)`
   background: ${({ theme }) => theme.colors.neutral0};
   ${inputFocusStyle()}
 
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-inline-start: ${props.$hasLeftAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-inline-end: ${props.$hasRightAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-inline-start: ${props.$hasLeftAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-inline-end: ${props.$hasRightAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+        `;
+  }
+}}
+
   ${({ theme, $disabled }) => $disabled ? styledComponents.css`
           color: ${theme.colors.neutral600};
           background: ${theme.colors.neutral150};
@@ -8131,6 +8166,7 @@ const Combobox = React__namespace.forwardRef(
     onLoadMore,
     placeholder = "Select or enter a value",
     required: requiredProp = false,
+    size = "M",
     startIcon,
     textValue,
     value,
@@ -8230,7 +8266,7 @@ const Combobox = React__namespace.forwardRef(
         onFilterValueChange: handleFilterValueChange,
         isPrintableCharacter: isPrintableCharacter2,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Trigger$5, { $hasError: hasError, className, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Trigger$5, { $hasError: hasError, $size: size, className, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
               startIcon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "0 0 1.6rem", tag: "span", "aria-hidden": true, children: startIcon }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -8295,10 +8331,6 @@ const IconBox$3 = styledComponents.styled(Box)`
 const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
   position: relative;
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  padding-right: ${({ theme }) => theme.spaces[3]};
-  padding-left: ${({ theme }) => theme.spaces[3]};
-  padding-top: ${({ theme }) => theme.spaces[2]};
-  padding-bottom: ${({ theme }) => theme.spaces[2]};
   border-radius: ${({ theme }) => theme.borderRadius};
   background: ${({ theme }) => theme.colors.neutral0};
   overflow: hidden;
@@ -8307,6 +8339,23 @@ const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
   justify-content: space-between;
   gap: ${({ theme }) => theme.spaces[4]};
 
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-inline-start: ${({ theme }) => theme.spaces[4]};
+          padding-inline-end: ${({ theme }) => theme.spaces[3]};
+          padding-block: ${({ theme }) => theme.spaces[1]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-inline-start: ${({ theme }) => theme.spaces[4]};
+          padding-inline-end: ${({ theme }) => theme.spaces[3]};
+          padding-block: ${({ theme }) => theme.spaces[2]};
+        `;
+  }
+}}
+
   &[data-disabled] {
     color: ${({ theme }) => theme.colors.neutral600};
     background: ${({ theme }) => theme.colors.neutral150};
@@ -8465,19 +8514,7 @@ const ContentImpl$1 = styledComponents.styled(AlertDialog__namespace.Content)`
   }
 `;
 const Header$1 = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Title$1,
-    {
-      tag: "h2",
-      ref: forwardedRef,
-      padding: 6,
-      justifyContent: "center",
-      variant: "h2",
-      fontWeight: "bold",
-      ...restProps,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Title$1, { tag: "h2", variant: "beta", ref: forwardedRef, padding: 6, fontWeight: "bold", ...restProps, children }) });
 });
 const Title$1 = styledComponents.styled(Typography)`
   display: flex;
@@ -8651,8 +8688,7 @@ ${styledComponents.css`
   img,
   picture,
   video,
-  canvas,
-  svg {
+  canvas {
     display: block;
     max-width: 100%;
   }
@@ -8767,7 +8803,7 @@ const Portal$1 = React__namespace.forwardRef(
 );
 Portal$1.displayName = "Portal";
 const SelectTrigger = React__namespace.forwardRef(
-  ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, ...restProps }, ref) => {
+  ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, size = "M", withTags, ...restProps }, ref) => {
     const triggerRef = React__namespace.useRef(null);
     const handleClearClick = (e) => {
       if (onClear && !disabled) {
@@ -8789,13 +8825,11 @@ const SelectTrigger = React__namespace.forwardRef(
         overflow: "hidden",
         hasRadius: true,
         background: disabled ? "neutral150" : "neutral0",
-        paddingLeft: 3,
-        paddingRight: 3,
-        paddingTop: 2,
-        paddingBottom: 2,
         gap: 4,
         cursor: "default",
         "aria-labelledby": labelNode ? `${id}-label` : void 0,
+        $size: size,
+        $withTags: withTags,
         ...restProps,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
@@ -8840,6 +8874,22 @@ const IconBox$2 = styledComponents.styled(Box)`
 `;
 const StyledTrigger = styledComponents.styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[1]};
+          padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
+          padding-inline-end: ${props.theme.spaces[3]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-block: ${props.$withTags ? "0.3rem" : props.theme.spaces[2]};
+          padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
+          padding-inline-end: ${props.theme.spaces[3]};
+        `;
+  }
+}}
 
   &[aria-disabled='true'] {
     color: ${(props) => props.theme.colors.neutral600};
@@ -8874,8 +8924,7 @@ const SelectContent = styledComponents.styled(uiPrimitives.Select.Content)`
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
   border-radius: ${({ theme }) => theme.borderRadius};
   min-width: var(--radix-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
+  max-height: 15.6rem;
   z-index: ${({ theme }) => theme.zIndices.popover};
 
   @media (prefers-reduced-motion: no-preference) {
@@ -8959,6 +9008,7 @@ const SingleSelect = React__namespace.forwardRef(
     onReachEnd,
     placeholder,
     required: requiredProp,
+    size,
     startIcon,
     value: passedValue,
     ...restProps
@@ -9034,6 +9084,7 @@ const SingleSelect = React__namespace.forwardRef(
               onClear: value && onClear ? handleOnClear : void 0,
               "aria-label": restProps["aria-label"],
               "aria-describedby": ariaDescription ?? restProps["aria-describedby"],
+              size,
               children: /* @__PURE__ */ jsxRuntime.jsx(Value, { placeholder, textColor: value ? "neutral800" : "neutral600", children: value && customizeContent ? customizeContent(value) : void 0 })
             }
           ),
@@ -9050,7 +9101,7 @@ const SingleSelectOption = React__namespace.forwardRef(
   ({ value, startIcon, children, ...restProps }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Item$2, { ref, value: value.toString(), ...restProps, children: [
       startIcon && /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { lineHeight: "20px", children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
     ] });
   }
 );
@@ -9082,6 +9133,7 @@ const DatePicker$1 = React__namespace.forwardRef(
     required: requiredProp = false,
     onClear,
     clearLabel = "Clear",
+    size = "M",
     ...restProps
   }, ref) => {
     const timeZone = date.getLocalTimeZone();
@@ -9192,7 +9244,7 @@ const DatePicker$1 = React__namespace.forwardRef(
         trigger,
         value,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTrigger, { className, hasError, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTrigger, { className, hasError, size, children: [
             /* @__PURE__ */ jsxRuntime.jsx(icons.Calendar, { fill: "neutral500", "aria-hidden": true }),
             /* @__PURE__ */ jsxRuntime.jsx(DatePickerTextInput, { ref, "aria-describedby": ariaDescription, id, name, ...restProps }),
             textValue && onClear ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -9238,7 +9290,7 @@ const makeInitialCalendarDate = ({ currentValue, minDate, maxDate }) => {
 };
 const DATE_PICKER_TRIGGER_NAME = "DatePickerTrigger";
 const DatePickerTrigger = React__namespace.forwardRef(
-  ({ hasError, ...restProps }, forwardedRef) => {
+  ({ hasError, size, ...restProps }, forwardedRef) => {
     const context = useDatePickerContext(DATE_PICKER_TRIGGER_NAME);
     const composedRefs = useComposedRefs(forwardedRef, (node) => context.onTriggerChange(node));
     const handleOpenChange = () => {
@@ -9263,9 +9315,8 @@ const DatePickerTrigger = React__namespace.forwardRef(
           {
             ref: composedRefs,
             $hasError: hasError,
+            $size: size,
             ...restProps,
-            paddingLeft: 3,
-            paddingRight: 3,
             hasRadius: true,
             gap: 3,
             overflow: "hidden",
@@ -9295,7 +9346,20 @@ const DatePickerTrigger = React__namespace.forwardRef(
 );
 const TriggerElement = styledComponents.styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  padding-block: ${({ theme }) => theme.spaces[2]};
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[1]};
+          padding-inline: ${props.theme.spaces[3]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[2]};
+          padding-inline: ${props.theme.spaces[3]};
+        `;
+  }
+}}
 
   & > svg {
     flex: 1 0 auto;
@@ -9912,6 +9976,7 @@ const DateTimePicker = React__namespace.forwardRef(
     step,
     value,
     initialDate,
+    size,
     ...props
   }, forwardedRef) => {
     const DatePickerElement2 = React__namespace.useRef(null);
@@ -9971,6 +10036,7 @@ const DateTimePicker = React__namespace.forwardRef(
         DatePicker,
         {
           ...props,
+          size,
           value: dateValue?.toDate("UTC"),
           onChange: handleDateChange,
           required,
@@ -9984,6 +10050,7 @@ const DateTimePicker = React__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
         TimePicker,
         {
+          size,
           hasError,
           value: timeValue,
           onChange: handleTimeChange,
@@ -10030,30 +10097,27 @@ const EmptyStateIconWrapper = styledComponents.styled(Box)`
     height: 8.8rem;
   }
 `;
-const EmptyStateLayout = ({
-  icon,
-  content,
-  action,
-  hasRadius = true,
-  shadow = "tableShadow"
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Flex,
-    {
-      alignItems: "center",
-      direction: "column",
-      padding: 11,
-      background: "neutral0",
-      hasRadius,
-      shadow,
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "delta", tag: "p", textAlign: "center", textColor: "neutral600", children: content }) }),
-        action
-      ]
-    }
-  );
-};
+const EmptyStateLayout = React__namespace.forwardRef(
+  ({ icon, content, action, hasRadius = true, shadow = "tableShadow" }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Flex,
+      {
+        ref: forwardedRef,
+        alignItems: "center",
+        direction: "column",
+        padding: 11,
+        background: "neutral0",
+        hasRadius,
+        shadow,
+        children: [
+          icon ? /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "delta", tag: "p", textAlign: "center", textColor: "neutral600", children: content }) }),
+          action
+        ]
+      }
+    );
+  }
+);
 const getFocusableNodes = (node, includeNegativeTabIndex) => {
   const nodes = [
     ...node.querySelectorAll(
@@ -10139,7 +10203,7 @@ const Wrapper$1 = styledComponents.styled(Box)`
 const ItemImpl = forwardRef(
   ({ col, s, xs, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(Item$1, { ref: forwardedRef, $col: col, $s: s, $xs: xs, ...props })
 );
-const Item$1 = styledComponents.styled(Box)`
+const Item$1 = styledComponents.styled(Flex)`
   grid-column: span ${({ $col }) => $col ?? 1};
   max-width: 100%;
 
@@ -10156,10 +10220,6 @@ const Grid = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   Item: ItemImpl,
   Root: Root$3
 }, Symbol.toStringTag, { value: "Module" }));
-const VARIANT_DEFAULT = "tertiary";
-const VARIANT_SECONDARY = "secondary";
-const SIZES = ["S", "M", "L"];
-const VARIANTS = [VARIANT_DEFAULT, VARIANT_SECONDARY];
 const IconButton = forwardRef(
   ({
     label,
@@ -10167,8 +10227,8 @@ const IconButton = forwardRef(
     children,
     disabled = false,
     onClick,
-    size = SIZES[0],
-    variant: variant2 = VARIANTS[0],
+    size = "M",
+    variant: variant2 = "tertiary",
     withTooltip = true,
     ...restProps
   }, ref) => {
@@ -10182,7 +10242,11 @@ const IconButton = forwardRef(
       {
         "aria-disabled": disabled,
         background: disabled ? "neutral150" : background,
+        tag: "button",
+        display: "inline-flex",
         justifyContent: "center",
+        hasRadius: true,
+        cursor: "pointer",
         ...restProps,
         ref,
         $size: size,
@@ -10194,43 +10258,56 @@ const IconButton = forwardRef(
     return withTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TooltipImpl, { label, children: component }) : component;
   }
 );
-const IconButtonWrapper = styledComponents.styled(BaseButton)`
-  background-color: ${({ theme, $variant }) => {
-  if ($variant === VARIANT_SECONDARY) {
-    return theme.colors.primary100;
-  }
-  return void 0;
-}};
-  border-color: ${({ theme, $variant }) => {
-  if ($variant === VARIANT_SECONDARY) {
-    return theme.colors.primary200;
-  }
-  return theme.colors.neutral200;
-}};
-  height: ${({ theme, $size }) => theme.sizes.button[$size]};
-  width: ${({ theme, $size }) => theme.sizes.button[$size]};
-  color: ${({ theme, $variant }) => {
-  if ($variant === VARIANT_SECONDARY) {
-    return theme.colors.primary500;
+const IconButtonWrapper = styledComponents.styled(Flex)`
+  text-decoration: none;
+
+  ${(props) => {
+  switch (props.$size) {
+    case "S": {
+      return styledComponents.css`
+          padding-block: 0.6rem;
+          padding-inline: 0.6rem;
+        `;
+    }
+    case "M": {
+      return styledComponents.css`
+          padding-block: 0.9rem;
+          padding-inline: 0.9rem;
+        `;
+    }
+    case "L": {
+      return styledComponents.css`
+          padding-block: 1.1rem;
+          padding-inline: 1.1rem;
+        `;
+    }
   }
-  return theme.colors.neutral500;
-}};
+}}
+  ${getVariantStyle}
+  ${(props) => props.$variant === "tertiary" ? styledComponents.css`
+          color: ${props.theme.colors.neutral600};
+        ` : ""}
 
-  &:hover,
-  &:focus {
-    color: ${({ theme, $variant }) => {
-  if ($variant === VARIANT_SECONDARY) {
-    return theme.colors.primary600;
+  &:hover {
+    ${getHoverStyle}
   }
-  return theme.colors.neutral600;
-}};
+
+  &:active {
+    ${getActiveStyle}
   }
 
   &[aria-disabled='true'] {
-    color: ${({ theme }) => theme.colors.neutral600};
+    ${getDisabledStyle}
   }
-`;
-const IconButtonGroup = styledComponents.styled(Flex)`
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      ${(props) => props.theme.transitions.backgroundColor},
+      ${(props) => props.theme.transitions.color},
+      border-color ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.easeOutQuad};
+  }
+`;
+const IconButtonGroup = styledComponents.styled(Flex)`
   & ${IconButtonWrapper}:first-child {
     border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
   }
@@ -10241,25 +10318,10 @@ const IconButtonGroup = styledComponents.styled(Flex)`
 
   & ${IconButtonWrapper} {
     border-radius: 0;
-    color: ${({ theme }) => theme.colors.neutral700};
 
     & + ${IconButtonWrapper} {
       border-left: none;
     }
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.neutral100};
-      color: ${({ theme }) => theme.colors.neutral800};
-    }
-
-    &:active {
-      background-color: ${({ theme }) => theme.colors.neutral150};
-      color: ${({ theme }) => theme.colors.neutral900};
-    }
-
-    &[aria-disabled='true'] {
-      color: ${({ theme }) => theme.colors.neutral600};
-    }
   }
 `;
 const addMarks = state.StateEffect.define();
@@ -10439,62 +10501,19 @@ const JSONInputContainer = styledComponents.styled(Flex)`
   }
 `;
 const LinkButton = forwardRef(
-  ({ variant: variant2 = "default", startIcon, endIcon, disabled = false, children, size = "S", ...props }, ref) => {
-    const paddingX = size === "S" ? 2 : "10px";
-    const paddingY = 4;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      LinkWrapper$1,
+  ({ disabled, ...restProps }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
       {
         ref,
-        "aria-disabled": disabled,
-        $variant: variant2,
-        background: "buttonPrimary600",
-        borderColor: "buttonPrimary600",
-        hasRadius: true,
-        display: "inline-flex",
-        paddingBottom: paddingX,
-        paddingLeft: paddingY,
-        paddingRight: paddingY,
-        paddingTop: paddingX,
-        pointerEvents: disabled ? "none" : void 0,
-        ...props,
-        children: [
-          startIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { "aria-hidden": true, children: startIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: size === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children }),
-          endIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { "aria-hidden": true, children: endIcon })
-        ]
+        tag: BaseLinkImpl,
+        tabIndex: disabled ? -1 : void 0,
+        disabled,
+        ...restProps
       }
     );
   }
 );
-const LinkWrapper$1 = styledComponents.styled(BaseLink)`
-  gap: ${({ theme }) => theme.spaces[2]};
-
-  ${focus}
-
-  &[aria-disabled='true'] {
-    pointer-events: none;
-  }
-
-  text-decoration: none;
-
-  &[aria-disabled='true'] {
-    ${getDisabledStyle}
-    &:active {
-      ${getDisabledStyle}
-    }
-  }
-
-  &:hover {
-    ${getHoverStyle}
-  }
-
-  &:active {
-    ${getActiveStyle}
-  }
-
-  ${getVariantStyle}
-`;
 const MainWrapper = styledComponents.styled(Box)`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
@@ -10530,6 +10549,7 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
+const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
 const ScrollAreaImpl$1 = React__namespace.forwardRef(
   ({ children, viewportRef, ...restProps }, forwardedRef) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
@@ -10547,7 +10567,7 @@ const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
 `;
 const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
   min-width: 100%;
-  padding-inline-end: 4px;
+  padding-inline: 4px;
 `;
 const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
   display: flex;
@@ -10589,17 +10609,13 @@ const Trigger$2 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
 const Content$2 = React__namespace.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Overlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref: forwardedRef, ...props })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Overlay, { children: /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref: forwardedRef, ...props }) }) });
 });
 const Overlay = styledComponents.styled(Dialog__namespace.Overlay)`
-  background-color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
   position: fixed;
   inset: 0;
   z-index: ${(props) => props.theme.zIndices.overlay};
-  opacity: 0.2;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: ${ANIMATIONS.overlayFadeIn} ${(props) => props.theme.motion.timings["200"]}
@@ -10794,7 +10810,7 @@ const NumberInput = React__namespace.forwardRef(
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
         value: inputValue,
-        endAction: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        endAction: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ArrowButton,
             {
@@ -10828,13 +10844,14 @@ const NumberInput = React__namespace.forwardRef(
 );
 const ArrowButton = styledComponents.styled.button`
   display: flex;
-  height: 1rem;
-  align-items: ${({ $reverse }) => $reverse ? "flex-end" : "flex-start"};
+  justify-content: center;
+  align-items: center;
   transform: translateY(${({ $reverse }) => $reverse ? `-2px` : `2px`});
   cursor: ${({ disabled }) => disabled ? "not-allowed" : void 0};
+  height: 1.1rem;
+
   svg {
-    display: block;
-    height: 0.4rem;
+    width: 1.2rem;
     transform: ${({ $reverse }) => $reverse ? "rotateX(180deg)" : void 0};
   }
 `;
@@ -10897,7 +10914,7 @@ const NextLink = forwardRef(
     ] });
   }
 );
-const LinkWrapper = styledComponents.styled(BaseLink)`
+const LinkWrapper = styledComponents.styled(BaseLinkImpl)`
   padding: ${({ theme }) => theme.spaces[3]};
   border-radius: ${({ theme }) => theme.borderRadius};
   box-shadow: ${({ $active, theme }) => $active ? theme.shadows.filterShadow : void 0};
@@ -10987,19 +11004,22 @@ const PopoverContent = styledComponents.styled(Popover__namespace.Content)`
     }
   }
 `;
-const ScrollAreaImpl = ({ children, intersectionId, onReachEnd, ...props }) => {
-  const popoverRef = React__namespace.useRef(null);
-  const generatedIntersectionId = useId();
-  useIntersection(popoverRef, onReachEnd ?? (() => {
-  }), {
-    selectorToWatch: `#${stripReactIdOfColon(generatedIntersectionId)}`,
-    skipWhen: !intersectionId || !onReachEnd
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverScrollArea, { ref: popoverRef, ...props, children: [
-    children,
-    intersectionId && onReachEnd && /* @__PURE__ */ jsxRuntime.jsx(Box, { id: stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" })
-  ] });
-};
+const ScrollAreaImpl = React__namespace.forwardRef(
+  ({ children, intersectionId, onReachEnd, ...props }, forwardedRef) => {
+    const popoverRef = React__namespace.useRef(null);
+    const composedRef = useComposedRefs(popoverRef, forwardedRef);
+    const generatedIntersectionId = useId();
+    useIntersection(popoverRef, onReachEnd ?? (() => {
+    }), {
+      selectorToWatch: `#${stripReactIdOfColon(generatedIntersectionId)}`,
+      skipWhen: !intersectionId || !onReachEnd
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(PopoverScrollArea, { ref: composedRef, ...props, children: [
+      children,
+      intersectionId && onReachEnd && /* @__PURE__ */ jsxRuntime.jsx(Box, { id: stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" })
+    ] });
+  }
+);
 const PopoverScrollArea = styledComponents.styled(ScrollAreaImpl$1)`
   height: 20rem;
 `;
@@ -11010,36 +11030,34 @@ const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   ScrollArea: ScrollAreaImpl,
   Trigger: Trigger$1
 }, Symbol.toStringTag, { value: "Module" }));
-const ProgressbarBase = styledComponents.styled(Box)`
-  &:before {
-    background-color: ${({ theme }) => theme.colors.neutral0};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    bottom: 0;
-    content: '';
-    position: absolute;
-    top: 0;
-    width: ${({ $value }) => `${$value}%`};
+const ProgressBar = React__namespace.forwardRef(
+  ({ size = "M", value, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ProgressRoot, { ref: forwardedRef, $size: size, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { style: { transform: `translate3D(-${100 - (value ?? 0)}%, 0, 0)` } }) });
+  }
+);
+const ProgressRoot = styledComponents.styled(Progress__namespace.Root)`
+  position: relative;
+  overflow: hidden;
+  width: ${(props) => props.$size === "S" ? "7.8rem" : "10.2rem"};
+  height: ${(props) => props.$size === "S" ? "0.4rem" : "0.8rem"};
+  background-color: ${(props) => props.theme.colors.neutral600};
+  border-radius: ${(props) => props.theme.borderRadius};
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+`;
+const ProgressIndicator = styledComponents.styled(Progress__namespace.Indicator)`
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  width: 100%;
+  height: 100%;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform ${(props) => props.theme.motion.timings["320"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const ProgressBar = ({ min = 0, max = 100, value = 0, children, size = "M", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ProgressbarBase,
-    {
-      background: "neutral600",
-      hasRadius: true,
-      "aria-label": children,
-      "aria-valuemax": max,
-      "aria-valuemin": min,
-      "aria-valuenow": value,
-      height: size === "S" ? 1 : 2,
-      position: "relative",
-      role: "progressbar",
-      $value: value,
-      width: size === "S" ? "78px" : "102px",
-      ...props
-    }
-  );
-};
 const Group = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { ref: forwardedRef, ...props });
 });
@@ -11133,172 +11151,171 @@ const RawTableContext = React__namespace.createContext({
   }
 });
 const useTable = () => React__namespace.useContext(RawTableContext);
-const RawTable = ({
-  colCount,
-  rowCount,
-  jumpStep = 3,
-  initialCol = 0,
-  initialRow = 0,
-  ...props
-}) => {
-  const tableRef = React__namespace.useRef(null);
-  const mountedRef = React__namespace.useRef(false);
-  const [rowIndex, setRowIndex] = React__namespace.useState(initialRow);
-  const [colIndex, setColIndex] = React__namespace.useState(initialCol);
-  const setTableValues = React__namespace.useCallback(({ colIndex: colIndex2, rowIndex: rowIndex2 }) => {
-    setColIndex(colIndex2);
-    setRowIndex(rowIndex2);
-  }, []);
-  React__namespace.useEffect(() => {
-    if (mountedRef.current) {
-      focusFocusable(tableRef.current);
-    }
-    if (!mountedRef.current) {
-      mountedRef.current = true;
-    }
-  }, [colIndex, rowIndex]);
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case KeyboardKeys.RIGHT: {
-        e.preventDefault();
-        setColIndex((prevColIndex) => prevColIndex < colCount - 1 ? prevColIndex + 1 : prevColIndex);
-        break;
-      }
-      case KeyboardKeys.LEFT: {
-        e.preventDefault();
-        setColIndex((prevColIndex) => prevColIndex > 0 ? prevColIndex - 1 : prevColIndex);
-        break;
-      }
-      case KeyboardKeys.UP: {
-        e.preventDefault();
-        setRowIndex((prevRowIndex) => prevRowIndex > 0 ? prevRowIndex - 1 : prevRowIndex);
-        break;
+const RawTable = React__namespace.forwardRef(
+  ({ colCount, rowCount, jumpStep = 3, initialCol = 0, initialRow = 0, ...props }, forwardedRef) => {
+    const tableRef = React__namespace.useRef(null);
+    const mountedRef = React__namespace.useRef(false);
+    const composedRef = useComposedRefs(tableRef, forwardedRef);
+    const [rowIndex, setRowIndex] = React__namespace.useState(initialRow);
+    const [colIndex, setColIndex] = React__namespace.useState(initialCol);
+    const setTableValues = React__namespace.useCallback(({ colIndex: colIndex2, rowIndex: rowIndex2 }) => {
+      setColIndex(colIndex2);
+      setRowIndex(rowIndex2);
+    }, []);
+    React__namespace.useEffect(() => {
+      if (mountedRef.current) {
+        focusFocusable(tableRef.current);
       }
-      case KeyboardKeys.DOWN: {
-        e.preventDefault();
-        setRowIndex((prevRowIndex) => prevRowIndex < rowCount - 1 ? prevRowIndex + 1 : prevRowIndex);
-        break;
+      if (!mountedRef.current) {
+        mountedRef.current = true;
       }
-      case KeyboardKeys.HOME: {
-        e.preventDefault();
-        if (e.ctrlKey) {
-          setRowIndex(0);
+    }, [colIndex, rowIndex]);
+    const handleKeyDown = (e) => {
+      switch (e.key) {
+        case KeyboardKeys.RIGHT: {
+          e.preventDefault();
+          setColIndex((prevColIndex) => prevColIndex < colCount - 1 ? prevColIndex + 1 : prevColIndex);
+          break;
         }
-        setColIndex(0);
-        break;
-      }
-      case KeyboardKeys.END: {
-        e.preventDefault();
-        if (e.ctrlKey) {
-          setRowIndex(rowCount - 1);
+        case KeyboardKeys.LEFT: {
+          e.preventDefault();
+          setColIndex((prevColIndex) => prevColIndex > 0 ? prevColIndex - 1 : prevColIndex);
+          break;
+        }
+        case KeyboardKeys.UP: {
+          e.preventDefault();
+          setRowIndex((prevRowIndex) => prevRowIndex > 0 ? prevRowIndex - 1 : prevRowIndex);
+          break;
+        }
+        case KeyboardKeys.DOWN: {
+          e.preventDefault();
+          setRowIndex((prevRowIndex) => prevRowIndex < rowCount - 1 ? prevRowIndex + 1 : prevRowIndex);
+          break;
+        }
+        case KeyboardKeys.HOME: {
+          e.preventDefault();
+          if (e.ctrlKey) {
+            setRowIndex(0);
+          }
+          setColIndex(0);
+          break;
+        }
+        case KeyboardKeys.END: {
+          e.preventDefault();
+          if (e.ctrlKey) {
+            setRowIndex(rowCount - 1);
+          }
+          setColIndex(colCount - 1);
+          break;
+        }
+        case KeyboardKeys.PAGE_DOWN: {
+          e.preventDefault();
+          setRowIndex((prevRowIndex) => prevRowIndex + jumpStep < rowCount ? prevRowIndex + jumpStep : rowCount - 1);
+          break;
+        }
+        case KeyboardKeys.PAGE_UP: {
+          e.preventDefault();
+          setRowIndex((prevRowIndex) => prevRowIndex - jumpStep > 0 ? prevRowIndex - jumpStep : 0);
+          break;
         }
-        setColIndex(colCount - 1);
-        break;
       }
-      case KeyboardKeys.PAGE_DOWN: {
-        e.preventDefault();
-        setRowIndex((prevRowIndex) => prevRowIndex + jumpStep < rowCount ? prevRowIndex + jumpStep : rowCount - 1);
-        break;
+    };
+    const context = React__namespace.useMemo(() => ({ rowIndex, colIndex, setTableValues }), [colIndex, rowIndex, setTableValues]);
+    return /* @__PURE__ */ jsxRuntime.jsx(RawTableContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      {
+        role: "grid",
+        ref: composedRef,
+        "aria-rowcount": rowCount,
+        "aria-colcount": colCount,
+        onKeyDown: handleKeyDown,
+        ...props
       }
-      case KeyboardKeys.PAGE_UP: {
-        e.preventDefault();
-        setRowIndex((prevRowIndex) => prevRowIndex - jumpStep > 0 ? prevRowIndex - jumpStep : 0);
-        break;
+    ) });
+  }
+);
+const RawTd = React__namespace.forwardRef(
+  ({ coords = { col: 0, row: 0 }, tag = "td", ...props }, forwardedRef) => {
+    const tdRef = React__namespace.useRef(null);
+    const composedRef = useComposedRefs(forwardedRef, tdRef);
+    const { rowIndex, colIndex, setTableValues } = useTable();
+    const [isActive, setIsActive] = React__namespace.useState(false);
+    const handleKeyDown = (e) => {
+      const focusableNodes = getFocusableNodes(tdRef.current, true);
+      if (focusableNodes.length === 0 || focusableNodes.length === 1 && getFocusableNodesWithKeyboardNav(focusableNodes).length === 0) {
+        return;
       }
-    }
-  };
-  const context = React__namespace.useMemo(() => ({ rowIndex, colIndex, setTableValues }), [colIndex, rowIndex, setTableValues]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RawTableContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "table",
-    {
-      role: "grid",
-      ref: tableRef,
-      "aria-rowcount": rowCount,
-      "aria-colcount": colCount,
-      onKeyDown: handleKeyDown,
-      ...props
-    }
-  ) });
-};
-const RawTd = ({ coords = { col: 0, row: 0 }, tag = "td", ...props }) => {
-  const tdRef = React__namespace.useRef(null);
-  const { rowIndex, colIndex, setTableValues } = useTable();
-  const [isActive, setIsActive] = React__namespace.useState(false);
-  const handleKeyDown = (e) => {
-    const focusableNodes = getFocusableNodes(tdRef.current, true);
-    if (focusableNodes.length === 0 || focusableNodes.length === 1 && getFocusableNodesWithKeyboardNav(focusableNodes).length === 0) {
-      return;
-    }
-    if (focusableNodes.length > 1 && !focusableNodes.find((node) => node.tagName !== "BUTTON")) {
-      e.preventDefault();
-      const focussedButtonIndex = focusableNodes.findIndex((node) => node === document.activeElement);
-      if (e.key === KeyboardKeys.RIGHT) {
-        const nextNode = focusableNodes[focussedButtonIndex + 1];
-        if (nextNode) {
-          e.stopPropagation();
-          nextNode.focus();
-        }
-      } else if (e.key === KeyboardKeys.LEFT) {
-        const nextNode = focusableNodes[focussedButtonIndex - 1];
-        if (nextNode) {
-          e.stopPropagation();
-          nextNode.focus();
+      if (focusableNodes.length > 1 && !focusableNodes.find((node) => node.tagName !== "BUTTON")) {
+        e.preventDefault();
+        const focussedButtonIndex = focusableNodes.findIndex((node) => node === document.activeElement);
+        if (e.key === KeyboardKeys.RIGHT) {
+          const nextNode = focusableNodes[focussedButtonIndex + 1];
+          if (nextNode) {
+            e.stopPropagation();
+            nextNode.focus();
+          }
+        } else if (e.key === KeyboardKeys.LEFT) {
+          const nextNode = focusableNodes[focussedButtonIndex - 1];
+          if (nextNode) {
+            e.stopPropagation();
+            nextNode.focus();
+          }
         }
-      }
-      return;
-    }
-    const isEnterKey = e.key === KeyboardKeys.ENTER;
-    if (isEnterKey && !isActive) {
-      setIsActive(true);
-    } else if ((e.key === KeyboardKeys.ESCAPE || isEnterKey) && isActive) {
-      if (isEnterKey && document.activeElement?.tagName === "A") {
         return;
       }
-      setIsActive(false);
-      tdRef.current.focus();
-    } else if (isActive) {
-      e.stopPropagation();
-    }
-  };
-  const isFocused = rowIndex === coords.row - 1 && colIndex === coords.col - 1;
-  useIsomorphicLayoutEffect(() => {
-    const focusableNodes = getFocusableNodes(tdRef.current, true);
-    if (focusableNodes.length === 0 || focusableNodes.length === 1 && getFocusableNodesWithKeyboardNav(focusableNodes).length !== 0 || focusableNodes.length > 1 && Boolean(focusableNodes.find((node) => node.tagName !== "BUTTON"))) {
-      tdRef.current.setAttribute("tabIndex", !isActive && isFocused ? "0" : "-1");
-      focusableNodes.forEach((node, index) => {
-        node.setAttribute("tabIndex", isActive ? "0" : "-1");
-        if (isActive && index === 0) {
-          node.focus();
+      const isEnterKey = e.key === KeyboardKeys.ENTER;
+      if (isEnterKey && !isActive) {
+        setIsActive(true);
+      } else if ((e.key === KeyboardKeys.ESCAPE || isEnterKey) && isActive) {
+        if (isEnterKey && document.activeElement?.tagName === "A") {
+          return;
         }
-      });
-    } else {
+        setIsActive(false);
+        tdRef.current.focus();
+      } else if (isActive) {
+        e.stopPropagation();
+      }
+    };
+    const isFocused = rowIndex === coords.row - 1 && colIndex === coords.col - 1;
+    useIsomorphicLayoutEffect(() => {
+      const focusableNodes = getFocusableNodes(tdRef.current, true);
+      if (focusableNodes.length === 0 || focusableNodes.length === 1 && getFocusableNodesWithKeyboardNav(focusableNodes).length !== 0 || focusableNodes.length > 1 && Boolean(focusableNodes.find((node) => node.tagName !== "BUTTON"))) {
+        tdRef.current.setAttribute("tabIndex", !isActive && isFocused ? "0" : "-1");
+        focusableNodes.forEach((node, index) => {
+          node.setAttribute("tabIndex", isActive ? "0" : "-1");
+          if (isActive && index === 0) {
+            node.focus();
+          }
+        });
+      } else {
+        focusableNodes.forEach((node) => {
+          node.setAttribute("tabIndex", isFocused ? "0" : "-1");
+        });
+      }
+    }, [isActive, isFocused]);
+    const handleFocusableNodeFocus = React__namespace.useCallback(() => {
+      const focusableNodes = getFocusableNodes(tdRef.current, true);
+      if (focusableNodes.length >= 1 && (getFocusableNodesWithKeyboardNav(focusableNodes).length !== 0 || !focusableNodes.find((node) => node.tagName !== "BUTTON"))) {
+        setIsActive(true);
+      }
+      setTableValues({ rowIndex: coords.row - 1, colIndex: coords.col - 1 });
+    }, [coords, setTableValues]);
+    useIsomorphicLayoutEffect(() => {
+      const cell = tdRef.current;
+      const focusableNodes = getFocusableNodes(cell, true);
       focusableNodes.forEach((node) => {
-        node.setAttribute("tabIndex", isFocused ? "0" : "-1");
+        node.addEventListener("focus", handleFocusableNodeFocus);
       });
-    }
-  }, [isActive, isFocused]);
-  const handleFocusableNodeFocus = React__namespace.useCallback(() => {
-    const focusableNodes = getFocusableNodes(tdRef.current, true);
-    if (focusableNodes.length >= 1 && (getFocusableNodesWithKeyboardNav(focusableNodes).length !== 0 || !focusableNodes.find((node) => node.tagName !== "BUTTON"))) {
-      setIsActive(true);
-    }
-    setTableValues({ rowIndex: coords.row - 1, colIndex: coords.col - 1 });
-  }, [coords, setTableValues]);
-  useIsomorphicLayoutEffect(() => {
-    const cell = tdRef.current;
-    const focusableNodes = getFocusableNodes(cell, true);
-    focusableNodes.forEach((node) => {
-      node.addEventListener("focus", handleFocusableNodeFocus);
-    });
-    return () => {
-      const focusableNodes2 = getFocusableNodes(cell, true);
-      focusableNodes2.forEach((node) => {
-        node.removeEventListener("focus", handleFocusableNodeFocus);
-      });
-    };
-  }, [handleFocusableNodeFocus]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "gridcell", tag, ref: tdRef, onKeyDown: handleKeyDown, ...props });
-};
+      return () => {
+        const focusableNodes2 = getFocusableNodes(cell, true);
+        focusableNodes2.forEach((node) => {
+          node.removeEventListener("focus", handleFocusableNodeFocus);
+        });
+      };
+    }, [handleFocusableNodeFocus]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "gridcell", tag, ref: composedRef, onKeyDown: handleKeyDown, ...props });
+  }
+);
 const RawTh = (props) => /* @__PURE__ */ jsxRuntime.jsx(RawTd, { ...props, tag: "th" });
 const RawThead = ({ children, ...props }) => {
   const childrenClone = React__namespace.Children.toArray(children).map((child) => {
@@ -11349,14 +11366,18 @@ const SearchbarWrapper = styledComponents.styled.div`
   &:focus-within {
     ${SearchIcon} {
       fill: ${({ theme }) => theme.colors.primary600};
-      path {
-      }
     }
   }
 `;
 const SearchbarInput = styledComponents.styled(Input$2)`
   border: 1px solid transparent;
 
+  &:hover {
+    button {
+      cursor: pointer;
+    }
+  }
+
   ${inputFocusStyle()}
 `;
 const Searchbar = React__namespace.forwardRef(
@@ -11376,7 +11397,17 @@ const Searchbar = React__namespace.forwardRef(
           ref: actualRef,
           value,
           startAction: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { "aria-hidden": true }),
-          endAction: isCompleting ? /* @__PURE__ */ jsxRuntime.jsx(Action$1, { label: clearLabel, onClick: handleClear, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) }) : void 0,
+          endAction: isCompleting ? /* @__PURE__ */ jsxRuntime.jsx(
+            Action$1,
+            {
+              label: clearLabel,
+              onClick: handleClear,
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+            }
+          ) : void 0,
           ...props
         }
       )
@@ -11384,47 +11415,60 @@ const Searchbar = React__namespace.forwardRef(
   }
 );
 const SearchForm = (props) => /* @__PURE__ */ jsxRuntime.jsx("form", { ...props, role: "search" });
-const Tag = ({ children, icon, disabled = false, onClick, ...props }) => {
+const ButtonBox$1 = styledComponents.styled(Box)`
+  display: inline-flex;
+  border: none;
+
+  & > svg {
+    height: 0.8rem;
+    width: 0.8rem;
+  }
+
+  & > svg path {
+    fill: ${({ theme, ...p }) => p["aria-disabled"] ? theme.colors.neutral600 : theme.colors.primary600};
+  }
+
+  &:hover {
+    cursor: ${({ $iconAction }) => $iconAction ? "pointer" : "initial"};
+  }
+`;
+const Tag = ({ children, icon, label, disabled = false, onClick, ...props }) => {
   const handleClick = (e) => {
     if (disabled || !onClick)
       return;
     onClick(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    TagWrapper,
+    Flex,
     {
-      tag: "button",
+      inline: true,
       background: disabled ? "neutral200" : "primary100",
       color: disabled ? "neutral700" : "primary600",
       paddingLeft: 3,
-      paddingRight: 3,
-      onClick: handleClick,
-      "aria-disabled": disabled,
-      disabled,
-      borderWidth: "1px",
-      borderStyle: "solid",
+      paddingRight: 1,
       borderColor: disabled ? "neutral300" : "primary200",
       hasRadius: true,
       height: "3.2rem",
-      gap: 2,
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(TagText, { $disabled: disabled, variant: "pi", fontWeight: "bold", children }),
-        icon
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonBox$1,
+          {
+            tag: "button",
+            disabled,
+            "aria-disabled": disabled,
+            "aria-label": label,
+            padding: 2,
+            onClick: handleClick,
+            $iconAction: !!onClick,
+            children: icon
+          }
+        )
       ]
     }
   );
 };
-const TagWrapper = styledComponents.styled(Flex)`
-  & > svg {
-    height: 0.8rem;
-    width: 0.8rem;
-  }
-
-  & > svg path {
-    fill: ${({ theme, ...p }) => p["aria-disabled"] ? theme.colors.neutral600 : theme.colors.primary600};
-  }
-`;
 const TagText = styledComponents.styled(Typography)`
   color: inherit;
   border-right: 1px solid ${({ theme, $disabled }) => $disabled ? theme.colors.neutral300 : theme.colors.primary200};
@@ -11445,6 +11489,7 @@ const MultiSelect = React__namespace.forwardRef(
     onReachEnd,
     placeholder,
     required: requiredProp,
+    size,
     startIcon,
     value: passedValue,
     withTags,
@@ -11528,7 +11573,8 @@ const MultiSelect = React__namespace.forwardRef(
               disabled,
               clearLabel,
               onClear: value?.length ? onClear : void 0,
-              paddingLeft: withTags && value?.length ? 1 : 3,
+              withTags: Boolean(withTags && (value?.length ?? 0 > 0)),
+              size,
               children: /* @__PURE__ */ jsxRuntime.jsx(Value, { placeholder, textColor: value?.length ? "neutral800" : "neutral600", children: value?.length ? withTags ? renderTags : customizeContent ? customizeContent(value) : void 0 : void 0 })
             }
           ),
@@ -11691,7 +11737,7 @@ const SubNavHeader = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", alignItems: "flex-start", paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "beta", tag, children: label }),
       searchable && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}) })
     ] }),
@@ -11720,7 +11766,13 @@ const SubNavLink = forwardRef(
     );
   }
 );
-const SubNavLinkWrapper = styledComponents.styled(BaseLink)`
+const CustomBullet = styledComponents.styled.span`
+  width: 0.4rem;
+  height: 0.4rem;
+  background-color: ${({ theme, $active }) => $active ? theme.colors.primary600 : theme.colors.neutral600};
+  border-radius: 50%;
+`;
+const SubNavLinkWrapper = styledComponents.styled(BaseLinkImpl)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -11739,18 +11791,16 @@ const SubNavLinkWrapper = styledComponents.styled(BaseLink)`
         font-weight: 500;
       `;
 }}
+
+    ${CustomBullet} {
+      background-color: ${({ theme }) => theme.colors.primary600};
+    }
   }
 
   &:focus-visible {
     outline-offset: -2px;
   }
 `;
-const CustomBullet = styledComponents.styled.span`
-  width: 0.4rem;
-  height: 0.4rem;
-  background-color: ${({ theme, $active }) => $active ? theme.colors.primary600 : theme.colors.neutral600};
-  border-radius: 50%;
-`;
 const IconWrapper = styledComponents.styled.div`
   svg {
     height: 1.6rem;
@@ -11881,70 +11931,84 @@ const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props })
     }
   ) });
 };
-const Switch = React__namespace.forwardRef(
-  ({ label, onChange, onLabel = "On", offLabel = "Off", selected, visibleLabels = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SwitchButton,
-      {
-        ref,
-        role: "switch",
-        "aria-checked": selected,
-        "aria-label": label,
-        onClick: onChange,
-        type: "button",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(SwitchContent, { $visibleLabels: visibleLabels, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: onLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: offLabel })
-          ] }),
-          visibleLabels && /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, paddingLeft: 2, color: selected ? "success600" : "danger600", children: selected ? onLabel : offLabel })
-        ] })
-      }
-    );
+const SwitchImpl = React__namespace.forwardRef(
+  ({
+    visibleLabels,
+    onLabel = "On",
+    offLabel = "Off",
+    onCheckedChange: onCheckedChangeProp,
+    checked: checkedProp,
+    defaultChecked,
+    disabled,
+    ...restProps
+  }, forwardedRef) => {
+    const [internalChecked, setInternalChecked] = useControllableState$1({
+      prop: checkedProp,
+      defaultProp: defaultChecked
+    });
+    const handleCheckChange = (checked) => {
+      setInternalChecked(checked);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchRoot,
+        {
+          ref: forwardedRef,
+          onCheckedChange: uiPrimitives.composeEventHandlers(onCheckedChangeProp, handleCheckChange),
+          checked: internalChecked,
+          disabled,
+          ...restProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(SwitchThumb, {})
+        }
+      ),
+      visibleLabels ? /* @__PURE__ */ jsxRuntime.jsx(LabelTypography, { "aria-hidden": true, "data-disabled": disabled, "data-state": internalChecked ? "checked" : "unchecked", children: internalChecked ? onLabel : offLabel }) : null
+    ] });
   }
 );
-const SwitchContent = styledComponents.styled.div`
-  background: ${({ theme }) => theme.colors.danger500};
-  border: none;
-  border-radius: 16px;
-  position: relative;
-  height: 2.4rem;
+const SwitchRoot = styledComponents.styled(Switch__namespace.Root)`
   width: 4rem;
+  height: 2.4rem;
+  border-radius: 1.2rem;
+  background-color: ${({ theme }) => theme.colors.danger500};
 
-  & > span {
-    font-size: ${({ $visibleLabels }) => $visibleLabels ? "1rem" : 0};
+  &[data-state='checked'] {
+    background-color: ${({ theme }) => theme.colors.success500};
   }
 
-  &:before {
-    content: '';
-    background: ${({ theme }) => theme.colors.neutral0};
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    position: absolute;
-    transition: all 0.5s;
-    left: ${({ theme }) => theme.spaces[1]};
-    top: ${({ theme }) => theme.spaces[1]};
+  &[data-disabled] {
+    background-color: ${({ theme }) => theme.colors.neutral300};
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    &:before {
-      transition: none;
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    transition: ${(props) => props.theme.transitions.backgroundColor};
   }
 `;
-const SwitchButton = styledComponents.styled.button`
-  background: transparent;
-  padding: 0;
-  border: none;
+const SwitchThumb = styledComponents.styled(Switch__namespace.Thumb)`
+  display: block;
+  height: 1.6rem;
+  width: 1.6rem;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  transform: translateX(4px);
+
+  &[data-state='checked'] {
+    transform: translateX(20px);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform ${(props) => props.theme.motion.timings["120"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
+`;
+const LabelTypography = styledComponents.styled(Typography)`
+  color: ${(props) => props.theme.colors.danger600};
 
-  &[aria-checked='true'] ${SwitchContent} {
-    background: ${({ theme }) => theme.colors.success500};
+  &[data-state='checked'] {
+    color: ${(props) => props.theme.colors.success600};
   }
 
-  &[aria-checked='true'] ${SwitchContent}:before {
-    transform: translateX(1rem);
+  &[data-disabled='true'] {
+    color: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const [TabsProvider, useTabs] = createContext("Tabs");
@@ -12114,7 +12178,7 @@ const TableBox = styledComponents.styled(Box)`
 const ScrollContainer = styledComponents.styled(Box)`
   overflow-x: auto;
 `;
-const Table = ({ footer, ...props }) => {
+const Table = React__namespace.forwardRef(({ footer, ...props }, forwardedRef) => {
   const tableRef = React__namespace.useRef(null);
   const [overflowing, setOverflowing] = React__namespace.useState();
   const handleScroll = (e) => {
@@ -12137,10 +12201,10 @@ const Table = ({ footer, ...props }) => {
     }
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(TableContainer, { shadow: "tableShadow", hasRadius: true, background: "neutral0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TableBox, { $overflowing: overflowing, position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer, { ref: tableRef, onScroll: handleScroll, paddingLeft: 6, paddingRight: 6, children: /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { ...props }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableBox, { $overflowing: overflowing, position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer, { ref: tableRef, onScroll: handleScroll, paddingLeft: 6, paddingRight: 6, children: /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { ref: forwardedRef, ...props }) }) }),
     footer
   ] });
-};
+});
 const TbodyWrapper = styledComponents.styled(RawTbody)`
   & tr:last-of-type {
     border-bottom: none;
@@ -12181,7 +12245,6 @@ const Tr = (props) => {
 const CellWrapper = styledComponents.styled(RawTd)`
   vertical-align: middle;
   text-align: left;
-  color: ${({ theme }) => theme.colors.neutral600};
   outline-offset: -4px;
 
   /**
@@ -12191,15 +12254,15 @@ const CellWrapper = styledComponents.styled(RawTd)`
     vertical-align: sub;
   }
 `;
-const Th = ({ children, action, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(CellWrapper, { as: RawTh, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
+const Th = React__namespace.forwardRef(({ children, action, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(CellWrapper, { color: "neutral600", as: RawTh, ref: forwardedRef, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
     children,
     action
   ] }) });
-};
-const Td = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(CellWrapper, { ...props, children });
-};
+});
+const Td = React__namespace.forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(CellWrapper, { color: "neutral800", ref: forwardedRef, ...props, children });
+});
 const IconBox = styledComponents.styled(Box)`
   height: 2.4rem;
   width: 2.4rem;
@@ -12232,6 +12295,28 @@ const TFooter = ({ children, icon, ...props }) => {
     ] }) })
   ] });
 };
+const TextButton = forwardRef(
+  ({ children, startIcon, endIcon, disabled = false, loading = false, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      TextButtonWrapper,
+      {
+        ref,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled,
+        tag: "button",
+        type: "button",
+        gap: 2,
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Loader, {}) }) : startIcon,
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", children }),
+          endIcon
+        ]
+      }
+    );
+  }
+);
 const rotation = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
@@ -12240,51 +12325,24 @@ const rotation = styledComponents.keyframes`
     transform: rotate(359deg);
   }
 `;
-const LoadingWrapper = styledComponents.styled.div`
+const LoadingWrapper = styledComponents.styled.span`
+  display: flex;
   animation: ${rotation} 2s infinite linear;
   will-change: transform;
 `;
 const TextButtonWrapper = styledComponents.styled(Flex)`
   border: none;
+  background-color: transparent;
+  color: ${(props) => props.theme.colors.primary600};
+  cursor: pointer;
 
   &[aria-disabled='true'] {
     pointer-events: none;
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.primary600};
+    color: ${(props) => props.theme.colors.neutral600};
   }
 
   ${focus}
 `;
-const TextButton = React__namespace.forwardRef(
-  ({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
-    const handleClick = onClick && !disabled ? onClick : void 0;
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      TextButtonWrapper,
-      {
-        ref,
-        "aria-disabled": isDisabled,
-        onClick: handleClick,
-        tag: "button",
-        type: "button",
-        background: "transparent",
-        gap: 2,
-        ...props,
-        children: [
-          loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Loader, {}) }) : startIcon,
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", textColor: isDisabled ? "neutral600" : "primary600", children }),
-          endIcon
-        ]
-      }
-    );
-  }
-);
-TextButton.displayName = "TextButton";
 const TextInput = React__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Input$2, { ref, ...props });
 });
@@ -12589,8 +12647,7 @@ exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BaseButton = BaseButton;
-exports.BaseLink = BaseLink;
+exports.BaseLink = BaseLinkImpl;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
@@ -12673,7 +12730,7 @@ exports.SubNavLink = SubNavLink;
 exports.SubNavLinkSection = SubNavLinkSection;
 exports.SubNavSection = SubNavSection;
 exports.SubNavSections = SubNavSections;
-exports.Switch = Switch;
+exports.Switch = SwitchImpl;
 exports.TFooter = TFooter;
 exports.Table = Table;
 exports.Tabs = Tabs;