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

package/es/Select/Select.module.css

@@ -3,29 +3,29 @@
 }
 
 .small {
-  max-height: var(--zd_size200) ;
+  max-height: 200px;
 }
 
 .medium {
-  max-height: var(--zd_size350) ;
+  max-height: 350px;
 }
 
 .large {
-  max-height: var(--zd_size400) ;
+  max-height: 400px;
 }
 
 .emptyState {
-  font-size: var(--zd_font_size14) ;
+  font-size: 14px;
   color: var(--zdt_select_emptystate_text);
   composes: semibold from '../common/common.module.css';
 }
 
 .box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
+  padding: 12px 6px;
 }
 
 .box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding: 12px 15px;
 }
 
 .hide {
@@ -37,32 +37,32 @@
 }
 /* css:lineheight-validation:ignore */
 .arrowIcon {
-  height: var(--zd_size8) ;
+  height: 8px;
   line-height: var(--zd_size8);
 }
 
 .small.search {
-  padding: 0 var(--zd_size5) ;
+  padding: 0 5px;
 }
 
 .medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
+  padding: 3px 20px 0;
 }
 
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-bottom: 6px;
 }
 
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin: 6px 0;
 }
 
 .listItemContainer {
-  padding: var(--zd_size10) 0 ;
+  padding: 10px 0;
 }
 
 .responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
+  padding: 10px 0 0;
 }
 
 .readonly {
@@ -85,33 +85,22 @@
 
 .leftIcon {
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  width: var(--zd_size30) ;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 30px;
 }
 
-[dir=ltr] .leftIcon {
-  left: 0 ;
-}
-
-[dir=rtl] .leftIcon {
-  right: 0 ;
-}
-
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
+.iconSelect {
+  padding-left: 30px;
 }
 
 .dropBoxList {
-  padding: var(--zd_size10) 0 ;
+  padding: 10px 0;
 }
 
 .responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
+  padding: 10px 0 0 0;
 }
 
 .rotate {
@@ -131,5 +120,5 @@
 }
 
 .loader {
-  padding: var(--zd_size10) ;
+  padding: 10px;
 }

package/es/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -11,23 +11,14 @@
   border-radius: var(--stencil_border_radius);
 }
 .stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-name: placeHolderShimmer;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
+  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer-ltr {
+@keyframes placeHolderShimmer {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -36,19 +27,10 @@
     background-position: var(--zd_size468) 0;
   }
 }
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
 
 .rectangular {
   composes: stencil;
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -65,16 +47,16 @@
 }
 
 .small {
-  --stencil_width: var(--zd_size110);
+  --stencil_width: 110px;
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: var(--zd_size170);
+  --stencil_width: 170px;
 }
 .large {
-  --stencil_width: var(--zd_size220);
+  --stencil_width: 220px;
 }
 
 .circle {
@@ -82,15 +64,15 @@
   --stencil_border_radius: 50%;
 }
 .clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
+  --stencil_width: 42px;
+  --stencil_height: 42px;
 }
 .cmedium,
 .cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
+  --stencil_width: 30px;
+  --stencil_height: 30px;
 }
 .csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
+  --stencil_width: 20px;
+  --stencil_height: 20px;
 }

package/es/Switch/Switch.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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -50,7 +48,7 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       isCover: false,
       alignBox: "row",
@@ -59,8 +57,9 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      dataSelectorId: dataSelectorId
-    }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
+      dataSelectorId: dataSelectorId,
+      ...SwitchProps
+    }, /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
@@ -78,15 +77,16 @@ export default class Switch extends React.Component {
       "data-test-id": dataId,
       className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
       tabIndex: isReadOnly || disabled ? '-1' : '0'
-    })), text && /*#__PURE__*/React.createElement(Label, _extends({
+    })), text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       id: id,
       size: labelSize,
       type: "subtitle",
       onClick: !disabled || !isReadOnly ? this.onChange : null,
-      customClass: customLabel
-    }, LabelProps)));
+      customClass: customLabel,
+      ...LabelProps
+    }));
   }
 
 }

package/es/Switch/Switch.module.css

@@ -26,7 +26,6 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
-  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -38,14 +37,15 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
+
+/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
   position: absolute;
