@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-257.1

package/README.md

@@ -2,28 +2,10 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
-# 1.6.25
-
-- **Tab**
-  - `variant` prop supported for different rendering styles (`text`, `icon`, `iconWithText`).
-  - `iconName` and `iconSize` props supported to render an icon within the tab.
-  - `renderBefore` and `renderAfter` slots supported for custom node rendering.
-
-- **Tabs**
-  - `renderMoreTarget` slot supported to customize the more-button icon (node or function); falls back to the default icon when not provided.
-
-- **ListItemWithIcon**
-  - `customTitleBoxClass` prop supported to customize the title box styling.
-
-- **ListItemWithAvatar, ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio**
-  - `renderLeftValuePlaceholderNode` prop supported to render elements before the value.
-
-- **ListItem**
-  - `customLeftValuePlaceholder` key supported in `customClass` prop to customize the left value placeholder node container styling.
-
 # 1.6.24
 
 - **RippleEffect** Reordered className values to ensure customClass is always appended last to adopt CSS utility .
+
 # 1.6.23
 
 - Removed the empty string fallback from the `font-family` variable definition in `AppContainer`, as the font fallback behavior is now handled correctly.
@@ -53,6 +35,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
   - `getSubContainerRef` prop supported to get the sub-container element reference.
 - **Popup**
   - Popup Unmount Memory Leak Issue Resolved  .
+
 # 1.6.18
 
 - buttonComponentVersion temproary support given in LibraryContext , will remove once app is migrated

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

@@ -349,8 +349,6 @@
 	--zdt_tab_alpha_active_text: var(--zdt_cta_primary_text);
 	--zdt_tab_alpha_active_border: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tab_delta_active_border: var(--zdt_cta_primary_border);
