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

package/es/DateTime/YearView.module.css

@@ -1,22 +1,19 @@
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
+.boxPadding {
+  padding-right: 19px;
+  padding-left: 19px;
 }
 
 .month {
   width: 30.333%;
-  font-size: var(--zd_font_size12) ;
-  line-height: 2.1667;
-  height: var(--zd_size26) ;
-  color: var(--zdt_yearview_month_text);
   text-align: center;
-  margin: 0 0 var(--zd_size1) ;
+  margin: 0 0 1px;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
+  font-size: 12px;
+  line-height: 2.1667;
+  height: 26px;
+  color: var(--zdt_base_color);
 }
 
 .month:hover {
@@ -25,11 +22,8 @@
 
 .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 {
@@ -37,18 +31,18 @@
 }
 
 .year {
-  padding: var(--zd_size7) 0 ;
+  padding: 7px 0;
   cursor: pointer;
 }
 
 .year:hover .yearText,
 .year:hover .arrow {
-  color: var(--zdt_yearview_year_hover_text);
+  color: var(--zdt_base_color);
 }
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: var(--zd_font_size11) ;
+  font-size: 11px;
 }
 
 .arrow {
@@ -62,38 +56,31 @@
 
 .isActive .yearText {
   font-family: var(--zd_semibold);
-  color: var(--zdt_yearview_year_hover_text);
-  font-size: var(--zd_font_size11) ;
+  color: var(--zdt_base_color);
+  font-size: 11px;
 }
 
 .arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-[dir=ltr] .arrowActive {
   transform: rotate(180deg);
-}
-
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
+  color: var(--zdt_base_color);
 }
 
 .container {
-  height: 100% ;
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   composes: boxPadding;
-  background-color: var(--zdt_yearview_default_bg);
+  background-color: var(--zdt_base_bg);
 }
 
 .yearContainer {
-  height: var(--zd_size135) ;
+  height: 135px;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
+  padding-bottom: 5px;
 }
 
 .toggleYear {
-  height: 0 ;
-  padding: 0 ;
+  height: 0;
+  padding: 0;
 }

package/es/DropBox/DropBox.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 import Modal from '../Modal/Modal'; // import { getLibraryConfig } from '../Provider/Config';
@@ -42,27 +40,28 @@ export default function DropBox(props) {
   const {
     zIndexStyle
   } = cssJSLogic(props);
-  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
     onClose: onClose,
     elementRef: dropBoxRef,
     needAutoFocus: needAutoFocus,
     needRestoreFocus: needRestoreFocus,
     needListNavigation: needListNavigation,
     needFocusLoop: needFocusLoop,
-    needEnterAction: needEnterAction
-  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    needEnterAction: needEnterAction,
+    ...focusScopeProps
+  }, /*#__PURE__*/React.createElement(DropBoxElement, {
     isModel: isModel,
-    direction: direction
-  }, props, {
+    direction: direction,
+    ...props,
     zIndexStyle: zIndexStyle,
     subContainerRef: dropBoxRef
-  }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+  })) : /*#__PURE__*/React.createElement(DropBoxElement, {
     isModel: isModel,
     subContainerRef: dropBoxRef,
-    direction: direction
-  }, props, {
+    direction: direction,
+    ...props,
     zIndexStyle: zIndexStyle
-  }));
+  });
   return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -20,10 +20,6 @@
 
 .defaultPalette,
 .darkPalette {
-  /* css:theme-validation:ignore */
-}
-
-.defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
 
@@ -33,48 +29,48 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
+    --dropbox_padding: 10px 0 0 0;
 }
 
 /* sizes */
 .mini {
-    width: var(--zd_size140) ;
+    width: 140px;
 }
 
 .xmini {
-    width: var(--zd_size160) ;
+    width: 160px;
 }
 
 .xsmall {
-    width: var(--zd_size180) ;
+    width: 180px;
 }
 
 .small {
-    width: var(--zd_size200) ;
+    width: 200px;
 }
 
 .medium {
-    width: var(--zd_size220) ;
+    width: 220px;
 }
 
 .large {
-    width: var(--zd_size260) ;
+    width: 260px;
 }
 
 .mlarge {
-    width: var(--zd_size280) ;
+    width: 280px;
 }
 
 .xlarge {
-    width: var(--zd_size304) ;
+    width: 304px;
 }
 
 .xxlarge {
-    width: var(--zd_size364) ;
+    width: 364px;
 }
 
 .default {
-    width: 100% ;
+    width: 100%;
 }
 
 /* shadow */
@@ -99,120 +95,123 @@
 }
 
 /* box direction styles */
+/*rtl:begin:ignore*/
 .topStart {
-    bottom: 100% ;
-    right: 0 ;
+    bottom: 100%;
+    right: 0;
 }
 
 .topEnd {
-    bottom: 100% ;
-    left: 0 ;
+    bottom: 100%;
+    left: 0;
 }
 
 .topMid {
-    bottom: 100% ;
-    left: 50% ;
+    bottom: 100%;
+    left: 50%;
     transform: translateX(-50%);
 }
 
 .bottomStart {
-    top: 100% ;
-    right: 0 ;
+    top: 100%;
+    right: 0;
 }
 
 .bottomEnd {
-    top: 100% ;
-    left: 0 ;
+    top: 100%;
+    left: 0;
 }
 
 .bottomMid {
-    top: 100% ;
-    left: 50% ;
+    top: 100%;
+    left: 50%;
     transform: translateX(-50%);
 }
 
 .rightStart {
-    left: 100% ;
-    bottom: 0 ;
+    left: 100%;
+    bottom: 0;
 }
 
 .rightEnd {
-    left: 100% ;
-    top: 0 ;
+    left: 100%;
+    top: 0;
 }
 
 .rightMid {
-    left: 100% ;
-    top: 50% ;
+    left: 100%;
+    top: 50%;
     transform: translateY(-50%);
 }
 
 .leftStart {
-    right: 100% ;
-    bottom: 0 ;
+    right: 100%;
+    bottom: 0;
 }
 
 .leftEnd {
-    right: 100% ;
-    top: 0 ;
+    right: 100%;
+    top: 0;
 }
 
 .leftMid {
-    right: 100% ;
-    top: 50% ;
+    right: 100%;
+    top: 50%;
     transform: translateY(-50%);
 }
 
 /* space for arrow */
 .arrowtop {
-    padding-bottom: var(--zd_size10) ;
+    padding-bottom: 10px;
 }
 
 .arrowright {
-    padding-left: var(--zd_size10) ;
+    padding-left: 10px;
 }
 
 .arrowleft {
-    padding-right: var(--zd_size10) ;
+    padding-right: 10px;
 }
 
 .arrowbottom {
-    padding-top: var(--zd_size10) ;
+    padding-top: 10px;
 }
 
 /* space from target */
 .paddingSpace_top {
-    padding-bottom: var(--zd_size5) ;
+    padding-bottom: 5px;
 }
 
 .paddingSpace_right {
-    padding-left: var(--zd_size5) ;
+    padding-left: 5px;
 }
 
 .paddingSpace_left {
-    padding-right: var(--zd_size5) ;
+    padding-right: 5px;
 }
 
 .paddingSpace_bottom {
-    padding-top: var(--zd_size5) ;
+    padding-top: 5px;
 }
 
 .arrow {
     position: absolute;
-    height: var(--zd_size34) ;
-    width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
-    padding: var(--zd_size4) ;
+    height: 34px;
+    width: 34px;
+    clip: rect(3px,
+            29px,
+            17px,
+            8px);
+    padding: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .arrowShape {
-    height: var(--zd_size10) ;
-    width: var(--zd_size10) ;
+    height: 10px;
+    width: 10px;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
-  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -228,20 +227,20 @@
 .top .start,
 .top .end,
 .top .mid {
-    bottom: calc( var(--zd_size17) * -1 ) ;
+    bottom: -17px;
 }
 
 .top .start {
-    left: var(--zd_size28) ;
+    left: 28px;
 }
 
 .top .end {
-    right: var(--zd_size28) ;
+    right: 28px;
     transform: rotate(180deg) translateX(-50%);
 }
 
 .top .mid {
-    left: 50% ;
+    left: 50%;
 }
 
 .top .start,
@@ -252,19 +251,19 @@
 .bottom .start,
 .bottom .end,
 .bottom .mid {
-    top: calc( var(--zd_size17) * -1 ) ;
+    top: -17px;
 }
 
 .bottom .start {
-    left: var(--zd_size28) ;
+    left: 28px;
 }
 
 .bottom .mid {
-    left: 50% ;
+    left: 50%;
 }
 
 .bottom .end {
-    right: var(--zd_size28) ;
+    right: 28px;
     transform: translateX(50%);
 }
 
@@ -276,20 +275,20 @@
 .left .start,
 .left .mid,
 .left .end {
-    right: calc( var(--zd_size17) * -1 ) ;
+    right: -17px;
 }
 
 .left .start {
-    top: var(--zd_size28) ;
+    top: 28px;
 }
 
 .left .end {
     transform: rotate(90deg) translateX(50%);
-    bottom: var(--zd_size28) ;
+    bottom: 28px;
 }
 
 .left .mid {
-    top: 50% ;
+    top: 50%;
 }
 
 .left .start,
@@ -300,15 +299,15 @@
 .right .start,
 .right .mid,
 .right .end {
-    left: calc( var(--zd_size17) * -1 ) ;
+    left: -17px;
 }
 
 .right .start {
-    top: var(--zd_size28) ;
+    top: 28px;
 }
 
 .right .mid {
-    top: 50% ;
+    top: 50%;
 }
 
 .right .start,
@@ -317,9 +316,11 @@
 }
 
 .right .end {
-    bottom: var(--zd_size28) ;
+    bottom: 28px;
     transform: rotate(-90deg) translateX(-50%);
 }
+
+/*rtl:end:ignore*/
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -331,11 +332,7 @@
     box-shadow: none;
 }
 
