@zohodesk/components 1.6.24 → 1.6.26

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, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse: hsla(0, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse: hsla(39, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 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, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/es/Accordion/Accordion.js

@@ -78,9 +78,4 @@ export default class Accordion extends React.Component {
 
 }
 Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
-//   Accordion.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+Accordion.defaultProps = Accordion_defaultProps;

package/es/Accordion/AccordionItem.js

@@ -56,9 +56,4 @@ export default class AccordionItem extends React.Component {
 
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
-//   AccordionItem.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+AccordionItem.defaultProps = AccordionItem_defaultProps;

package/es/Animation/Animation.js

@@ -42,11 +42,4 @@ export default class Animation extends React.Component {
 
 }
 Animation.propTypes = propTypes;
-Animation.defaultProps = defaultProps; // if (__DOCS__) {
-//   Animation.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+Animation.defaultProps = defaultProps;

package/es/AppContainer/AppContainer.js

@@ -132,9 +132,4 @@ export default class AppContainer extends React.Component {
 
 }
 AppContainer.propTypes = propTypes;
-AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
-//   AppContainer.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide'
-//   };
-// }
+AppContainer.defaultProps = defaultProps;

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

@@ -3,7 +3,7 @@
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,7 +11,7 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -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="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -89,13 +89,13 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container AppcontainerClass"
+    class="d-flex d-h-full d-w-full d-flex-col container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -113,13 +113,13 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,13 +155,13 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/Avatar/Avatar.js

@@ -188,9 +188,4 @@ export default class Avatar extends React.Component {
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = []; // if (__DOCS__) {
-//   Avatar.docs = {
-//     componentGroup: 'Avatar Group',
-//     folderName: 'Style Guide'
-//   };
-// }
+Avatar.validImageURLs = [];

package/es/AvatarTeam/AvatarTeam.js

@@ -76,10 +76,4 @@ export default class AvatarTeam extends React.Component {
 
 }
 AvatarTeam.defaultProps = defaultProps;
-AvatarTeam.propTypes = propTypes; // if (__DOCS__) {
-//   AvatarTeam.docs = {
-//     componentGroup: 'Avatar Group',
-//     folderName: 'Style Guide',
-//     external: true
-//   };
-// }
+AvatarTeam.propTypes = propTypes;

package/es/Button/Button.js

@@ -70,9 +70,4 @@ Button.defaultProps = defaultProps;
 Button.propTypes = propTypes;
 export default withComponentRegistrar(Button, {
   name: 'ZDC_Button'
-}); // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+});

package/es/Buttongroup/Buttongroup.js

@@ -35,17 +35,4 @@ export default class Buttongroup extends React.Component {
 
 }
 Buttongroup.defaultProps = defaultProps;
-Buttongroup.propTypes = propTypes; // if (__DOCS__) {
-//   Buttongroup.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide',
-//     external: false,
-//     description: ' ',
-//     images: [
-//       {
-//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
-//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
-//       }
-//     ]
-//   };
-// }
+Buttongroup.propTypes = propTypes;

package/es/Card/Card.js

@@ -276,15 +276,7 @@ export default class Card extends Component {
 
 }
 Card.propTypes = Card_propTypes;
-Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
-//   Card.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
-
+Card.defaultProps = Card_defaultProps;
 export class CardFooter extends Component {
   render() {
     let {

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

@@ -3,13 +3,13 @@
 exports[`Card rendering the a11y 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -24,14 +24,14 @@ exports[`Card rendering the a11y 1`] = `
 exports[`Card rendering the children 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
      
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -45,13 +45,13 @@ exports[`Card rendering the children 1`] = `
 exports[`Card rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column customClass"
+    class="d-flex d-h-full d-w-full d-flex-col customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -65,13 +65,13 @@ exports[`Card rendering the customClass 1`] = `
 exports[`Card rendering the dataId value 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="customdataId"
     data-selector-id="container"
     data-test-id="customdataId"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -85,7 +85,7 @@ exports[`Card rendering the dataId value 1`] = `
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -96,13 +96,13 @@ exports[`Card rendering the defult props 1`] = `
 exports[`Card rendering the htmlId 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -117,7 +117,7 @@ exports[`Card rendering the htmlId 1`] = `
 exports[`Card rendering the isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-scroll="true"
     data-selector-id="container"
@@ -125,7 +125,7 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
   >
      
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -139,13 +139,13 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="scrollToBottomCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToBottomCardContent"
@@ -161,13 +161,13 @@ exports[`Card should trigger fetch, when scroll to the bottom of the card while
 exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="scrollToTopCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToTopCardContent"