@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/Field/FieldLabel.js

@@ -1,44 +1,64 @@
-import e from "react";
-import i from "styled-components";
-import r from "prop-types";
-import { Flex as n } from "../Flex/Flex.js";
-import { useField as c } from "./FieldContext.js";
-import { Typography as a } from "../Typography/Typography.js";
-const d = i(a)`
+var b = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
+var m = (e, r, t) => r in e ? b(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, c = (e, r) => {
+  for (var t in r || (r = {}))
+    p.call(r, t) && m(e, t, r[t]);
+  if (l)
+    for (var t of l(r))
+      s.call(r, t) && m(e, t, r[t]);
+  return e;
+};
+var d = (e, r) => {
+  var t = {};
+  for (var o in e)
+    p.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 && s.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import i from "react";
+import f from "styled-components";
+import n from "prop-types";
+import { Flex as h } from "../Flex/Flex.js";
+import { useField as x } from "./FieldContext.js";
+import { Typography as g } from "../Typography/Typography.js";
+const E = f(g)`
   line-height: 0;
-`, f = i(n)`
+`, F = f(h)`
   line-height: 0;
 
   svg path {
-    fill: ${({ theme: t }) => t.colors.neutral500};
+    fill: ${({ theme: e }) => e.colors.neutral500};
   }
-`, m = ({ children: t, required: o, action: l, ...p }) => {
-  const { id: s } = c();
-  return /* @__PURE__ */ e.createElement(a, {
+`, u = (T) => {
+  var a = T, { children: e, required: r, action: t } = a, o = d(a, ["children", "required", "action"]);
+  const { id: y } = x();
+  return /* @__PURE__ */ i.createElement(g, c({
     variant: "pi",
     textColor: "neutral800",
-    htmlFor: s,
+    htmlFor: y,
     fontWeight: "bold",
     as: "label",
-    required: o,
-    ...p
-  }, /* @__PURE__ */ e.createElement(n, {
+    required: r
+  }, o), /* @__PURE__ */ i.createElement(h, {
     alignItems: "center"
-  }, t, o && /* @__PURE__ */ e.createElement(d, {
+  }, e, r && /* @__PURE__ */ i.createElement(E, {
     textColor: "danger600"
-  }, "*"), l && /* @__PURE__ */ e.createElement(f, {
+  }, "*"), t && /* @__PURE__ */ i.createElement(F, {
     marginLeft: 1
-  }, l)));
+  }, t)));
 };
-m.defaultProps = {
+u.defaultProps = {
   required: !1,
   action: void 0
 };
-m.propTypes = {
-  action: r.element,
-  children: r.node.isRequired,
-  required: r.bool
+u.propTypes = {
+  action: n.element,
+  children: n.node.isRequired,
+  required: n.bool
 };
 export {
-  m as FieldLabel
+  u as FieldLabel
 };

package/dist/Flex/FlexProps.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("prop-types"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=l(o),e=l(s),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,wrap:void 0},u={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=u;exports.FlexProps=a;exports.flexDefaultProps=r;exports.flexPropTypes=u;
+"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;

package/dist/Flex/FlexProps.js

@@ -1,8 +1,17 @@
-import t from "react";
+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 e from "prop-types";
-const r = (n) => /* @__PURE__ */ t.createElement("div", {
-  ...n
-}), o = {
+const p = (o) => /* @__PURE__ */ f.createElement("div", s({}, o)), b = {
   alignItems: "center",
   basis: void 0,
   direction: "row",
@@ -10,8 +19,9 @@ const r = (n) => /* @__PURE__ */ t.createElement("div", {
   inline: !1,
   justifyContent: void 0,
   reverse: !1,
+  shrink: void 0,
   wrap: void 0
-}, s = {
+}, u = {
   alignItems: e.string,
   basis: e.oneOfType([e.string, e.number]),
   direction: e.string,
@@ -31,10 +41,10 @@ const r = (n) => /* @__PURE__ */ t.createElement("div", {
   shrink: e.number,
   wrap: e.string
 };
-r.defaultProps = o;
-r.propTypes = s;
+p.defaultProps = b;
+p.propTypes = u;
 export {
-  r as FlexProps,
-  o as flexDefaultProps,
-  s as flexPropTypes
+  p as FlexProps,
+  b as flexDefaultProps,
+  u as flexPropTypes
 };

package/dist/FocusTrap/ExampleComponent.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),d=require("@strapi/icons/Cross"),a=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),r=require("../Typography/Typography.cjs"),o=require("../Button/Button.cjs"),u=require("../Flex/Flex.cjs"),p=require("./FocusTrap.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=s(l),m=s(d),f=({onClose:t})=>{const[n,c]=l.useState(!1);return e.default.createElement(p.FocusTrap,{onEscape:t},e.default.createElement(a.Box,{background:"neutral0",padding:4,hasRadius:!0,style:{width:"600px"}},e.default.createElement(i.Stack,{spacing:2},e.default.createElement(u.Flex,{justifyContent:"space-between"},e.default.createElement(r.Typography,{variant:"beta",as:"h2"},"Hey folks!"),e.default.createElement("button",{style:{border:"none",background:"transparent"},onClick:t,"aria-label":"Close"},e.default.createElement(m.default,{"aria-hidden":!0}))),e.default.createElement(a.Box,{paddingTop:2,paddingBottom:2},e.default.createElement(r.Typography,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")),e.default.createElement(u.Flex,{justifyContent:"space-between"},e.default.createElement(o.Button,{id:"second"},"Second focusable"),e.default.createElement(o.Button,{id:"last",onClick:()=>c(!0)},"Last focusable (at the beginning)"),n&&e.default.createElement(o.Button,{id:"real-last"},"Last focusable (at the end)")))))},g=()=>{const[t,n]=l.useState(!1);return e.default.createElement(a.Box,{background:"neutral150",padding:10},e.default.createElement(i.Stack,{spacing:2},t&&e.default.createElement(f,{onClose:()=>n(!1)}),e.default.createElement(a.Box,{background:"neutral0",padding:4,hasRadius:!0,style:{width:"600px"}},e.default.createElement(r.Typography,{variant:"beta",as:"h2"},"Outside the trap!"),e.default.createElement(a.Box,{paddingTop:2},e.default.createElement(o.Button,{onClick:()=>n(!0),id:"trigger"},"Open the trap")))))};exports.ExampleComponent=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),d=require("@strapi/icons/Cross"),a=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),r=require("../Typography/Typography.cjs"),o=require("../Button/Button.cjs"),u=require("../Flex/Flex.cjs"),p=require("./FocusTrap.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=s(l),m=s(d),f=({onClose:t})=>{const[n,c]=l.useState(!1);return e.default.createElement(p.FocusTrap,{onEscape:t},e.default.createElement(a.Box,{background:"neutral0",padding:4,hasRadius:!0,style:{width:"600px"}},e.default.createElement(i.Stack,{spacing:2},e.default.createElement(u.Flex,{justifyContent:"space-between"},e.default.createElement(r.Typography,{variant:"beta",as:"h2"},"Hey folks!"),e.default.createElement("button",{type:"button",style:{border:"none",background:"transparent"},onClick:t,"aria-label":"Close"},e.default.createElement(m.default,{"aria-hidden":!0}))),e.default.createElement(a.Box,{paddingTop:2,paddingBottom:2},e.default.createElement(r.Typography,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")),e.default.createElement(u.Flex,{justifyContent:"space-between"},e.default.createElement(o.Button,{id:"second"},"Second focusable"),e.default.createElement(o.Button,{id:"last",onClick:()=>c(!0)},"Last focusable (at the beginning)"),n&&e.default.createElement(o.Button,{id:"real-last"},"Last focusable (at the end)")))))},g=()=>{const[t,n]=l.useState(!1);return e.default.createElement(a.Box,{background:"neutral150",padding:10},e.default.createElement(i.Stack,{spacing:2},t&&e.default.createElement(f,{onClose:()=>n(!1)}),e.default.createElement(a.Box,{background:"neutral0",padding:4,hasRadius:!0,style:{width:"600px"}},e.default.createElement(r.Typography,{variant:"beta",as:"h2"},"Outside the trap!"),e.default.createElement(a.Box,{paddingTop:2},e.default.createElement(o.Button,{onClick:()=>n(!0),id:"trigger"},"Open the trap")))))};exports.ExampleComponent=g;

package/dist/FocusTrap/ExampleComponent.js

@@ -23,6 +23,7 @@ const d = ({ onClose: a }) => {
     variant: "beta",
     as: "h2"
   }, "Hey folks!"), /* @__PURE__ */ e.createElement("button", {
+    type: "button",
     style: { border: "none", background: "transparent" },
     onClick: a,
     "aria-label": "Close"
@@ -41,7 +42,7 @@ const d = ({ onClose: a }) => {
   }, "Last focusable (at the beginning)"), n && /* @__PURE__ */ e.createElement(r, {
     id: "real-last"
   }, "Last focusable (at the end)")))));
-}, C = () => {
+}, y = () => {
   const [a, n] = l(!1);
   return /* @__PURE__ */ e.createElement(t, {
     background: "neutral150",
@@ -66,5 +67,5 @@ const d = ({ onClose: a }) => {
   }, "Open the trap")))));
 };
 export {
-  C as ExampleComponent
+  y as ExampleComponent
 };

package/dist/FocusTrap/FocusTrap.cjs

@@ -1 +1 @@
-"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:c,...p})=>{const o=r.useRef(null);r.useEffect(()=>{if(c){const e=document.activeElement;return()=>{e.focus()}}},[c]),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)return t();if(e.key!==f.KeyboardKeys.TAB)return;const s=a.getFocusableNodes(o.current);if(s.length>0){const u=s[0],l=s[s.length-1];e.shiftKey?u===document.activeElement&&(e.preventDefault(),l.focus()):l===document.activeElement&&(e.preventDefault(),u.focus())}};return m.default.createElement("div",{ref:o,onKeyDown:y,...p})};n.defaultProps={restoreFocus:!0};n.propTypes={onEscape:i.default.func,restoreFocus:i.default.bool};exports.FocusTrap=n;
+"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;

package/dist/FocusTrap/FocusTrap.js

