@strapi/design-system 1.3.0 → 1.3.1-alpha.1

package/dist/BaseRadio/RadioGroup.js

@@ -1,32 +1,52 @@
-import t, { useRef as f, useLayoutEffect as p } from "react";
-import e from "prop-types";
-import { RadioContext as m } from "./context.js";
-import { setTabIndexOnFirstItem as c } from "../helpers/setTabIndexOnFirstItem.js";
-const n = ({ children: s, labelledBy: a, onChange: d, value: r, size: u, name: o, ...l }) => {
-  const i = f(null);
-  return p(() => {
-    r || c(i.current, `[name="${o}"]`);
-  }, [r]), /* @__PURE__ */ t.createElement(m.Provider, {
-    value: { onChange: d, selected: r, name: o, size: u }
-  }, /* @__PURE__ */ t.createElement("div", {
-    ref: i,
+var b = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var u = (e, o, r) => o in e ? b(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, p = (e, o) => {
+  for (var r in o || (o = {}))
+    l.call(o, r) && u(e, r, o[r]);
+  if (n)
+    for (var r of n(o))
+      f.call(o, r) && u(e, r, o[r]);
+  return e;
+};
+var m = (e, o) => {
+  var r = {};
+  for (var i in e)
+    l.call(e, i) && o.indexOf(i) < 0 && (r[i] = e[i]);
+  if (e != null && n)
+    for (var i of n(e))
+      o.indexOf(i) < 0 && f.call(e, i) && (r[i] = e[i]);
+  return r;
+};
+import c, { useRef as q, useLayoutEffect as v } from "react";
+import t from "prop-types";
+import { RadioContext as x } from "./context.js";
+import { setTabIndexOnFirstItem as E } from "../helpers/setTabIndexOnFirstItem.js";
+const R = (P) => {
+  var a = P, { children: e, labelledBy: o, onChange: r, value: i, size: g, name: s } = a, y = m(a, ["children", "labelledBy", "onChange", "value", "size", "name"]);
+  const d = q(null);
+  return v(() => {
+    i || E(d.current, `[name="${s}"]`);
+  }, [i]), /* @__PURE__ */ c.createElement(x.Provider, {
+    value: { onChange: r, selected: i, name: s, size: g }
+  }, /* @__PURE__ */ c.createElement("div", p({
+    ref: d,
     role: "radiogroup",
-    "aria-labelledby": a,
-    ...l
-  }, s));
+    "aria-labelledby": o
+  }, y), e));
 };
-n.defaultProps = {
+R.defaultProps = {
   value: "",
   size: "M"
 };
-n.propTypes = {
-  children: e.node.isRequired,
-  labelledBy: e.string.isRequired,
-  name: e.string.isRequired,
-  onChange: e.func.isRequired,
-  size: e.oneOf(["M", "L"]),
-  value: e.string
+R.propTypes = {
+  children: t.node.isRequired,
+  labelledBy: t.string.isRequired,
+  name: t.string.isRequired,
+  onChange: t.func.isRequired,
+  size: t.oneOf(["M", "L"]),
+  value: t.string
 };
 export {
-  n as RadioGroup
+  R as RadioGroup
 };

package/dist/Box/BoxProps.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),l=require("prop-types"),a=d=>d&&typeof d=="object"&&"default"in d?d:{default:d},r=a(u),e=a(l),t=d=>r.default.createElement("div",{...d}),o={background:void 0,borderColor:void 0,color:void 0,hiddenS:!1,hiddenXS:!1,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,hasRadius:!1,shadow:void 0,children:null,shrink:void 0,grow:void 0,basis:void 0,flex:void 0,_hover:()=>{}},f={_hover:e.default.func,background:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.string]),borderColor:e.default.string,children:e.default.oneOfType([e.default.node,e.default.string]),color:e.default.string,flex:e.default.oneOfType([e.default.string,e.default.string]),grow:e.default.oneOfType([e.default.string,e.default.string]),hasRadius:e.default.bool,hiddenS:e.default.bool,hiddenXS:e.default.bool,padding:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingBottom:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingLeft:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingRight:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingTop:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),shadow:e.default.string,shrink:e.default.oneOfType([e.default.string,e.default.string])};t.defaultProps=o;t.propTypes=f;exports.BoxProps=t;exports.boxDefaultProps=o;exports.boxPropTypes=f;
+"use strict";var s=Object.defineProperty;var f=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var u=(d,t,a)=>t in d?s(d,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):d[t]=a,l=(d,t)=>{for(var a in t||(t={}))p.call(t,a)&&u(d,a,t[a]);if(f)for(var a of f(t))g.call(t,a)&&u(d,a,t[a]);return d};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),y=require("prop-types"),r=d=>d&&typeof d=="object"&&"default"in d?d:{default:d},c=r(b),e=r(y),o=d=>c.default.createElement("div",l({},d)),n={background:void 0,borderColor:void 0,color:void 0,hiddenS:!1,hiddenXS:!1,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,hasRadius:!1,shadow:void 0,children:null,shrink:void 0,grow:void 0,basis:void 0,flex:void 0,_hover:()=>{}},i={_hover:e.default.func,background:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.string]),borderColor:e.default.string,children:e.default.oneOfType([e.default.node,e.default.string]),color:e.default.string,flex:e.default.oneOfType([e.default.string,e.default.string]),grow:e.default.oneOfType([e.default.string,e.default.string]),hasRadius:e.default.bool,hiddenS:e.default.bool,hiddenXS:e.default.bool,padding:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingBottom:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingLeft:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingRight:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingTop:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),shadow:e.default.string,shrink:e.default.oneOfType([e.default.string,e.default.string])};o.defaultProps=n;o.propTypes=i;exports.BoxProps=o;exports.boxDefaultProps=n;exports.boxPropTypes=i;

