@strapi/design-system 1.8.1 → 1.8.2

package/dist/Popover/Popover.js

@@ -1,19 +1,19 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
 import * as o from "react";
-import { useFloating as W, offset as A, shift as K, flip as j, autoUpdate as M } from "@floating-ui/react-dom";
-import { FocusScope as T } from "@radix-ui/react-focus-scope";
-import { useCallbackRef as U, composeEventHandlers as v } from "@strapi/ui-primitives";
-import { hideOthers as B } from "aria-hidden";
-import { RemoveScroll as H } from "react-remove-scroll";
-import k from "styled-components";
-import { DismissibleLayer as N } from "../DismissibleLayer/index.js";
-import { stripReactIdOfColon as x } from "../helpers/strings.js";
-import { useComposedRefs as V } from "../hooks/useComposeRefs.js";
-import { useId as Z } from "../hooks/useId.js";
-import { useIntersection as _ } from "../hooks/useIntersection.js";
+import { useFloating as I, offset as W, shift as A, flip as K, autoUpdate as j } from "@floating-ui/react-dom";
+import { FocusScope as M } from "@radix-ui/react-focus-scope";
+import { useCallbackRef as T, composeEventHandlers as g } from "@strapi/ui-primitives";
+import { hideOthers as U } from "aria-hidden";
+import { RemoveScroll as B } from "react-remove-scroll";
+import x from "styled-components";
+import { DismissibleLayer as H } from "../DismissibleLayer/index.js";
+import { stripReactIdOfColon as v } from "../helpers/strings.js";
+import { useComposedRefs as N } from "../hooks/useComposeRefs.js";
+import { useId as V } from "../hooks/useId.js";
+import { useIntersection as Z } from "../hooks/useIntersection.js";
 import { Box as h } from "../Box/Box.js";
-import { Portal as q } from "../Portal/Portal.js";
-const me = [
+import { Portal as _ } from "../Portal/Portal.js";
+const ue = [
   "top",
   "top-start",
   "top-end",
@@ -26,42 +26,43 @@ const me = [
   "left",
   "left-start",
   "left-end"
-], G = k(h)`
+], q = x(h)`
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   z-index: ${({ theme: e }) => e.zIndices[0]};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, J = o.forwardRef(({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, onFocusOutside: u, ...E }, R) => {
-  const [m, y] = o.useState(null), [P, C] = o.useState(void 0), b = o.useRef(!1), { x: D, y: L, reference: w, floating: S, strategy: O } = W({
+`, G = o.forwardRef(({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, onFocusOutside: u, ...k }, E) => {
+  const [m, R] = o.useState(null), [P, y] = o.useState(void 0), b = o.useRef(!1), { x: C, y: D, refs: S, strategy: L } = I({
     strategy: "fixed",
     placement: a ? "bottom" : l,
     middleware: [
-      A({
+      W({
         mainAxis: n
       }),
-      K(),
-      j()
+      A(),
+      K()
     ],
-    whileElementsMounted: M
+    elements: {
+      reference: e.current
+    },
+    whileElementsMounted: j
   });
   o.useLayoutEffect(() => {
-    w(e.current);
-  }, [e, w]), o.useLayoutEffect(() => {
-    i && C(e.current.offsetWidth);
+    i && y(e.current.offsetWidth);
   }, [i, e]), o.useEffect(() => {
     if (m)
-      return B(m);
+      return U(m);
   }, [m]);
-  const g = U(c);
+  const w = T(c);
   o.useEffect(() => {
     const t = () => {
-      g();
+      w();
     };
     return window.addEventListener("blur", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("blur", t), window.removeEventListener("resize", t);
     };
-  }, [g]);
-  const $ = V(R, (t) => y(t), S);
-  return r(H, { allowPinchZoom: !0, children: r(T, {
+  }, [w]);
+  const O = N(E, (t) => R(t), S.setFloating);
+  return r(B, { allowPinchZoom: !0, children: r(M, {
     asChild: !0,
     loop: !0,
     // we make sure we're not trapping once it's been closed
@@ -70,35 +71,35 @@ const me = [
     onUnmountAutoFocus: (t) => {
       t.preventDefault(), b.current || e.current?.focus({ preventScroll: !0 });
     },
-    children: r(N, {
+    children: r(H, {
       asChild: !0,
       onEscapeKeyDown: d,
-      onPointerDownOutside: v(f, (t) => {
-        const p = t.detail.originalEvent, F = p.button === 0 && p.ctrlKey === !0, z = p.button === 2 || F;
-        b.current = z;
+      onPointerDownOutside: g(f, (t) => {
+        const p = t.detail.originalEvent, $ = p.button === 0 && p.ctrlKey === !0, F = p.button === 2 || $;
+        b.current = F;
       }, { checkForDefaultPrevented: !1 }),
       // When focus is trapped, a `focusout` event may still happen.
       // We make sure we don't trigger our `onDismiss` in such case.
-      onFocusOutside: v(u, (t) => t.preventDefault(), {
+      onFocusOutside: g(u, (t) => t.preventDefault(), {
         checkForDefaultPrevented: !1
       }),
       onDismiss: c,
-      children: r(G, { ref: $, style: {
-        left: D,
-        top: L,
-        position: O,
+      children: r(q, { ref: O, style: {
+        left: C,
+        top: D,
+        position: L,
         width: P || void 0
-      }, hasRadius: !0, background: "neutral0", padding: 1, ...E, children: s })
+      }, hasRadius: !0, background: "neutral0", padding: 1, ...k, children: s })
     })
   }) });
-}), Q = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
-  const l = o.useRef(null), a = Z();
-  return _(l, n ?? (() => {
+}), J = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
+  const l = o.useRef(null), a = V();
+  return Z(l, n ?? (() => {
   }), {
-    selectorToWatch: `#${x(a)}`,
+    selectorToWatch: `#${v(a)}`,
     skipWhen: !s || !n
-  }), I(X, { ref: l, ...i, children: [e, s && n && r(h, { id: x(a), width: "100%", height: "1px" })] });
-}, X = k(h)`
+  }), z(Q, { ref: l, ...i, children: [e, s && n && r(h, { id: v(a), width: "100%", height: "1px" })] });
+}, Q = x(h)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3 * 5}rem;
   overflow-y: auto;
@@ -118,10 +119,10 @@ const me = [
     border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, pe = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, ...u }) => r(q, { children: r(J, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, children: r(Q, { ...u, children: e }) }) });
+`, me = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, ...u }) => r(_, { children: r(G, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, children: r(J, { ...u, children: e }) }) });
 export {
-  J as Content,
-  me as POPOVER_PLACEMENTS,
-  pe as Popover,
-  Q as Scrolling
+  G as Content,
+  ue as POPOVER_PLACEMENTS,
+  me as Popover,
+  J as Scrolling
 };

package/dist/Select/MultiSelect.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),Y=require("react"),J=require("@strapi/icons"),I=require("styled-components"),o=require("./SelectParts.cjs"),K=require("../BaseCheckbox/assets/checkmark.svg.cjs"),Q=require("../helpers/strings.cjs"),w=require("../hooks/useId.cjs"),U=require("../hooks/useIntersection.cjs"),Z=require("../Tag/Tag.cjs"),j=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),ee=require("../Field/Field.cjs"),te=require("../Flex/Flex.cjs"),re=require("../Field/FieldLabel.cjs"),ne=require("../Field/FieldHint.cjs"),ie=require("../Field/FieldError.cjs"),oe=e=>e&&e.__esModule?e:{default:e};function le(e){if(e&&e.__esModule)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return i.default=e,Object.freeze(i)}const a=le(Y),se=oe(I),ce=({children:e,clearLabel:i="Clear",customizeContent:r,disabled:l,error:s,hint:d,id:u,label:p,labelAction:T,onChange:f,onClear:M,onReachEnd:b,placeholder:F,required:y,selectButtonTitle:ue,startIcon:_,size:B="M",value:h,withTags:q,...L})=>{const m=a.useRef(null),[$,S]=a.useState(),[P,V]=a.useState(!1),x=w.useId(u),z=`${x}-hint`,E=`${x}-error`,G=n=>{f?f(n):S(n)},A=n=>()=>{const O=Array.isArray(h)?h.filter(g=>g!==n):($??[]).filter(g=>g!==n);f?f(O):S(O)},D=n=>{V(n)},k=a.useRef(null),H=()=>{k.current.focus()},W=w.useId(),v=`intersection-${Q.stripReactIdOfColon(W)}`,N=n=>{b&&b(n)};U.useIntersection(m,N,{selectorToWatch:`#${v}`,skipWhen:!P});const c=typeof h<"u"&&h!==null?h:$,X=n=>n&&typeof n=="object"&&n.value?t.jsx(Z.Tag,{tabIndex:-1,disabled:l,icon:t.jsx(J.Cross,{}),onClick:A(n.value),children:n.textValue},n.value):null;return t.jsx(ee.Field,{hint:d,error:s,id:x,required:y,children:t.jsxs(te.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(re.FieldLabel,{onClick:H,action:T,children:p}),t.jsxs(o.Root,{onOpenChange:D,disabled:l,required:y,onValueChange:G,value:c,...L,multi:!0,children:[t.jsx(o.Trigger,{ref:k,"aria-label":p,"aria-describedby":`${z} ${E}`,id:x,startIcon:_,size:B,hasError:!!s,disabled:l,clearLabel:i,onClear:c?.length?M:void 0,paddingLeft:q&&c?.length?1:3,children:t.jsx(o.Value,{placeholder:F,textColor:c?.length?"neutral800":"neutral600",children:c?.length?q?X:r?r(c):void 0:void 0})}),t.jsx(o.Portal,{children:t.jsx(o.Content,{position:"popper",sideOffset:4,children:t.jsxs(o.Viewport,{ref:m,children:[e,t.jsx(j.Box,{id:v,width:"100%",height:"1px"})]})})})]}),t.jsx(ne.FieldHint,{}),t.jsx(ie.FieldError,{})]})})},ae=a.forwardRef(({value:e,children:i,startIcon:r,...l},s)=>t.jsxs(o.Item,{ref:s,value:e.toString(),...l,children:[r&&t.jsx(j.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:d,isIntermediate:u})=>t.jsx(R,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:u,$selected:d,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:i})})]})),R=se.default(j.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("react"),K=require("@strapi/icons"),b=require("styled-components"),o=require("./SelectParts.cjs"),Q=require("../BaseCheckbox/assets/checkmark.svg.cjs"),U=require("../helpers/strings.cjs"),C=require("../hooks/useId.cjs"),Z=require("../hooks/useIntersection.cjs"),ee=require("../Tag/Tag.cjs"),x=require("../Box/Box.cjs"),R=require("../Typography/Typography.cjs"),te=require("../Field/Field.cjs"),re=require("../Flex/Flex.cjs"),ne=require("../Field/FieldLabel.cjs"),ie=require("../Field/FieldHint.cjs"),oe=require("../Field/FieldError.cjs"),le=e=>e&&e.__esModule?e:{default:e};function se(e){if(e&&e.__esModule)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return i.default=e,Object.freeze(i)}const d=se(J),ce=le(b),ae=({"aria-label":e,children:i,clearLabel:r="Clear",customizeContent:l,disabled:s,error:c,hint:u,id:j,label:g,labelAction:M,onChange:p,onClear:F,onReachEnd:y,placeholder:_,required:q,selectButtonTitle:he,startIcon:B,size:L="M",value:h,withTags:m,...P})=>{const $=d.useRef(null),[S,k]=d.useState(),[V,z]=d.useState(!1),f=C.useId(j),E=`${f}-hint`,G=`${f}-error`,A=n=>{p?p(n):k(n)},D=n=>()=>{const w=Array.isArray(h)?h.filter(I=>I!==n):(S??[]).filter(I=>I!==n);p?p(w):k(w)},H=n=>{z(n)},v=d.useRef(null),W=()=>{v.current.focus()},N=C.useId(),O=`intersection-${U.stripReactIdOfColon(N)}`,X=n=>{y&&y(n)};Z.useIntersection($,X,{selectorToWatch:`#${O}`,skipWhen:!V});const a=typeof h<"u"&&h!==null?h:S,Y=n=>n&&typeof n=="object"&&n.value?t.jsx(ee.Tag,{tabIndex:-1,disabled:s,icon:t.jsx(K.Cross,{}),onClick:D(n.value),children:n.textValue},n.value):null;return t.jsx(te.Field,{hint:u,error:c,id:f,required:q,children:t.jsxs(re.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[g?t.jsx(ne.FieldLabel,{onClick:W,action:M,children:g}):null,t.jsxs(o.Root,{onOpenChange:H,disabled:s,required:q,onValueChange:A,value:a,...P,multi:!0,children:[t.jsx(o.Trigger,{ref:v,"aria-label":g??e,"aria-describedby":`${E} ${G}`,id:f,startIcon:B,size:L,hasError:!!c,disabled:s,clearLabel:r,onClear:a?.length?F:void 0,paddingLeft:m&&a?.length?1:3,children:t.jsx(o.Value,{placeholder:_,textColor:a?.length?"neutral800":"neutral600",children:a?.length?m?Y:l?l(a):void 0:void 0})}),t.jsx(o.Portal,{children:t.jsx(o.Content,{position:"popper",sideOffset:4,children:t.jsxs(o.Viewport,{ref:$,children:[i,t.jsx(x.Box,{id:O,width:"100%",height:"1px"})]})})})]}),t.jsx(ie.FieldHint,{}),t.jsx(oe.FieldError,{})]})})},de=d.forwardRef(({value:e,children:i,startIcon:r,...l},s)=>t.jsxs(o.Item,{ref:s,value:e.toString(),...l,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:c,isIntermediate:u})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:u,$selected:c,zIndex:1,height:"18px",width:"18px"})}),t.jsx(R.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:i})})]})),T=ce.default(x.Box)`
   border: 1px solid
     ${({theme:e,$selected:i,$indeterminate:r})=>i||r?e.colors.primary600:e.colors.neutral300};
   background-color: ${({theme:e,$selected:i,$indeterminate:r})=>i||r?e.colors.primary600:e.colors.neutral0};
 
-  ${({theme:e,$indeterminate:i})=>i&&I.css`
+  ${({theme:e,$indeterminate:i})=>i&&b.css`
       &::after {
         content: '';
         display: block;
@@ -18,13 +18,13 @@
       }
     `}
 
-  ${({$selected:e})=>e&&I.css`
+  ${({$selected:e})=>e&&b.css`
       &::after {
         content: '';
-        background: url(${K}) no-repeat no-repeat center center;
+        background: url(${Q}) no-repeat no-repeat center center;
         width: 100%;
         height: 100%;
         position: absolute;
       }
     `}
-`,de=a.forwardRef(({children:e,label:i,startIcon:r,values:l=[],...s},d)=>t.jsxs(o.Group,{ref:d,children:[t.jsxs(o.Item,{value:l,...s,children:[r&&t.jsx(j.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:u,isIntermediate:p})=>t.jsx(R,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:p,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:i})]}),e]}));exports.MultiSelect=ce;exports.MultiSelectGroup=de;exports.MultiSelectOption=ae;
+`,ue=d.forwardRef(({children:e,label:i,startIcon:r,values:l=[],...s},c)=>t.jsxs(o.Group,{ref:c,children:[t.jsxs(o.Item,{value:l,...s,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:u,isIntermediate:j})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:j,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(R.Typography,{textColor:"neutral800",children:i})]}),e]}));exports.MultiSelect=ae;exports.MultiSelectGroup=ue;exports.MultiSelectOption=de;

package/dist/Select/MultiSelect.js

@@ -1,49 +1,49 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import * as d from "react";
-import { Cross as K } from "@strapi/icons";
-import N, { css as T } from "styled-components";
-import { Item as S, ItemIndicator as F, ItemText as Q, Group as U, Root as Z, Trigger as ee, Value as re, Portal as te, Content as ne, Viewport as oe } from "./SelectParts.js";
-import ie from "../BaseCheckbox/assets/checkmark.svg.js";
-import { stripReactIdOfColon as le } from "../helpers/strings.js";
-import { useId as O } from "../hooks/useId.js";
+import { Cross as N } from "@strapi/icons";
+import Q, { css as O } from "styled-components";
+import { Item as F, ItemIndicator as M, ItemText as U, Group as Z, Root as ee, Trigger as re, Value as te, Portal as ne, Content as oe, Viewport as ie } from "./SelectParts.js";
+import le from "../BaseCheckbox/assets/checkmark.svg.js";
+import { stripReactIdOfColon as ae } from "../helpers/strings.js";
+import { useId as S } from "../hooks/useId.js";
 import { useIntersection as ce } from "../hooks/useIntersection.js";
 import { Tag as de } from "../Tag/Tag.js";
-import { Box as g } from "../Box/Box.js";
-import { Typography as M } from "../Typography/Typography.js";
-import { Field as ae } from "../Field/Field.js";
-import { Flex as se } from "../Flex/Flex.js";
-import { FieldLabel as he } from "../Field/FieldLabel.js";
-import { FieldHint as ue } from "../Field/FieldHint.js";
-import { FieldError as pe } from "../Field/FieldError.js";
-const Be = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disabled: i, error: l, hint: s, id: h, label: p, labelAction: L, onChange: f, onClear: V, onReachEnd: I, placeholder: j, required: $, selectButtonTitle: fe, startIcon: E, size: z = "M", value: u, withTags: b, ...A }) => {
-  const k = d.useRef(null), [C, v] = d.useState(), [G, W] = d.useState(!1), m = O(h), q = `${m}-hint`, H = `${m}-error`, P = (r) => {
-    f ? f(r) : v(r);
-  }, X = (r) => () => {
-    const y = Array.isArray(u) ? u.filter((x) => x !== r) : (C ?? []).filter((x) => x !== r);
-    f ? f(y) : v(y);
-  }, Y = (r) => {
-    W(r);
-  }, w = d.useRef(null), _ = () => {
-    w.current.focus();
-  }, D = O(), R = `intersection-${le(D)}`;
-  ce(k, (r) => {
-    I && I(r);
+import { Box as m } from "../Box/Box.js";
+import { Typography as B } from "../Typography/Typography.js";
+import { Field as se } from "../Field/Field.js";
+import { Flex as he } from "../Flex/Flex.js";
+import { FieldLabel as ue } from "../Field/FieldLabel.js";
+import { FieldHint as pe } from "../Field/FieldHint.js";
+import { FieldError as fe } from "../Field/FieldError.js";
+const Le = ({ "aria-label": t, children: n, clearLabel: o = "Clear", customizeContent: l, disabled: i, error: a, hint: h, id: g, label: x, labelAction: V, onChange: p, onClear: j, onReachEnd: $, placeholder: E, required: b, selectButtonTitle: me, startIcon: z, size: A = "M", value: u, withTags: k, ...G }) => {
+  const C = d.useRef(null), [v, w] = d.useState(), [W, q] = d.useState(!1), f = S(g), H = `${f}-hint`, P = `${f}-error`, X = (r) => {
+    p ? p(r) : w(r);
+  }, Y = (r) => () => {
+    const T = Array.isArray(u) ? u.filter((I) => I !== r) : (v ?? []).filter((I) => I !== r);
+    p ? p(T) : w(T);
+  }, _ = (r) => {
+    q(r);
+  }, R = d.useRef(null), D = () => {
+    R.current.focus();
+  }, J = S(), y = `intersection-${ae(J)}`;
+  ce(C, (r) => {
+    $ && $(r);
   }, {
-    selectorToWatch: `#${R}`,
+    selectorToWatch: `#${y}`,
     /**
      * 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: !G
+    skipWhen: !W
   });
-  const c = typeof u < "u" && u !== null ? u : C, J = (r) => r && typeof r == "object" && r.value ? e(de, { tabIndex: -1, disabled: i, icon: e(K, {}), onClick: X(r.value), children: r.textValue }, r.value) : null;
-  return e(ae, { hint: s, error: l, id: m, required: $, children: a(se, { direction: "column", alignItems: "stretch", gap: 1, children: [e(he, { onClick: _, action: L, children: p }), a(Z, { onOpenChange: Y, disabled: i, required: $, onValueChange: P, value: c, ...A, multi: !0, children: [e(ee, { ref: w, "aria-label": p, "aria-describedby": `${q} ${H}`, id: m, startIcon: E, size: z, hasError: !!l, disabled: i, clearLabel: o, onClear: c?.length ? V : void 0, paddingLeft: b && c?.length ? 1 : 3, children: e(re, { placeholder: j, textColor: c?.length ? "neutral800" : "neutral600", children: c?.length ? b ? J : n ? n(c) : void 0 : void 0 }) }), e(te, { children: e(ne, { position: "popper", sideOffset: 4, children: a(oe, { ref: k, children: [t, e(g, { id: R, width: "100%", height: "1px" })] }) }) })] }), e(ue, {}), e(pe, {})] }) });
-}, Le = d.forwardRef(({ value: t, children: o, startIcon: n, ...i }, l) => a(S, { ref: l, value: t.toString(), ...i, children: [n && e(g, { as: "span", "aria-hidden": !0, children: n }), e(F, { children: ({ isSelected: s, isIntermediate: h }) => e(B, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: h, $selected: s, zIndex: 1, height: "18px", width: "18px" }) }), e(M, { textColor: "neutral800", children: e(Q, { children: o }) })] })), B = N(g)`
+  const c = typeof u < "u" && u !== null ? u : v, K = (r) => r && typeof r == "object" && r.value ? e(de, { tabIndex: -1, disabled: i, icon: e(N, {}), onClick: Y(r.value), children: r.textValue }, r.value) : null;
+  return e(se, { hint: h, error: a, id: f, required: b, children: s(he, { direction: "column", alignItems: "stretch", gap: 1, children: [x ? e(ue, { onClick: D, action: V, children: x }) : null, s(ee, { onOpenChange: _, disabled: i, required: b, onValueChange: X, value: c, ...G, multi: !0, children: [e(re, { ref: R, "aria-label": x ?? t, "aria-describedby": `${H} ${P}`, id: f, startIcon: z, size: A, hasError: !!a, disabled: i, clearLabel: o, onClear: c?.length ? j : void 0, paddingLeft: k && c?.length ? 1 : 3, children: e(te, { placeholder: E, textColor: c?.length ? "neutral800" : "neutral600", children: c?.length ? k ? K : l ? l(c) : void 0 : void 0 }) }), e(ne, { children: e(oe, { position: "popper", sideOffset: 4, children: s(ie, { ref: C, children: [n, e(m, { id: y, width: "100%", height: "1px" })] }) }) })] }), e(pe, {}), e(fe, {})] }) });
+}, Ve = d.forwardRef(({ value: t, children: n, startIcon: o, ...l }, i) => s(F, { ref: i, value: t.toString(), ...l, children: [o && e(m, { as: "span", "aria-hidden": !0, children: o }), e(M, { children: ({ isSelected: a, isIntermediate: h }) => e(L, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: h, $selected: a, zIndex: 1, height: "18px", width: "18px" }) }), e(B, { textColor: "neutral800", children: e(U, { children: n }) })] })), L = Q(m)`
   border: 1px solid
-    ${({ theme: t, $selected: o, $indeterminate: n }) => o || n ? t.colors.primary600 : t.colors.neutral300};
-  background-color: ${({ theme: t, $selected: o, $indeterminate: n }) => o || n ? t.colors.primary600 : t.colors.neutral0};
+    ${({ theme: t, $selected: n, $indeterminate: o }) => n || o ? t.colors.primary600 : t.colors.neutral300};
+  background-color: ${({ theme: t, $selected: n, $indeterminate: o }) => n || o ? t.colors.primary600 : t.colors.neutral0};
 
-  ${({ theme: t, $indeterminate: o }) => o && T`
+  ${({ theme: t, $indeterminate: n }) => n && O`
       &::after {
         content: '';
         display: block;
@@ -58,18 +58,18 @@ const Be = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disable
       }
     `}
 
-  ${({ $selected: t }) => t && T`
+  ${({ $selected: t }) => t && O`
       &::after {
         content: '';
-        background: url(${ie}) no-repeat no-repeat center center;
+        background: url(${le}) no-repeat no-repeat center center;
         width: 100%;
         height: 100%;
         position: absolute;
       }
     `}
-`, Ve = d.forwardRef(({ children: t, label: o, startIcon: n, values: i = [], ...l }, s) => a(U, { ref: s, children: [a(S, { value: i, ...l, children: [n && e(g, { as: "span", "aria-hidden": !0, children: n }), e(F, { children: ({ isSelected: h, isIntermediate: p }) => e(B, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: p, $selected: h, zIndex: 1, height: "18px", width: "18px" }) }), e(M, { textColor: "neutral800", children: o })] }), t] }));
+`, je = d.forwardRef(({ children: t, label: n, startIcon: o, values: l = [], ...i }, a) => s(Z, { ref: a, children: [s(F, { value: l, ...i, children: [o && e(m, { as: "span", "aria-hidden": !0, children: o }), e(M, { children: ({ isSelected: h, isIntermediate: g }) => e(L, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: g, $selected: h, zIndex: 1, height: "18px", width: "18px" }) }), e(B, { textColor: "neutral800", children: n })] }), t] }));
 export {
-  Be as MultiSelect,
-  Ve as MultiSelectGroup,
-  Le as MultiSelectOption
+  Le as MultiSelect,
+  je as MultiSelectGroup,
+  Ve as MultiSelectOption
 };

package/dist/Select/SingleSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("react"),o=require("./SelectParts.cjs"),E=require("../helpers/strings.cjs"),b=require("../hooks/useId.cjs"),V=require("../hooks/useIntersection.cjs"),q=require("../Box/Box.cjs"),H=require("../Typography/Typography.cjs"),W=require("../Field/Field.cjs"),z=require("../Flex/Flex.cjs"),D=require("../Field/FieldLabel.cjs"),A=require("../Field/FieldHint.cjs"),G=require("../Field/FieldError.cjs");function J(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,i.get?i:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const h=J(N),K=({error:e,hint:n,id:r,label:i,labelAction:s,required:f,selectButtonTitle:x,...d})=>{const c=b.useId(r),u=h.useRef(null),g=()=>{u.current.focus()};return t.jsx(W.Field,{hint:n,error:e,id:c,required:f,children:t.jsxs(z.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(D.FieldLabel,{onClick:g,action:s,children:i}),t.jsx(O,{label:i,id:c,triggerRef:u,required:f,...d}),t.jsx(A.FieldHint,{}),t.jsx(G.FieldError,{})]})})},O=({id:e,children:n,clearLabel:r="Clear",customizeContent:i,disabled:s,error:f,label:x,onChange:d,onClear:c,onReachEnd:u,placeholder:g,required:m,selectButtonTitle:U,startIcon:y,size:F="M",value:p,triggerRef:R,...T})=>{const[B,j]=h.useState(),[C,_]=h.useState(!1),$=l=>{_(l)},v=l=>{c&&c(l),d||j("")},w=`${e}-hint`,P=`${e}-error`,k=l=>{d?d(typeof p=="number"?Number(l):l):j(l)},S=h.useRef(null),L=b.useId(),I=`intersection-${E.stripReactIdOfColon(L)}`,M=l=>{u&&u(l)};V.useIntersection(S,M,{selectorToWatch:`#${I}`,skipWhen:!C});const a=(typeof p<"u"&&p!==null?p.toString():B)??"";return t.jsxs(o.Root,{onOpenChange:$,disabled:s,required:m,onValueChange:k,value:a,...T,children:[t.jsx(o.Trigger,{ref:R,"aria-label":x,"aria-describedby":e?`${w} ${P}`:void 0,id:e,startIcon:y,size:F,hasError:!!f,disabled:s,clearLabel:r,onClear:a&&c?v:void 0,children:t.jsx(o.Value,{placeholder:g,textColor:a?"neutral800":"neutral600",children:a&&i?i(a):void 0})}),t.jsx(o.Portal,{children:t.jsx(o.Content,{position:"popper",sideOffset:4,children:t.jsxs(o.Viewport,{ref:S,children:[n,t.jsx(q.Box,{id:I,width:"100%",height:"1px"})]})})})]})},Q=h.forwardRef(({value:e,startIcon:n,children:r,...i},s)=>t.jsxs(o.Item,{ref:s,value:e.toString(),...i,children:[n&&t.jsx(q.Box,{as:"span","aria-hidden":!0,children:n}),t.jsx(H.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:r})})]}));exports.SingleSelect=K;exports.SingleSelectInput=O;exports.SingleSelectOption=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),o=require("./SelectParts.cjs"),V=require("../helpers/strings.cjs"),b=require("../hooks/useId.cjs"),H=require("../hooks/useIntersection.cjs"),q=require("../Box/Box.cjs"),W=require("../Typography/Typography.cjs"),z=require("../Field/Field.cjs"),D=require("../Flex/Flex.cjs"),A=require("../Field/FieldLabel.cjs"),G=require("../Field/FieldHint.cjs"),J=require("../Field/FieldError.cjs");function K(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const h=K(E),Q=({error:t,hint:n,id:r,label:i,labelAction:s,required:d,selectButtonTitle:x,...g})=>{const c=b.useId(r),u=h.useRef(null),f=()=>{u.current.focus()};return e.jsx(z.Field,{hint:n,error:t,id:c,required:d,children:e.jsxs(D.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i?e.jsx(A.FieldLabel,{onClick:f,action:s,children:i}):null,e.jsx(O,{label:i,id:c,triggerRef:u,required:d,...g}),e.jsx(G.FieldHint,{}),e.jsx(J.FieldError,{})]})})},O=({"aria-label":t,id:n,children:r,clearLabel:i="Clear",customizeContent:s,disabled:d,error:x,label:g,onChange:c,onClear:u,onReachEnd:f,placeholder:m,required:y,selectButtonTitle:X,startIcon:F,size:R="M",value:p,triggerRef:T,...B})=>{const[C,j]=h.useState(),[_,$]=h.useState(!1),v=l=>{$(l)},w=l=>{u&&u(l),c||j("")},P=`${n}-hint`,k=`${n}-error`,L=l=>{c?c(typeof p=="number"?Number(l):l):j(l)},S=h.useRef(null),M=b.useId(),I=`intersection-${V.stripReactIdOfColon(M)}`,N=l=>{f&&f(l)};H.useIntersection(S,N,{selectorToWatch:`#${I}`,skipWhen:!_});const a=(typeof p<"u"&&p!==null?p.toString():C)??"";return e.jsxs(o.Root,{onOpenChange:v,disabled:d,required:y,onValueChange:L,value:a,...B,children:[e.jsx(o.Trigger,{ref:T,"aria-label":g??t,"aria-describedby":n?`${P} ${k}`:void 0,id:n,startIcon:F,size:R,hasError:!!x,disabled:d,clearLabel:i,onClear:a&&u?w:void 0,children:e.jsx(o.Value,{placeholder:m,textColor:a?"neutral800":"neutral600",children:a&&s?s(a):void 0})}),e.jsx(o.Portal,{children:e.jsx(o.Content,{position:"popper",sideOffset:4,children:e.jsxs(o.Viewport,{ref:S,children:[r,e.jsx(q.Box,{id:I,width:"100%",height:"1px"})]})})})]})},U=h.forwardRef(({value:t,startIcon:n,children:r,...i},s)=>e.jsxs(o.Item,{ref:s,value:t.toString(),...i,children:[n&&e.jsx(q.Box,{as:"span","aria-hidden":!0,children:n}),e.jsx(W.Typography,{textColor:"neutral800",children:e.jsx(o.ItemText,{children:r})})]}));exports.SingleSelect=Q;exports.SingleSelectInput=O;exports.SingleSelectOption=U;

package/dist/Select/SingleSelect.js

@@ -1,44 +1,44 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { jsxs as h, 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 { 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 { stripReactIdOfColon as D } from "../helpers/strings.js";
 import { useId as R } from "../hooks/useId.js";
-import { useIntersection as D } from "../hooks/useIntersection.js";
+import { useIntersection as G } 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) => {
-    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);
+import { Typography as J } from "../Typography/Typography.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);
   }, {
     selectorToWatch: `#${S}`,
     /**
      * 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
+    skipWhen: !k
   });
-  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 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 }) })] }));
 export {
-  pe as SingleSelect,
-  Y as SingleSelectInput,
-  me as SingleSelectOption
+  me as SingleSelect,
+  Z as SingleSelectInput,
+  ge as SingleSelectOption
 };

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 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)`
+  /**
+    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`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  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)`
   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=L;

package/dist/ToggleInput/ToggleInput.js

@@ -1,23 +1,48 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import p from "styled-components";
-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 { jsx as r, jsxs as x } from "react/jsx-runtime";
+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 { 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 { 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 { 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({
+    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) => {
+    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)`
+  /**
+    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"}`};
+`, z = c.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  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)`
   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
+  V 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;