@zohodesk/components 1.0.0-temp-250 → 1.0.0-temp-253

package/es/DropDown/DropDownItem.module.css

@@ -1,94 +1,87 @@
-.varClass {
-  /* dropdownitem default variables */
-  --dropdownitem-padding: 9px 19px;
-  --dropdownitem-border-color: var(--zdt_dropdown_default_border);
-  --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
-
-  /* dropdownitem user default variables */
-  --dropdownitem-user-width: 42px;
-  --dropdownitem-user-border-style: solid;
-  --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
-  --dropdownitem-user-cursor: pointer;
-}[dir=ltr] .varClass {
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --dropdownitem-user-border-width: 0 1px 0 0;
-}
-.list {
-  composes: varClass;
-  composes: dflex alignVertical from '../common/common.module.css';
-  position: relative;
-  color: var(--zdt_dropdown_default_text);
-  font-size: var(--zd_font_size13) ;
-  padding: var(--dropdownitem-padding);
-  border-style: solid;
-  border-color: var(--dropdownitem-border-color);
-  cursor: pointer;
-  background-color: var(--dropdownitem-bg-color);
-}
-[dir=ltr] .list {
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .list {
-  border-width: 0 1px 0 0;
-}
-
-.listActive {
-  --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
-  --dropdownitem-bg-color: var(--zdt_dropdown_listactive_bg);
-}
-.listHover {
-  --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
-}
-
-[dir=ltr] .padding {
-  --dropdownitem-padding: 0 50px 0 0/*rtl: 0 0 0 50px*/;
-}
-
-[dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 50px;
-}
-
-.children {
-  display: inline-block;
-  font-size: 0 ;
-}
-
-[dir=ltr] .children {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size10) ;
-}
-
-.value {
-  composes: dotted flexgrow from '../common/common.module.css';
-}
-
-.user {
-  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  opacity: 0;
-  visibility: hidden;
-  width: var(--dropdownitem-user-width);
-  border-width: var(--dropdownitem-user-border-width);
-  border-style: var(--dropdownitem-user-border-style);
-  border-color: var(--dropdownitem-user-border-color);
-  cursor: var(--dropdownitem-user-cursor);
-}
-
-[dir=ltr] .user {
-  right: 0 ;
-}
-
-[dir=rtl] .user {
-  left: 0 ;
-}
-
-.list:hover .user {
-  opacity: 1;
-  visibility: visible;
-}
+.varClass {
+  /* dropdownitem default variables */
+  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-border-color: var(--zdt_dropdown_default_border);
+  --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
+
+  /* dropdownitem user default variables */
+  --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-border-style: solid;
+  --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
+  --dropdownitem-user-cursor: pointer;
+}[dir=ltr] .varClass {
+  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}[dir=rtl] .varClass {
+  --dropdownitem-user-border-width: 0 1px 0 0;
+}
+.list {
+  composes: varClass;
+  composes: dflex alignVertical from '../common/common.module.css';
+  position: relative;
+  color: var(--zdt_dropdown_default_text);
+  font-size: var(--zd_font_size13) ;
+  padding: var(--dropdownitem-padding);
+  border-style: solid;
+  border-color: var(--dropdownitem-border-color);
+  cursor: pointer;
+  background-color: var(--dropdownitem-bg-color);
+}
+[dir=ltr] .list {
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .list {
+  border-width: 0 1px 0 0;
+}
+
+.listActive {
+  --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
+  --dropdownitem-bg-color: var(--zdt_dropdown_listactive_bg);
+}
+.listHover {
+  --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
+}
+
+[dir=ltr] .padding {
+  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
+}
+
+[dir=rtl] .padding {
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+}
+
+.children {
+  margin-inline-end: var(--zd_size10) ;
+  display: inline-block;
+  font-size: 0 ;
+}
+
+.value {
+  composes: dotted flexgrow from '../common/common.module.css';
+}
+
+.user {
+  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  opacity: 0;
+  visibility: hidden;
+  width: var(--dropdownitem-user-width);
+  border-width: var(--dropdownitem-user-border-width);
+  border-style: var(--dropdownitem-user-border-style);
+  border-color: var(--dropdownitem-user-border-color);
+  cursor: var(--dropdownitem-user-cursor);
+}
+
+[dir=ltr] .user {
+  right: 0 ;
+}
+
+[dir=rtl] .user {
+  left: 0 ;
+}
+
+.list:hover .user {
+  opacity: 1;
+  visibility: visible;
+}

package/es/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 15px 0;
+  --dropdownsearch-padding: 0 var(--zd_size15) 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 5px 0;
+  --dropdownsearch-padding: 0 var(--zd_size5) 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 15px 0;
+  --dropdownsearch-padding: 0 var(--zd_size15) 0;
 }

