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

package/es/avatar/AvatarCollision/AvatarCollision.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   border-radius: 50%;
   padding: var(--zd_size2) ;
@@ -17,7 +17,7 @@
 }
 .pop {
   position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
   opacity: 0;
   visibility: hidden;
   top: 0 ;
@@ -38,7 +38,7 @@
 .icon {
   position: absolute;
   line-height: 0;
-  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: middleBoth from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_avatarcollision_icon_text);
   font-size: var(--zd_font_size13) ;
 }

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -57,5 +57,5 @@
 }
 
 .avatar_align_center {
-  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+  composes: tcenter from '~@zohodesk/components/es/common/common.module.css';
 }

package/es/avatar/AvatarStatus/AvatarStatus.module.css

@@ -1,11 +1,11 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
 }
 .state {
   position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
   display: inline-block;
 }
 .circle.state {

package/es/avatar/AvatarThread/AvatarThread.module.css

@@ -1,12 +1,12 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   border-radius: 50%;
 }
 
 .thread {
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
   position: absolute;
 }
 .pointer {

package/es/avatar/AvatarUser/AvatarUser.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
 }
 .paid,
@@ -16,7 +16,7 @@
   line-height: 0;
 }
 .paid {
-  composes: middle from '~@zohodesk/components/lib/common/common.module.css';
+  composes: middle from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .paid {
   left: 50% ;
@@ -37,7 +37,7 @@
   height: 100% ;
   opacity: 0;
   transition: all var(--zd_transition3);
-  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_avataruser_delete_text);
   cursor: pointer;
   border-radius: 50%;

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -1,5 +1,5 @@
 .container {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   position: relative;
 }

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -2,7 +2,7 @@
 .container {
   position: relative;
   line-height: var(--zd_size18);
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
   padding: var(--zd_size3) var(--zd_size15) ;
   cursor: pointer;
 }
@@ -18,7 +18,7 @@
 .departName {
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_selectdropdown_departname_text);
-  composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: flexgrow dotted offSelection from '~@zohodesk/components/es/common/common.module.css';
 }
 .departIcon {
   color: var(--zdt_selectdropdown_departicon);

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -40,7 +40,7 @@
   visibility: visible;
 }
 .value {
-  composes: dotted  offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted  offSelection from '~@zohodesk/components/es/common/common.module.css';
 }
 .search {
   padding: var(--zd_size6) var(--zd_size20) 0 ;

package/es/errorstate/EmptyStates.module.css

@@ -25,7 +25,7 @@
 .title,
 .tabletTitle,
 .mobileTitle {
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+  composes: semibold from '~@zohodesk/components/es/common/common.module.css';
   letter-spacing: var(--zd_size1);
 }
 .title, .tabletTitle, .mobileTitle {

package/es/errorstate/WillBack/WillBack.module.css

@@ -2,7 +2,7 @@
 .tabletTitle,
 .mobileTitle {
   color: var(--zdt_willback_title_text);
-  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+  composes: bold from '~@zohodesk/components/es/common/common.module.css';
 }
 .title {
   font-size: var(--zd_font_size50) ;

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

@@ -3,8 +3,9 @@ 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/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -87,15 +88,12 @@ export default class CheckBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      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,
+      isRequired: isMandatory,
+      isInlineField: true,
+      customStyle: labelCustomClass,
+      testId: id,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       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,8 +3,9 @@ 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/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -129,11 +130,10 @@ export default class CurrencyField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: 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,8 +3,9 @@ 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/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -133,14 +134,12 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
       htmlFor: getAriaId,
-      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
+      testId: labelName,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {

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

@@ -7,6 +7,9 @@
   position: relative;
   min-height: var(--zd_size25) ;
 }
+.fieldMargin_large {
+  margin-top: var(--zd_size10) ;
+}
 .fieldMargin_medium {
   margin-top: var(--zd_size5) ;
 }
@@ -15,7 +18,7 @@
 }
 .radioContainer,
 .checkbox {
-  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/es/common/common.module.css';
 }
 .checkbox {
   min-height: var(--zd_size28) ;
@@ -25,7 +28,7 @@
 }
 .lineClamp_one,
 .lineClamp_two {
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 .lineClamp_one {
   -webkit-line-clamp: 1;
@@ -34,7 +37,7 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
   line-height: normal;
 }
 [dir=ltr] .checkboxText {
@@ -90,10 +93,10 @@
   width: var(--zd_size94) ;
 }
 .flex {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 .periodContainer {
-  composes: dflex flexrow flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex flexrow flexwrap from '~@zohodesk/components/es/common/common.module.css';
   width: 100% ;
   /*margin-left: var(--zd_size15);*/
 }
@@ -114,12 +117,12 @@
     color: var(--zdt_fields_newtabicon_hover_icon);
 }
 .labelContainer {
-  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
 }
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
   margin-left: var(--zd_size5) ;
@@ -172,7 +175,7 @@
 .lockText {
   font-size: var(--zd_font_size13) ;
   font-style: italic;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
 }
 .labelMandatory:after {
   content: '*';
@@ -185,7 +188,7 @@
   padding-right: var(--zd_size2) ;
 }
 .ePhiTag {
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
+  composes: flexshrink from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
   font-size: var(--zd_font_size12) ;
   height: var(--zd_size18) ;

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

@@ -3,8 +3,9 @@ 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/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -145,13 +146,11 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+      isRequired: isMandatory // customStyle={style.fieldLabel}
       ,
-      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/RadioField/RadioField.js

@@ -121,7 +121,7 @@ export default class RadioField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`
     }, options.map((option, index) => {
       let {
         text,

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

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

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

@@ -70,7 +70,7 @@
 }
 .newTagLabel {
   color: var(--zdt_tagsmultiselect_labelt_text);
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+  composes: semibold from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .newTagLabel {
   margin-right: var(--zd_size5) ;
@@ -79,7 +79,7 @@
   margin-left: var(--zd_size5) ;
 }
 .dotted {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 .dropdown {
   margin-top: var(--zd_size1) ;

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

@@ -1,8 +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 { Box } from '@zohodesk/components/lib/Layout'; // import Label from '@zohodesk/components/lib/Label/Label';
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
@@ -206,13 +207,10 @@ const TagsMultiSelectField = props => {
     }
   }, /*#__PURE__*/React.createElement(Label, {
     text: labelName,
-    title: labelName,
-    id: id,
-    size: labelSize,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
-    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    isRequired: isMandatory,
     htmlFor: htmlId,
+    testId: id,
+    customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     ...LabelProps
   }), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
     dataId: `${dataId}_tagCount`,

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

@@ -3,8 +3,9 @@ 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/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -103,13 +104,12 @@ export default class TextBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
+      testId: labelName,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: labelName
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {

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

@@ -58,7 +58,7 @@ export default class TextEditorWrapper extends Component {
     onFocus && onFocus();
   }
 
-  componentWillReceiveProps(np) {
+  UNSAFE_componentWillReceiveProps(np) {
     let {
       id,
       value

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

@@ -3,8 +3,9 @@ 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/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -131,12 +132,11 @@ export default class TextareaField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
+      testId: id,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: 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/layout/Section/ModuleFormSection.module.css

@@ -1,3 +1,3 @@
 .singleColumn {
-  composes: dflex flexrow from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex flexrow from '~@zohodesk/components/es/common/common.module.css';
 }

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

@@ -32,7 +32,7 @@
   line-height: 1;
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .title {
   padding-right: var(--zd_size12) ;
@@ -42,7 +42,7 @@
 }
 
 .rightPanel {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+  composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
 }
 .helpInfoCont {
   position: absolute;
@@ -106,7 +106,7 @@
   transform: translateX(0);
 }
 .close {
-  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
+  composes: disableFocus from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .infoHeader {
@@ -127,7 +127,7 @@
 }
 
 .infoText {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size13) ;
 }
 

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -72,7 +72,7 @@
 }
 
 .aside {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+  composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .title {

package/es/list/DotNew/DotNew.module.css

@@ -9,7 +9,7 @@
 }
 
 .container {
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
   box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */

package/es/list/ListStencils/ListStencils.module.css

@@ -4,11 +4,11 @@
   padding: 0 var(--zd_size30) ;
 }
 .innerContainer {
-  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
   border-bottom: 1px dotted var(--zdt_liststencils_innercontainer_border);
 }
 .detailsInnerColumn {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .avatar {
   margin-right: var(--zd_size25) ;
@@ -21,7 +21,7 @@
   min-width: 0 ;
 }
 .primaryRow {
-  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
+  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/es/common/common.module.css';
 }
 .classic .detailsColumn {
   flex-basis: 60% ;

package/es/list/SecondaryText/SecondaryText.module.css

@@ -45,7 +45,7 @@ display: block
 .textStyle,
 .secondaryText,
 .phoneNumber {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   max-width: 100% ;
   display: block;
 }
@@ -83,11 +83,11 @@ display: block
 .font_semibold,
 .font_bold,
 .textBold {
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 .priorityText,
 .statusText {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .priorityText {
@@ -98,7 +98,7 @@ display: block
   font-size: var(--zd_font_size12) ;
   color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100% ;
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 /* HappinessRating Style */
 .happinessContainer {

package/es/list/SecondryPanel/SecondryPanel.module.css

@@ -2,5 +2,5 @@
   max-width: 100% ;
 }
 .dottedStyle {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }