@zohodesk/components 1.6.23 → 1.6.24

package/README.md

@@ -2,6 +2,10 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.24
+
+- **RippleEffect** Reordered className values to ensure customClass is always appended last to adopt CSS utility .
+
 # 1.6.23
 
 - Removed the empty string fallback from the `font-family` variable definition in `AppContainer`, as the font fallback behavior is now handled correctly.

package/es/Accordion/Accordion.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Accordion_defaultProps } from "./props/defaultProps";
 import { Accordion_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);
@@ -62,7 +63,7 @@ export default class Accordion extends React.Component {
       ariaHaspopup
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
+      className: cn(className ? className : ''),
       style: {
         height
       },

package/es/Accordion/AccordionItem.js

@@ -3,6 +3,7 @@ import { AccordionItem_defaultProps } from "./props/defaultProps";
 import { AccordionItem_propTypes } from "./props/propTypes";
 import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
 import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { cn } from "@dot-system/css-utility";
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);
@@ -36,13 +37,13 @@ export default class AccordionItem extends React.Component {
       role
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
+      className: cn(className ? className : ''),
       "data-id": dataId,
       "data-test-id": dataId,
       role: role,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: innerClass ? innerClass : '',
+      className: cn(innerClass ? innerClass : ''),
       onClick: selectMenu.bind(this, id)
     }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
       name: "slideDown",

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

package/es/AppContainer/AppContainer.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../Layout";
 import Tooltip from "../Tooltip/Tooltip";
+import { cn } from "@dot-system/css-utility";
 import "../common/basic.module.css";
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
@@ -119,7 +120,7 @@ export default class AppContainer extends React.Component {
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
-      className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
+      className: cn(`${style.container} ${style.tooltip} ${tooltipParentClass}`),
       "data-id": `${dataId}_tooltip`,
       "data-test-id": `${dataId}_tooltip`,
       "data-selector-id": `${dataSelectorId}_tooltip`

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

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

package/es/Avatar/Avatar.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { getInitial } from "../utils/getInitial";
 import AvatarSize from "../Provider/AvatarSize";
+import { cn } from "@dot-system/css-utility";
 import style from "./Avatar.module.css";
 /*
 1. need to change name into firstName lastName
@@ -156,7 +157,7 @@ export default class Avatar extends React.Component {
     let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
+      className: cn(`${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`),
       "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
       "data-test-id": dataId,
@@ -164,12 +165,12 @@ export default class Avatar extends React.Component {
       "data-selector-id": dataSelectorId,
       tabIndex: onClick ? 0 : null
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
-      className: `${style.initial}`,
+      className: cn(`${style.initial}`),
       "data-id": `${dataId}_AvatarInitial`,
       "data-test-id": `${dataId}_AvatarInitial`,
       "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
+      className: cn(`${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`),
       "data-id": `${dataId}_AvatarImg`,
       "data-test-id": `${dataId}_AvatarImg`,
       "data-selector-id": `${dataSelectorId}_AvatarImg`,
@@ -179,7 +180,7 @@ export default class Avatar extends React.Component {
       src: showAlternateAvatar ? alternateSrc : src,
       alt: name
     }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
-      className: `${style.shadow} ${textStyle} `
+      className: cn(`${style.shadow} ${textStyle} `)
     })));
   }
 

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

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

package/es/AvatarTeam/AvatarTeam.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Avatar from "../Avatar/Avatar";
+import { cn } from "@dot-system/css-utility";
 import style from "./AvatarTeam.module.css";
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
@@ -48,7 +49,7 @@ export default class AvatarTeam extends React.Component {
     } = customClass;
     let border = borderOnHover || onClick;
     return /*#__PURE__*/React.createElement("span", _extends({
-      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
+      className: cn(`${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-selector-id": dataSelectorId
@@ -68,8 +69,8 @@ export default class AvatarTeam extends React.Component {
       needBorder: needBorder,
       needDefaultBorder: needDefaultBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
-      className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
-          ${style[`${size}team`]} ${customAvatarTeam}`
+      className: cn(`${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
+          ${style[`${size}team`]} ${customAvatarTeam}`)
     }));
   }
 

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

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

package/es/Button/Button.js

@@ -10,6 +10,7 @@ import { mergeStyle } from '@zohodesk/utils'; // component registry
 
 import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // css
 
+import { cn } from "@dot-system/css-utility";
 import style from "./css/Button.module.css";
 /*
 Button text and children props?
@@ -45,7 +46,7 @@ function Button(props) {
   });
   let statusLower = status.toLowerCase();
   return /*#__PURE__*/React.createElement("button", _extends({
-    className: buttonClass,
+    className: cn(buttonClass),
     "data-id": disabled ? `${dataId}_disabled` : dataId,
     "data-test-id": disabled ? `${dataId}_disabled` : dataId,
     disabled: disabled || statusLower === 'loading',
@@ -57,11 +58,11 @@ function Button(props) {
   }, customProps, a11y, {
     id: id
   }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
-    className: finalStyle.overlay
+    className: cn(finalStyle.overlay)
   }, /*#__PURE__*/React.createElement("div", {
-    className: loaderParentClass
+    className: cn(loaderParentClass)
   }, /*#__PURE__*/React.createElement("div", {
-    className: loaderChildClass
+    className: cn(loaderChildClass)
   }))));
 }
 

