@zohodesk/components 1.6.23 → 1.6.24

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -21,6 +21,8 @@ var _propTypes = require("./props/propTypes");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -125,7 +127,7 @@ function DropBoxElement(props) {
       inlineStyle = _cssJSLogic.inlineStyle;
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: boxClassName,
+    className: (0, _cssUtility.cn)(boxClassName),
     "data-id": "".concat(dataId),
     "data-test-id": "".concat(dataId),
     "data-selector-id": dataSelectorId,
@@ -145,22 +147,22 @@ function DropBoxElement(props) {
     "dot-ui-element": "dropbox"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
-    className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
+    className: (0, _cssUtility.cn)("".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")])),
     onClick: onClick,
     "data-id": "".concat(dataId, "_subcontainer"),
     "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
     ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].closeBar
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].closeBar)
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].arrowPosition,
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].arrowPosition),
     style: arrowstyle,
     "data-id": "".concat(dataId, "_arrow"),
     "data-test-id": "".concat(dataId, "_arrow"),
     "data-selector-id": "".concat(dataSelectorId, "_arrow")
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].arrowShape
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].arrowShape)
   })), children));
 }
 

package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

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

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

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

package/lib/DropDown/DropDown.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownModule = _interopRequireDefault(require("./DropDown.module.css"));
 
 var _PopOver = _interopRequireWildcard(require("../PopOver/PopOver"));
@@ -154,7 +156,7 @@ var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
           children = _this$props.children,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DropDownModule["default"].listGroup,
+        className: (0, _cssUtility.cn)(_DropDownModule["default"].listGroup),
         onScroll: this.onScroll,
         ref: this.getRef,
         "data-id": dataId,

package/lib/DropDown/DropDownHeading.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownHeadingModule = _interopRequireDefault(require("./DropDownHeading.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -66,7 +68,7 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
           ariaLabelledby = a11y.ariaLabelledby,
           ariaLabel = a11y.ariaLabel;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass)),
         "data-title": title,
         role: role,
         "aria-labelledby": ariaLabelledby,

package/lib/DropDown/DropDownItem.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownItemModule = _interopRequireDefault(require("./DropDownItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -101,20 +103,20 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
           _this$props4$customCl = _this$props4.customClass,
           customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownItemModule["default"].list, "  ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : '', " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownItemModule["default"].list, "  ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : '', " ").concat(customClass)),
         onClick: this.onClick,
         onMouseOver: this.onHover,
         ref: this.getRef,
         "data-id": dataId,
         "data-test-id": dataId
       }, children && children[0] ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].children
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].children)
       }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].children
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].children)
       }, " ", children, " ") : null, value ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].value
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].value)
       }, value) : '', children && children[1] ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].user
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].user)
       }, " ", children[1], " ") : '');
     }
   }]);

package/lib/DropDown/DropDownSearch.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownSearchModule = _interopRequireDefault(require("./DropDownSearch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -90,7 +92,7 @@ var DropDownSearch = /*#__PURE__*/function (_React$Component) {
           _customClass$customTe = customClass.customTextBox,
           customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass)),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {

package/lib/DropDown/DropDownSeparator.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownSeparatorModule = _interopRequireDefault(require("./DropDownSeparator.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -52,7 +54,7 @@ var DropDownSeparator = /*#__PURE__*/function (_React$Component) {
       var _this$props$customCla = this.props.customClass,
           customClass = _this$props$customCla === void 0 ? '' : _this$props$customCla;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass)
+        className: (0, _cssUtility.cn)("".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass))
       });
     }
   }]);

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

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

package/lib/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap

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

package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap

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

package/lib/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

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

package/lib/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap

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

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 <DocumentFragment>

package/lib/Label/Label.js

@@ -17,6 +17,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
@@ -82,7 +84,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
       var tabIndex = a11y.tabIndex;
 
       var labelElement = /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass)),
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,

package/lib/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 rendering the Id 1`] = `
 <DocumentFragment>

package/lib/ListItem/ListItemWithAvatar.js

@@ -25,6 +25,8 @@ var _icons = require("@zohodesk/icons");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -181,7 +183,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].contentWrapper
       }, name || imgSrc ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListItemModule["default"].leftAvatar)
