@strapi/design-system 1.7.0-alpha.5 → 1.7.1

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"),o=require("prop-types"),a=require("styled-components"),$=require("../themes/sizes.cjs"),L=require("../themes/utils.cjs"),m=require("../Box/Box.cjs"),z=require("../Flex/Flex.cjs"),S=require("../Field/FieldContext.cjs"),F=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),W=a.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`,W=i.default(L.Box)`
+`,B=a(m.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"};
+  ${L.inputFocusStyle()}
+`,g=a(z.Flex).attrs({hasRadius:!0})`
+  background-color: ${({theme:e,checked:i,disabled:l})=>i?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:i,disabled:l})=>i&&i!==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`
+`,I=a.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;
+`,s=R.forwardRef(({size:e,onLabel:i,offLabel:l,children:x,checked:r,disabled:t,onChange:f,...b},y)=>{const{error:C,hint:q,id:c,name:w,required:j}=S.useField(),p="neutral600";let T=!r&&r!==null?"danger700":p,v=r?"primary600":p;const k=d=>{t||f(d)};let u;return C?u=`${c}-error`:q&&(u=`${c}-hint`),n.jsxs(W,{children:[n.jsx(F.VisuallyHidden,{children:x}),n.jsxs(B,{hasRadius:!0,disabled:t,padding:1,display:"flex",background:t?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",children:[n.jsx(g,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:!r,disabled:t,children:n.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":T,children:l})}),n.jsx(g,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:r,disabled:t,children:n.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":v,children:i})}),n.jsx(I,{type:"checkbox","aria-disabled":t,"aria-describedby":u,onChange:d=>k(d),name:w,ref:y,"aria-required":j,...b,checked:!(r===null||!r)})]})]})});s.displayName="ToggleCheckbox";s.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};s.propTypes={checked:o.bool,children:o.string.isRequired,disabled:o.bool,offLabel:o.string.isRequired,onChange:o.func,onLabel:o.string.isRequired,size:o.oneOf(Object.keys($.sizes.input))};exports.ToggleCheckbox=s;

package/dist/ToggleCheckbox/ToggleCheckbox.js

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

package/dist/ToggleInput/ToggleInput.js

@@ -1,43 +1,49 @@
-import r from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import "react";
 import e from "prop-types";
-import p from "styled-components";
-import { Field as y } from "../Field/Field.js";
-import { FieldLabel as T } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as h } from "../Field/FieldHint.js";
-import { FieldError as v } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { useId as F } from "../hooks/useId.js";
-import { TextButton as I } from "../TextButton/TextButton.js";
-import { sizes as k } from "../themes/sizes.js";
-import { ToggleCheckbox as C } from "../ToggleCheckbox/ToggleCheckbox.js";
-const O = p(y)`
+import a from "styled-components";
+import { useId as T } from "../hooks/useId.js";
+import { sizes as v } from "../themes/sizes.js";
+import { ToggleCheckbox as F } from "../ToggleCheckbox/ToggleCheckbox.js";
+import { Field as I } from "../Field/Field.js";
+import { TextButton as k } from "../TextButton/TextButton.js";
+import { Flex as p } from "../Flex/Flex.js";
+import { FieldLabel as C } from "../Field/FieldLabel.js";
+import { FieldHint as O } from "../Field/FieldHint.js";
+import { FieldError as j } from "../Field/FieldError.js";
+const z = a(I)`
   max-width: 320px;
-`, z = p(I)`
+`, q = a(k)`
   align-self: flex-end;
   margin-left: auto;
-`, t = ({
-  disabled: o,
-  size: s,
-  error: c,
-  hint: f,
-  label: i,
+`, r = ({
+  disabled: i,
+  size: c,
+  error: f,
+  hint: g,
+  label: t,
   name: u,
-  labelAction: g,
+  labelAction: h,
   required: b,
-  id: E,
-  onClear: l,
-  clearLabel: n,
-  checked: m,
-  ...x
+  id: x,
+  onClear: n,
+  clearLabel: l,
+  checked: d,
+  ...y
 }) => {
-  const a = F(E);
-  return /* @__PURE__ */ r.createElement(O, { name: u, hint: f, error: c, id: a, required: b }, /* @__PURE__ */ r.createElement(d, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ r.createElement(d, null, /* @__PURE__ */ r.createElement(T, { action: g }, i), n && l && m !== null && !o && /* @__PURE__ */ r.createElement(z, { onClick: l }, n)), /* @__PURE__ */ r.createElement(C, { id: a, size: s, checked: m, disabled: o, ...x }, i), /* @__PURE__ */ r.createElement(h, null), /* @__PURE__ */ r.createElement(v, null)));
+  const m = T(x);
+  return /* @__PURE__ */ o(z, { name: u, hint: g, error: f, id: m, required: b, children: /* @__PURE__ */ s(p, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ o(C, { action: h, children: t }),
+      l && n && d !== null && !i && /* @__PURE__ */ o(q, { onClick: n, children: l })
+    ] }),
+    /* @__PURE__ */ o(F, { id: m, size: c, checked: d, disabled: i, ...y, children: t }),
+    /* @__PURE__ */ o(O, {}),
+    /* @__PURE__ */ o(j, {})
+  ] }) });
 };
-t.displayName = "ToggleInput";
-t.defaultProps = {
+r.displayName = "ToggleInput";
+r.defaultProps = {
   checked: !1,
   clearLabel: void 0,
   disabled: !1,
@@ -51,7 +57,7 @@ t.defaultProps = {
   required: !1,
   size: "M"
 };
-t.propTypes = {
+r.propTypes = {
   checked: e.bool,
   clearLabel: e.string,
   disabled: e.bool,
@@ -63,8 +69,8 @@ t.propTypes = {
   name: e.string,
   onClear: e.func,
   required: e.bool,
-  size: e.oneOf(Object.keys(k.input))
+  size: e.oneOf(Object.keys(v.input))
 };
 export {
-  t as ToggleInput
+  r as ToggleInput
 };

package/dist/ToggleInput/index.cjs

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

package/dist/Tooltip/Tooltip.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),b=require("react"),g=require("styled-components"),x=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),T=require("../Box/Box.cjs"),l=require("../hooks/useId.cjs"),m=require("../Portal/Portal.cjs"),q=require("../Typography/Typography.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),H=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function v(e){if(e&&e.__esModule)return e;const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const I=v(b),P=H(g),O=P.default(T.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react"),x=require("styled-components"),j=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),l=require("../hooks/useId.cjs"),T=require("../Portal/Portal.cjs"),q=require("../Box/Box.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),v=require("../Typography/Typography.cjs");function I(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const O=I(g),R=x(q.Box)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({visible:e})=>e?"revert":"none"};
-`,R=({children:e,label:s,description:t,delay:r=500,position:a="top",id:u,...d})=>{const n=l.useId(u),c=l.useId(),{visible:i,...p}=x.useTooltipHandlers(r),{tooltipWrapperRef:y,toggleSourceRef:f}=h.useTooltipLayout(i,a),j=I.cloneElement(e,{tabIndex:0,"aria-labelledby":s?n:void 0,"aria-describedby":t?n:void 0,...p});return o.jsxs(o.Fragment,{children:[o.jsx(m.Portal,{children:o.jsxs(O,{id:n,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:y,visible:i,position:"absolute",...d,children:[i&&o.jsx(_.VisuallyHidden,{id:c,children:t}),o.jsx(q.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0",children:s||t})]})}),o.jsx("span",{ref:f,children:j})]})};exports.Tooltip=R;
+`,H=({children:e,label:r,description:t,delay:n=500,position:a="top",id:d,...u})=>{const i=l.useId(d),c=l.useId(),{visible:s,...p}=j.useTooltipHandlers(n),{tooltipWrapperRef:b,toggleSourceRef:f}=h.useTooltipLayout(s,a),y=O.cloneElement(e,{tabIndex:0,"aria-labelledby":r?i:void 0,"aria-describedby":t?i:void 0,...p});return o.jsxs(o.Fragment,{children:[o.jsx(T.Portal,{children:o.jsxs(R,{id:i,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:b,visible:s,position:"absolute",...u,children:[s&&o.jsx(m.VisuallyHidden,{id:c,children:t}),o.jsx(v.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0",children:r||t})]})}),o.jsx("span",{ref:f,children:y})]})};exports.Tooltip=H;

package/dist/Tooltip/Tooltip.js

@@ -3,66 +3,23 @@ import * as y from "react";
 import g from "styled-components";
 import { useTooltipHandlers as T } from "./hooks/useTooltipHandlers.js";
 import { useTooltipLayout as v } from "./hooks/useTooltipLayout.js";
-import { Box as I } from "../Box/Box.js";
 import { useId as d } from "../hooks/useId.js";
-import { Portal as R } from "../Portal/Portal.js";
-import { Typography as H } from "../Typography/Typography.js";
-import { VisuallyHidden as W } from "../VisuallyHidden/VisuallyHidden.js";
-const j = g(I)`
+import { Portal as I } from "../Portal/Portal.js";
+import { Box as R } from "../Box/Box.js";
+import { VisuallyHidden as H } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as W } from "../Typography/Typography.js";
+const j = g(R)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
-  display: ${({
-  visible: e
-}) => e ? "revert" : "none"};
-`, S = ({
-  children: e,
-  label: n,
-  description: r,
-  delay: s = 500,
-  position: p = "top",
-  id: a,
-  ...m
-}) => {
-  const t = d(a), c = d(), {
-    visible: i,
-    ...f
-  } = T(s), {
-    tooltipWrapperRef: u,
-    toggleSourceRef: b
-  } = v(i, p), h = y.cloneElement(e, {
+  display: ${({ visible: e }) => e ? "revert" : "none"};
+`, S = ({ children: e, label: n, description: r, delay: s = 500, position: p = "top", id: a, ...m }) => {
+  const t = d(a), c = d(), { visible: i, ...f } = T(s), { tooltipWrapperRef: u, toggleSourceRef: b } = v(i, p), h = y.cloneElement(e, {
     tabIndex: 0,
     "aria-labelledby": n ? t : void 0,
     "aria-describedby": r ? t : void 0,
     ...f
   });
-  return l(x, {
-    children: [o(R, {
-      children: l(j, {
-        id: t,
-        background: "neutral900",
-        hasRadius: !0,
-        padding: 2,
-        role: "tooltip",
-        ref: u,
-        visible: i,
-        position: "absolute",
-        ...m,
-        children: [i && o(W, {
-          id: c,
-          children: r
-        }), o(H, {
-          as: "p",
-          variant: "pi",
-          fontWeight: "bold",
-          textColor: "neutral0",
-          children: n || r
-        })]
-      })
-    }), o("span", {
-      ref: b,
-      children: h
-    })]
-  });
+  return l(x, { children: [o(I, { children: l(j, { id: t, background: "neutral900", hasRadius: !0, padding: 2, role: "tooltip", ref: u, visible: i, position: "absolute", ...m, children: [i && o(H, { id: c, children: r }), o(W, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: n || r })] }) }), o("span", { ref: b, children: h })] });
 };
 export {
   S as Tooltip

package/dist/Tooltip/hooks/useTooltipHandlers.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),n=s=>{const[u,e]=o.useState(!1),t=o.useRef(null),r=()=>{typeof t.current=="number"&&(clearTimeout(t.current),t.current=null)};return o.useEffect(()=>()=>{r()},[]),{visible:u,onFocus:()=>{e(!0)},onBlur:()=>{e(!1)},onMouseEnter:()=>{t.current=setTimeout(()=>{e(!0)},s)},onMouseLeave:()=>{r(),e(!1)}}};exports.useTooltipHandlers=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),u=r=>{const[s,e]=o.useState(!1),t=o.useRef(null),n=()=>{typeof t.current=="number"&&(clearTimeout(t.current),t.current=null)};return o.useEffect(()=>()=>{n()},[]),{visible:s,onFocus:()=>{e(!0)},onBlur:()=>{e(!1)},onMouseEnter:()=>{t.current=setTimeout(()=>{e(!0)},r)},onMouseLeave:()=>{n(),e(!1)}}};exports.useTooltipHandlers=u;

package/dist/Tooltip/hooks/useTooltipLayout.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),c=require("../utils/positionTooltip.cjs"),n=(e,u)=>{const l=o.useRef(null),s=o.useRef(null);return o.useLayoutEffect(()=>{if(e){const t=l.current,i=s.current;if(t&&i){const r=c.positionTooltip(t,i,u);t.style.left=`${r.left}px`,t.style.top=`${r.top}px`}}},[u,e]),{tooltipWrapperRef:l,toggleSourceRef:s}};exports.useTooltipLayout=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("../utils/positionTooltip.cjs"),i=(e,u)=>{const l=o.useRef(null),r=o.useRef(null);return o.useLayoutEffect(()=>{if(e){const t=l.current,s=r.current;if(t&&s){const n=c.positionTooltip(t,s,u);t.style.left=`${n.left}px`,t.style.top=`${n.top}px`}}},[u,e]),{tooltipWrapperRef:l,toggleSourceRef:r}};exports.useTooltipLayout=i;

package/dist/Tooltip/index.cjs

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

package/dist/Tooltip/utils/positionTooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=8,d=(h,i)=>{const f=(h.width-i.width)/2,t=i.left-f,n=i.top+i.height+s+window.pageYOffset;return{left:t,top:n}},e=(h,i)=>{const f=(h.height-i.height)/2,t=i.left+i.width+s,n=i.top-f+window.pageYOffset;return{left:t,top:n}},o=(h,i)=>{const f=(h.height-i.height)/2,t=i.left-h.width-s,n=i.top-f+window.pageYOffset;return{left:t,top:n}},p=(h,i)=>{const f=(h.width-i.width)/2;let t=i.left-f,n=i.top-h.height-s+window.pageYOffset;const w=window.innerWidth-i.right;return i.left+h.width-w>window.innerWidth?(t=i.left-h.width-s,n=i.top+window.scrollY-i.height/2):t<0?(t=i.width+i.left+s,n=i.top+window.scrollY-h.height/2+s):n<0&&t>0&&(n=i.top+i.height+s),{left:t,top:n}},r=(h,i,f)=>{const t=h.getBoundingClientRect(),n=i.getBoundingClientRect();return f==="bottom"?d(t,n):f==="right"?e(t,n):f==="left"?o(t,n):p(t,n)};exports.positionTooltip=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=8,d=(h,i)=>{const f=(h.width-i.width)/2,t=i.left-f,n=i.top+i.height+s+window.pageYOffset;return{left:t,top:n}},o=(h,i)=>{const f=(h.height-i.height)/2,t=i.left+i.width+s,n=i.top-f+window.pageYOffset;return{left:t,top:n}},p=(h,i)=>{const f=(h.height-i.height)/2,t=i.left-h.width-s,n=i.top-f+window.pageYOffset;return{left:t,top:n}},e=(h,i)=>{const f=(h.width-i.width)/2;let t=i.left-f,n=i.top-h.height-s+window.pageYOffset;const w=window.innerWidth-i.right;return i.left+h.width-w>window.innerWidth?(t=i.left-h.width-s,n=i.top+window.scrollY-i.height/2):t<0?(t=i.width+i.left+s,n=i.top+window.scrollY-h.height/2+s):n<0&&t>0&&(n=i.top+i.height+s),{left:t,top:n}},r=(h,i,f)=>{const t=h.getBoundingClientRect(),n=i.getBoundingClientRect();return f==="bottom"?d(t,n):f==="right"?o(t,n):f==="left"?p(t,n):e(t,n)};exports.positionTooltip=r;

package/dist/Typography/Typography.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("./utils.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=i(n),a={fontSize:!0,fontWeight:!0},l=s.default.span.withConfig({shouldForwardProp:(e,t)=>!a[e]&&t(e)})`
-  ${o.variantStyle}
-  ${o.ellipsisStyle}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),r=require("./utils.cjs"),o=require("../helpers/theme.cjs"),n={fontSize:!0,fontWeight:!0},a=i.span.withConfig({shouldForwardProp:(e,t)=>!n[e]&&t(e)})`
+  ${r.variantStyle}
+  ${r.ellipsisStyle}
 
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
-  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,void 0)};
-  color: ${o.handleColor};
+  font-weight: ${({theme:e,fontWeight:t})=>o.extractStyleFromTheme(e.fontWeights,t,void 0)};
+  font-size: ${({theme:e,fontSize:t})=>o.extractStyleFromTheme(e.fontSizes,t,void 0)};
+  line-height: ${({theme:e,lineHeight:t})=>o.extractStyleFromTheme(e.lineHeights,t,void 0)};
+  color: ${r.handleColor};
   text-align: ${({textAlign:e})=>e};
   text-decoration: ${({textDecoration:e})=>e};
   text-transform: ${({textTransform:e})=>e};
-`;exports.Typography=l;
+`;exports.Typography=a;

package/dist/Typography/Typography.js

@@ -12,28 +12,13 @@ const s = {
 
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
-  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, void 0)};
+  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, void 0)};
   color: ${a};
-  text-align: ${({
-  textAlign: t
-}) => t};
-  text-decoration: ${({
-  textDecoration: t
-}) => t};
-  text-transform: ${({
-  textTransform: t
-}) => t};
+  text-align: ${({ textAlign: t }) => t};
+  text-decoration: ${({ textDecoration: t }) => t};
+  text-transform: ${({ textTransform: t }) => t};
 `;
 export {
   d as Typography