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

package/es/semantic/Button/Button.js

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

package/es/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="buttonReset "
+    class="buttonReset"
     data-id="semanticButton"
     data-test-id="semanticButton"
     type="button"

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -1,17 +1,17 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  active    inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_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"
@@ -25,14 +25,14 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   disabled   inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_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"
@@ -46,14 +46,14 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon    readonly  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_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"
@@ -67,14 +67,14 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated     inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_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"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -96,7 +96,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
   >
     <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"
@@ -110,14 +110,14 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      class="zd_font_icons basic icon-down arrowIcon_iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -131,14 +131,14 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
   >
     <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"
@@ -152,14 +152,14 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_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"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -189,7 +189,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
   >
     <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"
@@ -203,14 +203,14 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_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"

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     flex rowdir"
+    class="flex row varClass customContainer effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

package/es/v1/Button/Button.js

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

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 <DocumentFragment>
@@ -44,7 +44,7 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  customIconClass  "
+        class="zd_font_icons basic icon-plus customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
@@ -220,7 +220,7 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -264,7 +264,7 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="tick "
+        class="tick"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -470,7 +470,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - end 1`] =
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -515,7 +515,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - overlay 1
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -559,7 +559,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 1`]
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -949,7 +949,7 @@ exports[`Button - Component Should render with iconName and iconSize  1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
@@ -981,7 +981,7 @@ exports[`Button - Component Should render with iconPlacement  1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"

package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/es/v1/Switch/Switch.js

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

package/es/v1/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 - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

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

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

package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Loader renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="spinner "
+    class="spinner"
     role="img"
     viewBox="0 0 24 24"
   >

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

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

package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="tick "
+    class="tick"
     role="img"
     viewBox="0 0 24 24"
   >

package/lib/Accordion/Accordion.js

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

package/lib/Accordion/AccordionItem.js

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

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

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

package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

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

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

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