@zohodesk/dot 1.9.18 → 1.9.19

package/es/alert/AlertLookup/AlertLookup.js

@@ -13,6 +13,7 @@ import Section from "../../lookup/Section/Section";
 import FormAction from "../../FormAction/FormAction";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertLookup.module.css";
 export default class AlertLookup extends Component {
   render() {
@@ -74,13 +75,13 @@ export default class AlertLookup extends Component {
       alignBox: "row",
       className: style.section
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerSection} ${sectionClassName}`
+      className: cn(`${style.innerSection} ${sectionClassName}`)
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: message
       }
     }) : /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
-      className: style.text
+      className: cn(style.text)
     }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xsmall"
@@ -99,9 +100,4 @@ export default class AlertLookup extends Component {
 
 }
 AlertLookup.propTypes = propTypes;
-AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
-//   AlertLookup.docs = {
-//     componentGroup: 'AlertLookup',
-//     folderName: 'Alert'
-//   };
-// }
+AlertLookup.defaultProps = defaultProps;

package/es/alert/AlertLookup/AlertLookup.module.css

@@ -1,5 +1,5 @@
 .section {
-  min-height: auto ;
+  composes: d-min-h-auto from global;
 }
 
 .innerSection {

package/es/alert/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlertLookup rendering the defult props 1`] = `<DocumentFragment />`;
 
@@ -10,7 +10,7 @@ exports[`AlertLookup rendering the defult props 2`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/es/avatar/AvatarClose/AvatarClose.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarClose.module.css";
 export default class AvatarClose extends React.Component {
   constructor(props) {
@@ -28,7 +29,7 @@ export default class AvatarClose extends React.Component {
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: style.container,
+      className: cn(style.container),
       "data-selector-id": dataSelectorId,
       "data-id": dataId,
       "data-test-id": dataId
@@ -38,12 +39,12 @@ export default class AvatarClose extends React.Component {
       title: title,
       size: size
     }, AvatarProps)), isClose && /*#__PURE__*/React.createElement("span", {
-      className: style.pop,
+      className: cn(style.pop),
       onClick: onClick,
       "data-id": `${dataId}_close`,
       "data-test-id": `${dataId}_close`
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.icon
+      className: cn(style.icon)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-plus"
     }))));
@@ -51,8 +52,4 @@ export default class AvatarClose extends React.Component {
 
 }
 AvatarClose.propTypes = propTypes;
-AvatarClose.defaultProps = defaultProps; // if (__DOCS__) {
-//   AvatarClose.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarClose.defaultProps = defaultProps;

package/es/avatar/AvatarClose/AvatarClose.module.css

@@ -1,19 +1,13 @@
 .container {
-  position: relative;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
 }
 .pop {
-  position: absolute;
   composes: rounded from '~@zohodesk/components/es/common/common.module.css';
-  opacity: 0;
-  visibility: hidden;
+  composes: d-absolute d-invisible d-size-full d-cursor-pointer d-opacity-0 from global;
   top: 0 ;
-  height: 100% ;
-  width: 100% ;
   transition: opacity var(--zd_transition2);
   color: var(--zdt_avatarclose_pop_text);
-  cursor: pointer;
   transform: translateZ(0);
   background-color: var(--zdt_avatarclose_pop_bg);
 }