-  right: 50% ;
+  right: 50%;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
-  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }
@@ -55,49 +55,59 @@
 }
 
 .checked+.label:after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: -1px;
 }
 
+/*rtl:end:ignore*/
+
 .input {
   display: none;
 }
 
 .small {
-  height: var(--zd_size14) ;
-  width: var(--zd_size28) ;
+  height: 14px;
+  width: 28px;
 }
+
+/*rtl:begin:ignore*/
 .switch_smallLabel {
-  height: var(--zd_size9) ;
-  width: var(--zd_size22) ;
-  top: calc( var(--zd_size2) * -1 ) ;
-  left: var(--zd_size2) ;
+  height: 9px;
+  width: 22px;
+  top: -2px;
+  left: 2px;
 }
+
+/*rtl:end:ignore*/
 .switch_smallLabel:after {
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+  width: 12px;
+  height: 12px;
+  top: -2px;
 }
 
 .medium {
-  height: var(--zd_size18) ;
-  width: var(--zd_size34) ;
+  height: 18px;
+  width: 34px;
 }
+
+/*rtl:begin:ignore*/
 .switch_mediumLabel {
-  height: var(--zd_size13) ;
-  width: var(--zd_size31) ;
-  top: var(--zd_size2) ;
-  left: var(--zd_size2) ;
+  height: 13px;
+  width: 31px;
+  top: 2px;
+  left: 2px;
 }
+
+/*rtl:end:ignore*/
 .switch_mediumLabel:after {
-  width: var(--zd_size18) ;
-  height: var(--zd_size18) ;
-  top: calc( var(--zd_size3) * -1 ) ;
+  width: 18px;
+  height: 18px;
+  top: -3px;
 }
 
 .input:disabled+.label {
-  opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
+  opacity: 0.4;
 }
 
 .switch {
@@ -118,13 +128,6 @@
 
 .switch+label {
   position: relative;
-  top: calc( var(--zd_size1) * -1 ) ;
-}
-
-[dir=ltr] .switch+label {
-  margin-left: var(--zd_size12) ;
-}
-
-[dir=rtl] .switch+label {
-  margin-right: var(--zd_size12) ;
+  top: -1px;
+  margin-left: 12px;
 }

package/es/Tab/Tab.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); }
-
 /* eslint-disable react/forbid-component-props */
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
@@ -70,7 +68,7 @@ export default function Tab(_ref) {
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
   let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
   let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
     className: tabClass,
@@ -88,8 +86,9 @@ export default function Tab(_ref) {
     "aria-selected": isActive ? true : false,
     tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
     "aria-label": text ? text : null,
-    dataSelectorId: dataSelectorId
-  }, customProps), /*#__PURE__*/React.createElement(Container, {
+    dataSelectorId: dataSelectorId,
+    ...customProps
+  }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "both",
     className: styles.textContainer

package/es/Tab/Tab.module.css

@@ -1,26 +1,32 @@
 .tab {
   text-transform: uppercase;
+  cursor: pointer;
   letter-spacing: 0.6px;
   text-decoration: none;
-  cursor: pointer;
 }
+
 .vertical {
-  height: 100% ;
+  height: 100%;
 }
+
 .horizontal {
-  width: 100% ;
-  max-width: 100% ;
+  width: 100%;
+  max-width: 100%;
 }
+
 .textContainer,
 .tabText {
-  max-width: inherit ;
+  max-width: inherit;
 }
+
 .tabText {
   composes: dotted from '../common/common.module.css';
 }
+
 .disabled {
   cursor: not-allowed;
 }
+
 .border {
   border-bottom: 1px solid var(--zdt_tab_default_border);
 }
@@ -30,71 +36,76 @@
 .delta {
   transition: all var(--zd_transition2);
 }
+
 .alpha {
-  font-size: var(--zd_font_size11) ;
+  padding: 0 18px;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size18) ;
 }
+
 .tabAlpha {
   composes: alpha;
   color: var(--zdt_tab_alpha_text);
 }
+
 .alphaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
   background-color: var(--zdt_tab_alpha_hover_bg);
 }
+
 .alphaActive {
   composes: alpha;
   color: var(--zdt_tab_alpha_active_text);
 }
