@zohodesk/dot 1.0.0-temp-231.1 → 1.0.0-temp-229.2

package/README.md

@@ -2,10 +2,14 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.9.x
+# 1.9.13
 
-- Updated `@zohodesk-private/color-variable-preprocessor` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.
-- Imports newly generated Dot entry theme-related files within the specific chunk.
+- **StatusDropdown**
+  - Added `renderCustomDropBoxHeader` prop to render a custom node (e.g. suggested status, banner, info message) at the top of the dropdown, above the options list.
+  - Added `customDropBoxHeader` key under the `customClass` prop to style the custom header wrapper.
+
+- **SelectField**
+  - Added `renderCustomDropBoxHeader` prop, forwarded to the underlying `Select` component to render a custom node at the top of the dropdown.
 
 # 1.9.12
 
@@ -127,6 +131,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 - Added rtl:as:property comment for linear-gradient usages to ensure support in PostCSS
 
+
 # 1.7.24
 
 - **Timer**
@@ -136,6 +141,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 - introduced AudioPlayer & Timer comopnent.
 
+
 # 1.7.22
 
 - **useDragger**
@@ -149,11 +155,6 @@ In this Library, we Provide Some Basic Components to Build Your Application
   - dataId added for fileName and fileSize element
 - lib imports migrated to es  
 
-# 1.7.x
-
-- Necessary variables are generated only for overridden contrast categories, handled through a Node.js preprocess script.
-- **DotProvider**
-  - Imports newly generated Dot entry theme-related files within the specific chunk.
 
 # 1.7.19
 
@@ -170,6 +171,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 - **ToggleDropDown** - SecondaryValue supported for listitems and searchFields prop supported
 
+
 # 1.7.16
 
 - **DotProvider** - Theme entry for component_v1 added.
@@ -184,6 +186,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 - **IconButton** , **AvatarIcon**
   - RTL icon text alignment issue resolved by adding text-align: center for the icon.
 
+
 # 1.7.13
 
 - **CommonEmptyState**
@@ -195,6 +198,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
   -  useDragger hooks -> bottom and right position is set to initial 
   -  carouselDot animation => `left` changed into `inset-inline-start`
 
+
 # 1.7.12
 
 - **Drawer**

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

@@ -27,7 +27,7 @@
 	
 	/* attachment */
 	--zdt_attachment_default_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachment_default_border:var(--zdt_cta_grey_40_border);
+	--zdt_attachment_default_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachment_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachment_default_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachment_download_bg:var(--zdt_cta_grey_10_bg);
@@ -67,7 +67,7 @@
 	--zdt_avatarIcon_grey_icon:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_avatarIcon_success_icon:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_smoke_icon:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_avatarIcon_default_border:var(--zdt_cta_grey_40_border);
+	--zdt_avatarIcon_default_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_avatarIcon_default_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -116,7 +116,7 @@
 	--zdt_drawer_default_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.4);
 	--zdt_drawer_default_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_drawer_header_bg:var(--zdtm_cta_grey_10_bg_default_inverse_low);
-	--zdt_drawer_header_border:var(--zdt_cta_grey_35_border);
+	--zdt_drawer_header_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_drawer_title_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* toggle dropdown */
@@ -252,13 +252,16 @@
 	--zdt_secondaryText_orage_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_green_text:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_red_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryText_blue_text:var(--zdt_cta_primary_text);
+	--zdt_secondaryText_blue_text:var(--zdtm_cta_primary_text_default_inverse_low);
 	--zdt_secondaryText_blue_hover_text:var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_secondaryText_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
+	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
+	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
+	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -288,7 +291,7 @@
 	/* lookup header common */
 	--zdt_lookupheader_default_bg:var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_lookupheader_default_border:var(--zdt_cta_grey_35_border);
