@zohodesk/components 1.6.23 → 1.6.25

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -41,6 +41,8 @@ var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
 var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader/MobileHeader"));
@@ -181,7 +183,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
       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,
@@ -221,7 +223,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         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,

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
@@ -185,7 +185,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="7"
+          aria-labelledby="3"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -196,7 +196,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="7"
+            id="3"
           >
             text1
           </div>
@@ -233,7 +233,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="8"
+          aria-labelledby="4"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -244,7 +244,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="8"
+            id="4"
           >
             text2
           </div>
@@ -281,7 +281,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="9"
+          aria-labelledby="5"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -292,7 +292,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="9"
+            id="5"
           >
             text3
           </div>

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

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

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

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

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

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

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

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

package/lib/PopOver/PopOver.js

@@ -19,6 +19,8 @@ var _Layout = require("../Layout");
 
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _PopOverModule = _interopRequireDefault(require("./PopOver.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -151,7 +153,7 @@ var PopOver = /*#__PURE__*/function (_React$Component) {
       });
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _PopOverModule["default"].popup
+        className: (0, _cssUtility.cn)(_PopOverModule["default"].popup)
       }, childrens);
     }
   }]);
@@ -194,7 +196,7 @@ var PopOverTarget = /*#__PURE__*/function (_React$Component2) {
           children = _this$props4.children,
           togglePopup = _this$props4.togglePopup;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _PopOverModule["default"].target,
+        className: (0, _cssUtility.cn)(_PopOverModule["default"].target),
         onClick: togglePopup,
         ref: this.getRef
       }, children);

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

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

package/lib/Radio/Radio.js

@@ -21,6 +21,8 @@ var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -158,7 +160,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         name: name,
         value: value
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_RadioModule["default"].radioLabel, " ").concat(accessMode)
+        className: (0, _cssUtility.cn)("".concat(_RadioModule["default"].radioLabel, " ").concat(accessMode))
       }, /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 40 40"
@@ -166,12 +168,12 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         cx: "20",
         cy: "20",
         r: "19",
-        className: "".concat(_RadioModule["default"].rdBox)
+        className: (0, _cssUtility.cn)("".concat(_RadioModule["default"].rdBox))
       }), checked ? /*#__PURE__*/_react["default"].createElement("circle", {
         cx: "20",
         cy: "20",
         r: "11.03",
-        className: "".concat(_RadioModule["default"].centerPath)
+        className: (0, _cssUtility.cn)("".concat(_RadioModule["default"].centerPath))
       }) : null))), (text || secondaryText) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _RadioModule["default"].labelContainer

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

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

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

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

package/lib/Ribbon/Ribbon.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _RibbonModule = _interopRequireDefault(require("./Ribbon.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -61,18 +63,18 @@ var Ribbon = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props.customClass,
           dataSelectorId = _this$props.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_RibbonModule["default"].basic, " ").concat(type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? "".concat(_RibbonModule["default"]["plain_".concat(palette)], " \n                 ").concat(type === 'box' ? _RibbonModule["default"]["box_".concat(palette)] : '', " ").concat(type === 'stamp' ? _RibbonModule["default"]["stamp_".concat(palette)] : '') : "".concat(_RibbonModule["default"]["palette_".concat(palette)], " ").concat(type === 'default' ? _RibbonModule["default"]["default_".concat(palette)] : '') : '', " ").concat(_RibbonModule["default"][size], " ").concat(_RibbonModule["default"][type], " ").concat(customClass, " "),
+        className: (0, _cssUtility.cn)("".concat(_RibbonModule["default"].basic, " ").concat(type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? "".concat(_RibbonModule["default"]["plain_".concat(palette)], " \n                 ").concat(type === 'box' ? _RibbonModule["default"]["box_".concat(palette)] : '', " ").concat(type === 'stamp' ? _RibbonModule["default"]["stamp_".concat(palette)] : '') : "".concat(_RibbonModule["default"]["palette_".concat(palette)], " ").concat(type === 'default' ? _RibbonModule["default"]["default_".concat(palette)] : '') : '', " ").concat(_RibbonModule["default"][size], " ").concat(_RibbonModule["default"][type], " ").concat(customClass, " ")),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].after
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].after)
       }) : null, children ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].children
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].children)
       }, children) : null, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].childText
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].childText)
       }, text), type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].before
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].before)
       }) : null);
     }
   }]);

package/lib/Ribbon/__tests__/__snapshots__/Ribbon.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 children  1`] = `
 <DocumentFragment>

package/lib/RippleEffect/RippleEffect.js

