@strapi/design-system 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/index.js

@@ -5,22 +5,28 @@ const date = require("@internationalized/date");
 const jsxRuntime = require("react/jsx-runtime");
 const Tooltip = require("@radix-ui/react-tooltip");
 const styledComponents = require("styled-components");
+const DismissibleLayerPrimitive = require("@radix-ui/react-dismissable-layer");
 const uiPrimitives = require("@strapi/ui-primitives");
 const RadixAccordion = require("@radix-ui/react-accordion");
 const icons = require("@strapi/icons");
+const Avatar$1 = require("@radix-ui/react-avatar");
 const DropdownMenu = require("@radix-ui/react-dropdown-menu");
-const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
-const DismissibleLayerPrimitive = require("@radix-ui/react-dismissable-layer");
-const reactDom = require("react-dom");
+const Checkbox = require("@radix-ui/react-checkbox");
+const AlertDialog = require("@radix-ui/react-alert-dialog");
 const reactDom$1 = require("@floating-ui/react-dom");
 const reactFocusScope = require("@radix-ui/react-focus-scope");
+const reactDom = require("react-dom");
 const reactRemoveScroll = require("react-remove-scroll");
 const langJson = require("@codemirror/lang-json");
 const reactCodemirror = require("@uiw/react-codemirror");
 const state = require("@codemirror/state");
 const view = require("@codemirror/view");
+const Dialog$1 = require("@radix-ui/react-dialog");
+const ScrollArea = require("@radix-ui/react-scroll-area");
 const number = require("@internationalized/number");
-const ariaHidden = require("aria-hidden");
+const Popover$1 = require("@radix-ui/react-popover");
+const RadioGroup = require("@radix-ui/react-radio-group");
+const Tabs$1 = require("@radix-ui/react-tabs");
 function _interopNamespace(e) {
   if (e && e.__esModule)
     return e;
@@ -41,9 +47,17 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const Tooltip__namespace = /* @__PURE__ */ _interopNamespace(Tooltip);
+const DismissibleLayerPrimitive__namespace = /* @__PURE__ */ _interopNamespace(DismissibleLayerPrimitive);
 const RadixAccordion__namespace = /* @__PURE__ */ _interopNamespace(RadixAccordion);
+const Avatar__namespace = /* @__PURE__ */ _interopNamespace(Avatar$1);
 const DropdownMenu__namespace = /* @__PURE__ */ _interopNamespace(DropdownMenu);
-const DismissibleLayerPrimitive__namespace = /* @__PURE__ */ _interopNamespace(DismissibleLayerPrimitive);
+const Checkbox__namespace = /* @__PURE__ */ _interopNamespace(Checkbox);
+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 RadioGroup__namespace = /* @__PURE__ */ _interopNamespace(RadioGroup);
+const Tabs__namespace = /* @__PURE__ */ _interopNamespace(Tabs$1);
 const createContext = (rootComponentName, defaultContext) => {
   const Context = React__namespace.createContext(defaultContext);
   const Provider2 = (props) => {
@@ -426,7 +440,7 @@ const StyledTypography = styledComponents.styled(Box)`
   text-transform: ${({ $textTransform }) => $textTransform};
 `;
 const [AccordionProvider, useAccordion] = createContext("Accordion");
-const Root$3 = React__namespace.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
+const Root$8 = React__namespace.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { ref: forwardedRef, $size: size, collapsible: true, ...props, type: "single", children: /* @__PURE__ */ jsxRuntime.jsx(AccordionProvider, { size, children }) });
 });
 const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root)`
@@ -443,7 +457,7 @@ const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root)`
   }
 }}
 `;
-const Item$2 = React__namespace.forwardRef((props, forwardedRef) => {
+const Item$5 = React__namespace.forwardRef((props, forwardedRef) => {
   const { size } = useAccordion("Item");
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionItem, { $size: size, ref: forwardedRef, ...props });
 });
@@ -471,7 +485,7 @@ const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item)`
     box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
   }
 `;
-const Trigger$3 = React__namespace.forwardRef(
+const Trigger$7 = React__namespace.forwardRef(
   ({ caretPosition = "left", description, icon: Icon, children, ...restProps }, forwardedRef) => {
     const { size } = useAccordion("Trigger");
     return /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $caretPosition: caretPosition, $size: size, ref: forwardedRef, ...restProps, children: [
@@ -499,7 +513,7 @@ const IconBox$4 = styledComponents.styled(Box)`
   color: ${(props) => props.theme.colors.neutral500};
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: ${(props) => props.theme.transitions.color};
   }
 `;
 const TriggerIcon = styledComponents.styled(Flex).attrs((props) => ({
@@ -515,8 +529,8 @@ const TriggerIcon = styledComponents.styled(Flex).attrs((props) => ({
 
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      transform 300ms ${(props) => props.theme.easings.authenticMotion},
-      background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
+      transform ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.authenticMotion},
+      ${(props) => props.theme.transitions.backgroundColor};
   }
 `;
 const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger)`
@@ -545,7 +559,7 @@ const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigg
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: ${(props) => props.theme.transitions.color};
   }
 `;
 const Actions = React__namespace.forwardRef((props, forwardedRef) => {
@@ -566,11 +580,11 @@ const ActionWrapper = styledComponents.styled(Flex).attrs((props) => ({
     color: ${(props) => props.theme.colors.neutral600};
 
     @media (prefers-reduced-motion: no-preference) {
-      transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+      transition: ${(props) => props.theme.transitions.color};
     }
   }
 `;
-const Header = React__namespace.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
+const Header$2 = React__namespace.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionHeader, { $variant: variant2, ref: forwardedRef, ...props });
 });
 const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header)`
@@ -606,10 +620,10 @@ const AccordionHeader = styledComponents.styled(RadixAccordion__namespace.Header
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: ${(props) => props.theme.transitions.backgroundColor};
   }
 `;
-const Content$4 = React__namespace.forwardRef((props, forwardedRef) => {
+const Content$7 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { ref: forwardedRef, ...props });
 });
 const slideDown = styledComponents.keyframes`
@@ -633,22 +647,24 @@ const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Conte
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-state='open'] {
-      animation: ${slideDown} 0.3s ${(props) => props.theme.easings.authenticMotion};
+      animation: ${slideDown} ${(props) => props.theme.motion.timings["320"]}
+        ${(props) => props.theme.motion.easings.authenticMotion};
     }
 
     &[data-state='closed'] {
-      animation: ${slideUp} 0.3s ${(props) => props.theme.easings.authenticMotion};
+      animation: ${slideUp} ${(props) => props.theme.motion.timings["320"]}
+        ${(props) => props.theme.motion.easings.authenticMotion};
     }
   }
 `;
 const Accordion = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Actions,
-  Content: Content$4,
-  Header,
-  Item: Item$2,
-  Root: Root$3,
-  Trigger: Trigger$3
+  Content: Content$7,
+  Header: Header$2,
+  Item: Item$5,
+  Root: Root$8,
+  Trigger: Trigger$7
 }, Symbol.toStringTag, { value: "Module" }));
 const focus = styledComponents.css`
   position: relative;
@@ -824,88 +840,291 @@ const Alert = ({
     }
   );
 };
-const avatarSize = 32;
-const previewSize = 64;
-const AvatarImg = styledComponents.styled.img`
+function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(
+    () => (...args) => {
+      var _callbackRef$current;
+      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
+    },
+    []
+  );
+}
+function useControllableState$1({ prop, defaultProp, onChange = () => {
+} }) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+  const setValue = React__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue;
+        const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
+        if (value2 !== prop)
+          handleChange(value2);
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, handleChange]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+  const uncontrolledState = React__namespace.useState(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React__namespace.useRef(value);
+  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+  React__namespace.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+  return uncontrolledState;
+}
+const EASINGS = {
+  easeInSine: "cubic-bezier(0.47, 0, 0.745, 0.715)",
+  easeOutSine: "cubic-bezier(0.39, 0.575, 0.565, 1)",
+  easeInOutSine: "cubic-bezier(0.39, 0.575, 0.565, 1)",
+  easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+  easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  easeInOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  easeInCubic: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
+  easeOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+  easeInOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+  easeInQuart: "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
+  easeOutQuart: "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  easeInOutQuart: "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  easeInQuint: "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
+  easeOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
+  easeInOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
+  easeInExpo: "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
+  easeOutExpo: "cubic-bezier(0.19, 1, 0.22, 1)",
+  easeInOutExpo: "cubic-bezier(0.19, 1, 0.22, 1)",
+  easeInCirc: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
+  easeOutCirc: "cubic-bezier(0.075, 0.82, 0.165, 1)",
+  easeInOutCirc: "cubic-bezier(0.075, 0.82, 0.165, 1)",
+  easeInBack: "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
+  easeOutBack: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  easeInOutBack: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  easeInOutFast: "cubic-bezier(1,0,0,1)",
+  authenticMotion: "cubic-bezier(.4,0,.2,1)"
+};
+const TIMINGS = {
+  "320": "320ms",
+  "200": "200ms",
+  "120": "120ms"
+};
+const TRANSITIONS = {
+  color: `color ${TIMINGS["120"]} ${EASINGS.easeOutQuad}`,
+  backgroundColor: `background-color ${TIMINGS["120"]} ${EASINGS.easeOutQuad}`
+};
+const ANIMATIONS = {
+  overlayFadeIn: styledComponents.keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.2;
+    }
+  `,
+  modalPopIn: styledComponents.keyframes`
+    from {
+      transform:translate(-50%, -50%)  scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+  `,
+  modalPopOut: styledComponents.keyframes`
+    from {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+    to {
+      transform:translate(-50%, -50%)  scale(0.8);
+      opacity: 0;
+    }
+  `,
+  popIn: styledComponents.keyframes`
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  `,
+  popOut: styledComponents.keyframes`
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  `,
+  slideDownIn: styledComponents.keyframes`
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+  slideDownOut: styledComponents.keyframes`
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  `,
+  slideUpIn: styledComponents.keyframes`
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+  slideUpOut: styledComponents.keyframes`
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+  `,
+  fadeIn: styledComponents.keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  `,
+  fadeOut: styledComponents.keyframes`
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  `
+};
+const SIZE = 32;
+const PREVIEW_SCALE = 2;
+const Item$4 = React__namespace.forwardRef(
+  ({ onLoadingStatusChange, delayMs = 600, src, alt, fallback, preview = false, ...restProps }, forwardedRef) => {
+    const [loadingStatus, setLoadingStatus] = useControllableState$1({
+      onChange: onLoadingStatusChange
+    });
+    const [tooltipOpen, setTooltipOpen] = React__namespace.useState(false);
+    const hasPreview = preview && loadingStatus === "loaded";
+    const handleTooltipOpen = (isOpen) => {
+      if (hasPreview) {
+        setTooltipOpen(isOpen);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip__namespace.Root, { onOpenChange: handleTooltipOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarRoot, { ref: forwardedRef, ...restProps, children: [
+        hasPreview ? /* @__PURE__ */ jsxRuntime.jsx(
+          AvatarOverlay,
+          {
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            background: "neutral0",
+            zIndex: "overlay",
+            style: { opacity: tooltipOpen ? 0.4 : 0 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt, onLoadingStatusChange: setLoadingStatus }),
+        /* @__PURE__ */ jsxRuntime.jsx(Avatar__namespace.Fallback, { delayMs, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { fontWeight: "bold", textTransform: "uppercase", children: fallback }) })
+      ] }) }),
+      hasPreview ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PreviewContent, { side: "top", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(PreviewImg, { src, alt }) }) }) : null
+    ] });
+  }
+);
+const avatarStyles = styledComponents.css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  overflow: hidden;
   border-radius: 50%;
+`;
+const imgStyles = styledComponents.css`
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  display: block;
+  border-radius: inherit;
+`;
+const AvatarRoot = styledComponents.styled(Avatar__namespace.Root)`
   position: relative;
+  z-index: 0;
+  ${avatarStyles}
+  width: ${SIZE / 10}rem;
+  height: ${SIZE / 10}rem;
+  /* TODO: we should get the user email & hash it to turn it into a hex-value so different emails can consistently get a different background */
+  background-color: ${(p) => p.theme.colors.primary600};
+  color: ${(p) => p.theme.colors.neutral0};
+`;
+const AvatarOverlay = styledComponents.styled(Box)`
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity ${(props) => props.theme.motion.timings["200"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
 `;
-const PreviewContainer = styledComponents.styled.img`
-  border-radius: 50%;
-  object-fit: cover;
-  position: absolute;
-  transform: translate(-${(previewSize - avatarSize) / 2}px, -100%);
-  margin-top: -${({ theme }) => theme.spaces[1]};
-`;
-const Overlay = styledComponents.styled(Box)`
-  opacity: 0.4;
-`;
-const Avatar = ({ src, alt, preview }) => {
-  const [previewVisible, setPreviewVisible] = React__namespace.useState(false);
-  const isHovering = Boolean(preview && previewVisible);
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-    isHovering ? /* @__PURE__ */ jsxRuntime.jsx(
-      PreviewContainer,
-      {
-        "aria-hidden": true,
-        alt: "",
-        width: `${previewSize}px`,
-        height: `${previewSize}px`,
-        src: preview === true ? src : typeof preview === "string" ? preview : ""
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Box,
-      {
-        zIndex: isHovering ? 1 : void 0,
-        position: "relative",
-        onMouseEnter: () => setPreviewVisible(true),
-        onMouseLeave: () => setPreviewVisible(false),
-        width: `${avatarSize}px`,
-        height: `${avatarSize}px`,
-        children: [
-          isHovering ? /* @__PURE__ */ jsxRuntime.jsx(
-            Overlay,
-            {
-              background: "neutral0",
-              borderRadius: "50%",
-              position: "absolute",
-              width: `${avatarSize}px`,
-              height: `${avatarSize}px`,
-              zIndex: 1
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(AvatarImg, { src, alt, width: `${avatarSize}px`, height: `${avatarSize}px` })
-        ]
-      }
-    )
-  ] });
-};
-const InitialsWrapper = styledComponents.styled(Flex)`
-  span {
-    line-height: 0;
+const AvatarImage = styledComponents.styled(Avatar__namespace.Image)`
+  ${imgStyles}
+`;
+const PreviewContent = styledComponents.styled(Tooltip__namespace.Content)`
+  ${avatarStyles}
+  width: ${SIZE * PREVIEW_SCALE / 10}rem;
+  height: ${SIZE * PREVIEW_SCALE / 10}rem;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${ANIMATIONS.fadeIn} ${(props) => props.theme.motion.timings["200"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const Initials = ({ children, background = "primary600", textColor = "buttonNeutral0" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InitialsWrapper,
-    {
-      background,
-      borderRadius: "50%",
-      width: `${avatarSize}px`,
-      height: `${avatarSize}px`,
-      justifyContent: "center",
-      children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { fontSize: 0, fontWeight: "bold", textColor, textTransform: "uppercase", children })
-    }
-  );
-};
-const AvatarGroup = styledComponents.styled(Flex)`
-  & > * + * {
-    margin-left: -${avatarSize / 2}px;
+const PreviewImg = styledComponents.styled.img`
+  ${imgStyles}
+`;
+const Group$2 = React__namespace.forwardRef((props, forwarededRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupFlex, { ...props, ref: forwarededRef, tag: "div" });
+});
+const GroupFlex = styledComponents.styled(Flex)`
+  & > ${AvatarRoot} + ${AvatarRoot} {
+    margin-left: -${SIZE / 10 / 2}rem;
   }
 `;
+const Avatar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Group: Group$2,
+  Item: Item$4
+}, Symbol.toStringTag, { value: "Module" }));
 const Badge = ({
   active = false,
   size = "M",
@@ -975,113 +1194,6 @@ const BaseButtonWrapper = styledComponents.styled(Flex)`
 
   ${focus}
 `;
-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 checkmarkIconDisabled = "data:image/svg+xml,%3csvg%20width='10'%20height='8'%20viewBox='0%200%2010%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.55323%200.396973C8.63135%200.316355%208.76051%200.315811%208.83931%200.395768L9.86256%201.43407C9.93893%201.51157%209.93935%201.6359%209.86349%201.7139L4.06401%207.67724C3.9859%207.75755%203.85707%207.75805%203.77834%207.67834L0.13866%203.99333C0.0617798%203.91549%200.0617102%203.79032%200.138504%203.7124L1.16213%202.67372C1.24038%202.59432%201.36843%202.59422%201.4468%202.67348L3.92174%205.17647L8.55323%200.396973Z'%20fill='%238E8EA9'%20/%3e%3c/svg%3e";
-const checkmarkIcon = "data:image/svg+xml,%3csvg%20width='10'%20height='8'%20viewBox='0%200%2010%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.55323%200.396973C8.63135%200.316355%208.76051%200.315811%208.83931%200.395768L9.86256%201.43407C9.93893%201.51157%209.93935%201.6359%209.86349%201.7139L4.06401%207.67724C3.9859%207.75755%203.85707%207.75805%203.77834%207.67834L0.13866%203.99333C0.0617798%203.91549%200.0617102%203.79032%200.138504%203.7124L1.16213%202.67372C1.24038%202.59432%201.36843%202.59422%201.4468%202.67348L3.92174%205.17647L8.55323%200.396973Z'%20fill='white'%20/%3e%3c/svg%3e";
-const BaseCheckbox = React__namespace.forwardRef(
-  ({ indeterminate = false, name, value = false, onValueChange, ...inputProps }, forwardedRef) => {
-    const checkboxRef = React__namespace.useRef(null);
-    const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
-    React__namespace.useEffect(() => {
-      if (checkboxRef.current && indeterminate) {
-        checkboxRef.current.indeterminate = indeterminate;
-      } else {
-        checkboxRef.current.indeterminate = false;
-      }
-    }, [indeterminate]);
-    const handleValueChange = () => {
-      if (onValueChange) {
-        onValueChange(!value);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      CheckboxInput,
-      {
-        checked: value,
-        onChange: handleValueChange,
-        type: "checkbox",
-        ref: composedRefs,
-        name,
-        ...inputProps
-      }
-    );
-  }
-);
-BaseCheckbox.displayName = "BaseCheckbox";
-const CheckboxInput = styledComponents.styled.input`
-  min-width: 1.8rem;
-  height: 1.8rem;
-  margin: 0;
-  appearance: none;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: 1px solid ${({ theme }) => theme.colors.neutral300};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  cursor: pointer;
-
-  &:checked {
-    background-color: ${({ theme }) => theme.colors.primary600};
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    &:after {
-      content: '';
-      display: block;
-      position: relative;
-      background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
-      width: 1rem;
-      height: 1rem;
-      left: 50%;
-      top: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    }
-
-    &:disabled:after {
-      background: ${() => `url("${checkmarkIconDisabled}") no-repeat no-repeat center center`};
-    }
-  }
-
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.neutral200};
-    border: 1px solid ${({ theme }) => theme.colors.neutral300};
-  }
-
-  &:indeterminate {
-    background-color: ${({ theme }) => theme.colors.primary600};
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    &:after {
-      content: '';
-      display: block;
-      position: relative;
-      color: white;
-      height: 2px;
-      width: 10px;
-      background-color: ${({ theme }) => theme.colors.neutral0};
-      left: 50%;
-      top: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    }
-
-    &:disabled {
-      background-color: ${({ theme }) => theme.colors.neutral200};
-      border: 1px solid ${({ theme }) => theme.colors.neutral300};
-      &:after {
-        background-color: ${({ theme }) => theme.colors.neutral500};
-      }
-    }
-  }
-`;
 const BaseLink = forwardRef(
   ({ href, rel = "noreferrer noopener", target = "_self", disabled = false, isExternal = false, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1099,88 +1211,6 @@ const BaseLink = forwardRef(
     );
   }
 );
-const useReactId = React__namespace["useId".toString()] || (() => void 0);
-let count = 0;
-const useId = (initialId) => {
-  const [id, setId] = React__namespace.useState(useReactId());
-  React__namespace.useLayoutEffect(() => {
-    if (!initialId)
-      setId((reactId) => reactId ?? String(count++));
-  }, [initialId]);
-  return initialId?.toString() ?? (id || "");
-};
-const setTabIndexOnFirstItem = (node, selector) => {
-  const list = node.querySelectorAll(selector);
-  if (list && list.length > 0) {
-    list.item(0).setAttribute("tabindex", "0");
-  }
-};
-const [RadioProvider, useRadioGroup] = createContext("RadioGroup", {
-  onChange: void 0,
-  name: "",
-  selected: ""
-});
-const RadioGroup = ({ children, labelledBy, onChange, value = "", name, ...props }) => {
-  const radioGroupRef = React__namespace.useRef(null);
-  React__namespace.useLayoutEffect(() => {
-    if (!value) {
-      setTabIndexOnFirstItem(radioGroupRef.current, `[name="${name}"]`);
-    }
-  }, [value, name]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioProvider, { onChange, selected: value, name, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: radioGroupRef, role: "radiogroup", "aria-labelledby": labelledBy, ...props, children }) });
-};
-const BaseRadio = React__namespace.forwardRef(({ value, disabled = false, ...props }, ref) => {
-  const generatedId = useId();
-  const { onChange, selected, name } = useRadioGroup("BaseRadio");
-  const isSelected = selected === value;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadioInput,
-    {
-      ref,
-      type: "radio",
-      name,
-      value,
-      tabIndex: isSelected ? 0 : -1,
-      "aria-checked": isSelected,
-      checked: isSelected,
-      disabled,
-      id: generatedId,
-      onChange,
-      ...props
-    }
-  );
-});
-BaseRadio.displayName = "Radio";
-const RadioInput = styledComponents.styled.input`
-  margin: 0;
-  padding: 0;
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.primary600};
-  border-radius: 50%;
-  height: 1.8rem;
-  width: 1.8rem;
-
-  &:after {
-    border-radius: 50%;
-    content: '';
-    position: relative;
-    z-index: 1;
-    display: block;
-    height: 1rem;
-    width: 1rem;
-    left: 0.3rem;
-    top: 0.3rem;
-  }
-
-  &:checked:after {
-    background: ${({ theme }) => theme.colors.primary600};
-  }
-
-  &:disabled {
-    border: 1px solid ${({ theme }) => theme.colors.neutral300};
-    background: ${({ theme }) => theme.colors.neutral200};
-  }
-`;
 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: "/" }) });
 };
@@ -1234,6 +1264,18 @@ const StyledLink = styledComponents.styled(BaseLink)`
 const CrumbLink = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...props, children });
 CrumbLink.displayName = "CrumbLink";
 const stripReactIdOfColon = (str) => str.replaceAll(":", "");
