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

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/Stencils/Stencils.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _StencilsModule = _interopRequireDefault(require("./Stencils.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Stencils = /*#__PURE__*/function (_React$PureComponent) {
           isAnimated = _this$props.isAnimated;
       size = shape === 'rect' ? _StencilsModule["default"][size] : _StencilsModule["default"]["size_".concat(size)];
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass)
+        className: (0, _cssUtility.cn)("".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass))
       });
     }
   }]);

package/lib/Switch/Switch.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -114,7 +116,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "checkbox",
         id: id,
-        className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+        className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
         name: name,
         value: value,
         checked: checked,
@@ -125,7 +127,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+        className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
         tabIndex: isReadOnly || disabled ? '-1' : '0'
       })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,

package/lib/Tab/Tabs.js

@@ -27,6 +27,8 @@ var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
@@ -538,11 +540,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function renderEmptyState() {
       var searchErrorText = this.props.searchErrorText;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TabsModule["default"].emptyStateContainer
+        className: (0, _cssUtility.cn)(_TabsModule["default"].emptyStateContainer)
       }, /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
         size: "small"
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TabsModule["default"].emptyStateTitle
+        className: (0, _cssUtility.cn)(_TabsModule["default"].emptyStateTitle)
       }, searchErrorText));
     }
   }, {
@@ -766,7 +768,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, this.renderTabs(children, [], true)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
       }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
-        className: hlClass,
+        className: (0, _cssUtility.cn)(hlClass),
         ref: this.getHighlightRef,
         "data-id": dataId,
         "data-test-id": dataId

package/lib/Tag/Tag.js

@@ -25,6 +25,8 @@ var _Button = _interopRequireDefault(require("../semantic/Button/Button"));
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagModule = _interopRequireDefault(require("./Tag.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -164,7 +166,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
       var isDarkPalette = palette === 'dark';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag)),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         onClick: this.handleSelect,
@@ -174,7 +176,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         "aria-labelledby": getAriaId,
         "data-selector-id": dataSelectorId
       }, customAttributes), (0, _utils.renderNode)(renderLeftChildren), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TagModule["default"].avatar
+        className: (0, _cssUtility.cn)(_TagModule["default"].avatar)
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         palette: isDarkPalette ? 'info' : avatarPalette,
         name: initial,
@@ -183,13 +185,13 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         textPalette: isDarkPalette ? 'white' : '',
         customClass: customAvatar
       }, avatarProps))) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].icon, " ").concat(customTagIcon)),
         "aria-hidden": true
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, _extends({
         name: iconName,
         size: iconSize
       }, iconProps))) : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].text, " ").concat(textSizes),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].text, " ").concat(textSizes)),
         "aria-hidden": true,
         id: getAriaId
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/lib/TextBox/TextBox.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextBoxModule = _interopRequireDefault(require("./TextBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -194,7 +196,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
         "aria-activedescendant": ariaActivedescendant,
         "aria-readonly": ariaReadonly,
         "aria-multiselectable": ariaMultiselectable,
-        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(isScrollPrevent ? _TextBoxModule["default"].inputDotted : '', " ").concat(customClass ? customClass : ''),
+        className: (0, _cssUtility.cn)("".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(isScrollPrevent ? _TextBoxModule["default"].inputDotted : '', " ").concat(customClass ? customClass : '')),
         "data-id": "".concat(dataId),
         "data-test-id": "".concat(dataId),
         "data-selector-id": dataSelectorId,

package/lib/Textarea/Textarea.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -133,7 +135,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
-        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass, " "),
+        className: (0, _cssUtility.cn)("".concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass, " ")),
         placeholder: placeHolder
       }, options, {
         "data-id": dataId,

package/lib/Tooltip/Tooltip.js

@@ -21,6 +21,8 @@ var _selectn = _interopRequireDefault(require("selectn"));
 
 var _cssUtils = require("../utils/cssUtils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -558,7 +560,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
       var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TooltipModule["default"].tooltiptext, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_TooltipModule["default"].tooltiptext, " ").concat(customClass)),
         style: {
           left: left,
           top: top,
@@ -568,18 +570,18 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         "data-id": dataId,
         "data-test-id": dataId
       }, !dataTooltipnoArrow ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle),
+        className: (0, _cssUtility.cn)("".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle)),
         style: {
           left: arrowLeft,
           top: arrowTop
         }
       }) : null, isHtml ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: tooltipCss,
+        className: (0, _cssUtility.cn)(tooltipCss),
         dangerouslySetInnerHTML: {
           __html: title
         }
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: tooltipCss
+        className: (0, _cssUtility.cn)(tooltipCss)
       }, title)) : null;
     }
   }]);

package/lib/deprecated/Switch/Switch.js

@@ -15,6 +15,8 @@ var _Layout = require("../../v1/Layout");
 
 var _Label = _interopRequireDefault(require("../../v1/Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,7 +74,7 @@ var Switch = function Switch(props) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     id: id,
-    className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
     name: name,
     value: value,
     checked: checked,
@@ -83,7 +85,7 @@ var Switch = function Switch(props) {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
     tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
     text: text,

package/lib/semantic/Button/Button.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("./semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,7 +73,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           ariaControls = a11y.ariaControls,
           ariaLabelledby = a11y.ariaLabelledby;
       return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass)),
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHaspopup,
         "aria-expanded": ariaExpanded,

package/lib/v1/Button/Button.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
@@ -222,7 +224,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
   return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
-    className: buttonClassName,
+    className: (0, _cssUtility.cn)(buttonClassName),
     "aria-busy": isLoading,
     "aria-disabled": isDisabledState,
     "aria-readonly": isReadOnly,

package/lib/v1/Switch/Switch.js

@@ -23,6 +23,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _Label = _interopRequireDefault(require("../../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Switch_v1Module = _interopRequireDefault(require("./css/Switch_v1.module.css"));
 
 var _excluded = ["ariaDisabled", "ariaLabel"];
@@ -127,20 +129,20 @@ var Switch = function Switch(props) {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: (0, _cssUtility.cn)(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/_react["default"].createElement("svg", {
-    className: thumbClass,
+    className: (0, _cssUtility.cn)(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: _contants.THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
-    className: labelIndicationClass,
+    className: (0, _cssUtility.cn)(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
     width: "100%",

package/lib/v1/shared/Loader/Loader.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,17 +22,17 @@ var Loader = function Loader(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _Loader_v1Module["default"].spinnerTrack,
+    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _Loader_v1Module["default"].spinnerHead,
+    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"

package/lib/v1/shared/SuccessTick/SuccessTick.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SuccessTick_v1Module = _interopRequireDefault(require("./SuccessTick_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,7 +22,7 @@ var SuccessTick = function SuccessTick(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.22-exp-1",
+  "version": "1.6.23-exp-2",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,