@@ -26,10 +20,10 @@
   transform: rotate(-45deg);
 }
 .icon {
-  position: absolute;
   line-height: 0;
   font-size: var(--zd_font_size16) ;
   composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-absolute from global;
 }
 .container:hover .pop {
   opacity: 1;

package/es/avatar/AvatarClose/__tests__/__snapshots__/AvatarClose.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarClose rendering the defult props 1`] = `
 <DocumentFragment>

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarCollision.module.css";
 export default class AvatarCollision extends React.Component {
   constructor(props) {
@@ -30,7 +31,7 @@ export default class AvatarCollision extends React.Component {
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`,
+      className: cn(`${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`),
       onClick: onClick,
       "data-id": "collsionPop",
       "data-test-id": "collsionPop",
@@ -44,10 +45,10 @@ export default class AvatarCollision extends React.Component {
       needTitle: false,
       initial: initial
     }, AvatarProps)), needCreateChat && !isLeft && /*#__PURE__*/React.createElement("span", {
-      className: style.pop,
+      className: cn(style.pop),
       "data-title": title
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.icon
+      className: cn(style.icon)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-livechat3"
     }))));
@@ -55,8 +56,4 @@ export default class AvatarCollision extends React.Component {
 
 }
 AvatarCollision.propTypes = propTypes;
-AvatarCollision.defaultProps = defaultProps; // if (__DOCS__) {
-//   AvatarCollision.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarCollision.defaultProps = defaultProps;

package/es/avatar/AvatarCollision/AvatarCollision.module.css

@@ -1,7 +1,6 @@
 .container {
-  position: relative;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
   border-radius: 50%;
   padding:var(--zd_size2) ;
 }
@@ -16,16 +15,11 @@
   opacity: 0.4;
 }
 .pop {
-  position: absolute;
   composes: rounded from '~@zohodesk/components/es/common/common.module.css';
-  opacity: 0;
-  visibility: hidden;
+  composes: d-absolute d-invisible d-size-full d-cursor-pointer d-opacity-0 from global;
   top: 0 ;
-  height: 100% ;
-  width: 100% ;
   transition: opacity var(--zd_transition2);
   color: var(--zdt_avatarcollision_pop_text);
-  cursor: pointer;
   transform: translateZ(0);
   background-color: var(--zdt_avatarcollision_pop_bg);
 }
@@ -36,9 +30,9 @@
   right: 0 ;
 }
 .icon {
-  position: absolute;
   line-height: 0;
   composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-absolute from global;
   color: var(--zdt_avatarcollision_icon_text);
   font-size: var(--zd_font_size13) ;
 }

package/es/avatar/AvatarCollision/__tests__/__snapshots__/AvatarCollision.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarCollision rendering the defult props 1`] = `
 <DocumentFragment>
@@ -29,7 +29,7 @@ exports[`AvatarCollision rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-livechat3"
+          class="zd_font_icons ff icon-livechat3 basic d-inline-block d-align-middle"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -49,6 +49,4 @@ export default class AvatarIcon extends React.Component {
 
 }
 AvatarIcon.defaultProps = defaultProps;
-AvatarIcon.propTypes = propTypes; // if (__DOCS__) {
-//   AvatarIcon.docs = { componentGroup: 'Avatar Group' };
-// }
+AvatarIcon.propTypes = propTypes;

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -4,10 +4,9 @@
   --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
 }
 .container {
-  vertical-align: middle;
   composes: varClass;
+  composes: d-align-middle d-border-solid from global;
   border-width: 1px;
-  border-style: solid;
   border-radius: 50%;
   border-color: var(--border_color)
 }

package/es/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap

@@ -1,16 +1,16 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column alignItems_center justifyContent_center container medium default"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center container medium default"
     data-id="containerComponent"
     data-selector-id="avatarIcon"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag avatar_align_center iconColor"
+      class="zd_font_icons ff icon-add-ag basic d-inline-block d-align-middle avatar_align_center iconColor"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarStatus.module.css";
 export default class AvatarStatus extends React.Component {
   constructor(props) {
@@ -37,7 +38,7 @@ export default class AvatarStatus extends React.Component {
       AvatarProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${className} `
+      className: cn(`${style.container} ${className} `)
     }, AvatarStatusProps, {
       "aria-label": `${title}, ${name}, ${statusTitle}`,
       "data-selector-id": dataSelectorId
@@ -58,14 +59,10 @@ export default class AvatarStatus extends React.Component {
       needBorder: needBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       "data-title": statusTitle,
-      className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
+      className: cn(`${style.state} ${style[state]} ${style[size]} ${style[shape]}`)
     }));
   }
 
 }
 AvatarStatus.defaultProps = defaultProps;
-AvatarStatus.propTypes = propTypes; // if (__DOCS__) {
-//   AvatarStatus.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarStatus.propTypes = propTypes;

package/es/avatar/AvatarStatus/AvatarStatus.module.css

@@ -1,12 +1,10 @@
 .container {
-  position: relative;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
 }
 .state {
-  position: absolute;
   composes: rounded from '~@zohodesk/components/es/common/common.module.css';
-  display: inline-block;
+  composes: d-inline-block d-absolute from global;
 }
 .circle.state {
   border: 1px solid var(--zdt_avatarstatus_size_border);

package/es/avatar/AvatarStatus/__tests__/__snapshots__/AvatarStatus.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarStatus rendering the defult props 1`] = `
 <DocumentFragment>

package/es/avatar/AvatarThread/AvatarThread.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarThread.module.css";
 export default class AvatarThread extends React.Component {
   render() {
@@ -40,7 +41,7 @@ export default class AvatarThread extends React.Component {
     } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
+      className: cn(`${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`),
       "data-selector-id": dataSelectorId
     }, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       initial: initial,
@@ -55,13 +56,13 @@ export default class AvatarThread extends React.Component {
       customClass: customTextClass,
       needTitle: needTitle
     }, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
-      className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
+      className: cn(`${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`),
       "data-title": iconTitle,
       "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
       "data-test-id": iconTitle === 'Remove Follower' && 'removeFollower',
       onClick: onIconClick
     }, iconName && /*#__PURE__*/React.createElement("span", {
-      className: style.icon
+      className: cn(style.icon)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize,
@@ -71,8 +72,4 @@ export default class AvatarThread extends React.Component {
 
 }
 AvatarThread.defaultProps = defaultProps;
-AvatarThread.propTypes = propTypes; // if (__DOCS__) {
-//   AvatarThread.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarThread.propTypes = propTypes;

package/es/avatar/AvatarThread/AvatarThread.module.css

@@ -1,19 +1,18 @@
 .container {
-  position: relative;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
   border-radius: 50%;
 }
 
 .thread {
   composes: rounded from '~@zohodesk/components/es/common/common.module.css';
-  position: absolute;
+  composes: d-absolute from global;
 }
 .pointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 .defaultCursor {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 .threadBg {
   background-color: var(--zdt_avatarthread_bg);
@@ -105,7 +104,7 @@
 }
 
 .icon {
-  position: absolute;
+  composes: d-absolute from global;
   line-height: 0;
   top: 50% ;
 }

package/es/avatar/AvatarThread/__tests__/__snapshots__/AvatarThread.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarThread rendering the defult props 1`] = `
 <DocumentFragment>

package/es/avatar/AvatarUser/AvatarUser.js

@@ -9,6 +9,7 @@ import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarIcon from "../AvatarIcon/AvatarIcon";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarUser.module.css";
 /**** Methods ****/
 
@@ -51,7 +52,7 @@ export default class AvatarUser extends React.Component {
       lockTitle = 'Locked'
     } = i18nKeys;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${style[size]}`,
+      className: cn(`${style.container} ${style[size]}`),
       "data-id": dataId || name || iconName,
       "data-test-id": dataId || name || iconName,
       "data-selector-id": dataSelectorId
@@ -77,27 +78,27 @@ export default class AvatarUser extends React.Component {
       alternateSrc: alternateSrc
     }, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
       "data-title": paidTitle,
-      className: style.paid,
+      className: cn(style.paid),
       "data-id": "paidUser",
       "data-test-id": "paidUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-paiduser"
     })) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
       "data-title": portalTitle,
-      className: style.portal,
+      className: cn(style.portal),
       "data-id": "portalUser",
       "data-test-id": "portalUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-globe1"
     })) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
       "data-title": lockTitle,
-      className: style.lock,
+      className: cn(style.lock),
       "data-id": "locked",
       "data-test-id": "locked"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-lock01"
     })) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
-      className: style.delete,
+      className: cn(style.delete),
       "data-id": "dltContactPhoto",
       "data-test-id": "dltContactPhoto",
       onClick: onDelete
@@ -109,8 +110,4 @@ export default class AvatarUser extends React.Component {
 
 }
 AvatarUser.propTypes = propTypes;
-AvatarUser.defaultProps = defaultProps; // if (__DOCS__) {
-//   AvatarUser.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarUser.defaultProps = defaultProps;

package/es/avatar/AvatarUser/AvatarUser.module.css

@@ -1,7 +1,6 @@
 .container {
-  position: relative;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
 }
 .paid,
 .portal,
@@ -12,7 +11,7 @@
 .portal,
 .delete,
 .lock {
-  position: absolute;
+  composes: d-absolute from global;
   line-height: 0;
 }
 .paid {
@@ -33,13 +32,10 @@
 }
 .delete {
   top: 0 ;
-  width: 100% ;
-  height: 100% ;
-  opacity: 0;
   transition: all var(--zd_transition3);
   composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-size-full d-cursor-pointer d-opacity-0 from global;
   color: var(--zdt_avataruser_delete_text);
-  cursor: pointer;
   border-radius: 50%;
   background-color: var(--zdt_avataruser_delete_bg);
 }

package/es/avatar/AvatarUser/__tests__/__snapshots__/AvatarUser.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarUser rendering the defult props 1`] = `
 <DocumentFragment>

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarTeam from '@zohodesk/components/es/AvatarTeam/AvatarTeam';
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarWithTeam.module.css";
 export default class AvatarWithTeam extends React.Component {
   render() {
@@ -34,7 +35,7 @@ export default class AvatarWithTeam extends React.Component {
       AvatarTeam2Props = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("span", _extends({
-      className: `${style.container} `,
+      className: cn(`${style.container} `),
       "data-id": "avatarWithTeamId",
       "data-test-id": "avatarWithTeamId",
       "data-selector-id": dataSelectorId
@@ -71,7 +72,7 @@ export default class AvatarWithTeam extends React.Component {
       customClass: customTextClass,
       borderOnActive: borderOnActive
     }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.teamAvatar} ${teamClassName} `,
+      className: cn(`${style.teamAvatar} ${teamClassName} `),
       "data-id": "teamNameTestId",
       "data-test-id": "teamNameTestId",
       "data-title": needTitle ? title : undefined
@@ -91,8 +92,4 @@ export default class AvatarWithTeam extends React.Component {
 
 }
 AvatarWithTeam.defaultProps = defaultProps;
-AvatarWithTeam.propTypes = propTypes; // if (__DOCS__) {
-//   AvatarWithTeam.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarWithTeam.propTypes = propTypes;

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -1,11 +1,10 @@
 .container {
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
-  position: relative;
+  composes: d-relative d-align-middle from global;
 }
 
 .teamAvatar {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: calc( var(--zd_size6) * -1 ) ;
   font-size: 0 ;
   padding:var(--zd_size2) ;

package/es/avatar/AvatarWithTeam/__tests__/__snapshots__/AvatarWithTeam.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarWithTeam rendering the defult props 1`] = `
 <DocumentFragment>

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container } from '@zohodesk/components/es/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { cn } from "@dot-system/css-utility";
 import style from "./_FreezeLayer.module.css";
 import { getZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import { getDotLibraryConfig } from "../Provider/Config";
@@ -105,9 +106,9 @@ export default class FreezeLayer extends Component {
       style: isActive && needAutoZindex ? {
         zIndex: `${this.getNextIndex()}`
       } : {},
-      className: `
+      className: cn(`
               ${style.container}  ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''} ${customClass}
-            `,
+            `),
       onClick: onClick ? onClick : null,
       ref: forwardRef
     }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {

package/es/deprecated/FreezeLayer/_FreezeLayer.module.css

@@ -1,8 +1,7 @@
 .container {
+  composes: d-absolute d-overflow-hidden from global;
   top: 0 ;
   bottom: 0 ;
-  position: absolute;
-  overflow: hidden;
 }[dir=ltr] .container {
   left: 0 ;
   right: 0 ;

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -8,6 +8,7 @@ import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import style from "./SelectDropdown.module.css";
 
 class SelectDropdown extends React.Component {
@@ -63,13 +64,13 @@ class SelectDropdown extends React.Component {
     } = suggestions;
     return /*#__PURE__*/React.createElement("span", {
       ref: getTargetRef,
-      className: style.container,
+      className: cn(style.container),
       onClick: removeClose
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.departName,
+      className: cn(style.departName),
       onClick: this.handleTogglePopup
     }, selectedText), /*#__PURE__*/React.createElement("span", {
-      className: style.departIcon,
+      className: cn(style.departIcon),
       onClick: this.handleTogglePopup
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down1",