@zohodesk/components 1.6.22 → 1.6.23-exp-2

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

@@ -3,13 +3,13 @@
 exports[`ColorMultiSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -39,7 +38,7 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -86,13 +85,13 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
 exports[`ColorMultiSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -105,7 +104,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
       >
         <div
           aria-labelledby="7"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -122,8 +121,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -137,7 +135,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -155,7 +153,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
       >
         <div
           aria-labelledby="8"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -172,8 +170,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -187,7 +184,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -204,11 +201,10 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium clearIconSpace
-          "
+          class="custmSpan custmSpanMedium clearIconSpace"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -222,7 +218,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -266,7 +262,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons  rtl basic icon-delete   "
+                      class="zd_font_icons rtl basic icon-delete"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -287,13 +283,13 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
 exports[`ColorMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -305,11 +301,10 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -323,7 +318,7 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -370,13 +365,13 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
 exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -388,11 +383,10 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -406,7 +400,7 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -453,13 +447,13 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -471,11 +465,10 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -489,7 +482,7 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"

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

@@ -3,11 +3,11 @@
 exports[`ColorSingleSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -38,7 +38,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           >
             <div
               aria-labelledby="5"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -64,7 +64,7 @@ exports[`ColorSingleSelect Should render the default selected value 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"
@@ -81,11 +81,11 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
 exports[`ColorSingleSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -116,7 +116,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           >
             <div
               aria-labelledby="8"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -138,7 +138,7 @@ exports[`ColorSingleSelect Should render the selected value 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"
@@ -155,11 +155,11 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
 exports[`ColorSingleSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -201,7 +201,7 @@ exports[`ColorSingleSelect rendering the defult props 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"
@@ -218,11 +218,11 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
 exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -266,7 +266,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 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"
@@ -283,11 +283,11 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -318,7 +318,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           >
             <div
               aria-labelledby="13"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -344,7 +344,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 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"
@@ -361,11 +361,11 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -407,7 +407,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 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"

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

@@ -3,7 +3,7 @@
 exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 0, 255);"
@@ -14,7 +14,7 @@ exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '
 exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 255, 0);"
@@ -25,7 +25,7 @@ exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '
 exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(255, 0, 0);"
@@ -36,7 +36,7 @@ exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '
 exports[`ColorIndicator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -46,7 +46,7 @@ exports[`ColorIndicator rendering the defult props 1`] = `
 exports[`ColorIndicator rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -56,7 +56,7 @@ exports[`ColorIndicator rendering the shape of- circle 1`] = `
 exports[`ColorIndicator rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator square "
+    class="varClass indicator square"
     data-id=""
     data-test-id=""
   />
@@ -67,7 +67,7 @@ exports[`ColorIndicator rendering with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-label="color_indicator_aria-label"
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -87,7 +87,7 @@ exports[`ColorIndicator rendering with custom class 1`] = `
 exports[`ColorIndicator rendering with custom id and test id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id="custom-id"
     data-test-id="test-id"
   />
@@ -97,7 +97,7 @@ exports[`ColorIndicator rendering with custom id and test id 1`] = `
 exports[`ColorIndicator rendering with tagAttributes 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     title="color_indicator_tagAttributes"

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

@@ -4,7 +4,7 @@ exports[`ColoredTag rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -23,7 +23,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="3"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -43,7 +43,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="4"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-custom-attribute="true"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -63,7 +63,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="2"
-    class="container effect selected activedefault   medium lgRadius default   "
+    class="container effect selected activedefault medium lgRadius default"
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -82,7 +82,7 @@ exports[`ColoredTag rendering with text 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="5"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"

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));
   }
 

package/es/DateTime/DateTime.js

@@ -12,6 +12,7 @@ import YearView from "./YearView";
 import DateTimePopupHeader from "./DateTimePopupHeader";
 import DateTimePopupFooter from "./DateTimePopupFooter";
 import Time from "./Time";
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 import { formatDate, getMonthEnd } from "../utils/datetime/common";
 import { getIsEmptyValue } from "../utils/Common";
@@ -684,7 +685,7 @@ export default class DateTime extends React.PureComponent {
     }
 
     const childEle = /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${innerClass}`,
+      className: cn(`${style.container} ${innerClass}`),
       "data-id": `${dataId}_Calendar`,
       "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
@@ -696,7 +697,7 @@ export default class DateTime extends React.PureComponent {
       nextMonthTitleText: nextMonthTitleText,
       onModifyCalendar: this.modifyCalendar
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.subContainer
+      className: cn(style.subContainer)
     }, /*#__PURE__*/React.createElement(CalendarView, {
       needBorder: isDateTimeField || needAction,
       dataId: dataId,
@@ -735,7 +736,7 @@ export default class DateTime extends React.PureComponent {
       onCancel: this.handleClear,
       dataId: dataId
     }) : null, isYearView ? /*#__PURE__*/React.createElement("div", {
-      className: style.yearContainer
+      className: cn(style.yearContainer)
     }, /*#__PURE__*/React.createElement(YearView, {
       onSelectYear: this.handleSelectYear,
       onSelectMonth: this.handleSelectMonthViaYearView,
@@ -746,7 +747,7 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: isMonthOpen
     })) : null), renderCustomFooter);
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.dropBox} ${className}`,
+      className: cn(`${style.dropBox} ${className}`),
       "data-id": `${dataId}_dateBoxContainer`,
       "data-test-id": `${dataId}_dateBoxContainer`
     }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({

package/es/DateTime/DateTimePopupFooter.js

@@ -10,6 +10,7 @@ import { Container } from "../Layout";
 import Button from "../Button/Button";
 /** ** CSS *** */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 export default class DateTimePopupFooter extends PureComponent {
   render() {
@@ -32,7 +33,7 @@ export default class DateTimePopupFooter extends PureComponent {
       onClick: onSubmit,
       dataId: `${dataId}_saveBtn`
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.space
+      className: cn(style.space)
     }), /*#__PURE__*/React.createElement(Button, {
       text: cancelText,
       size: "medium",

package/es/DateTime/DateWidget.js

@@ -13,6 +13,7 @@ import { Container } from "../Layout";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateWidget.module.css";
 /**** Methods ****/
 
@@ -1054,17 +1055,17 @@ class DateWidgetComponent extends React.Component {
     const showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
     const showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, children ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
-      className: `${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`
+      className: cn(`${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`)
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
-      className: ` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`,
+      className: cn(` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`),
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({