@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/Textarea/Textarea.js

@@ -1,58 +1,39 @@
-import r from "react";
-import e from "prop-types";
-import u from "styled-components";
-import { TextareaInput as g } from "./TextareaInput.js";
-import { Field as v } from "../Field/Field.js";
-import { FieldLabel as x } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as E } from "../Field/FieldHint.js";
-import { FieldError as T } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as a } from "../Flex/Flex.js";
-import { useId as b } from "../hooks/useId.js";
-const y = u.div`
-  & textarea {
-    // TODO: remove when we'll have fonts in the theme
-    height: ${80 / 16}rem;
-    line-height: ${20 / 16}rem;
-  }
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import m from "react";
+import c from "styled-components";
+import { useId as g } from "../hooks/useId.js";
+import { inputFocusStyle as F } from "../themes/utils.js";
+import { Box as u } from "../Box/Box.js";
+import { useField as $ } from "../Field/FieldContext.js";
+import { Field as R } from "../Field/Field.js";
+import { Flex as b } from "../Flex/Flex.js";
+import { FieldLabel as w } from "../Field/FieldLabel.js";
+import { FieldHint as y } from "../Field/FieldHint.js";
+import { FieldError as z } from "../Field/FieldError.js";
+const E = c(u)`
+  ${F()}
+`, I = c(u)`
+  border: none;
+  resize: none;
 
-  & textarea::placeholder {
-    font-weight: 400;
-    font-size: ${14 / 16}rem;
-    line-height: 1.43;
-    color: ${({ theme: t }) => t.colors.neutral500};
+  ::placeholder {
+    color: ${({ theme: r }) => r.colors.neutral500};
+    font-size: ${({ theme: r }) => r.fontSizes[2]};
+    color: ${({ theme: r }) => r.colors.neutral500};
     opacity: 1;
   }
-`, i = r.forwardRef(
-  ({ name: t, hint: l, error: n, label: o, children: m, labelAction: d, id: p, required: c, ...s }, f) => {
-    const h = b(p);
-    return /* @__PURE__ */ r.createElement(y, null, /* @__PURE__ */ r.createElement(v, { name: t, hint: l, error: n, id: h, required: c }, /* @__PURE__ */ r.createElement(a, { direction: "column", alignItems: "stretch", gap: 1 }, o && /* @__PURE__ */ r.createElement(a, null, /* @__PURE__ */ r.createElement(x, { action: d }, o)), /* @__PURE__ */ r.createElement(g, { ref: f, as: "textarea", value: m, ...s }), /* @__PURE__ */ r.createElement(E, null), /* @__PURE__ */ r.createElement(T, null))));
+
+  &:focus-within {
+    outline: none;
   }
-);
-i.displayName = "Textarea";
-i.defaultProps = {
-  "aria-label": void 0,
-  label: void 0,
-  labelAction: void 0,
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  children: "",
-  required: !1
-};
-i.propTypes = {
-  "aria-label": e.string,
-  children: e.string,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.element,
-  name: e.string.isRequired,
-  required: e.bool
-};
+`, q = m.forwardRef(({ disabled: r, ...a }, d) => {
+  const { id: o, error: i, hint: l, required: s } = $(), t = !!i;
+  let n = l ? `${o}-hint` : void 0;
+  return i && (n = `${o}-error`), e(E, { borderColor: t ? "danger600" : "neutral200", hasError: t, hasRadius: !0, children: e(I, { "aria-describedby": n, "aria-invalid": t, "aria-required": s, as: "textarea", background: r ? "neutral150" : "neutral0", color: r ? "neutral600" : "neutral800", disabled: r, fontSize: 2, hasRadius: !0, height: `${105 / 16}rem`, id: o, ref: d, lineHeight: 4, padding: 4, width: "100%", ...a }) });
+}), A = m.forwardRef(({ name: r, hint: a, error: d, label: o, labelAction: i, id: l, required: s = !1, children: t, value: n, ...f }, p) => {
+  const h = g(l);
+  return e(R, { name: r, hint: a, error: d, id: h, required: s, children: x(b, { direction: "column", alignItems: "stretch", gap: 1, children: [o && e(w, { action: i, children: o }), e(q, { ref: p, value: t ?? n, ...f }), e(y, {}), e(z, {})] }) });
+});
 export {
-  i as Textarea
+  A as Textarea
 };

package/dist/Textarea/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Textarea.cjs");exports.Textarea=e.Textarea;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Textarea.cjs");exports.Textarea=e.Textarea;

package/dist/ThemeProvider/ThemeProvider.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("styled-components"),r=require("../LiveRegions/LiveRegions.cjs"),n=t.createGlobalStyle`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("styled-components"),r=require("../LiveRegions/LiveRegions.cjs"),n=require("../themes/lightTheme/index.cjs"),s=t.createGlobalStyle`
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -170,4 +170,4 @@
     height: 100vh;
     overflow-y: hidden;
   }
-`,s=({children:e,theme:i})=>o.jsxs(t.ThemeProvider,{theme:i,children:[o.jsx(n,{}),e,o.jsx(r.LiveRegions,{})]});exports.ThemeProvider=s;
+`,l=({children:e,theme:i=n.lightTheme})=>o.jsxs(t.ThemeProvider,{theme:i,children:[e,o.jsx(r.LiveRegions,{}),o.jsx(s,{})]});exports.ThemeProvider=l;

package/dist/ThemeProvider/ThemeProvider.js

@@ -1,7 +1,8 @@
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
 import { createGlobalStyle as i, ThemeProvider as n } from "styled-components";
 import { LiveRegions as l } from "../LiveRegions/LiveRegions.js";
-const s = i`
+import { lightTheme as s } from "../themes/lightTheme/index.js";
+const a = i`
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -138,9 +139,7 @@ const s = i`
   }
 
   *:focus-visible {
-    outline: 2px solid ${({
-  theme: e
-}) => e.colors.primary600};
+    outline: 2px solid ${({ theme: e }) => e.colors.primary600};
     outline-offset: 2px;
   }
 
@@ -175,13 +174,7 @@ const s = i`
     height: 100vh;
     overflow-y: hidden;
   }
-`, c = ({
-  children: e,
-  theme: t
-}) => r(n, {
-  theme: t,
-  children: [o(s, {}), e, o(l, {})]
-});
+`, h = ({ children: e, theme: t = s }) => r(n, { theme: t, children: [e, o(l, {}), o(a, {})] });
 export {
-  c as ThemeProvider
+  h as ThemeProvider
 };

package/dist/ThemeProvider/hooks.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),t=()=>e.useTheme();exports.useTheme=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),t=()=>e.useTheme();exports.useTheme=t;

package/dist/ThemeProvider/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ThemeProvider.cjs"),r=require("./hooks.cjs");exports.ThemeProvider=e.ThemeProvider;exports.useTheme=r.useTheme;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThemeProvider.cjs"),r=require("./hooks.cjs");exports.ThemeProvider=e.ThemeProvider;exports.useTheme=r.useTheme;

package/dist/TimePicker/TimePicker.cjs

@@ -1,10 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),q=require("@strapi/icons"),x=require("styled-components"),f=require("../Flex/Flex.cjs"),g=require("../hooks/useId.cjs"),M=require("../Select/Select.cjs"),b=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const $=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},y=$(x),I=({id:t,value:i,step:a=15,...d})=>{const p=g.useId(t),h=24,s=[];let c=0;for(let e=0;e<h;e++)for(c=0;c<60;)s.push(`${e<10?`0${e}`:e}:${c<10?`0${c}`:c}`),c+=a;const j=()=>{const[e,u]=i?.split(":")??[],m=s.reduce((r,o)=>{const[l]=o.split(":");return Math.abs(l-e)<Math.abs(r-e)?l:r},s[0].split(":")[0]),S=s.reduce((r,o)=>{const l=o.split(":")[1];return Math.abs(l-u)<Math.abs(r-u)?l:r},s[0].split(":")[1]);return`${m}:${S}`};return n.jsx(M.Select,{id:p,placeholder:"--:--",value:i?j():null,startIcon:n.jsx(v,{children:n.jsx(q.Clock,{})}),...d,children:s.map(e=>n.jsx(b.Option,{value:e,children:e},e))})},v=y.default(f.Flex)`
-  & > svg {
-    height: 1rem;
-    width: 1rem;
-  }
+"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)`
+  height: 1rem;
+  width: 1rem;
 
