@strapi/design-system 1.5.0 → 1.6.0

package/dist/Card/CardAction.js

@@ -1,14 +1,20 @@
-import s from "styled-components";
-import { Stack as r } from "../Stack/Stack.js";
-const e = s(r).attrs({
+import e from "styled-components";
+import { Stack as n } from "../Stack/Stack.js";
+const i = e(n).attrs({
   horizontal: !0,
   spacing: 2
 })`
   position: absolute;
   top: ${({ theme: t }) => t.spaces[3]};
-  right: ${({ position: t, theme: o }) => t === "end" ? o.spaces[3] : void 0};
-  left: ${({ position: t, theme: o }) => t === "start" ? o.spaces[3] : void 0};
+  right: ${({ position: t, theme: r }) => {
+  if (t === "end")
+    return r.spaces[3];
+}};
+  left: ${({ position: t, theme: r }) => {
+  if (t === "start")
+    return r.spaces[3];
+}};
 `;
 export {
-  e as CardAction
+  i as CardAction
 };

package/dist/Card/CardAsset.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),l=require("styled-components"),c=require("prop-types"),u=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(n),i=a(l),o=a(c),p=i.default.img`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("styled-components"),o=require("../Flex/Flex.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=n(a),d=i.default.img`
   // inline flows is based on typography and displays an extra white space below the image
   // switch to block is required in order to make the img stick the bottom of the container
   // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
@@ -7,13 +7,13 @@
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
-`,f={S:88,M:164},h=i.default.div`
+`,c={S:88,M:164},l=i.default.div`
   display: flex;
   justify-content: center;
-  height: ${({size:e})=>f[e]/16}rem;
+  height: ${({size:e})=>c[e]/16}rem;
   width: 100%;
   background: repeating-conic-gradient(${({theme:e})=>e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
     20px;
   border-top-left-radius: ${({theme:e})=>e.borderRadius};
   border-top-right-radius: ${({theme:e})=>e.borderRadius};
-`,r=({size:e,children:s,...d})=>t.default.createElement(h,{size:e},s?t.default.createElement(u.Flex,null,s):t.default.createElement(p,{...d,"aria-hidden":!0}));r.defaultProps={children:void 0,size:"M"};r.propTypes={children:o.default.node,size:o.default.oneOf(["S","M"])};exports.CardAsset=r;
+`,u=({size:e="M",children:s,...r})=>t.jsx(l,{size:e,children:s?t.jsx(o.Flex,{children:s}):t.jsx(d,{...r,"aria-hidden":!0})});exports.CardAsset=u;

package/dist/Card/CardAsset.js

@@ -1,8 +1,7 @@
-import t from "react";
-import o from "styled-components";
-import i from "prop-types";
-import { Flex as n } from "../Flex/Flex.js";
-const d = o.img`
+import { jsx as t } from "react/jsx-runtime";
+import r from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+const a = r.img`
   // inline flows is based on typography and displays an extra white space below the image
   // switch to block is required in order to make the img stick the bottom of the container
   // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
@@ -11,32 +10,39 @@ const d = o.img`
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
-`, p = {
+`, d = {
   S: 88,
   M: 164
-}, c = o.div`
+}, n = r.div`
   display: flex;
   justify-content: center;
-  height: ${({ size: e }) => p[e] / 16}rem;
+  height: ${({
+  size: e
+}) => d[e] / 16}rem;
   width: 100%;
-  background: repeating-conic-gradient(${({ theme: e }) => e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
+  background: repeating-conic-gradient(${({
+  theme: e
+}) => e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
     20px;
-  border-top-left-radius: ${({ theme: e }) => e.borderRadius};
-  border-top-right-radius: ${({ theme: e }) => e.borderRadius};
-`, a = ({ size: e, children: r, ...s }) => /* @__PURE__ */ t.createElement(c, {
-  size: e
-}, r ? /* @__PURE__ */ t.createElement(n, null, r) : /* @__PURE__ */ t.createElement(d, {
-  ...s,
-  "aria-hidden": !0
-}));
-a.defaultProps = {
-  children: void 0,
-  size: "M"
-};
-a.propTypes = {
-  children: i.node,
-  size: i.oneOf(["S", "M"])
-};
+  border-top-left-radius: ${({
+  theme: e
+}) => e.borderRadius};
+  border-top-right-radius: ${({
+  theme: e
+}) => e.borderRadius};
+`, m = ({
+  size: e = "M",
+  children: i,
+  ...o
+}) => t(n, {
+  size: e,
+  children: i ? t(s, {
+    children: i
+  }) : t(a, {
+    ...o,
+    "aria-hidden": !0
+  })
+});
 export {
-  a as CardAsset
+  m as CardAsset
 };

package/dist/Card/CardBadge.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),r=require("styled-components"),n=require("../Badge/Badge.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(l),d=a(r),o=d.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("styled-components"),d=require("../Badge/Badge.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=r(s),n=a.default.div`
   margin-left: auto;
   flex-shrink: 0;
-`,s=d.default(n.Badge)`
+`,o=a.default(d.Badge)`
   margin-left: ${({theme:e})=>e.spaces[1]};
-`,c=e=>t.default.createElement(o,null,t.default.createElement(s,{...e}));exports.CardBadge=c;
+`,i=e=>t.jsx(n,{children:t.jsx(o,{...e})});exports.CardBadge=i;

package/dist/Card/CardBadge.js

@@ -1,14 +1,18 @@
-import t from "react";
-import r from "styled-components";
-import { Badge as a } from "../Badge/Badge.js";
-const o = r.div`
+import { jsx as o } from "react/jsx-runtime";
+import e from "styled-components";
+import { Badge as t } from "../Badge/Badge.js";
+const a = e.div`
   margin-left: auto;
   flex-shrink: 0;
-`, m = r(a)`
-  margin-left: ${({ theme: e }) => e.spaces[1]};
-`, l = (e) => /* @__PURE__ */ t.createElement(o, null, /* @__PURE__ */ t.createElement(m, {
-  ...e
-}));
+`, i = e(t)`
+  margin-left: ${({
+  theme: r
+}) => r.spaces[1]};
+`, n = (r) => o(a, {
+  children: o(i, {
+    ...r
+  })
+});
 export {
-  l as CardBadge
+  n as CardBadge
 };

package/dist/Card/CardBody.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),o=require("../Flex/Flex.cjs"),d=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),l=e=>t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:2,paddingBottom:2},t.default.createElement(o.Flex,{...e,alignItems:"flex-start"}));exports.CardBody=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../Flex/Flex.cjs"),o=require("../Box/Box.cjs"),d=t=>e.jsx(o.Box,{paddingLeft:3,paddingRight:3,paddingTop:2,paddingBottom:2,children:e.jsx(r.Flex,{...t,alignItems:"flex-start"})});exports.CardBody=d;

