@zohodesk/components 1.6.5 → 1.6.7-exp-0

package/es/Typography/css/Typography.module.css

@@ -177,6 +177,10 @@
   white-space: pre-wrap
 }
 
+.whiteSpace_breakSpaces {
+  white-space: break-spaces;
+}
+
 
 
 /*...............Font Size Start.........*/

package/es/Typography/css/cssJSLogic.js

@@ -7,48 +7,80 @@ export default function cssJSLogic(_ref) {
   } = _ref;
   let {
     $flag_reset,
+    shouldReset,
     $flag_dotted,
+    isDotted,
     $ui_size,
+    size,
     $ui_lineClamp,
+    lineClamp,
     $ui_lineHeight,
+    lineHeight,
     $ui_display,
+    display,
     $ui_weight,
+    weight,
     $ui_typeFace,
+    typeFace,
     $ui_textAlign,
+    textAlign,
     $ui_letterSpacing,
+    letterSpacing,
     $ui_transform,
+    transform,
     $ui_decoration,
+    decoration,
     $ui_className,
+    customClass,
     $ui_wordBreak,
+    wordBreak,
     $ui_wordWrap,
-    $ui_whiteSpace
+    wordWrap,
+    $ui_whiteSpace,
+    whiteSpace
   } = props;
+  const finalReset = shouldReset !== undefined ? shouldReset : $flag_reset;
+  const finalDotted = isDotted !== undefined ? isDotted : $flag_dotted;
+  const finalSize = size !== undefined ? size : $ui_size;
+  const finalLineClamp = lineClamp !== undefined ? lineClamp : $ui_lineClamp;
+  const finalDisplay = display !== undefined ? display : $ui_display;
+  const finalWeight = weight !== undefined ? weight : $ui_weight;
+  const finalTypeFace = typeFace !== undefined ? typeFace : $ui_typeFace;
+  const finalTextAlign = textAlign !== undefined ? textAlign : $ui_textAlign;
+  const finalTransform = transform !== undefined ? transform : $ui_transform;
+  const finalDecoration = decoration !== undefined ? decoration : $ui_decoration;
+  const finalClassName = customClass !== undefined ? customClass : $ui_className;
+  const finalWordBreak = wordBreak !== undefined ? wordBreak : $ui_wordBreak;
+  const finalWordWrap = wordWrap !== undefined ? wordWrap : $ui_wordWrap;
+  const finalWhiteSpace = whiteSpace !== undefined ? whiteSpace : $ui_whiteSpace;
+  let finalLineHeight = lineHeight !== undefined ? lineHeight : $ui_lineHeight;
+  let finalLetterSpacing = letterSpacing !== undefined ? letterSpacing : $ui_letterSpacing;
 
