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

package/es/Avatar/Avatar.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';
@@ -156,15 +154,16 @@ export default class Avatar extends React.Component {
     let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
     let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", {
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
       "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
       "data-test-id": dataId,
       onClick: onClick,
       "data-selector-id": dataSelectorId,
-      tabIndex: onClick ? 0 : null
-    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+      tabIndex: onClick ? 0 : null,
+      ...AvatarProps
+    }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`,
       "data-test-id": `${dataId}_AvatarInitial`,

package/es/Avatar/Avatar.module.css

@@ -1,8 +1,8 @@
 .varClass {
   /* avatar default variables */
-  --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
-  --avatar_bg_color: var(--zdt_avatar_default_bg);
+  --avatar_text_color: var(--zdt_base_color);
+  --avatar_font_size: 14px;
+  --avatar_bg_color: var(--zdt_base_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
   --avatar_border_style: solid;
@@ -18,52 +18,35 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
-  /* css:theme-validation:ignore */
-  color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
+  color: var(--avatar_text_color);
 }
 
 .border {
-  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
 .borderOnHover:hover,
 .borderOnActive {
-  /* css:theme-validation:ignore */
-}
-
-.borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
 .avatar,
 .primary {
-  /* css:theme-validation:ignore */
-}
-
-.avatar, .primary {
   background-color: var(--avatar_bg_color);
 }
 
 .shadow {
   position: absolute;
-  height: 100% ;
-  width: 100% ;
-  top: 0 ;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 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);
 }
@@ -72,7 +55,8 @@
   box-shadow: var(--zd_bs_avatar_white);
 }
 
-.avatar, .circle {
+.avatar,
+.circle {
   border-radius: var(--avatar_border_radius);
 }
 
@@ -81,31 +65,17 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
+  border-radius: var(--avatar_border_radius);
+  width: 100%;
+  height: 100%;
   position: absolute;
-  top: 0 ;
+  top: 0;
+  left: 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);
 }
 
@@ -153,31 +123,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: var(--zd_font_size8);
+  --avatar_font_size: 8px;
 }
 
 .small {
-  --avatar_font_size: var(--zd_font_size9);
+  --avatar_font_size: 9px;
 }
 
 .xsmall {
-  --avatar_font_size: var(--zd_font_size12);
+  --avatar_font_size: 12px;
 }
 
 .medium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .xmedium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .large {
-  --avatar_font_size: var(--zd_font_size18);
+  --avatar_font_size: 18px;
 }
 
 .xlarge {
-  --avatar_font_size: var(--zd_font_size28);
+  --avatar_font_size: 28px;
 }
 
 .white {

package/es/AvatarTeam/AvatarTeam.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';
@@ -47,12 +45,13 @@ export default class AvatarTeam extends React.Component {
       customAvatarTeam = ''
     } = customClass;
     let border = borderOnHover || onClick;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       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, _extends({
+      "data-selector-id": dataSelectorId,
+      ...AvatarTeamProps
+    }, /*#__PURE__*/React.createElement(Avatar, {
       name: name,
       onClick: onClick,
       palette: palette,
@@ -66,8 +65,9 @@ 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,188 +6,196 @@
   --avatarteam_outline_width: 1px;
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
-  --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: var(--zd_size5);
-  --avatarteam_height: var(--zd_size5);
+  --avatarteam_bg_color: var(--zdt_base_bg);
+  --avatarteam_width: 5px;
+  --avatarteam_height: 5px;
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: var(--zd_size1);
+  --avatarteam_top_top: 1px;
 }
+
 .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);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-  width: var(--avatarteam_width);
-  height: var(--avatarteam_height);
-  outline-width: var(--avatarteam_outline_width);
-  outline-style: var(--avatarteam_outline_style);
-  /* css:theme-validation:ignore */
-  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);
+  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);
 }
-[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_avatarteam_secondary_bg);
+  --avatarteam_bg_color: var(--zdt_base_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);
-  /* css:theme-validation:ignore */
-  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;
-}
-[dir=ltr] .team:after, [dir=ltr] .team:before {
+  top: var(--avatarteam_bottom_top);
   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: var(--zd_size3);
-  --avatarteam_width: var(--zd_size3);
+  --avatarteam_height: 3px;
+  --avatarteam_width: 3px;
 }
+
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: var(--zd_size5);
-  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: 5px;
+  --avatarteam_width: 5px;
 }
+
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: var(--zd_size7);
-  --avatarteam_width: var(--zd_size7);
+  --avatarteam_height: 7px;
+  --avatarteam_width: 7px;
 }
 
 .xxsmallteam {
   /*  Variable:Ignore  */
   --avatarteam_top_top: 0px;
 }
+
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size13);
+  --avatarteam_bottom_top: 13px;
 }
+
 .xxsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
+
 .xxsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: var(--zd_size17);
+  --avatarteam_bottom_top: 17px;
 }
+
 .smallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
+
 .smallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size24);
+  --avatarteam_bottom_top: 24px;
 }
+
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_left: -10px;
 }
+
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_right: -10px;
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size26);
+  --avatarteam_bottom_top: 26px;
 }
+
 .mediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_left: -13px;
 }
+
 .mediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_right: -13px;
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size30);
+  --avatarteam_bottom_top: 30px;
 }
+
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_left: -16px;
 }
+
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_right: -16px;
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: var(--zd_size46);
+  --avatarteam_bottom_top: 46px;
 }
+
 .largeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_left: -24px;
 }
+
 .largeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_right: -24px;
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: var(--zd_size65);
+  --avatarteam_bottom_top: 65px;
 }
+
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_left: -29px;
 }
+
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
-}
+  --avatarteam_bottom_right: -29px;
+}

package/es/Button/Button.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';
@@ -41,7 +39,7 @@ export default function Button(props) {
     style: finalStyle
   });
   let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement("button", {
     className: buttonClass,
     "data-id": disabled ? `${dataId}_disabled` : dataId,
     "data-test-id": disabled ? `${dataId}_disabled` : dataId,
@@ -50,10 +48,11 @@ 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