@trii/components 2.0.50 → 2.0.52

package/dist/esm/index.js

@@ -1,10 +1,9 @@
 import * as React$1 from 'react';
-import React__default, { useCallback, useEffect, createContext, useContext, useState, useMemo, Children, isValidElement, cloneElement, useRef } from 'react';
-import { styled as styled$5, Box as Box$2, IconButton as IconButton$2, Avatar, Typography as Typography$2, CircularProgress as CircularProgress$2, Tooltip, Chip as Chip$2, Popper as Popper$2, ClickAwayListener, CardContent, Stack as Stack$2, Popover as Popover$2, TextField as TextField$1, Autocomplete, Divider, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Button as Button$2, Menu as Menu$2, ListItemIcon, ListItemText, Modal as Modal$2, Grid, Backdrop as Backdrop$2, Fade as Fade$2 } from '@mui/material';
+import React__default, { useCallback, useEffect, createContext, useContext, useState, useMemo, Children, isValidElement, cloneElement, useDeferredValue, createElement, useRef } from 'react';
+import { styled as styled$5, Box as Box$2, IconButton as IconButton$2, Avatar, Typography as Typography$2, CircularProgress as CircularProgress$2, Tooltip, Chip as Chip$2, Popper as Popper$2, ClickAwayListener, CardContent, Stack as Stack$2, Popover as Popover$2, TextField as TextField$1, Autocomplete, Button as Button$2, Divider, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Menu as Menu$2, ListItemIcon, ListItemText, Modal as Modal$2, Grid, LinearProgress, Backdrop as Backdrop$2, Fade as Fade$2 } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
-import { initReactI18next, useTranslation } from 'react-i18next';
+import { initReactI18next, I18nextProvider, useTranslation } from 'react-i18next';
 import i18n from 'i18next';
-export { default as i18n } from 'i18next';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -7402,21 +7401,21 @@ var styleFunctionSx = /*#__PURE__*/Object.freeze({
 
 var require$$8 = /*@__PURE__*/getAugmentedNamespace(styleFunctionSx);
 
-var _interopRequireDefault$j = interopRequireDefaultExports;
+var _interopRequireDefault$k = interopRequireDefaultExports;
 Object.defineProperty(createStyled$3, "__esModule", {
   value: true
 });
 var _default = createStyled$3.default = createStyled$1;
 var shouldForwardProp_1 = createStyled$3.shouldForwardProp = shouldForwardProp$1;
 createStyled$3.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault$j(require_extends());
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault$j(requireObjectWithoutPropertiesLoose());
+var _extends2 = _interopRequireDefault$k(require_extends());
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault$k(requireObjectWithoutPropertiesLoose());
 var _styledEngine$1 = _interopRequireWildcard$2(require$$1$1);
 var _deepmerge = require$$4;
-var _capitalize = _interopRequireDefault$j(require$$5);
-var _getDisplayName = _interopRequireDefault$j(require$$6);
-var _createTheme = _interopRequireDefault$j(require$$7);
-var _styleFunctionSx = _interopRequireDefault$j(require$$8);
+var _capitalize = _interopRequireDefault$k(require$$5);
+var _getDisplayName = _interopRequireDefault$k(require$$6);
+var _createTheme = _interopRequireDefault$k(require$$7);
+var _styleFunctionSx = _interopRequireDefault$k(require$$8);
 const _excluded$1v = ["ownerState"],
   _excluded2$d = ["variants"],
   _excluded3$4 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
@@ -7686,7 +7685,7 @@ var require$$1 = /*@__PURE__*/getAugmentedNamespace(formatMuiErrorMessage$1);
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(clamp);
 
-var _interopRequireDefault$i = interopRequireDefaultExports;
+var _interopRequireDefault$j = interopRequireDefaultExports;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true
 });
@@ -7708,8 +7707,8 @@ colorManipulator.private_safeEmphasize = private_safeEmphasize;
 colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor$1;
 colorManipulator.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault$i(require$$1);
