@trii/components 2.0.35 → 2.0.38

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
-import React__default, { useCallback, useEffect, useState, useMemo, Children, isValidElement, cloneElement, useRef, createContext, useContext } 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, Divider, Stack as Stack$2, Popover as Popover$2, Autocomplete, TextField as TextField$1, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Modal as Modal$2, Backdrop as Backdrop$2, Fade as Fade$2 } from '@mui/material';
+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, Autocomplete, TextField as TextField$1, 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 { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
@@ -6360,7 +6360,7 @@ function getStyleValue$1(themeMapping, transform, propValueFinal, userValue = pr
   }
   return value;
 }
-function style$2(options) {
+function style$5(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -6521,12 +6521,12 @@ function resolveCssProperty(props, keys, prop, transformer) {
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-function style$1(props, keys) {
+function style$4(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
 function margin(props) {
-  return style$1(props, marginKeys);
+  return style$4(props, marginKeys);
 }
 margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -6534,7 +6534,7 @@ margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((ob
 }, {}) : {};
 margin.filterProps = marginKeys;
 function padding(props) {
-  return style$1(props, paddingKeys);
+  return style$4(props, paddingKeys);
 }
 padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -6607,7 +6607,7 @@ function borderTransform(value) {
   return `${value}px solid`;
 }
 function createBorderStyle(prop, transform) {
-  return style$2({
+  return style$5({
     prop,
     themeKey: 'borders',
     transform
@@ -6694,31 +6694,31 @@ rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   rowGap: responsivePropType$1
 } : {};
 rowGap.filterProps = ['rowGap'];
-const gridColumn = style$2({
+const gridColumn = style$5({
   prop: 'gridColumn'
 });
-const gridRow = style$2({
+const gridRow = style$5({
   prop: 'gridRow'
 });
-const gridAutoFlow = style$2({
+const gridAutoFlow = style$5({
   prop: 'gridAutoFlow'
 });
-const gridAutoColumns = style$2({
+const gridAutoColumns = style$5({
   prop: 'gridAutoColumns'
 });
-const gridAutoRows = style$2({
+const gridAutoRows = style$5({
   prop: 'gridAutoRows'
 });
-const gridTemplateColumns = style$2({
+const gridTemplateColumns = style$5({
   prop: 'gridTemplateColumns'
 });
-const gridTemplateRows = style$2({
+const gridTemplateRows = style$5({
   prop: 'gridTemplateRows'
 });
-const gridTemplateAreas = style$2({
+const gridTemplateAreas = style$5({
   prop: 'gridTemplateAreas'
 });
-const gridArea = style$2({
+const gridArea = style$5({
   prop: 'gridArea'
 });
 compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
@@ -6729,18 +6729,18 @@ function paletteTransform(value, userValue) {
   }
   return value;
 }
-const color = style$2({
+const color = style$5({
   prop: 'color',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const bgcolor = style$2({
+const bgcolor = style$5({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const backgroundColor = style$2({
+const backgroundColor = style$5({
   prop: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
@@ -6750,7 +6750,7 @@ compose(color, bgcolor, backgroundColor);
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width = style$2({
+const width = style$5({
   prop: 'width',
   transform: sizingTransform
 });
@@ -6778,33 +6778,33 @@ const maxWidth = props => {
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];
-const minWidth = style$2({
+const minWidth = style$5({
   prop: 'minWidth',
   transform: sizingTransform
 });
-const height = style$2({
+const height = style$5({
   prop: 'height',
   transform: sizingTransform
 });
-const maxHeight = style$2({
+const maxHeight = style$5({
   prop: 'maxHeight',
   transform: sizingTransform
 });
-const minHeight = style$2({
+const minHeight = style$5({
   prop: 'minHeight',
   transform: sizingTransform
 });
-style$2({
+style$5({
   prop: 'size',
   cssProperty: 'width',
   transform: sizingTransform
 });
-style$2({
+style$5({
   prop: 'size',
   cssProperty: 'height',
   transform: sizingTransform
 });
-const boxSizing = style$2({
+const boxSizing = style$5({
   prop: 'boxSizing'
 });
 compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
@@ -7399,27 +7399,27 @@ var styleFunctionSx = /*#__PURE__*/Object.freeze({
 
 var require$$8 = /*@__PURE__*/getAugmentedNamespace(styleFunctionSx);
 
-var _interopRequireDefault$b = interopRequireDefaultExports;
+var _interopRequireDefault$i = 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$b(require_extends());
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault$b(requireObjectWithoutPropertiesLoose());
-var _styledEngine$1 = _interopRequireWildcard$1(require$$1$1);
+var _extends2 = _interopRequireDefault$i(require_extends());
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault$i(requireObjectWithoutPropertiesLoose());
+var _styledEngine$1 = _interopRequireWildcard$2(require$$1$1);
 var _deepmerge = require$$4;
-var _capitalize = _interopRequireDefault$b(require$$5);
-var _getDisplayName = _interopRequireDefault$b(require$$6);
-var _createTheme = _interopRequireDefault$b(require$$7);
-var _styleFunctionSx = _interopRequireDefault$b(require$$8);
+var _capitalize = _interopRequireDefault$i(require$$5);
+var _getDisplayName = _interopRequireDefault$i(require$$6);
+var _createTheme = _interopRequireDefault$i(require$$7);
+var _styleFunctionSx = _interopRequireDefault$i(require$$8);
 const _excluded$1v = ["ownerState"],
   _excluded2$d = ["variants"],
   _excluded3$4 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
-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); }
-function _interopRequireWildcard$1(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$1(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache$2(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$2 = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard$2(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$2(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function isEmpty$3(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -7683,7 +7683,7 @@ var require$$1 = /*@__PURE__*/getAugmentedNamespace(formatMuiErrorMessage$1);
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(clamp);
 
-var _interopRequireDefault$a = interopRequireDefaultExports;
+var _interopRequireDefault$h = interopRequireDefaultExports;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true
 });
@@ -7705,8 +7705,8 @@ colorManipulator.private_safeEmphasize = private_safeEmphasize;
 colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor$1;
 colorManipulator.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault$a(require$$1);
-var _clamp = _interopRequireDefault$a(require$$2);
+var _formatMuiErrorMessage2 = _interopRequireDefault$h(require$$1);
+var _clamp = _interopRequireDefault$h(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -9020,11 +9020,19 @@ var PhoneEnabled = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "m17.38 10.79-2.2-2.2c-.28-.28-.36-.67-.25-1.02.37-1.12.57-2.32.57-3.57 0-.55.45-1 1-1H20c.55 0 1 .45 1 1 0 9.39-7.61 17-17 17-.55 0-1-.45-1-1v-3.49c0-.55.45-1 1-1 1.24 0 2.45-.2 3.57-.57.35-.12.75-.03 1.02.24l2.2 2.2c2.83-1.45 5.15-3.76 6.59-6.59"
 }), 'PhoneEnabled');
 
+var Star = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+}), 'Star');
+
+var StarBorder = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z"
+}), 'StarBorder');
+
 var ThreeP = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M20 2H4.01c-1.1 0-2 .9-2 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m4 8H8v-.57c0-.81.48-1.53 1.22-1.85.85-.37 1.79-.58 2.78-.58.99 0 1.93.21 2.78.58.74.32 1.22 1.04 1.22 1.85z"
 }), 'ThreeP');
 
-var WhatsApp$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var WhatsApp$2 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"
 }), 'WhatsApp');
 
@@ -9056,27 +9064,27 @@ function requireCreateSvgIcon () {
 	return createSvgIcon;
 }
 
-var _interopRequireDefault$9 = interopRequireDefaultExports;
+var _interopRequireDefault$g = interopRequireDefaultExports;
 Object.defineProperty(ArrowForward, "__esModule", {
   value: true
 });
-var default_1$a = ArrowForward.default = void 0;
-var _createSvgIcon$9 = _interopRequireDefault$9(requireCreateSvgIcon());
-var _jsxRuntime$9 = jsxRuntimeExports;
-default_1$a = ArrowForward.default = (0, _createSvgIcon$9.default)( /*#__PURE__*/(0, _jsxRuntime$9.jsx)("path", {
+var default_1$h = ArrowForward.default = void 0;
+var _createSvgIcon$g = _interopRequireDefault$g(requireCreateSvgIcon());
+var _jsxRuntime$g = jsxRuntimeExports;
+default_1$h = ArrowForward.default = (0, _createSvgIcon$g.default)( /*#__PURE__*/(0, _jsxRuntime$g.jsx)("path", {
   d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
 }), 'ArrowForward');
 
 var Message = {};
 
-var _interopRequireDefault$8 = interopRequireDefaultExports;
+var _interopRequireDefault$f = interopRequireDefaultExports;
 Object.defineProperty(Message, "__esModule", {
   value: true
 });
-var default_1$9 = Message.default = void 0;
-var _createSvgIcon$8 = _interopRequireDefault$8(requireCreateSvgIcon());
-var _jsxRuntime$8 = jsxRuntimeExports;
-default_1$9 = Message.default = (0, _createSvgIcon$8.default)( /*#__PURE__*/(0, _jsxRuntime$8.jsx)("path", {
+var default_1$g = Message.default = void 0;
+var _createSvgIcon$f = _interopRequireDefault$f(requireCreateSvgIcon());
+var _jsxRuntime$f = jsxRuntimeExports;
+default_1$g = Message.default = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.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');
 
@@ -9156,7 +9164,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$a, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$h, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
                             handleNavigateToConversations(e);
                             onClose();
                         }, onMouseDown: (e) => {
@@ -9165,7 +9173,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToConversations(e);
                                 onClose();
                             }
-                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1$9, { 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$g, { 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)({
@@ -9180,7 +9188,7 @@ const TitleBox = styled$5(Box$2)({
     width: '100%',
     borderBottom: `1px solid lightgray`,
 });
-const StyledBox = styled$5(Box$2)({
+const StyledBox$3 = styled$5(Box$2)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -9211,7 +9219,7 @@ const AddressContainer = styled$5(Box$2)({
     height: '50px',
     maxWidth: '90%',
 });
-const NoteText = styled$5(Typography$2)({
+const NoteText$2 = styled$5(Typography$2)({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
@@ -9220,13 +9228,13 @@ const NoteText = styled$5(Typography$2)({
     bottom: 16,
     left: 40,
 });
-const ContactMethod = ({ icon, contactList, title, showTitle = true, }) => {
-    const renderContactInfo = (contact) => (jsxRuntimeExports.jsx(StyledBox, { children: jsxRuntimeExports.jsxs(InfoContainer, { children: [jsxRuntimeExports.jsx(IconBox, { children: icon }), jsxRuntimeExports.jsxs(AddressContainer, { children: [jsxRuntimeExports.jsx(Tooltip, { title: contact.address, arrow: true, placement: "top", children: jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", fontWeight: "semi-bold", fontSize: 14, color: "text.primary", sx: {
+const ContactMethod$1 = ({ icon, contactList, title, showTitle = true, }) => {
+    const renderContactInfo = (contact) => (jsxRuntimeExports.jsx(StyledBox$3, { children: jsxRuntimeExports.jsxs(InfoContainer, { children: [jsxRuntimeExports.jsx(IconBox, { children: icon }), jsxRuntimeExports.jsxs(AddressContainer, { children: [jsxRuntimeExports.jsx(Tooltip, { title: contact.address, arrow: true, placement: "top", children: jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", fontWeight: "semi-bold", fontSize: 14, color: "text.primary", sx: {
                                     whiteSpace: 'nowrap',
                                     textOverflow: 'ellipsis',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                }, children: contact.address }) }), contact.profileName && (jsxRuntimeExports.jsx(Typography$2, { variant: "body2", fontSize: 10, color: "text.disabled", sx: { marginLeft: '5px', marginTop: '10px' }, children: contact.profileName }))] }), contact.note && (jsxRuntimeExports.jsx(NoteText, { variant: "body2", fontSize: 12, color: "text.secondary", children: contact.note }))] }) }, contact.id));
+                                }, children: contact.address }) }), contact.profileName && (jsxRuntimeExports.jsx(Typography$2, { variant: "body2", fontSize: 10, color: "text.disabled", sx: { marginLeft: '5px', marginTop: '10px' }, children: contact.profileName }))] }), contact.note && (jsxRuntimeExports.jsx(NoteText$2, { variant: "body2", fontSize: 12, color: "text.secondary", children: contact.note }))] }) }, contact.id));
     return (jsxRuntimeExports.jsxs(Container$1, { children: [showTitle && (jsxRuntimeExports.jsx(TitleBox, { children: jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", fontWeight: "bold", gutterBottom: true, mt: 2, children: title }) })), contactList?.map(renderContactInfo)] }));
 };
 
@@ -15305,7 +15313,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             showTitle: true,
         },
         {
-            icon: jsxRuntimeExports.jsx(WhatsApp$1, { fontSize: "small" }),
+            icon: jsxRuntimeExports.jsx(WhatsApp$2, { fontSize: "small" }),
             title: 'IM',
             contactList: contactData?.ims_whatsapp || [],
             showTitle: true,
@@ -15339,50 +15347,47 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [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, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
-};
-
-const Section = ({ title, children }) => {
-    return (jsxRuntimeExports.jsxs(Box$2, { sx: {
-            border: '1px solid',
-            borderColor: 'divider',
-            borderRadius: 2,
-            p: 2,
-            mb: 2,
-        }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", sx: { fontWeight: 600 }, children: title }), jsxRuntimeExports.jsx(Divider, { sx: { my: 1.5 } }), children] }));
-};
-
-const SectionContent = ({ children, ...boxProps }) => {
-    return (jsxRuntimeExports.jsx(Box$2, { display: "grid", gridTemplateColumns: { xs: '1fr', md: 'repeat(2, minmax(0, 1fr))' }, gap: 2, ...boxProps, children: children }));
+    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') })] }) }) }) }));
 };
 
 var Edit = {};
 
-var _interopRequireDefault$7 = interopRequireDefaultExports;
+var _interopRequireDefault$e = interopRequireDefaultExports;
 Object.defineProperty(Edit, "__esModule", {
   value: true
 });
-var default_1$8 = Edit.default = void 0;
-var _createSvgIcon$7 = _interopRequireDefault$7(requireCreateSvgIcon());
-var _jsxRuntime$7 = jsxRuntimeExports;
-default_1$8 = Edit.default = (0, _createSvgIcon$7.default)( /*#__PURE__*/(0, _jsxRuntime$7.jsx)("path", {
+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", {
   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$6 = interopRequireDefaultExports;
+var _interopRequireDefault$d = interopRequireDefaultExports;
 Object.defineProperty(Label, "__esModule", {
   value: true
 });
-var default_1$7 = Label.default = void 0;
-var _createSvgIcon$6 = _interopRequireDefault$6(requireCreateSvgIcon());
-var _jsxRuntime$6 = jsxRuntimeExports;
-default_1$7 = Label.default = (0, _createSvgIcon$6.default)( /*#__PURE__*/(0, _jsxRuntime$6.jsx)("path", {
+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", {
   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 Tags = ({ tags, t, onEditTags }) => {
+const noop$3 = (key) => key;
+const TranslationContext = createContext(noop$3);
+const TranslationProvider = ({ t, children }) => {
+    return jsxRuntimeExports.jsx(TranslationContext.Provider, { value: t, children: children });
+};
+const useTranslationContext = () => {
+    const t = useContext(TranslationContext);
+    return t || noop$3;
+};
+
+const Tags = ({ tags, onEditTags }) => {
+    const t = useTranslationContext();
     const [anchorEl, setAnchorEl] = useState(null);
     const safeTags = useMemo(() => tags ?? [], [tags]);
     const MAX_VISIBLE = 4;
@@ -15426,7 +15431,7 @@ const Tags = ({ tags, t, onEditTags }) => {
                                 bgcolor: 'action.hover',
                                 color: 'text.primary',
                             },
-                        }, children: safeTags.length ? (jsxRuntimeExports.jsx(default_1$8, { fontSize: "small" })) : (jsxRuntimeExports.jsx(default_1$7, { 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$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: {
                                     borderRadius: 999,
                                     maxWidth: 160,
                                     '& .MuiChip-label': {
@@ -15438,35 +15443,36 @@ const Tags = ({ tags, t, onEditTags }) => {
 
 var Delete = {};
 
-var _interopRequireDefault$5 = interopRequireDefaultExports;
+var _interopRequireDefault$c = interopRequireDefaultExports;
 Object.defineProperty(Delete, "__esModule", {
   value: true
 });
-var default_1$6 = Delete.default = void 0;
-var _createSvgIcon$5 = _interopRequireDefault$5(requireCreateSvgIcon());
-var _jsxRuntime$5 = jsxRuntimeExports;
-default_1$6 = Delete.default = (0, _createSvgIcon$5.default)( /*#__PURE__*/(0, _jsxRuntime$5.jsx)("path", {
+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", {
   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$4 = interopRequireDefaultExports;
+var _interopRequireDefault$b = interopRequireDefaultExports;
 Object.defineProperty(PhotoCamera, "__esModule", {
   value: true
 });
-var default_1$5 = PhotoCamera.default = void 0;
-var _createSvgIcon$4 = _interopRequireDefault$4(requireCreateSvgIcon());
-var _jsxRuntime$4 = jsxRuntimeExports;
-default_1$5 = PhotoCamera.default = (0, _createSvgIcon$4.default)([/*#__PURE__*/(0, _jsxRuntime$4.jsx)("circle", {
+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", {
   cx: "12",
   cy: "12",
   r: "3.2"
-}, "0"), /*#__PURE__*/(0, _jsxRuntime$4.jsx)("path", {
+}, "0"), /*#__PURE__*/(0, _jsxRuntime$b.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');
 
-const AvatarWithActions = ({ src, alt, onError, onUpload, onDelete, isUploading, isDeleting, t, }) => {
+const AvatarWithActions = ({ src, alt, onError, onUpload, onDelete, isUploading, isDeleting, }) => {
+    const t = useTranslationContext();
     return (jsxRuntimeExports.jsxs(Box$2, { sx: {
             width: 60,
             height: 60,
@@ -15495,11 +15501,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$5, { fontSize: "small" }) }), jsxRuntimeExports.jsx(IconButton$2, { size: "small", "aria-label": t('avatar.delete'), onClick: onDelete, disabled: Boolean(isDeleting), sx: {
+                        }, 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: {
                             color: 'common.white',
                             bgcolor: 'rgba(0, 0, 0, 0.25)',
                             '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.35)' },
-                        }, children: jsxRuntimeExports.jsx(default_1$6, { fontSize: "small" }) })] })] }));
+                        }, children: jsxRuntimeExports.jsx(default_1$d, { fontSize: "small" }) })] })] }));
 };
 
 const HeaderContainer = styled$5(Box$2)({
@@ -15517,34 +15523,34 @@ const ContactName = styled$5(Typography$2)({
     maxWidth: 360,
     textAlign: 'center',
 });
-const Header = ({ imgUrl, displayName, onError, tags, t, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
+const Header = ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
     const avatarAlt = `Avatar for ${displayName}`;
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx("input", { ref: photoInputRef, type: "file", accept: "image/*", onChange: onPhotoFileChange, style: { display: 'none' } }), jsxRuntimeExports.jsx(AvatarWithActions, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')), onUpload: onUploadPhoto, isUploading: isUploadingPhoto, onDelete: onDeletePhoto, isDeleting: isDeletingPhoto, t: t }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName }), jsxRuntimeExports.jsx(Tags, { tags: tags, t: t, onEditTags: onEditTags })] }));
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx("input", { ref: photoInputRef, type: "file", accept: "image/*", onChange: onPhotoFileChange, style: { display: 'none' } }), jsxRuntimeExports.jsx(AvatarWithActions, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')), onUpload: onUploadPhoto, isUploading: isUploadingPhoto, onDelete: onDeletePhoto, isDeleting: isDeletingPhoto }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName }), jsxRuntimeExports.jsx(Tags, { tags: tags, onEditTags: onEditTags })] }));
 };
 
 var ArrowBack = {};
 
-var _interopRequireDefault$3 = interopRequireDefaultExports;
+var _interopRequireDefault$a = interopRequireDefaultExports;
 Object.defineProperty(ArrowBack, "__esModule", {
   value: true
 });
-var default_1$4 = ArrowBack.default = void 0;
-var _createSvgIcon$3 = _interopRequireDefault$3(requireCreateSvgIcon());
-var _jsxRuntime$3 = jsxRuntimeExports;
-default_1$4 = ArrowBack.default = (0, _createSvgIcon$3.default)( /*#__PURE__*/(0, _jsxRuntime$3.jsx)("path", {
+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", {
   d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
 }), 'ArrowBack');
 
 var Save = {};
 
-var _interopRequireDefault$2 = interopRequireDefaultExports;
+var _interopRequireDefault$9 = interopRequireDefaultExports;
 Object.defineProperty(Save, "__esModule", {
   value: true
 });
-var default_1$3 = Save.default = void 0;
-var _createSvgIcon$2 = _interopRequireDefault$2(requireCreateSvgIcon());
-var _jsxRuntime$2 = jsxRuntimeExports;
-default_1$3 = Save.default = (0, _createSvgIcon$2.default)( /*#__PURE__*/(0, _jsxRuntime$2.jsx)("path", {
+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", {
   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');
 
@@ -15553,11 +15559,11 @@ var useThemeWithoutDefault = {};
 Object.defineProperty(useThemeWithoutDefault, "__esModule", {
   value: true
 });
-var default_1$2 = useThemeWithoutDefault.default = void 0;
-var React = _interopRequireWildcard(React__default);
+var default_1$9 = useThemeWithoutDefault.default = void 0;
+var React = _interopRequireWildcard$1(React__default);
 var _styledEngine = require$$1$1;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+function _interopRequireWildcard$1(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$1(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function isObjectEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -15565,7 +15571,7 @@ function useTheme$3(defaultTheme = null) {
   const contextTheme = React.useContext(_styledEngine.ThemeContext);
   return !contextTheme || isObjectEmpty$2(contextTheme) ? defaultTheme : contextTheme;
 }
-default_1$2 = useThemeWithoutDefault.default = useTheme$3;
+default_1$9 = useThemeWithoutDefault.default = useTheme$3;
 
 var top = 'top';
 var bottom = 'bottom';
@@ -18482,7 +18488,7 @@ const getSideFromDirection = direction => {
     'column-reverse': 'Bottom'
   }[direction];
 };
-const style = ({
+const style$3 = ({
   ownerState,
   theme
 }) => {
@@ -18559,7 +18565,7 @@ function createStack(options = {}) {
     };
     return composeClasses$2(slots, slot => generateUtilityClass$2(componentName, slot), {});
   };
-  const StackRoot = createStyledComponent(style);
+  const StackRoot = createStyledComponent(style$3);
   const Stack = /*#__PURE__*/React$1.forwardRef(function Grid(inProps, ref) {
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
@@ -18652,7 +18658,7 @@ const PopperRoot = styled$3(BasePopper, {
  */
 const Popper = /*#__PURE__*/React$1.forwardRef(function Popper(inProps, ref) {
   var _slots$root;
-  const theme = default_1$2();
+  const theme = default_1$9();
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiPopper'
@@ -24554,7 +24560,8 @@ const PAGE_SIZE = 20;
 const AutocompletePopper = styled$3(MuiPopper)(({ theme }) => ({
     zIndex: theme.zIndex.modal + 1,
 }));
-const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, t }) => {
+const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving }) => {
+    const t = useTranslationContext();
     const [searchValue, setSearchValue] = useState('');
     const [limit, setLimit] = useState(PAGE_SIZE);
     const safeOptions = useMemo(() => options ?? [], [options]);
@@ -24569,7 +24576,7 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, t }) =
         if (nearBottom)
             setLimit((l) => l + PAGE_SIZE);
     };
-    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$4, { 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$3, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, 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: AutocompletePopper, 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$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, 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: AutocompletePopper, 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: {
                     onScroll: onListboxScroll,
                     sx: { maxHeight: 280, overflowY: 'auto' },
                 }, noOptionsText: t('global.noOptions'), sx: { width: '100%' } })] }));
@@ -25353,10 +25360,10 @@ class WebChatChannel {
 }
 WebChat.WebChatChannel = WebChatChannel;
 
-var WhatsApp = {};
+var WhatsApp$1 = {};
 
-Object.defineProperty(WhatsApp, "__esModule", { value: true });
-WhatsApp.WhatsAppConfig = WhatsApp.WhatsAppConectionType = void 0;
+Object.defineProperty(WhatsApp$1, "__esModule", { value: true });
+WhatsApp$1.WhatsAppConfig = WhatsApp$1.WhatsAppConectionType = void 0;
 var WhatsAppConectionType;
 (function (WhatsAppConectionType) {
     // NULL = 0,
@@ -25364,21 +25371,21 @@ var WhatsAppConectionType;
     // TWILIO = 2,
     // DIALOG360 = 6,
     WhatsAppConectionType[WhatsAppConectionType["CLOUDAPI"] = 7] = "CLOUDAPI";
-})(WhatsAppConectionType || (WhatsApp.WhatsAppConectionType = WhatsAppConectionType = {}));
+})(WhatsAppConectionType || (WhatsApp$1.WhatsAppConectionType = WhatsAppConectionType = {}));
 class WhatsAppConfig {
 }
-WhatsApp.WhatsAppConfig = WhatsAppConfig;
+WhatsApp$1.WhatsAppConfig = WhatsAppConfig;
 
-var RCS = {};
+var RCS$1 = {};
 
-Object.defineProperty(RCS, "__esModule", { value: true });
-RCS.RCSServiceAccount = RCS.RCSConfig = void 0;
+Object.defineProperty(RCS$1, "__esModule", { value: true });
+RCS$1.RCSServiceAccount = RCS$1.RCSConfig = void 0;
 class RCSConfig {
 }
-RCS.RCSConfig = RCSConfig;
+RCS$1.RCSConfig = RCSConfig;
 class RCSServiceAccount {
 }
-RCS.RCSServiceAccount = RCSServiceAccount;
+RCS$1.RCSServiceAccount = RCSServiceAccount;
 
 (function (exports) {
 	var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -25409,8 +25416,8 @@ RCS.RCSServiceAccount = RCSServiceAccount;
 	__exportStar(Sip, exports);
 	__exportStar(Sms, exports);
 	__exportStar(WebChat, exports);
-	__exportStar(WhatsApp, exports);
-	__exportStar(RCS, exports); 
+	__exportStar(WhatsApp$1, exports);
+	__exportStar(RCS$1, exports); 
 } (Channels));
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -26305,6 +26312,20 @@ const resolveUserLabel = ({ userId, users, currentUser, }) => {
     return fromUsers?.name?.trim() || fromUsers?.email || null;
 };
 
+const Section = ({ title, children }) => {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: {
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 2,
+            p: 2,
+            mb: 2,
+        }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", sx: { fontWeight: 600 }, children: title }), jsxRuntimeExports.jsx(Divider, { sx: { my: 1.5 } }), children] }));
+};
+
+const SectionContent = ({ children, ...boxProps }) => {
+    return (jsxRuntimeExports.jsx(Box$2, { display: "grid", gridTemplateColumns: { xs: '1fr', md: 'repeat(2, minmax(0, 1fr))' }, gap: 2, ...boxProps, children: children }));
+};
+
 var weekOfYear = {exports: {}};
 
 (function (module, exports) {
@@ -52391,20 +52412,20 @@ const DateSelect = ({ birthDate, setBirthDate, dateFormat }) => {
 
 var Cancel = {};
 
-var _interopRequireDefault$1 = interopRequireDefaultExports;
+var _interopRequireDefault$8 = interopRequireDefaultExports;
 Object.defineProperty(Cancel, "__esModule", {
   value: true
 });
-var default_1$1 = Cancel.default = void 0;
-var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
-var _jsxRuntime$1 = jsxRuntimeExports;
-default_1$1 = Cancel.default = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.jsx)("path", {
+var default_1$8 = Cancel.default = void 0;
+var _createSvgIcon$8 = _interopRequireDefault$8(requireCreateSvgIcon());
+var _jsxRuntime$8 = jsxRuntimeExports;
+default_1$8 = Cancel.default = (0, _createSvgIcon$8.default)( /*#__PURE__*/(0, _jsxRuntime$8.jsx)("path", {
   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 isUserInfo = (option) => 'email' in option;
 const isContactBirthdayProps = (p) => p.entityType === 'contact' && p.inputType === 'birthday';
-const StyledIconButton$1 = styled$5(IconButton$2)({
+const StyledIconButton$3 = styled$5(IconButton$2)({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -52421,6 +52442,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 inputType = props.inputType ?? 'text';
     const [isEditing, setIsEditing] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
@@ -52533,18 +52555,18 @@ const EntityInfoLabel = (props) => {
             '&:hover .edit-icon': {
                 opacity: 1,
             },
-        }, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: '25px', children: [jsxRuntimeExports.jsx(Typography$2, { letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, 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$3, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$1, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$1, { className: "edit-icon", size: "small", onClick: handleEditClick, children: jsxRuntimeExports.jsx(default_1$8, {}) }))] }), 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: props.t('contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option.id, children: props.entityType === 'contact'
+        }, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: '25px', children: [jsxRuntimeExports.jsx(Typography$2, { letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, 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('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' && inputType === 'selectBusiness' && props.businessId ? (jsxRuntimeExports.jsx(Box$2, { display: "flex", alignItems: "center", children: "Popover" })) : (jsxRuntimeExports.jsx(Typography$2, { fontWeight: '400', sx: { padding: '2.5px 14px 8.5px 0px' }, color: (theme) => theme.palette.text.primary, children: displayValue || (typeof value === 'string' && value) || '-' })) })] }));
 };
 
 const ContactInfoLabel = (props) => {
-    const { title, value, isNotEditable, options = [], displayValue, constructUpdateObject, businessId, baseUrl, spaceId, contactId, t, onEntityUpdated, } = props;
+    const { title, value, isNotEditable, options = [], displayValue, constructUpdateObject, businessId, baseUrl, spaceId, contactId, onEntityUpdated, } = props;
     if (props.inputType === 'birthday') {
-        return (jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", entityId: contactId, title: title, value: value, isNotEditable: isNotEditable, inputType: "birthday", options: options, displayValue: displayValue, constructUpdateObject: constructUpdateObject, contact: props.contact, businessId: businessId, baseUrl: baseUrl, spaceId: spaceId, t: t, dateFormat: props.dateFormat, onEntityUpdated: onEntityUpdated }));
+        return (jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", entityId: contactId, title: title, value: value, isNotEditable: isNotEditable, inputType: "birthday", options: options, displayValue: displayValue, constructUpdateObject: constructUpdateObject, contact: props.contact, businessId: businessId, baseUrl: baseUrl, spaceId: spaceId, dateFormat: props.dateFormat, onEntityUpdated: onEntityUpdated }));
     }
     const inputType = props.inputType ?? 'text';
-    return (jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", entityId: contactId, title: title, value: value, isNotEditable: isNotEditable, inputType: inputType, options: options, displayValue: displayValue, constructUpdateObject: constructUpdateObject, businessId: businessId, baseUrl: baseUrl, spaceId: spaceId, t: t, onEntityUpdated: onEntityUpdated }));
+    return (jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", entityId: contactId, title: title, value: value, isNotEditable: isNotEditable, inputType: inputType, options: options, displayValue: displayValue, constructUpdateObject: constructUpdateObject, businessId: businessId, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: onEntityUpdated }));
 };
 
 const CustomPropertyInput = ({ nameKey, value, onChange, type, }) => {
@@ -52602,7 +52624,8 @@ const CustomPropertyDatePicker = ({ value, handleChange, dateFormat }) => {
                 } }) }) }));
 };
 
-const CustomPropertyOptionsSelect = ({ handleChange, value, options, t }) => {
+const CustomPropertyOptionsSelect = ({ handleChange, value, options }) => {
+    const t = useTranslationContext();
     return (jsxRuntimeExports.jsx(FormControl$2, { className: "fadein", sx: { width: '100%' }, children: jsxRuntimeExports.jsxs(Select$2, { value: value, onChange: (e) => handleChange(e.target.value), size: "small", variant: "standard", children: [jsxRuntimeExports.jsx(MenuItem$2, { value: "", children: t('global.noValue') }), options.map((option, i) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option, children: option }, i)))] }) }));
 };
 
@@ -54300,7 +54323,8 @@ MultiInputTimeRangeField.propTypes = {
   value: PropTypes.arrayOf(PropTypes.object)
 };
 
-const CustomPropertyTimeRangePicker = ({ value, handleChange, userTimeFormat, t, }) => {
+const CustomPropertyTimeRangePicker = ({ value, handleChange, userTimeFormat }) => {
+    const t = useTranslationContext();
     const initDates = [
         dayjs().set('hour', 0).set('minute', 0),
         dayjs().set('hour', 0).set('minute', 0),
@@ -54308,9 +54332,7 @@ const CustomPropertyTimeRangePicker = ({ value, handleChange, userTimeFormat, t,
     const timeFormat = userTimeFormat === '24' ? 'HH:mm' : 'hh:mm';
     return (jsxRuntimeExports.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsxRuntimeExports.jsx(Box$1, { sx: { overflow: 'visible', paddingTop: '0px' }, children: jsxRuntimeExports.jsx(MultiInputTimeRangeField, { slotProps: {
                     textField: ({ position }) => ({
-                        label: position === 'start'
-                            ? t('contactEdit.from')
-                            : t('contactEdit.to'),
+                        label: position === 'start' ? t('contactEdit.from') : t('contactEdit.to'),
                         size: 'small',
                         variant: 'standard',
                         inputProps: {
@@ -54320,7 +54342,8 @@ const CustomPropertyTimeRangePicker = ({ value, handleChange, userTimeFormat, t,
                 }, value: value ? value : initDates, onChange: (newValue) => handleChange(newValue), format: timeFormat }) }) }));
 };
 
-const CustomPropertyDateRangePicker = ({ value, handleChange, userDateFormat, t }) => {
+const CustomPropertyDateRangePicker = ({ value, handleChange, userDateFormat }) => {
+    const t = useTranslationContext();
     // Default date range if value is null
     const initDates = [dayjs(), dayjs()];
     // Determina el formato dinámico
@@ -54340,7 +54363,7 @@ const CustomPropertyDateRangePicker = ({ value, handleChange, userDateFormat, t
                 }, value: value || initDates, onChange: (newValue) => handleChange(newValue), format: dateFormat }) }) }));
 };
 
-const StyledIconButton = styled$5(IconButton$2)(() => ({
+const StyledIconButton$2 = styled$5(IconButton$2)(() => ({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -54380,7 +54403,7 @@ const FieldValue = styled$5(Typography$2)(({ theme }) => ({
     overflow: 'auto',
     whiteSpace: 'break-spaces',
 }));
-const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, customContactFields, userTrii, baseUrl, spaceId, t, onEntityUpdated, }) => {
+const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, customContactFields, userTrii, baseUrl, spaceId, onEntityUpdated, }) => {
     const { customProperties } = entity.field;
     const { setCustomProperties } = entity.action;
     const [isEditing, setIsEditing] = useState(false);
@@ -54420,8 +54443,7 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
         if (!entityId)
             return;
         setIsSaving(true);
-        const current = customProperties.find((p) => p.nameKey === property.nameKey) ||
-            property;
+        const current = customProperties.find((p) => p.nameKey === property.nameKey) || property;
         const { nameKey, value } = current;
         // Definición del campo (si existe)
         const fieldDef = customContactFields.find((f) => f.nameKey === nameKey);
@@ -54532,25 +54554,18 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
                         : null, handleChange: (newValue) => handleInputChange(nameKey, newValue), userTimeFormat: userTimeFormat }));
         else if (type === Contacts.ContactField_type.DATERANGE)
             return (jsxRuntimeExports.jsx(CustomPropertyDateRangePicker, { value: value && typeof value === 'string' && value.includes(' - ')
-                    ? [
-                        dayjs(value.split(' - ')[0]),
-                        dayjs(value.split(' - ')[1]),
-                    ]
-                    : null, handleChange: (newValue) => handleInputChange(nameKey, [newValue[0]?.toDate?.(), newValue[1]?.toDate?.()]), userDateFormat: userDateFormat, t: t }));
+                    ? [dayjs(value.split(' - ')[0]), dayjs(value.split(' - ')[1])]
+                    : null, handleChange: (newValue) => handleInputChange(nameKey, [newValue[0]?.toDate?.(), newValue[1]?.toDate?.()]), userDateFormat: userDateFormat }));
         else if (type === Contacts.ContactField_type.TIMERANGE)
             return (jsxRuntimeExports.jsx(CustomPropertyTimeRangePicker, { value: Array.isArray(value) && value.length === 2
                     ? [dayjs(value[0]), dayjs(value[1])]
-                    : null, handleChange: (newValue) => handleInputChange(nameKey, [newValue[0]?.toDate?.(), newValue[1]?.toDate?.()]), userTimeFormat: userTimeFormat, t: t }));
+                    : null, handleChange: (newValue) => handleInputChange(nameKey, [newValue[0]?.toDate?.(), newValue[1]?.toDate?.()]), userTimeFormat: userTimeFormat }));
         else if (type === Contacts.ContactField_type.OPTIONS)
-            return (jsxRuntimeExports.jsx(CustomPropertyOptionsSelect, { value: typeof value === 'string' ? value : '', handleChange: (newValue) => handleInputChange(nameKey, newValue), options: customContactFields.find((field) => field.nameKey === nameKey)?.typeOptions ?? [], t: t }));
+            return (jsxRuntimeExports.jsx(CustomPropertyOptionsSelect, { value: typeof value === 'string' ? value : '', handleChange: (newValue) => handleInputChange(nameKey, newValue), options: customContactFields.find((field) => field.nameKey === nameKey)?.typeOptions ?? [] }));
         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", children: [jsxRuntimeExports.jsx(FieldName, { flexGrow: isEditing ? 1 : 0, 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$3, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$1, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton, { className: "edit-icon", size: "small", onClick: toggleEdit, children: jsxRuntimeExports.jsx(default_1$8, {}) }))] }), 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", children: [jsxRuntimeExports.jsx(FieldName, { flexGrow: isEditing ? 1 : 0, 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)
                         ? property.type === Contacts.ContactField_type.DATERANGE
                             ? (() => {
                                 if (typeof property.value === 'string') {
@@ -54599,7 +54614,8 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
 };
 
 const ContactGeneral = (props) => {
-    const { dateFormat, entityData, customContactFields, baseUrl, spaceId, t, currentUser, onEntityUpdated } = props;
+    const { dateFormat, entityData, customContactFields, baseUrl, spaceId, currentUser, onEntityUpdated, } = props;
+    const t = useTranslationContext();
     const { entityType, editEntity } = useEditEntity();
     const api = useEditContactApi();
     if (entityType !== 'contact') {
@@ -54677,9 +54693,9 @@ const ContactGeneral = (props) => {
     };
     return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.contactOwner'), displayValue: owner || '-', value: entityData.owner, inputType: "select", options: users, constructUpdateObject: (value) => ({
                         owner: typeof value === 'string' ? value : '',
-                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, t: t, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.business'), displayValue: entityData.businessName || '-', value: entityData.businessId, inputType: "selectBusiness", businessId: entityData.businessId, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, t: t, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, t: t }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, t: t }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('global.birthdate'), inputType: "birthday", displayValue: birthDate ? `${dateOnlyString} (${calculateAge(birthDate.toDate())})` : '-', value: birthDate ? birthDate.toISOString() : '', constructUpdateObject: (value) => ({
+                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.business'), displayValue: entityData.businessName || '-', value: entityData.businessId, inputType: "selectBusiness", businessId: entityData.businessId, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('global.birthdate'), inputType: "birthday", displayValue: birthDate ? `${dateOnlyString} (${calculateAge(birthDate.toDate())})` : '-', value: birthDate ? birthDate.toISOString() : '', constructUpdateObject: (value) => ({
                         birthDate: value,
-                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, t: t, dateFormat: dateFormat, onEntityUpdated: onEntityUpdated }), editContact.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editContact, entityType: "contact", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, t: t, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
+                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, dateFormat: dateFormat, onEntityUpdated: onEntityUpdated }), editContact.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editContact, entityType: "contact", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
 };
 
 const BusinessInfoLabel = ({ title, value, isNotEditable, inputType = 'text', options = [], displayValue, constructUpdateObject, baseUrl, spaceId, businessId, onEntityUpdated, }) => {
@@ -54687,7 +54703,8 @@ const BusinessInfoLabel = ({ title, value, isNotEditable, inputType = 'text', op
 };
 
 const BusinessGeneral = (props) => {
-    const { entityData, customContactFields, baseUrl, spaceId, t, currentUser, onEntityUpdated } = props;
+    const t = useTranslationContext();
+    const { entityData, customContactFields, baseUrl, spaceId, currentUser, onEntityUpdated } = props;
     const { entityType, editEntity } = useEditEntity();
     const api = useEditContactApi();
     if (entityType !== 'business') {
@@ -54753,7 +54770,7 @@ const BusinessGeneral = (props) => {
     }, [api, entityData, users, currentUser]);
     return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('businessDetails.businessOwner'), value: entityData.owner, displayValue: owner || '-', inputType: "select", options: users, constructUpdateObject: (value) => ({
                         owner: typeof value === 'string' ? value : '',
-                    }), baseUrl: baseUrl, spaceId: spaceId, businessId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true }), editBusiness.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editBusiness, entityType: "business", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, t: t, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
+                    }), baseUrl: baseUrl, spaceId: spaceId, businessId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true }), editBusiness.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editBusiness, entityType: "business", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
 };
 
 const General = (props) => {
@@ -54766,7 +54783,22 @@ const General = (props) => {
     return normalizedEntityType === 'contact' ? (jsxRuntimeExports.jsx(ContactGeneral, { ...props, entityData: entityData, entityType: "contact" })) : (jsxRuntimeExports.jsx(BusinessGeneral, { ...props, entityData: entityData, entityType: "business" }));
 };
 
-styled$1(Box$2)(({ theme }) => ({
+// useModal.ts
+const useEditModal = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [title, setTitle] = useState('');
+    const openModal = (title) => {
+        setTitle(title);
+        setIsOpen(true);
+    };
+    const closeModal = () => {
+        setIsOpen(false);
+        setTitle(''); // Clear the title when the modal closes
+    };
+    return { isOpen, title, openModal, closeModal };
+};
+
+const StyledBox$2 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -54779,19 +54811,19 @@ styled$1(Box$2)(({ theme }) => ({
     minHeight: '50px',
     position: 'relative',
 }));
-styled$1(Box$2)(({ theme }) => ({
+const LeftSection$1 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     gap: theme.spacing(1),
     overflow: 'hidden',
     maxWidth: '80%',
 }));
-styled$1(Box$2)(({ theme }) => ({
+const RightSection$1 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
 }));
-styled$1(Box$2)(({ theme }) => ({
+const ContactDetails$1 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
@@ -54801,7 +54833,7 @@ styled$1(Box$2)(({ theme }) => ({
     flexWrap: 'wrap',
     marginTop: '-5px',
 }));
-styled$1(Avatar)(({}) => ({
+const AvatarWrapper = styled$1(Avatar)(({}) => ({
     width: 32,
     height: 32,
     cursor: 'pointer',
@@ -54813,32 +54845,51 @@ const EllipsisText$1 = styled$1(Box$2)(({}) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
 }));
-styled$1(EllipsisText$1)(({ theme }) => ({
+const NoteText$1 = styled$1(EllipsisText$1)(({ theme }) => ({
     fontSize: 12,
     color: theme.palette.text.secondary,
     position: 'absolute',
     bottom: 0,
     maxWidth: '70%',
 }));
-styled$1(EllipsisText$1)(({}) => ({
+const PhoneText$1 = styled$1(EllipsisText$1)(({}) => ({
     fontSize: 14,
     fontWeight: 500,
 }));
-styled$1(EllipsisText$1)(({}) => ({
+const ProfileNameText = styled$1(EllipsisText$1)(({}) => ({
     fontSize: 14,
     fontWeight: 500,
 }));
+const ContactMethodItem = ({ item }) => {
+    const avatarUrlWithoutAccess = item.profileUrl;
+    const { imageUrl } = useImage({
+        initialImageUrl: avatarUrlWithoutAccess,
+    });
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox$2, { children: [jsxRuntimeExports.jsx(LeftSection$1, { children: jsxRuntimeExports.jsxs(ContactDetails$1, { children: [jsxRuntimeExports.jsx(Tooltip, { title: item.address || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText$1, { children: item.address }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.profileName || '', arrow: true, children: jsxRuntimeExports.jsx(ProfileNameText, { sx: {
+                                        marginTop: '-10px',
+                                        marginLeft: '5px',
+                                        fontSize: '10px',
+                                    }, children: item.profileName }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.note || '', arrow: true, children: jsxRuntimeExports.jsx(NoteText$1, { children: item.note }) })] }) }), jsxRuntimeExports.jsxs(RightSection$1, { children: [avatarUrlWithoutAccess !== '' && (jsxRuntimeExports.jsx(AvatarWrapper, { src: imageUrl, alt: item.profileName, style: { cursor: 'pointer' }, children: item?.profileName?.charAt(0).toUpperCase() })), jsxRuntimeExports.jsx(Box$2, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'flex-end',
+                            }, children: jsxRuntimeExports.jsx(IconButton$2, { size: "small", sx: { marginTop: '-5px', padding: 0 }, children: item.isFavorite ? (jsxRuntimeExports.jsx(Star, { sx: {
+                                        color: '#fcac34',
+                                    } })) : (jsxRuntimeExports.jsx(StarBorder, { sx: {
+                                        color: '#fcac34',
+                                    } })) }) })] })] }) }));
+};
 
 var LocalPhone = {};
 
-var _interopRequireDefault = interopRequireDefaultExports;
+var _interopRequireDefault$7 = interopRequireDefaultExports;
 Object.defineProperty(LocalPhone, "__esModule", {
   value: true
 });
-var default_1 = LocalPhone.default = void 0;
-var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
-var _jsxRuntime = jsxRuntimeExports;
-default_1 = LocalPhone.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+var default_1$7 = LocalPhone.default = void 0;
+var _createSvgIcon$7 = _interopRequireDefault$7(requireCreateSvgIcon());
+var _jsxRuntime$7 = jsxRuntimeExports;
+default_1$7 = LocalPhone.default = (0, _createSvgIcon$7.default)( /*#__PURE__*/(0, _jsxRuntime$7.jsx)("path", {
   d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02z"
 }), 'LocalPhone');
 
@@ -56052,18 +56103,38 @@ goog.TRUSTED_TYPES_POLICY_NAME="goog";goog.identity_=function(a){return a};
 
 var libphonenumberExports = libphonenumber.exports;
 
-libphonenumberExports.PhoneNumberUtil.getInstance();
+const phoneUtil = libphonenumberExports.PhoneNumberUtil.getInstance();
+/**
+ * Returns a user-friendly display format for a sanitized phone number.
+ * Always uses INTERNATIONAL format, e.g. "+54 358 402 2664"
+ */
+const formatPhoneForDisplay = (number) => {
+    if (!number || !number.trim())
+        return number;
+    try {
+        const parsed = phoneUtil.parse(number, undefined);
+        if (!phoneUtil.isValidNumber(parsed)) {
+            // If not valid, just return as-is
+            return number;
+        }
+        // Always use INTERNATIONAL format
+        return phoneUtil.format(parsed, libphonenumberExports.PhoneNumberFormat.INTERNATIONAL);
+    }
+    catch (e) {
+        return number;
+    }
+};
 
-styled$1(IconButton$2)(({ theme }) => ({
+const StyledIconButton$1 = styled$1(IconButton$2)(({ theme }) => ({
     padding: theme.spacing(0.5),
     marginTop: '-5px',
 }));
-styled$1(default_1)(({ theme }) => ({
+const StyledLocalPhoneIcon = styled$1(default_1$7)(({ theme }) => ({
     height: 16,
     width: 16,
     color: theme.palette.secondary.main
 }));
-styled$1(Box$2)(({ theme }) => ({
+const StyledBox$1 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -56076,18 +56147,18 @@ styled$1(Box$2)(({ theme }) => ({
     minHeight: '50px',
     position: 'relative',
 }));
-styled$1(Box$2)(({ theme }) => ({
+const LeftSection = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     gap: theme.spacing(1),
     maxWidth: '80%',
 }));
-styled$1(Box$2)(({ theme }) => ({
+const RightSection = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
 }));
-styled$1(Box$2)(({ theme }) => ({
+const ContactDetails = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
@@ -56104,19 +56175,40 @@ const EllipsisText = styled$1(Box$2)(({}) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
 }));
-styled$1(EllipsisText)(({ theme }) => ({
+const NoteText = styled$1(EllipsisText)(({ theme }) => ({
     fontSize: 12,
     color: theme.palette.text.secondary,
     position: 'absolute',
     bottom: 0,
     maxWidth: '70%',
 }));
-styled$1(EllipsisText)(({}) => ({
+const PhoneText = styled$1(EllipsisText)(({}) => ({
     fontSize: 14,
     fontWeight: 500,
 }));
+const ContactMethodPhoneItem = ({ item }) => {
+    const handleCallContact = () => {
+        const contactPhone = item.address;
+        if (!contactPhone)
+            return;
+        const event = new CustomEvent('call-contact-header', {
+            detail: { phoneAddress: contactPhone },
+        });
+        window.dispatchEvent(event);
+    };
+    const formattedPhone = useMemo(() => formatPhoneForDisplay(item.address || ''), [item.address]);
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox$1, { children: [jsxRuntimeExports.jsxs(LeftSection, { children: [jsxRuntimeExports.jsx(StyledIconButton$1, { onClick: handleCallContact, color: "primary", size: "small", children: jsxRuntimeExports.jsx(StyledLocalPhoneIcon, {}) }), jsxRuntimeExports.jsxs(ContactDetails, { children: [jsxRuntimeExports.jsx(Tooltip, { title: formattedPhone || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText, { children: formattedPhone }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.note || '', arrow: true, children: jsxRuntimeExports.jsx(NoteText, { children: item.note }) })] })] }), jsxRuntimeExports.jsx(RightSection, { children: jsxRuntimeExports.jsx(Box$2, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                        }, children: jsxRuntimeExports.jsx(IconButton$2, { size: "small", sx: { marginTop: '-5px', padding: 0 }, children: item.isFavorite ? (jsxRuntimeExports.jsx(Star, { sx: {
+                                    color: '#fcac34',
+                                } })) : (jsxRuntimeExports.jsx(StarBorder, { sx: {
+                                    color: '#fcac34',
+                                } })) }) }) })] }) }));
+};
 
-styled$1(Box$2)(({ theme }) => ({
+const StyledBox = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(1, 0, 2, 0),
@@ -56126,22 +56218,22 @@ styled$1(Box$2)(({ theme }) => ({
         opacity: 1,
     },
 }));
-styled$1(Typography$2)(({ theme }) => ({
+const StyledTypography = styled$1(Typography$2)(({}) => ({
     letterSpacing: -0.5,
     fontSize: 14,
     fontWeight: 600,
 }));
-styled$1(Box$2)(({ theme }) => ({
+const HeaderBox = styled$1(Box$2)(({}) => ({
     display: 'flex',
     alignItems: 'center',
 }));
-styled$1(Box$2)(({ theme }) => ({
+const MethodItemsBox = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(1),
     width: '100%',
 }));
-styled$1(IconButton$2)({
+const StyledIconButton = styled$1(IconButton$2)({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -56150,8 +56242,669 @@ styled$1(IconButton$2)({
     },
     marginLeft: '15px',
 });
+const ContactMethod = ({ title, methodItems, isPhone, handleEdit, owner }) => {
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: 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" }) })] }), jsxRuntimeExports.jsx(MethodItemsBox, { children: methodItems.map((item, index) => {
+                        if (isPhone) {
+                            return jsxRuntimeExports.jsx(ContactMethodPhoneItem, { item: item }, index);
+                        }
+                        return jsxRuntimeExports.jsx(ContactMethodItem, { item: item, owner: owner }, index);
+                    }) })] }) }));
+};
+
+const SubsectionHeader = ({ title }) => {
+    return (jsxRuntimeExports.jsx(Box$2, { children: jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle2", children: title }) }));
+};
+
+const subsectionHeaderWithButtonStyle = {
+    container: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+    },
+};
+
+var Add = {};
+
+var _interopRequireDefault$6 = interopRequireDefaultExports;
+Object.defineProperty(Add, "__esModule", {
+  value: true
+});
+var default_1$6 = Add.default = void 0;
+var _createSvgIcon$6 = _interopRequireDefault$6(requireCreateSvgIcon());
+var _jsxRuntime$6 = jsxRuntimeExports;
+default_1$6 = Add.default = (0, _createSvgIcon$6.default)( /*#__PURE__*/(0, _jsxRuntime$6.jsx)("path", {
+  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+}), 'Add');
+
+const SubsectionHeaderWithButton = ({ title, handleAdd, t }) => {
+    const tFromContext = useTranslationContext();
+    const translate = t || tFromContext;
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: subsectionHeaderWithButtonStyle.container, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle2", children: title }), jsxRuntimeExports.jsx(Button$2, { onClick: handleAdd, size: "small", startIcon: jsxRuntimeExports.jsx(default_1$6, {}), variant: "text", color: "primary", children: translate('global.add') })] }));
+};
+
+const informationItemContainerStyle = {
+    container: {
+        border: '1px solid lightgray',
+        borderRadius: 1,
+        p: 2,
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+    },
+};
+
+const InformationItemContainer = ({ children }) => {
+    return jsxRuntimeExports.jsx(Box$2, { sx: informationItemContainerStyle.container, children: children });
+};
+
+const noteDeleteButtonStyle = {
+    container: {
+        display: 'flex',
+        width: '50%',
+        alignItems: 'center',
+        justifyContent: 'end'
+    },
+    noteTextField: {
+        width: '100%',
+        marginRight: '15px'
+    },
+};
+
+var MoreVert = {};
+
+var _interopRequireDefault$5 = interopRequireDefaultExports;
+Object.defineProperty(MoreVert, "__esModule", {
+  value: true
+});
+var default_1$5 = MoreVert.default = void 0;
+var _createSvgIcon$5 = _interopRequireDefault$5(requireCreateSvgIcon());
+var _jsxRuntime$5 = jsxRuntimeExports;
+default_1$5 = MoreVert.default = (0, _createSvgIcon$5.default)( /*#__PURE__*/(0, _jsxRuntime$5.jsx)("path", {
+  d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+}), 'MoreVert');
+
+var WhatsApp = {};
+
+var _interopRequireDefault$4 = interopRequireDefaultExports;
+Object.defineProperty(WhatsApp, "__esModule", {
+  value: true
+});
+var default_1$4 = WhatsApp.default = void 0;
+_interopRequireWildcard(React__default);
+var _createSvgIcon$4 = _interopRequireDefault$4(requireCreateSvgIcon());
+var _jsxRuntime$4 = jsxRuntimeExports;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+default_1$4 = WhatsApp.default = (0, _createSvgIcon$4.default)( /*#__PURE__*/(0, _jsxRuntime$4.jsx)("path", {
+  d: "M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"
+}), 'WhatsApp');
+
+var Mms = {};
+
+var _interopRequireDefault$3 = interopRequireDefaultExports;
+Object.defineProperty(Mms, "__esModule", {
+  value: true
+});
+var default_1$3 = Mms.default = void 0;
+var _createSvgIcon$3 = _interopRequireDefault$3(requireCreateSvgIcon());
+var _jsxRuntime$3 = jsxRuntimeExports;
+default_1$3 = Mms.default = (0, _createSvgIcon$3.default)( /*#__PURE__*/(0, _jsxRuntime$3.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-2M5 14l3.5-4.5 2.5 3.01L14.5 8l4.5 6z"
+}), 'Mms');
+
+const OptionsMenu = ({ onDelete, addressData, handleLinkAccountSave, checked, onCheckContactAddress, }) => {
+    const t = useTranslationContext();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { channelType, address } = addressData;
+    const [verifying, setVerifying] = useState(false);
+    const [verificationResult, setVerificationResult] = useState(null);
+    const [modalOpen, setModalOpen] = useState(false);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleModalClose = () => {
+        setModalOpen(false);
+    };
+    const handleDelete = () => {
+        onDelete();
+        handleClose();
+    };
+    const handleCheckWA = async () => {
+        setVerifying(true);
+        try {
+            if (!onCheckContactAddress) {
+                return;
+            }
+            const result = await onCheckContactAddress(13);
+            if (!result) {
+                return;
+            }
+            setVerificationResult(result);
+            setModalOpen(true);
+        }
+        catch (error) {
+            console.error('Error verifying WhatsApp account:', error);
+        }
+        finally {
+            setVerifying(false);
+        }
+        handleClose();
+    };
+    const handleCheckRCS = async () => {
+        setVerifying(true);
+        try {
+            if (!onCheckContactAddress) {
+                return;
+            }
+            const result = await onCheckContactAddress(21);
+            if (!result) {
+                return;
+            }
+            setVerificationResult(result);
+            setModalOpen(true);
+        }
+        catch (error) {
+            console.error('Error verifying RCS account:', error);
+        }
+        finally {
+            setVerifying(false);
+        }
+        handleClose();
+    };
+    const handleLinkAccount = async () => {
+        await handleLinkAccountSave();
+        setModalOpen(false);
+    };
+    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: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        width: 400,
+                        boxShadow: 24,
+                        p: 4,
+                        backgroundColor: (theme) => theme.palette.background.default,
+                    }, children: verificationResult?.success ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Typography$2, { id: "modal-modal-title", variant: "h6", component: "h2", children: [t('optionsMenu.wspAccountFound'), " ", address] }), jsxRuntimeExports.jsx(Typography$2, { id: "modal-modal-description", sx: { mt: 2 }, children: t('optionsMenu.wantToLinkContact') }), jsxRuntimeExports.jsxs(Box$2, { sx: { marginTop: '10px' }, children: [jsxRuntimeExports.jsx(Button$2, { onClick: handleLinkAccount, color: "primary", children: t('optionsMenu.yesLink') }), jsxRuntimeExports.jsx(Button$2, { onClick: handleModalClose, color: "secondary", children: "No" })] })] })) : (jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative' }, children: [jsxRuntimeExports.jsxs(Typography$2, { id: "modal-modal-title", variant: "h6", component: "h2", children: [t('optionsMenu.noWspAccountFound'), " ", address] }), jsxRuntimeExports.jsx(Button$2, { onClick: handleModalClose, color: "secondary", sx: { position: 'absolute', bottom: -25, right: 0 }, children: t('global.cancel') })] })) }) })] }));
+};
+
+const NoteDeleteButton = (props) => {
+    const t = useTranslationContext();
+    const api = useEditContactApi();
+    const { editEntity, entityId: entityIdFromContext } = useEditEntity();
+    const [isSaving, setIsSaving] = useState(false);
+    const checked = props.checked ?? true;
+    const entityId = props.entityId ?? entityIdFromContext;
+    const { note, channelType, id, address } = props.addressData;
+    const addressIsSaved = !props.addressData.hasOwnProperty('isSaved');
+    const replaceAddress = props.replaceAddress ?? editEntity.action.replaceAddress;
+    const addWhatsappVerified = props.addWhatsappVerified ||
+        (typeof editEntity.action?.addWhatsappVerified === 'function'
+            ? editEntity.action.addWhatsappVerified
+            : undefined);
+    const handleSetAddress = async (type) => {
+        if (!api)
+            return null;
+        if (!entityId)
+            return null;
+        const newAddress = await api.setContactAddress({
+            data: {
+                address,
+                contactId: entityId,
+                type,
+            },
+        });
+        replaceAddress(id, newAddress);
+        return newAddress;
+    };
+    const handleUpdateAddress = async () => {
+        if (!api)
+            return;
+        if (!entityId)
+            return;
+        const updated = await api.updateContactAddress({
+            data: {
+                contactAddressId: id,
+                contactId: entityId,
+                note: note ?? '',
+            },
+        });
+        replaceAddress(id, updated);
+    };
+    const handleSave = async () => {
+        setIsSaving(true);
+        if (addressIsSaved) {
+            await handleUpdateAddress();
+            setIsSaving(false);
+        }
+        else {
+            const newAddress = await handleSetAddress(channelType);
+            if (newAddress)
+                setIsSaving(false);
+        }
+    };
+    const handleLinkAccountSave = async () => {
+        setIsSaving(true);
+        const newAddress = await handleSetAddress(13);
+        if (newAddress && addWhatsappVerified) {
+            addWhatsappVerified(newAddress);
+        }
+        if (newAddress)
+            setIsSaving(false);
+    };
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: {
+            ...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) => {
+                    if (!api)
+                        return null;
+                    try {
+                        return await api.checkContactAddress({
+                            data: {
+                                address,
+                                type,
+                            },
+                        });
+                    }
+                    catch {
+                        return null;
+                    }
+                } })] }));
+};
+
+const informationItemInputsContainerStyle = {
+    container: {
+        display: 'flex',
+        gap: '100px',
+        alignItems: 'center',
+    },
+};
+
+const InformationItemInputsContainer = ({ children }) => {
+    return jsxRuntimeExports.jsx(Box$2, { sx: informationItemInputsContainerStyle.container, children: children });
+};
+
+const subsectionBodyContainerStyle = {
+    container: {
+        width: '100%',
+        borderRadius: 1,
+        px: 1.5,
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        overflow: 'auto',
+        maxHeight: 'calc(100vh - 250px)',
+    },
+};
+
+const SubsectionBodyContainer = ({ children }) => {
+    return (jsxRuntimeExports.jsx(Box$2, { sx: {
+            ...subsectionBodyContainerStyle.container,
+        }, children: children }));
+};
+
+var CheckRounded = {};
+
+var _interopRequireDefault$2 = interopRequireDefaultExports;
+Object.defineProperty(CheckRounded, "__esModule", {
+  value: true
+});
+var default_1$2 = CheckRounded.default = void 0;
+var _createSvgIcon$2 = _interopRequireDefault$2(requireCreateSvgIcon());
+var _jsxRuntime$2 = jsxRuntimeExports;
+default_1$2 = CheckRounded.default = (0, _createSvgIcon$2.default)( /*#__PURE__*/(0, _jsxRuntime$2.jsx)("path", {
+  d: "M9 16.17 5.53 12.7a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.9959.9959 0 0 0-1.41 0z"
+}), 'CheckRounded');
+
+var CloseRounded = {};
+
+var _interopRequireDefault$1 = interopRequireDefaultExports;
+Object.defineProperty(CloseRounded, "__esModule", {
+  value: true
+});
+var default_1$1 = CloseRounded.default = void 0;
+var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
+var _jsxRuntime$1 = jsxRuntimeExports;
+default_1$1 = CloseRounded.default = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.jsx)("path", {
+  d: "M18.3 5.71a.9959.9959 0 0 0-1.41 0L12 10.59 7.11 5.7a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4"
+}), 'CloseRounded');
+
+const Adornment = ({ status }) => {
+    switch (status) {
+        case 'idle':
+            return null;
+        case 'loading':
+            return jsxRuntimeExports.jsx(CircularProgress$1, { size: 20 });
+        case 'available':
+            return jsxRuntimeExports.jsx(default_1$2, { style: { height: 27, width: 27 }, color: "success" });
+        case 'unavailable':
+            return jsxRuntimeExports.jsx(default_1$1, { style: { height: 27, width: 27 }, color: "error" });
+        default:
+            return null;
+    }
+};
 
-styled$1(Box$2)(({ theme }) => ({
+const StatusAdornment = ({ status, text }) => {
+    const textAdornment = text ? (jsxRuntimeExports.jsx(Typography$1, { marginRight: 0.5, children: text })) : null;
+    return (jsxRuntimeExports.jsxs(InputAdornment$1, { position: "end", children: [textAdornment, jsxRuntimeExports.jsx("div", { style: { width: 30, display: 'flex', justifyContent: 'center' }, children: jsxRuntimeExports.jsx(Adornment, { status: status }) })] }));
+};
+
+const imsStyle = {
+    code: {
+        width: '60%',
+        color: 'gray',
+    },
+};
+
+const Ims = ({ data, editEntity }) => {
+    const editActions = editEntity.action;
+    return (jsxRuntimeExports.jsx(InformationItemContainer, { children: jsxRuntimeExports.jsxs(InformationItemInputsContainer, { children: [jsxRuntimeExports.jsx(Typography$2, { sx: imsStyle.code, variant: "body2", children: data.address }), jsxRuntimeExports.jsx(NoteDeleteButton, { addressData: data, handleNoteFieldChange: editActions.handleNoteFieldChange, handleDeleteAddress: editActions.handleDeleteAddress })] }) }));
+};
+
+const Body$4 = ({ IMSs, editEntity }) => {
+    return (jsxRuntimeExports.jsx(SubsectionBodyContainer, { children: IMSs?.map((ims) => (jsxRuntimeExports.jsx(Ims, { data: ims, editEntity: editEntity }, ims.id))) }));
+};
+
+const InformationSocialNetworkItem = ({ editEntity, title, IMSs }) => {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsx(SubsectionHeader, { title: title }), jsxRuntimeExports.jsx(Body$4, { IMSs: IMSs, editEntity: editEntity })] }));
+};
+
+const style$2 = {
+    addressField: {
+    // width: '35%',
+    },
+};
+
+const AddressInput = ({ data, onChange, setWarnings }) => {
+    const { id, channelType, address } = data;
+    const t = useTranslationContext();
+    const api = useEditContactApi();
+    const [adornmentStatus, setAdornmentStatus] = useState('idle');
+    const [lastSearch, setLastSearch] = useState(address);
+    const addressIsSaved = !data.hasOwnProperty('isSaved');
+    useEffect(() => {
+        let timer = setTimeout(async () => {
+            if (address !== '' && address !== lastSearch) {
+                if (!api) {
+                    return;
+                }
+                setAdornmentStatus('loading');
+                setLastSearch(address);
+                const checkContactAddressData = {
+                    address,
+                    type: channelType,
+                };
+                try {
+                    const response = await api.checkContactAddress({ data: checkContactAddressData });
+                    const { success, warnings } = response;
+                    setWarnings(warnings);
+                    success ? setAdornmentStatus('available') : setAdornmentStatus('unavailable');
+                }
+                catch {
+                    setWarnings([]);
+                    setAdornmentStatus('unavailable');
+                }
+            }
+        }, 1700);
+        return () => clearTimeout(timer);
+    }, [api, data, address, channelType, lastSearch, setWarnings]);
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(TextField$1, { disabled: addressIsSaved, sx: style$2.addressField, size: "small", label: channelType === Channels.ChannelType.WHATSAPP || channelType === Channels.ChannelType.RCS
+                ? t
+                    ? t('global.number')
+                    : 'Number'
+                : t
+                    ? t('global.email')
+                    : 'Email', value: address, onChange: (e) => {
+                onChange(e, id, channelType);
+            }, variant: "outlined", fullWidth: true, InputLabelProps: {
+                shrink: true,
+            }, className: "contacts-smallInput", InputProps: {
+                endAdornment: (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(StatusAdornment, { status: adornmentStatus }) })),
+            } }) }));
+};
+
+const style$1 = {
+    addressField: {
+    // width: '35%',
+    },
+};
+
+const PhoneInput = ({ data, onChange, setWarnings }) => {
+    const api = useEditContactApi();
+    const t = useTranslationContext();
+    const { id, channelType, address } = data;
+    const [adornmentStatus, setAdornmentStatus] = useState('idle');
+    const [lastSearch, setLastSearch] = useState(address);
+    const addressIsSaved = !data.hasOwnProperty('isSaved');
+    useEffect(() => {
+        let timer = setTimeout(async () => {
+            if (address !== '' && address !== lastSearch) {
+                if (!api) {
+                    return;
+                }
+                setAdornmentStatus('loading');
+                setLastSearch(address);
+                const checkContactAddressData = {
+                    address,
+                    type: channelType,
+                };
+                try {
+                    const { success, warnings } = await api.checkContactAddress({
+                        data: checkContactAddressData,
+                    });
+                    setWarnings(warnings);
+                    success ? setAdornmentStatus('available') : setAdornmentStatus('unavailable');
+                }
+                catch {
+                    setWarnings([]);
+                    setAdornmentStatus('unavailable');
+                }
+            }
+        }, 1700);
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(TextField$1, { disabled: addressIsSaved, sx: style$1.addressField, size: "small", label: t('global.number'), value: address, onChange: (e) => {
+                onChange(e, id, channelType);
+            }, variant: "outlined", fullWidth: true, InputLabelProps: {
+                shrink: true,
+            }, className: "contacts-smallInput", InputProps: {
+                endAdornment: (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(StatusAdornment, { status: adornmentStatus }) })),
+            } }) }));
+};
+
+const style = {
+    secondaryContainer: {
+        display: 'flex',
+        alignItems: 'baseline',
+        height: '100%',
+        gap: 0.5,
+    },
+    icon: { height: 15 },
+    chip: {
+        borderRadius: '6px',
+        height: '22px'
+    }
+};
+
+var Warning$1 = {};
+
+var _interopRequireDefault = interopRequireDefaultExports;
+Object.defineProperty(Warning$1, "__esModule", {
+  value: true
+});
+var default_1 = Warning$1.default = void 0;
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+var _jsxRuntime = jsxRuntimeExports;
+default_1 = Warning$1.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
+}), 'Warning');
+
+const Warning = ({ text }) => {
+    return (jsxRuntimeExports.jsx(Grid, { item: true, children: jsxRuntimeExports.jsx(Box$2, { sx: style.secondaryContainer, children: jsxRuntimeExports.jsx(Chip$1, { icon: jsxRuntimeExports.jsx(default_1, { sx: style.icon }), sx: style.chip, label: text, color: "error", variant: 'outlined' }) }) }));
+};
+
+const WarningsDisplay = ({ warnings }) => {
+    const t = useTranslationContext();
+    return (jsxRuntimeExports.jsx(Box$2, { children: jsxRuntimeExports.jsx(Grid, { container: true, children: warnings?.map((warning, i) => (jsxRuntimeExports.jsx(Warning, { text: t(`contactAddressError.${warning}`) }, i))) }) }));
+};
+
+const phoneStyle = {
+    numberCountryContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '50%',
+    },
+    warningMessage: {
+        // position: "absolute",
+        // bottom: "-30px",
+        marginTop: "10px"
+    },
+    adressInputBox: {
+        position: "relative",
+        width: "45%"
+    }
+};
+
+const Phone = ({ data }) => {
+    const mode = 'edit';
+    const { editEntity } = useEditEntity();
+    const editEntityActions = editEntity.action;
+    const editEntityState = editEntity.state;
+    const [warnings, setWarnings] = useState([]);
+    const [checked, setChecked] = useState(true);
+    useEffect(() => {
+        setChecked(warnings.length === 0 && (data.address ?? '') !== '');
+    }, [warnings, data.address]);
+    return (jsxRuntimeExports.jsx(InformationItemContainer, { children: jsxRuntimeExports.jsxs(InformationItemInputsContainer, { children: [jsxRuntimeExports.jsxs(Box$2, { sx: { ...phoneStyle.numberCountryContainer, flexDirection: 'column' }, children: [jsxRuntimeExports.jsx(PhoneInput, { data: data, setWarnings: setWarnings, onChange: editEntityActions.handleAddressFieldChange }), warnings.length > 0 && jsxRuntimeExports.jsx(WarningsDisplay, { warnings: warnings })] }), jsxRuntimeExports.jsx(NoteDeleteButton, { mode: mode, addressData: data, handleNoteFieldChange: editEntityActions.handleNoteFieldChange, handleDeleteAddress: editEntityActions.handleDeleteAddress, isDeletingAddress: editEntityState.isDeletingAddress, replaceAddress: editEntityActions.replaceAddress, addWhatsappVerified: editEntityActions.addWhatsappVerified, checked: checked })] }) }));
+};
+
+const Body$3 = ({ phoneNumbers }) => {
+    return (jsxRuntimeExports.jsx(SubsectionBodyContainer, { variant: "large", children: phoneNumbers?.map((phone) => (jsxRuntimeExports.jsx(Phone, { data: phone }, phone.id))) }));
+};
+
+const Phones = ({ phoneNumbers, handleAdd }) => {
+    const t = useTranslationContext();
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsx(SubsectionHeaderWithButton, { handleAdd: handleAdd, title: t('global.phones') }), jsxRuntimeExports.jsx(Body$3, { phoneNumbers: phoneNumbers })] }));
+};
+
+const mailStyle$2 = {
+    emailField: {
+        width: '60%',
+    },
+    numberCountryContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '50%',
+    },
+    warningMessage: {
+        position: "absolute",
+        bottom: "-30px"
+    },
+    adressInputBox: {
+        position: "relative",
+        width: "60%"
+    }
+};
+
+const Mail = ({ data }) => {
+    const mode = 'edit';
+    const { editEntity } = useEditEntity();
+    const editEntityActions = editEntity.action;
+    const editEntityState = editEntity.state;
+    const [warnings, setWarnings] = useState([]);
+    return (jsxRuntimeExports.jsxs(InformationItemContainer, { children: [jsxRuntimeExports.jsxs(InformationItemInputsContainer, { children: [jsxRuntimeExports.jsx(Box$2, { sx: mailStyle$2.numberCountryContainer, children: jsxRuntimeExports.jsx(Box$2, { sx: mailStyle$2.adressInputBox, children: jsxRuntimeExports.jsx(AddressInput, { data: data, setWarnings: setWarnings, onChange: editEntityActions.handleAddressFieldChange }) }) }), jsxRuntimeExports.jsx(NoteDeleteButton, { mode: mode, addressData: data, handleNoteFieldChange: editEntityActions.handleNoteFieldChange, handleDeleteAddress: editEntityActions.handleDeleteAddress, isDeletingAddress: editEntityState.isDeletingAddress, replaceAddress: editEntityActions.replaceAddress })] }), warnings.length > 0 && jsxRuntimeExports.jsx(WarningsDisplay, { warnings: warnings })] }));
+};
+
+const Body$2 = ({ emails }) => {
+    return (jsxRuntimeExports.jsx(SubsectionBodyContainer, { variant: "large", children: emails?.map((email) => (jsxRuntimeExports.jsx(Mail, { data: email }, email.id))) }));
+};
+
+const Mails = ({ emails, handleAdd }) => {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsx(SubsectionHeaderWithButton, { handleAdd: handleAdd, title: 'Emails' }), jsxRuntimeExports.jsx(Body$2, { emails: emails })] }));
+};
+
+const mailStyle$1 = {
+    emailField: {
+        width: '60%',
+    },
+    numberCountryContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '50%',
+    },
+    warningMessage: {
+        position: "absolute",
+        bottom: "-30px"
+    },
+    adressInputBox: {
+        position: "relative",
+        width: "60%"
+    }
+};
+
+const Whatsapp = ({ data }) => {
+    const mode = 'edit';
+    const { editEntity } = useEditEntity();
+    const editEntityActions = editEntity.action;
+    const editEntityState = editEntity.state;
+    const [warnings, setWarnings] = useState([]);
+    return (jsxRuntimeExports.jsxs(InformationItemContainer, { children: [jsxRuntimeExports.jsxs(InformationItemInputsContainer, { children: [jsxRuntimeExports.jsx(Box$2, { sx: mailStyle$1.numberCountryContainer, children: jsxRuntimeExports.jsx(Box$2, { sx: mailStyle$1.adressInputBox, children: jsxRuntimeExports.jsx(AddressInput, { data: data, setWarnings: setWarnings, onChange: editEntityActions.handleAddressFieldChange }) }) }), jsxRuntimeExports.jsx(NoteDeleteButton, { mode: mode, addressData: data, handleNoteFieldChange: editEntityActions.handleNoteFieldChange, handleDeleteAddress: editEntityActions.handleDeleteAddress, isDeletingAddress: editEntityState.isDeletingAddress, replaceAddress: editEntityActions.replaceAddress })] }), warnings.length > 0 && jsxRuntimeExports.jsx(WarningsDisplay, { warnings: warnings })] }));
+};
+
+const Body$1 = ({ whatsapps }) => {
+    return (jsxRuntimeExports.jsx(SubsectionBodyContainer, { variant: "large", children: whatsapps?.map((whatsapp) => (jsxRuntimeExports.jsx(Whatsapp, { data: whatsapp }, whatsapp.id))) }));
+};
+
+const Whatsapps = ({ whatsapps, handleAdd }) => {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsx(SubsectionHeaderWithButton, { handleAdd: handleAdd, title: 'WhatsApp' }), jsxRuntimeExports.jsx(Body$1, { whatsapps: whatsapps })] }));
+};
+
+const mailStyle = {
+    emailField: {
+        width: '60%',
+    },
+    numberCountryContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '50%',
+    },
+    warningMessage: {
+        position: "absolute",
+        bottom: "-30px"
+    },
+    adressInputBox: {
+        position: "relative",
+        width: "60%"
+    }
+};
+
+const RCS = ({ data }) => {
+    const mode = 'edit';
+    const { editEntity } = useEditEntity();
+    const editEntityActions = editEntity.action;
+    const editEntityState = editEntity.state;
+    const [warnings, setWarnings] = useState([]);
+    return (jsxRuntimeExports.jsxs(InformationItemContainer, { children: [jsxRuntimeExports.jsxs(InformationItemInputsContainer, { children: [jsxRuntimeExports.jsx(Box$2, { sx: mailStyle.numberCountryContainer, children: jsxRuntimeExports.jsx(Box$2, { sx: mailStyle.adressInputBox, children: jsxRuntimeExports.jsx(AddressInput, { data: data, setWarnings: setWarnings, onChange: editEntityActions.handleAddressFieldChange }) }) }), jsxRuntimeExports.jsx(NoteDeleteButton, { mode: mode, addressData: data, handleNoteFieldChange: editEntityActions.handleNoteFieldChange, handleDeleteAddress: editEntityActions.handleDeleteAddress, isDeletingAddress: editEntityState.isDeletingAddress, replaceAddress: editEntityActions.replaceAddress })] }), warnings.length > 0 && jsxRuntimeExports.jsx(WarningsDisplay, { warnings: warnings })] }));
+};
+
+const Body = ({ RCSs }) => {
+    return (jsxRuntimeExports.jsx(SubsectionBodyContainer, { variant: "large", children: RCSs?.map((data) => (jsxRuntimeExports.jsx(RCS, { data: data }, data.id))) }));
+};
+
+const RCSs = ({ RCSs, handleAdd }) => {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsx(SubsectionHeaderWithButton, { handleAdd: handleAdd, title: 'RCS' }), jsxRuntimeExports.jsx(Body, { RCSs: RCSs })] }));
+};
+
+const StyledModalContent = styled$1(Box$2)(({ theme }) => ({
     position: 'absolute',
     top: '50%',
     left: '50%',
@@ -56161,35 +56914,84 @@ styled$1(Box$2)(({ theme }) => ({
     padding: theme.spacing(4),
     borderRadius: theme.shape.borderRadius,
 }));
+const EditModal = ({ open, onClose, title }) => {
+    const t = useTranslationContext();
+    const { editEntity } = useEditEntity();
+    const { emails, phoneNumbers, imsWhatsapp, imsRCS } = editEntity.field;
+    const { addEmail, addPhone, addWhatsapp, resetToInitialContactInformation, addRCS } = editEntity.action;
+    function handleClose() {
+        onClose();
+        resetToInitialContactInformation();
+    }
+    const renderContent = () => {
+        switch (title) {
+            case 'Phones':
+                return jsxRuntimeExports.jsx(Phones, { handleAdd: addPhone, phoneNumbers: phoneNumbers });
+            case 'Emails':
+                return jsxRuntimeExports.jsx(Mails, { handleAdd: addEmail, emails: emails });
+            case 'Whatsapp':
+                return jsxRuntimeExports.jsx(Whatsapps, { handleAdd: addWhatsapp, whatsapps: imsWhatsapp });
+            case 'RCS':
+                return jsxRuntimeExports.jsx(RCSs, { handleAdd: addRCS, RCSs: imsRCS });
+            case 'Facebook':
+                return (jsxRuntimeExports.jsx(InformationSocialNetworkItem, { title: 'Facebook', IMSs: editEntity.field.imsFacebooks, editEntity: editEntity }));
+            case 'Webchat':
+                return (jsxRuntimeExports.jsx(InformationSocialNetworkItem, { title: 'Webchat', IMSs: editEntity.field.imsWebchats, editEntity: editEntity }));
+            case 'Instagram':
+                return (jsxRuntimeExports.jsx(InformationSocialNetworkItem, { title: 'Instagram', IMSs: editEntity.field.imsInstagrams, editEntity: editEntity }));
+            case 'Mercado libre':
+                return (jsxRuntimeExports.jsx(InformationSocialNetworkItem, { title: 'Mercado Libre', IMSs: editEntity.field.imsMercadolibre, editEntity: editEntity }));
+            default:
+                return jsxRuntimeExports.jsx(Typography$2, { children: "No information available for this section." });
+        }
+    };
+    return (jsxRuntimeExports.jsx(Modal$2, { open: open, onClose: onClose, children: jsxRuntimeExports.jsxs(StyledModalContent, { children: [renderContent(), jsxRuntimeExports.jsx(Box$2, { mt: 2, display: 'flex', justifyContent: 'flex-end', children: jsxRuntimeExports.jsx(Button$2, { variant: "contained", color: "primary", onClick: handleClose, children: t('global.close') }) })] }) }));
+};
+
+const ContactInformation = ({ ownerData }) => {
+    const { isOpen, title, openModal, closeModal } = useEditModal();
+    const { editEntity } = useEditEntity();
+    const t = useTranslationContext();
+    const phones = editEntity.field.phoneNumbers;
+    const emails = editEntity.field.emails;
+    const facebook = editEntity.field.imsFacebooks;
+    const whatsapp = editEntity.field.imsWhatsapp;
+    const mercadolibre = editEntity.field.imsMercadolibre;
+    const webchat = editEntity.field.imsWebchats;
+    const instagram = editEntity.field.imsInstagrams;
+    const rcs = editEntity.field.imsRCS;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Section, { title: "Contact Information", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Phones'), title: t('contactDetails.phones'), methodItems: phones, isPhone: true, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Emails'), title: t('Emails'), methodItems: emails, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Facebook'), title: t('Facebook'), methodItems: facebook, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Whatsapp'), title: t('Whatsapp'), methodItems: whatsapp, owner: ownerData }), rcs.length > 0 ? (jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('RCS'), title: t('RCS'), methodItems: rcs, owner: ownerData })) : null, jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Mercado libre'), title: t('Mercado libre'), methodItems: mercadolibre, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Webchat'), title: t('Webchat'), methodItems: webchat, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Instagram'), title: t('Instagram'), methodItems: instagram, owner: ownerData })] }) }), jsxRuntimeExports.jsx(EditModal, { open: isOpen, onClose: closeModal, title: title })] }));
+};
 
-const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, t, onEntityUpdated, }) => {
+const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntityUpdated, }) => {
     const commonProps = {
         baseUrl,
         spaceId,
         entityId: String(entityData.id),
         onEntityUpdated,
     };
+    const t = useTranslationContext();
     const maybeTitle = t('contactDetails.addressInformation');
     const sectionTitle = maybeTitle === 'contactDetails.addressInformation' ? 'Address Information' : maybeTitle;
-    return (jsxRuntimeExports.jsx(Section, { title: sectionTitle, children: jsxRuntimeExports.jsx(SectionContent, { children: entityType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.street'), value: entityData.address1?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
+    return (jsxRuntimeExports.jsx(Section, { title: sectionTitle, children: jsxRuntimeExports.jsx(SectionContent, { children: entityType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.street'), value: entityData.address1?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address2: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.city'), value: entityData.address1?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.city'), value: entityData.address1?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.anotherCity'), value: entityData.address2?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherCity'), value: entityData.address2?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address2: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.state'), value: entityData.address1?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.state'), value: entityData.address1?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.anotherState'), value: entityData.address2?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherState'), value: entityData.address2?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address2: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.postcode'), value: entityData.address1?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.postcode'), value: entityData.address1?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.anotherPostcode'), value: entityData.address2?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherPostcode'), value: entityData.address2?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address2: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.country'), value: entityData.address1?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.country'), value: entityData.address1?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { country: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", t: t, title: t('contactDetails.anotherCountry'), value: entityData.address2?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherCountry'), value: entityData.address2?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address2: { country: value },
                         }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.street'), value: entityData.address1?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { street: value },
@@ -56214,100 +57016,97 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, t, onEnt
                         }) })] })) }) }));
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }) => {
-    const api = useMemo(() => {
-        if (!baseUrl || !spaceId)
-            return null;
-        return createEditContactApi(baseUrl, spaceId);
-    }, [baseUrl, spaceId]);
-    const { state, selectors, actions } = useEditContactModalController({
-        open,
-        baseUrl,
-        spaceId,
-        contactId,
-    });
-    const [view, setView] = useState("main");
+const useEntityUpdateSync = ({ entity, setEntity }) => {
+    const handleEntityUpdated = useCallback((update) => {
+        if (!update || typeof update !== 'object') {
+            return;
+        }
+        const updateObj = update;
+        if ('id' in updateObj) {
+            // Full entity replacement
+            setEntity(update);
+            return;
+        }
+        if (!entity) {
+            return;
+        }
+        // Shallow merge partial updates into existing entity
+        const merged = { ...entity, ...updateObj };
+        setEntity(merged);
+    }, [entity, setEntity]);
+    return handleEntityUpdated;
+};
+
+const useTagsEditorController = ({ open, baseUrl, spaceId, contactData, contactType, labels, selectedTags, onTagsUpdated, }) => {
+    const [view, setView] = useState('main');
     const [draftLabels, setDraftLabels] = useState([]);
     const [tagsEditorInitialized, setTagsEditorInitialized] = useState(false);
-    const [isSavingTags, setIsSavingTags] = useState(false);
-    const resetModalState = useCallback(() => {
+    const [isSaving, setIsSaving] = useState(false);
+    const reset = useCallback(() => {
         setView('main');
         setDraftLabels([]);
         setTagsEditorInitialized(false);
-        setIsSavingTags(false);
+        setIsSaving(false);
     }, []);
-    const handleEntityUpdated = useCallback((entity) => {
-        if (!entity || typeof entity !== 'object')
-            return;
-        const hasId = 'id' in entity;
-        if (hasId) {
-            actions.setContactData(entity);
-            return;
-        }
-        if (state.contactData) {
-            actions.setContactData({ ...state.contactData, ...entity });
-        }
-    }, [actions, state.contactData]);
-    const image = useImage({
-        baseUrl,
-        spaceId,
-        entityType: selectors.contactType === 'business' || selectors.contactType === 'contact'
-            ? selectors.contactType
-            : undefined,
-        entityId: state.contactData ? String(state.contactData.id) : undefined,
-        initialImageUrl: state.contactData?.imageUrl,
-        onEntityUpdated: handleEntityUpdated,
-    });
     useEffect(() => {
         if (!open) {
-            resetModalState();
+            reset();
+        }
+    }, [open, reset]);
+    useEffect(() => {
+        if (view !== 'tags') {
+            setTagsEditorInitialized(false);
+            return;
         }
-    }, [open, resetModalState]);
-    const handleSaveTags = async () => {
-        if (isSavingTags)
+        if (tagsEditorInitialized)
             return;
-        if (!baseUrl)
+        if (!labels.length)
             return;
-        if (!spaceId)
+        const selectedTagIds = new Set(selectedTags.map((t) => String(t.id)));
+        const initialDraft = labels.filter((l) => selectedTagIds.has(String(l?.id)));
+        setDraftLabels(initialDraft);
+        setTagsEditorInitialized(true);
+    }, [view, tagsEditorInitialized, labels, selectedTags]);
+    const handleSaveTags = useCallback(async () => {
+        if (isSaving)
             return;
-        if (!state.contactData)
+        if (!baseUrl || !spaceId)
+            return;
+        if (!contactData)
             return;
-        if (selectors.contactType !== 'business' && selectors.contactType !== 'contact')
+        if (contactType !== 'contact' && contactType !== 'business')
             return;
         const tags = draftLabels
             .filter((l) => l?.id && l?.name)
             .map((l) => ({ id: String(l.id), name: String(l.name) }));
-        setIsSavingTags(true);
+        setIsSaving(true);
         try {
             await updateEntity({
                 baseUrl,
                 spaceId,
-                entityType: selectors.contactType,
-                entityId: String(state.contactData.id),
+                entityType: contactType,
+                entityId: String(contactData.id),
                 body: { tags },
             });
-            actions.setContactData({ ...state.contactData, tags });
+            onTagsUpdated(tags);
             setView('main');
         }
         finally {
-            setIsSavingTags(false);
+            setIsSaving(false);
         }
+    }, [isSaving, baseUrl, spaceId, contactData, contactType, draftLabels, onTagsUpdated]);
+    return {
+        view,
+        setView,
+        draftLabels,
+        setDraftLabels,
+        isSaving,
+        handleSaveTags,
     };
-    useEffect(() => {
-        if (view !== 'tags') {
-            setTagsEditorInitialized(false);
-            return;
-        }
-        if (tagsEditorInitialized)
-            return;
-        if (!selectors.labels.length)
-            return;
-        const selectedTagIds = new Set(selectors.tags.map((t) => String(t.id)));
-        const initialSelectedLabels = selectors.labels.filter((l) => selectedTagIds.has(String(l?.id)));
-        setDraftLabels(initialSelectedLabels);
-        setTagsEditorInitialized(true);
-    }, [view, tagsEditorInitialized, selectors.labels, selectors.tags]);
-    const handleClose = (event, reason) => {
+};
+
+const useModalCloseHandler = ({ onClose }) => {
+    const handleClose = useCallback((event, reason) => {
         if (reason === 'escapeKeyDown') {
             const maybeEvent = event;
             if (typeof maybeEvent?.stopPropagation === 'function') {
@@ -56318,7 +57117,51 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }
             }
         }
         onClose();
-    };
+    }, [onClose]);
+    return handleClose;
+};
+
+const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t }) => {
+    const api = useMemo(() => {
+        if (!baseUrl || !spaceId)
+            return null;
+        return createEditContactApi(baseUrl, spaceId);
+    }, [baseUrl, spaceId]);
+    const { state, selectors, actions } = useEditContactModalController({
+        open,
+        baseUrl,
+        spaceId,
+        contactId,
+    });
+    const handleEntityUpdated = useEntityUpdateSync({
+        entity: state.contactData,
+        setEntity: (next) => actions.setContactData(next ?? undefined),
+    });
+    const { view, setView, draftLabels, setDraftLabels, isSaving: isSavingTags, handleSaveTags, } = useTagsEditorController({
+        open,
+        baseUrl,
+        spaceId,
+        contactData: state.contactData,
+        contactType: selectors.contactType,
+        labels: selectors.labels,
+        selectedTags: selectors.tags,
+        onTagsUpdated: (tags) => {
+            if (!state.contactData)
+                return;
+            actions.setContactData({ ...state.contactData, tags });
+        },
+    });
+    const image = useImage({
+        baseUrl,
+        spaceId,
+        entityType: selectors.contactType === 'business' || selectors.contactType === 'contact'
+            ? selectors.contactType
+            : undefined,
+        entityId: state.contactData ? String(state.contactData.id) : undefined,
+        initialImageUrl: state.contactData?.imageUrl,
+        onEntityUpdated: handleEntityUpdated,
+    });
+    const handleClose = useModalCloseHandler({ onClose });
     const baseSx = {
         position: 'absolute',
         top: '50%',
@@ -56333,23 +57176,21 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }
         p: 3,
         overflow: 'hidden',
     };
-    const mergedSx = Array.isArray(sx)
-        ? [baseSx, ...sx]
-        : sx
-            ? [baseSx, sx]
-            : baseSx;
-    return (jsxRuntimeExports.jsx(EditContactApiProvider, { value: api, children: jsxRuntimeExports.jsx(Modal$2, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: Backdrop$2 }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(Fade$2, { in: open, timeout: 200, children: jsxRuntimeExports.jsx(Box$2, { sx: mergedSx, children: 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, t: t, 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 }), 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, t: t, 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, t: t }), jsxRuntimeExports.jsx(Section, { title: "Contact Information", children: "C" })] })] }) }), 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: selectors.labels, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, t: t }) }) })] }) })) : null }) }) }) }));
+    const mergedSx = Array.isArray(sx) ? [baseSx, ...sx] : sx ? [baseSx, sx] : baseSx;
+    return (jsxRuntimeExports.jsx(EditContactApiProvider, { value: api, children: jsxRuntimeExports.jsx(TranslationProvider, { t: t, children: jsxRuntimeExports.jsx(Modal$2, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: Backdrop$2 }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(Fade$2, { in: open, timeout: 200, children: jsxRuntimeExports.jsx(Box$2, { sx: mergedSx, children: 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 }), 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: selectors.labels, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags }) }) })] }) })) : null }) }) }) }) }));
 };
 
 export { ContactInfoPopup, EditContactModal };