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

package/dist/index.mjs

@@ -1,27 +1,33 @@
 import * as React from "react";
-import { useEffect } from "react";
+import { useRef, useEffect, useMemo, useLayoutEffect, useState } from "react";
 import { DateFormatter, getLocalTimeZone, today, minDate, maxDate, startOfMonth, startOfWeek, getDayOfWeek, isSameDay, endOfMonth, parseAbsolute, toCalendarDate, parseAbsoluteToLocal, toCalendarDateTime } from "@internationalized/date";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { Provider as Provider$1 } from "@radix-ui/react-tooltip";
-import { styled, css, keyframes, createGlobalStyle, ThemeProvider } from "styled-components";
-import { useCallbackRef, Combobox as Combobox$1, Select, composeEventHandlers } from "@strapi/ui-primitives";
+import { styled, css, keyframes, useTheme, createGlobalStyle, ThemeProvider } from "styled-components";
+import * as DismissibleLayerPrimitive from "@radix-ui/react-dismissable-layer";
+import { useCallbackRef, Combobox as Combobox$1, Select, composeEventHandlers, usePrev } from "@strapi/ui-primitives";
 import { composeEventHandlers as composeEventHandlers2, useCallbackRef as useCallbackRef2, useCollator, useFilter } from "@strapi/ui-primitives";
 import * as RadixAccordion from "@radix-ui/react-accordion";
 import { CaretDown, Cross, CheckCircle, WarningCircle, Information, Loader as Loader$1, ExternalLink, ChevronRight, ChevronLeft, Calendar, Clock, Search } from "@strapi/icons";
+import * as Avatar$1 from "@radix-ui/react-avatar";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useControllableState as useControllableState$1 } from "@radix-ui/react-use-controllable-state";
-import * as DismissibleLayerPrimitive from "@radix-ui/react-dismissable-layer";
-import { createPortal } from "react-dom";
+import * as Checkbox from "@radix-ui/react-checkbox";
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import { useFloating, offset, shift, flip, autoUpdate } from "@floating-ui/react-dom";
 import { FocusScope } from "@radix-ui/react-focus-scope";
+import { createPortal } from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { useCodeMirror } from "@uiw/react-codemirror";
 import { StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView } from "@codemirror/view";
+import * as Dialog$1 from "@radix-ui/react-dialog";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { NumberParser, NumberFormatter } from "@internationalized/number";
-import { hideOthers } from "aria-hidden";
+import * as Popover$1 from "@radix-ui/react-popover";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import * as Tabs$1 from "@radix-ui/react-tabs";
 const createContext = (rootComponentName, defaultContext) => {
   const Context = React.createContext(defaultContext);
   const Provider2 = (props) => {
@@ -404,7 +410,7 @@ const StyledTypography = styled(Box)`
   text-transform: ${({ $textTransform }) => $textTransform};
 `;
 const [AccordionProvider, useAccordion] = createContext("Accordion");
-const Root$3 = React.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
+const Root$8 = React.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsx(AccordionRoot, { ref: forwardedRef, $size: size, collapsible: true, ...props, type: "single", children: /* @__PURE__ */ jsx(AccordionProvider, { size, children }) });
 });
 const AccordionRoot = styled(RadixAccordion.Root)`
@@ -421,7 +427,7 @@ const AccordionRoot = styled(RadixAccordion.Root)`
   }
 }}
 `;
-const Item$2 = React.forwardRef((props, forwardedRef) => {
+const Item$5 = React.forwardRef((props, forwardedRef) => {
   const { size } = useAccordion("Item");
   return /* @__PURE__ */ jsx(AccordionItem, { $size: size, ref: forwardedRef, ...props });
 });
@@ -449,7 +455,7 @@ const AccordionItem = styled(RadixAccordion.Item)`
     box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
   }
 `;
-const Trigger$3 = React.forwardRef(
+const Trigger$7 = React.forwardRef(
   ({ caretPosition = "left", description, icon: Icon, children, ...restProps }, forwardedRef) => {
     const { size } = useAccordion("Trigger");
     return /* @__PURE__ */ jsxs(AccordionTrigger, { $caretPosition: caretPosition, $size: size, ref: forwardedRef, ...restProps, children: [
@@ -477,7 +483,7 @@ const IconBox$4 = 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 = styled(Flex).attrs((props) => ({
@@ -493,8 +499,8 @@ const TriggerIcon = 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 = styled(RadixAccordion.Trigger)`
@@ -523,7 +529,7 @@ const AccordionTrigger = styled(RadixAccordion.Trigger)`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: ${(props) => props.theme.transitions.color};
   }
 `;
 const Actions = React.forwardRef((props, forwardedRef) => {
@@ -544,11 +550,11 @@ const ActionWrapper = 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.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
+const Header$2 = React.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsx(AccordionHeader, { $variant: variant2, ref: forwardedRef, ...props });
 });
 const AccordionHeader = styled(RadixAccordion.Header)`
@@ -584,10 +590,10 @@ const AccordionHeader = styled(RadixAccordion.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.forwardRef((props, forwardedRef) => {
+const Content$7 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(AccordionContent, { ref: forwardedRef, ...props });
 });
 const slideDown = keyframes`
@@ -611,22 +617,24 @@ const AccordionContent = styled(RadixAccordion.Content)`
 
   @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 = css`
   position: relative;
@@ -802,88 +810,291 @@ const Alert = ({
     }
   );
 };
