@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/TextInputV2/index.js

@@ -1,289 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useId, useState, useMemo } from 'react';
-import { Button } from '../Button/index.js';
-import { Loader } from '../Loader/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const TEXTINPUT_SIZE_HEIGHT = {
-  large: 48,
-  medium: 40,
-  small: 32
-};
-const BasicPrefixStack = /*#__PURE__*/_styled(Stack, {
-  target: "e7tir8v5"
-})("padding:", ({
-  theme
-}) => theme.space['2'], ";border-right:1px solid;border-color:inherit;");
-const StateStack = /*#__PURE__*/_styled(Stack, {
-  target: "e7tir8v4"
-})("padding:", ({
-  theme
-}) => `0 ${theme.space['2']}`, ";");
-const BasicSuffixStack = /*#__PURE__*/_styled(Stack, {
-  target: "e7tir8v3"
-})("padding:", ({
-  theme
-}) => `0 ${theme.space['2']}`, ";border-left:1px solid;border-color:inherit;");
-const CTASuffixStack = /*#__PURE__*/_styled(Stack, {
-  target: "e7tir8v2"
-})("padding:", ({
-  theme
-}) => `0 ${theme.space['1']}`, ";border-left:1px solid;border-color:inherit;");
-const StyledInput = /*#__PURE__*/_styled('input', {
-  shouldForwardProp: prop => !['isSuccess', 'isError', 'isClearable'].includes(prop),
-  target: "e7tir8v1"
-})("flex:1;border:none;outline:none;height:100%;padding-left:", ({
-  theme
-}) => theme.space['2'], ";background:transparent;");
-const StyledInputWrapper = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['hasFocus', 'size'].includes(prop),
-  target: "e7tir8v0"
-})("display:flex;flex-direction:row;height:", ({
-  size
-}) => TEXTINPUT_SIZE_HEIGHT[size], "px;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";&>", StyledInput, "{color:", ({
-  theme
-}) => theme.colors.neutral.text, ";&::placeholder{color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";}}&[data-success='true']{border-color:", ({
-  theme
-}) => theme.colors.success.border, ";}&[data-error='true']{border-color:", ({
-  theme
-}) => theme.colors.danger.border, ";}&[data-readonly='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";}&[data-disabled='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";&>", StyledInput, "{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";&::placeholder{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakDisabled, ";}}}&:not([data-disabled='true']):not([data-readonly]):hover{border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";}", ({
-  theme,
-  hasFocus
-}) => hasFocus ? `
-  box-shadow: ${theme.shadows.focusPrimary};
-  border: 1px solid ${theme.colors.primary.border};
-` : null, ";");
-/**
- * This component offers an extended input HTML
- */
-const TextInputV2 = /*#__PURE__*/forwardRef(({
-  id,
-  className,
-  tabIndex,
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  readOnly = false,
-  success,
-  error,
-  helper,
-  tooltip,
-  label,
-  autoFocus,
-  required = false,
-  'data-testid': dataTestId,
-  name,
-  onFocus,
-  onBlur,
-  clearable = false,
-  labelDescription,
-  type = 'text',
-  prefix,
-  suffix,
-  size = 'large',
-  loading,
-  onRandomize,
-  minLength,
-  maxLength,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-label': ariaLabel,
-  autoComplete,
-  onKeyDown
-}, ref) => {
-  const localId = useId();
-  const [hasFocus, setHasFocus] = useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const computedType = type === 'password' && isPasswordVisible ? 'text' : type;
-  const sentiment = useMemo(() => {
-    if (error) {
-      return 'danger';
-    }
-    if (success) {
-      return 'success';
-    }
-    return 'neutral';
-  }, [error, success]);
-  const computedClearable = clearable && !!value;
-  return jsxs(Stack, {
-    gap: 0.5,
-    className: className,
-    children: [label || labelDescription ? jsxs(Stack, {
-      direction: "row",
-      gap: "1",
-      alignItems: "center",
-      children: [label ? jsxs(Stack, {
-        direction: "row",
-        gap: "0.5",
-        alignItems: "start",
-        children: [jsx(Text, {
-          as: "label",
-          variant: "bodyStrong",
-          sentiment: "neutral",
-          htmlFor: id ?? localId,
-          children: label
-        }), required ? jsx(Icon, {
-          name: "asterisk",
-          color: "danger",
-          size: 8
-        }) : null]
-      }) : null, labelDescription ?? null]
-    }) : null, jsx("div", {
-      children: jsx(Tooltip, {
-        text: tooltip,
-        children: jsxs(StyledInputWrapper, {
-          hasFocus: hasFocus,
-          "data-disabled": disabled,
-          "data-readonly": readOnly,
-          "data-success": !!success,
-          "data-error": !!error,
-          size: size,
-          children: [prefix ? jsx(BasicPrefixStack, {
-            direction: "row",
-            alignItems: "center",
-            children: typeof prefix === 'string' ? jsx(Text, {
-              as: "span",
-              sentiment: "neutral",
-              variant: "bodySmall",
-              disabled: disabled,
-              children: prefix
-            }) : prefix
-          }) : null, jsx(StyledInput, {
-            type: computedType,
-            "aria-invalid": !!error,
-            id: id ?? localId,
-            tabIndex: tabIndex,
-            autoFocus: autoFocus,
-            disabled: disabled,
-            ref: ref,
-            value: value === null || value === undefined ? '' : value,
-            onChange: event => {
-              onChange?.(event.currentTarget.value);
-            },
-            isSuccess: !!success,
-            isError: !!error,
-            isClearable: !!computedClearable,
-            placeholder: placeholder,
-            "data-testid": dataTestId,
-            name: name,
-            onFocus: event => {
-              setHasFocus(true);
-              onFocus?.(event);
-            },
-            onBlur: event => {
-              setHasFocus(false);
-              onBlur?.(event);
-            },
-            readOnly: readOnly,
-            minLength: minLength,
-            maxLength: maxLength,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-label": ariaLabel,
-            autoComplete: autoComplete,
-            required: required,
-            onKeyDown: onKeyDown
-          }), success || error || loading || computedClearable ? jsxs(StateStack, {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
-            children: [computedClearable ? jsx(Button, {
-              "aria-label": "clear value",
-              disabled: disabled || !value,
-              variant: "ghost",
-              size: size === 'small' ? 'xsmall' : 'small',
-              icon: "close",
-              onClick: () => {
-                onChange?.('');
-              },
-              sentiment: "neutral"
-            }) : null, success ? jsx(Icon, {
-              name: "checkbox-circle-outline",
-              color: "success",
-              size: 16,
-              disabled: disabled
-            }) : null, error ? jsx(Icon, {
-              name: "alert",
-              color: "danger",
-              size: 16,
-              disabled: disabled
-            }) : null, loading && !disabled ? jsx(Loader, {
-              active: true,
-              size: 16
-            }) : null]
-          }) : null, suffix ? jsx(BasicSuffixStack, {
-            direction: "row",
-            alignItems: "center",
-            children: typeof suffix === 'string' ? jsx(Text, {
-              as: "span",
-              sentiment: "neutral",
-              variant: "bodySmall",
-              disabled: disabled,
-              children: suffix
-            }) : suffix
-          }) : null, type === 'password' ? jsx(CTASuffixStack, {
-            direction: "row",
-            alignItems: "center",
-            children: jsx(Button, {
-              disabled: disabled,
-              "data-testid": dataTestId ? `${dataTestId}-visibility-button` : undefined,
-              "aria-label": isPasswordVisible ? 'hide' : 'show',
-              onClick: () => {
-                setIsPasswordVisible(!isPasswordVisible);
-              },
-              variant: "ghost",
-              sentiment: "neutral",
-              icon: isPasswordVisible ? 'eye-off' : 'eye',
-              size: size === 'small' ? 'xsmall' : 'small'
-            })
-          }) : null, onRandomize ? jsx(CTASuffixStack, {
-            direction: "row",
-            alignItems: "center",
-            children: jsx(Button, {
-              disabled: disabled,
-              icon: "auto-fix",
-              size: size === 'small' ? 'xsmall' : 'small',
-              variant: "ghost",
-              sentiment: "neutral",
-              onClick: onRandomize
-            })
-          }) : null]
-        })
-      })
-    }), error || typeof success === 'string' || typeof helper === 'string' ? jsx(Text, {
-      as: "p",
-      variant: "caption",
-      sentiment: sentiment,
-      prominence: !error && !success ? 'weak' : 'default',
-      disabled: disabled,
-      children: error || success || helper
-    }) : null, !error && !success && typeof helper !== 'string' && helper ? helper : null]
-  });
-});
-
-export { TEXTINPUT_SIZE_HEIGHT, TextInputV2 };

