@zohodesk/dot 1.9.18 → 1.9.19

package/lib/alert/AlertLookup/AlertLookup.js

@@ -23,6 +23,8 @@ var _Section = _interopRequireDefault(require("../../lookup/Section/Section"));
 
 var _FormAction = _interopRequireDefault(require("../../FormAction/FormAction"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AlertLookupModule = _interopRequireDefault(require("./AlertLookup.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -126,13 +128,13 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         alignBox: "row",
         className: _AlertLookupModule["default"].section
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AlertLookupModule["default"].innerSection, " ").concat(sectionClassName)
+        className: (0, _cssUtility.cn)("".concat(_AlertLookupModule["default"].innerSection, " ").concat(sectionClassName))
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isHtmlContent && message ? /*#__PURE__*/_react["default"].createElement("div", {
         dangerouslySetInnerHTML: {
           __html: message
         }
       }) : /*#__PURE__*/_react["default"].createElement("div", null, message), confirmationMessage && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _AlertLookupModule["default"].text
+        className: (0, _cssUtility.cn)(_AlertLookupModule["default"].text)
       }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
         size: "small",
         paddingLeftSize: "xsmall"
@@ -155,9 +157,4 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
 
 exports["default"] = AlertLookup;
 AlertLookup.propTypes = _propTypes.propTypes;
-AlertLookup.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AlertLookup.docs = {
-//     componentGroup: 'AlertLookup',
-//     folderName: 'Alert'
-//   };
-// }
+AlertLookup.defaultProps = _defaultProps.defaultProps;

package/lib/alert/AlertLookup/AlertLookup.module.css

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

package/lib/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/lib/avatar/AvatarClose/AvatarClose.js

@@ -17,6 +17,8 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Ava
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarCloseModule = _interopRequireDefault(require("./AvatarClose.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,7 +74,7 @@ var AvatarClose = /*#__PURE__*/function (_React$Component) {
           _customProps$AvatarPr = customProps.AvatarProps,
           AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: _AvatarCloseModule["default"].container,
+        className: (0, _cssUtility.cn)(_AvatarCloseModule["default"].container),
         "data-selector-id": dataSelectorId,
         "data-id": dataId,
         "data-test-id": dataId
@@ -82,12 +84,12 @@ var AvatarClose = /*#__PURE__*/function (_React$Component) {
         title: title,
         size: size
       }, AvatarProps)), isClose && /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AvatarCloseModule["default"].pop,
+        className: (0, _cssUtility.cn)(_AvatarCloseModule["default"].pop),
         onClick: onClick,
         "data-id": "".concat(dataId, "_close"),
         "data-test-id": "".concat(dataId, "_close")
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AvatarCloseModule["default"].icon
+        className: (0, _cssUtility.cn)(_AvatarCloseModule["default"].icon)
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-plus"
       }))));
@@ -99,8 +101,4 @@ var AvatarClose = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarClose;
 AvatarClose.propTypes = _propTypes.propTypes;
-AvatarClose.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AvatarClose.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarClose.defaultProps = _defaultProps.defaultProps;

package/lib/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/lib/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/lib/avatar/AvatarCollision/AvatarCollision.js

@@ -17,6 +17,8 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Ava
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarCollisionModule = _interopRequireDefault(require("./AvatarCollision.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,7 +76,7 @@ var AvatarCollision = /*#__PURE__*/function (_React$Component) {
           _customProps$AvatarPr = customProps.AvatarProps,
           AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarCollisionModule["default"].container, " ").concat(isLeft ? _AvatarCollisionModule["default"].off : isIdle ? _AvatarCollisionModule["default"].idle : _AvatarCollisionModule["default"].on),
+        className: (0, _cssUtility.cn)("".concat(_AvatarCollisionModule["default"].container, " ").concat(isLeft ? _AvatarCollisionModule["default"].off : isIdle ? _AvatarCollisionModule["default"].idle : _AvatarCollisionModule["default"].on)),
         onClick: onClick,
         "data-id": "collsionPop",
         "data-test-id": "collsionPop",
@@ -88,10 +90,10 @@ var AvatarCollision = /*#__PURE__*/function (_React$Component) {
         needTitle: false,
         initial: initial
       }, AvatarProps)), needCreateChat && !isLeft && /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AvatarCollisionModule["default"].pop,
+        className: (0, _cssUtility.cn)(_AvatarCollisionModule["default"].pop),
         "data-title": title
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AvatarCollisionModule["default"].icon
+        className: (0, _cssUtility.cn)(_AvatarCollisionModule["default"].icon)
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-livechat3"
       }))));
@@ -103,8 +105,4 @@ var AvatarCollision = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarCollision;
 AvatarCollision.propTypes = _propTypes.propTypes;
