@onesy/ui-react 1.0.130 → 1.0.131

package/Checkbox/Checkbox.js

@@ -1,334 +1,348 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Buttons_1 = require("../Buttons/Buttons");
-const utils_2 = require("../utils");
-const Icon_1 = __importDefault(require("../Icon"));
-const IconMaterialIndeterminateCheckBox = react_1.default.forwardRef((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ ref: ref, name: 'IndeterminateCheckBox', short_name: 'IndeterminateCheckBox' }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: 'M7 13H17V11H7V13Z' }) })));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        '& *': {
-            boxSizing: 'border-box'
-        }
-    },
-    input: {
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
-        opacity: '0',
-        cursor: 'inherit',
-        zIndex: '1'
-    },
-    icon: {
-        zIndex: '1',
-        pointerEvents: 'none'
-    },
-    iconBox: {
-        width: '1em',
-        height: '1em',
-        border: '0.125em solid currentColor',
-        background: 'transparent',
-        transition: theme.methods.transitions.make('background', { duration: 0, delay: 'xxs' }),
-        borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.11em)`
-    },
-    iconBox_checked: {
-        background: 'currentColor',
-        transition: theme.methods.transitions.make('background', { duration: 0 })
-    },
-    iconBox_checked_version_filled: {
-        border: 'none'
-    },
-    iconBox_checked_version_outlined: {
-        border: 'none'
-    },
-    iconBox_checked_disabled: {
-        background: 'currentColor',
-        border: 'none'
-    },
-    iconBox_indeterminate: {
-        background: 'currentColor',
-        transition: theme.methods.transitions.make('background', { duration: 0 })
-    },
-    iconBox_indeterminate_version_filled: {
-        border: 'none'
-    },
-    iconBox_indeterminate_version_outlined: {
-        border: 'none'
-    },
-    iconBox_indeterminate_disabled: {
-        background: 'currentColor',
-        border: 'none'
-    },
-    iconItem: {
-        position: 'absolute',
-        width: 'calc(100% - 0.3em)',
-        height: 'calc(100% - 0.3em)',
-        insetInline: '0',
-        insetInlineStart: '0.16em',
-        top: '0.15em',
-        zIndex: '2',
-        pointerEvents: 'none',
-        '&::before': {
-            content: "''",
-            display: 'inline-flex',
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            inset: '0',
-            background: 'currentColor',
-            transform: 'scale(1)',
-            opacity: '0',
-            transition: `${theme.methods.transitions.make('transform', { duration: 'xxs' })}, ${theme.methods.transitions.make('opacity', { duration: 0, delay: 'xxs' })}`
-        }
-    },
-    iconItem_checked: {
-        '&::before': {
-            transform: 'scale(0)',
-            opacity: '1',
-            transition: `${theme.methods.transitions.make('transform', { duration: 'xxs' })}, ${theme.methods.transitions.make('opacity', { duration: 0 })}`
-        }
-    },
-    'iconItem_checked_disabled': {
-        '&::before': {
-            display: 'none'
-        }
-    },
-    iconItem_indeterminate: {
-        '&::before': {
-            transform: 'scale(0)',
-            opacity: '1',
-            transition: `${theme.methods.transitions.make('transform', { duration: 'xxs' })}, ${theme.methods.transitions.make('opacity', { duration: 0 })}`
-        }
-    },
-    iconDone: {
-        display: 'inline-flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'absolute',
-        inset: '0',
-        width: '100% !important',
-        height: '100%',
-        zIndex: '3',
-        '&:not($indeterminate) > svg': {
-            padding: '0.14em'
-        }
-    },
-    disabled: {
-        cursor: 'default'
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Buttons = require("../Buttons/Buttons");
+var _utils2 = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+const _excluded = ["noFontSizeDownScale", "size", "Component", "className", "style", "children"],
+  _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const IconMaterialIndeterminateCheckBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    ref: ref,
+    name: "IndeterminateCheckBox",
+    short_name: "IndeterminateCheckBox"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 13H17V11H7V13Z"
+  }));
+});
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      boxSizing: 'border-box'
+    }
+  },
+  input: {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    opacity: '0',
+    cursor: 'inherit',
+    zIndex: '1'
+  },
+  icon: {
+    zIndex: '1',
+    pointerEvents: 'none'
+  },
+  iconBox: {
+    width: '1em',
+    height: '1em',
+    border: '0.125em solid currentColor',
+    background: 'transparent',
+    transition: theme.methods.transitions.make('background', {
+      duration: 0,
+      delay: 'xxs'
+    }),
+    borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.11em)`
+  },
+  iconBox_checked: {
+    background: 'currentColor',
+    transition: theme.methods.transitions.make('background', {
+      duration: 0
+    })
+  },
+  iconBox_checked_version_filled: {
+    border: 'none'
+  },
+  iconBox_checked_version_outlined: {
+    border: 'none'
+  },
+  iconBox_checked_disabled: {
+    background: 'currentColor',
+    border: 'none'
+  },
+  iconBox_indeterminate: {
+    background: 'currentColor',
+    transition: theme.methods.transitions.make('background', {
+      duration: 0
+    })
+  },
+  iconBox_indeterminate_version_filled: {
+    border: 'none'
+  },
+  iconBox_indeterminate_version_outlined: {
+    border: 'none'
+  },
+  iconBox_indeterminate_disabled: {
+    background: 'currentColor',
+    border: 'none'
+  },
+  iconItem: {
+    position: 'absolute',
+    width: 'calc(100% - 0.3em)',
+    height: 'calc(100% - 0.3em)',
+    insetInline: '0',
+    insetInlineStart: '0.16em',
+    top: '0.15em',
+    zIndex: '2',
+    pointerEvents: 'none',
+    '&::before': {
+      content: "''",
+      display: 'inline-flex',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      inset: '0',
+      background: 'currentColor',
+      transform: 'scale(1)',
+      opacity: '0',
+      transition: `${theme.methods.transitions.make('transform', {
+        duration: 'xxs'
+      })}, ${theme.methods.transitions.make('opacity', {
+        duration: 0,
+        delay: 'xxs'
+      })}`
+    }
+  },
+  iconItem_checked: {
+    '&::before': {
+      transform: 'scale(0)',
+      opacity: '1',
+      transition: `${theme.methods.transitions.make('transform', {
+        duration: 'xxs'
+      })}, ${theme.methods.transitions.make('opacity', {
+        duration: 0
+      })}`
+    }
+  },
+  'iconItem_checked_disabled': {
+    '&::before': {
+      display: 'none'
     }
-}), { name: 'onesy-Checkbox' });
-const IconItem = (props) => {
-    const { noFontSizeDownScale, size, Component = 'span', className, style, children } = props, other = __rest(props, ["noFontSizeDownScale", "size", "Component", "className", "style", "children"]);
-    const styles = {
-        root: {}
-    };
-    let fontSize = '1.5rem';
-    if (size === 'very small')
-        fontSize = '0.75rem';
-    else if (size === 'small')
-        fontSize = '1.125rem';
-    else if (size === 'regular')
-        fontSize = '1.5rem';
-    else if (size === 'medium')
-        fontSize = '2.25rem';
-    else if (size === 'large')
-        fontSize = '3rem';
-    else if (size === 'very large')
-        fontSize = '3.75rem';
-    else if (size !== undefined)
-        fontSize = `${size}${!String(size).includes('px') ? 'px' : ''}`;
-    styles.root.fontSize = `calc(${fontSize} * 0.75)`;
-    if (noFontSizeDownScale)
-        styles.root.fontSize = fontSize;
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: className, style: Object.assign(Object.assign({}, style), styles.root) }, { children: children && react_1.default.cloneElement(children, Object.assign({}, other)) })));
+  },
+  iconItem_indeterminate: {
+    '&::before': {
+      transform: 'scale(0)',
+      opacity: '1',
+      transition: `${theme.methods.transitions.make('transform', {
+        duration: 'xxs'
+      })}, ${theme.methods.transitions.make('opacity', {
+        duration: 0
+      })}`
+    }
+  },
+  iconDone: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    inset: '0',
+    width: '100% !important',
+    height: '100%',
+    zIndex: '3',
+    '&:not($indeterminate) > svg': {
+      padding: '0.14em'
+    }
+  },
+  disabled: {
+    cursor: 'default'
+  }
+}), {
+  name: 'onesy-Checkbox'
+});
+const IconItem = props => {
+  const {
+      noFontSizeDownScale,
+      size,
+      Component = 'span',
+      className,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const styles = {
+    root: {}
+  };
+  let fontSize = '1.5rem';
+  if (size === 'very small') fontSize = '0.75rem';else if (size === 'small') fontSize = '1.125rem';else if (size === 'regular') fontSize = '1.5rem';else if (size === 'medium') fontSize = '2.25rem';else if (size === 'large') fontSize = '3rem';else if (size === 'very large') fontSize = '3.75rem';else if (size !== undefined) fontSize = `${size}${!String(size).includes('px') ? 'px' : ''}`;
+  styles.root.fontSize = `calc(${fontSize} * 0.75)`;
+  if (noFontSizeDownScale) styles.root.fontSize = fontSize;
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    className: className,
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({}, other)));
 };
-const Checkbox = react_1.default.forwardRef((props_, ref) => {
-    var _a, _b;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d; return (Object.assign(Object.assign({}, props_), (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.onesyCheckbox) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default)); }, [props_]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'text', size = 'regular', colorIndeterminate = props.color || 'primary', colorUnchecked = 'default', valueDefault: valueDefault_, checkedDefault: checkedDefault_, value: value_, checked: checked_, onChange, indeterminate: indeterminate_, disabled, inputRef, Component = 'span', className, children } = props, other = __rest(props, ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
-    const checked = value_ !== undefined ? value_ : checked_;
-    const [value, setValue] = react_1.default.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
-    const [indeterminate, setIndeterminate] = react_1.default.useState(!value && indeterminate_);
-    const refs = {
-        value: react_1.default.useRef(undefined),
-        input: react_1.default.useRef(undefined),
-        indeterminate: react_1.default.useRef(undefined)
-    };
-    refs.value.current = value;
-    refs.indeterminate.current = indeterminate;
-    const styles = {
-        iconItem: {},
-        iconBox: {},
-        iconDone: {}
-    };
-    react_1.default.useEffect(() => {
-        if (indeterminate_ !== undefined && indeterminate_ !== refs.indeterminate.current) {
-            setIndeterminate(indeterminate_);
-            if (indeterminate_)
-                setValue(false);
-        }
-    }, [indeterminate_]);
-    react_1.default.useEffect(() => {
-        if (checked !== undefined && checked !== refs.value.current) {
-            setValue(checked);
-            if (refs.indeterminate.current)
-                setIndeterminate(false);
-        }
-    }, [checked]);
-    const onUpdate = (event) => {
-        if (!disabled) {
-            // Inner controlled value
-            if (!props.hasOwnProperty('checked')) {
-                setValue(event.target.checked);
-                if (indeterminate)
-                    setIndeterminate(false);
-            }
-            if ((0, utils_1.is)('function', onChange))
-                onChange(event.target.checked, event);
-        }
-    };
-    const onKeyDown = (event) => {
-        switch (event.key) {
-            case 'Enter':
-                if (refs.input.current)
-                    refs.input.current.click();
-                break;
-            default:
-                break;
-        }
-    };
-    const color_ = indeterminate ? colorIndeterminate : color;
-    let palette;
-    if (!theme.palette.color[color])
-        palette = theme.methods.color(color_);
-    if (tonal) {
-        // Text
-        // Outlined
-        if (['text', 'outlined', undefined].includes(version)) {
-            styles.iconBox.color = theme.methods.palette.color.value(color_, 30, true, palette);
-            styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
-        }
-        // Outlined
-        if (version === 'outlined')
-            styles.iconBox.color = theme.methods.palette.color.value(color_, 40, true, palette);
-        // Filled
-        if (version === 'filled')
-            styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
+const Checkbox = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui;
+    return _objectSpread(_objectSpread({}, props_), theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.onesyCheckbox) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default);
+  }, [props_]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.IconButton) || _IconButton.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'text',
+      size = 'regular',
+      colorIndeterminate = props.color || 'primary',
+      colorUnchecked = 'default',
+      valueDefault: valueDefault_,
+      checkedDefault: checkedDefault_,
+      value: value_,
+      checked: checked_,
+      onChange,
+      indeterminate: indeterminate_,
+      disabled,
+      inputRef,
+      Component = 'span',
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  const {
+    classes
+  } = useStyle();
+  const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
+  const checked = value_ !== undefined ? value_ : checked_;
+  const [value, setValue] = _react.default.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
+  const [indeterminate, setIndeterminate] = _react.default.useState(!value && indeterminate_);
+  const refs = {
+    value: _react.default.useRef(undefined),
+    input: _react.default.useRef(undefined),
+    indeterminate: _react.default.useRef(undefined)
+  };
+  refs.value.current = value;
+  refs.indeterminate.current = indeterminate;
+  const styles = {
+    iconItem: {},
+    iconBox: {},
+    iconDone: {}
+  };
+  _react.default.useEffect(() => {
+    if (indeterminate_ !== undefined && indeterminate_ !== refs.indeterminate.current) {
+      setIndeterminate(indeterminate_);
+      if (indeterminate_) setValue(false);
     }
-    else {
-        if (!theme.palette.light && disabled)
-            styles.iconDone.color = theme.palette.background.default.primary;
-        else {
-            if (version === 'filled')
-                styles.iconDone.color = (_a = (palette || theme.palette.color[color_])) === null || _a === void 0 ? void 0 : _a.main;
-            else
-                styles.iconDone.color = theme.methods.palette.color.text(color_ === 'default' ? theme.palette.text.default.primary : (_b = (palette || theme.palette.color[color_])) === null || _b === void 0 ? void 0 : _b.main, true, 'light');
-        }
+  }, [indeterminate_]);
+  _react.default.useEffect(() => {
+    if (checked !== undefined && checked !== refs.value.current) {
+      setValue(checked);
+      if (refs.indeterminate.current) setIndeterminate(false);
+    }
+  }, [checked]);
+  const onUpdate = event => {
+    if (!disabled) {
+      // Inner controlled value
+      if (!props.hasOwnProperty('checked')) {
+        setValue(event.target.checked);
+        if (indeterminate) setIndeterminate(false);
+      }
+      if ((0, _utils.is)('function', onChange)) onChange(event.target.checked, event);
     }
-    if (['text', 'filled', undefined].includes(version)) {
-        if (['default', 'inherit', 'inverted', 'themed'].includes(color_))
-            styles.iconDone.color = theme.palette.background.default.primary;
+  };
+  const onKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+        if (refs.input.current) refs.input.current.click();
+        break;
+      default:
+        break;
     }
-    styles.iconItem.color = styles.iconDone.color;
-    if (['text', 'outlined', undefined].includes(version))
-        styles.iconItem.color = theme.palette.background.default.primary;
-    let colorValue = color;
-    if (!value && tonal)
-        colorValue = colorUnchecked;
-    if (indeterminate)
-        colorValue = colorIndeterminate;
-    return ((0, jsx_runtime_1.jsxs)(IconButton, Object.assign({ ref: ref, tabIndex: !disabled ? 0 : -1, color: colorValue, tonal: tonal, version: version, size: size, onKeyDown: onKeyDown, firstLevelChildren: ((0, jsx_runtime_1.jsx)("input", { ref: item => {
-                if (inputRef) {
-                    if ((0, utils_1.is)('function', inputRef))
-                        inputRef(item);
-                    else
-                        inputRef.current = item;
-                }
-                refs.input.current = item;
-            }, tabIndex: -1, type: 'checkbox', checked: value, onChange: onUpdate, className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('Checkbox', theme) && [
-                    'onesy-Checkbox-input'
-                ],
-                classes.input
-            ]), disabled: disabled })), role: 'checkbox', "aria-checked": indeterminate ? 'mixed' : value, "aria-disabled": disabled, disabled: disabled, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Checkbox', theme) && [
-                'onesy-Checkbox-root',
-                `onesy-Checkbox-version-${version}`,
-                `onesy-Checkbox-size-${size}`,
-                value && `onesy-Checkbox-checked`,
-                disabled && `onesy-Checkbox-disabled`
-            ],
-            className,
-            classes.root,
-            disabled && classes.disabled
-        ]) }, other, { children: [(0, jsx_runtime_1.jsx)(IconItem, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Checkbox', theme) && [
-                        'onesy-Checkbox-icon-item'
-                    ],
-                    classes.iconItem,
-                    value && classes.iconItem_checked,
-                    indeterminate && classes.iconItem_indeterminate,
-                    (value && disabled) && classes.iconItem_checked_disabled
-                ]), style: styles.iconItem }), (0, jsx_runtime_1.jsx)(IconItem, { Component: 'div', className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Checkbox', theme) && [
-                        'onesy-Checkbox-icon-box'
-                    ],
-                    classes.icon,
-                    classes.iconBox,
-                    value && [
-                        classes.iconBox_checked,
-                        classes[`iconBox_checked_version_${version}`]
-                    ],
-                    indeterminate && [
-                        classes.iconBox_indeterminate,
-                        classes[`iconBox_indeterminate_version_${version}`]
-                    ],
-                    disabled && [
-                        value && classes.iconBox_checked_disabled,
-                        indeterminate && classes.iconBox_indeterminate_disabled,
-                    ]
-                ]), style: styles.iconBox }), indeterminate && ((0, jsx_runtime_1.jsx)(IconItem, Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Checkbox', theme) && [
-                        'onesy-Checkbox-icon',
-                        'onesy-Checkbox-icon-indeterminate'
-                    ],
-                    classes.icon,
-                    classes.iconDone,
-                    indeterminate && classes.indeterminate
-                ]), style: styles.iconDone, noFontSizeDownScale: true }, { children: (0, jsx_runtime_1.jsx)(IconMaterialIndeterminateCheckBox, { size: 'inherit' }) }))), value && ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Checkbox', theme) && [
-                        'onesy-Checkbox-icon',
-                        'onesy-Checkbox-icon-done'
-                    ],
-                    classes.icon,
-                    classes.iconDone
-                ]), style: styles.iconDone, in: value, add: true }))] })));
+  };
+  const color_ = indeterminate ? colorIndeterminate : color;
+  let palette;
+  if (!theme.palette.color[color]) palette = theme.methods.color(color_);
+  if (tonal) {
+    // Text
+    // Outlined
+    if (['text', 'outlined', undefined].includes(version)) {
+      styles.iconBox.color = theme.methods.palette.color.value(color_, 30, true, palette);
+      styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
+    }
+
+    // Outlined
+    if (version === 'outlined') styles.iconBox.color = theme.methods.palette.color.value(color_, 40, true, palette);
+
+    // Filled
+    if (version === 'filled') styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
+  } else {
+    if (!theme.palette.light && disabled) styles.iconDone.color = theme.palette.background.default.primary;else {
+      var _ref, _ref2;
+      if (version === 'filled') styles.iconDone.color = (_ref = palette || theme.palette.color[color_]) === null || _ref === void 0 ? void 0 : _ref.main;else styles.iconDone.color = theme.methods.palette.color.text(color_ === 'default' ? theme.palette.text.default.primary : (_ref2 = palette || theme.palette.color[color_]) === null || _ref2 === void 0 ? void 0 : _ref2.main, true, 'light');
+    }
+  }
+  if (['text', 'filled', undefined].includes(version)) {
+    if (['default', 'inherit', 'inverted', 'themed'].includes(color_)) styles.iconDone.color = theme.palette.background.default.primary;
+  }
+  styles.iconItem.color = styles.iconDone.color;
+  if (['text', 'outlined', undefined].includes(version)) styles.iconItem.color = theme.palette.background.default.primary;
+  let colorValue = color;
+  if (!value && tonal) colorValue = colorUnchecked;
+  if (indeterminate) colorValue = colorIndeterminate;
+  return /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    ref: ref,
+    tabIndex: !disabled ? 0 : -1,
+    color: colorValue,
+    tonal: tonal,
+    version: version,
+    size: size,
+    onKeyDown: onKeyDown,
+    firstLevelChildren: /*#__PURE__*/_react.default.createElement("input", {
+      ref: item => {
+        if (inputRef) {
+          if ((0, _utils.is)('function', inputRef)) inputRef(item);else inputRef.current = item;
+        }
+        refs.input.current = item;
+      },
+      tabIndex: -1,
+      type: "checkbox",
+      checked: value,
+      onChange: onUpdate,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-input'], classes.input]),
+      disabled: disabled
+    }),
+    role: "checkbox",
+    "aria-checked": indeterminate ? 'mixed' : value,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
+  }, other), /*#__PURE__*/_react.default.createElement(IconItem, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon-item'], classes.iconItem, value && classes.iconItem_checked, indeterminate && classes.iconItem_indeterminate, value && disabled && classes.iconItem_checked_disabled]),
+    style: styles.iconItem
+  }), /*#__PURE__*/_react.default.createElement(IconItem, {
+    Component: "div",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon-box'], classes.icon, classes.iconBox, value && [classes.iconBox_checked, classes[`iconBox_checked_version_${version}`]], indeterminate && [classes.iconBox_indeterminate, classes[`iconBox_indeterminate_version_${version}`]], disabled && [value && classes.iconBox_checked_disabled, indeterminate && classes.iconBox_indeterminate_disabled]]),
+    style: styles.iconBox
+  }), indeterminate && /*#__PURE__*/_react.default.createElement(IconItem, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
+    style: styles.iconDone,
+    noFontSizeDownScale: true
+  }, /*#__PURE__*/_react.default.createElement(IconMaterialIndeterminateCheckBox, {
+    size: "inherit"
+  })), value && /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-done'], classes.icon, classes.iconDone]),
+    style: styles.iconDone,
+    in: value,
+    add: true
+  }));
 });
 Checkbox.displayName = 'onesy-Checkbox';
-exports.default = Checkbox;
+var _default = exports.default = Checkbox;