@trii/components 2.0.39 → 2.0.43

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { useCallback, useEffect, createContext, useContext, useState, useMemo, Children, isValidElement, cloneElement, useRef } from 'react';
-import { styled as styled$5, Box as Box$2, IconButton as IconButton$2, Avatar, Typography as Typography$2, CircularProgress as CircularProgress$2, Tooltip, Chip as Chip$2, Popper as Popper$2, ClickAwayListener, CardContent, Stack as Stack$2, Popover as Popover$2, 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 { styled as styled$5, Box as Box$2, IconButton as IconButton$2, Avatar, Typography as Typography$2, CircularProgress as CircularProgress$2, Tooltip, Chip as Chip$2, Popper as Popper$2, ClickAwayListener, CardContent, Stack as Stack$2, Popover as Popover$2, TextField as TextField$1, Autocomplete, Divider, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Button as Button$2, Menu as Menu$2, ListItemIcon, ListItemText, Modal as Modal$2, Grid, Backdrop as Backdrop$2, Fade as Fade$2 } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
@@ -8998,6 +8998,10 @@ var utils = /*#__PURE__*/Object.freeze({
 	useIsFocusVisible: useIsFocusVisible
 });
 
+var Edit$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.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 Email$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"
 }), 'Email');
@@ -9020,6 +9024,10 @@ 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 Save$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.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');
+
 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');
@@ -9188,7 +9196,7 @@ const TitleBox = styled$5(Box$2)({
     width: '100%',
     borderBottom: `1px solid lightgray`,
 });
-const StyledBox$2 = styled$5(Box$2)({
+const StyledBox$3 = styled$5(Box$2)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -9229,7 +9237,7 @@ const NoteText$2 = styled$5(Typography$2)({
     left: 40,
 });
 const ContactMethod$1 = ({ icon, contactList, title, showTitle = true, }) => {
-    const renderContactInfo = (contact) => (jsxRuntimeExports.jsx(StyledBox$2, { 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 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',
@@ -15376,22 +15384,20 @@ default_1$e = Label.default = (0, _createSvgIcon$d.default)( /*#__PURE__*/(0, _j
   d: "M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12z"
 }), 'Label');
 
-const noop$3 = (key) => key;
-const TranslationContext = createContext(noop$3);
+const noop$4 = (key) => key;
+const TranslationContext = createContext(noop$4);
 const TranslationProvider = ({ t, children }) => {
-    console.log('[TranslationProvider] t fn:', t?.name || 'anonymous', t);
     return jsxRuntimeExports.jsx(TranslationContext.Provider, { value: t, children: children });
 };
 const useTranslationContext = () => {
     const t = useContext(TranslationContext);
     if (!t) {
         console.warn('[useTranslationContext] using noop, context value is falsy');
-        return noop$3;
+        return noop$4;
     }
     return (...args) => {
         const [key, ...rest] = args;
         const result = t(key, ...rest);
-        console.log('[useTranslationContext] key:', key, 'args:', rest, 'result:', result);
         return result;
     };
 };
@@ -15451,6 +15457,87 @@ const Tags = ({ tags, onEditTags }) => {
                                 } }, tag.id))) })] }) })] }));
 };
 
