@zohodesk/components 1.0.0-temp-43 → 1.0.0-temp-44

package/es/DateTime/DateTime.module.css

@@ -1,27 +1,23 @@
 .semibold {
   font-family: var(--zd_semibold);
 }
-[dir=ltr] .boxPadding {
+.boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
 }
-[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
-}
 .container {
-  font-size: var(--zd_font_size16);
-  composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
+  font-size: var(--zd_font_size16);
+  composes: offSelection from '../common/common.module.css';
 }
 .header {
   min-height: var(--zd_size36);
-  composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
+  composes: boxPadding;
 }
 
 .datesStr {
@@ -39,25 +35,17 @@
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
-}
-.thArrow, .datesStr {
   cursor: pointer;
 }
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
-}
-.thArrow:hover, .datesStr:hover {
   background: var(--zdt_datetime_datestr_hover_bg);
 }
 
-[dir=ltr] .navigation {
+.navigation {
   margin-left: var(--zd_size2);
 }
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
-}
 .thMonYear {
   font-size: var(--zd_font_size13);
   line-height: var(--zd_size24);
@@ -73,9 +61,9 @@
 }
 .days {
   min-height: var(--zd_size36);
+  padding-top: var(--zd_size7);
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
 }
 .daysStr {
   font-size: var(--zd_font_size10);
@@ -85,8 +73,8 @@
 }
 .dateRow {
   height: var(--zd_size28);
-  composes: alignBetween from '../common/common.module.css';
   margin: var(--zd_size1) 0 var(--zd_size5);
+  composes: alignBetween from '../common/common.module.css';
 }
 .dateRow:last-child {
   margin-bottom: 0;
@@ -105,11 +93,8 @@
 
 .today,
 .today:hover {
-  color: var(--zdt_datetime_today_text);
-}
-
-.today, .today:hover {
   background-color: var(--zdt_datetime_today_bg);
+  color: var(--zdt_datetime_today_text);
   border-radius: 50%;
 }
 
@@ -123,8 +108,8 @@
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
-  position: relative;
   margin: 0 var(--zd_size4);
+  position: relative;
 }
 .footer {
   margin-top: var(--zd_size10);
@@ -140,15 +125,8 @@
 }
 
 .downArrow {
-  color: var(--zdt_datetime_daystr_text);
-}
-
-[dir=ltr] .downArrow {
   margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
+  color: var(--zdt_datetime_daystr_text);
 }
 .dateText {
   cursor: pointer;
@@ -161,22 +139,17 @@
   font-size: var(--zd_font_size11);
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
+  margin-top: var(--zd_size14);
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14);
 }
 .yearContainer {
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
-[dir=ltr] .yearContainer {
-  left: 0;
-}
-[dir=rtl] .yearContainer {
-  right: 0;
-}
 .subContainer {
   position: relative;
 }

package/es/DateTime/DateWidget.module.css

@@ -3,9 +3,15 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.readOnly, .readOnly > input, .disabled {
+.readOnly,
+.readOnly > input,
+.disabled {
   cursor: not-allowed;
 }
+.readOnly,
+.disabled {
+  composes: readonly from '../common/common.module.css';
+}
 .enabled {
   cursor: pointer;
 }
@@ -15,16 +21,10 @@
 .inputLine {
   position: absolute;
   bottom: 0;
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
   left: 0;
   right: 0;
-}
-[dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+  transition: border var(--zd_transition2) linear 0s;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/YearView.module.css

@@ -1,30 +1,25 @@
-[dir=ltr] .boxPadding {
+.boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
 }
 .month {
   width: 30.333%;
-  font-size: var(--zd_font_size12);
-  line-height: var(--zd_size26);
-  height: var(--zd_size26);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size26);
+  height: var(--zd_size26);
 }
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
 .currentMonth,
 .currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-.currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
+  color: var(--zdt_yearview_currentmonth_text);
 }
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
@@ -53,13 +48,8 @@
   color: var(--zdt_yearview_year_hover_text);
 }
 .arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-[dir=ltr] .arrowActive {
   transform: rotate(180deg);
-}
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
+  color: var(--zdt_yearview_year_hover_text);
 }
 .container {
   height: 100%;

package/es/DropBox/DropBox.module.css

@@ -28,7 +28,8 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette, .darkPalette {
+.defaultPalette,
+.darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -83,13 +84,11 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-[dir=ltr] .defaultShadow {
+.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;
@@ -273,6 +272,7 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
+/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,10 +282,7 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-[dir=ltr] .animationBasic {
-  animation-duration: var(--zd_transition2);
-}
-[dir=rtl] .animationBasic {
+.animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .fadeIn {
@@ -294,24 +291,11 @@
 }
 .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);
@@ -341,23 +325,16 @@
 .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);
 }
@@ -369,31 +346,18 @@
 }
 .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;
-  bottom: 0;
-  composes: activateInDelay;
-}
-[dir=ltr] .freezeLayer {
   left: 0;
+  bottom: 0;
   right: 0;
-}
-[dir=rtl] .freezeLayer {
-  right: 0;
-  left: 0;
+  composes: activateInDelay;
 }
 .freeze {
   composes: varClass;

package/es/DropDown/DropDownHeading.module.css

@@ -33,14 +33,10 @@
 .light {
   composes: default;
 }
-.light::after, .dark::after {
-  background-color: var(--dropdownheading_underline_bg_color);
-}
-[dir=ltr] .light::after, [dir=ltr] .dark::after {
+.light::after,
+.dark::after {
   left: var(--dropdownheading_underline_left);
-}
-[dir=rtl] .light::after, [dir=rtl] .dark::after {
-  right: var(--dropdownheading_underline_left);
+  background-color: var(--dropdownheading_underline_bg_color);
 }
 
 .dark {

package/es/DropDown/DropDownItem.module.css

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

package/es/Layout/docs/Layout__Hidden.docs.js

@@ -40,7 +40,7 @@ export default class Layout__Hidden extends React.Component {
       hidden: ['xs']
     }, /*#__PURE__*/React.createElement("div", {
       style: {
-        background: 'var(--dot_black)',
+        background: 'var(--dot_bg_black)',
         width: '45px',
         height: '100%'
       }

package/es/Layout/docs/Layout__four_Column.docs.js

@@ -41,7 +41,7 @@ export default class Layout__four_Column extends React.Component {
       hidden: ['xs']
     }, /*#__PURE__*/React.createElement("div", {
       style: {
-        background: 'var(--dot_black)',
+        background: 'var(--dot_bg_black)',
         width: '220px',
         height: '100%'
       }

package/es/Layout/docs/Layout__three_Column.docs.js

@@ -40,7 +40,7 @@ export default class Layout__three_Column extends React.Component {
       hidden: ['xs']
     }, /*#__PURE__*/React.createElement("div", {
       style: {
-        background: 'var(--dot_black)',
+        background: 'var(--dot_bg_black)',
         width: '220px',
         height: '100%'
       }

package/es/ListItem/ListItem.js

@@ -10,6 +10,7 @@ import { Container, Box } from '../Layout';
 
 import Icon from '@zohodesk/icons/lib/Icon';
 import CssProvider from '../Provider/CssProvider';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -19,6 +20,7 @@ export default class ListItem extends React.Component {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -51,6 +53,16 @@ export default class ListItem extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
+  responsiveFunc({
+    mediaQueryOR
+  }) {
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -102,13 +114,18 @@ export default class ListItem extends React.Component {
     }
 
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, ({
+      mobileToTab
+    }) => /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
+      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
       dataId: dataIdString,
       onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
@@ -130,7 +147,7 @@ export default class ListItem extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }