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

package/dist/index.mjs

@@ -1,14 +1,18 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect } from "react";
-import { styled, css, keyframes, createGlobalStyle, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from "styled-components";
 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 { composeEventHandlers as composeEventHandlers2, useCallbackRef as useCallbackRef2, useCollator, useFilter } from "@strapi/ui-primitives";
-import { Loader as Loader$1, CaretDown, Cross, CheckCircle, WarningCircle, Information, ExternalLink, ChevronRight, ChevronLeft, Calendar, Clock, Search } from "@strapi/icons";
+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 DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { createPortal } from "react-dom";
+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 { useFloating, offset, shift, flip, autoUpdate } from "@floating-ui/react-dom";
 import { FocusScope } from "@radix-ui/react-focus-scope";
 import { RemoveScroll } from "react-remove-scroll";
@@ -18,15 +22,23 @@ import { StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView } from "@codemirror/view";
 import { NumberParser, NumberFormatter } from "@internationalized/number";
 import { hideOthers } from "aria-hidden";
-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 createContext = (rootComponentName, defaultContext) => {
+  const Context = React.createContext(defaultContext);
+  const Provider2 = (props) => {
+    const { children, ...context } = props;
+    const value = React.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  };
+  function useContext(consumerName) {
+    const context = React.useContext(Context);
+    if (context)
+      return context;
+    if (defaultContext !== void 0)
+      return defaultContext;
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  }
+  Provider2.displayName = `${rootComponentName}Provider`;
+  return [Provider2, useContext];
 };
 const handleResponsiveValues = (property, value, theme) => {
   if (!value) {
@@ -180,7 +192,7 @@ const StyledBox = styled.div`
 
   // Colors
   background: ${({ theme, $background }) => extractStyleFromTheme(theme.colors, $background, $background)};
-  color: ${({ theme, $color }) => extractStyleFromTheme(theme.colors, $color, void 0)};
+  color: ${({ theme, $color }) => extractStyleFromTheme(theme.colors, $color, $color)};
 
   // Spaces
   ${({ theme, $padding }) => handleResponsiveValues("padding-block", $padding, theme)}
@@ -229,7 +241,7 @@ const StyledBox = styled.div`
   right: ${({ $right, theme }) => extractStyleFromTheme(theme.spaces, $right, $right)};
   top: ${({ $top, theme }) => extractStyleFromTheme(theme.spaces, $top, $top)};
   bottom: ${({ $bottom, theme }) => extractStyleFromTheme(theme.spaces, $bottom, $bottom)};
-  z-index: ${({ $zIndex }) => $zIndex};
+  z-index: ${({ $zIndex, theme }) => extractStyleFromTheme(theme.zIndices, $zIndex, $zIndex)};
   overflow: ${({ $overflow }) => $overflow};
 
   // Size
@@ -259,6 +271,27 @@ const StyledBox = styled.div`
   // Cursor
   cursor: ${({ $cursor }) => $cursor};
 `;
+const Flex = forwardRef((props, ref) => {
+  const { className, alignItems, direction, gap, inline, justifyContent, wrap, ...rest } = props;
+  const mappedProps = {
+    $alignItems: alignItems,
+    $direction: direction,
+    $gap: gap,
+    $inline: inline,
+    $justifyContent: justifyContent,
+    $wrap: wrap
+  };
+  return /* @__PURE__ */ jsx(StyledFlex, { className, ref, ...mappedProps, ...rest });
+});
+const StyledFlex = styled(Box)`
+  align-items: ${({ $alignItems = "center" }) => $alignItems};
+  display: ${({ display = "flex", $inline }) => $inline ? "inline-flex" : display};
+  flex-direction: ${({ $direction = "row" }) => $direction};
+  flex-shrink: ${({ shrink }) => shrink};
+  flex-wrap: ${({ $wrap }) => $wrap};
+  ${({ $gap, theme }) => handleResponsiveValues("gap", $gap, theme)};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+`;
 const ALPHA = "alpha";
 const BETA = "beta";
 const DELTA = "delta";
@@ -370,483 +403,261 @@ const StyledTypography = styled(Box)`
   text-decoration: ${({ $textDecoration }) => $textDecoration};
   text-transform: ${({ $textTransform }) => $textTransform};
 `;
-const AccordionContext = React.createContext({
-  disabled: false,
-  expanded: false,
-  id: "",
-  size: "M",
-  variant: "primary"
+const [AccordionProvider, useAccordion] = createContext("Accordion");
+const Root$3 = 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 useAccordion = () => React.useContext(AccordionContext);
-const Flex = forwardRef((props, ref) => {
-  const { className, alignItems, direction, gap, inline, justifyContent, wrap, ...rest } = props;
-  const mappedProps = {
-    $alignItems: alignItems,
-    $direction: direction,
-    $gap: gap,
-    $inline: inline,
-    $justifyContent: justifyContent,
-    $wrap: wrap
-  };
-  return /* @__PURE__ */ jsx(StyledFlex, { className, ref, ...mappedProps, ...rest });
-});
-const StyledFlex = styled(Box)`
-  align-items: ${({ $alignItems = "center" }) => $alignItems};
-  display: ${({ display = "flex", $inline }) => $inline ? "inline-flex" : display};
-  flex-direction: ${({ $direction = "row" }) => $direction};
-  flex-shrink: ${({ shrink }) => shrink};
-  flex-wrap: ${({ $wrap }) => $wrap};
-  ${({ $gap, theme }) => handleResponsiveValues("gap", $gap, theme)};
-  justify-content: ${({ $justifyContent }) => $justifyContent};
+const AccordionRoot = styled(RadixAccordion.Root)`
+  background-color: ${(props) => props.theme.colors.neutral0};
+
+  ${(props) => {
+  if (props.$size === "S") {
+    return css`
+        border-radius: ${(props2) => props2.theme.borderRadius};
+        border: solid 1px ${(props2) => props2.theme.colors.neutral200};
+      `;
+  } else {
+    return css``;
+  }
+}}
 `;
-const focus = css`
-  position: relative;
-  outline: none;
+const Item$2 = React.forwardRef((props, forwardedRef) => {
+  const { size } = useAccordion("Item");
+  return /* @__PURE__ */ jsx(AccordionItem, { $size: size, ref: forwardedRef, ...props });
+});
+const AccordionItem = styled(RadixAccordion.Item)`
+  overflow: hidden;
 
-  &:after {
-    transition-property: all;
-    transition-duration: 0.2s;
-    border-radius: 8px;
-    content: '';
-    position: absolute;
-    top: -4px;
-    bottom: -4px;
-    left: -4px;
-    right: -4px;
-    border: 2px solid transparent;
+  &:first-child {
+    border-top-left-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
+    border-top-right-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
   }
 
-  &:focus-visible {
-    outline: none;
+  &:last-child {
+    border-bottom-left-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
+    border-bottom-right-radius: ${(props) => props.$size === "S" ? "0.3rem" : ""};
+  }
 
-    &:after {
-      border-radius: 8px;
-      content: '';
-      position: absolute;
-      top: -5px;
-      bottom: -5px;
-      left: -5px;
-      right: -5px;
-      border: 2px solid ${(props) => props.theme.colors.primary600};
-    }
+  & + & {
+    border-top: ${(props) => props.$size === "S" ? `solid 1px ${props.theme.colors.neutral200}` : "unset"};
+  }
+
+  /* This applies our desired focus effect correctly. */
+  &:focus-within {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
   }
 `;
-const rotation$2 = keyframes`
-  from {
-    transform: rotate(0deg);
+const Trigger$3 = 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: [
+      caretPosition === "left" ? /* @__PURE__ */ jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsx(CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null,
+      /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
+        Icon ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null,
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              fontWeight: size === "S" ? "bold" : void 0,
+              ellipsis: true,
+              variant: size === "M" ? "delta" : void 0,
+              children
+            }
+          ),
+          description && size === "M" ? /* @__PURE__ */ jsx(Typography, { children: description }) : null
+        ] })
+      ] }),
+      caretPosition === "right" ? /* @__PURE__ */ jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsx(CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null
+    ] });
   }
-  to {
-    transform: rotate(359deg);
+);
+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};
   }
 `;
-const LoadingWrapper = styled.div`
-  animation: ${rotation$2} 2s infinite linear;
-  will-change: transform;
-`;
-const TextButtonWrapper = styled(Flex)`
-  border: none;
+const TriggerIcon = styled(Flex).attrs((props) => ({
+  ...props,
+  tag: "span"
+}))`
+  background-color: ${(props) => props.theme.colors.neutral200};
+  width: ${(props) => props.$size === "S" ? "2.4rem" : "3.2rem"};
+  height: ${(props) => props.$size === "S" ? "2.4rem" : "3.2rem"};
+  flex: ${(props) => props.$size === "S" ? "0 0 2.4rem" : "0 0 3.2rem"};
+  border-radius: 50%;
+  justify-content: center;
 
-  &[aria-disabled='true'] {
-    pointer-events: none;
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      transform 300ms ${(props) => props.theme.easings.authenticMotion},
+      background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
   }
+`;
+const AccordionTrigger = styled(RadixAccordion.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: ${(props) => props.$caretPosition === "left" ? "flex-start" : "space-between"};
+  width: 100%;
+  gap: ${(props) => props.theme.spaces[4]};
+  padding-inline: ${(props) => props.$size === "S" ? props.theme.spaces[4] : props.theme.spaces[6]};
+  padding-block: ${(props) => props.$size === "S" ? props.theme.spaces[3] : props.theme.spaces[6]};
+  cursor: pointer;
+  color: ${(props) => props.theme.colors.neutral800};
 
-  svg path {
-    fill: ${({ theme }) => theme.colors.primary600};
+  &[data-disabled] {
+    cursor: default;
+    color: ${(props) => props.theme.colors.neutral600};
   }
 
-  ${focus}
-`;
-const TextButton = React.forwardRef(
-  ({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
-    const handleClick = onClick && !disabled ? onClick : void 0;
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxs(
-      TextButtonWrapper,
-      {
-        ref,
-        "aria-disabled": isDisabled,
-        onClick: handleClick,
-        tag: "button",
-        type: "button",
-        background: "transparent",
-        gap: 2,
-        ...props,
-        children: [
-          loading ? /* @__PURE__ */ jsx(LoadingWrapper, { "aria-hidden": true, children: /* @__PURE__ */ jsx(Loader$1, {}) }) : startIcon,
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: isDisabled ? "neutral600" : "primary600", children }),
-          endIcon
-        ]
-      }
-    );
+  &[data-state='open'] > ${TriggerIcon} {
+    transform: rotate(180deg);
   }
-);
-TextButton.displayName = "TextButton";
-const AccordionToggle = ({
-  title,
-  description,
-  tag,
-  togglePosition = "right",
-  action,
-  ...props
-}) => {
-  const { onToggle, toggle, expanded, id, size, variant: variant2, disabled } = useAccordion();
-  const ariaControls = `accordion-content-${id}`;
-  const ariaLabelId = `accordion-label-${id}`;
-  const ariaDescriptionId = `accordion-desc-${id}`;
-  const boxPaddingX = size === "M" ? 6 : 4;
-  const boxPaddingY = size === "M" ? boxPaddingX : boxPaddingX - 2;
-  let boxBackground = "neutral100";
-  if (expanded) {
-    boxBackground = "primary100";
-  } else if (disabled) {
-    boxBackground = "neutral150";
-  } else if (variant2 === "primary") {
-    boxBackground = "neutral0";
-  }
-  const titleColor = expanded ? "primary600" : "neutral700";
-  const titleProps = {
-    tag,
-    fontWeight: size === "S" ? "bold" : void 0,
-    id: ariaLabelId,
-    textColor: titleColor,
-    ellipsis: true,
-    variant: size === "M" ? "delta" : void 0
-  };
-  const descriptionColor = expanded ? "primary600" : "neutral600";
-  const iconColor = expanded ? "primary200" : "neutral200";
-  const iconSize = size === "M" ? `3.2rem` : `2.4rem`;
-  const handleToggle = () => {
-    if (!disabled) {
-      if (toggle && !onToggle) {
-        console.warn(
-          'Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'
-        );
-        toggle();
-      } else if (onToggle) {
-        onToggle();
-      }
-    }
-  };
-  const dropdownIcon = /* @__PURE__ */ jsx(
-    Flex,
-    {
-      justifyContent: "center",
-      borderRadius: "50%",
-      height: iconSize,
-      width: iconSize,
-      transform: expanded ? `rotate(180deg)` : void 0,
-      "data-strapi-dropdown": true,
-      "aria-hidden": true,
-      tag: "span",
-      background: iconColor,
-      cursor: disabled ? "not-allowed" : "pointer",
-      shrink: 0,
-      children: /* @__PURE__ */ jsx(CaretDown, { width: size === "M" ? `1.6rem` : `1.2rem`, fill: expanded ? "primary600" : "neutral600" })
-    }
-  );
-  const stopPropagation = (e) => {
-    e.stopPropagation();
-  };
-  return /* @__PURE__ */ jsx(
-    FlexWithSize,
-    {
-      paddingBottom: boxPaddingY,
-      paddingLeft: boxPaddingX,
-      paddingRight: boxPaddingX,
-      paddingTop: boxPaddingY,
-      background: boxBackground,
-      $expanded: expanded,
-      $size: size,
-      justifyContent: "space-between",
-      cursor: disabled ? "not-allowed" : "pointer",
-      onClick: handleToggle,
-      children: /* @__PURE__ */ jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [
-        togglePosition === "left" && dropdownIcon,
-        /* @__PURE__ */ jsxs(
-          ToggleButton,
-          {
-            "aria-disabled": disabled,
-            "aria-expanded": expanded,
-            "aria-controls": ariaControls,
-            "aria-labelledby": ariaLabelId,
-            "data-strapi-accordion-toggle": true,
-            $expanded: expanded,
-            type: "button",
-            flex: 1,
-            minWidth: 0,
-            ...props,
-            children: [
-              /* @__PURE__ */ jsx(AccordionTitle, { ...titleProps, children: title }),
-              description && /* @__PURE__ */ jsx(AccordionDescription, { tag: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description })
-            ]
-          }
-        ),
-        togglePosition === "right" && /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
-          dropdownIcon,
-          /* @__PURE__ */ jsx(Box, { tag: "span", onClick: stopPropagation, children: action })
-        ] }),
-        togglePosition === "left" && /* @__PURE__ */ jsx(Box, { tag: "span", onClick: stopPropagation, children: action })
-      ] })
-    }
-  );
-};
-const AccordionDescription = styled(Typography)``;
-const AccordionTitle = styled(Typography)``;
-const ToggleButton = styled(TextButton)`
-  text-align: left;
 
-  // necessary to make the ellipsis prop work on the title
-  > span {
-    max-width: 100%;
+  /* we remove the default focus because the entire item should have the focus style and the default would be hidden. */
+  &:focus-visible {
+    outline: none;
   }
 
-  & > svg {
-    width: 1.4rem;
-    height: 1.4rem;
-    fill: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral500};
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
   }
 `;
