@strapi/design-system 1.7.0 → 1.7.1

package/dist/Field/FieldAction.js

@@ -6,26 +6,11 @@ import { VisuallyHidden as f } from "../VisuallyHidden/VisuallyHidden.js";
 const m = d(l)`
   font-size: 1.6rem;
   padding: 0;
-`, x = s(({
-  label: e,
-  children: r,
-  ...t
-}, o) => n(m, {
-  justifyContent: "unset",
-  background: "transparent",
-  borderStyle: "none",
-  type: "button",
-  ...t,
-  as: "button",
-  ref: o,
-  children: [i(f, {
-    as: "span",
-    children: e
-  }), a(r, {
-    "aria-hidden": !0,
-    focusable: !1
-  })]
-}));
+`, x = s(({ label: e, children: r, ...t }, o) => n(m, { justifyContent: "unset", background: "transparent", borderStyle: "none", type: "button", ...t, as: "button", ref: o, children: [i(f, { as: "span", children: e }), a(r, {
+  "aria-hidden": !0,
+  focusable: !1
+  // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+})] }));
 export {
   x as FieldAction
 };

package/dist/Field/FieldContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({id:"",required:!1}),o=()=>e.useContext(t);exports.FieldContext=t;exports.useField=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({id:"",required:!1}),o=()=>e.useContext(t);exports.FieldContext=t;exports.useField=o;

package/dist/Field/FieldError.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("./FieldContext.cjs"),i=require("../Typography/Typography.cjs"),n=()=>{const{id:e,error:r}=o.useField();return!r||typeof r!="string"?null:t.jsx(i.Typography,{variant:"pi",as:"p",id:`${e}-error`,textColor:"danger600","data-strapi-field-error":!0,children:r})};exports.FieldError=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("./FieldContext.cjs"),o=require("../Typography/Typography.cjs"),n=()=>{const{id:e,error:r}=i.useField();return!r||typeof r!="string"?null:t.jsx(o.Typography,{variant:"pi",as:"p",id:`${e}-error`,textColor:"danger600","data-strapi-field-error":!0,children:r})};exports.FieldError=n;

package/dist/Field/FieldError.js

@@ -2,18 +2,8 @@ import { jsx as t } from "react/jsx-runtime";
 import { useField as e } from "./FieldContext.js";
 import { Typography as i } from "../Typography/Typography.js";
 const d = () => {
-  const {
-    id: o,
-    error: r
-  } = e();
-  return !r || typeof r != "string" ? null : t(i, {
-    variant: "pi",
-    as: "p",
-    id: `${o}-error`,
-    textColor: "danger600",
-    "data-strapi-field-error": !0,
-    children: r
-  });
+  const { id: o, error: r } = e();
+  return !r || typeof r != "string" ? null : t(i, { variant: "pi", as: "p", id: `${o}-error`, textColor: "danger600", "data-strapi-field-error": !0, children: r });
 };
 export {
   d as FieldError

package/dist/Field/FieldHint.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("./FieldContext.cjs"),o=require("../Typography/Typography.cjs"),s=()=>{const{id:t,hint:e,error:r}=n.useField();return!e||r?null:i.jsx(o.Typography,{variant:"pi",as:"p",id:`${t}-hint`,textColor:"neutral600",children:e})};exports.FieldHint=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("./FieldContext.cjs"),o=require("../Typography/Typography.cjs"),l=()=>{const{id:t,hint:e,error:r}=n.useField();return!e||r?null:i.jsx(o.Typography,{variant:"pi",as:"p",id:`${t}-hint`,textColor:"neutral600",children:e})};exports.FieldHint=l;

package/dist/Field/FieldHint.js

@@ -2,18 +2,8 @@ import { jsx as o } from "react/jsx-runtime";
 import { useField as n } from "./FieldContext.js";
 import { Typography as e } from "../Typography/Typography.js";
 const a = () => {
-  const {
-    id: t,
-    hint: r,
-    error: i
-  } = n();
-  return !r || i ? null : o(e, {
-    variant: "pi",
-    as: "p",
-    id: `${t}-hint`,
-    textColor: "neutral600",
-    children: r
-  });
+  const { id: t, hint: r, error: i } = n();
+  return !r || i ? null : o(e, { variant: "pi", as: "p", id: `${t}-hint`, textColor: "neutral600", children: r });
 };
 export {
   a as FieldHint

package/dist/Field/FieldInput.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),F=require("react"),c=require("styled-components"),q=require("./FieldContext.cjs"),l=require("../Box/Box.cjs"),B=require("../Flex/Flex.cjs"),R=require("../themes/utils.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=I(c),u={S:6.5,M:10.5},w=F.forwardRef(({endAction:e,startAction:r,disabled:o=!1,onChange:a,size:g="M",...b},h)=>{const{id:t,error:s,hint:$,name:x,required:j}=q.useField();let i;s?i=`${t}-error`:$&&(i=`${t}-hint`);const d=Boolean(s),y=m=>{!o&&a&&a(m)};return n.jsxs(f,{justifyContent:"space-between",hasError:d,disabled:o,children:[r?n.jsx(l.Box,{paddingLeft:3,paddingRight:2,children:r}):null,n.jsx(_,{id:t,name:x,ref:h,"aria-describedby":i,"aria-invalid":d,"aria-disabled":o,disabled:o,"data-disabled":o?"":void 0,hasLeftAction:Boolean(r),hasRightAction:Boolean(e),onChange:y,"aria-required":j,$size:g,...b}),e?n.jsx(l.Box,{paddingLeft:2,paddingRight:3,children:e}):null]})}),_=p.default.input`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("react"),t=require("styled-components"),j=require("./FieldContext.cjs"),m=require("../themes/utils.cjs"),u=require("../Box/Box.cjs"),F=require("../Flex/Flex.cjs"),c={S:6.5,M:10.5},I=R.forwardRef(({endAction:e,startAction:r,disabled:o=!1,onChange:d,size:f="M",...g},$)=>{const{id:i,error:s,hint:b,name:h,required:x}=j.useField();let a;s?a=`${i}-error`:b&&(a=`${i}-hint`);const l=!!s,q=y=>{!o&&d&&d(y)};return n.jsxs(p,{justifyContent:"space-between",hasError:l,disabled:o,children:[r?n.jsx(u.Box,{paddingLeft:3,paddingRight:2,children:r}):null,n.jsx(w,{id:i,name:h,ref:$,"aria-describedby":a,"aria-invalid":l,"aria-disabled":o,disabled:o,"data-disabled":o?"":void 0,hasLeftAction:!!r,hasRightAction:!!e,onChange:q,"aria-required":x,$size:f,...g}),e?n.jsx(u.Box,{paddingLeft:2,paddingRight:3,children:e}):null]})}),w=t.input`
   border: none;
   border-radius: ${({theme:e})=>e.borderRadius};
-  padding-bottom: ${({$size:e})=>`${u[e]/16}rem`};
+  padding-bottom: ${({$size:e})=>`${c[e]/16}rem`};
   padding-left: ${({theme:e,hasLeftAction:r})=>r?0:e.spaces[4]};
   padding-right: ${({theme:e,hasRightAction:r})=>r?0:e.spaces[4]};
-  padding-top: ${({$size:e})=>`${u[e]/16}rem`};
+  padding-top: ${({$size:e})=>`${c[e]/16}rem`};
   cursor: ${e=>e["aria-disabled"]?"not-allowed":void 0};
 
   color: ${({theme:e})=>e.colors.neutral800};
@@ -28,14 +28,14 @@
     outline: none;
     box-shadow: none;
   }
-`,f=p.default(B.Flex)`
+`,p=t(F.Flex)`
   border: 1px solid ${({theme:e,hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
   border-radius: ${({theme:e})=>e.borderRadius};
   background: ${({theme:e})=>e.colors.neutral0};
-  ${R.inputFocusStyle()}
+  ${m.inputFocusStyle()}
 
-  ${({theme:e,disabled:r})=>r?c.css`
+  ${({theme:e,disabled:r})=>r?t.css`
           color: ${e.colors.neutral600};
           background: ${e.colors.neutral150};
         `:void 0}