package/dist/Card/CardBody.js

@@ -1,15 +1,16 @@
-import t from "react";
-import { Flex as o } from "../Flex/Flex.js";
-import { Box as r } from "../Box/Box.js";
-const i = (e) => /* @__PURE__ */ t.createElement(r, {
+import { jsx as o } from "react/jsx-runtime";
+import { Flex as r } from "../Flex/Flex.js";
+import { Box as d } from "../Box/Box.js";
+const n = (t) => o(d, {
   paddingLeft: 3,
   paddingRight: 3,
   paddingTop: 2,
-  paddingBottom: 2
-}, /* @__PURE__ */ t.createElement(o, {
-  ...e,
-  alignItems: "flex-start"
-}));
+  paddingBottom: 2,
+  children: o(r, {
+    ...t,
+    alignItems: "flex-start"
+  })
+});
 export {
-  i as CardBody
+  n as CardBody
 };

package/dist/Card/CardCheckbox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),o=require("./CardAction.cjs"),r=require("../BaseCheckbox/BaseCheckbox.cjs"),s=require("./CardContext.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(c),d=e=>{const{id:a}=s.useCard();return t.default.createElement(o.CardAction,{position:"start"},t.default.createElement(r.BaseCheckbox,{"aria-labelledby":`${a}-title`,...e}))};exports.CardCheckbox=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../BaseCheckbox/BaseCheckbox.cjs"),s=require("./CardAction.cjs"),c=require("./CardContext.cjs"),a=t=>{const{id:r}=c.useCard();return e.jsx(s.CardAction,{position:"start",children:e.jsx(o.BaseCheckbox,{"aria-labelledby":`${r}-title`,...t})})};exports.CardCheckbox=a;

package/dist/Card/CardCheckbox.js

