@strapi/design-system 2.0.0-rc.25 → 2.0.0-rc.27

package/dist/index.mjs

@@ -586,7 +586,7 @@ const Trigger$7 = React.forwardRef(
     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, overflow: "hidden", children: [
-        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$2, { children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }) : null,
+        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$1, { children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }) : null,
         /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, overflow: "hidden", children: [
           /* @__PURE__ */ jsx(
             Typography,
@@ -606,7 +606,7 @@ const Trigger$7 = React.forwardRef(
     ] });
   }
 );
-const IconBox$2 = styled(Box)`
+const IconBox$1 = styled(Box)`
   color: ${(props) => props.theme.colors.neutral500};
   display: flex;
 
@@ -703,7 +703,7 @@ const AccordionHeader = styled(RadixAccordion.Header)`
       & > ${AccordionTrigger} {
         color: ${(props) => props.theme.colors.primary600};
 
-        & ${IconBox$2} {
+        & ${IconBox$1} {
           color: ${(props) => props.theme.colors.primary600};
         }
 
@@ -1684,8 +1684,8 @@ const IconButtonWrapper = styled(Flex)`
   switch (props.$size) {
     case "XS": {
       return css`
-          padding-block: 0.25rem;
-          padding-inline: 0.25rem;
+          padding-block: 0.2rem;
+          padding-inline: 0.2rem;
         `;
     }
     case "S": {
@@ -1793,6 +1793,30 @@ const LinkWrapper$1 = styled(BaseLinkImpl)`
 
   ${focus};
 `;
+const getBackgroundColorHover = (variant2) => {
+  switch (variant2) {
+    case "danger":
+      return "danger100";
+    default:
+      return "primary100";
+  }
+};
+const getTextColor = (variant2, disabled) => {
+  switch (variant2) {
+    case "danger":
+      return disabled ? "danger500" : "danger700";
+    default:
+      return disabled ? "neutral500" : "neutral800";
+  }
+};
+const getIconColor = (variant2, disabled) => {
+  switch (variant2) {
+    case "danger":
+      return disabled ? "danger500" : "danger700";
+    default:
+      return disabled ? "neutral300" : "neutral500";
+  }
+};
 const MenuRoot = DropdownMenu.Root;
 const MenuTrigger = React.forwardRef(
   ({ label, endIcon = /* @__PURE__ */ jsx(CaretDown, { width: "1.2rem", height: "1.2rem", "aria-hidden": true }), tag = Button, icon, ...rest }, ref) => {
@@ -1859,35 +1883,46 @@ const DropdownMenuContent = styled(DropdownMenu.Content)`
     }
   }
 `;
-const MenuItem$1 = ({ onSelect, disabled = false, isLink, startIcon, endIcon, isExternal, ...props }) => {
+const MenuItem$1 = ({
+  onSelect,
+  disabled = false,
+  isLink,
+  startIcon,
+  endIcon,
+  isExternal,
+  variant: variant2 = "default",
+  ...props
+}) => {
   return /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, onSelect, disabled, children: isLink || isExternal ? /* @__PURE__ */ jsx(
     OptionLink,
     {
-      color: "neutral800",
+      color: getTextColor(variant2, disabled),
       startIcon,
       endIcon,
       ...props,
       isExternal: isExternal ?? false,
-      children: /* @__PURE__ */ jsx(Typography, { children: props.children })
+      $variant: variant2,
+      children: props.children
     }
   ) : /* @__PURE__ */ jsxs(
     OptionButton,
     {
       cursor: "pointer",
-      color: "neutral800",
+      color: getTextColor(variant2, disabled),
       background: "transparent",
       borderStyle: "none",
       gap: 2,
+      $variant: variant2,
       ...props,
       children: [
-        startIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", "aria-hidden": true, children: startIcon }),
+        startIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", color: getIconColor(variant2, disabled), "aria-hidden": true, children: startIcon }),
         /* @__PURE__ */ jsx(Typography, { grow: 1, children: props.children }),
-        endIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", "aria-hidden": true, children: endIcon })
+        endIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", color: getIconColor(variant2, disabled), "aria-hidden": true, children: endIcon })
       ]
     }
   ) });
 };
-const getOptionStyle = ({ theme }) => css`
+const getOptionStyle = ({ theme, $variant }) => css`
   text-align: left;
   width: 100%;
   border-radius: ${theme.borderRadius};
@@ -1895,11 +1930,10 @@ const getOptionStyle = ({ theme }) => css`
 
   &[aria-disabled='true'] {
     cursor: not-allowed;
-    color: ${theme.colors.neutral500};
   }
 
   &[data-highlighted] {
-    background-color: ${theme.colors.primary100};
+    background-color: ${theme.colors[getBackgroundColorHover($variant)]};
   }
 
   &:focus-visible {
@@ -1911,7 +1945,7 @@ const getOptionStyle = ({ theme }) => css`
   }
 `;
 const OptionButton = styled(Flex)`
-  ${getOptionStyle}
+  ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}
 `;
 const OptionLink = styled(Link)`
   /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
@@ -1928,7 +1962,7 @@ const OptionLink = styled(Link)`
     fill: currentColor;
   }
 
-  ${getOptionStyle}
+  ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}
 `;
 const StyledSeparator = styled(Box)`
   /* Negative horizontal margin to compensate Menu.Content's padding */
@@ -2178,8 +2212,8 @@ const CheckboxRoot = styled(Checkbox.Root)`
   // this ensures the checkbox is always a square even in flex-containers.
   flex: 0 0 2rem;
 
-  &[data-state='checked'],
-  &[data-state='indeterminate'] {
+  &[data-state='checked']:not([data-disabled]),
+  &[data-state='indeterminate']:not([data-disabled]) {
     border: 1px solid ${(props) => props.theme.colors.primary600};
     background-color: ${(props) => props.theme.colors.primary600};
   }
@@ -3276,6 +3310,8 @@ const Content$5 = styled(Combobox$1.Content)`
 const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   && {
     border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
     background: ${({ theme }) => theme.colors.neutral0};
     cursor: pointer;
     padding: ${({ theme }) => theme.spaces[1]};
@@ -3289,14 +3325,10 @@ const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   }
   &&[data-disabled] {
     color: ${({ theme }) => theme.colors.neutral600};
-    background: ${({ theme }) => theme.colors.neutral150};
     cursor: not-allowed;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
   }
-  &&[data-disabled]:hover {
-    background: ${({ theme }) => theme.colors.neutral150};
-    color: ${({ theme }) => theme.colors.neutral600};
+  &&[data-disabled] svg {
+    fill: ${({ theme }) => theme.colors.neutral300};
   }
   && > div {
     padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
@@ -3304,9 +3336,10 @@ const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   && > div:hover,
   &&[data-highlighted] > div {
     background-color: ${({ theme }) => theme.colors.primary100};
+    border-radius: ${({ theme }) => theme.borderRadius};
   }
-  &&[data-disabled] > div:hover {
-    background: ${({ theme }) => theme.colors.neutral150};
+  &&[data-disabled] > div {
+    background-color: inherit;
   }
 `;
 const ScrollAreaCombobox = styled(ScrollAreaImpl$1)`
@@ -3344,22 +3377,20 @@ const OptionBox = styled.div`
     font-weight: bold;
   }
 `;
+const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
 const Root$5 = AlertDialog.Root;
 const Trigger$4 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(AlertDialog.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
 const Content$4 = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Overlay$1, {}),
-    /* @__PURE__ */ jsx(ContentImpl$1, { ref: forwardedRef, ...props })
-  ] });
+  return /* @__PURE__ */ jsx(AlertDialog.Portal, { children: /* @__PURE__ */ jsx(Overlay$1, { children: /* @__PURE__ */ jsx(ContentImpl$1, { ref: forwardedRef, ...props }) }) });
 });
 const Overlay$1 = styled(AlertDialog.Overlay)`
-  background-color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
   position: fixed;
   inset: 0;
   z-index: ${(props) => props.theme.zIndices.overlay};
-  opacity: 0.2;
+  will-change: opacity;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: ${ANIMATIONS.overlayFadeIn} ${(props) => props.theme.motion.timings["200"]}
@@ -3708,18 +3739,14 @@ const SelectTrigger = React.forwardRef(
           ] }),
           /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 3, children: [
             onClear ? /* @__PURE__ */ jsx(
-              IconBox$1,
+              IconButton,
               {
-                tag: "button",
-                hasRadius: true,
-                background: "transparent",
-                role: "button",
-                tabIndex: 0,
+                size: "XS",
+                variant: "ghost",
                 onClick: handleClearClick,
                 "aria-disabled": disabled,
                 "aria-label": clearLabel,
-                title: clearLabel,
-                cursor: "pointer",
+                label: clearLabel,
                 children: /* @__PURE__ */ jsx(Cross, {})
               }
             ) : null,
@@ -3730,19 +3757,6 @@ const SelectTrigger = React.forwardRef(
     ) });
   }
 );
