@strapi/design-system 1.8.2 → 1.9.0

package/dist/Select/SingleSelect.js

@@ -1,44 +1,45 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import * as u from "react";
-import { Item as q, ItemText as W, Root as _, Trigger as H, Value as M, Portal as P, Content as z, Viewport as A } from "./SelectParts.js";
+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 { useId as R } from "../hooks/useId.js";
-import { useIntersection as G } from "../hooks/useIntersection.js";
-import { Box as x } from "../Box/Box.js";
-import { Typography as J } from "../Typography/Typography.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";
-const me = ({ error: c, hint: t, id: d, label: n, labelAction: i, required: a, selectButtonTitle: g, ...p }) => {
-  const o = R(d), l = u.useRef(null);
-  return e(K, { hint: t, error: c, id: o, required: a, children: h(Q, { direction: "column", alignItems: "stretch", gap: 1, children: [n ? e(U, { onClick: () => {
-    l.current.focus();
-  }, action: i, children: n }) : null, e(Z, { label: n, id: o, triggerRef: l, required: a, ...p }), e(X, {}), e(Y, {})] }) });
-}, Z = ({ "aria-label": c, id: t, children: d, clearLabel: n = "Clear", customizeContent: i, disabled: a, error: g, label: p, onChange: o, onClear: l, onReachEnd: m, placeholder: C, required: B, selectButtonTitle: ee, startIcon: O, size: T = "M", value: f, triggerRef: F, ...$ }) => {
-  const [y, I] = u.useState(), [k, w] = u.useState(!1), L = (r) => {
-    w(r);
-  }, v = (r) => {
-    l && l(r), o || I("");
-  }, E = `${t}-hint`, N = `${t}-error`, V = (r) => {
-    o ? o(typeof f == "number" ? Number(r) : r) : I(r);
-  }, b = u.useRef(null), j = R(), S = `intersection-${D(j)}`;
-  G(b, (r) => {
-    m && m(r);
+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);
+  }, 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: !k
+    skipWhen: !y
   });