package/es/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 be render with the basic set customButtonclass with buttonClass  1`] = `
 <DocumentFragment>

package/es/Buttongroup/Buttongroup.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 "./Buttongroup.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
@@ -18,17 +19,17 @@ export default class Buttongroup extends React.Component {
     let btnGroup = [];
     children && children.forEach(child => {
       let btnRight = /*#__PURE__*/React.createElement("span", {
-        className: style[type]
+        className: cn(style[type])
       }, child);
       btnGroup.push(btnRight);
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
+      className: cn(`${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: style[`align${buttonPosition}`]
+      className: cn(style[`align${buttonPosition}`])
     }, children));
   }
 

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

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

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

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

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CardContent Should render with name - both 1`] = `
 <DocumentFragment>

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

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

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",

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

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

package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorMultiSelect Should render the default selected value 1`] = `
 <DocumentFragment>
@@ -103,7 +103,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="7"
+          aria-labelledby="3"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -115,7 +115,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="7"
+            id="3"
           >
             Red
           </div>
@@ -152,7 +152,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="multiSelect_selectedOptions"
       >
         <div
-          aria-labelledby="8"
+          aria-labelledby="4"
           class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
@@ -164,7 +164,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           <div
             aria-hidden="true"
             class="text mediumtext"
-            id="8"
+            id="4"
           >
             Green
           </div>

package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorSingleSelect Should render the default selected value 1`] = `
 <DocumentFragment>
@@ -12,11 +12,11 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="3"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="3"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -37,7 +37,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="5"
+              aria-labelledby="3"
               class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
@@ -49,7 +49,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="5"
+                id="3"
               >
                 Red
               </div>
@@ -90,11 +90,11 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="6"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="6"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -115,7 +115,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="8"
+              aria-labelledby="3"
               class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
@@ -125,7 +125,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="8"
+                id="3"
               />
             </div>
           </div>
@@ -227,11 +227,11 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="9"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="9"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -292,11 +292,11 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="11"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="11"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
@@ -317,7 +317,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              aria-labelledby="13"
+              aria-labelledby="3"
               class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
@@ -329,7 +329,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
               <div
                 aria-hidden="true"
                 class="text mediumtext"
-                id="13"
+                id="3"
               >
                 Red
               </div>
@@ -370,11 +370,11 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        aria-controls="14"
+        aria-controls="1"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-owns="14"
+        aria-owns="1"
         aria-readonly="false"
         class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { DUMMY_OBJECT } from "../../../utils/Common";
+import { cn } from "@dot-system/css-utility";
 import style from "./ColorIndicator.module.css";
 
 function ColorIndicator(props) {
@@ -20,7 +21,7 @@ function ColorIndicator(props) {
     background
   } = colorConfig || DUMMY_OBJECT;
   return /*#__PURE__*/React.createElement("div", _extends({}, tagAttributes, a11yAttributes, {
-    className: `${style.varClass} ${style.indicator} ${style[shape]} ${customClass}`,
+    className: cn(`${style.varClass} ${style.indicator} ${style[shape]} ${customClass}`),
     style: {
       backgroundColor: background
     },

package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>

package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColoredTag rendering the defult props 1`] = `
 <DocumentFragment>
@@ -22,7 +22,7 @@ exports[`ColoredTag rendering the defult props 1`] = `
 exports[`ColoredTag rendering with colorConfig 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
+    aria-labelledby="1"
     class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -33,7 +33,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="3"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -42,7 +42,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
 exports[`ColoredTag rendering with customAttributes 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
+    aria-labelledby="1"
     class="container effect medium lgRadius default"
     data-custom-attribute="true"
     data-id="tag_Tag"
@@ -53,7 +53,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="4"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -62,7 +62,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
 exports[`ColoredTag rendering with isActive true 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
+    aria-labelledby="1"
     class="container effect selected activedefault medium lgRadius default"
     data-id="tag_TagSelected"
     data-selector-id="tag"
@@ -72,7 +72,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="2"
+      id="1"
     />
   </div>
 </DocumentFragment>
@@ -81,7 +81,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
 exports[`ColoredTag rendering with text 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="5"
+    aria-labelledby="1"
     class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -92,7 +92,7 @@ exports[`ColoredTag rendering with text 1`] = `
     <div
       aria-hidden="true"
       class="text mediumtext"
-      id="5"
+      id="1"
     >
       Colored Tag
     </div>

package/es/DateTime/CalendarView.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Span_propTypes, CalendarView_propTypes } from "./props/propTypes";
 import { CalendarView_defaultProps, Span_defaultProps } from "./props/defaultProps";
 import { Container, Box } from "../Layout";
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 import { getMonthEnd } from "../utils/datetime/common";
 import DaysRow from "./DaysRow";
@@ -177,7 +178,7 @@ export default class CalendarView extends React.PureComponent {
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
       "data-test-id": `${dataId}_dateContainer`,
-      className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
+      className: cn(`${style.dateContainer} ${needBorder ? style.separator : ''}`)
     }, rows));
   }