@zohodesk/components 1.6.22 → 1.6.23-exp-2

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

@@ -3,7 +3,7 @@
 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/es/CheckBox/CheckBox.js

@@ -7,6 +7,7 @@ import Label from "../Label/Label";
 import Typography from "../Typography/Typography";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./CheckBox.module.css";
 export default class CheckBox extends React.Component {
   constructor(props) {
@@ -108,14 +109,14 @@ export default class CheckBox extends React.Component {
       ref: getRef,
       name: name
     }), /*#__PURE__*/React.createElement("label", {
-      className: `${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`
+      className: cn(`${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`)
     }, activeStyle == 'tick' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 40 40"
     }, checked ? /*#__PURE__*/React.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: `${style.cbBox}`
+      className: cn(`${style.cbBox}`)
     }) : /*#__PURE__*/React.createElement("rect", {
       xmlns: "http://www.w3.org/2000/svg",
       x: "1",
@@ -123,14 +124,14 @@ export default class CheckBox extends React.Component {
       width: "38",
       height: "38",
       rx: "4",
-      className: `${style.cbBox}`
+      className: cn(`${style.cbBox}`)
     })), checked ? /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 44 44",
-      className: `${style.tick} ${style[`${size}tick`]}  ${disabled ? CssProvider('isDisabled') : ''} ${customTickSize}`
+      className: cn(`${style.tick} ${style[`${size}tick`]}  ${disabled ? CssProvider('isDisabled') : ''} ${customTickSize}`)
     }, /*#__PURE__*/React.createElement("polyline", {
       points: "12.56 19 19.61 26.06 40.39 5.28",
-      className: `${style.tickPath} ${style.checkedtickPath}`
+      className: cn(`${style.tickPath} ${style.checkedtickPath}`)
     })) : null) : /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 40 40"
@@ -141,10 +142,10 @@ export default class CheckBox extends React.Component {
       width: "38",
       height: "38",
       rx: "4",
-      className: `${style.cbBox}`
+      className: cn(`${style.cbBox}`)
     }), checked ? /*#__PURE__*/React.createElement("line", {
       xmlns: "http://www.w3.org/2000/svg",
-      className: `${style.linePath} ${style.cbBox}`,
+      className: cn(`${style.linePath} ${style.cbBox}`),
       x1: "11.47",
       y1: "20",
       x2: "28.53",