@strapi/design-system 1.6.4 → 1.6.6

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,114 +1,107 @@
-import r, { useState as S, useEffect as x } from "react";
-import { dateTimePickerDefaultProps as C, dateTimePickerPropTypes as L } from "./DateTimePickerProps.js";
-import { parseDate as y } from "./parseDate.js";
-import { DatePicker as R } from "../DatePicker/DatePicker.js";
-import { Field as b } from "../Field/Field.js";
+import { jsx as r, jsxs as D } from "react/jsx-runtime";
+import { DatePicker as P } from "../DatePicker/DatePicker.js";
+import { Field as V } from "../Field/Field.js";
 import { FieldLabel as j } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as z } from "../Field/FieldHint.js";
-import { FieldError as A } from "../Field/FieldError.js";
+import { FieldHint as q } from "../Field/FieldHint.js";
+import { FieldError as v } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as B } from "../helpers/useId.js";
-import { Stack as H } from "../Stack/Stack.js";
-import { TimePicker as G } from "../TimePicker/TimePicker.js";
-const M = ({
-  ariaLabel: g,
-  clearLabel: T,
-  disabled: E,
+import { Flex as C } from "../Flex/Flex.js";
+import { useControllableState as z } from "../hooks/useControllableState.js";
+import { useId as B } from "../hooks/useId.js";
+import { TimePicker as E } from "../TimePicker/TimePicker.js";
+const te = ({
+  ariaLabel: s,
+  clearLabel: n = "clear",
+  disabled: f = !1,
   error: d,
-  hint: p,
-  label: l,
-  labelAction: w,
-  onChange: o,
-  onClear: f,
+  hint: m,
+  id: b,
+  label: c,
+  labelAction: I,
+  onChange: T,
+  onClear: g,
   name: $,
-  required: u,
-  selectButtonTitle: h,
-  size: k,
-  step: F,
-  value: a,
-  ...P
+  required: p = !1,
+  selectButtonTitle: w = "select",
+  size: h = "M",
+  step: y = 1,
+  value: F,
+  ...H
 }) => {
-  const n = y(a), [i, m] = S(n), [c, s] = S(
-    n ? `${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}` : null
-  ), V = (e) => {
-    m(e);
-    let t;
-    c ? (t = new Date(e), t.setHours(c.split(":")[0]), t.setMinutes(c.split(":")[1])) : (t = new Date(e), s(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)), o && o(t);
-  }, I = (e) => {
-    s(e);
-    const t = i ? new Date(i) : new Date();
-    t.setHours(e.split(":")[0]), t.setMinutes(e.split(":")[1]), i || m(t), o && o(t);
-  }, _ = () => {
-    m(void 0), s(void 0), f();
-  }, v = () => {
-    s(void 0);
-    let e;
-    i && (e = new Date(i), e.setHours("00"), e.setMinutes("00")), o && o(e);
-  };
-  x(() => {
-    if (a && +a != +i) {
-      const e = y(a);
-      m(e), s(
-        e ? `${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}` : null
-      );
-    } else
-      a || (m(void 0), s(void 0));
-  }, [a, i]);
-  const D = B(P?.id);
-  return /* @__PURE__ */ r.createElement(
-    b,
-    {
-      name: $,
-      role: "group",
-      id: D,
-      "aria-labelledby": D,
-      hint: p,
-      error: d,
-      required: u
-    },
-    /* @__PURE__ */ r.createElement(H, { spacing: 1 }, l && /* @__PURE__ */ r.createElement(j, { action: w }, l), /* @__PURE__ */ r.createElement(H, { horizontal: !0, spacing: 2 }, /* @__PURE__ */ r.createElement(
-      R,
-      {
-        "data-testid": "datetimepicker-date",
-        id: D,
-        name: $,
-        ariaLabel: l || g,
-        error: typeof d == "string",
-        hint: typeof p == "string",
-        selectedDate: i,
-        selectedDateLabel: (e) => `Date picker, current is ${e}`,
-        onChange: V,
-        required: u,
-        size: k,
-        onClear: f && _,
-        clearLabel: T,
-        disabled: E,
-        ...P
-      }
-    ), /* @__PURE__ */ r.createElement(
-      G,
-      {
-        "data-testid": "datetimepicker-time",
-        size: k,
-        "aria-label": l || g,
-        error: typeof d == "string",
-        hint: typeof p == "string",
-        value: c,
-        onChange: I,
-        onClear: f && v,
-        clearLabel: T,
-        required: u,
-        selectButtonTitle: h,
-        disabled: E,
-        step: F
-      }
-    )), /* @__PURE__ */ r.createElement(z, null), /* @__PURE__ */ r.createElement(A, null))
-  );
+  const M = A(F), [t, a] = z({
+    prop: M,
+    onChange: T
+  }), i = t ? `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}` : void 0, k = (e) => {
+    if (i) {
+      const [o, u] = i.split(":");
+      e.setHours(parseInt(o, 10)), e.setMinutes(parseInt(u, 10));
+    }
+    a(e);
+  }, x = (e) => {
+    const o = t ? new Date(t) : new Date(), [u, N] = e.split(":");
+    o.setHours(parseInt(u, 10)), o.setMinutes(parseInt(N, 10)), a(o);
+  }, S = () => {
+    a(void 0), g && g();
+  }, L = () => {
+    let e = t ? new Date(t) : new Date();
+    e.setHours(0), e.setMinutes(0), a(e);
+  }, l = B(b);
+  return r(V, {
+    name: $,
+    role: "group",
+    id: l,
+    "aria-labelledby": l,
+    hint: m,
+    error: d,
+    required: p,
+    children: D(C, {
+      direction: "column",
+      alignItems: "stretch",
+      gap: 1,
+      children: [r(j, {
+        action: I,
+        children: c
+      }), D(C, {
+        gap: 2,
+        children: [r(P, {
+          ariaLabel: c || s,
+          selectedDate: t,
+          selectedDateLabel: (e) => `Date picker, current is ${e}`,
+          onChange: k,
+          error: typeof d == "string",
+          hint: typeof m == "string",
+          required: p,
+          size: h,
+          onClear: S,
+          clearLabel: `${n} date`,
+          disabled: f,
+          id: l,
+          ...H
+        }), r(E, {
+          size: h,
+          "aria-label": c || s,
+          error: typeof d == "string",
+          hint: typeof m == "string",
+          value: i,
+          onChange: x,
+          onClear: i !== void 0 && i !== "0:0:0" ? L : void 0,
+          clearLabel: `${n} time`,
+          required: p,
+          selectButtonTitle: w,
+          disabled: f,
+          step: y,
+          id: l
+        })]
+      }), r(q, {}), r(v, {})]
+    })
+  });
+}, A = (s) => {
+  const n = Date.parse(s);
+  if (!Number.isNaN(n))
+    return new Date(n);
 };
-M.defaultProps = C;
-M.propTypes = L;
 export {
-  M as DateTimePicker
+  te as DateTimePicker
 };

package/dist/Dialog/Dialog.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),g=require("prop-types"),m=require("styled-components"),o=require("../Box/Box.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../Flex/Flex.cjs"),h=require("../FocusTrap/FocusTrap.cjs"),x=require("../helpers/setOpacity.cjs"),D=require("../helpers/useId.cjs"),T=require("../helpers/useLockScroll.cjs"),j=require("../Portal/Portal.cjs"),E=require("../Typography/Typography.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(y),a=l(g),s=l(m),P=s.default(o.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),g=require("prop-types"),m=require("styled-components"),r=require("../Box/Box.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../Flex/Flex.cjs"),h=require("../FocusTrap/FocusTrap.cjs"),x=require("../helpers/setOpacity.cjs"),D=require("../hooks/useId.cjs"),T=require("../hooks/useLockScroll.cjs"),j=require("../Portal/Portal.cjs"),E=require("../Typography/Typography.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=s(y),a=s(g),l=s(m),P=l.default(r.Box)`
   inset: 0;
   background: ${({theme:e})=>x.setOpacity(e.colors.neutral800,.2)};
-`,_=s.default(o.Box)`
+`,_=l.default(r.Box)`
   max-width: ${412/16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`,F=s.default(q.Flex)`
+`,F=l.default(q.Flex)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,r=({onClose:e,title:n,as:c,isOpen:i,id:d,...p})=>{const f=D.useId(d);if(T(i),!i)return null;const u=`${f}-label`;return t.default.createElement(j.Portal,null,t.default.createElement(P,{padding:8,position:"fixed",zIndex:4},t.default.createElement(h.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(_,{"aria-labelledby":u,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},t.default.createElement(F,{padding:6,justifyContent:"center"},t.default.createElement(E.Typography,{variant:"beta",as:c||"h2",id:u},n)),t.default.createElement(o.Box,{...p}))))))};r.displayName="Dialog";r.defaultProps={as:"h2",id:void 0};r.propTypes={as:a.default.string,id:a.default.oneOfType([a.default.string,a.default.number]),isOpen:a.default.bool.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired};exports.Dialog=r;
+`,o=({onClose:e,title:n,as:c,isOpen:i,id:d,...p})=>{const f=D.useId(d);if(T(i),!i)return null;const u=`${f}-label`;return t.default.createElement(j.Portal,null,t.default.createElement(P,{padding:8,position:"fixed",zIndex:4},t.default.createElement(h.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(_,{"aria-labelledby":u,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},t.default.createElement(F,{padding:6,justifyContent:"center"},t.default.createElement(E.Typography,{variant:"beta",as:c||"h2",id:u},n)),t.default.createElement(r.Box,{...p}))))))};o.displayName="Dialog";o.defaultProps={as:"h2",id:void 0};o.propTypes={as:a.default.string,id:a.default.oneOfType([a.default.string,a.default.number]),isOpen:a.default.bool.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired};exports.Dialog=o;

package/dist/Dialog/Dialog.js

@@ -6,8 +6,8 @@ import { DismissibleLayer as c } from "../DismissibleLayer/DismissibleLayer.js";
 import { Flex as f } from "../Flex/Flex.js";
 import { FocusTrap as g } from "../FocusTrap/FocusTrap.js";
 import { setOpacity as y } from "../helpers/setOpacity.js";
-import { useId as b } from "../helpers/useId.js";
-import E from "../helpers/useLockScroll.js";
+import { useId as b } from "../hooks/useId.js";
+import E from "../hooks/useLockScroll.js";
 import { Portal as h } from "../Portal/Portal.js";
 import { Typography as D } from "../Typography/Typography.js";
 const x = t(a)`

package/dist/Dialog/DialogFooter.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),s=require("prop-types"),l=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(c),a=o(s),u=o(l),p=u.default(d.Box)`
-  border-top: 1px solid ${({theme:t})=>t.colors.neutral150};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),s=require("prop-types"),c=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=o(a),l=o(s),u=o(c),p=u.default(d.Box)`
+  border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
 
   button {
     width: 100%;
     display: inline-flex;
     justify-content: center;
   }
-`,e=({startAction:t,endAction:n})=>r.default.createElement(p,{padding:4},r.default.createElement(i.Stack,{horizontal:!0,spacing:2},t,n));e.displayName="DialogFooter";e.defaultProps={endAction:void 0,startAction:void 0};e.propTypes={endAction:a.default.node,startAction:a.default.node};exports.DialogFooter=e;
+`,t=({startAction:e,endAction:n})=>r.default.createElement(p,{padding:4},r.default.createElement(i.Flex,{gap:2},e,n));t.displayName="DialogFooter";t.defaultProps={endAction:void 0,startAction:void 0};t.propTypes={endAction:l.default.node,startAction:l.default.node};exports.DialogFooter=t;

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||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 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
+  });
 };
 export {
-  m as FieldHint
+  a 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;