@strapi/design-system 2.0.0-rc.10 → 2.0.0-rc.11

package/dist/index.mjs

@@ -533,38 +533,43 @@ const AccordionRoot = styled(RadixAccordion.Root)`
 `;
 const Item$5 = React.forwardRef((props, forwardedRef) => {
   const { size } = useAccordion("Item");
-  return /* @__PURE__ */ jsx(AccordionItem, { $size: size, ref: forwardedRef, ...props });
+  return /* @__PURE__ */ jsx(AccordionItem, { $size: size, "data-size": size, ref: forwardedRef, ...props });
 });
 const AccordionItem = styled(RadixAccordion.Item)`
   overflow: hidden;
+  margin: 1px 0;
 
   &:first-child {
     border-top-left-radius: 0.3rem;
     border-top-right-radius: 0.3rem;
+    margin-top: 0;
   }
 
   &:last-child {
     border-bottom-left-radius: 0.3rem;
     border-bottom-right-radius: 0.3rem;
+    margin-bottom: 0;
   }
 
-  & + & {
-    border-top: ${(props) => props.$size === "S" ? `solid 1px ${props.theme.colors.neutral200}` : "unset"};
+  &[data-size='S'] {
+    & + & {
+      border-top: solid 1px ${(props) => props.theme.colors.neutral200};
+    }
   }
 
   &[data-state='open'] {
-    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
   }
 
-  &:hover {
-    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+  &:not([data-disabled]):hover {
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
   }
 
   /* This applies our desired focus effect correctly. */
   &:focus-within {
     position: relative;
     z-index: 1;
-    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary600};
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
   }
 
   @media (prefers-reduced-motion: no-preference) {
@@ -578,7 +583,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, children: [
-        Icon ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null,
+        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null,
         /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, children: [
           /* @__PURE__ */ jsx(
             Typography,
@@ -599,6 +604,7 @@ const Trigger$7 = React.forwardRef(
 );
 const IconBox$4 = styled(Box)`
   color: ${(props) => props.theme.colors.neutral500};
+  display: flex;
 
   @media (prefers-reduced-motion: no-preference) {
     transition: ${(props) => props.theme.transitions.color};
@@ -2276,8 +2282,8 @@ const Carousel = React.forwardRef(
           position: "relative",
           children: [
             childrenArray && childrenArray.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onPrevious, $area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsx(ChevronLeft, { width: "6px", height: "10px", fill: "neutral600" }) }) }),
-              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onNext, $area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsx(ChevronRight, { width: "6px", height: "10px", fill: "neutral600" }) }) })
+              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onPrevious, $area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsx(ChevronLeft, { width: "1.6rem", height: "1.6rem", fill: "neutral600" }) }) }),
+              /* @__PURE__ */ jsx(CarouselAction, { tag: "button", onClick: onNext, $area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsx(ChevronRight, { width: "1.6rem", height: "1.6rem", fill: "neutral600" }) }) })
             ] }),
             /* @__PURE__ */ jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }),
             actions
@@ -8279,6 +8285,7 @@ const CarouselActions = ({ horizontal = true, ...props }) => /* @__PURE__ */ jsx
     position: "absolute",
     width: "100%",
     bottom: 1,
+    gap: 1,
     ...props
   }
 );
@@ -9300,8 +9307,8 @@ const SingleSelect = React.forwardRef(
 const SingleSelectOption = React.forwardRef(
   ({ value, startIcon, children, ...restProps }, ref) => {
     return /* @__PURE__ */ jsxs(Item$2, { ref, value: value.toString(), ...restProps, children: [
-      startIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, children: startIcon }),
-      /* @__PURE__ */ jsx(Typography, { lineHeight: "20px", children: /* @__PURE__ */ jsx(ItemText, { children }) })
+      startIcon && /* @__PURE__ */ jsx(Flex, { tag: "span", "aria-hidden": true, children: startIcon }),
+      /* @__PURE__ */ jsx(Typography, { lineHeight: "20px", width: "100%", children: /* @__PURE__ */ jsx(ItemText, { children }) })
     ] });
   }
 );