@zohodesk/components 1.0.0-temp-139 → 1.0.0-temp-141

package/css_error.log

@@ -0,0 +1,119 @@
+Component Package error log:
+
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `primary_hover_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_disable_bg`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_avatar_default_boxshadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_avatar_white_boxshadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_button_primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_button_danger_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_buttongroup_footer_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_dropbox_default_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_dropbox_arrow_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_default_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_danger_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_primary_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_secondary_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_info_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_dark_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_switch_circle_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_bg`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_text`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tabs_alpha_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_disable_bg`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_avatar_default_boxshadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_avatar_white_boxshadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_button_primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_button_danger_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_buttongroup_footer_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_dropbox_default_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_dropbox_arrow_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_default_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_danger_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_primary_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_secondary_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_info_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_dark_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_switch_circle_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_bg`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_text`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tabs_alpha_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_disable_bg`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_avatar_default_boxshadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_avatar_white_boxshadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_button_primary_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_button_danger_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_buttongroup_footer_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_dropbox_default_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_dropbox_arrow_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_default_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_danger_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_primary_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_secondary_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_info_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_ribbon_dark_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_switch_circle_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_bg`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_text`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tooltip_default_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`
+wrong category name => `ignore`, variable name => `zdt_tabs_alpha_box_shadow`, error folder path => `D:\git\client\desklibrary\BugFix\jsapps\dot\common`

package/es/AppContainer/AppContainer.js

@@ -13,6 +13,7 @@ import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/AppContainer/AppContainer.module.css

@@ -1,18 +1,18 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container {
-  font-family: var(--zd_regular);
-}
-.tooltip {
-  height: 0;
-  font-size: 0;
-  /* contain:strict */
-}
+.container,
+.container *,
+.container ::after,
+.container ::before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+.container {
+  font-family: var(--zd_regular);
+}
+.tooltip {
+  height: 0;
+  font-size: 0;
+  /* contain:strict */
+}

package/es/Avatar/Avatar.js

@@ -5,17 +5,17 @@ import { propTypes } from './props/propTypes';
 import { getInitial } from '../utils/getInitial';
 import AvatarSize from '../Provider/AvatarSize';
 import style from './Avatar.module.css';
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
-'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
-"info","default"] }]
+/*
+eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
+'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
+"info","default"] }]
 */
 export default class Avatar extends React.Component {
   constructor(props) {

package/es/Avatar/Avatar.module.css

@@ -1,141 +1,176 @@
-.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_border_radius: 50%;
-  --avatar_border_width: 0;
-  --avatar_border_style: solid;
-  --avatar_border_color: var(--zdt_avatar_default_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
-  --avatar_text_transform: uppercase;
-}
-.avatar {
-  composes: varClass;
-  position: relative;
-  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);
-}
-.border {
-  border-color: var(--avatar_border_color);
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--avatar_border_hoverColor);
-}
-.avatar, .primary {
-  background-color: var(--avatar_bg_color);
-}
-.shadow {
-  position: absolute;
-  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: inset 0px 0px 5px var(--avatar_boxshadow);
-}
-.shadow.white {
-  box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
-}
-.avatar, .circle {
-  border-radius: var(--avatar_border_radius);
-}
-.border {
-  --avatar_border_width: 1px;
-}
-.image {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  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);
-}
-.innerBorder{
-  border: 1px solid var(--zdt_avatarteam_innerCircle);
-}
-.square_small {
-  --avatar_border_radius: 4px;
-}
-.square_xsmall {
-  --avatar_border_radius: 6px;
-}
-.square_medium,
-.square_xmedium {
-  --avatar_border_radius: 8px;
-}
-.square_large,
-.square_xlarge {
-  --avatar_border_radius: 10px;
-}
-.none {
-  display: none;
-}
-.default {
-  --avatar_border_width: 0;
-}
-.secondary {
-  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
-}
-.info {
-  --avatar_bg_color: var(--zdt_avatar_info_bg);
-}
-.initial {
-  text-transform: var(--avatar_text_transform);
-  display: inline-block;
-}
-.xxsmall{
-  --avatar_font_size: var(--zd_font_size8);
-}
-.small {
-  --avatar_font_size: var(--zd_font_size9);
-}
-.xsmall {
-  --avatar_font_size: var(--zd_font_size12);
-}
-.medium {
-  --avatar_font_size: var(--zd_font_size14);
-}
-.xmedium {
-  --avatar_font_size: var(--zd_font_size14);
-}
-.large {
-  --avatar_font_size: var(--zd_font_size18);
-}
-.xlarge {
-  --avatar_font_size: var(--zd_font_size28);
-}
-.white {
-  --avatar_text_color: var(--zdt_avatar_white_text);
-  --avatar_border_color: var(--zdt_avatar_white_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
-}
+.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_border_radius: 50%;
+  --avatar_border_width: 0;
+  --avatar_border_style: solid;
+  --avatar_border_color: var(--zdt_avatar_default_border);
+  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
+  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
+  --avatar_text_transform: uppercase;
+}
+
+.avatar {
+  composes: varClass;
+  position: relative;
+  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);
+}
+
+.border {
+  border-color: var(--avatar_border_color);
+}
+
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--avatar_border_hoverColor);
+}
+
+.avatar, .primary {
+  background-color: var(--avatar_bg_color);
+}
+
+.shadow {
+  position: absolute;
+  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);
+}
+
+.shadow.white {
+  box-shadow: var(--zd_bs_avatar_white);
+}
+
+.avatar, .circle {
+  border-radius: var(--avatar_border_radius);
+}
+
+.border {
+  --avatar_border_width: 1px;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  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);
+}
+
+.innerBorder {
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
+
+.square_small {
+  --avatar_border_radius: 4px;
+}
+
+.square_xsmall {
+  --avatar_border_radius: 6px;
+}
+
+.square_medium,
+.square_xmedium {
+  --avatar_border_radius: 8px;
+}
+
+.square_large,
+.square_xlarge {
+  --avatar_border_radius: 10px;
+}
+
+.none {
+  display: none;
+}
+
+.default {
+  --avatar_border_width: 0;
+}
+
+.secondary {
+  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
+}
+
+.info {
+  --avatar_bg_color: var(--zdt_avatar_info_bg);
+}
+
+.initial {
+  text-transform: var(--avatar_text_transform);
+  display: inline-block;
+}
+
+.xxsmall {
+  --avatar_font_size: var(--zd_font_size8);
+}
+
+.small {
+  --avatar_font_size: var(--zd_font_size9);
+}
+
+.xsmall {
+  --avatar_font_size: var(--zd_font_size12);
+}
+
+.medium {
+  --avatar_font_size: var(--zd_font_size14);
+}
+
+.xmedium {
+  --avatar_font_size: var(--zd_font_size14);
+}
+
+.large {
+  --avatar_font_size: var(--zd_font_size18);
+}
+
+.xlarge {
+  --avatar_font_size: var(--zd_font_size28);
+}
+
+.white {
+  --avatar_text_color: var(--zdt_avatar_white_text);
+  --avatar_border_color: var(--zdt_avatar_white_border);
+  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
+  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
+}