+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);
+let count = 0;
+const useId = (initialId) => {
+  const [id, setId] = React__namespace.useState(useReactId());
+  useIsomorphicLayoutEffect(() => {
+    if (!initialId)
+      setId((reactId) => reactId ?? String(count++));
+  }, [initialId]);
+  return initialId?.toString() ?? (id || "");
+};
 const useIntersection = (scrollableAreaRef, callback, { selectorToWatch, skipWhen = false }) => {
   const handleIntersection = uiPrimitives.useCallbackRef(callback);
   React__namespace.useEffect(() => {
@@ -1464,6 +1506,13 @@ const ButtonWrapper = styledComponents.styled(BaseButton)`
   }
 
   ${getVariantStyle}
+
+  @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 Link = forwardRef(
   ({ children, href, disabled = false, startIcon, endIcon, isExternal = true, ...props }, ref) => {
@@ -1651,24 +1700,24 @@ const MenuSubContent = React__namespace.forwardRef((props, ref) => {
     }
   ) }) });
 });
-const Root$2 = MenuRoot;
-const Trigger$2 = MenuTrigger;
-const Content$3 = MenuContent;
-const Item$1 = MenuItem$1;
+const Root$7 = MenuRoot;
+const Trigger$6 = MenuTrigger;
+const Content$6 = MenuContent;
+const Item$3 = MenuItem$1;
 const Label$1 = MenuLabel;
 const SubRoot = MenuSubRoot;
 const SubTrigger = MenuSubTrigger;
 const SubContent = MenuSubContent;
 const Menu = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Content: Content$3,
-  Item: Item$1,
+  Content: Content$6,
+  Item: Item$3,
   Label: Label$1,
-  Root: Root$2,
+  Root: Root$7,
   SubContent,
   SubRoot,
   SubTrigger,
-  Trigger: Trigger$2
+  Trigger: Trigger$6
 }, Symbol.toStringTag, { value: "Module" }));
 const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
   const contentRef = React__namespace.useRef(null);
@@ -1696,12 +1745,12 @@ const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, .
      */
     skipWhen: !internalIsOpen
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$2, { onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Trigger$2, { ...props, children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$3, { intersectionId, popoverPlacement, children })
+  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 MenuItem = Item$1;
+const MenuItem = Item$3;
 const StyledButton = styledComponents.styled(SimpleMenu)`
   padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
   height: unset;
@@ -1788,12 +1837,107 @@ 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" }) });
 };
-const CardCheckbox = (props) => {
-  const { id } = useCard();
-  return /* @__PURE__ */ jsxRuntime.jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(BaseCheckbox, { "aria-labelledby": `${id}-title`, ...props }) });
+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(
+    Box,
+    {
+      tag: "svg",
+      viewBox: "0 0 10 8",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: fill ? colors[fill] : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.55323 0.396973C8.63135 0.316355 8.76051 0.315811 8.83931 0.395768L9.86256 1.43407C9.93893 1.51157 9.93935 1.6359 9.86349 1.7139L4.06401 7.67724C3.9859 7.75755 3.85707 7.75805 3.77834 7.67834L0.13866 3.99333C0.0617798 3.91549 0.0617102 3.79032 0.138504 3.7124L1.16213 2.67372C1.24038 2.59432 1.36843 2.59422 1.4468 2.67348L3.92174 5.17647L8.55323 0.396973Z" })
+    }
+  );
 };
-const BreakBox = styledComponents.styled(Box)`
-  word-break: break-all;
+const CheckboxEl = React__namespace.forwardRef(
+  ({ defaultChecked, checked: checkedProp, onCheckedChange, ...props }, forwardedRef) => {
+    const checkboxRef = React__namespace.useRef(null);
+    const [checked, setChecked] = useControllableState$1({
+      defaultProp: defaultChecked,
+      prop: checkedProp,
+      onChange: onCheckedChange
+    });
+    const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxRoot, { ref: composedRefs, checked, onCheckedChange: setChecked, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Checkbox__namespace.Indicator, { children: [
+      checked === true ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { width: "1rem", fill: "neutral0" }) : null,
+      checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(Box, { height: "2px", width: "1rem", background: "neutral0", borderRadius: "1px" }) : null
+    ] }) });
+  }
+);
+const CheckboxRoot = styledComponents.styled(Checkbox__namespace.Root)`
+  background: ${(props) => props.theme.colors.neutral0};
+  width: 2rem;
+  height: 2rem;
+  border-radius: ${(props) => props.theme.borderRadius};
+  border: 1px solid ${(props) => props.theme.colors.neutral300};
+  position: relative;
+  z-index: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // this ensures the checkbox is always a square even in flex-containers.
+  flex: 0 0 2rem;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      border-color ${(props) => props.theme.motion.timings["120"]} ${(props) => props.theme.motion.easings.easeOutQuad},
+      ${(props) => props.theme.transitions.backgroundColor};
+  }
+
+  &[data-state='checked'],
+  &[data-state='indeterminate'] {
+    border: 1px solid ${(props) => props.theme.colors.primary600};
+    background-color: ${(props) => props.theme.colors.primary600};
+  }
+
+  &[data-disabled] {
+    background-color: ${(props) => props.theme.colors.neutral200};
+  }
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+  }
+`;
+const CheckboxImpl = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
+  const labelId = useId(restProps.id);
+  if (!children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxEl, { ref: forwardedRef, ...restProps });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CheckboxEl, { id: labelId, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography, { tag: "label", textColor: "neutral800", htmlFor: labelId, children })
+  ] });
+});
+const CardCheckbox = (props) => {
+  const { id } = useCard();
+  return /* @__PURE__ */ jsxRuntime.jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { "aria-labelledby": `${id}-title`, ...props }) });
+};
+const BreakBox = styledComponents.styled(Box)`
+  word-break: break-all;
 `;
 const CardContent = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BreakBox, { ...props, children });
@@ -1871,14 +2015,6 @@ const TooltipImpl = React__namespace.forwardRef(
     );
   }
 );
-const fadeIn = styledComponents.keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
 const TooltipContent = styledComponents.styled(Tooltip__namespace.Content)`
   background-color: ${(props) => props.theme.colors.neutral900};
   color: ${(props) => props.theme.colors.neutral0};