+	--zdt_lookupheader_default_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_lookupheader_white_border:hsla(223, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_lookupheader_para_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_lookupheader_input_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(89.80% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -534,7 +537,7 @@
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_button_border:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_hover_border:var(--zdt_cta_grey_40_border);
+	--zdt_attachmentviewer_hover_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachmentviewer_selected_border:var(--zdt_cta_primary_border);
 	--zdt_attachmentviewer_selected_after_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_selected_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.34);
@@ -564,7 +567,7 @@
 	--zdt_onboarding_header_border:var(--zdtm_cta_secondary_light_border_default);
 	--zdt_onboarding_description_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_close_icon_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_onboarding_close_icon_hover_bg:var(--zdt_cta_primary_light_bg);
+	--zdt_onboarding_close_icon_hover_bg:var(--zdtm_cta_primary_light_bg_default_inverse_lower);
 	--zdt_onboarding_close_icon_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_play_icon_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_play_icon_border:var(--zdt_cta_primary_bg);

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

@@ -27,7 +27,7 @@
 	
 	/* attachment */
 	--zdt_attachment_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachment_default_border:var(--zdt_cta_grey_40_border);
+	--zdt_attachment_default_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachment_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachment_default_hover_border:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachment_download_bg:var(--zdt_cta_grey_10_bg);
@@ -67,7 +67,7 @@
 	--zdt_avatarIcon_grey_icon:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_avatarIcon_success_icon:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_smoke_icon:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_avatarIcon_default_border:var(--zdt_cta_grey_40_border);
+	--zdt_avatarIcon_default_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_avatarIcon_default_hover_border:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_border:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -116,7 +116,7 @@
 	--zdt_drawer_default_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.176);
 	--zdt_drawer_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_drawer_header_bg:var(--zdtm_cta_grey_10_bg_default_inverse_low);
-	--zdt_drawer_header_border:var(--zdt_cta_grey_35_border);
+	--zdt_drawer_header_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_drawer_title_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* toggle dropdown */
@@ -165,7 +165,7 @@
 	
 	/* form action */
 	--zdt_formAction_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_formAction_border:var(--zdt_cta_grey_15_border);
+	--zdt_formAction_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
 	
 	/* freezelayer */
 	--zdt_freezelayer_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.45);
