@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/form/fields/SelectField/SelectField.js

@@ -15,6 +15,7 @@ import FieldContainer from "../FieldContainer/FieldContainer";
 
 /** CSS */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class SelectField extends PureComponent {
   constructor(props) {
@@ -107,7 +108,7 @@ export default class SelectField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -134,7 +135,7 @@ export default class SelectField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`)
     }, /*#__PURE__*/React.createElement(Select, _extends({
       options: options,
       selectedValue: selectedValue,

package/es/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -3,14 +3,14 @@
 exports[`SelectField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="selectField"
   >
     <div
-      class="fieldContainer  "
+      class="fieldContainer"
     >
       <div
-        class="container box_medium   "
+        class="container box_medium"
         data-selector-id="select"
       >
         <div
@@ -19,11 +19,11 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder 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"
@@ -37,7 +37,7 @@ exports[`SelectField rendering the defult props 1`] = `
                 aria-owns="2"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="selectComponent_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="selectComponent_textBox"
@@ -51,39 +51,39 @@ exports[`SelectField rendering the defult props 1`] = `
               />
             </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"

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -16,6 +16,7 @@ import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomRes
 import MultiSelectHeader from '@zohodesk/components/es/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from "../../../utils/General";
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
+import { cn } from "@dot-system/css-utility";
 import style from "./TagsMultiSelect.module.css";
 export default class TagsMultiSelect extends React.Component {
   constructor(props) {
@@ -172,8 +173,8 @@ export default class TagsMultiSelect extends React.Component {
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
-              ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder || isEditable && isFocus ? style.active : ''}` : ''} ${className}`,
+      className: cn(`${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
+              ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder || isEditable && isFocus ? style.active : ''}` : ''} ${className}`),
       onClick: stopBubbling,
       "data-id": `${dataId}_tagsContainer`,
       "data-test-id": `${dataId}_tagsContainer`,
@@ -217,7 +218,7 @@ export default class TagsMultiSelect extends React.Component {
       shrink: true,
       className: style.inputWrapper
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.custmSpan
+      className: cn(style.custmSpan)
     }, name), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: htmlId,
       dataId: `${dataId}_tagInp`,

package/es/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -3,20 +3,19 @@
 exports[`TagsMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  hasBorder
-              borderColor_default  "
+    class="container hasBorder borderColor_default"
     data-id="_tagsContainer"
     data-selector-id="tagsMultiSelectField"
     data-test-id="_tagsContainer"
   >
     <div
-      class="tagDiv  flex rowdir wrap vCenter scrolly"
+      class="flex row wrap alignItems_center scroll_vertical tagDiv"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="inputWrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink inputWrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -25,17 +24,17 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="varClass customContainer    effect     container custmInp  flex rowdir"
+          class="flex row varClass customContainer effect container custmInp"
           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"
           >
             <input
-              class="  container xsmall  default  effect  borderColor_default  input"
+              class="container xsmall default effect borderColor_default input"
               data-id="_tagInp"
               data-selector-id="textBoxIcon"
               data-test-id="_tagInp"
@@ -46,13 +45,13 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
             />
           </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"

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -11,6 +11,7 @@ import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** css ****/
 
+import { cn } from "@dot-system/css-utility";
 import fieldStyle from "../Fields.module.css";
 import style from "./TagsMultiSelectField.module.css";
 
@@ -193,7 +194,7 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
+    className: cn(`${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`),
     tabIndex: "0",
     "aria-label": `${labelName}`,
     "data-selector-id": dataSelectorId

package/es/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -9,20 +9,19 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="container  hasBorder
-              borderColor_default  "
+      class="container hasBorder borderColor_default"
       data-id="_tagsContainer"
       data-selector-id="tagsMultiSelectField"
       data-test-id="_tagsContainer"
     >
       <div
-        class="tagDiv  flex rowdir wrap vCenter scrolly"
+        class="flex row wrap alignItems_center scroll_vertical tagDiv"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="inputWrapper grow basisAuto shrinkOn"
+          class="flexible basis_auto shrink inputWrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -31,17 +30,17 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="varClass customContainer    effect     container custmInp  flex rowdir"
+            class="flex row varClass customContainer effect container custmInp"
             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"
             >
               <input
-                class="  container xsmall  default  effect  borderColor_default  input"
+                class="container xsmall default effect borderColor_default input"
                 data-id="_tagInp"
                 data-selector-id="textBoxIcon"
                 data-test-id="_tagInp"
@@ -52,13 +51,13 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
               />
             </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"

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class TextBoxField extends PureComponent {
   constructor(props) {
@@ -93,7 +94,7 @@ export default class TextBoxField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -122,7 +123,7 @@ export default class TextBoxField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: uniqueId,
       id: id,

package/es/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -3,24 +3,24 @@
 exports[`TextBoxField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="textBoxField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         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"
         >
           <input
-            class="  container xmedium  primary  effect  borderColor_default  "
+            class="container xmedium primary effect borderColor_default"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
             data-test-id="textBoxIcon"
@@ -31,13 +31,13 @@ exports[`TextBoxField rendering the defult props 1`] = `
           />
         </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"

package/es/form/fields/TextEditor/TextEditor.js

@@ -10,6 +10,7 @@ import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImag
 
 /***** components *****/
 
+import { cn } from "@dot-system/css-utility";
 import styles from "./TextEditor.module.css";
 /* eslint-disable camelcase */
 
@@ -242,10 +243,26 @@ export default class TextEditor extends Component {
 
       let customStyleTag = document.createElement('style');
       customStyleTag.type = 'text/css';
-      const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
-      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}
-      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
-      customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
+      const fontCSS = `
+        @font-face {
+          font-family: Lato;
+          src: url("https://static.zohocdn.com/webfonts/lato2regular/font.woff2")
+            format("woff2");
+          font-weight: 400;
+          font-style: normal;
+          font-display: swap;
+        }
+        @font-face {
+          font-family: Lato;
+          src: url("https://static.zohocdn.com/webfonts/lato2bold/font.woff2")
+            format("woff2");
+          font-weight: 700 900;
+          font-style: normal;
+          font-display: swap;
+        }
+      `;
+      const customizedCSS = `pre {white-space: pre-wrap} ${fontCSS} ${customCSS}`;
+      customStyleTag.textContent = `${customizedCSS}`;
       iframeHead.appendChild(customStyleTag);
     }
   }
@@ -408,7 +425,7 @@ export default class TextEditor extends Component {
     }), editorDoc && ImgLazyLoad ? /*#__PURE__*/React.createElement(ImgLazyLoad, {
       node: editorDoc
     }) : null, isReadOnly || isDisabled ? /*#__PURE__*/React.createElement("div", {
-      className: styles.readOnlyMask
+      className: cn(styles.readOnlyMask)
     }) : null);
   }
 

package/es/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -3,15 +3,14 @@
 exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="textEditor large borderTop
-        light   editorHide  flex cover coldir"
+    class="flex fullSize column textEditor large borderTop light editorHide"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -12,6 +12,7 @@ import TextEditorWrapper from "../TextEditorWrapper/TextEditorWrapper";
 import FieldContainer from "../FieldContainer/FieldContainer";
 /** Css */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class TextEditorField extends PureComponent {
   constructor(props) {
@@ -109,7 +110,7 @@ export default class TextEditorField extends PureComponent {
       ValidationMessageProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`),
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
@@ -135,7 +136,7 @@ export default class TextEditorField extends PureComponent {
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(TextEditorWrapper, _extends({
       needEditor: needEditor,
       onChange: this.handleChange,

package/es/form/fields/TextEditorField/__tests__/__snapshots__/TextEditorField.spec.js.snap

@@ -3,18 +3,18 @@
 exports[`TextEditorField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  "
+    class="container"
     data-selector-id="textEditorField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
         class="container"
         data-selector-id="textEditorWrapper"
       >
         <textarea
-          class="textBox  container xsmall  defaultWidth primary needBorder noresize     effect  borderColor_default"
+          class="container xsmall defaultWidth primary needBorder noresize effect borderColor_default textBox"
           data-id="TextareaComp"
           data-selector-id="textarea"
           data-test-id="TextareaComp"

package/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -9,6 +9,7 @@ import TextEditor from "../TextEditor/TextEditor";
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { editorContentValidate } from "../../../utils/editorUtils";
+import { cn } from "@dot-system/css-utility";
 import style from "./TextEditorWrapper.module.css";
 /* eslint-disable react/no-deprecated */
 
@@ -130,7 +131,7 @@ export default class TextEditorWrapper extends Component {
     };
     let editorOptionsObject = Object.assign(defaultObj, editorOptions);
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
+      className: cn(style.container),
       "data-selector-id": dataSelectorId
     }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
       onFocus: this.handleTextareaFocus,
@@ -153,7 +154,7 @@ export default class TextEditorWrapper extends Component {
       isActive: isEditorShow,
       component: "div"
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.textEditor
+      className: cn(style.textEditor)
     }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
       id: id,
       value: value,

package/es/form/fields/TextEditorWrapper/__tests__/__snapshots__/TextEditorWrapper.spec.js.snap

@@ -7,7 +7,7 @@ exports[`TextEditorWrapper rendering the defult props 1`] = `
     data-selector-id="textEditorWrapper"
   >
     <textarea
-      class="textBox  container small  defaultWidth primary needBorder noresize  smallanimated   effect  borderColor_default"
+      class="container small defaultWidth primary needBorder noresize smallanimated effect borderColor_default textBox"
       data-id="TextareaComp"
       data-selector-id="textarea"
       data-test-id="TextareaComp"

package/es/form/fields/TextareaField/TextareaField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class TextareaField extends PureComponent {
   constructor(props) {
@@ -123,7 +124,7 @@ export default class TextareaField extends PureComponent {
       }
     }));
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -150,11 +151,11 @@ export default class TextareaField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/React.createElement("div", {
-      className: style.hasChildren
+      className: cn(style.hasChildren)
     }, textAreaContent, /*#__PURE__*/React.createElement("div", {
-      className: `${style.rightPlaceholder} ${rightPlaceholderCustomClass}`
+      className: cn(`${style.rightPlaceholder} ${rightPlaceholderCustomClass}`)
     }, renderRightPlaceholderNode)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,

package/es/form/fields/TextareaField/__tests__/__snapshots__/TextareaField.spec.js.snap

@@ -3,14 +3,14 @@
 exports[`TextareaField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="textareaField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <textarea
-        class="  container xsmall  defaultWidth primary needBorder resizeY  xsmallanimated   effect  borderColor_default"
+        class="container xsmall defaultWidth primary needBorder resizeY xsmallanimated effect borderColor_default"
         data-id="property(undefined)"
         data-selector-id="textarea"
         data-test-id="property(undefined)"

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -6,6 +6,7 @@ import { propTypes } from "./props/propTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { renderNode, isRenderable } from '@zohodesk/utils';
 import Label from '@zohodesk/components/es/Label/Label';
+import { cn } from "@dot-system/css-utility";
 import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
 import { Icon } from '@zohodesk/icons';
 import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
@@ -83,7 +84,7 @@ export default class ValidationMessage extends React.Component {
       customClass: `${style.lable} ${customLabelClass}`,
       id: id
     }), tooltip ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${colors[palette]}`,
+      className: cn(`${style.icon} ${colors[palette]}`),
       "data-title": tooltip
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-information57",

package/es/form/fields/ValidationMessage/__tests__/__snapshots__/ValidationMessage.spec.js.snap

@@ -3,15 +3,14 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary "
+    class="primary"
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
     role="alert"
   >
     <label
-      class="label title xsmall mandatory font_default
-           cursor lable  "
+      class="label title xsmall mandatory font_default cursor lable"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/es/form/layout/Field/Field.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Field.module.css";
 export default class Field extends Component {
   render() {
@@ -14,13 +15,13 @@ export default class Field extends Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
+      className: cn(`${column == 'single' ? `${style.singleColumn}` : `${style[width]} `} ${containerClass ? containerClass : ''}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''} ${`fieldWidth_${width}`}`
+      className: cn(`${`fieldWidth_${width}`} ${className ? className : ''}`)
     }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
-      className: style.rowBreak
+      className: cn(style.rowBreak)
     }));
   }
 

package/es/form/layout/Field/__tests__/__snapshots__/Field.spec.js.snap

@@ -3,10 +3,10 @@
 exports[`Field rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" half "
+    class="half"
   >
     <div
-      class=" fieldWidth_half"
+      class="fieldWidth_half"
     />
   </div>
 </DocumentFragment>