@@ -1,48 +1,69 @@
-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 a } from "../helpers/keyboardKeys.js";
-const i = ({ onEscape: o, restoreFocus: n, ...m }) => {
-  const r = E(null);
-  f(() => {
-    if (n) {
-      const e = document.activeElement;
-      return () => {
-        e.focus();
-      };
-    }
-  }, [n]), f(() => {
-    if (!r.current)
+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();
+    };
+  }, [t]), h(() => {
+    if (!c.current)
       return;
-    const e = l(r.current);
-    e.length > 0 ? e[0].focus() : console.warn(
+    const o = v(c.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 p = (e) => {
-    if (e.key === a.ESCAPE && o)
-      return o();
-    if (e.key !== a.TAB)
+  const K = (o) => {
+    if (o.key === b.ESCAPE && e) {
+      e();
+      return;
+    }
+    if (o.key !== b.TAB)
       return;
-    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());
+    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());
     }
   };
-  return /* @__PURE__ */ d.createElement("div", {
-    ref: r,
-    onKeyDown: p,
-    ...m
-  });
+  return /* @__PURE__ */ g.createElement("div", d({
+    ref: c,
+    onKeyDown: K
+  }, r));
 };
-i.defaultProps = {
+F.defaultProps = {
+  onEscape: void 0,
   restoreFocus: !0
 };
-i.propTypes = {
-  onEscape: u.func,
-  restoreFocus: u.bool
+F.propTypes = {
+  onEscape: y.func,
+  restoreFocus: y.bool
 };
 export {
-  i as FocusTrap
+  F as FocusTrap
 };

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"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)`
+"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)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({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;
+  ${({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;

package/dist/Grid/Grid.js

@@ -1,28 +1,50 @@
-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)`
+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)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ 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 = {
+  ${({ 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 = {
   gap: 0,
   gridCols: 12
 };
-p.propTypes = {
-  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
-  gridCols: e.number
+u.propTypes = {
+  gap: p.oneOfType([p.number, p.arrayOf(p.number)]),
+  gridCols: p.number
 };
 export {
-  p as Grid
+  u as Grid
 };

package/dist/Grid/GridItem.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("styled-components"),p=require("prop-types"),m=require("../Box/Box.cjs"),f=require("./GridContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),y=o(c),t=o(p),x=y.default.div`
+"use strict";var _=Object.defineProperty;var s=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var i=(e,o,t)=>o in e?_(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))l.call(o,t)&&i(e,t,o[t]);if(s)for(var t of s(o))c.call(o,t)&&i(e,t,o[t]);return e};var m=(e,o)=>{var t={};for(var r in e)l.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))o.indexOf(r)<0&&c.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),g=require("styled-components"),v=require("prop-types"),G=require("../Box/Box.cjs"),q=require("./GridContext.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=u(b),$=u(g),d=u(v),j=$.default.div`
   grid-column: span ${({col:e})=>e};
   max-width: 100%;
 
@@ -9,4 +9,4 @@
   ${({theme:e})=>e.mediaQueries.mobile} {
     grid-column: span ${({xs:e})=>e};
   }
-`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=f.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(m.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;
+`,n=B=>{var a=B,{col:e,xs:o,s:t}=a,r=m(a,["col","xs","s"]);const{gap:y,gridCols:x}=q.useGrid();return f.default.createElement(j,{gap:y,gridCols:x,col:e,xs:o,s:t},f.default.createElement(G.Box,p({},r)))};n.defaultProps={col:void 0,s:void 0,xs:void 0};n.propTypes={col:d.default.number,s:d.default.number,xs:d.default.number};exports.GridItem=n;

package/dist/Grid/GridItem.js

@@ -1,9 +1,29 @@
-import o from "react";
-import n from "styled-components";
-import e from "prop-types";
-import { Box as a } from "../Box/Box.js";
-import { useGrid as l } from "./GridContext.js";
-const u = n.div`
+var g = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var s = (r, o, e) => o in r ? g(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, a = (r, o) => {
+  for (var e in o || (o = {}))
+    d.call(o, e) && s(r, e, o[e]);
+  if (t)
+    for (var e of t(o))
+      n.call(o, e) && s(r, e, o[e]);
+  return r;
+};
+var l = (r, o) => {
+  var e = {};
+  for (var m in r)
+    d.call(r, m) && o.indexOf(m) < 0 && (e[m] = r[m]);
+  if (r != null && t)
+    for (var m of t(r))
+      o.indexOf(m) < 0 && n.call(r, m) && (e[m] = r[m]);
+  return e;
+};
+import u from "react";
+import x from "styled-components";
+import i from "prop-types";
+import { Box as $ } from "../Box/Box.js";
+import { useGrid as v } from "./GridContext.js";
+const y = x.div`
   grid-column: span ${({ col: r }) => r};
   max-width: 100%;
 
@@ -14,28 +34,27 @@ const u = n.div`
   ${({ theme: r }) => r.mediaQueries.mobile} {
     grid-column: span ${({ xs: r }) => r};
   }
-`, m = ({ col: r, xs: t, s: i, ...p }) => {
-  const { gap: s, gridCols: d } = l();
-  return /* @__PURE__ */ o.createElement(u, {
-    gap: s,
-    gridCols: d,
+`, c = (G) => {
+  var p = G, { col: r, xs: o, s: e } = p, m = l(p, ["col", "xs", "s"]);
+  const { gap: f, gridCols: b } = v();
+  return /* @__PURE__ */ u.createElement(y, {
+    gap: f,
+    gridCols: b,
     col: r,
-    xs: t,
-    s: i
-  }, /* @__PURE__ */ o.createElement(a, {
-    ...p
-  }));
+    xs: o,
+    s: e
+  }, /* @__PURE__ */ u.createElement($, a({}, m)));
 };
-m.defaultProps = {
+c.defaultProps = {
   col: void 0,
   s: void 0,
   xs: void 0
 };
-m.propTypes = {
-  col: e.number,
-  s: e.number,
-  xs: e.number
+c.propTypes = {
+  col: i.number,
+  s: i.number,
+  xs: i.number
 };
 export {
-  m as GridItem
+  c as GridItem
 };

package/dist/Icon/Icon.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),n=require("../Box/Box.cjs"),u=require("styled-components"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=r(s),l=r(a),d=r(u),p=d.default(n.Box)`
+"use strict";var d=Object.defineProperty;var l=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var s=(e,t,o)=>t in e?d(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t)=>{for(var o in t||(t={}))p.call(t,o)&&s(e,o,t[o]);if(l)for(var o of l(t))f.call(t,o)&&s(e,o,t[o]);return e};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),y=require("prop-types"),_=require("styled-components"),g=require("../Box/Box.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(i),u=c(y),m=c(_),q=m.default(g.Box)`
   path {
     fill: ${({color:e,theme:t})=>t.colors[e]};
   }
   ${({theme:e,colors:t})=>t(e)}
-`,o=c.default.forwardRef((e,t)=>c.default.createElement(p,{ref:t,...e}));o.displayName="Icon";o.defaultProps={color:"neutral600",colors:()=>{}};o.propTypes={color:l.default.string,colors:l.default.func};exports.Icon=o;
+`,r=n.default.forwardRef((e,t)=>n.default.createElement(q,a({ref:t},e)));r.displayName="Icon";r.defaultProps={color:"neutral600",colors:()=>{}};r.propTypes={color:u.default.string,colors:u.default.func};exports.Icon=r;

package/dist/Icon/Icon.js

@@ -1,26 +1,36 @@
-import e from "react";
-import p from "prop-types";
-import { Box as c } from "../Box/Box.js";
-import l from "styled-components";
-const s = l(c)`
+var f = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var c = (r, o, t) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, l = (r, o) => {
+  for (var t in o || (o = {}))
+    m.call(o, t) && c(r, t, o[t]);
+  if (p)
+    for (var t of p(o))
+      n.call(o, t) && c(r, t, o[t]);
+  return r;
+};
+import s from "react";
+import a from "prop-types";
+import i from "styled-components";
+import { Box as d } from "../Box/Box.js";
+const u = i(d)`
   path {
-    fill: ${({ color: o, theme: r }) => r.colors[o]};
+    fill: ${({ color: r, theme: o }) => o.colors[r]};
   }
-  ${({ theme: o, colors: r }) => r(o)}
-`, t = e.forwardRef((o, r) => /* @__PURE__ */ e.createElement(s, {
-  ref: r,
-  ...o
-}));
-t.displayName = "Icon";
-t.defaultProps = {
+  ${({ theme: r, colors: o }) => o(r)}
+`, e = s.forwardRef((r, o) => /* @__PURE__ */ s.createElement(u, l({
+  ref: o
+}, r)));
+e.displayName = "Icon";
+e.defaultProps = {
   color: "neutral600",
   colors: () => {
   }
 };
-t.propTypes = {
-  color: p.string,
-  colors: p.func
+e.propTypes = {
+  color: a.string,
+  colors: a.func
 };
 export {
-  t as Icon
+  e as Icon
 };

package/dist/IconButton/IconButton.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),B=require("prop-types"),m=require("styled-components"),E=require("../Tooltip/Tooltip.cjs"),T=require("../BaseButton/BaseButton.cjs"),_=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=c(u),a=c(B),y=c(m),d=y.default(T.BaseButton)`
+"use strict";var I=Object.defineProperty,R=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var B=(e,o,l)=>o in e?I(e,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[o]=l,u=(e,o)=>{for(var l in o||(o={}))m.call(o,l)&&B(e,l,o[l]);if(i)for(var l of i(o))E.call(o,l)&&B(e,l,o[l]);return e},c=(e,o)=>R(e,x(o));var T=(e,o)=>{var l={};for(var t in e)m.call(e,t)&&o.indexOf(t)<0&&(l[t]=e[t]);if(e!=null&&i)for(var t of i(e))o.indexOf(t)<0&&E.call(e,t)&&(l[t]=e[t]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),w=require("prop-types"),H=require("styled-components"),V=require("../Tooltip/Tooltip.cjs"),C=require("../BaseButton/BaseButton.cjs"),F=require("../Flex/Flex.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=b(f),n=b(w),j=b(H),p=j.default(C.BaseButton)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,7 +36,7 @@
     }
   }
   ${({noBorder:e})=>e?"border: none;":void 0}
-`,j=y.default(_.Flex)`
+`,P=j.default(F.Flex)`
   & span:first-child button {
     border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
     border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
@@ -46,7 +46,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${d} {
+  & ${p} {
     border-radius: 0;
     border-left: none;
 
@@ -83,4 +83,4 @@
       }
     }
   }
-`,i=o.default.forwardRef(({label:e,noBorder:n,children:l,icon:t,disabled:r,onClick:f,["aria-label"]:h,...p},b)=>{const $=v=>{!r&&f&&f(v)};return e?o.default.createElement(E.Tooltip,{label:e},o.default.createElement(d,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},o.default.createElement(g.VisuallyHidden,{as:"span"},e),u.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))):o.default.createElement(d,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},o.default.createElement(g.VisuallyHidden,{as:"span"},h),u.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))});i.displayName="IconButton";i.defaultProps={label:void 0,noBorder:!1,disabled:!1,onClick:void 0};const s=(e,n)=>(l,t)=>{if(!l[t]&&e.every(r=>!l[r]))return new Error(`One of the following props is required: ${t}, ${e.join(", ")}`);a.default.checkPropTypes({[t]:a.default[n]},l,"prop","IconButton")};i.propTypes={["aria-label"]:s(["label"],"string"),children:s(["icon"],"node"),disabled:a.default.bool,icon:s(["children"],"node"),label:s(["aria-label"],"string"),noBorder:a.default.bool,onClick:a.default.func};exports.IconButton=i;exports.IconButtonGroup=j;
+`,d=r.default.forwardRef((D,v)=>{var h=D,{label:e,noBorder:o,children:l,icon:t,disabled:a,onClick:$,"aria-label":k}=h,g=T(h,["label","noBorder","children","icon","disabled","onClick","aria-label"]);const y=q=>{!a&&$&&$(q)};return e?r.default.createElement(V.Tooltip,{label:e},r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},e),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))):r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},k),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))});d.displayName="IconButton";d.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const s=(e,o)=>(l,t)=>!l[t]&&e.every(a=>!l[a])?new Error(`One of the following props is required: ${t}, ${e.join(", ")}`):n.default.checkPropTypes({[t]:n.default[o]},l,"prop","IconButton");d.propTypes={"aria-label":s(["label"],"string"),children:s(["icon"],"node"),disabled:n.default.bool,icon:s(["children"],"node"),label:s(["aria-label"],"string"),noBorder:n.default.bool,onClick:n.default.func};exports.IconButton=d;exports.IconButtonGroup=P;