@zohodesk/components 1.0.0-temp-246 → 1.0.0-temp-247

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

@@ -1,36 +1,36 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
-	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
-	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_bg: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, calc(var(--zd-saturation) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_box_shadow: hsla(46, calc(var(--zd-saturation) * 81.07%), 52.35,  0.2);
+	--zdt_cta_primary_hover_box_shadow: hsla(48, calc(var(--zd-saturation) * 100.00%), 35.49,  0.25);
+	--zdt_cta_primary_light_bg: hsla(35, calc(var(--zd-saturation) * 15.00%), calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, calc(var(--zd-saturation) * 12.70%), calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, calc(var(--zd-saturation) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, calc(var(--zd-saturation) * 30.19%), calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_bg: hsla(38, calc(var(--zd-saturation) * 30.19%), calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_alpha_text: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, calc(var(--zd-saturation) * 2.75%), calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, calc(var(--zd-saturation) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, calc(var(--zd-saturation) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, calc(var(--zd-saturation) * 22.81%), calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -1,53 +1,53 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
-	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
 	
 	/* dropbox */
-	--zdt_dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg: rgb(33,33,33);
-	--zdt_listitem_dark_text: rgb(226,228,230);
-	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
-	--zdt_listitem_dark_active_bg: rgb(59,77,109);
-	--zdt_listitem_dark_tickicon: rgb(215,152,53);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 16.86, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
+	--zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text: rgb(208,208,212);
-	--zdt_tag_dark_bg: rgb(38,38,38);
-	--zdt_tag_dark_hover_text: rgb(208,208,212);
-	--zdt_tag_dark_hover_bg: rgb(80,51,72);
-	--zdt_tag_dark_close_bg: rgb(134,70,84);
-	--zdt_tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 14.90, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: rgb(88,88,88);
-	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
-	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
-	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation) * 0.00%), 34.51, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border: rgb(153,153,153);
-	--zdt_avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation) * 0.00%), 60.00, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
 	
 	/* label */
-	--zdt_label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 60.00, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	--zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55, 1);
 	
 	/* button */
-	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: var(--zd-gradient-saturation, linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%);
 }

package/es/AppContainer/AppContainer.js

@@ -9,6 +9,7 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/AppContainer/AppContainer.module.css

@@ -8,8 +8,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container {
-  font-family: var(--zd_regular);
+.container, .container button, .container input, .container textarea ,.container select {
+  /* font-family: var(--zd_regular); */
+  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

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

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
+  --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-family: var(--button_font_family);
+  font-weight: var(--button_font_weight);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_family: var(--zd_semibold);
+  --button_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -623,7 +623,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror)
+  color: var(--dot_mirror);
 }
 
 [dir=ltr] .strike {
@@ -633,34 +633,43 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
+
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
+
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
+
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
+
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
+
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
+
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
+
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
+
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_border);

package/es/CheckBox/CheckBox.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { propTypes } from "./props/propTypes";
 import { defaultProps } from "./props/defaultProps";
 import Label from "../Label/Label";
-import Typography from "../Typography/Typography";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
 import style from "./CheckBox.module.css";
@@ -54,20 +53,17 @@ export default class CheckBox extends React.Component {
       customClass,
       customProps,
       dataSelectorId,
-      renderRightPlaceholderNode,
-      secondaryText
+      renderRightPlaceholderNode
     } = this.props;
     let {
       CheckBoxProps = {},
-      LabelProps = {},
-      secondaryTextProps = {}
+      LabelProps = {}
     } = customProps;
     let {
       customCheckBox = '',
       customLabel = '',
       customCBoxSize = '',
-      customTickSize = '',
-      customSecondaryText = ''
+      customTickSize = ''
     } = customClass;
     let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
@@ -99,8 +95,7 @@ export default class CheckBox extends React.Component {
       dataSelectorId: dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`,
-      align: secondaryText ? "start" : undefined
+      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,
@@ -148,10 +143,10 @@ export default class CheckBox extends React.Component {
       y1: "20",
       x2: "28.53",
       y2: "20"
-    }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
+    }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.labelContainer
-    }, text && /*#__PURE__*/React.createElement(Label, {
+      className: style.text
+    }, /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: disabled ? 'disable' : labelPalette,
       id: id,
@@ -160,17 +155,11 @@ export default class CheckBox extends React.Component {
       clipped: isClipped,
       variant: variant,
       customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
-                                ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
-                                ${accessMode} ${customLabel}`,
+                            ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
+                            ${accessMode} ${customLabel}`,
       title: toolTip ? toolTip : text,
       ...LabelProps
-    }), secondaryText ? /*#__PURE__*/React.createElement(Typography, {
-      $ui_size: "12",
-      $ui_lineHeight: "1.2",
-      ...secondaryTextProps,
-      $i18n_dataTitle: toolTip ? null : secondaryText,
-      $ui_className: `${style.secondaryText} ${customSecondaryText}`
-    }, secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+    })), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/CheckBox/CheckBox.module.css

@@ -90,6 +90,12 @@
 [dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
+[dir=ltr] .text {
+  margin-left: var(--zd_size6) ;
+}
+[dir=rtl] .text {
+  margin-right: var(--zd_size6) ;
+}
 
  .checkedprimary,
 .checkeddanger {
@@ -135,27 +141,6 @@
 .disabled {
   opacity: 0.7
 }
-
-.withSecondaryText {
-  margin-top: var(--zd_size1) ;
-}
-
-.secondaryText {
-  color: var(--zdt_checkbox_secondary_text);
-}
-
-.labelContainer {
-  composes: dflex flexcolumn from '../common/common.module.css';
-  gap: var(--zd_size4) ;
-}
-
-[dir=ltr] .labelContainer {
-  margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .labelContainer {
-  margin-right: var(--zd_size6) ;
-}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;

package/es/CheckBox/__tests__/CheckBox.spec.js

@@ -160,15 +160,6 @@ describe('CheckBox component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render secondaryText', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(CheckBox, {
-      text: "checkboxText",
-      secondaryText: "secondaryText"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
   test('Should be render activeStyle is minus', () => {
     const {
       asFragment