@strapi/design-system 2.0.0-rc.24 → 2.0.0-rc.26

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { DateFormatter, getLocalTimeZone, today, minDate, maxDate, startOfMonth,
 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, useTheme, createGlobalStyle, ThemeProvider } from "styled-components";
+import styled$1, { styled, css, keyframes, useTheme, createGlobalStyle, ThemeProvider } from "styled-components";
 import * as DismissibleLayerPrimitive from "@radix-ui/react-dismissable-layer";
 import { useCallbackRef as useCallbackRef$1, Combobox as Combobox$1, Select, composeEventHandlers, usePrev } from "@strapi/ui-primitives";
 import { composeEventHandlers as composeEventHandlers2, useCallbackRef as useCallbackRef2, useCollator, useFilter } from "@strapi/ui-primitives";
@@ -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};
   }
@@ -2714,8 +2748,8 @@ const InputElement = styled.input`
   width: 100%;
   background: inherit;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
     opacity: 1;
   }
 
@@ -3221,6 +3255,11 @@ const TextInput$1 = styled(Combobox$1.TextInput)`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
@@ -3339,22 +3378,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"]}
@@ -3703,18 +3740,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,
@@ -3725,19 +3758,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) => {
@@ -3780,6 +3800,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;
@@ -3848,12 +3869,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;
@@ -3980,7 +3995,7 @@ const SingleSelectOption = React.forwardRef(
 const DEFAULT_PAST_RANGE = 200;
 const DEFAULT_FUTURE_RANGE = 15;
 const [DatePickerProvider, useDatePickerContext] = createContext("DatePicker");
-const DatePicker$1 = React.forwardRef(
+const DatePicker = React.forwardRef(
   ({
     /**
      * DatePickerCalendar props
@@ -4109,6 +4124,7 @@ const DatePicker$1 = React.forwardRef(
         onTextValueChange: setTextValue,
         onTriggerChange: setTrigger,
         onValueChange: setValue,
+        onClear,
         required,
         textInput,
         textValue,
@@ -4186,6 +4202,7 @@ const DatePickerTrigger = React.forwardRef(
             ref: composedRefs,
             $hasError: hasError,
             $size: size,
+            $hasOnClear: Boolean(context.onClear),
             ...restProps,
             hasRadius: true,
             gap: 3,
@@ -4215,6 +4232,7 @@ const DatePickerTrigger = React.forwardRef(
   }
 );
 const TriggerElement = styled(Flex)`
+  min-width: ${({ $hasOnClear }) => $hasOnClear ? "160px" : "130px"};
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
   ${(props) => {
   switch (props.$size) {
@@ -4439,6 +4457,11 @@ const Input$1 = styled.input`
     outline: none;
   }
 
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
+    opacity: 1;
+  }
+
   &[aria-disabled='true'] {
     cursor: inherit;
   }
@@ -4754,7 +4777,10 @@ const isNotAlphabeticalCharacter = (str) => {
 function escapeForRegex(str = "") {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-const TimePicker$1 = React.forwardRef(
+const TimePickerCombobox = styled$1(Combobox)`
+  min-width: ${({ onClear }) => onClear ? "160px" : "130px"};
+`;
+const TimePicker = React.forwardRef(
   ({ step = 15, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
     const context = useDesignSystem("TimePicker");
     const [textValue, setTextValue] = React.useState("");
@@ -4820,7 +4846,7 @@ const TimePicker$1 = React.forwardRef(
     const escapedSeparator = escapeForRegex(separator);
     const pattern = `\\d{2}${escapedSeparator}\\d{2}`;
     return /* @__PURE__ */ jsx(
-      Combobox,
+      TimePickerCombobox,
       {
         ...restProps,
         ref: forwardedRef,
@@ -4841,14 +4867,6 @@ const TimePicker$1 = React.forwardRef(
     );
   }
 );
-const DatePicker = styled(DatePicker$1)`
-  flex: 1 1 70%;
-  min-width: 120px;
-`;
-const TimePicker = styled(TimePicker$1)`
-  flex: 1 1 30%;
-  min-width: 140px;
-`;
 const DateTimePicker = React.forwardRef(
   ({
     clearLabel = "clear",
@@ -4917,8 +4935,8 @@ const DateTimePicker = React.forwardRef(
     const composedRefs = useComposedRefs(DatePickerElement2, forwardedRef);
     const { error, id, labelNode } = useField("DateTimePicker");
     const hasError = Boolean(error) || hasErrorProp;
-    return /* @__PURE__ */ jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, children: [
-      /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(Flex, { "aria-labelledby": labelNode ? `${id}-label` : void 0, role: "group", flex: "1", gap: 1, wrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsx(
         DatePicker,
         {
           ...props,
@@ -4933,7 +4951,7 @@ const DateTimePicker = React.forwardRef(
           "aria-label": dateLabel
         }
       ) }),
-      /* @__PURE__ */ jsx(Root$6, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Root$6, { flex: "1", children: /* @__PURE__ */ jsx(
         TimePicker,
         {
           size,
@@ -5236,17 +5254,13 @@ const Trigger$2 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
 const Content$2 = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(Overlay, {}),
-    /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props })
-  ] });
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(ContentImpl, { ref: forwardedRef, ...props }) }) });
 });
 const Overlay = styled(Dialog$1.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) {
@@ -5274,6 +5288,11 @@ const ContentImpl = styled(Dialog$1.Content)`
   box-shadow: ${(props) => props.theme.shadows.popupShadow};
   z-index: ${(props) => props.theme.zIndices.modal};
 
+  > form {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
   @media (prefers-reduced-motion: no-preference) {
     &[data-state='open'] {
       animation-duration: ${(props) => props.theme.motion.timings["200"]};
@@ -5322,7 +5341,7 @@ const Body = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
   return /* @__PURE__ */ jsx(BodyScroll, { ref: forwardedRef, ...restProps, children });
 });
 const BodyScroll = styled(ScrollAreaImpl$1)`
-  padding-inline: ${(props) => props.theme.spaces[8]};
+  padding-inline: ${(props) => props.theme.spaces[7]};
 
   & > div {
     padding-block: ${(props) => props.theme.spaces[8]};
@@ -6045,11 +6064,7 @@ const SearchbarInput = styled(Input$2)`
   height: 16px;
   padding: 0 0 0 8px;
   color: ${({ theme }) => theme.colors.neutral800};
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
-  }
-
+  
   &:hover {
     button {
       cursor: pointer;
@@ -7081,10 +7096,9 @@ const TextareaElement = styled(Box)`
   border: none;
   resize: none;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral600};
     font-size: ${({ theme }) => theme.fontSizes[2]};
-    color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
   }
 
@@ -7435,7 +7449,7 @@ export {
   Crumb,
   CrumbLink,
   CrumbSimpleMenu,
-  DatePicker$1 as DatePicker,
+  DatePicker,
   DateTimePicker,
   DesignSystemProvider,
   Dialog,
@@ -7504,7 +7518,7 @@ export {
   Textarea,
   Th,
   Thead,
-  TimePicker$1 as TimePicker,
+  TimePicker,
   Toggle,
   TooltipImpl as Tooltip,
   Tr,