@strapi/design-system 1.6.4 → 1.6.5

package/dist/Dialog/DialogFooter.js

@@ -2,7 +2,7 @@ import e from "react";
 import r from "prop-types";
 import n from "styled-components";
 import { Box as p } from "../Box/Box.js";
-import { Stack as a } from "../Stack/Stack.js";
+import { Flex as a } from "../Flex/Flex.js";
 const d = n(p)`
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
 
@@ -11,7 +11,7 @@ const d = n(p)`
     display: inline-flex;
     justify-content: center;
   }
-`, t = ({ startAction: o, endAction: i }) => /* @__PURE__ */ e.createElement(d, { padding: 4 }, /* @__PURE__ */ e.createElement(a, { horizontal: !0, spacing: 2 }, o, i));
+`, t = ({ startAction: o, endAction: i }) => /* @__PURE__ */ e.createElement(d, { padding: 4 }, /* @__PURE__ */ e.createElement(a, { gap: 2 }, o, i));
 t.displayName = "DialogFooter";
 t.defaultProps = {
   endAction: void 0,

package/dist/Field/Field.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),p=require("prop-types"),y=require("./FieldContext.cjs"),b=require("../helpers/useId.cjs"),g=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function m(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,d.get?d:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=m(c),t=g(p),u=({children:e,name:r,error:o,hint:d,id:i,required:l,...s})=>{const a=b.useId(i),f=n.useMemo(()=>({name:r,id:a,error:o,hint:d,required:l}),[o,a,d,r,l]);return n.createElement("div",{...s},n.createElement(y.FieldContext.Provider,{value:f},e))};u.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0,required:!1};u.propTypes={children:t.default.node.isRequired,error:t.default.oneOfType([t.default.string,t.default.bool]),hint:t.default.oneOfType([t.default.string,t.default.bool,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.oneOfType([t.default.string,t.default.number]),name:t.default.string,required:t.default.bool};exports.Field=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),i=require("react"),a=require("./FieldContext.cjs"),j=require("../Box/Box.cjs"),f=require("../hooks/useId.cjs"),F=i.forwardRef(({children:n,name:e,error:t,hint:o,id:u,required:s=!1,...d},l)=>{const r=f.useId(u),x=i.useMemo(()=>({name:e,id:r,error:t,hint:o,required:s}),[t,r,o,e,s]);return c.jsx(j.Box,{ref:l,...d,children:c.jsx(a.FieldContext.Provider,{value:x,children:n})})});exports.Field=F;

package/dist/Field/Field.js

@@ -1,29 +1,33 @@
-import * as o from "react";
-import e from "prop-types";
-import { FieldContext as f } from "./FieldContext.js";
-import { useId as c } from "../helpers/useId.js";
-const s = ({ children: p, name: r, error: t, hint: i, id: m, required: n, ...a }) => {
-  const d = c(m), l = o.useMemo(
-    () => ({ name: r, id: d, error: t, hint: i, required: n }),
-    [t, d, i, r, n]
-  );
-  return /* @__PURE__ */ o.createElement("div", { ...a }, /* @__PURE__ */ o.createElement(f.Provider, { value: l }, p));
-};
-s.defaultProps = {
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  name: void 0,
-  required: !1
-};
-s.propTypes = {
-  children: e.node.isRequired,
-  error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.bool, e.node, e.arrayOf(e.node)]),
-  id: e.oneOfType([e.string, e.number]),
-  name: e.string,
-  required: e.bool
-};
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as l, useMemo as p } from "react";
+import { FieldContext as x } from "./FieldContext.js";
+import { Box as a } from "../Box/Box.js";
+import { useId as u } from "../hooks/useId.js";
+const j = l(({
+  children: f,
+  name: o,
+  error: r,
+  hint: e,
+  id: i,
+  required: t = !1,
+  ...n
+}, s) => {
+  const m = u(i), c = p(() => ({
+    name: o,
+    id: m,
+    error: r,
+    hint: e,
+    required: t
+  }), [r, m, e, o, t]);
+  return d(a, {
+    ref: s,
+    ...n,
+    children: d(x.Provider, {
+      value: c,
+      children: f
+    })
+  });
+});
 export {
-  s as Field
+  j as Field
 };

package/dist/Field/FieldAction.cjs

@@ -1,10 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),l=require("prop-types"),d=require("styled-components"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=t(s),o=t(l),u=t(d),c=u.default.button`
-  border: none;
-  background: transparent;
-  // TODO: Make sure to use the theme when it's ready
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("react"),r=require("styled-components"),o=require("../Flex/Flex.cjs"),d=require("../VisuallyHidden/VisuallyHidden.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=a(r),c=u.default(o.Flex)`
   font-size: 1.6rem;
-  width: auto;
   padding: 0;
-  display: flex;
-  align-items: center;
-`,n=({label:e,children:r,...a})=>i.default.createElement(c,{"aria-label":e,type:"button",...a},r);n.propTypes={children:o.default.node.isRequired,label:o.default.string.isRequired};exports.FieldAction=n;
+`,f=n.forwardRef(({label:e,children:s,...l},i)=>t.jsxs(c,{justifyContent:"unset",background:"transparent",borderStyle:"none",type:"button",...l,as:"button",ref:i,children:[t.jsx(d.VisuallyHidden,{as:"span",children:e}),n.cloneElement(s,{"aria-hidden":!0,focusable:!1})]}));exports.FieldAction=f;

package/dist/Field/FieldAction.js

@@ -1,20 +1,31 @@
-import i from "react";
-import e from "prop-types";
-import n from "styled-components";
-const a = n.button`
-  border: none;
-  background: transparent;
-  // TODO: Make sure to use the theme when it's ready
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { forwardRef as s, cloneElement as a } from "react";
+import d from "styled-components";
+import { Flex as l } from "../Flex/Flex.js";
+import { VisuallyHidden as f } from "../VisuallyHidden/VisuallyHidden.js";
+const m = d(l)`
   font-size: 1.6rem;
-  width: auto;
   padding: 0;
-  display: flex;
-  align-items: center;
-`, d = ({ label: t, children: r, ...o }) => /* @__PURE__ */ i.createElement(a, { "aria-label": t, type: "button", ...o }, r);
-d.propTypes = {
-  children: e.node.isRequired,
-  label: e.string.isRequired
-};
+`, 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
+  })]
+}));
 export {
-  d as FieldAction
+  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({error:void 0,hint:void 0,name:"",id:""}),o=()=>e.useContext(t);exports.FieldContext=t;exports.useField=o;
+"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;

package/dist/Field/FieldContext.js

@@ -1,6 +1,6 @@
 import { createContext as e, useContext as t } from "react";
-const o = e({ error: void 0, hint: void 0, name: "", id: "" }), n = () => t(o);
+const o = e({ id: "", required: !1 }), i = () => t(o);
 export {
   o as FieldContext,
-  n as useField
+  i as useField
 };

package/dist/Field/FieldError.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),o=require("./FieldContext.cjs"),a=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=i(t),n=()=>{const{id:e,error:r}=o.useField();return!r||typeof r!="string"?null:l.default.createElement(a.Typography,{variant:"pi",as:"p",id:`${e}-error`,textColor:"danger600","data-strapi-field-error":!0},r)};exports.FieldError=n;
+"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;

package/dist/Field/FieldError.js

@@ -1,9 +1,19 @@
-import t from "react";
-import { useField as o } from "./FieldContext.js";
+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: e, error: r } = o();
-  return !r || typeof r != "string" ? null : /* @__PURE__ */ t.createElement(i, { variant: "pi", as: "p", id: `${e}-error`, textColor: "danger600", "data-strapi-field-error": !0 }, 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 o=require("react"),i=require("./FieldContext.cjs"),n=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=a(o),u=()=>{const{id:e,hint:t,error:r}=i.useField();return!t||typeof t!="string"||r?null:l.default.createElement(n.Typography,{variant:"pi",as:"p",id:`${e}-hint`,textColor:"neutral600"},t)};exports.FieldHint=u;
+"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||typeof e!="string"||r?null:i.jsx(o.Typography,{variant:"pi",as:"p",id:`${t}-hint`,textColor:"neutral600",children:e})};exports.FieldHint=s;

package/dist/Field/FieldHint.js

@@ -1,10 +1,20 @@
-import i from "react";
-import { useField as o } from "./FieldContext.js";
-import { Typography as n } from "../Typography/Typography.js";
-const m = () => {
-  const { id: r, hint: t, error: e } = o();
-  return !t || typeof t != "string" || e ? null : /* @__PURE__ */ i.createElement(n, { variant: "pi", as: "p", id: `${r}-hint`, textColor: "neutral600" }, t);
+import { jsx as o } from "react/jsx-runtime";
+import { useField as n } from "./FieldContext.js";
+import { Typography as e } from "../Typography/Typography.js";
+const s = () => {
+  const {
+    id: t,
+    hint: r,
+    error: i
+  } = n();
+  return !r || typeof r != "string" || i ? null : o(e, {
+    variant: "pi",
+    as: "p",
+    id: `${t}-hint`,
+    textColor: "neutral600",
+    children: r
+  });
 };
 export {
-  m as FieldHint
+  s as FieldHint
 };

package/dist/Field/FieldInput.cjs

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

package/dist/Field/FieldInput.js

@@ -1,33 +1,96 @@
-import t, { forwardRef as k } from "react";
-import r from "prop-types";
-import m from "styled-components";
+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 c } from "../Box/Box.js";
-import { Flex as v } from "../Flex/Flex.js";
-import { sizes as x } from "../themes/sizes.js";
-import { inputFocusStyle as C } from "../themes/utils.js";
-const u = {
+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,59 +103,28 @@ const u = {
     outline: none;
     box-shadow: none;
   }
-`, F = m(v)`
-  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};
-  ${C()}
+`, 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 } = I();
-  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(x.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("prop-types"),h=require("styled-components"),m=require("./FieldContext.cjs"),n=require("../Flex/Flex.cjs"),d=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(y),r=o(g),s=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,32 +1,50 @@
-import e from "react";
-import o from "prop-types";
-import n from "styled-components";
-import { useField as u } from "./FieldContext.js";
-import { Flex as l } from "../Flex/Flex.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;