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

package/es/Avatar/Avatar.module.css

@@ -1,8 +1,8 @@
 .varClass {
   /* avatar default variables */
-  --avatar_text_color: var(--zdt_base_color);
-  --avatar_font_size: 14px;
-  --avatar_bg_color: var(--zdt_base_bg);
+  --avatar_text_color: var(--zdt_avatar_default_text);
+  --avatar_font_size: var(--zd_font_size14);
+  --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
   --avatar_border_style: solid;
@@ -18,35 +18,40 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
+  color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
-  color: var(--avatar_text_color);
 }
 
 .border {
   border-color: var(--avatar_border_color);
 }
 
-.borderOnHover:hover,
-.borderOnActive {
+.borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
-.avatar,
-.primary {
+.avatar, .primary {
   background-color: var(--avatar_bg_color);
 }
 
 .shadow {
   position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
+  height: 100% ;
+  width: 100% ;
+  top: 0 ;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
+[dir=ltr] .shadow {
+  left: 0 ;
+}
+
+[dir=rtl] .shadow {
+  right: 0 ;
+}
+
 .shadow.black {
   box-shadow: var(--zd_bs_avatar_black);
 }
@@ -55,8 +60,7 @@
   box-shadow: var(--zd_bs_avatar_white);
 }
 
-.avatar,
-.circle {
+.avatar, .circle {
   border-radius: var(--avatar_border_radius);
 }
 
@@ -65,17 +69,31 @@
 }
 
 .image {
-  border-radius: var(--avatar_border_radius);
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 0 ;
   z-index: 0;
+  border-radius: var(--avatar_border_radius);
+}
+
+[dir=ltr] .image {
+  left: 0 ;
+}
+
+[dir=rtl] .image {
+  right: 0 ;
 }
 
 .animate {
   composes: fadeIn modeForward from './../common/animation.module.css';
+}
+
+[dir=ltr] .animate {
+  animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animate {
   animation-duration: var(--zd_transition2);
 }
 
@@ -123,31 +141,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: 8px;
+  --avatar_font_size: var(--zd_font_size8);
 }
 
 .small {
-  --avatar_font_size: 9px;
+  --avatar_font_size: var(--zd_font_size9);
 }
 
 .xsmall {
-  --avatar_font_size: 12px;
+  --avatar_font_size: var(--zd_font_size12);
 }
 
 .medium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .xmedium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .large {
-  --avatar_font_size: 18px;
+  --avatar_font_size: var(--zd_font_size18);
 }
 
 .xlarge {
-  --avatar_font_size: 28px;
+  --avatar_font_size: var(--zd_font_size28);
 }
 
 .white {

package/es/AvatarTeam/AvatarTeam.js

@@ -1,3 +1,5 @@
+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';
@@ -45,13 +47,12 @@ export default class AvatarTeam extends React.Component {
       customAvatarTeam = ''
     } = customClass;
     let border = borderOnHover || onClick;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
       "data-id": dataId,
       "data-test-id": dataId,
-      "data-selector-id": dataSelectorId,
-      ...AvatarTeamProps
-    }, /*#__PURE__*/React.createElement(Avatar, {
+      "data-selector-id": dataSelectorId
+    }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
       onClick: onClick,
       palette: palette,
@@ -65,9 +66,8 @@ export default class AvatarTeam extends React.Component {
       borderOnHover: border,
       needInnerBorder: needInnerBorder,
       needBorder: needBorder,
-      needDefaultBorder: needDefaultBorder,
-      ...AvatarProps
-    }), /*#__PURE__*/React.createElement("span", {
+      needDefaultBorder: needDefaultBorder
+    }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
           ${style[`${size}team`]} ${customAvatarTeam}`
     }));

package/es/AvatarTeam/AvatarTeam.module.css

@@ -6,196 +6,184 @@
   --avatarteam_outline_width: 1px;
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
-  --avatarteam_bg_color: var(--zdt_base_bg);
-  --avatarteam_width: 5px;
-  --avatarteam_height: 5px;
+  --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
+  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: var(--zd_size5);
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: 1px;
+  --avatarteam_top_top: var(--zd_size1);
 }
-
 .container {
   position: relative;
   display: inline-block;
-  font-size: 0;
+  font-size: 0 ;
   vertical-align: middle;
 }
-
 .team {
   composes: varClass;
   composes: posab from '../common/common.module.css';
-  transform: translate(-50%, -50%);
-  left: 50%;
   top: var(--avatarteam_top_top);
-  border-width: var(--avatarteam_border_width);
-  border-style: var(--avatarteam_border_style);
-  border-color: var(--avatarteam_border_color);
-  background-color: var(--avatarteam_bg_color);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
-  border-radius: var(--avatarteam_border_radius);
   outline-width: var(--avatarteam_outline_width);
   outline-style: var(--avatarteam_outline_style);
   outline-color: var(--avatarteam_outline_color);
+  border-width: var(--avatarteam_border_width);
+  border-style: var(--avatarteam_border_style);
+  border-color: var(--avatarteam_border_color);
+  background-color: var(--avatarteam_bg_color);
+  border-radius: var(--avatarteam_border_radius);
+}
+[dir=ltr] .team {
+  transform: translate(-50%, -50%);
+  left: 50% ;
+}
+[dir=rtl] .team {
+  transform: translate(50%, -50%);
+  right: 50% ;
 }
-
 .nofill {
   --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
 }
-
 .primaryFilled,
 .infoFilled {
   --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
 }
-
 .secondaryFilled {
-  --avatarteam_bg_color: var(--zdt_base_bg);
+  --avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
 }
-
 .borderOnHover:hover .nofill,
 .borderOnActive .nofill {
-  --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
+  --avatarteam_border_color : var(--zdt_avatarteam_nofill_hover_border);
 }
-
 .borderOnHover:hover .primaryFilled,
 .borderOnActive .primaryFilled,
 .borderOnHover:hover .infoFilled,
 .borderOnActive .infoFilled {
   --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
 }
-
 .team:after,
 .team:before {
   position: absolute;
   content: '';
+  height: inherit ;
+  width: inherit ;
+  top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
+}
+.team:after, .team:before {
   border: inherit;
   background-color: inherit;
   border-radius: inherit;
-  height: inherit;
-  width: inherit;
   box-shadow: inherit;
-  top: var(--avatarteam_bottom_top);
+}
+[dir=ltr] .team:after, [dir=ltr] .team:before {
   left: var(--avatarteam_bottom_left);
   right: var(--avatarteam_bottom_right);
-  outline-width: var(--avatarteam_outline_width);
-  outline-style: var(--avatarteam_outline_style);
-  outline-color: var(--avatarteam_outline_color);
 }
-
+[dir=rtl] .team:after, [dir=rtl] .team:before {
+  right: var(--avatarteam_bottom_left);
+  left: var(--avatarteam_bottom_right);
+}
 .smallteam,
 .xsmallteam,
 .xxsmallteam {
-  --avatarteam_height: 3px;
-  --avatarteam_width: 3px;
+  --avatarteam_height: var(--zd_size3);
+  --avatarteam_width: var(--zd_size3);
 }
-
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: 5px;
-  --avatarteam_width: 5px;
+  --avatarteam_height: var(--zd_size5);
+  --avatarteam_width: var(--zd_size5);
 }
-
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: 7px;
-  --avatarteam_width: 7px;
+  --avatarteam_height: var(--zd_size7);
+  --avatarteam_width: var(--zd_size7);
 }
 
 .xxsmallteam {
   /*  Variable:Ignore  */
   --avatarteam_top_top: 0px;
 }
-
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: 13px;
+  --avatarteam_bottom_top: var(--zd_size13);
 }
-
 .xxsmallteam:after {
-  --avatarteam_bottom_left: -8px;
+  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
 }
-
 .xxsmallteam:before {
-  --avatarteam_bottom_right: -8px;
+  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: 17px;
+  --avatarteam_bottom_top: var(--zd_size17);
 }
-
 .smallteam:after {
-  --avatarteam_bottom_left: -8px;
+  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
 }
-
 .smallteam:before {
-  --avatarteam_bottom_right: -8px;
+  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: 24px;
+  --avatarteam_bottom_top: var(--zd_size24);
 }
-
 .xsmallteam:after {
-  --avatarteam_bottom_left: -10px;
+  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
 }
-
 .xsmallteam:before {
-  --avatarteam_bottom_right: -10px;
+  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: 26px;
+  --avatarteam_bottom_top: var(--zd_size26);
 }
-
 .mediumteam:after {
-  --avatarteam_bottom_left: -13px;
+  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
 }
-
 .mediumteam:before {
-  --avatarteam_bottom_right: -13px;
+  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: 30px;
+  --avatarteam_bottom_top: var(--zd_size30);
 }
-
 .xmediumteam:after {
-  --avatarteam_bottom_left: -16px;
+  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
 }
-
 .xmediumteam:before {
-  --avatarteam_bottom_right: -16px;
+  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: 46px;
+  --avatarteam_bottom_top: var(--zd_size46);
 }
-
 .largeteam:after {
-  --avatarteam_bottom_left: -24px;
+  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
 }
-
 .largeteam:before {
-  --avatarteam_bottom_right: -24px;
+  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: 65px;
+  --avatarteam_bottom_top: var(--zd_size65);
 }
-
 .xlargeteam:after {
-  --avatarteam_bottom_left: -29px;
+  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
 }
-
 .xlargeteam:before {
-  --avatarteam_bottom_right: -29px;
-}
+  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
+}

package/es/Button/Button.js

@@ -1,3 +1,5 @@
+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';
@@ -39,7 +41,7 @@ export default function Button(props) {
     style: finalStyle
   });
   let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({
     className: buttonClass,
     "data-id": disabled ? `${dataId}_disabled` : dataId,
     "data-test-id": disabled ? `${dataId}_disabled` : dataId,
@@ -48,11 +50,10 @@ export default function Button(props) {
     "data-title": title,
     type: "button",
     ref: getRef,
-    "data-selector-id": dataSelectorId,
-    ...customProps,
-    ...a11y,
+    "data-selector-id": dataSelectorId
+  }, customProps, a11y, {
     id: id
-  }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
     className: finalStyle.overlay
   }, /*#__PURE__*/React.createElement("div", {
     className: loaderParentClass