@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

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"

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

@@ -10,7 +10,7 @@ exports[`AlertLookup rendering the defult props 2`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir hCenter"
+      class="flex fullSize row justifyContent_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"
       }))));

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

@@ -9,7 +9,7 @@ exports[`AvatarClose rendering the defult props 1`] = `
     data-test-id="avatarClose"
   >
     <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/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"
       }))));

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

@@ -9,7 +9,7 @@ exports[`AvatarCollision rendering the defult props 1`] = `
     data-test-id="collsionPop"
   >
     <div
-      class="avatar xmedium xmedium circle default black border   "
+      class="avatar xmedium xmedium circle default black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -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 basic icon-livechat3"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/avatar/AvatarIcon/AvatarIcon.js

@@ -90,7 +90,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
       }, AvatarIconProps), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: name,
         size: iconSize,
-        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].avatar_align_center, "  ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)] ? _AvatarIconModule["default"]["icon_".concat(iconColor)] : '') : '', " "),
+        iconClass: "  ".concat(_AvatarIconModule["default"].avatar_align_center, "  ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)] ? _AvatarIconModule["default"]["icon_".concat(iconColor)] : '') : '', " ").concat(iconClass),
         isBold: isIconBold
       }));
     }

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

@@ -3,14 +3,14 @@
 exports[`AvatarIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  medium default  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_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 basic icon-add-ag 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]))
       }));
     }
   }]);

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

@@ -4,11 +4,11 @@ exports[`AvatarStatus rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-label="undefined, undefined, "
-    class="container  "
+    class="container"
     data-selector-id="avatarStatus"
   >
     <div
-      class="avatar medium medium circle info black  "
+      class="avatar medium medium circle info black"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"

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,17 +105,17 @@ 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,
-        iconClass: "".concat(iconClass, "\n                  ").concat(_AvatarThreadModule["default"]["text_".concat(iconColor)] ? _AvatarThreadModule["default"]["text_".concat(iconColor)] : iconColor)
+        iconClass: "".concat(_AvatarThreadModule["default"]["text_".concat(iconColor)] ? _AvatarThreadModule["default"]["text_".concat(iconColor)] : iconColor, " ").concat(iconClass)
       })), getCustomThread && getCustomThread()));
     }
   }]);

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

@@ -3,11 +3,11 @@
 exports[`AvatarThread rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  "
+    class="container"
     data-selector-id="avatarThread"
   >
     <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/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

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

@@ -7,7 +7,7 @@ exports[`AvatarUser rendering the defult props 1`] = `
     data-selector-id="avatarUser"
   >
     <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/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

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

@@ -3,13 +3,13 @@
 exports[`AvatarWithTeam rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="container "
+    class="container"
     data-id="avatarWithTeamId"
     data-selector-id="avatarWithTeam"
     data-test-id="avatarWithTeamId"
   >
     <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"

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(customClass, " ").concat(_FreezeLayerModule["default"]["index".concat(zIndex)], "  ").concat(!isSvgMask ? _FreezeLayerModule["default"][palette] : '', "\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/SelectDropdown/SelectDropdown.js

@@ -27,6 +27,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectDropdownModule = _interopRequireDefault(require("./SelectDropdown.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -115,13 +117,13 @@ var SelectDropdown = /*#__PURE__*/function (_React$Component) {
           options = _suggestions$options === void 0 ? [] : _suggestions$options;
       return /*#__PURE__*/_react["default"].createElement("span", {
         ref: getTargetRef,
-        className: _SelectDropdownModule["default"].container,
+        className: (0, _cssUtility.cn)(_SelectDropdownModule["default"].container),
         onClick: removeClose
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SelectDropdownModule["default"].departName,
+        className: (0, _cssUtility.cn)(_SelectDropdownModule["default"].departName),
         onClick: this.handleTogglePopup
       }, selectedText), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SelectDropdownModule["default"].departIcon,
+        className: (0, _cssUtility.cn)(_SelectDropdownModule["default"].departIcon),
         onClick: this.handleTogglePopup
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down1",

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -39,6 +39,8 @@ var _Common = require("@zohodesk/components/es/utils/Common");
 
 var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
 var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/es/RippleEffect/RippleEffect"));
@@ -632,12 +634,12 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
       var _this$state3 = this.state,
           searchValue = _this$state3.searchValue,
           isFetchingOptions = _this$state3.isFetchingOptions;
-      var commonClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : isReadOnly || !isEditable ? _ToggleDropDownModule["default"].cursorDefault : !showOnHover ? "".concat(_ToggleDropDownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_ToggleDropDownModule["default"].cursorDefault));
+      var commonClass = " ".concat(isPopupReady ? activeStyle ? activeStyle : '' : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : isReadOnly || !isEditable ? _ToggleDropDownModule["default"].cursorDefault : !showOnHover ? "".concat(_ToggleDropDownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_ToggleDropDownModule["default"].cursorDefault), " ").concat(className ? className : '');
       var listIndex = -1;
       var ariaTitleId = this.getAriaId(); // const allyOptionsArr = this.getOptionsArray();
 
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: _ToggleDropDownModule["default"].wrapper,
+        className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].wrapper),
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
         onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
         "data-selector-id": dataSelectorId
@@ -655,7 +657,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         isActive: isPopupOpen,
         isNeedEffect: isEditable && isNeedEffect
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(commonClass, " ").concat(!isPopupOpen && showIconOnHover ? _ToggleDropDownModule["default"].hoverIcon : ''),
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(!isPopupOpen && showIconOnHover ? _ToggleDropDownModule["default"].hoverIcon : '', "  ").concat(commonClass),
         isCover: false,
         alignBox: "row",
         align: "vertical",
@@ -783,9 +785,9 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
             key: "index".concat(groupName)
           }, needDivider && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _ToggleDropDownModule["default"].seperatedLine
+            className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].seperatedLine)
           }), groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _ToggleDropDownModule["default"].groupName
+            className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].groupName)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             palette: palette,
@@ -882,7 +884,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
             key: i
           }, needDivider ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: _ToggleDropDownModule["default"].seperatedLine
+            className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].seperatedLine)
           }) : iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             dataId: item[keyName],
             value: item[keyName],
@@ -947,7 +949,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           size: "small",
           getEmptyState: _this5.emptySearchSVG
         }) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ToggleDropDownModule["default"].loader
+          className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getFooter()) : null));
       }) : null);
     }

package/lib/dropdown/ToggleDropDown/__tests__/__snapshots__/ToggleDropDown.spec.js.snap

@@ -7,7 +7,7 @@ exports[`ToggleDropDown rendering the defult props 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex rowdir vCenter"
+      class="flex row alignItems_center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -16,7 +16,7 @@ exports[`ToggleDropDown rendering the defult props 1`] = `
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="1"
-        class="buttonReset   cursor   effect default border defaultHover  hoverEffect  flex rowdir vCenter"
+        class="flex row alignItems_center buttonReset cursor effect default border defaultHover hoverEffect"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/lib/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _CommonEmptyStateModule = _interopRequireDefault(require("./CommonEmptyState.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -78,16 +80,16 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
           _customClass$descript = customClass.descriptionClass,
           descriptionClass = _customClass$descript === void 0 ? '' : _customClass$descript;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_CommonEmptyStateModule["default"].container, " ").concat(_CommonEmptyStateModule["default"][size], " ").concat(className, " ").concat(!isFluid ? _CommonEmptyStateModule["default"].fluid : '', " ").concat(_CommonEmptyStateModule["default"][palette]),
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].container, " ").concat(_CommonEmptyStateModule["default"][size], " ").concat(!isFluid ? _CommonEmptyStateModule["default"].fluid : '', " ").concat(_CommonEmptyStateModule["default"][palette], "  ").concat(className)),
         "data-id": dataId,
         "data-test-id": dataId
       }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/_react["default"].createElement("div", {
         tabIndex: "0",
-        className: "".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass)
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass))
       }, title) : null, description ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _CommonEmptyStateModule["default"].linkWrapper
+        className: (0, _cssUtility.cn)(_CommonEmptyStateModule["default"].linkWrapper)
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_CommonEmptyStateModule["default"].desc, " ").concat(descriptionClass)
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].desc, " ").concat(descriptionClass))
       }, description), !linkDescription && linkText ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: linkUrl,
         className: _CommonEmptyStateModule["default"].link,
@@ -95,9 +97,9 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
         onClick: onUrlClick,
         dataId: "".concat(dataId, "_primarylink")
       }, linkText) : null) : null, linkDescription || !description && !linkDescription && linkText ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _CommonEmptyStateModule["default"].linkDescWrapper
+        className: (0, _cssUtility.cn)(_CommonEmptyStateModule["default"].linkDescWrapper)
       }, linkDescription ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_CommonEmptyStateModule["default"].linkDesc)
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].linkDesc))
       }, linkDescription) : null, linkText ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: linkUrl,
         className: _CommonEmptyStateModule["default"].link,
@@ -105,7 +107,7 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
         onClick: onUrlClick,
         dataId: "".concat(dataId, "_secondarylink")
       }, linkText) : null) : null, children ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _CommonEmptyStateModule["default"].children
+        className: (0, _cssUtility.cn)(_CommonEmptyStateModule["default"].children)
       }, children) : null);
     }
   }]);

package/lib/emptystate/CommonEmptyState/__tests__/__snapshots__/CommonEmptyState.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`CommonEmptyState rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container medium  fluid default"
+    class="container medium fluid default"
     data-id="emptyState"
     data-test-id="emptyState"
   />

package/lib/emptystate/EditionPage/EditionPage.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -67,28 +69,28 @@ var EditionPage = /*#__PURE__*/function (_Component) {
           butttonText = _this$props.butttonText,
           children = _this$props.children;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].editionContainer,
+        className: (0, _cssUtility.cn)(_EditionPage["default"].editionContainer),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].svg
+        className: (0, _cssUtility.cn)(_EditionPage["default"].svg)
       }, /*#__PURE__*/_react["default"].createElement(_EmptyCrmPotential["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].header
+        className: (0, _cssUtility.cn)(_EditionPage["default"].header)
       }, title), subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].description
+        className: (0, _cssUtility.cn)(_EditionPage["default"].description)
       }, subtitle) : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].description
+        className: (0, _cssUtility.cn)(_EditionPage["default"].description)
       }, information ? "".concat(information, " ") : null, butttonText ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _EditionPage["default"].button,
+        className: (0, _cssUtility.cn)(_EditionPage["default"].button),
         "data-id": "".concat(dataId, "_button"),
         "data-test-id": "".concat(dataId, "_button"),
         onClick: onButtonClick
       }, butttonText) : null), children ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].content
+        className: (0, _cssUtility.cn)(_EditionPage["default"].content)
       }, children) : null, footerText ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_footerText"),
         "data-test-id": "".concat(dataId, "_footerText"),
-        className: _EditionPage["default"].footer
+        className: (0, _cssUtility.cn)(_EditionPage["default"].footer)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         dangerouslySetInnerHTML: {
           __html: footerText

package/lib/emptystate/EditionPage/__tests__/__snapshots__/EditionPage.spec.js.snap

@@ -12,7 +12,7 @@ exports[`EditionPage rendering the defult props 1`] = `
     >
       <div
         aria-hidden="true"
-        class="large  default svgCenter "
+        class="large default svgCenter"
       >
         <svg
           data-id="emptyCrmPotential"