@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

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

@@ -1,57 +1,53 @@
-[data-mode='pureDark'][data-theme='red']{
+[data-mode='pureDark'][data-theme='red'] {
 	/* stencil */
-	--zdt_stencil_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 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:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_listitem_dark_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
-	--zdt_listitem_dark_effect_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
-	--zdt_listitem_dark_active_bg:hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
-	--zdt_listitem_dark_tickicon:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
+	--zdt_listitem_dark_tickicon: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
-	--zdt_tag_dark_hover_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
-	--zdt_tag_dark_close_bg:hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
-	--zdt_tag_dark_close_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
-	--zdt_multiselect_darkmsg_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_multiselect_darkmsg_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_multiselect_darkdelete_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
-	--zdt_avatar_white_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* label */
-	--zdt_label_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
+	--zdt_a11y_focusScope_focus_border: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
 	
 	/* button */
-	--zdt_button_primary_strike:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-}[dir=ltr] [data-mode='pureDark'][data-theme='red']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%);
-}[dir=rtl] [data-mode='pureDark'][data-theme='red']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%);
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: var(--zd-gradient-saturation, linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%);
 }

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

@@ -1,14 +1,14 @@
-[data-mode='pureDark'][data-theme='red']{
-	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_primary_hover_bg_default_inverse:hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse_low:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default:hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_hover_bg_default:hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+[data-mode='pureDark'][data-theme='red'] {
+	--zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default: hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower: hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default: hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default: hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

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

@@ -1,57 +1,53 @@
-[data-mode='pureDark'][data-theme='yellow']{
+[data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
-	--zdt_stencil_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 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:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_listitem_dark_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
-	--zdt_listitem_dark_effect_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
-	--zdt_listitem_dark_active_bg:hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
-	--zdt_listitem_dark_tickicon:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
+	--zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
-	--zdt_tag_dark_hover_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
-	--zdt_tag_dark_close_bg:hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
-	--zdt_tag_dark_close_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
-	--zdt_multiselect_darkmsg_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_multiselect_darkmsg_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_multiselect_darkdelete_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
-	--zdt_avatar_white_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* label */
-	--zdt_label_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
+	--zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 	
 	/* button */
-	--zdt_button_primary_strike:hsla(37, calc(var(--zd-saturation, 1) * 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, 1) * 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, 1) * 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, 1) * 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, 1) * 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, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-}[dir=ltr] [data-mode='pureDark'][data-theme='yellow']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient: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%);
-}[dir=rtl] [data-mode='pureDark'][data-theme='yellow']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient: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%);
+	--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/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css

@@ -1,14 +1,14 @@
-[data-mode='pureDark'][data-theme='yellow']{
-	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_primary_hover_bg_default_inverse:hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse_low:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default:hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_hover_bg_default:hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+[data-mode='pureDark'][data-theme='yellow'] {
+	--zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default: hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower: hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default: hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/es/Accordion/Accordion.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Accordion_defaultProps } from "./props/defaultProps";
 import { Accordion_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);
@@ -62,7 +63,7 @@ export default class Accordion extends React.Component {
       ariaHaspopup
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
+      className: cn(className ? className : ''),
       style: {
         height
       },

package/es/Accordion/AccordionItem.js

@@ -3,6 +3,7 @@ import { AccordionItem_defaultProps } from "./props/defaultProps";
 import { AccordionItem_propTypes } from "./props/propTypes";
 import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
 import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { cn } from "@dot-system/css-utility";
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);
@@ -36,13 +37,13 @@ export default class AccordionItem extends React.Component {
       role
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
+      className: cn(className ? className : ''),
       "data-id": dataId,
       "data-test-id": dataId,
       role: role,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: innerClass ? innerClass : '',
+      className: cn(innerClass ? innerClass : ''),
       onClick: selectMenu.bind(this, id)
     }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
       name: "slideDown",

package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Accordion rendering the defult props 1`] = `
 <DocumentFragment>

package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AccordionItem rendering the defult props 1`] = `
 <DocumentFragment>

package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Animation rendering the defult props 1`] = `
 <DocumentFragment>

package/es/AppContainer/AppContainer.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../Layout";
 import Tooltip from "../Tooltip/Tooltip";
+import { cn } from "@dot-system/css-utility";
 import "../common/basic.module.css";
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
@@ -119,7 +120,7 @@ export default class AppContainer extends React.Component {
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
-      className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
+      className: cn(`${style.container} ${style.tooltip} ${tooltipParentClass}`),
       "data-id": `${dataId}_tooltip`,
       "data-test-id": `${dataId}_tooltip`,
       "data-selector-id": `${dataSelectorId}_tooltip`

package/es/AppContainer/AppContainer.module.css

@@ -8,12 +8,18 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container, .container button, .container input, .container textarea ,.container select {
+
+.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);
+  font-family: var(--zd-font-family), var(--zd_fallback_font, Lato);
 }
+
 .tooltip {
   height: 0 ;
   font-size: 0 ;
   /* contain:strict */
-}
+}

package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,14 +11,14 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-props="true"
     data-selector-id="appContainer_tooltip"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`AppContainer rendering the childern as element 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -58,13 +58,13 @@ exports[`AppContainer rendering the childern as element 1`] = `
 exports[`AppContainer rendering the childern as element in array 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -89,20 +89,20 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container AppcontainerClass flex cover coldir"
+    class="flex fullSize column container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -113,20 +113,20 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,20 +155,20 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/Avatar/Avatar.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { getInitial } from "../utils/getInitial";
 import AvatarSize from "../Provider/AvatarSize";
+import { cn } from "@dot-system/css-utility";
 import style from "./Avatar.module.css";
 /*
 1. need to change name into firstName lastName
@@ -156,7 +157,7 @@ export default class Avatar extends React.Component {
     let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
+      className: cn(`${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`),
       "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
       "data-test-id": dataId,
@@ -164,12 +165,12 @@ export default class Avatar extends React.Component {
       "data-selector-id": dataSelectorId,
       tabIndex: onClick ? 0 : null
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
-      className: `${style.initial}`,
+      className: cn(`${style.initial}`),
       "data-id": `${dataId}_AvatarInitial`,
       "data-test-id": `${dataId}_AvatarInitial`,
       "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
+      className: cn(`${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`),
       "data-id": `${dataId}_AvatarImg`,
       "data-test-id": `${dataId}_AvatarImg`,
       "data-selector-id": `${dataSelectorId}_AvatarImg`,
@@ -179,7 +180,7 @@ export default class Avatar extends React.Component {
       src: showAlternateAvatar ? alternateSrc : src,
       alt: name
     }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
-      className: `${style.shadow} ${textStyle} `
+      className: cn(`${style.shadow} ${textStyle} `)
     })));
   }