baseui 10.12.1 → 11.0.0

package/checkbox/checkbox.js

@@ -133,10 +133,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isToggle", function () {
-      return _this.props.checkmarkType === _constants.STYLE_TYPE.toggle || _this.props.checkmarkType === _constants.STYLE_TYPE.toggle_round;
-    });
-
     return _this;
   }
 
@@ -149,32 +145,19 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
       if (autoFocus && inputRef.current) {
         inputRef.current.focus();
-      } // TODO(v11)
-
-
-      if (process.env.NODE_ENV !== "production") {
-        if (this.props.checkmarkType === _constants.STYLE_TYPE.toggle) {
-          console.warn("baseui:Checkbox The STYLE_TYPE.toggle value on the 'checkmarkType' prop does not conform to the current base design specification. " + 'Please update your code to STYLE_TYPE.toggle_round. This will be updated automatically in a future major version.');
-        }
-
-        if (this.props.isError) {
-          console.warn('baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.');
-        }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var checkmarkType = this.props.checkmarkType;
       var _this$props2 = this.props,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,
           onChange = _this$props2.onChange,
           _this$props2$labelPla = _this$props2.labelPlacement,
-          labelPlacement = _this$props2$labelPla === void 0 ? this.isToggle() ? 'left' : 'right' : _this$props2$labelPla,
+          labelPlacement = _this$props2$labelPla === void 0 ? this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? 'left' : 'right' : _this$props2$labelPla,
           inputRef = _this$props2.inputRef,
           isIndeterminate = _this$props2.isIndeterminate,
-          isError = _this$props2.isError,
           error = _this$props2.error,
           disabled = _this$props2.disabled,
           value = _this$props2.value,
@@ -189,7 +172,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           LabelOverride = overrides.Label,
           InputOverride = overrides.Input,
           ToggleOverride = overrides.Toggle,
-          ToggleInnerOverride = overrides.ToggleInner,
           ToggleTrackOverride = overrides.ToggleTrack;
 
       var Root = (0, _overrides.getOverride)(RootOverride) || _styledComponents.Root;
@@ -202,8 +184,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
       var Toggle = (0, _overrides.getOverride)(ToggleOverride) || _styledComponents.Toggle;
 
-      var ToggleInner = (0, _overrides.getOverride)(ToggleInnerOverride) || _styledComponents.ToggleInner;
-
       var ToggleTrack = (0, _overrides.getOverride)(ToggleTrackOverride) || _styledComponents.ToggleTrack;
 
       var inputEvents = {
@@ -222,17 +202,14 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $isHovered: this.state.isHovered,
         $isActive: this.state.isActive,
-        $isError: isError,
         $error: error,
         $checked: checked,
         $isIndeterminate: isIndeterminate,
         $required: required,
         $disabled: disabled,
-        $value: value,
-        $checkmarkType: checkmarkType
-      }; // TODO(v11) - add check for children (#2172)
-
-      var labelComp = /*#__PURE__*/React.createElement(Label, _extends({
+        $value: value
+      };
+      var labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
         $labelPlacement: labelPlacement
       }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), this.props.containsInteractiveElement ?
       /*#__PURE__*/
@@ -247,7 +224,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         "data-baseweb": "checkbox",
         title: title || null,
         $labelPlacement: labelPlacement
-      }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.isToggle() ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)), /*#__PURE__*/React.createElement(ToggleInner, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleInnerOverride))))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
+      }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
         value: value,
         name: name,
         checked: checked,
@@ -256,7 +233,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
-        "aria-invalid": error || isError || null,
+        "aria-invalid": error || null,
         "aria-required": required || null,
         disabled: disabled,
         type: type,
@@ -279,7 +256,6 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   autoFocus: false,
   isIndeterminate: false,
   inputRef: /*#__PURE__*/React.createRef(),
-  isError: false,
   error: false,
   type: 'checkbox',
   checkmarkType: _constants.STYLE_TYPE.default,

package/checkbox/checkbox.js.flow

