@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/form/layout/Section/Section.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./ModuleFormSection.module.css";
 export default class Section extends Component {
   constructor(props) {
@@ -19,11 +20,11 @@ export default class Section extends Component {
     return /*#__PURE__*/React.createElement("div", {
       "data-id": dataId,
       "data-test-id": dataId,
-      className: containerClass ? containerClass : ''
+      className: cn(containerClass ? containerClass : '')
     }, title && /*#__PURE__*/React.createElement("div", {
-      className: titleClass ? titleClass : ''
+      className: cn(titleClass ? titleClass : '')
     }, title), /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
+      className: cn(` ${column == 'single' ? style.singleColumn : ''} ${className ? className : ''}`),
       "data-id": formName && formName,
       "data-test-id": formName && formName
     }, this.props.children));

package/es/form/layout/Section/__tests__/__snapshots__/Section.spec.js.snap

@@ -6,7 +6,7 @@ exports[`Section rendering the defult props 1`] = `
     class=""
   >
     <div
-      class=" "
+      class=""
     />
   </div>
 </DocumentFragment>

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -3,6 +3,7 @@ import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_
 import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./SetupDetailLayout.module.css";
 export default class SetupDetailLayout extends React.Component {
   constructor(props) {
@@ -65,7 +66,7 @@ export default class SetupDetailLayout extends React.Component {
       className: style.infoText
     }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
       onClick: this.toggleHelpInfo,
-      className: style.infoClose,
+      className: cn(style.infoClose),
       "data-title": closeText,
       "data-id": `${dataId}_close`,
       "data-test-id": `${dataId}_close`
@@ -121,7 +122,7 @@ export class SetupHeader extends Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.back
     }, needBack ? /*#__PURE__*/React.createElement("span", {
-      className: style.backIcon,
+      className: cn(style.backIcon),
       onClick: onBackClick,
       "data-title": backText,
       "data-id": `${dataId}_back`,
@@ -150,9 +151,9 @@ export class SetupHeader extends Component {
       alignBox: "row",
       className: style.rightPanel
     }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/React.createElement(Box, null, needHelpInfoWrapper ? /*#__PURE__*/React.createElement("span", {
-      className: style.helpInfoCont
+      className: cn(style.helpInfoCont)
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.helpInfo,
+      className: cn(style.helpInfo),
       onClick: openHelpInfo,
       "data-title": infoText,
       "data-id": `${dataId}_info`,
@@ -160,7 +161,7 @@ export class SetupHeader extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-info31"
     }))) : /*#__PURE__*/React.createElement("span", {
-      className: `${style.helpInfo} ${style.mr15}`,
+      className: cn(`${style.helpInfo} ${style.mr15}`),
       onClick: openHelpInfo,
       "data-title": infoText,
       "data-id": `${dataId}_info`,
@@ -188,7 +189,7 @@ export class SetupContent extends Component {
     return /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       scroll: "vertical",
-      className: `${className ? className : ''} ${style.content} ${needPadding ? style.padding : ''} `,
+      className: `${style.content} ${needPadding ? style.padding : ''} ${className ? className : ''}`,
       isScrollAttribute: true,
       dataId: dataId
     }, children);

package/es/layout/SetupDetailLayout/__tests__/__snapshots__/SetupDetailLayout.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`SetupDetailLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="SetupDetailLayout"
     data-scroll="true"
     data-selector-id="container"

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -6,6 +6,7 @@ import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_def
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/es/Card';
 import PlusIcon from "../../PlusIcon/PlusIcon";
+import { cn } from "@dot-system/css-utility";
 import style from "./SubtabLayout.module.css";
 export class SubtabHeader extends React.Component {
   render() {
@@ -30,7 +31,7 @@ export class SubtabHeader extends React.Component {
       customClass: `${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${needBorder ? `${style[type]}_borderStyle` : ''}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
-      className: ` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`,
+      className: `${isPeekView ? `${style[type]}_peek` : style[type]} ${className}`,
       align: "vertical"
     }, onAdd || children ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.left} ${needPlusIconLine ? style.plusIconLine : ''}`
@@ -46,7 +47,7 @@ export class SubtabHeader extends React.Component {
       adjust: getRightPlaceHolder ? true : false,
       className: leftClassName
     }, label ? /*#__PURE__*/React.createElement("div", {
-      className: style.label
+      className: cn(style.label)
     }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/layout/SubtabLayout/__tests__/__snapshots__/SubtabLayout.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`SubtabLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="subTabLayout"
     data-scroll="true"
     data-selector-id="container"

package/es/list/AvatarFlip/__tests__/__snapshots__/AvatarFlip.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`AvatarFlip rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="xmedium  flip"
+    class="xmedium flip"
     data-id="tic-list-filp-cont"
     data-test-id="tic-list-filp-cont"
   >
@@ -13,15 +13,14 @@ exports[`AvatarFlip rendering the defult props 1`] = `
       data-test-id="tic-list-filp"
     >
       <div
-        class="front  flex cover coldir both"
+        class="flex fullSize column alignItems_center justifyContent_center front"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
           aria-checked="false"
-          class="container pointer primary 
-           inflex rowdir vCenter"
+          class="inlineFlex row alignItems_center container pointer primary"
           data-id="listViewCheckBox_undefined"
           data-selector-id="checkbox_undefined"
           data-test-id="listViewCheckBox_undefined"
@@ -29,7 +28,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
           tabindex="0"
         >
           <div
-            class="boxContainer  medium  filled  shrinkOff"
+            class="noShrink boxContainer medium filled"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -39,7 +38,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
               type="hidden"
             />
             <label
-              class="checkbox pointer medium "
+              class="checkbox pointer medium"
             >
               <svg
                 viewBox="0 0 40 40"
@@ -60,7 +59,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="back flex cover coldir both"
+        class="flex fullSize column alignItems_center justifyContent_center back"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -70,7 +69,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
           data-selector-id="avatarUser"
         >
           <div
-            class="avatar xmedium xmedium circle primary black border   "
+            class="avatar xmedium xmedium circle primary black border"
             data-id="Avatar"
             data-selector-id="avatar"
             data-test-id="Avatar"

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./BluePrintStatus.module.css";
 import { Icon } from '@zohodesk/icons';
 export default class BluePrintStatus extends React.Component {
@@ -12,7 +13,7 @@ export default class BluePrintStatus extends React.Component {
       title
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-blueprint",
       title: title,

package/es/list/BluePrintStatus/__tests__/__snapshots__/BluePrintStatus.spec.js.snap

@@ -7,7 +7,7 @@ exports[`BluePrintStatus rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-blueprint  iconStyle  "
+      class="zd_font_icons basic icon-blueprint iconStyle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Comment/Comment.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/semantic/Button/Button';
+import { cn } from "@dot-system/css-utility";
 import style from "./Comment.module.css";
 export default class Comment extends Component {
   constructor(props) {
@@ -17,7 +18,7 @@ export default class Comment extends Component {
       title
     } = this.props;
     return /*#__PURE__*/React.createElement(Button, {
-      customClass: `${style.container} ${className} `,
+      customClass: `${style.container} ${className}`,
       onClick: onClick,
       dataId: "commentLstContainer",
       title: title,
@@ -28,7 +29,7 @@ export default class Comment extends Component {
       name: "ZD-TK-commentLine",
       iconClass: style.commentIcon
     }), count && /*#__PURE__*/React.createElement("span", {
-      className: style.count
+      className: cn(style.count)
     }, count));
   }
 

package/es/list/Comment/__tests__/__snapshots__/Comment.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Comment rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-label=""
-    class="buttonReset container  "
+    class="buttonReset container"
     data-id="commentLstContainer"
     data-test-id="commentLstContainer"
     data-title=""
@@ -13,7 +13,7 @@ exports[`Comment rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-commentLine  commentIcon  "
+      class="zd_font_icons basic icon-commentLine commentIcon"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/DepartmentDropDown/__tests__/__snapshots__/DepartmentDropDown.spec.js.snap

@@ -7,7 +7,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex rowdir vCenter"
+      class="flex row alignItems_center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -16,26 +16,26 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="1"
-        class="buttonReset departmentBox  cursor    flex rowdir vCenter"
+        class="flex row alignItems_center buttonReset cursor departmentBox"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <span
           aria-hidden="true"
-          class="value toggleDropText shrinkOn"
+          class="shrink value toggleDropText"
           data-id="undefined_value"
           data-selector-id="box"
           data-test-id="undefined_value"
           id="1"
         >
           <div
-            class="dotted size12 departmentText "
+            class="dotted size12 departmentText"
           />
         </span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-down  toggleDropIcon arrow default_arrow  "
+          class="zd_font_icons basic icon-down toggleDropIcon arrow default_arrow"
           data-id="statusdownarrow"
           data-selector-id="fontIcon"
           data-test-id="statusdownarrow"

package/es/list/Dot/Dot.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Dot.module.css";
 export default class Dot extends Component {
   constructor(props) {
@@ -13,7 +14,7 @@ export default class Dot extends Component {
       spacingType
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.dot} ${style[spacingType]} ${className}`
+      className: cn(`${style.dot} ${style[spacingType]} ${className}`)
     }, ".");
   }
 

package/es/list/Dot/__tests__/__snapshots__/Dot.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Dot rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="dot list "
+    class="dot list"
   >
     .
   </div>

package/es/list/DotNew/DotNew.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./DotNew.module.css";
 export default class DotNew extends Component {
   constructor(props) {
@@ -14,7 +15,7 @@ export default class DotNew extends Component {
       size
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[size]} ${className ? className : ''}`,
+      className: cn(`${style.container} ${style[size]} ${className ? className : ''}`),
       "data-title": dataTitle
     });
   }

package/es/list/DotNew/__tests__/__snapshots__/DotNew.spec.js.snap

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

package/es/list/GridStencils/GridStencils.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./GridStencils.module.css";
 export default class GridStencils extends React.Component {
   render() {
@@ -11,17 +12,17 @@ export default class GridStencils extends React.Component {
       order
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: from == 'leftPanel' && isThreeLayout ? `${style.stenLoading} ${style.threeLayout}` : from == 'leftPanel' ? `${style.stenLoading} ${style.leftCont}` : style.stenLoading,
+      className: cn(from == 'leftPanel' && isThreeLayout ? `${style.stenLoading} ${style.threeLayout}` : from == 'leftPanel' ? `${style.stenLoading} ${style.leftCont}` : style.stenLoading),
       style: styles,
       order: order
     }, lineBar ? /*#__PURE__*/React.createElement("div", {
-      className: style.stenLoadbody
+      className: cn(style.stenLoadbody)
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar} ${style.stenListBAr}`
+      className: cn(`${style.lineBar} ${style.stenListBAr}`)
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar2} ${style.stenListBAr}`
+      className: cn(`${style.lineBar2} ${style.stenListBAr}`)
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar3} ${style.stenListBAr}`
+      className: cn(`${style.lineBar3} ${style.stenListBAr}`)
     })) : '');
   }
 

