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

package/dist/{utils-CrC4pt0n.js → utils-D1oMc6zE.js}

@@ -14,19 +14,24 @@ var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var React = require('react');
 var formik = require('formik');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var constants = require('./constants-BwI5NXX6.js');
+var constants = require('./constants-IdI-fPwf.js');
+var i18next = require('i18next');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Redirect = require('@bigbinary/neeto-icons/Redirect');
+var Button = require('@bigbinary/neetoui/Button');
+var jsxRuntime = require('react/jsx-runtime');
+var PhoneNumber$2 = require('@bigbinary/neeto-molecules/PhoneNumber');
 var DatePicker = require('@bigbinary/neetoui/DatePicker');
 var TimePicker = require('@bigbinary/neetoui/TimePicker');
-var dayjs = require('dayjs');
-var i18next = require('i18next');
 var yup = require('yup');
 var general = require('@bigbinary/neeto-commons-frontend/utils/general');
 var Check = require('@bigbinary/neeto-icons/Check');
 var Label = require('@bigbinary/neetoui/Label');
 var Spinner = require('@bigbinary/neetoui/Spinner');
-var jsxRuntime = require('react/jsx-runtime');
-var Select = require('@bigbinary/neetoui/formik/Select');
+var injectCss = require('./inject-css-vQvjPR2x.js');
 var Input = require('@bigbinary/neetoui/Input');
+var Select = require('@bigbinary/neetoui/formik/Select');
 var Select$1 = require('@bigbinary/neetoui/Select');
 var Textarea = require('@bigbinary/neetoui/Textarea');
 
@@ -49,16 +54,85 @@ function _interopNamespaceDefault(e) {
 
 var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
-var DIRECT_EDIT_INPUT_FIELDS = [constants.KINDS.checkbox];
+var OpenInApp = function OpenInApp(_ref) {
+  var value = _ref.value,
+    type = _ref.type;
+  var data = CONTACT_LINK_DATA[type];
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    },
+    children: /*#__PURE__*/jsxRuntime.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 Email$1 = function Email(_ref) {
+  var value = _ref.value;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full items-center gap-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      style: "body2",
+      children: value
+    }), value !== MISSING_VALUE_PLACEHOLDER && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
+        value: value,
+        className: "flex-shrink-0",
+        size: "small",
+        style: "text"
+      }), /*#__PURE__*/jsxRuntime.jsx(OpenInApp, {
+        value: value,
+        type: constants.KINDS.email
+      })]
+    })]
+  });
+};
 
-var isDateTime = function isDateTime(kind) {
-  return ["date", "time", "date_range", "time_range", "datetime"].includes(kind);
+var PhoneNumber$1 = function PhoneNumber(_ref) {
+  var value = _ref.value;
+  var hasValue = value !== MISSING_VALUE_PLACEHOLDER;
+  return hasValue ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full items-center",
+    children: [/*#__PURE__*/jsxRuntime.jsx(PhoneNumber$2.PhoneNumber, {
+      value: value,
+      showCopyButton: true,
+      showEmoji: true
+    }), /*#__PURE__*/jsxRuntime.jsx(OpenInApp, {
+      value: value,
+      type: constants.KINDS.phoneNumber
+    })]
+  }) : /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    style: "body2",
+    children: value
+  });
 };
+
+var DIRECT_EDIT_INPUT_FIELDS = [constants.KINDS.checkbox];
+var DISPLAY_COMPONENT_MAP = _defineProperty(_defineProperty({}, constants.KINDS.phoneNumber, PhoneNumber$1), constants.KINDS.email, Email$1);
+var CONTACT_LINK_DATA = _defineProperty(_defineProperty({}, constants.KINDS.email, {
+  prefix: "mailto:",
+  tooltipMessage: i18next.t("neetoFields.tooltips.composeEmail")
+}), constants.KINDS.phoneNumber, {
+  prefix: "tel:",
+  tooltipMessage: i18next.t("neetoFields.tooltips.startCall")
+});
+var MISSING_VALUE_PLACEHOLDER = "-";
+
 var isDropdown = function isDropdown(kind) {
   return ["single_option", "multi_option"].includes(kind);
 };
 var isTextType = function isTextType(kind) {
-  return [constants.KINDS.text, constants.KINDS.decimal, constants.KINDS.integer, constants.KINDS.monetary, constants.KINDS.number, constants.KINDS.regex, constants.KINDS.textarea].includes(kind);
+  return [constants.KINDS.text, constants.KINDS.decimal, constants.KINDS.integer, constants.KINDS.monetary, constants.KINDS.number, constants.KINDS.regex, constants.KINDS.textarea, constants.KINDS.email, constants.KINDS.phoneNumber].includes(kind);
 };
 
 var dateSchema = yup__namespace.date().nullable();
@@ -141,6 +215,14 @@ var getBasicValidationSchema = function getBasicValidationSchema(_ref2) {
         var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
         return yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
       }
+    case constants.KINDS.email:
+      return yup__namespace.string().email(i18next.t("neetoFields.validations.invalidEntity", {
+        entity: i18next.t("neetoFields.fields.kinds.email")
+      }));
+    case constants.KINDS.phoneNumber:
+      return PhoneNumber$2.validation(i18next.t("neetoFields.validations.invalidEntity", {
+        entity: i18next.t("neetoFields.fields.kinds.phoneNumber")
+      }));
     default:
       return yup__namespace.mixed();
   }
@@ -200,7 +282,7 @@ var validateField = /*#__PURE__*/function () {
   };
 }();
 var dateTimeToString = function dateTimeToString(dateTime) {
-  return dateTime && dayjs(dateTime).toString() || "";
+  return dateTime && utils.dayjs(dateTime).toString() || "";
 };
 var getValueFromBool = function getValueFromBool(value) {
   return value === true ? i18next.t("neetoFields.common.yes") : i18next.t("neetoFields.common.no");
@@ -209,9 +291,9 @@ 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,
@@ -229,10 +311,11 @@ var useFormikFields = function useFormikFields(_ref) {
     handleBlur = _ref$onBlur === void 0 ? neetoCist.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 = formik.useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
+    isValid = formikContext.isValid,
     isSubmitting = formikContext.isSubmitting;
   var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
   var fieldName = kind === constants.KINDS.multiOption ? "values" : "value";
@@ -268,7 +351,7 @@ var useFormikFields = function useFormikFields(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             ramda.isNotNil(value) && helpers.setValue(value);
-            _context.t0 = individualSubmit;
+            _context.t0 = individualSubmit && isValid;
             if (!_context.t0) {
               _context.next = 5;
               break;
@@ -321,7 +404,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),
@@ -333,22 +416,21 @@ var useFormikFields = function useFormikFields(_ref) {
       onBlur: isInline ? getBlurHandler(kind) : undefined,
       disabled: disabled,
       //conditional props
-      options: isDropdown(kind) ? fieldData : undefined,
-      getPopupContainer: !isInline && isDateTime(kind) ? ramda.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 === index.SUBMIT_FIELD_STATUS.SUBMITTING;
-  return /*#__PURE__*/jsxRuntime.jsx(NeetoUICheckbox, _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, fieldProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(NeetoUICheckbox, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, fieldProps), {}, {
     disabled: disabled
   })), {}, {
     checked: fieldProps.value,
@@ -359,13 +441,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$2 = ".neeto-fields-nano__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21ldGFkYXRhLXBhbmVsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMkNBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWVsZHMtbmFub19fbWV0YWRhdGEtY2FyZF9fc3Bpbm5lciB7XG4gIHNjYWxlOiAwLjY7XG59XG4iXX0= */";
+injectCss.n(css$2,{});
 
-var css$1 = ".neeto-fields-nano__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21ldGFkYXRhLXBhbmVsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMkNBQ0UsUUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWVsZHMtbmFub19fbWV0YWRhdGEtY2FyZF9fc3Bpbm5lciB7XG4gIHNjYWxlOiAwLjY7XG59XG4iXX0= */";
-n(css$1,{});
-
-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,
@@ -378,7 +458,7 @@ var MetadataBlock = function MetadataBlock(_ref) {
     "data-cy": label ? "".concat(general.hyphenize(label), "-container") : "meta-data-block-container",
     children: [!isInline && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread$9(_objectSpread$9({
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread$b(_objectSpread$b({
         "data-cy": "".concat(general.hyphenize(label), "-label"),
         htmlFor: fieldId
       }, labelProps), {}, {
@@ -396,8 +476,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,
@@ -417,7 +497,7 @@ var WithMetadataBlock = function WithMetadataBlock(Component) {
       label: label,
       labelProps: labelProps,
       submissionStatus: submissionStatus,
-      children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$8(_objectSpread$8({}, props), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$a(_objectSpread$a({}, props), {}, {
         hasMetadataWrapper: true
       }))
     });
@@ -426,9 +506,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 = React.useState(isInline),
@@ -440,7 +520,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);
@@ -481,7 +561,7 @@ var DateOrTime = function DateOrTime(props) {
     };
   }();
   if (props.kind === constants.KINDS.time) {
-    return /*#__PURE__*/jsxRuntime.jsx(TimePicker, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, fieldProps), {}, {
+    return /*#__PURE__*/jsxRuntime.jsx(TimePicker, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, fieldProps), {}, {
       onOpenChange: onOpenChange
     })), {}, {
       use12Hours: true,
@@ -490,17 +570,17 @@ var DateOrTime = function DateOrTime(props) {
       onChange: handleChange
     }));
   } else if (props.kind === constants.KINDS.date) {
-    return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, fieldProps), {}, {
+    return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, fieldProps), {}, {
       onOpenChange: onOpenChange
     })), {}, {
       open: isOpen,
       onChange: handleChange
     }));
   }
-  return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$9(_objectSpread$9({
     showTime: true,
     timeFormat: "h:mm A"
-  }, _objectSpread$7(_objectSpread$7({}, fieldProps), {}, {
+  }, _objectSpread$9(_objectSpread$9({}, fieldProps), {}, {
     onOpenChange: onOpenChange
   })), {}, {
     open: isOpen,
@@ -509,13 +589,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__*/jsxRuntime.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__*/jsxRuntime.jsx(Select, _objectSpread$6(_objectSpread$6({
+  return /*#__PURE__*/jsxRuntime.jsx(Select, _objectSpread$7(_objectSpread$7({
     isMulti: true,
     isSearchable: true,
     strategy: "fixed"
@@ -528,14 +632,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__*/jsxRuntime.jsx(Input, _objectSpread$5(_objectSpread$5({}, fieldProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$6(_objectSpread$6({}, fieldProps), {}, {
     type: "number",
     onBlur: function onBlur() {
       return dirty && handleSubmit();
@@ -544,6 +648,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 */";
+injectCss.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 ? neetoCist.noop : _ref$onBlur,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+    var ref = React.useRef(null);
+    var isInline = onBlur !== neetoCist.noop;
+    reactUtils.useOnClickOutside(ref, onBlur, {
+      enabled: isInline
+    });
+    return isInline ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$5({}, props))
+    }) : /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$5({}, props));
+  };
+  WithOnClickOutsideWrapper.displayName = "WithOnClickOutsideWrapper(".concat(getComponentDisplayName(Component), ")");
+  return WithOnClickOutsideWrapper;
+};
+var PhoneNumberInput = withOnClickOutsideWrapper$1(PhoneNumber$2.PhoneNumberInput);
+var PhoneNumber = function PhoneNumber(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty,
+    helpers = _useFormikFields.helpers;
+  return /*#__PURE__*/jsxRuntime.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; }
@@ -620,7 +770,7 @@ var SingleOption = function SingleOption(props) {
 var SingleOptionInput = WithMetadataBlock(SingleOption);
 
 var css = ".neeto-fields-nano-adaptive-input textarea{--neeto-ui-input-line-height:1.5}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--small{--neeto-ui-textarea-padding-x:0.5rem;--neeto-ui-textarea-padding-y:0.25rem}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--medium{--neeto-ui-textarea-padding-x:0.5rem;--neeto-ui-textarea-padding-y:0.3125rem}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--large{--neeto-ui-textarea-padding-x:0.75rem;--neeto-ui-textarea-padding-y:0.5rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2FkYXB0aXZlX2lucHV0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0UsMkNBQ0UsZ0NBQUosQ0FJSSx3RUFDRSxvQ0FBQSxDQUNBLHFDQUZOLENBS0kseUVBQ0Usb0NBQUEsQ0FDQSx1Q0FITixDQU1JLHdFQUNFLHFDQUFBLENBQ0Esb0NBSk4iLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQge1xuICB0ZXh0YXJlYSB7XG4gICAgLS1uZWV0by11aS1pbnB1dC1saW5lLWhlaWdodDogMS41O1xuICB9XG5cbiAgLm5lZXRvLXVpLWlucHV0IHtcbiAgICAmLm5lZXRvLXVpLWlucHV0LS1zbWFsbCB7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogMC41cmVtO1xuICAgICAgLS1uZWV0by11aS10ZXh0YXJlYS1wYWRkaW5nLXk6IDAuMjVyZW07XG4gICAgfVxuXG4gICAgJi5uZWV0by11aS1pbnB1dC0tbWVkaXVtIHtcbiAgICAgIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy14OiAwLjVyZW07XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteTogMC4zMTI1cmVtO1xuICAgIH1cblxuICAgICYubmVldG8tdWktaW5wdXQtLWxhcmdlIHtcbiAgICAgIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy14OiAwLjc1cmVtO1xuICAgICAgLS1uZWV0by11aS10ZXh0YXJlYS1wYWRkaW5nLXk6IDAuNXJlbTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */";
-n(css,{});
+injectCss.n(css,{});
 
 function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -691,7 +841,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,
@@ -792,10 +944,12 @@ var getTimezone = function getTimezone() {
 };
 
 exports.DIRECT_EDIT_INPUT_FIELDS = DIRECT_EDIT_INPUT_FIELDS;
+exports.DISPLAY_COMPONENT_MAP = DISPLAY_COMPONENT_MAP;
+exports.MISSING_VALUE_PLACEHOLDER = MISSING_VALUE_PLACEHOLDER;
 exports.getFieldInput = getFieldInput;
 exports.getInitialFieldValue = getInitialFieldValue;
 exports.getNonSystemFields = getNonSystemFields;
 exports.getTimezone = getTimezone;
 exports.getValueFromBool = getValueFromBool;
 exports.neetoFieldsUtils = neetoFieldsUtils;
-//# sourceMappingURL=utils-CrC4pt0n.js.map
+//# sourceMappingURL=utils-D1oMc6zE.js.map