-  if ($ui_letterSpacing) {
-    $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
+  if (finalLetterSpacing) {
+    finalLetterSpacing = letterspacingMapping[finalLetterSpacing];
   }
 
-  if ($ui_lineHeight) {
-    $ui_lineHeight = lineheightMapping[$ui_lineHeight];
+  if (finalLineHeight) {
+    finalLineHeight = lineheightMapping[finalLineHeight];
   }
 
   let typographyClass = compileClassNames({
-    [style.reset]: $flag_reset,
-    [style.dotted]: $flag_dotted,
-    [style[`size${$ui_size}`]]: !!$ui_size,
-    [style[`lineclamp_${$ui_lineClamp}`]]: !!$ui_lineClamp,
-    [style[`lineheight_${$ui_lineHeight}`]]: !!$ui_lineHeight,
-    [style[`display_${$ui_display}`]]: !!$ui_display,
-    [style[`font_${$ui_weight}`]]: !!$ui_weight,
-    [style[`fontStyles_${$ui_typeFace}`]]: !!$ui_typeFace,
-    [style[`textalign_${$ui_textAlign}`]]: !!$ui_textAlign,
-    [style[`letterspacing_${$ui_letterSpacing}`]]: !!$ui_letterSpacing,
-    [style[`transform_${$ui_transform}`]]: !!$ui_transform,
-    [style[`decoration_${$ui_decoration}`]]: !!$ui_decoration,
-    [$ui_className]: !!$ui_className,
-    [style[`wordBreak_${$ui_wordBreak}`]]: !!$ui_wordBreak,
-    [style[`wordWrap_${$ui_wordWrap}`]]: !!$ui_wordWrap,
-    [style[`whiteSpace_${$ui_whiteSpace}`]]: !!$ui_whiteSpace
+    [style.reset]: finalReset,
+    [style.dotted]: finalDotted,
+    [style[`size${finalSize}`]]: !!finalSize,
+    [style[`lineclamp_${finalLineClamp}`]]: !!finalLineClamp,
+    [style[`lineheight_${finalLineHeight}`]]: !!finalLineHeight,
+    [style[`display_${finalDisplay}`]]: !!finalDisplay,
+    [style[`font_${finalWeight}`]]: !!finalWeight,
+    [style[`fontStyles_${finalTypeFace}`]]: !!finalTypeFace,
+    [style[`textalign_${finalTextAlign}`]]: !!finalTextAlign,
+    [style[`letterspacing_${finalLetterSpacing}`]]: !!finalLetterSpacing,
+    [style[`transform_${finalTransform}`]]: !!finalTransform,
+    [style[`decoration_${finalDecoration}`]]: !!finalDecoration,
+    [finalClassName]: !!finalClassName,
+    [style[`wordBreak_${finalWordBreak}`]]: !!finalWordBreak,
+    [style[`wordWrap_${finalWordWrap}`]]: !!finalWordWrap,
+    [style[`whiteSpace_${finalWhiteSpace}`]]: !!finalWhiteSpace
   });
   return {
     typographyClass

package/es/Typography/props/defaultProps.js

@@ -1,9 +1,10 @@
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 export const defaultProps = {
   $ui_className: '',
   $ui_tagName: 'div',
   $flag_reset: false,
   $flag_dotted: false,
-  $tagAttributes_text: {},
-  $a11yAttributes_text: {},
-  $ui_highlightConfig: {}
+  $tagAttributes_text: DUMMY_OBJECT,
+  $a11yAttributes_text: DUMMY_OBJECT,
+  $ui_highlightConfig: DUMMY_OBJECT
 };

package/es/Typography/props/propTypes.js

@@ -1,46 +1,88 @@
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'; // Define prop types once to avoid duplication
+
+const propTypeDefinitions = {
+  shouldReset: PropTypes.bool,
+  display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  isDotted: PropTypes.bool,
+  textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
+  transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
+  typeFace: PropTypes.oneOf(['normal', 'italic']),
+  decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
+  size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
+  lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
+  wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
+  wordWrap: PropTypes.oneOf(['normal', 'break']),
+  whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap', 'breakSpaces']),
+  customClass: PropTypes.string
+};
 const typoStyleProps = {
-  $flag_reset: PropTypes.bool,
-  $flag_dotted: PropTypes.bool,
-  $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
-  $ui_weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
-  $ui_textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
-  $ui_transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
-  $ui_lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
-  $ui_typeFace: PropTypes.oneOf(['normal', 'italic']),
-  $ui_decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
-  $ui_size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
-  $ui_lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
-  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
-  $ui_wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
-  $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
-  $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
-  $ui_className: PropTypes.string
+  $flag_reset: propTypeDefinitions.shouldReset,
+  shouldReset: propTypeDefinitions.shouldReset,
+  $flag_dotted: propTypeDefinitions.isDotted,
+  isDotted: propTypeDefinitions.isDotted,
+  $ui_display: propTypeDefinitions.display,
+  display: propTypeDefinitions.display,
+  $ui_weight: propTypeDefinitions.weight,
+  weight: propTypeDefinitions.weight,
+  $ui_textAlign: propTypeDefinitions.textAlign,
+  textAlign: propTypeDefinitions.textAlign,
+  $ui_transform: propTypeDefinitions.transform,
+  transform: propTypeDefinitions.transform,
+  $ui_lineClamp: propTypeDefinitions.lineClamp,
+  lineClamp: propTypeDefinitions.lineClamp,
+  $ui_typeFace: propTypeDefinitions.typeFace,
+  typeFace: propTypeDefinitions.typeFace,
+  $ui_decoration: propTypeDefinitions.decoration,
+  decoration: propTypeDefinitions.decoration,
+  $ui_size: propTypeDefinitions.size,
+  size: propTypeDefinitions.size,
+  $ui_lineHeight: propTypeDefinitions.lineHeight,
+  lineHeight: propTypeDefinitions.lineHeight,
+  $ui_letterSpacing: propTypeDefinitions.letterSpacing,
+  letterSpacing: propTypeDefinitions.letterSpacing,
+  $ui_wordBreak: propTypeDefinitions.wordBreak,
+  wordBreak: propTypeDefinitions.wordBreak,
+  $ui_wordWrap: propTypeDefinitions.wordWrap,
+  wordWrap: propTypeDefinitions.wordWrap,
+  $ui_whiteSpace: propTypeDefinitions.whiteSpace,
+  whiteSpace: propTypeDefinitions.whiteSpace,
+  $ui_className: propTypeDefinitions.customClass,
+  customClass: propTypeDefinitions.customClass
 };
 const highlightProps = {
   customStyle: PropTypes.object,
   shouldExcludeIndices: PropTypes.bool,
   isCaseSensitive: PropTypes.bool,
   isWholeWord: PropTypes.bool,
-  tagName: PropTypes.string,
+  as: PropTypes.string,
   renderHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   styleConfiguration: PropTypes.shape(typoStyleProps)
 };
+const highlightDataItemShape = PropTypes.shape({
+  text: PropTypes.string,
+  index: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  ...highlightProps
+});
+const highlightConfigShape = PropTypes.shape({
+  data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, highlightDataItemShape])),
+  ...highlightProps
+});
 export const propTypes = { ...typoStyleProps,
   children: PropTypes.node,
   $ui_tagName: PropTypes.string,
+  as: PropTypes.string,
   $i18n_dataTitle: PropTypes.string,
+  dataTitle: PropTypes.string,
   testId: PropTypes.string,
   customId: PropTypes.string,
   customStyle: PropTypes.object,
   $a11yAttributes_text: PropTypes.object,
+  a11yAttributes: PropTypes.object,
   $tagAttributes_text: PropTypes.object,
-  $ui_highlightConfig: PropTypes.shape({
-    data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-      text: PropTypes.string,
-      index: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-      ...highlightProps
-    })])),
-    ...highlightProps
-  })
+  tagAttributes: PropTypes.object,
+  $ui_highlightConfig: highlightConfigShape,
+  highlightConfig: highlightConfigShape
 };

package/es/Typography/utils/textHighlighter.js

@@ -11,7 +11,7 @@ export function highlightText(config) {
     shouldExcludeIndices = false,
     isCaseSensitive: enableCaseSensitiveMatch = false,
     isWholeWord: matchWholeWordOnly = false,
-    tagName: wrapperTagName = 'span',
+    as: wrapperTagName = 'span',
     renderHighlight: customRenderer
   } = config;
 
@@ -55,7 +55,7 @@ export function highlightText(config) {
       shouldExcludeIndices: itemConfiguration.shouldExcludeIndices !== undefined ? itemConfiguration.shouldExcludeIndices : shouldExcludeIndices,
       isCaseSensitive: itemConfiguration.isCaseSensitive !== undefined ? itemConfiguration.isCaseSensitive : enableCaseSensitiveMatch,
       matchWholeWordOnly: itemConfiguration.isWholeWord !== undefined ? itemConfiguration.isWholeWord : matchWholeWordOnly,
-      wrapperTagName: itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
+      wrapperTagName: itemConfiguration.as !== undefined ? itemConfiguration.as : wrapperTagName,
       customStyle: customStyle,
       customRenderer: itemConfiguration.renderHighlight !== undefined ? itemConfiguration.renderHighlight : customRenderer,
       highlightClasses: typographyClass,

package/es/common/avatarsizes.module.css

@@ -1,8 +1,8 @@
 /*Avatar common Sizes*/
 .varClass {
   /* avatar size default variables */
-  --avatar_width: 34px;
-  --avatar_height: 34px;
+  --avatar_width: var(--zd_size34);
+  --avatar_height: var(--zd_size34);
 }
 .small,
 .xsmall,
@@ -16,34 +16,34 @@
   height: var(--avatar_height);
 }
 .small {
-  --avatar_height: 22px;
-  --avatar_width: 22px;
+  --avatar_height: var(--zd_size22);
+  --avatar_width: var(--zd_size22);
 }
 .xxsmall {
-  --avatar_height: 18px;
-  --avatar_width: 18px;
+  --avatar_height: var(--zd_size18);
+  --avatar_width: var(--zd_size18);
 }
 .xsmall {
-  --avatar_height: 30px;
-  --avatar_width: 30px;
+  --avatar_height: var(--zd_size30);
+  --avatar_width: var(--zd_size30);
 }
 
 .medium {
-  --avatar_height: 34px;
-  --avatar_width: 34px;
+  --avatar_height: var(--zd_size34);
+  --avatar_width: var(--zd_size34);
 }
 
 .xmedium {
-  --avatar_height: 40px;
-  --avatar_width: 40px;
+  --avatar_height: var(--zd_size40);
+  --avatar_width: var(--zd_size40);
 }
 
 .large {
-  --avatar_height: 60px;
-  --avatar_width: 60px;
+  --avatar_height: var(--zd_size60);
+  --avatar_width: var(--zd_size60);
 }
 
 .xlarge {
-  --avatar_height: 80px;
-  --avatar_width: 80px;
+  --avatar_height: var(--zd_size80);
+  --avatar_width: var(--zd_size80);
 }

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -59,12 +59,12 @@
 
 .padding_small,
 .padding_xmedium {
-    --local_padding: 3px;
+    --local_padding: var(--zd_size3);
 }
 
 .padding_medium,
 .padding_large {
-    --local_padding: 8px;
+    --local_padding: var(--zd_size8);
 }
 
 .xmedium {

package/es/v1/Switch/css/Switch_v1.module.css

@@ -4,47 +4,47 @@
     gap: var(--zd_size6) ;
 }
 .small {
-    --local-switch-track-width: 22px;
-    --local-switch-track-height: 12px;
+    --local-switch-track-width: var(--zd_size22);
+    --local-switch-track-height: var(--zd_size12);
     --local-switch-track-border-radius: 8px;
-    --local-switch-thumb-size: 10px;
-    --local-switch-onLabel-height: 6px;
-    --local-switch-onLabel-left: 5px;
-    --local-switch-offLabel-size: 7px;
-    --local-switch-offLabel-right: 2px;
+    --local-switch-thumb-size: var(--zd_size10);
+    --local-switch-onLabel-height: var(--zd_size6);
+    --local-switch-onLabel-left: var(--zd_size5);
+    --local-switch-offLabel-size: var(--zd_size7);
+    --local-switch-offLabel-right: var(--zd_size2);
     --local-switch-onLabel-scaleX: 1.2;
 }
 .medium {
-    --local-switch-track-width: 28px;
-    --local-switch-track-height: 16px;
+    --local-switch-track-width: var(--zd_size28);
+    --local-switch-track-height: var(--zd_size16);
     --local-switch-track-border-radius: 16px;
-    --local-switch-thumb-size: 14px;
-    --local-switch-onLabel-height: 8px;
-    --local-switch-onLabel-left: 6px;
-    --local-switch-offLabel-size: 8px;
-    --local-switch-offLabel-right: 3px;
+    --local-switch-thumb-size: var(--zd_size14);
+    --local-switch-onLabel-height: var(--zd_size8);
+    --local-switch-onLabel-left: var(--zd_size6);
+    --local-switch-offLabel-size: var(--zd_size8);
+    --local-switch-offLabel-right: var(--zd_size3);
     --local-switch-onLabel-scaleX: 1.4;
 }
 .large {
-    --local-switch-track-width: 34px;
-    --local-switch-track-height: 20px;
+    --local-switch-track-width: var(--zd_size34);
+    --local-switch-track-height: var(--zd_size20);
     --local-switch-track-border-radius: 10px;
-    --local-switch-thumb-size: 18px;
-    --local-switch-onLabel-height: 10px;
-    --local-switch-onLabel-left: 7px;
-    --local-switch-offLabel-size: 9px;
-    --local-switch-offLabel-right: 4px;
+    --local-switch-thumb-size: var(--zd_size18);
+    --local-switch-onLabel-height: var(--zd_size10);
+    --local-switch-onLabel-left: var(--zd_size7);
+    --local-switch-offLabel-size: var(--zd_size9);
+    --local-switch-offLabel-right: var(--zd_size4);
     --local-switch-onLabel-scaleX: 1.6;
 }
 .xlarge {
-    --local-switch-track-width: 40px;
-    --local-switch-track-height: 24px;
+    --local-switch-track-width: var(--zd_size40);
+    --local-switch-track-height: var(--zd_size24);
     --local-switch-track-border-radius: 12px;
-    --local-switch-thumb-size: 22px;
-    --local-switch-onLabel-height: 12px;
-    --local-switch-onLabel-left: 8px;
-    --local-switch-offLabel-size: 10px;
-    --local-switch-offLabel-right: 5px;
+    --local-switch-thumb-size: var(--zd_size22);
+    --local-switch-onLabel-height: var(--zd_size12);
+    --local-switch-onLabel-left: var(--zd_size8);
+    --local-switch-offLabel-size: var(--zd_size10);
+    --local-switch-offLabel-right: var(--zd_size5);
     --local-switch-onLabel-scaleX: 1.8;
 }
 .disabled, .readonly {

package/lib/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -141,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

@@ -7,13 +7,13 @@
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: 5px;
-  --avatarteam_height: 5px;
+  --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;
@@ -92,18 +92,18 @@
 .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 {
@@ -112,78 +112,78 @@
 }
 .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 );
 }