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

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.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, { useContext } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -79,15 +81,14 @@ export default function VelocityAnimationGroup(props) {
     delay: exitDelay ? exitDelay : 0,
     display: 'none'
   };
-  return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
+  return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
     enter: enterAnimation,
     leave: exitAnimation,
     component: component && component,
     runOnMount: runOnMount,
     enterHideStyle: enterHideStyle,
-    enterShowStyle: enterShowStyle,
-    ...childProps
-  }, isActive ? children : null);
+    enterShowStyle: enterShowStyle
+  }, childProps), isActive ? children : null);
 }
 VelocityAnimationGroup.defaultProps = { ...defaultProps,
   component: React.Fragment

package/lib/AppContainer/AppContainer.module.css

@@ -12,7 +12,7 @@
   font-family: var(--zd_regular);
 }
 .tooltip {
-  height: 0;
-  font-size: 0;
+  height: 0 ;
+  font-size: 0 ;
   /* contain:strict */
 }

package/lib/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/lib/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 );
+}