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

package/README.md

@@ -2,6 +2,29 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.24
+
+- **Timer**
+  - timer_default_text css variable added.
+
+# 1.7.23
+
+- introduced AudioPlayer & Timer comopnent.
+
+
+# 1.7.22
+
+- **useDragger**
+  - While using the dragger, it was triggering even on a simple click inside the draggable element. The fixed position should only apply during an actual drag. To handle this, we added a drag distance threshold to accurately detect dragging and prevent the CSS from applying on click. 
+
+# 1.7.20, 1.7.21
+
+- **PhoneField**
+  - RTL unicode-bidi issue fixed
+- **Attachment**  
+  - dataId added for fileName and fileSize element
+- lib imports migrated to es  
+
 
 # 1.7.19
 

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

@@ -27,13 +27,23 @@
 	
 	/* attachment */
 	--zdt_attachment_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
+	--zdt_attachment_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachment_default_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachment_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachment_download_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(217, 23.08%, calc(17.84% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -57,7 +67,7 @@
 	--zdt_avatarIcon_grey_icon: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_avatarIcon_success_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_smoke_icon: hsla(0, 0.00%, calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
+	--zdt_avatarIcon_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_avatarIcon_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_border: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_hover_border: hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -106,7 +116,7 @@
 	--zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.4);
 	--zdt_drawer_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_drawer_header_bg: var(--zdtm_cta_grey_10_bg_default_inverse_low);
-	--zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
+	--zdt_drawer_header_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_drawer_title_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* toggle dropdown */
@@ -221,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -243,7 +253,7 @@
 	--zdt_secondaryText_orage_text: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_green_text: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_red_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
+	--zdt_secondaryText_blue_text: var(--zdtm_cta_primary_text_default_inverse_low);
 	--zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_secondaryText_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -279,7 +289,7 @@
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
+	--zdt_lookupheader_default_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_lookupheader_white_border: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_lookupheader_para_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_lookupheader_input_border: hsla(0, 0.00%, calc(89.80% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -525,7 +535,7 @@
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_button_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_hover_border: var(--zdt_cta_grey_40_border);
+	--zdt_attachmentviewer_hover_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachmentviewer_selected_border: var(--zdt_cta_primary_border);
 	--zdt_attachmentviewer_selected_after_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);

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

@@ -27,13 +27,23 @@
 	
 	/* attachment */
 	--zdt_attachment_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
+	--zdt_attachment_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachment_default_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachment_default_hover_border: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachment_download_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -57,7 +67,7 @@
 	--zdt_avatarIcon_grey_icon: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_avatarIcon_success_icon: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_smoke_icon: hsla(0, 0.00%, calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
+	--zdt_avatarIcon_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_avatarIcon_default_hover_border: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_hover_border: hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -106,7 +116,7 @@
 	--zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.176);
 	--zdt_drawer_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_drawer_header_bg: var(--zdtm_cta_grey_10_bg_default_inverse_low);
-	--zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
+	--zdt_drawer_header_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_drawer_title_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* toggle dropdown */
@@ -155,7 +165,7 @@
 	
 	/* form action */
 	--zdt_formAction_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_formAction_border: var(--zdt_cta_grey_15_border);
+	--zdt_formAction_border: var(--zdtm_cta_grey_15_border_default_inverse_medium);
 	
 	/* freezelayer */
 	--zdt_freezelayer_default_bg: rgba(0, 0, 0, 0.45);
@@ -221,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 0.00%, calc(94.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(92.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(210, 12.50%, calc(96.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -243,7 +253,7 @@
 	--zdt_secondaryText_orage_text: hsla(26, 100.00%, calc(50.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_green_text: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_red_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
+	--zdt_secondaryText_blue_text: var(--zdtm_cta_primary_text_default_inverse_low);
 	--zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_secondaryText_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -279,8 +289,8 @@
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
-	--zdt_lookupheader_white_border: var(--zdt_cta_grey_15_border);
+	--zdt_lookupheader_default_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
+	--zdt_lookupheader_white_border: var(--zdtm_cta_grey_15_border_default_inverse_medium);
 	--zdt_lookupheader_para_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_lookupheader_input_border: hsla(0, 0.00%, calc(89.80% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	
@@ -447,7 +457,7 @@
 	--zdt_commonalert_plaininfo_hover_bg: hsla(212, 80.95%, calc(95.88% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_commonalert_danger_hover_bg: hsla(0, 73.91%, calc(95.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_commonalert_warning_hover_bg: hsla(26, 100.00%, calc(95.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonalert_light_hover_bg: var(--zdt_cta_grey_10_bg);
+	--zdt_commonalert_light_hover_bg: var(--zdtm_cta_grey_10_bg_darker_lowest);
 	--zdt_commonalert_secondlayer_bg: rgb(246,248,251);
 	--zdt_commonalert_default_icon: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_commonalert_success_icon: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
@@ -524,8 +534,8 @@
 	
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_button_border: var(--zdt_cta_grey_35_border);
-	--zdt_attachmentviewer_hover_border: var(--zdt_cta_grey_40_border);
+	--zdt_attachmentviewer_button_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
+	--zdt_attachmentviewer_hover_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachmentviewer_selected_border: var(--zdt_cta_primary_border);
 	--zdt_attachmentviewer_selected_after_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
@@ -539,8 +549,8 @@
 	--zdt_separator_secondary_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* tag with icon */
-	--zdt_tagWithIconGrey_bg: var(--zdt_cta_grey_20_bg);
-	--zdt_tagWithIconGrey_border: var(--zdt_cta_grey_35_border);
+	--zdt_tagWithIconGrey_bg: var(--zdtm_cta_grey_20_bg_darker_lowest);
+	--zdt_tagWithIconGrey_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_tagWithIconGrey_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconBlue_bg: hsla(213, 84.62%, calc(94.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconBlue_border: hsla(212, 83.33%, calc(85.88% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));

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

@@ -27,13 +27,23 @@
 	
 	/* attachment */
 	--zdt_attachment_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
+	--zdt_attachment_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachment_default_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachment_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachment_download_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -57,7 +67,7 @@
 	--zdt_avatarIcon_grey_icon: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_avatarIcon_success_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_smoke_icon: hsla(0, 0.00%, calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
+	--zdt_avatarIcon_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_avatarIcon_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_border: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_hover_border: hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -221,7 +231,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
+	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -243,7 +253,7 @@
 	--zdt_secondaryText_orage_text: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_green_text: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_red_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
+	--zdt_secondaryText_blue_text: var(--zdtm_cta_primary_text_default_inverse_low);
 	--zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_secondaryText_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -525,7 +535,7 @@
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_button_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_hover_border: var(--zdt_cta_grey_40_border);
+	--zdt_attachmentviewer_hover_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachmentviewer_selected_border: var(--zdt_cta_primary_border);
 	--zdt_attachmentviewer_selected_after_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);

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 {