-`;exports.FieldInput=w;exports.InputWrapper=f;
+`;exports.FieldInput=I;exports.InputWrapper=p;

package/dist/Field/FieldInput.js

@@ -2,85 +2,30 @@ 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 { inputFocusStyle as k } from "../themes/utils.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";
+import { Flex as B } from "../Flex/Flex.js";
 const c = {
   S: 6.5,
   M: 10.5
-}, 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();
+}, 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) => {
+  const s = !!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]
-  });
+  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: !!o, hasRightAction: !!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: 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`};
+  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: r
-}) => r.colors.neutral800};
+  color: ${({ theme: r }) => r.colors.neutral800};
   font-weight: 400;
   font-size: ${(r) => r.theme.fontSizes[2]};
   display: block;
@@ -88,9 +33,7 @@ const c = {
   background: inherit;
 
   ::placeholder {
-    color: ${({
-  theme: r
-}) => r.colors.neutral500};
+    color: ${({ theme: r }) => r.colors.neutral500};
     opacity: 1;
   }
 
@@ -103,23 +46,13 @@ const c = {
     outline: none;
     box-shadow: none;
   }
-`, 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()}
+`, j = p(B)`
+  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};
+  ${k()}
 
-  ${({
-  theme: r,
-  disabled: o
-}) => o ? R`
+  ${({ theme: r, disabled: o }) => o ? R`
           color: ${r.colors.neutral600};
           background: ${r.colors.neutral150};
         ` : void 0}

package/dist/Field/FieldLabel.cjs

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

package/dist/Field/FieldLabel.js

@@ -2,47 +2,22 @@ import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
 import r from "styled-components";
 import { useField as h } from "./FieldContext.js";
-import { Flex as f } from "../Flex/Flex.js";
-import { once as g } from "../helpers/deprecations.js";
+import { once as f } from "../helpers/deprecations.js";
 import { Typography as n } from "../Typography/Typography.js";
-const u = g(console.warn), A = c(({
-  children: e,
-  action: o,
-  required: i,
-  ...l
-}, s) => {
-  const {
-    id: a,
-    required: d
-  } = h(), p = d || 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.'), m(x, {
-    ref: s,
-    variant: "pi",
-    textColor: "neutral800",
-    htmlFor: a,
-    fontWeight: "bold",
-    as: "label",
-    ...l,
-    children: [e, p && t(y, {
-      textColor: "danger600",
-      children: "*"
-    }), o && t(F, {
-      marginLeft: 1,
-      children: o
-    })]
-  });
+import { Flex as g } from "../Flex/Flex.js";
+const u = f(console.warn), A = c(({ children: e, action: o, required: i, ...l }, s) => {
+  const { id: a, required: d } = h(), p = d || 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.'), m(x, { ref: s, variant: "pi", textColor: "neutral800", htmlFor: a, fontWeight: "bold", as: "label", ...l, children: [e, p && t(y, { textColor: "danger600", children: "*" }), o && t(F, { marginLeft: 1, children: o })] });
 }), x = r(n)`
   display: flex;
   align-items: center;
 `, y = r(n)`
   line-height: 0;
-`, F = r(f)`
+`, F = r(g)`
   line-height: 0;
 
   svg path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral500};
