@zohodesk/dot 1.7.20-exp.1 → 1.7.20

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -2,22 +2,22 @@ import React, { Component, Fragment } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/lib/Layout';
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/es/Layout';
 import ListItem from '@zohodesk/components/es/ListItem/ListItem';
-import ListItemWithIcon from '@zohodesk/components/lib/ListItem/ListItemWithIcon';
-import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import ListItemWithIcon from '@zohodesk/components/es/ListItem/ListItemWithIcon';
+import DropDownHeading from '@zohodesk/components/es/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
+import Loader from '@zohodesk/svg/es/Loader/Loader';
 import CommonEmptyState from "../../emptystate/CommonEmptyState/CommonEmptyState";
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
+import { findScrollEnd } from '@zohodesk/components/es/utils/Common';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/es/RippleEffect/RippleEffect';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "./ToggleDropDown.module.css";
 export class ToggleDropDown extends Component {
   constructor(props) {

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -20,7 +20,7 @@
   max-width: var(--zd_size430) ;
 }
 .title {
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   color: var(--titleColor);
   word-wrap: break-word;
 }

package/es/emptystate/EditionPage/EditionPage.css

@@ -6,12 +6,12 @@
 }
 .header {
   font-size: var(--zd_font_size20) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   margin-top: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   margin: var(--zd_size20) 0 ;
 }
 .content {

package/es/emptystate/EditionPage/EditionPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import EmptyCrmPotential from '@zohodesk/svg/lib/emptystate/version3/EmptyCrmPotential';
+import EmptyCrmPotential from '@zohodesk/svg/es/emptystate/version3/EmptyCrmPotential';
 import style from "./EditionPage.css";
 export default class EditionPage extends Component {
   constructor(props) {

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
-import InconvenienceSVG from '@zohodesk/svg/lib/errorstate/version1/EmptyInconvenience';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import InconvenienceSVG from '@zohodesk/svg/es/errorstate/version1/EmptyInconvenience';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import commonStyle from "../EmptyStates.module.css";
 import style from "./Inconvenience.module.css";
 export default class Inconvenience extends React.Component {

package/es/errorstate/NoRequestFound/NoRequestFound.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import commonStyle from "../EmptyStates.module.css";
-import NoRequestFoundSVG from '@zohodesk/svg/lib/errorstate/version1/NoRequestFound';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import NoRequestFoundSVG from '@zohodesk/svg/es/errorstate/version1/NoRequestFound';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "./NoRequestFound.module.css";
 export default class NoRequestFound extends React.Component {
   constructor(props) {

package/es/errorstate/PermissionPlay/PermissionPlay.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
-import UnauthorizedLoginSVG from '@zohodesk/svg/lib/errorstate/version1/UnauthorizedLogin';
+import UnauthorizedLoginSVG from '@zohodesk/svg/es/errorstate/version1/UnauthorizedLogin';
 import commonStyle from "../EmptyStates.module.css";
 import style from "./PermissionPlay.module.css";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 export default class PermissionPlay extends React.Component {
   constructor(props) {
     super(props);

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,5 +1,5 @@
 .headtingText {
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   font-size: var(--zd_font_size50) ;
   letter-spacing: var(--zd_size1);
   margin-bottom: var(--zd_size5) ;

package/es/errorstate/RequestUrlNotFound/RequestUrlNotFound.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import UrlNotFound from '@zohodesk/svg/lib/errorstate/version1/UrlNotFound';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import UrlNotFound from '@zohodesk/svg/es/errorstate/version1/UrlNotFound';
 import LinkText from "../LinkText/LinkText";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import commonStyle from "../EmptyStates.module.css";
 import style from "./RequestUrlNotFound.module.css";
 export default class RequestUrlNotFound extends React.Component {

package/es/errorstate/UnableToProcess/UnableToProcess.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
-import UnableToProcessRequest from '@zohodesk/svg/lib/errorstate/version1/UnableToProcessRequest';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import UnableToProcessRequest from '@zohodesk/svg/es/errorstate/version1/UnableToProcessRequest';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import commonStyle from "../EmptyStates.module.css";
 import style from "./UnableToProcess.module.css";
 export default class UnableToProcess extends React.Component {

package/es/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
-import UnauthorizedLoginSVG from '@zohodesk/svg/lib/errorstate/version1/UnauthorizedLogin';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import UnauthorizedLoginSVG from '@zohodesk/svg/es/errorstate/version1/UnauthorizedLogin';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import commonStyle from "../EmptyStates.module.css";
 import style from "./UnauthorizedLogin.module.css";
 export default class UnauthorizedLogin extends React.Component {

package/es/errorstate/WillBack/WillBack.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import WillBeRightBack from '@zohodesk/svg/lib/errorstate/version1/WillBeRightBack';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import WillBeRightBack from '@zohodesk/svg/es/errorstate/version1/WillBeRightBack';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import commonStyle from "../EmptyStates.module.css";
 import style from "./WillBack.module.css";
 export default class WillBack extends React.Component {

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
+import Label from '@zohodesk/components/es/Label/Label';
+import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Label from '@zohodesk/components/es/Label/Label';
+import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 

package/es/form/fields/DateField/DateField.js

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
+import Label from '@zohodesk/components/es/Label/Label';
+import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -4,7 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';

package/es/form/fields/Fields.module.css

@@ -221,3 +221,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+   
+.phoneField{
+  composes: ltr from '~@zohodesk/components/es/common/common.module.css';
+}

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
+import Label from '@zohodesk/components/es/Label/Label';
+import MultiSelect from '@zohodesk/components/es/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /** CSS */
 

package/es/form/fields/PhoneField/PhoneField.js

@@ -5,7 +5,7 @@ import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import TextBoxField from "../TextBoxField/TextBoxField";
 import Link from "../../../Link/Link";
 /**** CSS ****/
@@ -129,7 +129,8 @@ export default class PhoneField extends PureComponent {
       "data-title": isDisabled ? title : null,
       dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
+      flexible: true,
+      className: style.phoneField
     }, /*#__PURE__*/React.createElement(TextBoxField, {
       labelName: labelName,
       id: id,

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

@@ -9,7 +9,7 @@ exports[`PhoneField rendering the defult props 1`] = `
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="phoneField grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/form/fields/RadioField/RadioField.js

@@ -5,8 +5,8 @@ import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import Icon from '@zohodesk/icons/es/Icon';
-import Label from '@zohodesk/components/lib/Label/Label';
-import Radio from '@zohodesk/components/lib/Radio/Radio';
+import Label from '@zohodesk/components/es/Label/Label';
+import Radio from '@zohodesk/components/es/Radio/Radio';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 /** Css */
 

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

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Select from '@zohodesk/components/lib/Select/Select';
+import Label from '@zohodesk/components/es/Label/Label';
+import Select from '@zohodesk/components/es/Select/Select';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** props ****/
 

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Tag from '@zohodesk/components/lib/Tag/Tag';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparator';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Tag from '@zohodesk/components/es/Tag/Tag';
+import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
+import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import Loader from '@zohodesk/svg/es/Loader/Loader';
+import DropDownSeparator from '@zohodesk/components/es/DropDown/DropDownSeparator';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import MultiSelectHeader from '@zohodesk/components/lib/MultiSelect/MultiSelectHeader';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import MultiSelectHeader from '@zohodesk/components/es/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from "../../../utils/General";
-import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common.js';
+import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
 import style from "./TagsMultiSelect.module.css";
 export default class TagsMultiSelect extends React.Component {
   constructor(props) {

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

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Box } from '@zohodesk/components/lib/Layout';
-import Label from '@zohodesk/components/lib/Label/Label';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Box } from '@zohodesk/components/es/Layout';
+import Label from '@zohodesk/components/es/Label/Label';
+import Popup from '@zohodesk/components/es/Popup/Popup';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
 import FieldContainer from "../FieldContainer/FieldContainer";

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

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Label from '@zohodesk/components/es/Label/Label';
+import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 

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

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import selectn from 'selectn';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /***** Methods *****/
 
 import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from "../../../utils/editorUtils"; //import './ZohoDeskEditor_Init';
@@ -243,8 +243,7 @@ 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')}`;
+      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: normal;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: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
       customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
       iframeHead.appendChild(customStyleTag);
     }

package/es/form/fields/TextEditor/TextEditor.module.css

@@ -32,7 +32,7 @@
 .textEditor * {
   box-sizing: initial;
   line-height: initial;
-  font-weight: var(--zd-fw-normal);
+  font-family: var(--zd_regular);
 }
 
 .textEditor {
@@ -717,7 +717,7 @@
 }
 
 :global .KB_Editor textarea.ze_area {
-  font-weight: var(--zd-fw-normal) !important;
+  font-family: var(--zd_regular) !important;
   font-size: var(--zd_font_size14)  !important;
   padding: var(--zd_size15) var(--zd_size20)  !important;
 }

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

@@ -4,7 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/Label/Label';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TextEditorWrapper from "../TextEditorWrapper/TextEditorWrapper";
 import FieldContainer from "../FieldContainer/FieldContainer";

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

@@ -4,8 +4,8 @@ import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import TextEditor from "../TextEditor/TextEditor";
-import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import Textarea from '@zohodesk/components/es/Textarea/Textarea';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { editorContentValidate } from "../../../utils/editorUtils";
 import style from "./TextEditorWrapper.module.css";
 /* eslint-disable react/no-deprecated */

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

@@ -4,10 +4,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
+import Label from '@zohodesk/components/es/Label/Label';
+import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Label from '@zohodesk/components/lib/Label/Label';
-import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import Label from '@zohodesk/components/es/Label/Label';
+import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
 import style from "./ValidationMessage.module.css";
 import { Icon } from '@zohodesk/icons';
 export default class ValidationMessage extends React.Component {

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from "./props/defaultProps";
 import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 import style from "./SetupDetailLayout.module.css";
 export default class SetupDetailLayout extends React.Component {

package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -30,7 +30,7 @@
 .title {
   font-size: var(--zd_font_size16) ;
   line-height: 1;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from "./props/propTypes";
 import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from "./props/defaultProps";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/Card';
 import PlusIcon from "../../PlusIcon/PlusIcon";
 import style from "./SubtabLayout.module.css";
 export class SubtabHeader extends React.Component {

package/es/list/Comment/Comment.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
+import Button from '@zohodesk/components/es/semantic/Button/Button';
 import style from "./Comment.module.css";
 export default class Comment extends Component {
   constructor(props) {

package/es/list/Icons/AddNewIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { AddNewIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import style from "./Icons.module.css";
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class AddNewIcon extends React.Component {
   render() {
     let {

package/es/list/Icons/CompleteIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { CompleteIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import style from "./Icons.module.css";
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
     let {

package/es/list/Icons/DeleteIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { DeleteComponent_propTypes } from "./props/propTypes";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class DeleteComponent extends React.Component {
   render() {
     let {

package/es/list/Icons/EditIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { EditIcon_propTypes } from "./props/propTypes";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class EditIcon extends React.Component {
   render() {
     let {

package/es/list/Icons/ReadUnreadIcon.js

@@ -3,7 +3,7 @@ import { ReadUnreadIcon_defaultProps } from "./props/defaultProps";
 import { ReadUnreadIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import style from "./Icons.module.css";
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class ReadUnreadIcon extends React.Component {
   render() {
     let {

package/es/list/Icons/SmartIcon.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { SmartIcon_propTypes } from "./props/propTypes";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class SmartIcon extends Component {
   render() {
     let {

package/es/list/ListLayout/ListLayout.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { ListLayout_defaultProps } from "./props/defaultProps";
 import { ListLayout_propTypes, Column_propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import style from "./ListLayout.module.css";
 export default class ListLayout extends Component {
   constructor(props) {