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

package/dist/Dialog/DialogBody.js

@@ -1,9 +1,9 @@
 import o from "react";
 import n from "styled-components";
-import r from "prop-types";
-import { Box as i } from "../Box/Box.js";
+import i from "prop-types";
+import { Box as d } from "../Box/Box.js";
 import { Flex as p } from "../Flex/Flex.js";
-const a = n(i)`
+const a = n(d)`
   svg {
     width: ${({ theme: e }) => e.spaces[6]};
     height: ${({ theme: e }) => e.spaces[6]};
@@ -12,21 +12,24 @@ const a = n(i)`
       fill: ${({ theme: e }) => e.colors.danger600};
     }
   }
-`, d = ({ children: e, icon: t }) => /* @__PURE__ */ o.createElement(i, {
+`, t = ({ children: e, icon: r }) => /* @__PURE__ */ o.createElement(d, {
   paddingTop: 8,
   paddingBottom: 8,
   paddingLeft: 6,
   paddingRight: 6
-}, t && /* @__PURE__ */ o.createElement(a, {
+}, r && /* @__PURE__ */ o.createElement(a, {
   paddingBottom: 2
 }, /* @__PURE__ */ o.createElement(p, {
   justifyContent: "center"
-}, t)), e);
-d.displayName = "DialogBody";
-d.propTypes = {
-  children: r.node.isRequired,
-  icon: r.node
+}, r)), e);
+t.displayName = "DialogBody";
+t.defaultProps = {
+  icon: void 0
+};
+t.propTypes = {
+  children: i.node.isRequired,
+  icon: i.node
 };
 export {
-  d as DialogBody
+  t as DialogBody
 };

package/dist/DismissibleLayer/DismissibleLayer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),R=require("prop-types"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},E=l(t),a=l(R),f=({children:e,className:o,onEscapeKeyDown:c,onPointerDownOutside:p})=>{const s=t.useRef(null),u=d(c),i=d(p);return t.useEffect(()=>{const n=r=>{r.key==="Escape"&&u(r)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[u]),t.useEffect(()=>{const n=r=>{const y=s.current.closest("[data-react-portal]"),m=r.target.closest("[data-react-portal]");s.current&&!s.current.contains(r.target)&&y===m&&i()};return document.addEventListener("pointerdown",n),()=>document.removeEventListener("pointerdown",n)},[i]),E.default.createElement("div",{ref:s,className:o},e)};f.propTypes={children:a.default.node.isRequired,className:a.default.string,onEscapeKeyDown:a.default.func.isRequired,onPointerDownOutside:a.default.func.isRequired};function d(e){const o=t.useRef(e);return t.useEffect(()=>{o.current=e}),t.useMemo(()=>(...c)=>o.current?.(...c),[])}exports.DismissibleLayer=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),i=require("@radix-ui/react-use-callback-ref"),R=require("prop-types"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},b=l(a),s=l(R),o=({children:e,className:d,onEscapeKeyDown:f,onPointerDownOutside:p})=>{const r=a.useRef(null),c=i.useCallbackRef(f),u=i.useCallbackRef(p);return a.useEffect(()=>{const t=n=>{n.key==="Escape"&&c(n)};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[c]),a.useEffect(()=>{const t=n=>{const y=r.current.closest("[data-react-portal]"),m=n.target.closest("[data-react-portal]");r.current&&!r.current.contains(n.target)&&y===m&&u()};return document.addEventListener("pointerdown",t),()=>document.removeEventListener("pointerdown",t)},[u]),b.default.createElement("div",{ref:r,className:d},e)};o.defaultProps={className:void 0};o.propTypes={children:s.default.node.isRequired,className:s.default.string,onEscapeKeyDown:s.default.func.isRequired,onPointerDownOutside:s.default.func.isRequired};exports.DismissibleLayer=o;

package/dist/DismissibleLayer/DismissibleLayer.js

@@ -1,38 +1,33 @@
-import y, { useRef as l, useEffect as a, useMemo as w } from "react";
-import s from "prop-types";
-const R = ({ children: n, className: r, onEscapeKeyDown: c, onPointerDownOutside: f }) => {
-  const o = l(null), i = u(c), d = u(f);
+import y, { useRef as w, useEffect as a } from "react";
+import { useCallbackRef as c } from "@radix-ui/react-use-callback-ref";
+import r from "prop-types";
+const i = ({ children: d, className: u, onEscapeKeyDown: l, onPointerDownOutside: m }) => {
+  const n = w(null), o = c(l), s = c(m);
   return a(() => {
     const e = (t) => {
-      t.key === "Escape" && i(t);
+      t.key === "Escape" && o(t);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [i]), a(() => {
+  }, [o]), a(() => {
     const e = (t) => {
-      const m = o.current.closest("[data-react-portal]"), p = t.target.closest("[data-react-portal]");
-      o.current && !o.current.contains(t.target) && m === p && d();
+      const p = n.current.closest("[data-react-portal]"), f = t.target.closest("[data-react-portal]");
+      n.current && !n.current.contains(t.target) && p === f && s();
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-  }, [d]), /* @__PURE__ */ y.createElement("div", {
-    ref: o,
-    className: r
-  }, n);
+  }, [s]), /* @__PURE__ */ y.createElement("div", {
+    ref: n,
+    className: u
+  }, d);
 };
-R.propTypes = {
-  children: s.node.isRequired,
-  className: s.string,
-  onEscapeKeyDown: s.func.isRequired,
-  onPointerDownOutside: s.func.isRequired
+i.defaultProps = {
+  className: void 0
+};
+i.propTypes = {
+  children: r.node.isRequired,
+  className: r.string,
+  onEscapeKeyDown: r.func.isRequired,
+  onPointerDownOutside: r.func.isRequired
 };
-function u(n) {
-  const r = l(n);
-  return a(() => {
-    r.current = n;
-  }), w(
-    () => (...c) => r.current?.(...c),
-    []
-  );
-}
 export {
-  R as DismissibleLayer
+  i as DismissibleLayer
 };

package/dist/Divider/Divider.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),u=require("../Box/Box.cjs"),c=require("styled-components"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=t(s),o=t(a),l=t(c),i=l.default(u.Box)`
+"use strict";var g=Object.defineProperty,y=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var u=(e,t,r)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&u(e,r,t[r]);if(n)for(var r of n(t))d.call(t,r)&&u(e,r,t[r]);return e},i=(e,t)=>y(e,_(t));var p=(e,t)=>{var r={};for(var o in e)c.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&d.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),v=require("prop-types"),x=require("styled-components"),m=require("../Box/Box.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},q=s(b),f=s(v),B=s(x),D=B.default(m.Box)`
   height: 1px;
   border: none;
   ${({unsetMargin:e})=>e?"margin: 0;":""}
-`,r=({unsetMargin:e,...n})=>d.default.createElement(i,{...n,as:"hr",unsetMargin:e});r.defaultProps={background:"neutral150",unsetMargin:!0};r.propTypes={background:o.default.string,unsetMargin:o.default.bool};exports.Divider=r;
+`,a=r=>{var o=r,{unsetMargin:e}=o,t=p(o,["unsetMargin"]);return q.default.createElement(D,i(l({},t),{as:"hr",unsetMargin:e}))};a.defaultProps={background:"neutral150",unsetMargin:!0};a.propTypes={background:f.default.string,unsetMargin:f.default.bool};exports.Divider=a;

package/dist/Divider/Divider.js

@@ -1,24 +1,47 @@
-import n from "react";
-import e from "prop-types";
-import { Box as p } from "../Box/Box.js";
-import i from "styled-components";
-const a = i(p)`
+var c = Object.defineProperty, f = Object.defineProperties;
+var l = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var p = (r, e, o) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, m = (r, e) => {
+  for (var o in e || (e = {}))
+    i.call(e, o) && p(r, o, e[o]);
+  if (n)
+    for (var o of n(e))
+      a.call(e, o) && p(r, o, e[o]);
+  return r;
+}, s = (r, e) => f(r, l(e));
+var d = (r, e) => {
+  var o = {};
+  for (var t in r)
+    i.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && n)
+    for (var t of n(r))
+      e.indexOf(t) < 0 && a.call(r, t) && (o[t] = r[t]);
+  return o;
+};
+import b from "react";
+import u from "prop-types";
+import h from "styled-components";
+import { Box as x } from "../Box/Box.js";
+const y = h(x)`
   height: 1px;
   border: none;
   ${({ unsetMargin: r }) => r ? "margin: 0;" : ""}
-`, o = ({ unsetMargin: r, ...t }) => /* @__PURE__ */ n.createElement(a, {
-  ...t,
-  as: "hr",
-  unsetMargin: r
-});
-o.defaultProps = {
+`, g = (o) => {
+  var t = o, { unsetMargin: r } = t, e = d(t, ["unsetMargin"]);
+  return /* @__PURE__ */ b.createElement(y, s(m({}, e), {
+    as: "hr",
+    unsetMargin: r
+  }));
+};
+g.defaultProps = {
   background: "neutral150",
   unsetMargin: !0
 };
-o.propTypes = {
-  background: e.string,
-  unsetMargin: e.bool
+g.propTypes = {
+  background: u.string,
+  unsetMargin: u.bool
 };
 export {
-  o as Divider
+  g as Divider
 };

package/dist/Field/Field.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),c=require("prop-types"),p=require("./FieldContext.cjs"),y=require("../helpers/useId.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(f),e=o(c),d=({children:t,name:l,error:u,hint:a,id:n,...i})=>{const s=y.useId("field",n);return r.default.createElement("div",{...i},r.default.createElement(p.FieldContext.Provider,{value:{name:l,id:s,error:u,hint:a}},t))};d.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0};d.propTypes={children:e.default.node.isRequired,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),name:e.default.string};exports.Field=d;
+"use strict";var _=Object.defineProperty;var l=Object.getOwnPropertySymbols;var i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var n=(e,d,t)=>d in e?_(e,d,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[d]=t,f=(e,d)=>{for(var t in d||(d={}))i.call(d,t)&&n(e,t,d[t]);if(l)for(var t of l(d))s.call(d,t)&&n(e,t,d[t]);return e};var c=(e,d)=>{var t={};for(var o in e)i.call(e,o)&&d.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))d.indexOf(o)<0&&s.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("prop-types"),q=require("./FieldContext.cjs"),F=require("../helpers/useId.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=y(m),r=y(b),u=O=>{var a=O,{children:e,name:d,error:t,hint:o,id:v}=a,g=c(a,["children","name","error","hint","id"]);const T=F.useId("field",v);return p.default.createElement("div",f({},g),p.default.createElement(q.FieldContext.Provider,{value:{name:d,id:T,error:t,hint:o}},e))};u.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0};u.propTypes={children:r.default.node.isRequired,error:r.default.oneOfType([r.default.string,r.default.bool]),hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.oneOfType([r.default.string,r.default.number]),name:r.default.string};exports.Field=u;

package/dist/Field/Field.js

@@ -1,28 +1,47 @@
-import r from "react";
-import e from "prop-types";
-import { FieldContext as f } from "./FieldContext.js";
-import { useId as s } from "../helpers/useId.js";
-const o = ({ children: i, name: t, error: n, hint: d, id: p, ...m }) => {
-  const a = s("field", p);
-  return /* @__PURE__ */ r.createElement("div", {
-    ...m
-  }, /* @__PURE__ */ r.createElement(f.Provider, {
-    value: { name: t, id: a, error: n, hint: d }
-  }, i));
+var g = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var p = (e, o, r) => o in e ? g(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, f = (e, o) => {
+  for (var r in o || (o = {}))
+    m.call(o, r) && p(e, r, o[r]);
+  if (n)
+    for (var r of n(o))
+      a.call(o, r) && p(e, r, o[r]);
+  return e;
 };
-o.defaultProps = {
+var s = (e, o) => {
+  var r = {};
+  for (var t in e)
+    m.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && n)
+    for (var t of n(e))
+      o.indexOf(t) < 0 && a.call(e, t) && (r[t] = e[t]);
+  return r;
+};
+import l from "react";
+import i from "prop-types";
+import { FieldContext as T } from "./FieldContext.js";
+import { useId as O } from "../helpers/useId.js";
+const u = (h) => {
+  var d = h, { children: e, name: o, error: r, hint: t, id: v } = d, c = s(d, ["children", "name", "error", "hint", "id"]);
+  const y = O("field", v);
+  return /* @__PURE__ */ l.createElement("div", f({}, c), /* @__PURE__ */ l.createElement(T.Provider, {
+    value: { name: o, id: y, error: r, hint: t }
+  }, e));
+};
+u.defaultProps = {
   error: void 0,
   hint: void 0,
   id: void 0,
   name: void 0
 };
-o.propTypes = {
-  children: e.node.isRequired,
-  error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.oneOfType([e.string, e.number]),
-  name: e.string
+u.propTypes = {
+  children: i.node.isRequired,
+  error: i.oneOfType([i.string, i.bool]),
+  hint: i.oneOfType([i.string, i.node, i.arrayOf(i.node)]),
+  id: i.oneOfType([i.string, i.number]),
+  name: i.string
 };
 export {
-  o as Field
+  u as Field
 };

package/dist/Field/FieldAction.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),l=require("styled-components"),d=require("prop-types"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=t(s),u=t(l),o=t(d),c=u.default.button`
+"use strict";var y=Object.defineProperty;var r=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;var l=(e,o,t)=>o in e?y(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,u=(e,o)=>{for(var t in o||(o={}))d.call(o,t)&&l(e,t,o[t]);if(r)for(var t of r(o))i.call(o,t)&&l(e,t,o[t]);return e};var c=(e,o)=>{var t={};for(var n in e)d.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&r)for(var n of r(e))o.indexOf(n)<0&&i.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),_=require("styled-components"),g=require("prop-types"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=a(b),h=a(_),p=a(g),q=h.default.button`
   border: none;
   background: transparent;
   // TODO: Make sure to use the theme when it's ready
@@ -7,4 +7,4 @@
   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=>{var s=n,{label:e,children:o}=s,t=c(s,["label","children"]);return m.default.createElement(q,u({"aria-label":e,type:"button"},t),o)};f.propTypes={children:p.default.node.isRequired,label:p.default.string.isRequired};exports.FieldAction=f;

package/dist/Field/FieldAction.js

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

package/dist/Field/FieldInput.cjs

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

package/dist/Field/FieldInput.js

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

package/dist/Field/FieldLabel.cjs

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