@zohodesk/dot 1.0.0-temp-209 → 1.0.0-temp-187.13

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -2,13 +2,13 @@ import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THE
 export const themeAppearanceImports = {
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
-  "../libraryChunks/appearance/component/Light_Component"),
+  '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'),
   Lib_DarkMode_Component: () => import(
   /* webpackChunkName: 'Lib_DarkMode_Component' */
-  "../libraryChunks/appearance/component/Dark_Component"),
+  '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'),
   Lib_PureDarkMode_Component: () => import(
   /* webpackChunkName: 'Lib_PureDarkMode_Component' */
-  "../libraryChunks/appearance/component/PureDark_Component"),
+  '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'),
   Lib_LightMode_Dot: () => import(
   /* webpackChunkName: 'Lib_LightMode_Dot' */
   "./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),

package/es/Onboarding/Onboarding.js

@@ -28,7 +28,7 @@ import useOnboarding from "./hooks/useOnboarding";
 import { DUMMY_OBJECT } from "../utils/General";
 /** style **/
 
-import defaultStyle from "./css/Onboarding.module.css";
+import defaultStyle from "./css/CardOnboarding.module.css";
 
 const Onboarding = _ref => {
   let {

package/es/VideoLookup/VideoLookup.js

@@ -11,7 +11,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
-import defaultStyle from "./css/VideoLookup.module.css";
+import defaultStyle from "./css/VideoLookupStyles.module.css";
 export default function VideoLookup(props) {
   const {
     isOpened,

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

@@ -3,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -88,11 +87,15 @@ export default class CheckBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: isMandatory,
-      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,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -130,10 +129,11 @@ export default class CurrencyField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: 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,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -134,12 +133,14 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: 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/Fields.module.css

@@ -218,3 +218,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
+}

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

@@ -3,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -146,11 +145,13 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: 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/SelectField/SelectField.js

@@ -3,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import Select from '@zohodesk/components/lib/Select/Select';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -116,11 +115,13 @@ export default class SelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: 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

@@ -165,7 +165,8 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {}
+      TagProps = {},
+      ListItemProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -300,7 +301,8 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass
+          customClass: listItemClass,
+          ...ListItemProps
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

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

@@ -52,7 +52,8 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object
+    TagProps: PropTypes.object,
+    ListItemProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

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

@@ -1,9 +1,8 @@
 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 Label from "../../../../../components/es/components-v2/Label/Label";
+import { Box } from '@zohodesk/components/lib/Layout';
+import Label from '@zohodesk/components/lib/Label/Label';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
@@ -207,10 +206,13 @@ const TagsMultiSelectField = props => {
     }
   }, /*#__PURE__*/React.createElement(Label, {
     text: labelName,
-    isMandatory: isMandatory,
+    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`,
     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,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -104,12 +103,13 @@ export default class TextBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: isMandatory,
-      customStyle: labelCustomClass,
-      testId: labelName,
+      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`,
-      ...LabelProps
+      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}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {

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

@@ -3,9 +3,8 @@ 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 "../../../../../components/es/components-v2/Label/Label";
+import Label from '@zohodesk/components/lib/Label/Label';
 import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -132,11 +131,12 @@ export default class TextareaField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      isMandatory: isMandatory,
-      customStyle: labelCustomClass,
-      testId: id,
+      id: id,
+      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/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,8 +48,12 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
+    const {
+      ToggleDropDownProps = {}
+    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -84,7 +88,8 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching
+      needSearchFetching: needSearchFetching,
+      ...ToggleDropDownProps
     });
   }
 

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

@@ -3,5 +3,6 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };

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

@@ -20,5 +20,8 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -36,9 +36,8 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue {
+  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -46,7 +45,6 @@
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
-
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
@@ -90,8 +88,10 @@
 }
 /* Status Type */
 .statusType {
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size8);
+  /*  Variable:Ignore  */
+  width: var(--zd_font_size8);
   border-radius: 50%;
 }
 [dir=ltr] .statusType {

package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -20,17 +20,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var themeAppearanceImports = {
   Lib_LightMode_Component: function Lib_LightMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require("../libraryChunks/appearance/component/Light_Component"));
+      return _interopRequireWildcard(require('@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'));
     });
   },
   Lib_DarkMode_Component: function Lib_DarkMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require("../libraryChunks/appearance/component/Dark_Component"));
