@strapi/design-system 1.6.3 → 1.6.5

package/dist/Field/FieldInput.js

@@ -1,33 +1,96 @@
-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 = {
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import p, { css as R } from "styled-components";
+import { useField as I } from "./FieldContext.js";
+import { Box as l } from "../Box/Box.js";
+import { Flex as k } from "../Flex/Flex.js";
+import { inputFocusStyle as B } from "../themes/utils.js";
+const c = {
   S: 6.5,
   M: 10.5
-}, E = m.input`
+}, M = w(({
+  endAction: r,
+  startAction: o,
+  disabled: e = !1,
+  onChange: d,
+  size: u = "M",
+  ...f
+}, $) => {
+  const {
+    id: i,
+    error: t,
+    hint: h,
+    name: g,
+    required: m
+  } = I();
+  let n;
+  t ? n = `${i}-error` : h && (n = `${i}-hint`);
+  const s = Boolean(t), b = (x) => {
+    !e && d && d(x);
+  };
+  return y(j, {
+    justifyContent: "space-between",
+    hasError: s,
+    disabled: e,
+    children: [o ? a(l, {
+      paddingLeft: 3,
+      paddingRight: 2,
+      children: o
+    }) : null, a(F, {
+      id: i,
+      name: g,
+      ref: $,
+      "aria-describedby": n,
+      "aria-invalid": s,
+      "aria-disabled": e,
+      disabled: e,
+      "data-disabled": e ? "" : void 0,
+      hasLeftAction: Boolean(o),
+      hasRightAction: Boolean(r),
+      onChange: b,
+      "aria-required": m,
+      $size: u,
+      ...f
+    }), r ? a(l, {
+      paddingLeft: 2,
+      paddingRight: 3,
+      children: r
+    }) : null]
+  });
+}), F = p.input`
   border: none;
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  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 }) => `${u[e] / 16}rem`};
-  cursor: ${(e) => e["aria-disabled"] ? "not-allowed" : void 0};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  padding-bottom: ${({
+  $size: r
+}) => `${c[r] / 16}rem`};
+  padding-left: ${({
+  theme: r,
+  hasLeftAction: o
+}) => o ? 0 : r.spaces[4]};
+  padding-right: ${({
+  theme: r,
+  hasRightAction: o
+}) => o ? 0 : r.spaces[4]};
+  padding-top: ${({
+  $size: r
+}) => `${c[r] / 16}rem`};
+  cursor: ${(r) => r["aria-disabled"] ? "not-allowed" : void 0};
 
-  color: ${({ theme: e }) => e.colors.neutral800};
+  color: ${({
+  theme: r
+}) => r.colors.neutral800};
   font-weight: 400;
-  // TODO: Make sure to use the theme when it's ready
-  font-size: ${14 / 16}rem;
+  font-size: ${(r) => r.theme.fontSizes[2]};
   display: block;
   width: 100%;
   background: inherit;
 
   ::placeholder {
-    color: ${({ theme: e }) => e.colors.neutral500};
+    color: ${({
+  theme: r
+}) => r.colors.neutral500};
     opacity: 1;
   }
 
@@ -40,67 +103,28 @@ const u = {
     outline: none;
     box-shadow: none;
   }
