@zohodesk/dot 1.0.0-temp-157 → 1.0.0-temp-159

package/es/v1/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -30,6 +30,7 @@ export default function CommonEmptyState(props) {
     "data-id": dataId,
     "data-test-id": dataId
   }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
+    tabIndex: "0",
     className: `${style.title} ${titleClass}`
   }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
     className: style.linkWrapper

package/es/v1/{version2/errorstate → errorstate}/Inconvenience/Inconvenience.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/Inconvenience/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/Inconvenience/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/Inconvenience/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/Inconvenience/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorInconvenience from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorInconvenience';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function Inconvenience(props) {
   function errorInconvenience() {
     return /*#__PURE__*/React.createElement(ErrorInconvenience, {
@@ -56,8 +56,4 @@ export default function Inconvenience(props) {
   }) : null));
 }
 Inconvenience.propTypes = propTypes;
-Inconvenience.defaultProps = defaultProps; // if (__DOCS__) {
-//   Inconvenience.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+Inconvenience.defaultProps = defaultProps;

package/es/v1/{version2/errorstate → errorstate}/OopsSomethingMiss/OopsSomethingMiss.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/OopsSomethingMiss/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/OopsSomethingMiss/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/OopsSomethingMiss/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/OopsSomethingMiss/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorOopsSomethingMiss';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function OopsSomethingMiss(props) {
   function errorOopsSomethingMiss() {
     return /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {

package/es/v1/{version2/errorstate → errorstate}/UnableToProcessRequest/UnableToProcessRequest.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/UnableToProcessRequest/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/UnableToProcessRequest/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/UnableToProcessRequest/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UnableToProcessRequest/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUnableToProcessRequest';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function UnableToProcessRequest(props) {
   function errorUnableToProcess() {
     return /*#__PURE__*/React.createElement(ErrorUnableToProcessRequest, {

package/es/v1/{version2/errorstate → errorstate}/UnauthorizedLogin/UnauthorizedLogin.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/UnauthorizedLogin/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/UnauthorizedLogin/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/UnauthorizedLogin/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UnauthorizedLogin/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorUnauthorizedLogin from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUnauthorizedLogin';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function UnauthorizedLogin(props) {
   function errorUnauthorizedLogin() {
     return /*#__PURE__*/React.createElement(ErrorUnauthorizedLogin, {

package/es/v1/{version2/errorstate → errorstate}/UrlNotFound/UrlNotFound.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/UrlNotFound/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/UrlNotFound/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/UrlNotFound/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UrlNotFound/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorUrlNotFound from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUrlNotFound';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function UrlNotFound(props) {
   function errorUrlNotFound() {
     return /*#__PURE__*/React.createElement(ErrorUrlNotFound, {

package/es/v1/{version2/errorstate → errorstate}/WillBeRightBack/WillBeRightBack.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/WillBeRightBack/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/WillBeRightBack/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/WillBeRightBack/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/WillBeRightBack/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorWillBeRightBack from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorWillBeRightBack';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function WillBeRightBack(props) {
   function errorWillBeRightBack() {
     return /*#__PURE__*/React.createElement(ErrorWillBeRightBack, {

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

@@ -0,0 +1,125 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../form/fields/CheckBoxField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/CheckBoxField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import CheckBox from '@zohodesk/components/es/v1/CheckBox/CheckBox';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/**** CSS ****/
+
+import style from '../../../../form/fields/Fields.module.css';
+
+function CheckBoxField(props) {
+  let {
+    labelName,
+    id,
+    isMandatory,
+    validationMessage,
+    validationPalette,
+    isReadOnly,
+    checked,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    infoText,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    direction,
+    lineClamp,
+    isLocked,
+    lockedInfoText,
+    customProps,
+    renderLabelProps,
+    getRef,
+    onChange
+  } = props;
+  const {
+    LabelProps = {},
+    CheckBoxProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  let removeEvent = isDisabled || isReadOnly;
+  let isDirectCol = direction === 'column';
+  let labelElement = /*#__PURE__*/React.createElement(FieldContainer, {
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    infoText: infoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    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,
+    onClick: !removeEvent ? handleLabelClick : null,
+    variant: isDirectCol ? 'default' : 'primary',
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps)));
+
+  function handleChange(value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    getRef && getRef(el, id);
+  }
+
+  function handleLabelClick() {
+    handleChange(!checked);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
+    className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "top"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: isDirectCol ? style.checkbox : style.checkboxRow
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+    id: id,
+    onChange: handleChange,
+    disabled: removeEvent,
+    checked: checked,
+    getRef: handleGetRef,
+    dataId: dataId
+  }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+}
+
+CheckBoxField.propTypes = propTypes;
+CheckBoxField.defaultProps = defaultProps;
+const MemoizedCheckBoxField = /*#__PURE__*/memo(CheckBoxField);
+MemoizedCheckBoxField.propTypes = propTypes;
+MemoizedCheckBoxField.defaultProps = defaultProps;
+MemoizedCheckBoxField.displayName = 'CheckBoxField';
+export default MemoizedCheckBoxField;

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

@@ -0,0 +1,157 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React, { memo, useRef, useState } from 'react';
+import { defaultProps } from '../../../../form/fields/CurrencyField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/CurrencyField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/**** CSS ****/
+
+import style from '../../../../form/fields/Fields.module.css';
+
+function CurrencyField(props) {
+  let {
+    labelName,
+    id,
+    textBoxSize,
+    textBoxVariant,
+    textBoxType,
+    isMandatory,
+    validationMessage,
+    validationPalette,
+    maxLength,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    placeHolder,
+    infoText,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    dataSelectorId,
+    lockedInfoText,
+    isLocked,
+    needReadOnlyStyle,
+    isClickable,
+    userCurrencyType,
+    customProps,
+    formatCurrency,
+    renderLabelProps,
+    onBlur,
+    onFocus,
+    getRef,
+    onChange
+  } = props;
+  const {
+    LabelProps = {},
+    TextBoxProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  const [isActive, setActive] = useState(false);
+  const textBox = useRef(null);
+  let formatValue = value;
+
+  if (!isActive) {
+    formatValue = formatCurrency(value, userCurrencyType);
+  } else {
+    formatValue = value;
+  }
+
+  let uniqueId = htmlId ? htmlId : getNextId();
+
+  function handleChange(value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    textBox.current = el;
+    getRef && getRef(el, id);
+  }
+
+  function handleonFocus() {
+    setActive(true);
+    onFocus && onFocus();
+  }
+
+  function handleonBlur() {
+    setActive(false);
+    onBlur && onBlur();
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    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))), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+  }, /*#__PURE__*/React.createElement(TextBox, _extends({
+    htmlId: uniqueId,
+    id: id,
+    type: textBoxType,
+    variant: textBoxVariant,
+    size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    inputRef: handleGetRef,
+    value: formatValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleonBlur,
+    onFocus: handleonFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    needEffect: isReadOnly || isDisabled ? false : true,
+    isClickable: isClickable,
+    needReadOnlyStyle: needReadOnlyStyle
+  }, TextBoxProps)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`,
+    htmlFor: uniqueId
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+}
+
+CurrencyField.propTypes = propTypes;
+CurrencyField.defaultProps = defaultProps;
+const MemoizedCurrencyField = /*#__PURE__*/memo(CurrencyField);
+MemoizedCurrencyField.propTypes = propTypes;
+MemoizedCurrencyField.defaultProps = defaultProps;
+MemoizedCurrencyField.displayName = 'CurrencyField';
+export default MemoizedCurrencyField;

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

@@ -0,0 +1,164 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React, { memo, useEffect, useRef } from 'react';
+import { defaultProps } from '../../../../form/fields/DateField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/DateField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import DateWidget from '@zohodesk/components/es/v1/DateTime/DateWidget';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/**** CSS ****/
+
+import style from '../../../../form/fields/Fields.module.css';
+
+function DateField(props) {
+  let {
+    labelName,
+    isMandatory,
+    isDateTime,
+    validationMessage,
+    validationPalette,
+    textBoxSize,
+    textBoxVariant,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    popupGroup,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    infoText,
+    borderColor,
+    fieldSize,
+    datePattern,
+    isLocked,
+    lockedInfoText,
+    lockedValueText,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    timeZone,
+    i18nKeys,
+    iconOnHover,
+    customProps,
+    renderLabelProps,
+    onChange,
+    id,
+    getRef,
+    openPopupOnMount,
+    isFocusOnLabelClick
+  } = props;
+  const {
+    LabelProps = {},
+    DateWidgetProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const dateField = useRef(null);
+  const getNextId = useUniqueId();
+  let getAriaId = htmlId ? htmlId : getNextId();
+
+  function handleChange(value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    dateField.current = el;
+    getRef && getRef(el, id);
+  }
+
+  function openPopup() {
+    if (openPopupOnMount) {
+      setTimeout(() => {
+        dateField.current && dateField.current.click && dateField.current.click();
+        handleLabelClick();
+      }, 100);
+    }
+  }
+
+  useEffect(() => {
+    openPopup();
+  }, [openPopupOnMount]);
+
+  function handleLabelClick() {
+    if (isFocusOnLabelClick && dateField.current && dateField.current.focus) {
+      dateField.current.focus();
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    htmlFor: getAriaId,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    onClick: isDisabled || isReadOnly ? null : 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", {
+    className: style.lockText
+  }, lockedValueText) : /*#__PURE__*/React.createElement(DateWidget, _extends({
+    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    textBoxVariant: textBoxVariant,
+    isDateTime: isDateTime,
+    onSelect: handleChange,
+    timeZone: timeZone,
+    getRef: handleGetRef,
+    isReadOnly: isReadOnly,
+    value: value,
+    popupGroup: popupGroup,
+    dataId: `${dataId}(formatted_${labelName})`,
+    onKeyDown: onKeyDown,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    dateFormat: datePattern,
+    isEditable: true,
+    htmlId: getAriaId,
+    i18nKeys: i18nKeys,
+    iconOnHover: iconOnHover
+  }, DateWidgetProps, {
+    a11y: {
+      ariaLabelledby: labelName
+    }
+  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    htmlFor: getAriaId,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: getAriaId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+}
+
+DateField.propTypes = propTypes;
+DateField.defaultProps = defaultProps;
+const MemoizedDateField = /*#__PURE__*/memo(DateField);
+MemoizedDateField.propTypes = propTypes;
+MemoizedDateField.defaultProps = defaultProps;
+MemoizedDateField.displayName = 'DateField';
+export default MemoizedDateField;

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

@@ -0,0 +1,66 @@
+/**** Libraries ****/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../form/fields/FieldContainer/props/defaultProps';
+import { propTypes } from '../../../../form/fields/FieldContainer/props/propTypes';
+/**** Components ****/
+
+import { Container } from '@zohodesk/components/es/v1/Layout';
+/**** Icons ****/
+
+import { Icon } from '@zohodesk/icons';
+/**** CSS ****/
+
+import style from '../../../../form/fields/Fields.module.css';
+
+function FieldContainer(props) {
+  let {
+    children,
+    ePhiData,
+    isLocked,
+    lockedInfoText,
+    infoText,
+    dataId,
+    renderProps,
+    alignContainer,
+    dataSelectorId
+  } = props;
+  let {
+    ePhiTitle = '',
+    ePhiText = '',
+    ePhiStatus = false
+  } = ePhiData;
+  let {
+    start: renderStart = null,
+    middle: renderMiddle = null,
+    end: renderEnd = null
+  } = renderProps;
+  return /*#__PURE__*/React.createElement(Container, {
+    align: alignContainer,
+    alignBox: "row",
+    isCover: false,
+    dataSelectorId: dataSelectorId
+  }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-info",
+    iconClass: style.infoIcon,
+    title: infoText,
+    size: "15"
+  }) : null, isLocked ? /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-lock",
+    size: "13",
+    iconClass: style.lockIcon,
+    title: lockedInfoText
+  }) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
+    "data-title": ePhiTitle,
+    "data-id": `${dataId}_ePHI`,
+    "data-test-id": `${dataId}_ePHI`,
+    className: style.ePhiTag
+  }, ePhiText) : null, renderEnd ? renderEnd() : null);
+}
+
+FieldContainer.propTypes = propTypes;
+FieldContainer.defaultProps = defaultProps;
+const MemoizedFieldContainer = /*#__PURE__*/memo(FieldContainer);
+MemoizedFieldContainer.propTypes = propTypes;
+MemoizedFieldContainer.defaultProps = defaultProps;
+MemoizedFieldContainer.displayName = 'FieldContainer';
+export default MemoizedFieldContainer;