@zohodesk/dot 1.7.6 → 1.7.8-temp-0

package/README.md

@@ -2,6 +2,16 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.8 
+
+- **Onboarding** , **VideoLookup** - Components introduced
+- `@zohodesk/layout` package added as peer dependency.
+
+# 1.7.7 
+
+- **SelectField**
+  - Tooltip `title` prop has been passed to `Select` component.
+
 # 1.7.6
 
 - **AlertClose, AlertIcons, GlobalNotification, DesktopNotification, DesktopNoticationHeader**--

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/coverage/__testUtils__/MockResizeObserver.js.html

@@ -148,7 +148,7 @@ export default class MockResizeObserver {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/__testUtils__/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -613,7 +613,65 @@
 <a name='L548'></a><a href='#L548'>548</a>
 <a name='L549'></a><a href='#L549'>549</a>
 <a name='L550'></a><a href='#L550'>550</a>
-<a name='L551'></a><a href='#L551'>551</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L551'></a><a href='#L551'>551</a>
+<a name='L552'></a><a href='#L552'>552</a>
+<a name='L553'></a><a href='#L553'>553</a>
+<a name='L554'></a><a href='#L554'>554</a>
+<a name='L555'></a><a href='#L555'>555</a>
+<a name='L556'></a><a href='#L556'>556</a>
+<a name='L557'></a><a href='#L557'>557</a>
+<a name='L558'></a><a href='#L558'>558</a>
+<a name='L559'></a><a href='#L559'>559</a>
+<a name='L560'></a><a href='#L560'>560</a>
+<a name='L561'></a><a href='#L561'>561</a>
+<a name='L562'></a><a href='#L562'>562</a>
+<a name='L563'></a><a href='#L563'>563</a>
+<a name='L564'></a><a href='#L564'>564</a>
+<a name='L565'></a><a href='#L565'>565</a>
+<a name='L566'></a><a href='#L566'>566</a>
+<a name='L567'></a><a href='#L567'>567</a>
+<a name='L568'></a><a href='#L568'>568</a>
+<a name='L569'></a><a href='#L569'>569</a>
+<a name='L570'></a><a href='#L570'>570</a>
+<a name='L571'></a><a href='#L571'>571</a>
+<a name='L572'></a><a href='#L572'>572</a>
+<a name='L573'></a><a href='#L573'>573</a>
+<a name='L574'></a><a href='#L574'>574</a>
+<a name='L575'></a><a href='#L575'>575</a>
+<a name='L576'></a><a href='#L576'>576</a>
+<a name='L577'></a><a href='#L577'>577</a>
+<a name='L578'></a><a href='#L578'>578</a>
+<a name='L579'></a><a href='#L579'>579</a>
+<a name='L580'></a><a href='#L580'>580</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -1713,6 +1771,35 @@
 	--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)));
 }</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -1720,7 +1807,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/assets/Appearance/dark/mode/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

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

@@ -81,7 +81,21 @@
 <a name='L16'></a><a href='#L16'>16</a>
 <a name='L17'></a><a href='#L17'>17</a>
 <a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -109,6 +123,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)));
@@ -124,7 +145,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/assets/Appearance/dark/themes/blue/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

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

@@ -81,7 +81,21 @@
 <a name='L16'></a><a href='#L16'>16</a>
 <a name='L17'></a><a href='#L17'>17</a>
 <a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -109,6 +123,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)));
@@ -124,7 +145,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/assets/Appearance/dark/themes/green/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-04-04T13:35:48.573Z
+                at 2025-05-07T15:23:43.620Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>