@@ -1890,7 +2026,8 @@ const TooltipContent = styledComponents.styled(Tooltip__namespace.Content)`
   transform-origin: var(--radix-tooltip-content-transform-origin);
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: ${fadeIn} 200ms ${(props) => props.theme.easings.authenticMotion};
+    animation: ${ANIMATIONS.fadeIn} ${(props) => props.theme.motion.timings["200"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
 const CarouselGrid = styledComponents.styled(Box)`
@@ -1963,34 +2100,6 @@ const Carousel = React__namespace.forwardRef(
     ] }) });
   }
 );
-const EASINGS = {
-  easeInSine: "cubic-bezier(0.47, 0, 0.745, 0.715)",
-  easeOutSine: "cubic-bezier(0.39, 0.575, 0.565, 1)",
-  easeInOutSine: "cubic-bezier(0.39, 0.575, 0.565, 1)",
-  easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-  easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-  easeInOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-  easeInCubic: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-  easeOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-  easeInOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-  easeInQuart: "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
-  easeOutQuart: "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  easeInOutQuart: "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  easeInQuint: "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
-  easeOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
-  easeInOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
-  easeInExpo: "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
-  easeOutExpo: "cubic-bezier(0.19, 1, 0.22, 1)",
-  easeInOutExpo: "cubic-bezier(0.19, 1, 0.22, 1)",
-  easeInCirc: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
-  easeOutCirc: "cubic-bezier(0.075, 0.82, 0.165, 1)",
-  easeInOutCirc: "cubic-bezier(0.075, 0.82, 0.165, 1)",
-  easeInBack: "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
-  easeOutBack: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  easeInOutBack: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  easeInOutFast: "cubic-bezier(1,0,0,1)",
-  authenticMotion: "cubic-bezier(.4,0,.2,1)"
-};
 const sizes = {
   accordions: {
     S: `4.8rem`,
@@ -2026,7 +2135,11 @@ const commonTheme = {
     semiBold: 500,
     bold: 600
   },
-  easings: EASINGS
+  transitions: TRANSITIONS,
+  motion: {
+    easings: EASINGS,
+    timings: TIMINGS
+  }
 };
 const lightColorTokenObject = {
   color: {
@@ -2854,7 +2967,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, Math2 = 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, Math = 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;
@@ -2880,7 +2993,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 = 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 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 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 = {};
@@ -4626,7 +4739,7 @@ lodash.exports;
         return setWrapToString(result2, func, bitmask);
       }
       function createRound(methodName) {
-        var func = Math2[methodName];
+        var func = Math[methodName];
         return function(number2, precision) {
           number2 = toNumber(number2);
           precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
@@ -7681,7 +7794,7 @@ const getThemeSize = (type) => {
 };
 const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) => styledComponents.css`
     outline: none;
-    box-shadow: 0;
+    box-shadow: none;
     transition-property: border-color, box-shadow, fill;
     transition-duration: 0.2s;
 
@@ -7691,7 +7804,7 @@ const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) =>
     }
   `;
 const [FieldProvider, useField] = createContext("Field", {});
-const Root$1 = React__namespace.forwardRef(
+const Root$6 = React__namespace.forwardRef(
   ({ children, name, error = false, hint, id, required = false, ...props }, ref) => {
     const generatedId = useId(id);
     const [labelNode, setLabelNode] = React__namespace.useState();
@@ -7721,7 +7834,6 @@ const Label = React__namespace.forwardRef(({ children, action, ...props }, ref)
     {
       ref: composedRefs,
       display: "flex",
-      alignItems: "center",
       variant: "pi",
       textColor: "neutral800",
       fontWeight: "bold",
@@ -7856,7 +7968,7 @@ const Error$1 = () => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "pi", tag: "p", id: `${id}-error`, textColor: "danger600", "data-strapi-field-error": true, children: error });
 };
-const Action = React__namespace.forwardRef(({ label, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+const Action$1 = React__namespace.forwardRef(({ label, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   FieldActionWrapper,
   {
     justifyContent: "unset",
@@ -7875,12 +7987,12 @@ const FieldActionWrapper = styledComponents.styled(Flex)`
 `;
 const Field = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Action,
+  Action: Action$1,
   Error: Error$1,
   Hint,
   Input: Input$2,
   Label,
-  Root: Root$1,
+  Root: Root$6,
   useField
 }, Symbol.toStringTag, { value: "Module" }));
 const CarouselInput = React__namespace.forwardRef(
@@ -7902,7 +8014,7 @@ const CarouselInput = React__namespace.forwardRef(
     ...props
   }, forwardedRef) => {
     const generatedId = useId(id);
-    return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { hint, error, id: generatedId, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Root$6, { hint, error, id: generatedId, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Carousel,
@@ -7966,21 +8078,6 @@ const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @_
     children
   }
 );
-const Checkbox = React__namespace.forwardRef(
-  ({ children, disabled = false, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(CheckboxLabel, { tag: "label", textColor: "neutral800", $disabled: disabled, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BaseCheckbox, { ref: forwardedRef, disabled, ...props }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: 2, children })
-    ] });
-  }
-);
-const CheckboxLabel = styledComponents.styled(Typography)`
-  display: flex;
-  align-items: flex-start;
-  * {
-    cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  }
-`;
 const loaderSvg = "data:image/svg+xml,%3csvg%20width='63'%20height='63'%20viewBox='0%200%2063%2063'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M42.5563%2011.9816C39.484%2010.3071%2035.8575%209.29097%2032.3354%209.13521C28.6443%208.92888%2024.8295%209.72318%2021.3336%2011.4129C20.9123%2011.5901%2020.5376%2011.8101%2020.1722%2012.0249L20.0108%2012.1179C19.8774%2012.1951%2019.7441%2012.2724%2019.608%2012.3536C19.3253%2012.5146%2019.0492%2012.6744%2018.7544%2012.8792C18.5463%2013.0329%2018.3395%2013.1759%2018.1301%2013.323C17.5658%2013.7208%2016.9868%2014.1317%2016.4983%2014.5979C14.8476%2015.9524%2013.5571%2017.6075%2012.6071%2018.9214C10.4365%2022.1566%209.08622%2025.9567%208.80702%2029.6143L8.7764%2030.1588C8.73328%2030.9196%208.68476%2031.7057%208.75353%2032.4555C8.76648%2032.6084%208.7661%2032.7638%208.77506%2032.914C8.78895%2033.229%208.80152%2033.5373%208.846%2033.8672L9.07396%2035.4221C9.09756%2035.5764%209.1198%2035.7413%209.1633%2035.9263L9.65919%2037.9272L10.138%2039.2823C10.2729%2039.6673%2010.4158%2040.0751%2010.6%2040.43C12.0292%2043.637%2014.1425%2046.4578%2016.7063%2048.585C19.0508%2050.5296%2021.824%2052.0023%2024.7491%2052.8452L26.2371%2053.2376C26.3781%2053.2693%2026.4926%2053.2889%2026.6031%2053.3058L26.7775%2053.3311C27.0052%2053.3636%2027.2195%2053.3986%2027.4445%2053.435C27.8598%2053.5076%2028.2672%2053.5748%2028.7079%2053.6183L30.5641%2053.7229C30.9516%2053.7249%2031.3352%2053.7068%2031.7081%2053.6874C31.9039%2053.681%2032.0984%2053.6681%2032.3288%2053.662C34.5253%2053.4772%2036.5106%2053.0634%2038.0516%2052.4652C38.1769%2052.4171%2038.3008%2052.3796%2038.4234%2052.3355C38.6727%2052.2499%2038.9259%2052.167%2039.1432%2052.0599L40.8591%2051.2626L42.5702%2050.266C42.9009%2050.0682%2043.0205%2049.6414%2042.8282%2049.2984C42.632%2048.9526%2042.2034%2048.8308%2041.8634%2049.0166L40.1792%2049.9218L38.4995%2050.6224C38.3169%2050.6953%2038.121%2050.7534%2037.9224%2050.8155C37.7838%2050.8489%2037.6518%2050.8983%2037.5012%2050.9408C36.0711%2051.435%2034.2445%2051.7425%2032.244%2051.8346C32.0442%2051.8383%2031.8471%2051.8379%2031.654%2051.8403C31.3051%2051.8414%2030.9602%2051.8451%2030.6392%2051.8305L28.9177%2051.6725C28.5476%2051.619%2028.1695%2051.5427%2027.7848%2051.4678C27.5639%2051.4167%2027.3376%2051.3737%2027.1299%2051.3374L26.9529%2051.2987C26.8704%2051.2834%2026.7772%2051.2667%2026.7333%2051.2543L25.3466%2050.8322C22.7651%2049.9789%2020.33%2048.5729%2018.2942%2046.7557C16.1056%2044.7951%2014.3339%2042.2335%2013.1742%2039.3582C12.0276%2036.6013%2011.5988%2033.2792%2011.9716%2030.0076C12.3145%2027.0213%2013.3948%2024.1635%2015.1858%2021.5083C15.3034%2021.3339%2015.421%2021.1596%2015.5212%2021.0196C16.4309%2019.8688%2017.5408%2018.5589%2018.9483%2017.496C19.3367%2017.1525%2019.7862%2016.856%2020.2611%2016.5478C20.4878%2016.4009%2020.7079%2016.2553%2020.8907%2016.1306C21.0974%2016.0048%2021.3188%2015.8831%2021.5348%2015.7694C21.6761%2015.6975%2021.8162%2015.619%2021.9388%2015.5576L22.1002%2015.4646C22.4002%2015.3037%2022.6749%2015.1546%2022.9908%2015.039L24.1186%2014.5715C24.3399%2014.4844%2024.5718%2014.4159%2024.7997%2014.3447C24.953%2014.2982%2025.0982%2014.2635%2025.2635%2014.2078C25.786%2014.0182%2026.3283%2013.9112%2026.9105%2013.7965C27.117%2013.7571%2027.3302%2013.7163%2027.5608%2013.6585C27.7553%2013.611%2027.9737%2013.5969%2028.2082%2013.5762C28.364%2013.5603%2028.5172%2013.5483%2028.6318%2013.5333C28.7876%2013.5173%2028.9342%2013.5066%2029.0927%2013.4867C29.3285%2013.4555%2029.5456%2013.4347%2029.7494%2013.4337C30.0237%2013.44%2030.2994%2013.4357%2030.5777%2013.4274C31.0811%2013.421%2031.5579%2013.4197%2032.0318%2013.4914C34.9664%2013.7352%2037.7144%2014.6085%2040.2052%2016.0868C42.3489%2017.3655%2044.2716%2019.1525%2045.7607%2021.264C47.0255%2023.0628%2047.9756%2025.0528%2048.4928%2027.0393C48.572%2027.3176%2048.6299%2027.5931%2048.6839%2027.8659C48.7154%2028.0428%2048.7563%2028.2145%2048.7892%2028.3636C48.8037%2028.4541%2048.8208%2028.5406%2048.8445%2028.6258C48.8749%2028.7443%2048.8986%2028.864%2048.9116%2028.9651L48.9793%2029.6047C48.9922%2029.7748%2049.0132%2029.9331%2049.0301%2030.0887C49.0668%2030.3268%2049.0889%2030.5608%2049.0964%2030.7561L49.1083%2031.9001C49.1312%2032.3307%2049.089%2032.7116%2049.0522%2033.0673C49.0384%2033.2598%2049.0126%2033.4443%2049.0123%2033.5824C48.9961%2033.6926%2048.9918%2033.7935%2048.9836%2033.8917C48.9753%2034.0072%2048.9724%2034.1148%2048.9414%2034.2554L48.5449%2036.3059C48.3134%2037.8623%2049.3793%2039.3365%2050.9488%2039.5822C52.0417%2039.7601%2053.1536%2039.2819%2053.7711%2038.3664C54.0063%2038.0176%2054.1604%2037.6257%2054.2227%2037.2064L54.5217%2035.2574C54.5514%2035.0756%2054.572%2034.83%2054.5846%2034.5791L54.6028%2034.2338C54.6098%2034.0598%2054.6223%2033.8779%2054.6347%2033.6788C54.6734%2033.1052%2054.7163%2032.4479%2054.6619%2031.8058L54.5867%2030.4289C54.5622%2030.0952%2054.5097%2029.76%2054.4559%2029.4181C54.431%2029.2572%2054.4048%2029.0896%2054.3826%2028.9074L54.2687%2028.104C54.2332%2027.9244%2054.1804%2027.7273%2054.1329%2027.5396L54.0643%2027.2454C54.0195%2027.071%2053.9773%2026.8927%2053.9338%2026.7076C53.8455%2026.3309%2053.7479%2025.9422%2053.613%2025.5571C52.84%2023.0292%2051.5383%2020.5194%2049.8338%2018.2799C47.8544%2015.682%2045.3333%2013.5087%2042.5563%2011.9816Z'%20fill='%234945FF'/%3e%3c/svg%3e";
 const Loader = React__namespace.forwardRef(({ children, small = false, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", "aria-live": "assertive", ref, ...props, children: [
@@ -8039,17 +8136,17 @@ const Combobox = React__namespace.forwardRef(
     value,
     ...restProps
   }, forwardedRef) => {
-    const [internalIsOpen, setInternalIsOpen] = reactUseControllableState.useControllableState({
+    const [internalIsOpen, setInternalIsOpen] = useControllableState$1({
       prop: open,
       defaultProp: defaultOpen,
       onChange: onOpenChange
     });
-    const [internalTextValue, setInternalTextValue] = reactUseControllableState.useControllableState({
+    const [internalTextValue, setInternalTextValue] = useControllableState$1({
       prop: textValue,
       defaultProp: allowCustomValue && !defaultTextValue ? value : defaultTextValue,
       onChange: onTextValueChange
     });
-    const [internalFilterValue, setInternalFilterValue] = reactUseControllableState.useControllableState({
+    const [internalFilterValue, setInternalFilterValue] = useControllableState$1({
       prop: filterValue,
       defaultProp: defaultFilterValue,
       onChange: onFilterValueChange
@@ -8133,9 +8230,9 @@ const Combobox = React__namespace.forwardRef(
         onFilterValueChange: handleFilterValueChange,
         isPrintableCharacter: isPrintableCharacter2,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Trigger$1, { $hasError: hasError, className, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Trigger$5, { $hasError: hasError, className, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
-              startIcon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }) : null,
+              startIcon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "0 0 1.6rem", tag: "span", "aria-hidden": true, children: startIcon }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
                 TextInput$1,
                 {
@@ -8172,7 +8269,7 @@ const Combobox = React__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(DownIcon$1, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, {}) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiPrimitives.Combobox.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$2, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport$1, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uiPrimitives.Combobox.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport$1, { ref: viewportRef, children: [
             children,
             creatable ? /* @__PURE__ */ jsxRuntime.jsx(
               uiPrimitives.Combobox.CreateItem,
@@ -8195,7 +8292,7 @@ const Combobox = React__namespace.forwardRef(
 const IconBox$3 = styledComponents.styled(Box)`
   padding: 0;
 `;
-const Trigger$1 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
+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]};
@@ -8250,7 +8347,7 @@ const DownIcon$1 = styledComponents.styled(uiPrimitives.Combobox.Icon)`
     cursor: inherit;
   }
 `;
-const Content$2 = styledComponents.styled(uiPrimitives.Combobox.Content)`
+const Content$5 = styledComponents.styled(uiPrimitives.Combobox.Content)`
   background: ${({ theme }) => theme.colors.neutral0};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -8259,6 +8356,23 @@ const Content$2 = styledComponents.styled(uiPrimitives.Combobox.Content)`
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({ theme }) => theme.zIndices.popover};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: ${(props) => props.theme.motion.timings["200"]};
+
+    /* The select can't animate out yet, watch https://github.com/radix-ui/primitives/issues/1893, or take a look and solve it yourself. */
+    &[data-state='open'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideDownIn};
+      }
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideUpIn};
+      }
+    }
+  }
 `;
 const Viewport$1 = styledComponents.styled(uiPrimitives.Combobox.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -8295,164 +8409,131 @@ const OptionBox = styledComponents.styled.div`
     font-weight: bold;
   }
 `;
-const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
-const useLockScroll = (lockScroll) => {
-  React__namespace.useEffect(() => {
-    if (lockScroll) {
-      document.body.classList.add("lock-body-scroll");
-    }
-    return () => {
-      document.body.classList.remove("lock-body-scroll");
-    };
-  }, [lockScroll]);
-};
-const DismissibleLayer = DismissibleLayerPrimitive__namespace.Root;
-const getFocusableNodes = (node, includeNegativeTabIndex) => {
-  const nodes = [
-    ...node.querySelectorAll(
-      'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
-    )
-  ];
-  const focusables = nodes.filter((node2) => {
-    if (node2.hasAttribute("disabled"))
-      return false;
-    if (includeNegativeTabIndex)
-      return true;
-    return node2.getAttribute("tabindex") !== "-1";
-  });
-  return focusables;
-};
-const getFocusableNodesWithKeyboardNav = (nodes) => {
-  return nodes.filter((node) => {
-    if (node.tagName === "INPUT") {
-      return node.type !== "checkbox" && node.type !== "radio";
-    }
-    return false;
-  });
-};
-const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...props }) => {
-  const trappedRef = React__namespace.useRef(null);
-  React__namespace.useEffect(() => {
-    let currentFocus = null;
-    if (restoreFocus) {
-      currentFocus = document.activeElement;
-    }
-    return () => {
-      if (currentFocus) {
-        currentFocus.focus();
-      }
-    };
-  }, [restoreFocus]);
-  React__namespace.useEffect(() => {
-    if (!trappedRef.current || skipAutoFocus)
-      return;
-    const focusableChildren = getFocusableNodes(trappedRef.current);
-    if (focusableChildren.length > 0) {
-      const firstElement = focusableChildren[0];
-      firstElement.focus();
-    } else {
-      console.warn(
-        "[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one."
-      );
-    }
-  }, [skipAutoFocus]);
-  const handleKeyDown = (e) => {
-    if (e.key === KeyboardKeys.ESCAPE && onEscape) {
-      onEscape();
-      return;
-    }
-    if (e.key !== KeyboardKeys.TAB)
-      return;
-    const focusableChildren = getFocusableNodes(trappedRef.current);
-    if (focusableChildren.length > 0) {
-      const firstElement = focusableChildren[0];
-      const lastElement = focusableChildren[focusableChildren.length - 1];
-      if (e.shiftKey) {
-        if (firstElement === document.activeElement) {
-          e.preventDefault();
-          lastElement.focus();
-        }
-      } else if (lastElement === document.activeElement) {
-        e.preventDefault();
-        firstElement.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
-};
-const Portal$1 = React__namespace.forwardRef(
-  ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
-    return container ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
-  }
-);
-Portal$1.displayName = "Portal";
-const DialogWrapper = styledComponents.styled(Box)`
+const Root$5 = AlertDialog__namespace.Root;
+const Trigger$4 = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });
+});
+const Content$4 = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Overlay$1, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ContentImpl$1, { ref: forwardedRef, ...props })
+  ] });
+});
+const Overlay$1 = styledComponents.styled(AlertDialog__namespace.Overlay)`
+  background-color: ${(props) => props.theme.colors.neutral800};
+  position: fixed;
   inset: 0;
-  background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
+  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"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
 `;
-const DialogContainer = styledComponents.styled(Box)`
-  max-width: 41.2rem;
-  margin: 0 auto;
+const ContentImpl$1 = styledComponents.styled(AlertDialog__namespace.Content)`
+  max-width: 42rem;
+  height: min-content;
+  width: 100%;
   overflow: hidden;
-  margin-top: 10%;
-`;
-const DialogHeader = styledComponents.styled(Flex)`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const Dialog = ({ onClose, title, as = "h2", isOpen, id, zIndex = "dialog", ...props }) => {
-  const generatedId = useId(id);
-  useLockScroll(isOpen);
-  if (!isOpen) {
-    return null;
-  }
-  const labelledBy = `${generatedId}-label`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { children: /* @__PURE__ */ jsxRuntime.jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogContainer,
-    {
-      "aria-labelledby": labelledBy,
-      "aria-modal": true,
-      background: "neutral0",
-      hasRadius: true,
-      shadow: "popupShadow",
-      role: "dialog",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { padding: 6, justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "beta", as, id: labelledBy, children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props })
-      ]
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  border-radius: ${(props) => props.theme.borderRadius};
+  background-color: ${(props) => props.theme.colors.neutral0};
+  box-shadow: ${(props) => props.theme.shadows.popupShadow};
+  z-index: ${(props) => props.theme.zIndices.modal};
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state='open'] {
+      animation-duration: ${(props) => props.theme.motion.timings["200"]};
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+      animation-name: ${ANIMATIONS.modalPopIn};
     }
-  ) }) }) }) });
-};
-const IconContainer = styledComponents.styled(Box)`
-  svg {
-    width: ${({ theme }) => theme.spaces[6]};
-    height: ${({ theme }) => theme.spaces[6]};
 
-    path {
-      fill: ${({ theme }) => theme.colors.danger600};
+    &[data-state='closed'] {
+      animation-duration: ${(props) => props.theme.motion.timings["120"]};
+      animation-timing-function: ${(props) => props.theme.motion.easings.easeOutQuad};
+      animation-name: ${ANIMATIONS.modalPopOut};
     }
   }
 `;
-const DialogBody = ({ children, icon }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { justifyContent: "center", children: icon }) }),
-    children
-  ] });
-};
-const FooterWrapper = styledComponents.styled(Box)`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-
-  button {
-    width: 100%;
-    display: inline-flex;
-    justify-content: center;
-  }
+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
+    }
+  ) });
+});
+const Title$1 = styledComponents.styled(Typography)`
+  display: flex;
+  justify-content: center;
+  border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
 `;
-const DialogFooter = ({ startAction, endAction }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(FooterWrapper, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 2, children: [
-    startAction,
-    endAction
-  ] }) });
-};
+const Body$1 = React__namespace.forwardRef(({ children, icon, ...restProps }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Flex,
+    {
+      ref: forwardedRef,
+      gap: 2,
+      direction: "column",
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 6,
+      paddingRight: 6,
+      ...restProps,
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon ? React__namespace.cloneElement(icon, {
+          width: 24,
+          height: 24
+        }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
+      ] }) : children
+    }
+  );
+});
+const Description = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { ref: forwardedRef, variant: "omega", ...props, tag: "p" }) });
+});
+const Footer$1 = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Foot$1, { ref: forwardedRef, gap: 2, padding: 4, justifyContent: "space-between", ...props, tag: "footer" });
+});
+const Foot$1 = styledComponents.styled(Flex)`
+  border-top: solid 1px ${(props) => props.theme.colors.neutral150};
+  flex: 1;
+`;
+const Cancel = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Cancel, { ...props, asChild: true, ref: forwardedRef });
+});
+const Action = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog__namespace.Action, { ...props, asChild: true, ref: forwardedRef });
+});
+const Dialog = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Action,
+  Body: Body$1,
+  Cancel,
+  Content: Content$4,
+  Description,
+  Footer: Footer$1,
+  Header: Header$1,
+  Root: Root$5,
+  Trigger: Trigger$4
+}, Symbol.toStringTag, { value: "Module" }));
 let $3db38b7d1fb3fe6a$var$count = 0;
 function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
   React.useEffect(() => {
@@ -8477,47 +8558,6 @@ function $3db38b7d1fb3fe6a$var$createFocusGuard() {
   element.style.cssText = "outline: none; opacity: 0; position: fixed; pointer-events: none";
   return element;
 }
-function useControllableState({
-  prop,
-  defaultProp,
-  onChange = () => {
-  }
-}) {
-  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
-  const isControlled = prop !== void 0;
-  const propValue = prop instanceof Function ? prop(uncontrolledProp) : prop;
-  const value = isControlled ? propValue : uncontrolledProp;
-  const handleChange = uiPrimitives.useCallbackRef(onChange);
-  const setValue = React__namespace.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const setter = nextValue;
-        const value2 = typeof nextValue === "function" ? setter(propValue) : nextValue;
-        if (value2 !== propValue) {
-          handleChange(value2);
-          setUncontrolledProp(nextValue);
-        }
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, propValue, setUncontrolledProp, handleChange]
-  );
-  return [value, setValue];
-}
-function useUncontrolledState({ defaultProp, onChange }) {
-  const uncontrolledState = React__namespace.useState(defaultProp);
-  const [value] = uncontrolledState;
-  const prevValueRef = React__namespace.useRef(value);
-  const handleChange = uiPrimitives.useCallbackRef(onChange);
-  React__namespace.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      handleChange(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef, handleChange]);
-  return uncontrolledState;
-}
 function useDateFormatter(locale, options) {
   const lastOptions = React__namespace.useRef(null);
   if (options && lastOptions.current && isEqual(options, lastOptions.current)) {
@@ -8694,12 +8734,38 @@ const DesignSystemProvider = ({
   theme = lightTheme,
   tooltipConfig
 }) => {
+  useIsomorphicLayoutEffect(() => {
+    const css = document.createElement("style");
+    css.type = "text/css";
+    css.appendChild(
+      document.createTextNode(`
+        * {
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -o-transition: none !important;
+          -ms-transition: none !important;
+          transition: none !important;
+          animation: none !important;
+        }
+    `)
+    );
+    document.head.appendChild(css);
+    window.getComputedStyle(css).opacity;
+    document.head.removeChild(css);
+  }, [theme]);
   return /* @__PURE__ */ jsxRuntime.jsx(Provider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(styledComponents.ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Provider, { ...tooltipConfig, children }),
     /* @__PURE__ */ jsxRuntime.jsx(LiveRegions, {}),
     /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {})
   ] }) });
 };