package/dist/src/components/TimeInput/index.js

@@ -1,37 +0,0 @@
-import { SelectInput } from '../SelectInput/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const hours = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
-const half = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'];
-const quarter = ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'];
-const schedules = {
-  half,
-  hours,
-  quarter
-};
-const options = schedule => schedules[schedule].map(hour => ({
-  label: hour,
-  value: hour
-}));
-const defaultValue = {
-  label: '00:00',
-  value: '00:00'
-};
-/**
- * A time input component that allows users to select a time from a dropdown. The component is built on top of the
- * `SelectInput` component.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
- */
-const TimeInput = ({
-  value = defaultValue,
-  schedule = 'hours',
-  ...props
-} = {}) => jsx(SelectInput, {
-  ...props,
-  time: true,
-  value: value,
-  options: options(schedule)
-});
-TimeInput.options = options;
-
-export { TimeInput, schedules };

package/dist/src/components/Toaster/index.js

@@ -1,131 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme, Global, ClassNames, css } from '@emotion/react';
-import { toast as toast$1, ToastContainer as ToastContainer$1, Slide } from 'react-toastify';
-import css_248z from '../../../react-toastify/dist/ReactToastify.min.css.js';
-import { Button } from '../Button/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const PREFIX = '.Toastify';
-const AUTOCLOSE_DELAY = 6000; // Delay to close the toast in ms
-
-const styles = {
-  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";min-height:52px;", PREFIX, "__toast-container{width:344px;}", PREFIX, "__toast-body{margin:0;padding:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.neutral.backgroundStronger, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--info{background-color:", theme.colors.info.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--warning{background-color:", theme.colors.warning.backgroundStrong, ";color:", theme.colors.warning.textStrong, ";padding:", theme.space['2'], ";}")
-};
-const StyledButton = /*#__PURE__*/_styled(Button, {
-  target: "e1eb63990"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nobnvq",
-  styles: "background:none;margin:auto;&:hover,&:active{background:none;}"
-} : {
-  name: "1nobnvq",
-  styles: "background:none;margin:auto;&:hover,&:active{background:none;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const CloseButton = ({
-  closeToast,
-  sentiment = 'success'
-}) => jsx(StyledButton, {
-  "aria-label": "close",
-  icon: "close",
-  onClick: closeToast,
-  sentiment: sentiment,
-  size: "xsmall"
-});
-const Content = ({
-  children
-}) => jsx(Stack, {
-  gap: 2,
-  direction: "row",
-  children: jsx(Text, {
-    variant: "bodySmallStrong",
-    as: "span",
-    children: children
-  })
-});
-const toast = {
-  error: (children, options, containerId) => toast$1.error(jsx(Content, {
-    children: children
-  }), {
-    ...options,
-    closeButton: jsx(CloseButton, {
-      sentiment: "danger"
-    }),
-    containerId: containerId ?? 'toaster'
-  }),
-  /**
-   * @deprecated "Deprecated, please use another variant instead"
-   */
-  info: (children, options, containerId) => toast$1.info(jsx(Content, {
-    children: children
-  }), {
-    ...options,
-    closeButton: jsx(CloseButton, {
-      sentiment: "info"
-    }),
-    containerId: containerId ?? 'toaster'
-  }),
-  success: (children, options, containerId) => toast$1.success(jsx(Content, {
-    children: children
-  }), {
-    ...options,
-    closeButton: jsx(CloseButton, {
-      sentiment: "success"
-    }),
-    containerId: containerId ?? 'toaster'
-  }),
-  warning: (children, options, containerId) => toast$1.warn(jsx(Content, {
-    children: children
-  }), {
-    ...options,
-    closeButton: jsx(CloseButton, {
-      sentiment: "warning"
-    }),
-    containerId: containerId ?? 'toaster'
-  })
-};
-/**
- * Display short information about an event that happen in the interface in a floating alert.
- * Toaster is based on **react-tostify**, you can find a complete documentation
- * [here](https://fkhadra.github.io/react-toastify/introduction/).
- *
- * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
- * and second the `toast()` function which is used to display the toast.
- */
-const ToastContainer = ({
-  newestOnTop,
-  limit,
-  position = 'top-right',
-  'data-testid': dataTestId,
-  className,
-  autoClose,
-  containerId = 'toaster'
-}) => {
-  const theme = useTheme();
-  return jsxs(Fragment, {
-    children: [jsx(Global, {
-      styles: css_248z
-    }), jsx(ClassNames, {
-      children: ({
-        css: localCss
-      }) => jsx(ToastContainer$1, {
-        "data-testid": dataTestId,
-        toastClassName: localCss(styles.toast(theme)),
-        autoClose: autoClose ?? AUTOCLOSE_DELAY,
-        icon: false,
-        newestOnTop: newestOnTop,
-        limit: limit,
-        position: position,
-        stacked: true,
-        hideProgressBar: true,
-        className: className,
-        transition: Slide,
-        containerId: containerId
-      })
-    })]
-  });
-};
-
-export { ToastContainer, toast };

