@strapi/design-system 2.0.0-rc.10 → 2.0.0-rc.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/CarouselInput/CarouselActions.d.ts.map +1 -1
- package/dist/components/Select/SingleSelect.d.ts.map +1 -1
- package/dist/index.js +19 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +19 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,cAAc,MAAM,2BAA2B,CAAC;AAM5D,OAAO,EAAuB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvE,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AACtB,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AAMvC,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAID,KAAK,OAAO,GAAG,cAAc,CAAC;AAE9B,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAEvF,QAAA,MAAM,IAAI,kJAMR,CAAC;AAqBH,KAAK,WAAW,GAAG,cAAc,CAAC;AAElC,UAAU,SAAU,SAAQ,cAAc,CAAC,kBAAkB;CAAG;AAEhE,QAAA,MAAM,IAAI,kFAIR,CAAC;
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,cAAc,MAAM,2BAA2B,CAAC;AAM5D,OAAO,EAAuB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvE,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AACtB,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AAMvC,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ;AAID,KAAK,OAAO,GAAG,cAAc,CAAC;AAE9B,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAEvF,QAAA,MAAM,IAAI,kJAMR,CAAC;AAqBH,KAAK,WAAW,GAAG,cAAc,CAAC;AAElC,UAAU,SAAU,SAAQ,cAAc,CAAC,kBAAkB;CAAG;AAEhE,QAAA,MAAM,IAAI,kFAIR,CAAC;AAiDH,KAAK,cAAc,GAAG,iBAAiB,CAAC;AAExC,UAAU,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,SAAS,CAAC;IAClF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CAC1B;AAED,QAAA,MAAM,OAAO,wFAqCZ,CAAC;AA+DF,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC,UAAU,YAAa,SAAQ,SAAS,CAAC,MAAM,CAAC;CAAG;AAEnD,QAAA,MAAM,OAAO,mGAIX,CAAC;AAyBH,KAAK,aAAa,GAAG,kBAAkB,CAAC;AAExC,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,SAAS,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,wFAEV,CAAC;AA4CH,KAAK,cAAc,GAAG,cAAc,CAAC;AAErC,UAAU,YAAa,SAAQ,cAAc,CAAC,qBAAqB;CAAG;AAEtE,QAAA,MAAM,OAAO,qFAEX,CAAC;AAoCH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACzD,YAAY,EACV,YAAY,EACZ,OAAO,EACP,KAAK,EACL,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,OAAO,GACR,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselActions.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselInput/CarouselActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,6BAAqC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"CarouselActions.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselInput/CarouselActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,6BAAqC,oBAAoB,4CAWpF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SingleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SingleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,KAAK,6BAA6B,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAC/E,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,kBAAkB,CAAC,GAClD,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,CAAC,GAC5G,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG;IAC5C;;OAEG;IACH,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,6BAA6B,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY;IAbrB;;OAEG;8BACuB,MAAM,GAAG,MAAM,GAAG,MAAM;wBAC/B,MAAM,GAAG,MAAM,KAAK,IAAI;0BACtB,yBAAyB,KAAK,IAAI;;;;;wCAuI1D,CAAC;AAMF,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC;IACnF,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,gGAgB9B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -565,38 +565,43 @@ const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root)`
|
|
|
565
565
|
`;
|
|
566
566
|
const Item$5 = React__namespace.forwardRef((props, forwardedRef) => {
|
|
567
567
|
const { size } = useAccordion("Item");
|
|
568
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AccordionItem, { $size: size, ref: forwardedRef, ...props });
|
|
568
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AccordionItem, { $size: size, "data-size": size, ref: forwardedRef, ...props });
|
|
569
569
|
});
|
|
570
570
|
const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item)`
|
|
571
571
|
overflow: hidden;
|
|
572
|
+
margin: 1px 0;
|
|
572
573
|
|
|
573
574
|
&:first-child {
|
|
574
575
|
border-top-left-radius: 0.3rem;
|
|
575
576
|
border-top-right-radius: 0.3rem;
|
|
577
|
+
margin-top: 0;
|
|
576
578
|
}
|
|
577
579
|
|
|
578
580
|
&:last-child {
|
|
579
581
|
border-bottom-left-radius: 0.3rem;
|
|
580
582
|
border-bottom-right-radius: 0.3rem;
|
|
583
|
+
margin-bottom: 0;
|
|
581
584
|
}
|
|
582
585
|
|
|
583
|
-
&
|
|
584
|
-
|
|
586
|
+
&[data-size='S'] {
|
|
587
|
+
& + & {
|
|
588
|
+
border-top: solid 1px ${(props) => props.theme.colors.neutral200};
|
|
589
|
+
}
|
|
585
590
|
}
|
|
586
591
|
|
|
587
592
|
&[data-state='open'] {
|
|
588
|
-
box-shadow: 0 0 0
|
|
593
|
+
box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
|
|
589
594
|
}
|
|
590
595
|
|
|
591
|
-
&:hover {
|
|
592
|
-
box-shadow: 0 0 0
|
|
596
|
+
&:not([data-disabled]):hover {
|
|
597
|
+
box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
|
|
593
598
|
}
|
|
594
599
|
|
|
595
600
|
/* This applies our desired focus effect correctly. */
|
|
596
601
|
&:focus-within {
|
|
597
602
|
position: relative;
|
|
598
603
|
z-index: 1;
|
|
599
|
-
box-shadow: 0 0 0
|
|
604
|
+
box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary600};
|
|
600
605
|
}
|
|
601
606
|
|
|
602
607
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -610,7 +615,7 @@ const Trigger$7 = React__namespace.forwardRef(
|
|
|
610
615
|
return /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $caretPosition: caretPosition, $size: size, ref: forwardedRef, ...restProps, children: [
|
|
611
616
|
caretPosition === "left" ? /* @__PURE__ */ jsxRuntime.jsx(TriggerIcon, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: size === "S" ? "1.2rem" : "1.6rem", height: size === "S" ? "1.2rem" : "1.6rem" }) }) : null,
|
|
612
617
|
/* @__PURE__ */ jsxRuntime.jsxs(Flex, { tag: "span", gap: 2, children: [
|
|
613
|
-
Icon ? /* @__PURE__ */ jsxRuntime.jsx(IconBox$4, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) : null,
|
|
618
|
+
Icon && size === "S" ? /* @__PURE__ */ jsxRuntime.jsx(IconBox$4, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) : null,
|
|
614
619
|
/* @__PURE__ */ jsxRuntime.jsxs(Flex, { alignItems: "flex-start", direction: "column", tag: "span", ref: forwardedRef, children: [
|
|
615
620
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
616
621
|
Typography,
|
|
@@ -631,6 +636,7 @@ const Trigger$7 = React__namespace.forwardRef(
|
|
|
631
636
|
);
|
|
632
637
|
const IconBox$4 = styledComponents.styled(Box)`
|
|
633
638
|
color: ${(props) => props.theme.colors.neutral500};
|
|
639
|
+
display: flex;
|
|
634
640
|
|
|
635
641
|
@media (prefers-reduced-motion: no-preference) {
|
|
636
642
|
transition: ${(props) => props.theme.transitions.color};
|
|
@@ -2308,8 +2314,8 @@ const Carousel = React__namespace.forwardRef(
|
|
|
2308
2314
|
position: "relative",
|
|
2309
2315
|
children: [
|
|
2310
2316
|
childrenArray && childrenArray.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2311
|
-
/* @__PURE__ */ jsxRuntime.jsx(CarouselAction, { tag: "button", onClick: onPrevious, $area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeft, { width: "
|
|
2312
|
-
/* @__PURE__ */ jsxRuntime.jsx(CarouselAction, { tag: "button", onClick: onNext, $area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, { width: "
|
|
2317
|
+
/* @__PURE__ */ jsxRuntime.jsx(CarouselAction, { tag: "button", onClick: onPrevious, $area: "startAction", ref: prevActionRef, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: previousLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeft, { width: "1.6rem", height: "1.6rem", fill: "neutral600" }) }) }),
|
|
2318
|
+
/* @__PURE__ */ jsxRuntime.jsx(CarouselAction, { tag: "button", onClick: onNext, $area: "endAction", ref: nextActionRef, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon, { label: nextLabel, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, { width: "1.6rem", height: "1.6rem", fill: "neutral600" }) }) })
|
|
2313
2319
|
] }),
|
|
2314
2320
|
/* @__PURE__ */ jsxRuntime.jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }),
|
|
2315
2321
|
actions
|
|
@@ -8311,6 +8317,7 @@ const CarouselActions = ({ horizontal = true, ...props }) => /* @__PURE__ */ jsx
|
|
|
8311
8317
|
position: "absolute",
|
|
8312
8318
|
width: "100%",
|
|
8313
8319
|
bottom: 1,
|
|
8320
|
+
gap: 1,
|
|
8314
8321
|
...props
|
|
8315
8322
|
}
|
|
8316
8323
|
);
|
|
@@ -9332,8 +9339,8 @@ const SingleSelect = React__namespace.forwardRef(
|
|
|
9332
9339
|
const SingleSelectOption = React__namespace.forwardRef(
|
|
9333
9340
|
({ value, startIcon, children, ...restProps }, ref) => {
|
|
9334
9341
|
return /* @__PURE__ */ jsxRuntime.jsxs(Item$2, { ref, value: value.toString(), ...restProps, children: [
|
|
9335
|
-
startIcon && /* @__PURE__ */ jsxRuntime.jsx(
|
|
9336
|
-
/* @__PURE__ */ jsxRuntime.jsx(Typography, { lineHeight: "20px", children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
|
|
9342
|
+
startIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { tag: "span", "aria-hidden": true, children: startIcon }),
|
|
9343
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography, { lineHeight: "20px", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }) })
|
|
9337
9344
|
] });
|
|
9338
9345
|
}
|
|
9339
9346
|
);
|