@zohodesk/components 1.6.22-exp-1 → 1.6.23-exp-2

package/es/Textarea/Textarea.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Textarea.module.css";
 export default class Textarea extends React.Component {
   constructor(props) {
@@ -95,7 +96,7 @@ export default class Textarea extends React.Component {
     return /*#__PURE__*/React.createElement("textarea", _extends({
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass} `,
+      className: cn(`${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass} `),
       placeholder: placeHolder
     }, options, {
       "data-id": dataId,

package/es/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ import { getLibraryConfig } from "../Provider/Config";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import selectn from 'selectn';
 import { whiteSpaceClassMapping } from "../utils/cssUtils";
+import { cn } from "@dot-system/css-utility";
 import style from "./Tooltip.module.css";
 export default class Tooltip extends React.Component {
   constructor(props) {
@@ -493,7 +494,7 @@ export default class Tooltip extends React.Component {
 
     let tooltipCss = `${style.tooltipcont} ${whiteSpaceClassMapping[tooltipWhiteSpaceModification]}`;
     return title ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.tooltiptext} ${customClass}`,
+      className: cn(`${style.tooltiptext} ${customClass}`),
       style: {
         left,
         top,
@@ -503,18 +504,18 @@ export default class Tooltip extends React.Component {
       "data-id": dataId,
       "data-test-id": dataId
     }, !dataTooltipnoArrow ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.tooltiparrow} ${arrowStyle}`,
+      className: cn(`${style.tooltiparrow} ${arrowStyle}`),
       style: {
         left: arrowLeft,
         top: arrowTop
       }
     }) : null, isHtml ? /*#__PURE__*/React.createElement("div", {
-      className: tooltipCss,
+      className: cn(tooltipCss),
       dangerouslySetInnerHTML: {
         __html: title
       }
     }) : /*#__PURE__*/React.createElement("div", {
-      className: tooltipCss
+      className: cn(tooltipCss)
     }, title)) : null;
   }
 

package/es/deprecated/Switch/Switch.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../../v1/Layout";
 import Label from "../../v1/Label/Label";
+import { cn } from "@dot-system/css-utility";
 import style from "../../Switch/Switch.module.css";
 
 const Switch = props => {
@@ -60,7 +61,7 @@ const Switch = props => {
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: id,
-    className: `${style.input} ${checked ? style.checked : ''}`,
+    className: cn(`${style.input} ${checked ? style.checked : ''}`),
     name: name,
     value: value,
     checked: checked,
@@ -71,7 +72,7 @@ const Switch = props => {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    className: cn(`${style.label} ${style[`${size}Label`]} ${customSwitch}`),
     tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/React.createElement(Label, _extends({
     text: text,

package/es/semantic/Button/Button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./semanticButton.module.css";
 export default class Button extends React.Component {
   constructor(props) {
@@ -31,7 +32,7 @@ export default class Button extends React.Component {
       ariaLabelledby
     } = a11y;
     return /*#__PURE__*/React.createElement("button", {
-      className: `${style.buttonReset} ${customClass}`,
+      className: cn(`${style.buttonReset} ${customClass}`),
       "aria-label": ariaLabel,
       "aria-haspopup": ariaHaspopup,
       "aria-expanded": ariaExpanded,

package/es/v1/Button/Button.js

@@ -1,3 +1,5 @@
+import { cn } from "@dot-system/css-utility";
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, memo, useMemo } from 'react';
@@ -187,7 +189,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
-    className: buttonClassName,
+    className: cn(buttonClassName),
     "aria-busy": isLoading,
     "aria-disabled": isDisabledState,
     "aria-readonly": isReadOnly,

package/es/v1/Switch/Switch.js

@@ -15,6 +15,7 @@ import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import Label from "../../Label/Label"; // css
 
+import { cn } from "@dot-system/css-utility";
 import defaultStyle from "./css/Switch_v1.module.css";
 
 const Switch = props => {
@@ -108,20 +109,20 @@ const Switch = props => {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: cn(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/React.createElement("svg", {
-    className: thumbClass,
+    className: cn(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/React.createElement("svg", {
-    className: labelIndicationClass,
+    className: cn(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/React.createElement("rect", {
     width: "100%",

package/es/v1/shared/Loader/Loader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./Loader_v1.module.css";
 
 const Loader = props => {
@@ -11,17 +12,17 @@ const Loader = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${wrapper}`,
+    className: cn(`${style.spinner} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerTrack,
+    className: cn(style.spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerHead,
+    className: cn(style.spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"

package/es/v1/shared/SuccessTick/SuccessTick.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
@@ -11,7 +12,7 @@ const SuccessTick = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${wrapper}`,
+    className: cn(`${style.tick} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/lib/Accordion/Accordion.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -107,7 +109,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           ariaExpanded = a11y.ariaExpanded,
           ariaHaspopup = a11y.ariaHaspopup;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         style: {
           height: height
         },

package/lib/Accordion/AccordionItem.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -80,13 +82,13 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       unMountItem = unMountItem !== undefined ? unMountItem : unMount;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         "data-id": dataId,
         "data-test-id": dataId,
         role: role,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: innerClass ? innerClass : '',
+        className: (0, _cssUtility.cn)(innerClass ? innerClass : ''),
         onClick: selectMenu.bind(this, id)
       }, children[0]), unMountItem ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
         name: "slideDown",

package/lib/AppContainer/AppContainer.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 require("../common/basic.module.css");
 
 require("@zohodesk/variables/assets/colorVariables.module.css");
@@ -188,7 +190,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
+        className: (0, _cssUtility.cn)("".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass)),
         "data-id": "".concat(dataId, "_tooltip"),
         "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")

package/lib/Avatar/Avatar.js

@@ -17,6 +17,8 @@ var _getInitial = require("../utils/getInitial");
 
 var _AvatarSize = _interopRequireDefault(require("../Provider/AvatarSize"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarModule = _interopRequireDefault(require("./Avatar.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -210,7 +212,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       var borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : '')),
         "data-title": needTitle ? title ? title : name : null,
         "data-id": dataId,
         "data-test-id": dataId,
@@ -218,12 +220,12 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         "data-selector-id": dataSelectorId,
         tabIndex: onClick ? 0 : null
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarModule["default"].initial),
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].initial)),
         "data-id": "".concat(dataId, "_AvatarInitial"),
         "data-test-id": "".concat(dataId, "_AvatarInitial"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
       }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
-        className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : '')),
         "data-id": "".concat(dataId, "_AvatarImg"),
         "data-test-id": "".concat(dataId, "_AvatarImg"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
@@ -233,7 +235,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         src: showAlternateAvatar ? alternateSrc : src,
         alt: name
       }), showDefaultBorder ? null : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
+        className: (0, _cssUtility.cn)("".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " "))
       })));
     }
   }]);

package/lib/AvatarTeam/AvatarTeam.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AvatarTeamModule = _interopRequireDefault(require("./AvatarTeam.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -94,7 +96,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
           customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2;
       var border = borderOnHover || onClick;
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
-        className: "".concat(_AvatarTeamModule["default"].container, " ").concat(borderOnActive ? _AvatarTeamModule["default"].borderOnActive : border ? _AvatarTeamModule["default"].borderOnHover : '', " "),
+        className: (0, _cssUtility.cn)("".concat(_AvatarTeamModule["default"].container, " ").concat(borderOnActive ? _AvatarTeamModule["default"].borderOnActive : border ? _AvatarTeamModule["default"].borderOnHover : '', " ")),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-selector-id": dataSelectorId
@@ -114,7 +116,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         needBorder: needBorder,
         needDefaultBorder: needDefaultBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam)
+        className: (0, _cssUtility.cn)("".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam))
       }));
     }
   }]);

package/lib/Button/Button.js

@@ -17,6 +17,8 @@ var _utils = require("@zohodesk/utils");
 
 var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ButtonModule = _interopRequireDefault(require("./css/Button.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -55,7 +57,7 @@ function Button(props) {
 
   var statusLower = status.toLowerCase();
   return /*#__PURE__*/_react["default"].createElement("button", _extends({
-    className: buttonClass,
+    className: (0, _cssUtility.cn)(buttonClass),
     "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
     "data-test-id": disabled ? "".concat(dataId, "_disabled") : dataId,
     disabled: disabled || statusLower === 'loading',
@@ -67,11 +69,11 @@ function Button(props) {
   }, customProps, a11y, {
     id: id
   }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
-    className: finalStyle.overlay
+    className: (0, _cssUtility.cn)(finalStyle.overlay)
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: loaderParentClass
+    className: (0, _cssUtility.cn)(loaderParentClass)
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: loaderChildClass
+    className: (0, _cssUtility.cn)(loaderChildClass)
   }))));
 }
 

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/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/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/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",