-const avatarSize = 32;
-const previewSize = 64;
-const AvatarImg = styled.img`
+function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return 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.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.useState(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+  React.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: keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.2;
+    }
+  `,
+  modalPopIn: keyframes`
+    from {
+      transform:translate(-50%, -50%)  scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+  `,
+  modalPopOut: keyframes`
+    from {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+    to {
+      transform:translate(-50%, -50%)  scale(0.8);
+      opacity: 0;
+    }
+  `,
+  popIn: keyframes`
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  `,
+  popOut: keyframes`
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  `,
+  slideDownIn: keyframes`
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+  slideDownOut: keyframes`
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  `,
+  slideUpIn: keyframes`
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+  slideUpOut: keyframes`
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+  `,
+  fadeIn: keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  `,
+  fadeOut: keyframes`
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  `
+};
+const SIZE = 32;
+const PREVIEW_SCALE = 2;
+const Item$4 = React.forwardRef(
+  ({ onLoadingStatusChange, delayMs = 600, src, alt, fallback, preview = false, ...restProps }, forwardedRef) => {
+    const [loadingStatus, setLoadingStatus] = useControllableState$1({
+      onChange: onLoadingStatusChange
+    });
+    const [tooltipOpen, setTooltipOpen] = React.useState(false);
+    const hasPreview = preview && loadingStatus === "loaded";
+    const handleTooltipOpen = (isOpen) => {
+      if (hasPreview) {
+        setTooltipOpen(isOpen);
+      }
+    };
+    return /* @__PURE__ */ jsxs(Tooltip.Root, { onOpenChange: handleTooltipOpen, children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(AvatarRoot, { ref: forwardedRef, ...restProps, children: [
+        hasPreview ? /* @__PURE__ */ jsx(
+          AvatarOverlay,
+          {
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            background: "neutral0",
+            zIndex: "overlay",
+            style: { opacity: tooltipOpen ? 0.4 : 0 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(AvatarImage, { src, alt, onLoadingStatusChange: setLoadingStatus }),
+        /* @__PURE__ */ jsx(Avatar$1.Fallback, { delayMs, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textTransform: "uppercase", children: fallback }) })
+      ] }) }),
+      hasPreview ? /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(PreviewContent, { side: "top", sideOffset: 4, children: /* @__PURE__ */ jsx(PreviewImg, { src, alt }) }) }) : null
+    ] });
+  }
+);
+const avatarStyles = 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 = css`
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  display: block;
+  border-radius: inherit;
+`;
+const AvatarRoot = styled(Avatar$1.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 = styled(Box)`
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity ${(props) => props.theme.motion.timings["200"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
 `;
-const PreviewContainer = 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 = styled(Box)`
-  opacity: 0.4;
-`;
-const Avatar = ({ src, alt, preview }) => {
-  const [previewVisible, setPreviewVisible] = React.useState(false);
-  const isHovering = Boolean(preview && previewVisible);
-  return /* @__PURE__ */ jsxs("span", { children: [
-    isHovering ? /* @__PURE__ */ jsx(
-      PreviewContainer,
-      {
-        "aria-hidden": true,
-        alt: "",
-        width: `${previewSize}px`,
-        height: `${previewSize}px`,
-        src: preview === true ? src : typeof preview === "string" ? preview : ""
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        zIndex: isHovering ? 1 : void 0,
-        position: "relative",
-        onMouseEnter: () => setPreviewVisible(true),
-        onMouseLeave: () => setPreviewVisible(false),
-        width: `${avatarSize}px`,
-        height: `${avatarSize}px`,
-        children: [
-          isHovering ? /* @__PURE__ */ jsx(
-            Overlay,
-            {
-              background: "neutral0",
-              borderRadius: "50%",
-              position: "absolute",
-              width: `${avatarSize}px`,
-              height: `${avatarSize}px`,
-              zIndex: 1
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(AvatarImg, { src, alt, width: `${avatarSize}px`, height: `${avatarSize}px` })
-        ]
-      }
-    )
-  ] });
-};
-const InitialsWrapper = styled(Flex)`
-  span {
-    line-height: 0;
+const AvatarImage = styled(Avatar$1.Image)`
+  ${imgStyles}
+`;
+const PreviewContent = styled(Tooltip.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__ */ jsx(
-    InitialsWrapper,
-    {
-      background,
-      borderRadius: "50%",
-      width: `${avatarSize}px`,
-      height: `${avatarSize}px`,
-      justifyContent: "center",
-      children: /* @__PURE__ */ jsx(Typography, { fontSize: 0, fontWeight: "bold", textColor, textTransform: "uppercase", children })
-    }
-  );
-};
-const AvatarGroup = styled(Flex)`
-  & > * + * {
-    margin-left: -${avatarSize / 2}px;
+const PreviewImg = styled.img`
+  ${imgStyles}
+`;
+const Group$2 = React.forwardRef((props, forwarededRef) => {
+  return /* @__PURE__ */ jsx(GroupFlex, { ...props, ref: forwarededRef, tag: "div" });
+});
+const GroupFlex = 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",
@@ -953,113 +1164,6 @@ const BaseButtonWrapper = 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.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.forwardRef(
-  ({ indeterminate = false, name, value = false, onValueChange, ...inputProps }, forwardedRef) => {
-    const checkboxRef = React.useRef(null);
-    const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
-    React.useEffect(() => {
-      if (checkboxRef.current && indeterminate) {
-        checkboxRef.current.indeterminate = indeterminate;
-      } else {
-        checkboxRef.current.indeterminate = false;
-      }
-    }, [indeterminate]);
-    const handleValueChange = () => {
-      if (onValueChange) {
-        onValueChange(!value);
-      }
-    };
-    return /* @__PURE__ */ jsx(
-      CheckboxInput,
-      {
-        checked: value,
-        onChange: handleValueChange,
-        type: "checkbox",
-        ref: composedRefs,
-        name,
-        ...inputProps
-      }
-    );
-  }
-);
-BaseCheckbox.displayName = "BaseCheckbox";
-const CheckboxInput = 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__ */ jsx(
@@ -1077,88 +1181,6 @@ const BaseLink = forwardRef(
     );
   }
 );
-const useReactId = React["useId".toString()] || (() => void 0);
-let count = 0;
-const useId = (initialId) => {
-  const [id, setId] = React.useState(useReactId());
-  React.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.useRef(null);
-  React.useLayoutEffect(() => {
-    if (!value) {
-      setTabIndexOnFirstItem(radioGroupRef.current, `[name="${name}"]`);
-    }
-  }, [value, name]);
-  return /* @__PURE__ */ jsx(RadioProvider, { onChange, selected: value, name, children: /* @__PURE__ */ jsx("div", { ref: radioGroupRef, role: "radiogroup", "aria-labelledby": labelledBy, ...props, children }) });
-};
-const BaseRadio = React.forwardRef(({ value, disabled = false, ...props }, ref) => {
-  const generatedId = useId();
-  const { onChange, selected, name } = useRadioGroup("BaseRadio");
-  const isSelected = selected === value;
-  return /* @__PURE__ */ 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 = 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__ */ jsx(Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "/" }) });
 };
@@ -1212,6 +1234,18 @@ const StyledLink = styled(BaseLink)`
 const CrumbLink = ({ children, ...props }) => /* @__PURE__ */ 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() ? useEffect : useLayoutEffect;
+const useReactId = React["useId".toString()] || (() => void 0);
+let count = 0;
+const useId = (initialId) => {
+  const [id, setId] = React.useState(useReactId());
+  useIsomorphicLayoutEffect(() => {
+    if (!initialId)
+      setId((reactId) => reactId ?? String(count++));
+  }, [initialId]);
+  return initialId?.toString() ?? (id || "");
+};
 const useIntersection = (scrollableAreaRef, callback, { selectorToWatch, skipWhen = false }) => {
   const handleIntersection = useCallbackRef(callback);
   React.useEffect(() => {
@@ -1442,6 +1476,13 @@ const ButtonWrapper = 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) => {
@@ -1629,24 +1670,24 @@ const MenuSubContent = React.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.useRef(null);
@@ -1674,12 +1715,12 @@ const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, .
      */
     skipWhen: !internalIsOpen
   });
-  return /* @__PURE__ */ jsxs(Root$2, { onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx(Trigger$2, { ...props, children: props.label }),
-    /* @__PURE__ */ jsx(Content$3, { intersectionId, popoverPlacement, children })
+  return /* @__PURE__ */ jsxs(Root$7, { onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(Trigger$6, { ...props, children: props.label }),
+    /* @__PURE__ */ jsx(Content$6, { intersectionId, popoverPlacement, children })
   ] });
 };
-const MenuItem = Item$1;
+const MenuItem = Item$3;
 const StyledButton = styled(SimpleMenu)`
   padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
   height: unset;
@@ -1766,14 +1807,109 @@ const CardBadge = (props) => /* @__PURE__ */ jsx(CardBadgeWrapper, { children: /
 const CardBody = (props) => {
   return /* @__PURE__ */ jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Flex, { ...props, alignItems: "flex-start" }) });
 };
-const CardCheckbox = (props) => {
-  const { id } = useCard();
-  return /* @__PURE__ */ jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ 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.useCallback(composeRefs(...refs), refs);
+}
+const CheckIcon = ({ fill, ...props }) => {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ 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__ */ 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 = styled(Box)`
-  word-break: break-all;
-`;
-const CardContent = ({ children, ...props }) => {
+const CheckboxEl = React.forwardRef(
+  ({ defaultChecked, checked: checkedProp, onCheckedChange, ...props }, forwardedRef) => {
+    const checkboxRef = React.useRef(null);
+    const [checked, setChecked] = useControllableState$1({
+      defaultProp: defaultChecked,
+      prop: checkedProp,
+      onChange: onCheckedChange
+    });
+    const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
+    return /* @__PURE__ */ jsx(CheckboxRoot, { ref: composedRefs, checked, onCheckedChange: setChecked, ...props, children: /* @__PURE__ */ jsxs(Checkbox.Indicator, { children: [
+      checked === true ? /* @__PURE__ */ jsx(CheckIcon, { width: "1rem", fill: "neutral0" }) : null,
+      checked === "indeterminate" ? /* @__PURE__ */ jsx(Box, { height: "2px", width: "1rem", background: "neutral0", borderRadius: "1px" }) : null
+    ] }) });
+  }
+);
+const CheckboxRoot = styled(Checkbox.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.forwardRef(({ children, ...restProps }, forwardedRef) => {
+  const labelId = useId(restProps.id);
+  if (!children) {
+    return /* @__PURE__ */ jsx(CheckboxEl, { ref: forwardedRef, ...restProps });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsx(CheckboxEl, { id: labelId, ...restProps }),
+    /* @__PURE__ */ jsx(Typography, { tag: "label", textColor: "neutral800", htmlFor: labelId, children })
+  ] });
+});
+const CardCheckbox = (props) => {
+  const { id } = useCard();
+  return /* @__PURE__ */ jsx(CardActionImpl, { position: "start", children: /* @__PURE__ */ jsx(CheckboxImpl, { "aria-labelledby": `${id}-title`, ...props }) });
+};
+const BreakBox = styled(Box)`
+  word-break: break-all;
+`;
+const CardContent = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(BreakBox, { ...props, children });
 };
 const CardHeaderWrapper = styled(Flex)`
@@ -1849,14 +1985,6 @@ const TooltipImpl = React.forwardRef(
     );
   }
 );
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
 const TooltipContent = styled(Tooltip.Content)`
   background-color: ${(props) => props.theme.colors.neutral900};
   color: ${(props) => props.theme.colors.neutral0};
@@ -1868,7 +1996,8 @@ const TooltipContent = styled(Tooltip.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 = styled(Box)`
@@ -1941,34 +2070,6 @@ const Carousel = React.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`,
@@ -2004,7 +2105,11 @@ const commonTheme = {
     semiBold: 500,
     bold: 600
   },
-  easings: EASINGS
+  transitions: TRANSITIONS,
+  motion: {
+    easings: EASINGS,
+    timings: TIMINGS
+  }
 };
 const lightColorTokenObject = {
   color: {
@@ -2832,7 +2937,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;
@@ -2858,7 +2963,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 = {};
@@ -4604,7 +4709,7 @@ lodash.exports;
         return setWrapToString(result2, func, bitmask);
       }
       function createRound(methodName) {
-        var func = Math2[methodName];
+        var func = Math[methodName];
         return function(number, precision) {
           number = toNumber(number);
           precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
@@ -7659,7 +7764,7 @@ const getThemeSize = (type) => {
 };
 const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) => css`
     outline: none;
-    box-shadow: 0;
+    box-shadow: none;
     transition-property: border-color, box-shadow, fill;
     transition-duration: 0.2s;
 
@@ -7669,7 +7774,7 @@ const inputFocusStyle = (rootElement = "&") => ({ theme, $hasError = false }) =>
     }
   `;
 const [FieldProvider, useField] = createContext("Field", {});
-const Root$1 = React.forwardRef(
+const Root$6 = React.forwardRef(
   ({ children, name, error = false, hint, id, required = false, ...props }, ref) => {
     const generatedId = useId(id);
     const [labelNode, setLabelNode] = React.useState();
@@ -7699,7 +7804,6 @@ const Label = React.forwardRef(({ children, action, ...props }, ref) => {
     {
       ref: composedRefs,
       display: "flex",
-      alignItems: "center",
       variant: "pi",
       textColor: "neutral800",
       fontWeight: "bold",
@@ -7834,7 +7938,7 @@ const Error$1 = () => {
   }
   return /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "p", id: `${id}-error`, textColor: "danger600", "data-strapi-field-error": true, children: error });
 };
-const Action = React.forwardRef(({ label, children, ...props }, ref) => /* @__PURE__ */ jsx(
+const Action$1 = React.forwardRef(({ label, children, ...props }, ref) => /* @__PURE__ */ jsx(
   FieldActionWrapper,
   {
     justifyContent: "unset",
@@ -7853,12 +7957,12 @@ const FieldActionWrapper = 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.forwardRef(
@@ -7880,7 +7984,7 @@ const CarouselInput = React.forwardRef(
     ...props
   }, forwardedRef) => {
     const generatedId = useId(id);
-    return /* @__PURE__ */ jsx(Root$1, { hint, error, id: generatedId, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    return /* @__PURE__ */ jsx(Root$6, { hint, error, id: generatedId, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
       label && /* @__PURE__ */ jsx(Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsx(
         Carousel,
@@ -7944,21 +8048,6 @@ const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @_
     children
   }
 );
-const Checkbox = React.forwardRef(
-  ({ children, disabled = false, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(CheckboxLabel, { tag: "label", textColor: "neutral800", $disabled: disabled, children: [
-      /* @__PURE__ */ jsx(BaseCheckbox, { ref: forwardedRef, disabled, ...props }),
-      /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children })
-    ] });
-  }
-);
-const CheckboxLabel = 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.forwardRef(({ children, small = false, ...props }, ref) => {
   return /* @__PURE__ */ jsxs("div", { role: "alert", "aria-live": "assertive", ref, ...props, children: [
@@ -8111,9 +8200,9 @@ const Combobox = React.forwardRef(
         onFilterValueChange: handleFilterValueChange,
         isPrintableCharacter: isPrintableCharacter2,
         children: [
-          /* @__PURE__ */ jsxs(Trigger$1, { $hasError: hasError, className, children: [
+          /* @__PURE__ */ jsxs(Trigger$5, { $hasError: hasError, className, children: [
             /* @__PURE__ */ jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
-              startIcon ? /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }) : null,
+              startIcon ? /* @__PURE__ */ jsx(Box, { flex: "0 0 1.6rem", tag: "span", "aria-hidden": true, children: startIcon }) : null,
               /* @__PURE__ */ jsx(
                 TextInput$1,
                 {
@@ -8150,7 +8239,7 @@ const Combobox = React.forwardRef(
               /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CaretDown, {}) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$2, { sideOffset: 4, children: /* @__PURE__ */ jsxs(Viewport$1, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsxs(Viewport$1, { ref: viewportRef, children: [
             children,
             creatable ? /* @__PURE__ */ jsx(
               Combobox$1.CreateItem,
@@ -8173,7 +8262,7 @@ const Combobox = React.forwardRef(
 const IconBox$3 = styled(Box)`
   padding: 0;
 `;
-const Trigger$1 = styled(Combobox$1.Trigger)`
+const Trigger$5 = styled(Combobox$1.Trigger)`
   position: relative;
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   padding-right: ${({ theme }) => theme.spaces[3]};
@@ -8228,7 +8317,7 @@ const DownIcon$1 = styled(Combobox$1.Icon)`
     cursor: inherit;
   }
 `;
-const Content$2 = styled(Combobox$1.Content)`
+const Content$5 = styled(Combobox$1.Content)`
   background: ${({ theme }) => theme.colors.neutral0};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -8237,6 +8326,23 @@ const Content$2 = styled(Combobox$1.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 = styled(Combobox$1.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -8273,164 +8379,131 @@ const OptionBox = styled.div`
     font-weight: bold;
   }
 `;
-const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
-const useLockScroll = (lockScroll) => {
-  React.useEffect(() => {
-    if (lockScroll) {
-      document.body.classList.add("lock-body-scroll");
-    }
-    return () => {
-      document.body.classList.remove("lock-body-scroll");
-    };
-  }, [lockScroll]);
-};
-const DismissibleLayer = DismissibleLayerPrimitive.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.useRef(null);
-  React.useEffect(() => {
-    let currentFocus = null;
-    if (restoreFocus) {
-      currentFocus = document.activeElement;
-    }
-    return () => {
-      if (currentFocus) {
-        currentFocus.focus();
-      }
-    };
-  }, [restoreFocus]);
-  React.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__ */ jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
-};
-const Portal$1 = React.forwardRef(
-  ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
-    return container ? createPortal(/* @__PURE__ */ jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
-  }
-);
-Portal$1.displayName = "Portal";
-const DialogWrapper = styled(Box)`
+const Root$5 = AlertDialog.Root;
+const Trigger$4 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AlertDialog.Trigger, { ...props, asChild: true, ref: forwardedRef });
+});
+const Content$4 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Overlay$1, {}),
+    /* @__PURE__ */ jsx(ContentImpl$1, { ref: forwardedRef, ...props })
+  ] });
+});
+const Overlay$1 = styled(AlertDialog.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 = styled(Box)`
-  max-width: 41.2rem;
-  margin: 0 auto;
+const ContentImpl$1 = styled(AlertDialog.Content)`
+  max-width: 42rem;
+  height: min-content;
+  width: 100%;
   overflow: hidden;
-  margin-top: 10%;
-`;
-const DialogHeader = 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__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex, children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: /* @__PURE__ */ jsxs(
-    DialogContainer,
-    {
-      "aria-labelledby": labelledBy,
-      "aria-modal": true,
-      background: "neutral0",
-      hasRadius: true,
-      shadow: "popupShadow",
-      role: "dialog",
-      children: [
-        /* @__PURE__ */ jsx(DialogHeader, { padding: 6, justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "beta", as, id: labelledBy, children: title }) }),
-        /* @__PURE__ */ 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 = 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__ */ jsxs(Box, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [
-    icon && /* @__PURE__ */ jsx(IconContainer, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: icon }) }),
-    children
-  ] });
-};
-const FooterWrapper = styled(Box)`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-
-  button {
-    width: 100%;
-    display: inline-flex;
-    justify-content: center;
-  }
+const Header$1 = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AlertDialog.Title, { asChild: true, children: /* @__PURE__ */ jsx(
+    Title$1,
+    {
+      tag: "h2",
+      ref: forwardedRef,
+      padding: 6,
+      justifyContent: "center",
+      variant: "h2",
+      fontWeight: "bold",
+      ...restProps,
+      children
+    }
+  ) });
+});
+const Title$1 = styled(Typography)`
+  display: flex;
+  justify-content: center;
+  border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
 `;
