@zohodesk/dot 1.0.0-temp-230.4 → 1.0.0-temp-233.1

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) {
@@ -102,10 +103,9 @@ export default class TagsMultiSelect extends React.Component {
     this.containerRef = ele;
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -173,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`,
@@ -218,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`,
@@ -239,91 +239,88 @@ export default class TagsMultiSelect extends React.Component {
     }, TextBoxIconProps), getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isAnimate: false,
+      isActive: isPopupReady,
+      isArrow: false,
+      getRef: getContainerRef,
+      isBoxPaddingNeed: true,
+      size: boxSize,
+      boxPosition: boxPosition,
+      isPadding: false,
+      customClass: {
+        customDropBoxWrap: style.dropdown,
+        customDropBox: dropBoxClass
+      },
+      dataId: `${dataId}_dropbox`,
+      isResponsivePadding: true,
+      alignBox: "row",
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: searchList,
+      dataId: `${dataId}_selectAll`
+    }) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: `${tabletMode ? '' : style.viewpopNew}`
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: `${tabletMode ? '' : style.viewpopNew}`,
+      onScroll: this.onScroll,
+      eleRef: this.getContainerRef
+    }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      dataId: `${dataId}_Options`
+    }, searchList.map((item, index) => {
       let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        isAnimate: false,
-        isActive: isPopupReady,
-        isArrow: false,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: true,
-        size: boxSize,
-        boxPosition: boxPosition,
-        isPadding: false,
-        customClass: {
-          customDropBoxWrap: style.dropdown,
-          customDropBox: dropBoxClass
-        },
-        dataId: `${dataId}_dropbox`,
-        isResponsivePadding: true,
+        name,
+        isNew,
+        listItemProps: listProps
+      } = item;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, _extends({}, ListItemProps, {
+        key: index,
+        index: index,
+        autoHover: true,
+        value: isNew ? '' : name,
+        title: isNew ? '' : name,
+        onClick: addTag.bind(this, item),
+        needTick: true,
+        highlight: selectSearchIndex === index,
+        getRef: this.getSelectedItemRef,
+        isDisabled: listDisabled,
+        customProps: listProps,
+        customClass: listItemClass
+      }), isNew ? /*#__PURE__*/React.createElement(Container, {
         alignBox: "row",
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset
+        align: "vertical"
       }, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: searchList,
-        dataId: `${dataId}_selectAll`
-      }) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: `${tabletMode ? '' : style.viewpopNew}`
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
-        scroll: "vertical",
-        className: `${tabletMode ? '' : style.viewpopNew}`,
-        onScroll: this.onScroll,
-        eleRef: this.getContainerRef
-      }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
+        className: style.newTagLabel
+      }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
         shrink: true,
-        dataId: `${dataId}_Options`
-      }, searchList.map((item, index) => {
-        let {
-          name,
-          isNew,
-          listItemProps: listProps
-        } = item;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, _extends({}, ListItemProps, {
-          key: index,
-          index: index,
-          autoHover: true,
-          value: isNew ? '' : name,
-          title: isNew ? '' : name,
-          onClick: addTag.bind(this, item),
-          needTick: true,
-          highlight: selectSearchIndex === index,
-          getRef: this.getSelectedItemRef,
-          isDisabled: listDisabled,
-          customProps: listProps,
-          customClass: listItemClass
-        }), isNew ? /*#__PURE__*/React.createElement(Container, {
-          alignBox: "row",
-          align: "vertical"
-        }, /*#__PURE__*/React.createElement(Box, {
-          className: style.newTagLabel
-        }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
-          shrink: true,
-          "data-title": name,
-          className: `${style.dotted} ${style.newTagText} `,
-          dataId: `${dataId}_new_tag_text`
-        }, name)) : null));
-      })) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        dataId: `${dataId}_empty`
-      }, /*#__PURE__*/React.createElement(Container, {
-        className: style.searchEmpty
-      }, /*#__PURE__*/React.createElement(CommonEmptyState, {
-        title: i18nKeys.emptyTitleText,
-        description: i18nKeys.emptyDescription,
-        size: "small",
-        getEmptyState: this.emptySearchSVG
-      })))))));
-    }) : null);
+        "data-title": name,
+        className: `${style.dotted} ${style.newTagText} `,
+        dataId: `${dataId}_new_tag_text`
+      }, name)) : null));
+    })) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      dataId: `${dataId}_empty`
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: style.searchEmpty
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: i18nKeys.emptyTitleText,
+      description: i18nKeys.emptyDescription,
+      size: "small",
+      getEmptyState: this.emptySearchSVG
+    })))))))) : null);
   }
 
 }

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"