@strapi/design-system 1.7.0-alpha.5 → 1.7.1

package/dist/Card/Card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),d=require("./CardContext.cjs"),u=require("../Box/Box.cjs"),n=require("../hooks/useId.cjs"),c=({id:r,...o})=>{const e=n.useId(r),s=a.useMemo(()=>({id:e}),[e]);return t.jsx(d.CardContext.Provider,{value:s,children:t.jsx(u.Box,{id:r,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${e}-title`,...o})})};exports.Card=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),n=require("./CardContext.cjs"),s=require("../hooks/useId.cjs"),u=require("../Box/Box.cjs"),i=({id:r,...o})=>{const e=s.useId(r),d=a.useMemo(()=>({id:e}),[e]);return t.jsx(n.CardContext.Provider,{value:d,children:t.jsx(u.Box,{id:r,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${e}-title`,...o})})};exports.Card=i;

package/dist/Card/Card.js

@@ -1,31 +1,11 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useMemo as a } from "react";
 import { CardContext as i } from "./CardContext.js";
-import { Box as l } from "../Box/Box.js";
-import { useId as n } from "../hooks/useId.js";
-const p = ({
-  id: o,
-  ...t
-}) => {
-  const r = n(o), d = a(() => ({
-    id: r
-  }), [r]);
-  return e(i.Provider, {
-    value: d,
-    children: e(l, {
-      id: o,
-      tabIndex: 0,
-      hasRadius: !0,
-      background: "neutral0",
-      borderStyle: "solid",
-      borderWidth: "1px",
-      borderColor: "neutral150",
-      shadow: "tableShadow",
-      as: "article",
-      "aria-labelledby": `${r}-title`,
-      ...t
-    })
-  });
+import { useId as l } from "../hooks/useId.js";
+import { Box as n } from "../Box/Box.js";
+const p = ({ id: o, ...t }) => {
+  const r = l(o), d = a(() => ({ id: r }), [r]);
+  return e(i.Provider, { value: d, children: e(n, { id: o, tabIndex: 0, hasRadius: !0, background: "neutral0", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", shadow: "tableShadow", as: "article", "aria-labelledby": `${r}-title`, ...t }) });
 };
 export {
   p as Card

package/dist/Card/CardAction.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),r=require("../Stack/Stack.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=s(n),o=a.default(r.Stack).attrs({horizontal:!0,spacing:2})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),n=require("../Stack/Stack.cjs"),s=r(n.Stack).attrs({horizontal:!0,spacing:2})`
   position: absolute;
   top: ${({theme:t})=>t.spaces[3]};
   right: ${({position:t,theme:e})=>{if(t==="end")return e.spaces[3]}};
   left: ${({position:t,theme:e})=>{if(t==="start")return e.spaces[3]}};
-`;exports.CardAction=o;
+`;exports.CardAction=s;

package/dist/Card/CardAsset.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),o=require("../Flex/Flex.cjs"),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
@@ -7,13 +7,13 @@
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
-`,c={S:88,M:164},l=i.default.div`
+`,n={S:88,M:164},d=r.div`
   display: flex;
   justify-content: center;
-  height: ${({size:e})=>c[e]/16}rem;
+  height: ${({size:e})=>n[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};
-`,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;
+`,c=({size:e="M",children:i,...s})=>t.jsx(d,{size:e,children:i?t.jsx(o.Flex,{children:i}):t.jsx(a,{...s,"aria-hidden":!0})});exports.CardAsset=c;

package/dist/Card/CardAsset.js

@@ -16,33 +16,13 @@ const a = r.img`
 }, d = r.div`
   display: flex;
   justify-content: center;
-  height: ${({
-  size: e
-}) => n[e] / 16}rem;
+  height: ${({ size: e }) => n[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};
-`, m = ({
-  size: e = "M",
-  children: i,
-  ...o
-}) => t(d, {
-  size: e,
-  children: i ? t(s, {
-    children: i
-  }) : t(a, {
-    ...o,
-    "aria-hidden": !0
-  })
-});
+  border-top-left-radius: ${({ theme: e }) => e.borderRadius};
+  border-top-right-radius: ${({ theme: e }) => e.borderRadius};
+`, m = ({ size: e = "M", children: i, ...o }) => t(d, { size: e, children: i ? t(s, { children: i }) : t(a, { ...o, "aria-hidden": !0 }) });
 export {
   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 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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("styled-components"),a=require("../Badge/Badge.cjs"),s=t.div`
   margin-left: auto;
   flex-shrink: 0;
-`,o=a.default(d.Badge)`
+`,d=t(a.Badge)`
   margin-left: ${({theme:e})=>e.spaces[1]};
-`,i=e=>t.jsx(n,{children:t.jsx(o,{...e})});exports.CardBadge=i;
+`,i=e=>r.jsx(s,{children:r.jsx(d,{...e})});exports.CardBadge=i;

package/dist/Card/CardBadge.js

@@ -5,14 +5,8 @@ const a = e.div`
   margin-left: auto;
   flex-shrink: 0;
 `, i = e(t)`
-  margin-left: ${({
-  theme: r
-}) => r.spaces[1]};
-`, n = (r) => o(a, {
-  children: o(i, {
-    ...r
-  })
-});
+  margin-left: ${({ theme: r }) => r.spaces[1]};
+`, n = (r) => o(a, { children: o(i, { ...r }) });
 export {
   n as CardBadge
 };

package/dist/Card/CardBody.cjs

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

package/dist/Card/CardBody.js

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

package/dist/Card/CardCheckbox.cjs

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

package/dist/Card/CardCheckbox.js

@@ -3,16 +3,11 @@ import { CardAction as i } from "./CardAction.js";
 import { useCard as e } from "./CardContext.js";
 import { BaseCheckbox as a } from "../BaseCheckbox/BaseCheckbox.js";
 const n = (o) => {
-  const {
-    id: t
-  } = e();
-  return r(i, {
-    position: "start",
-    children: r(a, {
-      "aria-labelledby": `${t}-title`,
-      ...o
-    })
-  });
+  const { id: t } = e();
+  return (
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    r(i, { position: "start", children: r(a, { "aria-labelledby": `${t}-title`, ...o }) })
+  );
 };
 export {
   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 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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("styled-components"),n=require("../Box/Box.cjs"),s=o(n.Box)`
   word-break: break-all;
-`,l=({children:e,...t})=>o.jsx(a,{...t,children:e});exports.CardContent=l;
+`,a=({children:e,...r})=>t.jsx(s,{...r,children:e});exports.CardContent=a;

package/dist/Card/CardContent.js

@@ -3,13 +3,7 @@ import e from "styled-components";
 import { Box as m } from "../Box/Box.js";
 const n = e(m)`
   word-break: break-all;
-`, l = ({
-  children: r,
-  ...o
-}) => t(n, {
-  ...o,
-  children: r
-});
+`, l = ({ children: r, ...o }) => t(n, { ...o, children: r });
 export {
   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({id:""}),r=()=>e.useContext(t);exports.CardContext=t;exports.useCard=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({id:""}),o=()=>e.useContext(t);exports.CardContext=t;exports.useCard=o;

package/dist/Card/CardContext.js

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

package/dist/Card/CardHeader.cjs

@@ -1,3 +1,3 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("styled-components"),o=require("../Flex/Flex.cjs"),n=t(o.Flex)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,a=e=>t.jsx(n,{position:"relative",justifyContent:"center",...e});exports.CardHeader=a;
+`,s=e=>r.jsx(n,{position:"relative",justifyContent:"center",...e});exports.CardHeader=s;

package/dist/Card/CardHeader.js

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

package/dist/Card/CardTimer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../Box/Box.cjs"),a=require("../Typography/Typography.cjs"),i=({children:r,...o})=>e.jsx(t.Box,{as:"time",background:"neutral800",bottom:1,right:1,color:"neutral0",hasRadius:!0,position:"absolute",padding:1,...o,children:e.jsx(a.Typography,{variant:"pi",textColor:"neutral0",children:r})});exports.CardTimer=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("../Box/Box.cjs"),i=require("../Typography/Typography.cjs"),a=({children:e,...t})=>r.jsx(o.Box,{as:"time",background:"neutral800",bottom:1,right:1,color:"neutral0",hasRadius:!0,position:"absolute",padding:1,...t,children:r.jsx(i.Typography,{variant:"pi",textColor:"neutral0",children:e})});exports.CardTimer=a;

package/dist/Card/CardTimer.js

@@ -1,25 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { Box as i } from "../Box/Box.js";
 import { Typography as a } from "../Typography/Typography.js";
-const p = ({
-  children: o,
-  ...t
-}) => r(i, {
-  as: "time",
-  background: "neutral800",
-  bottom: 1,
-  right: 1,
-  color: "neutral0",
-  hasRadius: !0,
-  position: "absolute",
-  padding: 1,
-  ...t,
-  children: r(a, {
-    variant: "pi",
-    textColor: "neutral0",
-    children: o
-  })
-});
+const p = ({ children: o, ...t }) => r(i, { as: "time", background: "neutral800", bottom: 1, right: 1, color: "neutral0", hasRadius: !0, position: "absolute", padding: 1, ...t, children: r(a, { variant: "pi", textColor: "neutral0", children: o }) });
 export {
   p as CardTimer
 };

package/dist/Card/CardTitle.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("./CardContext.cjs"),r=require("../Typography/Typography.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("./CardContext.cjs"),e=require("../Typography/Typography.cjs"),a=t=>{const{id:i}=o.useCard();return r.jsx(e.Typography,{variant:"pi",id:`${i}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},n=t=>r.jsx(e.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=n;exports.CardTitle=a;

package/dist/Card/CardTitle.js

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

package/dist/Card/index.cjs

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

package/dist/CarouselInput/Carousel.js

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

package/dist/CarouselInput/CarouselActions.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),l=require("../Flex/Flex.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=n(c),s=({horizontal:e=!0,spacing:t=1,...o})=>r.default.createElement(l.Flex,{justifyContent:"center",gap:t,direction:e?"row":"column",alignItems:e?"center":"stretch",position:"absolute",width:"100%",bottom:1,...o});exports.CarouselActions=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const s=require("../Flex/Flex.cjs"),i=({horizontal:e=!0,spacing:t=1,...o})=>r.jsx(s.Flex,{justifyContent:"center",gap:t,direction:e?"row":"column",alignItems:e?"center":"stretch",position:"absolute",width:"100%",bottom:1,...o});exports.CarouselActions=i;

package/dist/CarouselInput/CarouselActions.js

@@ -1,18 +1,19 @@
-import r from "react";
-import { Flex as n } from "../Flex/Flex.js";
-const m = ({ horizontal: t = !0, spacing: e = 1, ...o }) => /* @__PURE__ */ r.createElement(
-  n,
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { Flex as i } from "../Flex/Flex.js";
+const c = ({ horizontal: t = !0, spacing: o = 1, ...e }) => /* @__PURE__ */ r(
+  i,
   {
     justifyContent: "center",
-    gap: e,
+    gap: o,
     direction: t ? "row" : "column",
     alignItems: t ? "center" : "stretch",
     position: "absolute",
     width: "100%",
     bottom: 1,
-    ...o
+    ...e
   }
 );
 export {
-  m as CarouselActions
+  c as CarouselActions
 };

package/dist/CarouselInput/CarouselImage.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),n=require("prop-types"),d=require("styled-components"),p=require("../Box/Box.cjs"),f=require("../Tooltip/Tooltip.cjs"),y=require("../Typography/utils.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),s=r(n),g=r(d),l=g.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("react"),s=require("prop-types"),a=require("styled-components"),c=require("../Typography/utils.cjs"),g=require("../Box/Box.cjs"),d=require("../Tooltip/Tooltip.cjs"),o=a(g.Box)`
   height: 100%;
-  ${y.ellipsisStyle({ellipsis:!0})}
-`,o=e=>{const[u,i]=a.useState(!1),c=()=>{i(!0)};return u?t.default.createElement(f.Tooltip,{description:e.alt??""},t.default.createElement(l,{as:"img",...e})):t.default.createElement(l,{as:"img",...e,onError:c})};o.defaultProps={src:void 0,alt:void 0};o.propTypes={alt:s.default.string,src:s.default.string};exports.CarouselImage=o;
+  ${c.ellipsisStyle({ellipsis:!0})}
+`,t=e=>{const[i,l]=u.useState(!1),n=()=>{l(!0)};return i?r.jsx(d.Tooltip,{description:e.alt??"",children:r.jsx(o,{as:"img",...e})}):r.jsx(o,{as:"img",...e,onError:n})};t.defaultProps={src:void 0,alt:void 0};t.propTypes={alt:s.string,src:s.string};exports.CarouselImage=t;

package/dist/CarouselInput/CarouselImage.js

@@ -1,26 +1,27 @@
-import e, { useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { useState as p } from "react";
 import t from "prop-types";
-import n from "styled-components";
-import { Box as p } from "../Box/Box.js";
+import a from "styled-components";
+import { ellipsisStyle as n } from "../Typography/utils.js";
+import { Box as f } from "../Box/Box.js";
 import { Tooltip as c } from "../Tooltip/Tooltip.js";
-import { ellipsisStyle as f } from "../Typography/utils.js";
-const o = n(p)`
+const e = a(f)`
   height: 100%;
-  ${f({ ellipsis: !0 })}
-`, s = (r) => {
-  const [i, m] = a(!1), l = () => {
+  ${n({ ellipsis: !0 })}
+`, i = (r) => {
+  const [s, m] = p(!1), l = () => {
     m(!0);
   };
-  return i ? /* @__PURE__ */ e.createElement(c, { description: r.alt ?? "" }, /* @__PURE__ */ e.createElement(o, { as: "img", ...r })) : /* @__PURE__ */ e.createElement(o, { as: "img", ...r, onError: l });
+  return s ? /* @__PURE__ */ o(c, { description: r.alt ?? "", children: /* @__PURE__ */ o(e, { as: "img", ...r }) }) : /* @__PURE__ */ o(e, { as: "img", ...r, onError: l });
 };
-s.defaultProps = {
+i.defaultProps = {
   src: void 0,
   alt: void 0
 };
-s.propTypes = {
+i.propTypes = {
   alt: t.string,
   src: t.string
 };
 export {
-  s as CarouselImage
+  i as CarouselImage
 };

package/dist/CarouselInput/CarouselInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),v=require("prop-types"),E=require("./Carousel.cjs"),R=require("../Field/Field.cjs"),I=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const L=require("../Field/FieldHint.cjs"),x=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const _=require("../Flex/Flex.cjs"),C=require("../hooks/useId.cjs"),u=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=u(y),e=u(v),i=({actions:t,children:n,error:a,hint:o,label:r,labelAction:s,nextLabel:c,onNext:f,onPrevious:F,previousLabel:q,required:p,secondaryLabel:b,selectedSlide:g,id:j,...m})=>{const d=C.useId(j);return l.default.createElement(R.Field,{hint:o,error:a,id:d,required:p},l.default.createElement(_.Flex,{direction:"column",alignItems:"stretch",gap:1},r&&l.default.createElement(I.FieldLabel,{action:s},r),l.default.createElement(E.Carousel,{actions:t,label:r,nextLabel:c,onNext:f,onPrevious:F,previousLabel:q,secondaryLabel:b,selectedSlide:g,id:d,...m},n),l.default.createElement(L.FieldHint,null),l.default.createElement(x.FieldError,null)))};i.defaultProps={actions:void 0,error:void 0,hint:void 0,id:void 0,labelAction:void 0,required:!1,secondaryLabel:void 0};i.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)]),id:e.default.string,label:e.default.string.isRequired,labelAction:e.default.element,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.CarouselInput=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const e=require("prop-types"),j=require("./Carousel.cjs"),y=require("../hooks/useId.cjs"),R=require("../Field/Field.cjs"),f=require("../Field/FieldLabel.cjs"),h=require("../Field/FieldHint.cjs"),m=require("../Field/FieldError.cjs"),I=require("../Flex/Flex.cjs"),n=({actions:o,children:d,error:t,hint:u,label:i,labelAction:l,nextLabel:c,onNext:a,onPrevious:q,previousLabel:g,required:p,secondaryLabel:b,selectedSlide:x,id:F,...v})=>{const s=y.useId(F);return r.jsx(R.Field,{hint:u,error:t,id:s,required:p,children:r.jsxs(I.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i&&r.jsx(f.FieldLabel,{action:l,children:i}),r.jsx(j.Carousel,{actions:o,label:i,nextLabel:c,onNext:a,onPrevious:q,previousLabel:g,secondaryLabel:b,selectedSlide:x,id:s,...v,children:d}),r.jsx(h.FieldHint,{}),r.jsx(m.FieldError,{})]})})};n.defaultProps={actions:void 0,error:void 0,hint:void 0,id:void 0,labelAction:void 0,required:!1,secondaryLabel:void 0};n.propTypes={actions:e.node,children:e.node.isRequired,error:e.string,hint:e.oneOfType([e.string,e.node,e.arrayOf(e.node)]),id:e.string,label:e.string.isRequired,labelAction:e.element,nextLabel:e.string.isRequired,onNext:e.func.isRequired,onPrevious:e.func.isRequired,previousLabel:e.string.isRequired,required:e.bool,secondaryLabel:e.string,selectedSlide:e.number.isRequired};exports.CarouselInput=n;