-const DialogFooter = ({ startAction, endAction }) => {
-  return /* @__PURE__ */ jsx(FooterWrapper, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-    startAction,
-    endAction
-  ] }) });
-};
+const Body$1 = React.forwardRef(({ children, icon, ...restProps }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      ref: forwardedRef,
+      gap: 2,
+      direction: "column",
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 6,
+      paddingRight: 6,
+      ...restProps,
+      children: typeof children === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon ? React.cloneElement(icon, {
+          width: 24,
+          height: 24
+        }) : null,
+        /* @__PURE__ */ jsx(Description, { children })
+      ] }) : children
+    }
+  );
+});
+const Description = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AlertDialog.Description, { asChild: true, children: /* @__PURE__ */ jsx(Typography, { ref: forwardedRef, variant: "omega", ...props, tag: "p" }) });
+});
+const Footer$1 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Foot$1, { ref: forwardedRef, gap: 2, padding: 4, justifyContent: "space-between", ...props, tag: "footer" });
+});
+const Foot$1 = styled(Flex)`
+  border-top: solid 1px ${(props) => props.theme.colors.neutral150};
+  flex: 1;
+`;
+const Cancel = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AlertDialog.Cancel, { ...props, asChild: true, ref: forwardedRef });
+});
+const Action = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AlertDialog.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() {
   useEffect(() => {
@@ -8455,47 +8528,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 = useCallbackRef(onChange);
-  const setValue = React.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.useState(defaultProp);
-  const [value] = uncontrolledState;
-  const prevValueRef = React.useRef(value);
-  const handleChange = useCallbackRef(onChange);
-  React.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      handleChange(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef, handleChange]);
-  return uncontrolledState;
-}
 function useDateFormatter(locale, options) {
   const lastOptions = React.useRef(null);
   if (options && lastOptions.current && isEqual(options, lastOptions.current)) {
@@ -8672,12 +8704,38 @@ const DesignSystemProvider = ({
   theme = lightTheme,
   tooltipConfig
 }) => {
+  useIsomorphicLayoutEffect(() => {
+    const css2 = document.createElement("style");
+    css2.type = "text/css";
+    css2.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(css2);
+    window.getComputedStyle(css2).opacity;
+    document.head.removeChild(css2);
+  }, [theme]);
   return /* @__PURE__ */ jsx(Provider, { locale, children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsx(Provider$1, { ...tooltipConfig, children }),
     /* @__PURE__ */ jsx(LiveRegions, {}),
     /* @__PURE__ */ jsx(GlobalStyle, {})
   ] }) });
 };
