@bigbinary/neeto-fields-frontend 2.4.0-beta3 → 2.4.0-beta5

package/dist/{utils-3dmfuYPy.js → utils-DTT7cQxQ.js}

@@ -1,10 +1,18 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { isNotEmpty, renameKeys, capitalize, findBy, noop, notEquals, filterBy } from '@bigbinary/neeto-cist';
-import { dayjs as dayjs$1 } from '@bigbinary/neeto-commons-frontend/utils';
-import { isNotNil, isNil, isEmpty, prop, pluck, clone, pipe, mergeAll, omit, map, pick } from 'ramda';
+import { isNotEmpty, renameKeys, capitalize, findBy, noop, notEquals, filterBy, isPresent } from '@bigbinary/neeto-cist';
+import { dayjs } from '@bigbinary/neeto-commons-frontend/utils';
+import { includes, __, isNotNil, isNil, isEmpty, pluck, clone, pipe, prop, when, mergeDeepLeft, mergeAll, omit, map, pick } from 'ramda';
+import { K as KINDS, b as DATE_TIME_KINDS, c as DROPDOWN_KINDS, T as TEXT_KINDS } from './constants-B3mMmVVx.js';
+import { t } from 'i18next';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import Typography from '@bigbinary/neetoui/Typography';
+import Redirect from '@bigbinary/neeto-icons/Redirect';
+import Button from '@bigbinary/neetoui/Button';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PhoneNumber as PhoneNumber$2, validation, PhoneNumberInput as PhoneNumberInput$2 } from '@bigbinary/neeto-molecules/PhoneNumber';
 import NeetoUICheckbox from '@bigbinary/neetoui/Checkbox';
-import { S as SUBMIT_FIELD_STATUS } from './index-BCXsyMdx.js';
+import { S as SUBMIT_FIELD_STATUS, T as TWELVE_HOUR_FORMAT } from './index-ClzlQ8BI.js';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -12,34 +20,98 @@ import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useEffect, useState, useRef } from 'react';
 import { useFormikContext, useField } from 'formik';
 import { useFuncDebounce, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { K as KINDS } from './constants-Bw1LHJWZ.js';
 import DatePicker from '@bigbinary/neetoui/DatePicker';
 import TimePicker from '@bigbinary/neetoui/TimePicker';
-import dayjs from 'dayjs';
-import { t as t$1 } from 'i18next';
 import * as yup from 'yup';
 import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Check from '@bigbinary/neeto-icons/Check';
 import Label from '@bigbinary/neetoui/Label';
 import Spinner from '@bigbinary/neetoui/Spinner';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import Select from '@bigbinary/neetoui/formik/Select';
+import { n } from './inject-css-DmrvuTKK.js';
 import Input from '@bigbinary/neetoui/Input';
+import Select from '@bigbinary/neetoui/formik/Select';
 import Select$1 from '@bigbinary/neetoui/Select';
 import Textarea from '@bigbinary/neetoui/Textarea';
 
-var DIRECT_EDIT_INPUT_FIELDS = [KINDS.checkbox];
-
-var isDateTime = function isDateTime(kind) {
-  return ["date", "time", "date_range", "time_range", "datetime"].includes(kind);
+var OpenInApp = function OpenInApp(_ref) {
+  var value = _ref.value,
+    type = _ref.type;
+  var data = CONTACT_LINK_DATA[type];
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    },
+    children: /*#__PURE__*/jsx(Button, {
+      className: "flex-shrink-0",
+      href: "".concat(data.prefix).concat(value),
+      icon: Redirect,
+      size: "small",
+      style: "text",
+      tooltipProps: {
+        content: data.tooltipMessage,
+        position: "top"
+      }
+    })
+  });
 };
