@zohodesk/components 1.6.22-exp-1 → 1.6.23-exp-2

package/lib/DropBox/DropBox.js

@@ -27,6 +27,8 @@ var _Common = require("./../utils/Common");
 
 var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxModule = _interopRequireDefault(require("./css/DropBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -100,13 +102,13 @@ function DropBox(props) {
   return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
+    className: (0, _cssUtility.cn)("".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze)),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxModule["default"].freezeLayer,
+    className: (0, _cssUtility.cn)(_DropBoxModule["default"].freezeLayer),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;

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/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/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/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/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/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,

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