@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/TimePicker/TimePicker.mjs

@@ -1,111 +0,0 @@
-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,10 +0,0 @@
-'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

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

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,99 +0,0 @@
-'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%;
-`;
-const ToggleCheckboxWrapper = styled__default.default(Box.Box) `
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
-  // Masks the background of each value
-  overflow: hidden;
-  flex-wrap: wrap;
-
-  ${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, 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__default.default.input `
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-`;
-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) })] })] }));
-});
-ToggleCheckbox.displayName = 'ToggleCheckbox';
-
-exports.ToggleCheckbox = ToggleCheckbox;

package/dist/ToggleCheckbox/ToggleCheckbox.mjs

@@ -1,90 +0,0 @@
-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,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const ToggleCheckbox = require('./ToggleCheckbox.js');
-
-
-
-exports.ToggleCheckbox = ToggleCheckbox.ToggleCheckbox;

package/dist/ToggleCheckbox/index.mjs

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

package/dist/ToggleInput/ToggleInput.js

@@ -1,96 +0,0 @@
-'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 useControllableState = require('../hooks/useControllableState.js');
-const useId = require('../hooks/useId.js');
-const FieldContext = require('../Field/FieldContext.js');
-const Typography = require('../Typography/Typography.js');
-const Flex = require('../Flex/Flex.js');
-const utils = require('../themes/utils.js');
-const Field = require('../Field/Field.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-const TextButton = require('../TextButton/TextButton.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);
-
-/**
- * TODO: This should probably follow the switch button pattern
- * as seen – https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-button/
- */
-const ToggleInputInput = React__namespace.forwardRef(({ offLabel, onLabel, disabled, checked: checkedProp, onChange, size = 'M', ...props }, forwardedRef) => {
-    const [checked = false, setChecked] = useControllableState.useControllableState({
-        prop: checkedProp,
-    });
-    const { error, id, name, required } = FieldContext.useField();
-    const isFalseyChecked = checked !== null && !checked;
-    const hintId = `${id}-hint`;
-    const errorId = `${id}-error`;
-    return (jsxRuntime.jsxs(ToggleWrapper, { position: "relative", hasRadius: true, padding: 1, background: disabled ? 'neutral150' : 'neutral100', borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: disabled ? 'not-allowed' : 'pointer', hasError: Boolean(error), children: [jsxRuntime.jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && isFalseyChecked ? 'neutral200' : isFalseyChecked ? 'neutral0' : 'transparent', borderColor: disabled && isFalseyChecked
-                    ? 'neutral300'
-                    : isFalseyChecked
-                        ? 'neutral200'
-                        : disabled
-                            ? 'neutral150'
-                            : 'neutral100', size: size, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : isFalseyChecked ? 'danger700' : 'neutral600', children: offLabel }) }), jsxRuntime.jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && checked ? 'neutral200' : checked ? 'neutral0' : 'transparent', borderColor: disabled && checked ? 'neutral300' : checked ? 'neutral200' : disabled ? 'neutral150' : 'neutral100', size: size, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : checked ? 'primary600' : 'neutral600', children: onLabel }) }), jsxRuntime.jsx(Input, { ...props, ref: forwardedRef, onChange: (e) => {
-                    setChecked(e.currentTarget.checked);
-                    onChange?.(e);
-                }, type: "checkbox", id: id, name: name, "aria-required": required, disabled: disabled, "aria-disabled": disabled, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, checked: Boolean(checked) })] }));
-});
-const ToggleWrapper = styled__default.default(Flex.Flex) `
-  ${utils.inputFocusStyle()}
-`;
-const ToggleOption = styled__default.default(Flex.Flex) `
-  /**
-    We declare the defined value because we want the height of the input when 
-    the values are in a row to be 40px. But defining a height on the label
-    would break the input when it wraps.
-  */
-  padding-top: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
-  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
-`;
-const Input = styled__default.default.input `
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  width: 100%;
-`;
-const ToggleInput = React__namespace.forwardRef(({ disabled = false, error, hint, label, name, labelAction, required = false, id, onClear, clearLabel, checked, ...props }, forwardedRef) => {
-    const generatedId = useId.useId(id);
-    return (jsxRuntime.jsx(Field.Field, { name: name, hint: hint, error: error, id: generatedId, required: required, maxWidth: "320px", children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsxs(Flex.Flex, { children: [label ? jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }) : null, clearLabel && onClear && checked !== null && !disabled && (jsxRuntime.jsx(ClearButton, { onClick: onClear, children: clearLabel }))] }), jsxRuntime.jsx(ToggleInputInput, { ref: forwardedRef, checked: checked, disabled: disabled, ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-const ClearButton = styled__default.default(TextButton.TextButton) `
-  align-self: flex-end;
-  margin-left: auto;
-`;
-
-exports.ToggleInput = ToggleInput;

package/dist/ToggleInput/ToggleInput.mjs

@@ -1,69 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled from 'styled-components';
-import { useControllableState } from '../hooks/useControllableState.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { useField } from '../Field/FieldContext.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { inputFocusStyle } from '../themes/utils.mjs';
-import { Field } from '../Field/Field.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-import { TextButton } from '../TextButton/TextButton.mjs';
-
-/**
- * TODO: This should probably follow the switch button pattern
- * as seen – https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-button/
- */
-const ToggleInputInput = React.forwardRef(({ offLabel, onLabel, disabled, checked: checkedProp, onChange, size = 'M', ...props }, forwardedRef) => {
-    const [checked = false, setChecked] = useControllableState({
-        prop: checkedProp,
-    });
-    const { error, id, name, required } = useField();
-    const isFalseyChecked = checked !== null && !checked;
-    const hintId = `${id}-hint`;
-    const errorId = `${id}-error`;
-    return (jsxs(ToggleWrapper, { position: "relative", hasRadius: true, padding: 1, background: disabled ? 'neutral150' : 'neutral100', borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: disabled ? 'not-allowed' : 'pointer', hasError: Boolean(error), children: [jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && isFalseyChecked ? 'neutral200' : isFalseyChecked ? 'neutral0' : 'transparent', borderColor: disabled && isFalseyChecked
-                    ? 'neutral300'
-                    : isFalseyChecked
-                        ? 'neutral200'
-                        : disabled
-                            ? 'neutral150'
-                            : 'neutral100', size: size, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : isFalseyChecked ? 'danger700' : 'neutral600', children: offLabel }) }), jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && checked ? 'neutral200' : checked ? 'neutral0' : 'transparent', borderColor: disabled && checked ? 'neutral300' : checked ? 'neutral200' : disabled ? 'neutral150' : 'neutral100', size: size, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : checked ? 'primary600' : 'neutral600', children: onLabel }) }), jsx(Input, { ...props, ref: forwardedRef, onChange: (e) => {
-                    setChecked(e.currentTarget.checked);
-                    onChange?.(e);
-                }, type: "checkbox", id: id, name: name, "aria-required": required, disabled: disabled, "aria-disabled": disabled, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, checked: Boolean(checked) })] }));
-});
-const ToggleWrapper = styled(Flex) `
-  ${inputFocusStyle()}
-`;
-const ToggleOption = styled(Flex) `
-  /**
-    We declare the defined value because we want the height of the input when 
-    the values are in a row to be 40px. But defining a height on the label
-    would break the input when it wraps.
-  */
-  padding-top: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
-  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
-`;
-const Input = styled.input `
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  width: 100%;
-`;
-const ToggleInput = React.forwardRef(({ disabled = false, error, hint, label, name, labelAction, required = false, id, onClear, clearLabel, checked, ...props }, forwardedRef) => {
-    const generatedId = useId(id);
-    return (jsx(Field, { name: name, hint: hint, error: error, id: generatedId, required: required, maxWidth: "320px", children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxs(Flex, { children: [label ? jsx(FieldLabel, { action: labelAction, children: label }) : null, clearLabel && onClear && checked !== null && !disabled && (jsx(ClearButton, { onClick: onClear, children: clearLabel }))] }), jsx(ToggleInputInput, { ref: forwardedRef, checked: checked, disabled: disabled, ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-const ClearButton = styled(TextButton) `
-  align-self: flex-end;
-  margin-left: auto;
-`;
-
-export { ToggleInput };

package/dist/ToggleInput/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const ToggleInput = require('./ToggleInput.js');
-
-
-
-exports.ToggleInput = ToggleInput.ToggleInput;

package/dist/ToggleInput/index.mjs

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

package/dist/Tooltip/Tooltip.js

@@ -1,58 +0,0 @@
-'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 useTooltipHandlers = require('./hooks/useTooltipHandlers.js');
-const useTooltipLayout = require('./hooks/useTooltipLayout.js');
-const useId = require('../hooks/useId.js');
-const Portal = require('../Portal/Portal.js');
-const Box = require('../Box/Box.js');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const Typography = require('../Typography/Typography.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 TooltipWrapper = styled__default.default(Box.Box) `
-  /* z-index exist because of its position inside Modals */
-  z-index: 4;
-  display: ${({ visible }) => (visible ? 'revert' : 'none')};
-`;
-const Tooltip = ({ children, label, description, delay = 500, position = 'top', id, ...props }) => {
-    const tooltipId = useId.useId(id);
-    const descriptionId = useId.useId();
-    const { visible, ...tooltipHandlers } = useTooltipHandlers.useTooltipHandlers(delay);
-    const { tooltipWrapperRef, toggleSourceRef } = useTooltipLayout.useTooltipLayout(visible, position);
-    const childrenClone = React__namespace.cloneElement(children, {
-        tabIndex: 0,
-        'aria-labelledby': label ? tooltipId : undefined,
-        'aria-describedby': description ? tooltipId : undefined,
-        ...tooltipHandlers,
-    });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsxs(TooltipWrapper, { id: tooltipId, background: "neutral900", hasRadius: true, padding: 2, role: "tooltip", ref: tooltipWrapperRef, visible: visible, position: "absolute", ...props, children: [visible && jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { id: descriptionId, children: description }), jsxRuntime.jsx(Typography.Typography, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: label || description })] }) }), jsxRuntime.jsx("span", { ref: toggleSourceRef, children: childrenClone })] }));
-};
-
-exports.Tooltip = Tooltip;

package/dist/Tooltip/Tooltip.mjs

@@ -1,31 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled from 'styled-components';
-import { useTooltipHandlers } from './hooks/useTooltipHandlers.mjs';
-import { useTooltipLayout } from './hooks/useTooltipLayout.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { Portal } from '../Portal/Portal.mjs';
-import { Box } from '../Box/Box.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const TooltipWrapper = styled(Box) `
-  /* z-index exist because of its position inside Modals */
-  z-index: 4;
-  display: ${({ visible }) => (visible ? 'revert' : 'none')};
-`;
-const Tooltip = ({ children, label, description, delay = 500, position = 'top', id, ...props }) => {
-    const tooltipId = useId(id);
-    const descriptionId = useId();
-    const { visible, ...tooltipHandlers } = useTooltipHandlers(delay);
-    const { tooltipWrapperRef, toggleSourceRef } = useTooltipLayout(visible, position);
-    const childrenClone = React.cloneElement(children, {
-        tabIndex: 0,
-        'aria-labelledby': label ? tooltipId : undefined,
-        'aria-describedby': description ? tooltipId : undefined,
-        ...tooltipHandlers,
-    });
-    return (jsxs(Fragment, { children: [jsx(Portal, { children: jsxs(TooltipWrapper, { id: tooltipId, background: "neutral900", hasRadius: true, padding: 2, role: "tooltip", ref: tooltipWrapperRef, visible: visible, position: "absolute", ...props, children: [visible && jsx(VisuallyHidden, { id: descriptionId, children: description }), jsx(Typography, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: label || description })] }) }), jsx("span", { ref: toggleSourceRef, children: childrenClone })] }));
-};
-
-export { Tooltip };

package/dist/Tooltip/hooks/useTooltipHandlers.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const useTooltipHandlers = (delay) => {
-    const [visible, setVisible] = React.useState(false);
-    const timerRef = React.useRef(null);
-    const clearTimer = () => {
-        if (typeof timerRef.current === 'number') {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        }
-    };
-    React.useEffect(() => {
-        return () => {
-            clearTimer();
-        };
-    }, []);
-    const onFocus = () => {
-        setVisible(true);
-    };
-    const onBlur = () => {
-        setVisible(false);
-    };
-    const onMouseEnter = () => {
-        timerRef.current = setTimeout(() => {
-            setVisible(true);
-        }, delay);
-    };
-    const onMouseLeave = () => {
-        clearTimer();
-        setVisible(false);
-    };
-    return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
-};
-
-exports.useTooltipHandlers = useTooltipHandlers;