@@ -252,13 +252,16 @@
 	--zdt_secondaryText_orage_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(50.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_green_text:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_red_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryText_blue_text:var(--zdt_cta_primary_text);
+	--zdt_secondaryText_blue_text:var(--zdtm_cta_primary_text_default_inverse_low);
 	--zdt_secondaryText_blue_hover_text:var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_secondaryText_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
+	--zdt_statusdropdown_wrapper_container_border:hsla(218, calc(var(--zd-saturation, 1) * 42.22%), calc(91.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_statusdropdown_wrapper_container_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
+	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -288,8 +291,8 @@
 	/* lookup header common */
 	--zdt_lookupheader_default_bg:var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_lookupheader_default_border:var(--zdt_cta_grey_35_border);
-	--zdt_lookupheader_white_border:var(--zdt_cta_grey_15_border);
+	--zdt_lookupheader_default_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
+	--zdt_lookupheader_white_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
 	--zdt_lookupheader_para_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_lookupheader_input_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(89.80% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	
@@ -456,7 +459,7 @@
 	--zdt_commonalert_plaininfo_hover_bg:hsla(212, calc(var(--zd-saturation, 1) * 80.95%), calc(95.88% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_commonalert_danger_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 73.91%), calc(95.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_commonalert_warning_hover_bg:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(95.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonalert_light_hover_bg:var(--zdt_cta_grey_10_bg);
+	--zdt_commonalert_light_hover_bg:var(--zdtm_cta_grey_10_bg_darker_lowest);
 	--zdt_commonalert_secondlayer_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
 	--zdt_commonalert_default_icon:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_commonalert_success_icon:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
@@ -533,8 +536,8 @@
 	
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_button_border:var(--zdt_cta_grey_35_border);
-	--zdt_attachmentviewer_hover_border:var(--zdt_cta_grey_40_border);
+	--zdt_attachmentviewer_button_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
+	--zdt_attachmentviewer_hover_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachmentviewer_selected_border:var(--zdt_cta_primary_border);
 	--zdt_attachmentviewer_selected_after_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_selected_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.34);
@@ -548,8 +551,8 @@
 	--zdt_separator_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* tag with icon */
-	--zdt_tagWithIconGrey_bg:var(--zdt_cta_grey_20_bg);
-	--zdt_tagWithIconGrey_border:var(--zdt_cta_grey_35_border);
+	--zdt_tagWithIconGrey_bg:var(--zdtm_cta_grey_20_bg_darker_lowest);
+	--zdt_tagWithIconGrey_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
 	--zdt_tagWithIconGrey_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconBlue_bg:hsla(213, calc(var(--zd-saturation, 1) * 84.62%), calc(94.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tagWithIconBlue_border:hsla(212, calc(var(--zd-saturation, 1) * 83.33%), calc(85.88% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
@@ -564,7 +567,7 @@
 	--zdt_onboarding_header_border:var(--zdtm_cta_secondary_light_border_default);
 	--zdt_onboarding_description_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_close_icon_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_onboarding_close_icon_hover_bg:var(--zdt_cta_primary_light_bg);
+	--zdt_onboarding_close_icon_hover_bg:var(--zdtm_cta_primary_light_bg_default_inverse_lower);
 	--zdt_onboarding_close_icon_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_play_icon_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_play_icon_border:var(--zdt_cta_primary_bg);

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

@@ -27,7 +27,7 @@
 	
 	/* attachment */
 	--zdt_attachment_default_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachment_default_border:var(--zdt_cta_grey_40_border);
+	--zdt_attachment_default_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachment_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachment_default_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachment_download_bg:var(--zdt_cta_grey_10_bg);
@@ -67,7 +67,7 @@
 	--zdt_avatarIcon_grey_icon:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_avatarIcon_success_icon:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_smoke_icon:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_avatarIcon_default_border:var(--zdt_cta_grey_40_border);
+	--zdt_avatarIcon_default_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_avatarIcon_default_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_avatarIcon_primary_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -252,13 +252,16 @@
 	--zdt_secondaryText_orage_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_green_text:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_red_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_secondaryText_blue_text:var(--zdt_cta_primary_text);
+	--zdt_secondaryText_blue_text:var(--zdtm_cta_primary_text_default_inverse_low);
 	--zdt_secondaryText_blue_hover_text:var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_secondaryText_secondaryText_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
+	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
+	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
+	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -534,7 +537,7 @@
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_button_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_hover_border:var(--zdt_cta_grey_40_border);
+	--zdt_attachmentviewer_hover_border:var(--zdtm_cta_grey_40_border_default_inverse_medium);
 	--zdt_attachmentviewer_selected_border:var(--zdt_cta_primary_border);
 	--zdt_attachmentviewer_selected_after_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_selected_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.34);
@@ -564,7 +567,7 @@
 	--zdt_onboarding_header_border:var(--zdtm_cta_secondary_light_border_default);
 	--zdt_onboarding_description_text:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_close_icon_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_onboarding_close_icon_hover_bg:var(--zdt_cta_primary_light_bg);
+	--zdt_onboarding_close_icon_hover_bg:var(--zdtm_cta_primary_light_bg_default_inverse_lower);
 	--zdt_onboarding_close_icon_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_play_icon_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_onboarding_play_icon_border:var(--zdt_cta_primary_bg);

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -1,2 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/dark/themes/blue/blue_DotCTA_DarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/light/themes/blue/blue_DotCTA_LightModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotCTA_PureDarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/dark/themes/green/green_DotCTA_DarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/light/themes/green/green_DotCTA_LightModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/pureDark/themes/green/green_DotCTA_PureDarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/dark/themes/orange/orange_DotCTA_DarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/light/themes/orange/orange_DotCTA_LightModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotCTA_PureDarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/dark/themes/red/red_DotCTA_DarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/light/themes/red/red_DotCTA_LightModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/pureDark/themes/red/red_DotCTA_PureDarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotCTA_DarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotCTA_LightModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js

@@ -1,2 +1 @@
-import "./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotCTA_PureDarkModifyCategory.module.css";
 import "./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Dark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Light_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_PureDark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Dark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Light_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_PureDark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Dark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Light_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_PureDark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Dark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Light_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_PureDark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Dark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Light_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables.js

@@ -1 +1,2 @@
-import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkModifyCategory.module.css';

package/es/common/dot_boxShadow.module.css

@@ -40,4 +40,6 @@
     --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
+/* status dropdown */
+    --zd_bs_statusdropdown_wrapper_container: var(--zd_bs_contrast_outline, 3px 3px 26px 0 var(--zdt_texteditor_menu_after_box_shadow));
 }

package/es/form/fields/SelectField/SelectField.js

@@ -97,7 +97,8 @@ export default class SelectField extends PureComponent {
       onFocus,
       iconOnHover,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      renderCustomDropBoxHeader
     } = this.props;
     const {
       LabelProps = {},
@@ -167,7 +168,8 @@ export default class SelectField extends PureComponent {
       iconOnHover: iconOnHover,
       title: title
     }, SelectProps, {
-      ariaLabelledby: uniqueId
+      ariaLabelledby: uniqueId,
+      renderCustomDropBoxHeader: renderCustomDropBoxHeader
     }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,

package/es/form/fields/SelectField/props/defaultProps.js

@@ -13,6 +13,7 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
+  renderCustomDropBoxHeader: null,
   dataSelectorId: 'selectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/SelectField/props/propTypes.js

@@ -45,6 +45,7 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
+  renderCustomDropBoxHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   htmlId: PropTypes.string,
   ...FieldCommonPropTypes
 };