-	--zdt_tab_default_hover_bg: hsla(223, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_tab_default_border_active: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg: hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -16,30 +16,15 @@
 	--zdt_v1_label_secondary_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
-	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
-	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
-	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
-	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
-	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
-	--zdt_v1_palette_grey_light_bg: hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_light_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_v1_palette_grey_light_hover_bg: hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
+	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_v1_palette_grey_bg: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_border: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_hover_border: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_hover_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -349,8 +349,6 @@
 	--zdt_tab_alpha_active_text: var(--zdt_cta_primary_text);
 	--zdt_tab_alpha_active_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tab_delta_active_border: var(--zdt_cta_primary_border);
-	--zdt_tab_default_hover_bg: var(--zdtm_cta_grey_20_bg_default_inverse_low);
-	--zdt_tab_default_border_active: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -16,30 +16,15 @@
 	--zdt_v1_label_secondary_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
-	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
-	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
-	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
-	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
-	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
-	--zdt_v1_palette_grey_light_bg: hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_light_border: hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_light_hover_bg: hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
+	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_v1_palette_grey_bg: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_border: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_hover_border: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_hover_text: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(212, 91.84%, calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(213, 100.00%, calc(36.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 37.14%, calc(93.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(135, 7.41%, calc(78.82% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(134, 78.63%, calc(25.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(180, 11.11%, calc(92.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(28, 81.75%, calc(49.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(27, 10.68%, calc(79.80% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(30, 100.00%, calc(34.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(30, 13.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(0, 71.91%, calc(53.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(343, 4.76%, calc(71.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(1, 75.38%, calc(38.24% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(330, 5.56%, calc(92.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(46, 81.07%, calc(52.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(45, 28.17%, calc(72.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(48, 100.00%, calc(35.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(60, 8.57%, calc(93.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -349,8 +349,6 @@
 	--zdt_tab_alpha_active_text: var(--zdt_cta_primary_text);
 	--zdt_tab_alpha_active_border: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tab_delta_active_border: var(--zdt_cta_primary_border);
-	--zdt_tab_default_hover_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(21.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_tab_default_border_active: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -16,30 +16,15 @@
 	--zdt_v1_label_secondary_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
-	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
-	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
-	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
-	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
-	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
-	--zdt_v1_palette_grey_light_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_light_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_v1_palette_grey_light_hover_bg: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
+	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_v1_palette_grey_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_hover_border: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_hover_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -11,5 +11,4 @@
 	--zdtm_cta_primary_bg_default: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdtm_cta_primary_hover_bg_default: hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_20_bg_default_inverse_low: hsla(217, 22.81%, calc(11.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/es/ListItem/ListItem.js

@@ -88,7 +88,6 @@ export default class ListItem extends React.Component {
     let {
       customListItem = '',
       customTickIcon = '',
-      customLeftValuePlaceholder = '',
       customValueRightPlaceholder = '',
       customTitleBox = ''
     } = customClass;
@@ -131,7 +130,7 @@ export default class ListItem extends React.Component {
       className: `${style.titleBox} ${lhsAlignContent !== 'start' ? `${style[`alignLhsBox_${lhsAlignContent}`]}` : ''} ${customTitleBox}`
     }, isRenderable(renderBeforeChildren) ? /*#__PURE__*/React.createElement(Box, {
       adjust: true,
-      className: `${style.beforeChild} ${customLeftValuePlaceholder}`
+      className: style.beforeChild
     }, renderNode(renderBeforeChildren)) : null, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,

package/es/ListItem/ListItemWithAvatar.js

@@ -83,7 +83,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
       needMultiLineText,
       secondaryValue,
       renderValueRightPlaceholderNode,
-      renderLeftValuePlaceholderNode,
       lhsAlignContent
     } = this.props;
     let {
@@ -96,9 +95,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customListItem = '',
       customAvatar = '',
       customAvatarTeam = '',
-      customValueRightPlaceholder = '',
-      customLeftValuePlaceholder = '',
-      customTitleBox = ''
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -160,11 +157,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.titleBox} ${customTitleBox}`
-    }, isRenderable(renderLeftValuePlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
-      adjust: true,
-      className: `${customLeftValuePlaceholder}`
-    }, renderNode(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       "data-title": isDisabled ? null : title,

package/es/ListItem/ListItemWithCheckBox.js

@@ -67,7 +67,6 @@ export default class ListItemWithCheckBox extends React.Component {
       needMultiLineText,
       secondaryValue,
       renderValueRightPlaceholderNode,
-      renderLeftValuePlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -83,9 +82,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customListItem = '',
       customCheckBox = '',
       customLabel = '',
-      customValueRightPlaceholder = '',
-      customLeftValuePlaceholder = '',
-      customTitleBox = ''
+      customValueRightPlaceholder = ''
     } = customClass;
     const iconBoxDataId = `${dataId ? dataId : value}_checkBox`;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
@@ -128,11 +125,8 @@ export default class ListItemWithCheckBox extends React.Component {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.titleBox} ${customTitleBox}`
-    }, isRenderable(renderLeftValuePlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
-      adjust: true,
-      className: `${customLeftValuePlaceholder}`
-    }, renderNode(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       "data-title": isDisabled ? null : title,

package/es/ListItem/ListItemWithIcon.js

@@ -76,13 +76,10 @@ export default class ListItemWithIcon extends React.Component {
       a11y,
       customClass,
       customValueRightPlaceholderClass,
-      customLeftValuePlaceholderClass,
-      customTitleBoxClass,
       customProps,
       needMultiLineText,
       secondaryValue,
       renderValueRightPlaceholderNode,
-      renderLeftValuePlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -142,11 +139,8 @@ export default class ListItemWithIcon extends React.Component {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.titleBox} ${customTitleBoxClass}`
-    }, isRenderable(renderLeftValuePlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
-      adjust: true,
-      className: `${customLeftValuePlaceholderClass}`
-    }, renderNode(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value,

package/es/ListItem/ListItemWithRadio.js

@@ -68,7 +68,6 @@ export default class ListItemWithRadio extends React.Component {
       needMultiLineText,
       secondaryValue,
       renderValueRightPlaceholderNode,
-      renderLeftValuePlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -84,9 +83,7 @@ export default class ListItemWithRadio extends React.Component {
       customListItem = '',
       customRadio = '',
       customRadioWrap = '',
-      customValueRightPlaceholder = '',
-      customLeftValuePlaceholder = '',
-      customTitleBox = ''
+      customValueRightPlaceholder = ''
     } = customClass;
     const iconBoxDataId = `${dataId}_radio`;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
@@ -130,11 +127,8 @@ export default class ListItemWithRadio extends React.Component {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.titleBox} ${customTitleBox}`
-    }, isRenderable(renderLeftValuePlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
-      adjust: true,
-      className: `${customLeftValuePlaceholder}`
-    }, renderNode(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       "data-title": disableTitle ? null : title,

package/es/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -62,23 +62,4 @@ describe('ListItemWithAvatar', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithAvatar with renderLeftValuePlaceholderNode', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithAvatar with renderLeftValuePlaceholderNode & it\'s custom class', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js

@@ -62,23 +62,4 @@ describe('ListItemWithCheckBox', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithCheckBox with renderLeftValuePlaceholderNode', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithCheckBox with renderLeftValuePlaceholderNode & it\'s custom class', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -60,21 +60,4 @@ describe('ListItemWithIcon', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithIcon with renderLeftValuePlaceholderNode', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithIcon with renderLeftValuePlaceholderNode & it\'s custom class', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
-      customLeftValuePlaceholderClass: "customLeftValuePlaceholderClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -62,23 +62,4 @@ describe('ListItemWithRadio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithRadio with renderLeftValuePlaceholderNode', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithRadio with renderLeftValuePlaceholderNode & it\'s custom class', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });