@zohodesk/dot 1.0.0-temp-218.5 → 1.0.0-temp-224.1

package/es/list/SecondaryText/props/defaultProps.js

@@ -2,8 +2,6 @@ export const AccountName_defaultProps = {
   isLink: true,
   dataId: 'accountName',
   fontWeight: 'regular',
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const ContactName_defaultProps = {
@@ -12,51 +10,35 @@ export const ContactName_defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const Email_defaultProps = {
   isLink: true,
   fontWeight: 'regular',
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const PhoneNumber_defaultProps = {
   isLink: true,
   hasReload: false,
   fontWeight: 'regular',
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const PriorityText_defaultProps = {
   color: 'black',
-  isHighlighted: false,
-  highlightData: {},
   dataId: 'priority'
 };
 export const SecondaryText_defaultProps = {
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const StatusText_defaultProps = {
   color: 'black',
   dataId: 'statusContainer',
-  isHighlighted: false,
-  highlightData: {},
   fontWeight: 'regular'
 };
 export const TicketId_defaultProps = {
   dataId: 'ticketId',
-  isHighlighted: false,
-  highlightData: {},
   customProps: {}
 };
 export const Website_defaultProps = {
-  isHighlighted: false,
-  highlightData: {},
   isLink: true
 };

package/es/list/SecondaryText/props/propTypes.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const AccountName_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -15,8 +14,6 @@ export const AccountName_propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object,
@@ -45,8 +42,6 @@ export const ContactName_propTypes = {
     }),
     paidTitle: PropTypes.string
   }),
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -56,8 +51,6 @@ export const DepartmentText_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const Email_propTypes = {
@@ -70,8 +63,6 @@ export const Email_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -94,8 +85,6 @@ export const PhoneNumber_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -106,8 +95,6 @@ export const PriorityText_propTypes = {
   color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const SecondaryText_propTypes = {
@@ -116,8 +103,6 @@ export const SecondaryText_propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     SecondaryTextProps: PropTypes.object
   })
@@ -128,8 +113,6 @@ export const StatusText_propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const TicketId_propTypes = {
@@ -143,8 +126,6 @@ export const TicketId_propTypes = {
   url: PropTypes.string,
   urlData: PropTypes.string,
   urlName: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     TicketIdProps: PropTypes.object,
     LinkProps: PropTypes.object
@@ -157,7 +138,5 @@ export const Website_propTypes = {
   isLink: PropTypes.bool,
   target: PropTypes.string,
   text: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig,
   title: PropTypes.string
 };

package/es/list/Subject/Subject.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Typography from '@zohodesk/components/es/Typography/Typography';
-import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
 import style from "./Subject.module.css";
@@ -26,44 +24,30 @@ export default class Subject extends Component {
       isDotted,
       children,
       customProps,
-      whiteSpace,
-      isHighlighted,
-      highlightData
+      whiteSpace
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    let tagAttributesText = { ...TextProps,
-      'data-title-wrap': whiteSpace
-    };
-    let linkTagAttributes = {
-      'data-title-wrap': whiteSpace
-    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
+      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
+      dataId: dataId,
+      title: text,
       target: target,
+      "data-title-wrap": whiteSpace,
       ...LinkProps
-    }, children ? children : /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: linkTagAttributes,
-      $i18n_dataTitle: text,
-      $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,
-      customId: dataId,
-      $flag_dotted: isDotted,
-      $ui_weight: fontWeight,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
-    }, text)) : /*#__PURE__*/React.createElement(Typography, {
-      $tagAttributes_text: tagAttributesText,
-      $ui_className: `${style.subject} ${className} ${whiteSpaceClassMapping[whiteSpace]}`,
-      $flag_dotted: isDotted,
-      $ui_weight: fontWeight,
-      $i18n_dataTitle: text,
-      customId: dataId,
-      testId: dataId,
-      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
+      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
+      "data-title": text,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-title-wrap": whiteSpace,
+      ...TextProps
     }, text));
   }
 

package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -2,8 +2,8 @@
 
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_pre"
+  <span
+    class="subject dotted whiteSpace_pre  font_regular"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -11,8 +11,8 @@ exports[`Subject rendering the defult props 1`] = `
 
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_breakSpaces"
+  <span
+    class="subject dotted whiteSpace_breakSpaces  font_regular"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -20,8 +20,8 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_normal"
+  <span
+    class="subject dotted whiteSpace_normal  font_regular"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -29,8 +29,8 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_nowrap"
+  <span
+    class="subject dotted whiteSpace_nowrap  font_regular"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -38,8 +38,8 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_pre"
+  <span
+    class="subject dotted whiteSpace_pre  font_regular"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -47,8 +47,8 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_preLine"
+  <span
+    class="subject dotted whiteSpace_preLine  font_regular"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -56,8 +56,8 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
-  <div
-    class="dotted font_regular subject  whiteSpace_preWrap"
+  <span
+    class="subject dotted whiteSpace_preWrap  font_regular"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>

package/es/list/Subject/props/defaultProps.js

@@ -4,7 +4,5 @@ export const defaultProps = {
   className: '',
   isDotted: true,
   customProps: {},
-  whiteSpace: 'pre',
-  isHighlighted: false,
-  highlightData: {}
+  whiteSpace: 'pre'
 };

package/es/list/Subject/props/propTypes.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -17,8 +16,5 @@ export const propTypes = {
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
   }),
-  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']),
-  // Highlight props
-  isHighlighted: PropTypes.bool,
-  highlightData: typographyProps.$ui_highlightConfig
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Search rendering the customized style search 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -75,7 +75,7 @@ exports[`Search rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -132,7 +132,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -192,7 +192,7 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -262,7 +262,7 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   effect     container   flex rowdir"
+            class="varClass customContainer    effect     container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -321,7 +321,7 @@ exports[`Search rendering the search active 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect  active   container   flex rowdir"
+        class="varClass customContainer    effect  active   container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/common/dot_boxShadow.module.css

@@ -37,8 +37,7 @@
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
 
     /* onboarding  */
-    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
+    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-
 }

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _CheckBox = _interopRequireDefault(require("@zohodesk/components/es/CheckBox/CheckBox"));
 
@@ -140,15 +140,24 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        id: id,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass,
+          container: !isDirectCol ? _FieldsModule["default"].checkboxText : ''
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        infoText: infoText,
-        customClass: "".concat(!isDirectCol ? _FieldsModule["default"].checkboxText : '', " ").concat(!isDirectCol ? _FieldsModule["default"]["lineClamp_".concat(lineClamp)] : '', " ").concat(isReadOnly || isDisabled ? _FieldsModule["default"].cbTextReadonly : _FieldsModule["default"].cbTextPointer, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        title: labelName,
+        fontWeight: isDirectCol ? 'regular' : 'semibold',
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         onClick: !removeEvent ? this.handleLabelClick : null,
-        variant: isDirectCol ? 'default' : 'primary',
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)));
 
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/es/TextBoxIcon/TextBoxIcon"));
 
@@ -178,11 +178,17 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/form/fields/DateField/DateField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _DateWidget = _interopRequireDefault(require("@zohodesk/components/es/DateTime/DateWidget"));
 
@@ -185,15 +185,24 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        htmlFor: getAriaId,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: labelCustomClass
+        },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+        htmlFor: getAriaId,
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
-      }, LabelProps, {
-        id: labelName
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
+      }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].lockText

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _MultiSelect = _interopRequireDefault(require("@zohodesk/components/es/MultiSelect/MultiSelect"));
 
@@ -198,13 +198,20 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        id: id,
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
         size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+        htmlFor: uniqueId // onClick={this.handleLabelClick}
         ,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        htmlFor: uniqueId
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
         options: options,
         onChange: this.handleChange,

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

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

@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/RadioField/RadioField.js

@@ -17,7 +17,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _Radio = _interopRequireDefault(require("@zohodesk/components/es/Radio/Radio"));
 
@@ -188,10 +188,20 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",
-        id: id,
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(customLabelClass),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        isRequired: isMandatory,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        palette: labelPalette,
+        customClass: {
+          label: customLabelClass
+        },
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {