@strapi/design-system 1.3.1-alpha.0 → 1.3.1-alpha.1

package/dist/Dialog/Dialog.js

@@ -1,66 +1,85 @@
-import r from "prop-types";
-import o from "react";
-import t from "styled-components";
-import { Box as n } from "../Box/Box.js";
-import { FocusTrap as c } from "../FocusTrap/FocusTrap.js";
-import { Portal as f } from "../Portal/Portal.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { Typography as y } from "../Typography/Typography.js";
-import { DismissibleLayer as b } from "../DismissibleLayer/DismissibleLayer.js";
-import { setOpacity as E } from "../helpers/setOpacity.js";
-import h from "../helpers/useLockScroll.js";
-import { useId as D } from "../helpers/useId.js";
-const x = t.div`
+var D = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var p = (e, r, o) => r in e ? D(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
+  for (var o in r || (r = {}))
+    u.call(r, o) && p(e, o, r[o]);
+  if (l)
+    for (var o of l(r))
+      c.call(r, o) && p(e, o, r[o]);
+  return e;
+};
+var g = (e, r) => {
+  var o = {};
+  for (var t in e)
+    u.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && l)
+    for (var t of l(e))
+      r.indexOf(t) < 0 && c.call(e, t) && (o[t] = e[t]);
+  return o;
+};
+import i from "prop-types";
+import a from "react";
+import n from "styled-components";
+import { Box as y } from "../Box/Box.js";
+import { FocusTrap as x } from "../FocusTrap/FocusTrap.js";
+import { Portal as w } from "../Portal/Portal.js";
+import { Flex as R } from "../Flex/Flex.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { DismissibleLayer as $ } from "../DismissibleLayer/DismissibleLayer.js";
+import { setOpacity as v } from "../helpers/setOpacity.js";
+import P from "../helpers/useLockScroll.js";
+import { useId as k } from "../helpers/useId.js";
+const q = n.div`
   position: fixed;
   z-index: 4;
   inset: 0;
-  background: ${({ theme: e }) => E(e.colors.neutral800, 0.2)};
+  background: ${({ theme: e }) => v(e.colors.neutral800, 0.2)};
   padding: 0 ${({ theme: e }) => e.spaces[8]};
-`, w = t(n)`
+`, O = n(y)`
   max-width: ${412 / 16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`, R = t(g)`
+`, B = n(R)`
   border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, a = ({ onClose: e, title: m, as: s, isOpen: i, id: d, ...p }) => {
-  const u = D("dialog", d);
-  if (h(i), !i)
+`, m = (C) => {
+  var s = C, { onClose: e, title: r, as: o, isOpen: t, id: b } = s, E = g(s, ["onClose", "title", "as", "isOpen", "id"]);
+  const h = k("dialog", b);
+  if (P(t), !t)
     return null;
-  const l = `${u}-label`;
-  return /* @__PURE__ */ o.createElement(f, null, /* @__PURE__ */ o.createElement(x, null, /* @__PURE__ */ o.createElement(c, null, /* @__PURE__ */ o.createElement(b, {
+  const d = `${h}-label`;
+  return /* @__PURE__ */ a.createElement(w, null, /* @__PURE__ */ a.createElement(q, null, /* @__PURE__ */ a.createElement(x, null, /* @__PURE__ */ a.createElement($, {
     onEscapeKeyDown: e,
     onPointerDownOutside: e
-  }, /* @__PURE__ */ o.createElement(w, {
-    "aria-labelledby": l,
+  }, /* @__PURE__ */ a.createElement(O, {
+    "aria-labelledby": d,
     "aria-modal": !0,
     background: "neutral0",
     hasRadius: !0,
     shadow: "popupShadow",
     role: "dialog"
-  }, /* @__PURE__ */ o.createElement(R, {
+  }, /* @__PURE__ */ a.createElement(B, {
     padding: 6,
     justifyContent: "center"
-  }, /* @__PURE__ */ o.createElement(y, {
+  }, /* @__PURE__ */ a.createElement(T, {
     variant: "beta",
-    as: s || "h2",
-    id: l
-  }, m)), /* @__PURE__ */ o.createElement(n, {
-    ...p
-  }))))));
+    as: o || "h2",
+    id: d
+  }, r)), /* @__PURE__ */ a.createElement(y, f({}, E)))))));
 };
-a.displayName = "Dialog";
-a.defaultProps = {
+m.displayName = "Dialog";
+m.defaultProps = {
   as: "h2",
   id: void 0
 };
-a.propTypes = {
-  as: r.string,
-  id: r.oneOfType([r.string, r.number]),
-  isOpen: r.bool.isRequired,
-  onClose: r.func.isRequired,
-  title: r.string.isRequired
+m.propTypes = {
+  as: i.string,
+  id: i.oneOfType([i.string, i.number]),
+  isOpen: i.bool.isRequired,
+  onClose: i.func.isRequired,
+  title: i.string.isRequired
 };
 export {
-  a as Dialog
+  m as Dialog
 };

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 t=require("react"),E=require("prop-types"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},w=f(t),a=f(E),p=({children:e,className:n,onEscapeKeyDown:c,onPointerDownOutside:s})=>{const u=t.useRef(null),i=l(c),d=l(s);return t.useEffect(()=>{const r=o=>{o.key==="Escape"&&i(o)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[i]),t.useEffect(()=>{const r=o=>{const y=u.current.closest("[data-react-portal]"),m=o.target.closest("[data-react-portal]");u.current&&!u.current.contains(o.target)&&y===m&&d()};return document.addEventListener("pointerdown",r),()=>document.removeEventListener("pointerdown",r)},[d]),w.default.createElement("div",{ref:u,className:n},e)};p.propTypes={children:a.default.node.isRequired,className:a.default.string,onEscapeKeyDown:a.default.func.isRequired,onPointerDownOutside:a.default.func.isRequired};function l(e){const n=t.useRef(e);return t.useEffect(()=>{n.current=e}),t.useMemo(()=>(...c)=>{var s;return(s=n.current)==null?void 0:s.call(n,...c)},[])}exports.DismissibleLayer=p;

package/dist/DismissibleLayer/DismissibleLayer.js

@@ -1,38 +1,41 @@
-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 m, useEffect as a, useMemo as w } from "react";
+import c from "prop-types";
+const E = ({ children: r, className: e, onEscapeKeyDown: i, onPointerDownOutside: o }) => {
+  const s = m(null), d = l(i), u = l(o);
   return a(() => {
-    const e = (t) => {
-      t.key === "Escape" && i(t);
+    const t = (n) => {
+      n.key === "Escape" && d(n);
     };
-    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [i]), 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();
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [d]), a(() => {
+    const t = (n) => {
+      const p = s.current.closest("[data-react-portal]"), f = n.target.closest("[data-react-portal]");
+      s.current && !s.current.contains(n.target) && p === f && u();
     };
-    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-  }, [d]), /* @__PURE__ */ y.createElement("div", {
-    ref: o,
-    className: r
-  }, n);
+    return document.addEventListener("pointerdown", t), () => document.removeEventListener("pointerdown", t);
+  }, [u]), /* @__PURE__ */ y.createElement("div", {
+    ref: s,
+    className: e
+  }, r);
 };
-R.propTypes = {
-  children: s.node.isRequired,
-  className: s.string,
-  onEscapeKeyDown: s.func.isRequired,
-  onPointerDownOutside: s.func.isRequired
+E.propTypes = {
+  children: c.node.isRequired,
+  className: c.string,
+  onEscapeKeyDown: c.func.isRequired,
+  onPointerDownOutside: c.func.isRequired
 };
-function u(n) {
-  const r = l(n);
+function l(r) {
+  const e = m(r);
   return a(() => {
-    r.current = n;
+    e.current = r;
   }), w(
-    () => (...c) => r.current?.(...c),
+    () => (...i) => {
+      var o;
+      return (o = e.current) == null ? void 0 : o.call(e, ...i);
+    },
     []
   );
 }
 export {
-  R as DismissibleLayer
+  E 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("../Box/Box.cjs"),m=require("styled-components"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},q=s(b),f=s(v),B=s(m),D=B.default(x.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 { Box as h } from "../Box/Box.js";
+import x from "styled-components";
+const y = x(h)`
   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:u,error:l,hint:n,id:a,...i})=>{const s=y.useId("field",a);return r.default.createElement("div",{...i},r.default.createElement(p.FieldContext.Provider,{value:{name:u,id:s,error:l,hint:n}},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.string,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 m=Object.defineProperty;var u=Object.getOwnPropertySymbols;var i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var a=(e,d,t)=>d in e?m(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)&&a(e,t,d[t]);if(u)for(var t of u(d))s.call(d,t)&&a(e,t,d[t]);return e};var c=(e,d)=>{var t={};for(var r in e)i.call(e,r)&&d.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&u)for(var r of u(e))d.indexOf(r)<0&&s.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),q=require("prop-types"),F=require("./FieldContext.cjs"),P=require("../helpers/useId.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=y(T),o=y(q),l=b=>{var n=b,{children:e,name:d,error:t,hint:r,id:v}=n,g=c(n,["children","name","error","hint","id"]);const _=P.useId("field",v);return p.default.createElement("div",f({},g),p.default.createElement(F.FieldContext.Provider,{value:{name:d,id:_,error:t,hint:r}},e))};l.defaultProps={error:void 0,hint:void 0,id:void 0,name:void 0};l.propTypes={children:o.default.node.isRequired,error:o.default.string,hint:o.default.oneOfType([o.default.string,o.default.node,o.default.arrayOf(o.default.node)]),id:o.default.oneOfType([o.default.string,o.default.number]),name:o.default.string};exports.Field=l;

package/dist/Field/Field.js

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