@strapi/design-system 1.8.1 → 1.9.0

package/dist/Select/SingleSelect.js

@@ -1,44 +1,45 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import * as u from "react";
-import { Item as j, ItemText as q, Root as W, Trigger as _, Value as H, Portal as M, Content as P, Viewport as z } from "./SelectParts.js";
-import { stripReactIdOfColon as A } from "../helpers/strings.js";
-import { useId as R } from "../hooks/useId.js";
-import { useIntersection as D } from "../hooks/useIntersection.js";
-import { Box as x } from "../Box/Box.js";
-import { Typography as G } from "../Typography/Typography.js";
-import { Field as J } from "../Field/Field.js";
-import { Flex as K } from "../Flex/Flex.js";
-import { FieldLabel as Q } from "../Field/FieldLabel.js";
-import { FieldHint as U } from "../Field/FieldHint.js";
-import { FieldError as X } from "../Field/FieldError.js";
-const pe = ({ error: r, hint: i, id: c, label: n, labelAction: o, required: f, selectButtonTitle: m, ...d }) => {
-  const l = R(c), a = u.useRef(null);
-  return e(J, { hint: i, error: r, id: l, required: f, children: p(K, { direction: "column", alignItems: "stretch", gap: 1, children: [e(Q, { onClick: () => {
-    a.current.focus();
-  }, action: o, children: n }), e(Y, { label: n, id: l, triggerRef: a, required: f, ...d }), e(U, {}), e(X, {})] }) });
-}, Y = ({ id: r, children: i, clearLabel: c = "Clear", customizeContent: n, disabled: o, error: f, label: m, onChange: d, onClear: l, onReachEnd: a, placeholder: g, required: C, selectButtonTitle: Z, startIcon: B, size: O = "M", value: h, triggerRef: T, ...F }) => {
-  const [$, I] = u.useState(), [y, k] = u.useState(!1), w = (t) => {
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import * as o from "react";
+import { Root as q, Trigger as W, Value as _, Portal as H, Content as M, Viewport as P, Item as z, ItemText as A } from "./SelectParts.js";
+import { stripReactIdOfColon as D } from "../helpers/strings.js";
+import { useComposedRefs as G } from "../hooks/useComposeRefs.js";
+import { useId as C } from "../hooks/useId.js";
+import { useIntersection as J } from "../hooks/useIntersection.js";
+import { Field as K } from "../Field/Field.js";
+import { Flex as Q } from "../Flex/Flex.js";
+import { FieldLabel as U } from "../Field/FieldLabel.js";
+import { FieldHint as X } from "../Field/FieldHint.js";
+import { FieldError as Y } from "../Field/FieldError.js";
+import { Box as T } from "../Box/Box.js";
+import { Typography as Z } from "../Typography/Typography.js";
+const Ie = o.forwardRef(({ error: d, hint: r, id: c, label: n, labelAction: i, required: s, selectButtonTitle: R, ...m }, a) => {
+  const l = C(c), f = o.useRef(null), g = () => {
+    f.current.focus();
+  }, I = G(a, f);
+  return e(K, { hint: r, error: d, id: l, required: s, children: h(Q, { direction: "column", alignItems: "stretch", gap: 1, children: [n ? e(U, { onClick: g, action: i, children: n }) : null, e(ee, { label: n, id: l, ref: I, required: s, ...m }), e(X, {}), e(Y, {})] }) });
+}), ee = o.forwardRef(({ "aria-label": d, id: r, children: c, clearLabel: n = "Clear", customizeContent: i, disabled: s, error: R, label: m, onChange: a, onClear: l, onReachEnd: f, placeholder: g, required: I, selectButtonTitle: re, startIcon: B, size: O = "M", value: p, ...w }, F) => {
+  const [$, S] = o.useState(), [y, k] = o.useState(!1), v = (t) => {
     k(t);
-  }, L = (t) => {
-    l && l(t), d || I("");
-  }, v = `${r}-hint`, E = `${r}-error`, N = (t) => {
-    d ? d(typeof h == "number" ? Number(t) : t) : I(t);
-  }, b = u.useRef(null), V = R(), S = `intersection-${A(V)}`;
-  D(b, (t) => {
-    a && a(t);
+  }, E = (t) => {
+    l && l(t), a || S("");
+  }, L = `${r}-hint`, N = `${r}-error`, V = (t) => {
+    a ? a(typeof p == "number" ? Number(t) : t) : S(t);
+  }, b = o.useRef(null), j = C(), x = `intersection-${D(j)}`;
+  J(b, (t) => {
+    f && f(t);
   }, {
-    selectorToWatch: `#${S}`,
+    selectorToWatch: `#${x}`,
     /**
      * We need to know when the select is open because only then will viewportRef
      * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
      */
     skipWhen: !y
   });
-  const s = (typeof h < "u" && h !== null ? h.toString() : $) ?? "";
-  return p(W, { onOpenChange: w, disabled: o, required: C, onValueChange: N, value: s, ...F, children: [e(_, { ref: T, "aria-label": m, "aria-describedby": r ? `${v} ${E}` : void 0, id: r, startIcon: B, size: O, hasError: !!f, disabled: o, clearLabel: c, onClear: s && l ? L : void 0, children: e(H, { placeholder: g, textColor: s ? "neutral800" : "neutral600", children: s && n ? n(s) : void 0 }) }), e(M, { children: e(P, { position: "popper", sideOffset: 4, children: p(z, { ref: b, children: [i, e(x, { id: S, width: "100%", height: "1px" })] }) }) })] });
-}, me = u.forwardRef(({ value: r, startIcon: i, children: c, ...n }, o) => p(j, { ref: o, value: r.toString(), ...n, children: [i && e(x, { as: "span", "aria-hidden": !0, children: i }), e(G, { textColor: "neutral800", children: e(q, { children: c }) })] }));
+  const u = (typeof p < "u" && p !== null ? p.toString() : $) ?? "";
+  return h(q, { onOpenChange: v, disabled: s, required: I, onValueChange: V, value: u, ...w, children: [e(W, { ref: F, "aria-label": m ?? d, "aria-describedby": r ? `${L} ${N}` : void 0, id: r, startIcon: B, size: O, hasError: !!R, disabled: s, clearLabel: n, onClear: u && l ? E : void 0, children: e(_, { placeholder: g, textColor: u ? "neutral800" : "neutral600", children: u && i ? i(u) : void 0 }) }), e(H, { children: e(M, { position: "popper", sideOffset: 4, children: h(P, { ref: b, children: [c, e(T, { id: x, width: "100%", height: "1px" })] }) }) })] });
+}), Re = o.forwardRef(({ value: d, startIcon: r, children: c, ...n }, i) => h(z, { ref: i, value: d.toString(), ...n, children: [r && e(T, { as: "span", "aria-hidden": !0, children: r }), e(Z, { textColor: "neutral800", children: e(A, { children: c }) })] }));
 export {
-  pe as SingleSelect,
-  Y as SingleSelectInput,
-  me as SingleSelectOption
+  Ie as SingleSelect,
+  ee as SingleSelectInput,
+  Re as SingleSelectOption
 };

package/dist/TextInput/TextInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),F=require("../hooks/useId.cjs"),I=require("../Field/Field.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Field/FieldLabel.cjs"),h=require("../Field/FieldInput.cjs"),m=require("../Field/FieldHint.cjs"),f=require("../Field/FieldError.cjs"),s=t.forwardRef(({name:l,hint:d,error:o,label:r,labelAction:u,id:c,required:a,...i},p)=>{const x=F.useId(c),n=t.useRef(null);if(!r&&!i["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return t.useImperativeHandle(p,()=>({inputWrapperRef:n})),e.jsx("div",{ref:n,children:e.jsx(I.Field,{name:l,hint:d,error:o,id:x,required:a,children:e.jsxs(q.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(j.FieldLabel,{action:u,children:r}),e.jsx(h.FieldInput,{...i}),e.jsx(m.FieldHint,{}),e.jsx(f.FieldError,{})]})})})});s.displayName="TextInput";exports.TextInput=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),I=require("../hooks/useId.cjs"),f=require("../Field/Field.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Field/FieldLabel.cjs"),h=require("../Field/FieldInput.cjs"),m=require("../Field/FieldHint.cjs"),R=require("../Field/FieldError.cjs"),u=r.forwardRef(({name:l,hint:o,error:d,label:n,labelAction:c,id:a,required:p,...t},x)=>{const F=I.useId(a),i=r.useRef(null),s=r.useRef(null);if(!n&&!t["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return r.useImperativeHandle(x,()=>({input:s,inputWrapperRef:i}),[]),e.jsx("div",{ref:i,children:e.jsx(f.Field,{name:l,hint:o,error:d,id:F,required:p,children:e.jsxs(q.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[n&&e.jsx(j.FieldLabel,{action:c,children:n}),e.jsx(h.FieldInput,{ref:s,...t}),e.jsx(m.FieldHint,{}),e.jsx(R.FieldError,{})]})})})});u.displayName="TextInput";exports.TextInput=u;

package/dist/TextInput/TextInput.js

@@ -1,21 +1,22 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as c, useRef as u, useImperativeHandle as h } from "react";
-import { useId as I } from "../hooks/useId.js";
-import { Field as x } from "../Field/Field.js";
-import { Flex as F } from "../Flex/Flex.js";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as h, useRef as n, useImperativeHandle as I } from "react";
+import { useId as x } from "../hooks/useId.js";
+import { Field as F } from "../Field/Field.js";
+import { Flex as R } from "../Flex/Flex.js";
 import { FieldLabel as T } from "../Field/FieldLabel.js";
 import { FieldInput as g } from "../Field/FieldInput.js";
 import { FieldHint as w } from "../Field/FieldHint.js";
-import { FieldError as R } from "../Field/FieldError.js";
-const b = c(({ name: t, hint: n, error: m, label: e, labelAction: p, id: d, required: a, ...i }, l) => {
-  const f = I(d), o = u(null);
-  if (!e && !i["aria-label"])
+import { FieldError as b } from "../Field/FieldError.js";
+const j = h(({ name: m, hint: p, error: l, label: e, labelAction: d, id: a, required: f, ...t }, u) => {
+  const s = x(a), i = n(null), o = n(null);
+  if (!e && !t["aria-label"])
     throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-  return h(l, () => ({
-    inputWrapperRef: o
-  })), r("div", { ref: o, children: r(x, { name: t, hint: n, error: m, id: f, required: a, children: s(F, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(T, { action: p, children: e }), r(g, { ...i }), r(w, {}), r(R, {})] }) }) });
+  return I(u, () => ({
+    input: o,
+    inputWrapperRef: i
+  }), []), r("div", { ref: i, children: r(F, { name: m, hint: p, error: l, id: s, required: f, children: c(R, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(T, { action: d, children: e }), r(g, { ref: o, ...t }), r(w, {}), r(b, {})] }) }) });
 });
-b.displayName = "TextInput";
+j.displayName = "TextInput";
 export {
-  b as TextInput
+  j as TextInput
 };

package/dist/TimePicker/TimePicker.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),V=require("react"),M=require("@strapi/icons"),O=require("styled-components"),C=require("../Combobox/Combobox.cjs"),N=require("../DesignSystemProvider.cjs"),v=require("../hooks/useControllableState.cjs"),A=require("../hooks/useDateFormatter.cjs"),T=require("../hooks/useId.cjs"),B=require("../Field/Field.cjs"),L=require("../Flex/Flex.cjs"),$=require("../Field/FieldLabel.cjs"),E=require("../Field/FieldHint.cjs"),R=require("../Field/FieldError.cjs"),z=t=>t&&t.__esModule?t:{default:t};function H(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const u=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(n,s,u.get?u:{enumerable:!0,get:()=>t[s]})}}return n.default=t,Object.freeze(n)}const m=H(V),Z=z(O),x=t=>!!t.match(/^[^a-zA-Z]*$/),F=({id:t,step:n=15,ariaLabel:s,selectButtonTitle:u,value:a,defaultValue:f,onChange:p,...d})=>{const _=N.useDesignSystem("TimePicker"),k=T.useId(t),[I,l]=m.useState(""),[g,h]=v.useControllableState({prop:a,defaultProp:f,onChange:p}),c=A.useDateFormatter(_.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),b=m.useMemo(()=>{const e=c.formatToParts(new Date),{value:r}=e.find(i=>i.type==="literal");return r},[c]),S=m.useMemo(()=>{const e=60/n;return[...Array(24).keys()].flatMap(r=>[...Array(e).keys()].map(i=>c.format(new Date(0,0,0,r,i*n))))},[n,c]),w=e=>{(!e||x(e))&&l(e)},y=e=>{const[r,i]=e.split(b);if(!r&&!i)return;const j=Number(r??"0"),q=Number(i??"0");if(!(j>23||q>59))return c.format(new Date(0,0,0,j,q))},D=e=>{const r=y(e.target.value);r?(l(r),h(r)):l(g)},P=e=>{if(typeof e<"u"){const r=y(e);h(r)}else h(e)};return m.useEffect(()=>{const e=typeof a>"u"?"":a;x(e)&&l(e)},[a,l]),o.jsx(C.ComboboxInput,{...d,value:g,onChange:P,isPrintableCharacter:x,allowCustomValue:!0,placeholder:`--${b}--`,autocomplete:"none",startIcon:o.jsx(G,{}),id:k,inputMode:"numeric",pattern:`\\d{2}${b}\\d{2}`,textValue:I,onTextValueChange:w,onBlur:D,children:S.map(e=>o.jsx(C.Option,{value:e,children:e},e))})},G=Z.default(M.Clock)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),M=require("react"),O=require("@strapi/icons"),N=require("styled-components"),T=require("../Combobox/Combobox.cjs"),v=require("../DesignSystemProvider.cjs"),A=require("../hooks/useControllableState.cjs"),B=require("../hooks/useDateFormatter.cjs"),F=require("../hooks/useId.cjs"),R=require("../Field/Field.cjs"),L=require("../Flex/Flex.cjs"),$=require("../Field/FieldLabel.cjs"),E=require("../Field/FieldHint.cjs"),z=require("../Field/FieldError.cjs"),H=t=>t&&t.__esModule?t:{default:t};function Z(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const l=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(n,s,l.get?l:{enumerable:!0,get:()=>t[s]})}}return n.default=t,Object.freeze(n)}const u=Z(M),G=H(N),g=t=>!!t.match(/^[^a-zA-Z]*$/),_=u.forwardRef(({id:t,step:n=15,ariaLabel:s,selectButtonTitle:l,value:a,defaultValue:m,onChange:p,...h},f)=>{const w=v.useDesignSystem("TimePicker"),k=F.useId(t),[I,c]=u.useState(""),[y,b]=A.useControllableState({prop:a,defaultProp:m,onChange:p}),d=B.useDateFormatter(w.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),x=u.useMemo(()=>{const e=d.formatToParts(new Date),{value:r}=e.find(i=>i.type==="literal");return r},[d]),S=u.useMemo(()=>{const e=60/n;return[...Array(24).keys()].flatMap(r=>[...Array(e).keys()].map(i=>d.format(new Date(0,0,0,r,i*n))))},[n,d]),D=e=>{(!e||g(e))&&c(e)},j=e=>{const[r,i]=e.split(x);if(!r&&!i)return;const q=Number(r??"0"),C=Number(i??"0");if(!(q>23||C>59))return d.format(new Date(0,0,0,q,C))},P=e=>{const r=j(e.target.value);r?(c(r),b(r)):c(y)},V=e=>{if(typeof e<"u"){const r=j(e);b(r)}else b(e)};return u.useEffect(()=>{const e=typeof a>"u"?"":a;g(e)&&c(e)},[a,c]),o.jsx(T.ComboboxInput,{...h,ref:f,value:y,onChange:V,isPrintableCharacter:g,allowCustomValue:!0,placeholder:`--${x}--`,autocomplete:"none",startIcon:o.jsx(J,{}),id:k,inputMode:"numeric",pattern:`\\d{2}\\${x}\\d{2}`,textValue:I,onTextValueChange:D,onBlur:P,children:S.map(e=>o.jsx(T.Option,{value:e,children:e},e))})}),J=G.default(O.Clock)`
   height: 1rem;
   width: 1rem;
 
   & > path {
     fill: ${({theme:t})=>t.colors.neutral500};
   }
-`,J=({label:t,error:n,hint:s,id:u,required:a,labelAction:f,...p})=>{const d=T.useId(u);return o.jsx(B.Field,{hint:s,error:n,id:d,required:a,children:o.jsxs(L.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx($.FieldLabel,{action:f,children:t}),o.jsx(F,{id:d,error:n,required:a,...p}),o.jsx(E.FieldHint,{}),o.jsx(R.FieldError,{})]})})};exports.TimePicker=J;exports.TimePickerInput=F;
+`,K=u.forwardRef(({label:t,error:n,hint:s,id:l,required:a,labelAction:m,...p},h)=>{const f=F.useId(l);return o.jsx(R.Field,{hint:s,error:n,id:f,required:a,children:o.jsxs(L.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx($.FieldLabel,{action:m,children:t}),o.jsx(_,{ref:h,id:f,error:n,required:a,...p}),o.jsx(E.FieldHint,{}),o.jsx(z.FieldError,{})]})})});exports.TimePicker=K;exports.TimePickerInput=_;

package/dist/TimePicker/TimePicker.js

@@ -1,10 +1,10 @@
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import * as m from "react";
-import { Clock as M } from "@strapi/icons";
-import S from "styled-components";
-import { ComboboxInput as $, Option as v } from "../Combobox/Combobox.js";
-import { useDesignSystem as L } from "../DesignSystemProvider.js";
-import { useControllableState as P } from "../hooks/useControllableState.js";
+import { jsx as r, jsxs as M } from "react/jsx-runtime";
+import * as l from "react";
+import { Clock as S } from "@strapi/icons";
+import $ from "styled-components";
+import { ComboboxInput as v, Option as L } from "../Combobox/Combobox.js";
+import { useDesignSystem as P } from "../DesignSystemProvider.js";
+import { useControllableState as R } from "../hooks/useControllableState.js";
 import { useDateFormatter as j } from "../hooks/useDateFormatter.js";
 import { useId as V } from "../hooks/useId.js";
 import { Field as E } from "../Field/Field.js";
@@ -12,73 +12,73 @@ import { Flex as O } from "../Flex/Flex.js";
 import { FieldLabel as _ } from "../Field/FieldLabel.js";
 import { FieldHint as q } from "../Field/FieldHint.js";
 import { FieldError as z } from "../Field/FieldError.js";
-const h = (o) => !!o.match(/^[^a-zA-Z]*$/), H = ({
+const b = (o) => !!o.match(/^[^a-zA-Z]*$/), H = l.forwardRef(({
   id: o,
   step: a = 15,
   /**
    * @preserve
    * @deprecated This is no longer used.
    */
-  ariaLabel: b,
+  ariaLabel: C,
   /**
    * @preserve
    * @deprecated This is no longer used.
    */
-  selectButtonTitle: C,
+  selectButtonTitle: x,
   value: n,
   defaultValue: c,
-  onChange: d,
-  ...u
-}) => {
-  const w = L("TimePicker"), k = V(o), [I, l] = m.useState(""), [x, f] = P({
+  onChange: f,
+  ...d
+}, m) => {
+  const k = P("TimePicker"), I = V(o), [A, s] = l.useState(""), [w, p] = R({
     prop: n,
     defaultProp: c,
-    onChange: d
-  }), s = j(w.locale, {
+    onChange: f
+  }), u = j(k.locale, {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
-  }), p = m.useMemo(() => {
-    const e = s.formatToParts(/* @__PURE__ */ new Date()), { value: t } = e.find((i) => i.type === "literal");
+  }), h = l.useMemo(() => {
+    const e = u.formatToParts(/* @__PURE__ */ new Date()), { value: t } = e.find((i) => i.type === "literal");
     return t;
-  }, [s]), A = m.useMemo(() => {
+  }, [u]), F = l.useMemo(() => {
     const e = 60 / a;
-    return [...Array(24).keys()].flatMap((t) => [...Array(e).keys()].map((i) => s.format(new Date(0, 0, 0, t, i * a))));
-  }, [a, s]), F = (e) => {
-    (!e || h(e)) && l(e);
+    return [...Array(24).keys()].flatMap((t) => [...Array(e).keys()].map((i) => u.format(new Date(0, 0, 0, t, i * a))));
+  }, [a, u]), N = (e) => {
+    (!e || b(e)) && s(e);
   }, y = (e) => {
-    const [t, i] = e.split(p);
+    const [t, i] = e.split(h);
     if (!t && !i)
       return;
     const T = Number(t ?? "0"), g = Number(i ?? "0");
     if (!(T > 23 || g > 59))
-      return s.format(new Date(0, 0, 0, T, g));
-  }, N = (e) => {
-    const t = y(e.target.value);
-    t ? (l(t), f(t)) : l(x);
+      return u.format(new Date(0, 0, 0, T, g));
   }, B = (e) => {
+    const t = y(e.target.value);
+    t ? (s(t), p(t)) : s(w);
+  }, D = (e) => {
     if (typeof e < "u") {
       const t = y(e);
-      f(t);
+      p(t);
     } else
-      f(e);
+      p(e);
   };
-  return m.useEffect(() => {
+  return l.useEffect(() => {
     const e = typeof n > "u" ? "" : n;
-    h(e) && l(e);
-  }, [n, l]), r($, { ...u, value: x, onChange: B, isPrintableCharacter: h, allowCustomValue: !0, placeholder: `--${p}--`, autocomplete: "none", startIcon: r(R, {}), id: k, inputMode: "numeric", pattern: `\\d{2}${p}\\d{2}`, textValue: I, onTextValueChange: F, onBlur: N, children: A.map((e) => r(v, { value: e, children: e }, e)) });
-}, R = S(M)`
+    b(e) && s(e);
+  }, [n, s]), r(v, { ...d, ref: m, value: w, onChange: D, isPrintableCharacter: b, allowCustomValue: !0, placeholder: `--${h}--`, autocomplete: "none", startIcon: r(Z, {}), id: I, inputMode: "numeric", pattern: `\\d{2}\\${h}\\d{2}`, textValue: A, onTextValueChange: N, onBlur: B, children: F.map((e) => r(L, { value: e, children: e }, e)) });
+}), Z = $(S)`
   height: 1rem;
   width: 1rem;
 
   & > path {
     fill: ${({ theme: o }) => o.colors.neutral500};
   }
-`, ne = ({ label: o, error: a, hint: b, id: C, required: n, labelAction: c, ...d }) => {
-  const u = V(C);
-  return r(E, { hint: b, error: a, id: u, required: n, children: D(O, { direction: "column", alignItems: "stretch", gap: 1, children: [r(_, { action: c, children: o }), r(H, { id: u, error: a, required: n, ...d }), r(q, {}), r(z, {})] }) });
-};
+`, ae = l.forwardRef(({ label: o, error: a, hint: C, id: x, required: n, labelAction: c, ...f }, d) => {
+  const m = V(x);
+  return r(E, { hint: C, error: a, id: m, required: n, children: M(O, { direction: "column", alignItems: "stretch", gap: 1, children: [r(_, { action: c, children: o }), r(H, { ref: d, id: m, error: a, required: n, ...f }), r(q, {}), r(z, {})] }) });
+});
 export {
-  ne as TimePicker,
+  ae as TimePicker,
   H as TimePickerInput
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("styled-components"),p=require("../hooks/useId.cjs"),m=require("../ToggleCheckbox/ToggleCheckbox.cjs"),T=require("../Field/Field.cjs"),I=require("../TextButton/TextButton.cjs"),o=require("../Flex/Flex.cjs"),y=require("../Field/FieldLabel.cjs"),_=require("../Field/FieldHint.cjs"),b=require("../Field/FieldError.cjs"),k=t=>t&&t.__esModule?t:{default:t},d=k(j),B=d.default(T.Field)`
-  max-width: 320px;
-`,C=d.default(I.TextButton)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),w=require("react"),C=require("styled-components"),k=require("../hooks/useControllableState.cjs"),I=require("../hooks/useId.cjs"),R=require("../Field/FieldContext.cjs"),b=require("../Typography/Typography.cjs"),c=require("../Flex/Flex.cjs"),S=require("../themes/utils.cjs"),_=require("../Field/Field.cjs"),$=require("../Field/FieldLabel.cjs"),v=require("../Field/FieldHint.cjs"),B=require("../Field/FieldError.cjs"),O=require("../TextButton/TextButton.cjs"),W=e=>e&&e.__esModule?e:{default:e};function M(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const q=M(w),p=W(C),z=q.forwardRef(({offLabel:e,onLabel:o,disabled:t,checked:a,onChange:h,size:u="M",...g},f)=>{const[n=!1,s]=k.useControllableState({prop:a}),{error:d,id:i,name:x,required:j}=R.useField(),l=n!==null&&!n,F=`${i}-hint`,T=`${i}-error`;return r.jsxs(E,{position:"relative",hasRadius:!0,padding:1,background:t?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",wrap:"wrap",cursor:t?"not-allowed":"pointer",hasError:!!d,children:[r.jsx(m,{hasRadius:!0,flex:"1 1 50%",paddingTop:2,paddingBottom:2,paddingLeft:3,paddingRight:3,justifyContent:"center",background:t&&l?"neutral200":l?"neutral0":"transparent",borderColor:t&&l?"neutral300":l?"neutral200":t?"neutral150":"neutral100",size:u,children:r.jsx(b.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":l?"danger700":"neutral600",children:e})}),r.jsx(m,{hasRadius:!0,flex:"1 1 50%",paddingLeft:3,paddingRight:3,justifyContent:"center",background:t&&n?"neutral200":n?"neutral0":"transparent",borderColor:t&&n?"neutral300":n?"neutral200":t?"neutral150":"neutral100",size:u,children:r.jsx(b.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":n?"primary600":"neutral600",children:o})}),r.jsx(L,{...g,ref:f,onChange:y=>{s(y.currentTarget.checked),h?.(y)},type:"checkbox",id:i,name:x,"aria-required":j,disabled:t,"aria-disabled":t,"aria-describedby":i?`${F} ${T}`:void 0,checked:!!n})]})}),E=p.default(c.Flex)`
+  ${S.inputFocusStyle()}
+`,m=p.default(c.Flex)`
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
+  padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
+`,L=p.default.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+`,P=q.forwardRef(({disabled:e=!1,error:o,hint:t,label:a,name:h,labelAction:u,required:g=!1,id:f,onClear:n,clearLabel:s,checked:d,...i},x)=>{const j=I.useId(f);return r.jsx(_.Field,{name:h,hint:t,error:o,id:j,required:g,maxWidth:"320px",children:r.jsxs(c.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r.jsxs(c.Flex,{children:[a?r.jsx($.FieldLabel,{action:u,children:a}):null,s&&n&&d!==null&&!e&&r.jsx(D,{onClick:n,children:s})]}),r.jsx(z,{ref:x,checked:d,disabled:e,...i}),r.jsx(v.FieldHint,{}),r.jsx(B.FieldError,{})]})})}),D=p.default(O.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,u=({disabled:t=!1,size:c="M",error:a,hint:x,label:r,name:g,labelAction:f,required:F=!1,id:h,onClear:i,clearLabel:n,checked:l=!1,...q})=>{const s=p.useId(h);return e.jsx(B,{name:g,hint:x,error:a,id:s,required:F,children:e.jsxs(o.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsxs(o.Flex,{children:[e.jsx(y.FieldLabel,{action:f,children:r}),n&&i&&l!==null&&!t&&e.jsx(C,{onClick:i,children:n})]}),e.jsx(m.ToggleCheckbox,{id:s,size:c,checked:l,disabled:t,...q,children:r}),e.jsx(_.FieldHint,{}),e.jsx(b.FieldError,{})]})})};u.displayName="ToggleInput";exports.ToggleInput=u;
+`;exports.ToggleInput=P;

package/dist/ToggleInput/ToggleInput.js

@@ -1,23 +1,49 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import p from "styled-components";
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import * as b from "react";
+import c from "styled-components";
+import { useControllableState as $ } from "../hooks/useControllableState.js";
 import { useId as F } from "../hooks/useId.js";
-import { ToggleCheckbox as I } from "../ToggleCheckbox/ToggleCheckbox.js";
-import { Field as T } from "../Field/Field.js";
-import { TextButton as j } from "../TextButton/TextButton.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { FieldLabel as k } from "../Field/FieldLabel.js";
-import { FieldHint as y } from "../Field/FieldHint.js";
-import { FieldError as B } from "../Field/FieldError.js";
-const C = p(T)`
-  max-width: 320px;
-`, q = p(j)`
+import { useField as R } from "../Field/FieldContext.js";
+import { Typography as y } from "../Typography/Typography.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { inputFocusStyle as B } from "../themes/utils.js";
+import { Field as W } from "../Field/Field.js";
+import { FieldLabel as v } from "../Field/FieldLabel.js";
+import { FieldHint as S } from "../Field/FieldHint.js";
+import { FieldError as j } from "../Field/FieldError.js";
+import { TextButton as q } from "../TextButton/TextButton.js";
+const z = b.forwardRef(({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size: l = "M", ...f }, m) => {
+  const [r = !1, p] = $({
+    prop: a
+  }), { error: d, id: o, name: g, required: x } = R(), i = r !== null && !r, T = `${o}-hint`, I = `${o}-error`;
+  return w(E, { position: "relative", hasRadius: !0, padding: 1, background: e ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: e ? "not-allowed" : "pointer", hasError: !!d, children: [t(C, { hasRadius: !0, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && i ? "neutral200" : i ? "neutral0" : "transparent", borderColor: e && i ? "neutral300" : i ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: t(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : i ? "danger700" : "neutral600", children: n }) }), t(C, { hasRadius: !0, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && r ? "neutral200" : r ? "neutral0" : "transparent", borderColor: e && r ? "neutral300" : r ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: t(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : r ? "primary600" : "neutral600", children: h }) }), t(L, { ...f, ref: m, onChange: (k) => {
+    p(k.currentTarget.checked), s?.(k);
+  }, type: "checkbox", id: o, name: g, "aria-required": x, disabled: e, "aria-disabled": e, "aria-describedby": o ? `${T} ${I}` : void 0, checked: !!r })] });
+}), E = c(u)`
+  ${B()}
+`, C = c(u)`
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
+  padding-bottom: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
+`, L = c.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+`, Y = b.forwardRef(({ disabled: n = !1, error: h, hint: e, label: a, name: s, labelAction: l, required: f = !1, id: m, onClear: r, clearLabel: p, checked: d, ...o }, g) => {
+  const x = F(m);
+  return t(W, { name: s, hint: e, error: h, id: x, required: f, maxWidth: "320px", children: w(u, { direction: "column", alignItems: "stretch", gap: 1, children: [w(u, { children: [a ? t(v, { action: l, children: a }) : null, p && r && d !== null && !n && t(H, { onClick: r, children: p })] }), t(z, { ref: g, checked: d, disabled: n, ...o }), t(S, {}), t(j, {})] }) });
+}), H = c(q)`
   align-self: flex-end;
   margin-left: auto;
-`, w = ({ disabled: e = !1, size: s = "M", error: f, hint: c, label: o, name: a, labelAction: g, required: h = !1, id: u, onClear: i, clearLabel: t, checked: n = !1, ...x }) => {
-  const l = F(u);
-  return r(C, { name: a, hint: c, error: f, id: l, required: h, children: m(d, { direction: "column", alignItems: "stretch", gap: 1, children: [m(d, { children: [r(k, { action: g, children: o }), t && i && n !== null && !e && r(q, { onClick: i, children: t })] }), r(I, { id: l, size: s, checked: n, disabled: e, ...x, children: o }), r(y, {}), r(B, {})] }) });
-};
-w.displayName = "ToggleInput";
+`;
 export {
-  w as ToggleInput
+  Y as ToggleInput
 };

package/dist/Typography/Typography.cjs

@@ -7,7 +7,7 @@
   font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
   font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
   line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
-  color: ${o.handleColor};
+  color: ${({theme:e,textColor:t})=>e.colors[t||"neutral800"]};
   text-align: ${({textAlign:e})=>e};
   text-decoration: ${({textDecoration:e})=>e};
   text-transform: ${({textTransform:e})=>e};

package/dist/Typography/Typography.js

@@ -1,11 +1,11 @@
 import r from "styled-components";
