@zohodesk/components 1.6.23 → 1.6.25

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

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _StencilsModule = _interopRequireDefault(require("./Stencils.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Stencils = /*#__PURE__*/function (_React$PureComponent) {
           isAnimated = _this$props.isAnimated;
       size = shape === 'rect' ? _StencilsModule["default"][size] : _StencilsModule["default"]["size_".concat(size)];
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass)
+        className: (0, _cssUtility.cn)("".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass))
       });
     }
   }]);

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

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -114,7 +116,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "checkbox",
         id: id,
-        className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+        className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
         name: name,
         value: value,
         checked: checked,
@@ -125,7 +127,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+        className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
         tabIndex: isReadOnly || disabled ? '-1' : '0'
       })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,

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

@@ -27,6 +27,8 @@ var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
@@ -538,11 +540,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function renderEmptyState() {
       var searchErrorText = this.props.searchErrorText;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TabsModule["default"].emptyStateContainer
+        className: (0, _cssUtility.cn)(_TabsModule["default"].emptyStateContainer)
       }, /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
         size: "small"
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TabsModule["default"].emptyStateTitle
+        className: (0, _cssUtility.cn)(_TabsModule["default"].emptyStateTitle)
       }, searchErrorText));
     }
   }, {
@@ -766,7 +768,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, this.renderTabs(children, [], true)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
       }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
-        className: hlClass,
+        className: (0, _cssUtility.cn)(hlClass),
         ref: this.getHighlightRef,
         "data-id": dataId,
         "data-test-id": dataId

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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>

package/lib/Tag/Tag.js

@@ -25,6 +25,8 @@ var _Button = _interopRequireDefault(require("../semantic/Button/Button"));
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagModule = _interopRequireDefault(require("./Tag.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -164,7 +166,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
       var isDarkPalette = palette === 'dark';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag)),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         onClick: this.handleSelect,
@@ -174,7 +176,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         "aria-labelledby": getAriaId,
         "data-selector-id": dataSelectorId
       }, customAttributes), (0, _utils.renderNode)(renderLeftChildren), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TagModule["default"].avatar
+        className: (0, _cssUtility.cn)(_TagModule["default"].avatar)
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         palette: isDarkPalette ? 'info' : avatarPalette,
         name: initial,
@@ -183,13 +185,13 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         textPalette: isDarkPalette ? 'white' : '',
         customClass: customAvatar
       }, avatarProps))) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].icon, " ").concat(customTagIcon)),
         "aria-hidden": true
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, _extends({
         name: iconName,
         size: iconSize
       }, iconProps))) : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].text, " ").concat(textSizes),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].text, " ").concat(textSizes)),
         "aria-hidden": true,
         id: getAriaId
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {

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

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