@zohodesk/dot 1.0.0-temp-215 → 1.0.0-temp-217

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

@@ -1,25 +1,25 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(221, 100.00%, calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(212, calc(var(--zd-mc) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(221, calc(var(--zd-mc) * 100.00%), calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(220, calc(var(--zd-mc) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(220, calc(var(--zd-mc) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
 	--zdt_onboarding_primary_button_shadow: rgba(10, 115, 235, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_bg: hsla(213, calc(var(--zd-mc) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
 	--zdt_loader_bg: rgb(71,157,255);

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

@@ -1,25 +1,25 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(133, calc(var(--zd-mc) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(128, calc(var(--zd-mc) * 79.71%), calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(133, calc(var(--zd-mc) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(133, calc(var(--zd-mc) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(133, calc(var(--zd-mc) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
 	--zdt_onboarding_primary_button_shadow: rgba(39, 170, 67, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_bg: hsla(133, calc(var(--zd-mc) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
 	--zdt_loader_bg: rgb(69,161,89);

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

@@ -1,25 +1,25 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(26, calc(var(--zd-mc) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(29, calc(var(--zd-mc) * 100.00%), calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(28, calc(var(--zd-mc) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(28, calc(var(--zd-mc) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(28, calc(var(--zd-mc) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
 	--zdt_onboarding_primary_button_shadow: rgba(229, 119, 23, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_bg: hsla(26, calc(var(--zd-mc) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
 	--zdt_loader_bg: rgb(255,128,31);

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

@@ -1,25 +1,25 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(0, calc(var(--zd-mc) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(0, calc(var(--zd-mc) * 81.62%), calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(0, calc(var(--zd-mc) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(0, calc(var(--zd-mc) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(0, calc(var(--zd-mc) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
 	--zdt_onboarding_primary_button_shadow: rgba(219, 33, 33, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_bg: hsla(0, calc(var(--zd-mc) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
 	--zdt_loader_bg: rgb(233,79,79);

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

@@ -1,25 +1,25 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(43, calc(var(--zd-mc) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(43, calc(var(--zd-mc) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(43, calc(var(--zd-mc) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
 	--zdt_onboarding_primary_button_shadow: rgba(218, 160, 11, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_bg: hsla(35, calc(var(--zd-mc) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-mc) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
 	--zdt_loader_bg: rgb(215,152,53);

package/es/ActionButton/ActionButton.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Popup from '@zohodesk/components/lib/Popup/Popup';
+import Popup from '@zohodesk/components/es/Popup/Popup';
 import { Icon } from '@zohodesk/icons';
-import Button from '@zohodesk/components/lib/Button/Button';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import Button from '@zohodesk/components/es/Button/Button';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 import style from "./ActionButton.module.css";
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);

package/es/AlphabeticList/AlphabeticList.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from "./props/defaultProps";
 import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /*** CSS ***/
 
 import style from "./AlphabeticList.module.css";

package/es/Attachment/Attachment.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import Link from "../Link/Link";
 import style from "./Attachment.module.css";
 export default class Attachment extends React.Component {
@@ -49,7 +49,8 @@ export default class Attachment extends React.Component {
       align: "horizontal"
     }, fileName ? /*#__PURE__*/React.createElement(Box, {
       className: style.atatchName,
-      "data-title": fileName
+      "data-title": fileName,
+      dataId: `${dataId}_filename`
     }, fileName) : null, /*#__PURE__*/React.createElement(Box, {
       className: style.footer
     }, /*#__PURE__*/React.createElement(Container, {
@@ -60,14 +61,16 @@ export default class Attachment extends React.Component {
       className: style.attachSize,
       adjust: true,
       shrink: true,
-      "data-title": fileSize
+      "data-title": fileSize,
+      dataId: `${dataId}_filesize`
     }, fileSize) : null, fileInfo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
       className: style.dot
     }), /*#__PURE__*/React.createElement(Box, {
       className: style.attachSize,
       adjust: true,
       shrink: true,
-      "data-title": fileInfo
+      "data-title": fileInfo,
+      dataId: `${dataId}_fileinfo`
     }, fileInfo)) : null)))), downloadLink && !isDisabled ? /*#__PURE__*/React.createElement(Link, {
       target: "_self",
       href: downloadLink,

package/es/Attachment/__tests__/Attachment.spec.js

@@ -8,4 +8,28 @@ describe('Attachment', () => {
     } = render( /*#__PURE__*/React.createElement(Attachment, null));
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('Attachment with props', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Attachment, {
+      onClick: jest.fn(),
+      dataId: "test_id",
+      size: "medium",
+      iconName: "test_icon",
+      fileName: "test_file",
+      fileSize: "10MB",
+      downloadLink: "http://example.com",
+      palette: "default",
+      tooltip: "test_tooltip",
+      fileInfo: "test_info",
+      i18nKeys: {
+        downloadTitle: 'Download'
+      },
+      dataSelectorId: "test_selector",
+      isDisabled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -39,3 +39,108 @@ exports[`Attachment rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Attachment with props rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="attachment  attachmentHover palette_default medium inflex rowdir"
+    data-id="test_id"
+    data-selector-id="test_selector"
+    data-test-id="test_id"
+    data-title="test_tooltip"
+    tabindex="0"
+  >
+    <div
+      class="attachleft shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+    <div
+      class="attachright grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir hCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="atatchName shrinkOff"
+          data-id="test_id_filename"
+          data-selector-id="box"
+          data-test-id="test_id_filename"
+          data-title="test_file"
+        >
+          test_file
+        </div>
+        <div
+          class="footer shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir baseline"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_filesize"
+              data-selector-id="box"
+              data-test-id="test_id_filesize"
+              data-title="10MB"
+            >
+              10MB
+            </div>
+            <div
+              class="dot shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            />
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_fileinfo"
+              data-selector-id="box"
+              data-test-id="test_id_fileinfo"
+              data-title="test_info"
+            >
+              test_info
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <a
+      class="container  attachDownload"
+      data-id="test_id_download"
+      data-test-id="test_id_download"
+      data-title="Download"
+      href="http://example.com"
+      rel="noopener noreferrer"
+      target="_self"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-download-new  downIcon  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from "./props/defaultProps";
 import { AttachmentViewer_propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import Typography from '@zohodesk/components/lib/Typography/Typography';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import Button from '@zohodesk/components/es/Button/Button';
 import AttachmentImage from "./AttachmentImage";
 import Link from "../Link/Link";

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -378,7 +378,7 @@
 
 .previewIconDiv {
     width: var(--zd_size60) ;
-    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+    composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .prevFooterIcon {