@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/ThemeProvider/index.mjs

@@ -0,0 +1,2 @@
+export { ThemeProvider } from './ThemeProvider.mjs';
+export { useTheme } from './hooks.mjs';

package/dist/TimePicker/TimePicker.js

@@ -1,84 +1,139 @@
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import * as m from "react";
-import { Clock as M } from "@strapi/icons";
-import S from "styled-components";
-import { ComboboxInput as $, Option as v } from "../Combobox/Combobox.js";
-import { useDesignSystem as L } from "../DesignSystemProvider.js";
-import { useControllableState as P } from "../hooks/useControllableState.js";
-import { useDateFormatter as j } from "../hooks/useDateFormatter.js";
-import { useId as V } from "../hooks/useId.js";
-import { Field as E } from "../Field/Field.js";
-import { Flex as O } from "../Flex/Flex.js";
-import { FieldLabel as _ } from "../Field/FieldLabel.js";
-import { FieldHint as q } from "../Field/FieldHint.js";
-import { FieldError as z } from "../Field/FieldError.js";
-const h = (o) => !!o.match(/^[^a-zA-Z]*$/), H = ({
-  id: o,
-  step: a = 15,
-  /**
-   * @preserve
-   * @deprecated This is no longer used.
-   */
-  ariaLabel: b,
-  /**
-   * @preserve
-   * @deprecated This is no longer used.
-   */
-  selectButtonTitle: C,
-  value: n,
-  defaultValue: c,
-  onChange: d,
-  ...u
-}) => {
-  const w = L("TimePicker"), k = V(o), [I, l] = m.useState(""), [x, f] = P({
-    prop: n,
-    defaultProp: c,
-    onChange: d
-  }), s = j(w.locale, {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: !1
-  }), p = m.useMemo(() => {
-    const e = s.formatToParts(/* @__PURE__ */ new Date()), { value: t } = e.find((i) => i.type === "literal");
-    return t;
-  }, [s]), A = m.useMemo(() => {
-    const e = 60 / a;
-    return [...Array(24).keys()].flatMap((t) => [...Array(e).keys()].map((i) => s.format(new Date(0, 0, 0, t, i * a))));
-  }, [a, s]), F = (e) => {
-    (!e || h(e)) && l(e);
-  }, y = (e) => {
-    const [t, i] = e.split(p);
-    if (!t && !i)
-      return;
-    const T = Number(t ?? "0"), g = Number(i ?? "0");
-    if (!(T > 23 || g > 59))
-      return s.format(new Date(0, 0, 0, T, g));
-  }, N = (e) => {
-    const t = y(e.target.value);
-    t ? (l(t), f(t)) : l(x);
-  }, B = (e) => {
-    if (typeof e < "u") {
-      const t = y(e);
-      f(t);
-    } else
-      f(e);
-  };
-  return m.useEffect(() => {
-    const e = typeof n > "u" ? "" : n;
-    h(e) && l(e);
-  }, [n, l]), r($, { ...u, value: x, onChange: B, isPrintableCharacter: h, allowCustomValue: !0, placeholder: `--${p}--`, autocomplete: "none", startIcon: r(R, {}), id: k, inputMode: "numeric", pattern: `\\d{2}${p}\\d{2}`, textValue: I, onTextValueChange: F, onBlur: N, children: A.map((e) => r(v, { value: e, children: e }, e)) });
-}, R = S(M)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const Combobox = require('../Combobox/Combobox.js');
+const DesignSystemProvider = require('../DesignSystemProvider.js');
+const useControllableState = require('../hooks/useControllableState.js');
+const useDateFormatter = require('../hooks/useDateFormatter.js');
+const useId = require('../hooks/useId.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const isNotAlphabeticalCharacter = (str) => {
+    return Boolean(str.match(/^[^a-zA-Z]*$/));
+};
+const TimePickerInput = React__namespace.forwardRef(({ id, step = 15, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+ariaLabel: _ariaLabel, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+selectButtonTitle: _selectButtonTitle, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
+    const context = DesignSystemProvider.useDesignSystem('TimePicker');
+    const generatedId = useId.useId(id);
+    const [textValue, setTextValue] = React__namespace.useState('');
+    const [value, setValue] = useControllableState.useControllableState({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange,
+    });
+    const formatter = useDateFormatter.useDateFormatter(context.locale, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+    const separator = React__namespace.useMemo(() => {
+        const parts = formatter.formatToParts(new Date());
+        const { value: separator } = parts.find((part) => part.type === 'literal');
+        return separator;
+    }, [formatter]);
+    const timeOptions = React__namespace.useMemo(() => {
+        const stepCount = 60 / step;
+        return [...Array(24).keys()].flatMap((hour) => [...Array(stepCount).keys()].map((minuteStep) => formatter.format(new Date(0, 0, 0, hour, minuteStep * step))));
+    }, [step, formatter]);
+    const handleTextValueChange = (string) => {
+        if (!string || isNotAlphabeticalCharacter(string)) {
+            setTextValue(string);
+        }
+    };
+    const createNewTimeValue = (value) => {
+        const [hours, minutes] = value.split(separator);
+        if (!hours && !minutes)
+            return undefined;
+        const hoursAsNumber = Number(hours ?? '0');
+        const minutesAsNumber = Number(minutes ?? '0');
+        if (hoursAsNumber > 23 || minutesAsNumber > 59)
+            return undefined;
+        return formatter.format(new Date(0, 0, 0, hoursAsNumber, minutesAsNumber));
+    };
+    const handleBlur = (event) => {
+        const newValue = createNewTimeValue(event.target.value);
+        if (newValue) {
+            setTextValue(newValue);
+            setValue(newValue);
+        }
+        else {
+            setTextValue(value);
+        }
+    };
+    const handleChange = (changedValue) => {
+        if (typeof changedValue !== 'undefined') {
+            const newValue = createNewTimeValue(changedValue);
+            setValue(newValue);
+        }
+        else {
+            setValue(changedValue);
+        }
+    };
+    /**
+     * Because we allow values that aren't necessarily in the list & we control the text value, we need to
+     * update the text value when the value changes to keep the two in sync.
+     */
+    React__namespace.useEffect(() => {
+        const actualValue = typeof valueProp === 'undefined' ? '' : valueProp;
+        if (isNotAlphabeticalCharacter(actualValue)) {
+            setTextValue(actualValue);
+        }
+    }, [valueProp, setTextValue]);
+    return (jsxRuntime.jsx(Combobox.ComboboxInput, { ...restProps, ref: forwardedRef, value: value, onChange: handleChange, isPrintableCharacter: isNotAlphabeticalCharacter, allowCustomValue: true, placeholder: `--${separator}--`, autocomplete: "none", startIcon: jsxRuntime.jsx(StyledClock, {}), id: generatedId, inputMode: "numeric", pattern: `\\d{2}\\${separator}\\d{2}`, textValue: textValue, onTextValueChange: handleTextValueChange, onBlur: handleBlur, children: timeOptions.map((time) => (jsxRuntime.jsx(Combobox.Option, { value: time, children: time }, time))) }));
+});
+const StyledClock = styled__default.default(icons.Clock) `
   height: 1rem;
   width: 1rem;
 
   & > path {
-    fill: ${({ theme: o }) => o.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
-`, ne = ({ label: o, error: a, hint: b, id: C, required: n, labelAction: c, ...d }) => {
-  const u = V(C);
-  return r(E, { hint: b, error: a, id: u, required: n, children: D(O, { direction: "column", alignItems: "stretch", gap: 1, children: [r(_, { action: c, children: o }), r(H, { id: u, error: a, required: n, ...d }), r(q, {}), r(z, {})] }) });
-};
-export {
-  ne as TimePicker,
-  H as TimePickerInput
-};
+`;
+const TimePicker = React__namespace.forwardRef(({ label, error, hint, id, required, labelAction, ...restProps }, forwardedRef) => {
+    const generatedId = useId.useId(id);
+    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }), jsxRuntime.jsx(TimePickerInput, { ref: forwardedRef, id: generatedId, error: error, required: required, ...restProps }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+
+exports.TimePicker = TimePicker;
+exports.TimePickerInput = TimePickerInput;

package/dist/TimePicker/TimePicker.mjs

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Clock } from '@strapi/icons';
+import styled from 'styled-components';
+import { ComboboxInput, Option } from '../Combobox/Combobox.mjs';
+import { useDesignSystem } from '../DesignSystemProvider.mjs';
+import { useControllableState } from '../hooks/useControllableState.mjs';
+import { useDateFormatter } from '../hooks/useDateFormatter.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+
+const isNotAlphabeticalCharacter = (str) => {
+    return Boolean(str.match(/^[^a-zA-Z]*$/));
+};
+const TimePickerInput = React.forwardRef(({ id, step = 15, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+ariaLabel: _ariaLabel, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+selectButtonTitle: _selectButtonTitle, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
+    const context = useDesignSystem('TimePicker');
+    const generatedId = useId(id);
+    const [textValue, setTextValue] = React.useState('');
+    const [value, setValue] = useControllableState({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange,
+    });
+    const formatter = useDateFormatter(context.locale, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+    const separator = React.useMemo(() => {
+        const parts = formatter.formatToParts(new Date());
+        const { value: separator } = parts.find((part) => part.type === 'literal');
+        return separator;
+    }, [formatter]);
+    const timeOptions = React.useMemo(() => {
+        const stepCount = 60 / step;
+        return [...Array(24).keys()].flatMap((hour) => [...Array(stepCount).keys()].map((minuteStep) => formatter.format(new Date(0, 0, 0, hour, minuteStep * step))));
+    }, [step, formatter]);
+    const handleTextValueChange = (string) => {
+        if (!string || isNotAlphabeticalCharacter(string)) {
+            setTextValue(string);
+        }
+    };
+    const createNewTimeValue = (value) => {
+        const [hours, minutes] = value.split(separator);
+        if (!hours && !minutes)
+            return undefined;
+        const hoursAsNumber = Number(hours ?? '0');
+        const minutesAsNumber = Number(minutes ?? '0');
+        if (hoursAsNumber > 23 || minutesAsNumber > 59)
+            return undefined;
+        return formatter.format(new Date(0, 0, 0, hoursAsNumber, minutesAsNumber));
+    };
+    const handleBlur = (event) => {
+        const newValue = createNewTimeValue(event.target.value);
+        if (newValue) {
+            setTextValue(newValue);
+            setValue(newValue);
+        }
+        else {
+            setTextValue(value);
+        }
+    };
+    const handleChange = (changedValue) => {
+        if (typeof changedValue !== 'undefined') {
+            const newValue = createNewTimeValue(changedValue);
+            setValue(newValue);
+        }
+        else {
+            setValue(changedValue);
+        }
+    };
+    /**
+     * Because we allow values that aren't necessarily in the list & we control the text value, we need to
+     * update the text value when the value changes to keep the two in sync.
+     */
+    React.useEffect(() => {
+        const actualValue = typeof valueProp === 'undefined' ? '' : valueProp;
+        if (isNotAlphabeticalCharacter(actualValue)) {
+            setTextValue(actualValue);
+        }
+    }, [valueProp, setTextValue]);
+    return (jsx(ComboboxInput, { ...restProps, ref: forwardedRef, value: value, onChange: handleChange, isPrintableCharacter: isNotAlphabeticalCharacter, allowCustomValue: true, placeholder: `--${separator}--`, autocomplete: "none", startIcon: jsx(StyledClock, {}), id: generatedId, inputMode: "numeric", pattern: `\\d{2}\\${separator}\\d{2}`, textValue: textValue, onTextValueChange: handleTextValueChange, onBlur: handleBlur, children: timeOptions.map((time) => (jsx(Option, { value: time, children: time }, time))) }));
+});
+const StyledClock = styled(Clock) `
+  height: 1rem;
+  width: 1rem;
+
+  & > path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+const TimePicker = React.forwardRef(({ label, error, hint, id, required, labelAction, ...restProps }, forwardedRef) => {
+    const generatedId = useId(id);
+    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsx(FieldLabel, { action: labelAction, children: label }), jsx(TimePickerInput, { ref: forwardedRef, id: generatedId, error: error, required: required, ...restProps }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+
+export { TimePicker, TimePickerInput };

package/dist/TimePicker/index.js

@@ -1,5 +1,10 @@
-import { TimePicker as r, TimePickerInput as m } from "./TimePicker.js";
-export {
-  r as TimePicker,
-  m as TimePickerInput
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TimePicker = require('./TimePicker.js');
+
+
+
+exports.TimePicker = TimePicker.TimePicker;
+exports.TimePickerInput = TimePicker.TimePickerInput;

package/dist/TimePicker/index.mjs

@@ -0,0 +1 @@
+export { TimePicker, TimePickerInput } from './TimePicker.mjs';

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,30 +1,52 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import R from "react";
-import i from "styled-components";
-import { inputFocusStyle as T } from "../themes/utils.js";
-import { Box as L } from "../Box/Box.js";
-import { Flex as W } from "../Flex/Flex.js";
-import { useField as j } from "../Field/FieldContext.js";
-import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
-import { Typography as h } from "../Typography/Typography.js";
-const B = i.label`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const utils = require('../themes/utils.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const FieldContext = require('../Field/FieldContext.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const Label = styled__default.default.label `
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, S = i(L)`
-  cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
+`;
+const ToggleCheckboxWrapper = styled__default.default(Box.Box) `
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${T()}
-`, g = i(W).attrs({
-  hasRadius: !0
-})`
-  background-color: ${({ theme: e, checked: o, disabled: n }) => o ? n ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  ${utils.inputFocusStyle()}
+`;
+const ValueBox = styled__default.default(Flex.Flex).attrs({
+    hasRadius: true,
+}) `
+  background-color: ${({ theme, checked, disabled }) => {
+    if (checked) {
+        return disabled ? theme.colors.neutral200 : theme.colors.neutral0;
+    }
+    return 'transparent';
+}};
   border: 1px solid
-    ${({ theme: e, checked: o, disabled: n }) => o && o !== null ? n ? e.colors.neutral300 : e.colors.neutral200 : n ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme, checked, disabled }) => {
+    if (checked && checked !== null) {
+        return disabled ? theme.colors.neutral300 : theme.colors.neutral200;
+    }
+    return disabled ? theme.colors.neutral150 : theme.colors.neutral100;
+}};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -34,9 +56,13 @@ const B = i.label`
     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"}`};
-`, F = i.input`
+  padding-top: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+`;
+/**
+ * visually hiding the input without SR-only helps Android SR to provide information with touch and haptic
+ */
+const Input = styled__default.default.input `
   height: 100%;
   left: 0;
   opacity: 0;
@@ -44,16 +70,30 @@ const B = i.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, I = R.forwardRef(({ size: e = "M", onLabel: o, offLabel: n, children: x, checked: r = !1, disabled: t = !1, onChange: s, ...b }, m) => {
-  const { error: d, hint: y, id: p, name: w, required: C } = j(), f = "neutral600";
-  let $ = !r && r !== null ? "danger700" : f, v = r ? "primary600" : f;
-  const k = (u) => {
-    t || s && s(u);
-  };
-  let l;
-  return d ? l = `${p}-error` : y && (l = `${p}-hint`), c(B, { children: [a(z, { children: x }), c(S, { hasRadius: !0, disabled: t, padding: 1, display: "flex", background: t ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: !!d, children: [a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : !r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : $, children: n }) }), a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : v, children: o }) }), a(F, { type: "checkbox", "aria-disabled": t, "aria-describedby": l, onChange: (u) => k(u), name: w, ref: m, "aria-required": C, ...b, checked: !(r === null || !r) })] })] });
+`;
+const ToggleCheckbox = React__default.default.forwardRef(({ size = 'M', onLabel, offLabel, children, checked = false, disabled = false, onChange, ...props }, ref) => {
+    const { error, hint, id, name, required } = FieldContext.useField();
+    const labelColor = 'neutral600';
+    let offCheckboxLabelColor = !checked && checked !== null ? 'danger700' : labelColor;
+    let onCheckboxLabelColor = checked ? 'primary600' : labelColor;
+    const handleChange = (e) => {
+        if (disabled)
+            return;
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    // Ensuring we pass the right aria-describedby attribute to the Input component as
+    // ToggleCheckbox is not using FieldInput which would allow us to pass on the error or hint with aria-describedby
+    let ariaDescription;
+    if (error) {
+        ariaDescription = `${id}-error`;
+    }
+    else if (hint) {
+        ariaDescription = `${id}-hint`;
+    }
+    return (jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsxs(ToggleCheckboxWrapper, { hasRadius: true, disabled: disabled, padding: 1, display: "flex", background: disabled ? 'neutral150' : 'neutral100', borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: Boolean(error), children: [jsxRuntime.jsx(ValueBox, { size: size, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": true, checked: checked === null ? false : !checked, disabled: disabled, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : offCheckboxLabelColor, children: offLabel }) }), jsxRuntime.jsx(ValueBox, { size: size, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": true, checked: checked === null ? false : checked, disabled: disabled, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : onCheckboxLabelColor, children: onLabel }) }), jsxRuntime.jsx(Input, { type: "checkbox", "aria-disabled": disabled, "aria-describedby": ariaDescription, onChange: (e) => handleChange(e), name: name, ref: ref, "aria-required": required, ...props, checked: !(checked === null || !checked) })] })] }));
 });
-I.displayName = "ToggleCheckbox";
-export {
-  I as ToggleCheckbox
-};
+ToggleCheckbox.displayName = 'ToggleCheckbox';
+
+exports.ToggleCheckbox = ToggleCheckbox;

package/dist/ToggleCheckbox/ToggleCheckbox.mjs

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { inputFocusStyle } from '../themes/utils.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { useField } from '../Field/FieldContext.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const Label = styled.label `
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+`;
+const ToggleCheckboxWrapper = styled(Box) `
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
+  // Masks the background of each value
+  overflow: hidden;
+  flex-wrap: wrap;
+
+  ${inputFocusStyle()}
+`;
+const ValueBox = styled(Flex).attrs({
+    hasRadius: true,
+}) `
+  background-color: ${({ theme, checked, disabled }) => {
+    if (checked) {
+        return disabled ? theme.colors.neutral200 : theme.colors.neutral0;
+    }
+    return 'transparent';
+}};
+  border: 1px solid
+    ${({ theme, checked, disabled }) => {
+    if (checked && checked !== null) {
+        return disabled ? theme.colors.neutral300 : theme.colors.neutral200;
+    }
+    return disabled ? theme.colors.neutral150 : theme.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 }) => `${size === 'S' ? '2px' : '6px'}`};
+  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+`;
+/**
+ * visually hiding the input without SR-only helps Android SR to provide information with touch and haptic
+ */
+const Input = styled.input `
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+`;
+const ToggleCheckbox = React__default.forwardRef(({ size = 'M', onLabel, offLabel, children, checked = false, disabled = false, onChange, ...props }, ref) => {
+    const { error, hint, id, name, required } = useField();
+    const labelColor = 'neutral600';
+    let offCheckboxLabelColor = !checked && checked !== null ? 'danger700' : labelColor;
+    let onCheckboxLabelColor = checked ? 'primary600' : labelColor;
+    const handleChange = (e) => {
+        if (disabled)
+            return;
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    // Ensuring we pass the right aria-describedby attribute to the Input component as
+    // ToggleCheckbox is not using FieldInput which would allow us to pass on the error or hint with aria-describedby
+    let ariaDescription;
+    if (error) {
+        ariaDescription = `${id}-error`;
+    }
+    else if (hint) {
+        ariaDescription = `${id}-hint`;
+    }
+    return (jsxs(Label, { children: [jsx(VisuallyHidden, { children: children }), jsxs(ToggleCheckboxWrapper, { hasRadius: true, disabled: disabled, padding: 1, display: "flex", background: disabled ? 'neutral150' : 'neutral100', borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: Boolean(error), children: [jsx(ValueBox, { size: size, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": true, checked: checked === null ? false : !checked, disabled: disabled, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : offCheckboxLabelColor, children: offLabel }) }), jsx(ValueBox, { size: size, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": true, checked: checked === null ? false : checked, disabled: disabled, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : onCheckboxLabelColor, children: onLabel }) }), jsx(Input, { type: "checkbox", "aria-disabled": disabled, "aria-describedby": ariaDescription, onChange: (e) => handleChange(e), name: name, ref: ref, "aria-required": required, ...props, checked: !(checked === null || !checked) })] })] }));
+});
+ToggleCheckbox.displayName = 'ToggleCheckbox';
+
+export { ToggleCheckbox };

package/dist/ToggleCheckbox/index.js

@@ -1,4 +1,9 @@
-import { ToggleCheckbox as g } from "./ToggleCheckbox.js";
-export {
-  g as ToggleCheckbox
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ToggleCheckbox = require('./ToggleCheckbox.js');
+
+
+
+exports.ToggleCheckbox = ToggleCheckbox.ToggleCheckbox;

package/dist/ToggleCheckbox/index.mjs

@@ -0,0 +1 @@
+export { ToggleCheckbox } from './ToggleCheckbox.mjs';