+const EditContactApiContext = createContext(null);
+const EditContactApiProvider = EditContactApiContext.Provider;
+const useEditContactApi = () => {
+    return useContext(EditContactApiContext);
+};
+
+const NameText = styled$5(Typography$2)({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: 360,
+    textAlign: 'center',
+});
+const NameWrapper = styled$5(Box$2)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    width: '100%',
+    '&:hover .edit-icon': {
+        opacity: 1,
+        visibility: 'visible',
+    },
+});
+const EditButton = styled$5(IconButton$2)({
+    opacity: 0,
+    visibility: 'hidden',
+    transition: 'all 0.2s',
+});
+const ContactName = ({ displayName, contactType, firstName, lastName, name, entityId, onEntityUpdated, }) => {
+    const api = useEditContactApi();
+    const [isEditing, setIsEditing] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [values, setValues] = useState({
+        firstName: firstName || '',
+        lastName: lastName || '',
+        name: name || '',
+    });
+    useEffect(() => {
+        setValues({
+            firstName: firstName || '',
+            lastName: lastName || '',
+            name: name || '',
+        });
+    }, [firstName, lastName, name]);
+    const handleSave = async () => {
+        if (!api || !entityId || !contactType || contactType === 'unknown')
+            return;
+        setLoading(true);
+        try {
+            let body = {};
+            if (contactType === 'contact') {
+                body = { firstName: values.firstName, lastName: values.lastName };
+            }
+            else if (contactType === 'business') {
+                body = { name: values.name };
+            }
+            const updated = await api.updateEntity({
+                entityType: contactType,
+                entityId,
+                body,
+            });
+            if (updated && onEntityUpdated) {
+                onEntityUpdated(updated);
+            }
+            setIsEditing(false);
+        }
+        catch (err) {
+            console.error('Failed to update name', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const showEdit = contactType === 'contact' || contactType === 'business';
+    if (isEditing) {
+        return (jsxRuntimeExports.jsxs(Box$2, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 1 }, children: [contactType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField$1, { value: values.firstName, onChange: (e) => setValues({ ...values, firstName: e.target.value }), size: "small", placeholder: "First Name", sx: { width: 140 } }), jsxRuntimeExports.jsx(TextField$1, { value: values.lastName, onChange: (e) => setValues({ ...values, lastName: e.target.value }), size: "small", placeholder: "Last Name", sx: { width: 140 } })] })) : (jsxRuntimeExports.jsx(TextField$1, { value: values.name, onChange: (e) => setValues({ ...values, name: e.target.value }), size: "small", placeholder: "Name", sx: { width: 280 } })), jsxRuntimeExports.jsx(IconButton$2, { onClick: handleSave, disabled: loading, color: "primary", children: loading ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(Save$1, {}) })] }));
+    }
+    return (jsxRuntimeExports.jsxs(NameWrapper, { children: [jsxRuntimeExports.jsx(NameText, { variant: "h6", title: displayName, children: displayName }), showEdit && (jsxRuntimeExports.jsx(EditButton, { size: "small", onClick: () => setIsEditing(true), className: "edit-icon", children: jsxRuntimeExports.jsx(Edit$1, { fontSize: "small" }) }))] }));
+};
+
 var Delete = {};
 
 var _interopRequireDefault$c = interopRequireDefaultExports;
@@ -15526,16 +15613,9 @@ const HeaderContainer = styled$5(Box$2)({
     marginBottom: '20px',
     position: 'relative',
 });
-const ContactName = styled$5(Typography$2)({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    maxWidth: 360,
-    textAlign: 'center',
-});
-const Header = ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
+const Header = ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, contactType, firstName, lastName, name, entityId, onEntityUpdated, }) => {
     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 }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName }), jsxRuntimeExports.jsx(Tags, { tags: tags, 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, { displayName: displayName, contactType: contactType, firstName: firstName, lastName: lastName, name: name, entityId: entityId, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(Tags, { tags: tags, onEditTags: onEditTags })] }));
 };
 
 var ArrowBack = {};
@@ -19655,7 +19735,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
   onExited: PropTypes.func
 } : {}; // Name the function so it is clearer in the documentation
 
-function noop$2() {}
+function noop$3() {}
 
 Transition.defaultProps = {
   in: false,
@@ -19664,12 +19744,12 @@ Transition.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  onEnter: noop$2,
-  onEntering: noop$2,
-  onEntered: noop$2,
-  onExit: noop$2,
-  onExiting: noop$2,
-  onExited: noop$2
+  onEnter: noop$3,
+  onEntering: noop$3,
+  onEntered: noop$3,
+  onExit: noop$3,
+  onExiting: noop$3,
+  onExited: noop$3
 };
 Transition.UNMOUNTED = UNMOUNTED;
 Transition.EXITED = EXITED;
@@ -26306,12 +26386,6 @@ const useEditEntity = () => {
     return ctx;
 };
 
-const EditContactApiContext = createContext(null);
-const EditContactApiProvider = EditContactApiContext.Provider;
-const useEditContactApi = () => {
-    return useContext(EditContactApiContext);
-};
-
 const resolveUserLabel = ({ userId, users, currentUser, }) => {
     if (!userId)
         return null;
@@ -32650,7 +32724,7 @@ const PickersDayFiller = styled$3('div', {
   opacity: 0,
   pointerEvents: 'none'
 }));