-AvatarCollision.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AvatarCollision.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarCollision.defaultProps = _defaultProps.defaultProps;

package/lib/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/lib/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/lib/avatar/AvatarIcon/AvatarIcon.js

@@ -101,6 +101,4 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarIcon;
 AvatarIcon.defaultProps = _defaultProps.defaultProps;
-AvatarIcon.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   AvatarIcon.docs = { componentGroup: 'Avatar Group' };
-// }
+AvatarIcon.propTypes = _propTypes.propTypes;

package/lib/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/lib/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/lib/avatar/AvatarStatus/AvatarStatus.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarStatusModule = _interopRequireDefault(require("./AvatarStatus.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -80,7 +82,7 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
           _customProps$AvatarPr = customProps.AvatarProps,
           AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarStatusModule["default"].container, " ").concat(className, " ")
+        className: (0, _cssUtility.cn)("".concat(_AvatarStatusModule["default"].container, " ").concat(className, " "))
       }, AvatarStatusProps, {
         "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle),
         "data-selector-id": dataSelectorId
@@ -101,7 +103,7 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         needBorder: needBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": statusTitle,
-        className: "".concat(_AvatarStatusModule["default"].state, " ").concat(_AvatarStatusModule["default"][state], " ").concat(_AvatarStatusModule["default"][size], " ").concat(_AvatarStatusModule["default"][shape])
+        className: (0, _cssUtility.cn)("".concat(_AvatarStatusModule["default"].state, " ").concat(_AvatarStatusModule["default"][state], " ").concat(_AvatarStatusModule["default"][size], " ").concat(_AvatarStatusModule["default"][shape]))
       }));
     }
   }]);
@@ -111,8 +113,4 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarStatus;
 AvatarStatus.defaultProps = _defaultProps.defaultProps;
-AvatarStatus.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   AvatarStatus.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarStatus.propTypes = _propTypes.propTypes;

package/lib/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/lib/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/lib/avatar/AvatarThread/AvatarThread.js

@@ -17,6 +17,8 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Ava
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarThreadModule = _interopRequireDefault(require("./AvatarThread.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -88,7 +90,7 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
           AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var hoverEffect = showOnHover ? _AvatarThreadModule["default"].hover : '';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarThreadModule["default"].container, " ").concat(onClick ? _AvatarThreadModule["default"].pointer : '', " ").concat(hoverEffect),
+        className: (0, _cssUtility.cn)("".concat(_AvatarThreadModule["default"].container, " ").concat(onClick ? _AvatarThreadModule["default"].pointer : '', " ").concat(hoverEffect)),
         "data-selector-id": dataSelectorId
       }, AvatarThreadProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         initial: initial,
@@ -103,13 +105,13 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
         customClass: customTextClass,
         needTitle: needTitle
       }, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarThreadModule["default"].thread, " ").concat(onIconClick ? _AvatarThreadModule["default"].pointer : _AvatarThreadModule["default"].defaultCursor, " ").concat(needBackground ? _AvatarThreadModule["default"].threadBg : '', " ").concat(_AvatarThreadModule["default"]["thread_".concat(size, "_pos")], " ").concat(needBorder ? _AvatarThreadModule["default"]["border_".concat(borderPalette)] : ''),
+        className: (0, _cssUtility.cn)("".concat(_AvatarThreadModule["default"].thread, " ").concat(onIconClick ? _AvatarThreadModule["default"].pointer : _AvatarThreadModule["default"].defaultCursor, " ").concat(needBackground ? _AvatarThreadModule["default"].threadBg : '', " ").concat(_AvatarThreadModule["default"]["thread_".concat(size, "_pos")], " ").concat(needBorder ? _AvatarThreadModule["default"]["border_".concat(borderPalette)] : '')),
         "data-title": iconTitle,
         "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
         "data-test-id": iconTitle === 'Remove Follower' && 'removeFollower',
         onClick: onIconClick
       }, iconName && /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AvatarThreadModule["default"].icon
+        className: (0, _cssUtility.cn)(_AvatarThreadModule["default"].icon)
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize,
@@ -123,8 +125,4 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarThread;
 AvatarThread.defaultProps = _defaultProps.defaultProps;
-AvatarThread.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   AvatarThread.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarThread.propTypes = _propTypes.propTypes;

package/lib/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/lib/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/lib/avatar/AvatarUser/AvatarUser.js