-import { variantStyle as i, ellipsisStyle as n, handleColor as a } from "./utils.js";
+import { variantStyle as i, ellipsisStyle as n } from "./utils.js";
 import { extractStyleFromTheme as o } from "../helpers/theme.js";
-const s = {
+const a = {
   fontSize: !0,
   fontWeight: !0
-}, m = r.span.withConfig({
-  shouldForwardProp: (t, e) => !s[t] && e(t)
+}, h = r.span.withConfig({
+  shouldForwardProp: (t, e) => !a[t] && e(t)
 })`
   ${i}
   ${n}
@@ -15,11 +15,11 @@ const s = {
   font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
   font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
   line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
-  color: ${a};
+  color: ${({ theme: t, textColor: e }) => t.colors[e || "neutral800"]};
   text-align: ${({ textAlign: t }) => t};
   text-decoration: ${({ textDecoration: t }) => t};
   text-transform: ${({ textTransform: t }) => t};
 `;
 export {
-  m as Typography
+  h as Typography
 };

package/dist/Typography/utils.cjs

@@ -31,4 +31,4 @@
         text-transform: uppercase;
       `;default:return`
         font-size: ${i.fontSizes[2]};
-      `}},o=({theme:e,textColor:i})=>e.colors[i||"neutral800"];exports.ellipsisStyle=n;exports.handleColor=o;exports.variantStyle=s;
+      `}};exports.ellipsisStyle=n;exports.variantStyle=s;

package/dist/Typography/utils.js

@@ -1,4 +1,4 @@
-import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as l, BETA as f, ALPHA as r } from "./constants.js";
+import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as f, BETA as l, ALPHA as r } from "./constants.js";
 const $ = ({ ellipsis: n = !1 }) => n && `
     display: block;
     white-space: nowrap;
@@ -12,13 +12,13 @@ const $ = ({ ellipsis: n = !1 }) => n && `
         font-size: ${i.fontSizes[5]};
         line-height: ${i.lineHeights[2]};
       `;
-    case f:
+    case l:
       return `
         font-weight: ${i.fontWeights.bold};
         font-size: ${i.fontSizes[4]};
         line-height: ${i.lineHeights[1]};
       `;
-    case l:
+    case f:
       return `
         font-weight: ${i.fontWeights.semiBold};
         font-size: ${i.fontSizes[3]};
@@ -51,9 +51,8 @@ const $ = ({ ellipsis: n = !1 }) => n && `
         font-size: ${i.fontSizes[2]};
       `;
   }
-}, z = ({ theme: n, textColor: i }) => n.colors[i || "neutral800"];
+};
 export {
   $ as ellipsisStyle,
-  z as handleColor,
   a as variantStyle
 };

package/dist/themes/utils.cjs

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r=!1})=>e.css`
-      outline: none;
-      box-shadow: 0;
-      transition-property: border-color, box-shadow, fill;
-      transition-duration: 0.2s;
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
 
-      ${t}:focus-within {
-        border: 1px solid ${r?o.colors.danger600:o.colors.primary600};
-        box-shadow: ${r?o.colors.danger600:o.colors.primary600} 0px 0px 0px 2px;
-      }
-    `,n=({theme:t})=>e.css`
+    ${t}:focus-within {
+      border: 1px solid ${r?o.colors.danger600:o.colors.primary600};
+      box-shadow: ${r?o.colors.danger600:o.colors.primary600} 0px 0px 0px 2px;
+    }
+  `,n=({theme:t})=>e.css`
   position: relative;
   outline: none;
 

package/dist/themes/utils.js

@@ -1,15 +1,15 @@
 import { css as i } from "styled-components";
 const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r = !1 }) => i`
