@strapi/design-system 1.6.3 → 1.6.5

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;

package/dist/BaseButton/BaseButton.js

@@ -1,57 +1,50 @@
-import { jsx as s } from "react/jsx-runtime";
-import a from "react";
-import d from "styled-components";
-import { buttonFocusStyle as i } from "../themes/utils.js";
-const n = d.button`
-  display: flex;
-  cursor: pointer;
-  padding: ${({
-  theme: r
-}) => r.spaces[2]};
-  border-radius: ${({
-  theme: r
-}) => r.borderRadius};
-  background: ${({
-  theme: r
-}) => r.colors.neutral0};
-  border: 1px solid ${({
-  theme: r
-}) => r.colors.neutral200};
+import { jsx as a } from "react/jsx-runtime";
+import s from "react";
+import n from "styled-components";
+import { Flex as i } from "../Flex/Flex.js";
+import { buttonFocusStyle as u } from "../themes/utils.js";
+const p = n(i)`
   svg {
     height: ${({
-  theme: r
-}) => r.spaces[3]};
+  theme: t
+}) => t.spaces[3]};
     width: ${({
-  theme: r
-}) => r.spaces[3]};
-  }
-  svg {
+  theme: t
+}) => t.spaces[3]};
+
     > g,
     path {
       fill: ${({
-  theme: r
-}) => r.colors.neutral0};
+  theme: t
+}) => t.colors.neutral0};
     }
   }
+
   &[aria-disabled='true'] {
     pointer-events: none;
   }
 
-  ${i}
-`, l = a.forwardRef(({
-  disabled: r,
-  children: t,
+  ${u}
+`, d = s.forwardRef(({
+  disabled: t,
+  children: r,
   ...e
-}, o) => s(n, {
+}, o) => a(p, {
   ref: o,
-  "aria-disabled": r,
+  "aria-disabled": t,
+  as: "button",
   type: "button",
-  disabled: r,
+  disabled: t,
+  padding: 2,
+  hasRadius: !0,
+  background: "neutral0",
+  borderColor: "neutral200",
+  cursor: "pointer",
   ...e,
-  children: t
+  children: r
 }));
-l.displayName = "BaseButton";
+d.displayName = "BaseButton";
 export {
-  l as BaseButton,
-  n as BaseButtonWrapper
+  d as BaseButton,
+  p as BaseButtonWrapper
 };

package/dist/BaseCheckbox/BaseCheckbox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),a=require("react"),b=require("styled-components"),p=require("../Box/Box.cjs"),s=require("./utils.cjs"),k=require("./assets/checkmark.cjs"),h=require("./assets/checkmark-black.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},x=f(b),g=x.default.input`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),b=require("react"),p=require("styled-components"),f=require("./assets/checkmark-black.cjs"),k=require("./assets/checkmark.cjs"),s=require("./utils.cjs"),h=require("../Box/Box.cjs"),x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const l=g(b),m=x(p),y=m.default.input`
   height: ${s.getCheckboxSize};
   min-width: ${s.getCheckboxSize};
   margin: 0;
@@ -25,7 +25,7 @@
     }
 
     &:disabled:after {
-      background: url(${h}) no-repeat no-repeat center center;
+      background: url(${f}) no-repeat no-repeat center center;
     }
   }
 
@@ -59,4 +59,4 @@
       }
     }
   }
-`,n=({indeterminate:e=!1,size:l="M",name:i,value:o=!1,onValueChange:t,...u})=>{const r=a.useRef(null);a.useEffect(()=>{r.current&&e?r.current.indeterminate=e:r.current.indeterminate=!1},[e]);const d=()=>{t&&t(!o)};return c.jsx(p.Box,{children:c.jsx(g,{size:l,checked:o,onChange:d,type:"checkbox",ref:r,name:i,...u})})};n.displayName="BaseCheckbox";exports.BaseCheckbox=n;
+`,i=({indeterminate:e=!1,size:o="M",name:r,value:t=!1,onValueChange:a,...u})=>{const c=l.useRef(null);l.useEffect(()=>{c.current&&e?c.current.indeterminate=e:c.current.indeterminate=!1},[e]);const d=()=>{a&&a(!t)};return n.jsx(h.Box,{children:n.jsx(y,{size:o,checked:t,onChange:d,type:"checkbox",ref:c,name:r,...u})})};i.displayName="BaseCheckbox";exports.BaseCheckbox=i;

package/dist/BaseCheckbox/BaseCheckbox.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useRef as s, useEffect as d } from "react";
-import p from "styled-components";
-import { Box as u } from "../Box/Box.js";
-import { getCheckboxSize as c } from "./utils.js";
-import b from "./assets/checkmark.js";
-import m from "./assets/checkmark-black.js";
-const f = p.input`
-  height: ${c};
-  min-width: ${c};
+import * as c from "react";
+import d from "styled-components";
+import p from "./assets/checkmark-black.js";
+import u from "./assets/checkmark.js";
+import { getCheckboxSize as n } from "./utils.js";
+import { Box as b } from "../Box/Box.js";
+const m = d.input`
+  height: ${n};
+  min-width: ${n};
   margin: 0;
   border-radius: ${({
   theme: r
@@ -33,7 +33,7 @@ const f = p.input`
       content: '';
       display: block;
       position: relative;
-      background: url(${b}) no-repeat no-repeat center center;
+      background: url(${u}) no-repeat no-repeat center center;
       width: 10px;
       height: 10px;
       left: 50%;
@@ -42,7 +42,7 @@ const f = p.input`
     }
 
     &:disabled:after {
-      background: url(${m}) no-repeat no-repeat center center;
+      background: url(${p}) no-repeat no-repeat center center;
     }
   }
 
@@ -92,32 +92,32 @@ const f = p.input`
       }
     }
   }
-`, h = ({
+`, f = ({
   indeterminate: r = !1,
-  size: n = "M",
-  name: l,
+  size: l = "M",
+  name: s,
   value: e = !1,
   onValueChange: t,
   ...i
 }) => {
-  const o = s(null);
-  return d(() => {
+  const o = c.useRef(null);
+  return c.useEffect(() => {
     o.current && r ? o.current.indeterminate = r : o.current.indeterminate = !1;
-  }, [r]), a(u, {
-    children: a(f, {
-      size: n,
+  }, [r]), a(b, {
+    children: a(m, {
+      size: l,
       checked: e,
       onChange: () => {
         t && t(!e);
       },
       type: "checkbox",
       ref: o,
-      name: l,
+      name: s,
       ...i
     })
   });
 };
-h.displayName = "BaseCheckbox";
+f.displayName = "BaseCheckbox";
 export {
-  h as BaseCheckbox
+  f as BaseCheckbox
 };

package/dist/BaseRadio/BaseRadio.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),r=require("react"),g=require("styled-components"),y=require("../helpers/useId.cjs"),R=require("./context.cjs"),t=require("./utils.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=d(r),h=d(g),x=h.default.input`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),r=require("react"),g=require("styled-components"),y=require("./context.cjs"),t=require("./utils.cjs"),R=require("../hooks/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=d(r),h=d(g),x=h.default.input`
   margin: 0;
   padding: 0;
   background-color: ${({theme:e})=>e.colors.neutral0};
@@ -28,4 +28,4 @@
     border: 1px solid ${({theme:e})=>e.colors.neutral300};
     background: ${({theme:e})=>e.colors.neutral200};
   }
-`,a=m.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const s=y.useId(),{onChange:l,selected:u,name:p,size:f}=r.useContext(R.RadioContext),o=u===e;return b.jsx(x,{ref:c,type:"radio",name:p,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,id:s,size:f,onChange:l,...i})});a.displayName="Radio";exports.BaseRadio=a;
+`,a=m.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const s=R.useId(),{onChange:l,selected:u,name:p,size:f}=r.useContext(y.RadioContext),o=u===e;return b.jsx(x,{ref:c,type:"radio",name:p,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,id:s,size:f,onChange:l,...i})});a.displayName="Radio";exports.BaseRadio=a;

package/dist/BaseRadio/BaseRadio.js

@@ -1,9 +1,9 @@
 import { jsx as f } from "react/jsx-runtime";
 import u, { useContext as b } from "react";
 import g from "styled-components";
-import { useId as h } from "../helpers/useId.js";
-import { RadioContext as $ } from "./context.js";
+import { RadioContext as h } from "./context.js";
 import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as d } from "./utils.js";
+import { useId as $ } from "../hooks/useId.js";
 const y = g.input`
   margin: 0;
   padding: 0;
@@ -57,12 +57,12 @@ const y = g.input`
   disabled: a = !1,
   ...n
 }, i) => {
-  const c = h(), {
+  const c = $(), {
     onChange: l,
     selected: p,
     name: m,
     size: s
-  } = b($), o = p === e;
+  } = b(h), o = p === e;
   return f(y, {
     ref: i,
     type: "radio",

package/dist/BaseRadio/RadioGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),a=require("./context.cjs"),l=require("../helpers/setTabIndexOnFirstItem.cjs"),x=({children:i,labelledBy:n,onChange:u,value:e="",size:c="M",name:t,...d})=>{const r=s.useRef(null);return s.useLayoutEffect(()=>{e||l.setTabIndexOnFirstItem(r.current,`[name="${t}"]`)},[e,t]),o.jsx(a.RadioContext.Provider,{value:{onChange:u,selected:e,name:t,size:c},children:o.jsx("div",{ref:r,role:"radiogroup","aria-labelledby":n,...d,children:i})})};exports.RadioGroup=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),r=require("react"),l=require("./context.cjs"),x=require("../helpers/setTabIndexOnFirstItem.cjs"),b=({children:n,labelledBy:u,onChange:o,value:e="",size:s="M",name:t,...d})=>{const i=r.useRef(null);r.useLayoutEffect(()=>{e||x.setTabIndexOnFirstItem(i.current,`[name="${t}"]`)},[e,t]);const a=r.useMemo(()=>({onChange:o,selected:e,name:t,size:s}),[t,o,s,e]);return c.jsx(l.RadioContext.Provider,{value:a,children:c.jsx("div",{ref:i,role:"radiogroup","aria-labelledby":u,...d,children:n})})};exports.RadioGroup=b;

package/dist/BaseRadio/RadioGroup.js

@@ -1,35 +1,37 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useRef as m, useLayoutEffect as p } from "react";
-import { RadioContext as s } from "./context.js";
-import { setTabIndexOnFirstItem as u } from "../helpers/setTabIndexOnFirstItem.js";
-const b = ({
-  children: i,
-  labelledBy: d,
-  onChange: f,
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as n, useLayoutEffect as p, useMemo as u } from "react";
+import { RadioContext as l } from "./context.js";
+import { setTabIndexOnFirstItem as x } from "../helpers/setTabIndexOnFirstItem.js";
+const G = ({
+  children: f,
+  labelledBy: c,
+  onChange: t,
   value: r = "",
-  size: n = "M",
+  size: e = "M",
   name: o,
-  ...l
+  ...s
 }) => {
-  const e = m(null);
-  return p(() => {
-    r || u(e.current, `[name="${o}"]`);
-  }, [r, o]), t(s.Provider, {
-    value: {
-      onChange: f,
-      selected: r,
-      name: o,
-      size: n
-    },
-    children: t("div", {
-      ref: e,
+  const i = n(null);
+  p(() => {
+    r || x(i.current, `[name="${o}"]`);
+  }, [r, o]);
+  const m = u(() => ({
+    onChange: t,
+    selected: r,
+    name: o,
+    size: e
+  }), [o, t, e, r]);
+  return d(l.Provider, {
+    value: m,
+    children: d("div", {
+      ref: i,
       role: "radiogroup",
-      "aria-labelledby": d,
-      ...l,
-      children: i
+      "aria-labelledby": c,
+      ...s,
+      children: f
     })
   });
 };
 export {
-  b as RadioGroup
+  G as RadioGroup
 };

package/dist/Box/Box.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(i),l={color:!0,cursor:!0,height:!0,width:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(n),l={color:!0,cursor:!0,height:!0,width:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 
   // Colors
-  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
+  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,t)};
   color: ${({theme:e,color:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
 
   // Spaces
@@ -27,7 +27,7 @@
   border-style: ${({borderStyle:e})=>e};
   border-width: ${({borderWidth:e})=>e};
   border-color: ${({borderColor:e,theme:t})=>r.extractStyleFromTheme(t.colors,e,void 0)};
-  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:n})=>{if(t&&!s&&!n)return`1px solid ${e.colors[t]}`}};
+  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:i})=>{if(t&&!s&&typeof i>"u")return`1px solid ${e.colors[t]}`}};
 
   // Shadows
   box-shadow: ${({theme:e,shadow:t})=>r.extractStyleFromTheme(e.shadows,t,void 0)};

package/dist/Box/Box.js

@@ -1,6 +1,6 @@
 import d from "styled-components";
-import s from "../helpers/handleResponsiveValues.js";
-import { extractStyleFromTheme as r } from "../helpers/theme.js";
+import r from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
 const t = {
   color: !0,
   cursor: !0,
@@ -13,55 +13,55 @@ const t = {
   font-size: ${({
   fontSize: e,
   theme: o
-}) => r(o.fontSizes, e, e)};
+}) => s(o.fontSizes, e, e)};
 
   // Colors
   background: ${({
   theme: e,
   background: o
-}) => r(e.colors, o, void 0)};
+}) => s(e.colors, o, o)};
   color: ${({
   theme: e,
   color: o
-}) => r(e.colors, o, void 0)};
+}) => s(e.colors, o, void 0)};
 
   // Spaces
   ${({
   theme: e,
   padding: o
-}) => s("padding", o, e)}
+}) => r("padding", o, e)}
   ${({
   theme: e,
   paddingTop: o
-}) => s("padding-top", o, e)}
+}) => r("padding-top", o, e)}
   ${({
   theme: e,
   paddingRight: o
-}) => s("padding-right", o, e)}
+}) => r("padding-right", o, e)}
   ${({
   theme: e,
   paddingBottom: o
-}) => s("padding-bottom", o, e)}
+}) => r("padding-bottom", o, e)}
   ${({
   theme: e,
   paddingLeft: o
-}) => s("padding-left", o, e)}
+}) => r("padding-left", o, e)}
   ${({
   theme: e,
   marginLeft: o
-}) => s("margin-left", o, e)}
+}) => r("margin-left", o, e)}
   ${({
   theme: e,
   marginRight: o
-}) => s("margin-right", o, e)}
+}) => r("margin-right", o, e)}
   ${({
   theme: e,
   marginTop: o
-}) => s("margin-top", o, e)}
+}) => r("margin-top", o, e)}
   ${({
   theme: e,
   marginBottom: o
-}) => s("margin-bottom", o, e)}
+}) => r("margin-bottom", o, e)}
 
   // Responsive hiding
   ${({
@@ -89,14 +89,14 @@ const t = {
   border-color: ${({
   borderColor: e,
   theme: o
-}) => r(o.colors, e, void 0)};
+}) => s(o.colors, e, void 0)};
   border: ${({
   theme: e,
   borderColor: o,
   borderStyle: i,
   borderWidth: n
 }) => {
-  if (o && !i && !n)
+  if (o && !i && typeof n > "u")
     return `1px solid ${e.colors[o]}`;
 }};
 
@@ -104,7 +104,7 @@ const t = {
   box-shadow: ${({
   theme: e,
   shadow: o
-}) => r(e.shadows, o, void 0)};
+}) => s(e.shadows, o, void 0)};
 
   // Handlers
   pointer-events: ${({
@@ -129,19 +129,19 @@ const t = {
   left: ${({
   left: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   right: ${({
   right: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   top: ${({
   top: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   bottom: ${({
   bottom: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   z-index: ${({
   zIndex: e
 }) => e};
@@ -153,27 +153,27 @@ const t = {
   width: ${({
   width: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   max-width: ${({
   maxWidth: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   min-width: ${({
   minWidth: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   height: ${({
   height: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   max-height: ${({
   maxHeight: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   min-height: ${({
   minHeight: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
 
   // Animation
   transition: ${({

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("styled-components"),u=require("@strapi/icons"),t=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=p(d),h=y.default(i.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("@strapi/icons"),u=require("styled-components"),t=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=p(u),h=y.default(s.Flex)`
   svg {
     height: ${10/16}rem;
     width: ${10/16}rem;
@@ -6,11 +6,11 @@
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-  :last-of-type ${s.Box} {
+  :last-of-type ${t.Box} {
     display: none;
   }
-  :last-of-type ${t.Typography} {
+  :last-of-type ${i.Typography} {
     color: ${({theme:e})=>e.colors.neutral800};
     font-weight: ${({theme:e})=>e.fontWeights.bold};
   }
-`,l=({children:e})=>r.jsxs(h,{inline:!0,as:"li",children:[r.jsx(t.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(s.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(u.ChevronRight,{})})]});l.displayName="Crumb";const o=({children:e,label:n,...a})=>r.jsxs(i.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:n}),r.jsx("ol",{"aria-hidden":!0,children:e})]});o.displayName="Breadcrumbs";exports.Breadcrumbs=o;exports.Crumb=l;
+`,l=({children:e})=>r.jsxs(h,{inline:!0,as:"li",children:[r.jsx(i.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(t.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(d.ChevronRight,{})})]});l.displayName="Crumb";const o=({children:e,label:n,...a})=>r.jsxs(s.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:n}),r.jsx("ol",{"aria-hidden":!0,children:e})]});o.displayName="Breadcrumbs";exports.Breadcrumbs=o;exports.Crumb=l;