@@ -19,6 +19,8 @@ var _AvatarIcon = _interopRequireDefault(require("../AvatarIcon/AvatarIcon"));
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarUserModule = _interopRequireDefault(require("./AvatarUser.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -98,7 +100,7 @@ var AvatarUser = /*#__PURE__*/function (_React$Component) {
           _i18nKeys$lockTitle = i18nKeys.lockTitle,
           lockTitle = _i18nKeys$lockTitle === void 0 ? 'Locked' : _i18nKeys$lockTitle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarUserModule["default"].container, " ").concat(_AvatarUserModule["default"][size]),
+        className: (0, _cssUtility.cn)("".concat(_AvatarUserModule["default"].container, " ").concat(_AvatarUserModule["default"][size])),
         "data-id": dataId || name || iconName,
         "data-test-id": dataId || name || iconName,
         "data-selector-id": dataSelectorId
@@ -124,27 +126,27 @@ var AvatarUser = /*#__PURE__*/function (_React$Component) {
         alternateSrc: alternateSrc
       }, AvatarProps)), isPaid ? /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": paidTitle,
-        className: _AvatarUserModule["default"].paid,
+        className: (0, _cssUtility.cn)(_AvatarUserModule["default"].paid),
         "data-id": "paidUser",
         "data-test-id": "paidUser"
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-paiduser"
       })) : null, isPortal ? /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": portalTitle,
-        className: _AvatarUserModule["default"].portal,
+        className: (0, _cssUtility.cn)(_AvatarUserModule["default"].portal),
         "data-id": "portalUser",
         "data-test-id": "portalUser"
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-globe1"
       })) : null, isLocked ? /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": lockTitle,
-        className: _AvatarUserModule["default"].lock,
+        className: (0, _cssUtility.cn)(_AvatarUserModule["default"].lock),
         "data-id": "locked",
         "data-test-id": "locked"
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-lock01"
       })) : null, needDelete ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _AvatarUserModule["default"]["delete"],
+        className: (0, _cssUtility.cn)(_AvatarUserModule["default"]["delete"]),
         "data-id": "dltContactPhoto",
         "data-test-id": "dltContactPhoto",
         onClick: onDelete
@@ -160,8 +162,4 @@ var AvatarUser = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarUser;
 AvatarUser.propTypes = _propTypes.propTypes;
-AvatarUser.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AvatarUser.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarUser.defaultProps = _defaultProps.defaultProps;

package/lib/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/lib/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/lib/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -17,6 +17,8 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Ava
 
 var _AvatarTeam = _interopRequireDefault(require("@zohodesk/components/es/AvatarTeam/AvatarTeam"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarWithTeamModule = _interopRequireDefault(require("./AvatarWithTeam.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -86,7 +88,7 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
           _customProps$AvatarTe2 = customProps.AvatarTeam2Props,
           AvatarTeam2Props = _customProps$AvatarTe2 === void 0 ? {} : _customProps$AvatarTe2;
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
-        className: "".concat(_AvatarWithTeamModule["default"].container, " "),
+        className: (0, _cssUtility.cn)("".concat(_AvatarWithTeamModule["default"].container, " ")),
         "data-id": "avatarWithTeamId",
         "data-test-id": "avatarWithTeamId",
         "data-selector-id": dataSelectorId
@@ -123,7 +125,7 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
         customClass: customTextClass,
         borderOnActive: borderOnActive
       }, Avatar2Props)), teamName ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarWithTeamModule["default"].teamAvatar, " ").concat(teamClassName, " "),
+        className: (0, _cssUtility.cn)("".concat(_AvatarWithTeamModule["default"].teamAvatar, " ").concat(teamClassName, " ")),
         "data-id": "teamNameTestId",
         "data-test-id": "teamNameTestId",
         "data-title": needTitle ? title : undefined
@@ -147,8 +149,4 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AvatarWithTeam;
 AvatarWithTeam.defaultProps = _defaultProps.defaultProps;
-AvatarWithTeam.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   AvatarWithTeam.docs = {
-//     componentGroup: 'Avatar Group'
-//   };
-// }
+AvatarWithTeam.propTypes = _propTypes.propTypes;

package/lib/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/lib/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/lib/deprecated/FreezeLayer/FreezeLayer.js

@@ -17,6 +17,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FreezeLayerModule = _interopRequireDefault(require("./_FreezeLayer.module.css"));
 
 var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
@@ -160,7 +162,7 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
         style: isActive && needAutoZindex ? {
           zIndex: "".concat(this.getNextIndex())
         } : {},
-        className: "\n              ".concat(_FreezeLayerModule["default"].container, "  ").concat(_FreezeLayerModule["default"]["index".concat(zIndex)], "  ").concat(!isSvgMask ? _FreezeLayerModule["default"][palette] : '', " ").concat(customClass, "\n            "),
+        className: (0, _cssUtility.cn)("\n              ".concat(_FreezeLayerModule["default"].container, "  ").concat(_FreezeLayerModule["default"]["index".concat(zIndex)], "  ").concat(!isSvgMask ? _FreezeLayerModule["default"][palette] : '', " ").concat(customClass, "\n            ")),
         onClick: onClick ? onClick : null,
         ref: forwardRef
       }, children && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, childAnimationName ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {

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