+const DismissibleLayer = DismissibleLayerPrimitive__namespace.Root;
+const Portal$1 = React__namespace.forwardRef(
+  ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
+    return container ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
+  }
+);
+Portal$1.displayName = "Portal";
 const SelectTrigger = React__namespace.forwardRef(
   ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, ...restProps }, ref) => {
     const triggerRef = React__namespace.useRef(null);
@@ -8811,6 +8877,23 @@ const SelectContent = styledComponents.styled(uiPrimitives.Select.Content)`
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({ theme }) => theme.zIndices.popover};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: ${(props) => props.theme.motion.timings["200"]};
+
+    /* The select can't animate out yet, watch https://github.com/radix-ui/primitives/issues/1893, or take a look and solve it yourself. */
+    &[data-state='open'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideDownIn};
+      }
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideUpIn};
+      }
+    }
+  }
 `;
 const SelectViewport = styledComponents.styled(uiPrimitives.Select.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -8830,6 +8913,7 @@ const itemStyles = styledComponents.css`
   gap: ${({ theme }) => theme.spaces[2]};
   white-space: nowrap;
   user-select: none;
+  color: ${({ theme }) => theme.colors.neutral800};
 
   &:focus-visible {
     outline: none;
@@ -8845,19 +8929,21 @@ const StyledSelectItem = styledComponents.styled(uiPrimitives.Select.Item)`
 
   &[data-state='checked'] {
     font-weight: bold;
+    background-color: ${({ theme }) => theme.colors.primary100};
     color: ${({ theme }) => theme.colors.primary600};
+    font-weight: bold;
   }
 `;
-const Root = uiPrimitives.Select.Root;
-const Trigger = SelectTrigger;
+const Root$4 = uiPrimitives.Select.Root;
+const Trigger$3 = SelectTrigger;
 const Value = SelectValue;
 const Portal = uiPrimitives.Select.Portal;
-const Content$1 = SelectContent;
+const Content$3 = SelectContent;
 const Viewport = SelectViewport;
-const Item = SelectItem;
+const Item$2 = SelectItem;
 const ItemIndicator = uiPrimitives.Select.ItemIndicator;
 const ItemText = uiPrimitives.Select.ItemText;
-const Group = uiPrimitives.Select.Group;
+const Group$1 = uiPrimitives.Select.Group;
 const SingleSelect = React__namespace.forwardRef(
   ({
     children,
@@ -8926,7 +9012,7 @@ const SingleSelect = React__namespace.forwardRef(
     }
     const value = (typeof passedValue !== "undefined" && passedValue !== null ? passedValue.toString() : internalValue) ?? "";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Root,
+      Root$4,
       {
         onOpenChange: handleOpenChange,
         disabled,
@@ -8936,7 +9022,7 @@ const SingleSelect = React__namespace.forwardRef(
         ...restProps,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Trigger,
+            Trigger$3,
             {
               ref: forwardedRef,
               id,
@@ -8951,7 +9037,7 @@ const SingleSelect = React__namespace.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx(Value, { placeholder, textColor: value ? "neutral800" : "neutral600", children: value && customizeContent ? customizeContent(value) : void 0 })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$1, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$3, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport, { ref: viewportRef, children: [
             children,
             /* @__PURE__ */ jsxRuntime.jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
           ] }) }) })
@@ -8962,9 +9048,9 @@ const SingleSelect = React__namespace.forwardRef(
 );
 const SingleSelectOption = React__namespace.forwardRef(
   ({ value, startIcon, children, ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Item, { ref, value: value.toString(), ...restProps, children: [
+    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, { textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
     ] });
   }
 );
@@ -9011,7 +9097,7 @@ const DatePicker$1 = React__namespace.forwardRef(
     const [textInput, setTextInput] = React__namespace.useState(null);
     const [content, setContent] = React__namespace.useState(null);
     const [textValue, setTextValue] = React__namespace.useState();
-    const [value, setValue] = useControllableState({
+    const [value, setValue] = useControllableState$1({
       defaultProp: initialDate ? convertUTCDateToCalendarDate(initialDate) : void 0,
       prop: valueProp ? convertUTCDateToCalendarDate(valueProp) : void 0,
       onChange(date2) {
@@ -9055,7 +9141,7 @@ const DatePicker$1 = React__namespace.forwardRef(
       },
       [value]
     );
-    React__namespace.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (valueProp) {
         const date2 = convertUTCDateToCalendarDate(valueProp);
         setTextValue(formatter.format(date2.toDate(timeZone)));
@@ -9064,7 +9150,7 @@ const DatePicker$1 = React__namespace.forwardRef(
         setTextValue("");
       }
     }, [valueProp, formatter, timeZone]);
-    React__namespace.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (initialDate && textValue === void 0) {
         const date2 = convertUTCDateToCalendarDate(initialDate);
         setTextValue(formatter.format(date2.toDate(timeZone)));
@@ -9433,7 +9519,7 @@ const CONTENT_NAME = "DatePickerContent";
 const DatePickerContent = React__namespace.forwardRef((props, forwardedRef) => {
   const [fragment, setFragment] = React__namespace.useState();
   const context = useDatePickerContext(CONTENT_NAME);
-  React__namespace.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setFragment(new DocumentFragment());
   }, []);
   if (!context.open) {
@@ -9562,7 +9648,7 @@ const DatePickerCalendar = React__namespace.forwardRef(
     const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
     return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Root$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
           SingleSelect,
           {
             "aria-label": monthSelectLabel,
@@ -9571,7 +9657,7 @@ const DatePickerCalendar = React__namespace.forwardRef(
             children: months.map((month) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value: month, children: month }, month))
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Root$1, { children: /* @__PURE__ */ jsxRuntime.jsx(SingleSelect, { value: calendarDate.year.toString(), "aria-label": yearSelectLabel, onChange: handleYearChange, children: years.map((year) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value: year, children: year }, year)) }) })
+        /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(SingleSelect, { value: calendarDate.year.toString(), "aria-label": yearSelectLabel, onChange: handleYearChange, children: years.map((year) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value: year, children: year }, year)) }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("table", { role: "grid", children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day)) }) }),
@@ -9724,7 +9810,7 @@ const TimePicker$1 = React__namespace.forwardRef(
   ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
     const context = useDesignSystem("TimePicker");
     const [textValue, setTextValue] = React__namespace.useState("");
-    const [value, setValue] = reactUseControllableState.useControllableState({
+    const [value, setValue] = useControllableState$1({
       prop: valueProp,
       defaultProp: defaultValue,
       onChange
@@ -9794,7 +9880,7 @@ const TimePicker$1 = React__namespace.forwardRef(
         allowCustomValue: true,
         placeholder: `--${separator}--`,
         autocomplete: "none",
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(StyledClock, {}),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, { fill: "neutral500" }),
         inputMode: "numeric",
         pattern: `\\d{2}\\${separator}\\d{2}`,
         textValue,
@@ -9805,14 +9891,6 @@ const TimePicker$1 = React__namespace.forwardRef(
     );
   }
 );
-const StyledClock = styledComponents.styled(icons.Clock)`
-  height: 1rem;
-  width: 1rem;
-
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
 const DatePicker = styledComponents.styled(DatePicker$1)`
   flex: 1 1 70%;
   min-width: 120px;
@@ -9837,7 +9915,7 @@ const DateTimePicker = React__namespace.forwardRef(
     ...props
   }, forwardedRef) => {
     const DatePickerElement2 = React__namespace.useRef(null);
-    const [dateValue, setDateValue] = useControllableState({
+    const [dateValue, setDateValue] = useControllableState$1({
       defaultProp: initialDate ? convertUTCDateToCalendarDateTime(initialDate, false) : void 0,
       prop: value ? convertUTCDateToCalendarDateTime(value, false) : value ?? void 0,
       onChange(date$1) {
@@ -9889,7 +9967,7 @@ const DateTimePicker = React__namespace.forwardRef(
     const { error, id, labelNode } = useField("DateTimePicker");
     const hasError = Boolean(error) || hasErrorProp;
     return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Root$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
         DatePicker,
         {
           ...props,
@@ -9903,7 +9981,7 @@ const DateTimePicker = React__namespace.forwardRef(
           "aria-label": dateLabel
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Root$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
         TimePicker,
         {
           hasError,
@@ -9928,15 +10006,25 @@ const convertUTCDateToCalendarDateTime = (date$1, resetTime = true) => {
   }
   return date.toCalendarDateTime(zonedDateTime);
 };
-const DividerWrapper = styledComponents.styled(Box)`
+const Divider = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DividerImpl,
+    {
+      ref: forwardedRef,
+      background: "neutral150",
+      ...props,
+      "data-orientation": "horizontal",
+      role: "separator",
+      tag: "div"
+    }
+  );
+});
+const DividerImpl = styledComponents.styled(Box)`
   height: 1px;
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
 `;
