@zohodesk/components 1.6.23 → 1.6.24

package/es/Select/SelectWithAvatar.js

@@ -22,6 +22,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../MultiSelect/MultiSelect.module.css";
 import selectStyle from "./Select.module.css";
 
@@ -207,7 +208,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = customClass;
     const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
+      className: cn(`${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -299,7 +300,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, /*#__PURE__*/React.createElement(Card, {
       onScroll: this.handleScroll
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${selectStyle.search} ${selectStyle[size]}`
+      className: cn(`${selectStyle.search} ${selectStyle[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       inputRef: this.searchInputRef,
       maxLength: maxLength,
@@ -321,7 +322,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
       eleRef: this.suggestionContainerRef
     }, groupName ? /*#__PURE__*/React.createElement("div", {
-      className: style.title
+      className: cn(style.title)
     }, /*#__PURE__*/React.createElement(DropDownHeading, {
       text: groupName,
       a11y: {

package/es/Select/SelectWithIcon.js

@@ -22,6 +22,7 @@ import { scrollTo, findScrollEnd, getSearchString } from "../utils/Common.js";
 import { isObjectContainsSearchString } from "../utils/dropDownUtils.js";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 
 class SelectWithIcon extends Component {
@@ -386,11 +387,11 @@ class SelectWithIcon extends Component {
     } = customClass;
     const isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: cn(`${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
+      className: cn(`${className ? className : ''}`),
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -494,7 +495,7 @@ class SelectWithIcon extends Component {
         role: 'listbox'
       }
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
+      className: cn(`${style.search} ${style[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       onClear: this.onSearchClear,
       onChange: this.onSearch,

package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

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

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Select - Should close the dropdown when clicking outside 1`] = `
 <DocumentFragment>
@@ -123,7 +123,7 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -183,7 +183,7 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -192,9 +192,10 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -726,7 +727,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
       data-test-id="selectComponent"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -744,7 +745,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -804,7 +805,7 @@ exports[`Select - Should render all the options when search value is cleared 1`]
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -813,9 +814,10 @@ exports[`Select - Should render all the options when search value is cleared 1`]
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -1626,7 +1628,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -1644,7 +1646,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -1704,7 +1706,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -1713,9 +1715,10 @@ exports[`Select - Should render the only options matching search value 1`] = `
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -1871,7 +1874,7 @@ exports[`Select - Should render the only options matching search value even with
       data-test-id="selectComponent"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -1889,7 +1892,7 @@ exports[`Select - Should render the only options matching search value even with
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -1949,7 +1952,7 @@ exports[`Select - Should render the only options matching search value even with
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -1958,9 +1961,10 @@ exports[`Select - Should render the only options matching search value even with
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -2234,7 +2238,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
       data-test-id="selectComponent"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -2252,7 +2256,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -2312,7 +2316,7 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -2321,9 +2325,10 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -2595,7 +2600,7 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -2655,7 +2660,7 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -2664,9 +2669,10 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -3171,7 +3177,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
       data-test-id="selectComponent"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -3189,7 +3195,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -3249,7 +3255,7 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -3258,9 +3264,10 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -3556,7 +3563,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
       data-test-id="selectComponent"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -3574,7 +3581,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -3634,7 +3641,7 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -3643,9 +3650,10 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"
@@ -4121,7 +4129,7 @@ exports[`Select - Should update the value when select the option 2`] = `
 exports[`Select - Should update the value, when select the option using keyboard 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
@@ -4130,11 +4138,11 @@ exports[`Select - Should update the value, when select the option using keyboard
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container input"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -4148,7 +4156,7 @@ exports[`Select - Should update the value, when select the option using keyboard
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class=" pointer container medium  default  effect  borderColor_default inputDotted "
+            class="pointer container medium default effect borderColor_default inputDotted"
             data-id="selectComponent_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="selectComponent_textBox"
@@ -4162,39 +4170,39 @@ exports[`Select - Should update the value, when select the option using keyboard
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="icon  shrinkOff"
+              class="noShrink icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="rightPlaceholder inflex rowdir both"
+                class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
                   aria-hidden="true"
-                  class="arrowIcon flex cover coldir both"
+                  class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                   data-id="selectComponent_downIcon"
                   data-selector-id="container"
                   data-test-id="selectComponent_downIcon"
                 >
                   <i
                     aria-hidden="true"
-                    class="zd_font_icons basic icon-down    "
+                    class="zd_font_icons basic icon-down"
                     data-id="fontIcon"
                     data-selector-id="fontIcon"
                     data-test-id="fontIcon"
@@ -6992,7 +7000,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="pointer container medium default effect borderColor_default inputDotted"
+            class="pointer container medium default effect focus borderColor_default inputDotted"
             data-id="customDataId_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="customDataId_textBox"
@@ -7052,7 +7060,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
       </div>
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -7061,9 +7069,10 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
       data-selector-id="dropBox"
       data-test-id="customDataId_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="customDataId_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="customDataId_suggestions_subcontainer"
@@ -7317,7 +7326,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - empty state
         aria-owns="1"
         aria-readonly="true"
         autocomplete="off"
-        class="pointer container medium default border effect borderColor_default inputDotted"
+        class="pointer container medium default border effect focus borderColor_default inputDotted"
         data-id="selectComponent_textBox"
         data-selector-id="textBox"
         data-test-id="selectComponent_textBox"
@@ -7329,7 +7338,7 @@ exports[`Select dataId snapshot -  Should render with dataId prop - empty state
       />
     </div>
     <div
-      class="main hidden container bottomMid default"
+      class="main container bottomMid default"
       data-a11y-focus-main-area="true"
       data-arrow-position="mid"
       data-box-direction="bottom"
@@ -7338,9 +7347,10 @@ exports[`Select dataId snapshot -  Should render with dataId prop - empty state
       data-selector-id="dropBox"
       data-test-id="selectComponent_suggestions"
       dot-ui-element="dropbox"
+      style="z-index: 4;"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer shadow radius bounce defaultPalette"
         data-id="selectComponent_suggestions_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="selectComponent_suggestions_subcontainer"

package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

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

package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

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

package/es/Stencils/Stencils.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Stencils.module.css";
 export default class Stencils extends React.PureComponent {
   render() {
@@ -15,7 +16,7 @@ export default class Stencils extends React.PureComponent {
     } = this.props;
     size = shape === 'rect' ? style[size] : style[`size_${size}`];
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`
+      className: cn(`${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`)
     });
   }
 

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

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

package/es/Switch/Switch.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../Layout";
 import Label from "../Label/Label";
+import { cn } from "@dot-system/css-utility";
 import style from "./Switch.module.css";
 export default class Switch extends React.Component {
   constructor(props) {
@@ -65,7 +66,7 @@ export default class Switch extends React.Component {
     }, /*#__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,
@@ -76,7 +77,7 @@ export default class Switch extends React.Component {
       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/Switch/__tests__/__snapshots__/Switch.spec.js.snap

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

package/es/Tab/Tabs.js

@@ -19,6 +19,7 @@ import { Box, Container } from "../Layout";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import ListItem from "../ListItem/ListItem";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import tabsStyle from "./Tabs.module.css";
 import Popup from "../Popup/Popup";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
@@ -472,11 +473,11 @@ class Tabs extends React.Component {
       searchErrorText
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateContainer
+      className: cn(tabsStyle.emptyStateContainer)
     }, /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     }), /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateTitle
+      className: cn(tabsStyle.emptyStateTitle)
     }, searchErrorText));
   }
 
@@ -699,7 +700,7 @@ class Tabs extends React.Component {
     }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
     }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: hlClass,
+      className: cn(hlClass),
       ref: this.getHighlightRef,
       "data-id": dataId,
       "data-test-id": dataId

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

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

package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap

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

package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap

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

package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap

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

package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap

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

package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap

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