@onesy/ui-react 1.0.130 → 1.0.131

package/Switch/Switch.js

@@ -1,544 +1,700 @@
 "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 Keyframes_1 = __importDefault(require("../Keyframes"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        display: 'inline-flex',
-        cursor: 'pointer',
-        transition: theme.methods.transitions.make('box-shadow'),
-        '&:focus-visible': {
-            boxShadow: `0px 0px 0px 1px ${theme.palette.text.default.primary}`
-        }
-    },
-    input: {
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
-        opacity: '0',
-        cursor: 'inherit',
-        zIndex: '1'
-    },
-    // Color
-    color_default: { color: theme.palette.text.default.primary },
-    color_themed: { color: theme.palette.text.default.primary },
-    color_inverted: { color: theme.palette.background.default.primary },
-    color_neutral: { color: theme.palette.color.neutral.main },
-    color_primary: { color: theme.palette.color.primary.main },
-    color_secondary: { color: theme.palette.color.secondary.main },
-    color_tertiary: { color: theme.palette.color.tertiary.main },
-    color_quaternary: { color: theme.palette.color.quaternary.main },
-    color_info: { color: theme.palette.color.info.main },
-    color_success: { color: theme.palette.color.success.main },
-    color_warning: { color: theme.palette.color.warning.main },
-    color_error: { color: theme.palette.color.error.main },
-    // Tonal
-    tonal_color_neutral: { color: theme.methods.palette.color.value('neutral', 60) },
-    tonal_color_primary: { color: theme.methods.palette.color.value('primary', 60) },
-    tonal_color_secondary: { color: theme.methods.palette.color.value('secondary', 60) },
-    tonal_color_tertiary: { color: theme.methods.palette.color.value('tertiary', 60) },
-    tonal_color_quaternary: { color: theme.methods.palette.color.value('quaternary', 60) },
-    tonal_color_info: { color: theme.methods.palette.color.value('info', 60) },
-    tonal_color_success: { color: theme.methods.palette.color.value('success', 60) },
-    tonal_color_warning: { color: theme.methods.palette.color.value('warning', 60) },
-    tonal_color_error: { color: theme.methods.palette.color.value('error', 60) },
-    size_small: {
-        height: '24px',
-        width: '44px',
-        borderRadius: `${theme.shape.radius.unit * 1.5}px`
-    },
-    size_regular: {
-        height: '32px',
-        width: '52px',
-        borderRadius: `${theme.shape.radius.unit * 2}px`
-    },
-    size_large: {
-        height: '40px',
-        width: '60px',
-        borderRadius: `${theme.shape.radius.unit * 2.5}px`
-    },
-    background: {
-        display: 'inline-flex',
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
-        borderRadius: 'inherit',
-        transition: theme.methods.transitions.make(['opacity', 'background'], { duration: 'sm' })
-    },
-    border: {
-        display: 'inline-flex',
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
-        border: `2px solid`,
-        borderColor: theme.palette.text.default.secondary,
-        boxSizing: 'border-box',
-        borderRadius: 'inherit',
-        transition: theme.methods.transitions.make(['opacity'], { duration: 'sm' })
-    },
-    // Tonal
-    border_tonal_color_neutral: { borderColor: theme.palette.color['neutral'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_primary: { borderColor: theme.palette.color['primary'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_secondary: { borderColor: theme.palette.color['secondary'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_tertiary: { borderColor: theme.palette.color['tertiary'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_quaternary: { borderColor: theme.palette.color['quaternary'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_info: { borderColor: theme.palette.color['info'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_success: { borderColor: theme.palette.color['success'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_warning: { borderColor: theme.palette.color['warning'][theme.palette.light ? 40 : 20] },
-    border_tonal_color_error: { borderColor: theme.palette.color['error'][theme.palette.light ? 40 : 20] },
-    iconButton: {
-        position: 'absolute',
-        top: '50%'
-    },
-    icon: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '1em',
-        height: '1em',
-        background: 'currentColor',
-        borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.5em)`,
-        transition: theme.methods.transitions.make('background')
-    },
-    disabled: {
-        cursor: 'default',
-        opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.disabled : '1',
-        pointerEvents: 'none'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Keyframes = _interopRequireDefault(require("../Keyframes"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _utils2 = require("../utils");
+const _excluded = ["size", "style", "children"],
+  _excluded2 = ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"];
+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 useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    display: 'inline-flex',
+    cursor: 'pointer',
+    transition: theme.methods.transitions.make('box-shadow'),
+    '&:focus-visible': {
+      boxShadow: `0px 0px 0px 1px ${theme.palette.text.default.primary}`
     }
-}), { name: 'onesy-Switch' });
-const Icon = (props) => {
-    const { size, style, children } = props, other = __rest(props, ["size", "style", "children"]);
-    let fontSize = 24;
-    if (size === 'very small')
-        fontSize = 12;
-    else if (size === 'small')
-        fontSize = 18;
-    else if (size === 'regular')
-        fontSize = 24;
-    else if (size === 'medium')
-        fontSize = 30;
-    else if (size === 'large')
-        fontSize = 38;
-    else if (size === 'very large')
-        fontSize = 42;
-    else if (size !== undefined)
-        fontSize = size;
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: Object.assign(Object.assign({}, style), { fontSize }) }, other, { children: children && react_1.default.cloneElement(children, { size: fontSize / 1.5 }) })));
+  },
+  input: {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    opacity: '0',
+    cursor: 'inherit',
+    zIndex: '1'
+  },
+  // Color
+  color_default: {
+    color: theme.palette.text.default.primary
+  },
+  color_themed: {
+    color: theme.palette.text.default.primary
+  },
+  color_inverted: {
+    color: theme.palette.background.default.primary
+  },
+  color_neutral: {
+    color: theme.palette.color.neutral.main
+  },
+  color_primary: {
+    color: theme.palette.color.primary.main
+  },
+  color_secondary: {
+    color: theme.palette.color.secondary.main
+  },
+  color_tertiary: {
+    color: theme.palette.color.tertiary.main
+  },
+  color_quaternary: {
+    color: theme.palette.color.quaternary.main
+  },
+  color_info: {
+    color: theme.palette.color.info.main
+  },
+  color_success: {
+    color: theme.palette.color.success.main
+  },
+  color_warning: {
+    color: theme.palette.color.warning.main
+  },
+  color_error: {
+    color: theme.palette.color.error.main
+  },
+  // Tonal
+  tonal_color_neutral: {
+    color: theme.methods.palette.color.value('neutral', 60)
+  },
+  tonal_color_primary: {
+    color: theme.methods.palette.color.value('primary', 60)
+  },
+  tonal_color_secondary: {
+    color: theme.methods.palette.color.value('secondary', 60)
+  },
+  tonal_color_tertiary: {
+    color: theme.methods.palette.color.value('tertiary', 60)
+  },
+  tonal_color_quaternary: {
+    color: theme.methods.palette.color.value('quaternary', 60)
+  },
+  tonal_color_info: {
+    color: theme.methods.palette.color.value('info', 60)
+  },
+  tonal_color_success: {
+    color: theme.methods.palette.color.value('success', 60)
+  },
+  tonal_color_warning: {
+    color: theme.methods.palette.color.value('warning', 60)
+  },
+  tonal_color_error: {
+    color: theme.methods.palette.color.value('error', 60)
+  },
+  size_small: {
+    height: '24px',
+    width: '44px',
+    borderRadius: `${theme.shape.radius.unit * 1.5}px`
+  },
+  size_regular: {
+    height: '32px',
+    width: '52px',
+    borderRadius: `${theme.shape.radius.unit * 2}px`
+  },
+  size_large: {
+    height: '40px',
+    width: '60px',
+    borderRadius: `${theme.shape.radius.unit * 2.5}px`
+  },
+  background: {
+    display: 'inline-flex',
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    borderRadius: 'inherit',
+    transition: theme.methods.transitions.make(['opacity', 'background'], {
+      duration: 'sm'
+    })
+  },
+  border: {
+    display: 'inline-flex',
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    border: `2px solid`,
+    borderColor: theme.palette.text.default.secondary,
+    boxSizing: 'border-box',
+    borderRadius: 'inherit',
+    transition: theme.methods.transitions.make(['opacity'], {
+      duration: 'sm'
+    })
+  },
+  // Tonal
+  border_tonal_color_neutral: {
+    borderColor: theme.palette.color['neutral'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_primary: {
+    borderColor: theme.palette.color['primary'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_secondary: {
+    borderColor: theme.palette.color['secondary'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_tertiary: {
+    borderColor: theme.palette.color['tertiary'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_quaternary: {
+    borderColor: theme.palette.color['quaternary'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_info: {
+    borderColor: theme.palette.color['info'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_success: {
+    borderColor: theme.palette.color['success'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_warning: {
+    borderColor: theme.palette.color['warning'][theme.palette.light ? 40 : 20]
+  },
+  border_tonal_color_error: {
+    borderColor: theme.palette.color['error'][theme.palette.light ? 40 : 20]
+  },
+  iconButton: {
+    position: 'absolute',
+    top: '50%'
+  },
+  icon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '1em',
+    height: '1em',
+    background: 'currentColor',
+    borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.5em)`,
+    transition: theme.methods.transitions.make('background')
+  },
+  disabled: {
+    cursor: 'default',
+    opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.disabled : '1',
+    pointerEvents: 'none'
+  }
+}), {
+  name: 'onesy-Switch'
+});
+const Icon = props => {
+  const {
+      size,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  let fontSize = 24;
+  if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;else if (size !== undefined) fontSize = size;
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      fontSize
+    })
+  }, other), children && /*#__PURE__*/_react.default.cloneElement(children, {
+    size: fontSize / 1.5
+  }));
 };
-const Switch = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_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.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySwitch) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Keyframes = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Keyframes) || Keyframes_1.default; }, [theme]);
-    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: tonal_ = true, color: color_ = 'primary', size = 'regular', inputRef, valueDefault: valueDefault_, checkedDefault: checkedDefault_, value: value_, checked: checked_, onChange, OnIcon, OffIcon, disabled, Component = 'span', className, style, children, 
-    // Other
-    version: version_, colorUnchecked } = props, other = __rest(props, ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"]);
-    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 refs = {
-        value: react_1.default.useRef(undefined),
-        input: react_1.default.useRef(undefined),
-        animation: react_1.default.useRef(undefined)
-    };
-    refs.value.current = value;
-    let color = color_;
-    let tonal = tonal_;
-    if (disabled) {
-        color = 'neutral';
-        tonal = true;
+const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, 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.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySwitch) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Keyframes = _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.Keyframes) || _Keyframes.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  }, [theme]);
+  const {
+      tonal: tonal_ = true,
+      color: color_ = 'primary',
+      size = 'regular',
+      inputRef,
+      valueDefault: valueDefault_,
+      checkedDefault: checkedDefault_,
+      value: value_,
+      checked: checked_,
+      onChange,
+      OnIcon,
+      OffIcon,
+      disabled,
+      Component = 'span',
+      className,
+      style,
+      children,
+      // Other
+      version: version_,
+      colorUnchecked
+    } = 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 refs = {
+    value: _react.default.useRef(undefined),
+    input: _react.default.useRef(undefined),
+    animation: _react.default.useRef(undefined)
+  };
+  refs.value.current = value;
+  let color = color_;
+  let tonal = tonal_;
+  if (disabled) {
+    color = 'neutral';
+    tonal = true;
+  }
+  const styles = {
+    root: {},
+    border: {},
+    background: {},
+    iconButton: {}
+  };
+  _react.default.useEffect(() => {
+    if (checked !== undefined && checked !== refs.value.current) {
+      setValue(checked);
+      refs.animation.current = true;
     }
-    const styles = {
-        root: {},
-        border: {},
-        background: {},
-        iconButton: {}
-    };
-    react_1.default.useEffect(() => {
-        if (checked !== undefined && checked !== refs.value.current) {
-            setValue(checked);
-            refs.animation.current = true;
+  }, [checked]);
+  const onUpdate = event => {
+    if (!disabled && !refs.animation.current) {
+      // Inner controlled value
+      if (!props.hasOwnProperty('checked')) {
+        setValue(event.target.checked);
+        refs.animation.current = true;
+      }
+      if ((0, _utils.is)('function', onChange)) onChange(event.target.checked, event);
+    }
+  };
+  let palette;
+  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+    palette = theme.methods.color(color);
+    styles.root.color = color;
+  }
+  const keyframes = {
+    checked: [{
+      name: 'growStart',
+      timeout: 240
+    }, {
+      name: 'waitStart',
+      timeout: 0
+    }, {
+      name: 'moveEnd',
+      timeout: 70
+    }, {
+      name: 'doneEnd',
+      timeout: 100
+    }],
+    unchecked: [{
+      name: 'growEnd',
+      timeout: 240
+    }, {
+      name: 'waitEnd',
+      timeout: 0
+    }, {
+      name: 'moveStart',
+      timeout: 70
+    }, {
+      name: 'doneStart',
+      timeout: 100
+    }]
+  };
+  const ltrSign = (item = '') => {
+    if (theme.direction === 'ltr') return item;
+    return !item ? '-' : '';
+  };
+  const sizes = (version, element) => {
+    if (element === 'iconButton') {
+      switch (version) {
+        case 'unchecked':
+          if (size === 'small') return `translate(${ltrSign('-')}3px, -50%)`;
+          if (size === 'large') return `translate(${ltrSign('-')}5px, -50%)`;
+          return `translate(${ltrSign('-')}4px, -50%)`;
+        case 'grow-start':
+          if (size === 'small') return `translate(${ltrSign('-')}3px, -50%)`;
+          if (size === 'large') return `translate(${ltrSign('-')}5px, -50%)`;
+          return `translate(${ltrSign('-')}4px, -50%)`;
+        case 'move-end':
+          if (size === 'small') return `translate(${ltrSign()}11px, -50%)`;
+          if (size === 'large') return `translate(${ltrSign()}11px, -50%)`;
+          return `translate(${ltrSign()}11px, -50%)`;
+        case 'grow-end':
+          if (size === 'small') return `translate(${ltrSign()}17px, -50%)`;
+          if (size === 'large') return `translate(${ltrSign()}16px, -50%)`;
+          return `translate(${ltrSign()}16px, -50%)`;
+        case 'move-start':
+          if (size === 'small') return `translate(${ltrSign()}1px, -50%)`;
+          if (size === 'large') return `translate(${ltrSign()}1px, -50%)`;
+          return `translate(${ltrSign()}1px, -50%)`;
+        case 'checked':
+          if (size === 'small') return `translate(${ltrSign()}16px, -50%)`;
+          if (size === 'large') return `translate(${ltrSign()}16px, -50%)`;
+          return `translate(${ltrSign()}16px, -50%)`;
+        default:
+          break;
+      }
+    } else {
+      switch (version) {
+        case 'unchecked':
+          if (OffIcon) {
+            if (size === 'small') return 'scale(1)';
+            if (size === 'large') return 'scale(1)';
+            return 'scale(1)';
+          }
+          if (size === 'small') return 'scale(0.6665)';
+          if (size === 'large') return 'scale(0.6665)';
+          return 'scale(0.6665)';
+        case 'grow-start':
+          if (size === 'small') return 'scale(1.116)';
+          if (size === 'large') return 'scale(1.2)';
+          return 'scale(1.1665)';
+        case 'move-end':
+          if (size === 'small') return {
+            transform: 'scale(1)',
+            width: 24
+          };
+          if (size === 'large') return {
+            transform: 'scale(1)',
+            width: 41
+          };
+          return {
+            transform: 'scale(1)',
+            width: 33
+          };
+        case 'grow-end':
+          if (size === 'small') return 'scale(1.116)';
+          if (size === 'large') return 'scale(1.2)';
+          return 'scale(1.1665)';
+        case 'move-start':
+          if (OffIcon) {
+            if (size === 'small') return {
+              transform: 'scale(1)',
+              width: 24
+            };
+            if (size === 'large') return {
+              transform: 'scale(1)',
+              width: 41
+            };
+            return {
+              transform: 'scale(1)',
+              width: 33
+            };
+          }
+          if (size === 'small') return {
+            transform: 'scale(0.6665)',
+            width: 24
+          };
+          if (size === 'large') return {
+            transform: 'scale(0.6665)',
+            width: 41
+          };
+          return {
+            transform: 'scale(0.6665)',
+            width: 33
+          };
+        case 'checked':
+          if (size === 'small') return 'scale(1)';
+          if (size === 'large') return 'scale(1)';
+          return 'scale(1)';
+        default:
+          break;
+      }
+    }
+  };
+  const initial = () => {
+    const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
+    const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
+    return {
+      background: {
+        checked: {
+          opacity: 1,
+          background: 'currentColor'
+        },
+        unchecked: {
+          background: theme.methods.palette.color.value(color, 95, true, paletteColor)
         }
-    }, [checked]);
-    const onUpdate = (event) => {
-        if (!disabled && !refs.animation.current) {
-            // Inner controlled value
-            if (!props.hasOwnProperty('checked')) {
-                setValue(event.target.checked);
-                refs.animation.current = true;
-            }
-            if ((0, utils_1.is)('function', onChange))
-                onChange(event.target.checked, event);
+      },
+      border: {
+        checked: {
+          opacity: 0
+        },
+        unchecked: {
+          opacity: 1
         }
-    };
-    let palette;
-    if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
-        palette = theme.methods.color(color);
-        styles.root.color = color;
-    }
-    const keyframes = {
-        checked: [
-            { name: 'growStart', timeout: 240 },
-            { name: 'waitStart', timeout: 0 },
-            { name: 'moveEnd', timeout: 70 },
-            { name: 'doneEnd', timeout: 100 }
-        ],
-        unchecked: [
-            { name: 'growEnd', timeout: 240 },
-            { name: 'waitEnd', timeout: 0 },
-            { name: 'moveStart', timeout: 70 },
-            { name: 'doneStart', timeout: 100 }
-        ]
-    };
-    const ltrSign = (item = '') => {
-        if (theme.direction === 'ltr')
-            return item;
-        return !item ? '-' : '';
-    };
-    const sizes = (version, element) => {
-        if (element === 'iconButton') {
-            switch (version) {
-                case 'unchecked':
-                    if (size === 'small')
-                        return `translate(${ltrSign('-')}3px, -50%)`;
-                    if (size === 'large')
-                        return `translate(${ltrSign('-')}5px, -50%)`;
-                    return `translate(${ltrSign('-')}4px, -50%)`;
-                case 'grow-start':
-                    if (size === 'small')
-                        return `translate(${ltrSign('-')}3px, -50%)`;
-                    if (size === 'large')
-                        return `translate(${ltrSign('-')}5px, -50%)`;
-                    return `translate(${ltrSign('-')}4px, -50%)`;
-                case 'move-end':
-                    if (size === 'small')
-                        return `translate(${ltrSign()}11px, -50%)`;
-                    if (size === 'large')
-                        return `translate(${ltrSign()}11px, -50%)`;
-                    return `translate(${ltrSign()}11px, -50%)`;
-                case 'grow-end':
-                    if (size === 'small')
-                        return `translate(${ltrSign()}17px, -50%)`;
-                    if (size === 'large')
-                        return `translate(${ltrSign()}16px, -50%)`;
-                    return `translate(${ltrSign()}16px, -50%)`;
-                case 'move-start':
-                    if (size === 'small')
-                        return `translate(${ltrSign()}1px, -50%)`;
-                    if (size === 'large')
-                        return `translate(${ltrSign()}1px, -50%)`;
-                    return `translate(${ltrSign()}1px, -50%)`;
-                case 'checked':
-                    if (size === 'small')
-                        return `translate(${ltrSign()}16px, -50%)`;
-                    if (size === 'large')
-                        return `translate(${ltrSign()}16px, -50%)`;
-                    return `translate(${ltrSign()}16px, -50%)`;
-                default:
-                    break;
-            }
+      },
+      iconButton: {
+        checked: {
+          transform: sizes('checked', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
+        },
+        unchecked: {
+          transform: sizes('unchecked', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
         }
-        else {
-            switch (version) {
-                case 'unchecked':
-                    if (OffIcon) {
-                        if (size === 'small')
-                            return 'scale(1)';
-                        if (size === 'large')
-                            return 'scale(1)';
-                        return 'scale(1)';
-                    }
-                    if (size === 'small')
-                        return 'scale(0.6665)';
-                    if (size === 'large')
-                        return 'scale(0.6665)';
-                    return 'scale(0.6665)';
-                case 'grow-start':
-                    if (size === 'small')
-                        return 'scale(1.116)';
-                    if (size === 'large')
-                        return 'scale(1.2)';
-                    return 'scale(1.1665)';
-                case 'move-end':
-                    if (size === 'small')
-                        return {
-                            transform: 'scale(1)',
-                            width: 24
-                        };
-                    if (size === 'large')
-                        return {
-                            transform: 'scale(1)',
-                            width: 41
-                        };
-                    return {
-                        transform: 'scale(1)',
-                        width: 33
-                    };
-                case 'grow-end':
-                    if (size === 'small')
-                        return 'scale(1.116)';
-                    if (size === 'large')
-                        return 'scale(1.2)';
-                    return 'scale(1.1665)';
-                case 'move-start':
-                    if (OffIcon) {
-                        if (size === 'small')
-                            return {
-                                transform: 'scale(1)',
-                                width: 24
-                            };
-                        if (size === 'large')
-                            return {
-                                transform: 'scale(1)',
-                                width: 41
-                            };
-                        return {
-                            transform: 'scale(1)',
-                            width: 33
-                        };
-                    }
-                    if (size === 'small')
-                        return {
-                            transform: 'scale(0.6665)',
-                            width: 24
-                        };
-                    if (size === 'large')
-                        return {
-                            transform: 'scale(0.6665)',
-                            width: 41
-                        };
-                    return {
-                        transform: 'scale(0.6665)',
-                        width: 33
-                    };
-                case 'checked':
-                    if (size === 'small')
-                        return 'scale(1)';
-                    if (size === 'large')
-                        return 'scale(1)';
-                    return 'scale(1)';
-                default:
-                    break;
-            }
+      },
+      icon: {
+        checked: {
+          transform: sizes('checked', 'icon'),
+          background: dynamicBackgroundColor,
+          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light')
+        },
+        unchecked: {
+          transform: sizes('unchecked', 'icon'),
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary
         }
+      }
     };
-    const initial = () => {
-        const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
-        const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
-        return ({
-            background: {
-                checked: {
-                    opacity: 1,
-                    background: 'currentColor'
-                },
-                unchecked: {
-                    background: theme.methods.palette.color.value(color, 95, true, paletteColor)
-                }
-            },
-            border: {
-                checked: {
-                    opacity: 0
-                },
-                unchecked: {
-                    opacity: 1
-                }
-            },
-            iconButton: {
-                checked: {
-                    transform: sizes('checked', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
-                },
-                unchecked: {
-                    transform: sizes('unchecked', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
-                }
-            },
-            icon: {
-                checked: {
-                    transform: sizes('checked', 'icon'),
-                    background: dynamicBackgroundColor,
-                    color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light')
-                },
-                unchecked: {
-                    transform: sizes('unchecked', 'icon'),
-                    background: (['default', 'themed', 'inherit'].includes(color) && !theme.palette.light) ? theme.palette.text.default.secondary : (tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary),
-                    color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary
-                }
-            }
-        });
+  };
+  const styleKeyframes = () => {
+    const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
+    const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
+    return {
+      background: {
+        growEnd: _objectSpread({}, initial().background.checked),
+        waitEnd: _objectSpread({}, initial().background.checked),
+        moveStart: _objectSpread(_objectSpread({}, initial().background.unchecked), {}, {
+          transition: theme.methods.transitions.make(['opacity', 'background'], {
+            duration: 35,
+            delay: 35
+          })
+        }),
+        doneStart: _objectSpread({}, initial().background.unchecked),
+        growStart: _objectSpread({}, initial().background.unchecked),
+        waitStart: _objectSpread({}, initial().background.checked),
+        moveEnd: _objectSpread(_objectSpread({}, initial().background.checked), {}, {
+          transition: theme.methods.transitions.make(['opacity', 'background'], {
+            duration: 35,
+            delay: 35
+          })
+        }),
+        doneEnd: _objectSpread({}, initial().background.checked)
+      },
+      border: {
+        growEnd: _objectSpread({}, initial().border.checked),
+        waitEnd: _objectSpread({}, initial().border.checked),
+        moveStart: _objectSpread(_objectSpread({}, initial().border.unchecked), {}, {
+          transition: theme.methods.transitions.make(['opacity'], {
+            duration: 35,
+            delay: 35
+          })
+        }),
+        doneStart: _objectSpread({}, initial().border.unchecked),
+        growStart: _objectSpread({}, initial().border.unchecked),
+        waitStart: _objectSpread({}, initial().border.checked),
+        moveEnd: _objectSpread(_objectSpread({}, initial().border.checked), {}, {
+          transition: theme.methods.transitions.make(['opacity'], {
+            duration: 35,
+            delay: 35
+          })
+        }),
+        doneEnd: _objectSpread({}, initial().border.checked)
+      },
+      iconButton: {
+        growStart: {
+          transform: sizes('grow-start', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
+          transition: theme.methods.transitions.make('transform', {
+            duration: 240,
+            timing_function: 'decelerated'
+          })
+        },
+        waitStart: {
+          transform: sizes('grow-start', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
+        },
+        moveEnd: {
+          transform: sizes('move-end', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('transform', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('background', {
+            duration: 35,
+            delay: 35
+          })}`
+        },
+        doneEnd: _objectSpread(_objectSpread({}, initial().iconButton.checked), {}, {
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 100
+          })}, , ${theme.methods.transitions.make('transform', {
+            duration: 100
+          })}`
+        }),
+        growEnd: {
+          transform: sizes('grow-end', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
+          transition: theme.methods.transitions.make('transform', {
+            duration: 240,
+            timing_function: 'decelerated'
+          })
+        },
+        waitEnd: {
+          transform: sizes('grow-end', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
+        },
+        moveStart: {
+          transform: sizes('move-start', 'iconButton'),
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('transform', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('background', {
+            duration: 35,
+            delay: 35
+          })}`
+        },
+        doneStart: _objectSpread(_objectSpread({}, initial().iconButton.unchecked), {}, {
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 100
+          })}, , ${theme.methods.transitions.make('transform', {
+            duration: 100
+          })}`
+        })
+      },
+      icon: {
+        growStart: {
+          transform: sizes('grow-start', 'icon'),
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
+          transition: theme.methods.transitions.make('transform', {
+            duration: 240,
+            timing_function: 'decelerated'
+          })
+        },
+        waitStart: {
+          transform: sizes('grow-start', 'icon'),
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
+        },
+        moveEnd: _objectSpread(_objectSpread({}, sizes('move-end', 'icon')), {}, {
+          background: dynamicBackgroundColor,
+          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('transform', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('background', {
+            duration: 35,
+            delay: 35
+          })}`
+        }),
+        doneEnd: _objectSpread(_objectSpread({}, initial().icon.checked), {}, {
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 100
+          })}, , ${theme.methods.transitions.make('transform', {
+            duration: 100
+          })}`
+        }),
+        growEnd: {
+          transform: sizes('grow-end', 'icon'),
+          background: dynamicBackgroundColor,
+          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
+          transition: theme.methods.transitions.make('transform', {
+            duration: 240,
+            timing_function: 'decelerated'
+          })
+        },
+        waitEnd: {
+          transform: sizes('grow-end', 'icon'),
+          background: dynamicBackgroundColor,
+          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light')
+        },
+        moveStart: _objectSpread(_objectSpread({}, sizes('move-start', 'icon')), {}, {
+          background: tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary,
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('transform', {
+            duration: 70
+          })}, ${theme.methods.transitions.make('background', {
+            duration: 35,
+            delay: 35
+          })}`
+        }),
+        doneStart: _objectSpread(_objectSpread({}, initial().icon.unchecked), {}, {
+          transition: `${theme.methods.transitions.make('width', {
+            duration: 100
+          })}, , ${theme.methods.transitions.make('transform', {
+            duration: 100
+          })}`
+        })
+      }
     };
-    const styleKeyframes = () => {
-        const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
-        const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
-        return {
-            background: {
-                growEnd: Object.assign({}, initial().background.checked),
-                waitEnd: Object.assign({}, initial().background.checked),
-                moveStart: Object.assign(Object.assign({}, initial().background.unchecked), { transition: theme.methods.transitions.make(['opacity', 'background'], { duration: 35, delay: 35 }) }),
-                doneStart: Object.assign({}, initial().background.unchecked),
-                growStart: Object.assign({}, initial().background.unchecked),
-                waitStart: Object.assign({}, initial().background.checked),
-                moveEnd: Object.assign(Object.assign({}, initial().background.checked), { transition: theme.methods.transitions.make(['opacity', 'background'], { duration: 35, delay: 35 }) }),
-                doneEnd: Object.assign({}, initial().background.checked)
-            },
-            border: {
-                growEnd: Object.assign({}, initial().border.checked),
-                waitEnd: Object.assign({}, initial().border.checked),
-                moveStart: Object.assign(Object.assign({}, initial().border.unchecked), { transition: theme.methods.transitions.make(['opacity'], { duration: 35, delay: 35 }) }),
-                doneStart: Object.assign({}, initial().border.unchecked),
-                growStart: Object.assign({}, initial().border.unchecked),
-                waitStart: Object.assign({}, initial().border.checked),
-                moveEnd: Object.assign(Object.assign({}, initial().border.checked), { transition: theme.methods.transitions.make(['opacity'], { duration: 35, delay: 35 }) }),
-                doneEnd: Object.assign({}, initial().border.checked)
-            },
-            iconButton: {
-                growStart: {
-                    transform: sizes('grow-start', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
-                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
-                },
-                waitStart: {
-                    transform: sizes('grow-start', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
-                },
-                moveEnd: {
-                    transform: sizes('move-end', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
-                    transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}`
-                },
-                doneEnd: Object.assign(Object.assign({}, initial().iconButton.checked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` }),
-                growEnd: {
-                    transform: sizes('grow-end', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
-                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
-                },
-                waitEnd: {
-                    transform: sizes('grow-end', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
-                },
-                moveStart: {
-                    transform: sizes('move-start', 'iconButton'),
-                    color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
-                    transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}`
-                },
-                doneStart: Object.assign(Object.assign({}, initial().iconButton.unchecked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` })
-            },
-            icon: {
-                growStart: {
-                    transform: sizes('grow-start', 'icon'),
-                    background: (['default', 'themed', 'inherit'].includes(color) && !theme.palette.light) ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-                    color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
-                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
-                },
-                waitStart: {
-                    transform: sizes('grow-start', 'icon'),
-                    background: (['default', 'themed', 'inherit'].includes(color) && !theme.palette.light) ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-                    color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
-                },
-                moveEnd: Object.assign(Object.assign({}, sizes('move-end', 'icon')), { background: dynamicBackgroundColor, color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'), transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}` }),
-                doneEnd: Object.assign(Object.assign({}, initial().icon.checked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` }),
-                growEnd: {
-                    transform: sizes('grow-end', 'icon'),
-                    background: dynamicBackgroundColor,
-                    color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
-                    transition: theme.methods.transitions.make('transform', { duration: 240, timing_function: 'decelerated' })
-                },
-                waitEnd: {
-                    transform: sizes('grow-end', 'icon'),
-                    background: dynamicBackgroundColor,
-                    color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
-                },
-                moveStart: Object.assign(Object.assign({}, sizes('move-start', 'icon')), { background: tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary, color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary, transition: `${theme.methods.transitions.make('width', { duration: 70 })}, ${theme.methods.transitions.make('transform', { duration: 70 })}, ${theme.methods.transitions.make('background', { duration: 35, delay: 35 })}` }),
-                doneStart: Object.assign(Object.assign({}, initial().icon.unchecked), { transition: `${theme.methods.transitions.make('width', { duration: 100 })}, , ${theme.methods.transitions.make('transform', { duration: 100 })}` })
-            }
-        };
-    };
-    const onKeyDown = (event) => {
-        switch (event.key) {
-            case 'Enter':
-                if (refs.input.current)
-                    refs.input.current.click();
-                break;
-            default:
-                break;
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, role: 'switch', "aria-checked": value, "aria-disabled": disabled, onKeyDown: onKeyDown, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Switch', theme) && [
-                'onesy-Switch-root',
-                `onesy-Switch-size-${size}`,
-                value && `onesy-Switch-checked`,
-                disabled && `onesy-Switch-disabled`
-            ],
-            className,
-            classes.root,
-            classes[`color_${color}`],
-            classes[`size_${size}`],
-            tonal && classes[`tonal_color_${color}`],
-            disabled && classes.disabled
-        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: [(0, jsx_runtime_1.jsx)("input", { ref: item => {
-                    if (inputRef)
-                        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)('Switch', theme) && [
-                        'onesy-Switch-input'
-                    ],
-                    classes.input
-                ]), disabled: disabled }), (0, jsx_runtime_1.jsx)(Keyframes, Object.assign({ keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'], update: refs.value.current, appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd', append: true }, { children: (status) => {
-                    if ((refs.value.current && status === 'doneEnd') ||
-                        (!refs.value.current && status === 'doneStart'))
-                        refs.animation.current = false;
-                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('Switch', theme) && [
-                                        'onesy-Switch-background'
-                                    ],
-                                    classes.background,
-                                    disabled && classes.background_disabled
-                                ]), style: Object.assign(Object.assign(Object.assign({}, styles.background), (status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().background[status]) }), (0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('Switch', theme) && [
-                                        'onesy-Switch-border'
-                                    ],
-                                    classes.border,
-                                    classes[`color_${color}`],
-                                    tonal && classes[`border_tonal_color_${color}`]
-                                ]), style: Object.assign(Object.assign(Object.assign({}, styles.border), (status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().border[status]) }), (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tabIndex: '-1', size: size, className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('Switch', theme) && [
-                                        'onesy-Switch-icon-button'
-                                    ],
-                                    classes.iconButton
-                                ]), style: Object.assign(Object.assign(Object.assign({}, styles.iconButton), (status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().iconButton[status]) }, { children: (0, jsx_runtime_1.jsx)(Icon, Object.assign({ className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Switch', theme) && [
-                                            'onesy-Switch-icon'
-                                        ],
-                                        classes.icon
-                                    ]), style: Object.assign(Object.assign({}, (status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked'])), styleKeyframes().icon[status]) }, { children: (((status === 'appended' && refs.value.current) || ['growEnd', 'doneEnd'].includes(status)) && OnIcon) ||
-                                        (((status === 'appended' && !refs.value.current) || ['growStart', 'doneStart'].includes(status)) && OffIcon) })) }))] });
-                } }))] })));
+  };
+  const onKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+        if (refs.input.current) refs.input.current.click();
+        break;
+      default:
+        break;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    tabIndex: disabled ? -1 : 0,
+    role: "switch",
+    "aria-checked": value,
+    "aria-disabled": disabled,
+    onKeyDown: onKeyDown,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-root', `onesy-Switch-size-${size}`, value && `onesy-Switch-checked`, disabled && `onesy-Switch-disabled`], className, classes.root, classes[`color_${color}`], classes[`size_${size}`], tonal && classes[`tonal_color_${color}`], disabled && classes.disabled]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, other), /*#__PURE__*/_react.default.createElement("input", {
+    ref: item => {
+      if (inputRef) inputRef.current = item;
+      refs.input.current = item;
+    },
+    tabIndex: -1,
+    type: "checkbox",
+    checked: value,
+    onChange: onUpdate,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-input'], classes.input]),
+    disabled: disabled
+  }), /*#__PURE__*/_react.default.createElement(Keyframes, {
+    keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'],
+    update: refs.value.current,
+    appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd',
+    append: true
+  }, status => {
+    if (refs.value.current && status === 'doneEnd' || !refs.value.current && status === 'doneStart') refs.animation.current = false;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-background'], classes.background, disabled && classes.background_disabled]),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.background), status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().background[status])
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-border'], classes.border, classes[`color_${color}`], tonal && classes[`border_tonal_color_${color}`]]),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.border), status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().border[status])
+    }), /*#__PURE__*/_react.default.createElement(IconButton, {
+      tabIndex: "-1",
+      size: size,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-icon-button'], classes.iconButton]),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.iconButton), status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().iconButton[status])
+    }, /*#__PURE__*/_react.default.createElement(Icon, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-icon'], classes.icon]),
+      style: _objectSpread(_objectSpread({}, status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().icon[status])
+    }, (status === 'appended' && refs.value.current || ['growEnd', 'doneEnd'].includes(status)) && OnIcon || (status === 'appended' && !refs.value.current || ['growStart', 'doneStart'].includes(status)) && OffIcon)));
+  }));
 });
 Switch.displayName = 'onesy-Switch';
-exports.default = Switch;
+var _default = exports.default = Switch;