@zohodesk/components 1.0.0-temp-216 → 1.0.0-temp-217

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

@@ -71,11 +71,6 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
-	/* strikethrough buttons */
-	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
-	--zdt_success_strike: hsla(131, 64.42%, calc(68.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
-	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

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

@@ -71,11 +71,6 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 	
-	/* strikethrough buttons */
-	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
-	--zdt_success_strike: hsla(123, 60.37%, calc(57.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
-	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(10,115,235);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(38,169,66);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(229,119,23);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(26, 100.00%, calc(50.00% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(222,53,53);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(232,185,35);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

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

@@ -71,11 +71,6 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
-	/* strikethrough buttons */
-	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
-	--zdt_success_strike: hsla(131, 64.42%, calc(68.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
-	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -42,8 +42,4 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
-	
-	/* strikethrough_buttons */
-	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
-	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

package/es/Button/Button.js

@@ -1,5 +1,4 @@
-import React, { useContext } from 'react';
-import LibraryContext from '../Provider/LibraryContextInit';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import cssJSLogic from './css/cssJSLogic';
@@ -30,19 +29,13 @@ export default function Button(props) {
     a11y,
     id
   } = props;
-  const {
-    a11y_strikeThroughButtons
-  } = useContext(LibraryContext);
   const finalStyle = mergeStyle(style, customStyle);
-  const buttonProps = { ...props,
-    a11y_strikeThroughButtons
-  };
   const {
     buttonClass,
     loaderParentClass,
     loaderChildClass
   } = cssJSLogic({
-    props: buttonProps,
+    props,
     style: finalStyle
   });
   let statusLower = status.toLowerCase();

package/es/Button/css/Button.module.css

@@ -525,86 +525,4 @@
 
 .loader{
   color:var(--dot_mirror)
-}
-[dir=ltr] .primaryStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
-}
-[dir=rtl] .primaryStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
-}
-
-.primaryfilledStrike {
-  --button_border_color: var(--zdt_button_primaryfill_bg);
-}
-
-[dir=ltr] .primaryfilledStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
-}
-
-[dir=rtl] .primaryfilledStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
-}
-
-[dir=ltr] .dangerStrike {
-  background: repeating-linear-gradient(120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
-}
-
-[dir=rtl] .dangerStrike {
-  background: repeating-linear-gradient(-120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
-}
-
-.dangerfilledStrike {
-  --button_border_color: var(--zdt_button_danger_border);
-}
-
-[dir=ltr] .dangerfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
-}
-
-[dir=rtl] .dangerfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
-}
-
-[dir=ltr] .secondaryStrike {
-  background: repeating-linear-gradient(120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
-}
-
-[dir=rtl] .secondaryStrike {
-  background: repeating-linear-gradient(-120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
-}
-
-.secondaryfilledStrike {
-  --button_border_color: var(--zdt_button_secondaryfill_bg);
-}
-
-[dir=ltr] .secondaryfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
-}
-
-[dir=rtl] .secondaryfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
-}
-
-.tertiaryfilledStrike {
-  --button_border_color: var(--zdt_button_tertiaryfill_bg);
-}
-
-[dir=ltr] .tertiaryfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
-}
-
-[dir=rtl] .tertiaryfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
-}
-
-.successfilledStrike {
-  --button_border_color: var(--zdt_button_successfill_border);
-}
-
-[dir=ltr] .successfilledStrike {
-  background: repeating-linear-gradient(120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
-}
-
-[dir=rtl] .successfilledStrike {
-  background: repeating-linear-gradient(-120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
 }

package/es/Button/css/cssJSLogic.js

@@ -12,19 +12,15 @@ export default function cssJSLogic(_ref) {
     size,
     children,
     palette,
-    status,
-    disabled,
-    a11y_strikeThroughButtons
+    status
   } = props;
   let {
     customButton = '',
     customStatus = '',
     customStatusSize = ''
   } = customClass;
-  let strikeExcluded = ['plainprimary', 'plainsecondary'];
   let paletteLower = palette.toLowerCase();
   let statusLower = status.toLowerCase();
-  let strikeEnabled = !strikeExcluded.includes(paletteLower);
   let buttonClass = compileClassNames({
     [customButton]: !!customButton,
     [style.bold]: isBold,
@@ -34,7 +30,6 @@ export default function cssJSLogic(_ref) {
     [style[size.toLowerCase()]]: needAppearance && !children,
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
-    [style[`${paletteLower}Strike`]]: disabled && a11y_strikeThroughButtons && strikeEnabled,
     [style.loader]: !!needAppearance && statusLower !== 'none'
   });
   let loaderParentClass = compileClassNames({

package/es/Provider/LibraryContext.js

@@ -9,7 +9,7 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
-    a11y_strikeThroughButtons,
+    a11y_onOffLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
@@ -17,7 +17,7 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
-    a11y_strikeThroughButtons
+    a11y_onOffLabel
   });
 
   function setGlobalContext(key, data) {

package/es/Switch/Switch.js

@@ -3,6 +3,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container, Box } from '../Layout';
 import Label from '../Label/Label';
+import LibraryContext from '../Provider/LibraryContextInit';
 import style from './Switch.module.css';
 export default class Switch extends React.Component {
   constructor(props) {
@@ -18,7 +19,7 @@ export default class Switch extends React.Component {
     onChange && onChange(!checked, e);
   }
 
-  render() {
+  renderSwitch(context) {
     let {
       id,
       name,
@@ -48,6 +49,8 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+    const isOnOffLabelEnabled = context.a11y_onOffLabel;
+    const onOffLabelType = '';
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       isCover: false,
@@ -75,9 +78,26 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+      className: `${style.label} ${style[`${size}Label`]} ${customSwitch} ${onOffLabelType === 'labelOnTrack' && isOnOffLabelEnabled ? style.labelOnTrack : ''}`,
       tabIndex: isReadOnly || disabled ? '-1' : '0'
-    })), text && /*#__PURE__*/React.createElement(Label, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.thumb
+    }, isOnOffLabelEnabled && onOffLabelType === 'thumb' && /*#__PURE__*/React.createElement("div", {
+      className: style.onOffIndicationHolder
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication}`
+    }))), isOnOffLabelEnabled && /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: checked ? 'row' : 'row-reverse',
+      className: style.onOffLabel,
+      isCover: false
+    }, onOffLabelType === 'labelOnTrack' && /*#__PURE__*/React.createElement("div", {
+      className: style.onOffIndicationText
+    }, checked ? 'ON' : 'OFF'), isOnOffLabelEnabled && onOffLabelType === 'track' && /*#__PURE__*/React.createElement("div", {
+      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication} ${style.thumbIndication}`
+    })))), isOnOffLabelEnabled && onOffLabelType === 'labelSide' && /*#__PURE__*/React.createElement(Box, {
+      className: `${style.labelText} ${size === "switch_medium" ? style.mediumLabelText : style.smallLabelText}`
+    }, checked ? 'On' : 'Off'), text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       id: id,
@@ -89,6 +109,10 @@ export default class Switch extends React.Component {
     }));
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(LibraryContext.Consumer, null, context => this.renderSwitch(context));
+  }
+
 }
 Switch.defaultProps = defaultProps;
 Switch.propTypes = propTypes; // if (__DOCS__) {

