@zohodesk/components 1.0.0-temp-219.3 → 1.0.0-temp-229

package/README.md

@@ -2,6 +2,19 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.1
+
+- **Switch(v1)** - labelPlacement top | bottom alignment and hover style issue fixed.
+
+# 1.4.0
+
+- **Switch(v1)** - Existing v1 Switch moved to depreacated folder and all New component Switch created with required accessibility and customization.
+- Theme entry for component_v1 added.
+- **LibraryContext** - `shouldIndicateSwitchState` key added for Switch component.
+
+# 1.3.5
+
+- **AppContainer** - Memory leak issue resolved.
 
 # 1.3.4
 

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='dark'] {
+	/* switch */
+	--zdt_v1_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_hover_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_thumb_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_onLabel: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_offLabel: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='light'] {
+	/* switch */
+	--zdt_v1_switch_track_on_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_on_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_hover_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_thumb_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_offLabel: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_offLabel_hover: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='pureDark'] {
+	/* switch */
+	--zdt_v1_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_bg: hsla(0, 0.00%, calc(20.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_hover_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_thumb_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_offLabel: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/es/AppContainer/AppContainer.js

@@ -81,12 +81,13 @@ export default class AppContainer extends React.Component {
 
     if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
-      setLibraryConfig({
-        getTooltipContainer: () => null
-      });
     }
+
+    setLibraryConfig({
+      getTooltipContainer: () => null
+    });
   }
 
   render() {

package/es/Card/Card.js

@@ -96,7 +96,9 @@ export default class Card extends Component {
     this.to = from + 3 * limit;
     this.isFetching = false;
     this.lastScrollTop = 0;
-    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    this.onScroll = this.onScroll.bind(this);
+    this.setScrollRef = this.setScrollRef.bind(this);
+    this.childEleRef = null; //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
   }
 
@@ -127,7 +129,8 @@ export default class Card extends Component {
       scrollAt,
       noNeedUpScroll,
       // isScrollShadow,
-      isPercentageScroll
+      isPercentageScroll,
+      isRecentOnTop
     } = this.props;
 
     if (scrollTop > this.lastScrollTop) {
@@ -139,9 +142,12 @@ export default class Card extends Component {
     this.lastScrollTop = scrollTop;
 
     if (fetchData && !this.isFetching) {
-      if (this.scrollDirection === 'down' && !noMoreData) {
+      const nextFetchDirection = isRecentOnTop ? 'down' : 'up';
+
+      if (this.scrollDirection === nextFetchDirection && !noMoreData) {
         const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+        const scrolledUpPercentage = (scrollHeight - scrollTop) / (scrollHeight - scrollAt) * 100;
+        const prefetch = isRecentOnTop ? isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight : isPercentageScroll ? scrolledUpPercentage >= getLibraryConfig('scrollFetchLimit') : scrollTop <= scrollAt;
 
         if (prefetch) {
           this.isFetching = true;
@@ -153,7 +159,9 @@ export default class Card extends Component {
           });
         }
       } else {
-        if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+        const prefetch = isRecentOnTop ? 0 >= scrollTop - scrollAt : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+
+        if (prefetch && this.from !== 0 && !noNeedUpScroll) {
           this.isFetching = true;
           fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(() => {
             this.to = this.to - this.limit;
@@ -166,9 +174,12 @@ export default class Card extends Component {
     }
 
     if (fetchData && !noNeedUpScroll) {
-      if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+      const topFetch = isRecentOnTop ? !noNeedUpScroll : !noMoreData;
+      const bottomFetch = isRecentOnTop ? !noMoreData : !noNeedUpScroll;
+
+      if (this.from !== 0 && scrollTop === 0 && topFetch) {
         scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+      } else if (scrollHeight === scrollTop + offsetHeight && bottomFetch) {
         scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
       }
     } // if (isScrollShadow) {
@@ -187,6 +198,21 @@ export default class Card extends Component {
   // }
 
 
+  setScrollRef(el) {
+    const {
+      scrollAt,
+      isRecentOnTop
+    } = this.props;
+
+    if (el && !isRecentOnTop) {
+      requestAnimationFrame(() => {
+        el.scrollTop = el.scrollHeight + Number(scrollAt);
+      });
+    }
+
+    this.childEleRef && this.childEleRef(el);
+  }
+
   render() {
     let {
       onClick,
@@ -220,6 +246,7 @@ export default class Card extends Component {
           isScroll
         });
       } else if (child.type === CardContent || this.props.childTypes && child.type === this.props.childTypes.cardContent) {
+        this.childEleRef = child.props.eleRef;
         return /*#__PURE__*/React.createElement(Box, {
           id: htmlId,
           role: role,
@@ -227,7 +254,7 @@ export default class Card extends Component {
           scroll: child.props.scroll,
           preventParentScroll: child.props.preventParentScroll,
           onScroll: this.onScroll,
-          eleRef: child.props.eleRef,
+          eleRef: this.setScrollRef,
           isScrollAttribute: child.props.isScrollAttribute,
           dataId: child.props.dataId,
           shrink: child.props.shrink,

package/es/Card/props/defaultProps.js

@@ -4,7 +4,8 @@ export const Card_defaultProps = {
   onClick: null,
   scrollAt: '10',
   a11y: {},
-  isPercentageScroll: false
+  isPercentageScroll: false,
+  isRecentOnTop: true
 };
 export const CardHeader_defaultProps = {
   dataId: 'CardHeader',

package/es/Card/props/propTypes.js

@@ -38,7 +38,8 @@ export const Card_propTypes = {
     role: PropTypes.string
   }),
   isPercentageScroll: PropTypes.bool,
-  eleRef: PropTypes.func
+  eleRef: PropTypes.func,
+  isRecentOnTop: PropTypes.bool
 };
 export const CardFooter_propTypes = {
   children: PropTypes.node,

package/es/CheckBox/CheckBox.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
 import { defaultProps } from "./props/defaultProps";
-import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
 import Label from "../Label/Label";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
 import style from "./CheckBox.module.css";
-
-class CheckBox extends React.Component {
+export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
@@ -165,15 +163,10 @@ class CheckBox extends React.Component {
   }
 
 }
-
 CheckBox.defaultProps = defaultProps;
 CheckBox.propTypes = propTypes; // if (__DOCS__) {
 //   CheckBox.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
-
-export default withComponentRegistrar(CheckBox, {
-  name: 'ZDC_CheckBox'
-});
+// }

package/es/Label/Label.js

@@ -4,11 +4,9 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
 import style from "./Label.module.css";
 import colors from "./LabelColors.module.css";
-
-class Label extends React.Component {
+export default class Label extends React.Component {
   render() {
     let {
       text,
@@ -44,15 +42,10 @@ class Label extends React.Component {
   }
 
 }
-
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes; // if (__DOCS__) {
 //   Label.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
-
-export default withComponentRegistrar(Label, {
-  name: 'ZDC_Label'
-});
+// }

package/es/Provider/LibraryContext.js

@@ -9,13 +9,15 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
+    shouldIndicateSwitchState,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction,
     coloredTagVariant,
-    hasTagColorInheritedToText
+    hasTagColorInheritedToText,
+    shouldIndicateSwitchState
   });
 
   function setGlobalContext(key, data) {
@@ -38,12 +40,14 @@ LibraryContextProvider.propTypes = {
   isReducedMotion: PropTypes.bool,
   coloredTagVariant: PropTypes.oneOf(['bold', 'subtle', 'minimal']),
   hasTagColorInheritedToText: PropTypes.bool,
-  direction: PropTypes.string
+  direction: PropTypes.string,
+  shouldIndicateSwitchState: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
   direction: getLibraryConfig('direction'),
   coloredTagVariant: 'bold',
-  hasTagColorInheritedToText: true
+  hasTagColorInheritedToText: true,
+  shouldIndicateSwitchState: false
 };
 export default LibraryContextProvider;

package/es/deprecated/Switch/Switch.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from "../../v1/Layout";
+import Label from "../../v1/Label/Label";
+import style from "../../Switch/Switch.module.css";
+
+const Switch = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    size,
+    text,
+    labelSize,
+    labelPalette,
+    title,
+    disableTitle,
+    dataId,
+    dataSelectorId,
+    customClass,
+    customProps
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  let {
+    SwitchProps = {},
+    LabelProps = {}
+  } = customProps;
+  let {
+    customSwitchWrap = '',
+    customSwitch = '',
+    customSwitchSize = '',
+    customLabel = ''
+  } = customClass;
+  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    isCover: false,
+    alignBox: "row",
+    isInline: true,
+    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
+    "data-title": disabled ? disableTitle : title,
+    "aria-checked": checked,
+    role: "switch",
+    dataSelectorId: dataSelectorId,
+    ...SwitchProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${style[size]} ${customSwitchSize}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: `${style.input} ${checked ? style.checked : ''}`,
+    name: name,
+    value: value,
+    checked: checked,
+    disabled: disabled,
+    readOnly: isReadOnly,
+    onClick: !disabled || !isReadOnly ? onChange : null
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    tabIndex: isReadOnly || disabled ? '-1' : '0'
+  })), text && /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    palette: labelPalette,
+    id: id,
+    size: labelSize,
+    type: "subtitle",
+    onClick: !disabled || !isReadOnly ? onChange : null,
+    customClass: customLabel,
+    ...LabelProps
+  }));
+};
+
+Switch.defaultProps = defaultProps;
+Switch.propTypes = propTypes;
+export default Switch; // if (__DOCS__) {
+//   Switch.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/deprecated/Switch/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'switch'
+};

package/es/deprecated/Switch/props/propTypes.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customSwitchWrap: PropTypes.string,
+    customSwitch: PropTypes.string,
+    customSwitchSize: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    SwitchProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/v1/Switch/Switch.js

@@ -1,94 +1,138 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Label from "../Label/Label";
-import style from "../../Switch/Switch.module.css";
+import React from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils'; // hooks
+
+import useSwitch from "./useSwitch"; // constants
+
+import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./contants"; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Label from "../../Label/Label"; // css
+
+import defaultStyle from "./css/Switch_v1.module.css";
 
 const Switch = props => {
-  let {
-    id,
+  const {
     name,
     value,
-    checked,
-    disabled,
-    isReadOnly,
+    id,
     size,
-    text,
+    isDisabled,
+    isReadOnly,
+    hasStateIndication,
+    label,
+    labelPlacement,
     labelSize,
-    labelPalette,
     title,
-    disableTitle,
-    dataId,
-    dataSelectorId,
-    customClass,
-    customProps
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    i18nKeys,
+    customId,
+    testId,
+    customStyle
   } = props;
-
-  function onChange(e) {
-    const {
-      onChange
-    } = props;
-    onChange && onChange(!checked, e);
-  }
-
-  let {
-    SwitchProps = {},
-    LabelProps = {}
+  const {
+    container: customProps_container,
+    label: customProps_label
   } = customProps;
-  let {
-    customSwitchWrap = '',
-    customSwitch = '',
-    customSwitchSize = '',
-    customLabel = ''
-  } = customClass;
-  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-  return /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    isCover: false,
-    alignBox: "row",
-    isInline: true,
-    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
-    "data-title": disabled ? disableTitle : title,
-    "aria-checked": checked,
-    role: "switch",
-    dataSelectorId: dataSelectorId,
-    ...SwitchProps
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: `${style[size]} ${customSwitchSize}`
-  }, /*#__PURE__*/React.createElement("input", {
+  const {
+    container: tagAttributes_container,
+    switch: tagAttributes_switch
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    switch: a11yAttributes_switch = {},
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    ariaDisabled = isDisabled,
+    ariaLabel,
+    ...restA11yAttributes_switch
+  } = a11yAttributes_switch;
+  const {
+    readOnlyAriaLabel: i18n_readOnlyAriaLabel = 'Read Only'
+  } = i18nKeys;
+  const readOnlyAriaLabel = label ? `${label}, ${i18n_readOnlyAriaLabel}` : i18n_readOnlyAriaLabel;
+  const {
+    isChecked,
+    handleChange
+  } = useSwitch(props);
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    containerClass,
+    labelClass,
+    trackClass,
+    trackWrapperClass,
+    thumbClass,
+    labelIndicationClass
+  } = cssJSLogic({
+    props: { ...props,
+      isChecked
+    },
+    style
+  });
+  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+    $ui_displayMode: "inline",
+    $ui_direction: ITEMS_DIRECTION[labelPlacement],
+    $ui_alignItems: ALIGN_ITEMS[labelPlacement],
+    $tagAttributes_container: { ...tagAttributes_container,
+      'data-selector-id': customId
+    },
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass,
+    $a11yAttributes_container: a11yAttributes_container
+  }, label && /*#__PURE__*/React.createElement(Label, { ...customProps_label,
+    text: label,
+    palette: isDisabled ? 'primary' : 'default',
+    size: labelSize,
+    htmlFor: id,
+    customClass: labelClass,
+    a11y: a11yAttributes_label,
+    clipped: true,
+    title: label
+  }), /*#__PURE__*/React.createElement(Flex, {
+    $flag_shrink: false,
+    $ui_className: trackWrapperClass
+  }, /*#__PURE__*/React.createElement("input", { ...tagAttributes_switch,
+    ...restA11yAttributes_switch,
     type: "checkbox",
     id: id,
-    className: `${style.input} ${checked ? style.checked : ''}`,
     name: name,
     value: value,
-    checked: checked,
-    disabled: disabled,
-    readOnly: isReadOnly,
-    onClick: !disabled || !isReadOnly ? onChange : null
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
-    tabIndex: isReadOnly || disabled ? '-1' : '0'
-  })), text && /*#__PURE__*/React.createElement(Label, {
-    text: text,
-    palette: labelPalette,
-    id: id,
-    size: labelSize,
-    type: "subtitle",
-    onClick: !disabled || !isReadOnly ? onChange : null,
-    customClass: customLabel,
-    ...LabelProps
-  }));
+    checked: isChecked,
+    onChange: handleChange,
+    className: trackClass,
+    "data-title": title,
+    role: "switch",
+    "aria-disabled": ariaDisabled,
+    "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
+  }), /*#__PURE__*/React.createElement("svg", {
+    className: thumbClass,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: THUMB_RADIUS[size]
+  })), hasStateIndication ? /*#__PURE__*/React.createElement("svg", {
+    className: labelIndicationClass,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, isChecked ? /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "50%"
+  }) : /*#__PURE__*/React.createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: OFF_LABEL_RADIUS[size]
+  })) : null));
 };
 
+export default Switch;
 Switch.defaultProps = defaultProps;
-Switch.propTypes = propTypes;
-export default Switch; // if (__DOCS__) {
-//   Switch.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+Switch.propTypes = propTypes;