-const Divider = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(DividerWrapper, { ...props, background: "neutral150", tag: "hr" });
-};
 const EmptyStateIconWrapper = styledComponents.styled(Box)`
   svg {
     height: 8.8rem;
@@ -9966,17 +10054,92 @@ const EmptyStateLayout = ({
     }
   );
 };
-const Grid = (props) => {
-  const { gap = 0, gridCols = 12, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(GridWrapper, { $gap: gap, $gridCols: gridCols, ...rest });
+const getFocusableNodes = (node, includeNegativeTabIndex) => {
+  const nodes = [
+    ...node.querySelectorAll(
+      'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+    )
+  ];
+  const focusables = nodes.filter((node2) => {
+    if (node2.hasAttribute("disabled"))
+      return false;
+    if (includeNegativeTabIndex)
+      return true;
+    return node2.getAttribute("tabindex") !== "-1";
+  });
+  return focusables;
+};
+const getFocusableNodesWithKeyboardNav = (nodes) => {
+  return nodes.filter((node) => {
+    if (node.tagName === "INPUT") {
+      return node.type !== "checkbox" && node.type !== "radio";
+    }
+    return false;
+  });
+};
+const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...props }) => {
+  const trappedRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    let currentFocus = null;
+    if (restoreFocus) {
+      currentFocus = document.activeElement;
+    }
+    return () => {
+      if (currentFocus) {
+        currentFocus.focus();
+      }
+    };
+  }, [restoreFocus]);
+  React__namespace.useEffect(() => {
+    if (!trappedRef.current || skipAutoFocus)
+      return;
+    const focusableChildren = getFocusableNodes(trappedRef.current);
+    if (focusableChildren.length > 0) {
+      const firstElement = focusableChildren[0];
+      firstElement.focus();
+    } else {
+      console.warn(
+        "[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one."
+      );
+    }
+  }, [skipAutoFocus]);
+  const handleKeyDown = (e) => {
+    if (e.key === KeyboardKeys.ESCAPE && onEscape) {
+      onEscape();
+      return;
+    }
+    if (e.key !== KeyboardKeys.TAB)
+      return;
+    const focusableChildren = getFocusableNodes(trappedRef.current);
+    if (focusableChildren.length > 0) {
+      const firstElement = focusableChildren[0];
+      const lastElement = focusableChildren[focusableChildren.length - 1];
+      if (e.shiftKey) {
+        if (firstElement === document.activeElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else if (lastElement === document.activeElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
 };
-const GridWrapper = styledComponents.styled(Box)`
+const Root$3 = forwardRef((props, forwardedRef) => {
+  const { gap = 0, gridCols = 12, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$1, { ref: forwardedRef, $gap: gap, $gridCols: gridCols, ...rest });
+});
+const Wrapper$1 = styledComponents.styled(Box)`
   display: grid;
   grid-template-columns: repeat(${({ $gridCols }) => $gridCols}, 1fr);
   ${({ theme, $gap }) => handleResponsiveValues("gap", $gap, theme)}
 `;
-const GridItemImpl = ({ col, s, xs, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(GridItem, { $col: col, $s: s, $xs: xs, ...props });
-const GridItem = 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)`
   grid-column: span ${({ $col }) => $col ?? 1};
   max-width: 100%;
 
@@ -9988,6 +10151,11 @@ const GridItem = styledComponents.styled(Box)`
     grid-column: span ${({ $xs }) => $xs};
   }
 `;
+const Grid = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Item: ItemImpl,
+  Root: Root$3
+}, Symbol.toStringTag, { value: "Module" }));
 const VARIANT_DEFAULT = "tertiary";
 const VARIANT_SECONDARY = "secondary";
 const SIZES = ["S", "M", "L"];
@@ -10063,20 +10231,22 @@ const IconButtonWrapper = styledComponents.styled(BaseButton)`
   }
 `;
 const IconButtonGroup = styledComponents.styled(Flex)`
-  & span:first-child button {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+  & ${IconButtonWrapper}:first-child {
     border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
   }
 
-  & span:last-child button {
+  & ${IconButtonWrapper}:last-child {
     border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
   }
 
   & ${IconButtonWrapper} {
     border-radius: 0;
-    border-left: none;
     color: ${({ theme }) => theme.colors.neutral700};
 
+    & + ${IconButtonWrapper} {
+      border-left: none;
+    }
+
     &:hover {
       background-color: ${({ theme }) => theme.colors.neutral100};
       color: ${({ theme }) => theme.colors.neutral800};
@@ -10268,71 +10438,6 @@ const JSONInputContainer = styledComponents.styled(Flex)`
     background-color: #4a4a6a;
   }
 `;
-const KeyboardNavigable = ({ tagName, attributeName = "", ...props }) => {
-  const isValidFocusedElement = () => {
-    const focused = document.activeElement;
-    if (!focused) {
-      return false;
-    }
-    if (tagName) {
-      return focused.tagName.toLowerCase() === tagName;
-    }
-    return focused.hasAttribute(attributeName);
-  };
-  const queryElement = (parentEl) => {
-    if (tagName) {
-      return parentEl.querySelectorAll(tagName);
-    }
-    return parentEl.querySelectorAll(`[${attributeName}]`);
-  };
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case KeyboardKeys.RIGHT:
-      case KeyboardKeys.DOWN: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-          const focused = document.activeElement;
-          const allElements = [...queryElement(e.currentTarget)];
-          const focusedIndex = allElements.findIndex((node) => node === focused);
-          const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
-          allElements[nextIndex].focus();
-        }
-        break;
-      }
-      case KeyboardKeys.LEFT:
-      case KeyboardKeys.UP: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-          const focused = document.activeElement;
-          const allElements = [...queryElement(e.currentTarget)];
-          const focusedIndex = allElements.findIndex((node) => node === focused);
-          const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
-          allElements[nextIndex].focus();
-        }
-        break;
-      }
-      case KeyboardKeys.HOME: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-          const allElements = queryElement(e.currentTarget);
-          const focusElement = allElements.item(0);
-          focusElement.focus();
-        }
-        break;
-      }
-      case KeyboardKeys.END: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-          const allElements = queryElement(e.currentTarget);
-          const focusElement = allElements.item(allElements.length - 1);
-          focusElement.focus();
-        }
-        break;
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { onKeyDown: handleKeyDown, ...props });
-};
 const LinkButton = forwardRef(
   ({ variant: variant2 = "default", startIcon, endIcon, disabled = false, children, size = "S", ...props }, ref) => {
     const paddingX = size === "S" ? 2 : "10px";
@@ -10425,62 +10530,195 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
-const ModalContext = React__namespace.createContext(() => {
-});
-const useModal = () => React__namespace.useContext(ModalContext);
-const ModalWrapper = styledComponents.styled(Flex)`
-  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
-  inset: 0;
+const ScrollAreaImpl$1 = React__namespace.forwardRef(
+  ({ children, viewportRef, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaViewport, { ref: viewportRef, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) })
+    ] });
+  }
+);
+const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
 `;
-const ModalLayout = ({ onClose, labelledBy, ...props }) => {
-  useLockScroll(true);
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(ModalWrapper, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: "modal", children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { children: /* @__PURE__ */ jsxRuntime.jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      "aria-labelledby": labelledBy,
-      "aria-modal": true,
-      onClick: (e) => e.stopPropagation(),
-      background: "neutral0",
-      hasRadius: true,
-      role: "dialog",
-      shadow: "popupShadow",
-      width: "83rem",
-      ...props
-    }
-  ) }) }) }) }) });
-};
-const ModalHeaderWrapper = styledComponents.styled(Box)`
-  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
+  min-width: 100%;
+  padding-inline-end: 4px;
 `;
-const ModalHeader = ({ children, closeLabel = "Close the modal" }) => {
-  const onClose = useModal();
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalHeaderWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justifyContent: "space-between", children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onClose, label: closeLabel, withTooltip: false, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) })
-  ] }) });
-};
-const ModalFooterWrapper = styledComponents.styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
+  display: flex;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  &[data-orientation='vertical'] {
+    width: 0.4rem;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+    height: 0.4rem;
+  }
 `;
-const ModalFooter = ({ startActions, endActions }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalFooterWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: 2, children: startActions }),
-    /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: 2, children: endActions })
-  ] }) });
-};
-const ModalBodyWrapper = styledComponents.styled(Box)`
-  overflow: auto;
-  max-height: 60vh;
+const Thumb = styledComponents.styled(ScrollArea__namespace.Thumb)`
+  position: relative;
+  flex: 1;
+  background-color: ${(props) => props.theme.colors.neutral150};
+  border-radius: var(--scrollbar-size);
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+  }
 `;
-const ModalBody = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalBodyWrapper, { padding: 7, ...props });
-};
-const INITIAL_VALUE = "";
-const NumberInput = React__namespace.forwardRef(
-  ({ startAction, locale: defaultLocale, onValueChange, value, step = 1, disabled = false, ...props }, ref) => {
-    const designContext = useDesignSystem("NumberInput");
+const Root$2 = Dialog__namespace.Root;
+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 })
+  ] });
+});
+const Overlay = styledComponents.styled(Dialog__namespace.Overlay)`
+  background-color: ${(props) => props.theme.colors.neutral800};
+  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"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
+`;
+const ContentImpl = styledComponents.styled(Dialog__namespace.Content)`
+  max-width: 83rem;
+  max-height: 80vh;
+  height: min-content;
+  width: 60%;
+  overflow: hidden;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  border-radius: ${(props) => props.theme.borderRadius};
+  background-color: ${(props) => props.theme.colors.neutral0};
+  box-shadow: ${(props) => props.theme.shadows.popupShadow};
+  z-index: ${(props) => props.theme.zIndices.modal};
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state='open'] {
+      animation-duration: ${(props) => props.theme.motion.timings["200"]};
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+      animation-name: ${ANIMATIONS.modalPopIn};
+    }
+
+    &[data-state='closed'] {
+      animation-duration: ${(props) => props.theme.motion.timings["120"]};
+      animation-timing-function: ${(props) => props.theme.motion.easings.easeOutQuad};
+      animation-name: ${ANIMATIONS.modalPopOut};
+    }
+  }
+`;
+const Close = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { ...props, asChild: true, ref: forwardedRef });
+});
+const Header = React__namespace.forwardRef(
+  ({ children, closeLabel = "Close modal", ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Head,
+      {
+        ref: forwardedRef,
+        padding: 4,
+        paddingLeft: 5,
+        paddingRight: 5,
+        background: "neutral100",
+        justifyContent: "space-between",
+        ...restProps,
+        tag: "header",
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(Close, { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { withTooltip: false, label: closeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }) })
+        ]
+      }
+    );
+  }
+);
+const Head = styledComponents.styled(Flex)`
+  border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
+`;
+const Title = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { tag: "h2", variant: "omega", fontWeight: "bold", ref: forwardedRef, ...props }) });
+});
+const Body = React__namespace.forwardRef(({ children, ...restProps }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BodyScroll, { ref: forwardedRef, ...restProps, children });
+});
+const BodyScroll = styledComponents.styled(ScrollAreaImpl$1)`
+  padding-inline: ${(props) => props.theme.spaces[8]};
+
+  & > div {
+    padding-block: ${(props) => props.theme.spaces[8]};
+
+    & > div {
+      // the scroll area component applies a display: table to the child, which we don't want.
+      display: block !important;
+    }
+  }
+`;
+const Footer = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Foot,
+    {
+      ref: forwardedRef,
+      padding: 4,
+      paddingLeft: 5,
+      paddingRight: 5,
+      background: "neutral100",
+      justifyContent: "space-between",
+      ...props,
+      tag: "footer"
+    }
+  );
+});
+const Foot = styledComponents.styled(Flex)`
+  border-top: solid 1px ${(props) => props.theme.colors.neutral150};
+  flex: 1;
+`;
+const Modal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Body,
+  Close,
+  Content: Content$2,
+  Footer,
+  Header,
+  Root: Root$2,
+  Title,
+  Trigger: Trigger$2
+}, Symbol.toStringTag, { value: "Module" }));
+const INITIAL_VALUE = "";
+const NumberInput = React__namespace.forwardRef(
+  ({ startAction, locale: defaultLocale, onValueChange, value, step = 1, disabled = false, ...props }, ref) => {
+    const designContext = useDesignSystem("NumberInput");
     const locale = defaultLocale || designContext.locale;
     const numberParserRef = React__namespace.useRef(new number.NumberParser(locale, { style: "decimal" }));
     const numberFormaterRef = React__namespace.useRef(new number.NumberFormatter(locale, { maximumFractionDigits: 20 }));
@@ -10600,6 +10838,37 @@ const ArrowButton = styledComponents.styled.button`
     transform: ${({ $reverse }) => $reverse ? "rotateX(180deg)" : void 0};
   }
 `;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  }
+}) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const propValue = prop instanceof Function ? prop(uncontrolledProp) : prop;
+  const value = isControlled ? propValue : uncontrolledProp;
+  const handleChange = uiPrimitives.useCallbackRef(onChange);
+  const setValue = React__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue;
+        const value2 = typeof nextValue === "function" ? setter(propValue) : nextValue;
+        if (value2 !== propValue) {
+          handleChange(value2);
+          setUncontrolledProp(nextValue);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, propValue, setUncontrolledProp, handleChange]
+  );
+  return [value, setValue];
+}
 const PaginationContext = React__namespace.createContext({ activePage: 1, pageCount: 1 });
 const usePagination = () => React__namespace.useContext(PaginationContext);
 const Pagination = ({ children, label = "Pagination", activePage, pageCount }) => {
@@ -10677,133 +10946,48 @@ const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Box, {
   /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children }),
   /* @__PURE__ */ jsxRuntime.jsx(Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "…" })
 ] });
-const POPOVER_PLACEMENTS = [
-  "top",
-  "top-start",
-  "top-end",
-  "right",
-  "right-start",
-  "right-end",
-  "bottom",
-  "bottom-start",
-  "bottom-end",
-  "left",
-  "left-start",
-  "left-end"
-];
-const PopoverWrapper = styledComponents.styled(Box)`
+const Root$1 = Popover__namespace.Root;
+const Trigger$1 = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { ...props, asChild: true, ref: forwardedRef });
+});
+const Content$1 = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { sideOffset: 4, side: "bottom", align: "start", ...props, ref: forwardedRef }) });
+});
+const PopoverContent = styledComponents.styled(Popover__namespace.Content)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   z-index: ${({ theme }) => theme.zIndices.popover};
+  background-color: ${(props) => props.theme.colors.neutral0};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const Content = React__namespace.forwardRef(
-  ({
-    source,
-    children,
-    spacing = 0,
-    fullWidth = false,
-    placement = "bottom-start",
-    centered = false,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onDismiss,
-    onFocusOutside,
-    ...props
-  }, forwardedRef) => {
-    const [content, setContent] = React__namespace.useState(null);
-    const [width, setWidth] = React__namespace.useState(void 0);
-    const isRightClickOutsideRef = React__namespace.useRef(false);
-    const { x, y, refs, strategy } = reactDom$1.useFloating({
-      strategy: "fixed",
-      placement: centered ? "bottom" : placement,
-      middleware: [
-        reactDom$1.offset({
-          mainAxis: spacing
-        }),
-        reactDom$1.shift(),
-        reactDom$1.flip()
-      ],
-      elements: {
-        reference: source.current
-      },
-      whileElementsMounted: reactDom$1.autoUpdate
-    });
-    React__namespace.useLayoutEffect(() => {
-      if (fullWidth) {
-        setWidth(source.current.offsetWidth);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: ${(props) => props.theme.motion.timings["200"]};
+
+    &[data-state='open'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideDownIn};
       }
-    }, [fullWidth, source]);
-    React__namespace.useEffect(() => {
-      if (content)
-        return ariaHidden.hideOthers(content);
-    }, [content]);
-    const handleDismiss = uiPrimitives.useCallbackRef(onDismiss);
-    React__namespace.useEffect(() => {
-      const close = () => {
-        handleDismiss();
-      };
-      window.addEventListener("blur", close);
-      window.addEventListener("resize", close);
-      return () => {
-        window.removeEventListener("blur", close);
-        window.removeEventListener("resize", close);
-      };
-    }, [handleDismiss]);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node), refs.setFloating);
-    return /* @__PURE__ */ jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { allowPinchZoom: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactFocusScope.FocusScope,
-      {
-        asChild: true,
-        loop: true,
-        trapped: true,
-        onUnmountAutoFocus: (event) => {
-          event.preventDefault();
-          if (!isRightClickOutsideRef.current)
-            source.current?.focus({ preventScroll: true });
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DismissibleLayer,
-          {
-            asChild: true,
-            onEscapeKeyDown,
-            onPointerDownOutside: uiPrimitives.composeEventHandlers(
-              onPointerDownOutside,
-              (event) => {
-                const originalEvent = event.detail.originalEvent;
-                const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-                const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-                isRightClickOutsideRef.current = isRightClick;
-              },
-              { checkForDefaultPrevented: false }
-            ),
-            onFocusOutside: uiPrimitives.composeEventHandlers(onFocusOutside, (event) => event.preventDefault(), {
-              checkForDefaultPrevented: false
-            }),
-            onDismiss,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              PopoverWrapper,
-              {
-                ref: composedRefs,
-                style: {
-                  left: x,
-                  top: y,
-                  position: strategy,
-                  width: width || void 0
-                },
-                hasRadius: true,
-                background: "neutral0",
-                padding: 1,
-                ...props,
-                children
-              }
-            )
-          }
-        )
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideUpIn};
       }
-    ) });
+    }
+
+    &[data-state='closed'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.easeOutQuad};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideDownOut};
+      }
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideUpOut};
+      }
+    }
   }
-);
-const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
+`;
+const ScrollAreaImpl = ({ children, intersectionId, onReachEnd, ...props }) => {
   const popoverRef = React__namespace.useRef(null);
   const generatedIntersectionId = useId();
   useIntersection(popoverRef, onReachEnd ?? (() => {
@@ -10811,62 +10995,20 @@ const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
     selectorToWatch: `#${stripReactIdOfColon(generatedIntersectionId)}`,
     skipWhen: !intersectionId || !onReachEnd
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverScrollable, { ref: popoverRef, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverScrollArea, { ref: popoverRef, ...props, children: [
     children,
     intersectionId && onReachEnd && /* @__PURE__ */ jsxRuntime.jsx(Box, { id: stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" })
   ] });
 };
-const PopoverScrollable = styledComponents.styled(Box)`
-  max-height: 20rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${({ theme }) => theme.colors.neutral0};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors.neutral150};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    margin-right: 10px;
-  }
+const PopoverScrollArea = styledComponents.styled(ScrollAreaImpl$1)`
+  height: 20rem;
 `;
-const Popover = ({
-  children,
-  source,
-  spacing,
-  fullWidth,
-  placement,
-  centered,
-  onEscapeKeyDown,
-  onPointerDownOutside,
-  onDismiss,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    Content,
-    {
-      source,
-      spacing,
-      fullWidth,
-      placement,
-      centered,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onDismiss,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Scrolling, { ...restProps, children })
-    }
-  ) });
-};
-const primitives = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Content,
-  Scrolling
+  Content: Content$1,
+  Root: Root$1,
+  ScrollArea: ScrollAreaImpl,
+  Trigger: Trigger$1
 }, Symbol.toStringTag, { value: "Module" }));
 const ProgressbarBase = styledComponents.styled(Box)`
   &:before {
@@ -10898,12 +11040,85 @@ const ProgressBar = ({ min = 0, max = 100, value = 0, children, size = "M", ...p
     }
   );
 };
-const Radio = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { alignItems: "center", tag: "label", gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BaseRadio, { ...props }),
-    /* @__PURE__ */ jsxRuntime.jsx(Typography, { textColor: "neutral800", children })
+const Group = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { ref: forwardedRef, ...props });
+});
+const RadioGroupRoot = styledComponents.styled(RadioGroup__namespace.Root)`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spaces[3]};
+`;
+const Item = React__namespace.forwardRef(({ children, id: idProp, ...restProps }, forwardedRef) => {
+  const id = useId(idProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { id, ref: forwardedRef, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupIndicator, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography, { tag: "label", htmlFor: id, children })
   ] });
-};
+});
+const RadioGroupItem = styledComponents.styled(RadioGroup__namespace.Item)`
+  background: ${(props) => props.theme.colors.neutral0};
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 2rem;
+  border-radius: 50%;
+  border: 1px solid ${(props) => props.theme.colors.neutral300};
+  position: relative;
+  z-index: 0;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: border-color ${(props) => props.theme.motion.timings["120"]}
+      ${(props) => props.theme.motion.easings.easeOutQuad};
+  }
+
+  &[data-state='checked'] {
+    border: 1px solid ${(props) => props.theme.colors.primary600};
+  }
+
+  &[data-disabled] {
+    background-color: ${(props) => props.theme.colors.neutral200};
+  }
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+  }
+`;
+const RadioGroupIndicator = styledComponents.styled(RadioGroup__namespace.Indicator)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &[data-state='checked'] {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: ${ANIMATIONS.popIn} ${(props) => props.theme.motion.timings["200"]};
+    }
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: ${(props) => props.theme.colors.primary600};
+  }
+`;
+const Radio = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Group,
+  Item
+}, Symbol.toStringTag, { value: "Module" }));
 const focusFocusable = (node) => {
   const nextNode = node.querySelector('[tabindex="0"]');
   if (nextNode) {
@@ -11046,7 +11261,7 @@ const RawTd = ({ coords = { col: 0, row: 0 }, tag = "td", ...props }) => {
     }
   };
   const isFocused = rowIndex === coords.row - 1 && colIndex === coords.col - 1;
-  React__namespace.useLayoutEffect(() => {
+  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");
@@ -11069,7 +11284,7 @@ const RawTd = ({ coords = { col: 0, row: 0 }, tag = "td", ...props }) => {
     }
     setTableValues({ rowIndex: coords.row - 1, colIndex: coords.col - 1 });
   }, [coords, setTableValues]);
-  React__namespace.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const cell = tdRef.current;
     const focusableNodes = getFocusableNodes(cell, true);
     focusableNodes.forEach((node) => {
@@ -11153,7 +11368,7 @@ const Searchbar = React__namespace.forwardRef(
       inputRef.current.focus();
     };
     const actualRef = composeRefs(ref, inputRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Root$1, { name, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Root$6, { name, children: [
       /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(Label, { children }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         SearchbarInput,
@@ -11161,7 +11376,7 @@ const Searchbar = React__namespace.forwardRef(
           ref: actualRef,
           value,
           startAction: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { "aria-hidden": true }),
-          endAction: isCompleting ? /* @__PURE__ */ jsxRuntime.jsx(Action, { label: clearLabel, onClick: handleClear, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) }) : void 0,
+          endAction: isCompleting ? /* @__PURE__ */ jsxRuntime.jsx(Action$1, { label: clearLabel, onClick: handleClear, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) }) : void 0,
           ...props
         }
       )
@@ -11290,7 +11505,7 @@ const MultiSelect = React__namespace.forwardRef(
       ariaDescription = `${id}-hint`;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Root,
+      Root$4,
       {
         onOpenChange: handleOpenChange,
         disabled,
@@ -11301,7 +11516,7 @@ const MultiSelect = React__namespace.forwardRef(
         multi: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Trigger,
+            Trigger$3,
             {
               ref: forwardedRef,
               id,
@@ -11317,7 +11532,7 @@ const MultiSelect = React__namespace.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx(Value, { placeholder, textColor: value?.length ? "neutral800" : "neutral600", children: value?.length ? withTags ? renderTags : customizeContent ? customizeContent(value) : void 0 : void 0 })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$1, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(Content$3, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxRuntime.jsxs(Viewport, { ref: viewportRef, children: [
             children,
             /* @__PURE__ */ jsxRuntime.jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
           ] }) }) })
@@ -11328,74 +11543,20 @@ const MultiSelect = React__namespace.forwardRef(
 );
 const MultiSelectOption = React__namespace.forwardRef(
   ({ value, children, startIcon, ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Item, { ref, value: value.toString(), ...restProps, children: [
+    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(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsxRuntime.jsx(
-        CheckMark,
-        {
-          hasRadius: true,
-          overflow: "hidden",
-          position: "relative",
-          $indeterminate: isIntermediate,
-          $selected: isSelected,
-          zIndex: 1,
-          height: "18px",
-          width: "18px"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
+      /* @__PURE__ */ jsxRuntime.jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { checked: isIntermediate ? "indeterminate" : isSelected }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
     ] });
   }
 );
-const CheckMark = styledComponents.styled(Box)`
-  border: 1px solid
-    ${({ theme, $selected, $indeterminate }) => $selected || $indeterminate ? theme.colors.primary600 : theme.colors.neutral300};
-  background-color: ${({ theme, $selected, $indeterminate }) => $selected || $indeterminate ? theme.colors.primary600 : theme.colors.neutral0};
-
-  ${({ theme, $indeterminate }) => $indeterminate && styledComponents.css`
-      &::after {
-        content: '';
-        display: block;
-        position: relative;
-        color: white;
-        height: 2px;
-        width: 10px;
-        background-color: ${theme.colors.neutral0};
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-    `}
-
-  ${({ $selected }) => $selected && styledComponents.css`
-      &::after {
-        content: '';
-        background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
-        width: 100%;
-        height: 100%;
-        position: absolute;
-      }
-    `}
-`;
 const MultiSelectGroup = React__namespace.forwardRef(
   ({ children, label, startIcon, values = [], ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Group, { ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Item, { value: values, ...restProps, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Group$1, { ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Item$2, { value: values, ...restProps, children: [
         startIcon && /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-        /* @__PURE__ */ jsxRuntime.jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsxRuntime.jsx(
-          CheckMark,
-          {
-            hasRadius: true,
-            overflow: "hidden",
-            position: "relative",
-            $indeterminate: isIntermediate,
-            $selected: isSelected,
-            zIndex: 1,
-            height: "18px",
-            width: "18px"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { textColor: "neutral800", children: label })
+        /* @__PURE__ */ jsxRuntime.jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsxRuntime.jsx(CheckboxImpl, { checked: isIntermediate ? "indeterminate" : isSelected }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { children: label })
       ] }),
       children
     ] });
@@ -11460,13 +11621,6 @@ const SubNavWrapper = styledComponents.styled(Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   z-index: 1;
 `;
