@zohodesk/components 1.0.0-temp-217.5 → 1.0.0-temp-199.9

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

@@ -1,10 +0,0 @@
-[data-mode='dark'] {
-	/* switch */
-	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_hover_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_thumb_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_on_indication_label: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_off_indication_label: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-}

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

@@ -1,10 +0,0 @@
-[data-mode='light'] {
-	/* switch */
-	--zdt_v2_switch_track_on_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_on_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_hover_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_on_indication_label: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_off_indication_label: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-}

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

@@ -1,10 +0,0 @@
-[data-mode='pureDark'] {
-	/* switch */
-	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_bg: hsla(0, 0.00%, calc(20.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_hover_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_on_indication_label: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_off_indication_label: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-}

package/es/components-v2/Switch/Switch.js

@@ -1,124 +0,0 @@
-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'; // constants
-
-import { offLabelRadius, thumbRadius } from "./contants"; // components
-
-import Flex from '@zohodesk/layout/es/Flex/Flex';
-import Label from "../../Label/Label"; // css
-
-import defaultStyle from "./css/Switch_v2.module.css";
-
-const Switch = props => {
-  const {
-    name,
-    value,
-    id,
-    size,
-    isChecked,
-    isDisabled,
-    isReadOnly,
-    onChange,
-    hasOnOffIndication,
-    labelText,
-    labelPalette,
-    labelPlacement,
-    labelSize,
-    title,
-    customProps_container,
-    customProps_label,
-    tagAttributes_container,
-    tagAttributes_switch,
-    a11yAttributes_container,
-    a11yAttributes_switch,
-    a11yAttributes_label,
-    customId,
-    testId,
-    customStyle
-  } = props;
-  const {
-    role = 'switch',
-    extraA11yAttributes_switch
-  } = a11yAttributes_switch;
-  const style = mergeStyle(defaultStyle, customStyle);
-  const {
-    containerClass,
-    labelClass,
-    trackClass,
-    trackWrapperClass,
-    thumbClass,
-    labelIndicationClass
-  } = cssJSLogic({
-    props,
-    style
-  });
-  return /*#__PURE__*/React.createElement(Flex, {
-    $ui_displayMode: "inline",
-    $ui_direction: labelPlacement === 'left' ? 'row' : 'rowReverse',
-    $ui_alignItems: "center",
-    $tagAttributes_container: {
-      'data-selector-id': customId,
-      ...tagAttributes_container
-    },
-    testId: testId,
-    customId: customId,
-    customStyle: {
-      inlineFlex: containerClass
-    },
-    $a11yAttributes_container: a11yAttributes_container,
-    ...customProps_container
-  }, labelText && /*#__PURE__*/React.createElement(Label, {
-    text: labelText,
-    palette: labelPalette,
-    size: labelSize,
-    htmlFor: id,
-    customClass: labelClass,
-    a11y: a11yAttributes_label,
-    ...customProps_label
-  }), /*#__PURE__*/React.createElement(Flex, {
-    $flag_shrink: false,
-    customStyle: {
-      noShrink: trackWrapperClass
-    }
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: id,
-    name: name,
-    value: value,
-    checked: isChecked,
-    disabled: isDisabled,
-    readOnly: isReadOnly,
-    onChange: !isDisabled || !isReadOnly ? onChange : null,
-    role: role,
-    className: trackClass,
-    "data-title": title,
-    ...tagAttributes_switch,
-    ...extraA11yAttributes_switch
-  }), /*#__PURE__*/React.createElement("svg", {
-    className: thumbClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: thumbRadius[size]
-  })), hasOnOffIndication ? /*#__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: offLabelRadius[size]
-  })) : null));
-};
-
-export default Switch;
-Switch.defaultProps = defaultProps;
-Switch.propTypes = propTypes;

package/es/components-v2/Switch/contants/index.js

@@ -1,10 +0,0 @@
-export const offLabelRadius = {
-  small: '35.7%',
-  medium: '37.5%',
-  large: '38.9%'
-};
-export const thumbRadius = {
-  small: '40%',
-  medium: '42.85%',
-  large: '44.45%'
-};

package/es/components-v2/Switch/css/Switch_v2.module.css

@@ -1,121 +0,0 @@
-.container {
-    --switch-cursor: pointer;
-    gap: var(--zd_size4) ;
-}
-.small {
-    --switch-track-width: var(--zd_size22);
-    --switch-track-height: var(--zd_size12);
-    --switch-track-border-radius: 8px;
-    --switch-thumb-size: var(--zd_size10);
-    --switch-onLabel-height: var(--zd_size6);
-    --switch-onLabel-left: var(--zd_size5);
-    --switch-offLabel-size: var(--zd_size7);
-    --switch-offLabel-right: var(--zd_size2);
-}
-.medium {
-    --switch-track-width: var(--zd_size28);
-    --switch-track-height: var(--zd_size16);
-    --switch-track-border-radius: 16px;
-    --switch-thumb-size: var(--zd_size14);
-    --switch-onLabel-height: var(--zd_size8);
-    --switch-onLabel-left: var(--zd_size6);
-    --switch-offLabel-size: var(--zd_size8);
-    --switch-offLabel-right: var(--zd_size3);
-}
-.large {
-    --switch-track-width: var(--zd_size34);
-    --switch-track-height: var(--zd_size20);
-    --switch-track-border-radius: 10px;
-    --switch-thumb-size: var(--zd_size18);
-    --switch-onLabel-height: var(--zd_size11);
-    --switch-onLabel-left: var(--zd_size7);
-    --switch-offLabel-size: var(--zd_size9);
-    --switch-offLabel-right: var(--zd_size4);
-}
-.checked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_bg);
-    --switch-thumb-translateX-value: 0
-}
-.unChecked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_bg);
-    --switch-thumb-translateX-value: calc(var(--switch-thumb-size) + 2px - var(--switch-track-width));
-}
-.disabled {
-    --switch-cursor: not-allowed;
-    opacity: 0.4;
-}
-.trackWrapper {
-    position: relative;
-}
-.track {
-    appearance: none;
-    display: block;
-    position: relative;
-    height: var(--switch-track-height);
-    width: var(--switch-track-width);
-    margin: 0 ;
-    border-radius: var(--switch-track-border-radius);
-    background-color: var(--switch-track-background-color);
-    cursor: var(--switch-cursor);
-}
-.checked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_hover_bg);
-}
-.unChecked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_hover_bg);
-}
-.commonSvg {
-    display: block;
-    position: absolute;
-    pointer-events: none;
-    top: 50% ;
-}
-.thumb {
-    transition: transform var(--zd_transition2);
-    fill: var(--zdt_v2_switch_thumb_bg);   
-    height: var(--switch-thumb-size);
-    width: var(--switch-thumb-size);
-    transform: translateX(var(--switch-thumb-translateX-value)) translateY(-50%);
-}
-[dir=ltr] .thumb {
-    right: var(--zd_size1) ;
-}
-[dir=rtl] .thumb {
-    left: var(--zd_size1) ;
-}
-.label {
-    cursor: var(--switch-cursor);
-}
-.onLabel {
-    height: var(--switch-onLabel-height);
-    fill: var(--zdt_v2_switch_on_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .onLabel {
-    left: var(--switch-onLabel-left);
-}
-[dir=rtl] .onLabel {
-    right: var(--switch-onLabel-left);
-}
-.offLabel {
-    height: var(--switch-offLabel-size);
-    width: var(--switch-offLabel-size);
-    fill: transparent;
-    stroke: var(--zdt_v2_switch_off_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .offLabel {
-    right: var(--switch-offLabel-right);
-}
-[dir=rtl] .offLabel {
-    left: var(--switch-offLabel-right);
-}
-.small .onLabel {
-    width: 1.2px;
-}
-.medium .onLabel {
-    width: 1.4px;
-}
-.large .onLabel {
-    width: 1.6px;
-}

package/es/components-v2/Switch/css/cssJSLogic.js

@@ -1,45 +0,0 @@
-import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
-  const {
-    size,
-    isChecked,
-    isDisabled
-  } = props;
-  let containerClass = compileClassNames({
-    [style.container]: true,
-    [style[size]]: true,
-    [style.checked]: isChecked,
-    [style.unChecked]: !isChecked,
-    [style.disabled]: isDisabled
-  });
-  let trackClass = compileClassNames({
-    [style.track]: true
-  });
-  let labelClass = compileClassNames({
-    [style.label]: true
-  });
-  let trackWrapperClass = compileClassNames({
-    [style.trackWrapper]: true
-  });
-  let thumbClass = compileClassNames({
-    [style.thumb]: true,
-    [style.commonSvg]: true
-  });
-  let labelIndicationClass = compileClassNames({
-    [style.onLabel]: isChecked,
-    [style.offLabel]: !isChecked,
-    [style.commonSvg]: true
-  });
-  return {
-    containerClass,
-    trackClass,
-    labelClass,
-    trackWrapperClass,
-    thumbClass,
-    labelIndicationClass
-  };
-}

package/es/components-v2/Switch/props/defaultProps.js

@@ -1,19 +0,0 @@
-export default {
-  size: 'medium',
-  isChecked: false,
-  isDisabled: false,
-  isReadOnly: false,
-  hasOnOffIndication: true,
-  labelPalette: 'default',
-  labelPlacement: 'left',
-  labelSize: 'medium',
-  customProps_container: {},
-  customProps_label: {},
-  tagAttributes_container: {},
-  tagAttributes_switch: {},
-  a11yAttributes_container: {},
-  a11yAttributes_switch: {},
-  a11yAttributes_label: {},
-  a11yAttributes: {},
-  customStyle: {}
-};

package/es/components-v2/Switch/props/propTypes.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-export default {
-  name: PropTypes.string,
-  value: PropTypes.string,
-  id: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  isChecked: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onChange: PropTypes.func,
-  hasOnOffIndication: PropTypes.bool,
-  labelText: PropTypes.string,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
-  labelPlacement: PropTypes.oneOf(['left', 'right']),
-  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
-  title: PropTypes.string,
-  customProps_container: PropTypes.object,
-  customProps_label: PropTypes.object,
-  tagAttributes_container: PropTypes.object,
-  tagAttributes_switch: PropTypes.object,
-  a11yAttributes_container: PropTypes.object,
-  a11yAttributes_switch: PropTypes.object,
-  a11yAttributes_label: PropTypes.object,
-  customId: PropTypes.string,
-  testId: PropTypes.string,
-  customStyle: PropTypes.object
-};

package/lib/components-v2/Switch/Switch.js

@@ -1,138 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
-var _propTypes = require("./props/propTypes");
-
-var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
-
-var _utils = require("@zohodesk/utils");
-
-var _contants = require("./contants");
-
-var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
-
-var _Label = _interopRequireDefault(require("../../Label/Label"));
-
-var _Switch_v2Module = _interopRequireDefault(require("./css/Switch_v2.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Switch = function Switch(props) {
-  var name = props.name,
-      value = props.value,
-      id = props.id,
-      size = props.size,
-      isChecked = props.isChecked,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
-      onChange = props.onChange,
-      hasOnOffIndication = props.hasOnOffIndication,
-      labelText = props.labelText,
-      labelPalette = props.labelPalette,
-      labelPlacement = props.labelPlacement,
-      labelSize = props.labelSize,
-      title = props.title,
-      customProps_container = props.customProps_container,
-      customProps_label = props.customProps_label,
-      tagAttributes_container = props.tagAttributes_container,
-      tagAttributes_switch = props.tagAttributes_switch,
-      a11yAttributes_container = props.a11yAttributes_container,
-      a11yAttributes_switch = props.a11yAttributes_switch,
-      a11yAttributes_label = props.a11yAttributes_label,
-      customId = props.customId,
-      testId = props.testId,
-      customStyle = props.customStyle;
-  var _a11yAttributes_switc = a11yAttributes_switch.role,
-      role = _a11yAttributes_switc === void 0 ? 'switch' : _a11yAttributes_switc,
-      extraA11yAttributes_switch = a11yAttributes_switch.extraA11yAttributes_switch;
-  var style = (0, _utils.mergeStyle)(_Switch_v2Module["default"], customStyle);
-
-  var _cssJSLogic = (0, _cssJSLogic2["default"])({
-    props: props,
-    style: style
-  }),
-      containerClass = _cssJSLogic.containerClass,
-      labelClass = _cssJSLogic.labelClass,
-      trackClass = _cssJSLogic.trackClass,
-      trackWrapperClass = _cssJSLogic.trackWrapperClass,
-      thumbClass = _cssJSLogic.thumbClass,
-      labelIndicationClass = _cssJSLogic.labelIndicationClass;
-
-  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
-    $ui_displayMode: "inline",
-    $ui_direction: labelPlacement === 'left' ? 'row' : 'rowReverse',
-    $ui_alignItems: "center",
-    $tagAttributes_container: _objectSpread({
-      'data-selector-id': customId
-    }, tagAttributes_container),
-    testId: testId,
-    customId: customId,
-    customStyle: {
-      inlineFlex: containerClass
-    },
-    $a11yAttributes_container: a11yAttributes_container
-  }, customProps_container), labelText && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
-    text: labelText,
-    palette: labelPalette,
-    size: labelSize,
-    htmlFor: id,
-    customClass: labelClass,
-    a11y: a11yAttributes_label
-  }, customProps_label)), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    $flag_shrink: false,
-    customStyle: {
-      noShrink: trackWrapperClass
-    }
-  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
-    type: "checkbox",
-    id: id,
-    name: name,
-    value: value,
-    checked: isChecked,
-    disabled: isDisabled,
-    readOnly: isReadOnly,
-    onChange: !isDisabled || !isReadOnly ? onChange : null,
-    role: role,
-    className: trackClass,
-    "data-title": title
-  }, tagAttributes_switch, extraA11yAttributes_switch)), /*#__PURE__*/_react["default"].createElement("svg", {
-    className: thumbClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: _contants.thumbRadius[size]
-  })), hasOnOffIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
-    className: labelIndicationClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "50%"
-  }) : /*#__PURE__*/_react["default"].createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: _contants.offLabelRadius[size]
-  })) : null));
-};
-
-var _default = Switch;
-exports["default"] = _default;
-Switch.defaultProps = _defaultProps["default"];
-Switch.propTypes = _propTypes.propTypes;