-const IconBox$1 = styled(Box)`
-  border: none;
-  display: flex;
-
-  svg {
-    height: 1.1rem;
-    width: 1.1rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
 const StyledTrigger = styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   ${(props) => {
@@ -3785,6 +3799,7 @@ const ValueType = styled(Typography)`
   flex: 1;
   font-size: 1.4rem;
   line-height: 2.2rem;
+  min-height: 2.2rem;
 `;
 const StyledValue = styled(Select.Value)`
   display: flex;
@@ -3853,12 +3868,6 @@ const StyledSelectItem = styled(Select.Item)`
     background-color: ${({ theme }) => theme.colors.primary100};
     cursor: pointer;
   }
-
-  &[data-state='checked'] {
-    font-weight: bold;
-    color: ${({ theme }) => theme.colors.primary600};
-    font-weight: bold;
-  }
 `;
 const Root$4 = Select.Root;
 const Trigger$3 = SelectTrigger;
@@ -5239,7 +5248,6 @@ const SkipToContent = ({ children }) => {
     }
   );
 };
-const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, "0")}`;
 const Root$3 = Dialog$1.Root;
 const Trigger$2 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
@@ -5619,6 +5627,7 @@ const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxs(Box, { ...props, c
   /* @__PURE__ */ jsx(Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "…" })
 ] });
 const Root$2 = Popover$1.Root;
+const Anchor = Popover$1.Anchor;
 const Trigger$1 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
@@ -5681,6 +5690,7 @@ const PopoverScrollArea = styled(ScrollAreaImpl$1)`
 `;
 const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  Anchor,
   Content: Content$1,
   Root: Root$2,
   ScrollArea: ScrollAreaImpl,