-`, 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};
-  ${v()}
+`, j = p(k)`
+  border: 1px solid ${({
+  theme: r,
+  hasError: o
+}) => o ? r.colors.danger600 : r.colors.neutral200};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  background: ${({
+  theme: r
+}) => r.colors.neutral0};
+  ${B()}
 
-  ${({ theme: e, disabled: o }) => o ? `
-    color: ${e.colors.neutral600};
-    background: ${e.colors.neutral150};
-  
-  ` : void 0}
-`, 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__ */ t.createElement(F, {
-    size: s,
-    justifyContent: "space-between",
-    hasError: p,
-    disabled: a
-  }, o && /* @__PURE__ */ t.createElement(c, {
-    paddingLeft: 3,
-    paddingRight: 2
-  }, 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: w,
-    "aria-required": y,
-    size: s,
-    ...g
-  }), e && /* @__PURE__ */ t.createElement(c, {
-    paddingLeft: 2,
-    paddingRight: 3
-  }, e));
-});
-d.displayName = "FieldInput";
-d.defaultProps = {
-  disabled: !1,
-  endAction: void 0,
-  size: "M",
-  startAction: void 0,
-  onChange() {
-  }
-};
-d.propTypes = {
-  disabled: r.bool,
-  endAction: r.element,
-  onChange: r.func,
-  size: r.oneOf(Object.keys(I.input)),
-  startAction: r.element
-};
+  ${({
+  theme: r,
+  disabled: o
+}) => o ? R`
+          color: ${r.colors.neutral600};
+          background: ${r.colors.neutral150};
+        ` : void 0}
+`;
 export {
-  d as FieldInput,
-  F as InputWrapper
+  M as FieldInput,
+  j as InputWrapper
 };

package/dist/Field/FieldLabel.cjs

@@ -1,9 +1,9 @@
-"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)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),p=require("react"),h=require("styled-components"),g=require("./FieldContext.cjs"),o=require("../Flex/Flex.cjs"),y=require("../helpers/deprecations.cjs"),i=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=f(h),x=y.once(console.warn),F=p.forwardRef(({children:e,action:t,required:n,...s},a)=>{const{id:c,required:d}=g.useField(),u=d||n;return n!==void 0&&x('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.'),r.jsx(i.Typography,{ref:a,variant:"pi",textColor:"neutral800",htmlFor:c,fontWeight:"bold",as:"label",...s,children:r.jsxs(o.Flex,{alignItems:"center",children:[e,u&&r.jsx(j,{textColor:"danger600",children:"*"}),t&&r.jsx(q,{marginLeft:1,children:t})]})})}),j=l.default(i.Typography)`
   line-height: 0;
-`,F=s.default(n.Flex)`
+`,q=l.default(o.Flex)`
   line-height: 0;
 
   svg path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,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;
+`;exports.FieldLabel=F;

package/dist/Field/FieldLabel.js

@@ -1,45 +1,50 @@
-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)`
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import t from "styled-components";
+import { useField as f } from "./FieldContext.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { once as g } from "../helpers/deprecations.js";
+import { Typography as l } from "../Typography/Typography.js";
+const u = g(console.warn), T = h(({
+  children: e,
+  action: o,
+  required: i,
+  ...s
+}, d) => {
+  const {
+    id: a,
+    required: m
+  } = f(), p = m || i;
+  return i !== void 0 && u('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.'), r(l, {
+    ref: d,
+    variant: "pi",
+    textColor: "neutral800",
+    htmlFor: a,
+    fontWeight: "bold",
+    as: "label",
+    ...s,
+    children: c(n, {
+      alignItems: "center",
+      children: [e, p && r(x, {
+        textColor: "danger600",
+        children: "*"
+      }), o && r(F, {
+        marginLeft: 1,
+        children: o
+      })]
+    })
+  });
+}), x = t(l)`
   line-height: 0;
-`, f = n(l)`
+`, F = t(n)`
   line-height: 0;
 
   svg path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({
+  theme: e
+}) => e.colors.neutral500};
   }
-`, 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__ */ e.createElement(a, {
-    variant: "pi",
-    textColor: "neutral800",
-    htmlFor: p,
-    fontWeight: "bold",
-    as: "label",
-    ...s
-  }, /* @__PURE__ */ e.createElement(l, {
-    alignItems: "center"
-  }, r, c && /* @__PURE__ */ e.createElement(h, {
-    textColor: "danger600"
-  }, "*"), t && /* @__PURE__ */ e.createElement(f, {
-    marginLeft: 1
-  }, t)));
-};
-d.defaultProps = {
-  action: void 0,
-  required: void 0
-};
-d.propTypes = {
-  action: o.element,
-  children: o.node.isRequired,
-  required: o.bool
-};
+`;
 export {
-  d as FieldLabel
+  T as FieldLabel
 };

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: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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),r=require("react"),l=require("../helpers/getFocusableNodes.cjs"),a=require("../helpers/keyboardKeys.cjs"),m=({onEscape:n,restoreFocus:o=!0,...f})=>{const s=r.useRef(null);r.useEffect(()=>{let e=null;return o&&(e=document.activeElement),()=>{e&&e.focus()}},[o]),r.useEffect(()=>{if(!s.current)return;const e=l.getFocusableNodes(s.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 i=e=>{if(e.key===a.KeyboardKeys.ESCAPE&&n){n();return}if(e.key!==a.KeyboardKeys.TAB)return;const t=l.getFocusableNodes(s.current);if(t.length>0){const u=t[0],c=t[t.length-1];e.shiftKey?u===document.activeElement&&(e.preventDefault(),c.focus()):c===document.activeElement&&(e.preventDefault(),u.focus())}};return d.jsx("div",{ref:s,onKeyDown:i,...f})};exports.FocusTrap=m;

package/dist/FocusTrap/FocusTrap.js

@@ -1,49 +1,41 @@
-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(() => {
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as m, useEffect as l } from "react";
+import { getFocusableNodes as u } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as c } from "../helpers/keyboardKeys.js";
+const v = ({
+  onEscape: r,
+  restoreFocus: o = !0,
+  ...i
+}) => {
+  const n = m(null);
+  return l(() => {
     let e = null;
-    return n && (e = document.activeElement), () => {
+    return o && (e = document.activeElement), () => {
       e && e.focus();
     };
-  }, [n]), f(() => {
-    if (!r.current)
+  }, [o]), l(() => {
+    if (!n.current)
       return;
-    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 p = (e) => {
-    if (e.key === i.ESCAPE && o) {
-      o();
-      return;
-    }
-    if (e.key !== i.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());
-    }
-  };
-  return /* @__PURE__ */ d.createElement("div", {
-    ref: r,
-    onKeyDown: p,
-    ...m
+    const e = u(n.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.");
+  }, []), a("div", {
+    ref: n,
+    onKeyDown: (e) => {
+      if (e.key === c.ESCAPE && r) {
+        r();
+        return;
+      }
+      if (e.key !== c.TAB)
+        return;
+      const t = u(n.current);
+      if (t.length > 0) {
+        const s = t[0], f = t[t.length - 1];
+        e.shiftKey ? s === document.activeElement && (e.preventDefault(), f.focus()) : f === document.activeElement && (e.preventDefault(), s.focus());
+      }
+    },
+    ...i
   });
 };
-a.defaultProps = {
-  onEscape: void 0,
-  restoreFocus: !0
-};
-a.propTypes = {
-  onEscape: u.func,
-  restoreFocus: u.bool
-};
 export {
-  a as FocusTrap
+  v 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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),l=require("prop-types"),d=require("styled-components"),i=require("./GridContext.cjs"),p=require("../Box/Box.cjs"),f=require("../helpers/handleResponsiveValues.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function y(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=y(c),o=a(l),m=a(d),b=m.default(p.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})=>f("gap",t,e)}
+`,u=({gap:e,gridCols:t,...r})=>{const n=s.useMemo(()=>({gap:e,gridCols:t}),[e,t]);return s.createElement(i.GridContext.Provider,{value:n},s.createElement(b,{gap:e,gridCols:t,...r}))};u.defaultProps={gap:0,gridCols:12};u.propTypes={gap:o.default.oneOfType([o.default.number,o.default.arrayOf(o.default.number)]),gridCols:o.default.number};exports.Grid=u;

package/dist/Grid/Grid.js

@@ -1,27 +1,24 @@
-import t from "react";
-import a from "styled-components";
-import e from "prop-types";
+import * as t from "react";
+import o from "prop-types";
+import n from "styled-components";
 import { GridContext as i } from "./GridContext.js";
-import { Box as n } from "../Box/Box.js";
+import { Box as s } from "../Box/Box.js";
 import d from "../helpers/handleResponsiveValues.js";
-const l = a(n)`
+const f = n(s)`
   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