@@ -14,7 +14,6 @@ import {
   Label as StyledLabel,
   Root as StyledRoot,
   Toggle as StyledToggle,
-  ToggleInner as StyledToggleInner,
   ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
 import { STYLE_TYPE } from './constants.js';
@@ -31,7 +30,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     autoFocus: false,
     isIndeterminate: false,
     inputRef: React.createRef(),
-    isError: false,
     error: false,
     type: 'checkbox',
     checkmarkType: STYLE_TYPE.default,
@@ -56,21 +54,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
-
-    // TODO(v11)
-    if (__DEV__) {
-      if (this.props.checkmarkType === STYLE_TYPE.toggle) {
-        console.warn(
-          "baseui:Checkbox The STYLE_TYPE.toggle value on the 'checkmarkType' prop does not conform to the current base design specification. " +
-            'Please update your code to STYLE_TYPE.toggle_round. This will be updated automatically in a future major version.'
-        );
-      }
-      if (this.props.isError) {
-        console.warn(
-          'baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.'
-        );
-      }
-    }
   }
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -109,22 +92,13 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     }
   };
 
-  isToggle = () => {
-    return (
-      this.props.checkmarkType === STYLE_TYPE.toggle ||
-      this.props.checkmarkType === STYLE_TYPE.toggle_round
-    );
-  };
-
   render() {
-    const { checkmarkType } = this.props;
     const {
       overrides = {},
       onChange,
-      labelPlacement = this.isToggle() ? 'left' : 'right',
+      labelPlacement = this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right',
       inputRef,
       isIndeterminate,
-      isError,
       error,
       disabled,
       value,
@@ -142,7 +116,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       Label: LabelOverride,
       Input: InputOverride,
       Toggle: ToggleOverride,
-      ToggleInner: ToggleInnerOverride,
       ToggleTrack: ToggleTrackOverride,
     } = overrides;
 
@@ -151,7 +124,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     const Label = getOverride(LabelOverride) || StyledLabel;
     const Input = getOverride(InputOverride) || StyledInput;
     const Toggle = getOverride(ToggleOverride) || StyledToggle;
-    const ToggleInner = getOverride(ToggleInnerOverride) || StyledToggleInner;
     const ToggleTrack = getOverride(ToggleTrackOverride) || StyledToggleTrack;
 
     const inputEvents = {
@@ -170,17 +142,15 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       $isFocusVisible: this.state.isFocusVisible,
       $isHovered: this.state.isHovered,
       $isActive: this.state.isActive,
-      $isError: isError,
       $error: error,
       $checked: checked,
       $isIndeterminate: isIndeterminate,
       $required: required,
       $disabled: disabled,
       $value: value,
-      $checkmarkType: checkmarkType,
     };
-    // TODO(v11) - add check for children (#2172)
-    const labelComp = (
+
+    const labelComp = children && (
       <Label $labelPlacement={labelPlacement} {...sharedProps} {...getOverrideProps(LabelOverride)}>
         {this.props.containsInteractiveElement ? (
           // Prevents the event from bubbling up to the label and moving focus to the radio button
@@ -191,6 +161,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         )}
       </Label>
     );
+
     return (
       <Root
         data-baseweb="checkbox"
@@ -201,11 +172,9 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         {...getOverrideProps(RootOverride)}
       >
         {(labelPlacement === 'top' || labelPlacement === 'left') && labelComp}
-        {this.isToggle() ? (
+        {this.props.checkmarkType === STYLE_TYPE.toggle ? (
           <ToggleTrack {...sharedProps} {...getOverrideProps(ToggleTrackOverride)}>
-            <Toggle {...sharedProps} {...getOverrideProps(ToggleOverride)}>
-              <ToggleInner {...sharedProps} {...getOverrideProps(ToggleInnerOverride)} />
-            </Toggle>
+            <Toggle {...sharedProps} {...getOverrideProps(ToggleOverride)} />
           </ToggleTrack>
         ) : (
           <Checkmark {...sharedProps} {...getOverrideProps(CheckmarkOverride)} />
@@ -219,7 +188,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           aria-checked={isIndeterminate ? 'mixed' : checked}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}
-          aria-invalid={error || isError || null}
+          aria-invalid={error || null}
           aria-required={required || null}
           disabled={disabled}
           type={type}

package/checkbox/constants.js

@@ -20,7 +20,8 @@ exports.STATE_TYPE = STATE_TYPE;
 var STYLE_TYPE = Object.freeze({
   default: 'default',
   toggle: 'toggle',
-  toggle_round: 'toggle_round'
+  // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
+  toggle_round: 'toggle'
 });
 exports.STYLE_TYPE = STYLE_TYPE;
 var LABEL_PLACEMENT = Object.freeze({

package/checkbox/constants.js.flow

@@ -14,7 +14,8 @@ export const STATE_TYPE = {
 export const STYLE_TYPE = Object.freeze({
   default: 'default',
   toggle: 'toggle',
-  toggle_round: 'toggle_round',
+  // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
+  toggle_round: 'toggle',
 });
 
 export const LABEL_PLACEMENT = Object.freeze({

package/checkbox/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface STATE_TYPE {
   change: 'CHANGE';
@@ -8,7 +8,7 @@ export interface STATE_TYPE {
 export interface STYLE_TYPE {
   default: 'default';
   toggle: 'toggle';
-  toggle_round: 'toggle_round';
+  toggle_round: 'toggle';
 }
 
 export interface LABEL_PLACEMENT {
@@ -35,7 +35,7 @@ export type StateReducer = (
   stateType: string,
   nextState: CheckboxState,
   currentState: CheckboxState,
-  event: React.SyntheticEvent<HTMLInputElement>,
+  event: React.SyntheticEvent<HTMLInputElement>
 ) => CheckboxState;
 
 export interface StatefulContainerProps {
@@ -56,7 +56,6 @@ export const StatefulContainer: React.FC<StatefulContainerProps>;
 export interface StatefulCheckboxProps {
   overrides?: CheckboxOverrides;
   disabled?: boolean;
-  isError?: boolean;
   error?: boolean;
   containsInteractiveElement?: boolean;
   labelPlacement?: 'top' | 'right' | 'bottom' | 'left';
@@ -94,7 +93,6 @@ export interface CheckboxProps {
   checked?: boolean;
   disabled?: boolean;
   required?: boolean;
-  isError?: boolean;
   error?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
   autoFocus?: boolean;

package/checkbox/index.js

@@ -51,12 +51,6 @@ Object.defineProperty(exports, "StyledToggle", {
     return _styledComponents.Toggle;
   }
 });
-Object.defineProperty(exports, "StyledToggleInner", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.ToggleInner;
-  }
-});
 Object.defineProperty(exports, "StyledToggleTrack", {
   enumerable: true,
   get: function get() {

package/checkbox/index.js.flow

@@ -16,7 +16,6 @@ export {
   Label as StyledLabel,
   Input as StyledInput,
   Toggle as StyledToggle,
-  ToggleInner as StyledToggleInner,
   ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
 

package/checkbox/styled-components.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToggleTrack = exports.ToggleInner = exports.Toggle = exports.Input = exports.Label = exports.Checkmark = exports.Root = void 0;
+exports.ToggleTrack = exports.Toggle = exports.Input = exports.Label = exports.Checkmark = exports.Root = void 0;
 
 var _index = require("../styles/index.js");
 
-var _constants = require("./constants.js");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -18,7 +16,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function getBorderColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
-      $isError = props.$isError,
       $error = props.$error,
       $isIndeterminate = props.$isIndeterminate,
       $theme = props.$theme,
@@ -29,8 +26,8 @@ function getBorderColor(props) {
     return colors.tickFillDisabled;
   } else if ($checked || $isIndeterminate) {
     return 'transparent';
-  } else if ($error || $isError) {
-    return colors.borderError;
+  } else if ($error) {
+    return colors.borderNegative;
   } else if ($isFocusVisible) {
     return colors.borderSelected;
   } else {
@@ -78,26 +75,19 @@ function getBackgroundColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
       $isIndeterminate = props.$isIndeterminate,
-      $isError = props.$isError,
       $error = props.$error,
       $isHovered = props.$isHovered,
       $isActive = props.$isActive,
-      $theme = props.$theme,
-      $checkmarkType = props.$checkmarkType;
-  var isToggle = $checkmarkType === _constants.STYLE_TYPE.toggle;
+      $theme = props.$theme;
   var colors = $theme.colors;
 
   if ($disabled) {
-    if (isToggle) {
-      return colors.toggleFillDisabled;
-    }
-
     if ($checked || $isIndeterminate) {
       return colors.tickFillDisabled;
     } else {
       return colors.tickFill;
     }
-  } else if (($error || $isError) && ($isIndeterminate || $checked)) {
+  } else if ($error && ($isIndeterminate || $checked)) {
     if ($isActive) {
       return colors.tickFillErrorSelectedHoverActive;
     } else if ($isHovered) {
@@ -105,7 +95,7 @@ function getBackgroundColor(props) {
     } else {
       return colors.tickFillErrorSelected;
     }
-  } else if ($error || $isError) {
+  } else if ($error) {
     if ($isActive) {
       return colors.tickFillErrorHoverActive;
     } else if ($isHovered) {
@@ -123,11 +113,11 @@ function getBackgroundColor(props) {
     }
   } else {
     if ($isActive) {
-      return isToggle ? colors.sliderTrackFillActive : colors.tickFillActive;
+      return colors.tickFillActive;
     } else if ($isHovered) {
-      return isToggle ? colors.sliderTrackFillHover : colors.tickFillHover;
+      return colors.tickFillHover;
     } else {
-      return isToggle ? colors.toggleTrackFill : colors.tickFill;
+      return colors.tickFill;
     }
   }
 }
@@ -155,14 +145,13 @@ Root.displayName = "Root";
 var Checkmark = (0, _index.styled)('span', function (props) {
   var $checked = props.$checked,
       $disabled = props.$disabled,
-      $isError = props.$isError,
       $error = props.$error,
       $isIndeterminate = props.$isIndeterminate,
       $theme = props.$theme,
       $isFocusVisible = props.$isFocusVisible;
   var sizing = $theme.sizing,
       animation = $theme.animation;
-  var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $isError || $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
+  var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var borderRadius = $theme.borders.inputBorderRadius;
@@ -210,11 +199,9 @@ var Checkmark = (0, _index.styled)('span', function (props) {
 exports.Checkmark = Checkmark;
 Checkmark.displayName = "Checkmark";
 var Label = (0, _index.styled)('div', function (props) {
-  var $theme = props.$theme,
-      $checkmarkType = props.$checkmarkType;
+  var $theme = props.$theme;
   var typography = $theme.typography;
   return _objectSpread(_objectSpread(_objectSpread({
-    flex: $checkmarkType === _constants.STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle'
   }, getLabelPadding(props)), {}, {
     color: getLabelColor(props)
@@ -237,140 +224,56 @@ var Input = (0, _index.styled)('input', {
 exports.Input = Input;
 Input.displayName = "Input";
 var Toggle = (0, _index.styled)('div', function (props) {
-  if (props.$checkmarkType === _constants.STYLE_TYPE.toggle) {
-    var borderRadius = props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null;
-    return _objectSpread(_objectSpread({}, (0, _index.expandBorderStyles)(props.$theme.borders.border300)), {}, {
-      alignItems: 'center',
-      backgroundColor: props.$theme.colors.mono100,
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
-      borderBottomRightRadius: borderRadius,
-      borderBottomLeftRadius: borderRadius,
-      boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$theme.lighting.shadow400,
-      outline: 'none',
-      display: 'flex',
-      justifyContent: 'center',
-      height: props.$theme.sizing.scale800,
-      width: props.$theme.sizing.scale800
-    });
+  var backgroundColor = props.$theme.colors.toggleFill;
+
+  if (props.$disabled) {
+    backgroundColor = props.$theme.colors.toggleFillDisabled;
+  } else if (props.$checked && props.$error) {
+    backgroundColor = props.$theme.colors.tickFillErrorSelected;
+  } else if (props.$checked) {
+    backgroundColor = props.$theme.colors.toggleFillChecked;
   }
 
-  if (props.$checkmarkType === _constants.STYLE_TYPE.toggle_round) {
-    var backgroundColor = props.$theme.colors.toggleFill;
-
-    if (props.$disabled) {
-      backgroundColor = props.$theme.colors.toggleFillDisabled;
-    } else if (props.$checked && (props.$error || props.$isError)) {
-      backgroundColor = props.$theme.colors.borderError;
-    } else if (props.$checked) {
-      backgroundColor = props.$theme.colors.toggleFillChecked;
-    }
-
-    return {
-      backgroundColor: backgroundColor,
-      borderTopLeftRadius: '50%',
-      borderTopRightRadius: '50%',
-      borderBottomRightRadius: '50%',
-      borderBottomLeftRadius: '50%',
-      boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$isHovered && !props.$disabled ? props.$theme.lighting.shadow500 : props.$theme.lighting.shadow400,
-      outline: 'none',
-      height: props.$theme.sizing.scale700,
-      width: props.$theme.sizing.scale700,
-      transform: props.$checked ? "translateX(".concat(props.$theme.direction === 'rtl' ? '-100%' : '100%', ")") : null,
-      transition: "transform ".concat(props.$theme.animation.timing200)
-    };
-  }
-
-  return {};
+  return {
+    backgroundColor: backgroundColor,
+    borderTopLeftRadius: '50%',
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+    borderBottomLeftRadius: '50%',
+    boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$isHovered && !props.$disabled ? props.$theme.lighting.shadow500 : props.$theme.lighting.shadow400,
+    outline: 'none',
+    height: props.$theme.sizing.scale700,
+    width: props.$theme.sizing.scale700,
+    transform: props.$checked ? "translateX(".concat(props.$theme.direction === 'rtl' ? '-100%' : '100%', ")") : null,
+    transition: "transform ".concat(props.$theme.animation.timing200)
+  };
 });
 exports.Toggle = Toggle;
 Toggle.displayName = "Toggle";
-var ToggleInner = (0, _index.styled)('div', function (props) {
-  if (props.$checkmarkType === _constants.STYLE_TYPE.toggle) {
-    // eslint-disable-next-line no-inner-declarations
-    var backgroundColor = function backgroundColor() {
-      if (props.$disabled) {
-        return props.$theme.colors.sliderHandleInnerFillDisabled;
-      }
-
-      if (props.$isActive && props.$checked) {
-        return props.$theme.colors.sliderHandleInnerFillSelectedActive;
-      }
-
-      if (props.$isHovered && props.$checked) {
-        return props.$theme.colors.sliderHandleInnerFillSelectedHover;
-      }
-
-      return props.$theme.colors.toggleTrackFill;
-    };
-
-    return {
-      height: props.$theme.sizing.scale300,
-      width: props.$theme.sizing.scale0,
-      borderTopLeftRadius: props.$theme.borders.radius100,
-      borderTopRightRadius: props.$theme.borders.radius100,
-      borderBottomRightRadius: props.$theme.borders.radius100,
-      borderBottomLeftRadius: props.$theme.borders.radius100,
-      backgroundColor: backgroundColor()
-    };
-  }
-
-  if (props.$checkmarkType === _constants.STYLE_TYPE.toggle_round) {
-    return {};
-  }
-
-  return {};
-});
-exports.ToggleInner = ToggleInner;
-ToggleInner.displayName = "ToggleInner";
 var ToggleTrack = (0, _index.styled)('div', function (props) {
-  if (props.$checkmarkType === _constants.STYLE_TYPE.toggle) {
-    var borderRadius = props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null;
-    return {
-      alignItems: 'center',
-      backgroundColor: getBackgroundColor(props),
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
-      borderBottomRightRadius: borderRadius,
-      borderBottomLeftRadius: borderRadius,
-      display: 'flex',
-      height: props.$theme.sizing.scale600,
-      justifyContent: props.$checked ? 'flex-end' : 'flex-start',
-      marginTop: props.$theme.sizing.scale100,
-      marginBottom: props.$theme.sizing.scale100,
-      marginLeft: props.$theme.sizing.scale100,
-      marginRight: props.$theme.sizing.scale100,
-      width: props.$theme.sizing.scale1000
-    };
-  }
-
-  if (props.$checkmarkType === _constants.STYLE_TYPE.toggle_round) {
-    var backgroundColor = props.$theme.colors.toggleTrackFill;
-
-    if (props.$disabled) {
-      backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
-    } else if ((props.$error || props.$isError) && props.$checked) {
-      backgroundColor = props.$theme.colors.tickFillError;
-    }
+  var backgroundColor = props.$theme.colors.toggleTrackFill;
 
-    return {
-      alignItems: 'center',
-      backgroundColor: backgroundColor,
-      borderTopLeftRadius: '7px',
-      borderTopRightRadius: '7px',
-      borderBottomRightRadius: '7px',
-      borderBottomLeftRadius: '7px',
-      display: 'flex',
-      height: props.$theme.sizing.scale550,
-      marginTop: props.$theme.sizing.scale200,
-      marginBottom: props.$theme.sizing.scale100,
-      marginLeft: props.$theme.sizing.scale200,
-      marginRight: props.$theme.sizing.scale100,
-      width: props.$theme.sizing.scale1000
-    };
+  if (props.$disabled) {
+    backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
+  } else if (props.$error && props.$checked) {
+    backgroundColor = props.$theme.colors.tickFillError;
   }
 
-  return {};
+  return {
+    alignItems: 'center',
+    backgroundColor: backgroundColor,
+    borderTopLeftRadius: '7px',
+    borderTopRightRadius: '7px',
+    borderBottomRightRadius: '7px',
+    borderBottomLeftRadius: '7px',
+    display: 'flex',
+    height: props.$theme.sizing.scale550,
+    marginTop: props.$theme.sizing.scale200,
+    marginBottom: props.$theme.sizing.scale100,
+    marginLeft: props.$theme.sizing.scale200,
+    marginRight: props.$theme.sizing.scale100,
+    width: props.$theme.sizing.scale1000
+  };
 });
 exports.ToggleTrack = ToggleTrack;
 ToggleTrack.displayName = "ToggleTrack";