@strapi/design-system 0.0.0-jsoninput.0

package/dist/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,186 @@
+import * as o from "react";
+import t from "prop-types";
+import { createGlobalStyle as i, ThemeProvider as n } from "styled-components";
+import { LiveRegions as l } from "../LiveRegions/LiveRegions.js";
+const s = i`
+ /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: "";
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  /* My styles */
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  *:focus-visible {
+    outline: 2px solid ${({ theme: e }) => e.colors.primary600};
+    outline-offset: 2px;
+  }
+
+  /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  body,html{
+    height: 100%;
+  }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: 100%;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  textarea,input {
+    font: inherit;
+  }
+
+  .lock-body-scroll {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+`, a = ({ children: e, theme: r }) => /* @__PURE__ */ o.createElement(n, {
+  theme: r
+}, /* @__PURE__ */ o.createElement(s, null), e, /* @__PURE__ */ o.createElement(l, null));
+a.propTypes = {
+  children: t.node.isRequired,
+  theme: t.object.isRequired
+};
+export {
+  a as ThemeProvider
+};

package/dist/ThemeProvider/hooks.cjs

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

package/dist/ThemeProvider/hooks.js

@@ -0,0 +1,5 @@
+import { useTheme as e } from "styled-components";
+const r = () => e();
+export {
+  r as useTheme
+};

package/dist/ThemeProvider/index.cjs

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

package/dist/ThemeProvider/index.js

@@ -0,0 +1,6 @@
+import { ThemeProvider as o } from "./ThemeProvider.js";
+import { useTheme as f } from "./hooks.js";
+export {
+  o as ThemeProvider,
+  f as useTheme
+};

package/dist/TimePicker/TimePicker.cjs

@@ -0,0 +1,12 @@
+"use strict";var B=Object.defineProperty;var d=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var g=(t,s,l)=>s in t?B(t,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[s]=l,O=(t,s)=>{for(var l in s||(s={}))q.call(s,l)&&g(t,l,s[l]);if(d)for(var l of d(s))v.call(s,l)&&g(t,l,s[l]);return t};var T=(t,s)=>{var l={};for(var r in t)q.call(t,r)&&s.indexOf(r)<0&&(l[r]=t[r]);if(t!=null&&d)for(var r of d(t))s.indexOf(r)<0&&v.call(t,r)&&(l[r]=t[r]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),D=require("prop-types"),G=require("@strapi/icons/Clock"),H=require("styled-components"),N=require("../themes/sizes.cjs"),V=require("../Select/Select.cjs"),W=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const A=require("../helpers/useId.cjs"),f=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=f(x),e=f(D),F=f(G),J=f(H),K=J.default.div`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  svg path {
+    fill: ${({theme:t})=>t.colors.neutral500};
+  }
+`,b=Q=>{var y=Q,{disabled:t,error:s,hint:l,id:r,onClear:S,onChange:_,value:p,clearLabel:j,label:M,required:k,selectButtonTitle:C,step:$,size:I}=y,P=T(y,["disabled","error","hint","id","onClear","onChange","value","clearLabel","label","required","selectButtonTitle","step","size"]);const z=A.useId("timepicker",r),E=24,a=[];let n=0;for(let u=0;u<E;u++)for(n=0;n<60;)a.push(`${u<10?`0${u}`:u}:${n<10?`0${n}`:n}`),n+=$;const R=()=>{const u=p.split(":")[0],h=p.split(":")[1],L=a.reduce((o,m)=>{const i=m.split(":")[0];return Math.abs(i-u)<Math.abs(o-u)?i:o},a[0].split(":")[0]),w=a.reduce((o,m)=>{const i=m.split(":")[1];return Math.abs(i-h)<Math.abs(o-h)?i:o},a[0].split(":")[1]);return`${L}:${w}`};return c.default.createElement(V.Select,O({id:z,label:M,placeholder:"--:--",hint:l,onClear:S,clearLabel:j,error:s,value:p?R():null,size:I,onChange:_,disabled:t,required:k,selectButtonTitle:C,startIcon:c.default.createElement(K,null,c.default.createElement(F.default,null))},P),a.map(u=>c.default.createElement(W.Option,{value:u,key:u},u)))};b.defaultProps={disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,onClear:void 0,required:!1,size:"M",selectButtonTitle:void 0,step:15,value:void 0};b.propTypes={clearLabel:e.default.string.isRequired,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(N.sizes.input)),step:e.default.number,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number])};exports.TimePicker=b;

package/dist/TimePicker/TimePicker.js

@@ -0,0 +1,142 @@
+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 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 "../Select/OptGroup.js";
+import "../Select/MultiSelectNested.js";
+import "../Select/SelectList.js";
+import { useId as A } from "../helpers/useId.js";
+const D = L.div`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  svg path {
+    fill: ${({ theme: t }) => t.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}:${_}`;
+  };
+  return /* @__PURE__ */ m.createElement(V, v({
+    id: R,
+    label: k,
+    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)));
+};
+O.defaultProps = {
+  disabled: !1,
+  error: void 0,
+  hint: void 0,
+  id: void 0,
+  label: void 0,
+  onClear: void 0,
+  required: !1,
+  size: "M",
+  selectButtonTitle: void 0,
+  step: 15,
+  value: void 0
+};
+O.propTypes = {
+  clearLabel: e.string.isRequired,
+  disabled: e.bool,
+  error: e.oneOfType([e.string, e.bool]),
+  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  id: e.oneOfType([e.string, e.number]),
+  label: e.string,
+  onChange: e.func.isRequired,
+  onClear: e.func,
+  required: e.bool,
+  selectButtonTitle: e.string,
+  size: e.oneOf(Object.keys(S.input)),
+  step: e.number,
+  value: e.oneOfType([
+    e.arrayOf(e.oneOfType([e.string, e.number])),
+    e.string,
+    e.number
+  ])
+};
+export {
+  O as TimePicker
+};

package/dist/TimePicker/index.cjs

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

package/dist/TimePicker/index.js

@@ -0,0 +1,4 @@
+import { TimePicker as i } from "./TimePicker.js";
+export {
+  i as TimePicker
+};

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -0,0 +1,36 @@
+"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`
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+`,D=s.default(M.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"};
+  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};
+  position: relative;
+  user-select: none;
+  z-index: 2;
+  flex: 1 1 50%;
+  /**
+    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:e})=>`${e==="S"?"2px":"6px"}`};
+  padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
+`,N=s.default.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  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;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -0,0 +1,148 @@
+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 "../Field/Field.js";
+import "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { useField as M } from "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Flex as O } from "../Flex/Flex.js";
+const P = u.label`
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+`, V = u(I)`
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
+  // Masks the background of each value
+  overflow: hidden;
+  flex-wrap: wrap;
+
+  ${B()}
+`, w = u(O).attrs({
+  hasRadius: !0
+})`
+  background-color: ${({ theme: e, checked: t, disabled: r }) => t ? r ? 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};
+  position: relative;
+  user-select: none;
+  z-index: 2;
+  flex: 1 1 50%;
+  /**
+    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: e }) => `${e === "S" ? "2px" : "6px"}`};
+  padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
+`, _ = u.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  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);
+    };
+    return /* @__PURE__ */ l.createElement(P, null, /* @__PURE__ */ l.createElement(F, null, o), /* @__PURE__ */ l.createElement(V, {
+      hasRadius: !0,
+      disabled: a,
+      padding: 1,
+      display: "flex",
+      background: a ? "neutral150" : "neutral100",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "neutral200"
+    }, /* @__PURE__ */ l.createElement(w, {
+      size: e,
+      paddingLeft: 3,
+      paddingRight: 3,
+      justifyContent: "center",
+      alignItems: "center",
+      "aria-hidden": !0,
+      checked: n === null ? !1 : !n,
+      disabled: a
+    }, /* @__PURE__ */ l.createElement(C, {
+      variant: "pi",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      textColor: a ? "neutral700" : $
+    }, r)), /* @__PURE__ */ l.createElement(w, {
+      size: e,
+      paddingLeft: 3,
+      paddingRight: 3,
+      justifyContent: "center",
+      alignItems: "center",
+      "aria-hidden": !0,
+      checked: n === null ? !1 : n,
+      disabled: a
+    }, /* @__PURE__ */ l.createElement(C, {
+      variant: "pi",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      textColor: a ? "neutral700" : L
+    }, t)), /* @__PURE__ */ l.createElement(_, x(b({
+      type: "checkbox",
+      "aria-disabled": a,
+      onChange: (s) => q(s),
+      name: E,
+      ref: R,
+      "aria-required": T
+    }, k), {
+      checked: !(n === null || !n)
+    }))));
+  }
+);
+d.displayName = "ToggleCheckbox";
+d.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))
+};
+export {
+  d as ToggleCheckbox
+};

package/dist/ToggleCheckbox/index.cjs

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

package/dist/ToggleCheckbox/index.js

@@ -0,0 +1,4 @@
+import { ToggleCheckbox as g } from "./ToggleCheckbox.js";
+export {
+  g as ToggleCheckbox
+};

package/dist/ToggleInput/ToggleInput.cjs

@@ -0,0 +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)`
+  max-width: 320px;
+`,D=x.default(M.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;