@zohodesk/components 1.6.23 → 1.6.25

package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>

package/es/Textarea/Textarea.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Textarea.module.css";
 export default class Textarea extends React.Component {
   constructor(props) {
@@ -95,7 +96,7 @@ export default class Textarea extends React.Component {
     return /*#__PURE__*/React.createElement("textarea", _extends({
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass} `,
+      className: cn(`${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass} `),
       placeholder: placeHolder
     }, options, {
       "data-id": dataId,

package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Textarea component Should be render  cols only  1`] = `
 <DocumentFragment>

package/es/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ import { getLibraryConfig } from "../Provider/Config";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import selectn from 'selectn';
 import { whiteSpaceClassMapping } from "../utils/cssUtils";
+import { cn } from "@dot-system/css-utility";
 import style from "./Tooltip.module.css";
 export default class Tooltip extends React.Component {
   constructor(props) {
@@ -493,7 +494,7 @@ export default class Tooltip extends React.Component {
 
     let tooltipCss = `${style.tooltipcont} ${whiteSpaceClassMapping[tooltipWhiteSpaceModification]}`;
     return title ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.tooltiptext} ${customClass}`,
+      className: cn(`${style.tooltiptext} ${customClass}`),
       style: {
         left,
         top,
@@ -503,18 +504,18 @@ export default class Tooltip extends React.Component {
       "data-id": dataId,
       "data-test-id": dataId
     }, !dataTooltipnoArrow ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.tooltiparrow} ${arrowStyle}`,
+      className: cn(`${style.tooltiparrow} ${arrowStyle}`),
       style: {
         left: arrowLeft,
         top: arrowTop
       }
     }) : null, isHtml ? /*#__PURE__*/React.createElement("div", {
-      className: tooltipCss,
+      className: cn(tooltipCss),
       dangerouslySetInnerHTML: {
         __html: title
       }
     }) : /*#__PURE__*/React.createElement("div", {
-      className: tooltipCss
+      className: cn(tooltipCss)
     }, title)) : null;
   }
 

package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Typography Should render decoration - default 1`] = `
 <DocumentFragment>
@@ -2697,7 +2697,7 @@ exports[`Typography with highlight should render separate customised render the
   >
     The 
     <div
-      aria-labelledby="2"
+      aria-labelledby="1"
       class="container effect medium lgRadius default"
       data-id="tag_Tag"
       data-selector-id="tag"
@@ -2708,14 +2708,14 @@ exports[`Typography with highlight should render separate customised render the
       <div
         aria-hidden="true"
         class="text mediumtext"
-        id="2"
+        id="1"
       >
         Sun
       </div>
     </div>
      and 
     <div
-      aria-labelledby="3"
+      aria-labelledby="2"
       class="container effect medium lgRadius default"
       data-id="tag_Tag"
       data-selector-id="tag"
@@ -2726,7 +2726,7 @@ exports[`Typography with highlight should render separate customised render the
       <div
         aria-hidden="true"
         class="text mediumtext"
-        id="3"
+        id="2"
       >
         Moon
       </div>

package/es/VelocityAnimation/VelocityAnimation/__tests__/__snapshots__/VelocityAnimation.spec.js.snap

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

package/es/VelocityAnimation/VelocityAnimationGroup/__tests__/__snapshots__/VelocityAnimationGroup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`VelocityAnimationGroup rendering isActive is true 1`] = `
 <DocumentFragment>

package/es/deprecated/Switch/Switch.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../../v1/Layout";
 import Label from "../../v1/Label/Label";
+import { cn } from "@dot-system/css-utility";
 import style from "../../Switch/Switch.module.css";
 
 const Switch = props => {
@@ -60,7 +61,7 @@ const Switch = props => {
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: id,
-    className: `${style.input} ${checked ? style.checked : ''}`,
+    className: cn(`${style.input} ${checked ? style.checked : ''}`),
     name: name,
     value: value,
     checked: checked,
@@ -71,7 +72,7 @@ const Switch = props => {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    className: cn(`${style.label} ${style[`${size}Label`]} ${customSwitch}`),
     tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/React.createElement(Label, _extends({
     text: text,

package/es/semantic/Button/Button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./semanticButton.module.css";
 export default class Button extends React.Component {
   constructor(props) {
@@ -31,7 +32,7 @@ export default class Button extends React.Component {
       ariaLabelledby
     } = a11y;
     return /*#__PURE__*/React.createElement("button", {
-      className: `${style.buttonReset} ${customClass}`,
+      className: cn(`${style.buttonReset} ${customClass}`),
       "aria-label": ariaLabel,
       "aria-haspopup": ariaHaspopup,
       "aria-expanded": ariaExpanded,

package/es/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

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

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>

package/es/v1/Button/Button.js

@@ -1,3 +1,5 @@
+import { cn } from "@dot-system/css-utility";
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, memo, useMemo } from 'react';
@@ -11,7 +13,7 @@ import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
-import Loader from "../shared/Loader/Loader";
+import Spinner from "../shared/Spinner/Spinner";
 import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
 
@@ -101,7 +103,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
       $ui_justifyContent: "center",
       $ui_className: loaderClassName,
       testId: testId ? `${testId}_loader` : undefined
-    }, /*#__PURE__*/React.createElement(Loader, null));
+    }, /*#__PURE__*/React.createElement(Spinner, null));
   };
 
   const _renderSuccess = () => {
@@ -187,7 +189,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
-    className: buttonClassName,
+    className: cn(buttonClassName),
     "aria-busy": isLoading,
     "aria-disabled": isDisabledState,
     "aria-readonly": isReadOnly,

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 <DocumentFragment>

package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/es/v1/Switch/Switch.js

@@ -15,6 +15,7 @@ import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import Label from "../../Label/Label"; // css
 
+import { cn } from "@dot-system/css-utility";
 import defaultStyle from "./css/Switch_v1.module.css";
 
 const Switch = props => {
@@ -108,20 +109,20 @@ const Switch = props => {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: cn(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/React.createElement("svg", {
-    className: thumbClass,
+    className: cn(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/React.createElement("svg", {
-    className: labelIndicationClass,
+    className: cn(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/React.createElement("rect", {
     width: "100%",

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/es/v1/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -1,9 +1,10 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
-import style from "./Loader_v1.module.css";
+import { cn } from "@dot-system/css-utility";
+import style from "./Spinner_v1.module.css";
 
-const Loader = props => {
+const Spinner = props => {
   const {
     customClass
   } = props;
@@ -11,23 +12,23 @@ const Loader = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${wrapper}`,
+    className: cn(`${style.spinner} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerTrack,
+    className: cn(style.spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerHead,
+    className: cn(style.spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"
   }));
 };
 
-Loader.propTypes = propTypes;
-Loader.defaultProps = defaultProps;
-export default Loader;
+Spinner.propTypes = propTypes;
+Spinner.defaultProps = defaultProps;
+export default Spinner;

package/es/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js}

@@ -1,17 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Loader from "../Loader";
-describe('Loader', () => {
+import Spinner from "../Spinner";
+describe('Spinner', () => {
   test('renders default snapshot', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, null));
+    } = render( /*#__PURE__*/React.createElement(Spinner, null));
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, {
+    } = render( /*#__PURE__*/React.createElement(Spinner, {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → es/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Loader renders default snapshot 1`] = `
+exports[`Spinner renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
@@ -24,7 +24,7 @@ exports[`Loader renders default snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Loader renders with customClass 1`] = `
+exports[`Spinner renders with customClass 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"

package/es/v1/shared/SuccessTick/SuccessTick.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
@@ -11,7 +12,7 @@ const SuccessTick = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${wrapper}`,
+    className: cn(`${style.tick} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>

package/lib/Accordion/Accordion.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -107,7 +109,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           ariaExpanded = a11y.ariaExpanded,
           ariaHaspopup = a11y.ariaHaspopup;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         style: {
           height: height
         },

package/lib/Accordion/AccordionItem.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -80,13 +82,13 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       unMountItem = unMountItem !== undefined ? unMountItem : unMount;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         "data-id": dataId,
         "data-test-id": dataId,
         role: role,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: innerClass ? innerClass : '',
+        className: (0, _cssUtility.cn)(innerClass ? innerClass : ''),
         onClick: selectMenu.bind(this, id)
       }, children[0]), unMountItem ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
         name: "slideDown",

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

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

package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

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

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

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

package/lib/AppContainer/AppContainer.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 require("../common/basic.module.css");
 
 require("@zohodesk/variables/assets/colorVariables.module.css");
@@ -188,7 +190,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
+        className: (0, _cssUtility.cn)("".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass)),
         "data-id": "".concat(dataId, "_tooltip"),
         "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")

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

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

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,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Avatar rendering BorderOnActive true 1`] = `
 <DocumentFragment>

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))
       }));
     }
   }]);

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

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

package/lib/Button/Button.js

@@ -17,6 +17,8 @@ var _utils = require("@zohodesk/utils");
 
 var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ButtonModule = _interopRequireDefault(require("./css/Button.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -55,7 +57,7 @@ function Button(props) {
 
   var statusLower = status.toLowerCase();
   return /*#__PURE__*/_react["default"].createElement("button", _extends({
-    className: buttonClass,
+    className: (0, _cssUtility.cn)(buttonClass),
     "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
     "data-test-id": disabled ? "".concat(dataId, "_disabled") : dataId,
     disabled: disabled || statusLower === 'loading',
@@ -67,11 +69,11 @@ function Button(props) {
   }, customProps, a11y, {
     id: id
   }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
-    className: finalStyle.overlay
+    className: (0, _cssUtility.cn)(finalStyle.overlay)
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: loaderParentClass
+    className: (0, _cssUtility.cn)(loaderParentClass)
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: loaderChildClass
+    className: (0, _cssUtility.cn)(loaderChildClass)
   }))));
 }
 

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button component Should be render with the basic set customButtonclass with buttonClass  1`] = `
 <DocumentFragment>