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

package/lib/DropBox/css/DropBox.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* dropbox default variables */
-  --dropbox_bg_color: var(--zdt_base_bg);
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
   --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
@@ -15,21 +15,38 @@
 
 .activateInDelay {
   composes: modeForward from '../../common/animation.module.css';
+  pointer-events: none;
+}
+
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+[dir=rtl] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
-  pointer-events: none;
   animation-name: activateInDelay;
 }
 
 .freezeLayer {
   position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  top: 0 ;
+  bottom: 0 ;
   composes: activateInDelay;
 }
 
+[dir=ltr] .freezeLayer {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .freezeLayer {
+  right: 0 ;
+  left: 0 ;
+}
+
 .freeze {
   composes: varClass;
   background: var(--dropbox_mob_bg_color);

package/lib/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
 .listGroup {
-  max-height: 220px;
+  max-height: var(--zd_size220) ;
   composes: oflowy from '../common/common.module.css';
-  margin: 8px 0 4px;
+  margin: var(--zd_size8) 0 var(--zd_size4) ;
 }

package/lib/DropDown/DropDownHeading.module.css

@@ -1,33 +1,31 @@
 .varClass {
   /* dropdownheading default variables */
-  --dropdownheading_text_color: var(--zdt_base_color);
+  --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: 10px 20px;
+  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: 20px;
-  --dropdownheading_underline_height: 1px;
+  --dropdownheading_underline_width: var(--zd_size20);
+  --dropdownheading_underline_height: var(--zd_size1);
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: 20px;
+  --dropdownheading_underline_left: var(--zd_size20);
 }
-
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
   position: relative;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
   color: var(--dropdownheading_text_color);
   padding: var(--dropdownheading_padding);
   background-color: var(--dropdownheading_bg_color);
 }
-
 .default::after {
   position: absolute;
   content: '';
-  bottom: 2px;
+  bottom: var(--zd_size2) ;
   width: var(--dropdownheading_underline_width);
   height: var(--dropdownheading_underline_height);
 }
@@ -35,19 +33,21 @@
 .light {
   composes: default;
 }
-
-.light::after,
-.dark::after {
-  left: var(--dropdownheading_underline_left);
+.light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }
+[dir=ltr] .light::after, [dir=ltr] .dark::after {
+  left: var(--dropdownheading_underline_left);
+}
+[dir=rtl] .light::after, [dir=rtl] .dark::after {
+  right: var(--dropdownheading_underline_left);
+}
 
 .dark {
   composes: default;
   --dropdownheading_text_color: var(--zdt_dropdown_darkheading_text);
   --dropdownheading_bg_color: var(--zdt_dropdown_darkheading_bg);
 }
-
 .dark::after {
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_darkheading_underline_bg);
-}
+}

package/lib/DropDown/DropDownItem.module.css

@@ -1,54 +1,65 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: 9px 19px;
+  --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: 42px;
-  --dropdownitem-user-border-width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --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);
-  color: var(--zdt_base_color);
-  font-size: 13px;
-  border-width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
   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);
 }
 
-.padding {
-  --dropdownitem-padding: 0 50px 0 0
-    /*rtl: 0 0 0 50px*/
-  ;
+[dir=ltr] .padding {
+  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
+}
+
+[dir=rtl] .padding {
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
 }
 
 .children {
-  margin-right: 10px;
   display: inline-block;
-  font-size: 0;
+  font-size: 0 ;
+}
+
+[dir=ltr] .children {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .children {
+  margin-left: var(--zd_size10) ;
 }
 
 .value {
@@ -58,9 +69,8 @@
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
@@ -70,7 +80,15 @@
   cursor: var(--dropdownitem-user-cursor);
 }
 
+[dir=ltr] .user {
+  right: 0 ;
+}
+
+[dir=rtl] .user {
+  left: 0 ;
+}
+
 .list:hover .user {
   opacity: 1;
   visibility: visible;
-}
+}

package/lib/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/lib/DropDown/DropDownSeparator.module.css

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

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: inherit;
+  font-size: inherit ;
   font-weight: initial;
-  margin: initial;
+  margin: initial ;
 }

package/lib/Label/Label.module.css

@@ -1,12 +1,11 @@
 .varClass {
   /* label default variables */
-  --label_font_size: 14px;
-  --label_text_color: var(--zdt_base_color);
+  --label_font_size: var(--zd_font_size14);
+  --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
-
 /* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
@@ -17,53 +16,42 @@
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);
 }
-
 .xsmall {
-  --label_font_size: 12px;
-  --label_line_height: 1.5;
+  --label_font_size: var(--zd_font_size12);
+  --label_line_height:1.5;
 }
-
 .small {
-  --label_font_size: 13px;
-  --label_line_height: 1.385;
+  --label_font_size: var(--zd_font_size13);
+  --label_line_height:1.385;
 }
-
 .medium {
-  --label_font_size: 14px;
-  --label_line_height: 1.286;
+  --label_font_size: var(--zd_font_size14);
+  --label_line_height:1.286;
 }
-
 .large {
-  --label_font_size: 26px;
-  --label_line_height: 0.6923;
+  --label_font_size: var(--zd_font_size26);
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
-
 .pointer {
   --label_cursor: pointer;
 }
-
 .cursor {
   --label_cursor: default;
 }
-
 .title {
   display: block;
 }
-
 .subtitle {
   display: inline-block;
 }
-
 .font_default {
   --label_font_family: var(--zd_regular);
 }
-
 .font_primary {
   --label_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
-
 .dotted {
   composes: dotted from '../common/common.module.css';
-}
+}

package/lib/Label/LabelColors.module.css

@@ -1,27 +1,21 @@
 .default {
-  --label_text_color: var(--zdt_base_color);
+  --label_text_color: var(--zdt_label_default_text);
 }
-
 .primary {
   --label_text_color: var(--zdt_label_primary_text);
 }
-
 .secondary {
   --label_text_color: var(--zdt_label_secondary_text);
 }
-
 .danger {
   --label_text_color: var(--zdt_label_danger_text);
 }
-
 .mandatory {
   --label_text_color: var(--zdt_label_mandatory_text);
 }
-
 .disable {
   --label_text_color: var(--zdt_label_disable_text);
 }
-
 .dark {
   --label_text_color: var(--zdt_label_dark_text);
 }

package/lib/Layout/Layout.module.css

@@ -11,8 +11,8 @@
 }
 
 .cover {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
 }
 
 /* .flex {
@@ -67,8 +67,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
+  min-height: 0 ;
+  min-width: 0 ;
 }
 
 .shrinkOff {
@@ -83,18 +83,18 @@
   -moz-flex-shrink: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-shrink: 1;
-  min-width: 0;
+  min-width: 0 ;
 }
 
 .basis {
-  flex-basis: 0%;
+  flex-basis: 0% ;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
 }
 
 .basisAuto {
-  flex-basis: auto;
+  flex-basis: auto ;
   -webkit-flex-basis: auto;
   -moz-flex-basis: auto;
   -ms-flex-basis: auto;
@@ -146,8 +146,8 @@
 
 .col-3 {
   -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: 25% ;
+  max-width: 25% ;
 }
 
 .col-4 {
@@ -164,8 +164,8 @@
 
 .col-6 {
   -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: 50% ;
+  max-width: 50% ;
 }
 
 .col-7 {
@@ -182,8 +182,8 @@
 
 .col-9 {
   -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: 75% ;
+  max-width: 75% ;
 }
 
 .col-10 {
@@ -200,8 +200,8 @@
 
 .col-12 {
   -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%;
+  flex-basis: 100% ;
+  max-width: 100% ;
 }
 
 .hCenter {