package/lib/components-v2/Switch/contants/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.thumbRadius = exports.offLabelRadius = void 0;
-var offLabelRadius = {
-  small: '35.7%',
-  medium: '37.5%',
-  large: '38.9%'
-};
-exports.offLabelRadius = offLabelRadius;
-var thumbRadius = {
-  small: '40%',
-  medium: '42.85%',
-  large: '44.45%'
-};
-exports.thumbRadius = thumbRadius;

package/lib/components-v2/Switch/css/Switch_v2.module.css

@@ -1,121 +0,0 @@
-.container {
-    --switch-cursor: pointer;
-    gap: var(--zd_size4) ;
-}
-.small {
-    --switch-track-width: var(--zd_size22);
-    --switch-track-height: var(--zd_size12);
-    --switch-track-border-radius: 8px;
-    --switch-thumb-size: var(--zd_size10);
-    --switch-onLabel-height: var(--zd_size6);
-    --switch-onLabel-left: var(--zd_size5);
-    --switch-offLabel-size: var(--zd_size7);
-    --switch-offLabel-right: var(--zd_size2);
-}
-.medium {
-    --switch-track-width: var(--zd_size28);
-    --switch-track-height: var(--zd_size16);
-    --switch-track-border-radius: 16px;
-    --switch-thumb-size: var(--zd_size14);
-    --switch-onLabel-height: var(--zd_size8);
-    --switch-onLabel-left: var(--zd_size6);
-    --switch-offLabel-size: var(--zd_size8);
-    --switch-offLabel-right: var(--zd_size3);
-}
-.large {
-    --switch-track-width: var(--zd_size34);
-    --switch-track-height: var(--zd_size20);
-    --switch-track-border-radius: 10px;
-    --switch-thumb-size: var(--zd_size18);
-    --switch-onLabel-height: var(--zd_size11);
-    --switch-onLabel-left: var(--zd_size7);
-    --switch-offLabel-size: var(--zd_size9);
-    --switch-offLabel-right: var(--zd_size4);
-}
-.checked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_bg);
-    --switch-thumb-translateX-value: 0
-}
-.unChecked {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_bg);
-    --switch-thumb-translateX-value: calc(var(--switch-thumb-size) + 2px - var(--switch-track-width));
-}
-.disabled {
-    --switch-cursor: not-allowed;
-    opacity: 0.4;
-}
-.trackWrapper {
-    position: relative;
-}
-.track {
-    appearance: none;
-    display: block;
-    position: relative;
-    height: var(--switch-track-height);
-    width: var(--switch-track-width);
-    margin: 0 ;
-    border-radius: var(--switch-track-border-radius);
-    background-color: var(--switch-track-background-color);
-    cursor: var(--switch-cursor);
-}
-.checked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_on_hover_bg);
-}
-.unChecked .track:not(:disabled):hover {
-    --switch-track-background-color: var(--zdt_v2_switch_track_off_hover_bg);
-}
-.commonSvg {
-    display: block;
-    position: absolute;
-    pointer-events: none;
-    top: 50% ;
-}
-.thumb {
-    transition: transform var(--zd_transition2);
-    fill: var(--zdt_v2_switch_thumb_bg);   
-    height: var(--switch-thumb-size);
-    width: var(--switch-thumb-size);
-    transform: translateX(var(--switch-thumb-translateX-value)) translateY(-50%);
-}
-[dir=ltr] .thumb {
-    right: var(--zd_size1) ;
-}
-[dir=rtl] .thumb {
-    left: var(--zd_size1) ;
-}
-.label {
-    cursor: var(--switch-cursor);
-}
-.onLabel {
-    height: var(--switch-onLabel-height);
-    fill: var(--zdt_v2_switch_on_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .onLabel {
-    left: var(--switch-onLabel-left);
-}
-[dir=rtl] .onLabel {
-    right: var(--switch-onLabel-left);
-}
-.offLabel {
-    height: var(--switch-offLabel-size);
-    width: var(--switch-offLabel-size);
-    fill: transparent;
-    stroke: var(--zdt_v2_switch_off_indication_label);
-    transform: translateY(-50%);
-}
-[dir=ltr] .offLabel {
-    right: var(--switch-offLabel-right);
-}
-[dir=rtl] .offLabel {
-    left: var(--switch-offLabel-right);
-}
-.small .onLabel {
-    width: 1.2px;
-}
-.medium .onLabel {
-    width: 1.4px;
-}
-.large .onLabel {
-    width: 1.6px;
-}