-var isDropdown = function isDropdown(kind) {
-  return ["single_option", "multi_option"].includes(kind);
+
+var Email$1 = function Email(_ref) {
+  var value = _ref.value;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex w-full items-center gap-2",
+    children: [/*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      children: value
+    }), value !== MISSING_VALUE_PLACEHOLDER && /*#__PURE__*/jsxs("div", {
+      className: "flex items-center",
+      children: [/*#__PURE__*/jsx(CopyToClipboardButton, {
+        value: value,
+        className: "flex-shrink-0",
+        size: "small",
+        style: "text"
+      }), /*#__PURE__*/jsx(OpenInApp, {
+        value: value,
+        type: KINDS.email
+      })]
+    })]
+  });
 };
-var isTextType = function isTextType(kind) {
-  return [KINDS.text, KINDS.decimal, KINDS.integer, KINDS.monetary, KINDS.number, KINDS.regex, KINDS.textarea].includes(kind);
+
+var PhoneNumber$1 = function PhoneNumber(_ref) {
+  var value = _ref.value;
+  var hasValue = value !== MISSING_VALUE_PLACEHOLDER;
+  return hasValue ? /*#__PURE__*/jsxs("div", {
+    className: "flex w-full items-center",
+    children: [/*#__PURE__*/jsx(PhoneNumber$2, {
+      value: value,
+      showCopyButton: true,
+      showEmoji: true
+    }), /*#__PURE__*/jsx(OpenInApp, {
+      value: value,
+      type: KINDS.phoneNumber
+    })]
+  }) : /*#__PURE__*/jsx(Typography, {
+    style: "body2",
+    children: value
+  });
 };
 
+var DIRECT_EDIT_INPUT_FIELDS = [KINDS.checkbox];
+var DISPLAY_COMPONENT_MAP = _defineProperty(_defineProperty({}, KINDS.phoneNumber, PhoneNumber$1), KINDS.email, Email$1);
+var CONTACT_LINK_DATA = _defineProperty(_defineProperty({}, KINDS.email, {
+  prefix: "mailto:",
+  tooltipMessage: t("neetoFields.tooltips.composeEmail")
+}), KINDS.phoneNumber, {
+  prefix: "tel:",
+  tooltipMessage: t("neetoFields.tooltips.startCall")
+});
+var MISSING_VALUE_PLACEHOLDER = "-";
+
+var isDateTime = includes(__, DATE_TIME_KINDS);
+var isDropdown = includes(__, DROPDOWN_KINDS);
+var isTextType = includes(__, TEXT_KINDS);
+var isDirectEditField = includes(__, DIRECT_EDIT_INPUT_FIELDS);
+
 var dateSchema = yup.date().nullable();
 var isValueEmpty = function isValueEmpty(value) {
   return typeof value === "string" && isEmpty(value.trim());
@@ -66,7 +138,7 @@ var buildSchemaForRequiredInputs = function buildSchemaForRequiredInputs(schema,
     name: "validate-required-inputs",
     test: function test(value) {
       if (isNil(value) || isValueEmpty(value) || isArrayEmpty(kind, value) || isCheckboxUnchecked(kind, value)) {
-        throw new yup.ValidationError(t$1("neetoFields.validations.thisIsRequired"));
+        throw new yup.ValidationError(t("neetoFields.validations.thisIsRequired"));
       }
       schema.validateSync(value);
       return true;
@@ -93,11 +165,11 @@ var getBasicValidationSchema = function getBasicValidationSchema(_ref2) {
     case KINDS.monetary:
     case KINDS.decimal:
       {
-        return yup.number(t$1("neetoFields.validations.notAValidNumber")).nullable();
+        return yup.number(t("neetoFields.validations.notAValidNumber")).nullable();
       }
     case KINDS.integer:
       {
-        return yup.number().nullable().integer(t$1("neetoFields.validations.notAValidInteger"));
+        return yup.number().nullable().integer(t("neetoFields.validations.notAValidInteger"));
       }
     case KINDS.date:
     case KINDS.time:
@@ -120,6 +192,14 @@ var getBasicValidationSchema = function getBasicValidationSchema(_ref2) {
         var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
         return yup.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
       }
+    case KINDS.email:
+      return yup.string().email(t("neetoFields.validations.invalidEntity", {
+        entity: t("neetoFields.fields.kinds.email")
+      }));
+    case KINDS.phoneNumber:
+      return validation(t("neetoFields.validations.invalidEntity", {
+        entity: t("neetoFields.fields.kinds.phoneNumber")
+      }));
     default:
       return yup.mixed();
   }
@@ -182,15 +262,15 @@ var dateTimeToString = function dateTimeToString(dateTime) {
   return dateTime && dayjs(dateTime).toString() || "";
 };
 var getValueFromBool = function getValueFromBool(value) {
-  return value === true ? t$1("neetoFields.common.yes") : t$1("neetoFields.common.no");
+  return value === true ? t("neetoFields.common.yes") : t("neetoFields.common.no");
 };
 var getComponentDisplayName = function getComponentDisplayName(Component) {
   return Component.displayName || Component.name || "Component";
 };
 
-var _excluded$2 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur", "hasMetadataWrapper"];
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$3 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur", "hasMetadataWrapper"];
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -208,10 +288,11 @@ var useFormikFields = function useFormikFields(_ref) {
     handleBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
     _ref$hasMetadataWrapp = _ref.hasMetadataWrapper,
     hasMetadataWrapper = _ref$hasMetadataWrapp === void 0 ? false : _ref$hasMetadataWrapp,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var formikContext = useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
+    isValid = formikContext.isValid,
     isSubmitting = formikContext.isSubmitting;
   var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
   var fieldName = kind === KINDS.multiOption ? "values" : "value";
@@ -247,7 +328,7 @@ var useFormikFields = function useFormikFields(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             isNotNil(value) && helpers.setValue(value);
-            _context.t0 = individualSubmit;
+            _context.t0 = individualSubmit && isValid;
             if (!_context.t0) {
               _context.next = 5;
               break;
@@ -255,7 +336,7 @@ var useFormikFields = function useFormikFields(_ref) {
             _context.next = 5;
             return debouncedSubmitForm();
           case 5:
-            isInline && !DIRECT_EDIT_INPUT_FIELDS.includes(kind) && handleBlur();
+            isInline && !isDirectEditField(kind) && handleBlur();
           case 6:
           case "end":
             return _context.stop();
@@ -272,7 +353,7 @@ var useFormikFields = function useFormikFields(_ref) {
         return handleSubmit();
       } : handleBlur;
     }
-    if (!DIRECT_EDIT_INPUT_FIELDS.includes(kind)) {
+    if (!isDirectEditField(kind)) {
       return handleBlur;
     }
     return undefined;
@@ -300,7 +381,7 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$b(_objectSpread$b({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$d(_objectSpread$d({}, formikFieldProps), {}, {
       id: fieldId,
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
@@ -308,26 +389,25 @@ var useFormikFields = function useFormikFields(_ref) {
       labelProps: !isInline && !hasMetadataWrapper && {
         required: props[isRequiredColumnName]
       },
-      autoFocus: isInline && !DIRECT_EDIT_INPUT_FIELDS.includes(kind),
+      autoFocus: isInline && !isDirectEditField(kind),
       onBlur: isInline ? getBlurHandler(kind) : undefined,
       disabled: disabled,
       //conditional props
-      options: isDropdown(kind) ? fieldData : undefined,
-      getPopupContainer: !isInline && isDateTime(kind) ? prop("parentElement") : undefined
+      options: isDropdown(kind) ? fieldData : undefined
     }),
     helpers: helpers
   };
 };
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Checkbox = function Checkbox(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
   var submissionStatus = props.submissionStatus;
   var disabled = fieldProps.disabled || submissionStatus === SUBMIT_FIELD_STATUS.SUBMITTING;
-  return /*#__PURE__*/jsx(NeetoUICheckbox, _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, fieldProps), {}, {
+  return /*#__PURE__*/jsx(NeetoUICheckbox, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, fieldProps), {}, {
     disabled: disabled
   })), {}, {
     checked: fieldProps.value,
@@ -338,13 +418,11 @@ var Checkbox = function Checkbox(props) {
   }));
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$1 = ".neeto-fields-nano__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21ldGFkYXRhLXBhbmVsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMkNBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWVsZHMtbmFub19fbWV0YWRhdGEtY2FyZF9fc3Bpbm5lciB7XG4gIHNjYWxlOiAwLjY7XG59XG4iXX0= */";
-n(css$1,{});
+var css$2 = ".neeto-fields-nano__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21ldGFkYXRhLXBhbmVsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMkNBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWVsZHMtbmFub19fbWV0YWRhdGEtY2FyZF9fc3Bpbm5lciB7XG4gIHNjYWxlOiAwLjY7XG59XG4iXX0= */";
+n(css$2,{});
 
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MetadataBlock = function MetadataBlock(_ref) {
   var labelProps = _ref.labelProps,
     label = _ref.label,
@@ -357,7 +435,7 @@ var MetadataBlock = function MetadataBlock(_ref) {
     "data-cy": label ? "".concat(hyphenize(label), "-container") : "meta-data-block-container",
     children: [!isInline && /*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-2",
-      children: [/*#__PURE__*/jsx(Label, _objectSpread$9(_objectSpread$9({
+      children: [/*#__PURE__*/jsx(Label, _objectSpread$b(_objectSpread$b({
         "data-cy": "".concat(hyphenize(label), "-label"),
         htmlFor: fieldId
       }, labelProps), {}, {
@@ -375,8 +453,8 @@ var MetadataBlock = function MetadataBlock(_ref) {
   });
 };
 
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var WithMetadataBlock = function WithMetadataBlock(Component) {
   var withMetadataBlockWrapper = function withMetadataBlockWrapper(props) {
     var submissionStatus = props.submissionStatus,
@@ -396,7 +474,7 @@ var WithMetadataBlock = function WithMetadataBlock(Component) {
       label: label,
       labelProps: labelProps,
       submissionStatus: submissionStatus,
-      children: /*#__PURE__*/jsx(Component, _objectSpread$8(_objectSpread$8({}, props), {}, {
+      children: /*#__PURE__*/jsx(Component, _objectSpread$a(_objectSpread$a({}, props), {}, {
         hasMetadataWrapper: true
       }))
     });
@@ -405,9 +483,9 @@ var WithMetadataBlock = function WithMetadataBlock(Component) {
   return withMetadataBlockWrapper;
 };
 
-var _excluded$1 = ["onBlur"];
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$2 = ["onBlur"];
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DateOrTime = function DateOrTime(props) {
   var isInline = props.isInline;
   var _useState = useState(isInline),
@@ -419,7 +497,7 @@ var DateOrTime = function DateOrTime(props) {
     handleSubmit = _useFormikFields.handleSubmit,
     _useFormikFields$fiel = _useFormikFields.fieldProps,
     onBlur = _useFormikFields$fiel.onBlur,
-    fieldProps = _objectWithoutProperties(_useFormikFields$fiel, _excluded$1),
+    fieldProps = _objectWithoutProperties(_useFormikFields$fiel, _excluded$2),
     helpers = _useFormikFields.helpers;
   var handleChange = function handleChange(dateTime) {
     value.current = dateTimeToString(dateTime);
@@ -460,26 +538,26 @@ var DateOrTime = function DateOrTime(props) {
     };
   }();
   if (props.kind === KINDS.time) {
-    return /*#__PURE__*/jsx(TimePicker, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, fieldProps), {}, {
+    return /*#__PURE__*/jsx(TimePicker, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, fieldProps), {}, {
       onOpenChange: onOpenChange
     })), {}, {
       use12Hours: true,
-      format: "h:mm A",
+      format: TWELVE_HOUR_FORMAT,
       open: isOpen,
       onChange: handleChange
     }));
   } else if (props.kind === KINDS.date) {
-    return /*#__PURE__*/jsx(DatePicker, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, fieldProps), {}, {
+    return /*#__PURE__*/jsx(DatePicker, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, fieldProps), {}, {
       onOpenChange: onOpenChange
     })), {}, {
       open: isOpen,
       onChange: handleChange
     }));
   }
-  return /*#__PURE__*/jsx(DatePicker, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsx(DatePicker, _objectSpread$9(_objectSpread$9({
     showTime: true,
-    timeFormat: "h:mm A"
-  }, _objectSpread$7(_objectSpread$7({}, fieldProps), {}, {
+    timeFormat: TWELVE_HOUR_FORMAT
+  }, _objectSpread$9(_objectSpread$9({}, fieldProps), {}, {
     onOpenChange: onOpenChange
   })), {}, {
     open: isOpen,
@@ -488,13 +566,37 @@ var DateOrTime = function DateOrTime(props) {
 };
 var DateOrTimeInput = WithMetadataBlock(DateOrTime);
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Email = function Email(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key !== "Enter" || event.shiftKey) return;
+    event.preventDefault();
+    handleSubmit();
+  };
+  return /*#__PURE__*/jsx(Input, _objectSpread$8(_objectSpread$8(_objectSpread$8({}, fieldProps), {}, {
+    type: "email"
+  }, !props.isInline && {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
+    }
+  }), {}, {
+    onKeyDown: handleKeyDown
+  }));
+};
+var EmailInput = WithMetadataBlock(Email);
+
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MultiOption = function MultiOption(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/jsx(Select, _objectSpread$6(_objectSpread$6({
+  return /*#__PURE__*/jsx(Select, _objectSpread$7(_objectSpread$7({
     isMulti: true,
     isSearchable: true,
     strategy: "fixed"
@@ -507,14 +609,14 @@ var MultiOption = function MultiOption(props) {
 };
 var MultiOptionInput = WithMetadataBlock(MultiOption);
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Number = function Number(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  return /*#__PURE__*/jsx(Input, _objectSpread$5(_objectSpread$5({}, fieldProps), {}, {
+  return /*#__PURE__*/jsx(Input, _objectSpread$6(_objectSpread$6({}, fieldProps), {}, {
     type: "number",
     onBlur: function onBlur() {
       return dirty && handleSubmit();
@@ -523,6 +625,52 @@ var Number = function Number(props) {
 };
 var NumberInput = WithMetadataBlock(Number);
 
+var css$1 = ".neeto-fields-phone-number-input .neeto-ui-input__prefix{padding-bottom:1px;padding-top:1px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3Bob25lX251bWJlcl9pbnB1dC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNFLHlEQUVFLGtCQUFBLENBREEsZUFDSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWVsZHMtcGhvbmUtbnVtYmVyLWlucHV0IHtcbiAgLm5lZXRvLXVpLWlucHV0X19wcmVmaXgge1xuICAgIHBhZGRpbmctdG9wOiAxcHg7XG4gICAgcGFkZGluZy1ib3R0b206IDFweDtcbiAgfVxufVxuIl19 */";
+n(css$1,{});
+
+var _excluded$1 = ["onBlur"];
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var withOnClickOutsideWrapper$1 = function withOnClickOutsideWrapper(Component) {
+  var WithOnClickOutsideWrapper = function WithOnClickOutsideWrapper(_ref) {
+    var _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+    var ref = useRef(null);
+    var isInline = onBlur !== noop;
+    useOnClickOutside(ref, onBlur, {
+      enabled: isInline
+    });
+    return isInline ? /*#__PURE__*/jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsx(Component, _objectSpread$5({}, props))
+    }) : /*#__PURE__*/jsx(Component, _objectSpread$5({}, props));
+  };
+  WithOnClickOutsideWrapper.displayName = "WithOnClickOutsideWrapper(".concat(getComponentDisplayName(Component), ")");
+  return WithOnClickOutsideWrapper;
+};
+var PhoneNumberInput = withOnClickOutsideWrapper$1(PhoneNumberInput$2);
+var PhoneNumber = function PhoneNumber(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty,
+    helpers = _useFormikFields.helpers;
+  return /*#__PURE__*/jsx(PhoneNumberInput, _objectSpread$5(_objectSpread$5(_objectSpread$5({
+    className: "neeto-fields-phone-number-input"
+  }, fieldProps), !props.isInline && {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
+    }
+  }), {}, {
+    size: "small",
+    onChange: function onChange(value) {
+      return helpers.setValue(value);
+    }
+  }));
+};
+var PhoneNumberInput$1 = WithMetadataBlock(PhoneNumber);
+
 var _excluded = ["onBlur"];
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -573,7 +721,7 @@ var RangePicker = function RangePicker(props) {
   //time_range
   return /*#__PURE__*/jsx(TimeRangePicker, _objectSpread$4(_objectSpread$4({}, fieldProps), {}, {
     use12Hours: true,
-    format: "h:mm A",
+    format: TWELVE_HOUR_FORMAT,
     onChange: handleChange
   }));
 };
@@ -670,7 +818,9 @@ var standardComponents = {
   multi_option: MultiOptionInput,
   date_range: RangePickerInput,
   time_range: RangePickerInput,
-  checkbox: Checkbox
+  checkbox: Checkbox,
+  phone_number: PhoneNumberInput$1,
+  email: EmailInput
 };
 var getFieldInput = function getFieldInput(_ref) {
   var field = _ref.field,
@@ -697,9 +847,18 @@ var transformValues = function transformValues(_ref2) {
   var neetoFieldValues = [];
   fields.forEach(function (_ref3) {
     var id = _ref3.id,
-      name = _ref3.name;
+      name = _ref3.name,
+      kind = _ref3.kind;
     var fieldPath = escapeString("".concat(name, "-").concat(id));
-    neetoFieldValues.push(allFieldValues[fieldPath]);
+    var fieldValue = allFieldValues[fieldPath];
+    var additionalData = isDateTime(kind) ? {
+      timezone: getTimezone()
+    } : {};
+    var hasData = pipe(prop("data"), isPresent);
+    var finalFieldValue = when(hasData, mergeDeepLeft({
+      data: additionalData
+    }), fieldValue);
+    neetoFieldValues.push(finalFieldValue);
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
@@ -767,8 +926,8 @@ var neetoFieldsUtils = {
 };
 var getTimezone = function getTimezone() {
   var _dayjs$$x;
-  return ((_dayjs$$x = dayjs$1().$x) === null || _dayjs$$x === void 0 ? void 0 : _dayjs$$x.$timezone) || dayjs$1.tz.guess();
+  return ((_dayjs$$x = dayjs().$x) === null || _dayjs$$x === void 0 ? void 0 : _dayjs$$x.$timezone) || dayjs.tz.guess();
 };
 
-export { DIRECT_EDIT_INPUT_FIELDS as D, getFieldInput as a, getValueFromBool as b, getTimezone as c, getInitialFieldValue as d, getNonSystemFields as g, neetoFieldsUtils as n };
-//# sourceMappingURL=utils-3dmfuYPy.js.map
+export { DIRECT_EDIT_INPUT_FIELDS as D, MISSING_VALUE_PLACEHOLDER as M, getFieldInput as a, getValueFromBool as b, DISPLAY_COMPONENT_MAP as c, getTimezone as d, getInitialFieldValue as e, getNonSystemFields as g, isDateTime as i, neetoFieldsUtils as n };
+//# sourceMappingURL=utils-DTT7cQxQ.js.map