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

package/es/ListItem/ListItemWithIcon.js

@@ -12,6 +12,7 @@ import { ListItemWithIcon_Props } from "./props/propTypes";
 import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithIcon extends React.Component {
   constructor(props) {
@@ -122,7 +123,7 @@ export default class ListItemWithIcon extends React.Component {
       className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
     }, iconName && /*#__PURE__*/React.createElement("div", {
       "aria-hidden": true,
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {
@@ -133,7 +134,7 @@ export default class ListItemWithIcon extends React.Component {
       name: iconName,
       size: iconSize
     }))), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
-      className: iconClass
+      className: cn(iconClass)
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`

package/es/ListItem/ListItemWithRadio.js

@@ -7,6 +7,7 @@ import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -106,7 +107,7 @@ export default class ListItemWithRadio extends React.Component {
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.contentWrapper
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -27,6 +27,7 @@ import { DUMMY_OBJECT } from "./../utils/Common";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -922,7 +923,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
     const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -955,8 +956,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              `
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -1052,7 +1053,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: groupId
       }, groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupTitle
+        className: cn(style.groupTitle)
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: groupName,
         a11y: {
@@ -1084,11 +1085,11 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
     }), isNextOptions && /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)) : null)))) : null);
   }
 

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -23,6 +23,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -436,7 +437,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const isEditable = !(isReadOnly || isDisabled);
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`),
       "data-id": dataIdMultiSelectComp,
       "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
@@ -467,8 +468,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       shrink: true,
       dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              `
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,

package/es/MultiSelect/EmptyState.js

@@ -6,6 +6,7 @@ import { EmptyState_defaultProps } from "./props/defaultProps";
 import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 export default class EmptyState extends React.PureComponent {
   render() {
@@ -36,13 +37,13 @@ export default class EmptyState extends React.PureComponent {
       role = 'alert'
     } = a11y;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_Loading`,
       "data-test-id": `${dataId}_Loading`,
       role: role,
       id: htmlId
     }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_srchEmptyMsg`,
       "data-test-id": `${dataId}_srchEmptyMsg`,
       role: role,
@@ -54,7 +55,7 @@ export default class EmptyState extends React.PureComponent {
       htmlId,
       className
     }) : /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_noOptnsMsg`,
       "data-test-id": `${dataId}_noOptnsMsg`,
       role: role,
@@ -66,7 +67,7 @@ export default class EmptyState extends React.PureComponent {
       htmlId,
       className
     }) : /*#__PURE__*/React.createElement("div", {
-      className: className,
+      className: cn(className),
       "data-id": `${dataId}_NoMoreOptionMsg`,
       "data-test-id": `${dataId}_NoMoreOptionMsg`,
       role: role,

package/es/MultiSelect/MobileHeader/MobileHeader.js

@@ -3,6 +3,7 @@ import Button from "../../Button/Button";
 import { Container, Box } from "../../Layout";
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./MobileHeader.module.css";
 export default function MobileHeader(props) {
   let {
@@ -21,7 +22,7 @@ export default function MobileHeader(props) {
   } = i18nText;
   const showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
   return /*#__PURE__*/React.createElement("div", {
-    className: style.container
+    className: cn(style.container)
   }, /*#__PURE__*/React.createElement(Container, {
     isCover: false,
     align: "vertical",

package/es/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ import isMobilePopover from "../DropBox/utils/isMobilePopover";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -988,8 +989,8 @@ export class MultiSelectComponent extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-          ${customChildrenClass ? customChildrenClass : ''}`
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+          ${customChildrenClass ? customChildrenClass : ''}`)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -1121,7 +1122,7 @@ export class MultiSelectComponent extends React.Component {
     } = customProps;
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -1163,7 +1164,7 @@ export class MultiSelectComponent extends React.Component {
       i18nKeys: i18nKeys,
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
+      className: cn(style.effect)
     }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,
@@ -1177,7 +1178,7 @@ export class MultiSelectComponent extends React.Component {
       customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
-      className: style[palette]
+      className: cn(style[palette])
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       a11y: a11yProps,
       needBorder: false,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -23,6 +23,7 @@ import MultiSelectHeader from "./MultiSelectHeader";
 import isMobilePopover from "../DropBox/utils/isMobilePopover";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 import MobileHeader from "./MobileHeader/MobileHeader";
 /*eslint-disable  react/sort-prop-types*/
@@ -127,7 +128,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     let isModel = isMobilePopover(needResponsive);
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -167,7 +168,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       i18nKeys: i18nKeys,
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
+      className: cn(style.effect)
     }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,

package/es/PopOver/PopOver.js

@@ -4,6 +4,7 @@ import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes
 import Popup from "../Popup/Popup";
 import { Box } from "../Layout";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { cn } from "@dot-system/css-utility";
 import style from "./PopOver.module.css";
 
 class PopOver extends React.Component {
@@ -102,7 +103,7 @@ class PopOver extends React.Component {
       return element;
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: style.popup
+      className: cn(style.popup)
     }, childrens);
   }
 
@@ -130,7 +131,7 @@ export class PopOverTarget extends React.Component {
       togglePopup
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.target,
+      className: cn(style.target),
       onClick: togglePopup,
       ref: this.getRef
     }, children);

package/es/Radio/Radio.js

@@ -8,6 +8,7 @@ import Label from "../Label/Label";
 import Typography from "../Typography/Typography";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./Radio.module.css";
 export default class Radio extends React.Component {
   constructor(props) {
@@ -107,7 +108,7 @@ export default class Radio extends React.Component {
       name: name,
       value: value
     }), /*#__PURE__*/React.createElement("label", {
-      className: `${style.radioLabel} ${accessMode}`
+      className: cn(`${style.radioLabel} ${accessMode}`)
     }, /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 40 40"
@@ -115,12 +116,12 @@ export default class Radio extends React.Component {
       cx: "20",
       cy: "20",
       r: "19",
-      className: `${style.rdBox}`
+      className: cn(`${style.rdBox}`)
     }), checked ? /*#__PURE__*/React.createElement("circle", {
       cx: "20",
       cy: "20",
       r: "11.03",
-      className: `${style.centerPath}`
+      className: cn(`${style.centerPath}`)
     }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.labelContainer

package/es/Ribbon/Ribbon.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [default, flag, plain, ribbon, box, stamp, sticker, small, medium, large, xlarge, palette_default, palette_danger, palette_primary, palette_secondary, palette_info, palette_dark, plain_default, plain_danger, plain_primary, plain_secondary, plain_info, plain_dark, tag] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Ribbon.module.css";
 export default class Ribbon extends React.Component {
   render() {
@@ -17,19 +18,19 @@ export default class Ribbon extends React.Component {
       dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.basic} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
-                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]} ${customClass} `,
+      className: cn(`${style.basic} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
+                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]} ${customClass} `),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.after
+      className: cn(style.after)
     }) : null, children ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, children) : null, /*#__PURE__*/React.createElement("span", {
-      className: style.childText
+      className: cn(style.childText)
     }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.before
+      className: cn(style.before)
     }) : null);
   }
 

package/es/Select/GroupSelect.js

@@ -19,6 +19,7 @@ import { Container, Box } from "../Layout";
 import { getUniqueId } from "../Provider/IdProvider";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 /**** Methods ****/
 
@@ -634,13 +635,13 @@ export class GroupSelectComponent extends PureComponent {
     } = customClass;
     const isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: cn(`${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`),
       "data-id": dataIdSlctComp,
       "data-test-id": dataIdSlctComp,
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
+      className: cn(`${className ? className : ''}`),
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -747,7 +748,7 @@ export class GroupSelectComponent extends PureComponent {
       customClass: style.box,
       onScroll: this.handleScroll
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
+      className: cn(`${style.search} ${style[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       inputRef: this.searchInputRef,
       maxLength: maxLength,
@@ -778,7 +779,7 @@ export class GroupSelectComponent extends PureComponent {
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: groupId
       }, groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupTitle
+        className: cn(style.groupTitle)
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: groupName,
         a11y: {

package/es/Select/Select.js

@@ -26,6 +26,7 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
 import { isRenderable, renderNode } from '@zohodesk/utils';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 /* eslint-disable react/no-deprecated */
 
@@ -855,11 +856,11 @@ export class SelectComponent extends Component {
       inputFieldLineA11y
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: cn(`${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
+      className: cn(`${className ? className : ''}`),
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1030,7 +1031,7 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Card, {
       onScroll: this.handleScroll
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
+      className: cn(`${style.search} ${style[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
         ariaControls: setAriaId,

package/es/Select/SelectWithAvatar.js

@@ -22,6 +22,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../MultiSelect/MultiSelect.module.css";
 import selectStyle from "./Select.module.css";
 
@@ -207,7 +208,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = customClass;
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
+      className: cn(`${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -299,7 +300,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, /*#__PURE__*/React.createElement(Card, {
       onScroll: this.handleScroll
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${selectStyle.search} ${selectStyle[size]}`
+      className: cn(`${selectStyle.search} ${selectStyle[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       inputRef: this.searchInputRef,
       maxLength: maxLength,
@@ -321,7 +322,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
       eleRef: this.suggestionContainerRef
     }, groupName ? /*#__PURE__*/React.createElement("div", {
-      className: style.title
+      className: cn(style.title)
     }, /*#__PURE__*/React.createElement(DropDownHeading, {
       text: groupName,
       a11y: {

package/es/Select/SelectWithIcon.js

@@ -22,6 +22,7 @@ import { scrollTo, findScrollEnd, getSearchString } from "../utils/Common.js";
 import { isObjectContainsSearchString } from "../utils/dropDownUtils.js";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 
 class SelectWithIcon extends Component {
@@ -386,11 +387,11 @@ class SelectWithIcon extends Component {
     } = customClass;
     const isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: cn(`${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
+      className: cn(`${className ? className : ''}`),
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -494,7 +495,7 @@ class SelectWithIcon extends Component {
         role: 'listbox'
       }
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
+      className: cn(`${style.search} ${style[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       onClear: this.onSearchClear,
       onChange: this.onSearch,

package/es/Stencils/Stencils.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Stencils.module.css";
 export default class Stencils extends React.PureComponent {
   render() {
@@ -15,7 +16,7 @@ export default class Stencils extends React.PureComponent {
     } = this.props;
     size = shape === 'rect' ? style[size] : style[`size_${size}`];
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`
+      className: cn(`${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`)
     });
   }
 

package/es/Switch/Switch.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../Layout";
 import Label from "../Label/Label";
+import { cn } from "@dot-system/css-utility";
 import style from "./Switch.module.css";
 export default class Switch extends React.Component {
   constructor(props) {
@@ -65,7 +66,7 @@ export default class Switch extends React.Component {
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       id: id,
-      className: `${style.input} ${checked ? style.checked : ''}`,
+      className: cn(`${style.input} ${checked ? style.checked : ''}`),
       name: name,
       value: value,
       checked: checked,
@@ -76,7 +77,7 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+      className: cn(`${style.label} ${style[`${size}Label`]} ${customSwitch}`),
       tabIndex: isReadOnly || disabled ? '-1' : '0'
     })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,

package/es/Tab/Tabs.js

@@ -19,6 +19,7 @@ import { Box, Container } from "../Layout";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import ListItem from "../ListItem/ListItem";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import tabsStyle from "./Tabs.module.css";
 import Popup from "../Popup/Popup";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
@@ -472,11 +473,11 @@ class Tabs extends React.Component {
       searchErrorText
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateContainer
+      className: cn(tabsStyle.emptyStateContainer)
     }, /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     }), /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateTitle
+      className: cn(tabsStyle.emptyStateTitle)
     }, searchErrorText));
   }
 
@@ -699,7 +700,7 @@ class Tabs extends React.Component {
     }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
     }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: hlClass,
+      className: cn(hlClass),
       ref: this.getHighlightRef,
       "data-id": dataId,
       "data-test-id": dataId

package/es/Tag/Tag.js

@@ -9,6 +9,7 @@ import Avatar from "../Avatar/Avatar";
 import { Container } from "../Layout";
 import Button from "../semantic/Button/Button";
 import { getUniqueId } from "../Provider/IdProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
@@ -108,7 +109,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: cn(`${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`),
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
@@ -118,7 +119,7 @@ export default class Tag extends PureComponent {
       "aria-labelledby": getAriaId,
       "data-selector-id": dataSelectorId
     }, customAttributes), renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
+      className: cn(style.avatar)
     }, /*#__PURE__*/React.createElement(Avatar, _extends({
       palette: isDarkPalette ? 'info' : avatarPalette,
       name: initial,
@@ -127,13 +128,13 @@ export default class Tag extends PureComponent {
       textPalette: isDarkPalette ? 'white' : '',
       customClass: customAvatar
     }, avatarProps))) : null, iconName ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.icon} ${customTagIcon}`,
+      className: cn(`${style.icon} ${customTagIcon}`),
       "aria-hidden": true
     }, /*#__PURE__*/React.createElement(Icon, _extends({
       name: iconName,
       size: iconSize
     }, iconProps))) : null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.text} ${textSizes}`,
+      className: cn(`${style.text} ${textSizes}`),
       "aria-hidden": true,
       id: getAriaId
     }, text), onRemove && /*#__PURE__*/React.createElement(Button, {

package/es/TextBox/TextBox.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./TextBox.module.css";
 export default class TextBox extends React.PureComponent {
   constructor(props) {
@@ -154,7 +155,7 @@ export default class TextBox extends React.PureComponent {
       "aria-activedescendant": ariaActivedescendant,
       "aria-readonly": ariaReadonly,
       "aria-multiselectable": ariaMultiselectable,
-      className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${isScrollPrevent ? style.inputDotted : ''} ${customClass ? customClass : ''}`,
+      className: cn(`${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${isScrollPrevent ? style.inputDotted : ''} ${customClass ? customClass : ''}`),
       "data-id": `${dataId}`,
       "data-test-id": `${dataId}`,
       "data-selector-id": dataSelectorId,