@zohodesk/dot 1.0.0-temp-214 → 1.0.0-temp-216

package/es/ToastMessage/ToastMessage.js

@@ -4,11 +4,11 @@ import { propTypes } from "./props/propTypes"; //components
 
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import AutoClose from "../actions/AutoClose";
-import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
+import a11yStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css'; //style
 
 import style from "./ToastMessage.module.css";
 

package/es/Upload/Upload.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import Image from "../Image/Image";
 import style from "./Upload.module.css";
 export default class Upload extends React.Component {

package/es/VideoLookup/VideoLookup.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React, { useCallback, useEffect } from 'react';
-import Icon from '@zohodesk/icons/lib/Icon';
+import Icon from '@zohodesk/icons/es/Icon';
 import Button from '@zohodesk/components/es/Button/Button';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import { mergeStyle } from '@zohodesk/utils';

package/es/alert/AlertHeader/AlertHeader.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Title from "../../lookup/header/Title/Title";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 import Close from "../../lookup/header/Close/Close";
 import style from "./AlertHeader.module.css";

package/es/alert/AlertLookup/AlertLookup.js

@@ -6,7 +6,7 @@ import { propTypes } from "./props/propTypes";
 
 import Lookup from "../../lookup/Lookup/Lookup";
 import AlertHeader from "../AlertHeader/AlertHeader";
-import Button from '@zohodesk/components/lib/Button/Button';
+import Button from '@zohodesk/components/es/Button/Button';
 import Section from "../../lookup/Section/Section";
 import FormAction from "../../FormAction/FormAction";
 /**** CSS ****/

package/es/avatar/AvatarClose/AvatarClose.js

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

package/es/avatar/AvatarCollision/AvatarCollision.js

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

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import { Container } from '@zohodesk/components/es/Layout';
+import AvatarSize from '@zohodesk/components/es/Provider/AvatarSize';
 import style from "./AvatarIcon.module.css";
 export default class AvatarIcon extends React.Component {
   render() {

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import style from "./AvatarStatus.module.css";
 export default class AvatarStatus extends React.Component {
   constructor(props) {

package/es/avatar/AvatarThread/AvatarThread.js

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

package/es/avatar/AvatarUser/AvatarUser.js

@@ -4,7 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarIcon from "../AvatarIcon/AvatarIcon";
 import { Icon } from '@zohodesk/icons';
 import style from "./AvatarUser.module.css";

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import AvatarTeam from '@zohodesk/components/es/AvatarTeam/AvatarTeam';
 import style from "./AvatarWithTeam.module.css";
 export default class AvatarWithTeam extends React.Component {
   render() {

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { Container } from '@zohodesk/components/es/Layout';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import style from "./_FreezeLayer.module.css";
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import { getDotLibraryConfig } from "../Provider/Config";
 export default class FreezeLayer extends Component {
   constructor(props) {

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
-import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import TextBox from '@zohodesk/components/es/TextBox/TextBox';
+import DropDownHeading from '@zohodesk/components/es/DropDown/DropDownHeading';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "./SelectDropdown.module.css";
 
 class SelectDropdown extends React.Component {

package/es/dot_layer.module.css

@@ -0,0 +1 @@
+@layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;

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

@@ -3,12 +3,11 @@ import React, { PureComponent } from 'react';
 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/v1/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 ****/
 
@@ -88,12 +87,15 @@ export default class CheckBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
-      isInlineField: true,
-      customStyle: labelCustomClass,
-      testId: id,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      id: id,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      infoText: infoText,
+      customClass: `${!isDirectCol ? style.checkboxText : ''} ${!isDirectCol ? style[`lineClamp_${lineClamp}`] : ''} ${isReadOnly || isDisabled ? style.cbTextReadonly : style.cbTextPointer} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      title: labelName,
       onClick: !removeEvent ? this.handleLabelClick : null,
+      variant: isDirectCol ? 'default' : 'primary',
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }));
     return /*#__PURE__*/React.createElement("div", {

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

@@ -3,12 +3,11 @@ import React, { PureComponent } from 'react';
 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/v1/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 ****/
 
@@ -130,10 +129,11 @@ export default class CurrencyField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
-      customStyle: labelCustomClass,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

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

@@ -3,12 +3,11 @@ import React, { PureComponent } from 'react';
 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/v1/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 ****/
 
@@ -134,12 +133,14 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
-      customStyle: labelCustomClass,
       htmlFor: getAriaId,
-      testId: labelName,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps,
+      id: labelName
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {

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-zone  from '~@zohodesk/components/es/common/common.module.css';
+}

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

@@ -3,12 +3,11 @@ import React, { PureComponent } from 'react';
 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/v1/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 */
 
@@ -146,11 +145,13 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory // customStyle={style.fieldLabel}
+      id: id,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
       ,
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
-      testId: id,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement(MultiSelect, {
       options: options,

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

@@ -3,12 +3,11 @@ import React, { PureComponent } from 'react';
 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/v1/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 ****/
 
@@ -116,11 +115,13 @@ export default class SelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isRequired: isMandatory,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps,
-      testId: uniqueId,
-      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+      id: uniqueId
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, {

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) {