package/es/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,8 @@
 .separator {
   height: var(--zd_size1) ;
+  margin-block: var(--zd_size5) ;
+  margin-inline: 0 ;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0 ;
 }

package/es/Label/Label.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* label default variables */
-  --label_font_size: 14px;
+  --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
   --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
@@ -17,19 +17,19 @@
   cursor: var(--label_cursor);
 }
 .xsmall {
-  --label_font_size: 12px;
+  --label_font_size: var(--zd_font_size12);
   --label_line_height: 1.5;
 }
 .small {
-  --label_font_size: 13px;
+  --label_font_size: var(--zd_font_size13);
   --label_line_height: 1.385;
 }
 .medium {
-  --label_font_size: 14px;
+  --label_font_size: var(--zd_font_size14);
   --label_line_height: 1.286;
 }
 .large {
-  --label_font_size: 26px;
+  --label_font_size: var(--zd_font_size26);
   --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }

package/es/ListItem/ListItem.module.css

@@ -1,9 +1,9 @@
 /* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
-  --listitem_font_size: 13px;
+  --listitem_font_size: var(--zd_font_size13);
   --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: 9px 20px;
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
   --listitem_bg_color: var(--zdt_listitem_default_bg);
@@ -21,11 +21,10 @@
   --listitem_multiline_lineheight: 1.5385;
 }
 [dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 15px 0 0
-    /*rtl: 0 0 0 15px*/;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }
 [dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 15px;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
@@ -55,40 +54,31 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: 7px 3px 7px
-    5px
-    /*rtl: 7px 5px 7px 3px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
-  --listitem_padding: 7px 5px 7px 3px;
+  --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_min_height: 48px;
+  --listitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: 10px 3px 10px
-    25px
-    /*rtl: 10px 25px 10px 3px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .large {
-  --listitem_padding: 10px 25px 10px 3px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
 .beforeChild{
+  margin-inline-end: var(--zd_size10) ;
   height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
-}
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
 }
   /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
@@ -104,14 +94,9 @@
 }
 .iconBox {
   width: var(--zd_size20) ;
+  margin-inline-end: var(--zd_size10) ;
   text-align: center;
 }
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size10) ;
-}
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
@@ -267,34 +252,27 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: 7px 39px 7px
-    5px
-    /*rtl: 7px 5px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: 7px 5px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: 7px 39px 7px
-    20px
-    /*rtl: 7px 20px 7px 39px*/;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: 7px 20px 7px 39px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: 10px 39px 10px
-    25px
-    /*rtl: 10px 25px 10px 39px*/;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .largewithTick {
-  --listitem_padding: 10px 25px 10px 39px;
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_min_height: 45px;
-  --listitem_font_size: 15px;
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
+  --listitem_min_height: var(--zd_size45);
+  padding-block: var(--zd_size10) ;
+  --listitem_font_size: var(--zd_font_size15);
 }
 
 
@@ -304,4 +282,4 @@
 
 .titleBox {
   align-items: stretch;
-}
+}

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -1,8 +1,9 @@
 .container{
-    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
+    padding-block: 0 var(--zd_size12) ;
+    padding-inline:var(--zd_size20) ;
   }
   .header{
-    padding-bottom: var(--zd_size4) ;
+    padding-block-end: var(--zd_size4) ;
   }
   .cardHeading{
     font-size: var(--zd_font_size16) ;
@@ -12,5 +13,5 @@
   .buttonText{
     font-size: var(--zd_font_size15) ;
     composes: dotted from '../../common/common.module.css';
-    padding: 0 
+    padding: 0  
   }

package/es/MultiSelect/MultiSelect.module.css

@@ -42,17 +42,18 @@
 }
 
 .container.medium {
-  padding-bottom: var(--zd_size8) ;
+  padding-block-end: var(--zd_size8) ;
 }
 
 .container.xmedium {
+  padding-block-end: var(--zd_size3) ;
   min-height: var(--zd_size30) ;
-  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
+  padding-block: var(--zd_size2) ;
+  padding-inline:var(--zd_size6) ;
   font: inherit;
-  padding: var(--zd_size2) var(--zd_size6) ;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
@@ -85,20 +86,14 @@
   max-width: 100% ;
 }
 