@@ -1,16 +1,19 @@
-import t from "react";
-import { CardAction as o } from "./CardAction.js";
-import { BaseCheckbox as a } from "../BaseCheckbox/BaseCheckbox.js";
-import { useCard as i } from "./CardContext.js";
-const d = (e) => {
-  const { id: r } = i();
-  return /* @__PURE__ */ t.createElement(o, {
-    position: "start"
-  }, /* @__PURE__ */ t.createElement(a, {
-    "aria-labelledby": `${r}-title`,
-    ...e
-  }));
+import { jsx as r } from "react/jsx-runtime";
+import { BaseCheckbox as i } from "../BaseCheckbox/BaseCheckbox.js";
+import { CardAction as e } from "./CardAction.js";
+import { useCard as a } from "./CardContext.js";
+const n = (o) => {
+  const {
+    id: t
+  } = a();
+  return r(e, {
+    position: "start",
+    children: r(i, {
+      "aria-labelledby": `${t}-title`,
+      ...o
+    })
+  });
 };
 export {
-  d as CardCheckbox
+  n as CardCheckbox
 };

package/dist/Card/CardContent.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=require("prop-types"),a=require("styled-components"),c=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(n),u=t(s),d=t(a),p=d.default(c.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("styled-components"),n=require("../Box/Box.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=s(r),a=u.default(n.Box)`
   word-break: break-all;
-`,o=({children:e,...r})=>l.default.createElement(p,{...r},e);o.propTypes={children:u.default.node.isRequired};exports.CardContent=o;
+`,l=({children:e,...t})=>o.jsx(a,{...t,children:e});exports.CardContent=l;

package/dist/Card/CardContent.js

@@ -1,15 +1,15 @@
-import o from "react";
-import t from "prop-types";
-import p from "styled-components";
+import { jsx as t } from "react/jsx-runtime";
+import e from "styled-components";
 import { Box as m } from "../Box/Box.js";
-const a = p(m)`
+const n = e(m)`
   word-break: break-all;
-`, n = ({ children: r, ...e }) => /* @__PURE__ */ o.createElement(a, {
-  ...e
-}, r);
-n.propTypes = {
-  children: t.node.isRequired
-};
+`, l = ({
+  children: r,
+  ...o
+}) => t(n, {
+  ...o,
+  children: r
+});
 export {
-  n as CardContent
+  l as CardContent
 };

package/dist/Card/CardContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),r=()=>e.useContext(t);exports.CardContext=t;exports.useCard=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({id:""}),r=()=>e.useContext(t);exports.CardContext=t;exports.useCard=r;

package/dist/Card/CardContext.js

@@ -1,5 +1,7 @@
 import { createContext as t, useContext as e } from "react";
-const o = t(), n = () => e(o);
+const o = t({
+  id: ""
+}), n = () => e(o);
 export {
   o as CardContext,
   n as useCard

package/dist/Card/CardHeader.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),o=require("styled-components"),a=require("../Flex/Flex.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(r),n=t(o),s=n.default(a.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("styled-components"),o=require("../Flex/Flex.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=s(r),n=l.default(o.Flex)`
   position: relative;
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,c=e=>l.default.createElement(s,{justifyContent:"center",...e});exports.CardHeader=c;
+`,a=e=>t.jsx(n,{justifyContent:"center",...e});exports.CardHeader=a;

package/dist/Card/CardHeader.js

@@ -1,13 +1,15 @@
-import r from "react";
+import { jsx as o } from "react/jsx-runtime";
 import t from "styled-components";
-import { Flex as o } from "../Flex/Flex.js";
-const a = t(o)`
+import { Flex as e } from "../Flex/Flex.js";
+const i = t(e)`
   position: relative;
-  border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, l = (e) => /* @__PURE__ */ r.createElement(a, {
+  border-bottom: 1px solid ${({
+  theme: r
+}) => r.colors.neutral150};
+`, a = (r) => o(i, {
   justifyContent: "center",
-  ...e
+  ...r
 });
 export {
-  l as CardHeader
+  a as CardHeader
 };

package/dist/Card/CardTimer.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),p=require("prop-types"),u=require("styled-components"),c=require("../Box/Box.cjs"),n=require("../Typography/Typography.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=t(s),l=t(p),d=t(u),i=d.default(c.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("styled-components"),a=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(o),u=n.default(a.Box)`
   position: absolute;
   bottom: ${({theme:e})=>e.spaces[1]};
   right: ${({theme:e})=>e.spaces[1]};
-`,o=({children:e,...a})=>r.default.createElement(i,{padding:1,background:"neutral800",color:"neutral0",as:"time",hasRadius:!0,...a},r.default.createElement(n.Typography,{variant:"pi",textColor:"neutral0"},e));o.propTypes={children:l.default.node.isRequired};exports.CardTimer=o;
+`,c=({children:e,...r})=>t.jsx(u,{padding:1,background:"neutral800",color:"neutral0",as:"time",hasRadius:!0,...r,children:t.jsx(s.Typography,{variant:"pi",textColor:"neutral0",children:e})});exports.CardTimer=c;

package/dist/Card/CardTimer.js

@@ -1,26 +1,31 @@
-import e from "react";
-import t from "prop-types";
+import { jsx as o } from "react/jsx-runtime";
 import a from "styled-components";
-import { Box as p } from "../Box/Box.js";
+import { Box as e } from "../Box/Box.js";
 import { Typography as i } from "../Typography/Typography.js";
-const m = a(p)`
+const p = a(e)`
   position: absolute;
-  bottom: ${({ theme: r }) => r.spaces[1]};
-  right: ${({ theme: r }) => r.spaces[1]};
-`, s = ({ children: r, ...o }) => /* @__PURE__ */ e.createElement(m, {
+  bottom: ${({
+  theme: r
+}) => r.spaces[1]};
+  right: ${({
+  theme: r
+}) => r.spaces[1]};
+`, l = ({
+  children: r,
+  ...t
+}) => o(p, {
   padding: 1,
   background: "neutral800",
   color: "neutral0",
   as: "time",
   hasRadius: !0,
-  ...o
-}, /* @__PURE__ */ e.createElement(i, {
-  variant: "pi",
-  textColor: "neutral0"
-}, r));
-s.propTypes = {
-  children: t.node.isRequired
-};
+  ...t,
+  children: o(i, {
+    variant: "pi",
+    textColor: "neutral0",
+    children: r
+  })
+});
 export {
-  s as CardTimer
+  l as CardTimer
 };

package/dist/Card/CardTitle.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),e=require("../Typography/Typography.cjs"),i=require("./CardContext.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=l(o),n=t=>{const{id:a}=i.useCard();return r.default.createElement(e.Typography,{variant:"pi",id:`${a}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},u=t=>r.default.createElement(e.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=u;exports.CardTitle=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../Typography/Typography.cjs"),o=require("./CardContext.cjs"),i=t=>{const{id:a}=o.useCard();return e.jsx(r.Typography,{variant:"pi",id:`${a}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},n=t=>e.jsx(r.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=n;exports.CardTitle=i;

package/dist/Card/CardTitle.js

@@ -1,23 +1,25 @@
-import r from "react";
-import { Typography as e } from "../Typography/Typography.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Typography as o } from "../Typography/Typography.js";
 import { useCard as a } from "./CardContext.js";
-const d = (t) => {
-  const { id: o } = a();
-  return /* @__PURE__ */ r.createElement(e, {
+const l = (t) => {
+  const {
+    id: i
+  } = a();
+  return r(o, {
     variant: "pi",
-    id: `${o}-title`,
+    id: `${i}-title`,
     textColor: "neutral800",
     fontWeight: "bold",
     as: "div",
     ...t
   });
-}, m = (t) => /* @__PURE__ */ r.createElement(e, {
+}, p = (t) => r(o, {
   variant: "pi",
   ...t,
   textColor: "neutral600",
   as: "div"
 });
 export {
-  m as CardSubtitle,
-  d as CardTitle
+  p as CardSubtitle,
+  l as CardTitle
 };

package/dist/CarouselInput/Carousel.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),j=require("prop-types"),A=require("styled-components"),L=require("@strapi/icons/ChevronRight"),k=require("@strapi/icons/ChevronLeft"),g=require("../Icon/Icon.cjs"),l=require("../Box/Box.cjs"),B=require("../Typography/Typography.cjs"),K=require("../Flex/Flex.cjs"),w=require("../Tooltip/Tooltip.cjs"),b=require("../helpers/keyboardKeys.cjs"),n=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},t=n(o),e=n(j),d=n(A),I=n(L),D=n(k),F=d.default(l.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),_=require("prop-types"),k=require("styled-components"),g=require("@strapi/icons"),b=require("../Icon/Icon.cjs"),l=require("../Box/Box.cjs"),B=require("../Typography/Typography.cjs"),K=require("../Flex/Flex.cjs"),w=require("../Tooltip/Tooltip.cjs"),m=require("../helpers/keyboardKeys.cjs"),i=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},t=i(o),e=i(_),d=i(k),L=d.default(l.Box)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
-`,P=d.default(l.Box)`
+`,I=d.default(l.Box)`
   grid-area: slides;
-`,v=d.default.button`
+`,q=d.default.button`
   grid-area: ${({area:r})=>r};
 
   &:focus svg path,
   &:hover svg path {
     fill: ${({theme:r})=>r.colors.neutral900};
   }
-`,s=({actions:r,children:m,label:q,nextLabel:R,onNext:u,onPrevious:c,previousLabel:x,secondaryLabel:i,selectedSlide:C,...T})=>{const f=o.useRef(null),p=o.useRef(null),h=o.Children.toArray(m).map((a,_)=>o.cloneElement(a,{selected:_===C})),E=a=>{switch(a.key){case b.KeyboardKeys.RIGHT:{a.preventDefault(),p.current.focus(),u();break}case b.KeyboardKeys.LEFT:{a.preventDefault(),f.current.focus(),c();break}}},y=h.length>1;return t.default.createElement(l.Box,{...T,onKeyDown:E},t.default.createElement(l.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100"},t.default.createElement(F,{as:"section","aria-roledescription":"carousel","aria-label":q,position:"relative"},y&&t.default.createElement(v,{onClick:c,area:"startAction",ref:f,"aria-label":x,type:"button"},t.default.createElement(g.Icon,{as:D.default,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),y&&t.default.createElement(v,{onClick:u,area:"endAction",ref:p,"aria-label":R,type:"button"},t.default.createElement(g.Icon,{as:I.default,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),t.default.createElement(P,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden"},h),r),i&&t.default.createElement(l.Box,{paddingTop:2,paddingLeft:4,paddingRight:4},t.default.createElement(w.Tooltip,{label:i},t.default.createElement(K.Flex,{justifyContent:"center"},t.default.createElement(B.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0},i))))))};s.defaultProps={actions:void 0,error:void 0,hint:void 0,required:!1,secondaryLabel:void 0};s.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string.isRequired,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.Carousel=s;
+`,s=({actions:r,children:v,label:x,nextLabel:R,onNext:u,onPrevious:c,previousLabel:T,secondaryLabel:n,selectedSlide:C,...E})=>{const f=o.useRef(null),p=o.useRef(null),y=o.Children.toArray(v).map((a,A)=>o.cloneElement(a,{selected:A===C})),j=a=>{switch(a.key){case m.KeyboardKeys.RIGHT:{a.preventDefault(),p.current.focus(),u();break}case m.KeyboardKeys.LEFT:{a.preventDefault(),f.current.focus(),c();break}}},h=y.length>1;return t.default.createElement(l.Box,{...E,onKeyDown:j},t.default.createElement(l.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100"},t.default.createElement(L,{as:"section","aria-roledescription":"carousel","aria-label":x,position:"relative"},h&&t.default.createElement(q,{onClick:c,area:"startAction",ref:f,"aria-label":T,type:"button"},t.default.createElement(b.Icon,{as:g.ChevronLeft,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),h&&t.default.createElement(q,{onClick:u,area:"endAction",ref:p,"aria-label":R,type:"button"},t.default.createElement(b.Icon,{as:g.ChevronRight,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),t.default.createElement(I,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden"},y),r),n&&t.default.createElement(l.Box,{paddingTop:2,paddingLeft:4,paddingRight:4},t.default.createElement(w.Tooltip,{label:n},t.default.createElement(K.Flex,{justifyContent:"center"},t.default.createElement(B.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0},n))))))};s.defaultProps={actions:void 0,error:void 0,hint:void 0,required:!1,secondaryLabel:void 0};s.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string.isRequired,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.Carousel=s;

package/dist/CarouselInput/Carousel.js

@@ -1,8 +1,7 @@
 import r, { useRef as m, Children as T, cloneElement as w } from "react";
 import e from "prop-types";
 import a from "styled-components";
-import k from "@strapi/icons/ChevronRight";
-import L from "@strapi/icons/ChevronLeft";
+import { ChevronLeft as k, ChevronRight as L } from "@strapi/icons";
 import { Icon as f } from "../Icon/Icon.js";
 import { Box as i } from "../Box/Box.js";
 import { Typography as D } from "../Typography/Typography.js";
@@ -34,7 +33,7 @@ const G = a(i)`
   selectedSlide: C,
   ...x
 }) => {
-  const d = m(null), c = m(null), p = T.toArray(b).map(
+  const d = m(null), c = m(null), u = T.toArray(b).map(
     (o, A) => w(o, { selected: A === C })
   ), q = (o) => {
     switch (o.key) {
@@ -47,7 +46,7 @@ const G = a(i)`
         break;
       }
     }
-  }, u = p.length > 1;
+  }, p = u.length > 1;
   return /* @__PURE__ */ r.createElement(i, {
     ...x,
     onKeyDown: q
@@ -61,26 +60,26 @@ const G = a(i)`
     "aria-roledescription": "carousel",
     "aria-label": v,
     position: "relative"
-  }, u && /* @__PURE__ */ r.createElement(g, {
+  }, p && /* @__PURE__ */ r.createElement(g, {
     onClick: s,
     area: "startAction",
     ref: d,
     "aria-label": E,
     type: "button"
   }, /* @__PURE__ */ r.createElement(f, {
-    as: L,
+    as: k,
     "aria-hidden": !0,
     width: "6px",
     height: "10px",
     color: "neutral600"
-  })), u && /* @__PURE__ */ r.createElement(g, {
+  })), p && /* @__PURE__ */ r.createElement(g, {
     onClick: l,
     area: "endAction",
     ref: c,
     "aria-label": R,
     type: "button"
   }, /* @__PURE__ */ r.createElement(f, {
-    as: k,
+    as: L,
     "aria-hidden": !0,
     width: "6px",
     height: "10px",
@@ -91,7 +90,7 @@ const G = a(i)`
     paddingRight: 2,
     width: "100%",
     overflow: "hidden"
-  }, p), t), n && /* @__PURE__ */ r.createElement(i, {
+  }, u), t), n && /* @__PURE__ */ r.createElement(i, {
     paddingTop: 2,
     paddingLeft: 4,
     paddingRight: 4

package/dist/Combobox/Combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),ge=require("prop-types"),xe=require("@strapi/icons/CarretDown"),ye=require("@strapi/icons/Cross"),he=require("../helpers/useId.cjs"),l=require("./utils.cjs"),H=require("../Flex/Flex.cjs"),N=require("../Select/components.cjs"),ve=require("../Popover/Popover.cjs"),Ee=require("../Box/Box.cjs"),U=require("../Typography/Typography.cjs"),Fe=require("../Loader/Loader.cjs"),q=require("./components.cjs"),Ie=require("./ComboboxOption.cjs"),qe=require("./ComboboxList.cjs"),ke=require("../Field/Field.cjs"),je=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Me=require("../Field/FieldHint.cjs"),Oe=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Le=require("../Stack/Stack.cjs"),Se=require("../helpers/keyboardKeys.cjs"),Re=require("../VisuallyHidden/VisuallyHidden.cjs"),k=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=k(a),e=k(ge),we=k(xe),Ae=k(ye),h=({children:r,clearLabel:z,creatable:v,createMessage:W,disabled:d,error:j,hasMoreItems:G,hint:S,label:g,labelAction:J,loading:M,loadingMessage:Q,noOptionsMessage:X,onChange:R,onClear:w,onCreateOption:Y,onInputChange:A,onLoadMore:Z,placeholder:ee,required:T,value:p,...te})=>{const oe=()=>r.find(t=>t.props?.value.toLowerCase()===p.toLowerCase()).props?.children,[i,$]=a.useState(0),[ne,ae]=a.useState(null),[u,B]=a.useState(r),[m,re]=a.useState(!1),[s,F]=a.useState(""),x=a.useRef(),I=a.useRef(!1),E=a.useRef(),D=a.useRef(),le=a.useRef(),P=a.useRef(!0),c=he.useId("combobox"),_=`${c}-label`;if(!g&&!te["aria-label"])throw new Error('The Combobox component needs a "label" or an "aria-label" props');a.useEffect(()=>{B(l.filterOptions(r,s))},[s,r]),a.useEffect(()=>{m&&x.current&&l.maintainScrollVisibility(x.current)},[i,m]),a.useLayoutEffect(()=>{P.current&&(P.current=!1)},[p]);const se=m?`${c}-${i}`:"",V=()=>{R(null),F("")},ie=t=>{A&&A(t);const n=E.current.value;B(l.filterOptions(r,n)),$(0),ae(null),s!==n&&F(n),m||b(!0,!1)},ce=t=>{const{key:n}=t,f=v&&s?u.length:u.length-1,y=l.getActionFromKey(n,m);switch(p&&!s&&n===Se.KeyboardKeys.BACKSPACE&&V(),y){case l.MenuActions.Next:{if(i===f){C(0);break}C(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.Previous:{if(i===0){C(f);break}C(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.Last:case l.MenuActions.First:{if(i===f){C(0);break}C(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.CloseSelect:t.preventDefault(),O(i);break;case l.MenuActions.Close:t.preventDefault(),b(!1);break;case l.MenuActions.Open:b(!0);break}},ue=t=>{if(t.preventDefault(),p&&!I.current&&F(""),I.current){I.current=!1;return}b(!1,!1)},C=t=>{$(t)},de=t=>{C(t),O(t)},K=()=>{I.current=!0},O=t=>{const n=u[t];if(F(""),n){R(n.props.value),b(!1);return}v&&(Y(s),b(!1))},b=(t,n=!0)=>{re(t),n&&E.current.focus()},fe=a.Children.toArray(u).map((t,n)=>{const f=i===n;return a.cloneElement(t,{id:`${c}-${n}`,"aria-selected":ne===n,"aria-posinset":n+1,"aria-setsize":a.Children.toArray(u).length,ref(y){f&&(x.current=y)},onClick:()=>de(n),onMouseDown:K,isSelected:f})}),pe=()=>{E.current.focus(),w&&w(),V()},be=()=>{E.current.focus(),b(!0)},me=()=>{const t=u.findIndex(n=>n.props?.children===s);return s&&t===-1},Ce=t=>{t.preventDefault(),b(t,!0)};return o.default.createElement(ke.Field,{hint:S,error:j,id:c,required:T},o.default.createElement(Re.VisuallyHidden,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},p),o.default.createElement(Le.Stack,{spacing:g||S||j?1:0},g&&o.default.createElement(je.FieldLabel,{action:J},g),o.default.createElement(q.MainRow,{ref:D,$disabled:d,hasError:j},o.default.createElement(q.InputContainer,{wrap:"wrap"},!s&&p&&o.default.createElement(q.ValueContainer,{id:`${c}-selected-value`},o.default.createElement(U.Typography,null,oe())),o.default.createElement(q.Input,{"aria-activedescendant":se,"aria-autocomplete":"list","aria-controls":`${c}-listbox`,"aria-disabled":d,"aria-expanded":m,"aria-haspopup":"listbox","aria-labelledby":g?_:void 0,autoComplete:"off",autoCorrect:"off",id:c,onBlur:d?void 0:ue,onClick:d?void 0:Ce,onInput:d?void 0:ie,onKeyDown:d?void 0:ce,placeholder:p?"":ee,readOnly:d,ref:E,required:T,role:"combobox",spellCheck:"off",type:"text",value:s})),o.default.createElement(H.Flex,null,(p||s)&&o.default.createElement(N.IconBox,{id:`${c}-clear`,"aria-label":z,disabled:d,paddingLeft:3,as:"button",onClick:pe,type:"button"},o.default.createElement(Ae.default,null)),o.default.createElement(N.CaretBox,{disabled:d,paddingLeft:3,"aria-hidden":!0,as:"button",onClick:be,tabIndex:-1,type:"button"},o.default.createElement(we.default,null)))),o.default.createElement(Me.FieldHint,null),o.default.createElement(Oe.FieldError,null)),m&&o.default.createElement(ve.Popover,{id:`${c}-popover`,source:D,spacing:4,fullWidth:!0,intersectionId:`${c}-listbox-popover-intersection`,onReachEnd:G&&!M?Z:void 0},o.default.createElement("div",{role:"listbox",ref:le,id:`${c}-listbox`,"aria-labelledby":g?_:void 0},(Boolean(u.length)||v)&&o.default.createElement(o.default.Fragment,null,o.default.createElement(qe.ComboboxList,{activeOptionRef:x,options:fe}),me()&&v&&o.default.createElement(Ie.ComboboxOption,{isSelected:i===u.length,ref:t=>{i===u.length&&(x.current=t)},onMouseDown:K,onClick:()=>O(),taindex:0},W(s))),!u.length&&!v&&!M&&o.default.createElement(Ee.Box,{paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:x},o.default.createElement(U.Typography,{textColor:"neutral800"},X(s))),M&&o.default.createElement(H.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},o.default.createElement(Fe.Loader,{small:!0},Q)))))},L=r=>o.default.createElement(h,{...r,creatable:!0});h.defaultProps={"aria-label":void 0,clearLabel:"clear",creatable:!1,createMessage:r=>`Create "${r}"`,disabled:!1,error:void 0,hasMoreItems:!1,hint:void 0,label:void 0,loading:!1,loadingMessage:"Loading content...",noOptionsMessage:()=>"No results found",onClear:void 0,onCreateOption:void 0,onInputChange:void 0,onLoadMore:void 0,placeholder:"Select or enter a value",value:void 0};L.defaultProps=h.defaultProps;h.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,creatable:e.default.bool,createMessage:e.default.func,disabled:e.default.bool,error:e.default.string,hasMoreItems:e.default.bool,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string,labelAction:e.default.element,loading:e.default.bool,loadingMessage:e.default.string,noOptionsMessage:e.default.func,onChange:e.default.func.isRequired,onClear:e.default.func,onCreateOption:e.default.func,onInputChange:e.default.func,onLoadMore:e.default.func,placeholder:e.default.string,value:e.default.string};L.propTypes={...h.propTypes,onCreateOption:e.default.func.isRequired};exports.Combobox=h;exports.CreatableCombobox=L;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),xe=require("prop-types"),H=require("@strapi/icons"),ye=require("../helpers/useId.cjs"),l=require("./utils.cjs"),_=require("../Flex/Flex.cjs"),N=require("../Select/components.cjs"),he=require("../Popover/Popover.cjs"),ve=require("../Box/Box.cjs"),U=require("../Typography/Typography.cjs"),Ee=require("../Loader/Loader.cjs"),k=require("./components.cjs"),Fe=require("./ComboboxOption.cjs"),Ie=require("./ComboboxList.cjs"),ke=require("../Field/Field.cjs"),qe=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const je=require("../Field/FieldHint.cjs"),Me=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Oe=require("../Stack/Stack.cjs"),Le=require("../helpers/keyboardKeys.cjs"),Se=require("../VisuallyHidden/VisuallyHidden.cjs"),z=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=z(a),e=z(xe),h=({children:r,clearLabel:W,creatable:v,createMessage:G,disabled:d,error:q,hasMoreItems:J,hint:L,label:C,labelAction:Q,loading:j,loadingMessage:X,noOptionsMessage:Y,onChange:S,onClear:R,onCreateOption:Z,onInputChange:A,onLoadMore:ee,placeholder:te,required:T,value:p,...oe})=>{const ne=()=>r.find(t=>t.props?.value.toLowerCase()===p.toLowerCase()).props?.children,[i,w]=a.useState(0),[ae,re]=a.useState(null),[u,$]=a.useState(r),[m,le]=a.useState(!1),[s,F]=a.useState(""),x=a.useRef(),I=a.useRef(!1),E=a.useRef(),B=a.useRef(),se=a.useRef(),P=a.useRef(!0),c=ye.useId("combobox"),D=`${c}-label`;if(!C&&!oe["aria-label"])throw new Error('The Combobox component needs a "label" or an "aria-label" props');a.useEffect(()=>{$(l.filterOptions(r,s))},[s,r]),a.useEffect(()=>{m&&x.current&&l.maintainScrollVisibility(x.current)},[i,m]),a.useLayoutEffect(()=>{P.current&&(P.current=!1)},[p]);const ie=m?`${c}-${i}`:"",V=()=>{S(null),F("")},ce=t=>{A&&A(t);const n=E.current.value;$(l.filterOptions(r,n)),w(0),re(null),s!==n&&F(n),m||b(!0,!1)},ue=t=>{const{key:n}=t,f=v&&s?u.length:u.length-1,y=l.getActionFromKey(n,m);switch(p&&!s&&n===Le.KeyboardKeys.BACKSPACE&&V(),y){case l.MenuActions.Next:{if(i===f){g(0);break}g(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.Previous:{if(i===0){g(f);break}g(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.Last:case l.MenuActions.First:{if(i===f){g(0);break}g(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.CloseSelect:t.preventDefault(),M(i);break;case l.MenuActions.Close:t.preventDefault(),b(!1);break;case l.MenuActions.Open:b(!0);break}},de=t=>{if(t.preventDefault(),p&&!I.current&&F(""),I.current){I.current=!1;return}b(!1,!1)},g=t=>{w(t)},fe=t=>{g(t),M(t)},K=()=>{I.current=!0},M=t=>{const n=u[t];if(F(""),n){S(n.props.value),b(!1);return}v&&(Z(s),b(!1))},b=(t,n=!0)=>{le(t),n&&E.current.focus()},pe=a.Children.toArray(u).map((t,n)=>{const f=i===n;return a.cloneElement(t,{id:`${c}-${n}`,"aria-selected":ae===n,"aria-posinset":n+1,"aria-setsize":a.Children.toArray(u).length,ref(y){f&&(x.current=y)},onClick:()=>fe(n),onMouseDown:K,isSelected:f})}),be=()=>{E.current.focus(),R&&R(),V()},me=()=>{E.current.focus(),b(!0)},ge=()=>{const t=u.findIndex(n=>n.props?.children===s);return s&&t===-1},Ce=t=>{t.preventDefault(),b(t,!0)};return o.default.createElement(ke.Field,{hint:L,error:q,id:c,required:T},o.default.createElement(Se.VisuallyHidden,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},p),o.default.createElement(Oe.Stack,{spacing:C||L||q?1:0},C&&o.default.createElement(qe.FieldLabel,{action:Q},C),o.default.createElement(k.MainRow,{ref:B,$disabled:d,hasError:q},o.default.createElement(k.InputContainer,{wrap:"wrap"},!s&&p&&o.default.createElement(k.ValueContainer,{id:`${c}-selected-value`},o.default.createElement(U.Typography,null,ne())),o.default.createElement(k.Input,{"aria-activedescendant":ie,"aria-autocomplete":"list","aria-controls":`${c}-listbox`,"aria-disabled":d,"aria-expanded":m,"aria-haspopup":"listbox","aria-labelledby":C?D:void 0,autoComplete:"off",autoCorrect:"off",id:c,onBlur:d?void 0:de,onClick:d?void 0:Ce,onInput:d?void 0:ce,onKeyDown:d?void 0:ue,placeholder:p?"":te,readOnly:d,ref:E,required:T,role:"combobox",spellCheck:"off",type:"text",value:s})),o.default.createElement(_.Flex,null,(p||s)&&o.default.createElement(N.IconBox,{id:`${c}-clear`,"aria-label":W,disabled:d,paddingLeft:3,as:"button",onClick:be,type:"button"},o.default.createElement(H.Cross,null)),o.default.createElement(N.CaretBox,{disabled:d,paddingLeft:3,"aria-hidden":!0,as:"button",onClick:me,tabIndex:-1,type:"button"},o.default.createElement(H.CarretDown,null)))),o.default.createElement(je.FieldHint,null),o.default.createElement(Me.FieldError,null)),m&&o.default.createElement(he.Popover,{id:`${c}-popover`,source:B,spacing:4,fullWidth:!0,intersectionId:`${c}-listbox-popover-intersection`,onReachEnd:J&&!j?ee:void 0},o.default.createElement("div",{role:"listbox",ref:se,id:`${c}-listbox`,"aria-labelledby":C?D:void 0},(Boolean(u.length)||v)&&o.default.createElement(o.default.Fragment,null,o.default.createElement(Ie.ComboboxList,{activeOptionRef:x,options:pe}),ge()&&v&&o.default.createElement(Fe.ComboboxOption,{isSelected:i===u.length,ref:t=>{i===u.length&&(x.current=t)},onMouseDown:K,onClick:()=>M(),taindex:0},G(s))),!u.length&&!v&&!j&&o.default.createElement(ve.Box,{paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:x},o.default.createElement(U.Typography,{textColor:"neutral800"},Y(s))),j&&o.default.createElement(_.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},o.default.createElement(Ee.Loader,{small:!0},X)))))},O=r=>o.default.createElement(h,{...r,creatable:!0});h.defaultProps={"aria-label":void 0,clearLabel:"clear",creatable:!1,createMessage:r=>`Create "${r}"`,disabled:!1,error:void 0,hasMoreItems:!1,hint:void 0,label:void 0,loading:!1,loadingMessage:"Loading content...",noOptionsMessage:()=>"No results found",onClear:void 0,onCreateOption:void 0,onInputChange:void 0,onLoadMore:void 0,placeholder:"Select or enter a value",value:void 0};O.defaultProps=h.defaultProps;h.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,creatable:e.default.bool,createMessage:e.default.func,disabled:e.default.bool,error:e.default.string,hasMoreItems:e.default.bool,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string,labelAction:e.default.element,loading:e.default.bool,loadingMessage:e.default.string,noOptionsMessage:e.default.func,onChange:e.default.func.isRequired,onClear:e.default.func,onCreateOption:e.default.func,onInputChange:e.default.func,onLoadMore:e.default.func,placeholder:e.default.string,value:e.default.string};O.propTypes={...h.propTypes,onCreateOption:e.default.func.isRequired};exports.Combobox=h;exports.CreatableCombobox=O;