+const DismissibleLayer = DismissibleLayerPrimitive.Root;
+const Portal$1 = React.forwardRef(
+  ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
+    return container ? createPortal(/* @__PURE__ */ jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
+  }
+);
+Portal$1.displayName = "Portal";
 const SelectTrigger = React.forwardRef(
   ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, ...restProps }, ref) => {
     const triggerRef = React.useRef(null);
@@ -8789,6 +8847,23 @@ const SelectContent = styled(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 = styled(Select.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -8808,6 +8883,7 @@ const itemStyles = css`
   gap: ${({ theme }) => theme.spaces[2]};
   white-space: nowrap;
   user-select: none;
+  color: ${({ theme }) => theme.colors.neutral800};
 
   &:focus-visible {
     outline: none;
@@ -8823,19 +8899,21 @@ const StyledSelectItem = styled(Select.Item)`
 
   &[data-state='checked'] {
     font-weight: bold;
+    background-color: ${({ theme }) => theme.colors.primary100};
     color: ${({ theme }) => theme.colors.primary600};
+    font-weight: bold;
   }
 `;
-const Root = Select.Root;
-const Trigger = SelectTrigger;
+const Root$4 = Select.Root;
+const Trigger$3 = SelectTrigger;
 const Value = SelectValue;
 const Portal = Select.Portal;
-const Content$1 = SelectContent;
+const Content$3 = SelectContent;
 const Viewport = SelectViewport;
-const Item = SelectItem;
+const Item$2 = SelectItem;
 const ItemIndicator = Select.ItemIndicator;
 const ItemText = Select.ItemText;
-const Group = Select.Group;
+const Group$1 = Select.Group;
 const SingleSelect = React.forwardRef(
   ({
     children,
@@ -8904,7 +8982,7 @@ const SingleSelect = React.forwardRef(
     }
     const value = (typeof passedValue !== "undefined" && passedValue !== null ? passedValue.toString() : internalValue) ?? "";
     return /* @__PURE__ */ jsxs(
-      Root,
+      Root$4,
       {
         onOpenChange: handleOpenChange,
         disabled,
@@ -8914,7 +8992,7 @@ const SingleSelect = React.forwardRef(
         ...restProps,
         children: [
           /* @__PURE__ */ jsx(
-            Trigger,
+            Trigger$3,
             {
               ref: forwardedRef,
               id,
@@ -8929,7 +9007,7 @@ const SingleSelect = React.forwardRef(
               children: /* @__PURE__ */ jsx(Value, { placeholder, textColor: value ? "neutral800" : "neutral600", children: value && customizeContent ? customizeContent(value) : void 0 })
             }
           ),
-          /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content$1, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxs(Viewport, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content$3, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxs(Viewport, { ref: viewportRef, children: [
             children,
             /* @__PURE__ */ jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
           ] }) }) })
@@ -8940,9 +9018,9 @@ const SingleSelect = React.forwardRef(
 );
 const SingleSelectOption = React.forwardRef(
   ({ value, startIcon, children, ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxs(Item, { ref, value: value.toString(), ...restProps, children: [
+    return /* @__PURE__ */ jsxs(Item$2, { ref, value: value.toString(), ...restProps, children: [
       startIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-      /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsx(ItemText, { children }) })
+      /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ItemText, { children }) })
     ] });
   }
 );
@@ -8989,7 +9067,7 @@ const DatePicker$1 = React.forwardRef(
     const [textInput, setTextInput] = React.useState(null);
     const [content, setContent] = React.useState(null);
     const [textValue, setTextValue] = React.useState();
-    const [value, setValue] = useControllableState({
+    const [value, setValue] = useControllableState$1({
       defaultProp: initialDate ? convertUTCDateToCalendarDate(initialDate) : void 0,
       prop: valueProp ? convertUTCDateToCalendarDate(valueProp) : void 0,
       onChange(date) {
@@ -9033,7 +9111,7 @@ const DatePicker$1 = React.forwardRef(
       },
       [value]
     );
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (valueProp) {
         const date = convertUTCDateToCalendarDate(valueProp);
         setTextValue(formatter.format(date.toDate(timeZone)));
@@ -9042,7 +9120,7 @@ const DatePicker$1 = React.forwardRef(
         setTextValue("");
       }
     }, [valueProp, formatter, timeZone]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (initialDate && textValue === void 0) {
         const date = convertUTCDateToCalendarDate(initialDate);
         setTextValue(formatter.format(date.toDate(timeZone)));
@@ -9411,7 +9489,7 @@ const CONTENT_NAME = "DatePickerContent";
 const DatePickerContent = React.forwardRef((props, forwardedRef) => {
   const [fragment, setFragment] = React.useState();
   const context = useDatePickerContext(CONTENT_NAME);
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setFragment(new DocumentFragment());
   }, []);
   if (!context.open) {
@@ -9540,7 +9618,7 @@ const DatePickerCalendar = React.forwardRef(
     const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
     return /* @__PURE__ */ jsxs(Flex, { ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [
       /* @__PURE__ */ jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [
-        /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
           SingleSelect,
           {
             "aria-label": monthSelectLabel,
@@ -9549,7 +9627,7 @@ const DatePickerCalendar = React.forwardRef(
             children: months.map((month) => /* @__PURE__ */ jsx(SingleSelectOption, { value: month, children: month }, month))
           }
         ) }),
-        /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(SingleSelect, { value: calendarDate.year.toString(), "aria-label": yearSelectLabel, onChange: handleYearChange, children: years.map((year) => /* @__PURE__ */ jsx(SingleSelectOption, { value: year, children: year }, year)) }) })
+        /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(SingleSelect, { value: calendarDate.year.toString(), "aria-label": yearSelectLabel, onChange: handleYearChange, children: years.map((year) => /* @__PURE__ */ jsx(SingleSelectOption, { value: year, children: year }, year)) }) })
       ] }),
       /* @__PURE__ */ jsxs("table", { role: "grid", children: [
         /* @__PURE__ */ jsx("thead", { "aria-hidden": true, children: /* @__PURE__ */ jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => /* @__PURE__ */ jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day)) }) }),
@@ -9772,7 +9850,7 @@ const TimePicker$1 = React.forwardRef(
         allowCustomValue: true,
         placeholder: `--${separator}--`,
         autocomplete: "none",
-        startIcon: /* @__PURE__ */ jsx(StyledClock, {}),
+        startIcon: /* @__PURE__ */ jsx(Clock, { fill: "neutral500" }),
         inputMode: "numeric",
         pattern: `\\d{2}\\${separator}\\d{2}`,
         textValue,
@@ -9783,14 +9861,6 @@ const TimePicker$1 = React.forwardRef(
     );
   }
 );
-const StyledClock = styled(Clock)`
-  height: 1rem;
-  width: 1rem;
-
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
 const DatePicker = styled(DatePicker$1)`
   flex: 1 1 70%;
   min-width: 120px;
@@ -9815,7 +9885,7 @@ const DateTimePicker = React.forwardRef(
     ...props
   }, forwardedRef) => {
     const DatePickerElement2 = React.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) {
@@ -9867,7 +9937,7 @@ const DateTimePicker = React.forwardRef(
     const { error, id, labelNode } = useField("DateTimePicker");
     const hasError = Boolean(error) || hasErrorProp;
     return /* @__PURE__ */ jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, children: [
-      /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
         DatePicker,
         {
           ...props,
@@ -9881,7 +9951,7 @@ const DateTimePicker = React.forwardRef(
           "aria-label": dateLabel
         }
       ) }),
-      /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
         TimePicker,
         {
           hasError,
@@ -9906,15 +9976,25 @@ const convertUTCDateToCalendarDateTime = (date, resetTime = true) => {
   }
   return toCalendarDateTime(zonedDateTime);
 };
-const DividerWrapper = styled(Box)`
+const Divider = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    DividerImpl,
+    {
+      ref: forwardedRef,
+      background: "neutral150",
+      ...props,
+      "data-orientation": "horizontal",
+      role: "separator",
+      tag: "div"
+    }
+  );
+});
+const DividerImpl = 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__ */ jsx(DividerWrapper, { ...props, background: "neutral150", tag: "hr" });
-};
 const EmptyStateIconWrapper = styled(Box)`
   svg {
     height: 8.8rem;
@@ -9944,17 +10024,92 @@ const EmptyStateLayout = ({
     }
   );
 };
-const Grid = (props) => {
-  const { gap = 0, gridCols = 12, ...rest } = props;
-  return /* @__PURE__ */ 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.useRef(null);
+  React.useEffect(() => {
+    let currentFocus = null;
+    if (restoreFocus) {
+      currentFocus = document.activeElement;
+    }
+    return () => {
+      if (currentFocus) {
+        currentFocus.focus();
+      }
+    };
+  }, [restoreFocus]);
+  React.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__ */ jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
 };
-const GridWrapper = styled(Box)`
+const Root$3 = forwardRef((props, forwardedRef) => {
+  const { gap = 0, gridCols = 12, ...rest } = props;
+  return /* @__PURE__ */ jsx(Wrapper$1, { ref: forwardedRef, $gap: gap, $gridCols: gridCols, ...rest });
+});
+const Wrapper$1 = styled(Box)`
   display: grid;
   grid-template-columns: repeat(${({ $gridCols }) => $gridCols}, 1fr);
   ${({ theme, $gap }) => handleResponsiveValues("gap", $gap, theme)}
 `;