-  const s = (typeof f < "u" && f !== null ? f.toString() : y) ?? "";
-  return h(_, { onOpenChange: L, disabled: a, required: B, onValueChange: V, value: s, ...$, children: [e(H, { ref: F, "aria-label": p ?? c, "aria-describedby": t ? `${E} ${N}` : void 0, id: t, startIcon: O, size: T, hasError: !!g, disabled: a, clearLabel: n, onClear: s && l ? v : void 0, children: e(M, { placeholder: C, textColor: s ? "neutral800" : "neutral600", children: s && i ? i(s) : void 0 }) }), e(P, { children: e(z, { position: "popper", sideOffset: 4, children: h(A, { ref: b, children: [d, e(x, { id: S, width: "100%", height: "1px" })] }) }) })] });
-}, ge = u.forwardRef(({ value: c, startIcon: t, children: d, ...n }, i) => h(q, { ref: i, value: c.toString(), ...n, children: [t && e(x, { as: "span", "aria-hidden": !0, children: t }), e(J, { textColor: "neutral800", children: e(W, { children: d }) })] }));
+  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 {
-  me as SingleSelect,
-  Z as SingleSelectInput,
-  ge 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,14 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("styled-components"),m=require("../hooks/useControllableState.cjs"),C=require("../hooks/useId.cjs"),d=require("../Flex/Flex.cjs"),k=require("../themes/utils.cjs"),w=require("../TextButton/TextButton.cjs"),I=require("../Field/Field.cjs"),$=require("../Field/FieldLabel.cjs"),S=require("../Field/FieldHint.cjs"),B=require("../Field/FieldError.cjs"),v=require("../Field/FieldContext.cjs"),j=require("../Typography/Typography.cjs"),R=r=>r&&r.__esModule?r:{default:r},c=R(b),W=({offLabel:r,onLabel:p,disabled:e,checked:a,onChange:h,size:l="M",...g})=>{const[n=!1,u]=m.useControllableState({prop:a}),{error:s,id:o,name:x,required:f}=v.useField(),i=n!==null&&!n,q=`${o}-hint`,T=`${o}-error`;return t.jsxs(_,{position:"relative",hasRadius:!0,padding:1,background:e?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",wrap:"wrap",cursor:e?"not-allowed":"pointer",hasError:!!s,children:[t.jsx(F,{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.jsx(j.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:e?"neutral700":i?"danger700":"neutral600",children:r})}),t.jsx(F,{hasRadius:!0,flex:"1 1 50%",paddingLeft:3,paddingRight:3,justifyContent:"center",background:e&&n?"neutral200":n?"neutral0":"transparent",borderColor:e&&n?"neutral300":n?"neutral200":e?"neutral150":"neutral100",size:l,children:t.jsx(j.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:e?"neutral700":n?"primary600":"neutral600",children:p})}),t.jsx(E,{...g,onChange:y=>{u(y.currentTarget.checked),h?.(y)},type:"checkbox",id:o,name:x,"aria-required":f,disabled:e,"aria-disabled":e,"aria-describedby":o?`${q} ${T}`:void 0,checked:!!n})]})},_=c.default(d.Flex)`
-  ${k.inputFocusStyle()}
-`,F=c.default(d.Flex)`
+"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:r})=>`${r==="S"?"2px":"6px"}`};
-  padding-bottom: ${({size:r})=>`${r==="S"?"2px":"6px"}`};
-`,E=c.default.input`
+  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;
@@ -16,7 +16,7 @@
   top: 0;
   z-index: 0;
   width: 100%;
-`,L=({disabled:r=!1,error:p,hint:e,label:a,name:h,labelAction:l,required:g=!1,id:n,onClear:u,clearLabel:s,checked:o,...x})=>{const f=C.useId(n);return t.jsx(I.Field,{name:h,hint:e,error:p,id:f,required:g,maxWidth:"320px",children:t.jsxs(d.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxs(d.Flex,{children:[a?t.jsx($.FieldLabel,{action:l,children:a}):null,s&&u&&o!==null&&!r&&t.jsx(M,{onClick:u,children:s})]}),t.jsx(W,{checked:o,disabled:r,...x}),t.jsx(S.FieldHint,{}),t.jsx(B.FieldError,{})]})})},M=c.default(w.TextButton)`
+`,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;
-`;exports.ToggleInput=L;
+`;exports.ToggleInput=P;

package/dist/ToggleInput/ToggleInput.js

@@ -1,26 +1,27 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import * as b from "react";
 import c from "styled-components";
-import { useControllableState as T } from "../hooks/useControllableState.js";
-import { useId as I } from "../hooks/useId.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { inputFocusStyle as $ } from "../themes/utils.js";
-import { TextButton as F } from "../TextButton/TextButton.js";
-import { Field as B } from "../Field/Field.js";
-import { FieldLabel as W } from "../Field/FieldLabel.js";
-import { FieldHint as v } from "../Field/FieldHint.js";
-import { FieldError as R } from "../Field/FieldError.js";
-import { useField as S } from "../Field/FieldContext.js";
+import { useControllableState as $ } from "../hooks/useControllableState.js";
+import { useId as F } from "../hooks/useId.js";
+import { useField as R } from "../Field/FieldContext.js";
 import { Typography as y } from "../Typography/Typography.js";
-const j = ({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size: l = "M", ...m }) => {
-  const [t = !1, p] = T({
+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: u, id: o, name: g, required: f } = S(), i = t !== null && !t, w = `${o}-hint`, b = `${o}-error`;
-  return x(q, { position: "relative", hasRadius: !0, padding: 1, background: e ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: e ? "not-allowed" : "pointer", hasError: !!u, children: [r(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: r(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : i ? "danger700" : "neutral600", children: n }) }), r(C, { hasRadius: !0, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && t ? "neutral200" : t ? "neutral0" : "transparent", borderColor: e && t ? "neutral300" : t ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: r(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : t ? "primary600" : "neutral600", children: h }) }), r(z, { ...m, onChange: (k) => {
+  }), { 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": f, disabled: e, "aria-disabled": e, "aria-describedby": o ? `${w} ${b}` : void 0, checked: !!t })] });
-}, q = c(d)`
-  ${$()}
-`, C = c(d)`
+  }, 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
@@ -28,7 +29,7 @@ const j = ({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size
   */
   padding-top: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
-`, z = c.input`
+`, L = c.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -36,13 +37,13 @@ const j = ({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size
   top: 0;
   z-index: 0;
   width: 100%;
-`, V = ({ disabled: n = !1, error: h, hint: e, label: a, name: s, labelAction: l, required: m = !1, id: t, onClear: p, clearLabel: u, checked: o, ...g }) => {
-  const f = I(t);
-  return r(B, { name: s, hint: e, error: h, id: f, required: m, maxWidth: "320px", children: x(d, { direction: "column", alignItems: "stretch", gap: 1, children: [x(d, { children: [a ? r(W, { action: l, children: a }) : null, u && p && o !== null && !n && r(E, { onClick: p, children: u })] }), r(j, { checked: o, disabled: n, ...g }), r(v, {}), r(R, {})] }) });
-}, E = c(F)`
+`, 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;
 `;
 export {
-  V as ToggleInput
+  Y as ToggleInput
 };

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.2",
+  "version": "1.9.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "@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.2",
-    "@uiw/react-codemirror": "^4.21.7",
+    "@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",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.35.1",
-    "@strapi/icons": "^1.8.2",
+    "@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": "770d9832b8a67d3dabd6ad3dec6408308cc35d99"
+  "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;

package/dist/JSONInput/JSONInputContainer.js

@@ -1,39 +0,0 @@
-import o from "styled-components";
-import { inputFocusStyle as t } from "../themes/utils.js";
-import { Flex as c } from "../Flex/Flex.js";
-const l = o(c)`
-  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: r }) => r ? e.colors.danger600 : e.colors.neutral200};
-    /* inputFocusStyle will receive hasError prop */
-    ${t()}
-  }
-
-  .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;
-  }
-`;
-export {
-  l as JSONInputContainer
-};