-[dir=ltr] .animationBasic {
-    animation-duration: var(--zd_transition2);
-}
-
-[dir=rtl] .animationBasic {
+.animationBasic {
     animation-duration: var(--zd_transition2);
 }
 
@@ -354,27 +351,12 @@
 }
 .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);
@@ -406,32 +388,24 @@
 
 .responsive {
     position: absolute;
-    bottom: 0 ;
-    width: 100% ;
-    max-height: 90% ;
-}
-
-[dir=ltr] .responsive {
-    left: 0 ;
-}
-
-[dir=rtl] .responsive {
-    right: 0 ;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-height: 90%;
 }
 
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
-  /* css:theme-validation:ignore */
-    width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
+    width: 20%;
     cursor: pointer;
-    margin: 0 auto var(--zd_size10) ;
+    margin: 0 auto 10px;
 }
 
 .boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
+    --dropbox_padding: 10px 0;
 }
 
 .darkPalette {

package/es/DropBox/css/DropBox.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* dropbox default variables */
-  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_bg_color: var(--zdt_base_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
   --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
@@ -15,41 +15,23 @@
 
 .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 ;
+  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;
-  /* css:theme-validation:ignore */
   background: var(--dropbox_mob_bg_color);
 }
 

package/es/DropDown/DropDown.js

@@ -10,7 +10,8 @@ export default class DropDown extends React.Component {
     let {
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+    return /*#__PURE__*/React.createElement(PopOver, { ...this.props
+    }, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
   }
 
 }

package/es/DropDown/DropDown.module.css

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