-var _clamp = _interopRequireDefault$i(require$$2);
+var _formatMuiErrorMessage2 = _interopRequireDefault$j(require$$1);
+var _clamp = _interopRequireDefault$j(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -9075,27 +9074,27 @@ function requireCreateSvgIcon () {
 	return createSvgIcon;
 }
 
-var _interopRequireDefault$h = interopRequireDefaultExports;
+var _interopRequireDefault$i = interopRequireDefaultExports;
 Object.defineProperty(ArrowForward, "__esModule", {
   value: true
 });
-var default_1$i = ArrowForward.default = void 0;
-var _createSvgIcon$h = _interopRequireDefault$h(requireCreateSvgIcon());
-var _jsxRuntime$h = jsxRuntimeExports;
-default_1$i = ArrowForward.default = (0, _createSvgIcon$h.default)( /*#__PURE__*/(0, _jsxRuntime$h.jsx)("path", {
+var default_1$j = ArrowForward.default = void 0;
+var _createSvgIcon$i = _interopRequireDefault$i(requireCreateSvgIcon());
+var _jsxRuntime$i = jsxRuntimeExports;
+default_1$j = ArrowForward.default = (0, _createSvgIcon$i.default)( /*#__PURE__*/(0, _jsxRuntime$i.jsx)("path", {
   d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
 }), 'ArrowForward');
 
 var Message = {};
 
-var _interopRequireDefault$g = interopRequireDefaultExports;
+var _interopRequireDefault$h = interopRequireDefaultExports;
 Object.defineProperty(Message, "__esModule", {
   value: true
 });
-var default_1$h = Message.default = void 0;
-var _createSvgIcon$g = _interopRequireDefault$g(requireCreateSvgIcon());
-var _jsxRuntime$g = jsxRuntimeExports;
-default_1$h = Message.default = (0, _createSvgIcon$g.default)( /*#__PURE__*/(0, _jsxRuntime$g.jsx)("path", {
+var default_1$i = Message.default = void 0;
+var _createSvgIcon$h = _interopRequireDefault$h(requireCreateSvgIcon());
+var _jsxRuntime$h = jsxRuntimeExports;
+default_1$i = Message.default = (0, _createSvgIcon$h.default)( /*#__PURE__*/(0, _jsxRuntime$h.jsx)("path", {
   d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-2 12H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"
 }), 'Message');
 
@@ -9175,7 +9174,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToContacts(e);
                                 onClose();
                             }
-                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$i, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$j, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
                             handleNavigateToConversations(e);
                             onClose();
                         }, onMouseDown: (e) => {
@@ -9184,7 +9183,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToConversations(e);
                                 onClose();
                             }
-                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1$h, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
+                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1$i, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
 };
 
 const Container$1 = styled$5(Box$2)({
@@ -15294,7 +15293,22 @@ var global$2 = {
 	noOptions: "No options",
 	noValue: "No value",
 	birthdate: "Birthdate",
-	country: "Country"
+	country: "Country",
+	searchLocation: "Search location"
+};
+var searchLocationModal$1 = {
+	searchAddress: "Search address",
+	enterLocation: "Enter a location",
+	city: "City",
+	state: "State",
+	postalCode: "Postal code",
+	country: "Country",
+	saveMainAddress: "Save main address",
+	saveSecondaryAddress: "Save secondary address",
+	loadingGoogleMaps: "Loading Google Maps...",
+	googleMapsUnavailable: "Google Maps unavailable",
+	googleMapsNotLoaded: "Google Maps not loaded",
+	selectedPlaceNoLocation: "Selected place has no location data"
 };
 var avatar$1 = {
 	upload: "Upload photo",
@@ -15337,6 +15351,7 @@ var en = {
 	view: view$1,
 	tags: tags$1,
 	global: global$2,
+	searchLocationModal: searchLocationModal$1,
 	avatar: avatar$1,
 	contactEdit: contactEdit$1,
 	conversations: conversations$1
@@ -15364,7 +15379,22 @@ var global$1 = {
 	noOptions: "Sin opciones",
 	noValue: "Sin valor",
 	birthdate: "Fecha de nacimiento",
-	country: "País"
+	country: "País",
+	searchLocation: "Buscar ubicación"
+};
+var searchLocationModal = {
+	searchAddress: "Buscar dirección",
+	enterLocation: "Ingresá una ubicación",
+	city: "Ciudad",
+	state: "Estado",
+	postalCode: "Código postal",
+	country: "País",
+	saveMainAddress: "Guardar como dirección principal",
+	saveSecondaryAddress: "Guardar como dirección secundaria",
+	loadingGoogleMaps: "Cargando Google Maps...",
+	googleMapsUnavailable: "Google Maps no disponible",
+	googleMapsNotLoaded: "Google Maps no está cargado",
+	selectedPlaceNoLocation: "La ubicación seleccionada no tiene coordenadas"
 };
 var avatar = {
 	upload: "Subir foto",
@@ -15407,6 +15437,7 @@ var es = {
 	view: view,
 	tags: tags,
 	global: global$1,
+	searchLocationModal: searchLocationModal,
 	avatar: avatar,
 	contactEdit: contactEdit,
 	conversations: conversations
@@ -15416,7 +15447,8 @@ const resources = {
     en: { translation: en },
     es: { translation: es },
 };
-i18n.use(initReactI18next).init({
+const i18nInstance = i18n.createInstance();
+i18nInstance.use(initReactI18next).init({
     resources,
     lng: 'en',
     fallbackLng: 'en',
@@ -15455,7 +15487,7 @@ const PopupContainer = styled$5(Box$2)(({ theme }) => ({
         background: '#616161',
     },
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
+const ContactInfoPopupContent = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
     const { t: i18nT, i18n } = useTranslation();
     useEffect(() => {
         if (language) {
@@ -15515,48 +15547,51 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
     }, [open, onClose]);
     return (jsxRuntimeExports.jsx(Popper$2, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') }), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod$1, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
+const ContactInfoPopup = (props) => {
+    return (jsxRuntimeExports.jsx(I18nextProvider, { i18n: i18nInstance, children: jsxRuntimeExports.jsx(ContactInfoPopupContent, { ...props }) }));
+};
 
 var Close = {};
 
-var _interopRequireDefault$f = interopRequireDefaultExports;
+var _interopRequireDefault$g = interopRequireDefaultExports;
 Object.defineProperty(Close, "__esModule", {
   value: true
 });
-var default_1$g = Close.default = void 0;
-var _createSvgIcon$f = _interopRequireDefault$f(requireCreateSvgIcon());
-var _jsxRuntime$f = jsxRuntimeExports;
-default_1$g = Close.default = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.jsx)("path", {
+var default_1$h = Close.default = void 0;
+var _createSvgIcon$g = _interopRequireDefault$g(requireCreateSvgIcon());
+var _jsxRuntime$g = jsxRuntimeExports;
+default_1$h = Close.default = (0, _createSvgIcon$g.default)( /*#__PURE__*/(0, _jsxRuntime$g.jsx)("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Close');
 
 var Edit = {};
 
-var _interopRequireDefault$e = interopRequireDefaultExports;
+var _interopRequireDefault$f = interopRequireDefaultExports;
 Object.defineProperty(Edit, "__esModule", {
   value: true
 });
-var default_1$f = Edit.default = void 0;
-var _createSvgIcon$e = _interopRequireDefault$e(requireCreateSvgIcon());
-var _jsxRuntime$e = jsxRuntimeExports;
-default_1$f = Edit.default = (0, _createSvgIcon$e.default)( /*#__PURE__*/(0, _jsxRuntime$e.jsx)("path", {
+var default_1$g = Edit.default = void 0;
+var _createSvgIcon$f = _interopRequireDefault$f(requireCreateSvgIcon());
+var _jsxRuntime$f = jsxRuntimeExports;
+default_1$g = Edit.default = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.jsx)("path", {
   d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
 }), 'Edit');
 
 var Label = {};
 
-var _interopRequireDefault$d = interopRequireDefaultExports;
+var _interopRequireDefault$e = interopRequireDefaultExports;
 Object.defineProperty(Label, "__esModule", {
   value: true
 });
-var default_1$e = Label.default = void 0;
-var _createSvgIcon$d = _interopRequireDefault$d(requireCreateSvgIcon());
-var _jsxRuntime$d = jsxRuntimeExports;
-default_1$e = Label.default = (0, _createSvgIcon$d.default)( /*#__PURE__*/(0, _jsxRuntime$d.jsx)("path", {
+var default_1$f = Label.default = void 0;
+var _createSvgIcon$e = _interopRequireDefault$e(requireCreateSvgIcon());
+var _jsxRuntime$e = jsxRuntimeExports;
+default_1$f = Label.default = (0, _createSvgIcon$e.default)( /*#__PURE__*/(0, _jsxRuntime$e.jsx)("path", {
   d: "M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12z"
 }), 'Label');
 
-const noop$4 = (key) => key;
-const TranslationContext = createContext(noop$4);
+const noop$5 = (key) => key;
+const TranslationContext = createContext(noop$5);
 const TranslationProvider = ({ t, children }) => {
     return jsxRuntimeExports.jsx(TranslationContext.Provider, { value: t, children: children });
 };
@@ -15564,7 +15599,7 @@ const useTranslationContext = () => {
     const t = useContext(TranslationContext);
     if (!t) {
         console.warn('[useTranslationContext] using noop, context value is falsy');
-        return noop$4;
+        return noop$5;
     }
     return (...args) => {
         const [key, ...rest] = args;
@@ -15618,7 +15653,7 @@ const Tags = ({ tags, onEditTags }) => {
                                 bgcolor: 'action.hover',
                                 color: 'text.primary',
                             },
-                        }, children: safeTags.length ? jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" }) : jsxRuntimeExports.jsx(default_1$e, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(Popover$2, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(Box$2, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(Stack$2, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(Chip$2, { label: tag.name, size: "small", variant: "outlined", sx: {
+                        }, children: safeTags.length ? jsxRuntimeExports.jsx(default_1$g, { fontSize: "small" }) : jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(Popover$2, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(Box$2, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(Stack$2, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(Chip$2, { label: tag.name, size: "small", variant: "outlined", sx: {
                                     borderRadius: 999,
                                     maxWidth: 160,
                                     '& .MuiChip-label': {
@@ -15720,31 +15755,31 @@ const ContactName = ({ displayName, contactType, firstName, lastName, name, enti
 
 var Delete = {};
 
-var _interopRequireDefault$c = interopRequireDefaultExports;
+var _interopRequireDefault$d = interopRequireDefaultExports;
 Object.defineProperty(Delete, "__esModule", {
   value: true
 });
-var default_1$d = Delete.default = void 0;
-var _createSvgIcon$c = _interopRequireDefault$c(requireCreateSvgIcon());
-var _jsxRuntime$c = jsxRuntimeExports;
-default_1$d = Delete.default = (0, _createSvgIcon$c.default)( /*#__PURE__*/(0, _jsxRuntime$c.jsx)("path", {
+var default_1$e = Delete.default = void 0;
+var _createSvgIcon$d = _interopRequireDefault$d(requireCreateSvgIcon());
+var _jsxRuntime$d = jsxRuntimeExports;
+default_1$e = Delete.default = (0, _createSvgIcon$d.default)( /*#__PURE__*/(0, _jsxRuntime$d.jsx)("path", {
   d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"
 }), 'Delete');
 
 var PhotoCamera = {};
 
-var _interopRequireDefault$b = interopRequireDefaultExports;
+var _interopRequireDefault$c = interopRequireDefaultExports;
 Object.defineProperty(PhotoCamera, "__esModule", {
   value: true
 });
-var default_1$c = PhotoCamera.default = void 0;
-var _createSvgIcon$b = _interopRequireDefault$b(requireCreateSvgIcon());
-var _jsxRuntime$b = jsxRuntimeExports;
-default_1$c = PhotoCamera.default = (0, _createSvgIcon$b.default)([/*#__PURE__*/(0, _jsxRuntime$b.jsx)("circle", {
+var default_1$d = PhotoCamera.default = void 0;
+var _createSvgIcon$c = _interopRequireDefault$c(requireCreateSvgIcon());
+var _jsxRuntime$c = jsxRuntimeExports;
+default_1$d = PhotoCamera.default = (0, _createSvgIcon$c.default)([/*#__PURE__*/(0, _jsxRuntime$c.jsx)("circle", {
   cx: "12",
   cy: "12",
   r: "3.2"
-}, "0"), /*#__PURE__*/(0, _jsxRuntime$b.jsx)("path", {
+}, "0"), /*#__PURE__*/(0, _jsxRuntime$c.jsx)("path", {
   d: "M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5"
 }, "1")], 'PhotoCamera');
 
@@ -15778,11 +15813,11 @@ const AvatarWithActions = ({ src, alt, onError, onUpload, onDelete, isUploading,
                             color: 'common.white',
                             bgcolor: 'rgba(0, 0, 0, 0.25)',
                             '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.35)' },
-                        }, children: jsxRuntimeExports.jsx(default_1$c, { fontSize: "small" }) }), jsxRuntimeExports.jsx(IconButton$2, { size: "small", "aria-label": t('avatar.delete'), onClick: onDelete, disabled: Boolean(isDeleting), sx: {
+                        }, children: jsxRuntimeExports.jsx(default_1$d, { fontSize: "small" }) }), jsxRuntimeExports.jsx(IconButton$2, { size: "small", "aria-label": t('avatar.delete'), onClick: onDelete, disabled: Boolean(isDeleting), sx: {
                             color: 'common.white',
                             bgcolor: 'rgba(0, 0, 0, 0.25)',
                             '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.35)' },
-                        }, children: jsxRuntimeExports.jsx(default_1$d, { fontSize: "small" }) })] })] }));
+                        }, children: jsxRuntimeExports.jsx(default_1$e, { fontSize: "small" }) })] })] }));
 };
 
 const HeaderContainer = styled$5(Box$2)({
@@ -15800,27 +15835,27 @@ const Header = ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto,
 
 var ArrowBack = {};
 
-var _interopRequireDefault$a = interopRequireDefaultExports;
+var _interopRequireDefault$b = interopRequireDefaultExports;
 Object.defineProperty(ArrowBack, "__esModule", {
   value: true
 });
-var default_1$b = ArrowBack.default = void 0;
-var _createSvgIcon$a = _interopRequireDefault$a(requireCreateSvgIcon());
-var _jsxRuntime$a = jsxRuntimeExports;
-default_1$b = ArrowBack.default = (0, _createSvgIcon$a.default)( /*#__PURE__*/(0, _jsxRuntime$a.jsx)("path", {
+var default_1$c = ArrowBack.default = void 0;
+var _createSvgIcon$b = _interopRequireDefault$b(requireCreateSvgIcon());
+var _jsxRuntime$b = jsxRuntimeExports;
+default_1$c = ArrowBack.default = (0, _createSvgIcon$b.default)( /*#__PURE__*/(0, _jsxRuntime$b.jsx)("path", {
   d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
 }), 'ArrowBack');
 
 var Save = {};
 
-var _interopRequireDefault$9 = interopRequireDefaultExports;
+var _interopRequireDefault$a = interopRequireDefaultExports;
 Object.defineProperty(Save, "__esModule", {
   value: true
 });
-var default_1$a = Save.default = void 0;
-var _createSvgIcon$9 = _interopRequireDefault$9(requireCreateSvgIcon());
-var _jsxRuntime$9 = jsxRuntimeExports;
-default_1$a = Save.default = (0, _createSvgIcon$9.default)( /*#__PURE__*/(0, _jsxRuntime$9.jsx)("path", {
+var default_1$b = Save.default = void 0;
+var _createSvgIcon$a = _interopRequireDefault$a(requireCreateSvgIcon());
+var _jsxRuntime$a = jsxRuntimeExports;
+default_1$b = Save.default = (0, _createSvgIcon$a.default)( /*#__PURE__*/(0, _jsxRuntime$a.jsx)("path", {
   d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z"
 }), 'Save');
 
@@ -15829,7 +15864,7 @@ var useThemeWithoutDefault = {};
 Object.defineProperty(useThemeWithoutDefault, "__esModule", {
   value: true
 });
-var default_1$9 = useThemeWithoutDefault.default = void 0;
+var default_1$a = useThemeWithoutDefault.default = void 0;
 var React = _interopRequireWildcard$1(React__default);
 var _styledEngine = require$$1$1;
 function _getRequireWildcardCache$1(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$1 = function (e) { return e ? t : r; })(e); }
@@ -15841,7 +15876,7 @@ function useTheme$3(defaultTheme = null) {
   const contextTheme = React.useContext(_styledEngine.ThemeContext);
   return !contextTheme || isObjectEmpty$2(contextTheme) ? defaultTheme : contextTheme;
 }
-default_1$9 = useThemeWithoutDefault.default = useTheme$3;
+default_1$a = useThemeWithoutDefault.default = useTheme$3;
 
 var top = 'top';
 var bottom = 'bottom';
@@ -18928,7 +18963,7 @@ const PopperRoot = styled$3(BasePopper, {
  */
 const Popper = /*#__PURE__*/React$1.forwardRef(function Popper(inProps, ref) {
   var _slots$root;
-  const theme = default_1$9();
+  const theme = default_1$a();
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiPopper'
@@ -19915,7 +19950,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
   onExited: PropTypes.func
 } : {}; // Name the function so it is clearer in the documentation
 
-function noop$3() {}
+function noop$4() {}
 
 Transition.defaultProps = {
   in: false,
@@ -19924,12 +19959,12 @@ Transition.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  onEnter: noop$3,
-  onEntering: noop$3,
-  onEntered: noop$3,
-  onExit: noop$3,
-  onExiting: noop$3,
-  onExited: noop$3
+  onEnter: noop$4,
+  onEntering: noop$4,
+  onEntered: noop$4,
+  onExit: noop$4,
+  onExiting: noop$4,
+  onExited: noop$4
 };
 Transition.UNMOUNTED = UNMOUNTED;
 Transition.EXITED = EXITED;
@@ -24835,8 +24870,35 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, onCrea
     const t = useTranslationContext();
     const [searchValue, setSearchValue] = useState('');
     const [limit, setLimit] = useState(PAGE_SIZE);
+    const deferredSearchValue = useDeferredValue(searchValue);
     const safeOptions = useMemo(() => options ?? [], [options]);
-    const visibleOptions = useMemo(() => safeOptions.slice(0, limit), [safeOptions, limit]);
+    const filteredOptions = useMemo(() => {
+        const q = String(deferredSearchValue ?? '')
+            .trim()
+            .toLowerCase();
+        if (!q)
+            return safeOptions;
+        return safeOptions.filter((o) => String(o?.name ?? '')
+            .toLowerCase()
+            .includes(q));
+    }, [safeOptions, deferredSearchValue]);
+    const visibleOptions = useMemo(() => filteredOptions.slice(0, limit), [filteredOptions, limit]);
+    const optionsWithSelectedValues = useMemo(() => {
+        const byId = new Map();
+        for (const selected of value ?? []) {
+            if (!selected?.id)
+                continue;
+            byId.set(String(selected.id), selected);
+        }
+        for (const opt of visibleOptions ?? []) {
+            if (!opt?.id)
+                continue;
+            if (byId.has(String(opt.id)))
+                continue;
+            byId.set(String(opt.id), opt);
+        }
+        return Array.from(byId.values());
+    }, [value, visibleOptions]);
     const handleSearchChange = (_, newInputValue) => {
         setSearchValue(newInputValue ?? '');
         setLimit(PAGE_SIZE);
@@ -24856,7 +24918,14 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, onCrea
                 alignItems: 'center',
             }, children: [t('global.noOptions'), jsxRuntimeExports.jsx(LoadingButton$1, { onClick: () => onCreateNew(trimmedSearchValue), loading: isCreatingNew, disabled: isDisabled, variant: "contained", size: "small", sx: { marginTop: 1.3 }, children: t('global.createNew') })] }));
     };
-    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$b, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$a, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, disablePortal: false, value: value, onChange: (_, newValue) => onChange(newValue), options: visibleOptions, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), PopperComponent: (props) => (jsxRuntimeExports.jsx(AutocompletePopper, { ...props, popperContainer: popperContainer })), renderOption: (props, option) => jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' }), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(Chip$2, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(TextField$1, { ...params, size: "small" }), ListboxProps: {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$c, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, disablePortal: false, value: value, onChange: (_, newValue) => onChange(newValue), options: optionsWithSelectedValues, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), PopperComponent: (props) => (jsxRuntimeExports.jsx(AutocompletePopper, { ...props, popperContainer: popperContainer })), renderOption: (props, option) => {
+                    const { key, ...rest } = props;
+                    return (createElement("li", { ...rest, key: option?.id ? String(option.id) : String(key ?? option?.name ?? '') }, option.name ?? ''));
+                }, renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
+                    const tagProps = getTagProps({ index });
+                    const { key, ...rest } = tagProps;
+                    return (jsxRuntimeExports.jsx(Chip$2, { label: option.name ?? '', ...rest }, option?.id ? String(option.id) : String(key ?? option?.name ?? index)));
+                }), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(TextField$1, { ...params, size: "small" }), ListboxProps: {
                     onScroll: onListboxScroll,
                     sx: { maxHeight: 280, overflowY: 'auto' },
                 }, noOptionsText: jsxRuntimeExports.jsx(CustomNoOptionsMessage, {}), sx: { width: '100%' } })] }));
@@ -24956,6 +25025,16 @@ async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, sign
     const url = joinUrl(urls.CONTACTS, path);
     return requestJson({ url, method: 'PUT', body, signal });
 }
+async function fetchBusinessTableData({ baseUrl, spaceId, pagination, signal, }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, '/Search');
+    return requestJson({ url, method: 'POST', body: pagination, signal });
+}
+async function createBusiness({ baseUrl, spaceId, business, signal }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, '/business');
+    return requestJson({ url, method: 'POST', body: business, signal });
+}
 async function deleteAddress({ baseUrl, spaceId, data, signal }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const url = joinUrl(urls.CONTACTS, '/contactAddresses');
@@ -25002,6 +25081,8 @@ const createEditContactApi = (baseUrl, spaceId) => ({
     fetchLabels: ({ signal } = {}) => fetchLabels({ baseUrl, spaceId, signal }),
     createLabel: ({ name, signal }) => createLabel({ baseUrl, spaceId, name, signal }),
     fetchContact: ({ contactId, signal }) => fetchContact({ baseUrl, spaceId, contactId, signal }),
+    fetchBusinessTableData: ({ pagination, signal }) => fetchBusinessTableData({ baseUrl, spaceId, pagination, signal }),
+    createBusiness: ({ business, signal }) => createBusiness({ baseUrl, spaceId, business, signal }),
     fetchContactFields: ({ forType, signal }) => fetchContactFields({ baseUrl, spaceId, forType, signal }),
     updateEntity: ({ entityType, entityId, body, signal }) => updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal }),
     deleteAddress: ({ data, signal }) => deleteAddress({ baseUrl, spaceId, data, signal }),
@@ -25015,6 +25096,296 @@ const createEditContactApi = (baseUrl, spaceId) => ({
     uploadAvatar: ({ contactId, file, signal }) => uploadAvatar({ baseUrl, spaceId, contactId, file, signal }),
 });
 
+const isGoogleMapsLoaded = () => {
+    return Boolean(window?.google?.maps?.places?.Autocomplete);
+};
+const waitForGoogleMaps = (maxWaitTime = 10000) => {
+    return new Promise((resolve) => {
+        if (isGoogleMapsLoaded()) {
+            resolve(true);
+            return;
+        }
+        const startTime = Date.now();
+        const checkInterval = 100;
+        const interval = window.setInterval(() => {
+            if (isGoogleMapsLoaded()) {
+                window.clearInterval(interval);
+                resolve(true);
+                return;
+            }
+            if (Date.now() - startTime > maxWaitTime) {
+                window.clearInterval(interval);
+                resolve(false);
+            }
+        }, checkInterval);
+    });
+};
+const useGoogleMapsStatus = () => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const checkStatus = async () => {
+            try {
+                const loaded = await waitForGoogleMaps(10000);
+                setIsLoaded(loaded);
+                if (!loaded) {
+                    setError('Google Maps API failed to load');
+                }
+            }
+            catch {
+                setError('Error loading Google Maps API');
+                setIsLoaded(false);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        checkStatus();
+    }, []);
+    return { isLoaded, isLoading, error };
+};
+
+const SearchLocationInput = ({ onPlaceSelected, onError, placeholder }) => {
+    const t = useTranslationContext();
+    const inputRef = useRef(null);
+    const autocompleteRef = useRef(null);
+    const placeSelectedRef = useRef(onPlaceSelected);
+    const errorRef = useRef(onError);
+    const { isLoaded, isLoading, error: mapsError } = useGoogleMapsStatus();
+    const currentPlaceholder = useMemo(() => {
+        if (isLoading)
+            return t('searchLocationModal.loadingGoogleMaps');
+        if (mapsError)
+            return t('searchLocationModal.googleMapsUnavailable');
+        if (!isLoaded)
+            return t('searchLocationModal.googleMapsNotLoaded');
+        return placeholder ?? t('searchLocationModal.enterLocation');
+    }, [isLoaded, isLoading, mapsError, placeholder, t]);
+    useEffect(() => {
+        placeSelectedRef.current = onPlaceSelected;
+    }, [onPlaceSelected]);
+    useEffect(() => {
+        errorRef.current = onError;
+    }, [onError]);
+    useEffect(() => {
+        if (!isLoaded)
+            return;
+        if (!inputRef.current)
+            return;
+        if (autocompleteRef.current)
+            return;
+        const googleAny = window?.google;
+        if (!googleAny?.maps?.places?.Autocomplete) {
+            errorRef.current?.(t('searchLocationModal.googleMapsUnavailable'));
+            return;
+        }
+        inputRef.current.focus();
+        let observer = null;
+        const applyPacContainerStyles = () => {
+            const pacContainers = document.querySelectorAll('.pac-container');
+            pacContainers.forEach((container) => {
+                const el = container;
+                el.style.zIndex = '20000';
+                el.style.position = 'fixed';
+            });
+        };
+        observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const node of Array.from(mutation.addedNodes)) {
+                    if (node.nodeType !== Node.ELEMENT_NODE)
+                        continue;
+                    const element = node;
+                    if (!element.classList?.contains('pac-container'))
+                        continue;
+                    element.style.zIndex = '20000';
+                    element.style.position = 'fixed';
+                }
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        applyPacContainerStyles();
+        window.setTimeout(applyPacContainerStyles, 100);
+        autocompleteRef.current = new googleAny.maps.places.Autocomplete(inputRef.current, {
+            types: ['geocode'],
+            componentRestrictions: { country: 'ar' },
+        });
+        const listener = autocompleteRef.current.addListener?.('place_changed', () => {
+            const place = autocompleteRef.current?.getPlace?.();
+            if (!place?.geometry?.location) {
+                errorRef.current?.(t('searchLocationModal.selectedPlaceNoLocation'));
+                return;
+            }
+            let city = '';
+            let state = '';
+            let country = '';
+            let postalCode = '';
+            let streetName = '';
+            let streetNumber = '';
+            const components = place.address_components ?? [];
+            for (const component of components) {
+                const types = component?.types ?? [];
+                if (types.includes('locality') || types.includes('administrative_area_level_2')) {
+                    city = component.long_name;
+                    continue;
+                }
+                if (types.includes('administrative_area_level_1')) {
+                    state = component.long_name;
+                    continue;
+                }
+                if (types.includes('country')) {
+                    country = component.long_name;
+                    continue;
+                }
+                if (types.includes('postal_code')) {
+                    postalCode = component.long_name;
+                    continue;
+                }
+                if (types.includes('route')) {
+                    streetName = component.long_name;
+                    continue;
+                }
+                if (types.includes('street_number')) {
+                    streetNumber = component.long_name;
+                }
+            }
+            const lat = typeof place.geometry.location.lat === 'function' ? place.geometry.location.lat() : 0;
+            const lng = typeof place.geometry.location.lng === 'function' ? place.geometry.location.lng() : 0;
+            const result = {
+                location: { lat, lng },
+                address: place.formatted_address ?? '',
+                city,
+                state,
+                country,
+                postalCode,
+                streetName,
+                streetNumber,
+                shortAddress: [streetName, streetNumber].filter(Boolean).join(' '),
+            };
+            placeSelectedRef.current(result);
+        });
+        return () => {
+            if (observer)
+                observer.disconnect();
+            if (listener?.remove)
+                listener.remove();
+            autocompleteRef.current = null;
+        };
+    }, [isLoaded, t]);
+    const isDisabled = isLoading || !isLoaded || Boolean(mapsError);
+    return (jsxRuntimeExports.jsx(TextField$1, { fullWidth: true, size: "small", inputRef: inputRef, placeholder: currentPlaceholder, disabled: isDisabled, error: Boolean(mapsError) }));
+};
+
+const EMPTY_DRAFT = {
+    street: '',
+    city: '',
+    state: '',
+    zipcode: '',
+    country: '',
+};
+const SearchLocationEditor = ({ baseUrl, spaceId, entityType, entityId, onBack, onEntityUpdated, }) => {
+    const t = useTranslationContext();
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const [query, setQuery] = useState('');
+    const [error, setError] = useState('');
+    const [isSavingMain, setIsSavingMain] = useState(false);
+    const [isSavingSecondary, setIsSavingSecondary] = useState(false);
+    const canSubmit = useMemo(() => {
+        return Boolean(String(draft.street ?? '').trim() ||
+            String(draft.city ?? '').trim() ||
+            String(draft.state ?? '').trim() ||
+            String(draft.zipcode ?? '').trim() ||
+            String(draft.country ?? '').trim());
+    }, [draft]);
+    const handlePlaceSelected = (result) => {
+        setQuery(result.address ?? '');
+        const computedStreet = String(result.shortAddress ?? '').trim() ||
+            [result.streetName, result.streetNumber].filter(Boolean).join(' ').trim();
+        setDraft({
+            street: computedStreet,
+            city: result.city ?? '',
+            state: result.state ?? '',
+            zipcode: result.postalCode ?? '',
+            country: result.country ?? '',
+        });
+        setError('');
+    };
+    const handleError = (errorMessage) => {
+        setError(String(errorMessage ?? ''));
+    };
+    const handleChange = (key) => (e) => {
+        const next = e.target.value;
+        setDraft((prev) => ({ ...prev, [key]: next }));
+    };
+    const handleSaveMainAddress = async () => {
+        if (isSavingMain)
+            return;
+        if (!baseUrl || !spaceId)
+            return;
+        if (!entityId)
+            return;
+        setIsSavingMain(true);
+        try {
+            const updated = await updateEntity({
+                baseUrl,
+                spaceId,
+                entityType,
+                entityId,
+                body: {
+                    address1: {
+                        street: String(draft.street ?? ''),
+                        city: String(draft.city ?? ''),
+                        state: String(draft.state ?? ''),
+                        zipcode: String(draft.zipcode ?? ''),
+                        country: String(draft.country ?? ''),
+                    },
+                },
+            });
+            onEntityUpdated?.(updated);
+            onBack();
+        }
+        finally {
+            setIsSavingMain(false);
+        }
+    };
+    const handleSaveSecondaryAddress = async () => {
+        if (isSavingSecondary)
+            return;
+        if (!baseUrl || !spaceId)
+            return;
+        if (!entityId)
+            return;
+        setIsSavingSecondary(true);
+        try {
+            const updated = await updateEntity({
+                baseUrl,
+                spaceId,
+                entityType,
+                entityId,
+                body: {
+                    address2: {
+                        street: String(draft.street ?? ''),
+                        city: String(draft.city ?? ''),
+                        state: String(draft.state ?? ''),
+                        zipcode: String(draft.zipcode ?? ''),
+                        country: String(draft.country ?? ''),
+                    },
+                },
+            });
+            onEntityUpdated?.(updated);
+            onBack();
+        }
+        finally {
+            setIsSavingSecondary(false);
+        }
+    };
+    const isDisabled = !canSubmit || isSavingMain || isSavingSecondary;
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), children: jsxRuntimeExports.jsx(default_1$c, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('searchLocationModal.searchAddress') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSaveMainAddress, loading: isSavingMain, disabled: isDisabled, sx: { mr: 1 }, children: t('searchLocationModal.saveMainAddress') }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "outlined", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSaveSecondaryAddress, loading: isSavingSecondary, disabled: isDisabled, children: t('searchLocationModal.saveSecondaryAddress') })] }), jsxRuntimeExports.jsxs(Stack$2, { spacing: 2, children: [jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative', zIndex: 1400 }, children: [jsxRuntimeExports.jsx(SearchLocationInput, { onPlaceSelected: handlePlaceSelected, onError: handleError, placeholder: t('searchLocationModal.enterLocation') }), error ? (jsxRuntimeExports.jsx(Typography$2, { variant: "caption", color: "error", sx: { mt: 0.5, display: 'block' }, children: error })) : null] }), jsxRuntimeExports.jsx(TextField$1, { label: t('conversations.contactDetails.street'), value: draft.street, onChange: handleChange('street'), fullWidth: true, size: "small" }), jsxRuntimeExports.jsxs(Stack$2, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.city'), value: draft.city, onChange: handleChange('city'), fullWidth: true, size: "small" }), jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.state'), value: draft.state, onChange: handleChange('state'), fullWidth: true, size: "small" })] }), jsxRuntimeExports.jsxs(Stack$2, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.postalCode'), value: draft.zipcode, onChange: handleChange('zipcode'), fullWidth: true, size: "small" }), jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.country'), value: draft.country, onChange: handleChange('country'), fullWidth: true, size: "small" })] }), query ? (jsxRuntimeExports.jsx(Typography$2, { variant: "caption", sx: { opacity: 0.7 }, children: query })) : null] })] }));
+};
+
 /**
  * Type guard to check if an object is an IBusiness
  * @param obj The object to check
@@ -26638,14 +27009,28 @@ const resolveUserLabel = ({ userId, users, currentUser, }) => {
     return fromUsers?.name?.trim() || fromUsers?.email || null;
 };
 
-const Section = ({ title, children }) => {
+var AddLocationAlt = {};
+
+var _interopRequireDefault$9 = interopRequireDefaultExports;
+Object.defineProperty(AddLocationAlt, "__esModule", {
+  value: true
+});
+var default_1$9 = AddLocationAlt.default = void 0;
+var _createSvgIcon$9 = _interopRequireDefault$9(requireCreateSvgIcon());
+var _jsxRuntime$9 = jsxRuntimeExports;
+default_1$9 = AddLocationAlt.default = (0, _createSvgIcon$9.default)( /*#__PURE__*/(0, _jsxRuntime$9.jsx)("path", {
+  d: "M20 1v3h3v2h-3v3h-2V6h-3V4h3V1zm-8 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m2-9.75V7h3v3h2.92c.05.39.08.79.08 1.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 6.22 7.8 3 12 3c.68 0 1.35.08 2 .25"
+}), 'AddLocationAlt');
+
+const Section = ({ title, children, enableDirectionSearch = false, onDirectionSearchClick, }) => {
+    const t = useTranslationContext();
     return (jsxRuntimeExports.jsxs(Box$2, { sx: {
             border: '1px solid',
             borderColor: 'divider',
             borderRadius: 2,
             p: 2,
             mb: 2,
-        }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(Divider, { sx: { my: 1.5 } }), children] }));
+        }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: title }), enableDirectionSearch && (jsxRuntimeExports.jsx(Button$2, { startIcon: jsxRuntimeExports.jsx(default_1$9, { sx: { color: 'primary.main', height: 18, width: 18 } }), size: "small", variant: "outlined", color: "primary", onClick: () => onDirectionSearchClick && onDirectionSearchClick(), children: t('global.searchLocation') })), jsxRuntimeExports.jsx(Divider, { sx: { my: 1.5 } }), children] }));
 };
 
 const SectionContent = ({ children, ...boxProps }) => {
@@ -32966,7 +33351,7 @@ const PickersDayFiller = styled$3('div', {
   opacity: 0,
   pointerEvents: 'none'
 }));
