@zohodesk/dot 1.0.0-temp-187.10 → 1.0.0-temp-208.1

package/README.md

@@ -2,6 +2,15 @@
 
 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`.
+
 # 1.7.7 
 
 - **SelectField**

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/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -79,7 +79,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <div
                       aria-pressed="false"
-                      class="false wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                      class="large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
                       data-id="iconContainer"
                       data-ishtml="false"
                       data-selector-id="iconButton"
@@ -103,7 +103,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 >
                   <button
                     aria-pressed="false"
-                    class="buttonReset wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                    class="buttonReset large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
                     data-id="iconContainer"
                     data-ishtml="false"
                     data-selector-id="iconButton"
@@ -361,7 +361,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         </div>
         <button
           aria-pressed="false"
-          class="buttonReset wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
+          class="buttonReset large wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
           data-id="attachToggle"
           data-ishtml="false"
           data-selector-id="iconButton"

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/IconButton/IconButton.js

@@ -70,6 +70,7 @@ export default class IconButton extends React.Component {
     let {
       palette,
       iconSize,
+      size,
       iconName,
       className,
       iconClass,
@@ -116,7 +117,7 @@ export default class IconButton extends React.Component {
       tourId: tourId,
       align: "both",
       isCover: false,
-      className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${className || ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       onClick: this.triggerClick,

package/es/IconButton/IconButton.module.css

@@ -1,22 +1,49 @@
 .varClass {
   --iconColor: var(--zdt_iconButton_icon_black);
 }
+
 .wrapper {
-  height: var(--zd_size28) ;
-  width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
   cursor: pointer;
 }
+
+.xsmall {
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
+}
+
+.small {
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}
+
+.medium {
+  width: var(--zd_size24) ;
+  height: var(--zd_size24) ;
+}
+
+.large {
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
+}
+
+.xlarge {
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
+}
+
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);
 }
+
 .primary:hover {
   --iconColor: var(--zdt_iconButton_icon_primaryHover);
 }
+
 .primary_active,
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+}

package/es/IconButton/__tests__/IconButton.spec.js

@@ -26,6 +26,15 @@ describe('IconButton', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+  test.each(sizes)('rendering the size of- %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   const hoverType = ['default', 'border', 'bg'];
   test.each(hoverType)('rendering the hovertypes- %s', hoverType => {
     const {