@strapi/design-system 1.4.2 → 1.5.0

package/dist/TimePicker/TimePicker.js

@@ -1,35 +1,15 @@
-var j = Object.defineProperty;
-var p = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
-var h = (t, o, r) => o in t ? j(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, v = (t, o) => {
-  for (var r in o || (o = {}))
-    g.call(o, r) && h(t, r, o[r]);
-  if (p)
-    for (var r of p(o))
-      y.call(o, r) && h(t, r, o[r]);
-  return t;
-};
-var T = (t, o) => {
-  var r = {};
-  for (var s in t)
-    g.call(t, s) && o.indexOf(s) < 0 && (r[s] = t[s]);
-  if (t != null && p)
-    for (var s of p(t))
-      o.indexOf(s) < 0 && y.call(t, s) && (r[s] = t[s]);
-  return r;
-};
-import m from "react";
+import n from "react";
 import e from "prop-types";
-import H from "@strapi/icons/Clock";
-import L from "styled-components";
-import { sizes as S } from "../themes/sizes.js";
-import { Select as V } from "../Select/Select.js";
-import { Option as W } from "../Select/Option.js";
+import z from "@strapi/icons/Clock";
+import P from "styled-components";
+import { sizes as R } from "../themes/sizes.js";
+import { Select as w } from "../Select/Select.js";
+import { Option as x } from "../Select/Option.js";
 import "../Select/OptGroup.js";
 import "../Select/MultiSelectNested.js";
 import "../Select/SelectList.js";
-import { useId as A } from "../helpers/useId.js";
-const D = L.div`
+import { useId as B } from "../helpers/useId.js";
+const _ = P.div`
   display: flex;
   align-items: center;
   svg {
@@ -38,74 +18,61 @@ const D = L.div`
   }
 
   svg path {
-    fill: ${({ theme: t }) => t.colors.neutral500};
+    fill: ${({ theme: l }) => l.colors.neutral500};
   }
-`, O = (F) => {
-  var f = F, {
-    disabled: t,
-    error: o,
-    hint: r,
-    id: s,
-    onClear: $,
-    onChange: C,
-    value: c,
-    clearLabel: M,
-    label: k,
-    required: q,
-    selectButtonTitle: E,
-    step: I,
-    size: z
-  } = f, P = T(f, [
-    "disabled",
-    "error",
-    "hint",
-    "id",
-    "onClear",
-    "onChange",
-    "value",
-    "clearLabel",
-    "label",
-    "required",
-    "selectButtonTitle",
-    "step",
-    "size"
-  ]);
-  const R = A("timepicker", s), w = 24, n = [];
-  let l = 0;
-  for (let i = 0; i < w; i++)
-    for (l = 0; l < 60; )
-      n.push(`${i < 10 ? `0${i}` : i}:${l < 10 ? `0${l}` : l}`), l += I;
-  const x = () => {
-    const i = c.split(":")[0], b = c.split(":")[1], B = n.reduce((a, d) => {
-      const u = d.split(":")[0];
-      return Math.abs(u - i) < Math.abs(a - i) ? u : a;
-    }, n[0].split(":")[0]), _ = n.reduce((a, d) => {
-      const u = d.split(":")[1];
-      return Math.abs(u - b) < Math.abs(a - b) ? u : a;
-    }, n[0].split(":")[1]);
-    return `${B}:${_}`;
+`, m = ({
+  disabled: l,
+  error: c,
+  hint: d,
+  id: f,
+  onClear: b,
+  onChange: h,
+  value: a,
+  clearLabel: g,
+  label: y,
+  required: v,
+  selectButtonTitle: T,
+  step: O,
+  size: $,
+  ...C
+}) => {
+  const M = B("timepicker", f), k = 24, r = [];
+  let o = 0;
+  for (let t = 0; t < k; t++)
+    for (o = 0; o < 60; )
+      r.push(`${t < 10 ? `0${t}` : t}:${o < 10 ? `0${o}` : o}`), o += O;
+  const q = () => {
+    const t = a.split(":")[0], p = a.split(":")[1], E = r.reduce((i, u) => {
+      const s = u.split(":")[0];
+      return Math.abs(s - t) < Math.abs(i - t) ? s : i;
+    }, r[0].split(":")[0]), I = r.reduce((i, u) => {
+      const s = u.split(":")[1];
+      return Math.abs(s - p) < Math.abs(i - p) ? s : i;
+    }, r[0].split(":")[1]);
+    return `${E}:${I}`;
   };
-  return /* @__PURE__ */ m.createElement(V, v({
-    id: R,
-    label: k,
+  return /* @__PURE__ */ n.createElement(w, {
+    id: M,
+    label: y,
     placeholder: "--:--",
-    hint: r,
-    onClear: $,
-    clearLabel: M,
-    error: o,
-    value: c ? x() : null,
-    size: z,
-    onChange: C,
-    disabled: t,
-    required: q,
-    selectButtonTitle: E,
-    startIcon: /* @__PURE__ */ m.createElement(D, null, /* @__PURE__ */ m.createElement(H, null))
-  }, P), n.map((i) => /* @__PURE__ */ m.createElement(W, {
-    value: i,
-    key: i
-  }, i)));
+    hint: d,
+    onClear: b,
+    clearLabel: g,
+    error: c,
+    value: a ? q() : null,
+    size: $,
+    onChange: h,
+    disabled: l,
+    required: v,
+    selectButtonTitle: T,
+    startIcon: /* @__PURE__ */ n.createElement(_, null, /* @__PURE__ */ n.createElement(z, null)),
+    ...C
+  }, r.map((t) => /* @__PURE__ */ n.createElement(x, {
+    value: t,
+    key: t
+  }, t)));
 };
-O.defaultProps = {
+m.defaultProps = {
   disabled: !1,
   error: void 0,
   hint: void 0,
@@ -118,7 +85,7 @@ O.defaultProps = {
   step: 15,
   value: void 0
 };
-O.propTypes = {
+m.propTypes = {
   clearLabel: e.string.isRequired,
   disabled: e.bool,
   error: e.oneOfType([e.string, e.bool]),
@@ -129,7 +96,7 @@ O.propTypes = {
   onClear: e.func,
   required: e.bool,
   selectButtonTitle: e.string,
-  size: e.oneOf(Object.keys(S.input)),
+  size: e.oneOf(Object.keys(R.input)),
   step: e.number,
   value: e.oneOfType([
     e.arrayOf(e.oneOfType([e.string, e.number])),
@@ -138,5 +105,5 @@ O.propTypes = {
   ])
 };
 export {
-  O as TimePicker
+  m as TimePicker
 };

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

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

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,56 +1,35 @@
-var z = Object.defineProperty, W = Object.defineProperties;
-var S = Object.getOwnPropertyDescriptors;
-var p = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
-var m = (e, t, r) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, b = (e, t) => {
-  for (var r in t || (t = {}))
-    g.call(t, r) && m(e, r, t[r]);
-  if (p)
-    for (var r of p(t))
-      h.call(t, r) && m(e, r, t[r]);
-  return e;
-}, x = (e, t) => W(e, S(t));
-var y = (e, t) => {
-  var r = {};
-  for (var o in e)
-    g.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
-  if (e != null && p)
-    for (var o of p(e))
-      t.indexOf(o) < 0 && h.call(e, o) && (r[o] = e[o]);
-  return r;
-};
-import l from "react";
-import i from "prop-types";
-import u from "styled-components";
-import { sizes as j } from "../themes/sizes.js";
-import { inputFocusStyle as B } from "../themes/utils.js";
-import { Typography as C } from "../Typography/Typography.js";
-import { VisuallyHidden as F } from "../VisuallyHidden/VisuallyHidden.js";
-import { Box as I } from "../Box/Box.js";
+import r from "react";
+import n from "prop-types";
+import i from "styled-components";
+import { sizes as v } from "../themes/sizes.js";
+import { inputFocusStyle as k } from "../themes/utils.js";
+import { Typography as d } from "../Typography/Typography.js";
+import { VisuallyHidden as R } from "../VisuallyHidden/VisuallyHidden.js";
+import { Box as E } from "../Box/Box.js";
 import "../Field/Field.js";
 import "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { useField as M } from "../Field/FieldContext.js";
+import { useField as T } from "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as O } from "../Flex/Flex.js";
-const P = u.label`
+import { Flex as $ } from "../Flex/Flex.js";
+const L = i.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, V = u(I)`
+`, q = i(E)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${B()}
-`, w = u(O).attrs({
+  ${k()}
+`, f = i($).attrs({
   hasRadius: !0
 })`
-  background-color: ${({ theme: e, checked: t, disabled: r }) => t ? r ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  background-color: ${({ theme: e, checked: l, disabled: a }) => l ? a ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
   border: 1px solid
-    ${({ theme: e, checked: t, disabled: r }) => t && t !== null ? r ? e.colors.neutral300 : e.colors.neutral200 : r ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme: e, checked: l, disabled: a }) => l && l !== null ? a ? e.colors.neutral300 : e.colors.neutral200 : a ? e.colors.neutral150 : e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -62,7 +41,7 @@ const P = u.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, _ = u.input`
+`, z = i.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -70,79 +49,78 @@ const P = u.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, d = l.forwardRef(
-  (H, R) => {
-    var f = H, { size: e, onLabel: t, offLabel: r, children: o, checked: n, disabled: a, onChange: v } = f, k = y(f, ["size", "onLabel", "offLabel", "children", "checked", "disabled", "onChange"]);
-    const { name: E, required: T } = M(), c = "neutral600";
-    let $ = !n && n !== null ? "danger700" : c, L = n ? "primary600" : c;
-    const q = (s) => {
-      a || v(s);
+`, u = r.forwardRef(
+  ({ size: e, onLabel: l, offLabel: a, children: c, checked: t, disabled: o, onChange: m, ...g }, h) => {
+    const { name: b, required: x } = T(), s = "neutral600";
+    let y = !t && t !== null ? "danger700" : s, C = t ? "primary600" : s;
+    const w = (p) => {
+      o || m(p);
     };
-    return /* @__PURE__ */ l.createElement(P, null, /* @__PURE__ */ l.createElement(F, null, o), /* @__PURE__ */ l.createElement(V, {
+    return /* @__PURE__ */ r.createElement(L, null, /* @__PURE__ */ r.createElement(R, null, c), /* @__PURE__ */ r.createElement(q, {
       hasRadius: !0,
-      disabled: a,
+      disabled: o,
       padding: 1,
       display: "flex",
-      background: a ? "neutral150" : "neutral100",
+      background: o ? "neutral150" : "neutral100",
       borderStyle: "solid",
       borderWidth: "1px",
       borderColor: "neutral200"
-    }, /* @__PURE__ */ l.createElement(w, {
+    }, /* @__PURE__ */ r.createElement(f, {
       size: e,
       paddingLeft: 3,
       paddingRight: 3,
       justifyContent: "center",
       alignItems: "center",
       "aria-hidden": !0,
-      checked: n === null ? !1 : !n,
-      disabled: a
-    }, /* @__PURE__ */ l.createElement(C, {
+      checked: t === null ? !1 : !t,
+      disabled: o
+    }, /* @__PURE__ */ r.createElement(d, {
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: a ? "neutral700" : $
-    }, r)), /* @__PURE__ */ l.createElement(w, {
+      textColor: o ? "neutral700" : y
+    }, a)), /* @__PURE__ */ r.createElement(f, {
       size: e,
       paddingLeft: 3,
       paddingRight: 3,
       justifyContent: "center",
       alignItems: "center",
       "aria-hidden": !0,
-      checked: n === null ? !1 : n,
-      disabled: a
-    }, /* @__PURE__ */ l.createElement(C, {
+      checked: t === null ? !1 : t,
+      disabled: o
+    }, /* @__PURE__ */ r.createElement(d, {
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: a ? "neutral700" : L
-    }, t)), /* @__PURE__ */ l.createElement(_, x(b({
+      textColor: o ? "neutral700" : C
+    }, l)), /* @__PURE__ */ r.createElement(z, {
       type: "checkbox",
-      "aria-disabled": a,
-      onChange: (s) => q(s),
-      name: E,
-      ref: R,
-      "aria-required": T
-    }, k), {
-      checked: !(n === null || !n)
-    }))));
+      "aria-disabled": o,
+      onChange: (p) => w(p),
+      name: b,
+      ref: h,
+      "aria-required": x,
+      ...g,
+      checked: !(t === null || !t)
+    })));
   }
 );
-d.displayName = "ToggleCheckbox";
-d.defaultProps = {
+u.displayName = "ToggleCheckbox";
+u.defaultProps = {
   disabled: !1,
   checked: !1,
   onChange: void 0,
   size: "M"
 };
-d.propTypes = {
-  checked: i.bool,
-  children: i.string.isRequired,
-  disabled: i.bool,
-  offLabel: i.string.isRequired,
-  onChange: i.func,
-  onLabel: i.string.isRequired,
-  size: i.oneOf(Object.keys(j.input))
+u.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(v.input))
 };
 export {
-  d as ToggleCheckbox
+  u as ToggleCheckbox
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,6 @@
-"use strict";var _=Object.defineProperty;var o=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var F=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,j=(e,r)=>{for(var t in r||(r={}))b.call(r,t)&&F(e,t,r[t]);if(o)for(var t of o(r))q.call(r,t)&&F(e,t,r[t]);return e};var m=(e,r)=>{var t={};for(var d in e)b.call(e,d)&&r.indexOf(d)<0&&(t[d]=e[d]);if(e!=null&&o)for(var d of o(e))r.indexOf(d)<0&&q.call(e,d)&&(t[d]=e[d]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),C=require("styled-components"),I=require("prop-types"),S=require("../themes/sizes.cjs"),z=require("../helpers/useId.cjs"),B=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const O=require("../Field/FieldHint.cjs"),P=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Stack/Stack.cjs"),H=require("../Flex/Flex.cjs"),M=require("../TextButton/TextButton.cjs"),R=require("../ToggleCheckbox/ToggleCheckbox.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=a(v),x=a(C),l=a(I),w=x.default(B.Field)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),x=require("styled-components"),T=require("prop-types"),y=require("../themes/sizes.cjs"),k=require("../helpers/useId.cjs"),E=require("../Field/Field.cjs"),h=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const _=require("../Field/FieldHint.cjs"),v=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const C=require("../Stack/Stack.cjs"),I=require("../Flex/Flex.cjs"),S=require("../TextButton/TextButton.cjs"),z=require("../ToggleCheckbox/ToggleCheckbox.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=d(m),s=d(x),e=d(T),B=s.default(E.Field)`
   max-width: 320px;
-`,D=x.default(M.TextButton)`
+`,L=s.default(S.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,n=N=>{var g=N,{disabled:e,size:r,error:t,hint:d,label:u,name:T,labelAction:y,required:k,id:E,onClear:s,clearLabel:c,checked:f}=g,h=m(g,["disabled","size","error","hint","label","name","labelAction","required","id","onClear","clearLabel","checked"]);const p=z.useId("toggleinput",E);return i.default.createElement(w,{name:T,hint:d,error:t,id:p,required:k},i.default.createElement(A.Stack,{spacing:1},i.default.createElement(H.Flex,null,i.default.createElement(L.FieldLabel,{action:y},u),c&&s&&f!==null&&!e&&i.default.createElement(D,{onClick:s},c)),i.default.createElement(R.ToggleCheckbox,j({id:p,size:r,checked:f,disabled:e},h),u),i.default.createElement(O.FieldHint,null),i.default.createElement(P.FieldError,null)))};n.displayName="ToggleInput";n.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"};n.propTypes={checked:l.default.bool,clearLabel:l.default.string,disabled:l.default.bool,error:l.default.string,hint:l.default.oneOfType([l.default.string,l.default.node,l.default.arrayOf(l.default.node)]),id:l.default.string,label:l.default.string,labelAction:l.default.node,name:l.default.string,onClear:l.default.func,required:l.default.bool,size:l.default.oneOf(Object.keys(S.sizes.input))};exports.ToggleInput=n;
+`,r=({disabled:t,size:c,error:f,hint:g,label:i,name:p,labelAction:F,required:b,id:q,onClear:o,clearLabel:n,checked:a,...j})=>{const u=k.useId("toggleinput",q);return l.default.createElement(B,{name:p,hint:g,error:f,id:u,required:b},l.default.createElement(C.Stack,{spacing:1},l.default.createElement(I.Flex,null,l.default.createElement(h.FieldLabel,{action:F},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:c,checked:a,disabled:t,...j},i),l.default.createElement(_.FieldHint,null),l.default.createElement(v.FieldError,null)))};r.displayName="ToggleInput";r.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"};r.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(y.sizes.input))};exports.ToggleInput=r;