+      return _interopRequireWildcard(require('@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'));
     });
   },
   Lib_PureDarkMode_Component: function Lib_PureDarkMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require("../libraryChunks/appearance/component/PureDark_Component"));
+      return _interopRequireWildcard(require('@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'));
     });
   },
   Lib_LightMode_Dot: function Lib_LightMode_Dot() {

package/lib/Onboarding/Onboarding.js

@@ -41,7 +41,7 @@ var _useOnboarding2 = _interopRequireDefault(require("./hooks/useOnboarding"));
 
 var _General = require("../utils/General");
 
-var _OnboardingModule = _interopRequireDefault(require("./css/Onboarding.module.css"));
+var _CardOnboardingModule = _interopRequireDefault(require("./css/CardOnboarding.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -63,7 +63,7 @@ var Onboarding = function Onboarding(_ref) {
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
       customProps = _ref.customProps;
-  var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
+  var style = (0, _useMergeStyle["default"])(_CardOnboardingModule["default"], customStyle);
 
   var _useOnboarding = (0, _useOnboarding2["default"])(),
       state = _useOnboarding.state,

package/lib/VideoLookup/VideoLookup.js

@@ -23,7 +23,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _VideoLookupModule = _interopRequireDefault(require("./css/VideoLookup.module.css"));
+var _VideoLookupStylesModule = _interopRequireDefault(require("./css/VideoLookupStyles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -46,7 +46,7 @@ function VideoLookup(props) {
       testId = props.testId,
       customId = props.customId,
       videoFormat = props.videoFormat;
-  var style = (0, _utils.mergeStyle)(_VideoLookupModule["default"], customStyle);
+  var style = (0, _utils.mergeStyle)(_VideoLookupStylesModule["default"], customStyle);
   var handleKeyPress = (0, _react.useCallback)(function (e) {
     if (e.keyCode == '27') {
       onClose(e);

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("../../../../../components/es/components-v2/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
 var _CheckBox = _interopRequireDefault(require("@zohodesk/components/lib/CheckBox/CheckBox"));
 
@@ -140,11 +140,15 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        isMandatory: isMandatory,
-        customStyle: labelCustomClass,
-        testId: id,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        onClick: !removeEvent ? this.handleLabelClick : null
+        id: id,
+        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,
+        onClick: !removeEvent ? this.handleLabelClick : null,
+        variant: isDirectCol ? 'default' : 'primary',
+        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, 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("../../../../../components/es/components-v2/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
 var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/TextBoxIcon/TextBoxIcon"));
 
@@ -178,10 +178,11 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        isMandatory: isMandatory,
-        customStyle: 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,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        dataId: 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/DateField/DateField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("../../../../../components/es/components-v2/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
 var _DateWidget = _interopRequireDefault(require("@zohodesk/components/lib/DateTime/DateWidget"));
 
@@ -185,12 +185,15 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        isMandatory: isMandatory,
-        customStyle: labelCustomClass,
         htmlFor: getAriaId,
-        testId: labelName,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
-      }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
+        size: fieldSize === 'small' ? 'small' : 'medium',
+        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+        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", {
         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/Fields.module.css

@@ -218,3 +218,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
+}

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("../../../../../components/es/components-v2/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
 var _MultiSelect = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelect"));
 
@@ -198,11 +198,13 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        isMandatory: isMandatory // customStyle={style.fieldLabel}
+        id: id,
+        size: fieldSize === 'small' ? 'small' : 'medium',
+        palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
         ,
-        htmlFor: uniqueId,
-        testId: id,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        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
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
         options: options,
         onChange: this.handleChange,

package/lib/form/fields/SelectField/SelectField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("../../../../../components/es/components-v2/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
 var _Select = _interopRequireDefault(require("@zohodesk/components/lib/Select/Select"));
 
@@ -166,11 +166,13 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        isMandatory: isMandatory,
-        htmlFor: uniqueId
+        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")
       }, LabelProps, {
-        testId: uniqueId,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        id: uniqueId
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({