-[dir=ltr] .container.xmedium .tag {
-  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
+.container.xmedium .tag {
+  margin-block: var(--zd_size2) 0 ;
+  margin-inline:0 var(--zd_size10) ;
 }
 
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
-}
-
-[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) ;
+.container.medium .tag {
+  margin-block: var(--zd_size5) 0 ;
+  margin-inline:0 var(--zd_size10) ;
 }
 .responsiveParent{
   width: 100% ;
@@ -126,7 +121,8 @@
 .commonMessage {
   font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size15) ;
 }
 .default,
 .dark {
@@ -175,42 +171,33 @@
   right: 0 ;
 }
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-block-end: var(--zd_size6) ;
 }
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin-block: var(--zd_size6) ;
+  margin-inline:0 ;
 }
 .loader {
   padding: var(--zd_size10) ;
 }
 .iconContainer {
-  padding-top: var(--zd_size3) 
-}
-[dir=ltr] .clearIconSpace {
-  padding-right: var(--zd_size37) 
+  padding-block-start: var(--zd_size3) 
 }
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37) 
+.clearIconSpace {
+  padding-inline-end: var(--zd_size37) 
 }
 
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
+  margin-block-start: var(--zd_size5) ;
   font-weight: var(--zd-fw-normal);
+  margin-inline-end:var(--zd_size3) ;
   cursor: pointer;
-  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0
 }
 
-[dir=ltr] .more {
-  margin-right:var(--zd_size3) 
-}
-
-[dir=rtl] .more {
-  margin-left:var(--zd_size3) 
-}
-
 .rightPlaceholder{
   height: 100% ;
-}
+}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,11 @@
 .tag {
   max-width: 100% ;
 }
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+.xmedium {
+  margin-block: 0 var(--zd_size2) ;
+  margin-inline:0 var(--zd_size10) ;
 }
-[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) ;
+.medium {
+  margin-block: var(--zd_size5) 0 ;
+  margin-inline:0 var(--zd_size10) ;
 }

package/es/PopOver/PopOver.module.css

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

package/es/Radio/Radio.module.css

@@ -1,17 +1,16 @@
 .varClass {
   /* radio default variables */
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
   --radio_bg_color: none;
   --radio_stroke_width: 2px;
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
 }[dir=ltr] .varClass {
-  --radio_label_margin: 0 0 0 6px /*rtl: 0 6px 0 0*/
-  ;
+  --radio_label_margin: 0 0 0 var(--zd_size6);
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 6px 0 0;
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 
 .container {
@@ -49,21 +48,21 @@
 }
 
 .medium {
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
 }
 
 .small {
-  --radio_width: 13px;
-  --radio_height: 13px;
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
 }
 
 .medium.withSecondaryText {
-  margin-top: var(--zd_size1) ;
+  margin-block-start: var(--zd_size1) ;
 }
 
 .small.withSecondaryText {
-  margin-top: var(--zd_size3) ;
+  margin-block-start: var(--zd_size3) ;
 }
 
 .radioLabel {
@@ -146,4 +145,4 @@
   100% {
     transform: scale(1);
   }
-}
+}

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -57,6 +57,7 @@ export default class ResponsiveDropBox extends Component {
       return /*#__PURE__*/React.createElement(Container, {
         alignBox: alignBox,
         isCover: false,
+        flexible: true,
         className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
       }, children);
     }));

package/es/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -2,5 +2,5 @@
   max-height: 70vh ;
 }
 .boxPadding{
-  padding-bottom: var(--zd_size10) ;
+  padding-block-end: var(--zd_size10) ;
 }