@trii/components 2.0.41 → 2.0.43

package/dist/cjs/index.js

@@ -9216,7 +9216,7 @@ const TitleBox = material.styled(material.Box)({
     width: '100%',
     borderBottom: `1px solid lightgray`,
 });
-const StyledBox$2 = material.styled(material.Box)({
+const StyledBox$3 = material.styled(material.Box)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -9257,7 +9257,7 @@ const NoteText$2 = material.styled(material.Typography)({
     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(material.Tooltip, { title: contact.address, arrow: true, placement: "top", children: jsxRuntimeExports.jsx(material.Typography, { 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(material.Tooltip, { title: contact.address, arrow: true, placement: "top", children: jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", fontWeight: "semi-bold", fontSize: 14, color: "text.primary", sx: {
                                     whiteSpace: 'nowrap',
                                     textOverflow: 'ellipsis',
                                     overflow: 'hidden',
@@ -15404,8 +15404,8 @@ 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 = React$1.createContext(noop$3);
+const noop$4 = (key) => key;
+const TranslationContext = React$1.createContext(noop$4);
 const TranslationProvider = ({ t, children }) => {
     return jsxRuntimeExports.jsx(TranslationContext.Provider, { value: t, children: children });
 };
@@ -15413,7 +15413,7 @@ const useTranslationContext = () => {
     const t = React$1.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;
@@ -19755,7 +19755,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,
@@ -19764,12 +19764,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;
@@ -32744,7 +32744,7 @@ const PickersDayFiller = styled$3('div', {
   opacity: 0,
   pointerEvents: 'none'
 }));
-const noop$1 = () => {};
+const noop$2 = () => {};
 const PickersDayRaw = /*#__PURE__*/React__namespace.forwardRef(function PickersDay(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
@@ -32757,11 +32757,11 @@ const PickersDayRaw = /*#__PURE__*/React__namespace.forwardRef(function PickersD
       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,
@@ -43256,7 +43256,7 @@ const _excluded$y = ["enableAccessibleFieldDOMStructure"],
   _excluded6 = ["ownerState"],
   _excluded7 = ["ownerState"],
   _excluded8 = ["InputProps", "inputProps"];
-const noop = () => {};
+const noop$1 = () => {};
 const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -43273,7 +43273,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,
@@ -43308,8 +43308,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,
@@ -52527,9 +52527,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 = React$1.createContext(noop);
+const NavigateProvider = ({ navigate, children }) => {
+    return jsxRuntimeExports.jsx(NavigateContext.Provider, { value: navigate, children: children });
+};
+const useNavigateContext = () => {
+    const navigate = React$1.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] = React$1.useState(null);
+    const userImage = useImage({
+        initialImageUrl: businessData?.imageUrl,
+        entityType: 'business',
+        entityId: businessId,
+    });
+    const [anchorEl, setAnchorEl] = React$1.useState(null);
+    const [isLoadingData, setIsLoadingData] = React$1.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(material.Box, { display: "flex", alignItems: "center", children: [jsxRuntimeExports.jsx(material.Typography, { 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(material.Box, { display: "flex", alignItems: "center", justifyContent: "center", p: 1, children: jsxRuntimeExports.jsx(material.CircularProgress, { size: 20 }) }))] }));
+}
+
 const isUserInfo = (option) => 'email' in option;
 const isContactBirthdayProps = (p) => p.entityType === 'contact' && p.inputType === 'birthday';
-const StyledIconButton$2 = material.styled(material.IconButton)({
+const StyledIconButton$3 = material.styled(material.IconButton)({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -52659,12 +52709,12 @@ const EntityInfoLabel = (props) => {
             '&:hover .edit-icon': {
                 opacity: 1,
             },
-        }, children: [jsxRuntimeExports.jsxs(material.Box, { display: "flex", position: "relative", minHeight: '25px', children: [jsxRuntimeExports.jsx(material.Typography, { 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(material.CircularProgress, { 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(material.Box, { width: isEditing ? '100%' : '50%', position: "relative", children: isEditing && inputType === 'text' ? (jsxRuntimeExports.jsx(material.TextField, { value: textValue, onChange: handleInputChange, variant: "standard", size: "small", sx: { width: '100%' } })) : isEditing && (inputType === 'select' || inputType === 'selectMembers') ? (jsxRuntimeExports.jsxs(material.Select, { value: selectValue, onChange: handleSelectChange, variant: "standard", size: "small", sx: { width: '100%' }, children: [props.entityType === 'contact' ? (jsxRuntimeExports.jsx(material.MenuItem, { value: "", children: t('conversations.contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(material.MenuItem, { value: option.id, children: props.entityType === 'contact'
+        }, children: [jsxRuntimeExports.jsxs(material.Box, { display: "flex", position: "relative", minHeight: '25px', children: [jsxRuntimeExports.jsx(material.Typography, { 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(material.CircularProgress, { 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(material.Box, { width: isEditing ? '100%' : '50%', position: "relative", children: isEditing && inputType === 'text' ? (jsxRuntimeExports.jsx(material.TextField, { value: textValue, onChange: handleInputChange, variant: "standard", size: "small", sx: { width: '100%' } })) : isEditing && (inputType === 'select' || inputType === 'selectMembers') ? (jsxRuntimeExports.jsxs(material.Select, { value: selectValue, onChange: handleSelectChange, variant: "standard", size: "small", sx: { width: '100%' }, children: [props.entityType === 'contact' ? (jsxRuntimeExports.jsx(material.MenuItem, { value: "", children: t('conversations.contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(material.MenuItem, { 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(material.Box, { display: "flex", alignItems: "center", children: "Popover" })) : (jsxRuntimeExports.jsx(material.Typography, { fontWeight: '400', sx: { padding: '2.5px 14px 8.5px 0px' }, color: (theme) => theme.palette.text.primary, children: displayValue || (typeof value === 'string' && value) || '-' })) })] }));
+                    props.businessId ? (jsxRuntimeExports.jsx(SelectBusinessLabel, { value: value, displayValue: displayValue, businessId: props.businessId })) : (jsxRuntimeExports.jsx(material.Typography, { 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) => {
@@ -54470,7 +54520,7 @@ const CustomPropertyDateRangePicker = ({ value, handleChange, userDateFormat })
                 }, value: value || initDates, onChange: (newValue) => handleChange(newValue), format: dateFormat }) }) }));
 };
 
-const StyledIconButton$1 = material.styled(material.IconButton)(() => ({
+const StyledIconButton$2 = material.styled(material.IconButton)(() => ({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -54672,7 +54722,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(material.Box, { 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(material.CircularProgress, { 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(material.Box, { 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(material.Box, { 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(material.CircularProgress, { 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(material.Box, { 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') {
@@ -54905,7 +54955,7 @@ const useEditModal = () => {
     return { isOpen, title, openModal, closeModal };
 };
 
-const StyledBox$1 = styled$1(material.Box)(({ theme }) => ({
+const StyledBox$2 = styled$1(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -54972,7 +55022,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(material.Tooltip, { title: item.address || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText$1, { children: item.address }) }), jsxRuntimeExports.jsx(material.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(material.Tooltip, { title: item.address || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText$1, { children: item.address }) }), jsxRuntimeExports.jsx(material.Tooltip, { title: item.profileName || '', arrow: true, children: jsxRuntimeExports.jsx(ProfileNameText, { sx: {
                                         marginTop: '-10px',
                                         marginLeft: '5px',
                                         fontSize: '10px',
@@ -56232,7 +56282,7 @@ const formatPhoneForDisplay = (number) => {
     }
 };
 
-const StyledIconButton = styled$1(material.IconButton)(({ theme }) => ({
+const StyledIconButton$1 = styled$1(material.IconButton)(({ theme }) => ({
     padding: theme.spacing(0.5),
     marginTop: '-5px',
 }));
@@ -56241,7 +56291,7 @@ const StyledLocalPhoneIcon = styled$1(default_1$7)(({ theme }) => ({
     width: 16,
     color: theme.palette.secondary.main
 }));
-const StyledBox = styled$1(material.Box)(({ theme }) => ({
+const StyledBox$1 = styled$1(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -56304,7 +56354,7 @@ const ContactMethodPhoneItem = ({ item }) => {
         window.dispatchEvent(event);
     };
     const formattedPhone = React$1.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(material.Tooltip, { title: formattedPhone || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText, { children: formattedPhone }) }), jsxRuntimeExports.jsx(material.Tooltip, { title: item.note || '', arrow: true, children: jsxRuntimeExports.jsx(NoteText, { children: item.note }) })] })] }), jsxRuntimeExports.jsx(RightSection, { children: jsxRuntimeExports.jsx(material.Box, { 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(material.Tooltip, { title: formattedPhone || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText, { children: formattedPhone }) }), jsxRuntimeExports.jsx(material.Tooltip, { title: item.note || '', arrow: true, children: jsxRuntimeExports.jsx(NoteText, { children: item.note }) })] })] }), jsxRuntimeExports.jsx(RightSection, { children: jsxRuntimeExports.jsx(material.Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'flex-end',
@@ -56315,8 +56365,42 @@ const ContactMethodPhoneItem = ({ item }) => {
                                 } })) }) }) })] }) }));
 };
 
+const StyledBox = material.styled(material.Box)(({ 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 = material.styled(material.Typography)(({}) => ({
+    letterSpacing: -0.5,
+    fontSize: 14,
+    fontWeight: 600,
+}));
+const HeaderBox = material.styled(material.Box)(({}) => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+const MethodItemsBox = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    width: '100%',
+}));
+const StyledIconButton = material.styled(material.IconButton)({
+    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(material.IconButton, { "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);
                     }
@@ -57105,7 +57189,7 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntity
         onEntityUpdated,
     };
     const t = useTranslationContext();
-    const AddressGroup = ({ addressNumber, title, }) => (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-gray-100 bg-gray-50/50 p-4", children: [jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-gray-700", 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) => ({
+    const AddressGroup = ({ addressNumber, title, }) => (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4 rounded-xl p-4", children: [jsxRuntimeExports.jsx(material.Typography, { 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 },
@@ -57116,7 +57200,7 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntity
                         }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.country'), value: entityData[addressNumber]?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             [addressNumber]: { country: value },
                         }), minWidth: "100%" })] })] }));
-    return (jsxRuntimeExports.jsx(Section, { title: t('conversations.contactDetails.addressInformation'), children: jsxRuntimeExports.jsx(SectionContent, { children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address1", title: t('conversations.contactDetails.primaryAddress') || 'Primary Address' }), jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address2", title: t('conversations.contactDetails.secondaryAddress') || 'Secondary Address' })] }) }) }));
+    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 }) => {
@@ -57224,7 +57308,7 @@ 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 = React$1.useMemo(() => {
         if (!baseUrl || !spaceId)
             return null;
@@ -57280,20 +57364,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(material.Modal, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: material.Backdrop }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(material.Fade, { in: open, timeout: 200, children: jsxRuntimeExports.jsx(material.Box, { sx: mergedSx, children: state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(material.Box, { sx: {
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                minHeight: 220,
-                            }, children: jsxRuntimeExports.jsx(material.CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(material.Box, { 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(material.Box, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(material.Fade, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(material.Box, { 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(material.Box, { 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(material.Fade, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(material.Box, { 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(material.Modal, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: material.Backdrop }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(material.Fade, { in: open, timeout: 200, children: jsxRuntimeExports.jsx(material.Box, { sx: mergedSx, children: state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(material.Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    minHeight: 220,
+                                }, children: jsxRuntimeExports.jsx(material.CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(material.Box, { 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(material.Box, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(material.Fade, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(material.Box, { 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(material.Box, { 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(material.Fade, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(material.Box, { 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 }) }) }) }) }) }));
 };
 
 exports.ContactInfoPopup = ContactInfoPopup;