@strapi/design-system 2.0.0-rc.7 → 2.0.0-rc.9

package/dist/index.mjs

@@ -48,32 +48,6 @@ const createContext = (rootComponentName, defaultContext) => {
   Provider2.displayName = `${rootComponentName}Provider`;
   return [Provider2, useContext];
 };
-const handleResponsiveValues = (property, value, theme) => {
-  if (!value) {
-    return void 0;
-  }
-  if (typeof value === "object") {
-    const transformedArray = Array.isArray(value) ? value : [value?.desktop, value?.tablet, value?.mobile];
-    const spaces = transformedArray.reduce((acc, curr, index) => {
-      if (curr) {
-        switch (index) {
-          case 0:
-            return `${acc}${property}: ${theme.spaces[curr]};`;
-          case 1:
-            return `${acc}${theme.mediaQueries.tablet}{${property}: ${theme.spaces[curr]};}`;
-          case 2:
-            return `${acc}${theme.mediaQueries.mobile}{${property}: ${theme.spaces[curr]};}`;
-          default:
-            return acc;
-        }
-      }
-      return acc;
-    }, "");
-    return spaces;
-  }
-  const realValue = theme.spaces[value] ?? value;
-  return `${property}: ${realValue};`;
-};
 function isKeyOf(o, s) {
   if (typeof o === "string") {
     return false;
@@ -84,11 +58,166 @@ function isObject(item) {
   return item && typeof item === "object" && !Array.isArray(item);
 }
 function extractStyleFromTheme(themeSection, key, defaultValue) {
-  if (key && isKeyOf(themeSection, key)) {
+  if (themeSection && key && isKeyOf(themeSection, key)) {
     return themeSection[key];
   }
   return defaultValue;
 }
+const mappedCSSProps = {
+  padding: ["padding-block-start", "padding-inline-end", "padding-block-end", "padding-inline-start"],
+  paddingTop: "padding-block-start",
+  paddingRight: "padding-inline-end",
+  paddingBottom: "padding-block-end",
+  paddingLeft: "padding-inline-start",
+  margin: ["margin-block-start", "margin-inline-end", "margin-block-end", "margin-inline-start"],
+  marginLeft: "margin-inline-start",
+  marginRight: "margin-inline-end",
+  marginTop: "margin-block-start",
+  marginBottom: "margin-block-end",
+  borderRadius: "border-radius",
+  borderStyle: "border-style",
+  borderWidth: "border-width",
+  borderColor: "border-color",
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  lineHeight: "line-height",
+  zIndex: "z-index",
+  boxShadow: "box-shadow",
+  pointerEvents: "pointer-events",
+  textAlign: "text-align",
+  textTransform: "text-transform",
+  textDecoration: "text-decoration",
+  flexGrow: "flex-grow",
+  flexShrink: "flex-shrink",
+  flexBasis: "flex-basis",
+  minWidth: "min-width",
+  maxWidth: "max-width",
+  minHeight: "min-height",
+  maxHeight: "max-height",
+  flexDirection: "flex-direction",
+  flexWrap: "flex-wrap",
+  justifyContent: "justify-content",
+  alignItems: "align-items"
+};
+const fillCssValues = (value) => {
+  const [top, right, bottom, left] = value;
+  const rightValue = right ?? top;
+  const bottomValue = bottom ?? top;
+  const leftValue = left ?? rightValue;
+  return [top, rightValue, bottomValue, leftValue];
+};
+function getThemeSection(key, theme) {
+  switch (key) {
+    case "gap":
+    case "padding":
+    case "margin":
+    case "paddingTop":
+    case "paddingLeft":
+    case "paddingRight":
+    case "paddingBottom":
+    case "marginTop":
+    case "marginLeft":
+    case "marginRight":
+    case "marginBottom":
+    case "left":
+    case "right":
+    case "top":
+    case "bottom":
+    case "width":
+    case "maxWidth":
+    case "minWidth":
+    case "height":
+    case "maxHeight":
+    case "minHeight":
+    case "borderRadius":
+    case "borderWidth":
+      return theme.spaces;
+    case "color":
+    case "background":
+    case "borderColor":
+      return theme.colors;
+    case "fontSize":
+      return theme.fontSizes;
+    case "fontWeight":
+      return theme.fontWeights;
+    case "lineHeight":
+      return theme.lineHeights;
+    case "zIndex":
+      return theme.zIndices;
+    case "boxShadow":
+      return theme.shadows;
+    default:
+      return null;
+  }
+}
+const handleResponsiveValues = (values, theme) => {
+  const stylesByBreakpoint = Object.entries(values).reduce(
+    (acc, curr) => {
+      const [key, value] = curr;
+      const themeSection = getThemeSection(key, theme);
+      const cssProperty = Object.prototype.hasOwnProperty.call(mappedCSSProps, key) ? mappedCSSProps[key] : key;
+      if (cssProperty && (value || value === 0)) {
+        if (typeof value === "object" && !Array.isArray(value)) {
+          Object.entries(value).forEach(([breakpointName, breakpointValue]) => {
+            acc[breakpointName] = {
+              ...acc[breakpointName],
+              ...convertCssPropertiesToCssValues(cssProperty, breakpointValue, themeSection)
+            };
+          });
+        } else {
+          acc.initial = {
+            ...acc.initial,
+            ...convertCssPropertiesToCssValues(cssProperty, value, themeSection)
+          };
+        }
+      }
+      return acc;
+    },
+    {
+      initial: {},
+      small: {},
+      medium: {},
+      large: {}
+    }
+  );
+  return Object.entries(stylesByBreakpoint).reduce((acc, [key, value]) => {
+    if (value && Object.keys(value).length > 0) {
+      const breakpointStyles = Object.entries(value).reduce((arr, [property, value2]) => {
+        arr.push(`${property}: ${value2};`);
+        return arr;
+      }, []).join("\n");
+      if (key === "initial") {
+        acc.push(breakpointStyles);
+      } else {
+        acc.push(`${theme.breakpoints[key]}{ ${breakpointStyles} }`);
+      }
+    }
+    return acc;
+  }, []).join("\n");
+};
+const convertCssPropertiesToCssValues = (property, value, themeSection) => {
+  if (Array.isArray(property) && Array.isArray(value)) {
+    const shorthandValues = fillCssValues(value);
+    return property.reduce((acc, prop, index) => {
+      acc[prop] = extractStyleFromTheme(themeSection, shorthandValues[index], shorthandValues[index]);
+      return acc;
+    }, {});
+  } else if (Array.isArray(property) && !Array.isArray(value)) {
+    return property.reduce((acc, prop) => {
+      acc[prop] = extractStyleFromTheme(themeSection, value, value);
+      return acc;
+    }, {});
+  } else if (!Array.isArray(property) && !Array.isArray(value)) {
+    return {
+      [property]: extractStyleFromTheme(themeSection, value, value)
+    };
+  } else {
+    console.warn(
+      "You've passed an array of values to a property that does not support it. Please check the property and value you're passing."
+    );
+    return {};
+  }
+};
 const forwardRef = React.forwardRef;
 const Box = forwardRef((props, ref) => {
   const {
@@ -100,8 +229,6 @@ const Box = forwardRef((props, ref) => {
     fontSize,
     grow,
     hasRadius,
-    hiddenS,
-    hiddenXS,
     padding,
     paddingBottom,
     paddingLeft,
@@ -115,6 +242,7 @@ const Box = forwardRef((props, ref) => {
     shadow,
     shrink,
     lineHeight,
+    fontWeight,
     width,
     minWidth,
     maxWidth,
@@ -152,8 +280,6 @@ const Box = forwardRef((props, ref) => {
     $fontSize: fontSize,
     $grow: grow,
     $hasRadius: hasRadius,
-    $hiddenS: hiddenS,
-    $hiddenXS: hiddenXS,
     $padding: padding,
     $paddingBottom: paddingBottom,
     $paddingLeft: paddingLeft,
@@ -167,6 +293,7 @@ const Box = forwardRef((props, ref) => {
     $shadow: shadow,
     $shrink: shrink,
     $lineHeight: lineHeight,
+    $fontWeight: fontWeight,
     $width: width,
     $minWidth: minWidth,
     $maxWidth: maxWidth,
@@ -195,110 +322,83 @@ const Box = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(StyledBox, { as: AsComponent, ref, ...mappedProps, ...rest });
 });
 const StyledBox = styled.div`
-  // Font
-  font-size: ${({ $fontSize, theme }) => extractStyleFromTheme(theme.fontSizes, $fontSize, $fontSize)};
-
-  // Colors
-  background: ${({ theme, $background }) => extractStyleFromTheme(theme.colors, $background, $background)};
-  color: ${({ theme, $color }) => extractStyleFromTheme(theme.colors, $color, $color)};
-
-  // Spaces
-  ${({ theme, $padding }) => handleResponsiveValues("padding-block", $padding, theme)}
-  ${({ theme, $padding }) => handleResponsiveValues("padding-inline", $padding, theme)}
-  ${({ theme, $paddingTop }) => handleResponsiveValues("padding-block-start", $paddingTop, theme)}
-  ${({ theme, $paddingRight }) => handleResponsiveValues("padding-inline-end", $paddingRight, theme)}
-  ${({ theme, $paddingBottom }) => handleResponsiveValues("padding-block-end", $paddingBottom, theme)}
-  ${({ theme, $paddingLeft }) => handleResponsiveValues("padding-inline-start", $paddingLeft, theme)}
-
-  ${({ theme, $margin }) => handleResponsiveValues("margin-block", $margin, theme)}
-  ${({ theme, $margin }) => handleResponsiveValues("margin-inline", $margin, theme)}
-  ${({ theme, $marginLeft }) => handleResponsiveValues("margin-inline-start", $marginLeft, theme)}
-  ${({ theme, $marginRight }) => handleResponsiveValues("margin-inline-end", $marginRight, theme)}
-  ${({ theme, $marginTop }) => handleResponsiveValues("margin-block-start", $marginTop, theme)}
-  ${({ theme, $marginBottom }) => handleResponsiveValues("margin-block-end", $marginBottom, theme)}
-
-  // Responsive hiding
-  ${({ theme, $hiddenS }) => $hiddenS ? `${theme.mediaQueries.tablet} { display: none; }` : void 0}
-  ${({ theme, $hiddenXS }) => $hiddenXS ? `${theme.mediaQueries.mobile} { display: none; }` : void 0}
-  
-
-  // Borders
-  border-radius: ${({ theme, $hasRadius, $borderRadius }) => $hasRadius ? theme.borderRadius : $borderRadius};
-  border-style: ${({ $borderStyle }) => $borderStyle};
-  border-width: ${({ $borderWidth }) => $borderWidth};
-  border-color: ${({ $borderColor, theme }) => extractStyleFromTheme(theme.colors, $borderColor, void 0)};
-  border: ${({ theme, $borderColor, $borderStyle, $borderWidth }) => {
-  if ($borderColor && !$borderStyle && typeof $borderWidth === "undefined") {
-    return `1px solid ${theme.colors[$borderColor]}`;
-  }
-  return void 0;
+  ${({ theme, ...props }) => {
+  return handleResponsiveValues(
+    {
+      padding: props.$padding,
+      paddingTop: props.$paddingTop,
+      paddingBottom: props.$paddingBottom,
+      paddingLeft: props.$paddingLeft,
+      paddingRight: props.$paddingRight,
+      margin: props.$margin,
+      marginTop: props.$marginTop,
+      marginBottom: props.$marginBottom,
+      marginLeft: props.$marginLeft,
+      marginRight: props.$marginRight,
+      top: props.$top,
+      left: props.$left,
+      bottom: props.$bottom,
+      right: props.$right,
+      width: props.$width,
+      minWidth: props.$minWidth,
+      maxWidth: props.$maxWidth,
+      height: props.$height,
+      minHeight: props.$minHeight,
+      maxHeight: props.$maxHeight,
+      color: props.$color,
+      background: props.$background,
+      fontSize: props.$fontSize,
+      fontWeight: props.$fontWeight,
+      lineHeight: props.$lineHeight,
+      borderRadius: props.$hasRadius ? theme.borderRadius : props.$borderRadius,
+      borderStyle: props.$borderColor && !props.$borderStyle ? "solid" : props.$borderStyle,
+      borderWidth: props.$borderColor && !props.$borderWidth ? "1px" : props.$borderWidth,
+      borderColor: props.$borderColor,
+      zIndex: props.$zIndex,
+      boxShadow: props.$shadow,
+      display: props.$display,
+      pointerEvents: props.$pointerEvents,
+      cursor: props.$cursor,
+      textAlign: props.$textAlign,
+      textTransform: props.$textTransform,
+      transition: props.$transition,
+      transform: props.$transform,
+      animation: props.$animation,
+      position: props.$position,
+      overflow: props.$overflow,
+      flex: props.$flex,
+      flexShrink: props.$shrink,
+      flexGrow: props.$grow,
+      flexBasis: props.$basis
+    },
+    theme
+  );
 }};
-
-  // Shadows
-  box-shadow: ${({ theme, $shadow }) => extractStyleFromTheme(theme.shadows, $shadow, void 0)};
-
-  // Handlers
-  pointer-events: ${({ $pointerEvents }) => $pointerEvents};
-
-  // Display
-  display: ${({ $display }) => $display};
-
-  // Position
-  position: ${({ $position }) => $position};
-  left: ${({ $left, theme }) => extractStyleFromTheme(theme.spaces, $left, $left)};
-  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, theme }) => extractStyleFromTheme(theme.zIndices, $zIndex, $zIndex)};
-  overflow: ${({ $overflow }) => $overflow};
-
-  // Size
-  width: ${({ $width, theme }) => extractStyleFromTheme(theme.spaces, $width, $width)};
-  max-width: ${({ $maxWidth, theme }) => extractStyleFromTheme(theme.spaces, $maxWidth, $maxWidth)};
-  min-width: ${({ $minWidth, theme }) => extractStyleFromTheme(theme.spaces, $minWidth, $minWidth)};
-  height: ${({ $height, theme }) => extractStyleFromTheme(theme.spaces, $height, $height)};
-  max-height: ${({ $maxHeight, theme }) => extractStyleFromTheme(theme.spaces, $maxHeight, $maxHeight)};
-  min-height: ${({ $minHeight, theme }) => extractStyleFromTheme(theme.spaces, $minHeight, $minHeight)};
-
-  // Animation
-  transition: ${({ $transition }) => $transition};
-  transform: ${({ $transform }) => $transform};
-  animation: ${({ $animation }) => $animation};
-
-  //Flexbox children props
-  flex-shrink: ${({ $shrink }) => $shrink};
-  flex-grow: ${({ $grow }) => $grow};
-  flex-basis: ${({ $basis }) => $basis};
-  flex: ${({ $flex }) => $flex};
-
-  // Text
-  text-align: ${({ $textAlign }) => $textAlign};
-  text-transform: ${({ $textTransform }) => $textTransform};
-  line-height: ${({ theme, $lineHeight }) => extractStyleFromTheme(theme.lineHeights, $lineHeight, $lineHeight)};
-
-  // Cursor
-  cursor: ${({ $cursor }) => $cursor};
 `;
 const Flex = forwardRef((props, ref) => {
-  const { className, alignItems, direction, gap, inline, justifyContent, wrap, ...rest } = props;
+  const { className, alignItems, direction, inline, gap, justifyContent, wrap, ...rest } = props;
   const mappedProps = {
     $alignItems: alignItems,
     $direction: direction,
     $gap: gap,
-    $inline: inline,
     $justifyContent: justifyContent,
-    $wrap: wrap
+    $wrap: wrap,
+    $inline: inline
   };
   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};
+  ${({ theme, $display = "flex", $alignItems = "center", $direction = "row", ...props }) => handleResponsiveValues(
+  {
+    gap: props.$gap,
+    alignItems: $alignItems,
+    justifyContent: props.$justifyContent,
+    flexWrap: props.$wrap,
+    flexDirection: $direction,
+    display: props.$inline ? "inline-flex" : $display
+  },
+  theme
+)};
 `;
 const ALPHA = "alpha";
 const BETA = "beta";
@@ -373,26 +473,24 @@ const Typography = forwardRef(
   (props, ref) => {
     const {
       ellipsis: ellipsis2,
-      fontSize,
-      fontWeight,
-      lineHeight,
-      textAlign,
       textColor = "currentcolor",
       textDecoration,
       textTransform,
       variant: variant2,
+      lineHeight,
+      fontWeight,
+      fontSize,
       ...rest
     } = props;
     const mappedProps = {
       $ellipsis: ellipsis2,
-      $fontSize: fontSize,
-      $fontWeight: fontWeight,
-      $lineHeight: lineHeight,
-      $textAlign: textAlign,
       $textColor: textColor,
       $textDecoration: textDecoration,
       $textTransform: textTransform,
-      $variant: variant2
+      $variant: variant2,
+      $lineHeight: lineHeight,
+      $fontWeight: fontWeight,
+      $fontSize: fontSize
     };
     return /* @__PURE__ */ jsx(StyledTypography, { ref, tag: "span", ...mappedProps, ...rest });
   }
@@ -401,15 +499,19 @@ const StyledTypography = styled(Box)`
   ${variant}
   ${({ $ellipsis }) => $ellipsis ? ellipsis : ""}
 
-  // These properties need to come after {variantStyle}, because they might
-  // overwrite a variant attribute
-  font-weight: ${({ theme, $fontWeight }) => extractStyleFromTheme(theme.fontWeights, $fontWeight, void 0)};
-  font-size: ${({ theme, $fontSize }) => extractStyleFromTheme(theme.fontSizes, $fontSize, void 0)};
-  line-height: ${({ theme, $lineHeight }) => extractStyleFromTheme(theme.lineHeights, $lineHeight, $lineHeight)};
-  color: ${({ theme, $textColor }) => extractStyleFromTheme(theme.colors, $textColor, $textColor)};
-  text-align: ${({ $textAlign }) => $textAlign};
-  text-decoration: ${({ $textDecoration }) => $textDecoration};
-  text-transform: ${({ $textTransform }) => $textTransform};
+  ${({ theme, ...props }) => {
+  return handleResponsiveValues(
+    {
+      color: props.$textColor,
+      textDecoration: props.$textDecoration,
+      textTransform: props.$textTransform,
+      lineHeight: props.$lineHeight,
+      fontWeight: props.$fontWeight,
+      fontSize: props.$fontSize
+    },
+    theme
+  );
+}}
 `;
 const [AccordionProvider, useAccordion] = createContext("Accordion");
 const Root$8 = React.forwardRef(({ children, size = "S", ...props }, forwardedRef) => {
@@ -1354,7 +1456,7 @@ const getActiveStyle = ({ theme, $variant }) => {
       color: ${theme.colors[`${getVariantColorName($variant)}600`]};
     `;
   }
-  if ($variant === TERTIARY) {
+  if ($variant === TERTIARY || $variant === GHOST) {
     return css`
       background-color: ${theme.colors.neutral150};
     `;
@@ -1494,6 +1596,156 @@ const ButtonWrapper = styled(Flex)`
       border-color ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 `;
+const TooltipImpl = React.forwardRef(
+  ({
+    children,
+    description,
+    label,
+    defaultOpen,
+    open,
+    onOpenChange,
+    delayDuration = 500,
+    disableHoverableContent,
+    ...restProps
+  }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(
+      Tooltip.Root,
+      {
+        defaultOpen,
+        open,
+        onOpenChange,
+        delayDuration,
+        disableHoverableContent,
+        children: [
+          /* @__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 }) }) })
+        ]
+      }
+    );
+  }
+);
+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: ${ANIMATIONS.fadeIn} ${(props) => props.theme.motion.timings["200"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
+`;
+const IconButton = forwardRef(
+  ({
+    label,
+    background,
+    children,
+    disabled = false,
+    onClick,
+    size = "S",
+    variant: variant2 = "tertiary",
+    withTooltip = true,
+    ...restProps
+  }, ref) => {
+    const handleClick = (e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    };
+    const component = /* @__PURE__ */ jsx(
+      IconButtonWrapper,
+      {
+        "aria-disabled": disabled,
+        background: disabled ? "neutral150" : background,
+        tag: "button",
+        display: "inline-flex",
+        justifyContent: "center",
+        hasRadius: true,
+        cursor: "pointer",
+        ...restProps,
+        ref,
+        $size: size,
+        onClick: handleClick,
+        $variant: variant2,
+        children: /* @__PURE__ */ jsx(AccessibleIcon, { label, children })
+      }
+    );
+    return withTooltip ? /* @__PURE__ */ jsx(TooltipImpl, { label, children: component }) : component;
+  }
+);
+const IconButtonWrapper = styled(Flex)`
+  text-decoration: none;
+
+  ${(props) => {
+  switch (props.$size) {
+    case "S": {
+      return css`
+          padding-block: 0.7rem;
+          padding-inline: 0.7rem;
+        `;
+    }
+    case "M": {
+      return css`
+          padding-block: 0.9rem;
+          padding-inline: 0.9rem;
+        `;
+    }
+    case "L": {
+      return css`
+          padding-block: 1.1rem;
+          padding-inline: 1.1rem;
+        `;
+    }
+  }
+}}
+  ${getVariantStyle}
+  ${(props) => props.$variant === "tertiary" ? css`
+          color: ${props.theme.colors.neutral500};
+        ` : ""}
+
+  &:hover {
+    ${getHoverStyle}
+    ${(props) => props.$variant === "tertiary" ? css`
+            color: ${props.theme.colors.neutral600};
+          ` : ""}
+  }
+
+  &:active {
+    ${getActiveStyle}
+  }
+
+  &[aria-disabled='true'] {
+    ${getDisabledStyle}
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      ${(props) => props.theme.transitions.backgroundColor},
+      ${(props) => props.theme.transitions.color},
+      border-color ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.easeOutQuad};
+  }
+`;
+const IconButtonGroup = styled(Flex)`
+  & ${IconButtonWrapper}:first-child {
+    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
+  }
+
+  & ${IconButtonWrapper}:last-child {
+    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
+  }
+
+  & ${IconButtonWrapper} {
+    border-radius: 0;
+
+    & + ${IconButtonWrapper} {
+      border-left: none;
+    }
+  }
+`;
 const Link = forwardRef(
   ({ children, href, disabled = false, startIcon, endIcon, isExternal = false, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(LinkWrapper$1, { ref, href, disabled, isExternal, ...props, children: [
@@ -1520,7 +1772,7 @@ const LinkWrapper$1 = styled(BaseLinkImpl)`
   }
 
   &:hover {
-    span {
+    & > span {
       color: ${({ theme }) => theme.colors.primary500};
     }
   }
@@ -1533,39 +1785,31 @@ const LinkWrapper$1 = styled(BaseLinkImpl)`
 `;
 const MenuRoot = DropdownMenu.Root;
 const MenuTrigger = React.forwardRef(
-  ({ size, endIcon = /* @__PURE__ */ jsx(CaretDown, { width: "0.6rem", height: "0.4rem", "aria-hidden": true }), ...props }, ref) => {
-    return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        ref,
-        type: "button",
-        variant: "ghost",
-        endIcon,
-        paddingTop: size === "S" ? 1 : 2,
-        paddingBottom: size === "S" ? 1 : 2,
-        paddingLeft: size === "S" ? 3 : 4,
-        paddingRight: size === "S" ? 3 : 4,
-        ...props
-      }
-    ) });
+  ({ label, endIcon = /* @__PURE__ */ jsx(CaretDown, { width: "1.2rem", height: "1.2rem", "aria-hidden": true }), tag = Button, icon, ...rest }, ref) => {
+    const props = {
+      ...rest,
+      ref,
+      type: "button"
+    };
+    return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: tag === IconButton ? /* @__PURE__ */ jsx(IconButton, { label, variant: "tertiary", ...props, children: icon }) : /* @__PURE__ */ jsx(Button, { endIcon, variant: "ghost", ...props }) });
   }
 );
 const MenuContent = React.forwardRef(
   ({ children, intersectionId, popoverPlacement = "bottom-start", ...props }, ref) => {
     const [side, align] = popoverPlacement.split("-");
-    return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, { align, side, loop: true, asChild: true, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuContent, { align, side, loop: true, asChild: true, children: /* @__PURE__ */ jsxs(
       Viewport$2,
       {
         ref,
         direction: "column",
-        borderStyle: "solid",
-        borderWidth: "1px",
         borderColor: "neutral150",
         hasRadius: true,
         background: "neutral0",
         shadow: "filterShadow",
         maxHeight: "15rem",
         padding: 1,
+        marginTop: 1,
+        marginBottom: 1,
         alignItems: "flex-start",
         position: "relative",
         overflow: "auto",
@@ -1587,6 +1831,23 @@ const Viewport$2 = styled(Flex)`
     display: none;
   }
 `;
+const DropdownMenuContent = styled(DropdownMenu.Content)`
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: ${(props) => props.theme.motion.timings["200"]};
+
+    &[data-state='open'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideUpIn};
+      }
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideDownIn};
+      }
+    }
+  }
+`;
 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 }) }) });
 };
@@ -1596,7 +1857,7 @@ const getOptionStyle = ({ theme }) => css`
   border-radius: ${theme.borderRadius};
   padding: ${theme.spaces[2]} ${theme.spaces[4]};
 
-  &[aria-disabled] {
+  &[aria-disabled='true'] {
     cursor: not-allowed;
     color: ${theme.colors.neutral500};
   }
@@ -1869,12 +2130,6 @@ const CheckboxRoot = styled(Checkbox.Root)`
   // this ensures the checkbox is always a square even in flex-containers.
   flex: 0 0 2rem;
 
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      border-color ${(props) => props.theme.motion.timings["120"]} ${(props) => props.theme.motion.easings.easeOutQuad},
-      ${(props) => props.theme.transitions.backgroundColor};
-  }
-
   &[data-state='checked'],
   &[data-state='indeterminate'] {
     border: 1px solid ${(props) => props.theme.colors.primary600};
@@ -1963,49 +2218,6 @@ const KeyboardKeys = {
   BACKSPACE: "Backspace",
   CLEAR: "Clear"
 };
-const TooltipImpl = React.forwardRef(
-  ({
-    children,
-    description,
-    label,
-    defaultOpen,
-    open,
-    onOpenChange,
-    delayDuration = 500,
-    disableHoverableContent,
-    ...restProps
-  }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(
-      Tooltip.Root,
-      {
-        defaultOpen,
-        open,
-        onOpenChange,
-        delayDuration,
-        disableHoverableContent,
-        children: [
-          /* @__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 }) }) })
-        ]
-      }
-    );
-  }
-);
-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: ${ANIMATIONS.fadeIn} ${(props) => props.theme.motion.timings["200"]}
-      ${(props) => props.theme.motion.easings.authenticMotion};
-  }
-`;
 const CarouselGrid = styled(Box)`
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
@@ -2100,9 +2312,11 @@ const commonTheme = {
   },
   spaces: ["0px", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "56px", "64px"],
   borderRadius: "4px",
-  mediaQueries: {
-    tablet: `@media (max-width: 1100px)`,
-    mobile: `@media (max-width: 550px)`
+  breakpoints: {
+    initial: "@media(min-width: 0px)",
+    small: "@media(min-width: 520px)",
+    medium: "@media(min-width: 768px)",
+    large: "@media(min-width: 1280px)"
   },
   fontSizes: [`1.1rem`, `1.2rem`, `1.4rem`, "1.6rem", `1.8rem`, `3.2rem`],
   lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],
@@ -7806,10 +8020,9 @@ const Label = React.forwardRef(({ children, action, ...props }, ref) => {
     return null;
   }
   return /* @__PURE__ */ jsxs(
-    Typography,
+    TypographyLabel,
     {
       ref: composedRefs,
-      display: "flex",
       variant: "pi",
       textColor: "neutral800",
       fontWeight: "bold",
@@ -7817,6 +8030,7 @@ const Label = React.forwardRef(({ children, action, ...props }, ref) => {
       id: `${id}-label`,
       htmlFor: id,
       tag: "label",
+      ellipsis: true,
       children: [
         children,
         required && /* @__PURE__ */ jsx(Typography, { "aria-hidden": true, lineHeight: "1em", textColor: "danger600", children: "*" }),
@@ -7825,6 +8039,9 @@ const Label = React.forwardRef(({ children, action, ...props }, ref) => {
     }
   );
 });
+const TypographyLabel = styled(Typography)`
+  display: flex;
+`;
 const LabelAction = styled(Flex)`
   line-height: 0;
   color: ${({ theme }) => theme.colors.neutral500};
@@ -7849,11 +8066,24 @@ const Input$2 = React.forwardRef(
       ariaDescription = `${id}-hint`;
     }
     const hasError = Boolean(error);
+    const endActionRef = React.useRef(null);
+    const inputElementRef = React.useRef(null);
+    const inputRef = useComposedRefs(inputElementRef, ref);
     const handleChange = (e) => {
       if (!disabled && onChange) {
         onChange(e);
       }
     };
+    React.useLayoutEffect(() => {
+      if (endActionRef.current && inputElementRef.current) {
+        const endActionWidth = endActionRef.current.offsetWidth;
+        const inputElement = inputElementRef.current;
+        if (inputElement) {
+          const inputPadding = endActionWidth + 8 + 16;
+          inputElement.style.paddingRight = `${inputPadding}px`;
+        }
+      }
+    }, [endAction]);
     return /* @__PURE__ */ jsxs(
       InputWrapper,
       {
@@ -7872,7 +8102,7 @@ const Input$2 = React.forwardRef(
             {
               id,
               name,
-              ref,
+              ref: inputRef,
               $size: size,
               "aria-describedby": ariaDescription,
               "aria-invalid": hasError || hasErrorProp,
@@ -7881,10 +8111,12 @@ const Input$2 = React.forwardRef(
               "data-disabled": disabled ? "" : void 0,
               onChange: handleChange,
               "aria-required": required || requiredProp,
+              $hasLeftAction: Boolean(startAction),
+              $hasRightAction: Boolean(endAction),
               ...props
             }
           ),
-          endAction
+          endAction && /* @__PURE__ */ jsx(EndAction, { ref: endActionRef, children: endAction })
         ]
       }
     );
@@ -7903,19 +8135,6 @@ const InputElement = styled.input`
   width: 100%;
   background: inherit;
 
-  ${(props) => {
-  switch (props.$size) {
-    case "S":
-      return css`
-          padding-block: ${props.theme.spaces[1]};
-        `;
-    default:
-      return css`
-          padding-block: ${props.theme.spaces[2]};
-        `;
-  }
-}};
-
   ::placeholder {
     color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
@@ -7930,32 +8149,42 @@ const InputElement = styled.input`
     outline: none;
     box-shadow: none;
   }
-`;
-const InputWrapper = styled(Flex)`
-  border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-  ${inputFocusStyle()}
 
   ${(props) => {
   switch (props.$size) {
     case "S":
       return css`
-          padding-inline-start: ${props.$hasLeftAction ? props.theme.spaces[3] : props.theme.spaces[4]};
-          padding-inline-end: ${props.$hasRightAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-inline-start: ${props.$hasLeftAction ? 0 : props.theme.spaces[4]};
+          padding-inline-end: ${props.$hasRightAction ? 0 : props.theme.spaces[4]};
+          padding-block: ${props.theme.spaces[1]};
         `;
     default:
       return css`
-          padding-inline-start: ${props.$hasLeftAction ? props.theme.spaces[3] : props.theme.spaces[4]};
-          padding-inline-end: ${props.$hasRightAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-inline-start: ${props.$hasLeftAction ? 0 : props.theme.spaces[4]};
+          padding-inline-end: ${props.$hasRightAction ? 0 : props.theme.spaces[4]};
+          padding-block: ${props.theme.spaces[2]};
         `;
   }
 }}
+`;
+const EndAction = styled(Flex)`
+  position: absolute;
+  right: ${({ theme }) => theme.spaces[4]};
+  top: 50%;
+  transform: translateY(-50%);
+`;
+const InputWrapper = styled(Flex)`
+  border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  padding-inline-start: ${({ $hasLeftAction, theme }) => $hasLeftAction ? theme.spaces[4] : 0};
+  position: relative;
 
+  ${inputFocusStyle()}
   ${({ theme, $disabled }) => $disabled ? css`
           color: ${theme.colors.neutral600};
           background: ${theme.colors.neutral150};
-        ` : void 0}
+        ` : void 0};
 `;
 const Hint = () => {
   const { id, hint, error } = useField("Hint");
@@ -8236,7 +8465,7 @@ const Combobox = React.forwardRef(
         children: [
           /* @__PURE__ */ jsxs(Trigger$5, { $hasError: hasError, $size: size, className, children: [
             /* @__PURE__ */ jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
-              startIcon ? /* @__PURE__ */ jsx(Box, { flex: "0 0 1.6rem", tag: "span", "aria-hidden": true, children: startIcon }) : null,
+              startIcon ? /* @__PURE__ */ jsx(Flex, { flex: "0 0 1.6rem", tag: "span", "aria-hidden": true, children: startIcon }) : null,
               /* @__PURE__ */ jsx(
                 TextInput$1,
                 {
@@ -8270,7 +8499,7 @@ const Combobox = React.forwardRef(
                   children: /* @__PURE__ */ jsx(Cross, {})
                 }
               ) : null,
-              /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CaretDown, {}) })
+              /* @__PURE__ */ jsx(DownIcon$1, { children: /* @__PURE__ */ jsx(CaretDown, { fill: "neutral500" }) })
             ] })
           ] }),
           /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Content$5, { sideOffset: 4, children: /* @__PURE__ */ jsxs(Viewport$1, { ref: viewportRef, children: [
@@ -8359,6 +8588,7 @@ const DownIcon$1 = styled(Combobox$1.Icon)`
   background: transparent;
   padding: 0;
   color: ${({ theme }) => theme.colors.neutral600};
+  display: flex;
 
   &[aria-disabled='true'] {
     cursor: inherit;
@@ -8382,11 +8612,11 @@ const Content$5 = styled(Combobox$1.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownIn};
+        animation-name: ${ANIMATIONS.slideUpIn};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpIn};
+        animation-name: ${ANIMATIONS.slideDownIn};
       }
     }
   }
@@ -8830,6 +9060,7 @@ const SelectTrigger = React.forwardRef(
 );
 const IconBox$2 = styled(Box)`
   border: none;
+  display: flex;
 
   svg {
     height: 1.1rem;
@@ -8837,7 +9068,7 @@ const IconBox$2 = styled(Box)`
   }
 
   svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const StyledTrigger = styled(Flex)`
@@ -8860,7 +9091,7 @@ const StyledTrigger = styled(Flex)`
 }}
 
   &[aria-disabled='true'] {
-    color: ${(props) => props.theme.colors.neutral600};
+    color: ${(props) => props.theme.colors.neutral500};
   }
 
   /* Required to ensure the below inputFocusStyles are adhered too */
@@ -8871,8 +9102,9 @@ const StyledTrigger = styled(Flex)`
   ${({ theme, $hasError }) => inputFocusStyle()({ theme, $hasError })};
 `;
 const DownIcon = styled(Select.Icon)`
+  display: flex;
   & > svg {
-    fill: ${({ theme }) => theme.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const SelectValue = React.forwardRef(({ children, placeholder, ...restProps }, ref) => /* @__PURE__ */ jsx(ValueType, { ref, ellipsis: true, ...restProps, children: /* @__PURE__ */ jsx(StyledValue, { placeholder, children }) }));
@@ -8903,11 +9135,11 @@ const SelectContent = styled(Select.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownIn};
+        animation-name: ${ANIMATIONS.slideUpIn};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpIn};
+        animation-name: ${ANIMATIONS.slideDownIn};
       }
     }
   }
@@ -9565,7 +9797,7 @@ const DatePickerContentImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { label = "Choose date", ...restProps } = props;
     const { onOpenChange, ...context } = useDatePickerContext(CONTENT_IMPL_NAME);
-    const { x, y, refs, strategy } = useFloating({
+    const { x, y, refs, strategy, placement } = useFloating({
       strategy: "fixed",
       placement: "bottom-start",
       middleware: [
@@ -9612,6 +9844,7 @@ const DatePickerContentImpl = React.forwardRef(
           {
             ref: composedRefs,
             "data-state": context.open ? "open" : "closed",
+            "data-side": placement.includes("top") ? "top" : "bottom",
             onContextMenu: (event) => event.preventDefault(),
             id: context.contentId,
             role: "dialog",
@@ -9636,6 +9869,22 @@ const ContentElement = styled(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   z-index: ${({ theme }) => theme.zIndices.popover};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: ${(props) => props.theme.motion.timings["200"]};
+
+    &[data-state='open'] {
+      animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
+
+      &[data-side='top'] {
+        animation-name: ${ANIMATIONS.slideUpIn};
+      }
+
+      &[data-side='bottom'] {
+        animation-name: ${ANIMATIONS.slideDownIn};
+      }
+    }
+  }
 `;
 const DATE_PICKER_CALENDAR_NAME = "DatePickerCalendar";
 const DatePickerCalendar = React.forwardRef(
@@ -10048,250 +10297,44 @@ const Divider = React.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       background: "neutral150",
       ...props,
-      "data-orientation": "horizontal",
-      role: "separator",
-      tag: "div"
-    }
-  );
-});
-const DividerImpl = styled(Box)`
-  height: 1px;
-  border: none;
-  /* If contained in a Flex parent we want to prevent the Divider to shink */
-  flex-shrink: 0;
-`;
-const EmptyStateIconWrapper = styled(Box)`
-  svg {
-    height: 8.8rem;
-  }
-`;
-const EmptyStateLayout = React.forwardRef(
-  ({ icon, content, action, hasRadius = true, shadow = "tableShadow" }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        ref: forwardedRef,
-        alignItems: "center",
-        direction: "column",
-        padding: 11,
-        background: "neutral0",
-        hasRadius,
-        shadow,
-        children: [
-          icon ? /* @__PURE__ */ jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }) : null,
-          /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "p", textAlign: "center", textColor: "neutral600", children: content }) }),
-          action
-        ]
-      }
-    );
-  }
-);
-const getFocusableNodes = (node, includeNegativeTabIndex) => {
-  const nodes = [
-    ...node.querySelectorAll(
-      'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
-    )
-  ];
-  const focusables = nodes.filter((node2) => {
-    if (node2.hasAttribute("disabled"))
-      return false;
-    if (includeNegativeTabIndex)
-      return true;
-    return node2.getAttribute("tabindex") !== "-1";
-  });
-  return focusables;
-};
-const getFocusableNodesWithKeyboardNav = (nodes) => {
-  return nodes.filter((node) => {
-    if (node.tagName === "INPUT") {
-      return node.type !== "checkbox" && node.type !== "radio";
-    }
-    return false;
-  });
-};
-const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...props }) => {
-  const trappedRef = React.useRef(null);
-  React.useEffect(() => {
-    let currentFocus = null;
-    if (restoreFocus) {
-      currentFocus = document.activeElement;
-    }
-    return () => {
-      if (currentFocus) {
-        currentFocus.focus();
-      }
-    };
-  }, [restoreFocus]);
-  React.useEffect(() => {
-    if (!trappedRef.current || skipAutoFocus)
-      return;
-    const focusableChildren = getFocusableNodes(trappedRef.current);
-    if (focusableChildren.length > 0) {
-      const firstElement = focusableChildren[0];
-      firstElement.focus();
-    } else {
-      console.warn(
-        "[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one."
-      );
-    }
-  }, [skipAutoFocus]);
-  const handleKeyDown = (e) => {
-    if (e.key === KeyboardKeys.ESCAPE && onEscape) {
-      onEscape();
-      return;
-    }
-    if (e.key !== KeyboardKeys.TAB)
-      return;
-    const focusableChildren = getFocusableNodes(trappedRef.current);
-    if (focusableChildren.length > 0) {
-      const firstElement = focusableChildren[0];
-      const lastElement = focusableChildren[focusableChildren.length - 1];
-      if (e.shiftKey) {
-        if (firstElement === document.activeElement) {
-          e.preventDefault();
-          lastElement.focus();
-        }
-      } else if (lastElement === document.activeElement) {
-        e.preventDefault();
-        firstElement.focus();
-      }
+      "data-orientation": "horizontal",
+      role: "separator",
+      tag: "div"
     }
-  };
-  return /* @__PURE__ */ jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
-};
-const Root$3 = forwardRef((props, forwardedRef) => {
-  const { gap = 0, gridCols = 12, ...rest } = props;
-  return /* @__PURE__ */ jsx(Wrapper$1, { ref: forwardedRef, $gap: gap, $gridCols: gridCols, ...rest });
+  );
 });
-const Wrapper$1 = styled(Box)`
-  display: grid;
-  grid-template-columns: repeat(${({ $gridCols }) => $gridCols}, 1fr);
-  ${({ theme, $gap }) => handleResponsiveValues("gap", $gap, theme)}
+const DividerImpl = styled(Box)`
+  height: 1px;
+  border: none;
+  /* If contained in a Flex parent we want to prevent the Divider to shink */
+  flex-shrink: 0;
 `;
-const ItemImpl = forwardRef(
-  ({ col, s, xs, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Item$1, { ref: forwardedRef, $col: col, $s: s, $xs: xs, ...props })
-);
-const Item$1 = styled(Flex)`
-  grid-column: span ${({ $col }) => $col ?? 1};
-  max-width: 100%;
-
-  ${({ theme }) => theme.mediaQueries.tablet} {
-    grid-column: span ${({ $s }) => $s};
-  }
-
-  ${({ theme }) => theme.mediaQueries.mobile} {
-    grid-column: span ${({ $xs }) => $xs};
+const EmptyStateIconWrapper = styled(Box)`
+  svg {
+    height: 8.8rem;
   }
 `;
-const Grid = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Item: ItemImpl,
-  Root: Root$3
-}, Symbol.toStringTag, { value: "Module" }));
-const IconButton = forwardRef(
-  ({
-    label,
-    background,
-    children,
-    disabled = false,
-    onClick,
-    size = "M",
-    variant: variant2 = "tertiary",
-    withTooltip = true,
-    ...restProps
-  }, ref) => {
-    const handleClick = (e) => {
-      if (!disabled && onClick) {
-        onClick(e);
-      }
-    };
-    const component = /* @__PURE__ */ jsx(
-      IconButtonWrapper,
+const EmptyStateLayout = React.forwardRef(
+  ({ icon, content, action, hasRadius = true, shadow = "tableShadow" }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(
+      Flex,
       {
-        "aria-disabled": disabled,
-        background: disabled ? "neutral150" : background,
-        tag: "button",
-        display: "inline-flex",
-        justifyContent: "center",
-        hasRadius: true,
-        cursor: "pointer",
-        ...restProps,
-        ref,
-        $size: size,
-        onClick: handleClick,
-        $variant: variant2,
-        children: /* @__PURE__ */ jsx(AccessibleIcon, { label, children })
+        ref: forwardedRef,
+        alignItems: "center",
+        direction: "column",
+        padding: 11,
+        background: "neutral0",
+        hasRadius,
+        shadow,
+        children: [
+          icon ? /* @__PURE__ */ jsx(EmptyStateIconWrapper, { paddingBottom: 6, "aria-hidden": true, children: icon }) : null,
+          /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "p", textAlign: "center", textColor: "neutral600", children: content }) }),
+          action
+        ]
       }
     );
-    return withTooltip ? /* @__PURE__ */ jsx(TooltipImpl, { label, children: component }) : component;
   }
 );
-const IconButtonWrapper = styled(Flex)`
-  text-decoration: none;
-
-  ${(props) => {
-  switch (props.$size) {
-    case "S": {
-      return css`
-          padding-block: 0.6rem;
-          padding-inline: 0.6rem;
-        `;
-    }
-    case "M": {
-      return css`
-          padding-block: 0.9rem;
-          padding-inline: 0.9rem;
-        `;
-    }
-    case "L": {
-      return css`
-          padding-block: 1.1rem;
-          padding-inline: 1.1rem;
-        `;
-    }
-  }
-}}
-  ${getVariantStyle}
-  ${(props) => props.$variant === "tertiary" ? css`
-          color: ${props.theme.colors.neutral600};
-        ` : ""}
-
-  &:hover {
-    ${getHoverStyle}
-  }
-
-  &:active {
-    ${getActiveStyle}
-  }
-
-  &[aria-disabled='true'] {
-    ${getDisabledStyle}
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      ${(props) => props.theme.transitions.backgroundColor},
-      ${(props) => props.theme.transitions.color},
-      border-color ${(props) => props.theme.motion.timings["200"]} ${(props) => props.theme.motion.easings.easeOutQuad};
-  }
-`;
-const IconButtonGroup = styled(Flex)`
-  & ${IconButtonWrapper}:first-child {
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
-  }
-
-  & ${IconButtonWrapper}:last-child {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
-  }
-
-  & ${IconButtonWrapper} {
-    border-radius: 0;
-
-    & + ${IconButtonWrapper} {
-      border-left: none;
-    }
-  }
-`;
 const addMarks = StateEffect.define();
 const filterMarks = StateEffect.define();
 const lineHighlightMark = Decoration.mark({
@@ -10572,7 +10615,7 @@ const Thumb = styled(ScrollArea.Thumb)`
     min-height: 44px;
   }
 `;
-const Root$2 = Dialog$1.Root;
+const Root$3 = Dialog$1.Root;
 const Trigger$2 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
@@ -10592,8 +10635,8 @@ const Overlay = styled(Dialog$1.Overlay)`
 `;
 const ContentImpl = styled(Dialog$1.Content)`
   max-width: 83rem;
-  max-height: 80vh;
-  height: min-content;
+  max-height: 90vh;
+  height: auto;
   width: 60%;
   overflow: hidden;
   margin: 0 auto;
@@ -10695,7 +10738,7 @@ const Modal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   Content: Content$2,
   Footer,
   Header,
-  Root: Root$2,
+  Root: Root$3,
   Title,
   Trigger: Trigger$2
 }, Symbol.toStringTag, { value: "Module" }));
@@ -10931,7 +10974,7 @@ const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxs(Box, { ...props, c
   /* @__PURE__ */ jsx(VisuallyHidden, { children }),
   /* @__PURE__ */ jsx(Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "…" })
 ] });
-const Root$1 = Popover$1.Root;
+const Root$2 = Popover$1.Root;
 const Trigger$1 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
@@ -10943,6 +10986,7 @@ const PopoverContent = styled(Popover$1.Content)`
   z-index: ${({ theme }) => theme.zIndices.popover};
   background-color: ${(props) => props.theme.colors.neutral0};
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
 
   @media (prefers-reduced-motion: no-preference) {
     animation-duration: ${(props) => props.theme.motion.timings["200"]};
@@ -10951,11 +10995,11 @@ const PopoverContent = styled(Popover$1.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.authenticMotion};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownIn};
+        animation-name: ${ANIMATIONS.slideUpIn};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpIn};
+        animation-name: ${ANIMATIONS.slideDownIn};
       }
     }
 
@@ -10963,11 +11007,11 @@ const PopoverContent = styled(Popover$1.Content)`
       animation-timing-function: ${(props) => props.theme.motion.easings.easeOutQuad};
 
       &[data-side='top'] {
-        animation-name: ${ANIMATIONS.slideDownOut};
+        animation-name: ${ANIMATIONS.slideUpOut};
       }
 
       &[data-side='bottom'] {
-        animation-name: ${ANIMATIONS.slideUpOut};
+        animation-name: ${ANIMATIONS.slideDownOut};
       }
     }
   }
@@ -10994,7 +11038,7 @@ const PopoverScrollArea = styled(ScrollAreaImpl$1)`
 const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Content: Content$1,
-  Root: Root$1,
+  Root: Root$2,
   ScrollArea: ScrollAreaImpl,
   Trigger: Trigger$1
 }, Symbol.toStringTag, { value: "Module" }));
@@ -11034,7 +11078,7 @@ const RadioGroupRoot = styled(RadioGroup.Root)`
   flex-direction: column;
   gap: ${(props) => props.theme.spaces[3]};
 `;
-const Item = React.forwardRef(({ children, id: idProp, ...restProps }, forwardedRef) => {
+const Item$1 = React.forwardRef(({ children, id: idProp, ...restProps }, forwardedRef) => {
   const id = useId(idProp);
   return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
     /* @__PURE__ */ jsx(RadioGroupItem, { id, ref: forwardedRef, ...restProps, children: /* @__PURE__ */ jsx(RadioGroupIndicator, {}) }),
@@ -11103,7 +11147,7 @@ const RadioGroupIndicator = styled(RadioGroup.Indicator)`
 const Radio = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Group,
-  Item
+  Item: Item$1
 }, Symbol.toStringTag, { value: "Module" }));
 const focusFocusable = (node) => {
   const nextNode = node.querySelector('[tabindex="0"]');
@@ -11202,6 +11246,29 @@ const RawTable = React.forwardRef(
     ) });
   }
 );
+const getFocusableNodes = (node, includeNegativeTabIndex) => {
+  const nodes = [
+    ...node.querySelectorAll(
+      'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+    )
+  ];
+  const focusables = nodes.filter((node2) => {
+    if (node2.hasAttribute("disabled"))
+      return false;
+    if (includeNegativeTabIndex)
+      return true;
+    return node2.getAttribute("tabindex") !== "-1";
+  });
+  return focusables;
+};
+const getFocusableNodesWithKeyboardNav = (nodes) => {
+  return nodes.filter((node) => {
+    if (node.tagName === "INPUT") {
+      return node.type !== "checkbox" && node.type !== "radio";
+    }
+    return false;
+  });
+};
 const RawTd = React.forwardRef(
   ({ coords = { col: 0, row: 0 }, tag = "td", ...props }, forwardedRef) => {
     const tdRef = React.useRef(null);
@@ -11651,7 +11718,8 @@ const SubNavHeader = ({
   },
   onSubmit = () => {
   },
-  id
+  id,
+  placeholder
 }) => {
   const [isSearchOpen, setSearchOpen] = React.useState(false);
   const previousSearchOpenValue = usePrev(isSearchOpen);
@@ -11691,7 +11759,7 @@ const SubNavHeader = ({
           name: "searchbar",
           value,
           onChange,
-          placeholder: "e.g: strapi-plugin-abcd",
+          placeholder,
           onKeyDown: handleKeyDown,
           ref: searchRef,
           onBlur: handleBlur,
@@ -11980,7 +12048,7 @@ const LabelTypography = styled(Typography)`
   }
 `;
 const [TabsProvider, useTabs] = createContext("Tabs");
-const Root = React.forwardRef(
+const Root$1 = React.forwardRef(
   ({ disabled = false, variant: variant2 = "regular", hasError, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsx(TabsProvider, { disabled, hasError, variant: variant2, children: /* @__PURE__ */ jsx(TabsRoot, { ref: forwardedRef, ...props }) });
   }
@@ -12019,10 +12087,6 @@ const TabBar = styled.span`
   left: 0;
   opacity: 0;
   height: 0.2rem;
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: ${(props) => `opacity 200ms ${props.theme.motion.easings.authenticMotion}`};
-  }
 `;
 const TriggerTypography = styled(Typography)``;
 const TabsTrigger = styled(Tabs$1.Trigger)`
@@ -12076,10 +12140,6 @@ const TabsTrigger = styled(Tabs$1.Trigger)`
   }
 }}
 
-  @media (prefers-reduced-motion: no-preference) {
-    transition: ${(props) => `${props.theme.transitions.color}, ${props.theme.transitions.backgroundColor}, box-shadow ${props.theme.motion.timings["120"]} ${props.theme.motion.easings.easeOutQuad}`};
-  }
-
   &[data-disabled] {
     cursor: not-allowed;
     color: ${(props) => props.theme.colors.neutral400};
@@ -12106,7 +12166,7 @@ const Tabs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   __proto__: null,
   Content,
   List,
-  Root,
+  Root: Root$1,
   Trigger
 }, Symbol.toStringTag, { value: "Module" }));
 const TableContainer = styled(Box)`
@@ -12328,7 +12388,7 @@ const Textarea = React.forwardRef(
     } else if (field.hint) {
       ariaDescription = `${id}-hint`;
     }
-    return /* @__PURE__ */ jsx(Wrapper, { borderColor: hasError ? "danger600" : "neutral200", $hasError: hasError, hasRadius: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Wrapper$1, { borderColor: hasError ? "danger600" : "neutral200", $hasError: hasError, hasRadius: true, children: /* @__PURE__ */ jsx(
       TextareaElement,
       {
         "aria-invalid": hasError,
@@ -12352,7 +12412,7 @@ const Textarea = React.forwardRef(
     ) });
   }
 );
-const Wrapper = styled(Box)`
+const Wrapper$1 = styled(Box)`
   ${inputFocusStyle()}
 `;
 const TextareaElement = styled(Box)`
@@ -12497,6 +12557,39 @@ const Input = styled.input`
   z-index: 0;
   width: 100%;
 `;
+const Root = forwardRef((props, forwardedRef) => {
+  const { gap = 0, gridCols = 12, ...rest } = props;
+  return /* @__PURE__ */ jsx(Wrapper, { ref: forwardedRef, $gap: gap, $gridCols: gridCols, ...rest });
+});
+const Wrapper = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(${({ $gridCols }) => $gridCols}, 1fr);
+  ${({ theme, $gap }) => handleResponsiveValues({ gap: $gap }, theme)}
+`;
+const ItemImpl = forwardRef(
+  ({ col, s, xs, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Item, { ref: forwardedRef, $col: col, $s: s, $xs: xs, ...props })
+);
+const Item = styled(Flex)`
+  grid-column: span ${({ $xs }) => $xs ?? 12};
+  max-width: 100%;
+
+  ${({ theme }) => theme.breakpoints.small} {
+    grid-column: span ${({ $s, $xs }) => $s ?? $xs ?? 12};
+  }
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    grid-column: span ${({ $m, $s, $xs }) => $m ?? $s ?? $xs ?? 12};
+  }
+
+  ${({ theme }) => theme.breakpoints.large} {
+    grid-column: span ${({ $col, $m, $s, $xs }) => $col ?? $m ?? $s ?? $xs ?? 12};
+  }
+`;
+const Grid = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Item: ItemImpl,
+  Root
+}, Symbol.toStringTag, { value: "Module" }));
 const defaultState = {
   x: 0,
   y: 0,
@@ -12529,6 +12622,56 @@ function useMeasure() {
   }, [element, observer]);
   return [ref, rect];
 }
+const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...props }) => {
+  const trappedRef = React.useRef(null);
+  React.useEffect(() => {
+    let currentFocus = null;
+    if (restoreFocus) {
+      currentFocus = document.activeElement;
+    }
+    return () => {
+      if (currentFocus) {
+        currentFocus.focus();
+      }
+    };
+  }, [restoreFocus]);
+  React.useEffect(() => {
+    if (!trappedRef.current || skipAutoFocus)
+      return;
+    const focusableChildren = getFocusableNodes(trappedRef.current);
+    if (focusableChildren.length > 0) {
+      const firstElement = focusableChildren[0];
+      firstElement.focus();
+    } else {
+      console.warn(
+        "[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one."
+      );
+    }
+  }, [skipAutoFocus]);
+  const handleKeyDown = (e) => {
+    if (e.key === KeyboardKeys.ESCAPE && onEscape) {
+      onEscape();
+      return;
+    }
+    if (e.key !== KeyboardKeys.TAB)
+      return;
+    const focusableChildren = getFocusableNodes(trappedRef.current);
+    if (focusableChildren.length > 0) {
+      const firstElement = focusableChildren[0];
+      const lastElement = focusableChildren[focusableChildren.length - 1];
+      if (e.shiftKey) {
+        if (firstElement === document.activeElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else if (lastElement === document.activeElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
+};
 const KeyboardNavigable = ({ tagName, attributeName = "", ...props }) => {
   const isValidFocusedElement = () => {
     const focused = document.activeElement;