-const usePrevious = (value) => {
-  const ref = React__namespace.useRef();
-  React__namespace.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
 const CustomDivider = styledComponents.styled(Divider)`
   width: 2.4rem;
   background-color: ${({ theme }) => theme.colors.neutral200};
@@ -11486,7 +11640,7 @@ const SubNavHeader = ({
   id
 }) => {
   const [isSearchOpen, setSearchOpen] = React__namespace.useState(false);
-  const previousSearchOpenValue = usePrevious(isSearchOpen);
+  const previousSearchOpenValue = uiPrimitives.usePrev(isSearchOpen);
   const clearButtonId = useId(id);
   const searchRef = React__namespace.useRef(void 0);
   const searchButtonRef = React__namespace.useRef(void 0);
@@ -11793,275 +11947,136 @@ const SwitchButton = styledComponents.styled.button`
     transform: translateX(1rem);
   }
 `;
-const SimpleTabBox = styledComponents.styled(Box)`
-  border-bottom: 2px solid
-    ${({ theme, $selected, $hasError }) => {
-  if ($selected) {
-    if ($hasError) {
-      return theme.colors.danger600;
-    }
-    return theme.colors.primary600;
+const [TabsProvider, useTabs] = createContext("Tabs");
+const Root = React__namespace.forwardRef(
+  ({ disabled = false, variant: variant2 = "regular", hasError, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { disabled, hasError, variant: variant2, children: /* @__PURE__ */ jsxRuntime.jsx(TabsRoot, { ref: forwardedRef, ...props }) });
   }
-  return "transparent";
-}};
+);
+const TabsRoot = styledComponents.styled(Tabs__namespace.Root)`
+  width: 100%;
+  position: relative;
 `;
-const DefaultTabBox = styledComponents.styled(Box)`
-  border-bottom: 1px solid ${({ theme, $selected }) => $selected ? theme.colors.neutral0 : theme.colors.neutral150};
+const List = React__namespace.forwardRef((props, forwardedRef) => {
+  const { variant: variant2 } = useTabs("List");
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsList, { ref: forwardedRef, ...props, $variant: variant2 });
+});
+const TabsList = styledComponents.styled(Tabs__namespace.List)`
+  display: flex;
+  align-items: ${(props) => props.$variant === "regular" ? "flex-end" : "unset"};
+  position: relative;
+  z-index: 0;
 `;
-const DefaultTabButton = styledComponents.styled.button`
-  border: none;
-  background: transparent;
-  padding: 0;
-
-  & + & > ${DefaultTabBox} {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
+const Trigger = React__namespace.forwardRef(
+  ({ children, disabled: disabledProp, ...props }, forwardedRef) => {
+    const { disabled: disabledContext, variant: variant2, hasError } = useTabs("Trigger");
+    const isDisabled = disabledContext === true || disabledContext === props.value || disabledProp;
+    const isErrored = hasError === props.value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { ref: forwardedRef, ...props, $hasError: isErrored, $variant: variant2, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TriggerTypography, { fontWeight: "bold", variant: variant2 === "simple" ? "sigma" : void 0, children }),
+      variant2 === "simple" ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, {}) : null
+    ] });
   }
+);
+const TabBar = styledComponents.styled.span`
+  display: block;
+  width: 100%;
+  background-color: currentColor;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  height: 0.2rem;
 
-  ${DefaultTabBox} {
-    border-right: ${({ theme, $showRightBorder }) => $showRightBorder ? `1px solid ${theme.colors.neutral150}` : "none"};
+  @media (prefers-reduced-motion: no-preference) {
+    transition: ${(props) => `opacity 200ms ${props.theme.motion.easings.authenticMotion}`};
   }
+`;
+const TriggerTypography = styledComponents.styled(Typography)``;
+const TabsTrigger = styledComponents.styled(Tabs__namespace.Trigger)`
+  position: relative;
+  color: ${(props) => props.$hasError ? props.theme.colors.danger600 : props.theme.colors.neutral600};
+  cursor: pointer;
+  z-index: 0;
 
-  // Hack preventing the outline from being overflow by the following tab
-  outline-offset: -2px;
+  ${(props) => {
+  if (props.$variant === "simple") {
+    return styledComponents.css`
+        padding-block: ${(props2) => props2.theme.spaces[4]};
+        padding-inline: ${(props2) => props2.theme.spaces[4]};
 
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-const DefaultTabsRow = styledComponents.styled(Flex)`
-  & > * {
-    flex: 1;
-  }
+        & > ${TriggerTypography} {
+          line-height: 1.2rem;
+        }
+
+        &[data-state='active'] {
+          color: ${props.$hasError ? props.theme.colors.danger600 : props.theme.colors.primary700};
 
-  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
+          & > ${TabBar} {
+            opacity: 1;
+          }
+        }
+      `;
+  } else {
+    return styledComponents.css`
+        padding-block: ${(props2) => props2.theme.spaces[3]};
+        padding-inline: ${(props2) => props2.theme.spaces[3]};
+        flex: 1;
+        background-color: ${(props2) => props2.theme.colors.neutral100};
+        border-bottom: solid 1px ${(props2) => props2.theme.colors.neutral150};
+
+        &:not([data-state='active']) + &:not([data-state='active']) {
+          border-left: solid 1px ${(props2) => props2.theme.colors.neutral150};
+        }
+
+        &[data-state='active'] {
+          padding-block: ${(props2) => props2.theme.spaces[4]};
+          padding-inline: ${(props2) => props2.theme.spaces[4]};
+          color: ${props.$hasError ? props.theme.colors.danger600 : props.theme.colors.primary700};
+          border-top-right-radius: ${(props2) => props2.theme.borderRadius};
+          border-top-left-radius: ${(props2) => props2.theme.borderRadius};
+          background-color: ${(props2) => props2.theme.colors.neutral0};
+          border-bottom: solid 1px ${(props2) => props2.theme.colors.neutral0};
+          box-shadow: ${props.theme.shadows.tableShadow};
+          z-index: 1;
+        }
+      `;
   }
+}}
 
-  & ${DefaultTabButton}:last-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} 0 0`};
+  @media (prefers-reduced-motion: no-preference) {
+    transition: ${(props) => `${props.theme.transitions.color}, ${props.theme.transitions.backgroundColor}, box-shadow ${props.theme.motion.timings["120"]} ${props.theme.motion.easings.easeOutQuad}`};
   }
 
-  & ${DefaultTabButton}[aria-selected="true"] ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
-    border-left: none;
-    border-right: none;
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: ${(props) => props.theme.colors.neutral400};
   }
 `;
