@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,14 +11,14 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-props="true"
     data-selector-id="appContainer_tooltip"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`AppContainer rendering the childern as element 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -58,13 +58,13 @@ exports[`AppContainer rendering the childern as element 1`] = `
 exports[`AppContainer rendering the childern as element in array 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -89,20 +89,20 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container AppcontainerClass flex cover coldir"
+    class="flex fullSize column container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -113,20 +113,20 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,20 +155,20 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/Avatar/Avatar.js

@@ -17,6 +17,8 @@ var _getInitial = require("../utils/getInitial");
 
 var _AvatarSize = _interopRequireDefault(require("../Provider/AvatarSize"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarModule = _interopRequireDefault(require("./Avatar.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -210,7 +212,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       var borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : '')),
         "data-title": needTitle ? title ? title : name : null,
         "data-id": dataId,
         "data-test-id": dataId,
@@ -218,12 +220,12 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         "data-selector-id": dataSelectorId,
         tabIndex: onClick ? 0 : null
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarModule["default"].initial),
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].initial)),
         "data-id": "".concat(dataId, "_AvatarInitial"),
         "data-test-id": "".concat(dataId, "_AvatarInitial"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
       }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
-        className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : '')),
         "data-id": "".concat(dataId, "_AvatarImg"),
         "data-test-id": "".concat(dataId, "_AvatarImg"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
@@ -233,7 +235,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         src: showAlternateAvatar ? alternateSrc : src,
         alt: name
       }), showDefaultBorder ? null : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " "))
       })));
     }
   }]);

package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Avatar rendering BorderOnActive true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border borderOnActive  "
+    class="avatar medium medium circle primary black border borderOnActive"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -21,7 +21,7 @@ exports[`Avatar rendering BorderOnActive true 1`] = `
 exports[`Avatar rendering Name in 2 Word 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -42,7 +42,7 @@ exports[`Avatar rendering Name in 2 Word 1`] = `
 exports[`Avatar rendering NeedBorder false 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -60,20 +60,20 @@ exports[`Avatar rendering NeedBorder false 1`] = `
 exports[`Avatar rendering alternateSrc 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -82,7 +82,7 @@ exports[`Avatar rendering alternateSrc 1`] = `
 exports[`Avatar rendering borderOnHover true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border borderOnHover  "
+    class="avatar medium medium circle primary black border borderOnHover"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -100,7 +100,7 @@ exports[`Avatar rendering borderOnHover true 1`] = `
 exports[`Avatar rendering customClass true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   customClassAvatar"
+    class="avatar medium medium circle primary black border customClassAvatar"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -118,7 +118,7 @@ exports[`Avatar rendering customClass true 1`] = `
 exports[`Avatar rendering initial 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -138,20 +138,20 @@ exports[`Avatar rendering initial 1`] = `
 exports[`Avatar rendering isAnimate is false 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image  "
+      class="image"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -160,20 +160,20 @@ exports[`Avatar rendering isAnimate is false 1`] = `
 exports[`Avatar rendering needInnerBorder is true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image  innerBorder"
+      class="image innerBorder"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -182,7 +182,7 @@ exports[`Avatar rendering needInnerBorder is true 1`] = `
 exports[`Avatar rendering needTitle 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -201,20 +201,20 @@ exports[`Avatar rendering needTitle 1`] = `
 exports[`Avatar rendering showAlternateAvatar is enabled border get disabled 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/css/img_5terre.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -223,13 +223,13 @@ exports[`Avatar rendering showAlternateAvatar is enabled border get disabled 1`]
 exports[`Avatar rendering showDefaultBorder is true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
@@ -242,7 +242,7 @@ exports[`Avatar rendering showDefaultBorder is true 1`] = `
 exports[`Avatar rendering src 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -250,7 +250,7 @@ exports[`Avatar rendering src 1`] = `
   >
     <img
       alt="AvatarName"
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
@@ -258,7 +258,7 @@ exports[`Avatar rendering src 1`] = `
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -267,7 +267,7 @@ exports[`Avatar rendering src 1`] = `
 exports[`Avatar rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-avatar="true"
     data-id="Avatar"
     data-selector-id="avatar"
@@ -286,7 +286,7 @@ exports[`Avatar rendering the Custom props 1`] = `
 exports[`Avatar rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -304,7 +304,7 @@ exports[`Avatar rendering the defult props 1`] = `
 exports[`Avatar rendering the palette of- default 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle default black border   "
+    class="avatar medium medium circle default black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -322,7 +322,7 @@ exports[`Avatar rendering the palette of- default 1`] = `
 exports[`Avatar rendering the palette of- info 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle info black border   "
+    class="avatar medium medium circle info black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -340,7 +340,7 @@ exports[`Avatar rendering the palette of- info 1`] = `
 exports[`Avatar rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -358,7 +358,7 @@ exports[`Avatar rendering the palette of- primary 1`] = `
 exports[`Avatar rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle secondary white border   "
+    class="avatar medium medium circle secondary white border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -376,7 +376,7 @@ exports[`Avatar rendering the palette of- secondary 1`] = `
 exports[`Avatar rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -394,7 +394,7 @@ exports[`Avatar rendering the shape of- circle 1`] = `
 exports[`Avatar rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium square_medium primary black border   "
+    class="avatar medium medium square_medium primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -412,7 +412,7 @@ exports[`Avatar rendering the shape of- square 1`] = `
 exports[`Avatar rendering the size of- black 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -430,7 +430,7 @@ exports[`Avatar rendering the size of- black 1`] = `
 exports[`Avatar rendering the size of- large 1`] = `
 <DocumentFragment>
   <div
-    class="avatar large large circle primary black border   "
+    class="avatar large large circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -448,7 +448,7 @@ exports[`Avatar rendering the size of- large 1`] = `
 exports[`Avatar rendering the size of- medium 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -466,7 +466,7 @@ exports[`Avatar rendering the size of- medium 1`] = `
 exports[`Avatar rendering the size of- small 1`] = `
 <DocumentFragment>
   <div
-    class="avatar small small circle primary black border   "
+    class="avatar small small circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -484,7 +484,7 @@ exports[`Avatar rendering the size of- small 1`] = `
 exports[`Avatar rendering the size of- white 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary white border   "
+    class="avatar medium medium circle primary white border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -502,7 +502,7 @@ exports[`Avatar rendering the size of- white 1`] = `
 exports[`Avatar rendering the size of- xlarge 1`] = `
 <DocumentFragment>
   <div
-    class="avatar xlarge xlarge circle primary black border   "
+    class="avatar xlarge xlarge circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -520,7 +520,7 @@ exports[`Avatar rendering the size of- xlarge 1`] = `
 exports[`Avatar rendering the size of- xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="avatar xmedium xmedium circle primary black border   "
+    class="avatar xmedium xmedium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -538,7 +538,7 @@ exports[`Avatar rendering the size of- xmedium 1`] = `
 exports[`Avatar rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="avatar xsmall xsmall circle primary black border   "
+    class="avatar xsmall xsmall circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -556,7 +556,7 @@ exports[`Avatar rendering the size of- xsmall 1`] = `
 exports[`Avatar rendering the size of- xxsmall 1`] = `
 <DocumentFragment>
   <div
-    class="avatar xxsmall xxsmall circle primary black border   "
+    class="avatar xxsmall xxsmall circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -574,7 +574,7 @@ exports[`Avatar rendering the size of- xxsmall 1`] = `
 exports[`Avatar rendering title 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"

package/lib/AvatarTeam/AvatarTeam.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarTeamModule = _interopRequireDefault(require("./AvatarTeam.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -94,7 +96,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
           customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2;
       var border = borderOnHover || onClick;
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
-        className: "".concat(_AvatarTeamModule["default"].container, " ").concat(borderOnActive ? _AvatarTeamModule["default"].borderOnActive : border ? _AvatarTeamModule["default"].borderOnHover : '', " "),
+        className: (0, _cssUtility.cn)("".concat(_AvatarTeamModule["default"].container, " ").concat(borderOnActive ? _AvatarTeamModule["default"].borderOnActive : border ? _AvatarTeamModule["default"].borderOnHover : '', " ")),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-selector-id": dataSelectorId
@@ -114,7 +116,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         needBorder: needBorder,
         needDefaultBorder: needDefaultBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam)
+        className: (0, _cssUtility.cn)("".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam))
       }));
     }
   }]);