package/dist/Box/BoxProps.js

@@ -1,8 +1,17 @@
-import n from "react";
+var p = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var t = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var i = (n, r, e) => r in n ? p(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e, a = (n, r) => {
+  for (var e in r || (r = {}))
+    t.call(r, e) && i(n, e, r[e]);
+  if (d)
+    for (var e of d(r))
+      g.call(r, e) && i(n, e, r[e]);
+  return n;
+};
+import f from "react";
 import o from "prop-types";
-const r = (e) => /* @__PURE__ */ n.createElement("div", {
-  ...e
-}), d = {
+const s = (n) => /* @__PURE__ */ f.createElement("div", a({}, n)), b = {
   background: void 0,
   borderColor: void 0,
   color: void 0,
@@ -22,7 +31,7 @@ const r = (e) => /* @__PURE__ */ n.createElement("div", {
   flex: void 0,
   _hover: () => {
   }
-}, i = {
+}, l = {
   _hover: o.func,
   background: o.string,
   basis: o.oneOfType([o.string, o.string]),
@@ -42,10 +51,10 @@ const r = (e) => /* @__PURE__ */ n.createElement("div", {
   shadow: o.string,
   shrink: o.oneOfType([o.string, o.string])
 };
-r.defaultProps = d;
-r.propTypes = i;
+s.defaultProps = b;
+s.propTypes = l;
 export {
-  r as BoxProps,
-  d as boxDefaultProps,
-  i as boxPropTypes
+  s as BoxProps,
+  b as boxDefaultProps,
+  l as boxPropTypes
 };

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),y=require("prop-types"),f=require("styled-components"),h=require("@strapi/icons/ChevronRight"),u=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),d=require("../Flex/Flex.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(p),r=l(y),g=l(f),b=l(h),T=g.default(d.Flex)`
+"use strict";var q=Object.defineProperty;var n=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var c=(e,r,t)=>r in e?q(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))p.call(r,t)&&c(e,t,r[t]);if(n)for(var t of n(r))y.call(r,t)&&c(e,t,r[t]);return e};var h=(e,r)=>{var t={};for(var l in e)p.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&n)for(var l of n(e))r.indexOf(l)<0&&y.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),_=require("prop-types"),R=require("styled-components"),B=require("@strapi/icons/ChevronRight"),g=require("../Typography/Typography.cjs"),b=require("../Box/Box.cjs"),T=require("../Flex/Flex.cjs"),C=require("../VisuallyHidden/VisuallyHidden.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=u(x),o=u(_),v=u(R),E=u(B),$=v.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 ${s.Box} {
+  :last-of-type ${b.Box} {
     display: none;
   }
-  :last-of-type ${u.Typography} {
+  :last-of-type ${g.Typography} {
     color: ${({theme:e})=>e.colors.neutral800};
     font-weight: ${({theme:e})=>e.fontWeights.bold};
   }
-`,a=({children:e})=>t.default.createElement(T,{inline:!0,as:"li"},t.default.createElement(u.Typography,{variant:"pi",textColor:"neutral600"},e),t.default.createElement(s.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3},t.default.createElement(b.default,null)));a.displayName="Crumb";a.propTypes={children:r.default.node.isRequired};const n=r.default.shape({type:r.default.oneOf([a])}),o=({children:e,label:i,...c})=>t.default.createElement(d.Flex,{...c},t.default.createElement(m.VisuallyHidden,null,i),t.default.createElement("ol",{"aria-hidden":!0},e));o.displayName="Breadcrumbs";o.propTypes={children:r.default.oneOfType([r.default.arrayOf(n),n]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=o;exports.Crumb=a;
+`,s=({children:e})=>a.default.createElement($,{inline:!0,as:"li"},a.default.createElement(g.Typography,{variant:"pi",textColor:"neutral600"},e),a.default.createElement(b.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3},a.default.createElement(E.default,null)));s.displayName="Crumb";s.propTypes={children:o.default.node.isRequired};const m=o.default.shape({type:o.default.oneOf([s])}),d=l=>{var i=l,{children:e,label:r}=i,t=h(i,["children","label"]);return a.default.createElement(T.Flex,f({},t),a.default.createElement(C.VisuallyHidden,null,r),a.default.createElement("ol",{"aria-hidden":!0},e))};d.displayName="Breadcrumbs";d.propTypes={children:o.default.oneOfType([o.default.arrayOf(m),m]).isRequired,label:o.default.string.isRequired};exports.Breadcrumbs=d;exports.Crumb=s;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,12 +1,32 @@
-import r from "react";
-import t from "prop-types";
-import d from "styled-components";
-import c from "@strapi/icons/ChevronRight";
-import { Typography as a } from "../Typography/Typography.js";
-import { Box as l } from "../Box/Box.js";
-import { Flex as n } from "../Flex/Flex.js";
-import { VisuallyHidden as u } from "../VisuallyHidden/VisuallyHidden.js";
-const f = d(n)`
+var E = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var m = (e, t, r) => t in e ? E(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, c = (e, t) => {
+  for (var r in t || (t = {}))
+    s.call(t, r) && m(e, r, t[r]);
+  if (l)
+    for (var r of l(t))
+      d.call(t, r) && m(e, r, t[r]);
+  return e;
+};
+var u = (e, t) => {
+  var r = {};
+  for (var o in e)
+    s.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && l)
+    for (var o of l(e))
+      t.indexOf(o) < 0 && d.call(e, o) && (r[o] = e[o]);
+  return r;
+};
+import i from "react";
+import a from "prop-types";
+import $ from "styled-components";
+import R from "@strapi/icons/ChevronRight";
+import { Typography as y } from "../Typography/Typography.js";
+import { Box as h } from "../Box/Box.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { VisuallyHidden as T } from "../VisuallyHidden/VisuallyHidden.js";
+const C = $(g)`
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
@@ -14,39 +34,40 @@ const f = d(n)`
       fill: ${({ theme: e }) => e.colors.neutral500};
     }
   }
-  :last-of-type ${l} {
+  :last-of-type ${h} {
     display: none;
   }
-  :last-of-type ${a} {
+  :last-of-type ${y} {
     color: ${({ theme: e }) => e.colors.neutral800};
     font-weight: ${({ theme: e }) => e.fontWeights.bold};
   }
-`, o = ({ children: e }) => /* @__PURE__ */ r.createElement(f, {
+`, n = ({ children: e }) => /* @__PURE__ */ i.createElement(C, {
   inline: !0,
   as: "li"
-}, /* @__PURE__ */ r.createElement(a, {
+}, /* @__PURE__ */ i.createElement(y, {
   variant: "pi",
   textColor: "neutral600"
-}, e), /* @__PURE__ */ r.createElement(l, {
+}, e), /* @__PURE__ */ i.createElement(h, {
   "aria-hidden": !0,
   paddingLeft: 3,
   paddingRight: 3
-}, /* @__PURE__ */ r.createElement(c, null)));
-o.displayName = "Crumb";
-o.propTypes = {
-  children: t.node.isRequired
+}, /* @__PURE__ */ i.createElement(R, null)));
+n.displayName = "Crumb";
+n.propTypes = {
+  children: a.node.isRequired
+};
+const f = a.shape({ type: a.oneOf([n]) }), b = (o) => {
+  var p = o, { children: e, label: t } = p, r = u(p, ["children", "label"]);
+  return /* @__PURE__ */ i.createElement(g, c({}, r), /* @__PURE__ */ i.createElement(T, null, t), /* @__PURE__ */ i.createElement("ol", {
+    "aria-hidden": !0
+  }, e));
 };
-const i = t.shape({ type: t.oneOf([o]) }), p = ({ children: e, label: m, ...s }) => /* @__PURE__ */ r.createElement(n, {
-  ...s
-}, /* @__PURE__ */ r.createElement(u, null, m), /* @__PURE__ */ r.createElement("ol", {
-  "aria-hidden": !0
-}, e));
-p.displayName = "Breadcrumbs";
-p.propTypes = {
-  children: t.oneOfType([t.arrayOf(i), i]).isRequired,
-  label: t.string.isRequired
+b.displayName = "Breadcrumbs";
+b.propTypes = {
+  children: a.oneOfType([a.arrayOf(f), f]).isRequired,
+  label: a.string.isRequired
 };
 export {
-  p as Breadcrumbs,
-  o as Crumb
+  b as Breadcrumbs,
+  n as Crumb
 };

package/dist/Button/Button.cjs

@@ -1,48 +1,48 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),x=require("prop-types"),g=require("styled-components"),j=require("@strapi/icons/Loader"),h=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),o=require("./utils.cjs"),y=require("./constants.cjs"),E=require("../BaseButton/BaseButton.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(q),t=n(x),u=n(g),L=n(j),P=g.keyframes`
+"use strict";var W=Object.defineProperty;var i=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var b=(e,t,a)=>t in e?W(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,v=(e,t)=>{for(var a in t||(t={}))m.call(t,a)&&b(e,a,t[a]);if(i)for(var a of i(t))B.call(t,a)&&b(e,a,t[a]);return e};var $=(e,t)=>{var a={};for(var o in e)m.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&i)for(var o of i(e))t.indexOf(o)<0&&B.call(e,o)&&(a[o]=e[o]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),D=require("prop-types"),T=require("styled-components"),I=require("@strapi/icons/Loader"),_=require("../Typography/Typography.cjs"),f=require("../Box/Box.cjs"),r=require("./utils.cjs"),S=require("./constants.cjs"),N=require("../BaseButton/BaseButton.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=s(k),l=s(D),p=s(T),O=s(I),w=T.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,R=u.default.div`
-  animation: ${P} 2s infinite linear;
+`,A=p.default.div`
+  animation: ${w} 2s infinite linear;
   will-change: transform;
-`,W=u.default(d.Box)`
+`,C=p.default(f.Box)`
   height: 100%;
-`,b=u.default(E.BaseButton)`
+`,q=p.default(N.BaseButton)`
   align-items: center;
   background-color: ${({theme:e})=>e.colors.buttonPrimary600};
   border: 1px solid ${({theme:e})=>e.colors.buttonPrimary600};
-  height: ${({theme:e,size:l})=>e.sizes.button[l]};
+  height: ${({theme:e,size:t})=>e.sizes.button[t]};
   padding-left: ${({theme:e})=>e.spaces[4]};
   padding-right: ${({theme:e})=>e.spaces[4]};
 
-  ${d.Box} {
+  ${f.Box} {
     display: flex;
     align-items: center;
   }
 
-  ${h.Typography} {
+  ${_.Typography} {
     color: ${({theme:e})=>e.colors.buttonNeutral0};
   }
 
   &[aria-disabled='true'] {
-    ${o.getDisabledStyle}
+    ${r.getDisabledStyle}
     &:active {
-      ${o.getDisabledStyle}
+      ${r.getDisabledStyle}
     }
   }
   &:hover {
-    ${o.getHoverStyle}
+    ${r.getHoverStyle}
   }
   &:active {
-    ${o.getActiveStyle}
+    ${r.getActiveStyle}
   }
-  ${o.getVariantStyle}
+  ${r.getVariantStyle}
   ${({fullWidth:e})=>e&&`
     display: inline-flex;
     justify-content: center;
     width: 100%;
   `}
-`,r=a.default.forwardRef(({variant:e,startIcon:l,endIcon:c,disabled:m,children:B,onClick:f,size:p,loading:i,fullWidth:v,...$},S)=>{const s=m||i,T=_=>{!s&&f&&f(_)};return a.default.createElement(b,{ref:S,"aria-disabled":s,disabled:s,size:p,variant:e,onClick:T,fullWidth:v,...$},(l||i)&&a.default.createElement(W,{"aria-hidden":!0,paddingRight:2},i?a.default.createElement(R,null,a.default.createElement(L.default,null)):l),a.default.createElement(h.Typography,{variant:p==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0},B),c&&a.default.createElement(d.Box,{"aria-hidden":!0,paddingLeft:2},c))});r.displayName="Button";r.defaultProps={disabled:!1,endIcon:void 0,fullWidth:!1,loading:!1,onClick:void 0,size:"S",startIcon:void 0,variant:"default"};r.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,endIcon:t.default.element,fullWidth:t.default.bool,loading:t.default.bool,onClick:t.default.func,size:t.default.oneOf(y.BUTTON_SIZES),startIcon:t.default.element,variant:t.default.oneOf(y.VARIANTS)};exports.Button=r;exports.ButtonWrapper=b;
+`,d=n.default.forwardRef((H,L)=>{var h=H,{variant:e,startIcon:t,endIcon:a,disabled:o,children:x,onClick:y,size:g,loading:u,fullWidth:j}=h,E=$(h,["variant","startIcon","endIcon","disabled","children","onClick","size","loading","fullWidth"]);const c=o||u,P=R=>{!c&&y&&y(R)};return n.default.createElement(q,v({ref:L,"aria-disabled":c,disabled:c,size:g,variant:e,onClick:P,fullWidth:j},E),(t||u)&&n.default.createElement(C,{"aria-hidden":!0,paddingRight:2},u?n.default.createElement(A,null,n.default.createElement(O.default,null)):t),n.default.createElement(_.Typography,{variant:g==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0},x),a&&n.default.createElement(f.Box,{"aria-hidden":!0,paddingLeft:2},a))});d.displayName="Button";d.defaultProps={disabled:!1,endIcon:void 0,fullWidth:!1,loading:!1,onClick:void 0,size:"S",startIcon:void 0,variant:"default"};d.propTypes={children:l.default.node.isRequired,disabled:l.default.bool,endIcon:l.default.element,fullWidth:l.default.bool,loading:l.default.bool,onClick:l.default.func,size:l.default.oneOf(S.BUTTON_SIZES),startIcon:l.default.element,variant:l.default.oneOf(S.VARIANTS)};exports.Button=d;exports.ButtonWrapper=q;

package/dist/Button/Button.js

@@ -1,88 +1,108 @@
-import o from "react";
-import t from "prop-types";
-import n, { keyframes as S } from "styled-components";
-import B from "@strapi/icons/Loader";
-import { Typography as p } from "../Typography/Typography.js";
-import { Box as l } from "../Box/Box.js";
-import { getDisabledStyle as f, getHoverStyle as E, getActiveStyle as x, getVariantStyle as T } from "./utils.js";
-import { BUTTON_SIZES as k, VARIANTS as R } from "./constants.js";
-import { BaseButton as W } from "../BaseButton/BaseButton.js";
-const I = S`
+var W = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (e, t, o) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, y = (e, t) => {
+  for (var o in t || (t = {}))
+    h.call(t, o) && g(e, o, t[o]);
+  if (n)
+    for (var o of n(t))
+      b.call(t, o) && g(e, o, t[o]);
+  return e;
+};
+var $ = (e, t) => {
+  var o = {};
+  for (var r in e)
+    h.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && n)
+    for (var r of n(e))
+      t.indexOf(r) < 0 && b.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import a from "react";
+import i from "prop-types";
+import s, { keyframes as I } from "styled-components";
+import N from "@strapi/icons/Loader";
+import { Typography as S } from "../Typography/Typography.js";
+import { Box as c } from "../Box/Box.js";
+import { getDisabledStyle as v, getHoverStyle as P, getActiveStyle as w, getVariantStyle as A } from "./utils.js";
+import { BUTTON_SIZES as C, VARIANTS as H } from "./constants.js";
+import { BaseButton as L } from "../BaseButton/BaseButton.js";
+const O = I`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, N = n.div`
-  animation: ${I} 2s infinite linear;
+`, _ = s.div`
+  animation: ${O} 2s infinite linear;
   will-change: transform;
-`, P = n(l)`
+`, z = s(c)`
   height: 100%;
-`, w = n(W)`
+`, D = s(L)`
   align-items: center;
   background-color: ${({ theme: e }) => e.colors.buttonPrimary600};
   border: 1px solid ${({ theme: e }) => e.colors.buttonPrimary600};
-  height: ${({ theme: e, size: r }) => e.sizes.button[r]};
+  height: ${({ theme: e, size: t }) => e.sizes.button[t]};
   padding-left: ${({ theme: e }) => e.spaces[4]};
   padding-right: ${({ theme: e }) => e.spaces[4]};
 
-  ${l} {
+  ${c} {
     display: flex;
     align-items: center;
   }
 
-  ${p} {
+  ${S} {
     color: ${({ theme: e }) => e.colors.buttonNeutral0};
   }
 
   &[aria-disabled='true'] {
-    ${f}
+    ${v}
     &:active {
-      ${f}
+      ${v}
     }
   }
   &:hover {
-    ${E}
+    ${P}
   }
   &:active {
-    ${x}
+    ${w}
   }
-  ${T}
+  ${A}
   ${({ fullWidth: e }) => e && `
     display: inline-flex;
     justify-content: center;
     width: 100%;
   `}
-`, d = o.forwardRef(
-  ({ variant: e, startIcon: r, endIcon: s, disabled: u, children: g, onClick: c, size: m, loading: i, fullWidth: h, ...b }, y) => {
-    const a = u || i, $ = (v) => {
-      !a && c && c(v);
+`, m = a.forwardRef(
+  (V, T) => {
+    var u = V, { variant: e, startIcon: t, endIcon: o, disabled: r, children: B, onClick: f, size: p, loading: l, fullWidth: E } = u, x = $(u, ["variant", "startIcon", "endIcon", "disabled", "children", "onClick", "size", "loading", "fullWidth"]);
+    const d = r || l, k = (R) => {
+      !d && f && f(R);
     };
-    return /* @__PURE__ */ o.createElement(w, {
-      ref: y,
-      "aria-disabled": a,
-      disabled: a,
-      size: m,
+    return /* @__PURE__ */ a.createElement(D, y({
+      ref: T,
+      "aria-disabled": d,
+      disabled: d,
+      size: p,
       variant: e,
-      onClick: $,
-      fullWidth: h,
-      ...b
-    }, (r || i) && /* @__PURE__ */ o.createElement(P, {
+      onClick: k,
+      fullWidth: E
+    }, x), (t || l) && /* @__PURE__ */ a.createElement(z, {
       "aria-hidden": !0,
       paddingRight: 2
-    }, i ? /* @__PURE__ */ o.createElement(N, null, /* @__PURE__ */ o.createElement(B, null)) : r), /* @__PURE__ */ o.createElement(p, {
-      variant: m === "S" ? "pi" : void 0,
+    }, l ? /* @__PURE__ */ a.createElement(_, null, /* @__PURE__ */ a.createElement(N, null)) : t), /* @__PURE__ */ a.createElement(S, {
+      variant: p === "S" ? "pi" : void 0,
       fontWeight: "bold",
       lineHeight: 0
-    }, g), s && /* @__PURE__ */ o.createElement(l, {
+    }, B), o && /* @__PURE__ */ a.createElement(c, {
       "aria-hidden": !0,
       paddingLeft: 2
-    }, s));
+    }, o));
   }
 );
-d.displayName = "Button";
-d.defaultProps = {
+m.displayName = "Button";
+m.defaultProps = {
   disabled: !1,
   endIcon: void 0,
   fullWidth: !1,
@@ -92,18 +112,18 @@ d.defaultProps = {
   startIcon: void 0,
   variant: "default"
 };
-d.propTypes = {
-  children: t.node.isRequired,
-  disabled: t.bool,
-  endIcon: t.element,
-  fullWidth: t.bool,
-  loading: t.bool,
-  onClick: t.func,
-  size: t.oneOf(k),
-  startIcon: t.element,
-  variant: t.oneOf(R)
+m.propTypes = {
+  children: i.node.isRequired,
+  disabled: i.bool,
+  endIcon: i.element,
+  fullWidth: i.bool,
+  loading: i.bool,
+  onClick: i.func,
+  size: i.oneOf(C),
+  startIcon: i.element,
+  variant: i.oneOf(H)
 };
 export {
-  d as Button,
-  w as ButtonWrapper
+  m as Button,
+  D as ButtonWrapper
 };

package/dist/Card/Card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=require("prop-types"),l=require("../Box/Box.cjs"),n=require("./CardContext.cjs"),c=require("../helpers/useId.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=a(s),i=a(u),t=({id:e,...d})=>{const r=c.useId("card",e);return o.default.createElement(n.CardContext.Provider,{value:{id:r}},o.default.createElement(l.Box,{id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${r}-title`,...d}))};t.defaultProps={id:void 0};t.propTypes={id:i.default.string};exports.Card=t;
+"use strict";var f=Object.defineProperty;var a=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;var u=(e,t,r)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,c=(e,t)=>{for(var r in t||(t={}))l.call(t,r)&&u(e,r,t[r]);if(a)for(var r of a(t))n.call(t,r)&&u(e,r,t[r]);return e};var i=(e,t)=>{var r={};for(var o in e)l.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&n.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),y=require("prop-types"),C=require("../Box/Box.cjs"),_=require("./CardContext.cjs"),g=require("../helpers/useId.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=b(x),h=b(y),d=r=>{var o=r,{id:e}=o,t=i(o,["id"]);const s=g.useId("card",e);return p.default.createElement(_.CardContext.Provider,{value:{id:s}},p.default.createElement(C.Box,c({id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${s}-title`},t)))};d.defaultProps={id:void 0};d.propTypes={id:h.default.string};exports.Card=d;

package/dist/Card/Card.js

@@ -1,13 +1,34 @@
-import t from "react";
-import d from "prop-types";
-import { Box as i } from "../Box/Box.js";
-import { CardContext as l } from "./CardContext.js";
-import { useId as p } from "../helpers/useId.js";
-const o = ({ id: r, ...a }) => {
-  const e = p("card", r);
-  return /* @__PURE__ */ t.createElement(l.Provider, {
-    value: { id: e }
-  }, /* @__PURE__ */ t.createElement(i, {
+var b = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var i = (r, e, t) => e in r ? b(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, m = (r, e) => {
+  for (var t in e || (e = {}))
+    l.call(e, t) && i(r, t, e[t]);
+  if (a)
+    for (var t of a(e))
+      p.call(e, t) && i(r, t, e[t]);
+  return r;
+};
+var n = (r, e) => {
+  var t = {};
+  for (var o in r)
+    l.call(r, o) && e.indexOf(o) < 0 && (t[o] = r[o]);
+  if (r != null && a)
+    for (var o of a(r))
+      e.indexOf(o) < 0 && p.call(r, o) && (t[o] = r[o]);
+  return t;
+};
+import s from "react";
+import c from "prop-types";
+import { Box as f } from "../Box/Box.js";
+import { CardContext as x } from "./CardContext.js";
+import { useId as h } from "../helpers/useId.js";
+const u = (t) => {
+  var o = t, { id: r } = o, e = n(o, ["id"]);
+  const d = h("card", r);
+  return /* @__PURE__ */ s.createElement(x.Provider, {
+    value: { id: d }
+  }, /* @__PURE__ */ s.createElement(f, m({
     id: r,
     tabIndex: 0,
     hasRadius: !0,
@@ -17,16 +38,15 @@ const o = ({ id: r, ...a }) => {
     borderColor: "neutral150",
     shadow: "tableShadow",
     as: "article",
-    "aria-labelledby": `${e}-title`,
-    ...a
-  }));
+    "aria-labelledby": `${d}-title`
+  }, e)));
 };
-o.defaultProps = {
+u.defaultProps = {
   id: void 0
 };
-o.propTypes = {
-  id: d.string
+u.propTypes = {
+  id: c.string
 };
 export {
-  o as Card
+  u as Card
 };

package/dist/Card/CardAsset.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),l=require("styled-components"),c=require("prop-types"),u=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(n),i=a(l),o=a(c),p=i.default.img`
+"use strict";var y=Object.defineProperty,b=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var l=(e,t,a)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,p=(e,t)=>{for(var a in t||(t={}))c.call(t,a)&&l(e,a,t[a]);if(s)for(var a of s(t))u.call(t,a)&&l(e,a,t[a]);return e},f=(e,t)=>b(e,x(t));var h=(e,t)=>{var a={};for(var r in e)c.call(e,r)&&t.indexOf(r)<0&&(a[r]=e[r]);if(e!=null&&s)for(var r of s(e))t.indexOf(r)<0&&u.call(e,r)&&(a[r]=e[r]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),w=require("styled-components"),q=require("prop-types"),v=require("../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=i(_),m=i(w),g=i(q),j=m.default.img`
   // inline flows is based on typography and displays an extra white space below the image
   // switch to block is required in order to make the img stick the bottom of the container
   // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
@@ -7,13 +7,13 @@
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
-`,f={S:88,M:164},h=i.default.div`
+`,k={S:88,M:164},A=m.default.div`
   display: flex;
   justify-content: center;
-  height: ${({size:e})=>f[e]/16}rem;
+  height: ${({size:e})=>k[e]/16}rem;
   width: 100%;
   background: repeating-conic-gradient(${({theme:e})=>e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
     20px;
   border-top-left-radius: ${({theme:e})=>e.borderRadius};
   border-top-right-radius: ${({theme:e})=>e.borderRadius};
-`,r=({size:e,children:s,...d})=>t.default.createElement(h,{size:e},s?t.default.createElement(u.Flex,null,s):t.default.createElement(p,{...d,"aria-hidden":!0}));r.defaultProps={children:void 0,size:"M"};r.propTypes={children:o.default.node,size:o.default.oneOf(["S","M"])};exports.CardAsset=r;
+`,d=r=>{var n=r,{size:e,children:t}=n,a=h(n,["size","children"]);return o.default.createElement(A,{size:e},t?o.default.createElement(v.Flex,null,t):o.default.createElement(j,f(p({},a),{"aria-hidden":!0})))};d.defaultProps={children:void 0,size:"M"};d.propTypes={children:g.default.node,size:g.default.oneOf(["S","M"])};exports.CardAsset=d;