-const FlexWithSize = styled(Flex)`
-  min-height: ${({ theme, $size }) => theme.sizes.accordions[$size]};
-  border-radius: ${({ theme, $expanded }) => $expanded ? `${theme.borderRadius} ${theme.borderRadius} 0 0` : theme.borderRadius};
+const Actions = React.forwardRef((props, forwardedRef) => {
+  const { size } = useAccordion("Trigger");
+  return /* @__PURE__ */ jsx(ActionWrapper, { $size: size, ...props, ref: forwardedRef });
+});
+const ActionWrapper = styled(Flex).attrs((props) => ({
+  ...props,
+  tag: "span"
+}))`
+  padding-inline: ${(props) => props.$size === "S" ? props.theme.spaces[2] : props.theme.spaces[6]};
+  padding-block: ${(props) => props.$size === "S" ? props.theme.spaces[2] : props.theme.spaces[6]};
 
-  &:hover {
-    ${ToggleButton} {
-      svg {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
+  // Remove default IconButton styles so there are no backgrounds or borders.
+  & > button {
+    border: none;
+    background: none;
+    color: ${(props) => props.theme.colors.neutral600};
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
     }
   }
 `;
-const Accordion = ({
-  children,
-  disabled = false,
-  error,
-  expanded = false,
-  hasErrorMessage = true,
-  id,
-  onToggle,
-  toggle,
-  size = "M",
-  variant: variant2 = "primary",
-  shadow
-}) => {
-  const generatedId = useId(id);
-  const context = React.useMemo(
-    () => ({ expanded, onToggle, toggle, id: generatedId, size, variant: variant2, disabled }),
-    [disabled, expanded, generatedId, onToggle, size, toggle, variant2]
-  );
-  return /* @__PURE__ */ jsxs(AccordionContext.Provider, { value: context, children: [
-    /* @__PURE__ */ jsx(
-      AccordionWrapper,
-      {
-        "data-strapi-expanded": expanded,
-        "aria-disabled": disabled,
-        hasRadius: true,
-        shadow,
-        $expanded: expanded,
-        $disabled: disabled,
-        $variant: variant2,
-        $error: error,
-        children
-      }
-    ),
-    error && hasErrorMessage && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) })
-  ] });
-};
-const AccordionWrapper = styled(Box)`
-  border: ${({ theme, $expanded, $variant, $disabled, $error }) => {
-  if ($error) {
-    return `1px solid ${theme.colors.danger600} !important`;
-  }
-  if ($disabled) {
-    return `1px solid ${theme.colors.neutral150}`;
-  }
-  if ($expanded) {
-    return `1px solid ${theme.colors.primary600}`;
-  }
-  if ($variant === "primary") {
-    return `1px solid ${theme.colors.neutral0}`;
+const Header = React.forwardRef(({ variant: variant2 = "primary", ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AccordionHeader, { $variant: variant2, ref: forwardedRef, ...props });
+});
+const AccordionHeader = styled(RadixAccordion.Header)`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.$variant === "primary" ? props.theme.colors.neutral0 : props.theme.colors.neutral100};
+
+  &[data-disabled] {
+    background-color: ${(props) => props.theme.colors.neutral150};
   }
-  return `1px solid ${theme.colors.neutral100}`;
-}};
 
-  &:hover:not([aria-disabled='true']) {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
+  &:not([data-disabled]) {
+    &:hover,
+    &[data-state='open'] {
+      background-color: ${(props) => props.theme.colors.primary100};
 
-    ${AccordionTitle} {
-      color: ${({ theme, $expanded }) => $expanded ? void 0 : theme.colors.primary700};
-    }
+      & > ${AccordionTrigger} {
+        color: ${(props) => props.theme.colors.primary600};
 
-    ${AccordionDescription} {
-      color: ${({ theme, $expanded }) => $expanded ? void 0 : theme.colors.primary600};
-    }
+        & ${IconBox$4} {
+          color: ${(props) => props.theme.colors.primary600};
+        }
 
-    & > div:first-child {
-      background: ${({ theme }) => theme.colors.primary100};
-    }
+        & ${TriggerIcon} {
+          background-color: ${(props) => props.theme.colors.primary200};
+        }
+      }
 
-    [data-strapi-dropdown='true'] {
-      background: ${({ theme }) => theme.colors.primary200};
+      & > ${ActionWrapper} > button {
+        color: ${(props) => props.theme.colors.primary600};
+      }
     }
   }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
+  }
 `;
-const AccordionContent = ({ children, ...props }) => {
-  const { expanded, id } = useAccordion();
-  if (!expanded) {
-    return null;
+const Content$4 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AccordionContent, { ref: forwardedRef, ...props });
+});
+const slideDown = keyframes`
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
   }
-  const idContent = `accordion-content-${id}`;
-  const ariaLabelId = `accordion-label-${id}`;
-  const ariaDescriptionId = `accordion-desc-${id}`;
-  return /* @__PURE__ */ jsx(Box, { role: "region", id: idContent, "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, ...props, children });
-};
-const KeyboardKeys = {
-  DOWN: "ArrowDown",
-  UP: "ArrowUp",
-  RIGHT: "ArrowRight",
-  LEFT: "ArrowLeft",
-  ESCAPE: "Escape",
-  ENTER: "Enter",
-  SPACE: " ",
-  TAB: "Tab",
-  END: "End",
-  HOME: "Home",
-  DELETE: "Delete",
-  PAGE_UP: "PageUp",
-  PAGE_DOWN: "PageDown",
-  BACKSPACE: "Backspace",
-  CLEAR: "Clear"
-};
-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 AccordionGroup = ({ children, footer, label, labelAction, error }) => {
-  const childrenArray = React.Children.toArray(children).map((child) => {
-    return React.cloneElement(child, { hasErrorMessage: false });
-  });
-  return /* @__PURE__ */ jsxs(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
-    label && /* @__PURE__ */ jsxs(Flex, { paddingBottom: 1, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "label", textColor: "neutral800", fontWeight: "bold", children: label }),
-      labelAction && /* @__PURE__ */ jsx(LabelAction$1, { paddingLeft: 1, children: labelAction })
-    ] }),
-    /* @__PURE__ */ jsx(EnhancedGroup, { $footer: footer, children: childrenArray }),
-    footer && /* @__PURE__ */ jsx(AccordionFooter, { children: footer }),
-    error && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) })
-  ] });
-};
-const AccordionFooter = styled(Box)`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
 `;
-const EnhancedGroup = styled(Box)`
-  & > * {
-    & > * {
-      border-radius: unset;
-    }
+const slideUp = keyframes`
+  from {
+    height: var(--radix-accordion-content-height);
   }
-
-  & > ${AccordionWrapper} {
-    border-radius: unset;
-    border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  to {
+    height: 0;
   }
+`;
+const AccordionContent = styled(RadixAccordion.Content)`
+  overflow: hidden;
 
-  & > ${AccordionWrapper}:first-of-type {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    & > * {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state='open'] {
+      animation: ${slideDown} 0.3s ${(props) => props.theme.easings.authenticMotion};
     }
 
-    &:hover {
-      border-top: 1px solid ${({ theme }) => theme.colors.primary600};
+    &[data-state='closed'] {
+      animation: ${slideUp} 0.3s ${(props) => props.theme.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
+}, Symbol.toStringTag, { value: "Module" }));
+const focus = css`
+  position: relative;
+  outline: none;
 
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
   }
 
-  ${({ theme, $footer }) => `
-    &:not(${$footer}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
-      }
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${(props) => props.theme.colors.primary600};
     }
-  `}
-`;
-const LabelAction$1 = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const VisuallyHidden = ({ tag, ...props }) => {
@@ -1073,10 +884,6 @@ const AvatarGroup = styled(Flex)`
     margin-left: -${avatarSize / 2}px;
   }
 `;
-const Base = styled(Flex)`
-  border-radius: ${({ theme, $size }) => $size === "S" ? "2px" : theme.borderRadius};
-  height: ${({ $size, theme }) => theme.sizes.badge[$size]};
-`;
 const Badge = ({
   active = false,
   size = "M",
@@ -1099,10 +906,25 @@ const Badge = ({
       background: active ? "primary200" : backgroundColor,
       $size: size,
       ...props,
-      children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: active ? "primary600" : textColor, children })
+      children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: active ? "primary600" : textColor, lineHeight: "1rem", children })
     }
   );
 };
+const Base = styled(Flex)`
+  border-radius: ${({ theme, $size }) => $size === "S" ? "2px" : theme.borderRadius};
+  ${({ $size, theme }) => {
+  if ($size === "S") {
+    return css`
+        padding-block: 0.3rem;
+        padding-inline ${theme.spaces[1]}
+      `;
+  }
+  return css`
+      padding-block: 0.7rem;
+      padding-inline ${theme.spaces[2]}
+    `;
+}};
+`;
 const BaseButton = forwardRef(
   ({ disabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -1146,14 +968,8 @@ function useComposedRefs(...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 getCheckboxSize = ({ $size }) => {
-  if ($size === "M") {
-    return "18px";
-  }
-  return "20px";
-};
 const BaseCheckbox = React.forwardRef(
-  ({ indeterminate = false, size = "M", name, value = false, onValueChange, ...inputProps }, forwardedRef) => {
+  ({ indeterminate = false, name, value = false, onValueChange, ...inputProps }, forwardedRef) => {
     const checkboxRef = React.useRef(null);
     const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
     React.useEffect(() => {
@@ -1168,10 +984,9 @@ const BaseCheckbox = React.forwardRef(
         onValueChange(!value);
       }
     };
-    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       CheckboxInput,
       {
-        $size: size,
         checked: value,
         onChange: handleValueChange,
         type: "checkbox",
@@ -1179,17 +994,17 @@ const BaseCheckbox = React.forwardRef(
         name,
         ...inputProps
       }
-    ) });
+    );
   }
 );
 BaseCheckbox.displayName = "BaseCheckbox";
 const CheckboxInput = styled.input`
-  height: ${getCheckboxSize};
-  min-width: ${getCheckboxSize};
+  min-width: 1.8rem;
+  height: 1.8rem;
   margin: 0;
+  appearance: none;
   border-radius: ${({ theme }) => theme.borderRadius};
   border: 1px solid ${({ theme }) => theme.colors.neutral300};
-  -webkit-appearance: none;
   background-color: ${({ theme }) => theme.colors.neutral0};
   cursor: pointer;
 
@@ -1202,8 +1017,8 @@ const CheckboxInput = styled.input`
       display: block;
       position: relative;
       background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
-      width: 10px;
-      height: 10px;
+      width: 1rem;
+      height: 1rem;
       left: 50%;
       top: 50%;
       transform: translateX(-50%) translateY(-50%);
@@ -1262,30 +1077,39 @@ const BaseLink = forwardRef(
     );
   }
 );
-const RadioContext = React.createContext({
+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: "",
-  size: "M",
   selected: ""
 });
-const getRadioSize = (size) => {
-  if (size === "M") {
-    return "18px";
-  }
-  return "20px";
-};
-const getSelectedRadioSize = (size) => {
-  if (size === "M") {
-    return "10px";
-  }
-  return "12px";
-};
-const getSelectedRadioPosition = () => {
-  return "3px";
+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, size } = React.useContext(RadioContext);
+  const { onChange, selected, name } = useRadioGroup("BaseRadio");
   const isSelected = selected === value;
   return /* @__PURE__ */ jsx(
     RadioInput,
@@ -1299,7 +1123,6 @@ const BaseRadio = React.forwardRef(({ value, disabled = false, ...props }, ref)
       checked: isSelected,
       disabled,
       id: generatedId,
-      $size: size,
       onChange,
       ...props
     }
@@ -1312,9 +1135,8 @@ const RadioInput = styled.input`
   background-color: ${({ theme }) => theme.colors.neutral0};
   border: 1px solid ${({ theme }) => theme.colors.primary600};
   border-radius: 50%;
-  height: ${({ $size }) => getRadioSize($size)};
-  width: ${({ $size }) => getRadioSize($size)};
-  -webkit-appearance: none;
+  height: 1.8rem;
+  width: 1.8rem;
 
   &:after {
     border-radius: 50%;
@@ -1322,10 +1144,10 @@ const RadioInput = styled.input`
     position: relative;
     z-index: 1;
     display: block;
-    height: ${({ $size }) => typeof $size === "number" ? $size : getSelectedRadioSize($size)};
-    width: ${({ $size }) => typeof $size === "number" ? $size : getSelectedRadioSize($size)};
-    left: ${getSelectedRadioPosition};
-    top: ${getSelectedRadioPosition};
+    height: 1rem;
+    width: 1rem;
+    left: 0.3rem;
+    top: 0.3rem;
   }
 
   &:checked:after {
@@ -1337,30 +1159,6 @@ const RadioInput = styled.input`
     background: ${({ theme }) => theme.colors.neutral200};
   }
 `;
-const setTabIndexOnFirstItem = (node, selector) => {
-  const list = node.querySelectorAll(selector);
-  if (list && list.length > 0) {
-    list.item(0).setAttribute("tabindex", "0");
-  }
-};
-const RadioGroup = ({
-  children,
-  labelledBy,
-  onChange,
-  value = "",
-  size = "M",
-  name,
-  ...props
-}) => {
-  const radioGroupRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if (!value) {
-      setTabIndexOnFirstItem(radioGroupRef.current, `[name="${name}"]`);
-    }
-  }, [value, name]);
-  const context = React.useMemo(() => ({ onChange, selected: value, name, size }), [name, onChange, size, value]);
-  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ref: radioGroupRef, role: "radiogroup", "aria-labelledby": labelledBy, ...props, children }) });
-};
 const Divider$1 = () => {
   return /* @__PURE__ */ jsx(Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "/" }) });
 };
@@ -1608,7 +1406,7 @@ const Button = forwardRef(
     );
   }
 );
-const rotation$1 = keyframes`
+const rotation$2 = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1617,7 +1415,7 @@ const rotation$1 = keyframes`
   }
 `;
 const LoaderAnimated = styled(Loader$1)`
-  animation: ${rotation$1} 2s infinite linear;
+  animation: ${rotation$2} 2s infinite linear;
   will-change: transform;
 `;
 const ButtonWrapper = styled(BaseButton)`
@@ -1736,8 +1534,8 @@ const Viewport$2 = styled(Flex)`
     display: none;
   }
 `;
-const MenuItem$1 = ({ onSelect, disabled = false, ...props }) => {
-  return /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, onSelect, disabled, children: props.isLink || props.isExternal ? /* @__PURE__ */ jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: /* @__PURE__ */ jsx(Typography, { children: props.children }) }) : /* @__PURE__ */ jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: /* @__PURE__ */ jsx(Typography, { children: props.children }) }) });
+const MenuItem$1 = ({ onSelect, disabled = false, isLink, ...props }) => {
+  return /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, onSelect, disabled, children: isLink || props.isExternal ? /* @__PURE__ */ jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: /* @__PURE__ */ jsx(Typography, { children: props.children }) }) : /* @__PURE__ */ jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: /* @__PURE__ */ jsx(Typography, { children: props.children }) }) });
 };
 const getOptionStyle = ({ theme }) => css`
   text-align: left;
@@ -1934,12 +1732,8 @@ const CardAction = styled(Flex)`
   return void 0;
 }};
 `;
-const CARD_SIZES = {
-  S: 8.8,
-  M: 16.4
-};
 const CardAsset = ({ size = "M", children, ...props }) => {
-  return /* @__PURE__ */ jsx(CardAssetWrapper, { $size: size, children: children ? /* @__PURE__ */ jsx(Flex, { children }) : /* @__PURE__ */ jsx(CardAssetImg, { ...props, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx(CardAssetWrapper, { $size: size, children: children ? children : /* @__PURE__ */ jsx(CardAssetImg, { ...props, "aria-hidden": true }) });
 };
 const CardAssetImg = styled.img`
   // inline flows is based on typography and displays an extra white space below the image
@@ -1954,7 +1748,7 @@ const CardAssetImg = styled.img`
 const CardAssetWrapper = styled.div`
   display: flex;
   justify-content: center;
-  height: ${({ $size }) => `${CARD_SIZES[$size]}rem`};
+  height: ${({ $size }) => $size === "S" ? "8.8rem" : "16.4rem"};
   width: 100%;
   background: repeating-conic-gradient(${({ theme }) => theme.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
     20px;
@@ -2007,155 +1801,75 @@ const CardTitle = (props) => {
   const { id } = useCard();
   return /* @__PURE__ */ jsx(Typography, { variant: "pi", id: `${id}-title`, textColor: "neutral800", fontWeight: "bold", tag: "div", ...props });
 };
-const CardSubtitle = (props) => {
-  return /* @__PURE__ */ jsx(Typography, { variant: "pi", ...props, textColor: "neutral600", tag: "div" });
-};
-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 useTooltipHandlers = (delay) => {
-  const [visible, setVisible] = React.useState(false);
-  const timerRef = React.useRef(null);
-  const clearTimer = () => {
-    if (typeof timerRef.current === "number") {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-  React.useEffect(() => {
-    return () => {
-      clearTimer();
-    };
-  }, []);
-  const onFocus = () => {
-    setVisible(true);
-  };
-  const onBlur = () => {
-    setVisible(false);
-  };
-  const onMouseEnter = () => {
-    timerRef.current = setTimeout(() => {
-      setVisible(true);
-    }, delay);
-  };
-  const onMouseLeave = () => {
-    clearTimer();
-    setVisible(false);
-  };
-  return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
-};
-const SPACE_BETWEEN = 8;
-const positionBottom = (tooltipRect, toggleSourceRect) => {
-  const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-  const left = toggleSourceRect.left - widthDifference;
-  const top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN + window.pageYOffset;
-  return {
-    left,
-    top
-  };
-};
-const positionRight = (tooltipRect, toggleSourceRect) => {
-  const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-  const left = toggleSourceRect.left + toggleSourceRect.width + SPACE_BETWEEN;
-  const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-  return { left, top };
-};
-const positionLeft = (tooltipRect, toggleSourceRect) => {
-  const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-  const left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-  const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-  return { left, top };
-};
-const positionTop = (tooltipRect, toggleSourceRect) => {
-  const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-  let left = toggleSourceRect.left - widthDifference;
-  let top = toggleSourceRect.top - tooltipRect.height - SPACE_BETWEEN + window.pageYOffset;
-  const rightSpaceDifference = window.innerWidth - toggleSourceRect.right;
-  const overflowRight = toggleSourceRect.left + tooltipRect.width - rightSpaceDifference;
-  if (overflowRight > window.innerWidth) {
-    left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-    top = toggleSourceRect.top + window.scrollY - toggleSourceRect.height / 2;
-  } else if (left < 0) {
-    left = toggleSourceRect.width + toggleSourceRect.left + SPACE_BETWEEN;
-    top = toggleSourceRect.top + window.scrollY - tooltipRect.height / 2 + SPACE_BETWEEN;
-  } else if (top < 0 && left > 0) {
-    top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN;
-  }
-  return {
-    left,
-    top
-  };
-};
-const positionTooltip = (tooltipNode, toggleSourceNode, position) => {
-  const tooltipRect = tooltipNode.getBoundingClientRect();
-  const toggleSourceRect = toggleSourceNode.getBoundingClientRect();
-  if (position === "bottom") {
-    return positionBottom(tooltipRect, toggleSourceRect);
-  }
-  if (position === "right") {
-    return positionRight(tooltipRect, toggleSourceRect);
-  }
-  if (position === "left") {
-    return positionLeft(tooltipRect, toggleSourceRect);
-  }
-  return positionTop(tooltipRect, toggleSourceRect);
-};
-const useTooltipLayout = (visible, position) => {
-  const tooltipWrapperRef = React.useRef(null);
-  const toggleSourceRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if (visible) {
-      const tooltip = tooltipWrapperRef.current;
-      const toggleSource = toggleSourceRef.current;
-      if (tooltip && toggleSource) {
-        const tooltipPosition = positionTooltip(tooltip, toggleSource, position);
-        tooltip.style.left = `${tooltipPosition.left}px`;
-        tooltip.style.top = `${tooltipPosition.top}px`;
-      }
-    }
-  }, [position, visible]);
-  return { tooltipWrapperRef, toggleSourceRef };
+const CardSubtitle = (props) => {
+  return /* @__PURE__ */ jsx(Typography, { variant: "pi", ...props, textColor: "neutral600", tag: "div" });
 };
-const Tooltip = ({ children, label, description, delay = 500, position = "top", id, ...props }) => {
-  const tooltipId = useId(id);
-  const descriptionId = useId();
-  const { visible, ...tooltipHandlers } = useTooltipHandlers(delay);
-  const { tooltipWrapperRef, toggleSourceRef } = useTooltipLayout(visible, position);
-  const childrenClone = React.cloneElement(children, {
-    tabIndex: 0,
-    "aria-labelledby": label ? tooltipId : void 0,
-    "aria-describedby": description ? tooltipId : void 0,
-    ...tooltipHandlers
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsxs(
-      TooltipWrapper,
+const KeyboardKeys = {
+  DOWN: "ArrowDown",
+  UP: "ArrowUp",
+  RIGHT: "ArrowRight",
+  LEFT: "ArrowLeft",
+  ESCAPE: "Escape",
+  ENTER: "Enter",
+  SPACE: " ",
+  TAB: "Tab",
+  END: "End",
+  HOME: "Home",
+  DELETE: "Delete",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  BACKSPACE: "Backspace",
+  CLEAR: "Clear"
+};
+const TooltipImpl = React.forwardRef(
+  ({
+    children,
+    description,
+    label,
+    defaultOpen,
+    open,
+    onOpenChange,
+    delayDuration = 500,
+    disableHoverableContent,
+    ...restProps
+  }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(
+      Tooltip.Root,
       {
-        id: tooltipId,
-        background: "neutral900",
-        hasRadius: true,
-        padding: 2,
-        role: "tooltip",
-        ref: tooltipWrapperRef,
-        $visible: visible,
-        position: "absolute",
-        ...props,
+        defaultOpen,
+        open,
+        onOpenChange,
+        delayDuration,
+        disableHoverableContent,
         children: [
-          visible && /* @__PURE__ */ jsx(VisuallyHidden, { id: descriptionId, children: description }),
-          /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: label || description })
+          /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
+          /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(TooltipContent, { ref: forwardedRef, sideOffset: 8, ...restProps, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: label || description }) }) })
         ]
       }
-    ) }),
-    /* @__PURE__ */ jsx("span", { ref: toggleSourceRef, children: childrenClone })
-  ] });
-};
-const TooltipWrapper = styled(Box)`
-  /* z-index exist because of its position inside Modals */
-  z-index: 4;
-  display: ${({ $visible }) => $visible ? "revert" : "none"};
+    );
+  }
+);
+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};
+  padding-inline: ${(props) => props.theme.spaces[2]};
+  padding-block: ${(props) => props.theme.spaces[2]};
+  border-radius: ${(props) => props.theme.borderRadius};
+  z-index: ${(props) => props.theme.zIndices.tooltip};
+  will-change: opacity;
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeIn} 200ms ${(props) => props.theme.easings.authenticMotion};
+  }
 `;
 const CarouselGrid = styled(Box)`
   grid-template-columns: auto 1fr auto;
