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

package/dist/index.mjs

@@ -1704,11 +1704,14 @@ const IconButtonWrapper = styled(Flex)`
 }}
   ${getVariantStyle}
   ${(props) => props.$variant === "tertiary" ? css`
-          color: ${props.theme.colors.neutral600};
+          color: ${props.theme.colors.neutral500};
         ` : ""}
 
   &:hover {
     ${getHoverStyle}
+    ${(props) => props.$variant === "tertiary" ? css`
+            color: ${props.theme.colors.neutral600};
+          ` : ""}
   }
 
   &:active {
@@ -1782,24 +1785,19 @@ const LinkWrapper$1 = styled(BaseLinkImpl)`
 `;
 const MenuRoot = DropdownMenu.Root;
 const MenuTrigger = React.forwardRef(
-  ({ label, size, endIcon = /* @__PURE__ */ jsx(CaretDown, { width: "1.2rem", height: "1.2rem", "aria-hidden": true }), tag = Button, icon, ...rest }, ref) => {
+  ({ 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",
-      variant: "ghost",
-      paddingTop: size === "S" ? 1 : 2,
-      paddingBottom: size === "S" ? 1 : 2,
-      paddingLeft: size === "S" ? 3 : 4,
-      paddingRight: size === "S" ? 3 : 4
+      type: "button"
     };
-    return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: tag === IconButton ? /* @__PURE__ */ jsx(IconButton, { label, ...props, children: icon }) : /* @__PURE__ */ jsx(Button, { endIcon, ...props }) });
+    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,
@@ -1810,6 +1808,8 @@ const MenuContent = React.forwardRef(
         shadow: "filterShadow",
         maxHeight: "15rem",
         padding: 1,
+        marginTop: 1,
+        marginBottom: 1,
         alignItems: "flex-start",
         position: "relative",
         overflow: "auto",
@@ -1831,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 }) }) });
 };
@@ -2113,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};
@@ -8009,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",
@@ -8029,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};
@@ -8452,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,
                 {
@@ -8486,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: [
@@ -8575,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;
@@ -8598,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};
       }
     }
   }
@@ -9046,6 +9060,7 @@ const SelectTrigger = React.forwardRef(
 );
 const IconBox$2 = styled(Box)`
   border: none;
+  display: flex;
 
   svg {
     height: 1.1rem;
@@ -9053,7 +9068,7 @@ const IconBox$2 = styled(Box)`
   }
 
   svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const StyledTrigger = styled(Flex)`
@@ -9076,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 */
@@ -9087,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 }) }));
@@ -9119,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};
       }
     }
   }
@@ -9781,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: [
@@ -9828,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",
@@ -9852,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(
@@ -10962,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};
       }
     }
 
@@ -10974,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};
       }
     }
   }
@@ -12054,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)`
@@ -12111,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};