@zohodesk/components 1.6.23 → 1.6.24

package/es/DateTime/DateTime.js

@@ -12,6 +12,7 @@ import YearView from "./YearView";
 import DateTimePopupHeader from "./DateTimePopupHeader";
 import DateTimePopupFooter from "./DateTimePopupFooter";
 import Time from "./Time";
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 import { formatDate, getMonthEnd } from "../utils/datetime/common";
 import { getIsEmptyValue } from "../utils/Common";
@@ -684,7 +685,7 @@ export default class DateTime extends React.PureComponent {
     }
 
     const childEle = /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${innerClass}`,
+      className: cn(`${style.container} ${innerClass}`),
       "data-id": `${dataId}_Calendar`,
       "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
@@ -696,7 +697,7 @@ export default class DateTime extends React.PureComponent {
       nextMonthTitleText: nextMonthTitleText,
       onModifyCalendar: this.modifyCalendar
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.subContainer
+      className: cn(style.subContainer)
     }, /*#__PURE__*/React.createElement(CalendarView, {
       needBorder: isDateTimeField || needAction,
       dataId: dataId,
@@ -735,7 +736,7 @@ export default class DateTime extends React.PureComponent {
       onCancel: this.handleClear,
       dataId: dataId
     }) : null, isYearView ? /*#__PURE__*/React.createElement("div", {
-      className: style.yearContainer
+      className: cn(style.yearContainer)
     }, /*#__PURE__*/React.createElement(YearView, {
       onSelectYear: this.handleSelectYear,
       onSelectMonth: this.handleSelectMonthViaYearView,
@@ -746,7 +747,7 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: isMonthOpen
     })) : null), renderCustomFooter);
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.dropBox} ${className}`,
+      className: cn(`${style.dropBox} ${className}`),
       "data-id": `${dataId}_dateBoxContainer`,
       "data-test-id": `${dataId}_dateBoxContainer`
     }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({

package/es/DateTime/DateTimePopupFooter.js

@@ -10,6 +10,7 @@ import { Container } from "../Layout";
 import Button from "../Button/Button";
 /** ** CSS *** */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 export default class DateTimePopupFooter extends PureComponent {
   render() {
@@ -32,7 +33,7 @@ export default class DateTimePopupFooter extends PureComponent {
       onClick: onSubmit,
       dataId: `${dataId}_saveBtn`
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.space
+      className: cn(style.space)
     }), /*#__PURE__*/React.createElement(Button, {
       text: cancelText,
       size: "medium",

package/es/DateTime/DateWidget.js

@@ -13,6 +13,7 @@ import { Container } from "../Layout";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateWidget.module.css";
 /**** Methods ****/
 
@@ -1054,17 +1055,17 @@ class DateWidgetComponent extends React.Component {
     const showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
     const showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, children ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
-      className: `${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`
+      className: cn(`${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`)
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
-      className: ` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`,
+      className: cn(` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`),
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({

package/es/DateTime/Time.js

@@ -12,6 +12,7 @@ import { Container, Box } from "../Layout";
 import Select from "../Select/Select";
 /** ** CSS *** */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 export default class Time extends PureComponent {
   render() {
@@ -39,7 +40,7 @@ export default class Time extends PureComponent {
       AmPmSelectProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: style.text
+      className: cn(style.text)
     }, timeText), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical",

package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap

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

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

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

package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap

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

package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

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

package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

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

package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap

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

package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap

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

package/es/DropBox/DropBox.js

@@ -11,6 +11,7 @@ import { DropBoxDefaultProps } from "./props/defaultProps";
 import { DropBoxPropTypes } from "./props/propTypes";
 import { stopPropagation } from "./../utils/Common";
 import isMobilePopover from "./utils/isMobilePopover";
+import { cn } from "@dot-system/css-utility";
 import style from "./css/DropBox.module.css";
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
@@ -73,13 +74,13 @@ export default function DropBox(props) {
   return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: `${style.freezeLayer} ${style.freeze}`,
+    className: cn(`${style.freezeLayer} ${style.freeze}`),
     style: zIndexStyle,
     onClick: stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
-    className: style.freezeLayer,
+    className: cn(style.freezeLayer),
     style: zIndexStyle,
     onClick: stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -6,6 +6,7 @@ import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/util
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./css/DropBoxElement.module.css";
 export default function DropBoxElement(props) {
   let {
@@ -107,7 +108,7 @@ export default function DropBoxElement(props) {
     }
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: boxClassName,
+    className: cn(boxClassName),
     "data-id": `${dataId}`,
     "data-test-id": `${dataId}`,
     "data-selector-id": dataSelectorId,
@@ -127,22 +128,22 @@ export default function DropBoxElement(props) {
     "dot-ui-element": "dropbox"
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
-    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
+    className: cn(`${subContainerClass} ${style[`${palette}Palette`]}`),
     onClick: onClick,
     "data-id": `${dataId}_subcontainer`,
     "data-test-id": `${dataId}_subcontainer`,
     "data-selector-id": `${dataSelectorId}_subcontainer`,
     ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/React.createElement("div", {
-    className: style.closeBar
+    className: cn(style.closeBar)
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-    className: style.arrowPosition,
+    className: cn(style.arrowPosition),
     style: arrowstyle,
     "data-id": `${dataId}_arrow`,
     "data-test-id": `${dataId}_arrow`,
     "data-selector-id": `${dataSelectorId}_arrow`
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.arrowShape
+    className: cn(style.arrowShape)
   })), children));
 }
 DropBoxElement.propTypes = DropBoxElementPropTypes;

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

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

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

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

package/es/DropDown/DropDown.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
 import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDown.module.css";
 import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
@@ -62,7 +63,7 @@ export class DropDownItemContainer extends React.Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.listGroup,
+      className: cn(style.listGroup),
       onScroll: this.onScroll,
       ref: this.getRef,
       "data-id": dataId,

package/es/DropDown/DropDownHeading.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DropDownHeading_propTypes } from "./props/propTypes";
 import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownHeading.module.css";
 export default class DropDownHeading extends React.Component {
   render() {
@@ -21,7 +22,7 @@ export default class DropDownHeading extends React.Component {
       ariaLabel
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style[palette]} ${customClass}`,
+      className: cn(`${style[palette]} ${customClass}`),
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,

package/es/DropDown/DropDownItem.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DropDownItem_propTypes } from "./props/propTypes";
 import { DropDownItem_defaultProps } from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownItem.module.css";
 export default class DropDownItem extends React.Component {
   constructor(props) {
@@ -54,20 +55,20 @@ export default class DropDownItem extends React.Component {
       customClass = ''
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.list}  ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''} ${customClass}`,
+      className: cn(`${style.list}  ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''} ${customClass}`),
       onClick: this.onClick,
       onMouseOver: this.onHover,
       ref: this.getRef,
       "data-id": dataId,
       "data-test-id": dataId
     }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
-      className: style.value
+      className: cn(style.value)
     }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
-      className: style.user
+      className: cn(style.user)
     }, " ", children[1], " ") : '');
   }
 

package/es/DropDown/DropDownSearch.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { DropDownSearch_propTypes } from "./props/propTypes";
 import { DropDownSearch_defaultProps } from "./props/defaultProps";
 import TextBox from "../TextBox/TextBox";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownSearch.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
@@ -45,7 +46,7 @@ export default class DropDownSearch extends React.Component {
       customTextBox = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[`${size}Search`]} ${searchClass}`,
+      className: cn(`${style.search} ${style[`${size}Search`]} ${searchClass}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, /*#__PURE__*/React.createElement(TextBox, {

package/es/DropDown/DropDownSeparator.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DropDownSeparator_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownSeparator.module.css";
 export default class DropDownSeparator extends React.Component {
   render() {
@@ -7,7 +8,7 @@ export default class DropDownSeparator extends React.Component {
       customClass = ''
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.separator} ${customClass}`
+      className: cn(`${style.separator} ${customClass}`)
     });
   }
 

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

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

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

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

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

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

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

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

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

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

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

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

package/es/Label/Label.js

@@ -8,6 +8,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./Label.module.css";
 import colors from "./LabelColors.module.css";
 export default class Label extends React.Component {
@@ -38,8 +39,8 @@ export default class Label extends React.Component {
       tabIndex
     } = a11y;
     const labelElement = /*#__PURE__*/React.createElement("label", {
-      className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass}`,
+      className: cn(`${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass}`),
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,

package/es/Label/__tests__/__snapshots__/Label.spec.js.snap

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

package/es/ListItem/ListItemWithAvatar.js

@@ -16,6 +16,7 @@ import { Icon } from '@zohodesk/icons';
 import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithAvatar extends React.PureComponent {
   constructor(props) {
@@ -128,7 +129,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.contentWrapper
     }, name || imgSrc ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.leftAvatar}`
+      className: cn(`${style.leftAvatar}`)
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: `${style.lhsBoxInner} ${style.alignLhsBox_center}`

package/es/ListItem/ListItemWithCheckBox.js

@@ -7,6 +7,7 @@ import { ListItemWithCheckBox_Props } from "./props/propTypes";
 import CheckBox from "../CheckBox/CheckBox";
 import { Box, Container } from "../Layout";
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -105,7 +106,7 @@ export default class ListItemWithCheckBox 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/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/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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