@zohodesk/components 1.6.22 → 1.6.23-exp-2

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

@@ -18,7 +18,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -27,7 +27,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -44,7 +44,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="1"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="hourField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="hourField_textBox"
@@ -89,7 +89,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons  basic icon-down   "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -120,7 +120,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -137,7 +137,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="3"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="minuteField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="minuteField_textBox"
@@ -182,7 +182,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons  basic icon-down   "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -204,7 +204,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -213,7 +213,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -230,7 +230,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="5"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="ampmField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="ampmField_textBox"
@@ -275,7 +275,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons  basic icon-down   "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

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/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__/DropDownHeading.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownHeading rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="light "
+    class="light"
     data-id="DropDownHeading"
     data-selector-id="dropdownHeading"
     data-test-id="DropDownHeading"

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

@@ -3,7 +3,7 @@
 exports[`DropDownItem rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="list    "
+    class="list"
     data-id="dropDwnItemContainer"
     data-test-id="dropDwnItemContainer"
   />

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

@@ -3,12 +3,12 @@
 exports[`DropDownSearch rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="search mediumSearch "
+    class="search mediumSearch"
     data-id="DropDownSearch"
     data-test-id="DropDownSearch"
   >
     <input
-      class="  container medium  default border effect  borderColor_default  "
+      class="container medium default border effect borderColor_default"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

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

@@ -3,7 +3,7 @@
 exports[`DropDownSeparator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="separator "
+    class="separator"
   />
 </DocumentFragment>
 `;

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

@@ -3,7 +3,7 @@
 exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_breakSpaces "
+    class="reset whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_normal "
+    class="reset whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_nowrap "
+    class="reset whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_pre "
+    class="reset whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preLine "
+    class="reset whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preWrap "
+    class="reset whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset  "
+    class="reset"
   />
 </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

@@ -3,8 +3,7 @@
 exports[`Label rendering the Id 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -18,8 +17,7 @@ exports[`Label rendering the Id 1`] = `
 exports[`Label rendering the clipped is true 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-          dotted cursor "
+    class="label title medium default font_default dotted cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -32,8 +30,7 @@ exports[`Label rendering the clipped is true 1`] = `
 exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor LabelCustomClass"
+    class="label title medium default font_default cursor LabelCustomClass"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -46,8 +43,7 @@ exports[`Label rendering the customClass 1`] = `
 exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -60,8 +56,7 @@ exports[`Label rendering the defult props 1`] = `
 exports[`Label rendering the htmlFor 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -75,8 +70,7 @@ exports[`Label rendering the htmlFor 1`] = `
 exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           pointer "
+    class="label title medium default font_default pointer"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -89,8 +83,7 @@ exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`
 exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium danger font_default
-           cursor "
+    class="label title medium danger font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -103,8 +96,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium dark font_default
-           cursor "
+    class="label title medium dark font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -117,8 +109,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -131,8 +122,7 @@ exports[`Label rendering the palette of- default 1`] = `
 exports[`Label rendering the palette of- disable 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium disable font_default
-           cursor "
+    class="label title medium disable font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -145,8 +135,7 @@ exports[`Label rendering the palette of- disable 1`] = `
 exports[`Label rendering the palette of- mandatory 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium mandatory font_default
-           cursor "
+    class="label title medium mandatory font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -159,8 +148,7 @@ exports[`Label rendering the palette of- mandatory 1`] = `
 exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium primary font_default
-           cursor "
+    class="label title medium primary font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -173,8 +161,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium secondary font_default
-           cursor "
+    class="label title medium secondary font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -187,8 +174,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 exports[`Label rendering the size of- large 1`] = `
 <DocumentFragment>
   <label
-    class="label title large default font_default
-           cursor "
+    class="label title large default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -201,8 +187,7 @@ exports[`Label rendering the size of- large 1`] = `
 exports[`Label rendering the size of- medium 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -215,8 +200,7 @@ exports[`Label rendering the size of- medium 1`] = `
 exports[`Label rendering the size of- small 1`] = `
 <DocumentFragment>
   <label
-    class="label title small default font_default
-           cursor "
+    class="label title small default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -229,8 +213,7 @@ exports[`Label rendering the size of- small 1`] = `
 exports[`Label rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <label
-    class="label title xsmall default font_default
-           cursor "
+    class="label title xsmall default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -243,8 +226,7 @@ exports[`Label rendering the size of- xsmall 1`] = `
 exports[`Label rendering the title 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -258,8 +240,7 @@ exports[`Label rendering the title 1`] = `
 exports[`Label rendering the type of- subtitle 1`] = `
 <DocumentFragment>
   <label
-    class="label subtitle medium default font_default
-           cursor "
+    class="label subtitle medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -272,8 +253,7 @@ exports[`Label rendering the type of- subtitle 1`] = `
 exports[`Label rendering the type of- title 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -286,8 +266,7 @@ exports[`Label rendering the type of- title 1`] = `
 exports[`Label rendering the variant of- default 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -300,8 +279,7 @@ exports[`Label rendering the variant of- default 1`] = `
 exports[`Label rendering the variant of- primary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_primary
-           cursor "
+    class="label title medium default font_primary cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -320,8 +298,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
     style="gap: 6px;"
   >
     <label
-      class="label title large danger font_default
-           cursor "
+      class="label title large danger font_default cursor"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"
@@ -353,8 +330,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
     data-test-id="flex"
   >
     <label
-      class="label title medium default font_default
-           cursor "
+      class="label title medium default font_default cursor"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

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}`