-const noop$1 = () => {};
+const noop$2 = () => {};
 const PickersDayRaw = /*#__PURE__*/React$1.forwardRef(function PickersDay(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
@@ -32663,11 +32737,11 @@ const PickersDayRaw = /*#__PURE__*/React$1.forwardRef(function PickersDay(inProp
       isAnimating,
       onClick,
       onDaySelect,
-      onFocus = noop$1,
-      onBlur = noop$1,
-      onKeyDown = noop$1,
-      onMouseDown = noop$1,
-      onMouseEnter = noop$1,
+      onFocus = noop$2,
+      onBlur = noop$2,
+      onKeyDown = noop$2,
+      onMouseDown = noop$2,
+      onMouseEnter = noop$2,
       children,
       day,
       selected,
@@ -43162,7 +43236,7 @@ const _excluded$y = ["enableAccessibleFieldDOMStructure"],
   _excluded6 = ["ownerState"],
   _excluded7 = ["ownerState"],
   _excluded8 = ["InputProps", "inputProps"];
-const noop = () => {};
+const noop$1 = () => {};
 const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -43179,7 +43253,7 @@ const cleanFieldResponse = _ref => {
         openPickerAriaLabel
       } = fieldResponse,
       other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2$6);
-    const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop;
+    const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop$1;
     return {
       clearable,
       onClear,
@@ -43214,8 +43288,8 @@ const cleanFieldResponse = _ref => {
       openPickerAriaLabel
     } = fieldResponse,
     other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
-  const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop;
-  const mergedHtmlInputProps = major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps$1(other?.slotProps?.htmlInput, inputProps) : noop;
+  const mergedInputProps = major >= 6 && other?.slotProps?.input ? mergeSlotProps$1(other?.slotProps?.input, InputProps) : noop$1;
+  const mergedHtmlInputProps = major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps$1(other?.slotProps?.htmlInput, inputProps) : noop$1;
   return {
     clearable,
     onClear,
@@ -52433,9 +52507,59 @@ default_1$8 = Cancel.default = (0, _createSvgIcon$8.default)( /*#__PURE__*/(0, _
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
 }), 'Cancel');
 
+const noop = () => { };
+const NavigateContext = createContext(noop);
+const NavigateProvider = ({ navigate, children }) => {
+    return jsxRuntimeExports.jsx(NavigateContext.Provider, { value: navigate, children: children });
+};
+const useNavigateContext = () => {
+    const navigate = useContext(NavigateContext);
+    if (!navigate) {
+        console.warn('[useNavigateContext] using noop, context value is falsy');
+        return noop;
+    }
+    return navigate;
+};
+
+function SelectBusinessLabel({ value, displayValue, businessId }) {
+    const api = useEditContactApi();
+    const navigate = useNavigateContext();
+    const [businessData, setBusinessData] = useState(null);
+    const userImage = useImage({
+        initialImageUrl: businessData?.imageUrl,
+        entityType: 'business',
+        entityId: businessId,
+    });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [isLoadingData, setIsLoadingData] = useState(false);
+    const handleOpenInfoPopover = async (event) => {
+        // Store the target element before any async operations
+        const targetElement = event.currentTarget;
+        setIsLoadingData(true);
+        if (!api) {
+            console.error('API is null');
+            return;
+        }
+        const response = await api.fetchContact({ contactId: businessId });
+        if (response && isBusiness(response)) {
+            setBusinessData(response);
+        }
+        setIsLoadingData(false);
+        if (!targetElement) {
+            console.error('Target element is null');
+            return;
+        }
+        setAnchorEl(targetElement);
+    };
+    return (jsxRuntimeExports.jsxs(Box$2, { display: "flex", alignItems: "center", children: [jsxRuntimeExports.jsx(Typography$2, { onClick: handleOpenInfoPopover, fontWeight: '600', sx: {
+                    padding: 1,
+                    cursor: 'pointer',
+                }, color: (theme) => theme.palette.text.primary, children: displayValue || (typeof value === 'string' && value) || '-' }), businessData && (jsxRuntimeExports.jsx(ContactInfoPopup, { contactData: businessData, open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), navigate: navigate, avatarImgUrl: userImage.imageUrl })), isLoadingData && (jsxRuntimeExports.jsx(Box$2, { display: "flex", alignItems: "center", justifyContent: "center", p: 1, children: jsxRuntimeExports.jsx(CircularProgress$2, { size: 20 }) }))] }));
+}
+
 const isUserInfo = (option) => 'email' in option;
 const isContactBirthdayProps = (p) => p.entityType === 'contact' && p.inputType === 'birthday';
-const StyledIconButton$2 = styled$5(IconButton$2)({
+const StyledIconButton$3 = styled$5(IconButton$2)({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -52451,7 +52575,7 @@ const StyledSaveCancelButton$1 = styled$5(IconButton$2)({
     },
 });
 const EntityInfoLabel = (props) => {
-    const { title, value, isNotEditable, displayValue, baseUrl, spaceId, minWidth, onEntityUpdated, } = props;
+    const { title, value, isNotEditable, displayValue, baseUrl, spaceId, minWidth, onEntityUpdated } = props;
     const t = useTranslationContext();
     const inputType = props.inputType ?? 'text';
     const [isEditing, setIsEditing] = useState(false);
@@ -52565,9 +52689,12 @@ 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$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$2, { 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'
+        }, 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('conversations.contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option.id, children: props.entityType === 'contact'
                                 ? option.name?.trim() || (isUserInfo(option) ? option.email : '') || 'Sin nombre'
-                                : option.name?.trim() || option.email || 'Sin nombre' }, index)))] })) : isEditing && isContactBirthdayProps(props) ? (jsxRuntimeExports.jsx(DateSelect, { birthDate: props.contact.field.birthDate, setBirthDate: props.contact.action.setBirthDate, dateFormat: props.dateFormat })) : !isEditing && props.entityType === 'contact' && 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) || '-' })) })] }));
+                                : 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(SelectBusinessLabel, { value: value, displayValue: displayValue, businessId: props.businessId })) : (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) => {
@@ -54373,7 +54500,7 @@ const CustomPropertyDateRangePicker = ({ value, handleChange, userDateFormat })
                 }, value: value || initDates, onChange: (newValue) => handleChange(newValue), format: dateFormat }) }) }));
 };
 
