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

package/lib/form/layout/Field/__tests__/__snapshots__/Field.spec.js.snap

@@ -3,10 +3,10 @@
 exports[`Field rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" half "
+    class="half"
   >
     <div
-      class=" fieldWidth_half"
+      class="fieldWidth_half"
     />
   </div>
 </DocumentFragment>

package/lib/form/layout/Section/Section.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ModuleFormSectionModule = _interopRequireDefault(require("./ModuleFormSection.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,11 +66,11 @@ var Section = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": dataId,
         "data-test-id": dataId,
-        className: containerClass ? containerClass : ''
+        className: (0, _cssUtility.cn)(containerClass ? containerClass : '')
       }, title && /*#__PURE__*/_react["default"].createElement("div", {
-        className: titleClass ? titleClass : ''
+        className: (0, _cssUtility.cn)(titleClass ? titleClass : '')
       }, title), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : '', " ").concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : ''),
+        className: (0, _cssUtility.cn)(" ".concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : '', " ").concat(className ? className : '')),
         "data-id": formName && formName,
         "data-test-id": formName && formName
       }, this.props.children));

package/lib/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/lib/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -17,6 +17,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SetupDetailLayoutModule = _interopRequireDefault(require("./SetupDetailLayout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -114,7 +116,7 @@ var SetupDetailLayout = /*#__PURE__*/function (_React$Component) {
         className: _SetupDetailLayoutModule["default"].infoText
       }, helpInfoTitle), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("span", {
         onClick: this.toggleHelpInfo,
-        className: _SetupDetailLayoutModule["default"].infoClose,
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].infoClose),
         "data-title": closeText,
         "data-id": "".concat(dataId, "_close"),
         "data-test-id": "".concat(dataId, "_close")
@@ -181,7 +183,7 @@ var SetupHeader = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _SetupDetailLayoutModule["default"].back
       }, needBack ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SetupDetailLayoutModule["default"].backIcon,
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].backIcon),
         onClick: onBackClick,
         "data-title": backText,
         "data-id": "".concat(dataId, "_back"),
@@ -210,9 +212,9 @@ var SetupHeader = /*#__PURE__*/function (_Component) {
         alignBox: "row",
         className: _SetupDetailLayoutModule["default"].rightPanel
       }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, needHelpInfoWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SetupDetailLayoutModule["default"].helpInfoCont
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].helpInfoCont)
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SetupDetailLayoutModule["default"].helpInfo,
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].helpInfo),
         onClick: openHelpInfo,
         "data-title": infoText,
         "data-id": "".concat(dataId, "_info"),
@@ -220,7 +222,7 @@ var SetupHeader = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-info31"
       }))) : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_SetupDetailLayoutModule["default"].helpInfo, " ").concat(_SetupDetailLayoutModule["default"].mr15),
+        className: (0, _cssUtility.cn)("".concat(_SetupDetailLayoutModule["default"].helpInfo, " ").concat(_SetupDetailLayoutModule["default"].mr15)),
         onClick: openHelpInfo,
         "data-title": infoText,
         "data-id": "".concat(dataId, "_info"),
@@ -260,7 +262,7 @@ var SetupContent = /*#__PURE__*/function (_Component2) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         scroll: "vertical",
-        className: "".concat(className ? className : '', " ").concat(_SetupDetailLayoutModule["default"].content, " ").concat(needPadding ? _SetupDetailLayoutModule["default"].padding : '', " "),
+        className: "".concat(_SetupDetailLayoutModule["default"].content, " ").concat(needPadding ? _SetupDetailLayoutModule["default"].padding : '', " ").concat(className ? className : ''),
         isScrollAttribute: true,
         dataId: dataId
       }, children);

package/lib/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/lib/layout/SubtabLayout/SubtabLayout.js

@@ -19,6 +19,8 @@ var _Card = require("@zohodesk/components/es/Card");
 
 var _PlusIcon = _interopRequireDefault(require("../../PlusIcon/PlusIcon"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SubtabLayoutModule = _interopRequireDefault(require("./SubtabLayout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -79,7 +81,7 @@ var SubtabHeader = /*#__PURE__*/function (_React$Component) {
         customClass: "".concat(_SubtabLayoutModule["default"].tabHead, " ").concat(needShadow ? _SubtabLayoutModule["default"].shadowStyle : '', " ").concat(needBorder ? "".concat(_SubtabLayoutModule["default"][type], "_borderStyle") : '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
-        className: " ".concat(className, " ").concat(isPeekView ? "".concat(_SubtabLayoutModule["default"][type], "_peek") : _SubtabLayoutModule["default"][type]),
+        className: "".concat(isPeekView ? "".concat(_SubtabLayoutModule["default"][type], "_peek") : _SubtabLayoutModule["default"][type], " ").concat(className),
         align: "vertical"
       }, onAdd || children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SubtabLayoutModule["default"].left, " ").concat(needPlusIconLine ? _SubtabLayoutModule["default"].plusIconLine : '')
@@ -95,7 +97,7 @@ var SubtabHeader = /*#__PURE__*/function (_React$Component) {
         adjust: getRightPlaceHolder ? true : false,
         className: leftClassName
       }, label ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SubtabLayoutModule["default"].label
+        className: (0, _cssUtility.cn)(_SubtabLayoutModule["default"].label)
       }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/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/lib/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/lib/list/BluePrintStatus/BluePrintStatus.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _BluePrintStatusModule = _interopRequireDefault(require("./BluePrintStatus.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -53,7 +55,7 @@ var BluePrintStatus = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var title = this.props.title;
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_BluePrintStatusModule["default"].container)
+        className: (0, _cssUtility.cn)("".concat(_BluePrintStatusModule["default"].container))
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-blueprint",
         title: title,

package/lib/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/lib/list/Comment/Comment.js

@@ -17,6 +17,8 @@ var _icons = require("@zohodesk/icons");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _CommentModule = _interopRequireDefault(require("./Comment.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -65,7 +67,7 @@ var Comment = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           title = _this$props.title;
       return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        customClass: "".concat(_CommentModule["default"].container, " ").concat(className, " "),
+        customClass: "".concat(_CommentModule["default"].container, " ").concat(className),
         onClick: onClick,
         dataId: "commentLstContainer",
         title: title,
@@ -76,7 +78,7 @@ var Comment = /*#__PURE__*/function (_Component) {
         name: "ZD-TK-commentLine",
         iconClass: _CommentModule["default"].commentIcon
       }), count && /*#__PURE__*/_react["default"].createElement("span", {
-        className: _CommentModule["default"].count
+        className: (0, _cssUtility.cn)(_CommentModule["default"].count)
       }, count));
     }
   }]);

package/lib/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/lib/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/lib/list/Dot/Dot.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DotModule = _interopRequireDefault(require("./Dot.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Dot = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           spacingType = _this$props.spacingType;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DotModule["default"].dot, " ").concat(_DotModule["default"][spacingType], " ").concat(className)
+        className: (0, _cssUtility.cn)("".concat(_DotModule["default"].dot, " ").concat(_DotModule["default"][spacingType], " ").concat(className))
       }, ".");
     }
   }]);

package/lib/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/lib/list/DotNew/DotNew.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DotNewModule = _interopRequireDefault(require("./DotNew.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -60,7 +62,7 @@ var DotNew = /*#__PURE__*/function (_Component) {
           dataTitle = _this$props.dataTitle,
           size = _this$props.size;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DotNewModule["default"].container, " ").concat(_DotNewModule["default"][size], " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_DotNewModule["default"].container, " ").concat(_DotNewModule["default"][size], " ").concat(className ? className : '')),
         "data-title": dataTitle
       });
     }

package/lib/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/lib/list/GridStencils/GridStencils.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _GridStencilsModule = _interopRequireDefault(require("./GridStencils.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -56,17 +58,17 @@ var GridStencils = /*#__PURE__*/function (_React$Component) {
           styles = _this$props.styles,
           order = _this$props.order;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: from == 'leftPanel' && isThreeLayout ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].threeLayout) : from == 'leftPanel' ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].leftCont) : _GridStencilsModule["default"].stenLoading,
+        className: (0, _cssUtility.cn)(from == 'leftPanel' && isThreeLayout ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].threeLayout) : from == 'leftPanel' ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].leftCont) : _GridStencilsModule["default"].stenLoading),
         style: styles,
         order: order
       }, lineBar ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _GridStencilsModule["default"].stenLoadbody
+        className: (0, _cssUtility.cn)(_GridStencilsModule["default"].stenLoadbody)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_GridStencilsModule["default"].lineBar, " ").concat(_GridStencilsModule["default"].stenListBAr)
+        className: (0, _cssUtility.cn)("".concat(_GridStencilsModule["default"].lineBar, " ").concat(_GridStencilsModule["default"].stenListBAr))
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_GridStencilsModule["default"].lineBar2, " ").concat(_GridStencilsModule["default"].stenListBAr)
+        className: (0, _cssUtility.cn)("".concat(_GridStencilsModule["default"].lineBar2, " ").concat(_GridStencilsModule["default"].stenListBAr))
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_GridStencilsModule["default"].lineBar3, " ").concat(_GridStencilsModule["default"].stenListBAr)
+        className: (0, _cssUtility.cn)("".concat(_GridStencilsModule["default"].lineBar3, " ").concat(_GridStencilsModule["default"].stenListBAr))
       })) : '');
     }
   }]);

package/lib/list/Icons/AddNewIcon.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -61,7 +63,7 @@ var AddNewIcon = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/CompleteIcon.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -62,7 +64,7 @@ var CompleteIcon = /*#__PURE__*/function (_React$Component) {
           iconSize = _this$props.iconSize;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/DeleteIcon.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -62,7 +64,7 @@ var DeleteComponent = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '', " ")),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/EditIcon.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -62,7 +64,7 @@ var EditIcon = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/FloatingIcons.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -65,7 +67,7 @@ var FloatingIcons = /*#__PURE__*/function (_Component) {
       });
 
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_IconsModule["default"].container)
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].container))
       }, icons.map(function (child) {
         return /*#__PURE__*/_react["default"].cloneElement(child, {
           iconClass: iconClass

package/lib/list/Icons/ReadUnreadIcon.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -66,7 +68,7 @@ var ReadUnreadIcon = /*#__PURE__*/function (_React$Component) {
           iconSize = _this$props.iconSize;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/SmartIcon.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -65,7 +67,7 @@ var SmartIcon = /*#__PURE__*/function (_Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/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/lib/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/lib/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/lib/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/lib/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"