@zohodesk/components 1.6.23 → 1.6.24

package/lib/Buttongroup/Buttongroup.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ButtongroupModule = _interopRequireDefault(require("./Buttongroup.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -63,18 +65,18 @@ var Buttongroup = /*#__PURE__*/function (_React$Component) {
       var btnGroup = [];
       children && children.forEach(function (child) {
         var btnRight = /*#__PURE__*/_react["default"].createElement("span", {
-          className: _ButtongroupModule["default"][type]
+          className: (0, _cssUtility.cn)(_ButtongroupModule["default"][type])
         }, child);
 
         btnGroup.push(btnRight);
       });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ButtongroupModule["default"].buttonGroup, " ").concat(_ButtongroupModule["default"][type], " ").concat(customClass ? customClass : ''),
+        className: (0, _cssUtility.cn)("".concat(_ButtongroupModule["default"].buttonGroup, " ").concat(_ButtongroupModule["default"][type], " ").concat(customClass ? customClass : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ButtongroupModule["default"]["align".concat(buttonPosition)]
+        className: (0, _cssUtility.cn)(_ButtongroupModule["default"]["align".concat(buttonPosition)])
       }, children));
     }
   }]);

package/lib/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap

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

package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap

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

package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CardContent Should render with name - both 1`] = `
 <DocumentFragment>

package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

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

package/lib/CheckBox/CheckBox.js

@@ -21,6 +21,8 @@ var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _CheckBoxModule = _interopRequireDefault(require("./CheckBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -160,14 +162,14 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         ref: getRef,
         name: name
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_CheckBoxModule["default"].checkbox, " ").concat(accessMode, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].checkbox, " ").concat(accessMode, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize))
       }, activeStyle == 'tick' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 40 40"
       }, checked ? /*#__PURE__*/_react["default"].createElement("path", {
         xmlns: "http://www.w3.org/2000/svg",
         d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
-        className: "".concat(_CheckBoxModule["default"].cbBox)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].cbBox))
       }) : /*#__PURE__*/_react["default"].createElement("rect", {
         xmlns: "http://www.w3.org/2000/svg",
         x: "1",
@@ -175,14 +177,14 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         width: "38",
         height: "38",
         rx: "4",
-        className: "".concat(_CheckBoxModule["default"].cbBox)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].cbBox))
       })), checked ? /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 44 44",
-        className: "".concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], "  ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(customTickSize)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], "  ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(customTickSize))
       }, /*#__PURE__*/_react["default"].createElement("polyline", {
         points: "12.56 19 19.61 26.06 40.39 5.28",
-        className: "".concat(_CheckBoxModule["default"].tickPath, " ").concat(_CheckBoxModule["default"].checkedtickPath)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].tickPath, " ").concat(_CheckBoxModule["default"].checkedtickPath))
       })) : null) : /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 40 40"
@@ -193,10 +195,10 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         width: "38",
         height: "38",
         rx: "4",
-        className: "".concat(_CheckBoxModule["default"].cbBox)
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].cbBox))
       }), checked ? /*#__PURE__*/_react["default"].createElement("line", {
         xmlns: "http://www.w3.org/2000/svg",
-        className: "".concat(_CheckBoxModule["default"].linePath, " ").concat(_CheckBoxModule["default"].cbBox),
+        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].linePath, " ").concat(_CheckBoxModule["default"].cbBox)),
         x1: "11.47",
         y1: "20",
         x2: "28.53",

package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CheckBox component Should be disable 1`] = `
 <DocumentFragment>

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorMultiSelect Should render the default selected value 1`] = `
 <DocumentFragment>
@@ -103,7 +103,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="7"
+          aria-labelledby="3"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -115,7 +115,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="7"
+            id="3"
           >
             Red
           </div>
@@ -152,7 +152,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="8"
+          aria-labelledby="4"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -164,7 +164,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="8"
+            id="4"
           >
             Green
           </div>

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorSingleSelect Should render the default selected value 1`] = `
 <DocumentFragment>
@@ -12,11 +12,11 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="3"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="3"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -37,7 +37,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="5"
+              aria-labelledby="3"
               class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
@@ -49,7 +49,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="5"
+                id="3"
               >
                 Red
               </div>
@@ -90,11 +90,11 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="6"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="6"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -115,7 +115,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="8"
+              aria-labelledby="3"
               class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
@@ -125,7 +125,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="8"
+                id="3"
               />
             </div>
           </div>
@@ -227,11 +227,11 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="9"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="9"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -292,11 +292,11 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="11"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="11"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -317,7 +317,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="13"
+              aria-labelledby="3"
               class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
@@ -329,7 +329,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="13"
+                id="3"
               >
                 Red
               </div>
@@ -370,11 +370,11 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="14"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="14"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Common = require("../../../utils/Common");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ColorIndicatorModule = _interopRequireDefault(require("./ColorIndicator.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -32,7 +34,7 @@ function ColorIndicator(props) {
       background = _ref.background;
 
   return /*#__PURE__*/_react["default"].createElement("div", _extends({}, tagAttributes, a11yAttributes, {
-    className: "".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass),
+    className: (0, _cssUtility.cn)("".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass)),
     style: {
       backgroundColor: background
     },

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>

package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColoredTag rendering the defult props 1`] = `
 <DocumentFragment>
@@ -22,7 +22,7 @@ exports[`ColoredTag rendering the defult props 1`] = `
 exports[`ColoredTag rendering with colorConfig 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
+    aria-labelledby="1"
     class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -33,7 +33,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="3"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -42,7 +42,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
 exports[`ColoredTag rendering with customAttributes 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
+    aria-labelledby="1"
     class="container effect medium lgRadius default"
     data-custom-attribute="true"
     data-id="tag_Tag"
@@ -53,7 +53,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="4"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -62,7 +62,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
 exports[`ColoredTag rendering with isActive true 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
+    aria-labelledby="1"
     class="container effect selected activedefault medium lgRadius default"
     data-id="tag_TagSelected"
     data-selector-id="tag"
@@ -72,7 +72,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="2"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -81,7 +81,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
 exports[`ColoredTag rendering with text 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="5"
+    aria-labelledby="1"
     class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -92,7 +92,7 @@ exports[`ColoredTag rendering with text 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="5"
+      id="1"
     >
       Colored Tag
     </div>

package/lib/DateTime/CalendarView.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _Layout = require("../Layout");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 var _common = require("../utils/datetime/common");
@@ -225,7 +227,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         "data-test-id": "".concat(dataId, "_dateContainer"),
-        className: "".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : '')
+        className: (0, _cssUtility.cn)("".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : ''))
       }, rows));
     }
   }]);

package/lib/DateTime/DateTime.js

@@ -25,6 +25,8 @@ var _DateTimePopupFooter = _interopRequireDefault(require("./DateTimePopupFooter
 
 var _Time = _interopRequireDefault(require("./Time"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 var _common = require("../utils/datetime/common");
@@ -781,7 +783,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
+        className: (0, _cssUtility.cn)("".concat(_DateTimeModule["default"].container, " ").concat(innerClass)),
         "data-id": "".concat(dataId, "_Calendar"),
         "data-test-id": "".concat(dataId, "_Calendar"),
         onClick: this.closePopup
@@ -793,7 +795,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         nextMonthTitleText: nextMonthTitleText,
         onModifyCalendar: this.modifyCalendar
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DateTimeModule["default"].subContainer
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].subContainer)
       }, /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
         needBorder: isDateTimeField || needAction,
         dataId: dataId,
@@ -832,7 +834,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         onCancel: this.handleClear,
         dataId: dataId
       }) : null, isYearView ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DateTimeModule["default"].yearContainer
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].yearContainer)
       }, /*#__PURE__*/_react["default"].createElement(_YearView["default"], {
         onSelectYear: this.handleSelectYear,
         onSelectMonth: this.handleSelectMonthViaYearView,
@@ -844,7 +846,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       })) : null), renderCustomFooter);
 
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
+        className: (0, _cssUtility.cn)("".concat(_DateTimeModule["default"].dropBox, " ").concat(className)),
         "data-id": "".concat(dataId, "_dateBoxContainer"),
         "data-test-id": "".concat(dataId, "_dateBoxContainer")
       }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({

package/lib/DateTime/DateTimePopupFooter.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -77,7 +79,7 @@ var DateTimePopupFooter = /*#__PURE__*/function (_PureComponent) {
         onClick: onSubmit,
         dataId: "".concat(dataId, "_saveBtn")
       }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DateTimeModule["default"].space
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].space)
       }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         text: cancelText,
         size: "medium",

package/lib/DateTime/DateWidget.js

@@ -23,6 +23,8 @@ var _Layout = require("../Layout");
 
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateWidgetModule = _interopRequireDefault(require("./DateWidget.module.css"));
 
 var _validator = _interopRequireDefault(require("./validator"));
@@ -1085,17 +1087,17 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       var showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
       var showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DateWidgetModule["default"].container)
+        className: (0, _cssUtility.cn)("".concat(_DateWidgetModule["default"].container))
       }, children ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
         ref: getTargetRef,
-        className: "".concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled, " ").concat(className ? className : '')
+        className: (0, _cssUtility.cn)("".concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled, " ").concat(className ? className : ''))
       }, children) : /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
-        className: " ".concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled, " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)(" ".concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled, " ").concat(className ? className : '')),
         onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
         ref: getTargetRef
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/DateTime/Time.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Select = _interopRequireDefault(require("../Select/Select"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -86,7 +88,7 @@ var Time = /*#__PURE__*/function (_PureComponent) {
           _customProps$AmPmSele = customProps.AmPmSelectProps,
           AmPmSelectProps = _customProps$AmPmSele === void 0 ? {} : _customProps$AmPmSele;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DateTimeModule["default"].text
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].text)
       }, timeText), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "vertical",

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

@@ -27,6 +27,8 @@ var _Common = require("./../utils/Common");
 
 var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxModule = _interopRequireDefault(require("./css/DropBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -100,13 +102,13 @@ function DropBox(props) {
   return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
+    className: (0, _cssUtility.cn)("".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze)),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxModule["default"].freezeLayer,
+    className: (0, _cssUtility.cn)(_DropBoxModule["default"].freezeLayer),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;