-const StyledIconButton$1 = styled$5(IconButton$2)(() => ({
+const StyledIconButton$2 = styled$5(IconButton$2)(() => ({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -54575,7 +54702,7 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
         else
             return (jsxRuntimeExports.jsx(CustomPropertyInput, { type: type, nameKey: nameKey, value: value, onChange: handleInputChange }));
     };
-    return (jsxRuntimeExports.jsxs(ContactBox, { className: `fadein ${property.type === Contacts.ContactField_type.LONGTEXT ? 'contacts-col-12' : 'contacts-col-5'}`, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: "25px", 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$1, { className: "edit-icon", size: "small", onClick: toggleEdit, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing || property.type === Contacts.ContactField_type.LONGTEXT ? '100%' : '50%', position: "relative", children: isEditing ? (EditField()) : (jsxRuntimeExports.jsx(FieldValue, { children: hasValue(property?.value)
+    return (jsxRuntimeExports.jsxs(ContactBox, { className: `fadein ${property.type === Contacts.ContactField_type.LONGTEXT ? 'contacts-col-12' : 'contacts-col-5'}`, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: "25px", 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') {
@@ -54701,9 +54828,9 @@ const ContactGeneral = (props) => {
         }
         return age;
     };
-    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) => ({
+    return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.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, 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) => ({
+                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.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('conversations.contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.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, 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)))] }) }));
 };
@@ -54778,9 +54905,9 @@ const BusinessGeneral = (props) => {
             controller.abort();
         };
     }, [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) => ({
+    return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('conversations.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, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
+                    }), baseUrl: baseUrl, spaceId: spaceId, businessId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('conversations.contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('conversations.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) => {
@@ -54808,7 +54935,7 @@ const useEditModal = () => {
     return { isOpen, title, openModal, closeModal };
 };
 
-const StyledBox$1 = styled$1(Box$2)(({ theme }) => ({
+const StyledBox$2 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -54875,7 +55002,7 @@ const ContactMethodItem = ({ item }) => {
     const { imageUrl } = useImage({
         initialImageUrl: avatarUrlWithoutAccess,
     });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox$1, { 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: {
+    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',
@@ -56135,7 +56262,7 @@ const formatPhoneForDisplay = (number) => {
     }
 };
 
-const StyledIconButton = styled$1(IconButton$2)(({ theme }) => ({
+const StyledIconButton$1 = styled$1(IconButton$2)(({ theme }) => ({
     padding: theme.spacing(0.5),
     marginTop: '-5px',
 }));
@@ -56144,7 +56271,7 @@ const StyledLocalPhoneIcon = styled$1(default_1$7)(({ theme }) => ({
     width: 16,
     color: theme.palette.secondary.main
 }));
-const StyledBox = styled$1(Box$2)(({ theme }) => ({
+const StyledBox$1 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -56207,7 +56334,7 @@ const ContactMethodPhoneItem = ({ item }) => {
         window.dispatchEvent(event);
     };
     const formattedPhone = useMemo(() => formatPhoneForDisplay(item.address || ''), [item.address]);
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox, { children: [jsxRuntimeExports.jsxs(LeftSection, { children: [jsxRuntimeExports.jsx(StyledIconButton, { 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: {
+    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',
@@ -56218,8 +56345,42 @@ const ContactMethodPhoneItem = ({ item }) => {
                                 } })) }) }) })] }) }));
 };
 
+const StyledBox = styled$5(Box$2)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(1, 0, 2, 0),
+    width: '100%',
+    gap: theme.spacing(1),
+    '&:hover .edit-icon': {
+        opacity: 1,
+    },
+}));
+const StyledTypography = styled$5(Typography$2)(({}) => ({
+    letterSpacing: -0.5,
+    fontSize: 14,
+    fontWeight: 600,
+}));
+const HeaderBox = styled$5(Box$2)(({}) => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+const MethodItemsBox = styled$5(Box$2)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    width: '100%',
+}));
+const StyledIconButton = styled$5(IconButton$2)({
+    opacity: 0,
+    transition: 'opacity 0.3s ease-in-out',
+    '& .MuiSvgIcon-root': {
+        width: '0.8em',
+        height: '0.8em',
+    },
+    marginLeft: '15px',
+});
 const ContactMethod = ({ title, methodItems, isPhone, handleEdit, owner }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: "w-full rounded-xl border border-gray-200 bg-white/60 p-3 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-semibold text-gray-800", children: title }), jsxRuntimeExports.jsx(IconButton$2, { "aria-label": `Edit ${title}`, size: "small", onClick: handleEdit, className: "edit-icon text-gray-500 transition hover:text-gray-800", children: jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx("div", { className: "mt-3 space-y-2", children: methodItems.map((item, index) => {
+    return (jsxRuntimeExports.jsxs(StyledBox, { children: [jsxRuntimeExports.jsxs(HeaderBox, { children: [jsxRuntimeExports.jsx(StyledTypography, { children: title }), jsxRuntimeExports.jsx(StyledIconButton, { className: "edit-icon", size: "small", onClick: handleEdit, children: jsxRuntimeExports.jsx(default_1$f, { fontSize: "small", sx: { color: (theme) => theme.palette.secondary.main } }) })] }), jsxRuntimeExports.jsx(MethodItemsBox, { children: methodItems.map((item, index) => {
                     if (isPhone) {
                         return jsxRuntimeExports.jsx(ContactMethodPhoneItem, { item: item }, index);
                     }
@@ -56939,7 +57100,7 @@ const ContactInformation = ({ ownerData }) => {
     const contactMethods = [
         {
             key: 'phones',
-            title: t('contactDetails.phones'),
+            title: t('conversations.contactDetails.phones'),
             items: phones,
             isPhone: true,
             modalTitle: 'Phones',
@@ -56995,7 +57156,7 @@ const ContactInformation = ({ ownerData }) => {
             visible: true,
         },
     ];
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Section, { title: t('contactDetails.contactInformation'), children: jsxRuntimeExports.jsx(SectionContent, { children: jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3", children: contactMethods
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Section, { title: t('conversations.contactDetails.contactInformation'), children: jsxRuntimeExports.jsx(SectionContent, { children: jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3", children: contactMethods
                             .filter((method) => method.visible)
                             .map((method) => (jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal(method.modalTitle), title: method.title, methodItems: method.items, isPhone: method.isPhone, owner: ownerData }, method.key))) }) }) }), jsxRuntimeExports.jsx(EditModal, { open: isOpen, onClose: closeModal, title: title })] }));
 };
@@ -57008,47 +57169,18 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntity
         onEntityUpdated,
     };
     const t = useTranslationContext();
-    return (jsxRuntimeExports.jsx(Section, { title: t('contactDetails.addressInformation'), 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", title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { street: 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", title: t('contactDetails.anotherCity'), value: entityData.address2?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { city: 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", title: t('contactDetails.anotherState'), value: entityData.address2?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { state: 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", title: t('contactDetails.anotherPostcode'), value: entityData.address2?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { zipcode: 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", 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 },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.city'), value: entityData.address1?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherCity'), value: entityData.address2?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.state'), value: entityData.address1?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherState'), value: entityData.address2?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.postcode'), value: entityData.address1?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherPostcode'), value: entityData.address2?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.country'), value: entityData.address1?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { country: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherCountry'), value: entityData.address2?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { country: value },
-                        }) })] })) }) }));
+    const AddressGroup = ({ addressNumber, title, }) => (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4 rounded-xl p-4", children: [jsxRuntimeExports.jsx(Typography$2, { variant: "h6", children: title }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-3", children: [jsxRuntimeExports.jsx("div", { className: "col-span-2", children: jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.street'), value: entityData[addressNumber]?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                                [addressNumber]: { street: value },
+                            }), minWidth: "100%" }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.city'), value: entityData[addressNumber]?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { city: value },
+                        }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.state'), value: entityData[addressNumber]?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { state: value },
+                        }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.postcode'), value: entityData[addressNumber]?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { zipcode: value },
+                        }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.country'), value: entityData[addressNumber]?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { country: value },
+                        }), minWidth: "100%" })] })] }));
+    return (jsxRuntimeExports.jsx(Section, { title: t('conversations.contactDetails.addressInformation'), children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address1", title: t('conversations.contactDetails.primaryAddress') }), jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address2", title: t('conversations.contactDetails.secondaryAddress') })] }) }));
 };
 
 const useEntityUpdateSync = ({ entity, setEntity }) => {
@@ -57156,13 +57288,12 @@ const useModalCloseHandler = ({ onClose }) => {
     return handleClose;
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t }) => {
+const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, navigate, }) => {
     const api = useMemo(() => {
         if (!baseUrl || !spaceId)
             return null;
         return createEditContactApi(baseUrl, spaceId);
     }, [baseUrl, spaceId]);
-    console.log('[EditContactModal] t fn:', t?.name || 'anonymous', t);
     const { state, selectors, actions } = useEditContactModalController({
         open,
         baseUrl,
@@ -57213,20 +57344,20 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t })
         overflow: 'hidden',
     };
     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 }) }) }) }) }));
+    return (jsxRuntimeExports.jsx(EditContactApiProvider, { value: api, children: jsxRuntimeExports.jsx(TranslationProvider, { t: t, children: jsxRuntimeExports.jsx(NavigateProvider, { navigate: navigate, 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, contactType: selectors.contactType, entityId: state.contactData?.id, firstName: selectors.isContact ? state.contactData.firstName : undefined, lastName: selectors.isContact ? state.contactData.lastName : undefined, name: selectors.isBusiness ? state.contactData.name : undefined, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsxs(Box$2, { sx: { px: 1, pb: 2 }, children: [jsxRuntimeExports.jsx(General, { dateFormat: selectors.userTrii?.regCon_dateFormat || 'MM/dd/yyyy', entityType: selectors.contactType === 'contact' ||
+                                                                    selectors.contactType === 'business'
+                                                                    ? selectors.contactType
+                                                                    : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }), jsxRuntimeExports.jsx(AddressInformation, { entityType: selectors.contactType === 'contact' ||
+                                                                    selectors.contactType === 'business'
+                                                                    ? selectors.contactType
+                                                                    : 'contact', entityData: state.contactData, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsx(ContactInformation, { ownerData: state.contactData })] })] }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: selectors.labels, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags }) }) })] }) })) : null }) }) }) }) }) }));
 };
 
 export { ContactInfoPopup, EditContactModal };