-      outline: none;
-      box-shadow: 0;
-      transition-property: border-color, box-shadow, fill;
-      transition-duration: 0.2s;
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
 
-      ${t}:focus-within {
-        border: 1px solid ${r ? o.colors.danger600 : o.colors.primary600};
-        box-shadow: ${r ? o.colors.danger600 : o.colors.primary600} 0px 0px 0px 2px;
-      }
-    `, e = ({ theme: t }) => i`
+    ${t}:focus-within {
+      border: 1px solid ${r ? o.colors.danger600 : o.colors.primary600};
+      box-shadow: ${r ? o.colors.danger600 : o.colors.primary600} 0px 0px 0px 2px;
+    }
+  `, e = ({ theme: t }) => i`
   position: relative;
   outline: none;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -19,22 +19,22 @@
   ],
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
-    "@floating-ui/react-dom": "^1.3.0",
-    "@internationalized/date": "^3.2.0",
-    "@internationalized/number": "^3.2.0",
+    "@floating-ui/react-dom": "^2.0.1",
+    "@internationalized/date": "^3.3.0",
+    "@internationalized/number": "^3.2.1",
     "@radix-ui/react-dismissable-layer": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-focus-scope": "1.0.3",
-    "@strapi/ui-primitives": "^1.8.1",
-    "@uiw/react-codemirror": "^4.21.3",
+    "@strapi/ui-primitives": "^1.9.0",
+    "@uiw/react-codemirror": "^4.21.9",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
     "prop-types": "^15.8.1",
-    "react-remove-scroll": "^2.5.5"
+    "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.8.1",
+    "@playwright/test": "1.35.1",
+    "@strapi/icons": "^1.9.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -65,5 +65,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "203b39b5eae476962807fa10b73ed0731d694da6"
+  "gitHead": "13f4821716ce30a1b2f7dd3c30d51de79baadee5"
 }

package/dist/JSONInput/JSONInputContainer.cjs

@@ -1,33 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),o=require("../themes/utils.cjs"),s=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},c=n(r),l=c.default(s.Flex)`
-  line-height: ${({theme:e})=>e.lineHeights[2]};
-
-  .cm-editor {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral800 changes between themes 
-     */
-    background-color: #32324d;
-    width: 100%;
-    outline: none;
-  }
-
-  .cm-scroller {
-    border: 1px solid ${({theme:e,hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
-    /* inputFocusStyle will receive hasError prop */
-    ${o.inputFocusStyle()}
-  }
-
-  .cm-editor,
-  .cm-scroller {
-    border-radius: ${({theme:e})=>e.borderRadius};
-  }
-
-  .cm-gutters,
-  .cm-activeLineGutter {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral700 changes between themes 
-     */
-    background-color: #4a4a6a;
-  }
-`;exports.JSONInputContainer=l;