@zohodesk/components 1.0.0-temp-191 → 1.0.0-temp-193

package/lib/ListItem/ListItem.module.css

@@ -1,12 +1,9 @@
 .varClass {
   /* listitem default variables */
-  --listitem_text_color: var(--zdt_base_color);
-  --listitem_padding: 9px 20px;
+  --listitem_text_color: var(--zdt_listitem_default_text);
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_avatar_margin: 0 15px 0 0
-    /*rtl: 0 0 0 15px*/
-  ;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -17,162 +14,144 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}[dir=ltr] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
-
 .list {
   composes: varClass;
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
+  text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
   cursor: pointer;
-  text-decoration: none;
 }
-
-.list,
-.default,
-.secondary {
+.list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-
-.withBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+[dir=ltr] .withBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .withBorder {
+  --listitem_border_width: 0 1px 0 0;
 }
-
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
-.small {
-  --listitem_padding: 7px 3px 7px 5px
-    /*rtl: 7px 5px 7px 3px*/
-  ;
+[dir=ltr] .small {
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+}
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
-
 .medium {
-  --listitem_padding: 7px 20px;
-  --listitem_min_height: 35px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
 }
-
 .large {
-  --listitem_padding: 10px 3px 10px 25px
-    /*rtl: 10px 25px 10px 3px*/
-  ;
-  --listitem_height: 48px;
+  --listitem_height: var(--zd_size48);
+}
+[dir=ltr] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-
-.value,
-.multiLineValue {
+.value, .multiLineValue {
   line-height: 1.5385;
 }
-
-.multiLineValue {
+.multiLineValue{
   word-break: break-word;
   composes: clamp from '../common/common.module.css'
 }
-
 .iconBox {
-  width: 20px;
-  margin-right: 10px;
+  width: var(--zd_size20) ;
   text-align: center;
 }
-
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10) ;
+}
 .iconBox,
 .leftAvatar {
-  font-size: 0;
+  font-size: 0 ;
 }
-
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
-
 .activewithBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+[dir=ltr] .activewithBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .activewithBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
 
 .defaultHover,
 .defaultEffect:hover
-
 /* .defaultEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
-
 .primaryHover,
 .primaryEffect:hover
-
 /* .primaryEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .secondaryHover,
 .secondaryEffect:hover
-
 /* .secondaryEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .darkHover,
 .darkEffect:hover
-
 /* .darkEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
+.activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
-
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
-
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -182,42 +161,45 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
-  right: 20px;
 }
 
+[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
+  right: var(--zd_size20) ;
+}
+
+[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
+  left: var(--zd_size20) ;
+}
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
-
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-
-.defaultTick>i {
+.defaultTick > i {
   display: block;
 }
-
-.smallwithTick {
-  --listitem_padding: 7px 39px 7px 5px
-    /*rtl: 7px 5px 7px 39px*/
-  ;
+[dir=ltr] .smallwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
-
-.mediumwithTick {
-  --listitem_padding: 7px 39px 7px 20px
-    /*rtl: 7px 20px 7px 39px*/
-  ;
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
-
-.largewithTick {
-  --listitem_padding: 10px 39px 10px 25px
-    /*rtl: 10px 25px 10px 39px*/
-  ;
+[dir=ltr] .mediumwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+}
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
+}
+[dir=ltr] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+}
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
-
 .responsiveHeight {
-  --listitem_min_height: 45px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 15px;
-}
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15) ;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
+}

package/lib/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -1,19 +1,16 @@
-.container {
-  padding: 0 20px 12px 20px;
-}
-
-.header {
-  padding-bottom: 4px;
-}
-
-.cardHeading {
-  font-size: 16px;
-  color: var(--zdt_multiselect_res_title_text);
-  composes: bold dotted from '../../common/common.module.css'
-}
-
-.buttonText {
-  font-size: 15px;
-  padding: 0;
-  composes: dotted from '../../common/common.module.css'
-}
+.container{
+    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
+  }
+  .header{
+    padding-bottom: var(--zd_size4) ;
+  }
+  .cardHeading{
+    font-size: var(--zd_font_size16) ;
+    color: var(--zdt_multiselect_res_title_text);
+    composes: bold dotted from '../../common/common.module.css'
+  }
+  .buttonText{
+    font-size: var(--zd_font_size15) ;
+    composes: dotted from '../../common/common.module.css';
+    padding: 0 
+  }

package/lib/MultiSelect/MultiSelect.module.css

@@ -1,122 +1,110 @@
 .wrapper {
   position: relative;
 }
-
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
-
 .container {
-  max-height: 120px;
+  max-height: var(--zd_size120) ;
   composes: oflowy from '../common/common.module.css';
 }
-
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
-
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-
 .effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-
 .effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
-
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-
 .effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-
 .effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
-
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-
 .effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-
 .effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 
 .container.medium {
-  padding-bottom: 8px;
+  padding-bottom: var(--zd_size8) ;
 }
 
 .container.xmedium {
-  padding-bottom: 3px;
-  min-height: 30px;
+  min-height: var(--zd_size30) ;
+  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
-  padding: 2px 6px;
+  font: inherit;
+  padding: var(--zd_size2) var(--zd_size6) ;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
-  font: inherit;
 }
-
 .delete,
 .defaultDelete {
   color: var(--zdt_multiselect_delete_text);
 }
-
 .darkDelete {
   color: var(--zdt_multiselect_darkdelete_text);
 }
 
 .delete:hover,
 .defaultDelete:hover {
-  color: var(--zdt_base_color);
+  color: var(--zdt_multiselect_delete_hover_text);
 }
-
 .darkDelete:hover {
   color: var(--zdt_multiselect_darkdelete_hover_text);
 }
-
 .transparentContainer .delete {
   opacity: 0;
   visibility: hidden;
 }
-
 .transparentContainer:hover .delete {
   opacity: 1;
   visibility: visible;
 }
 
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
 
-.container.xmedium .tag {
-  margin: 2px 10px 0 0;
+[dir=ltr] .container.xmedium .tag {
+  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
 }
 
-.container.medium .tag {
-  margin: 5px 10px 0 0;
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
 }
 
-.responsiveParent {
-  width: 100%;
+[dir=ltr] .container.medium .tag {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
 }
 
+[dir=rtl] .container.medium .tag {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}
+.responsiveParent{
+  width: 100% ;
+}
 .box {
-  background: var(--zdt_base_bg);
+  background: var(--zdt_multiselect_box_bg);
 }
 
 .selectAll:hover {
@@ -124,43 +112,41 @@
 }
 
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200) ;
 }
 
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350) ;
 }
 
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400) ;
 }
 
 .commonMessage {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
-
 .default,
 .dark {
   composes: commonMessage;
 }
-
 .default,
 .defaultBox {
   color: var(--zdt_multiselect_message_text);
 }
-
 .dark,
 .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
   color: var(--zdt_multiselect_darkmsg_text);
 }
+.dark, .darkBox {
+  background: var(--zdt_multiselect_darkmsg_bg);
+}
 
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
-
 .custmSpan {
   display: inline-block;
   vertical-align: middle;
@@ -168,51 +154,51 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  max-width: 100% ;
   visibility: hidden;
 }
-
 .custmSpanMedium {
-  height: 35px;
+  height: var(--zd_size35) ;
 }
-
 .custmSpanXmedium {
-  height: 28px;
+  height: var(--zd_size28) ;
 }
-
 .custmInputWrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  top: 0 ;
+  width: 100% ;
+}
+[dir=ltr] .custmInputWrapper {
+  left: 0 ;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0 ;
 }
-
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6) ;
 }
-
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0 ;
 }
-
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10) ;
 }
-
 .iconContainer {
-  padding-top: 3px
+  padding-top: var(--zd_size3) 
 }
-
-.clearIconSpace {
-  padding-right: 37px
+[dir=ltr] .clearIconSpace {
+  padding-right: var(--zd_size37) 
+}
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37) 
 }
 
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  cursor: pointer;
-  margin-top: 5px;
   font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
-}
+}

package/lib/MultiSelect/SelectedOptions.module.css

@@ -1,9 +1,15 @@
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
-.xmedium {
-  margin: 0 10px 2px 0;
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
 }
-.medium {
-  margin: 5px 10px 0 0;
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
 }

package/lib/MultiSelect/props/defaultProps.js

@@ -120,7 +120,8 @@ var MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -156,7 +157,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
   position: relative;
-  background-color: var(--zdt_base_bg);
+  background-color: var(--zdt_popover_default_bg);
 }
 
 .target {
-  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
 }