@@ -2223,41 +1937,43 @@ const Carousel = React.forwardRef(
           ]
         }
       ),
-      secondaryLabel && /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: /* @__PURE__ */ jsx(Tooltip, { label: secondaryLabel, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: secondaryLabel }) }) }) })
+      secondaryLabel && /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: /* @__PURE__ */ jsx(TooltipImpl, { label: secondaryLabel, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: secondaryLabel }) }) }) })
     ] }) });
   }
 );
-const createContext = (rootComponentName, defaultContext) => {
-  const Context = React.createContext(defaultContext);
-  const Provider2 = (props) => {
-    const { children, ...context } = props;
-    const value = React.useMemo(() => context, Object.values(context));
-    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
-  };
-  function useContext(consumerName) {
-    const context = React.useContext(Context);
-    if (context)
-      return context;
-    if (defaultContext !== void 0)
-      return defaultContext;
-    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-  }
-  Provider2.displayName = `${rootComponentName}Provider`;
-  return [Provider2, useContext];
+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 = {
-  input: {
-    S: `3.2rem`,
-    M: `4rem`
-  },
   accordions: {
     S: `4.8rem`,
     M: `8.8rem`
   },
-  badge: {
-    S: `1.6rem`,
-    M: `2.4rem`
-  },
   button: {
     S: `3.2rem`,
     M: `3.6rem`,
@@ -2266,8 +1982,15 @@ const sizes = {
 };
 const commonTheme = {
   sizes,
-  zIndices: [5, 10, 15, 20],
-  // TBD
+  zIndices: {
+    navigation: 100,
+    overlay: 300,
+    modal: 310,
+    dialog: 320,
+    popover: 500,
+    notification: 700,
+    tooltip: 1e3
+  },
   spaces: ["0px", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "56px", "64px"],
   borderRadius: "4px",
   mediaQueries: {
@@ -2280,7 +2003,8 @@ const commonTheme = {
     regular: 400,
     semiBold: 500,
     bold: 600
-  }
+  },
+  easings: EASINGS
 };
 const lightColorTokenObject = {
   color: {
@@ -3108,7 +2832,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, TypeError2 = context.TypeError;
+      var Array2 = context.Array, Date2 = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -3631,9 +3355,9 @@ lodash.exports;
       }
       function baseDelay(func, wait, args) {
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
-        return setTimeout2(function() {
+        return setTimeout(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -4413,7 +4137,7 @@ lodash.exports;
         end = end === undefined$1 ? length : end;
         return !start && end >= length ? array : baseSlice(array, start, end);
       }
-      var clearTimeout2 = ctxClearTimeout || function(id) {
+      var clearTimeout = ctxClearTimeout || function(id) {
         return root.clearTimeout(id);
       };
       function cloneBuffer(buffer, isDeep) {
@@ -4686,7 +4410,7 @@ lodash.exports;
           while (index--) {
             var func = funcs[index];
             if (typeof func != "function") {
-              throw new TypeError2(FUNC_ERROR_TEXT);
+              throw new TypeError(FUNC_ERROR_TEXT);
             }
             if (prereq && !wrapper && getFuncName(func) == "wrapper") {
               var wrapper = new LodashWrapper([], true);
@@ -4910,7 +4634,7 @@ lodash.exports;
       function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary2, arity) {
         var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;
         if (!isBindKey && typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         var length = partials ? partials.length : 0;
         if (!length) {
@@ -5464,7 +5188,7 @@ lodash.exports;
         return object[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout2 = ctxSetTimeout || function(func, wait) {
+      var setTimeout = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -6177,7 +5901,7 @@ lodash.exports;
       };
       function after(n, func) {
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -6194,7 +5918,7 @@ lodash.exports;
       function before(n, func) {
         var result2;
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -6238,7 +5962,7 @@ lodash.exports;
       function debounce(func, wait, options) {
         var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
         if (isObject2(options)) {
@@ -6256,7 +5980,7 @@ lodash.exports;
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout2(timerExpired, wait);
+          timerId = setTimeout(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -6272,7 +5996,7 @@ lodash.exports;
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout2(timerExpired, remainingWait(time));
+          timerId = setTimeout(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -6284,7 +6008,7 @@ lodash.exports;
         }
         function cancel() {
           if (timerId !== undefined$1) {
-            clearTimeout2(timerId);
+            clearTimeout(timerId);
           }
           lastInvokeTime = 0;
           lastArgs = lastCallTime = lastThis = timerId = undefined$1;
@@ -6302,13 +6026,13 @@ lodash.exports;
               return leadingEdge(lastCallTime);
             }
             if (maxing) {
-              clearTimeout2(timerId);
-              timerId = setTimeout2(timerExpired, wait);
+              clearTimeout(timerId);
+              timerId = setTimeout(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout2(timerExpired, wait);
+            timerId = setTimeout(timerExpired, wait);
           }
           return result2;
         }
@@ -6327,7 +6051,7 @@ lodash.exports;
       }
       function memoize(func, resolver) {
         if (typeof func != "function" || resolver != null && typeof resolver != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         var memoized = function() {
           var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
@@ -6344,7 +6068,7 @@ lodash.exports;
       memoize.Cache = MapCache;
       function negate(predicate) {
         if (typeof predicate != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         return function() {
           var args = arguments;
@@ -6361,7 +6085,7 @@ lodash.exports;
           return !predicate.apply(this, args);
         };
       }
-      function once2(func) {
+      function once(func) {
         return before(2, func);
       }
       var overArgs = castRest(function(func, transforms) {
@@ -6388,14 +6112,14 @@ lodash.exports;
       });
       function rest(func, start) {
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         start = start === undefined$1 ? start : toInteger(start);
         return baseRest(func, start);
       }
       function spread(func, start) {
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         start = start == null ? 0 : nativeMax(toInteger(start), 0);
         return baseRest(function(args) {
@@ -6409,7 +6133,7 @@ lodash.exports;
       function throttle(func, wait, options) {
         var leading = true, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError2(FUNC_ERROR_TEXT);
+          throw new TypeError(FUNC_ERROR_TEXT);
         }
         if (isObject2(options)) {
           leading = "leading" in options ? !!options.leading : leading;
@@ -7225,7 +6949,7 @@ lodash.exports;
         var length = pairs == null ? 0 : pairs.length, toIteratee = getIteratee();
         pairs = !length ? [] : arrayMap(pairs, function(pair) {
           if (typeof pair[1] != "function") {
-            throw new TypeError2(FUNC_ERROR_TEXT);
+            throw new TypeError(FUNC_ERROR_TEXT);
           }
           return [toIteratee(pair[0]), pair[1]];
         });
@@ -7482,7 +7206,7 @@ lodash.exports;
       lodash2.nthArg = nthArg;
       lodash2.omit = omit;
       lodash2.omitBy = omitBy;
-      lodash2.once = once2;
+      lodash2.once = once;
       lodash2.orderBy = orderBy;
       lodash2.over = over;
       lodash2.overArgs = overArgs;
@@ -7995,17 +7719,12 @@ const LabelAction = styled(Flex)`
   line-height: 0;
   color: ${({ theme }) => theme.colors.neutral500};
 `;
-const PADDING_Y = {
-  S: 0.6,
-  M: 0.8
-};
 const Input$2 = React.forwardRef(
   ({
     endAction,
     startAction,
     disabled = false,
     onChange,
-    size = "M",
     hasError: hasErrorProp,
     required: requiredProp,
     className,
@@ -8029,6 +7748,8 @@ const Input$2 = React.forwardRef(
       {
         paddingLeft: 3,
         paddingRight: 3,
+        paddingTop: 2,
+        paddingBottom: 2,
         gap: 2,
         justifyContent: "space-between",
         $hasError: hasError || hasErrorProp,
@@ -8051,7 +7772,6 @@ const Input$2 = React.forwardRef(
               $hasRightAction: Boolean(endAction),
               onChange: handleChange,
               "aria-required": required || requiredProp,
-              $size: size,
               ...props
             }
           ),
@@ -8064,9 +7784,6 @@ const Input$2 = React.forwardRef(
 const InputElement = styled.input`
   border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
-  padding: 0;
-  padding-bottom: ${({ $size }) => `${PADDING_Y[$size]}rem`};
-  padding-top: ${({ $size }) => `${PADDING_Y[$size]}rem`};
   cursor: ${(props) => props["aria-disabled"] ? "not-allowed" : void 0};
 
   color: ${({ theme }) => theme.colors.neutral800};
@@ -8187,11 +7904,10 @@ const CarouselInput = React.forwardRef(
     ] }) });
   }
 );
-const CarouselActions = ({ horizontal = true, spacing = 1, ...props }) => /* @__PURE__ */ jsx(
+const CarouselActions = ({ horizontal = true, ...props }) => /* @__PURE__ */ jsx(
   Flex,
   {
     justifyContent: "center",
-    gap: spacing,
     direction: horizontal ? "row" : "column",
     alignItems: horizontal ? "center" : "stretch",
     position: "absolute",
@@ -8209,7 +7925,7 @@ const CarouselImage = (props) => {
     setIsError(true);
   };
   if (isError) {
-    return /* @__PURE__ */ jsx(Tooltip, { description: props.alt ?? "", children: /* @__PURE__ */ jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props }) });
+    return /* @__PURE__ */ jsx(TooltipImpl, { label: props.alt ?? "", children: /* @__PURE__ */ jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props }) });
   }
   return /* @__PURE__ */ jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
 };
@@ -8243,47 +7959,6 @@ const CheckboxLabel = styled(Typography)`
     cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   }
 `;
-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;
-}
 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: [
@@ -8291,7 +7966,7 @@ const Loader = React.forwardRef(({ children, small = false, ...props }, ref) =>
     /* @__PURE__ */ jsx(LoaderImg, { src: loaderSvg, "aria-hidden": true, $small: small })
   ] });
 });
-const rotation = keyframes`
+const rotation$1 = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -8300,7 +7975,7 @@ const rotation = keyframes`
   }
 `;
 const LoaderImg = styled.img`
-  animation: ${rotation} 1s infinite linear;
+  animation: ${rotation$1} 1s infinite linear;
   will-change: transform;
   ${({ $small, theme }) => $small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
 `;
@@ -8337,23 +8012,22 @@ const Combobox = React.forwardRef(
     onLoadMore,
     placeholder = "Select or enter a value",
     required: requiredProp = false,
-    size = "M",
     startIcon,
     textValue,
     value,
     ...restProps
   }, forwardedRef) => {
-    const [internalIsOpen, setInternalIsOpen] = useControllableState({
+    const [internalIsOpen, setInternalIsOpen] = useControllableState$1({
       prop: open,
       defaultProp: defaultOpen,
       onChange: onOpenChange
     });
-    const [internalTextValue, setInternalTextValue] = useControllableState({
+    const [internalTextValue, setInternalTextValue] = useControllableState$1({
       prop: textValue,
       defaultProp: allowCustomValue && !defaultTextValue ? value : defaultTextValue,
       onChange: onTextValueChange
     });
-    const [internalFilterValue, setInternalFilterValue] = useControllableState({
+    const [internalFilterValue, setInternalFilterValue] = useControllableState$1({
       prop: filterValue,
       defaultProp: defaultFilterValue,
       onChange: onFilterValueChange
@@ -8437,7 +8111,7 @@ const Combobox = React.forwardRef(
         onFilterValueChange: handleFilterValueChange,
         isPrintableCharacter: isPrintableCharacter2,
         children: [
-          /* @__PURE__ */ jsxs(Trigger$1, { $hasError: hasError, $size: size, className, children: [
+          /* @__PURE__ */ jsxs(Trigger$1, { $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,
               /* @__PURE__ */ jsx(
@@ -8462,6 +8136,9 @@ const Combobox = React.forwardRef(
                   hasRadius: true,
                   background: "transparent",
                   type: "button",
+                  padding: 0,
+                  color: "neutral600",
+                  borderStyle: "none",
                   onClick: handleClearClick,
                   "aria-disabled": disabled,
                   "aria-label": clearLabel,
@@ -8494,22 +8171,15 @@ const Combobox = React.forwardRef(
   }
 );
 const IconBox$3 = styled(Box)`
-  border: none;
-
-  svg {
-    height: 1.1rem;
-    width: 1.1rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
+  padding: 0;
 `;
 const Trigger$1 = styled(Combobox$1.Trigger)`
   position: relative;
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   padding-right: ${({ theme }) => theme.spaces[3]};
   padding-left: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[2]};
+  padding-bottom: ${({ theme }) => theme.spaces[2]};
   border-radius: ${({ theme }) => theme.borderRadius};
   background: ${({ theme }) => theme.colors.neutral0};
   overflow: hidden;
@@ -8517,7 +8187,6 @@ const Trigger$1 = styled(Combobox$1.Trigger)`
   align-items: center;
   justify-content: space-between;
   gap: ${({ theme }) => theme.spaces[4]};
-  min-height: ${({ theme, $size }) => getThemeSize("input")({ theme, size: $size })};
 
   &[data-disabled] {
     color: ${({ theme }) => theme.colors.neutral600};
@@ -8535,6 +8204,7 @@ const Trigger$1 = styled(Combobox$1.Trigger)`
 const TextInput$1 = styled(Combobox$1.TextInput)`
   width: 100%;
   font-size: 1.4rem;
+  line-height: 2.2rem;
   color: ${({ theme }) => theme.colors.neutral800};
   padding: 0;
   border: none;
@@ -8549,13 +8219,10 @@ const TextInput$1 = styled(Combobox$1.TextInput)`
   }
 `;
 const DownIcon$1 = styled(Combobox$1.Icon)`
-  & > svg {
-    width: 0.6rem;
-
-    & > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: ${({ theme }) => theme.colors.neutral600};
 
   &[aria-disabled='true'] {
     cursor: inherit;
@@ -8569,7 +8236,7 @@ const Content$2 = styled(Combobox$1.Content)`
   width: var(--radix-combobox-trigger-width);
   /* This is from the design-system figma file. */
   max-height: 15rem;
-  z-index: ${({ theme }) => theme.zIndices[1]};
+  z-index: ${({ theme }) => theme.zIndices.popover};
 `;
 const Viewport$1 = styled(Combobox$1.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -8606,7 +8273,6 @@ const OptionBox = styled.div`
     font-weight: bold;
   }
 `;
-const ComboboxOption = Option;
 const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
 const useLockScroll = (lockScroll) => {
   React.useEffect(() => {
@@ -8692,6 +8358,12 @@ const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...pr
   };
   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)`
   inset: 0;
   background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
@@ -8705,7 +8377,7 @@ const DialogContainer = styled(Box)`
 const DialogHeader = styled(Flex)`
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const Dialog = ({ onClose, title, as = "h2", isOpen, id, zIndex = 4, ...props }) => {
+const Dialog = ({ onClose, title, as = "h2", isOpen, id, zIndex = "dialog", ...props }) => {
   const generatedId = useId(id);
   useLockScroll(isOpen);
   if (!isOpen) {
@@ -8726,67 +8398,160 @@ const Dialog = ({ onClose, title, as = "h2", isOpen, id, zIndex = 4, ...props })
         /* @__PURE__ */ jsx(Box, { ...props })
       ]
     }
-  ) }) }) }) });
+  ) }) }) }) });
+};
+const IconContainer = styled(Box)`
+  svg {
+    width: ${({ theme }) => theme.spaces[6]};
+    height: ${({ theme }) => theme.spaces[6]};
+
+    path {
+      fill: ${({ theme }) => theme.colors.danger600};
+    }
+  }
+`;
+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 DialogFooter = ({ startAction, endAction }) => {
+  return /* @__PURE__ */ jsx(FooterWrapper, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    startAction,
+    endAction
+  ] }) });
+};
+let $3db38b7d1fb3fe6a$var$count = 0;
+function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
+  useEffect(() => {
+    var _edgeGuards$, _edgeGuards$2;
+    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
+    document.body.insertAdjacentElement("afterbegin", (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $3db38b7d1fb3fe6a$var$createFocusGuard());
+    $3db38b7d1fb3fe6a$var$count++;
+    return () => {
+      if ($3db38b7d1fb3fe6a$var$count === 1)
+        document.querySelectorAll("[data-radix-focus-guard]").forEach(
+          (node) => node.remove()
+        );
+      $3db38b7d1fb3fe6a$var$count--;
+    };
+  }, []);
+}
+function $3db38b7d1fb3fe6a$var$createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-radix-focus-guard", "");
+  element.tabIndex = 0;
+  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)) {
+    options = lastOptions.current;
+  }
+  lastOptions.current = options ?? null;
+  return React.useMemo(() => new DateFormatter(locale, options), [locale, options]);
+}
+function isEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  for (const key of aKeys) {
+    if (b[key] !== a[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+const LiveRegionIds = {
+  Log: "live-region-log",
+  Status: "live-region-status",
+  Alert: "live-region-alert"
 };
-const IconContainer = styled(Box)`
-  svg {
-    width: ${({ theme }) => theme.spaces[6]};
-    height: ${({ theme }) => theme.spaces[6]};
-
-    path {
-      fill: ${({ theme }) => theme.colors.danger600};
-    }
+const notifyLog = (message) => {
+  const logEl = document.querySelector(`#${LiveRegionIds.Log}`);
+  if (logEl) {
+    logEl.innerText = message;
   }
-`;
-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 notifyStatus = (message) => {
+  const statusEl = document.querySelector(`#${LiveRegionIds.Status}`);
+  if (statusEl) {
+    statusEl.innerText = message;
   }
-`;
-const DialogFooter = ({ startAction, endAction }) => {
-  return /* @__PURE__ */ jsx(FooterWrapper, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-    startAction,
-    endAction
-  ] }) });
 };
-let $3db38b7d1fb3fe6a$var$count = 0;
-function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
-  useEffect(() => {
-    var _edgeGuards$, _edgeGuards$2;
-    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
-    document.body.insertAdjacentElement("afterbegin", (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
-    document.body.insertAdjacentElement("beforeend", (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $3db38b7d1fb3fe6a$var$createFocusGuard());
-    $3db38b7d1fb3fe6a$var$count++;
+const notifyAlert = (message) => {
+  const alertEl = document.querySelector(`#${LiveRegionIds.Alert}`);
+  if (alertEl) {
+    alertEl.innerText = message;
+  }
+};
+const useNotifyAT = () => {
+  React.useEffect(() => {
     return () => {
-      if ($3db38b7d1fb3fe6a$var$count === 1)
-        document.querySelectorAll("[data-radix-focus-guard]").forEach(
-          (node) => node.remove()
-        );
-      $3db38b7d1fb3fe6a$var$count--;
+      notifyLog("");
+      notifyAlert("");
+      notifyStatus("");
     };
   }, []);
-}
-function $3db38b7d1fb3fe6a$var$createFocusGuard() {
-  const element = document.createElement("span");
-  element.setAttribute("data-radix-focus-guard", "");
-  element.tabIndex = 0;
-  element.style.cssText = "outline: none; opacity: 0; position: fixed; pointer-events: none";
-  return element;
-}
-const LiveRegionIds = {
-  Log: "live-region-log",
-  Status: "live-region-status",
-  Alert: "live-region-alert"
+  return { notifyLog, notifyAlert, notifyStatus };
 };
 const LiveRegions = () => {
   return /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
@@ -8834,6 +8599,7 @@ ${css`
   button,
   textarea,
   select {
+    padding: 0;
     font: inherit;
   }
 
@@ -8887,16 +8653,6 @@ ${css`
   }
 `}
 `;
-const ThemeProvider = ({ children, theme = lightTheme }) => {
-  return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
-    children,
-    /* @__PURE__ */ jsx(LiveRegions, {}),
-    /* @__PURE__ */ jsx(GlobalStyle, {})
-  ] });
-};
-const useTheme = () => {
-  return useTheme$1();
-};
 const DEFAULT_LOCALE = "en-EN";
 const getDefaultLocale = () => {
   if (typeof navigator === "undefined") {
@@ -8910,49 +8666,20 @@ const getDefaultLocale = () => {
 const [Provider, useDesignSystem] = createContext("StrapiDesignSystem", {
   locale: getDefaultLocale()
 });
-const DesignSystemProvider = ({ locale = getDefaultLocale(), ...restProps }) => {
-  return /* @__PURE__ */ jsx(Provider, { locale, children: /* @__PURE__ */ jsx(ThemeProvider, { ...restProps }) });
-};
-const PREFIX = "[@strapi/design-system]:";
-const once = (fn) => {
-  const func = fn;
-  let called = false;
-  if (typeof func !== "function") {
-    throw new TypeError(`${PREFIX} once requires a function parameter`);
-  }
-  return (...args) => {
-    if (!called) {
-      func(...args);
-      called = true;
-    }
-  };
+const DesignSystemProvider = ({
+  children,
+  locale = getDefaultLocale(),
+  theme = lightTheme,
+  tooltipConfig
+}) => {
+  return /* @__PURE__ */ jsx(Provider, { locale, children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx(Provider$1, { ...tooltipConfig, children }),
+    /* @__PURE__ */ jsx(LiveRegions, {}),
+    /* @__PURE__ */ jsx(GlobalStyle, {})
+  ] }) });
 };
-function useDateFormatter(locale, options) {
-  const lastOptions = React.useRef(null);
-  if (options && lastOptions.current && isEqual(options, lastOptions.current)) {
-    options = lastOptions.current;
-  }
-  lastOptions.current = options ?? null;
-  return React.useMemo(() => new DateFormatter(locale, options), [locale, options]);
-}
-function isEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) {
-    return false;
-  }
-  for (const key of aKeys) {
-    if (b[key] !== a[key]) {
-      return false;
-    }
-  }
-  return true;
-}
 const SelectTrigger = React.forwardRef(
-  ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, size = "M", children, id, ...restProps }, ref) => {
+  ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, ...restProps }, ref) => {
     const triggerRef = React.useRef(null);
     const handleClearClick = (e) => {
       if (onClear && !disabled) {
@@ -8967,7 +8694,6 @@ const SelectTrigger = React.forwardRef(
       {
         "aria-disabled": disabled,
         $hasError: hasError,
-        $size: size,
         ref: composedRefs,
         alignItems: "center",
         justifyContent: "space-between",
@@ -8977,8 +8703,8 @@ const SelectTrigger = React.forwardRef(
         background: disabled ? "neutral150" : "neutral0",
         paddingLeft: 3,
         paddingRight: 3,
-        paddingTop: 1,
-        paddingBottom: 1,
+        paddingTop: 2,
+        paddingBottom: 2,
         gap: 4,
         cursor: "default",
         "aria-labelledby": labelNode ? `${id}-label` : void 0,
@@ -9026,7 +8752,6 @@ const IconBox$2 = styled(Box)`
 `;
 const StyledTrigger = styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  min-height: ${({ theme, $size }) => getThemeSize("input")({ theme, size: $size })};
 
   &[aria-disabled='true'] {
     color: ${(props) => props.theme.colors.neutral600};
@@ -9041,13 +8766,14 @@ const StyledTrigger = styled(Flex)`
 `;
 const DownIcon = styled(Select.Icon)`
   & > svg {
-    width: 1.2rem;
     fill: ${({ theme }) => theme.colors.neutral600};
   }
 `;
 const SelectValue = React.forwardRef(({ children, placeholder, ...restProps }, ref) => /* @__PURE__ */ jsx(ValueType, { ref, ellipsis: true, ...restProps, children: /* @__PURE__ */ jsx(StyledValue, { placeholder, children }) }));
 const ValueType = styled(Typography)`
   flex: 1;
+  font-size: 1.4rem;
+  line-height: 2.2rem;
 `;
 const StyledValue = styled(Select.Value)`
   display: flex;
@@ -9062,7 +8788,7 @@ const SelectContent = styled(Select.Content)`
   min-width: var(--radix-select-trigger-width);
   /* This is from the design-system figma file. */
   max-height: 15rem;
-  z-index: ${({ theme }) => theme.zIndices[1]};
+  z-index: ${({ theme }) => theme.zIndices.popover};
 `;
 const SelectViewport = styled(Select.Viewport)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -9126,7 +8852,6 @@ const SingleSelect = React.forwardRef(
     placeholder,
     required: requiredProp,
     startIcon,
-    size = "M",
     value: passedValue,
     ...restProps
   }, forwardedRef) => {
@@ -9195,7 +8920,6 @@ const SingleSelect = React.forwardRef(
               id,
               name,
               startIcon,
-              size,
               hasError,
               disabled,
               clearLabel,
@@ -9238,7 +8962,7 @@ const DatePicker$1 = React.forwardRef(
     minDate: minDate2,
     monthSelectLabel = "Month",
     onChange,
-    selectedDate,
+    value: valueProp,
     yearSelectLabel = "Year",
     /**
      * Combobox props
@@ -9250,17 +8974,6 @@ const DatePicker$1 = React.forwardRef(
     required: requiredProp = false,
     onClear,
     clearLabel = "Clear",
-    size,
-    /**
-     * @preserve
-     * @deprecated This is no longer used.
-     */
-    ariaLabel: _ariaLabel,
-    /**
-     * @preserve
-     * @deprecated This is no longer used.
-     */
-    selectedDateLabel: _selectedDateLabel,
     ...restProps
   }, ref) => {
     const timeZone = getLocalTimeZone();
@@ -9278,7 +8991,7 @@ const DatePicker$1 = React.forwardRef(
     const [textValue, setTextValue] = React.useState();
     const [value, setValue] = useControllableState({
       defaultProp: initialDate ? convertUTCDateToCalendarDate(initialDate) : void 0,
-      prop: selectedDate ? convertUTCDateToCalendarDate(selectedDate) : void 0,
+      prop: valueProp ? convertUTCDateToCalendarDate(valueProp) : void 0,
       onChange(date) {
         if (onChange) {
           onChange(date?.toDate(timeZone));
@@ -9321,14 +9034,14 @@ const DatePicker$1 = React.forwardRef(
       [value]
     );
     React.useLayoutEffect(() => {
-      if (selectedDate) {
-        const date = convertUTCDateToCalendarDate(selectedDate);
+      if (valueProp) {
+        const date = convertUTCDateToCalendarDate(valueProp);
         setTextValue(formatter.format(date.toDate(timeZone)));
         setCalendarDate(date);
       } else {
         setTextValue("");
       }
-    }, [selectedDate, formatter, timeZone]);
+    }, [valueProp, formatter, timeZone]);
     React.useLayoutEffect(() => {
       if (initialDate && textValue === void 0) {
         const date = convertUTCDateToCalendarDate(initialDate);
@@ -9371,8 +9084,8 @@ const DatePicker$1 = React.forwardRef(
         trigger,
         value,
         children: [
-          /* @__PURE__ */ jsxs(DatePickerTrigger, { className, size, hasError, children: [
-            /* @__PURE__ */ jsx(StyledCalendarIcon, { "aria-hidden": true }),
+          /* @__PURE__ */ jsxs(DatePickerTrigger, { className, hasError, children: [
+            /* @__PURE__ */ jsx(Calendar, { fill: "neutral500", "aria-hidden": true }),
             /* @__PURE__ */ jsx(DatePickerTextInput, { ref, "aria-describedby": ariaDescription, id, name, ...restProps }),
             textValue && onClear ? /* @__PURE__ */ jsx(
               IconBox$1,
@@ -9417,7 +9130,7 @@ const makeInitialCalendarDate = ({ currentValue, minDate: minDate$1, maxDate: ma
 };
 const DATE_PICKER_TRIGGER_NAME = "DatePickerTrigger";
 const DatePickerTrigger = React.forwardRef(
-  ({ hasError, size = "M", ...restProps }, forwardedRef) => {
+  ({ hasError, ...restProps }, forwardedRef) => {
     const context = useDatePickerContext(DATE_PICKER_TRIGGER_NAME);
     const composedRefs = useComposedRefs(forwardedRef, (node) => context.onTriggerChange(node));
     const handleOpenChange = () => {
@@ -9442,7 +9155,6 @@ const DatePickerTrigger = React.forwardRef(
           {
             ref: composedRefs,
             $hasError: hasError,
-            $size: size,
             ...restProps,
             paddingLeft: 3,
             paddingRight: 3,
@@ -9475,7 +9187,11 @@ const DatePickerTrigger = React.forwardRef(
 );
 const TriggerElement = styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  min-height: ${({ theme, $size }) => getThemeSize("input")({ theme, size: $size })};
+  padding-block: ${({ theme }) => theme.spaces[2]};
+
+  & > svg {
+    flex: 1 0 auto;
+  }
 
   &[data-disabled] {
     color: ${({ theme }) => theme.colors.neutral600};
@@ -9492,20 +9208,9 @@ const TriggerElement = styled(Flex)`
 `;
 const IconBox$1 = styled(Box)`
   border: none;
-
-  svg {
-    height: 1.1rem;
-    width: 1.1rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-const StyledCalendarIcon = styled(Calendar)`
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
+  color: ${({ theme }) => theme.colors.neutral600};
+  padding: 0;
+  cursor: pointer;
 `;
 const DATE_PICKER_TEXT_INPUT_NAME = "DatePickerTextInput";
 const DatePickerTextInput = React.forwardRef(
@@ -9689,8 +9394,8 @@ function constrainValue(date, minValue, maxValue) {
 const Input$1 = styled.input`
   width: 100%;
   font-size: 1.4rem;
+  line-height: 2.2rem;
   color: ${({ theme }) => theme.colors.neutral800};
-  height: 100%;
   border: none;
   background-color: transparent;
 
@@ -9789,7 +9494,7 @@ const DatePickerContentImpl = React.forwardRef(
 );
 const ContentElement = styled(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  z-index: ${({ theme }) => theme.zIndices[0]};
+  z-index: ${({ theme }) => theme.zIndices.popover};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
 const DATE_PICKER_CALENDAR_NAME = "DatePickerCalendar";
@@ -9839,22 +9544,12 @@ const DatePickerCalendar = React.forwardRef(
           SingleSelect,
           {
             "aria-label": monthSelectLabel,
-            size: "S",
             value: months[calendarDate.month - 1],
             onChange: handleMonthChange,
             children: months.map((month) => /* @__PURE__ */ jsx(SingleSelectOption, { value: month, children: month }, month))
           }
         ) }),
-        /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(
-          SingleSelect,
-          {
-            size: "S",
-            value: calendarDate.year.toString(),
-            "aria-label": yearSelectLabel,
-            onChange: handleYearChange,
-            children: years.map((year) => /* @__PURE__ */ jsx(SingleSelectOption, { value: year, children: year }, year))
-          }
-        ) })
+        /* @__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__ */ 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)) }) }),
@@ -9995,19 +9690,7 @@ const Cell = styled(Box)`
     }
   }
 `;
-const warnOnce$1 = once(console.warn);
 const convertUTCDateToCalendarDate = (date) => {
-  if (typeof date === "string") {
-    warnOnce$1(
-      "It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead."
-    );
-    const timestamp = Date.parse(date);
-    if (!Number.isNaN(timestamp)) {
-      date = new Date(timestamp);
-    } else {
-      date = /* @__PURE__ */ new Date();
-    }
-  }
   const utcDateString = date.toISOString();
   const zonedDateTime = parseAbsolute(utcDateString, "UTC");
   return toCalendarDate(zonedDateTime);
@@ -10019,7 +9702,7 @@ const TimePicker$1 = React.forwardRef(
   ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
     const context = useDesignSystem("TimePicker");
     const [textValue, setTextValue] = React.useState("");
-    const [value, setValue] = useControllableState({
+    const [value, setValue] = useControllableState$1({
       prop: valueProp,
       defaultProp: defaultValue,
       onChange
@@ -10126,7 +9809,6 @@ const DateTimePicker = React.forwardRef(
     onChange,
     onClear,
     required = false,
-    size = "M",
     step,
     value,
     initialDate,
@@ -10189,10 +9871,9 @@ const DateTimePicker = React.forwardRef(
         DatePicker,
         {
           ...props,
-          selectedDate: dateValue?.toDate("UTC"),
+          value: dateValue?.toDate("UTC"),
           onChange: handleDateChange,
           required,
-          size,
           onClear: onClear ? handleDateClear : void 0,
           clearLabel: `${clearLabel} date`,
           disabled,
@@ -10203,7 +9884,6 @@ const DateTimePicker = React.forwardRef(
       /* @__PURE__ */ jsx(Root$1, { children: /* @__PURE__ */ jsx(
         TimePicker,
         {
-          size,
           hasError,
           value: timeValue,
           onChange: handleTimeChange,
@@ -10218,19 +9898,7 @@ const DateTimePicker = React.forwardRef(
     ] });
   }
 );
-const warnOnce = once(console.warn);
 const convertUTCDateToCalendarDateTime = (date, resetTime = true) => {
-  if (typeof date === "string") {
-    warnOnce(
-      "It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead."
-    );
-    const timestamp = Date.parse(date);
-    if (!Number.isNaN(timestamp)) {
-      date = new Date(timestamp);
-    } else {
-      date = /* @__PURE__ */ new Date();
-    }
-  }
   const utcDateString = date.toISOString();
   let zonedDateTime = parseAbsoluteToLocal(utcDateString);
   if (resetTime) {
@@ -10243,10 +9911,9 @@ const DividerWrapper = styled(Box)`
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
-  ${({ $unsetMargin }) => $unsetMargin ? "margin: 0;" : ""}
 `;
-const Divider = ({ unsetMargin = true, ...props }) => {
-  return /* @__PURE__ */ jsx(DividerWrapper, { ...props, background: "neutral150", tag: "hr", $unsetMargin: unsetMargin });
+const Divider = (props) => {
+  return /* @__PURE__ */ jsx(DividerWrapper, { ...props, background: "neutral150", tag: "hr" });
 };
 const EmptyStateIconWrapper = styled(Box)`
   svg {
@@ -10307,15 +9974,12 @@ const IconButton = forwardRef(
   ({
     label,
     background,
-    borderWidth,
-    noBorder = false,
     children,
-    icon,
     disabled = false,
     onClick,
     size = SIZES[0],
-    "aria-label": ariaLabel,
     variant: variant2 = VARIANTS[0],
+    withTooltip = true,
     ...restProps
   }, ref) => {
     const handleClick = (e) => {
@@ -10323,29 +9987,21 @@ const IconButton = forwardRef(
         onClick(e);
       }
     };
-    const component = /* @__PURE__ */ jsxs(
+    const component = /* @__PURE__ */ jsx(
       IconButtonWrapper,
       {
         "aria-disabled": disabled,
         background: disabled ? "neutral150" : background,
-        borderWidth: noBorder ? 0 : borderWidth,
         justifyContent: "center",
         ...restProps,
         ref,
         $size: size,
         onClick: handleClick,
         $variant: variant2,
-        children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: label ?? ariaLabel }),
-          React.cloneElement(icon || children, {
-            "aria-hidden": true,
-            focusable: false
-            // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-          })
-        ]
+        children: /* @__PURE__ */ jsx(AccessibleIcon, { label, children })
       }
     );
-    return label ? /* @__PURE__ */ jsx(Tooltip, { label, children: component }) : component;
+    return withTooltip ? /* @__PURE__ */ jsx(TooltipImpl, { label, children: component }) : component;
   }
 );
 const IconButtonWrapper = styled(BaseButton)`
@@ -10554,42 +10210,107 @@ const JSONInput = React.forwardRef(
         "aria-describedby": ariaDescription,
         ...boxProps
       }
-    );
-  }
-);
-const JSONInputContainer = styled(Flex)`
-  line-height: ${({ theme }) => theme.lineHeights[2]};
-
-  .cm-editor {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral800 changes between themes 
-     */
-    background-color: #32324d;
-    width: 100%;
-    outline: none;
-  }
-
-  .cm-scroller {
-    border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-    /* inputFocusStyle will receive hasError prop */
-    ${inputFocusStyle()}
-  }
-
-  .cm-editor,
-  .cm-scroller {
-    border-radius: ${({ theme }) => theme.borderRadius};
-  }
-
-  .cm-gutters,
-  .cm-activeLineGutter {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral700 changes between themes 
-     */
-    background-color: #4a4a6a;
-  }
-`;
+    );
+  }
+);
+const JSONInputContainer = styled(Flex)`
+  line-height: ${({ theme }) => theme.lineHeights[2]};
+
+  .cm-editor {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+  }
+
+  .cm-scroller {
+    border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${inputFocusStyle()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({ theme }) => theme.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
+    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";
@@ -10647,34 +10368,6 @@ const LinkWrapper$1 = styled(BaseLink)`
 
   ${getVariantStyle}
 `;
-const notifyLog = (message) => {
-  const logEl = document.querySelector(`#${LiveRegionIds.Log}`);
-  if (logEl) {
-    logEl.innerText = message;
-  }
-};
-const notifyStatus = (message) => {
-  const statusEl = document.querySelector(`#${LiveRegionIds.Status}`);
-  if (statusEl) {
-    statusEl.innerText = message;
-  }
-};
-const notifyAlert = (message) => {
-  const alertEl = document.querySelector(`#${LiveRegionIds.Alert}`);
-  if (alertEl) {
-    alertEl.innerText = message;
-  }
-};
-const useNotifyAT = () => {
-  React.useEffect(() => {
-    return () => {
-      notifyLog("");
-      notifyAlert("");
-      notifyStatus("");
-    };
-  }, []);
-  return { notifyLog, notifyAlert, notifyStatus };
-};
 const MainWrapper = styled(Box)`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
@@ -10710,245 +10403,6 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
-const MainNavContext = React.createContext(false);
-const useMainNav = () => React.useContext(MainNavContext);
-const MainNavWrapper = styled(Flex)`
-  width: ${({ $condensed }) => $condensed ? "max-content" : `22.4rem`};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const MainNav = ({ condensed = false, ...props }) => {
-  return /* @__PURE__ */ jsx(MainNavContext.Provider, { value: condensed, children: /* @__PURE__ */ jsx(
-    MainNavWrapper,
-    {
-      alignItems: "normal",
-      tag: "nav",
-      background: "neutral0",
-      $condensed: condensed,
-      direction: "column",
-      height: "100vh",
-      position: "sticky",
-      top: 0,
-      zIndex: 2,
-      ...props
-    }
-  ) });
-};
-const BrandIconWrapper = styled.div`
-  border-radius: ${({ theme }) => theme.borderRadius};
-
-  svg,
-  img {
-    height: ${({ $condensed }) => $condensed ? `4rem` : `3.2rem`};
-    width: ${({ $condensed }) => $condensed ? `4rem` : `3.2rem`};
-  }
-`;
-const NavLinkWrapper = styled(BaseLink)`
-  text-decoration: unset;
-  color: inherit;
-`;
-const NavBrand = forwardRef(
-  ({ workplace, title, icon, ...props }, ref) => {
-    const condensed = useMainNav();
-    props.to = props?.to ?? "/";
-    if (condensed) {
-      return /* @__PURE__ */ jsx(BaseLink, { ref, ...props, children: /* @__PURE__ */ jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsxs(BrandIconWrapper, { $condensed: true, children: [
-        icon,
-        /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-          /* @__PURE__ */ jsx("span", { children: title }),
-          /* @__PURE__ */ jsx("span", { children: workplace })
-        ] })
-      ] }) }) });
-    }
-    return /* @__PURE__ */ jsx(NavLinkWrapper, { ref, ...props, children: /* @__PURE__ */ jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { children: [
-      /* @__PURE__ */ jsx(BrandIconWrapper, { "aria-hidden": true, tabIndex: -1, children: icon }),
-      /* @__PURE__ */ jsxs(Box, { paddingLeft: 2, children: [
-        /* @__PURE__ */ jsxs(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "span", children: [
-          title,
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: workplace })
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "p", textColor: "neutral600", "aria-hidden": true, children: workplace })
-      ] })
-    ] }) }) });
-  }
-);
-const NavCondense = ({ children, ...props }) => {
-  const condensed = useMainNav();
-  const Icon = condensed ? ChevronRight : ChevronLeft;
-  return /* @__PURE__ */ jsxs(NavCondenseWrapper, { tag: "button", $condensed: condensed, ...props, children: [
-    /* @__PURE__ */ jsx(Icon, { width: "1.2rem", "aria-hidden": true, fill: "neutral600" }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children })
-  ] });
-};
-const NavCondenseWrapper = styled(Flex).attrs((props) => ({
-  justifyContent: "center",
-  ...props
-}))`
-  background: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  position: absolute;
-  bottom: 1.3rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({ theme, $condensed }) => $condensed ? 0 : theme.spaces[5]};
-  transform: ${({ $condensed }) => $condensed ? `translateX(50%)` : void 0};
-  z-index: 2;
-  width: 1.8rem;
-  height: 2.5rem;
-`;
-const NavFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx(Box, { position: "relative", children });
-};
-const NavLink = forwardRef(
-  ({ children, icon, badgeContent, badgeAriaLabel, ...props }, ref) => {
-    const condensed = useMainNav();
-    if (condensed) {
-      return /* @__PURE__ */ jsx(MainNavLinkWrapper, { ref, ...props, children: /* @__PURE__ */ jsx(Tooltip, { position: "right", label: children, children: /* @__PURE__ */ jsxs(Flex, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, tag: "span", justifyContent: "center", children: [
-        /* @__PURE__ */ jsx(Box, { "aria-hidden": true, paddingRight: 0, tag: "span", children: icon }),
-        badgeContent && /* @__PURE__ */ jsx(CustomBadge, { $condensed: true, "aria-label": badgeAriaLabel, children: badgeContent })
-      ] }) }) });
-    }
-    return /* @__PURE__ */ jsx(MainNavLinkWrapper, { ref, ...props, children: /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        paddingLeft: 3,
-        paddingRight: 3,
-        paddingTop: 2,
-        paddingBottom: 2,
-        tag: "span",
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ jsxs(Flex, { children: [
-            /* @__PURE__ */ jsx(Box, { "aria-hidden": true, paddingRight: 3, tag: "span", children: icon }),
-            /* @__PURE__ */ jsx(Typography, { children })
-          ] }),
-          badgeContent && /* @__PURE__ */ jsx(CustomBadge, { justifyContent: "center", "aria-label": badgeAriaLabel, children: badgeContent })
-        ]
-      }
-    ) });
-  }
-);
-const MainNavLinkWrapper = styled(BaseLink)`
-  position: relative;
-  text-decoration: none;
-  display: block;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-  color: ${({ theme }) => theme.colors.neutral600};
-
-  svg {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
-    color: ${({ theme }) => theme.colors.neutral700};
-
-    svg {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  &.active {
-    background: ${({ theme }) => theme.colors.primary100};
-    color: ${({ theme }) => theme.colors.primary600};
-    font-weight: 500;
-
-    svg {
-      fill: ${({ theme }) => theme.colors.primary600};
-    }
-  }
-`;
-const CustomBadge = styled(Badge)`
-  ${({ theme, $condensed }) => $condensed && css`
-      position: absolute;
-      // Values based on visual aspect
-      top: -${theme.spaces[3]};
-      right: -${theme.spaces[1]};
-    `}
-
-  // overwrite to ensure the badge typography is white on blue.
-  & > * {
-    color: ${({ theme }) => theme.colors.neutral0};
-  }
-
-  line-height: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: ${({ theme }) => theme.spaces[6]};
-  height: ${({ theme }) => theme.spaces[5]};
-  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  border-radius: ${({ theme }) => theme.spaces[10]};
-  background: ${({ theme }) => theme.colors.primary600};
-`;
-const NavSection = ({ label, children, horizontal = false, spacing = 2, ...props }) => {
-  const condensed = useMainNav();
-  if (condensed) {
-    return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-      /* @__PURE__ */ jsxs(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: true, tag: "span", children: [
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { children: label }) })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Flex,
-        {
-          tag: "ul",
-          gap: spacing,
-          direction: horizontal ? "row" : "column",
-          alignItems: horizontal ? "center" : "stretch",
-          ...props,
-          children: React.Children.map(children, (child, index) => {
-            return /* @__PURE__ */ jsx("li", { children: child }, index);
-          })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-    /* @__PURE__ */ jsx(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: true, tag: "span", children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }),
-    /* @__PURE__ */ jsx(
-      Flex,
-      {
-        tag: "ul",
-        gap: spacing,
-        direction: horizontal ? "row" : "column",
-        alignItems: horizontal ? "center" : "stretch",
-        ...props,
-        children: React.Children.map(children, (child, index) => {
-          return /* @__PURE__ */ jsx("li", { children: child }, index);
-        })
-      }
-    )
-  ] });
-};
-const BoxGrow = styled(Box)`
-  flex-grow: 1;
-  overflow-y: auto;
-`;
-const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
-  return /* @__PURE__ */ jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: /* @__PURE__ */ jsx(
-    Flex,
-    {
-      tag: "ul",
-      gap: spacing,
-      direction: horizontal ? "row" : "column",
-      alignItems: horizontal ? "center" : "stretch",
-      ...props,
-      children: React.Children.map(children, (child, index) => {
-        return /* @__PURE__ */ jsx("li", { children: child }, index);
-      })
-    }
-  ) });
-};
-const NavUserBox = styled(Box)`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const NavUser = React.forwardRef(({ src, children, initials, ...props }, ref) => {
-  const condensed = useMainNav();
-  return /* @__PURE__ */ jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: /* @__PURE__ */ jsxs(Flex, { tag: "button", justifyContent: condensed ? "center" : void 0, ref, children: [
-    src ? /* @__PURE__ */ jsx(Avatar, { src, alt: "", "aria-hidden": true }) : /* @__PURE__ */ jsx(Initials, { children: initials }),
-    condensed ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { children }) }) : /* @__PURE__ */ jsx(Box, { width: "13rem", paddingLeft: 2, tag: "span", children: /* @__PURE__ */ jsx(Typography, { ellipsis: true, textColor: "neutral600", children }) })
-  ] }) });
-});
 const ModalContext = React.createContext(() => {
 });
 const useModal = () => React.useContext(ModalContext);
@@ -10958,7 +10412,7 @@ const ModalWrapper = styled(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: 4, children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: /* @__PURE__ */ jsx(
+  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,
@@ -10981,7 +10435,7 @@ 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, "aria-label": closeLabel, icon: /* @__PURE__ */ jsx(Cross, {}) })
+    /* @__PURE__ */ jsx(IconButton, { onClick: onClose, label: closeLabel, withTooltip: false, children: /* @__PURE__ */ jsx(Cross, {}) })
   ] }) });
 };
 const ModalFooterWrapper = styled(Box)`
@@ -11003,7 +10457,7 @@ const ModalBody = (props) => {
 };
 const INITIAL_VALUE = "";
 const NumberInput = React.forwardRef(
-  ({ size = "M", startAction, locale: defaultLocale, onValueChange, value, step = 1, disabled = false, ...props }, ref) => {
+  ({ startAction, locale: defaultLocale, onValueChange, value, step = 1, disabled = false, ...props }, ref) => {
     const designContext = useDesignSystem("NumberInput");
     const locale = defaultLocale || designContext.locale;
     const numberParserRef = React.useRef(new NumberParser(locale, { style: "decimal" }));
@@ -11080,7 +10534,6 @@ const NumberInput = React.forwardRef(
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
         value: inputValue,
-        size,
         endAction: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             ArrowButton,
@@ -11218,7 +10671,7 @@ const POPOVER_PLACEMENTS = [
 ];
 const PopoverWrapper = styled(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  z-index: ${({ theme }) => theme.zIndices[0]};
+  z-index: ${({ theme }) => theme.zIndices.popover};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
 const Content = React.forwardRef(
@@ -11670,7 +11123,7 @@ const SearchbarInput = styled(Input$2)`
   ${inputFocusStyle()}
 `;
 const Searchbar = React.forwardRef(
-  ({ name, size = "M", children, value = "", onClear, clearLabel, ...props }, ref) => {
+  ({ name, children, value = "", onClear, clearLabel, ...props }, ref) => {
     const inputRef = React.useRef(null);
     const isCompleting = value.length > 0;
     const handleClear = (e) => {
@@ -11686,7 +11139,6 @@ const Searchbar = React.forwardRef(
           ref: actualRef,
           value,
           startAction: /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": true }),
-          size,
           endAction: isCompleting ? /* @__PURE__ */ jsx(Action, { label: clearLabel, onClick: handleClear, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : void 0,
           ...props
         }
@@ -11756,9 +11208,7 @@ const MultiSelect = React.forwardRef(
     onReachEnd,
     placeholder,
     required: requiredProp,
-    selectButtonTitle: _deprecatedSelectButtonTitle,
     startIcon,
-    size = "M",
     value: passedValue,
     withTags,
     ...restProps
@@ -11806,10 +11256,11 @@ const MultiSelect = React.forwardRef(
       }
       return null;
     };
-    const { error, required, ...field } = useField("MultiSelect");
+    const { error, ...field } = useField("MultiSelect");
     const hasError = Boolean(error) || hasErrorProp;
     const id = field.id ?? idProp;
     const name = field.name ?? nameProp;
+    const required = field.required ?? requiredProp;
     let ariaDescription;
     if (error) {
       ariaDescription = `${id}-error`;
@@ -11836,7 +11287,6 @@ const MultiSelect = React.forwardRef(
               "aria-label": restProps["aria-label"],
               "aria-describedby": ariaDescription ?? restProps["aria-describedby"],
               startIcon,
-              size,
               hasError,
               disabled,
               clearLabel,
@@ -12058,7 +11508,6 @@ const SubNavHeader = ({
           onClear: handleClear,
           onSubmit,
           clearLabel: "Clear",
-          size: "S",
           children: searchLabel
         }
       ) }),
@@ -12068,7 +11517,7 @@ const SubNavHeader = ({
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [
     /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "beta", tag, children: label }),
-      searchable && /* @__PURE__ */ jsx(IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, icon: /* @__PURE__ */ jsx(Search, {}) })
+      searchable && /* @__PURE__ */ jsx(IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, children: /* @__PURE__ */ jsx(Search, {}) })
     ] }),
     /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(CustomDivider, {}) })
   ] });
@@ -12705,15 +12154,10 @@ const CellWrapper = styled(RawTd)`
     vertical-align: sub;
   }
 `;
-const ActionWrapper = styled.span`
-  svg {
-    height: 0.4rem;
-  }
-`;
 const Th = ({ children, action, ...props }) => {
   return /* @__PURE__ */ jsx(CellWrapper, { as: RawTh, ...props, children: /* @__PURE__ */ jsxs(Flex, { children: [
     children,
-    /* @__PURE__ */ jsx(ActionWrapper, { children: action })
+    action
   ] }) });
 };
 const Td = ({ children, ...props }) => {
@@ -12751,6 +12195,59 @@ const TFooter = ({ children, icon, ...props }) => {
     ] }) })
   ] });
 };
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+const LoadingWrapper = styled.div`
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+const TextButtonWrapper = styled(Flex)`
+  border: none;
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.primary600};
+  }
+
+  ${focus}
+`;
+const TextButton = React.forwardRef(
+  ({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
+    const handleClick = onClick && !disabled ? onClick : void 0;
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      TextButtonWrapper,
+      {
+        ref,
+        "aria-disabled": isDisabled,
+        onClick: handleClick,
+        tag: "button",
+        type: "button",
+        background: "transparent",
+        gap: 2,
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ jsx(LoadingWrapper, { "aria-hidden": true, children: /* @__PURE__ */ jsx(Loader$1, {}) }) : startIcon,
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: isDisabled ? "neutral600" : "primary600", children }),
+          endIcon
+        ]
+      }
+    );
+  }
+);
+TextButton.displayName = "TextButton";
 const TextInput = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Input$2, { ref, ...props });
 });
@@ -12821,7 +12318,6 @@ const Toggle = React.forwardRef(
     name: nameProp,
     checked: checkedProp,
     onChange,
-    size = "M",
     ...props
   }, forwardedRef) => {
     const [checked = false, setChecked] = useControllableState({
@@ -12865,7 +12361,6 @@ const Toggle = React.forwardRef(
               justifyContent: "center",
               background: disabled && isFalseyChecked ? "neutral200" : isFalseyChecked ? "neutral0" : "transparent",
               borderColor: disabled && isFalseyChecked ? "neutral300" : isFalseyChecked ? "neutral200" : disabled ? "neutral150" : "neutral100",
-              $size: size,
               children: /* @__PURE__ */ jsx(
                 Typography,
                 {
@@ -12888,7 +12383,6 @@ const Toggle = React.forwardRef(
               justifyContent: "center",
               background: disabled && checked ? "neutral200" : checked ? "neutral0" : "transparent",
               borderColor: disabled && checked ? "neutral300" : checked ? "neutral200" : disabled ? "neutral150" : "neutral100",
-              $size: size,
               children: /* @__PURE__ */ jsx(
                 Typography,
                 {
@@ -12929,13 +12423,7 @@ const ToggleWrapper = styled(Flex)`
   ${inputFocusStyle()}
 `;
 const ToggleOption = styled(Flex)`
-  /**
-    We declare the defined value because we want the height of the input when 
-    the values are in a row to be 40px. But defining a height on the label
-    would break the input when it wraps.
-  */
-  padding-top: ${({ $size }) => `${$size === "S" ? "2px" : "6px"}`};
-  padding-bottom: ${({ $size }) => `${$size === "S" ? "2px" : "6px"}`};
+  padding-block: 0.6rem;
 `;
 const Input = styled.input`
   height: 100%;
@@ -12949,9 +12437,6 @@ const Input = styled.input`
 export {
   AccessibleIcon,
   Accordion,
-  AccordionContent,
-  AccordionGroup,
-  AccordionToggle,
   Alert,
   Avatar,
   AvatarGroup,
@@ -12981,7 +12466,7 @@ export {
   CarouselSlide,
   Checkbox,
   Combobox,
-  ComboboxOption,
+  Option as ComboboxOption,
   Crumb,
   CrumbLink,
   CrumbSimpleMenu,
@@ -13010,7 +12495,6 @@ export {
   LiveRegions,
   Loader,
   Main,
-  MainNav,
   Menu,
   MenuItem,
   ModalBody,
@@ -13021,13 +12505,6 @@ export {
   MultiSelectGroup,
   MultiSelectNested,
   MultiSelectOption,
-  NavBrand,
-  NavCondense,
-  NavFooter,
-  NavLink,
-  NavSection,
-  NavSections,
-  NavUser,
   NextLink,
   NumberInput,
   POPOVER_PLACEMENTS,
@@ -13075,10 +12552,9 @@ export {
   Textarea,
   Th,
   Thead,
-  ThemeProvider,
   TimePicker$1 as TimePicker,
   Toggle,
-  Tooltip,
+  TooltipImpl as Tooltip,
   Tr,
   Typography,
   VisuallyHidden,
@@ -13097,7 +12573,6 @@ export {
   useDesignSystem,
   useField,
   useFilter,
-  useNotifyAT,
-  useTheme
+  useNotifyAT
 };
 //# sourceMappingURL=index.mjs.map