+    fill: ${({ theme: e }) => e.colors.neutral500};
   }
 `;
 export {

package/dist/Field/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./Field.cjs"),t=require("./FieldLabel.cjs"),e=require("./FieldInput.cjs"),r=require("./FieldHint.cjs"),d=require("./FieldError.cjs"),i=require("./FieldContext.cjs"),F=require("./FieldAction.cjs");exports.Field=l.Field;exports.FieldLabel=t.FieldLabel;exports.FieldInput=e.FieldInput;exports.InputWrapper=e.InputWrapper;exports.FieldHint=r.FieldHint;exports.FieldError=d.FieldError;exports.FieldContext=i.FieldContext;exports.useField=i.useField;exports.FieldAction=F.FieldAction;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Field.cjs"),t=require("./FieldLabel.cjs"),e=require("./FieldInput.cjs"),l=require("./FieldHint.cjs"),d=require("./FieldError.cjs"),i=require("./FieldContext.cjs"),n=require("./FieldAction.cjs");exports.Field=r.Field;exports.FieldLabel=t.FieldLabel;exports.FieldInput=e.FieldInput;exports.InputWrapper=e.InputWrapper;exports.FieldHint=l.FieldHint;exports.FieldError=d.FieldError;exports.FieldContext=i.FieldContext;exports.useField=i.useField;exports.FieldAction=n.FieldAction;

package/dist/Flex/Flex.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),s=require("../Box/Box.cjs"),l=require("../helpers/handleResponsiveValues.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=n(o),r={direction:!0},a=i.default(s.Box).withConfig({shouldForwardProp:(e,t)=>!r[e]&&t(e)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),n=require("../helpers/handleResponsiveValues.cjs"),r=require("../Box/Box.cjs"),o={direction:!0},s=i(r.Box).withConfig({shouldForwardProp:(e,t)=>!o[e]&&t(e)})`
   align-items: ${({alignItems:e="center"})=>e};
   display: ${({inline:e})=>e?"inline-flex":"flex"};
   flex-direction: ${({direction:e="row"})=>e};
   flex-shrink: ${({shrink:e})=>e};
   flex-wrap: ${({wrap:e})=>e};
-  ${({gap:e,theme:t})=>l("gap",e,t)};
+  ${({gap:e,theme:t})=>n("gap",e,t)};
   justify-content: ${({justifyContent:e})=>e};
-`;exports.Flex=a;
+`;exports.Flex=s;

package/dist/Flex/Flex.js

@@ -1,33 +1,18 @@
 import i from "styled-components";
-import { Box as r } from "../Box/Box.js";
-import t from "../helpers/handleResponsiveValues.js";
+import r from "../helpers/handleResponsiveValues.js";
+import { Box as t } from "../Box/Box.js";
 const n = {
   direction: !0
-}, a = i(r).withConfig({
+}, a = i(t).withConfig({
   shouldForwardProp: (e, o) => !n[e] && o(e)
 })`
-  align-items: ${({
-  alignItems: e = "center"
-}) => e};
-  display: ${({
-  inline: e
-}) => e ? "inline-flex" : "flex"};
-  flex-direction: ${({
-  direction: e = "row"
-}) => e};
-  flex-shrink: ${({
-  shrink: e
-}) => e};
-  flex-wrap: ${({
-  wrap: e
-}) => e};
-  ${({
-  gap: e,
-  theme: o
-}) => t("gap", e, o)};
-  justify-content: ${({
-  justifyContent: e
-}) => e};
+  align-items: ${({ alignItems: e = "center" }) => e};
+  display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
+  flex-direction: ${({ direction: e = "row" }) => e};
+  flex-shrink: ${({ shrink: e }) => e};
+  flex-wrap: ${({ wrap: e }) => e};
+  ${({ gap: e, theme: o }) => r("gap", e, o)};
+  justify-content: ${({ justifyContent: e }) => e};
 `;
 export {
   a as Flex

package/dist/Flex/index.cjs

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

package/dist/FocusTrap/FocusTrap.cjs

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

package/dist/FocusTrap/FocusTrap.js

@@ -2,11 +2,7 @@ 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 v = ({ onEscape: r, restoreFocus: o = !0, ...i }) => {
   const n = m(null);
   return l(() => {
     let e = null;
@@ -18,23 +14,19 @@ const v = ({
       return;
     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("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 });
 };
 export {
   v as FocusTrap

package/dist/FocusTrap/index.cjs

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

package/dist/Grid/Grid.cjs

@@ -1,5 +1,5 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),i=require("react"),n=require("prop-types"),u=require("styled-components"),a=require("./GridContext.cjs"),l=require("../helpers/handleResponsiveValues.cjs"),p=require("../Box/Box.cjs");function d(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 f=d(i),m=u(p.Box)`
   display: grid;
   grid-template-columns: repeat(${({gridCols:e})=>e}, 1fr);
-  ${({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;
+  ${({theme:e,gap:r})=>l("gap",r,e)}
+`,s=({gap:e,gridCols:r,...t})=>{const o=f.useMemo(()=>({gap:e,gridCols:r}),[e,r]);return c.jsx(a.GridContext.Provider,{value:o,children:c.jsx(m,{gap:e,gridCols:r,...t})})};s.defaultProps={gap:0,gridCols:12};s.propTypes={gap:n.oneOfType([n.number,n.arrayOf(n.number)]),gridCols:n.number};exports.Grid=s;

package/dist/Grid/Grid.js

@@ -1,25 +1,26 @@
-import * as t from "react";
-import o from "prop-types";
+import { jsx as p } from "react/jsx-runtime";
+import * as s from "react";
+import e from "prop-types";
 import n from "styled-components";
-import { GridContext as i } from "./GridContext.js";
-import { Box as s } from "../Box/Box.js";
+import { GridContext as a } from "./GridContext.js";
 import d from "../helpers/handleResponsiveValues.js";
-const f = n(s)`
+import { Box as f } from "../Box/Box.js";
+const l = n(f)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ 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 }));
+  ${({ theme: r, gap: o }) => d("gap", o, r)}
+`, t = ({ gap: r, gridCols: o, ...m }) => {
+  const i = s.useMemo(() => ({ gap: r, gridCols: o }), [r, o]);
+  return /* @__PURE__ */ p(a.Provider, { value: i, children: /* @__PURE__ */ p(l, { gap: r, gridCols: o, ...m }) });
 };
-p.defaultProps = {
+t.defaultProps = {
   gap: 0,
   gridCols: 12
 };
-p.propTypes = {
-  gap: o.oneOfType([o.number, o.arrayOf(o.number)]),
-  gridCols: o.number
+t.propTypes = {
+  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  gridCols: e.number
 };
 export {
-  p as Grid
+  t as Grid
 };

package/dist/Grid/GridContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({gap:0,gridCols:12}),r=()=>e.useContext(t);exports.GridContext=t;exports.useGrid=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({gap:0,gridCols:12}),o=()=>e.useContext(t);exports.GridContext=t;exports.useGrid=o;

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("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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const r=require("prop-types"),c=require("styled-components"),m=require("./GridContext.cjs"),l=require("../Box/Box.cjs"),p=c.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}=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;
+`,i=({col:e,xs:s,s:t,...n})=>{const{gap:d,gridCols:u}=m.useGrid();return o.jsx(p,{gap:d,gridCols:u,col:e,xs:s,s:t,children:o.jsx(l.Box,{...n})})};i.defaultProps={col:void 0,s:void 0,xs:void 0};i.propTypes={col:r.number,s:r.number,xs:r.number};exports.GridItem=i;

package/dist/Grid/GridItem.js

@@ -1,9 +1,10 @@
-import o from "react";
-import e from "prop-types";
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import o from "prop-types";
 import n from "styled-components";
-import { useGrid as a } from "./GridContext.js";
-import { Box as l } from "../Box/Box.js";
-const u = n.div`
+import { useGrid as l } from "./GridContext.js";
+import { Box as u } from "../Box/Box.js";
+const a = n.div`
   grid-column: span ${({ col: r }) => r};
   max-width: 100%;
 
@@ -14,9 +15,9 @@ 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 } = a();
-  return /* @__PURE__ */ o.createElement(u, { gap: s, gridCols: d, col: r, xs: t, s: i }, /* @__PURE__ */ o.createElement(l, { ...p }));
+`, m = ({ col: r, xs: e, s: p, ...s }) => {
+  const { gap: t, gridCols: d } = l();
+  return /* @__PURE__ */ i(a, { gap: t, gridCols: d, col: r, xs: e, s: p, children: /* @__PURE__ */ i(u, { ...s }) });
 };
 m.defaultProps = {
   col: void 0,
@@ -24,9 +25,9 @@ m.defaultProps = {
   xs: void 0
 };
 m.propTypes = {
-  col: e.number,
-  s: e.number,
-  xs: e.number
+  col: o.number,
+  s: o.number,
+  xs: o.number
 };
 export {
   m as GridItem

package/dist/Grid/index.cjs

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

package/dist/Icon/Icon.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),a=require("../Box/Box.cjs"),d=require("../helpers/theme.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=o(l),f=o(u),m=f.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("react"),i=require("styled-components"),l=require("../helpers/theme.cjs"),u=require("../Box/Box.cjs"),a=i(u.Box)`
   path {
-    fill: ${({color:e,theme:t})=>d.extractStyleFromTheme(t.colors,e,void 0)};
+    fill: ${({color:e,theme:r})=>l.extractStyleFromTheme(r.colors,e,void 0)};
   }
-  ${({theme:e,colors:t})=>t(e)}
-`,r=i.default.forwardRef(({color:e="neutral600",colors:t=()=>"",...c},s)=>n.jsx(m,{ref:s,color:e,colors:t,...c}));r.displayName="Icon";exports.Icon=r;
+  ${({theme:e,colors:r})=>r(e)}
+`,o=s.forwardRef(({color:e="neutral600",colors:r=()=>"",...t},c)=>n.jsx(a,{ref:c,color:e,colors:r,...t}));o.displayName="Icon";exports.Icon=o;