@zohodesk/components 1.0.0-temp-249.1 → 1.0.0-temp-199.23

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

@@ -1,36 +1,36 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
-	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
-	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_bg: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, calc(var(--zd-saturation, 1) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_box_shadow: hsla(46, calc(var(--zd-saturation, 1) * 81.07%), 52.35%,  0.2);
+	--zdt_cta_primary_hover_box_shadow: hsla(48, calc(var(--zd-saturation, 1) * 100.00%), 35.49%,  0.25);
+	--zdt_cta_primary_light_bg: hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, calc(var(--zd-saturation, 1) * 30.19%), calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_bg: hsla(38, calc(var(--zd-saturation, 1) * 30.19%), calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_alpha_text: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, calc(var(--zd-saturation, 1) * 2.75%), calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_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_cta_grey_20_bg: hsla(217, calc(var(--zd-saturation, 1) * 22.81%), calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -1,53 +1,53 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
-	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
 	
 	/* dropbox */
-	--zdt_dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg: rgb(33,33,33);
-	--zdt_listitem_dark_text: rgb(226,228,230);
-	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
-	--zdt_listitem_dark_active_bg: rgb(59,77,109);
-	--zdt_listitem_dark_tickicon: rgb(215,152,53);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
+	--zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text: rgb(208,208,212);
-	--zdt_tag_dark_bg: rgb(38,38,38);
-	--zdt_tag_dark_hover_text: rgb(208,208,212);
-	--zdt_tag_dark_hover_bg: rgb(80,51,72);
-	--zdt_tag_dark_close_bg: rgb(134,70,84);
-	--zdt_tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: rgb(88,88,88);
-	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
-	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
-	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border: rgb(153,153,153);
-	--zdt_avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* label */
-	--zdt_label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	--zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 	
 	/* button */
-	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: var(--zd-gradient-saturation, linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%);
 }

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -1,6 +1,8 @@
 .varClass {
-    --local-colorIndicator-height: var(--zd_size10);
-    --local-colorIndicator-width: var(--zd_size10);
+    /* css:validation:ignore */
+    --local-colorIndicator-height: var(--zd_font_size10);
+    /* css:validation:ignore */
+    --local-colorIndicator-width: var(--zd_font_size10);
     --local-colorIndicator-border-radius: 10px;
 }
 

package/es/ListItem/ListItem.js

@@ -76,7 +76,8 @@ export default class ListItem extends React.Component {
       needMultiLineText,
       secondaryValue,
       renderBeforeChildren,
-      renderValueRightPlaceholderNode
+      renderValueRightPlaceholderNode,
+      lhsAlignContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -85,7 +86,8 @@ export default class ListItem extends React.Component {
     let {
       customListItem = '',
       customTickIcon = '',
-      customValueRightPlaceholder = ''
+      customValueRightPlaceholder = '',
+      titleBoxClass = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -124,7 +126,7 @@ export default class ListItem extends React.Component {
       flexible: true,
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
+      className: `${style.titleBox} ${lhsAlignContent !== 'start' ? `${style[`alignLhsBox_${lhsAlignContent}`]}` : ''} ${titleBoxClass}`
     }, isRenderable(renderBeforeChildren) ? /*#__PURE__*/React.createElement(Box, {
       adjust: true,
       className: style.beforeChild

package/es/ListItem/ListItem.module.css

@@ -1,3 +1,4 @@
+/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -15,9 +16,14 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
+
+  /* line-height for multiline text */
+  --listitem_multiline_lineheight: 1.5385;
+}
+[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}[dir=rtl] .varClass {
+}
+[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -70,14 +76,9 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
-}
+  /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: 1.5385;
+  line-height: var(--listitem_multiline_lineheight);
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -115,26 +116,39 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
+.contentWrapper {
+  composes: dflex flexrow from '../common/common.module.css';
+  align-items: stretch;
+  width: 100% ;
+}
 .lhsBox {
   composes: dflex from '../common/common.module.css';
   align-self: stretch;
 }
-.lhsBox_small,
-.lhsBox_medium,
-.lhsBox_large{
-  composes: varClass;
-  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
-  height: 100% ;
+.beforeChild{
+  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
   composes: dflex alignVertical from '../common/common.module.css';
 }
-.lhsBox_small {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
 }
-.lhsBox_medium {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
 }
-.lhsBox_large {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+.titleBox {
+  composes: dflex alignVertical from '../common/common.module.css';
+  align-items: stretch;
+}
+.alignLhsBox_end {
+  align-items: flex-end;
+}
+.alignLhsBox_center {
+  align-items: center;
+}
+.lhsBoxInner{
+  composes: dflex alignVertical from '../common/common.module.css';
+  height: 100% ;
+  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -271,8 +285,4 @@
 
 .leftBox {
   composes: dflex flexcolumn from '../common/common.module.css';
-}
-
-.titleBox {
-  composes: dflex alignVertical from '../common/common.module.css';
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -124,11 +124,13 @@ export default class ListItemWithAvatar extends React.PureComponent {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: style[`lhsBox_${size}`]
+      className: style.lhsBoxInner
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -174,7 +176,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -100,12 +100,14 @@ export default class ListItemWithCheckBox extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {
@@ -130,7 +132,7 @@ export default class ListItemWithCheckBox extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -116,14 +116,14 @@ export default class ListItemWithIcon extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
-      align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Box, {
-      align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      align: lhsAlignContent
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -154,7 +154,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -101,13 +101,15 @@ export default class ListItemWithRadio extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -133,7 +135,7 @@ export default class ListItemWithRadio extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/props/defaultProps.js

@@ -30,7 +30,8 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start'
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,

package/es/ListItem/props/propTypes.js

@@ -61,14 +61,16 @@ export const ListItem_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customValueRightPlaceholder: PropTypes.string,
+    titleBoxClass: PropTypes.string
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
   secondaryValue: PropTypes.string,
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,8 +889,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit
+      limit,
+      customProps
     } = this.props;
+    const {
+      SuggestionsProps = {}
+    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1059,7 +1063,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps,
       isVirtualizerEnabled,
-      limit
+      limit,
+      customProps
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,18 +193,23 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction
+      setVirtualizerContainerRefFunction,
+      customClass
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
+    const {
+      containerClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
+      "aria-multiselectable": ariaMultiselectable,
+      className: containerClass
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/props/defaultProps.js

@@ -38,6 +38,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -169,5 +170,6 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -114,7 +114,8 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
@@ -199,7 +200,11 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string
+  limitReachedMessage: PropTypes.string,
+  customClass: PropTypes.shape({
+    containerClass: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -273,7 +278,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      customProps,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,7 +357,8 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps
+      customProps,
+      customClass
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -375,8 +376,11 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps
+      ListItemProps = {}
     } = customProps;
+    const {
+      dropBoxClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -473,7 +477,10 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        customClass: {
+          customDropBox: dropBoxClass
+        }
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/props/defaultProps.js

@@ -102,7 +102,8 @@ export const SelectWithAvatar_defaultProps = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -131,5 +132,6 @@ export const SelectWithIcon_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customProps: {}
+  customProps: {},
+  customClass: {}
 };