@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/Button/css/cssJSLogic.js

@@ -34,9 +34,9 @@ function cssJSLogic(_ref) {
   var paletteLower = palette.toLowerCase();
   var statusLower = status.toLowerCase();
   var canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
-  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, "".concat(style["".concat(paletteLower, "Strike")], " ").concat(style.strike), disabled && canStrikeThrough && shouldStrikeThroughDisabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
-  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
-  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.tickElement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "Tick")], statusLower != 'loading'), _compileClassNames3));
+  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, "".concat(style["".concat(paletteLower, "Strike")], " ").concat(style.strike), disabled && canStrikeThrough && shouldStrikeThroughDisabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _defineProperty(_compileClassNames, customButton, !!customButton), _compileClassNames));
+  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _compileClassNames2));
+  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.tickElement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "Tick")], statusLower != 'loading'), _defineProperty(_compileClassNames3, customStatus, !!customStatus), _compileClassNames3));
   return {
     buttonClass: buttonClass,
     loaderParentClass: loaderParentClass,

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,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Buttongrop -  Checking the "customclass" 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined customClassButtonGroup"
+    class="buttonGroup customClassButtonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -28,7 +28,7 @@ exports[`Buttongrop -  Checking the "customclass" 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -53,7 +53,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -78,7 +78,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -103,7 +103,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
 exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup footer "
+    class="buttonGroup footer"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -128,7 +128,7 @@ exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
 exports[`Buttongrop -  rendering the "type"   - header 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup header "
+    class="buttonGroup header"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -153,7 +153,7 @@ exports[`Buttongrop -  rendering the "type"   - header 1`] = `
 exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup tab "
+    class="buttonGroup tab"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -178,7 +178,7 @@ exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
 exports[`Buttongrop -  rendering the default props 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"

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

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Card rendering the a11y 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -24,14 +24,14 @@ exports[`Card rendering the a11y 1`] = `
 exports[`Card rendering the children 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
      
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -45,13 +45,13 @@ exports[`Card rendering the children 1`] = `
 exports[`Card rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="customClass flex cover coldir"
+    class="flex fullSize column customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -65,13 +65,13 @@ exports[`Card rendering the customClass 1`] = `
 exports[`Card rendering the dataId value 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="customdataId"
     data-selector-id="container"
     data-test-id="customdataId"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -85,7 +85,7 @@ exports[`Card rendering the dataId value 1`] = `
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -96,13 +96,13 @@ exports[`Card rendering the defult props 1`] = `
 exports[`Card rendering the htmlId 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -117,7 +117,7 @@ exports[`Card rendering the htmlId 1`] = `
 exports[`Card rendering the isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-scroll="true"
     data-selector-id="container"
@@ -125,7 +125,7 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
   >
      
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -139,13 +139,13 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="scrollToBottomCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToBottomCardContent"
@@ -161,13 +161,13 @@ exports[`Card should trigger fetch, when scroll to the bottom of the card while
 exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="scrollToTopCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToTopCardContent"

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

@@ -1,9 +1,9 @@
-// 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>
   <div
-    class="grow basis shrinkOff scrollboth"
+    class="flexible basis_zero noShrink scroll_both"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -19,7 +19,7 @@ exports[`CardContent Should render with name - both 1`] = `
 exports[`CardContent Should render with name - both 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleBoth"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -35,7 +35,7 @@ exports[`CardContent Should render with name - both 2`] = `
 exports[`CardContent Should render with name - horizontal 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollx"
+    class="flexible basis_zero noShrink scroll_horizontal"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -51,7 +51,7 @@ exports[`CardContent Should render with name - horizontal 1`] = `
 exports[`CardContent Should render with name - horizontal 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleX"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -67,7 +67,7 @@ exports[`CardContent Should render with name - horizontal 2`] = `
 exports[`CardContent Should render with name - none 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollnone"
+    class="flexible basis_zero noShrink scroll_hidden"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -83,7 +83,7 @@ exports[`CardContent Should render with name - none 1`] = `
 exports[`CardContent Should render with name - vertical 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -99,7 +99,7 @@ exports[`CardContent Should render with name - vertical 1`] = `
 exports[`CardContent Should render with name - vertical 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleY"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -115,7 +115,7 @@ exports[`CardContent Should render with name - vertical 2`] = `
 exports[`CardContent rendering children 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -128,7 +128,7 @@ exports[`CardContent rendering children 1`] = `
 exports[`CardContent rendering customClass is true 1`] = `
 <DocumentFragment>
   <div
-    class="cardCustomClass grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical cardCustomClass"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -141,7 +141,7 @@ exports[`CardContent rendering customClass is true 1`] = `
 exports[`CardContent rendering isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -155,7 +155,7 @@ exports[`CardContent rendering isScrollAttribute is true 1`] = `
 exports[`CardContent rendering shrink is true 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOn scrolly"
+    class="flexible basis_zero shrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -168,7 +168,7 @@ exports[`CardContent rendering shrink is true 1`] = `
 exports[`CardContent rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"

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

@@ -1,9 +1,9 @@
-// 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>
   <div
-    class="notScroll  shrinkOff"
+    class="noShrink notScroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -16,7 +16,7 @@ exports[`CardHeader rendering the Children is true 1`] = `
 exports[`CardHeader rendering the customClass  1`] = `
 <DocumentFragment>
   <div
-    class="notScroll cardHeader-class shrinkOff"
+    class="noShrink notScroll cardHeader-class"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -29,7 +29,7 @@ exports[`CardHeader rendering the customClass  1`] = `
 exports[`CardHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="notScroll  shrinkOff"
+    class="noShrink notScroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -40,7 +40,7 @@ exports[`CardHeader rendering the defult props 1`] = `
 exports[`CardHeader rendering the isScroll is true 1`] = `
 <DocumentFragment>
   <div
-    class="scroll  shrinkOff"
+    class="noShrink scroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"

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 }; }
@@ -152,7 +154,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         dataSelectorId: dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(secondaryText ? _CheckBoxModule["default"].withSecondaryText : '', " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : ''),
+        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(secondaryText ? _CheckBoxModule["default"].withSecondaryText : '', " ").concat(_CheckBoxModule["default"][size], " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '', "  ").concat(customCBoxSize),
         align: secondaryText ? "start" : undefined
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
@@ -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(customTickSize, " ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '')
+        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",