package/dist/src/components/Toggle/index.js

@@ -1,160 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useState, useId, useCallback, useEffect } from 'react';
-import { Row } from '../Row/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const SIZES = {
-  large: {
-    ball: 16,
-    height: 24,
-    width: 48
-  },
-  small: {
-    ball: 12,
-    height: 20,
-    width: 40
-  }
-};
-const StyledToggle = /*#__PURE__*/_styled("div", {
-  target: "e1wstm612"
-})("box-sizing:content-box;outline:none;overflow:hidden;display:flex;align-items:center;border:none;border-radius:", ({
-  theme
-}) => theme.radii.xlarge, ";position:relative;transition:all 300ms;background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStrong, ";width:", ({
-  size
-}) => SIZES[size].width, "px;height:", ({
-  size
-}) => SIZES[size].height, "px;&:hover{background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStrongHover, ";}&:after{content:'';position:absolute;top:", ({
-  size
-}) => SIZES[size].height / 2 - SIZES[size].ball / 2, "px;left:5px;width:", ({
-  size
-}) => SIZES[size].ball, "px;height:", ({
-  size
-}) => SIZES[size].ball, "px;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", ({
-  theme
-}) => theme.shadows.focusNeutral, ";}&[data-disabled='false']:active:after{width:", ({
-  size
-}) => SIZES[size].ball * 1.3775, "px;}&[data-checked='true']{color:", ({
-  theme
-}) => theme.colors.neutral.textStrong, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";&:hover{background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongHover, ";}&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", ({
-  theme
-}) => theme.shadows.focusPrimary, ";}}&[data-disabled='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundStrongDisabled, ";&[data-checked='true']{background:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";}}");
-const StyledCheckbox = /*#__PURE__*/_styled("input", {
-  target: "e1wstm611"
-})(process.env.NODE_ENV === "production" ? {
-  name: "p9zju0",
-  styles: "position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;&[disabled]{cursor:not-allowed;}"
-} : {
-  name: "p9zju0",
-  styles: "position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;&[disabled]{cursor:not-allowed;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLabel = /*#__PURE__*/_styled("label", {
-  target: "e1wstm610"
-})("display:flex;gap:", ({
-  theme
-}) => theme.space['1'], ";align-items:start;width:fit-content;cursor:pointer;flex-direction:", ({
-  labelPosition
-}) => labelPosition === 'left' ? 'row' : 'row-reverse', ";&:active ", StyledToggle, "[data-disabled='false']:after{width:", ({
-  size
-}) => SIZES[size].ball * 1.3775, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";}");
-const RequiredIcon = () => jsx("sup", {
-  children: jsx(Icon, {
-    name: "asterisk",
-    size: 10,
-    color: "danger"
-  })
-});
-/**
- * Toggle component is used to toggle between two states (on/off, true/false, etc.).
- */
-const Toggle = /*#__PURE__*/forwardRef(({
-  checked = false,
-  disabled = false,
-  id,
-  name,
-  onChange,
-  size = 'large',
-  tooltip,
-  labelPosition = 'right',
-  label,
-  helper,
-  required,
-  className,
-  'data-testid': dataTestId,
-  value
-}, ref) => {
-  const [state, setState] = useState(checked);
-  const uniqueId = useId();
-  const onLocalChange = useCallback(event => {
-    if (onChange) onChange?.(event);else setState(event.target.checked);
-  }, [onChange, setState]);
-  useEffect(() => {
-    setState(checked);
-  }, [checked, setState]);
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsxs(StyledLabel, {
-      "aria-disabled": disabled,
-      size: size,
-      onClick: evt => evt.stopPropagation(),
-      className: className,
-      "data-testid": dataTestId,
-      labelPosition: labelPosition,
-      children: [jsxs(Stack, {
-        gap: 0.25,
-        alignItems: "baseline",
-        children: [label ? jsxs(Row, {
-          templateColumns: "auto 1fr",
-          gap: 1,
-          alignItems: "center",
-          children: [label, required ? jsx(RequiredIcon, {}) : null]
-        }) : null, helper ? jsx(Text, {
-          as: "p",
-          variant: "bodySmall",
-          prominence: "weak",
-          children: helper
-        }) : null]
-      }), jsx(StyledToggle, {
-        size: size,
-        "data-checked": state,
-        "data-disabled": disabled,
-        children: jsx(StyledCheckbox, {
-          id: id || uniqueId,
-          checked: state,
-          "aria-checked": state,
-          disabled: disabled,
-          name: name,
-          onChange: onLocalChange,
-          type: "checkbox",
-          ref: ref,
-          value: value
-        })
-      })]
-    })
-  });
-});
-
-export { SIZES, Toggle };