package/es/list/Icons/AddNewIcon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AddNewIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class AddNewIcon extends React.Component {
@@ -14,7 +15,7 @@ export default class AddNewIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
+      className: cn(`${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle

package/es/list/Icons/CompleteIcon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CompleteIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class CompleteIcon extends React.Component {
@@ -15,7 +16,7 @@ export default class CompleteIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
+      className: cn(`${style.iconStyle} ${style.blueHover} ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle

package/es/list/Icons/DeleteIcon.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DeleteComponent_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
@@ -15,7 +16,7 @@ export default class DeleteComponent extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}  ${btnStyle.buttonReset}`,
+      className: cn(`${style.iconStyle} ${style.redHover} ${btnStyle.buttonReset} ${className ? className : ''} `),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/EditIcon.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EditIcon_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
@@ -15,7 +16,7 @@ export default class EditIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}  ${btnStyle.buttonReset}`,
+      className: cn(`${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/FloatingIcons.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { FloatingIcons_defaultProps } from "./props/defaultProps";
 import { FloatingIcons_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 export default class FloatingIcons extends Component {
   constructor(props) {
@@ -14,7 +15,7 @@ export default class FloatingIcons extends Component {
     } = this.props;
     const icons = React.Children.toArray(children).filter(o => o);
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, icons.map(child => /*#__PURE__*/React.cloneElement(child, {
       iconClass
     })));

package/es/list/Icons/ReadUnreadIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ReadUnreadIcon_defaultProps } from "./props/defaultProps";
 import { ReadUnreadIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class ReadUnreadIcon extends React.Component {
@@ -18,7 +19,7 @@ export default class ReadUnreadIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
+      className: cn(`${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/SmartIcon.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { SmartIcon_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
@@ -14,7 +15,7 @@ export default class SmartIcon extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}  ${btnStyle.buttonReset}`,
+      className: cn(`${style.iconStyle} ${style.blueHover} ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/__tests__/__snapshots__/AddNewIcon.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`AddNewIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="iconStyle blueHover  buttonReset"
+    class="iconStyle blueHover buttonReset"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-addTickets    "
+      class="zd_font_icons basic icon-addTickets"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/CompleteIcon.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`CompleteIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="iconStyle blueHover  buttonReset"
+    class="iconStyle blueHover buttonReset"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-checkbox    "
+      class="zd_font_icons basic icon-checkbox"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/DeleteIcon.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`DeleteIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="iconStyle redHover   buttonReset"
+    class="iconStyle redHover buttonReset"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-delete    "
+      class="zd_font_icons basic icon-delete"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/EditIcon.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`EditIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="iconStyle blueHover   buttonReset"
+    class="iconStyle blueHover buttonReset"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-edit    "
+      class="zd_font_icons basic icon-edit"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/ReadUnreadIcon.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`ReadUnreadIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="iconStyle blueHover  buttonReset"
+    class="iconStyle blueHover buttonReset"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-unread     "
+      class="zd_font_icons basic icon-unread"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/SmartIcon.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`SmartIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="iconStyle blueHover   buttonReset"
+    class="iconStyle blueHover buttonReset"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-peek    "
+      class="zd_font_icons basic icon-peek"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/ListLayout/ListLayout.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { ListLayout_defaultProps } from "./props/defaultProps";
 import { ListLayout_propTypes, Column_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListLayout.module.css";
 export default class ListLayout extends Component {
   constructor(props) {
@@ -36,7 +37,7 @@ export default class ListLayout extends Component {
       ariaSetsize
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `,
+      className: cn(`${style.container} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} ${containerClass} `),
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,

package/es/list/ListLayout/__tests__/__snapshots__/ListLayout.spec.js.snap

@@ -3,14 +3,14 @@
 exports[`ListLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container undefined listHover  classic    "
+    class="container listHover classic"
     data-a11y-inset-focus="true"
     data-id="ticketsListInPopup"
     data-test-id="ticketsListInPopup"
     role="listitem"
   >
     <div
-      class="innerContainer  flex cover rowdir"
+      class="flex fullSize row innerContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"