@strapi/design-system 1.4.1 → 1.5.0-alpha.0

package/dist/Field/FieldAction.js

@@ -1,27 +1,7 @@
-var c = Object.defineProperty;
-var i = Object.getOwnPropertySymbols;
-var d = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
-var a = (e, r, t) => r in e ? c(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, s = (e, r) => {
-  for (var t in r || (r = {}))
-    d.call(r, t) && a(e, t, r[t]);
-  if (i)
-    for (var t of i(r))
-      p.call(r, t) && a(e, t, r[t]);
-  return e;
-};
-var l = (e, r) => {
-  var t = {};
-  for (var o in e)
-    d.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
-  if (e != null && i)
-    for (var o of i(e))
-      r.indexOf(o) < 0 && p.call(e, o) && (t[o] = e[o]);
-  return t;
-};
-import u from "react";
-import b from "styled-components";
-import m from "prop-types";
-const f = b.button`
+import i from "react";
+import n from "styled-components";
+import e from "prop-types";
+const a = n.button`
   border: none;
   background: transparent;
   // TODO: Make sure to use the theme when it's ready
@@ -30,17 +10,15 @@ const f = b.button`
   padding: 0;
   display: flex;
   align-items: center;
-`, y = (o) => {
-  var n = o, { label: e, children: r } = n, t = l(n, ["label", "children"]);
-  return /* @__PURE__ */ u.createElement(f, s({
-    "aria-label": e,
-    type: "button"
-  }, t), r);
-};
-y.propTypes = {
-  children: m.node.isRequired,
-  label: m.string.isRequired
+`, d = ({ label: t, children: r, ...o }) => /* @__PURE__ */ i.createElement(a, {
+  "aria-label": t,
+  type: "button",
+  ...o
+}, r);
+d.propTypes = {
+  children: e.node.isRequired,
+  label: e.string.isRequired
 };
 export {
-  y as FieldAction
+  d as FieldAction
 };

package/dist/Field/FieldInput.cjs

@@ -1,10 +1,10 @@
-"use strict";var z=Object.defineProperty;var n=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var b=(e,t,o)=>t in e?z(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)&&b(e,o,t[o]);if(n)for(var o of n(t))$.call(t,o)&&b(e,o,t[o]);return e};var m=(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&&$.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),D=require("styled-components"),E=require("prop-types"),M=require("../themes/sizes.cjs"),O=require("../themes/utils.cjs"),P=require("./FieldContext.cjs"),T=require("../Flex/Flex.cjs"),x=require("../Box/Box.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=u(q),_=u(D),a=u(E),F={S:6.5,M:10.5},L=_.default.input`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),B=require("styled-components"),I=require("prop-types"),R=require("../themes/sizes.cjs"),v=require("../themes/utils.cjs"),w=require("./FieldContext.cjs"),C=require("../Flex/Flex.cjs"),p=require("../Box/Box.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=d(g),b=d(B),o=d(I),f={S:6.5,M:10.5},k=b.default.input`
   border: none;
   border-radius: ${({theme:e})=>e.borderRadius};
-  padding-bottom: ${({size:e})=>`${F[e]/16}rem`};
+  padding-bottom: ${({size:e})=>`${f[e]/16}rem`};
   padding-left: ${({theme:e,hasLeftAction:t})=>t?0:e.spaces[4]};
   padding-right: ${({theme:e,hasRightAction:t})=>t?0:e.spaces[4]};
-  padding-top: ${({size:e})=>`${F[e]/16}rem`};
+  padding-top: ${({size:e})=>`${f[e]/16}rem`};
   cursor: ${e=>e["aria-disabled"]?"not-allowed":void 0};
 
   color: ${({theme:e})=>e.colors.neutral800};
@@ -29,15 +29,15 @@
     outline: none;
     box-shadow: none;
   }
-`,j=_.default(T.Flex)`
+`,h=b.default(C.Flex)`
   border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
   border-radius: ${({theme:e})=>e.borderRadius};
   background: ${({theme:e})=>e.colors.neutral0};
-  ${O.inputFocusStyle()}
+  ${v.inputFocusStyle()}
 
   ${({theme:e,disabled:t})=>t?`
     color: ${e.colors.neutral600};
     background: ${e.colors.neutral150};
   
   `:void 0}
-`,i=q.forwardRef((S,I)=>{var p=S,{endAction:e,startAction:t,disabled:o,onChange:r,size:c}=p,B=m(p,["endAction","startAction","disabled","onChange","size"]);const{id:d,error:f,hint:R,name:v,required:w}=P.useField();let l;f?l=`${d}-error`:R&&(l=`${d}-hint`);const g=Boolean(f),C=k=>{o||r(k)};return s.default.createElement(j,{size:c,justifyContent:"space-between",hasError:g,disabled:o},t&&s.default.createElement(x.Box,{paddingLeft:3,paddingRight:2},t),s.default.createElement(L,y({id:d,name:v,ref:I,"aria-describedby":l,"aria-invalid":g,"aria-disabled":o,hasLeftAction:Boolean(t),hasRightAction:Boolean(e),onChange:C,"aria-required":w,size:c},B)),e&&s.default.createElement(x.Box,{paddingLeft:2,paddingRight:3},e))});i.displayName="FieldInput";i.defaultProps={disabled:!1,endAction:void 0,size:"M",startAction:void 0,onChange(){}};i.propTypes={disabled:a.default.bool,endAction:a.default.element,onChange:a.default.func,size:a.default.oneOf(Object.keys(M.sizes.input)),startAction:a.default.element};exports.FieldInput=i;exports.InputWrapper=j;
+`,a=g.forwardRef(({endAction:e,startAction:t,disabled:n,onChange:$,size:l,...y},m)=>{const{id:s,error:u,hint:x,name:F,required:q}=w.useField();let i;u?i=`${s}-error`:x&&(i=`${s}-hint`);const c=Boolean(u),_=j=>{n||$(j)};return r.default.createElement(h,{size:l,justifyContent:"space-between",hasError:c,disabled:n},t&&r.default.createElement(p.Box,{paddingLeft:3,paddingRight:2},t),r.default.createElement(k,{id:s,name:F,ref:m,"aria-describedby":i,"aria-invalid":c,"aria-disabled":n,hasLeftAction:Boolean(t),hasRightAction:Boolean(e),onChange:_,"aria-required":q,size:l,...y}),e&&r.default.createElement(p.Box,{paddingLeft:2,paddingRight:3},e))});a.displayName="FieldInput";a.defaultProps={disabled:!1,endAction:void 0,size:"M",startAction:void 0,onChange(){}};a.propTypes={disabled:o.default.bool,endAction:o.default.element,onChange:o.default.func,size:o.default.oneOf(Object.keys(R.sizes.input)),startAction:o.default.element};exports.FieldInput=a;exports.InputWrapper=h;

package/dist/Field/FieldInput.js

@@ -1,41 +1,21 @@
-var B = Object.defineProperty;
-var n = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var f = (e, o, r) => o in e ? B(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, h = (e, o) => {
-  for (var r in o || (o = {}))
-    g.call(o, r) && f(e, r, o[r]);
-  if (n)
-    for (var r of n(o))
-      b.call(o, r) && f(e, r, o[r]);
-  return e;
-};
-var $ = (e, o) => {
-  var r = {};
-  for (var t in e)
-    g.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
-  if (e != null && n)
-    for (var t of n(e))
-      o.indexOf(t) < 0 && b.call(e, t) && (r[t] = e[t]);
-  return r;
-};
-import i, { forwardRef as D } from "react";
-import R from "styled-components";
-import a from "prop-types";
-import { sizes as O } from "../themes/sizes.js";
-import { inputFocusStyle as z } from "../themes/utils.js";
-import { useField as A } from "./FieldContext.js";
-import { Flex as L } from "../Flex/Flex.js";
-import { Box as y } from "../Box/Box.js";
-const w = {
+import t, { forwardRef as k } from "react";
+import m from "styled-components";
+import r from "prop-types";
+import { sizes as I } from "../themes/sizes.js";
+import { inputFocusStyle as v } from "../themes/utils.js";
+import { useField as x } from "./FieldContext.js";
+import { Flex as C } from "../Flex/Flex.js";
+import { Box as c } from "../Box/Box.js";
+const u = {
   S: 6.5,
   M: 10.5
-}, M = R.input`
+}, E = m.input`
   border: none;
   border-radius: ${({ theme: e }) => e.borderRadius};
-  padding-bottom: ${({ size: e }) => `${w[e] / 16}rem`};
+  padding-bottom: ${({ size: e }) => `${u[e] / 16}rem`};
   padding-left: ${({ theme: e, hasLeftAction: o }) => o ? 0 : e.spaces[4]};
   padding-right: ${({ theme: e, hasRightAction: o }) => o ? 0 : e.spaces[4]};
-  padding-top: ${({ size: e }) => `${w[e] / 16}rem`};
+  padding-top: ${({ size: e }) => `${u[e] / 16}rem`};
   cursor: ${(e) => e["aria-disabled"] ? "not-allowed" : void 0};
 
   color: ${({ theme: e }) => e.colors.neutral800};
@@ -60,52 +40,52 @@ const w = {
     outline: none;
     box-shadow: none;
   }
-`, P = R(L)`
+`, F = m(C)`
   border: 1px solid ${({ theme: e, hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
   border-radius: ${({ theme: e }) => e.borderRadius};
   background: ${({ theme: e }) => e.colors.neutral0};
-  ${z()}
+  ${v()}
 
   ${({ theme: e, disabled: o }) => o ? `
     color: ${e.colors.neutral600};
     background: ${e.colors.neutral150};
   
   ` : void 0}
-`, l = D((T, I) => {
-  var c = T, { endAction: e, startAction: o, disabled: r, onChange: t, size: p } = c, k = $(c, ["endAction", "startAction", "disabled", "onChange", "size"]);
-  const { id: d, error: u, hint: v, name: x, required: C } = A();
-  let s;
-  u ? s = `${d}-error` : v && (s = `${d}-hint`);
-  const m = Boolean(u), E = (F) => {
-    r || t(F);
+`, d = k(({ endAction: e, startAction: o, disabled: a, onChange: f, size: s, ...g }, b) => {
+  const { id: n, error: l, hint: h, name: $, required: y } = x();
+  let i;
+  l ? i = `${n}-error` : h && (i = `${n}-hint`);
+  const p = Boolean(l), w = (R) => {
+    a || f(R);
   };
-  return /* @__PURE__ */ i.createElement(P, {
-    size: p,
+  return /* @__PURE__ */ t.createElement(F, {
+    size: s,
     justifyContent: "space-between",
-    hasError: m,
-    disabled: r
-  }, o && /* @__PURE__ */ i.createElement(y, {
+    hasError: p,
+    disabled: a
+  }, o && /* @__PURE__ */ t.createElement(c, {
     paddingLeft: 3,
     paddingRight: 2
-  }, o), /* @__PURE__ */ i.createElement(M, h({
-    id: d,
-    name: x,
-    ref: I,
-    "aria-describedby": s,
-    "aria-invalid": m,
-    "aria-disabled": r,
+  }, o), /* @__PURE__ */ t.createElement(E, {
+    id: n,
+    name: $,
+    ref: b,
+    "aria-describedby": i,
+    "aria-invalid": p,
+    "aria-disabled": a,
     hasLeftAction: Boolean(o),
     hasRightAction: Boolean(e),
-    onChange: E,
-    "aria-required": C,
-    size: p
-  }, k)), e && /* @__PURE__ */ i.createElement(y, {
+    onChange: w,
+    "aria-required": y,
+    size: s,
+    ...g
+  }), e && /* @__PURE__ */ t.createElement(c, {
     paddingLeft: 2,
     paddingRight: 3
   }, e));
 });
-l.displayName = "FieldInput";
-l.defaultProps = {
+d.displayName = "FieldInput";
+d.defaultProps = {
   disabled: !1,
   endAction: void 0,
   size: "M",
@@ -113,14 +93,14 @@ l.defaultProps = {
   onChange() {
   }
 };
-l.propTypes = {
-  disabled: a.bool,
-  endAction: a.element,
-  onChange: a.func,
-  size: a.oneOf(Object.keys(O.input)),
-  startAction: a.element
+d.propTypes = {
+  disabled: r.bool,
+  endAction: r.element,
+  onChange: r.func,
+  size: r.oneOf(Object.keys(I.input)),
+  startAction: r.element
 };
 export {
-  l as FieldInput,
-  P as InputWrapper
+  d as FieldInput,
+  F as InputWrapper
 };

package/dist/Field/FieldLabel.cjs

@@ -1,9 +1,9 @@
-"use strict";var b=Object.defineProperty;var l=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var u=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))c.call(r,t)&&u(e,t,r[t]);if(l)for(var t of l(r))p.call(r,t)&&u(e,t,r[t]);return e};var y=(e,r)=>{var t={};for(var o in e)c.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))r.indexOf(o)<0&&p.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),_=require("styled-components"),v=require("prop-types"),g=require("../Flex/Flex.cjs"),j=require("./FieldContext.cjs"),h=require("../Typography/Typography.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(x),m=n(_),i=n(v),L=m.default(h.Typography)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),g=require("styled-components"),h=require("prop-types"),n=require("../Flex/Flex.cjs"),m=require("./FieldContext.cjs"),d=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(y),s=o(g),r=o(h),q=s.default(d.Typography)`
   line-height: 0;
-`,C=m.default(g.Flex)`
+`,F=s.default(n.Flex)`
   line-height: 0;
 
   svg path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,d=E=>{var s=E,{children:e,action:r,required:t}=s,o=y(s,["children","action","required"]);const{id:q,required:F}=j.useField(),T=F||t;return t!==void 0&&console.warn('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'),a.default.createElement(h.Typography,f({variant:"pi",textColor:"neutral800",htmlFor:q,fontWeight:"bold",as:"label"},o),a.default.createElement(g.Flex,{alignItems:"center"},e,T&&a.default.createElement(L,{textColor:"danger600"},"*"),r&&a.default.createElement(C,{marginLeft:1},r)))};d.defaultProps={action:void 0,required:void 0};d.propTypes={action:i.default.element,children:i.default.node.isRequired,required:i.default.bool};exports.FieldLabel=d;
+`,l=({children:e,action:a,required:i,...u})=>{const{id:c,required:p}=m.useField(),f=p||i;return i!==void 0&&console.warn('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'),t.default.createElement(d.Typography,{variant:"pi",textColor:"neutral800",htmlFor:c,fontWeight:"bold",as:"label",...u},t.default.createElement(n.Flex,{alignItems:"center"},e,f&&t.default.createElement(q,{textColor:"danger600"},"*"),a&&t.default.createElement(F,{marginLeft:1},a)))};l.defaultProps={action:void 0,required:void 0};l.propTypes={action:r.default.element,children:r.default.node.isRequired,required:r.default.bool};exports.FieldLabel=l;

package/dist/Field/FieldLabel.js

@@ -1,65 +1,45 @@
-var b = Object.defineProperty;
-var i = Object.getOwnPropertySymbols;
-var s = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
-var d = (e, o, r) => o in e ? b(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, m = (e, o) => {
-  for (var r in o || (o = {}))
-    s.call(o, r) && d(e, r, o[r]);
-  if (i)
-    for (var r of i(o))
-      p.call(o, r) && d(e, r, o[r]);
-  return e;
-};
-var c = (e, o) => {
-  var r = {};
-  for (var t in e)
-    s.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
-  if (e != null && i)
-    for (var t of i(e))
-      o.indexOf(t) < 0 && p.call(e, t) && (r[t] = e[t]);
-  return r;
-};
-import n from "react";
-import u from "styled-components";
-import l from "prop-types";
-import { Flex as h } from "../Flex/Flex.js";
-import { useField as v } from "./FieldContext.js";
-import { Typography as f } from "../Typography/Typography.js";
-const x = u(f)`
+import e from "react";
+import n from "styled-components";
+import o from "prop-types";
+import { Flex as l } from "../Flex/Flex.js";
+import { useField as u } from "./FieldContext.js";
+import { Typography as a } from "../Typography/Typography.js";
+const h = n(a)`
   line-height: 0;
-`, T = u(h)`
+`, f = n(l)`
   line-height: 0;
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral500};
+    fill: ${({ theme: r }) => r.colors.neutral500};
   }
-`, g = (E) => {
-  var a = E, { children: e, action: o, required: r } = a, t = c(a, ["children", "action", "required"]);
-  const { id: q, required: y } = v(), F = y || r;
-  return r !== void 0 && console.warn(
+`, d = ({ children: r, action: t, required: i, ...s }) => {
+  const { id: p, required: m } = u(), c = m || i;
+  return i !== void 0 && console.warn(
     'Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'
-  ), /* @__PURE__ */ n.createElement(f, m({
+  ), /* @__PURE__ */ e.createElement(a, {
     variant: "pi",
     textColor: "neutral800",
-    htmlFor: q,
+    htmlFor: p,
     fontWeight: "bold",
-    as: "label"
-  }, t), /* @__PURE__ */ n.createElement(h, {
+    as: "label",
+    ...s
+  }, /* @__PURE__ */ e.createElement(l, {
     alignItems: "center"
-  }, e, F && /* @__PURE__ */ n.createElement(x, {
+  }, r, c && /* @__PURE__ */ e.createElement(h, {
     textColor: "danger600"
-  }, "*"), o && /* @__PURE__ */ n.createElement(T, {
+  }, "*"), t && /* @__PURE__ */ e.createElement(f, {
     marginLeft: 1
-  }, o)));
+  }, t)));
 };
-g.defaultProps = {
+d.defaultProps = {
   action: void 0,
   required: void 0
 };
-g.propTypes = {
-  action: l.element,
-  children: l.node.isRequired,
-  required: l.bool
+d.propTypes = {
+  action: o.element,
+  children: o.node.isRequired,
+  required: o.bool
 };
 export {
-  g as FieldLabel
+  d as FieldLabel
 };

package/dist/Flex/FlexProps.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var o=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var s=(t,a,l)=>a in t?i(t,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[a]=l,u=(t,a)=>{for(var l in a||(a={}))p.call(a,l)&&s(t,l,a[l]);if(o)for(var l of o(a))c.call(a,l)&&s(t,l,a[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),y=require("prop-types"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},g=n(b),e=n(y),r=t=>g.default.createElement("div",u({},t)),f={alignItems:"center",basis:void 0,direction:"row",gap:void 0,inline:!1,justifyContent:void 0,reverse:!1,shrink:void 0,wrap:void 0},d={alignItems:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.number]),direction:e.default.string,gap:e.default.oneOfType([e.default.shape({desktop:e.default.number,mobile:e.default.number,tablet:e.default.number}),e.default.number,e.default.arrayOf(e.default.number),e.default.string]),inline:e.default.bool,justifyContent:e.default.string,reverse:e.default.bool,shrink:e.default.number,wrap:e.default.string};r.defaultProps=f;r.propTypes=d;exports.FlexProps=r;exports.flexDefaultProps=f;exports.flexPropTypes=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=require("prop-types"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=l(s),e=l(u),a=t=>n.default.createElement("div",{...t}),r={alignItems:"center",basis:void 0,direction:"row",gap:void 0,inline:!1,justifyContent:void 0,reverse:!1,shrink:void 0,wrap:void 0},o={alignItems:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.number]),direction:e.default.string,gap:e.default.oneOfType([e.default.shape({desktop:e.default.number,mobile:e.default.number,tablet:e.default.number}),e.default.number,e.default.arrayOf(e.default.number),e.default.string]),inline:e.default.bool,justifyContent:e.default.string,reverse:e.default.bool,shrink:e.default.number,wrap:e.default.string};a.defaultProps=r;a.propTypes=o;exports.FlexProps=a;exports.flexDefaultProps=r;exports.flexPropTypes=o;

package/dist/Flex/FlexProps.js

@@ -1,17 +1,8 @@
-var a = Object.defineProperty;
-var t = Object.getOwnPropertySymbols;
-var l = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
-var i = (o, r, n) => r in o ? a(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n, s = (o, r) => {
-  for (var n in r || (r = {}))
-    l.call(r, n) && i(o, n, r[n]);
-  if (t)
-    for (var n of t(r))
-      m.call(r, n) && i(o, n, r[n]);
-  return o;
-};
-import f from "react";
+import o from "react";
 import e from "prop-types";
-const p = (o) => /* @__PURE__ */ f.createElement("div", s({}, o)), b = {
+const r = (n) => /* @__PURE__ */ o.createElement("div", {
+  ...n
+}), t = {
   alignItems: "center",
   basis: void 0,
   direction: "row",
@@ -21,7 +12,7 @@ const p = (o) => /* @__PURE__ */ f.createElement("div", s({}, o)), b = {
   reverse: !1,
   shrink: void 0,
   wrap: void 0
-}, u = {
+}, i = {
   alignItems: e.string,
   basis: e.oneOfType([e.string, e.number]),
   direction: e.string,
@@ -41,10 +32,10 @@ const p = (o) => /* @__PURE__ */ f.createElement("div", s({}, o)), b = {
   shrink: e.number,
   wrap: e.string
 };
-p.defaultProps = b;
-p.propTypes = u;
+r.defaultProps = t;
+r.propTypes = i;
 export {
-  p as FlexProps,
-  b as flexDefaultProps,
-  u as flexPropTypes
+  r as FlexProps,
+  t as flexDefaultProps,
+  i as flexPropTypes
 };

package/dist/FocusTrap/FocusTrap.cjs

@@ -1 +1 @@
-"use strict";var T=Object.defineProperty;var c=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var p=(e,t,s)=>t in e?T(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,m=(e,t)=>{for(var s in t||(t={}))y.call(t,s)&&p(e,s,t[s]);if(c)for(var s of c(t))b.call(t,s)&&p(e,s,t[s]);return e};var E=(e,t)=>{var s={};for(var r in e)y.call(e,r)&&t.indexOf(r)<0&&(s[r]=e[r]);if(e!=null&&c)for(var r of c(e))t.indexOf(r)<0&&b.call(e,r)&&(s[r]=e[r]);return s};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),_=require("prop-types"),h=require("../helpers/getFocusableNodes.cjs"),g=require("../helpers/keyboardKeys.cjs"),F=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},k=F(l),v=F(_),a=r=>{var f=r,{onEscape:e,restoreFocus:t}=f,s=E(f,["onEscape","restoreFocus"]);const u=l.useRef(null);l.useEffect(()=>{let o=null;return t&&(o=document.activeElement),()=>{o&&o.focus()}},[t]),l.useEffect(()=>{if(!u.current)return;const o=h.getFocusableNodes(u.current);o.length>0?o[0].focus():console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.")},[]);const K=o=>{if(o.key===g.KeyboardKeys.ESCAPE&&e){e();return}if(o.key!==g.KeyboardKeys.TAB)return;const n=h.getFocusableNodes(u.current);if(n.length>0){const i=n[0],d=n[n.length-1];o.shiftKey?i===document.activeElement&&(o.preventDefault(),d.focus()):d===document.activeElement&&(o.preventDefault(),i.focus())}};return k.default.createElement("div",m({ref:u,onKeyDown:K},s))};a.defaultProps={onEscape:void 0,restoreFocus:!0};a.propTypes={onEscape:v.default.func,restoreFocus:v.default.bool};exports.FocusTrap=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),b=require("prop-types"),a=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=d(r),i=d(b),n=({onEscape:t,restoreFocus:u,...p})=>{const o=r.useRef(null);r.useEffect(()=>{let e=null;return u&&(e=document.activeElement),()=>{e&&e.focus()}},[u]),r.useEffect(()=>{if(!o.current)return;const e=a.getFocusableNodes(o.current);e.length>0?e[0].focus():console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.")},[]);const y=e=>{if(e.key===f.KeyboardKeys.ESCAPE&&t){t();return}if(e.key!==f.KeyboardKeys.TAB)return;const s=a.getFocusableNodes(o.current);if(s.length>0){const c=s[0],l=s[s.length-1];e.shiftKey?c===document.activeElement&&(e.preventDefault(),l.focus()):l===document.activeElement&&(e.preventDefault(),c.focus())}};return m.default.createElement("div",{ref:o,onKeyDown:y,...p})};n.defaultProps={onEscape:void 0,restoreFocus:!0};n.propTypes={onEscape:i.default.func,restoreFocus:i.default.bool};exports.FocusTrap=n;

package/dist/FocusTrap/FocusTrap.js

@@ -1,69 +1,49 @@
-var T = Object.defineProperty;
-var f = Object.getOwnPropertySymbols;
-var m = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
-var a = (e, t, r) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, d = (e, t) => {
-  for (var r in t || (t = {}))
-    m.call(t, r) && a(e, r, t[r]);
-  if (f)
-    for (var r of f(t))
-      p.call(t, r) && a(e, r, t[r]);
-  return e;
-};
-var E = (e, t) => {
-  var r = {};
-  for (var n in e)
-    m.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
-  if (e != null && f)
-    for (var n of f(e))
-      t.indexOf(n) < 0 && p.call(e, n) && (r[n] = e[n]);
-  return r;
-};
-import g, { useRef as D, useEffect as h } from "react";
-import y from "prop-types";
-import { getFocusableNodes as v } from "../helpers/getFocusableNodes.js";
-import { KeyboardKeys as b } from "../helpers/keyboardKeys.js";
-const F = (n) => {
-  var u = n, { onEscape: e, restoreFocus: t } = u, r = E(u, ["onEscape", "restoreFocus"]);
-  const c = D(null);
-  h(() => {
-    let o = null;
-    return t && (o = document.activeElement), () => {
-      o && o.focus();
+import d, { useRef as E, useEffect as f } from "react";
+import u from "prop-types";
+import { getFocusableNodes as l } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
+const a = ({ onEscape: o, restoreFocus: n, ...m }) => {
+  const r = E(null);
+  f(() => {
+    let e = null;
+    return n && (e = document.activeElement), () => {
+      e && e.focus();
     };
-  }, [t]), h(() => {
-    if (!c.current)
+  }, [n]), f(() => {
+    if (!r.current)
       return;
-    const o = v(c.current);
-    o.length > 0 ? o[0].focus() : console.warn(
+    const e = l(r.current);
+    e.length > 0 ? e[0].focus() : console.warn(
       "[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one."
     );
   }, []);
-  const K = (o) => {
-    if (o.key === b.ESCAPE && e) {
-      e();
+  const p = (e) => {
+    if (e.key === i.ESCAPE && o) {
+      o();
       return;
     }
-    if (o.key !== b.TAB)
+    if (e.key !== i.TAB)
       return;
-    const s = v(c.current);
-    if (s.length > 0) {
-      const l = s[0], i = s[s.length - 1];
-      o.shiftKey ? l === document.activeElement && (o.preventDefault(), i.focus()) : i === document.activeElement && (o.preventDefault(), l.focus());
+    const t = l(r.current);
+    if (t.length > 0) {
+      const s = t[0], c = t[t.length - 1];
+      e.shiftKey ? s === document.activeElement && (e.preventDefault(), c.focus()) : c === document.activeElement && (e.preventDefault(), s.focus());
     }
   };
-  return /* @__PURE__ */ g.createElement("div", d({
-    ref: c,
-    onKeyDown: K
-  }, r));
+  return /* @__PURE__ */ d.createElement("div", {
+    ref: r,
+    onKeyDown: p,
+    ...m
+  });
 };
-F.defaultProps = {
+a.defaultProps = {
   onEscape: void 0,
   restoreFocus: !0
 };
-F.propTypes = {
-  onEscape: y.func,
-  restoreFocus: y.bool
+a.propTypes = {
+  onEscape: u.func,
+  restoreFocus: u.bool
 };
 export {
-  F as FocusTrap
+  a as FocusTrap
 };

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"use strict";var m=Object.defineProperty;var a=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var n=(e,t,r)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,i=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&n(e,r,t[r]);if(a)for(var r of a(t))p.call(t,r)&&n(e,r,t[r]);return e};var f=(e,t)=>{var r={};for(var o in e)c.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&&p.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),g=require("styled-components"),x=require("prop-types"),b=require("./GridContext.cjs"),q=require("../Box/Box.cjs"),v=require("../helpers/handleResponsiveValues.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=l(_),G=l(g),s=l(x),j=G.default(q.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),d=require("styled-components"),n=require("prop-types"),c=require("./GridContext.cjs"),p=require("../Box/Box.cjs"),i=require("../helpers/handleResponsiveValues.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(u),f=o(d),t=o(n),y=f.default(p.Box)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({theme:e,gap:t})=>v("gap",t,e)}
-`,u=o=>{var d=o,{gap:e,gridCols:t}=d,r=f(d,["gap","gridCols"]);return y.default.createElement(b.GridContext.Provider,{value:{gap:e,gridCols:t}},y.default.createElement(j,i({gap:e,gridCols:t},r)))};u.defaultProps={gap:0,gridCols:12};u.propTypes={gap:s.default.oneOfType([s.default.number,s.default.arrayOf(s.default.number)]),gridCols:s.default.number};exports.Grid=u;
+  ${({theme:e,gap:r})=>i("gap",r,e)}
+`,s=({gap:e,gridCols:r,...l})=>a.default.createElement(c.GridContext.Provider,{value:{gap:e,gridCols:r}},a.default.createElement(y,{gap:e,gridCols:r,...l}));s.defaultProps={gap:0,gridCols:12};s.propTypes={gap:t.default.oneOfType([t.default.number,t.default.arrayOf(t.default.number)]),gridCols:t.default.number};exports.Grid=s;

package/dist/Grid/Grid.js

@@ -1,50 +1,28 @@
-var c = Object.defineProperty;
-var m = Object.getOwnPropertySymbols;
-var n = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
-var i = (r, e, o) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, l = (r, e) => {
-  for (var o in e || (e = {}))
-    n.call(e, o) && i(r, o, e[o]);
-  if (m)
-    for (var o of m(e))
-      d.call(e, o) && i(r, o, e[o]);
-  return r;
-};
-var s = (r, e) => {
-  var o = {};
-  for (var t in r)
-    n.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
-  if (r != null && m)
-    for (var t of m(r))
-      e.indexOf(t) < 0 && d.call(r, t) && (o[t] = r[t]);
-  return o;
-};
-import f from "react";
-import y from "styled-components";
-import p from "prop-types";
-import { GridContext as g } from "./GridContext.js";
-import { Box as b } from "../Box/Box.js";
-import v from "../helpers/handleResponsiveValues.js";
-const x = y(b)`
+import t from "react";
+import a from "styled-components";
+import e from "prop-types";
+import { GridContext as i } from "./GridContext.js";
+import { Box as n } from "../Box/Box.js";
+import d from "../helpers/handleResponsiveValues.js";
+const l = a(n)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ theme: r, gap: e }) => v("gap", e, r)}
-`, u = (t) => {
-  var a = t, { gap: r, gridCols: e } = a, o = s(a, ["gap", "gridCols"]);
-  return /* @__PURE__ */ f.createElement(g.Provider, {
-    value: { gap: r, gridCols: e }
-  }, /* @__PURE__ */ f.createElement(x, l({
-    gap: r,
-    gridCols: e
-  }, o)));
-};
-u.defaultProps = {
+  ${({ theme: r, gap: o }) => d("gap", o, r)}
+`, p = ({ gap: r, gridCols: o, ...m }) => /* @__PURE__ */ t.createElement(i.Provider, {
+  value: { gap: r, gridCols: o }
+}, /* @__PURE__ */ t.createElement(l, {
+  gap: r,
+  gridCols: o,
+  ...m
+}));
+p.defaultProps = {
   gap: 0,
   gridCols: 12
 };
-u.propTypes = {
-  gap: p.oneOfType([p.number, p.arrayOf(p.number)]),
-  gridCols: p.number
+p.propTypes = {
+  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  gridCols: e.number
 };
 export {
-  u as Grid
+  p as Grid
 };