-}));
+  ${({ theme: r, gap: e }) => d("gap", e, r)}
+`, p = ({ gap: r, gridCols: e, ...m }) => {
+  const a = t.useMemo(() => ({ gap: r, gridCols: e }), [r, e]);
+  return /* @__PURE__ */ t.createElement(i.Provider, { value: a }, /* @__PURE__ */ t.createElement(f, { gap: r, gridCols: e, ...m }));
+};
 p.defaultProps = {
   gap: 0,
   gridCols: 12
 };
 p.propTypes = {
-  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
-  gridCols: e.number
+  gap: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  gridCols: o.number
 };
 export {
   p 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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("prop-types"),p=require("styled-components"),m=require("./GridContext.cjs"),f=require("../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),t=o(c),y=o(p),x=y.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;
+`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=m.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(f.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;

package/dist/Grid/GridItem.js

@@ -1,8 +1,8 @@
 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";
+import n from "styled-components";
+import { useGrid as a } from "./GridContext.js";
+import { Box as l } from "../Box/Box.js";
 const u = n.div`
   grid-column: span ${({ col: r }) => r};
   max-width: 100%;
@@ -15,16 +15,8 @@ const u = n.div`
     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,
-    col: r,
-    xs: t,
-    s: i
-  }, /* @__PURE__ */ o.createElement(a, {
-    ...p
-  }));
+  const { gap: s, gridCols: d } = a();
+  return /* @__PURE__ */ o.createElement(u, { gap: s, gridCols: d, col: r, xs: t, s: i }, /* @__PURE__ */ o.createElement(l, { ...p }));
 };
 m.defaultProps = {
   col: void 0,

package/dist/IconButton/IconButton.cjs

@@ -1,16 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=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},t=c(d),a=c(B),v=c(m),u=v.default(T.BaseButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${32/16}rem;
-  width: ${32/16}rem;
-
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),$=require("react"),h=require("styled-components"),j=require("../BaseButton/BaseButton.cjs"),v=require("../Flex/Flex.cjs"),y=require("../Tooltip/Tooltip.cjs"),B=require("../VisuallyHidden/VisuallyHidden.cjs"),m=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function x(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=x($),i=m(h),_=u.forwardRef(({label:e,noBorder:r=!1,children:t,icon:o,disabled:l=!1,onClick:a,"aria-label":d,...f},p)=>{const b=g=>{!l&&a&&a(g)},s=n.jsxs(c,{"aria-disabled":l,background:l?"neutral150":void 0,borderWidth:r?0:void 0,justifyContent:"center",height:`${2}rem`,width:`${2}rem`,...f,ref:p,onClick:b,children:[n.jsx(B.VisuallyHidden,{as:"span",children:e??d}),u.cloneElement(o||t,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(y.Tooltip,{label:e,children:s}):s}),c=i.default(j.BaseButton)`
   svg {
     > g,
     path {
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
+
   &:hover {
     svg {
       > g,
@@ -19,6 +14,7 @@
       }
     }
   }
+
   &:active {
     svg {
       > g,
@@ -27,16 +23,15 @@
       }
     }
   }
+
   &[aria-disabled='true'] {
-    background-color: ${({theme:e})=>e.colors.neutral150};
     svg {
       path {
         fill: ${({theme:e})=>e.colors.neutral600};
       }
     }
   }
-  ${({noBorder:e})=>e?"border: none;":void 0}
-`,j=v.default(_.Flex)`
+`,R=i.default(v.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 +41,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${u} {
+  & ${c} {
     border-radius: 0;
     border-left: none;
 
@@ -83,4 +78,4 @@
       }
     }
   }
-`,s=t.default.forwardRef(({label:e,noBorder:n,children:l,icon:o,disabled:r,onClick:f,"aria-label":h,...p},b)=>{const $=y=>{!r&&f&&f(y)};return e?t.default.createElement(E.Tooltip,{label:e},t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},e),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))):t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},h),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))});s.displayName="IconButton";s.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const i=(e,n)=>(l,o)=>!l[o]&&e.every(r=>!l[r])?new Error(`One of the following props is required: ${o}, ${e.join(", ")}`):a.default.checkPropTypes({[o]:a.default[n]},l,"prop","IconButton");s.propTypes={"aria-label":i(["label"],"string"),children:i(["icon"],"node"),disabled:a.default.bool,icon:i(["children"],"node"),label:i(["aria-label"],"string"),noBorder:a.default.bool,onClick:a.default.func};exports.IconButton=s;exports.IconButtonGroup=j;
+`;exports.IconButton=_;exports.IconButtonGroup=R;