@strapi/design-system 1.6.2 → 1.6.4

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("../helpers/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 "../helpers/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,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=i(a),l={color:!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 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)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 
@@ -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:n})=>{if(t&&!s&&typeof n>"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,64 +1,67 @@
 import d from "styled-components";
-import i from "../helpers/handleResponsiveValues.js";
-import { extractStyleFromTheme as s } from "../helpers/theme.js";
-const $ = {
-  color: !0
+import s from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as r } from "../helpers/theme.js";
+const t = {
+  color: !0,
+  cursor: !0,
+  height: !0,
+  width: !0
 }, l = d.div.withConfig({
-  shouldForwardProp: (e, o) => !$[e] && o(e)
+  shouldForwardProp: (e, o) => !t[e] && o(e)
 })`
   // Font
   font-size: ${({
   fontSize: e,
   theme: o
-}) => s(o.fontSizes, e, e)};
+}) => r(o.fontSizes, e, e)};
 
   // Colors
   background: ${({
   theme: e,
   background: o
-}) => s(e.colors, o, void 0)};
+}) => r(e.colors, o, void 0)};
   color: ${({
   theme: e,
   color: o
-}) => s(e.colors, o, void 0)};
+}) => r(e.colors, o, void 0)};
 
   // Spaces
   ${({
   theme: e,
   padding: o
-}) => i("padding", o, e)}
+}) => s("padding", o, e)}
   ${({
   theme: e,
   paddingTop: o
-}) => i("padding-top", o, e)}
+}) => s("padding-top", o, e)}
   ${({
   theme: e,
   paddingRight: o
-}) => i("padding-right", o, e)}
+}) => s("padding-right", o, e)}
   ${({
   theme: e,
   paddingBottom: o
-}) => i("padding-bottom", o, e)}
+}) => s("padding-bottom", o, e)}
   ${({
   theme: e,
   paddingLeft: o
-}) => i("padding-left", o, e)}
+}) => s("padding-left", o, e)}
   ${({
   theme: e,
   marginLeft: o
-}) => i("margin-left", o, e)}
+}) => s("margin-left", o, e)}
   ${({
   theme: e,
   marginRight: o
-}) => i("margin-right", o, e)}
+}) => s("margin-right", o, e)}
   ${({
   theme: e,
   marginTop: o
-}) => i("margin-top", o, e)}
+}) => s("margin-top", o, e)}
   ${({
   theme: e,
   marginBottom: o
-}) => i("margin-bottom", o, e)}
+}) => s("margin-bottom", o, e)}
 
   // Responsive hiding
   ${({
@@ -75,8 +78,8 @@ const $ = {
   border-radius: ${({
   theme: e,
   hasRadius: o,
-  borderRadius: r
-}) => o ? e.borderRadius : r};
+  borderRadius: i
+}) => o ? e.borderRadius : i};
   border-style: ${({
   borderStyle: e
 }) => e};
@@ -86,14 +89,14 @@ const $ = {
   border-color: ${({
   borderColor: e,
   theme: o
-}) => s(o.colors, e, void 0)};
+}) => r(o.colors, e, void 0)};
   border: ${({
   theme: e,
   borderColor: o,
-  borderStyle: r,
+  borderStyle: i,
   borderWidth: n
 }) => {
-  if (o && !r && !n)
+  if (o && !i && typeof n > "u")
     return `1px solid ${e.colors[o]}`;
 }};
 
@@ -101,7 +104,7 @@ const $ = {
   box-shadow: ${({
   theme: e,
   shadow: o
-}) => s(e.shadows, o, void 0)};
+}) => r(e.shadows, o, void 0)};
 
   // Handlers
   pointer-events: ${({
@@ -126,19 +129,19 @@ const $ = {
   left: ${({
   left: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   right: ${({
   right: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   top: ${({
   top: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   bottom: ${({
   bottom: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   z-index: ${({
   zIndex: e
 }) => e};
@@ -150,27 +153,27 @@ const $ = {
   width: ${({
   width: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   max-width: ${({
   maxWidth: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   min-width: ${({
   minWidth: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   height: ${({
   height: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   max-height: ${({
   maxHeight: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   min-height: ${({
   minHeight: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(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;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,11 +1,11 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import d from "styled-components";
-import { ChevronRight as m } from "@strapi/icons";
-import { Typography as o } from "../Typography/Typography.js";
-import { Box as t } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
+import { ChevronRight as d } from "@strapi/icons";
+import m from "styled-components";
+import { Box as o } from "../Box/Box.js";
+import { Flex as t } from "../Flex/Flex.js";
+import { Typography as l } from "../Typography/Typography.js";
 import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
-const s = d(l)`
+const s = m(t)`
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
@@ -15,10 +15,10 @@ const s = d(l)`
 }) => r.colors.neutral500};
     }
   }
-  :last-of-type ${t} {
+  :last-of-type ${o} {
     display: none;
   }
-  :last-of-type ${o} {
+  :last-of-type ${l} {
     color: ${({
   theme: r
 }) => r.colors.neutral800};
@@ -31,15 +31,15 @@ const s = d(l)`
 }) => i(s, {
   inline: !0,
   as: "li",
-  children: [e(o, {
+  children: [e(l, {
     variant: "pi",
     textColor: "neutral600",
     children: r
-  }), e(t, {
+  }), e(o, {
     "aria-hidden": !0,
     paddingLeft: 3,
     paddingRight: 3,
-    children: e(m, {})
+    children: e(d, {})
   })]
 });
 h.displayName = "Crumb";
@@ -47,7 +47,7 @@ const c = ({
   children: r,
   label: n,
   ...a
-}) => i(l, {
+}) => i(t, {
   ...a,
   children: [e(p, {
     children: n

package/dist/Button/Button.cjs

@@ -1,48 +1,31 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("react"),f=require("styled-components"),q=require("@strapi/icons"),p=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),T=require("../BaseButton/BaseButton.cjs"),r=require("./utils.cjs"),u=require("./constants.cjs"),g=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},_=g(S),n=g(f),D=f.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),v=require("@strapi/icons"),l=require("styled-components"),d=require("./constants.cjs"),r=require("./utils.cjs"),S=require("../BaseButton/BaseButton.cjs"),T=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),$=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},D=f(q),p=f(l),F=l.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,L=n.default.div`
-  animation: ${D} 2s infinite linear;
+`,L=p.default.div`
+  animation: ${F} 2s infinite linear;
   will-change: transform;
-`,R=n.default(s.Box)`
-  height: 100%;
-`,y=n.default(T.BaseButton)`
-  align-items: center;
-  background-color: ${({theme:t})=>t.colors.buttonPrimary600};
-  border: 1px solid ${({theme:t})=>t.colors.buttonPrimary600};
-  height: ${({theme:t,size:i})=>t.sizes.button[i]};
-  padding-left: ${({theme:t})=>t.spaces[4]};
-  padding-right: ${({theme:t})=>t.spaces[4]};
-
-  ${s.Box} {
-    display: flex;
-    align-items: center;
-  }
-
-  ${p.Typography} {
-    color: ${({theme:t})=>t.colors.buttonNeutral0};
-  }
+`,y=p.default(S.BaseButton)`
+  height: ${({theme:e,size:n})=>e.sizes.button[n]};
 
   &[aria-disabled='true'] {
     ${r.getDisabledStyle}
+
     &:active {
       ${r.getDisabledStyle}
     }
   }
+
   &:hover {
     ${r.getHoverStyle}
   }
+
   &:active {
     ${r.getActiveStyle}
   }
+
   ${r.getVariantStyle}
-  ${({fullWidth:t})=>t&&`
-    display: inline-flex;
-    justify-content: center;
-    width: 100%;
-  `}
-`,h=_.default.forwardRef(({variant:t=u.DEFAULT,startIcon:i,endIcon:l,disabled:B=!1,children:x,onClick:c,size:d=u.BUTTON_SIZES[0],loading:a=!1,fullWidth:b=!1,...j},m)=>{const o=B||a,$=v=>{!o&&c&&c(v)};return e.jsxs(y,{ref:m,"aria-disabled":o,disabled:o,size:d,variant:t,onClick:$,fullWidth:b,...j,children:[(i||a)&&e.jsx(R,{"aria-hidden":!0,paddingRight:2,children:a?e.jsx(L,{children:e.jsx(q.Loader,{})}):i}),e.jsx(p.Typography,{variant:d==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,children:x}),l&&e.jsx(s.Box,{"aria-hidden":!0,paddingLeft:2,children:l})]})});h.displayName="Button";exports.Button=h;exports.ButtonWrapper=y;
+`,g=D.default.forwardRef(({variant:e=d.DEFAULT,startIcon:n,endIcon:s,disabled:h=!1,children:B,onClick:c,size:u=d.BUTTON_SIZES[0],loading:i=!1,fullWidth:a=!1,...j},x)=>{const o=h||i,b=m=>{!o&&c&&c(m)};return t.jsxs(y,{ref:x,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:b,fullWidth:a,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:a,justifyContent:a?"center":void 0,paddingLeft:4,paddingRight:4,width:a?"100%":void 0,...j,children:[(n||i)&&t.jsx(T.Box,{"aria-hidden":!0,children:i?t.jsx(L,{children:t.jsx(v.Loader,{})}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:B}),s&&t.jsx(_.Flex,{"aria-hidden":!0,children:s})]})});g.displayName="Button";exports.Button=g;exports.ButtonWrapper=y;