@zohodesk/components 1.0.0-temp-53 → 1.0.0-temp-54

package/es/DropBox/DropBox.module.css

@@ -28,8 +28,7 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette,
-.darkPalette {
+.defaultPalette, .darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -84,11 +83,13 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-.defaultShadow {
+[dir=ltr] .defaultShadow {
   box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
+[dir=rtl] .defaultShadow {
+  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
 /* box direction styles */
-/*rtl:begin:ignore*/
 .topStart {
   bottom: 100%;
   right: 0;
@@ -272,7 +273,6 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
-/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,7 +282,10 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-.animationBasic {
+[dir=ltr] .animationBasic {
+  animation-duration: var(--zd_transition2);
+}
+[dir=rtl] .animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .fadeIn {
@@ -291,11 +294,24 @@
 }
 .bounce {
   composes: animationBasic;
+}
+[dir=ltr] .bounce {
+  animation-name: animation;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
   animation-name: animation;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
 .slideUp {
   composes: modeForward from '../common/animation.module.css';
+}
+[dir=ltr] .slideUp {
+  animation-duration: var(--zd_transition3);
+  animation-name: slideUp;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+[dir=rtl] .slideUp {
   animation-duration: var(--zd_transition3);
   animation-name: slideUp;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -325,16 +341,23 @@
 .responsive {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 100%;
   max-height: 90%;
 }
 
+[dir=ltr] .responsive {
+  left: 0;
+}
+
+[dir=rtl] .responsive {
+  right: 0;
+}
+
 .closeBar {
   height: 6px;
+  width: 20%;
   border-radius: 5px;
   background-color: var(--dropbox_mob_close_bg_color);
-  width: 20%;
   cursor: pointer;
   margin: 0 auto var(--zd_size10);
 }
@@ -346,19 +369,32 @@
 }
 .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;
   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/es/DropDown/DropDownHeading.module.css

@@ -33,11 +33,15 @@
 .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;

package/es/DropDown/DropDownItem.module.css

@@ -6,24 +6,32 @@
 
   /* dropdownitem user default variables */
   --dropdownitem-user-width: var(--zd_size42);
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   --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;
-  padding: var(--dropdownitem-padding);
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13);
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+  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);
@@ -33,16 +41,27 @@
   --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
 }
 
-.padding {
+[dir=ltr] .padding {
   --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
 }
 
+[dir=rtl] .padding {
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+}
+
 .children {
-  margin-right: var(--zd_size10);
   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';
 }
@@ -51,7 +70,6 @@
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
@@ -62,6 +80,14 @@
   cursor: var(--dropdownitem-user-cursor);
 }
 
+[dir=ltr] .user {
+  right: 0;
+}
+
+[dir=rtl] .user {
+  left: 0;
+}
+
 .list:hover .user {
   opacity: 1;
   visibility: visible;

package/es/ListItem/ListItem.module.css

@@ -4,8 +4,6 @@
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -16,6 +14,11 @@
 
   /* 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
+    /*rtl: 0 0 0 var(--zd_size15)*/;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
@@ -23,40 +26,49 @@
   list-style: none;
   color: var(--listitem_text_color);
   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 {
+[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 {
+[dir=ltr] .small {
   --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
 }
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+}
 .medium {
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
+  --listitem_height: var(--zd_size48);
+}
+[dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-  --listitem_height: var(--zd_size48);
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 
 .value,
@@ -65,9 +77,14 @@
 }
 .iconBox {
   width: var(--zd_size20);
-  margin-right: 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;
@@ -76,16 +93,18 @@
   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,
@@ -111,10 +130,7 @@
   --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,
@@ -140,8 +156,15 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
+}
+
+[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);
 }
@@ -151,18 +174,27 @@
 .defaultTick > i {
   display: block;
 }
-.smallwithTick {
+[dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
 }
-.mediumwithTick {
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
     /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
 }
-.largewithTick {
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+}
+[dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
 }
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+}

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,8 +1,7 @@
 .wrapper {
   position: relative;
 }
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -10,9 +9,9 @@
   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_advancedmultiselect_transparent_border);
@@ -41,25 +40,40 @@
 .effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
 .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   min-height: var(--zd_size30);
 }
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -105,9 +119,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
-  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelect.module.css

@@ -2,8 +2,7 @@
   position: relative;
 }
 
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -11,9 +10,9 @@
   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);
@@ -48,16 +47,16 @@
 }
 
 .container.xmedium {
-  padding-bottom: var(--zd_size3);
   min-height: var(--zd_size30);
+  padding-bottom: var(--zd_size3);
 }
 
 .delete {
+  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
-  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -87,14 +86,22 @@
   max-width: 100%;
 }
 
-.container.xmedium .tag {
+[dir=ltr] .container.xmedium .tag {
   margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
-.container.medium .tag {
+[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);
+}
+
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -130,9 +137,11 @@
 }
 .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';
@@ -156,9 +165,14 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInputWrapper {
+  left: 0;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0;
+}
 .title {
   margin-bottom: var(--zd_size6);
 }
@@ -171,6 +185,9 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-.clearIconSpace {
+[dir=ltr] .clearIconSpace {
   padding-right: var(--zd_size37)
 }
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37)
+}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,9 +1,15 @@
 .tag {
   max-width: 100%;
 }
-.xmedium {
+[dir=ltr] .xmedium {
   margin: 0 var(--zd_size10) var(--zd_size2) 0;
 }
-.medium {
+[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/es/PopOver/PopOver.module.css

@@ -3,6 +3,6 @@
   background-color: var(--dot_white);
 }
 .target {
-  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
 }

package/es/Radio/Radio.module.css

@@ -7,7 +7,10 @@
   --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 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
+}[dir=rtl] .varClass {
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -15,16 +18,16 @@
 .pointer {
   cursor: pointer;
 }
-.readonly,.disabled {
+.readonly, .disabled {
   cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
+  stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;
-  stroke: var(--radio_stroke_color);
 }
 .radio,
 .centerPath {
@@ -54,10 +57,13 @@
 }
 .centerPath {
   --radio_fill: inherit;
-  transform-origin: center;
   stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
+}
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
 }
-.checked .centerPath {
+[dir=rtl] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,