-const GridItemImpl = ({ col, s, xs, ...props }) => /* @__PURE__ */ jsx(GridItem, { $col: col, $s: s, $xs: xs, ...props });
-const GridItem = styled(Box)`
+const ItemImpl = forwardRef(
+  ({ col, s, xs, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Item$1, { ref: forwardedRef, $col: col, $s: s, $xs: xs, ...props })
+);
+const Item$1 = styled(Box)`
   grid-column: span ${({ $col }) => $col ?? 1};
   max-width: 100%;
 
@@ -9966,6 +10121,11 @@ const GridItem = 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"];
@@ -10041,20 +10201,22 @@ const IconButtonWrapper = styled(BaseButton)`
   }
 `;
 const IconButtonGroup = 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};
@@ -10246,71 +10408,6 @@ const JSONInputContainer = 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__ */ 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";
@@ -10403,59 +10500,192 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
-const ModalContext = React.createContext(() => {
-});
-const useModal = () => React.useContext(ModalContext);
-const ModalWrapper = styled(Flex)`
-  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
-  inset: 0;
+const ScrollAreaImpl$1 = React.forwardRef(
+  ({ children, viewportRef, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(ScrollAreaRoot, { ref: forwardedRef, ...restProps, children: [
+      /* @__PURE__ */ jsx(ScrollAreaViewport, { ref: viewportRef, children }),
+      /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(Thumb, {}) }),
+      /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Thumb, {}) })
+    ] });
+  }
+);
+const ScrollAreaRoot = styled(ScrollArea.Root)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
 `;
-const ModalLayout = ({ onClose, labelledBy, ...props }) => {
-  useLockScroll(true);
-  return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(ModalContext.Provider, { value: onClose, children: /* @__PURE__ */ jsx(ModalWrapper, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: "modal", children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: /* @__PURE__ */ 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 = styled(Box)`
-  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+const ScrollAreaViewport = styled(ScrollArea.Viewport)`
+  min-width: 100%;
+  padding-inline-end: 4px;
 `;
-const ModalHeader = ({ children, closeLabel = "Close the modal" }) => {
-  const onClose = useModal();
-  return /* @__PURE__ */ jsx(ModalHeaderWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
-    children,
-    /* @__PURE__ */ jsx(IconButton, { onClick: onClose, label: closeLabel, withTooltip: false, children: /* @__PURE__ */ jsx(Cross, {}) })
-  ] }) });
-};
-const ModalFooterWrapper = styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+const Scrollbar = styled(ScrollArea.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__ */ jsx(ModalFooterWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(Flex, { gap: 2, children: startActions }),
-    /* @__PURE__ */ jsx(Flex, { gap: 2, children: endActions })
-  ] }) });
-};
-const ModalBodyWrapper = styled(Box)`
-  overflow: auto;
-  max-height: 60vh;
+const Thumb = styled(ScrollArea.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__ */ jsx(ModalBodyWrapper, { padding: 7, ...props });
-};
-const INITIAL_VALUE = "";
+const Root$2 = Dialog$1.Root;
+const Trigger$2 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
+});
+const Content$2 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Overlay, {}),
+    /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props })
+  ] });
+});
+const Overlay = styled(Dialog$1.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 = styled(Dialog$1.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.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { ...props, asChild: true, ref: forwardedRef });
+});
+const Header = React.forwardRef(
+  ({ children, closeLabel = "Close modal", ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(
+      Head,
+      {
+        ref: forwardedRef,
+        padding: 4,
+        paddingLeft: 5,
+        paddingRight: 5,
+        background: "neutral100",
+        justifyContent: "space-between",
+        ...restProps,
+        tag: "header",
+        children: [
+          children,
+          /* @__PURE__ */ jsx(Close, { children: /* @__PURE__ */ jsx(IconButton, { withTooltip: false, label: closeLabel, children: /* @__PURE__ */ jsx(Cross, {}) }) })
+        ]
+      }
+    );
+  }
+);
+const Head = styled(Flex)`
+  border-bottom: solid 1px ${(props) => props.theme.colors.neutral150};
+`;
+const Title = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { asChild: true, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "omega", fontWeight: "bold", ref: forwardedRef, ...props }) });
+});
+const Body = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(BodyScroll, { ref: forwardedRef, ...restProps, children });
+});
+const BodyScroll = 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.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Foot,
+    {
+      ref: forwardedRef,
+      padding: 4,
+      paddingLeft: 5,
+      paddingRight: 5,
+      background: "neutral100",
+      justifyContent: "space-between",
+      ...props,
+      tag: "footer"
+    }
+  );
+});
+const Foot = 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.forwardRef(
   ({ startAction, locale: defaultLocale, onValueChange, value, step = 1, disabled = false, ...props }, ref) => {
     const designContext = useDesignSystem("NumberInput");
@@ -10578,6 +10808,37 @@ const ArrowButton = 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 = useCallbackRef(onChange);
+  const setValue = React.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.createContext({ activePage: 1, pageCount: 1 });
 const usePagination = () => React.useContext(PaginationContext);
 const Pagination = ({ children, label = "Pagination", activePage, pageCount }) => {
@@ -10655,133 +10916,48 @@ const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxs(Box, { ...props, c
   /* @__PURE__ */ jsx(VisuallyHidden, { children }),
   /* @__PURE__ */ 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 = styled(Box)`
+const Root$1 = Popover$1.Root;
+const Trigger$1 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
+});
+const Content$1 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(PopoverContent, { sideOffset: 4, side: "bottom", align: "start", ...props, ref: forwardedRef }) });
+});
+const PopoverContent = styled(Popover$1.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.forwardRef(
-  ({
-    source,
-    children,
-    spacing = 0,
-    fullWidth = false,
-    placement = "bottom-start",
-    centered = false,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onDismiss,
-    onFocusOutside,
-    ...props
-  }, forwardedRef) => {
-    const [content, setContent] = React.useState(null);
-    const [width, setWidth] = React.useState(void 0);
-    const isRightClickOutsideRef = React.useRef(false);
-    const { x, y, refs, strategy } = useFloating({
-      strategy: "fixed",
-      placement: centered ? "bottom" : placement,
-      middleware: [
-        offset({
-          mainAxis: spacing
-        }),
-        shift(),
-        flip()
-      ],
-      elements: {
-        reference: source.current
-      },
-      whileElementsMounted: autoUpdate
-    });
-    React.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.useEffect(() => {
-      if (content)
-        return hideOthers(content);
-    }, [content]);
-    const handleDismiss = useCallbackRef(onDismiss);
-    React.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__ */ jsx(RemoveScroll, { allowPinchZoom: true, children: /* @__PURE__ */ jsx(
-      FocusScope,
-      {
-        asChild: true,
-        loop: true,
-        trapped: true,
-        onUnmountAutoFocus: (event) => {
-          event.preventDefault();
-          if (!isRightClickOutsideRef.current)
-            source.current?.focus({ preventScroll: true });
-        },
-        children: /* @__PURE__ */ jsx(
-          DismissibleLayer,
-          {
-            asChild: true,
-            onEscapeKeyDown,
-            onPointerDownOutside: 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: composeEventHandlers(onFocusOutside, (event) => event.preventDefault(), {
-              checkForDefaultPrevented: false
-            }),
-            onDismiss,
-            children: /* @__PURE__ */ 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.useRef(null);
   const generatedIntersectionId = useId();
   useIntersection(popoverRef, onReachEnd ?? (() => {
@@ -10789,62 +10965,20 @@ const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
     selectorToWatch: `#${stripReactIdOfColon(generatedIntersectionId)}`,
     skipWhen: !intersectionId || !onReachEnd
   });
-  return /* @__PURE__ */ jsxs(PopoverScrollable, { ref: popoverRef, ...props, children: [
+  return /* @__PURE__ */ jsxs(PopoverScrollArea, { ref: popoverRef, ...props, children: [
     children,
     intersectionId && onReachEnd && /* @__PURE__ */ jsx(Box, { id: stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" })
   ] });
 };
-const PopoverScrollable = 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 = styled(ScrollAreaImpl$1)`
+  height: 20rem;
 `;
-const Popover = ({
-  children,
-  source,
-  spacing,
-  fullWidth,
-  placement,
-  centered,
-  onEscapeKeyDown,
-  onPointerDownOutside,
-  onDismiss,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(
-    Content,
-    {
-      source,
-      spacing,
-      fullWidth,
-      placement,
-      centered,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onDismiss,
-      children: /* @__PURE__ */ 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 = styled(Box)`
   &:before {
@@ -10876,12 +11010,85 @@ const ProgressBar = ({ min = 0, max = 100, value = 0, children, size = "M", ...p
     }
   );
 };
-const Radio = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxs(Flex, { alignItems: "center", tag: "label", gap: 2, children: [
-    /* @__PURE__ */ jsx(BaseRadio, { ...props }),
-    /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children })
+const Group = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(RadioGroupRoot, { ref: forwardedRef, ...props });
+});
+const RadioGroupRoot = styled(RadioGroup.Root)`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spaces[3]};
+`;
+const Item = React.forwardRef(({ children, id: idProp, ...restProps }, forwardedRef) => {
+  const id = useId(idProp);
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsx(RadioGroupItem, { id, ref: forwardedRef, ...restProps, children: /* @__PURE__ */ jsx(RadioGroupIndicator, {}) }),
+    /* @__PURE__ */ jsx(Typography, { tag: "label", htmlFor: id, children })
   ] });
-};
+});
+const RadioGroupItem = styled(RadioGroup.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 = styled(RadioGroup.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) {
@@ -11024,7 +11231,7 @@ const RawTd = ({ coords = { col: 0, row: 0 }, tag = "td", ...props }) => {
     }
   };
   const isFocused = rowIndex === coords.row - 1 && colIndex === coords.col - 1;
-  React.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");
@@ -11047,7 +11254,7 @@ const RawTd = ({ coords = { col: 0, row: 0 }, tag = "td", ...props }) => {
     }
     setTableValues({ rowIndex: coords.row - 1, colIndex: coords.col - 1 });
   }, [coords, setTableValues]);
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const cell = tdRef.current;
     const focusableNodes = getFocusableNodes(cell, true);
     focusableNodes.forEach((node) => {
@@ -11131,7 +11338,7 @@ const Searchbar = React.forwardRef(
       inputRef.current.focus();
     };
     const actualRef = composeRefs(ref, inputRef);
-    return /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxs(Root$1, { name, children: [
+    return /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxs(Root$6, { name, children: [
       /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Label, { children }) }),
       /* @__PURE__ */ jsx(
         SearchbarInput,
@@ -11139,7 +11346,7 @@ const Searchbar = React.forwardRef(
           ref: actualRef,
           value,
           startAction: /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": true }),
-          endAction: isCompleting ? /* @__PURE__ */ jsx(Action, { label: clearLabel, onClick: handleClear, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : void 0,
+          endAction: isCompleting ? /* @__PURE__ */ jsx(Action$1, { label: clearLabel, onClick: handleClear, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : void 0,
           ...props
         }
       )
@@ -11268,7 +11475,7 @@ const MultiSelect = React.forwardRef(
       ariaDescription = `${id}-hint`;
     }
     return /* @__PURE__ */ jsxs(
-      Root,
+      Root$4,
       {
         onOpenChange: handleOpenChange,
         disabled,
@@ -11279,7 +11486,7 @@ const MultiSelect = React.forwardRef(
         multi: true,
         children: [
           /* @__PURE__ */ jsx(
-            Trigger,
+            Trigger$3,
             {
               ref: forwardedRef,
               id,
@@ -11295,7 +11502,7 @@ const MultiSelect = React.forwardRef(
               children: /* @__PURE__ */ jsx(Value, { placeholder, textColor: value?.length ? "neutral800" : "neutral600", children: value?.length ? withTags ? renderTags : customizeContent ? customizeContent(value) : void 0 : void 0 })
             }
           ),
-          /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content$1, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxs(Viewport, { ref: viewportRef, children: [
+          /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content$3, { position: "popper", sideOffset: 4, onCloseAutoFocus, children: /* @__PURE__ */ jsxs(Viewport, { ref: viewportRef, children: [
             children,
             /* @__PURE__ */ jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
           ] }) }) })
@@ -11306,74 +11513,20 @@ const MultiSelect = React.forwardRef(
 );
 const MultiSelectOption = React.forwardRef(
   ({ value, children, startIcon, ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxs(Item, { ref, value: value.toString(), ...restProps, children: [
+    return /* @__PURE__ */ jsxs(Item$2, { ref, value: value.toString(), ...restProps, children: [
       startIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-      /* @__PURE__ */ jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsx(
-        CheckMark,
-        {
-          hasRadius: true,
-          overflow: "hidden",
-          position: "relative",
-          $indeterminate: isIntermediate,
-          $selected: isSelected,
-          zIndex: 1,
-          height: "18px",
-          width: "18px"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsx(ItemText, { children }) })
+      /* @__PURE__ */ jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsx(CheckboxImpl, { checked: isIntermediate ? "indeterminate" : isSelected }) }),
+      /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ItemText, { children }) })
     ] });
   }
 );
-const CheckMark = 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 && 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 && css`
-      &::after {
-        content: '';
-        background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
-        width: 100%;
-        height: 100%;
-        position: absolute;
-      }
-    `}
-`;
 const MultiSelectGroup = React.forwardRef(
   ({ children, label, startIcon, values = [], ...restProps }, ref) => {
-    return /* @__PURE__ */ jsxs(Group, { ref, children: [
-      /* @__PURE__ */ jsxs(Item, { value: values, ...restProps, children: [
+    return /* @__PURE__ */ jsxs(Group$1, { ref, children: [
+      /* @__PURE__ */ jsxs(Item$2, { value: values, ...restProps, children: [
         startIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-        /* @__PURE__ */ jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsx(
-          CheckMark,
-          {
-            hasRadius: true,
-            overflow: "hidden",
-            position: "relative",
-            $indeterminate: isIntermediate,
-            $selected: isSelected,
-            zIndex: 1,
-            height: "18px",
-            width: "18px"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: label })
+        /* @__PURE__ */ jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => /* @__PURE__ */ jsx(CheckboxImpl, { checked: isIntermediate ? "indeterminate" : isSelected }) }),
+        /* @__PURE__ */ jsx(Typography, { children: label })
       ] }),
       children
     ] });
@@ -11438,13 +11591,6 @@ const SubNavWrapper = styled(Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   z-index: 1;
 `;
-const usePrevious = (value) => {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
 const CustomDivider = styled(Divider)`
   width: 2.4rem;
   background-color: ${({ theme }) => theme.colors.neutral200};
@@ -11464,7 +11610,7 @@ const SubNavHeader = ({
   id
 }) => {
   const [isSearchOpen, setSearchOpen] = React.useState(false);
-  const previousSearchOpenValue = usePrevious(isSearchOpen);
+  const previousSearchOpenValue = usePrev(isSearchOpen);
   const clearButtonId = useId(id);
   const searchRef = React.useRef(void 0);
   const searchButtonRef = React.useRef(void 0);
@@ -11771,275 +11917,136 @@ const SwitchButton = styled.button`
     transform: translateX(1rem);
   }
 `;
-const SimpleTabBox = 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.forwardRef(
+  ({ disabled = false, variant: variant2 = "regular", hasError, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TabsProvider, { disabled, hasError, variant: variant2, children: /* @__PURE__ */ jsx(TabsRoot, { ref: forwardedRef, ...props }) });
   }
-  return "transparent";
-}};
+);
+const TabsRoot = styled(Tabs$1.Root)`
+  width: 100%;
+  position: relative;
 `;
-const DefaultTabBox = styled(Box)`
-  border-bottom: 1px solid ${({ theme, $selected }) => $selected ? theme.colors.neutral0 : theme.colors.neutral150};
+const List = React.forwardRef((props, forwardedRef) => {
+  const { variant: variant2 } = useTabs("List");
+  return /* @__PURE__ */ jsx(TabsList, { ref: forwardedRef, ...props, $variant: variant2 });
+});
+const TabsList = styled(Tabs$1.List)`
+  display: flex;
+  align-items: ${(props) => props.$variant === "regular" ? "flex-end" : "unset"};
+  position: relative;
+  z-index: 0;
 `;
-const DefaultTabButton = styled.button`
-  border: none;
-  background: transparent;
-  padding: 0;
-
-  & + & > ${DefaultTabBox} {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
+const Trigger = React.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__ */ jsxs(TabsTrigger, { ref: forwardedRef, ...props, $hasError: isErrored, $variant: variant2, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx(TriggerTypography, { fontWeight: "bold", variant: variant2 === "simple" ? "sigma" : void 0, children }),
+      variant2 === "simple" ? /* @__PURE__ */ jsx(TabBar, {}) : null
+    ] });
   }
+);
+const TabBar = 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 = styled(Typography)``;
+const TabsTrigger = styled(Tabs$1.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 css`
+        padding-block: ${(props2) => props2.theme.spaces[4]};
+        padding-inline: ${(props2) => props2.theme.spaces[4]};
 
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-const DefaultTabsRow = styled(Flex)`
-  & > * {
-    flex: 1;
-  }
+        & > ${TriggerTypography} {
+          line-height: 1.2rem;
+        }
 
-  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
+        &[data-state='active'] {
+          color: ${props.$hasError ? props.theme.colors.danger600 : props.theme.colors.primary700};
+
+          & > ${TabBar} {
+            opacity: 1;
+          }
+        }
+      `;
+  } else {
+    return 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.createContext({
-  id: "",
-  label: "",
-  selectedTabIndex: 0,
-  selectTabIndex() {
-    throw new Error("TabsContext.selectTabIndex is not implemented.");
-  }
+const Content = React.forwardRef((props, forwardedRef) => {
+  const { variant: variant2 } = useTabs("Content");
+  return /* @__PURE__ */ jsx(TabsContent, { $variant: variant2, ref: forwardedRef, ...props });
 });
-const useTabs = () => React.useContext(TabsContext);
-const useTabsFocus = (selectedTabIndex, onTabChange) => {
-  const tabsRef = React.useRef(null);
-  const mountedRef = React.useRef(false);
-  const handleTabChange = useCallbackRef(onTabChange);
-  React.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 = styled.button`
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
+const TabsContent = styled(Tabs$1.Content)`
+  ${(props) => {
+  if (props.$variant === "simple") {
+    return css``;
+  } else {
+    return 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.Children.toArray(children).map(
-    (node, index) => React.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__ */ jsx("div", { ref: tabsRef, role: "tablist", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray });
-  }
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(SimpleTabBox, { padding: 4, $selected: selected, $hasError: hasError, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(DefaultTabBox, { padding: selected ? 4 : 3, background: selected ? "neutral0" : "neutral100", $selected: selected, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: selected ? "primary700" : "neutral600", children }) })
-    }
-  );
-};
-const TabPanels = ({ children, ...props }) => {
-  const { id, selectedTabIndex } = useTabs();
-  const childrenArray = React.Children.toArray(children).map((node, index) => React.cloneElement(node, { id: `${id}-${index}` })).filter((_, index) => index === selectedTabIndex);
-  return /* @__PURE__ */ jsx("div", { ...props, children: childrenArray });
-};
-const TabPanel = ({ id, ...props }) => {
-  const tabId = `${id}-tab`;
-  const tabPanelId = `${id}-tabpanel`;
-  return /* @__PURE__ */ jsx("div", { id: tabPanelId, role: "tabpanel", tabIndex: 0, "aria-labelledby": tabId, ...props });
-};
-const TabGroup = React.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.useImperativeHandle(ref, () => ({
-      _handlers: { setSelectedTabIndex }
-    }));
-    const context = React.useMemo(
-      () => ({ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant: variant2, onTabChange }),
-      [label, onTabChange, selectedTabIndex, tabsId, variant2, setSelectedTabIndex]
-    );
-    return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ 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 = styled(Box)`
   overflow: hidden;
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -12320,7 +12327,7 @@ const Toggle = React.forwardRef(
     onChange,
     ...props
   }, forwardedRef) => {
-    const [checked = false, setChecked] = useControllableState({
+    const [checked = false, setChecked] = useControllableState$1({
       prop: checkedProp
     });
     const isFalseyChecked = checked !== null && !checked;
@@ -12434,17 +12441,111 @@ const Input = 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] = useState(null);
+  const [rect, setRect] = useState(defaultState);
+  const observer = 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__ */ jsx(Box, { onKeyDown: handleKeyDown, ...props });
+};
 export {
   AccessibleIcon,
   Accordion,
   Alert,
   Avatar,
-  AvatarGroup,
   Badge,
   BaseButton,
-  BaseCheckbox,
   BaseLink,
-  BaseRadio,
   Box,
   Breadcrumbs,
   Button,
@@ -12464,7 +12565,7 @@ export {
   CarouselImage,
   CarouselInput,
   CarouselSlide,
-  Checkbox,
+  CheckboxImpl as Checkbox,
   Combobox,
   Option as ComboboxOption,
   Crumb,
@@ -12474,8 +12575,6 @@ export {
   DateTimePicker,
   DesignSystemProvider,
   Dialog,
-  DialogBody,
-  DialogFooter,
   DismissibleLayer,
   Divider,
   Dots,
@@ -12484,10 +12583,8 @@ export {
   Flex,
   FocusTrap,
   Grid,
-  GridItemImpl as GridItem,
   IconButton,
   IconButtonGroup,
-  Initials,
   JSONInput,
   KeyboardNavigable,
   Link,
@@ -12497,32 +12594,27 @@ export {
   Main,
   Menu,
   MenuItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalLayout,
+  Modal,
   MultiSelect,
   MultiSelectGroup,
   MultiSelectNested,
   MultiSelectOption,
   NextLink,
   NumberInput,
-  POPOVER_PLACEMENTS,
   PageLink,
   Pagination,
   Popover,
-  primitives as PopoverPrimitives,
   Portal$1 as Portal,
   PreviousLink,
   ProgressBar,
   Radio,
-  RadioGroup,
   RawTable,
   RawTbody,
   RawTd,
   RawTh,
   RawThead,
   RawTr,
+  ScrollAreaImpl$1 as ScrollArea,
   SearchForm,
   Searchbar,
   SimpleMenu,
@@ -12538,10 +12630,6 @@ export {
   SubNavSections,
   Switch,
   TFooter,
-  Tab,
-  TabGroup,
-  TabPanel,
-  TabPanels,
   Table,
   Tabs,
   Tag,
@@ -12558,6 +12646,7 @@ export {
   Tr,
   Typography,
   VisuallyHidden,
+  useUncontrolledState as _internaluseUncontrolledState,
   composeEventHandlers2 as composeEventHandlers,
   composeRefs,
   convertUTCDateToCalendarDateTime,
@@ -12565,14 +12654,19 @@ export {
   extendTheme,
   getThemeSize,
   inputFocusStyle,
+  isSSR,
   lightTheme,
   useCallbackRef2 as useCallbackRef,
   useCollator,
   useComposedRefs,
+  useControllableState$1 as useControllableState,
   useDateFormatter,
   useDesignSystem,
   useField,
   useFilter,
+  useId,
+  useIsomorphicLayoutEffect,
+  useMeasure,
   useNotifyAT
 };
 //# sourceMappingURL=index.mjs.map