-  & > svg path {
+  & > path {
     fill: ${({theme:t})=>t.colors.neutral500};
   }
-`;exports.TimePicker=I;
+`,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;

package/dist/TimePicker/TimePicker.js

@@ -1,58 +1,84 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Clock as $ } from "@strapi/icons";
-import g from "styled-components";
-import { Flex as M } from "../Flex/Flex.js";
-import { useId as b } from "../hooks/useId.js";
-import { Select as C } from "../Select/Select.js";
-import { Option as I } from "../Select/Option.js";
-import "../Select/OptGroup.js";
-import "../Select/MultiSelectNested.js";
-import "../Select/SelectList.js";
-const S = ({
-  id: l,
-  value: m,
-  step: u = 15,
-  ...p
+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 { useDateFormatter as j } from "../hooks/useDateFormatter.js";
+import { useId as V } from "../hooks/useId.js";
+import { Field as E } from "../Field/Field.js";
+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 = ({
+  id: o,
+  step: a = 15,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  ariaLabel: b,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  selectButtonTitle: C,
+  value: n,
+  defaultValue: c,
+  onChange: d,
+  ...u
 }) => {
-  const a = b(l), h = 24, o = [];
-  let r = 0;
-  for (let t = 0; t < h; t++)
-    for (r = 0; r < 60; )
-      o.push(`${t < 10 ? `0${t}` : t}:${r < 10 ? `0${r}` : r}`), r += u;
-  return i(C, {
-    id: a,
-    placeholder: "--:--",
-    value: m ? (() => {
-      const [t, c] = m?.split(":") ?? [], d = o.reduce((e, n) => {
-        const [s] = n.split(":");
-        return Math.abs(s - t) < Math.abs(e - t) ? s : e;
-      }, o[0].split(":")[0]), f = o.reduce((e, n) => {
-        const s = n.split(":")[1];
-        return Math.abs(s - c) < Math.abs(e - c) ? s : e;
-      }, o[0].split(":")[1]);
-      return `${d}:${f}`;
-    })() : null,
-    startIcon: i(v, {
-      children: i($, {})
-    }),
-    ...p,
-    children: o.map((t) => i(I, {
-      value: t,
-      children: t
-    }, t))
-  });
-}, v = g(M)`
-  & > svg {
-    height: 1rem;
-    width: 1rem;
-  }
+  const w = L("TimePicker"), k = V(o), [I, l] = m.useState(""), [x, f] = P({
+    prop: n,
+    defaultProp: c,
+    onChange: d
+  }), s = j(w.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");
+    return t;
+  }, [s]), A = m.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);
+  }, y = (e) => {
+    const [t, i] = e.split(p);
+    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);
+  }, B = (e) => {
+    if (typeof e < "u") {
+      const t = y(e);
+      f(t);
+    } else
+      f(e);
+  };
+  return m.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)`
+  height: 1rem;
+  width: 1rem;
 
-  & > svg path {
-    fill: ${({
-  theme: l
-}) => l.colors.neutral500};
+  & > 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, {})] }) });
+};
 export {
-  S as TimePicker
+  ne as TimePicker,
+  H as TimePickerInput
 };

package/dist/TimePicker/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./TimePicker.cjs");exports.TimePicker=e.TimePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TimePicker.cjs");exports.TimePicker=e.TimePicker;exports.TimePickerInput=e.TimePickerInput;

package/dist/TimePicker/index.js

@@ -1,4 +1,5 @@
-import { TimePicker as i } from "./TimePicker.js";
+import { TimePicker as r, TimePickerInput as m } from "./TimePicker.js";
 export {
-  i as TimePicker
+  r as TimePicker,
+  m as TimePickerInput
 };

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),R=require("prop-types"),$=require("styled-components"),L=require("../Box/Box.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("react/jsx-runtime");const _=require("../Field/FieldContext.cjs"),g=require("../Typography/Typography.cjs");require("../Field/FieldAction.cjs");const E=require("../Flex/Flex.cjs"),z=require("../themes/sizes.cjs"),B=require("../themes/utils.cjs"),S=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=c(k),o=c(R),i=c($),V=i.default.label`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("react"),k=require("styled-components"),m=require("../themes/utils.cjs"),_=require("../Box/Box.cjs"),S=require("../Flex/Flex.cjs"),B=require("../Field/FieldContext.cjs"),F=require("../VisuallyHidden/VisuallyHidden.cjs"),f=require("../Typography/Typography.cjs"),x=e=>e&&e.__esModule?e:{default:e},L=x(R),a=x(k),W=a.default.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`,W=i.default(L.Box)`
+`,z=a.default(_.Box)`
   cursor: ${({disabled:e})=>e?"not-allowed":void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${B.inputFocusStyle()}
-`,h=i.default(E.Flex).attrs({hasRadius:!0})`
-  background-color: ${({theme:e,checked:n,disabled:a})=>n?a?e.colors.neutral200:e.colors.neutral0:"transparent"};
+  ${m.inputFocusStyle()}
+`,h=a.default(S.Flex).attrs({hasRadius:!0})`
+  background-color: ${({theme:e,checked:o,disabled:l})=>o?l?e.colors.neutral200:e.colors.neutral0:"transparent"};
   border: 1px solid
-    ${({theme:e,checked:n,disabled:a})=>n&&n!==null?a?e.colors.neutral300:e.colors.neutral200:a?e.colors.neutral150:e.colors.neutral100};
+    ${({theme:e,checked:o,disabled:l})=>o&&o!==null?l?e.colors.neutral300:e.colors.neutral200:l?e.colors.neutral150:e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -25,7 +25,7 @@
   */
   padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
   padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
-`,H=i.default.input`
+`,M=a.default.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -33,4 +33,4 @@
   top: 0;
   z-index: 1;
   width: 100%;
-`,u=r.default.forwardRef(({size:e,onLabel:n,offLabel:a,children:x,checked:t,disabled:l,onChange:y,...b},q)=>{const{error:C,hint:j,id:p,name:m,required:F}=_.useField(),f="neutral600";let T=!t&&t!==null?"danger700":f,w=t?"primary600":f;const v=d=>{l||y(d)};let s;return C?s=`${p}-error`:j&&(s=`${p}-hint`),r.default.createElement(V,null,r.default.createElement(S.VisuallyHidden,null,x),r.default.createElement(W,{hasRadius:!0,disabled:l,padding:1,display:"flex",background:l?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200"},r.default.createElement(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:!t,disabled:l},r.default.createElement(g.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:l?"neutral700":T},a)),r.default.createElement(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:t,disabled:l},r.default.createElement(g.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:l?"neutral700":w},n)),r.default.createElement(H,{type:"checkbox","aria-disabled":l,"aria-describedby":s,onChange:d=>v(d),name:m,ref:q,"aria-required":F,...b,checked:!(t===null||!t)})))});u.displayName="ToggleCheckbox";u.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};u.propTypes={checked:o.default.bool,children:o.default.string.isRequired,disabled:o.default.bool,offLabel:o.default.string.isRequired,onChange:o.default.func,onLabel:o.default.string.isRequired,size:o.default.oneOf(Object.keys(z.sizes.input))};exports.ToggleCheckbox=u;
+`,g=L.default.forwardRef(({size:e="M",onLabel:o,offLabel:l,children:b,checked:r=!1,disabled:t=!1,onChange:u,...y},C)=>{const{error:d,hint:w,id:c,name:j,required:q}=B.useField(),p="neutral600";let T=!r&&r!==null?"danger700":p,$=r?"primary600":p;const v=s=>{t||u&&u(s)};let i;return d?i=`${c}-error`:w&&(i=`${c}-hint`),n.jsxs(W,{children:[n.jsx(F.VisuallyHidden,{children:b}),n.jsxs(z,{hasRadius:!0,disabled:t,padding:1,display:"flex",background:t?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",hasError:!!d,children:[n.jsx(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:!r,disabled:t,children:n.jsx(f.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":T,children:l})}),n.jsx(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:r,disabled:t,children:n.jsx(f.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":$,children:o})}),n.jsx(M,{type:"checkbox","aria-disabled":t,"aria-describedby":i,onChange:s=>v(s),name:j,ref:C,"aria-required":q,...y,checked:!(r===null||!r)})]})]})});g.displayName="ToggleCheckbox";exports.ToggleCheckbox=g;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,36 +1,30 @@
-import t from "react";
-import n from "prop-types";
-import l from "styled-components";
-import { Box as E } from "../Box/Box.js";
-import "../Field/Field.js";
-import "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import "react/jsx-runtime";
-import { useField as T } from "../Field/FieldContext.js";
-import { Typography as c } from "../Typography/Typography.js";
-import "../Field/FieldAction.js";
-import { Flex as L } from "../Flex/Flex.js";
-import { sizes as q } from "../themes/sizes.js";
-import { inputFocusStyle as z } from "../themes/utils.js";
-import { VisuallyHidden as W } from "../VisuallyHidden/VisuallyHidden.js";
-const S = l.label`
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import R from "react";
+import i from "styled-components";
+import { inputFocusStyle as T } from "../themes/utils.js";
+import { Box as L } from "../Box/Box.js";
+import { Flex as W } from "../Flex/Flex.js";
+import { useField as j } from "../Field/FieldContext.js";
+import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as h } from "../Typography/Typography.js";
+const B = i.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, j = l(E)`
+`, S = i(L)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${z()}
-`, m = l(L).attrs({
+  ${T()}
+`, g = i(W).attrs({
   hasRadius: !0
 })`
-  background-color: ${({ theme: e, checked: a, disabled: i }) => a ? i ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  background-color: ${({ theme: e, checked: o, disabled: n }) => o ? n ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
   border: 1px solid
-    ${({ theme: e, checked: a, disabled: i }) => a && a !== null ? i ? e.colors.neutral300 : e.colors.neutral200 : i ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme: e, checked: o, disabled: n }) => o && o !== null ? n ? e.colors.neutral300 : e.colors.neutral200 : n ? e.colors.neutral150 : e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -42,7 +36,7 @@ const S = l.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, B = l.input`
+`, F = i.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -50,105 +44,16 @@ const S = l.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, s = t.forwardRef(
-  ({ size: e, onLabel: a, offLabel: i, children: g, checked: r, disabled: o, onChange: h, ...b }, x) => {
-    const { error: y, hint: C, id: d, name: w, required: v } = T(), f = "neutral600";
-    let $ = !r && r !== null ? "danger700" : f, k = r ? "primary600" : f;
-    const R = (u) => {
-      o || h(u);
-    };
-    let p;
-    return y ? p = `${d}-error` : C && (p = `${d}-hint`), /* @__PURE__ */ t.createElement(S, null, /* @__PURE__ */ t.createElement(W, null, g), /* @__PURE__ */ t.createElement(
-      j,
-      {
-        hasRadius: !0,
-        disabled: o,
-        padding: 1,
-        display: "flex",
-        background: o ? "neutral150" : "neutral100",
-        borderStyle: "solid",
-        borderWidth: "1px",
-        borderColor: "neutral200"
-      },
-      /* @__PURE__ */ t.createElement(
-        m,
-        {
-          size: e,
-          paddingLeft: 3,
-          paddingRight: 3,
-          justifyContent: "center",
-          alignItems: "center",
-          "aria-hidden": !0,
-          checked: r === null ? !1 : !r,
-          disabled: o
-        },
-        /* @__PURE__ */ t.createElement(
-          c,
-          {
-            variant: "pi",
-            fontWeight: "bold",
-            textTransform: "uppercase",
-            textColor: o ? "neutral700" : $
-          },
-          i
-        )
-      ),
-      /* @__PURE__ */ t.createElement(
-        m,
-        {
-          size: e,
-          paddingLeft: 3,
-          paddingRight: 3,
-          justifyContent: "center",
-          alignItems: "center",
-          "aria-hidden": !0,
-          checked: r === null ? !1 : r,
-          disabled: o
-        },
-        /* @__PURE__ */ t.createElement(
-          c,
-          {
-            variant: "pi",
-            fontWeight: "bold",
-            textTransform: "uppercase",
-            textColor: o ? "neutral700" : k
-          },
-          a
-        )
-      ),
-      /* @__PURE__ */ t.createElement(
-        B,
-        {
-          type: "checkbox",
-          "aria-disabled": o,
-          "aria-describedby": p,
-          onChange: (u) => R(u),
-          name: w,
-          ref: x,
-          "aria-required": v,
-          ...b,
-          checked: !(r === null || !r)
-        }
-      )
-    ));
-  }
-);
-s.displayName = "ToggleCheckbox";
-s.defaultProps = {
-  disabled: !1,
-  checked: !1,
-  onChange: void 0,
-  size: "M"
-};
-s.propTypes = {
-  checked: n.bool,
-  children: n.string.isRequired,
-  disabled: n.bool,
-  offLabel: n.string.isRequired,
-  onChange: n.func,
-  onLabel: n.string.isRequired,
-  size: n.oneOf(Object.keys(q.input))
-};
+`, I = R.forwardRef(({ size: e = "M", onLabel: o, offLabel: n, children: x, checked: r = !1, disabled: t = !1, onChange: s, ...b }, m) => {
+  const { error: d, hint: y, id: p, name: w, required: C } = j(), f = "neutral600";
+  let $ = !r && r !== null ? "danger700" : f, v = r ? "primary600" : f;
+  const k = (u) => {
+    t || s && s(u);
+  };
+  let l;
+  return d ? l = `${p}-error` : y && (l = `${p}-hint`), c(B, { children: [a(z, { children: x }), c(S, { hasRadius: !0, disabled: t, padding: 1, display: "flex", background: t ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: !!d, children: [a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : !r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : $, children: n }) }), a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : v, children: o }) }), a(F, { type: "checkbox", "aria-disabled": t, "aria-describedby": l, onChange: (u) => k(u), name: w, ref: m, "aria-required": C, ...b, checked: !(r === null || !r) })] })] });
+});
+I.displayName = "ToggleCheckbox";
 export {
-  s as ToggleCheckbox
+  I as ToggleCheckbox
 };

package/dist/ToggleCheckbox/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ToggleCheckbox.cjs");exports.ToggleCheckbox=e.ToggleCheckbox;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ToggleCheckbox.cjs");exports.ToggleCheckbox=e.ToggleCheckbox;

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),j=require("prop-types"),y=require("styled-components"),h=require("../Field/Field.cjs"),E=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const I=require("../Field/FieldHint.cjs"),_=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const s=require("../Flex/Flex.cjs"),k=require("../hooks/useId.cjs"),v=require("../TextButton/TextButton.cjs"),C=require("../themes/sizes.cjs"),z=require("../ToggleCheckbox/ToggleCheckbox.cjs"),r=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=r(T),e=r(j),c=r(y),B=c.default(h.Field)`
+"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;
-`,L=c.default(v.TextButton)`
+`,C=d.default(I.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,d=({disabled:t,size:f,error:g,hint:F,label:i,name:p,labelAction:b,required:m,id:q,onClear:o,clearLabel:n,checked:a,...x})=>{const u=k.useId(q);return l.default.createElement(B,{name:p,hint:F,error:g,id:u,required:m},l.default.createElement(s.Flex,{direction:"column",alignItems:"stretch",gap:1},l.default.createElement(s.Flex,null,l.default.createElement(E.FieldLabel,{action:b},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:f,checked:a,disabled:t,...x},i),l.default.createElement(I.FieldHint,null),l.default.createElement(_.FieldError,null)))};d.displayName="ToggleInput";d.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};d.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(C.sizes.input))};exports.ToggleInput=d;
+`,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;