-const TabsContext = React__namespace.createContext({
-  id: "",
-  label: "",
-  selectedTabIndex: 0,
-  selectTabIndex() {
-    throw new Error("TabsContext.selectTabIndex is not implemented.");
-  }
+const Content = React__namespace.forwardRef((props, forwardedRef) => {
+  const { variant: variant2 } = useTabs("Content");
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { $variant: variant2, ref: forwardedRef, ...props });
 });
-const useTabs = () => React__namespace.useContext(TabsContext);
-const useTabsFocus = (selectedTabIndex, onTabChange) => {
-  const tabsRef = React__namespace.useRef(null);
-  const mountedRef = React__namespace.useRef(false);
-  const handleTabChange = uiPrimitives.useCallbackRef(onTabChange);
-  React__namespace.useEffect(() => {
-    if (!tabsRef.current)
-      return;
-    if (mountedRef.current) {
-      const nextFocusEl = tabsRef.current.querySelector('[tabindex="0"]');
-      if (nextFocusEl) {
-        nextFocusEl.focus();
-        handleTabChange(selectedTabIndex);
-      }
-    }
-    if (!mountedRef.current) {
-      mountedRef.current = true;
-    }
-  }, [selectedTabIndex, handleTabChange]);
-  return tabsRef;
-};
-const TabButton = styledComponents.styled.button`
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
+const TabsContent = styledComponents.styled(Tabs__namespace.Content)`
+  ${(props) => {
+  if (props.$variant === "simple") {
+    return styledComponents.css``;
+  } else {
+    return styledComponents.css`
+        position: relative;
+        z-index: 1;
+        background-color: ${(props2) => props2.theme.colors.neutral0};
+      `;
   }
+}}
 `;
-const Tabs = ({ children, ...props }) => {
-  const { id, selectedTabIndex, selectTabIndex, label, variant: variant2, onTabChange } = useTabs();
-  const tabsRef = useTabsFocus(selectedTabIndex, onTabChange);
-  const childrenArray = React__namespace.Children.toArray(children).map(
-    (node, index) => React__namespace.cloneElement(node, {
-      id: `${id}-${index}`,
-      index,
-      selectedTabIndex,
-      onTabClick: () => selectTabIndex(index),
-      variant: variant2
-    })
-  );
-  const handleKeyDown = (e) => {
-    const hasAllChildrenDisabled = childrenArray.every((node) => node.props.disabled);
-    if (hasAllChildrenDisabled) {
-      return;
-    }
-    switch (e.key) {
-      case KeyboardKeys.RIGHT: {
-        const nextWantedIndex = selectedTabIndex + 1;
-        const findNextIndex = (ref) => {
-          const isDisabled = childrenArray[ref].props.disabled;
-          if (!isDisabled) {
-            return ref;
-          }
-          if (ref === childrenArray.length - 1) {
-            return findNextIndex(0);
-          }
-          return findNextIndex(ref + 1);
-        };
-        const nextIndex = findNextIndex(nextWantedIndex >= childrenArray.length ? 0 : nextWantedIndex);
-        selectTabIndex(nextIndex);
-        break;
-      }
-      case KeyboardKeys.LEFT: {
-        const nextWantedIndex = selectedTabIndex - 1;
-        const findNextIndex = (ref) => {
-          const isDisabled = childrenArray[ref].props.disabled;
-          if (!isDisabled) {
-            return ref;
-          }
-          if (ref === 0) {
-            return findNextIndex(childrenArray.length - 1);
-          }
-          return findNextIndex(ref - 1);
-        };
-        const nextIndex = findNextIndex(nextWantedIndex < 0 ? childrenArray.length - 1 : nextWantedIndex);
-        selectTabIndex(nextIndex);
-        break;
-      }
-      case KeyboardKeys.HOME: {
-        const nextIndex = childrenArray.findIndex((node) => !node.props.disabled);
-        selectTabIndex(nextIndex);
-        break;
-      }
-      case KeyboardKeys.END: {
-        const arrayOfChildrenProps = childrenArray.map((node, index) => ({ isDisabled: node.props.disabled, index }));
-        const firstNonDisabledChildren = arrayOfChildrenProps.reverse().find(({ isDisabled }) => !isDisabled);
-        if (firstNonDisabledChildren) {
-          selectTabIndex(firstNonDisabledChildren.index);
-        }
-        break;
-      }
-    }
-  };
-  if (variant2 === "simple") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tabsRef, role: "tablist", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DefaultTabsRow,
-    {
-      ref: tabsRef,
-      role: "tablist",
-      alignItems: "flex-end",
-      "aria-label": label,
-      onKeyDown: handleKeyDown,
-      ...props,
-      children: childrenArray
-    }
-  );
-};
-const Tab = ({
-  disabled = false,
-  id,
-  children,
-  variant: variant2,
-  hasError = false,
-  index,
-  selectedTabIndex,
-  onTabClick,
-  ...props
-}) => {
-  const tabId = `${id}-tab`;
-  const tabPanelId = `${id}-tabpanel`;
-  const selected = index === selectedTabIndex;
-  const handleClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (onTabClick) {
-      onTabClick();
-    }
-  };
-  if (variant2 === "simple") {
-    let textColor;
-    if (hasError) {
-      textColor = "danger600";
-    } else if (selected) {
-      textColor = "primary600";
-    } else if (disabled) {
-      textColor = "neutral600";
-    } else {
-      textColor = "neutral600";
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      TabButton,
-      {
-        id: tabId,
-        role: "tab",
-        "aria-controls": selected ? tabPanelId : void 0,
-        tabIndex: selected ? 0 : -1,
-        "aria-selected": selected,
-        type: "button",
-        onClick: handleClick,
-        "aria-disabled": disabled,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SimpleTabBox, { padding: 4, $selected: selected, $hasError: hasError, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "sigma", textColor, children }) })
-      }
-    );
-  }
-  if (hasError) {
-    console.warn('The "hasError" prop is only available for the "simple" variant.');
-  }
-  const showRightBorder = selectedTabIndex && selectedTabIndex - 1 === index;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DefaultTabButton,
-    {
-      id: tabId,
-      role: "tab",
-      type: "button",
-      "aria-controls": selected ? tabPanelId : void 0,
-      tabIndex: selected ? 0 : -1,
-      "aria-selected": selected,
-      onClick: handleClick,
-      "aria-disabled": disabled,
-      $showRightBorder: Boolean(showRightBorder),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTabBox, { padding: selected ? 4 : 3, background: selected ? "neutral0" : "neutral100", $selected: selected, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { fontWeight: "bold", textColor: selected ? "primary700" : "neutral600", children }) })
-    }
-  );
-};
-const TabPanels = ({ children, ...props }) => {
-  const { id, selectedTabIndex } = useTabs();
-  const childrenArray = React__namespace.Children.toArray(children).map((node, index) => React__namespace.cloneElement(node, { id: `${id}-${index}` })).filter((_, index) => index === selectedTabIndex);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children: childrenArray });
-};
-const TabPanel = ({ id, ...props }) => {
-  const tabId = `${id}-tab`;
-  const tabPanelId = `${id}-tabpanel`;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: tabPanelId, role: "tabpanel", tabIndex: 0, "aria-labelledby": tabId, ...props });
-};
-const TabGroup = React__namespace.forwardRef(
-  ({ id, initialSelectedTabIndex, label, onTabChange, selectedTabIndex: selectedTabIndexProp, variant: variant2, ...props }, ref) => {
-    const tabsId = useId(id);
-    const [selectedTabIndex = 0, setSelectedTabIndex] = useControllableState({
-      prop: selectedTabIndexProp,
-      defaultProp: initialSelectedTabIndex,
-      // @ts-expect-error - TODO: fix this.
-      onChange: onTabChange
-    });
-    React__namespace.useImperativeHandle(ref, () => ({
-      _handlers: { setSelectedTabIndex }
-    }));
-    const context = React__namespace.useMemo(
-      () => ({ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant: variant2, onTabChange }),
-      [label, onTabChange, selectedTabIndex, tabsId, variant2, setSelectedTabIndex]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props }) });
-  }
-);
-TabGroup.displayName = "TabGroup";
+const Tabs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Content,
+  List,
+  Root,
+  Trigger
+}, Symbol.toStringTag, { value: "Module" }));
 const TableContainer = styledComponents.styled(Box)`
   overflow: hidden;
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -12342,7 +12357,7 @@ const Toggle = React__namespace.forwardRef(
     onChange,
     ...props
   }, forwardedRef) => {
-    const [checked = false, setChecked] = useControllableState({
+    const [checked = false, setChecked] = useControllableState$1({
       prop: checkedProp
     });
     const isFalseyChecked = checked !== null && !checked;
@@ -12456,6 +12471,103 @@ const Input = styledComponents.styled.input`
   z-index: 0;
   width: 100%;
 `;
+const defaultState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useMeasure() {
+  const [element, ref] = React.useState(null);
+  const [rect, setRect] = React.useState(defaultState);
+  const observer = React.useMemo(
+    () => new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
+        setRect({ x, y, width, height, top, left, bottom, right });
+      }
+    }),
+    []
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (!element)
+      return;
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, observer]);
+  return [ref, rect];
+}
+const KeyboardNavigable = ({ tagName, attributeName = "", ...props }) => {
+  const isValidFocusedElement = () => {
+    const focused = document.activeElement;
+    if (!focused) {
+      return false;
+    }
+    if (tagName) {
+      return focused.tagName.toLowerCase() === tagName;
+    }
+    return focused.hasAttribute(attributeName);
+  };
+  const queryElement = (parentEl) => {
+    if (tagName) {
+      return parentEl.querySelectorAll(tagName);
+    }
+    return parentEl.querySelectorAll(`[${attributeName}]`);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case KeyboardKeys.RIGHT:
+      case KeyboardKeys.DOWN: {
+        if (isValidFocusedElement()) {
+          e.preventDefault();
+          const focused = document.activeElement;
+          const allElements = [...queryElement(e.currentTarget)];
+          const focusedIndex = allElements.findIndex((node) => node === focused);
+          const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
+          allElements[nextIndex].focus();
+        }
+        break;
+      }
+      case KeyboardKeys.LEFT:
+      case KeyboardKeys.UP: {
+        if (isValidFocusedElement()) {
+          e.preventDefault();
+          const focused = document.activeElement;
+          const allElements = [...queryElement(e.currentTarget)];
+          const focusedIndex = allElements.findIndex((node) => node === focused);
+          const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
+          allElements[nextIndex].focus();
+        }
+        break;
+      }
+      case KeyboardKeys.HOME: {
+        if (isValidFocusedElement()) {
+          e.preventDefault();
+          const allElements = queryElement(e.currentTarget);
+          const focusElement = allElements.item(0);
+          focusElement.focus();
+        }
+        break;
+      }
+      case KeyboardKeys.END: {
+        if (isValidFocusedElement()) {
+          e.preventDefault();
+          const allElements = queryElement(e.currentTarget);
+          const focusElement = allElements.item(allElements.length - 1);
+          focusElement.focus();
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { onKeyDown: handleKeyDown, ...props });
+};
 Object.defineProperty(exports, "composeEventHandlers", {
   enumerable: true,
   get: () => uiPrimitives.composeEventHandlers
@@ -12476,12 +12588,9 @@ exports.AccessibleIcon = AccessibleIcon;
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
-exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BaseButton = BaseButton;
-exports.BaseCheckbox = BaseCheckbox;
 exports.BaseLink = BaseLink;
-exports.BaseRadio = BaseRadio;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
@@ -12501,7 +12610,7 @@ exports.CarouselActions = CarouselActions;
 exports.CarouselImage = CarouselImage;
 exports.CarouselInput = CarouselInput;
 exports.CarouselSlide = CarouselSlide;
-exports.Checkbox = Checkbox;
+exports.Checkbox = CheckboxImpl;
 exports.Combobox = Combobox;
 exports.ComboboxOption = Option;
 exports.Crumb = Crumb;
@@ -12511,8 +12620,6 @@ exports.DatePicker = DatePicker$1;
 exports.DateTimePicker = DateTimePicker;
 exports.DesignSystemProvider = DesignSystemProvider;
 exports.Dialog = Dialog;
-exports.DialogBody = DialogBody;
-exports.DialogFooter = DialogFooter;
 exports.DismissibleLayer = DismissibleLayer;
 exports.Divider = Divider;
 exports.Dots = Dots;
@@ -12521,10 +12628,8 @@ exports.Field = Field;
 exports.Flex = Flex;
 exports.FocusTrap = FocusTrap;
 exports.Grid = Grid;
-exports.GridItem = GridItemImpl;
 exports.IconButton = IconButton;
 exports.IconButtonGroup = IconButtonGroup;
-exports.Initials = Initials;
 exports.JSONInput = JSONInput;
 exports.KeyboardNavigable = KeyboardNavigable;
 exports.Link = Link;
@@ -12534,32 +12639,27 @@ exports.Loader = Loader;
 exports.Main = Main;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
-exports.ModalBody = ModalBody;
-exports.ModalFooter = ModalFooter;
-exports.ModalHeader = ModalHeader;
-exports.ModalLayout = ModalLayout;
+exports.Modal = Modal;
 exports.MultiSelect = MultiSelect;
 exports.MultiSelectGroup = MultiSelectGroup;
 exports.MultiSelectNested = MultiSelectNested;
 exports.MultiSelectOption = MultiSelectOption;
 exports.NextLink = NextLink;
 exports.NumberInput = NumberInput;
-exports.POPOVER_PLACEMENTS = POPOVER_PLACEMENTS;
 exports.PageLink = PageLink;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
-exports.PopoverPrimitives = primitives;
 exports.Portal = Portal$1;
 exports.PreviousLink = PreviousLink;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
 exports.RawTable = RawTable;
 exports.RawTbody = RawTbody;
 exports.RawTd = RawTd;
 exports.RawTh = RawTh;
 exports.RawThead = RawThead;
 exports.RawTr = RawTr;
+exports.ScrollArea = ScrollAreaImpl$1;
 exports.SearchForm = SearchForm;
 exports.Searchbar = Searchbar;
 exports.SimpleMenu = SimpleMenu;
@@ -12575,10 +12675,6 @@ exports.SubNavSection = SubNavSection;
 exports.SubNavSections = SubNavSections;
 exports.Switch = Switch;
 exports.TFooter = TFooter;
-exports.Tab = Tab;
-exports.TabGroup = TabGroup;
-exports.TabPanel = TabPanel;
-exports.TabPanels = TabPanels;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
@@ -12595,16 +12691,22 @@ exports.Tooltip = TooltipImpl;
 exports.Tr = Tr;
 exports.Typography = Typography;
 exports.VisuallyHidden = VisuallyHidden;
+exports._internaluseUncontrolledState = useUncontrolledState;
 exports.composeRefs = composeRefs;
 exports.convertUTCDateToCalendarDateTime = convertUTCDateToCalendarDateTime;
 exports.darkTheme = darkTheme;
 exports.extendTheme = extendTheme;
 exports.getThemeSize = getThemeSize;
 exports.inputFocusStyle = inputFocusStyle;
+exports.isSSR = isSSR;
 exports.lightTheme = lightTheme;
 exports.useComposedRefs = useComposedRefs;
+exports.useControllableState = useControllableState$1;
 exports.useDateFormatter = useDateFormatter;
 exports.useDesignSystem = useDesignSystem;
 exports.useField = useField;
+exports.useId = useId;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useMeasure = useMeasure;
 exports.useNotifyAT = useNotifyAT;
 //# sourceMappingURL=index.js.map