@zohodesk/dot 1.0.0-temp-187.11 → 1.0.0-temp-209

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.9 
+
+- **Onboarding** , **VideoLookup** - Components introduced
+- `@zohodesk/layout` package added as peer dependency.
+
 # 1.7.8
 
 - **IconButton** - Introduced a new `size` prop with predefined values: `xsmall`, `small`, `medium`, `large`, and `xlarge`.

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

@@ -548,4 +548,33 @@
 	--zdt_tagWithIconYellow_bg: hsla(215, 11.76%, calc(20.00% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconYellow_border: hsla(35, 17.57%, calc(29.02% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tagWithIconYellow_text: hsla(37, 90.95%, calc(60.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* onboarding  */
+	--zdt_onboarding_primary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_onboarding_header_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_header_border: var(--zdtm_cta_secondary_light_border_default);
+	--zdt_onboarding_description_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_close_icon_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_close_icon_hover_bg: var(--zdtm_cta_primary_light_bg_default_inverse_lower);
+	--zdt_onboarding_close_icon_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_play_icon_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_play_icon_border: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_play_icon_text: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_bg: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_text: rgb(255,255,255);
+	--zdt_onboarding_ribbon_primary_border: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_secondary_border: var(--zdt_cta_primary_hover_border);
+	--zdt_onboarding_learnmore_bg: var(--zdt_cta_alpha_bg);
+	--zdt_onboarding_learnmore_border: var(--zdt_cta_alpha_border);
+	--zdt_onboarding_learnmore_text: var(--zdt_cta_alpha_text);
+	--zdt_onboarding_learnmore_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_onboarding_learnmore_hover_text: var(--zdt_cta_alpha_text);
+	--zdt_onboarding_bg_box_shadow: rgba(0, 0, 0, 0.14);
+	--zdt_onboarding_collision_unread_shadow: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_light_gradient_bg: rgb(35,43,56);
+	
+	/* video lookup */
+	--zdt_videolookup_close: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_videolookup_close_hover_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_videolookup_close_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_button_shadow: rgba(10, 115, 235, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(213, 27.27%, calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_button_shadow: rgba(39, 170, 67, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(191, 21.65%, calc(19.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_button_shadow: rgba(229, 119, 23, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(252, 4.85%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_button_shadow: rgba(219, 33, 33, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_button_shadow: rgba(218, 160, 11, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(218, 7.69%, calc(20.39% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

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

@@ -548,4 +548,33 @@
 	--zdt_tagWithIconYellow_bg: hsla(49, 91.67%, calc(95.29% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconYellow_border: hsla(49, 84.09%, calc(82.75% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tagWithIconYellow_text: hsla(29, 89.71%, calc(65.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* onboarding  */
+	--zdt_onboarding_primary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_onboarding_header_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_header_border: var(--zdtm_cta_secondary_light_border_default);
+	--zdt_onboarding_description_text: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_close_icon_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_close_icon_hover_bg: var(--zdtm_cta_primary_light_bg_default_inverse_lower);
+	--zdt_onboarding_close_icon_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_play_icon_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_play_icon_border: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_play_icon_text: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_bg: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_text: rgb(255,255,255);
+	--zdt_onboarding_ribbon_primary_border: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_secondary_border: var(--zdt_cta_primary_hover_border);
+	--zdt_onboarding_learnmore_bg: var(--zdt_cta_alpha_bg);
+	--zdt_onboarding_learnmore_border: var(--zdt_cta_alpha_border);
+	--zdt_onboarding_learnmore_text: var(--zdt_cta_alpha_text);
+	--zdt_onboarding_learnmore_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_onboarding_learnmore_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_onboarding_bg_box_shadow: rgba(0, 0, 0, 0.14);
+	--zdt_onboarding_collision_unread_shadow: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_light_gradient_bg: rgb(255,255,255);
+	
+	/* video lookup */
+	--zdt_videolookup_close: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_videolookup_close_hover_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_videolookup_close_hover: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css

@@ -8,6 +8,13 @@
 	--zdt_commonEmptyState_dark_link: hsla(207, 96.00%, calc(70.59% + 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)));
 	
+	/* 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_button_shadow: rgba(10, 115, 235, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(227, 27.27%, calc(23.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(228, 18.01%, calc(31.57% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css

@@ -8,6 +8,13 @@
 	--zdt_commonEmptyState_dark_link: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_commonEmptyState_dark_link_hover: hsla(134, 78.63%, calc(25.69% + 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_button_shadow: rgba(39, 170, 67, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(143, 44.44%, calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(190, 43.40%, calc(10.39% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(190, 37.35%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css

@@ -8,6 +8,13 @@
 	--zdt_commonEmptyState_dark_link: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_commonEmptyState_dark_link_hover: hsla(30, 100.00%, calc(34.90% + 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_button_shadow: rgba(229, 119, 23, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(26, 77.78%, calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(39, 30.91%, calc(10.78% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(54, 46.03%, calc(12.35% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css

@@ -8,6 +8,13 @@
 	--zdt_commonEmptyState_dark_link: hsla(0, 100.00%, calc(69.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_commonEmptyState_dark_link_hover: hsla(1, 75.38%, calc(38.24% + 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_button_shadow: rgba(219, 33, 33, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(0, 71.43%, calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(322, 38.78%, calc(9.61% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(351, 23.46%, calc(15.88% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css

@@ -8,6 +8,13 @@
 	--zdt_commonEmptyState_dark_link: hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_commonEmptyState_dark_link_hover: hsla(48, 100.00%, calc(35.49% + 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_button_shadow: rgba(218, 160, 11, 0.25);
+	--zdt_onboarding_gradient_bg: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	
 	/* attachment viewer */
 	--zdt_attachmentviewer_header_bg: hsla(67, 33.33%, calc(10.59% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc( 0.08 + var(--zdc_alpha_high)));

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

@@ -548,4 +548,33 @@
 	--zdt_tagWithIconYellow_bg: hsla(215, 11.76%, calc(20.00% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconYellow_border: hsla(35, 17.57%, calc(29.02% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tagWithIconYellow_text: hsla(37, 90.95%, calc(60.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	
+	/* onboarding  */
+	--zdt_onboarding_primary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_onboarding_header_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_header_border: var(--zdtm_cta_secondary_light_border_default);
+	--zdt_onboarding_description_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_close_icon_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_close_icon_hover_bg: var(--zdtm_cta_primary_light_bg_default_inverse_lower);
+	--zdt_onboarding_close_icon_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_play_icon_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_play_icon_border: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_play_icon_text: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_bg: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_text: rgb(255,255,255);
+	--zdt_onboarding_ribbon_primary_border: var(--zdt_cta_primary_bg);
+	--zdt_onboarding_ribbon_secondary_border: var(--zdt_cta_primary_hover_border);
+	--zdt_onboarding_learnmore_bg: var(--zdt_cta_alpha_bg);
+	--zdt_onboarding_learnmore_border: var(--zdt_cta_alpha_border);
+	--zdt_onboarding_learnmore_text: var(--zdt_cta_alpha_text);
+	--zdt_onboarding_learnmore_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_onboarding_learnmore_hover_text: var(--zdt_cta_alpha_text);
+	--zdt_onboarding_bg_box_shadow: rgba(0, 0, 0, 0.4);
+	--zdt_onboarding_collision_unread_shadow: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_onboarding_light_gradient_bg: rgb(33,33,33);
+	
+	/* video lookup */
+	--zdt_videolookup_close: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_videolookup_close_hover_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_videolookup_close_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

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

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_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)));
+	
 	/* 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)));

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

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_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)));
+	
 	/* 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)));

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

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_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)));
+	
 	/* 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)));

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

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_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)));
+	
 	/* 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)));

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

@@ -8,6 +8,13 @@
 	--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)));
 	
+	/* 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_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)));
+	
 	/* 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)));

package/es/DotProvider/libraryChunks/appearance/component/Dark_Component.js

@@ -0,0 +1,2 @@
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_v2_DarkMode.module.css';

package/es/DotProvider/libraryChunks/appearance/component/Light_Component.js

@@ -0,0 +1,2 @@
+import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';
+import '@zohodesk/components/assets/Appearance/light/mode/Component_v2_LightMode.module.css';

package/es/DotProvider/libraryChunks/appearance/component/PureDark_Component.js

@@ -0,0 +1,2 @@
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_v2_PureDarkMode.module.css';

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -2,13 +2,13 @@ import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THE
 export const themeAppearanceImports = {
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
-  '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'),
+  "../libraryChunks/appearance/component/Light_Component"),
   Lib_DarkMode_Component: () => import(
   /* webpackChunkName: 'Lib_DarkMode_Component' */
-  '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'),
+  "../libraryChunks/appearance/component/Dark_Component"),
   Lib_PureDarkMode_Component: () => import(
   /* webpackChunkName: 'Lib_PureDarkMode_Component' */
-  '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'),
+  "../libraryChunks/appearance/component/PureDark_Component"),
   Lib_LightMode_Dot: () => import(
   /* webpackChunkName: 'Lib_LightMode_Dot' */
   "./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),

package/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js

@@ -0,0 +1,34 @@
+import React from 'react';
+/* Props */
+
+import { propTypes } from "./props/propTypes.js";
+import { defaultProps } from "./props/defaultProps.js";
+/* Style */
+
+import style from "./css/CarouselDot.module.css";
+
+function CarouselDot(props) {
+  const {
+    onClick,
+    isActive,
+    index,
+    isAnimationPaused,
+    testId,
+    customId
+  } = props;
+
+  function handleClick() {
+    typeof onClick === "function" && onClick(index);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.bullet} ${isAnimationPaused ? style.animationPaused : ''} ${isActive ? style.bulletActive : style.bulletNormal}`,
+    onClick: handleClick,
+    "data-id": customId,
+    "data-test-id": testId
+  });
+}
+
+CarouselDot.propTypes = propTypes;
+CarouselDot.defaultProps = defaultProps;
+export default CarouselDot;

package/es/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CarouselDot from "../CarouselDot";
+describe('CarouselDot', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of isActive', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of isAnimationPaused', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      isAnimationPaused: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      customId: "radar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      testId: "radar_test"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselDot rendering of isActive 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletActive"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering of isAnimationPaused 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet animationPaused bulletNormal"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering with customId 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="radar"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering with testId 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="carouselDot"
+    data-test-id="radar_test"
+  />
+</DocumentFragment>
+`;

package/es/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -0,0 +1,83 @@
+.bulletNormal{
+    composes: pointer from '~@zohodesk/components/lib/common/common.module.css';
+  }
+  .bulletNormal:hover {
+    transform: scale(1.4);
+  }
+  .bullet {
+    /* padding: 4px 3px; */
+    position: relative;
+    width: var(--zd_size8) ;
+    height: var(--zd_size8) ;
+    overflow: hidden;
+    border-radius: 20px;
+  }
+  .bullet,
+  .bullet::after {
+    transition: opacity var(--zd_transition2), background-color var(--zd_transition2), width var(--zd_transition6) cubic-bezier(0.165, 0.84, 0.44, 1),transform 0.2s ease-in-out;
+  }
+  .bullet::before,
+  .bullet::after {
+    content: '';
+    width: inherit ;
+    height: inherit ;
+    position: absolute;
+    top: 50% ;
+  }
+  .bullet::before, .bullet::after {
+    border-radius: inherit;
+    transform: translateY(-50%);
+  }
+  [dir=ltr] .bullet::before, [dir=ltr] .bullet::after {
+    left: 0 ;
+  }
+  [dir=rtl] .bullet::before, [dir=rtl] .bullet::after {
+    right: 0 ;
+  }
+  .bullet::before {
+    opacity: .4;
+  }
+  .bullet::before, .bulletActive::after {
+    background-color: var(--zdt_button_primaryfill_bg);
+  }
+  .bulletActive {
+    width: var(--zd_size30) ;
+  }
+  .bulletActive::before,
+  .bulletActive::after {
+    width: 100% ;
+  }
+  .bulletActive::after {
+    opacity: 1;
+  }
+  [dir=ltr] .bulletActive::after {
+    left:-100% ;
+    animation:  progressLoading-ltr 5s linear infinite;
+  }
+  [dir=rtl] .bulletActive::after {
+    right:-100% ;
+    animation:  progressLoading-rtl 5s linear infinite;
+  }
+  [dir=ltr] .animationPaused::after {
+    animation-play-state: paused;
+  }
+  [dir=rtl] .animationPaused::after {
+    animation-play-state: paused;
+  }
+  @keyframes progressLoading-ltr {
+    0% {
+      left: -100% ;
+    }
+    100% {
+      left: 0% ;
+    }
+  }
+  @keyframes progressLoading-rtl {
+    0% {
+      left: -100% ;
+    }
+    100% {
+      left: 0% ;
+    }
+  }
+  

package/es/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  isActive: false,
+  isAnimationPaused: false,
+  customId: "carouselDot",
+  testId: 'carouselDot'
+};

package/es/Onboarding/CarouselDots/CarouselDot/props/propTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  isAnimationPaused: PropTypes.bool,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  index: PropTypes.number,
+  testId: PropTypes.string,
+  customId: PropTypes.string
+};