@strapi/design-system 1.6.2 → 1.6.4

package/dist/Accordion/Accordion.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),$=require("styled-components"),c=require("../Typography/Typography.cjs"),j=require("../helpers/useId.cjs"),a=require("../Box/Box.cjs"),h=require("../Flex/Flex.cjs"),T=require("./AccordionContext.cjs"),m=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},d=m($),b=({theme:r,expanded:o,variant:e,disabled:t,error:n})=>n?`1px solid ${r.colors.danger600} !important`:t?`1px solid ${r.colors.neutral150}`:o?`1px solid ${r.colors.primary600}`:e==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,l=d.default(c.Typography)``,A=d.default(a.Box)`
-  border: ${b};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),m=require("react"),$=require("styled-components"),b=require("./AccordionContext.cjs"),p=require("../Box/Box.cjs"),h=require("../Flex/Flex.cjs"),T=require("../helpers/useId.cjs"),a=require("../Typography/Typography.cjs"),_=r=>r&&typeof r=="object"&&"default"in r?r:{default:r};function q(r){if(r&&r.__esModule)return r;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>r[e]})}}return o.default=r,Object.freeze(o)}const A=q(m),y=_($),v=({theme:r,expanded:o,variant:e,disabled:t,error:n})=>n?`1px solid ${r.colors.danger600} !important`:t?`1px solid ${r.colors.neutral150}`:o?`1px solid ${r.colors.primary600}`:e==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(a.Typography)``,B=y.default(p.Box)`
+  border: ${v};
 
   &:hover:not([aria-disabled='true']) {
     border: 1px solid ${({theme:r})=>r.colors.primary600};
 
-    ${l} {
+    ${f} {
       color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary700};
     }
 
-    ${c.Typography} {
+    ${a.Typography} {
       color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary600};
     }
 
@@ -20,4 +20,4 @@
       background: ${({theme:r})=>r.colors.primary200};
     }
   }
-`,q=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:n=!0,id:p,onToggle:u,toggle:y,size:x="M",variant:i="primary",shadow:g})=>{const f=j.useId(p);return s.jsxs(T.AccordionContext.Provider,{value:{expanded:t,onToggle:u,toggle:y,id:f,size:x,variant:i,disabled:o},children:[s.jsx(A,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:i,error:e,shadow:g,children:r}),e&&n&&s.jsx(a.Box,{paddingTop:1,children:s.jsx(c.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=q;exports.AccordionTypography=l;
+`,M=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:n=!0,id:x,onToggle:i,toggle:d,size:u="M",variant:s="primary",shadow:g})=>{const l=T.useId(x),j=A.useMemo(()=>({expanded:t,onToggle:i,toggle:d,id:l,size:u,variant:s,disabled:o}),[o,t,l,i,u,d,s]);return c.jsxs(b.AccordionContext.Provider,{value:j,children:[c.jsx(B,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:s,error:e,shadow:g,children:r}),e&&n&&c.jsx(p.Box,{paddingTop:1,children:c.jsx(a.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=M;exports.AccordionTypography=f;

package/dist/Accordion/Accordion.js

@@ -1,39 +1,40 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import e from "styled-components";
-import { Typography as t } from "../Typography/Typography.js";
-import { useId as y } from "../helpers/useId.js";
-import { Box as s } from "../Box/Box.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { AccordionContext as b } from "./AccordionContext.js";
-const h = ({
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import * as g from "react";
+import m from "styled-components";
+import { AccordionContext as h } from "./AccordionContext.js";
+import { Box as u } from "../Box/Box.js";
+import { Flex as b } from "../Flex/Flex.js";
+import { useId as A } from "../helpers/useId.js";
+import { Typography as p } from "../Typography/Typography.js";
+const v = ({
   theme: r,
   expanded: o,
-  variant: i,
-  disabled: d,
+  variant: t,
+  disabled: i,
   error: a
-}) => a ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : i === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, v = e(t)``, A = e(s)`
-  border: ${h};
+}) => a ? `1px solid ${r.colors.danger600} !important` : i ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, j = m(p)``, k = m(u)`
+  border: ${v};
 
   &:hover:not([aria-disabled='true']) {
     border: 1px solid ${({
   theme: r
 }) => r.colors.primary600};
 
-    ${v} {
+    ${j} {
       color: ${({
   theme: r,
   expanded: o
 }) => o ? void 0 : r.colors.primary700};
     }
 
-    ${t} {
+    ${p} {
       color: ${({
   theme: r,
   expanded: o
 }) => o ? void 0 : r.colors.primary600};
     }
 
-    & > ${g} {
+    & > ${b} {
       background: ${({
   theme: r
 }) => r.colors.primary100};
@@ -48,48 +49,48 @@ const h = ({
 `, F = ({
   children: r,
   disabled: o = !1,
-  error: i,
-  expanded: d = !1,
+  error: t,
+  expanded: i = !1,
   hasErrorMessage: a = !0,
-  id: l,
-  onToggle: c,
-  toggle: u,
-  size: m = "M",
-  variant: p = "primary",
-  shadow: f
+  id: f,
+  onToggle: s,
+  toggle: c,
+  size: e = "M",
+  variant: d = "primary",
+  shadow: $
 }) => {
-  const $ = y(l);
-  return x(b.Provider, {
-    value: {
-      expanded: d,
-      onToggle: c,
-      toggle: u,
-      id: $,
-      size: m,
-      variant: p,
-      disabled: o
-    },
-    children: [n(A, {
-      "data-strapi-expanded": d,
+  const l = A(f), x = g.useMemo(() => ({
+    expanded: i,
+    onToggle: s,
+    toggle: c,
+    id: l,
+    size: e,
+    variant: d,
+    disabled: o
+  }), [o, i, l, s, e, c, d]);
+  return y(h.Provider, {
+    value: x,
+    children: [n(k, {
+      "data-strapi-expanded": i,
       disabled: o,
       "aria-disabled": o,
-      expanded: d,
+      expanded: i,
       hasRadius: !0,
-      variant: p,
-      error: i,
-      shadow: f,
+      variant: d,
+      error: t,
+      shadow: $,
       children: r
-    }), i && a && n(s, {
+    }), t && a && n(u, {
       paddingTop: 1,
-      children: n(t, {
+      children: n(p, {
         variant: "pi",
         textColor: "danger600",
-        children: i
+        children: t
       })
     })]
   });
 };
 export {
   F as Accordion,
-  v as AccordionTypography
+  j as AccordionTypography
 };

package/dist/Accordion/AccordionContent.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("../Box/Box.cjs"),a=require("./AccordionContext.cjs"),l=({children:o,...n})=>{const{expanded:c,id:e}=a.useAccordion();if(!c)return null;const r=`accordion-content-${e}`,t=`accordion-label-${e}`,i=`accordion-desc-${e}`;return d.jsx(s.Box,{role:"region",id:r,"aria-labelledby":t,"aria-describedby":i,...n,children:o})};exports.AccordionContent=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("./AccordionContext.cjs"),a=require("../Box/Box.cjs"),l=({children:o,...n})=>{const{expanded:c,id:e}=s.useAccordion();if(!c)return null;const r=`accordion-content-${e}`,t=`accordion-label-${e}`,i=`accordion-desc-${e}`;return d.jsx(a.Box,{role:"region",id:r,"aria-labelledby":t,"aria-describedby":i,...n,children:o})};exports.AccordionContent=l;

package/dist/Accordion/AccordionContent.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
-import { Box as a } from "../Box/Box.js";
-import { useAccordion as l } from "./AccordionContext.js";
+import { useAccordion as a } from "./AccordionContext.js";
+import { Box as l } from "../Box/Box.js";
 const p = ({
   children: r,
   ...n
@@ -8,11 +8,11 @@ const p = ({
   const {
     expanded: i,
     id: o
-  } = l();
+  } = a();
   if (!i)
     return null;
   const c = `accordion-content-${o}`, e = `accordion-label-${o}`, t = `accordion-desc-${o}`;
-  return d(a, {
+  return d(l, {
     role: "region",
     id: c,
     "aria-labelledby": e,

package/dist/Accordion/AccordionGroup.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),l=require("react"),p=require("styled-components"),t=require("../Box/Box.cjs"),n=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),x=require("../KeyboardNavigable/KeyboardNavigable.cjs"),y=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},d=y(p),g=d.default(t.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),p=require("react"),b=require("styled-components"),d=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),y=require("../KeyboardNavigable/KeyboardNavigable.cjs"),l=require("../Typography/Typography.cjs"),g=r=>r&&typeof r=="object"&&"default"in r?r:{default:r};function f(r){if(r&&r.__esModule)return r;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const n=f(p),s=g(b),h=s.default(d.Box)`
   border-bottom: 1px solid ${({theme:r})=>r.colors.neutral200};
   border-right: 1px solid ${({theme:r})=>r.colors.neutral200};
   border-left: 1px solid ${({theme:r})=>r.colors.neutral200};
   border-radius: 0 0 ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius};
-`,h=d.default(t.Box)`
+`,j=s.default(d.Box)`
   & > * {
     & > * {
       border-radius: unset;
@@ -40,8 +40,8 @@
       }
     }
   `}
-`,$=d.default(t.Box)`
+`,$=s.default(d.Box)`
   svg path {
     fill: ${({theme:r})=>r.colors.neutral500};
   }
-`,f=({children:r,footer:e,label:a,labelAction:s,error:i})=>{const c=l.Children.toArray(r).map(u=>l.cloneElement(u,{hasErrorMessage:!1}));return o.jsxs(x.KeyboardNavigable,{attributeName:"data-strapi-accordion-toggle",children:[a&&o.jsxs(b.Flex,{paddingBottom:1,children:[o.jsx(n.Typography,{variant:"pi",as:"label",textColor:"neutral800",fontWeight:"bold",children:a}),s&&o.jsx($,{paddingLeft:1,children:s})]}),o.jsx(h,{footer:e,children:c}),e&&o.jsx(g,{children:e}),i&&o.jsx(t.Box,{paddingTop:1,children:o.jsx(n.Typography,{variant:"pi",textColor:"danger600",children:i})})]})};exports.AccordionGroup=f;
+`,m=({children:r,footer:e,label:t,labelAction:a,error:i})=>{const c=n.Children.toArray(r).map(u=>n.cloneElement(u,{hasErrorMessage:!1}));return o.jsxs(y.KeyboardNavigable,{attributeName:"data-strapi-accordion-toggle",children:[t&&o.jsxs(x.Flex,{paddingBottom:1,children:[o.jsx(l.Typography,{variant:"pi",as:"label",textColor:"neutral800",fontWeight:"bold",children:t}),a&&o.jsx($,{paddingLeft:1,children:a})]}),o.jsx(j,{footer:e,children:c}),e&&o.jsx(h,{children:e}),i&&o.jsx(d.Box,{paddingTop:1,children:o.jsx(l.Typography,{variant:"pi",textColor:"danger600",children:i})})]})};exports.AccordionGroup=m;

package/dist/Accordion/AccordionGroup.js

@@ -1,11 +1,11 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { Children as u, cloneElement as b } from "react";
+import * as n from "react";
 import t from "styled-components";
 import { Box as e } from "../Box/Box.js";
-import { Typography as n } from "../Typography/Typography.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { KeyboardNavigable as $ } from "../KeyboardNavigable/KeyboardNavigable.js";
-const h = t(e)`
+import { Flex as b } from "../Flex/Flex.js";
+import { KeyboardNavigable as m } from "../KeyboardNavigable/KeyboardNavigable.js";
+import { Typography as p } from "../Typography/Typography.js";
+const $ = t(e)`
   border-bottom: 1px solid ${({
   theme: r
 }) => r.colors.neutral200};
@@ -20,7 +20,7 @@ const h = t(e)`
 }) => r.borderRadius} ${({
   theme: r
 }) => r.borderRadius};
-`, x = t(e)`
+`, h = t(e)`
   & > * {
     & > * {
       border-radius: unset;
@@ -80,44 +80,44 @@ const h = t(e)`
       }
     }
   `}
-`, f = t(e)`
+`, x = t(e)`
   svg path {
     fill: ${({
   theme: r
 }) => r.colors.neutral500};
   }
-`, j = ({
+`, C = ({
   children: r,
   footer: d,
   label: i,
   labelAction: a,
   error: s
 }) => {
-  const p = u.toArray(r).map((c) => b(c, {
+  const c = n.Children.toArray(r).map((u) => n.cloneElement(u, {
     hasErrorMessage: !1
   }));
-  return l($, {
+  return l(m, {
     attributeName: "data-strapi-accordion-toggle",
-    children: [i && l(m, {
+    children: [i && l(b, {
       paddingBottom: 1,
-      children: [o(n, {
+      children: [o(p, {
         variant: "pi",
         as: "label",
         textColor: "neutral800",
         fontWeight: "bold",
         children: i
-      }), a && o(f, {
+      }), a && o(x, {
         paddingLeft: 1,
         children: a
       })]
-    }), o(x, {
+    }), o(h, {
       footer: d,
-      children: p
-    }), d && o(h, {
+      children: c
+    }), d && o($, {
       children: d
     }), s && o(e, {
       paddingTop: 1,
-      children: o(n, {
+      children: o(p, {
         variant: "pi",
         textColor: "danger600",
         children: s
@@ -126,5 +126,5 @@ const h = t(e)`
   });
 };
 export {
-  j as AccordionGroup
+  C as AccordionGroup
 };

package/dist/Accordion/AccordionToggle.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),v=require("@strapi/icons"),B=require("styled-components"),z=require("../TextButton/TextButton.cjs"),F=require("../Typography/Typography.cjs"),j=require("../Flex/Flex.cjs"),y=require("../Stack/Stack.cjs"),I=require("../Icon/Icon.cjs"),M=require("./Accordion.cjs"),R=require("./AccordionContext.cjs"),_=require("./utils.cjs"),D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=D(B),W=m.default(z.TextButton)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),v=require("@strapi/icons"),B=require("styled-components"),z=require("./Accordion.cjs"),F=require("./AccordionContext.cjs"),I=require("./utils.cjs"),j=require("../Flex/Flex.cjs"),M=require("../Icon/Icon.cjs"),y=require("../Stack/Stack.cjs"),R=require("../TextButton/TextButton.cjs"),_=require("../Typography/Typography.cjs"),D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=D(B),W=m.default(R.TextButton)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -25,4 +25,4 @@
       }
     }
   }
-`,P=({title:e,description:r,as:b="span",togglePosition:s="right",action:l,...T})=>{const{onToggle:c,toggle:u,expanded:t,id:d,size:n,variant:$,disabled:i}=R.useAccordion(),k=`accordion-content-${d}`,p=`accordion-label-${d}`,w=`accordion-desc-${d}`,a=n==="M"?6:4,g=n==="M"?a:a-2,C=_.getBackground({expanded:t,disabled:i,variant:$}),q={as:b,fontWeight:n==="S"?"bold":void 0,id:p,textColor:t?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},S=t?"primary600":"neutral600",A=t?"primary200":"neutral200",h=n==="M"?`${32/16}rem`:`${24/16}rem`,x=()=>{i||(u&&!c?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),u()):c&&c())},f=o.jsx(j.Flex,{justifyContent:"center",borderRadius:"50%",height:h,width:h,transform:t?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:A,cursor:i?"not-allowed":"pointer",onClick:x,shrink:0,children:o.jsx(I.Icon,{as:v.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:t?"primary600":"neutral600"})});return o.jsx(L,{paddingBottom:g,paddingLeft:a,paddingRight:a,paddingTop:g,background:C,expanded:t,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(y.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%",children:[s==="left"&&f,o.jsx(W,{onClick:x,"aria-disabled":i,"aria-expanded":t,"aria-controls":k,"aria-labelledby":p,"data-strapi-accordion-toggle":!0,expanded:t,type:"button",flex:1,minWidth:0,...T,children:o.jsxs(o.Fragment,{children:[o.jsx(M.AccordionTypography,{...q,children:e}),r&&o.jsx(F.Typography,{as:"p",id:w,textColor:S,children:r})]})}),s==="right"&&o.jsxs(y.Stack,{horizontal:!0,spacing:3,children:[f,l]}),s==="left"&&l]})})};exports.AccordionToggle=P;
+`,P=({title:e,description:r,as:b="span",togglePosition:s="right",action:l,...T})=>{const{onToggle:c,toggle:u,expanded:t,id:d,size:n,variant:$,disabled:i}=F.useAccordion(),k=`accordion-content-${d}`,p=`accordion-label-${d}`,w=`accordion-desc-${d}`,a=n==="M"?6:4,g=n==="M"?a:a-2,C=I.getBackground({expanded:t,disabled:i,variant:$}),q={as:b,fontWeight:n==="S"?"bold":void 0,id:p,textColor:t?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},S=t?"primary600":"neutral600",A=t?"primary200":"neutral200",h=n==="M"?`${32/16}rem`:`${24/16}rem`,x=()=>{i||(u&&!c?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),u()):c&&c())},f=o.jsx(j.Flex,{justifyContent:"center",borderRadius:"50%",height:h,width:h,transform:t?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:A,cursor:i?"not-allowed":"pointer",onClick:x,shrink:0,children:o.jsx(M.Icon,{as:v.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:t?"primary600":"neutral600"})});return o.jsx(L,{paddingBottom:g,paddingLeft:a,paddingRight:a,paddingTop:g,background:C,expanded:t,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(y.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%",children:[s==="left"&&f,o.jsx(W,{onClick:x,"aria-disabled":i,"aria-expanded":t,"aria-controls":k,"aria-labelledby":p,"data-strapi-accordion-toggle":!0,expanded:t,type:"button",flex:1,minWidth:0,...T,children:o.jsxs(o.Fragment,{children:[o.jsx(z.AccordionTypography,{...q,children:e}),r&&o.jsx(_.Typography,{as:"p",id:w,textColor:S,children:r})]})}),s==="right"&&o.jsxs(y.Stack,{horizontal:!0,spacing:3,children:[f,l]}),s==="left"&&l]})})};exports.AccordionToggle=P;

package/dist/Accordion/AccordionToggle.js

@@ -1,15 +1,15 @@
 import { jsx as i, jsxs as c, Fragment as R } from "react/jsx-runtime";
 import { CarretDown as A } from "@strapi/icons";
 import y from "styled-components";
-import { TextButton as I } from "../TextButton/TextButton.js";
-import { Typography as S } from "../Typography/Typography.js";
+import { AccordionTypography as I } from "./Accordion.js";
+import { useAccordion as S } from "./AccordionContext.js";
+import { getBackground as W } from "./utils.js";
 import { Flex as $ } from "../Flex/Flex.js";
+import { Icon as D } from "../Icon/Icon.js";
 import { Stack as b } from "../Stack/Stack.js";
-import { Icon as W } from "../Icon/Icon.js";
-import { AccordionTypography as D } from "./Accordion.js";
-import { useAccordion as F } from "./AccordionContext.js";
-import { getBackground as L } from "./utils.js";
-const P = y(I)`
+import { TextButton as F } from "../TextButton/TextButton.js";
+import { Typography as L } from "../Typography/Typography.js";
+const P = y(F)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -63,7 +63,7 @@ const P = y(I)`
     size: t,
     variant: k,
     disabled: n
-  } = F(), T = `accordion-content-${s}`, m = `accordion-label-${s}`, z = `accordion-desc-${s}`, a = t === "M" ? 6 : 4, h = t === "M" ? a : a - 2, v = L({
+  } = S(), T = `accordion-content-${s}`, m = `accordion-label-${s}`, z = `accordion-desc-${s}`, a = t === "M" ? 6 : 4, h = t === "M" ? a : a - 2, v = W({
     expanded: r,
     disabled: n,
     variant: k
@@ -89,7 +89,7 @@ const P = y(I)`
     cursor: n ? "not-allowed" : "pointer",
     onClick: f,
     shrink: 0,
-    children: i(W, {
+    children: i(D, {
       as: A,
       width: t === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
       color: r ? "primary600" : "neutral600"
@@ -123,10 +123,10 @@ const P = y(I)`
         minWidth: 0,
         ...C,
         children: c(R, {
-          children: [i(D, {
+          children: [i(I, {
             ...j,
             children: o
-          }), e && i(S, {
+          }), e && i(L, {
             as: "p",
             id: z,
             textColor: B,

package/dist/Alert/Alert.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("styled-components"),a=require("@strapi/icons"),o=require("../Box/Box.cjs"),i=require("../Typography/Typography.cjs"),g=require("../Flex/Flex.cjs"),f=require("../themes/utils.cjs"),s=require("./utils.cjs"),j=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=j(h),y=l.default(o.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("@strapi/icons"),h=require("styled-components"),s=require("./utils.cjs"),o=require("../Box/Box.cjs"),g=require("../Flex/Flex.cjs"),f=require("../themes/utils.cjs"),i=require("../Typography/Typography.cjs"),j=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=j(h),y=l.default(o.Box)`
   flex: 1;
   flex-wrap: wrap;
   display: flex;

package/dist/Alert/Alert.js

@@ -1,19 +1,19 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import d from "styled-components";
 import { Cross as f, CheckCircle as m, ExclamationMarkCircle as u, Information as x } from "@strapi/icons";
+import d from "styled-components";
+import { handleBorderColor as C, handleBackgroundColor as $, handleIconColor as l } from "./utils.js";
 import { Box as t } from "../Box/Box.js";
+import { Flex as b } from "../Flex/Flex.js";
+import { buttonFocusStyle as B } from "../themes/utils.js";
 import { Typography as s } from "../Typography/Typography.js";
-import { Flex as C } from "../Flex/Flex.js";
-import { buttonFocusStyle as $ } from "../themes/utils.js";
-import { handleBorderColor as b, handleBackgroundColor as B, handleIconColor as l } from "./utils.js";
 const w = d(t)`
   flex: 1;
   flex-wrap: wrap;
   display: flex;
   flex-direction: row;
 `, k = d(t)`
-  border: 1px solid ${b};
-  background: ${B};
+  border: 1px solid ${C};
+  background: ${$};
   box-shadow: ${({
   theme: o
 }) => o.shadows.filterShadow};
@@ -29,7 +29,7 @@ const w = d(t)`
   margin-top: ${({
   theme: o
 }) => o.spaces[1]};
-  ${$};
+  ${B};
 `, A = d(t)`
   font-size: ${20 / 16}rem;
   svg path {
@@ -71,7 +71,7 @@ const w = d(t)`
   paddingTop: 5,
   variant: n,
   ...g,
-  children: a(C, {
+  children: a(b, {
     alignItems: "flex-start",
     children: [r(A, {
       paddingRight: 3,

package/dist/Avatar/Avatar.cjs

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),u=require("react"),d=require("styled-components"),p=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),t=require("./constants.cjs"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=h(d),v=i.default.img`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),u=require("react"),d=require("styled-components"),t=require("./constants.cjs"),l=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function g(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(a,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return a.default=e,Object.freeze(a)}const h=g(u),n=f(d),v=n.default.img`
   border-radius: 50%;
   object-fit: cover;
   display: block;
   position: relative;
-`,g=i.default.img`
+`,b=n.default.img`
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
   transform: translate(-${(t.previewSize-t.avatarSize)/2}px, -100%);
   margin-top: -${({theme:e})=>e.spaces[1]};
-`,f=i.default(l.Box)`
+`,y=n.default(l.Box)`
   opacity: 0.4;
-`,y=({src:e,alt:o,preview:r})=>{const[c,n]=u.useState(!1),s=Boolean(r&&c);return a.jsxs("span",{children:[s?a.jsx(g,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:typeof r=="string"?r:""}):null,a.jsxs(l.Box,{zIndex:s?1:void 0,position:"relative",onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,children:[s?a.jsx(f,{background:"neutral0",borderRadius:"50%",position:"absolute",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,zIndex:1}):null,a.jsx(v,{src:e,alt:o,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},b=i.default(x.Flex)`
+`,j=({src:e,alt:a,preview:r})=>{const[o,c]=h.useState(!1),s=Boolean(r&&o);return i.jsxs("span",{children:[s?i.jsx(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:typeof r=="string"?r:""}):null,i.jsxs(l.Box,{zIndex:s?1:void 0,position:"relative",onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,children:[s?i.jsx(y,{background:"neutral0",borderRadius:"50%",position:"absolute",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,zIndex:1}):null,i.jsx(v,{src:e,alt:a,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},S=n.default(p.Flex)`
   span {
     line-height: 0;
   }
-`,j=({children:e,background:o="primary600",textColor:r="buttonNeutral0"})=>a.jsx(b,{background:o,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:a.jsx(p.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase",children:e})});exports.Avatar=y;exports.Initials=j;
+`,z=({children:e,background:a="primary600",textColor:r="buttonNeutral0"})=>i.jsx(S,{background:a,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:i.jsx(x.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase",children:e})});exports.Avatar=j;exports.Initials=z;

package/dist/Avatar/Avatar.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import { useState as h } from "react";
+import * as h from "react";
 import o from "styled-components";
-import { Typography as u } from "../Typography/Typography.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Box as d } from "../Box/Box.js";
 import { previewSize as s, avatarSize as t } from "./constants.js";
+import { Box as d } from "../Box/Box.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { Typography as m } from "../Typography/Typography.js";
 const x = o.img`
   border-radius: 50%;
   object-fit: cover;
@@ -20,12 +20,12 @@ const x = o.img`
 }) => e.spaces[1]};
 `, g = o(d)`
   opacity: 0.4;
-`, S = ({
+`, I = ({
   src: e,
   alt: n,
   preview: r
 }) => {
-  const [c, p] = h(!1), a = Boolean(r && c);
+  const [c, p] = h.useState(!1), a = Boolean(r && c);
   return l("span", {
     children: [a ? i(f, {
       "aria-hidden": !0,
@@ -55,11 +55,11 @@ const x = o.img`
       })]
     })]
   });
-}, b = o(m)`
+}, b = o(u)`
   span {
     line-height: 0;
   }
-`, k = ({
+`, S = ({
   children: e,
   background: n = "primary600",
   textColor: r = "buttonNeutral0"
@@ -69,7 +69,7 @@ const x = o.img`
   width: `${t}px`,
   height: `${t}px`,
   justifyContent: "center",
-  children: i(u, {
+  children: i(m, {
     fontSize: 0,
     fontWeight: "bold",
     textColor: r,
@@ -78,6 +78,6 @@ const x = o.img`
   })
 });
 export {
-  S as Avatar,
-  k as Initials
+  I as Avatar,
+  S as Initials
 };

package/dist/Avatar/AvatarGroup.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),o=require("../Flex/Flex.cjs"),s=require("./constants.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=a(t),r=l.default(o.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),o=require("./constants.cjs"),s=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=a(t),r=l.default(s.Flex)`
   & > * + * {
-    margin-left: -${s.avatarSize/2}px;
+    margin-left: -${o.avatarSize/2}px;
   }
 `;exports.AvatarGroup=r;

package/dist/Avatar/AvatarGroup.js

@@ -1,9 +1,9 @@
 import r from "styled-components";
-import { Flex as o } from "../Flex/Flex.js";
-import { avatarSize as t } from "./constants.js";
-const e = r(o)`
+import { avatarSize as o } from "./constants.js";
+import { Flex as t } from "../Flex/Flex.js";
+const e = r(t)`
   & > * + * {
-    margin-left: -${t / 2}px;
+    margin-left: -${o / 2}px;
   }
 `;
 export {

package/dist/BaseButton/BaseButton.cjs

@@ -1,23 +1,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),l=require("react"),d=require("styled-components"),i=require("../themes/utils.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=t(l),p=t(d),s=p.default.button`
-  display: flex;
-  cursor: pointer;
-  padding: ${({theme:e})=>e.spaces[2]};
-  border-radius: ${({theme:e})=>e.borderRadius};
-  background: ${({theme:e})=>e.colors.neutral0};
-  border: 1px solid ${({theme:e})=>e.colors.neutral200};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),l=require("react"),c=require("styled-components"),i=require("../Flex/Flex.cjs"),d=require("../themes/utils.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=t(l),f=t(c),s=f.default(i.Flex)`
   svg {
     height: ${({theme:e})=>e.spaces[3]};
     width: ${({theme:e})=>e.spaces[3]};
-  }
-  svg {
+
     > g,
     path {
       fill: ${({theme:e})=>e.colors.neutral0};
     }
   }
+
   &[aria-disabled='true'] {
     pointer-events: none;
   }
 
-  ${i.buttonFocusStyle}
-`,r=c.default.forwardRef(({disabled:e,children:o,...a},u)=>n.jsx(s,{ref:u,"aria-disabled":e,type:"button",disabled:e,...a,children:o}));r.displayName="BaseButton";exports.BaseButton=r;exports.BaseButtonWrapper=s;
+  ${d.buttonFocusStyle}
+`,r=p.default.forwardRef(({disabled:e,children:a,...o},u)=>n.jsx(s,{ref:u,"aria-disabled":e,as:"button",type:"button",disabled:e,padding:2,hasRadius:!0,background:"neutral0",borderColor:"neutral200",cursor:"pointer",...o,children:a}));r.displayName="BaseButton";exports.BaseButton=r;exports.BaseButtonWrapper=s;