@@ -33,7 +33,7 @@ function RippleEffect(props) {
 
   var child = _react["default"].Children.only(children);
 
-  return /*#__PURE__*/_react["default"].cloneElement(child, _defineProperty({}, cssClassPropOfChild, "".concat(child.props[cssClassPropOfChild] || '', " ").concat(className)));
+  return /*#__PURE__*/_react["default"].cloneElement(child, _defineProperty({}, cssClassPropOfChild, "".concat(className, " ").concat(child.props[cssClassPropOfChild] || '')));
 }
 
 RippleEffect.defaultProps = _defaultProps.defaultProps;

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RippleEffect rendering hoverType of- bg 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border bgHover  hoverEffect "
+    class="effect default border bgHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -13,7 +13,7 @@ exports[`RippleEffect rendering hoverType of- bg 1`] = `
 exports[`RippleEffect rendering hoverType of- border 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border borderHover  hoverEffect "
+    class="effect default border borderHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -23,7 +23,7 @@ exports[`RippleEffect rendering hoverType of- border 1`] = `
 exports[`RippleEffect rendering hoverType of- default 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -33,7 +33,7 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover active hoverEffect "
+    class="effect default border defaultHover active hoverEffect"
   >
     RippleEffect
   </div>
@@ -43,7 +43,7 @@ exports[`RippleEffect rendering isActive is true 1`] = `
 exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect notAllowed"
+    class="effect default border defaultHover hoverEffect notAllowed"
   >
     RippleEffect
   </div>
@@ -53,7 +53,7 @@ exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
 exports[`RippleEffect rendering isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover   disabled"
+    class="effect default border defaultHover disabled"
   >
     RippleEffect
   </div>
@@ -63,7 +63,7 @@ exports[`RippleEffect rendering isDisabled is true 1`] = `
 exports[`RippleEffect rendering isNeedEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class=" "
+    class=""
   >
     RippleEffect
   </div>
@@ -73,7 +73,7 @@ exports[`RippleEffect rendering isNeedEffect is false 1`] = `
 exports[`RippleEffect rendering needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default  defaultHover  hoverEffect "
+    class="effect default defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -83,7 +83,7 @@ exports[`RippleEffect rendering needBorder is false 1`] = `
 exports[`RippleEffect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -93,7 +93,7 @@ exports[`RippleEffect rendering the defult props 1`] = `
 exports[`RippleEffect rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <div
-    class=" effect danger border defaultHover  hoverEffect "
+    class="effect danger border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -103,7 +103,7 @@ exports[`RippleEffect rendering the palette of- danger 1`] = `
 exports[`RippleEffect rendering the palette of- default 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -113,7 +113,7 @@ exports[`RippleEffect rendering the palette of- default 1`] = `
 exports[`RippleEffect rendering the palette of- green 1`] = `
 <DocumentFragment>
   <div
-    class=" effect green border defaultHover  hoverEffect "
+    class="effect green border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -123,7 +123,7 @@ exports[`RippleEffect rendering the palette of- green 1`] = `
 exports[`RippleEffect rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primary border defaultHover  hoverEffect "
+    class="effect primary border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -133,7 +133,7 @@ exports[`RippleEffect rendering the palette of- primary 1`] = `
 exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryDark border defaultHover  hoverEffect "
+    class="effect primaryDark border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -143,7 +143,7 @@ exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
 exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryFilled border defaultHover  hoverEffect "
+    class="effect primaryFilled border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -153,7 +153,7 @@ exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
 exports[`RippleEffect rendering the palette of- primaryLight 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryLight border defaultHover  hoverEffect "
+    class="effect primaryLight border defaultHover hoverEffect"
   >
     RippleEffect
   </div>

package/lib/Select/GroupSelect.js

@@ -39,6 +39,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/Re
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 var _dropDownUtils = require("../utils/dropDownUtils");
@@ -711,13 +713,13 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
+        className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : '')),
         "data-id": dataIdSlctComp,
         "data-test-id": dataIdSlctComp,
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -824,7 +826,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           customClass: _SelectModule["default"].box,
           onScroll: _this7.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           inputRef: _this7.searchInputRef,
           maxLength: maxLength,
@@ -853,7 +855,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: groupId
           }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].groupTitle
+            className: (0, _cssUtility.cn)(_SelectModule["default"].groupTitle)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             a11y: {

package/lib/Select/Select.js

@@ -45,6 +45,8 @@ var _Common = require("../utils/Common.js");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -906,11 +908,11 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         inputFieldLineA11y: inputFieldLineA11y
       });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
+        className: (0, _cssUtility.cn)("".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1079,7 +1081,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           onScroll: _this7.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           a11y: {
             ariaControls: setAriaId,

package/lib/Select/SelectWithAvatar.js

@@ -41,6 +41,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/MultiSelect.module.css"));
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
@@ -256,7 +258,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       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(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : '')),
         "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,
@@ -348,7 +350,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           onScroll: _this2.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
           inputRef: _this2.searchInputRef,
           maxLength: maxLength,
@@ -370,7 +372,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           customClass: "".concat(!tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
           eleRef: _this2.suggestionContainerRef
         }, groupName ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].title
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].title)
         }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
           text: groupName,
           a11y: {

package/lib/Select/SelectWithIcon.js

@@ -39,6 +39,8 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils.js");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -460,11 +462,11 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
+        className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -567,7 +569,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             role: 'listbox'
           }
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           onClear: _this5.onSearchClear,
           onChange: _this5.onSearch,

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

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