-.alphaActive_border, .betaActive_border {
+
+.alphaActive_border,
+.betaActive_border {
   border-color: var(--zdt_tab_alpha_active_border);
 }
+
 .deltaActive_border {
   border-color: var(--zdt_tab_delta_active_border);
 }
+
 .beta {
-  font-size: var(--zd_font_size14) ;
+  padding: 0 4px;
+  font-size: 14px;
   line-height: 4.2857;
+  margin-right: 40px;
   text-transform: capitalize;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .beta {
-  margin-right: var(--zd_size40) ;
-}
-[dir=rtl] .beta {
-  margin-left: var(--zd_size40) ;
 }
+
 .tabBeta {
   composes: beta;
   color: var(--zdt_tab_alpha_text);
 }
+
 .betaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .betaActive {
   composes: beta;
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .delta {
-  font-size: var(--zd_font_size11) ;
+  padding: 0 4px;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .delta {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .delta {
-  margin-left: var(--zd_size10) ;
+  margin-right: 10px;
 }
+
 .tabDelta {
   composes: delta;
   color: var(--zdt_tab_alpha_text);
 }
+
 .deltaHover:hover {
   color: var(--zdt_tab_alpha_active_text);
 }
+
 .deltaActive {
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
-}
+}

package/es/Tab/TabContentWrapper.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 from 'react';
 import { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
@@ -18,15 +16,16 @@ const TabContentWrapper = _ref => {
     tagName,
     a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
     dataSelectorId: dataSelectorId,
-    tagName: tagName
-  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+    tagName: tagName,
+    ...a11y
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;

package/es/Tab/TabWrapper.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, { useState, useCallback } from 'react';
 import { TabWrapper_defaultProps } from './props/defaultProps';
 import { TabWrapper_propTypes } from './props/propTypes';
@@ -37,7 +35,7 @@ function TabWrapper(_ref) {
     let TabsChild = child.type;
     let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
     return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
-    , _extends({}, child.props, {
+    , { ...child.props,
       selectedTab: selectedTab,
       onSelect: setSelectedTab,
       type: type,
@@ -48,7 +46,7 @@ function TabWrapper(_ref) {
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
       align: align
-    }));
+    });
   }));
 }
 

package/es/Tab/Tabs.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); }
-
 /* eslint-disable react/forbid-component-props */
 
 /* eslint css-modules/no-unused-class: [2, {
@@ -459,7 +457,7 @@ class Tabs extends React.Component {
         classProps.className = itemClass;
       }
 
-      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
+      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
         key: child.props.id,
         getTabRef: this.getTabRef,
         onSelect: onSelect,
@@ -470,22 +468,23 @@ class Tabs extends React.Component {
         needBorder: needTabBorder,
         needAppearance: needAppearance,
         align: align,
-        isVirtual: isVirtual
-      }, classProps));
+        isVirtual: isVirtual,
+        ...classProps
+      });
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `,
       dataSelectorId: `${dataSelectorId}_moreIcon`
-    }, /*#__PURE__*/React.createElement(Container, _extends({
+    }, /*#__PURE__*/React.createElement(Container, {
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
-      eleRef: getTargetRef
-    }, MoreButtonProps, {
+      eleRef: getTargetRef,
+      ...MoreButtonProps,
       "aria-label": "MoreTabs",
       role: "link",
       tagName: "button"
-    }), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -495,7 +494,7 @@ class Tabs extends React.Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         isActive: isPopupReady,
         isAnimate: true,
         size: "medium",
@@ -505,12 +504,12 @@ class Tabs extends React.Component {
         boxPosition: position,
         getRef: getContainerRef,
         isBoxPaddingNeed: true,
-        isArrow: false
-      }, DropBoxProps, {
+        isArrow: false,
+        ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
         onClose: this.togglePopup
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
@@ -531,7 +530,7 @@ class Tabs extends React.Component {
           dataId
         } = child.props;
         const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
+        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
           key: id,
           value: value,
           onClick: this.moreTabSelect,
@@ -544,8 +543,9 @@ class Tabs extends React.Component {
             customListItem: menuItemClass
           },
           target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
+          dataId: `${dataId}_Tab`,
+          ...ListItemProps
+        }, !showTitleInMoreOptions ? children : null);
       })));
     })) : null);
   }