@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/BaseLink/BaseLink.js

@@ -1,23 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import i from "react";
-import l from "styled-components";
-const m = l.a`
-  cursor: pointer;
-`, p = i.forwardRef(({
-  href: o,
-  rel: a = "noreferrer noopener",
-  target: f = "_self",
-  disabled: e = !1,
-  isExternal: r = !1,
-  ...t
-}, n) => s(m, {
-  ref: n,
-  target: r ? "_blank" : f,
-  rel: r ? a : void 0,
-  href: e ? "#" : o,
-  "aria-disabled": e,
-  ...t
-}));
+import { Box as m } from "../Box/Box.js";
+const p = i.forwardRef(({ href: o, rel: a = "noreferrer noopener", target: f = "_self", disabled: r = !1, isExternal: e = !1, ...n }, t) => s(m, { as: "a", ref: t, target: e ? "_blank" : f, rel: e ? a : void 0, href: r ? "#" : o, "aria-disabled": r, cursor: "pointer", ...n }));
 p.displayName = "BaseLink";
 export {
   p as BaseLink

package/dist/BaseLink/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseLink.cjs");exports.BaseLink=e.BaseLink;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./BaseLink.cjs");exports.BaseLink=e.BaseLink;

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("./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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),d=require("react"),g=require("styled-components"),R=require("./context.cjs"),t=require("./utils.cjs"),y=require("../hooks/useId.cjs"),r=e=>e&&e.__esModule?e:{default:e},m=r(d),h=r(g),S=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=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;
+`,a=m.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const s=y.useId(),{onChange:l,selected:u,name:p,size:b}=d.useContext(R.RadioContext),o=u===e;return f.jsx(S,{ref:c,type:"radio",name:p,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,id:s,size:b,onChange:l,...i})});a.displayName="Radio";exports.BaseRadio=a;

package/dist/BaseRadio/BaseRadio.js

@@ -7,19 +7,11 @@ import { useId as $ } from "../hooks/useId.js";
 const y = g.input`
   margin: 0;
   padding: 0;
-  background-color: ${({
-  theme: e
-}) => e.colors.neutral0};
-  border: 1px solid ${({
-  theme: e
-}) => e.colors.primary600};
+  background-color: ${({ theme: e }) => e.colors.neutral0};
+  border: 1px solid ${({ theme: e }) => e.colors.primary600};
   border-radius: 50%;
-  height: ${({
-  size: e
-}) => typeof e == "number" ? e : r(e)};
-  width: ${({
-  size: e
-}) => typeof e == "number" ? e : r(e)};
+  height: ${({ size: e }) => typeof e == "number" ? e : r(e)};
+  width: ${({ size: e }) => typeof e == "number" ? e : r(e)};
   -webkit-appearance: none;
 
   &:after {
@@ -28,41 +20,22 @@ const y = g.input`
     position: relative;
     z-index: 1;
     display: block;
-    height: ${({
-  size: e
-}) => typeof e == "number" ? e : t(e)};
-    width: ${({
-  size: e
-}) => typeof e == "number" ? e : t(e)};
+    height: ${({ size: e }) => typeof e == "number" ? e : t(e)};
+    width: ${({ size: e }) => typeof e == "number" ? e : t(e)};
     left: ${d};
     top: ${d};
   }
 
   &:checked:after {
-    background: ${({
-  theme: e
-}) => e.colors.primary600};
+    background: ${({ theme: e }) => e.colors.primary600};
   }
 
   &:disabled {
-    border: 1px solid ${({
-  theme: e
-}) => e.colors.neutral300};
-    background: ${({
-  theme: e
-}) => e.colors.neutral200};
+    border: 1px solid ${({ theme: e }) => e.colors.neutral300};
+    background: ${({ theme: e }) => e.colors.neutral200};
   }
-`, R = u.forwardRef(({
-  value: e,
-  disabled: a = !1,
-  ...n
-}, i) => {
-  const c = $(), {
-    onChange: l,
-    selected: p,
-    name: m,
-    size: s
-  } = b(h), o = p === e;
+`, R = u.forwardRef(({ value: e, disabled: a = !1, ...n }, i) => {
+  const c = $(), { onChange: l, selected: p, name: m, size: s } = b(h), o = p === e;
   return f(y, {
     ref: i,
     type: "radio",
@@ -73,6 +46,7 @@ const y = g.input`
     checked: o,
     disabled: a,
     id: c,
+    // @ts-expect-error size is a html prop already.
     size: s,
     onChange: l,
     ...n

package/dist/BaseRadio/RadioGroup.cjs

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

package/dist/BaseRadio/RadioGroup.js

@@ -2,35 +2,13 @@ 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: e = "M",
-  name: o,
-  ...s
-}) => {
+const G = ({ children: f, labelledBy: c, onChange: t, value: r = "", size: e = "M", name: o, ...s }) => {
   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": c,
-      ...s,
-      children: f
-    })
-  });
+  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": c, ...s, children: f }) });
 };
 export {
   G as RadioGroup

package/dist/BaseRadio/context.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({onChange:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({onChange:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;

package/dist/BaseRadio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseRadio.cjs"),o=require("./RadioGroup.cjs");exports.BaseRadio=e.BaseRadio;exports.RadioGroup=o.RadioGroup;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./BaseRadio.cjs"),e=require("./RadioGroup.cjs");exports.BaseRadio=o.BaseRadio;exports.RadioGroup=e.RadioGroup;

package/dist/BaseRadio/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=e=>e==="M"?"18px":"20px",i=e=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e==="M"?"18px":"20px",i=e=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;

package/dist/Box/Box.cjs

@@ -1,4 +1,4 @@
-"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)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&e.__esModule?e:{default:e},m=a(n),d={color:!0,cursor:!0,height:!0,width:!0},l=m.default.div.withConfig({shouldForwardProp:(e,t)=>!d[e]&&t(e)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 
@@ -72,8 +72,8 @@
   // Text
   text-align: ${({textAlign:e})=>e};
   text-transform: ${({textTransform:e})=>e};
-  line-height: ${({lineHeight:e})=>e};
+  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
 
   // Cursor
   cursor: ${({cursor:e})=>e};
-`;exports.Box=m;
+`;exports.Box=l;

package/dist/Box/Box.js

@@ -10,211 +10,85 @@ const t = {
   shouldForwardProp: (e, o) => !t[e] && o(e)
 })`
   // Font
-  font-size: ${({
-  fontSize: e,
-  theme: o
-}) => s(o.fontSizes, e, e)};
+  font-size: ${({ fontSize: e, theme: o }) => s(o.fontSizes, e, e)};
 
   // Colors
-  background: ${({
-  theme: e,
-  background: o
-}) => s(e.colors, o, o)};
-  color: ${({
-  theme: e,
-  color: o
-}) => s(e.colors, o, void 0)};
+  background: ${({ theme: e, background: o }) => s(e.colors, o, o)};
+  color: ${({ theme: e, color: o }) => s(e.colors, o, void 0)};
 
   // Spaces
-  ${({
-  theme: e,
-  padding: o
-}) => r("padding", o, e)}
-  ${({
-  theme: e,
-  paddingTop: o
-}) => r("padding-top", o, e)}
-  ${({
-  theme: e,
-  paddingRight: o
-}) => r("padding-right", o, e)}
-  ${({
-  theme: e,
-  paddingBottom: o
-}) => r("padding-bottom", o, e)}
-  ${({
-  theme: e,
-  paddingLeft: o
-}) => r("padding-left", o, e)}
-  ${({
-  theme: e,
-  marginLeft: o
-}) => r("margin-left", o, e)}
-  ${({
-  theme: e,
-  marginRight: o
-}) => r("margin-right", o, e)}
-  ${({
-  theme: e,
-  marginTop: o
-}) => r("margin-top", o, e)}
-  ${({
-  theme: e,
-  marginBottom: o
-}) => r("margin-bottom", o, e)}
+  ${({ theme: e, padding: o }) => r("padding", o, e)}
+  ${({ theme: e, paddingTop: o }) => r("padding-top", o, e)}
+  ${({ theme: e, paddingRight: o }) => r("padding-right", o, e)}
+  ${({ theme: e, paddingBottom: o }) => r("padding-bottom", o, e)}
+  ${({ theme: e, paddingLeft: o }) => r("padding-left", o, e)}
+  ${({ theme: e, marginLeft: o }) => r("margin-left", o, e)}
+  ${({ theme: e, marginRight: o }) => r("margin-right", o, e)}
+  ${({ theme: e, marginTop: o }) => r("margin-top", o, e)}
+  ${({ theme: e, marginBottom: o }) => r("margin-bottom", o, e)}
 
   // Responsive hiding
-  ${({
-  theme: e,
-  hiddenS: o
-}) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
-  ${({
-  theme: e,
-  hiddenXS: o
-}) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
+  ${({ theme: e, hiddenS: o }) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
+  ${({ theme: e, hiddenXS: o }) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
   
 
   // Borders
-  border-radius: ${({
-  theme: e,
-  hasRadius: o,
-  borderRadius: i
-}) => o ? e.borderRadius : i};
-  border-style: ${({
-  borderStyle: e
-}) => e};
-  border-width: ${({
-  borderWidth: e
-}) => e};
-  border-color: ${({
-  borderColor: e,
-  theme: o
-}) => s(o.colors, e, void 0)};
-  border: ${({
-  theme: e,
-  borderColor: o,
-  borderStyle: i,
-  borderWidth: n
-}) => {
+  border-radius: ${({ theme: e, hasRadius: o, borderRadius: i }) => o ? e.borderRadius : i};
+  border-style: ${({ borderStyle: e }) => e};
+  border-width: ${({ borderWidth: e }) => e};
+  border-color: ${({ borderColor: e, theme: o }) => s(o.colors, e, void 0)};
+  border: ${({ theme: e, borderColor: o, borderStyle: i, borderWidth: n }) => {
   if (o && !i && typeof n > "u")
     return `1px solid ${e.colors[o]}`;
 }};
 
   // Shadows
-  box-shadow: ${({
-  theme: e,
-  shadow: o
-}) => s(e.shadows, o, void 0)};
+  box-shadow: ${({ theme: e, shadow: o }) => s(e.shadows, o, void 0)};
 
   // Handlers
-  pointer-events: ${({
-  pointerEvents: e
-}) => e};
+  pointer-events: ${({ pointerEvents: e }) => e};
   &:hover {
-    ${({
-  _hover: e,
-  theme: o
-}) => e ? e(o) : void 0}
+    ${({ _hover: e, theme: o }) => e ? e(o) : void 0}
   }
 
   // Display
-  display: ${({
-  display: e
-}) => e};
+  display: ${({ display: e }) => e};
 
   // Position
-  position: ${({
-  position: e
-}) => e};
-  left: ${({
-  left: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  right: ${({
-  right: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  top: ${({
-  top: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  bottom: ${({
-  bottom: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  z-index: ${({
-  zIndex: e
-}) => e};
-  overflow: ${({
-  overflow: e
-}) => e};
+  position: ${({ position: e }) => e};
+  left: ${({ left: e, theme: o }) => s(o.spaces, e, e)};
+  right: ${({ right: e, theme: o }) => s(o.spaces, e, e)};
+  top: ${({ top: e, theme: o }) => s(o.spaces, e, e)};
+  bottom: ${({ bottom: e, theme: o }) => s(o.spaces, e, e)};
+  z-index: ${({ zIndex: e }) => e};
+  overflow: ${({ overflow: e }) => e};
 
   // Size
-  width: ${({
-  width: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  max-width: ${({
-  maxWidth: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  min-width: ${({
-  minWidth: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  height: ${({
-  height: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  max-height: ${({
-  maxHeight: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  min-height: ${({
-  minHeight: e,
-  theme: o
-}) => s(o.spaces, e, e)};
+  width: ${({ width: e, theme: o }) => s(o.spaces, e, e)};
+  max-width: ${({ maxWidth: e, theme: o }) => s(o.spaces, e, e)};
+  min-width: ${({ minWidth: e, theme: o }) => s(o.spaces, e, e)};
+  height: ${({ height: e, theme: o }) => s(o.spaces, e, e)};
+  max-height: ${({ maxHeight: e, theme: o }) => s(o.spaces, e, e)};
+  min-height: ${({ minHeight: e, theme: o }) => s(o.spaces, e, e)};
 
   // Animation
-  transition: ${({
-  transition: e
-}) => e};
-  transform: ${({
-  transform: e
-}) => e};
-  animation: ${({
-  animation: e
-}) => e};
+  transition: ${({ transition: e }) => e};
+  transform: ${({ transform: e }) => e};
+  animation: ${({ animation: e }) => e};
 
   //Flexbox children props
-  flex-shrink: ${({
-  shrink: e
-}) => e};
-  flex-grow: ${({
-  grow: e
-}) => e};
-  flex-basis: ${({
-  basis: e
-}) => e};
-  flex: ${({
-  flex: e
-}) => e};
+  flex-shrink: ${({ shrink: e }) => e};
+  flex-grow: ${({ grow: e }) => e};
+  flex-basis: ${({ basis: e }) => e};
+  flex: ${({ flex: e }) => e};
 
   // Text
-  text-align: ${({
-  textAlign: e
-}) => e};
-  text-transform: ${({
-  textTransform: e
-}) => e};
-  line-height: ${({
-  lineHeight: e
-}) => e};
+  text-align: ${({ textAlign: e }) => e};
+  text-transform: ${({ textTransform: e }) => e};
+  line-height: ${({ theme: e, lineHeight: o }) => s(e.lineHeights, o, o)};
 
   // Cursor
-  cursor: ${({
-  cursor: e
-}) => e};
+  cursor: ${({ cursor: e }) => e};
 `;
 export {
   l as Box

package/dist/Box/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Box.cjs");exports.Box=e.Box;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Box.cjs");exports.Box=e.Box;

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

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,61 +1,28 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 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 = m(t)`
+import { Flex as o } from "../Flex/Flex.js";
+import { Box as t } from "../Box/Box.js";
+import { Typography as l } from "../Typography/Typography.js";
+const s = m(o)`
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
     path {
-      fill: ${({
-  theme: r
-}) => r.colors.neutral500};
+      fill: ${({ theme: r }) => r.colors.neutral500};
     }
   }
-  :last-of-type ${o} {
+  :last-of-type ${t} {
     display: none;
   }
   :last-of-type ${l} {
-    color: ${({
-  theme: r
-}) => r.colors.neutral800};
-    font-weight: ${({
-  theme: r
-}) => r.fontWeights.bold};
+    color: ${({ theme: r }) => r.colors.neutral800};
+    font-weight: ${({ theme: r }) => r.fontWeights.bold};
   }
-`, h = ({
-  children: r
-}) => i(s, {
-  inline: !0,
-  as: "li",
-  children: [e(l, {
-    variant: "pi",
-    textColor: "neutral600",
-    children: r
-  }), e(o, {
-    "aria-hidden": !0,
-    paddingLeft: 3,
-    paddingRight: 3,
-    children: e(d, {})
-  })]
-});
+`, h = ({ children: r }) => i(s, { inline: !0, as: "li", children: [e(l, { variant: "pi", textColor: "neutral600", children: r }), e(t, { "aria-hidden": !0, paddingLeft: 3, paddingRight: 3, children: e(d, {}) })] });
 h.displayName = "Crumb";
-const c = ({
-  children: r,
-  label: n,
-  ...a
-}) => i(t, {
-  ...a,
-  children: [e(p, {
-    children: n
-  }), e("ol", {
-    "aria-hidden": !0,
-    children: r
-  })]
-});
+const c = ({ children: r, label: n, ...a }) => i(o, { ...a, children: [e(p, { children: n }), e("ol", { "aria-hidden": !0, children: r })] });
 c.displayName = "Breadcrumbs";
 export {
   c as Breadcrumbs,

package/dist/Breadcrumbs/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Breadcrumbs.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.Crumb=e.Crumb;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Breadcrumbs.cjs");exports.Breadcrumbs=r.Breadcrumbs;exports.Crumb=r.Crumb;

package/dist/Button/Button.cjs

@@ -1,16 +1,21 @@
-"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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),v=require("@strapi/icons"),c=require("styled-components"),l=require("./constants.cjs"),r=require("./utils.cjs"),j=require("../BaseButton/BaseButton.cjs"),_=require("../Box/Box.cjs"),$=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),f=e=>e&&e.__esModule?e:{default:e},D=f(S),g=f(c),R=c.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,L=p.default.div`
-  animation: ${F} 2s infinite linear;
+`,w=g.default(v.Loader)`
+  animation: ${R} 2s infinite linear;
   will-change: transform;
-`,y=p.default(S.BaseButton)`
+`,y=g.default(j.BaseButton)`
   height: ${({theme:e,size:n})=>e.sizes.button[n]};
 
+  svg {
+    height: ${12/16}rem;
+    width: auto;
+  }
+
   &[aria-disabled='true'] {
     ${r.getDisabledStyle}
 
@@ -28,4 +33,4 @@
   }
 
   ${r.getVariantStyle}
-`,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;
+`,h=D.default.forwardRef(({variant:e=l.DEFAULT,startIcon:n,endIcon:s,disabled:b=!1,children:p,onClick:d,size:u=l.BUTTON_SIZES[0],loading:i=!1,fullWidth:a=!1,...m},B)=>{const o=b||i,x=q=>{!o&&d&&d(q)};return t.jsxs(y,{ref:B,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:x,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,...m,children:[(n||i)&&t.jsx(_.Box,{"aria-hidden":!0,children:i?t.jsx(w,{}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:p}),s&&t.jsx(T.Flex,{"aria-hidden":!0,children:s})]})});h.displayName="Button";exports.Button=h;exports.ButtonWrapper=y;