-const noop$2 = () => {};
+const noop$3 = () => {};
 const PickersDayRaw = /*#__PURE__*/React$1.forwardRef(function PickersDay(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
@@ -32979,11 +33364,11 @@ const PickersDayRaw = /*#__PURE__*/React$1.forwardRef(function PickersDay(inProp
       isAnimating,
       onClick,
       onDaySelect,
-      onFocus = noop$2,
-      onBlur = noop$2,
-      onKeyDown = noop$2,
-      onMouseDown = noop$2,
-      onMouseEnter = noop$2,
+      onFocus = noop$3,
+      onBlur = noop$3,
+      onKeyDown = noop$3,
+      onMouseDown = noop$3,
+      onMouseEnter = noop$3,
       children,
       day,
       selected,
@@ -43478,7 +43863,7 @@ const _excluded$y = ["enableAccessibleFieldDOMStructure"],
   _excluded6 = ["ownerState"],
   _excluded7 = ["ownerState"],
   _excluded8 = ["InputProps", "inputProps"];
-const noop$1 = () => {};
+const noop$2 = () => {};
 const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -43495,7 +43880,7 @@ const cleanFieldResponse = _ref => {
         openPickerAriaLabel
       } = fieldResponse,
       other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2$6);
-    const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop$1;
+    const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop$2;
     return {
       clearable,
       onClear,
@@ -43530,8 +43915,8 @@ const cleanFieldResponse = _ref => {
       openPickerAriaLabel
     } = fieldResponse,
     other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
-  const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop$1;
-  const mergedHtmlInputProps = major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps$1(other?.slotProps?.htmlInput, inputProps) : noop$1;
+  const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop$2;
+  const mergedHtmlInputProps = major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps$1(other?.slotProps?.htmlInput, inputProps) : noop$2;
   return {
     clearable,
     onClear,
@@ -52749,6 +53134,18 @@ default_1$8 = Cancel.default = (0, _createSvgIcon$8.default)( /*#__PURE__*/(0, _
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
 }), 'Cancel');
 
+const noop$1 = { view: 'main', setView: () => { } };
+const EditContactViewContext = createContext(null);
+const EditContactViewProvider = EditContactViewContext.Provider;
+const useEditContactView = () => {
+    const ctx = useContext(EditContactViewContext);
+    if (!ctx) {
+        console.warn('[useEditContactView] using noop, context value is missing');
+        return noop$1;
+    }
+    return ctx;
+};
+
 const noop = () => { };
 const NavigateContext = createContext(noop);
 const NavigateProvider = ({ navigate, children }) => {
@@ -52819,6 +53216,7 @@ const StyledSaveCancelButton$1 = styled$5(IconButton$2)({
 const EntityInfoLabel = (props) => {
     const { title, value, isNotEditable, displayValue, baseUrl, spaceId, minWidth, onEntityUpdated } = props;
     const t = useTranslationContext();
+    const { setView } = useEditContactView();
     const inputType = props.inputType ?? 'text';
     const [isEditing, setIsEditing] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
@@ -52835,15 +53233,26 @@ const EntityInfoLabel = (props) => {
             return;
         const check = () => {
             const next = el.scrollWidth > el.clientWidth;
-            setIsTitleTruncated(next);
+            setIsTitleTruncated((prev) => (prev === next ? prev : next));
         };
         check();
         if (typeof ResizeObserver !== 'undefined') {
+            let rafId = 0;
             const ro = new ResizeObserver(() => {
-                check();
+                if (typeof window === 'undefined') {
+                    check();
+                    return;
+                }
+                if (rafId)
+                    window.cancelAnimationFrame(rafId);
+                rafId = window.requestAnimationFrame(() => {
+                    check();
+                });
             });
             ro.observe(el);
             return () => {
+                if (typeof window !== 'undefined' && rafId)
+                    window.cancelAnimationFrame(rafId);
                 ro.disconnect();
             };
         }
@@ -52853,7 +53262,7 @@ const EntityInfoLabel = (props) => {
         return () => {
             window.removeEventListener('resize', check);
         };
-    }, [title, isEditing]);
+    }, [title]);
     useEffect(() => {
         if (props.entityType === 'business') {
             setInputValue(value);
@@ -52864,7 +53273,7 @@ const EntityInfoLabel = (props) => {
     }, [value, props.entityType]);
     const handleEditClick = () => {
         if (props.entityType === 'contact' && inputType === 'selectBusiness') {
-            console.log('Not implemented yet');
+            setView('businessSelect');
             return;
         }
         setIsEditing((prev) => !prev);
@@ -52963,7 +53372,7 @@ const EntityInfoLabel = (props) => {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
-                            }, children: title }) })) : (jsxRuntimeExports.jsx(Typography$2, { ref: titleRef, component: "span", variant: "body2", letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, noWrap: true, sx: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: title })), isNotEditable ? null : isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$3, { className: "edit-icon", size: "small", onClick: handleEditClick, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing ? '100%' : '50%', position: "relative", children: isEditing && inputType === 'text' ? (jsxRuntimeExports.jsx(TextField$1, { value: textValue, onChange: handleInputChange, variant: "standard", size: "small", sx: { width: '100%' } })) : isEditing && (inputType === 'select' || inputType === 'selectMembers') ? (jsxRuntimeExports.jsxs(Select$2, { value: selectValue, onChange: handleSelectChange, variant: "standard", size: "small", sx: { width: '100%' }, children: [props.entityType === 'contact' ? (jsxRuntimeExports.jsx(MenuItem$2, { value: "", children: t('conversations.contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option.id, children: props.entityType === 'contact'
+                            }, children: title }) })) : (jsxRuntimeExports.jsx(Typography$2, { ref: titleRef, component: "span", variant: "body2", letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, noWrap: true, sx: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: title })), isNotEditable ? null : isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$b, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$3, { className: "edit-icon", size: "small", onClick: handleEditClick, children: jsxRuntimeExports.jsx(default_1$g, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing ? '100%' : '50%', position: "relative", children: isEditing && inputType === 'text' ? (jsxRuntimeExports.jsx(TextField$1, { value: textValue, onChange: handleInputChange, variant: "standard", size: "small", sx: { width: '100%' } })) : isEditing && (inputType === 'select' || inputType === 'selectMembers') ? (jsxRuntimeExports.jsxs(Select$2, { value: selectValue, onChange: handleSelectChange, variant: "standard", size: "small", sx: { width: '100%' }, children: [props.entityType === 'contact' ? (jsxRuntimeExports.jsx(MenuItem$2, { value: "", children: t('conversations.contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option.id, children: props.entityType === 'contact'
                                 ? option.name?.trim() || (isUserInfo(option) ? option.email : '') || 'Sin nombre'
                                 : option.name?.trim() || option.email || 'Sin nombre' }, index)))] })) : isEditing && isContactBirthdayProps(props) ? (jsxRuntimeExports.jsx(DateSelect, { birthDate: props.contact.field.birthDate, setBirthDate: props.contact.action.setBirthDate, dateFormat: props.dateFormat })) : !isEditing &&
                     props.entityType === 'contact' &&
@@ -55020,7 +55429,7 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
         else
             return (jsxRuntimeExports.jsx(CustomPropertyInput, { type: type, nameKey: nameKey, value: value, onChange: handleInputChange }));
     };
-    return (jsxRuntimeExports.jsxs(ContactBox, { className: `fadein ${property.type === Contacts.ContactField_type.LONGTEXT ? 'contacts-col-12' : 'contacts-col-5'}`, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: "25px", alignItems: "center", children: [isTitleTruncated ? (jsxRuntimeExports.jsx(Tooltip, { title: getPropertyName(property.nameKey), arrow: true, children: jsxRuntimeExports.jsx(FieldName, { ref: titleRef, flexGrow: 1, noWrap: true, children: getPropertyName(property.nameKey) }) })) : (jsxRuntimeExports.jsx(FieldName, { ref: titleRef, flexGrow: 1, noWrap: true, children: getPropertyName(property.nameKey) })), isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$2, { className: "edit-icon", size: "small", onClick: toggleEdit, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing || property.type === Contacts.ContactField_type.LONGTEXT ? '100%' : '50%', position: "relative", children: isEditing ? (EditField()) : (jsxRuntimeExports.jsx(FieldValue, { children: hasValue(property?.value)
+    return (jsxRuntimeExports.jsxs(ContactBox, { className: `fadein ${property.type === Contacts.ContactField_type.LONGTEXT ? 'contacts-col-12' : 'contacts-col-5'}`, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: "25px", alignItems: "center", children: [isTitleTruncated ? (jsxRuntimeExports.jsx(Tooltip, { title: getPropertyName(property.nameKey), arrow: true, children: jsxRuntimeExports.jsx(FieldName, { ref: titleRef, flexGrow: 1, noWrap: true, children: getPropertyName(property.nameKey) }) })) : (jsxRuntimeExports.jsx(FieldName, { ref: titleRef, flexGrow: 1, noWrap: true, children: getPropertyName(property.nameKey) })), isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$b, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$2, { className: "edit-icon", size: "small", onClick: toggleEdit, children: jsxRuntimeExports.jsx(default_1$g, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing || property.type === Contacts.ContactField_type.LONGTEXT ? '100%' : '50%', position: "relative", children: isEditing ? (EditField()) : (jsxRuntimeExports.jsx(FieldValue, { children: hasValue(property?.value)
                         ? property.type === Contacts.ContactField_type.DATERANGE
                             ? (() => {
                                 if (typeof property.value === 'string') {
@@ -56697,7 +57106,7 @@ const StyledIconButton = styled$5(IconButton$2)({
     marginLeft: '15px',
 });
 const ContactMethod = ({ title, methodItems, isPhone, handleEdit, owner }) => {
-    return (jsxRuntimeExports.jsxs(StyledBox, { children: [jsxRuntimeExports.jsxs(HeaderBox, { children: [jsxRuntimeExports.jsx(StyledTypography, { children: title }), jsxRuntimeExports.jsx(StyledIconButton, { className: "edit-icon", size: "small", onClick: handleEdit, children: jsxRuntimeExports.jsx(default_1$f, { fontSize: "small", sx: { color: (theme) => theme.palette.secondary.main } }) })] }), jsxRuntimeExports.jsx(MethodItemsBox, { children: methodItems.map((item, index) => {
+    return (jsxRuntimeExports.jsxs(StyledBox, { children: [jsxRuntimeExports.jsxs(HeaderBox, { children: [jsxRuntimeExports.jsx(StyledTypography, { children: title }), jsxRuntimeExports.jsx(StyledIconButton, { className: "edit-icon", size: "small", onClick: handleEdit, children: jsxRuntimeExports.jsx(default_1$g, { fontSize: "small", sx: { color: (theme) => theme.palette.secondary.main } }) })] }), jsxRuntimeExports.jsx(MethodItemsBox, { children: methodItems.map((item, index) => {
                     if (isPhone) {
                         return jsxRuntimeExports.jsx(ContactMethodPhoneItem, { item: item }, index);
                     }
@@ -56876,7 +57285,7 @@ const OptionsMenu = ({ onDelete, addressData, handleLinkAccountSave, checked, on
     };
     return (jsxRuntimeExports.jsxs(Box$2, { children: [jsxRuntimeExports.jsx(IconButton$2, { "aria-controls": open ? 'basic-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, children: jsxRuntimeExports.jsx(default_1$5, {}) }), jsxRuntimeExports.jsxs(Menu$2, { id: "basic-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                     'aria-labelledby': 'basic-button',
-                }, children: [jsxRuntimeExports.jsxs(MenuItem$2, { onClick: handleDelete, children: [jsxRuntimeExports.jsx(ListItemIcon, { children: jsxRuntimeExports.jsx(default_1$d, { color: "error" }) }), jsxRuntimeExports.jsx(ListItemText, { children: t('global.delete') })] }), channelType === 5 && (jsxRuntimeExports.jsxs(MenuItem$2, { onClick: handleCheckWA, disabled: !checked, children: [jsxRuntimeExports.jsx(ListItemIcon, { children: verifying ? (jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 })) : (jsxRuntimeExports.jsx(default_1$4, { sx: { color: 'green' } })) }), jsxRuntimeExports.jsx(ListItemText, { children: t('optionsMenu.verifyWspAccount') })] })), channelType === 21 && (jsxRuntimeExports.jsxs(MenuItem$2, { onClick: handleCheckRCS, disabled: !checked, children: [jsxRuntimeExports.jsx(ListItemIcon, { children: verifying ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$3, {}) }), jsxRuntimeExports.jsx(ListItemText, { children: t('optionsMenu.verifyRCSAccount') })] }))] }), jsxRuntimeExports.jsx(Modal$2, { open: modalOpen, onClose: handleModalClose, "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", children: jsxRuntimeExports.jsx(Box$2, { sx: {
+                }, children: [jsxRuntimeExports.jsxs(MenuItem$2, { onClick: handleDelete, children: [jsxRuntimeExports.jsx(ListItemIcon, { children: jsxRuntimeExports.jsx(default_1$e, { color: "error" }) }), jsxRuntimeExports.jsx(ListItemText, { children: t('global.delete') })] }), channelType === 5 && (jsxRuntimeExports.jsxs(MenuItem$2, { onClick: handleCheckWA, disabled: !checked, children: [jsxRuntimeExports.jsx(ListItemIcon, { children: verifying ? (jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 })) : (jsxRuntimeExports.jsx(default_1$4, { sx: { color: 'green' } })) }), jsxRuntimeExports.jsx(ListItemText, { children: t('optionsMenu.verifyWspAccount') })] })), channelType === 21 && (jsxRuntimeExports.jsxs(MenuItem$2, { onClick: handleCheckRCS, disabled: !checked, children: [jsxRuntimeExports.jsx(ListItemIcon, { children: verifying ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$3, {}) }), jsxRuntimeExports.jsx(ListItemText, { children: t('optionsMenu.verifyRCSAccount') })] }))] }), jsxRuntimeExports.jsx(Modal$2, { open: modalOpen, onClose: handleModalClose, "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", children: jsxRuntimeExports.jsx(Box$2, { sx: {
                         position: 'absolute',
                         top: '50%',
                         left: '50%',
@@ -56956,7 +57365,7 @@ const NoteDeleteButton = (props) => {
             ...noteDeleteButtonStyle.container,
         }, children: [addressIsSaved && (jsxRuntimeExports.jsx(TextField$1, { size: "small", label: t('global.note'), variant: "outlined", onChange: (e) => props.handleNoteFieldChange(e, id, channelType), value: note, fullWidth: true, InputLabelProps: {
                     shrink: true,
-                }, className: "contacts-smallInput", sx: noteDeleteButtonStyle.noteTextField })), jsxRuntimeExports.jsx(IconButton$2, { onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, { color: "primary" }) }), jsxRuntimeExports.jsx(OptionsMenu, { onDelete: () => props.handleDeleteAddress(id, channelType), addressData: props.addressData, handleLinkAccountSave: handleLinkAccountSave, checked: checked && !isSaving, onCheckContactAddress: async (type) => {
+                }, className: "contacts-smallInput", sx: noteDeleteButtonStyle.noteTextField })), jsxRuntimeExports.jsx(IconButton$2, { onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$b, { color: "primary" }) }), jsxRuntimeExports.jsx(OptionsMenu, { onDelete: () => props.handleDeleteAddress(id, channelType), addressData: props.addressData, handleLinkAccountSave: handleLinkAccountSave, checked: checked && !isSaving, onCheckContactAddress: async (type) => {
                     if (!api)
                         return null;
                     try {
@@ -57478,7 +57887,7 @@ const ContactInformation = ({ ownerData }) => {
                         .map((method) => (jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal(method.modalTitle), title: method.title, methodItems: method.items, isPhone: method.isPhone, owner: ownerData }, method.key))) }) }), jsxRuntimeExports.jsx(EditModal, { open: isOpen, onClose: closeModal, title: title })] }));
 };
 
-const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntityUpdated, }) => {
+const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntityUpdated, onDirectionSearchClick, }) => {
     const commonProps = {
         baseUrl,
         spaceId,
@@ -57497,7 +57906,7 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntity
                         }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.country'), value: entityData[addressNumber]?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             [addressNumber]: { country: value },
                         }), minWidth: "100%" })] })] }));
-    return (jsxRuntimeExports.jsx(Section, { title: t('conversations.contactDetails.addressInformation'), children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address1", title: t('conversations.contactDetails.primaryAddress') }), jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address2", title: t('conversations.contactDetails.secondaryAddress') })] }) }));
+    return (jsxRuntimeExports.jsx(Section, { title: t('conversations.contactDetails.addressInformation'), enableDirectionSearch: true, onDirectionSearchClick: onDirectionSearchClick, children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address1", title: t('conversations.contactDetails.primaryAddress') }), jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address2", title: t('conversations.contactDetails.secondaryAddress') })] }) }));
 };
 
 const useEntityUpdateSync = ({ entity, setEntity }) => {
@@ -57670,7 +58079,226 @@ const useModalCloseHandler = ({ onClose }) => {
     return handleClose;
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
+const DEFAULT_PAGINATION = {
+    format: 'IBusiness',
+    total: 0,
+    lastPage: 1,
+    perPage: 10,
+    order: 'ASC',
+    orderColumn: 'Id',
+};
+const BusinessSelectEditor = ({ baseUrl, spaceId, contactId, initialBusiness, onBack, onEntityUpdated, currentUser, }) => {
+    const t = useTranslationContext();
+    const api = useEditContactApi();
+    const timerRef = useRef(null);
+    const abortRef = useRef(null);
+    const [inputValue, setInputValue] = useState(() => initialBusiness?.businessName ?? '');
+    const [hasSearched, setHasSearched] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingTimer, setIsLoadingTimer] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [selected, setSelected] = useState(initialBusiness ?? null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [isNextPage, setIsNextPage] = useState(false);
+    const [allLoaded, setAllLoaded] = useState(false);
+    const ownerValue = useMemo(() => {
+        const displayName = currentUser?.display_name;
+        const email = currentUser?.email;
+        return String(displayName || email || '').trim();
+    }, [currentUser]);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+            abortRef.current?.abort();
+        };
+    }, []);
+    useEffect(() => {
+        setSelected(initialBusiness ?? null);
+        setInputValue(initialBusiness?.businessName ?? '');
+    }, [initialBusiness]);
+    const resetSearchState = () => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        setHasSearched(false);
+        setAllLoaded(false);
+        setCurrentPage(1);
+        setIsNextPage(false);
+        setOptions([]);
+    };
+    const mapBusinesses = (businesses) => {
+        return businesses
+            .filter((b) => Boolean(b?.id))
+            .map((b) => ({ businessId: String(b.id), businessName: String(b.name ?? '') }));
+    };
+    const fetchPage = async ({ query, page }) => {
+        if (!api)
+            return;
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setIsLoading(true);
+        try {
+            const pagination = {
+                ...DEFAULT_PAGINATION,
+                currentPage: page,
+                filter: [
+                    {
+                        value: query,
+                        column: 'name',
+                        condition: '',
+                    },
+                ],
+            };
+            const response = await api.fetchBusinessTableData({ pagination, signal: controller.signal });
+            if (controller.signal.aborted)
+                return;
+            const next = mapBusinesses((response?.contactos ?? []));
+            setHasSearched(true);
+            const total = response?.paginacion?.total ?? 0;
+            setOptions((prev) => {
+                const merged = page === 1
+                    ? next
+                    : (() => {
+                        const byId = new Map();
+                        for (const item of prev)
+                            byId.set(item.businessId, item);
+                        for (const item of next)
+                            byId.set(item.businessId, item);
+                        return Array.from(byId.values());
+                    })();
+                if (total && merged.length >= total) {
+                    setAllLoaded(true);
+                }
+                return merged;
+            });
+        }
+        finally {
+            setIsLoading(false);
+            setIsLoadingTimer(false);
+            setIsNextPage(false);
+        }
+    };
+    const handleQueryChanged = (value) => {
+        resetSearchState();
+        if (!value)
+            return;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        setIsLoadingTimer(true);
+        timerRef.current = setTimeout(() => {
+            void fetchPage({ query: value, page: 1 });
+        }, 800);
+    };
+    const handleScroll = (e) => {
+        const element = e.target;
+        const bottom = element.scrollHeight - element.scrollTop - element.clientHeight < 1;
+        if (!bottom)
+            return;
+        if (allLoaded)
+            return;
+        if (isLoading)
+            return;
+        if (!inputValue)
+            return;
+        const nextPage = currentPage + 1;
+        setIsNextPage(true);
+        setCurrentPage(nextPage);
+        void fetchPage({ query: inputValue, page: nextPage });
+    };
+    const handleCreateBusiness = async () => {
+        if (!api)
+            return;
+        if (!ownerValue)
+            return;
+        const name = String(inputValue ?? '').trim();
+        if (!name)
+            return;
+        setIsLoading(true);
+        try {
+            const business = {
+                name,
+                owner: ownerValue,
+                imageUrl: '',
+                members: [],
+                tags: [],
+                properties: [],
+                address1: {
+                    street: '',
+                    city: '',
+                    state: '',
+                    zipcode: '',
+                    country: '',
+                },
+                address2: {
+                    street: '',
+                    city: '',
+                    state: '',
+                    zipcode: '',
+                    country: '',
+                },
+            };
+            const created = await api.createBusiness({ business });
+            const createdOption = {
+                businessId: String(created.id ?? ''),
+                businessName: String(created.name ?? name),
+            };
+            setOptions([createdOption]);
+            setSelected(createdOption);
+            setHasSearched(true);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleSave = async () => {
+        if (!baseUrl || !spaceId)
+            return;
+        if (!contactId)
+            return;
+        const businessId = selected?.businessId ?? '';
+        const updated = await updateEntity({
+            baseUrl,
+            spaceId,
+            entityType: 'contact',
+            entityId: contactId,
+            body: {
+                businessId,
+            },
+        });
+        onEntityUpdated?.(updated);
+        onBack();
+    };
+    const noOptionsNode = hasSearched && options.length === 0 && inputValue ? (jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.5 }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "body2", children: t('global.noOptions') }), jsxRuntimeExports.jsx(LoadingButton$1, { size: "small", variant: "contained", onClick: handleCreateBusiness, loading: isLoading, disabled: isLoading || !ownerValue, children: t('global.createNew') })] })) : (jsxRuntimeExports.jsx(Typography$2, { variant: "body2", children: t('global.noOptions') }));
+    const isSavingDisabled = !contactId || !baseUrl || !spaceId;
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), children: jsxRuntimeExports.jsx(default_1$c, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('conversations.contactDetails.business') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSave, loading: false, disabled: isSavingDisabled, children: t('global.save') })] }), jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative' }, children: [isLoading || isLoadingTimer || isNextPage ? (jsxRuntimeExports.jsx(Box$2, { sx: { position: 'absolute', left: 0, right: 0, top: 0 }, children: jsxRuntimeExports.jsx(LinearProgress, { sx: { borderRadius: 1 } }) })) : null, jsxRuntimeExports.jsx(Autocomplete, { fullWidth: true, disablePortal: true, value: selected, onChange: (event, newValue) => {
+                            setSelected(newValue);
+                        }, inputValue: inputValue, onInputChange: (event, newValue, reason) => {
+                            setInputValue(newValue);
+                            if (reason !== 'input')
+                                return;
+                            handleQueryChanged(newValue);
+                        }, options: options, getOptionLabel: (option) => option?.businessName ?? '', isOptionEqualToValue: (opt, val) => opt.businessId === val.businessId, noOptionsText: noOptionsNode, renderInput: (params) => (jsxRuntimeExports.jsx(TextField$1, { ...params, size: "small", label: t('conversations.contactDetails.business'), placeholder: t('global.noValue'), InputProps: {
+                                ...params.InputProps,
+                                endAdornment: (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [isLoading || isLoadingTimer ? (jsxRuntimeExports.jsx(CircularProgress$2, { size: 18, sx: { mr: 1 } })) : null, params.InputProps.endAdornment] })),
+                            } })), ListboxProps: {
+                            sx: {
+                                maxHeight: 240,
+                                overflowY: 'auto',
+                            },
+                            onScroll: handleScroll,
+                        } })] })] }));
+};
+
+const EditContactModalContent = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
     const { t: i18nT, i18n } = useTranslation();
     const modalContentRef = useRef(null);
     useEffect(() => {
@@ -57740,21 +58368,33 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, lang
                                         top: 5,
                                         color: (theme) => theme.palette.grey[500],
                                         zIndex: 1,
-                                    }, size: "small", children: jsxRuntimeExports.jsx(default_1$g, { sx: { fontSize: 20 } }) }), state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(Box$2, { sx: {
+                                    }, size: "small", children: jsxRuntimeExports.jsx(default_1$h, { sx: { fontSize: 20 } }) }), state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(Box$2, { sx: {
                                         display: 'flex',
                                         justifyContent: 'center',
                                         alignItems: 'center',
                                         minHeight: 220,
-                                    }, children: jsxRuntimeExports.jsx(CircularProgress$2, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box$2, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(EditEntityProvider, { entityType: selectors.contactType === 'business' ? 'business' : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, children: jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(Fade$2, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Header, { imgUrl: image.imageUrl, displayName: selectors.displayName, tags: selectors.tags, onEditTags: () => {
-                                                                setView('tags');
-                                                            }, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting, contactType: selectors.contactType, entityId: state.contactData?.id, firstName: selectors.isContact ? state.contactData.firstName : undefined, lastName: selectors.isContact ? state.contactData.lastName : undefined, name: selectors.isBusiness ? state.contactData.name : undefined, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsxs(Box$2, { sx: { px: 1, pb: 2 }, children: [jsxRuntimeExports.jsx(General, { dateFormat: selectors.userTrii?.regCon_dateFormat || 'MM/dd/yyyy', entityType: selectors.contactType === 'contact' ||
-                                                                        selectors.contactType === 'business'
-                                                                        ? selectors.contactType
-                                                                        : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }), jsxRuntimeExports.jsx(AddressInformation, { entityType: selectors.contactType === 'contact' ||
-                                                                        selectors.contactType === 'business'
-                                                                        ? selectors.contactType
-                                                                        : 'contact', entityData: state.contactData, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsx(ContactInformation, { ownerData: state.contactData })] })] }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: labelsOptions, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, onCreateNew: handleCreateLabel, isCreatingNew: isCreatingLabel, popperContainer: modalContentRef.current }) }) })] }) })) : null] }) }) }) }) }) }));
-};
-
-export { ContactInfoPopup, EditContactModal };
+                                    }, children: jsxRuntimeExports.jsx(CircularProgress$2, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box$2, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(EditContactViewProvider, { value: { view, setView }, children: jsxRuntimeExports.jsx(EditEntityProvider, { entityType: selectors.contactType === 'business' ? 'business' : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, children: jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(Fade$2, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Header, { imgUrl: image.imageUrl, displayName: selectors.displayName, tags: selectors.tags, onEditTags: () => {
+                                                                    setView('tags');
+                                                                }, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting, contactType: selectors.contactType, entityId: state.contactData?.id, firstName: selectors.isContact
+                                                                    ? state.contactData.firstName
+                                                                    : undefined, lastName: selectors.isContact
+                                                                    ? state.contactData.lastName
+                                                                    : undefined, name: selectors.isBusiness ? state.contactData.name : undefined, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsxs(Box$2, { sx: { px: 1, pb: 2 }, children: [jsxRuntimeExports.jsx(General, { dateFormat: selectors.userTrii?.regCon_dateFormat || 'MM/dd/yyyy', entityType: selectors.contactType === 'contact' ||
+                                                                            selectors.contactType === 'business'
+                                                                            ? selectors.contactType
+                                                                            : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }), jsxRuntimeExports.jsx(AddressInformation, { entityType: selectors.contactType === 'contact' ||
+                                                                            selectors.contactType === 'business'
+                                                                            ? selectors.contactType
+                                                                            : 'contact', entityData: state.contactData, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated, onDirectionSearchClick: () => setView('searchLocation') }), jsxRuntimeExports.jsx(ContactInformation, { ownerData: state.contactData })] })] }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'searchLocation', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(SearchLocationEditor, { baseUrl: baseUrl, spaceId: spaceId, entityType: selectors.contactType === 'business' ? 'business' : 'contact', entityId: String(state.contactData.id), onBack: () => setView('main'), onEntityUpdated: handleEntityUpdated }) }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: labelsOptions, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, onCreateNew: handleCreateLabel, isCreatingNew: isCreatingLabel, popperContainer: modalContentRef.current }) }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'businessSelect', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(BusinessSelectEditor, { baseUrl: baseUrl, spaceId: spaceId, contactId: String(state.contactData.id), initialBusiness: selectors.isContact && state.contactData?.businessId
+                                                                ? {
+                                                                    businessId: String(state.contactData.businessId),
+                                                                    businessName: String(state.contactData.businessName ?? ''),
+                                                                }
+                                                                : null, onBack: () => setView('main'), onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }) }) })] }) }) })) : null] }) }) }) }) }) }));
+};
+const EditContactModal = (props) => {
+    return (jsxRuntimeExports.jsx(I18nextProvider, { i18n: i18nInstance, children: jsxRuntimeExports.jsx(EditContactModalContent, { ...props }) }));
+};
+
+export { ContactInfoPopup, EditContactModal, i18nInstance as i18n };
 //# sourceMappingURL=index.js.map