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

package/dist/index.mjs

@@ -578,12 +578,12 @@ const AccordionItem = styled(RadixAccordion.Item)`
   }
 `;
 const Trigger$7 = React.forwardRef(
-  ({ caretPosition = "left", description, icon: Icon, children, ...restProps }, forwardedRef) => {
+  ({ caretPosition = "left", description, icon: Icon, iconProps, children, ...restProps }, forwardedRef) => {
     const { size } = useAccordion("Trigger");
     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 && size === "S" ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null,
+        Icon && size === "S" ? /* @__PURE__ */ jsx(IconBox$4, { children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }) : null,
         /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, children: [
           /* @__PURE__ */ jsx(
             Typography,
@@ -2116,7 +2116,7 @@ const CheckboxEl = React.forwardRef(
       onChange: onCheckedChange
     });
     const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
-    return /* @__PURE__ */ jsx(CheckboxRoot, { ref: composedRefs, checked, onCheckedChange: setChecked, ...props, children: /* @__PURE__ */ jsxs(Checkbox.Indicator, { style: { display: "inline-flex" }, children: [
+    return /* @__PURE__ */ jsx(CheckboxRoot, { ref: composedRefs, checked, onCheckedChange: setChecked, ...props, children: /* @__PURE__ */ jsxs(CheckboxIndicator, { style: { display: "inline-flex", pointerEvents: "auto" }, forceMount: true, children: [
       checked === true ? /* @__PURE__ */ jsx(CheckIcon, { width: "1.6rem", fill: "neutral0" }) : null,
       checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { fill: "neutral0" }) : null
     ] }) });
@@ -2155,10 +2155,16 @@ const CheckboxRoot = styled(Checkbox.Root)`
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
+    z-index: -1;
     min-width: 44px;
     min-height: 44px;
   }
 `;
+const CheckboxIndicator = styled(Checkbox.Indicator)`
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+`;
 const CheckboxImpl = React.forwardRef(({ children, ...restProps }, forwardedRef) => {
   const labelId = useId(restProps.id);
   if (!children) {
@@ -9096,6 +9102,7 @@ const StyledTrigger = styled(Flex)`
         `;
   }
 }}
+  cursor: pointer;
 
   &[aria-disabled='true'] {
     color: ${(props) => props.theme.colors.neutral500};
@@ -9174,6 +9181,7 @@ const itemStyles = css`
   &:focus-visible {
     outline: none;
     background-color: ${({ theme }) => theme.colors.primary100};
+    cursor: pointer;
   }
 `;
 const StyledSelectItem = styled(Select.Item)`
@@ -10775,6 +10783,13 @@ const NumberInput = React.forwardRef(
         formatNumberAndSetInput(value2);
       }
     };
+    const getDecimalPlaces = (step2) => {
+      const stepString = step2.toString();
+      if (!stepString.includes("."))
+        return 0;
+      return stepString.split(".")[1].length;
+    };
+    const decimalPlaces = getDecimalPlaces(step);
     const increment = () => {
       if (!inputValue) {
         formatNumberAndSetInput(step);
@@ -10782,7 +10797,8 @@ const NumberInput = React.forwardRef(
       }
       const parsedValue = numberParserRef.current.parse(inputValue);
       const newValue = isNaN(parsedValue) ? step : parsedValue + step;
-      formatNumberAndSetInput(numberFormaterRef.current.format(newValue));
+      const roundedValue = parseFloat(newValue.toFixed(decimalPlaces));
+      formatNumberAndSetInput(numberFormaterRef.current.format(roundedValue));
     };
     const decrement = () => {
       if (!inputValue) {
@@ -10791,7 +10807,8 @@ const NumberInput = React.forwardRef(
       }
       const parsedValue = numberParserRef.current.parse(inputValue);
       const newValue = isNaN(parsedValue) ? -step : parsedValue - step;
-      formatNumberAndSetInput(numberFormaterRef.current.format(newValue));
+      const roundedValue = parseFloat(newValue.toFixed(decimalPlaces));
+      formatNumberAndSetInput(numberFormaterRef.current.format(roundedValue));
     };
     const handleKeyDown = (e) => {
       if (disabled)
@@ -11679,13 +11696,20 @@ const MultiSelectNested = ({ options, ...props }) => {
 const NestedOption = styled(MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
 `;
-const Status = ({ variant: variant2 = "primary", showBullet = true, size = "M", children, ...props }) => {
+const getPadding = (size) => {
+  if (size === "XS") {
+    return { paddingX: "0.6rem", paddingY: "0.2rem" };
+  }
+  if (size === "S") {
+    return { paddingX: 2, paddingY: 1 };
+  }
+  return { paddingX: 5, paddingY: 4 };
+};
+const Status = ({ variant: variant2 = "primary", size = "M", children, ...props }) => {
   const backgroundColor = `${variant2}100`;
   const borderColor = `${variant2}200`;
-  const bulletColor = `${variant2}600`;
   const textColor = `${variant2}600`;
-  const paddingX = size === "S" ? 2 : 5;
-  const paddingY = size === "S" ? 1 : 4;
+  const { paddingX, paddingY } = getPadding(size);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -11698,10 +11722,7 @@ const Status = ({ variant: variant2 = "primary", showBullet = true, size = "M",
       paddingLeft: paddingX,
       paddingRight: paddingX,
       ...props,
-      children: showBullet ? /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
-        /* @__PURE__ */ jsx(Box, { background: bulletColor, width: "0.6rem", height: "0.6rem", borderRadius: "50%" }),
-        children
-      ] }) : children
+      children
     }
   );
 };