+        className: (0, _cssUtility.cn)("".concat(_ListItemModule["default"].leftAvatar))
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
         className: "".concat(_ListItemModule["default"].lhsBoxInner, " ").concat(_ListItemModule["default"].alignLhsBox_center)

package/lib/ListItem/ListItemWithCheckBox.js

@@ -21,6 +21,8 @@ var _Layout = require("../Layout");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -163,7 +165,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].contentWrapper
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
+        className: (0, _cssUtility.cn)("".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)])),
         "data-id": iconBoxDataId,
         "data-test-id": iconBoxDataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/ListItem/ListItemWithIcon.js

@@ -21,6 +21,8 @@ var _propTypes = require("./props/propTypes");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -171,7 +173,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_ListItemModule["default"].contentWrapper, " ").concat(!iconName && lhsAlignContent !== 'start' ? _ListItemModule["default"]["alignLhsBox_".concat(lhsAlignContent)] : '')
       }, iconName && /*#__PURE__*/_react["default"].createElement("div", {
         "aria-hidden": true,
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
+        className: (0, _cssUtility.cn)("".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)])),
         "data-id": iconBoxDataId,
         "data-test-id": iconBoxDataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -182,7 +184,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         name: iconName,
         size: iconSize
       }))), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: iconClass
+        className: (0, _cssUtility.cn)(iconClass)
       }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)

package/lib/ListItem/ListItemWithRadio.js

@@ -21,6 +21,8 @@ var _propTypes = require("./props/propTypes");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -164,7 +166,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].contentWrapper
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
+        className: (0, _cssUtility.cn)("".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)])),
         "data-id": iconBoxDataId,
         "data-test-id": iconBoxDataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListContainer ListContainer with Align Base Line 1`] = `
 <DocumentFragment>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>

package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>

package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>

package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>

package/lib/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap

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

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

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

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -45,6 +45,8 @@ var _Common = require("./../utils/Common");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common2 = require("../utils/Common.js");
@@ -1019,7 +1021,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
       var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '')),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -1052,7 +1054,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              "))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -1147,7 +1149,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: groupId
           }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _MultiSelectModule["default"].groupTitle
+            className: (0, _cssUtility.cn)(_MultiSelectModule["default"].groupTitle)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             a11y: {
@@ -1179,11 +1181,11 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
         }), isNextOptions && /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)), getFooter ? isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : null)));
       }) : null);
     }

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -43,6 +43,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
@@ -505,7 +507,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var isEditable = !(isReadOnly || isDisabled);
       var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass)),
         "data-id": dataIdMultiSelectComp,
         "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
@@ -536,7 +538,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         shrink: true,
         dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              "))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,

package/lib/MultiSelect/EmptyState.js

@@ -17,6 +17,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _constants = require("./constants");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,13 +84,13 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'alert' : _a11y$role;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_Loading"),
         "data-test-id": "".concat(dataId, "_Loading"),
         role: role,
         id: htmlId
       }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_srchEmptyMsg"),
         "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
@@ -100,7 +102,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         htmlId: htmlId,
         className: className
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_noOptnsMsg"),
         "data-test-id": "".concat(dataId, "_noOptnsMsg"),
         role: role,
@@ -112,7 +114,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         htmlId: htmlId,
         className: className
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
         "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),
         role: role,

package/lib/MultiSelect/MobileHeader/MobileHeader.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MobileHeaderModule = _interopRequireDefault(require("./MobileHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -32,7 +34,7 @@ function MobileHeader(props) {
       mobileHeaderText = i18nText.mobileHeaderText;
   var showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _MobileHeaderModule["default"].container
+    className: (0, _cssUtility.cn)(_MobileHeaderModule["default"].container)
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     isCover: false,
     align: "vertical",

package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap

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

package/lib/MultiSelect/MultiSelect.js

@@ -45,6 +45,8 @@ var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobile
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
@@ -1073,7 +1075,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n          ").concat(customChildrenClass ? customChildrenClass : '')
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n          ").concat(customChildrenClass ? customChildrenClass : ''))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -1203,7 +1205,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var SuggestionsProps = customProps.SuggestionsProps;
       var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '')),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -1245,7 +1247,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         i18nKeys: i18nKeys,
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"].effect
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"].effect)
       }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
@@ -1259,7 +1261,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         customClass: !isModel && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"][palette]
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"][palette])
       }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         a11y: a11yProps,
         needBorder: false,