package/es/Switch/Switch.module.css

@@ -37,7 +37,7 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-.label:after {
+.thumb {
   content: '';
   display: block;
   position: absolute;
@@ -46,14 +46,21 @@
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
+  left: var(--zd_size1) ;
+}
+.onOffIndicationHolder{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100% ;
 }
 
 .checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-
-.checked+.label:after {
-  right: calc( var(--zd_size1) * -1 ) ;
+.checked+label .thumb {
+  right: var(--zd_size1) ;
+  left: auto ;
 }
 
 .input {
@@ -65,15 +72,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size9) ;
+  height: var(--zd_size12) ;
   width: var(--zd_size22) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+  bottom: var(--zd_size1) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel:after {
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+.switch_smallLabel .thumb{
+  width: var(--zd_size10) ;
+  height: var(--zd_size10) ;
+  top: var(--zd_size1) ;
 }
 
 .medium {
@@ -81,15 +88,21 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size13) ;
+  height: var(--zd_size16) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.switch_mediumLabel:after {
-  width: var(--zd_size18) ;
-  height: var(--zd_size18) ;
-  top: calc( var(--zd_size3) * -1 ) ;
+.switch_smallLabel.labelOnTrack{
+  width: var(--zd_size32) ;
+}
+.switch_mediumLabel.labelOnTrack{
+  width: var(--zd_size42) ;
+}
+.switch_mediumLabel .thumb{
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: var(--zd_size2) ;
 }
 
 .input:disabled+.label {
@@ -125,4 +138,102 @@
 
 [dir=rtl] .switch+label {
   margin-right: var(--zd_size12) ;
+}
+.onOffLabel{
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.onOffIndication{    
+  /* css:theme-validation:ignore */
+  border: 0.5px solid;
+}
+.offIndication{
+ /* css:theme-validation:ignore */
+ border-color: #868585;
+ border-radius: 50%;
+}
+.onIndication{
+  /* css:theme-validation:ignore */
+  border-color: var(--switch_on_bg_color);
+  border-radius: 5px;
+}
+.thumbIndication.onIndication{
+   /* css:theme-validation:ignore */
+  border-color: #fff;
+}
+.switch_small .thumbIndication.onOffLabel{
+  top: calc( var(--zd_size10) * -1 ) ;
+}
+[dir=ltr] .switch_small .thumbIndication.onOffLabel{
+  right: var(--zd_size3) ;
+}
+[dir=rtl] .switch_small .thumbIndication.onOffLabel{
+  left: var(--zd_size3) ;
+}
+.switch_small .offIndication{
+  width: var(--zd_size5) ;
+  height: var(--zd_size5) ;
+}
+.switch_small .thumbIndication.offIndication{
+    margin: 0 var(--zd_size3) ;
+}
+.switch_small .onIndication{
+  width: var(--zd_size1) ;
+  height: var(--zd_size5) ;
+}
+.switch_small .thumbIndication.onIndication{
+  margin: 0 var(--zd_size5) ;
+}
+.switch_medium .thumbIndication.onOffLabel{
+  top: calc( var(--zd_size10) * -1 ) ;
+}
+[dir=ltr] .switch_medium .thumbIndication.onOffLabel{
+  right: var(--zd_size3) ;
+}
+[dir=rtl] .switch_medium .thumbIndication.onOffLabel{
+  left: var(--zd_size3) ;
+}
+.switch_medium .offIndication{
+  width: var(--zd_size7) ;
+  height: var(--zd_size7) ;
+}
+.switch_medium .thumbIndication.offIndication{
+  margin: 0 var(--zd_size5) ;
+}
+.switch_medium .onIndication{
+  width: var(--zd_size1) ;
+  height: var(--zd_size7) ;
+}
+.switch_medium .thumbIndication.onIndication{
+  margin: 0 var(--zd_size7) ;
+}
+.onOffIndicationText{
+    /* css:theme-validation:ignore */
+  color: #fff;
+}
+.switch_small .onOffIndicationText{
+  font-size: var(--zd_font_size7) ;
+  margin: 0 var(--zd_size4) ;
+}
+.switch_medium .onOffIndicationText{
+  font-size: var(--zd_font_size10) ;
+  margin: 0 var(--zd_size6) ;
+}
+.labelText{
+    /* css:theme-validation:ignore */
+  color: #000;
+}
+.smallLabelText{
+  font-size: var(--zd_font_size11) ;
+  margin: var(--zd_size1) 0 0 ;
+}
+.mediumLabelText{
+  font-size: var(--zd_font_size12) ;
+}
+[dir=ltr] .mediumLabelText{
+  margin : var(--zd_size1) 0 0 var(--zd_size2) ;
+}
+[dir=rtl] .mediumLabelText{
+  margin  : var(--zd_size1) var(--zd_size2) 0 0 ;
 }