@trii/components 2.0.45 → 2.0.48

package/dist/cjs/index.js

@@ -3,6 +3,8 @@
 var React$1 = require('react');
 var material = require('@mui/material');
 var react = require('@emotion/react');
+var reactI18next = require('react-i18next');
+var i18n = require('i18next');
 var ReactDOM = require('react-dom');
 
 function _interopNamespaceDefault(e) {
@@ -4738,11 +4740,11 @@ var createStyled$2 = function createStyled(tag, options) {
   };
 };
 
-var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
+var tags$2 = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
 
 var newStyled = createStyled$2.bind();
-tags.forEach(function (tagName) {
+tags$2.forEach(function (tagName) {
   // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
 });
@@ -6429,7 +6431,7 @@ function memoize(fn) {
   };
 }
 
-const properties = {
+const properties$2 = {
   m: 'margin',
   p: 'padding'
 };
@@ -6461,7 +6463,7 @@ const getCssProperties = memoize(prop => {
     }
   }
   const [a, b] = prop.split('');
-  const property = properties[a];
+  const property = properties$2[a];
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
@@ -7419,21 +7421,21 @@ var styleFunctionSx = /*#__PURE__*/Object.freeze({
 
 var require$$8 = /*@__PURE__*/getAugmentedNamespace(styleFunctionSx);
 
-var _interopRequireDefault$i = interopRequireDefaultExports;
+var _interopRequireDefault$j = interopRequireDefaultExports;
 Object.defineProperty(createStyled$3, "__esModule", {
   value: true
 });
 var _default = createStyled$3.default = createStyled$1;
 var shouldForwardProp_1 = createStyled$3.shouldForwardProp = shouldForwardProp$1;
 createStyled$3.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault$i(require_extends());
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault$i(requireObjectWithoutPropertiesLoose());
+var _extends2 = _interopRequireDefault$j(require_extends());
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault$j(requireObjectWithoutPropertiesLoose());
 var _styledEngine$1 = _interopRequireWildcard$2(require$$1$1);
 var _deepmerge = require$$4;
-var _capitalize = _interopRequireDefault$i(require$$5);
-var _getDisplayName = _interopRequireDefault$i(require$$6);
-var _createTheme = _interopRequireDefault$i(require$$7);
-var _styleFunctionSx = _interopRequireDefault$i(require$$8);
+var _capitalize = _interopRequireDefault$j(require$$5);
+var _getDisplayName = _interopRequireDefault$j(require$$6);
+var _createTheme = _interopRequireDefault$j(require$$7);
+var _styleFunctionSx = _interopRequireDefault$j(require$$8);
 const _excluded$1v = ["ownerState"],
   _excluded2$d = ["variants"],
   _excluded3$4 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
@@ -7703,7 +7705,7 @@ var require$$1 = /*@__PURE__*/getAugmentedNamespace(formatMuiErrorMessage$1);
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(clamp);
 
-var _interopRequireDefault$h = interopRequireDefaultExports;
+var _interopRequireDefault$i = interopRequireDefaultExports;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true
 });
@@ -7725,8 +7727,8 @@ colorManipulator.private_safeEmphasize = private_safeEmphasize;
 colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor$1;
 colorManipulator.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault$h(require$$1);
-var _clamp = _interopRequireDefault$h(require$$2);
+var _formatMuiErrorMessage2 = _interopRequireDefault$i(require$$1);
+var _clamp = _interopRequireDefault$i(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -9092,27 +9094,27 @@ function requireCreateSvgIcon () {
 	return createSvgIcon;
 }
 
-var _interopRequireDefault$g = interopRequireDefaultExports;
+var _interopRequireDefault$h = interopRequireDefaultExports;
 Object.defineProperty(ArrowForward, "__esModule", {
   value: true
 });
-var default_1$h = ArrowForward.default = void 0;
-var _createSvgIcon$g = _interopRequireDefault$g(requireCreateSvgIcon());
-var _jsxRuntime$g = jsxRuntimeExports;
-default_1$h = ArrowForward.default = (0, _createSvgIcon$g.default)( /*#__PURE__*/(0, _jsxRuntime$g.jsx)("path", {
+var default_1$i = ArrowForward.default = void 0;
+var _createSvgIcon$h = _interopRequireDefault$h(requireCreateSvgIcon());
+var _jsxRuntime$h = jsxRuntimeExports;
+default_1$i = ArrowForward.default = (0, _createSvgIcon$h.default)( /*#__PURE__*/(0, _jsxRuntime$h.jsx)("path", {
   d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
 }), 'ArrowForward');
 
 var Message = {};
 
-var _interopRequireDefault$f = interopRequireDefaultExports;
+var _interopRequireDefault$g = interopRequireDefaultExports;
 Object.defineProperty(Message, "__esModule", {
   value: true
 });
-var default_1$g = Message.default = void 0;
-var _createSvgIcon$f = _interopRequireDefault$f(requireCreateSvgIcon());
-var _jsxRuntime$f = jsxRuntimeExports;
-default_1$g = Message.default = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.jsx)("path", {
+var default_1$h = Message.default = void 0;
+var _createSvgIcon$g = _interopRequireDefault$g(requireCreateSvgIcon());
+var _jsxRuntime$g = jsxRuntimeExports;
+default_1$h = Message.default = (0, _createSvgIcon$g.default)( /*#__PURE__*/(0, _jsxRuntime$g.jsx)("path", {
   d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-2 12H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"
 }), 'Message');
 
@@ -9192,7 +9194,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToContacts(e);
                                 onClose();
                             }
-                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$h, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$i, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
                             handleNavigateToConversations(e);
                             onClose();
                         }, onMouseDown: (e) => {
@@ -9201,7 +9203,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToConversations(e);
                                 onClose();
                             }
-                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1$g, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(material.CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
+                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1$h, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(material.CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
 };
 
 const Container$1 = material.styled(material.Box)({
@@ -15289,6 +15291,166 @@ const MembersSection = ({ contactData, title, navigate }) => {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { memberId: String(member.id), name: member.name, navigate: navigate }, member.id)))] }));
 };
 
+var add$1 = "Add";
+var close$1 = "Close";
+var labels$1 = "Labels";
+var phone$1 = "Phone";
+var phones$1 = "Phones";
+var number$1 = "Number";
+var business$1 = "Business";
+var businessMembers$1 = "Business Members";
+var properties$1 = "Properties";
+var note$1 = "Note";
+var view$1 = "View";
+var email$1 = "Email";
+var tags$1 = "Tags";
+var global$2 = {
+	back: "Back",
+	save: "Save",
+	noOptions: "No options",
+	noValue: "No value",
+	birthdate: "Birthdate"
+};
+var avatar$1 = {
+	upload: "Upload photo",
+	"delete": "Delete photo"
+};
+var contactEdit$1 = {
+	from: "From",
+	to: "To"
+};
+var conversations$1 = {
+	contactDetails: {
+		contactOwner: "Contact Owner",
+		business: "Business",
+		createdBy: "Created By",
+		modifiedBy: "Modified By",
+		street: "Street",
+		city: "City",
+		state: "State",
+		postcode: "Postcode",
+		country: "Country",
+		addressInformation: "Address Information",
+		primaryAddress: "Primary Address",
+		secondaryAddress: "Secondary Address",
+		contactInformation: "Contact Information",
+		phones: "Phones",
+		contactInfo: {
+			emptySelection: "No selection"
+		}
+	},
+	businessDetails: {
+		businessOwner: "Business Owner"
+	}
+};
+var en = {
+	add: add$1,
+	close: close$1,
+	labels: labels$1,
+	phone: phone$1,
+	phones: phones$1,
+	number: number$1,
+	business: business$1,
+	businessMembers: businessMembers$1,
+	properties: properties$1,
+	note: note$1,
+	view: view$1,
+	email: email$1,
+	tags: tags$1,
+	global: global$2,
+	avatar: avatar$1,
+	contactEdit: contactEdit$1,
+	conversations: conversations$1
+};
+
+var add = "Agregar";
+var close = "Cerrar";
+var labels = "Etiquetas";
+var phone = "Teléfono";
+var phones = "Teléfonos";
+var number = "Número";
+var business = "Empresa";
+var businessMembers = "Miembros de la empresa";
+var properties = "Propiedades";
+var note = "Nota";
+var view = "Ver";
+var email = "Correo Electrónico";
+var tags = "Etiquetas";
+var global$1 = {
+	back: "Atrás",
+	save: "Guardar",
+	noOptions: "Sin opciones",
+	noValue: "Sin valor",
+	birthdate: "Fecha de nacimiento"
+};
+var avatar = {
+	upload: "Subir foto",
+	"delete": "Eliminar foto"
+};
+var contactEdit = {
+	from: "Desde",
+	to: "Hasta"
+};
+var conversations = {
+	contactDetails: {
+		contactOwner: "Propietario del contacto",
+		business: "Empresa",
+		createdBy: "Creado por",
+		modifiedBy: "Modificado por",
+		street: "Calle",
+		city: "Ciudad",
+		state: "Estado",
+		postcode: "Código postal",
+		country: "País",
+		addressInformation: "Información de dirección",
+		primaryAddress: "Dirección principal",
+		secondaryAddress: "Dirección secundaria",
+		contactInformation: "Información de contacto",
+		phones: "Teléfonos",
+		contactInfo: {
+			emptySelection: "Sin selección"
+		}
+	},
+	businessDetails: {
+		businessOwner: "Propietario de la empresa"
+	}
+};
+var es = {
+	add: add,
+	close: close,
+	labels: labels,
+	phone: phone,
+	phones: phones,
+	number: number,
+	business: business,
+	businessMembers: businessMembers,
+	properties: properties,
+	note: note,
+	view: view,
+	email: email,
+	tags: tags,
+	global: global$1,
+	avatar: avatar,
+	contactEdit: contactEdit,
+	conversations: conversations
+};
+
+const resources = {
+    en: { translation: en },
+    es: { translation: es },
+};
+i18n.use(reactI18next.initReactI18next).init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false,
+    },
+    react: {
+        useSuspense: false,
+    },
+});
+
 const PopupContainer = material.styled(material.Box)(({ theme }) => ({
     //@ts-ignore
     backgroundColor: theme.palette.background.panel,
@@ -15316,15 +15478,14 @@ const PopupContainer = material.styled(material.Box)(({ theme }) => ({
         background: '#616161',
     },
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t = (key) => ({
-    labels: 'Etiquetas',
-    phone: 'Teléfono',
-    business: 'Empresa',
-    businessMembers: 'Miembros de la empresa',
-    properties: 'Propiedades',
-    view: 'Ver',
-    email: 'Correo Electrónico',
-}[key] || key), }) => {
+const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
+    const { t: i18nT, i18n } = reactI18next.useTranslation();
+    React$1.useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+    const t = i18nT;
     const dataIsBusiness = isBusiness$1(contactData);
     const dataIsContact = isContact$1(contactData);
     const contactMethods = [
@@ -15375,9 +15536,22 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod$1, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') }), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod$1, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
+var Close = {};
+
+var _interopRequireDefault$f = interopRequireDefaultExports;
+Object.defineProperty(Close, "__esModule", {
+  value: true
+});
+var default_1$g = Close.default = void 0;
+var _createSvgIcon$f = _interopRequireDefault$f(requireCreateSvgIcon());
+var _jsxRuntime$f = jsxRuntimeExports;
+default_1$g = Close.default = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.jsx)("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+
 var Edit = {};
 
 var _interopRequireDefault$e = interopRequireDefaultExports;
@@ -15442,7 +15616,6 @@ const Tags = ({ tags, onEditTags }) => {
             justifyContent: 'center',
         }, children: [jsxRuntimeExports.jsxs(material.Box, { sx: {
                     maxWidth: 320,
-                    pr: 4,
                     position: 'relative',
                     '&:hover .tags-action, &:focus-within .tags-action': {
                         opacity: 1,
@@ -15456,7 +15629,8 @@ const Tags = ({ tags, onEditTags }) => {
                                     },
                                 } }, tag.id))), hiddenCount > 0 ? (jsxRuntimeExports.jsx(material.Chip, { label: `+${hiddenCount}`, size: "small", variant: "outlined", onClick: handleOpen, sx: { borderRadius: 999 } })) : null] }), jsxRuntimeExports.jsx(material.IconButton, { className: "tags-action", size: "small", "aria-label": safeTags.length ? t('tags.edit') : t('tags.add'), onClick: onEditTags, sx: {
                             position: 'absolute',
-                            right: 0,
+                            left: '100%',
+                            ml: 1,
                             top: '50%',
                             transform: 'translateY(-50%)',
                             color: 'text.secondary',
@@ -15467,7 +15641,7 @@ const Tags = ({ tags, onEditTags }) => {
                                 bgcolor: 'action.hover',
                                 color: 'text.primary',
                             },
-                        }, children: safeTags.length ? (jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" })) : (jsxRuntimeExports.jsx(default_1$e, { fontSize: "small" })) })] }), jsxRuntimeExports.jsx(material.Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(material.Box, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(material.Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(material.Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
+                        }, children: safeTags.length ? jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" }) : jsxRuntimeExports.jsx(default_1$e, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(material.Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(material.Box, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(material.Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(material.Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
                                     borderRadius: 999,
                                     maxWidth: 160,
                                     '& .MuiChip-label': {
@@ -15494,8 +15668,13 @@ const NameWrapper = material.styled(material.Box)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: '8px',
     width: '100%',
+});
+const NameContainer = material.styled(material.Box)({
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    maxWidth: '100%',
     '&:hover .edit-icon': {
         opacity: 1,
         visibility: 'visible',
@@ -15505,6 +15684,10 @@ const EditButton = material.styled(material.IconButton)({
     opacity: 0,
     visibility: 'hidden',
     transition: 'all 0.2s',
+    position: 'absolute',
+    left: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
 });
 const ContactName = ({ displayName, contactType, firstName, lastName, name, entityId, onEntityUpdated, }) => {
     const api = useEditContactApi();
@@ -15555,7 +15738,7 @@ const ContactName = ({ displayName, contactType, firstName, lastName, name, enti
     if (isEditing) {
         return (jsxRuntimeExports.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 1 }, children: [contactType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(material.TextField, { value: values.firstName, onChange: (e) => setValues({ ...values, firstName: e.target.value }), size: "small", placeholder: "First Name", sx: { width: 140 } }), jsxRuntimeExports.jsx(material.TextField, { value: values.lastName, onChange: (e) => setValues({ ...values, lastName: e.target.value }), size: "small", placeholder: "Last Name", sx: { width: 140 } })] })) : (jsxRuntimeExports.jsx(material.TextField, { value: values.name, onChange: (e) => setValues({ ...values, name: e.target.value }), size: "small", placeholder: "Name", sx: { width: 280 } })), jsxRuntimeExports.jsx(material.IconButton, { onClick: handleSave, disabled: loading, color: "primary", children: loading ? jsxRuntimeExports.jsx(material.CircularProgress, { 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" }) }))] }));
+    return (jsxRuntimeExports.jsx(NameWrapper, { children: jsxRuntimeExports.jsxs(NameContainer, { children: [jsxRuntimeExports.jsx(NameText, { variant: "h6", title: displayName, children: displayName }), showEdit && (jsxRuntimeExports.jsx(EditButton, { size: "small", onClick: () => setIsEditing(true), className: "edit-icon", sx: { ml: 1 }, children: jsxRuntimeExports.jsx(Edit$1, { fontSize: "small" }) }))] }) }));
 };
 
 var Delete = {};
@@ -24670,7 +24853,7 @@ const PAGE_SIZE = 20;
 const AutocompletePopper = styled$3(MuiPopper)(({ theme }) => ({
     zIndex: theme.zIndex.modal + 1,
 }));
-const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving }) => {
+const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, onCreateNew, isCreatingNew, }) => {
     const t = useTranslationContext();
     const [searchValue, setSearchValue] = React$1.useState('');
     const [limit, setLimit] = React$1.useState(PAGE_SIZE);
@@ -24686,10 +24869,19 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving }) => {
         if (nearBottom)
             setLimit((l) => l + PAGE_SIZE);
     };
-    return (jsxRuntimeExports.jsxs(material.Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(material.Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$b, { fontSize: "small" }) }), jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(material.Box, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$a, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(material.Autocomplete, { multiple: true, value: value, onChange: (_, newValue) => onChange(newValue), options: visibleOptions, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), PopperComponent: AutocompletePopper, renderOption: (props, option) => jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' }), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(material.Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(material.TextField, { ...params, size: "small" }), ListboxProps: {
+    const CustomNoOptionsMessage = () => {
+        const trimmedSearchValue = String(searchValue ?? '').trim();
+        const isDisabled = !trimmedSearchValue || isSaving || isCreatingNew;
+        return (jsxRuntimeExports.jsxs(material.Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }, children: [t('global.noOptions'), jsxRuntimeExports.jsx(LoadingButton$1, { onClick: () => onCreateNew(trimmedSearchValue), loading: isCreatingNew, disabled: isDisabled, variant: "contained", size: "small", sx: { marginTop: 1.3 }, children: t('global.createNew') })] }));
+    };
+    return (jsxRuntimeExports.jsxs(material.Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(material.Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$b, { fontSize: "small" }) }), jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(material.Box, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$a, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(material.Autocomplete, { multiple: true, disablePortal: false, value: value, onChange: (_, newValue) => onChange(newValue), options: visibleOptions, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), PopperComponent: AutocompletePopper, renderOption: (props, option) => jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' }), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(material.Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(material.TextField, { ...params, size: "small" }), ListboxProps: {
                     onScroll: onListboxScroll,
                     sx: { maxHeight: 280, overflowY: 'auto' },
-                }, noOptionsText: t('global.noOptions'), sx: { width: '100%' } })] }));
+                }, noOptionsText: jsxRuntimeExports.jsx(CustomNoOptionsMessage, {}), sx: { width: '100%' } })] }));
 };
 
 class ApiError extends Error {
@@ -24763,17 +24955,22 @@ async function fetchLabels({ baseUrl, spaceId, signal }) {
     const url = joinUrl(urls.CONTACTS, '/labels');
     return requestJson({ url, signal });
 }
+async function createLabel({ baseUrl, spaceId, name, signal }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, '/labels');
+    return requestJson({ url, method: 'POST', body: { name }, signal });
+}
 async function fetchContact({ baseUrl, spaceId, contactId, signal }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const url = joinUrl(urls.CONTACTS, `/contacts/${encodeURIComponent(contactId)}`);
     return requestJson({ url, signal });
 }
-async function fetchContactFields({ baseUrl, spaceId, forType, signal }) {
+async function fetchContactFields({ baseUrl, spaceId, forType, signal, }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const url = `${joinUrl(urls.CONTACTS, '/ContactFields')}?filter=custom&for=${encodeURIComponent(forType)}`;
     return requestJson({ url, signal });
 }
-async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal }) {
+async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal, }) {
     const path = entityType === 'business'
         ? `/business/${encodeURIComponent(entityId)}`
         : `/contacts/${encodeURIComponent(entityId)}`;
@@ -24786,7 +24983,7 @@ async function deleteAddress({ baseUrl, spaceId, data, signal }) {
     const url = joinUrl(urls.CONTACTS, '/contactAddresses');
     return requestJson({ url, method: 'DELETE', body: data, signal });
 }
-async function checkContactAddress({ baseUrl, spaceId, data, signal }) {
+async function checkContactAddress({ baseUrl, spaceId, data, signal, }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const url = joinUrl(urls.CONTACTS, '/contactAddresses/check');
     return requestJson({ url, method: 'POST', body: data, signal });
@@ -24796,7 +24993,7 @@ async function setContactAddress({ baseUrl, spaceId, data, signal }) {
     const url = joinUrl(urls.CONTACTS, '/contactAddresses/set');
     return requestJson({ url, method: 'POST', body: data, signal });
 }
-async function updateContactAddress({ baseUrl, spaceId, data, signal }) {
+async function updateContactAddress({ baseUrl, spaceId, data, signal, }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const url = joinUrl(urls.CONTACTS, `/contactAddresses/${encodeURIComponent(data.contactAddressId)}`);
     return requestJson({ url, method: 'PUT', body: data, signal });
@@ -24811,12 +25008,12 @@ async function fetchUsers({ baseUrl, spaceId, signal }) {
     const url = joinUrl(urls.SETTINGS, `/users`);
     return requestJson({ url, signal });
 }
-async function fetchUserTriiById({ baseUrl, spaceId, signal, userId }) {
+async function fetchUserTriiById({ baseUrl, spaceId, signal, userId, }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const url = joinUrl(urls.SETTINGS, `/usersInfor/${userId}`);
     return requestJson({ url, signal });
 }
-async function uploadAvatar({ baseUrl, spaceId, contactId, file, signal }) {
+async function uploadAvatar({ baseUrl, spaceId, contactId, file, signal, }) {
     const urls = getApiUrls(baseUrl, spaceId);
     const fd = new FormData();
     fd.append('file', file, file.name);
@@ -24825,6 +25022,7 @@ async function uploadAvatar({ baseUrl, spaceId, contactId, file, signal }) {
 }
 const createEditContactApi = (baseUrl, spaceId) => ({
     fetchLabels: ({ signal } = {}) => fetchLabels({ baseUrl, spaceId, signal }),
+    createLabel: ({ name, signal }) => createLabel({ baseUrl, spaceId, name, signal }),
     fetchContact: ({ contactId, signal }) => fetchContact({ baseUrl, spaceId, contactId, signal }),
     fetchContactFields: ({ forType, signal }) => fetchContactFields({ baseUrl, spaceId, forType, signal }),
     updateEntity: ({ entityType, entityId, body, signal }) => updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal }),
@@ -25631,6 +25829,7 @@ var editContactHelper = { getEditedField, getAddressesWithUpdatedValues };
 
 const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, }) => {
     const [isDeletingAddress, setIsDeletingAddress] = React$1.useState(false);
+    const [initialSnapshot, setInitialSnapshot] = React$1.useState(() => initial);
     const [imsFacebooks, setImsFacebooks] = React$1.useState(initial?.ims_facebook || []);
     const [imsMercadolibre, setImsMercadolibre] = React$1.useState(initial?.ims_mercadolibre || []);
     const [imsWebchats, setImsWebchats] = React$1.useState(initial?.ims_webchat || []);
@@ -25662,6 +25861,10 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
     const addWhatsappVerified = (newWhatsapp) => {
         const updatedWhatsapps = [...imsWhatsapp, newWhatsapp];
         setImsWhatsApp(updatedWhatsapps);
+        setInitialSnapshot((prev) => ({
+            ...(prev ?? {}),
+            ims_whatsapp: updatedWhatsapps,
+        }));
     };
     const replaceAddress = (addressId, newAddress) => {
         if (!newAddress) {
@@ -25675,6 +25878,10 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
                 return email;
             });
             setEmails(newEmails);
+            setInitialSnapshot((prev) => ({
+                ...(prev ?? {}),
+                emails: newEmails,
+            }));
         }
         if (newAddress.channelType === 5) {
             const newPhoneNumbers = phoneNumbers.map((phoneNumber) => {
@@ -25684,6 +25891,10 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
                 return phoneNumber;
             });
             setPhoneNumbers(newPhoneNumbers);
+            setInitialSnapshot((prev) => ({
+                ...(prev ?? {}),
+                phones: newPhoneNumbers,
+            }));
         }
         if (newAddress.channelType === 13) {
             const newImsWhatsapp = imsWhatsapp.map((item) => {
@@ -25693,6 +25904,10 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
                 return item;
             });
             setImsWhatsApp(newImsWhatsapp);
+            setInitialSnapshot((prev) => ({
+                ...(prev ?? {}),
+                ims_whatsapp: newImsWhatsapp,
+            }));
         }
         if (newAddress.channelType === 21) {
             const newImsRCS = imsRCS.map((item) => {
@@ -25702,6 +25917,10 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
                 return item;
             });
             setImsRCS(newImsRCS);
+            setInitialSnapshot((prev) => ({
+                ...(prev ?? {}),
+                ims_rcs: newImsRCS,
+            }));
         }
         if (newAddress.channelType === 41) {
             const newImsMercadolibre = imsMercadolibre.map((item) => {
@@ -25711,6 +25930,10 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
                 return item;
             });
             setImsMercadolibre(newImsMercadolibre);
+            setInitialSnapshot((prev) => ({
+                ...(prev ?? {}),
+                ims_mercadolibre: newImsMercadolibre,
+            }));
         }
     };
     const handleAddressFieldChange = async (e, fieldId, type) => {
@@ -25863,49 +26086,82 @@ const useEditContactMethods = ({ entityId, initial, dispatch, deleteAddress, })
                 case 3:
                     const newEmails = emails.filter((email) => email.id !== fieldId);
                     setEmails(newEmails);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        emails: newEmails,
+                    }));
                     break;
                 case 5:
                     const newPhoneNumbers = phoneNumbers.filter((phoneNumber) => phoneNumber.id !== fieldId);
                     setPhoneNumbers(newPhoneNumbers);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        phones: newPhoneNumbers,
+                    }));
                     break;
                 case 13:
                     const newImsWhatsapp = imsWhatsapp.filter((item) => item.id !== fieldId);
                     setImsWhatsApp(newImsWhatsapp);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        ims_whatsapp: newImsWhatsapp,
+                    }));
                     break;
                 case 21:
                     const newImsRCS = imsRCS.filter((item) => item.id !== fieldId);
                     setImsRCS(newImsRCS);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        ims_rcs: newImsRCS,
+                    }));
                     break;
                 case 41:
                     const newImsMercadolibre = imsMercadolibre.filter((item) => item.id !== fieldId);
                     setImsMercadolibre(newImsMercadolibre);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        ims_mercadolibre: newImsMercadolibre,
+                    }));
                     break;
                 case 14:
                     const newImsFacebooks = imsFacebooks.filter((item) => item.id !== fieldId);
                     setImsFacebooks(newImsFacebooks);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        ims_facebook: newImsFacebooks,
+                    }));
                     break;
                 case 20:
                     const newImsWebchats = imsWebchats.filter((item) => item.id !== fieldId);
                     setImsWebchats(newImsWebchats);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        ims_webchat: newImsWebchats,
+                    }));
                     break;
                 case 16:
                     const newImsInstagrams = imsInstagrams.filter((item) => item.id !== fieldId);
                     setImsInstagrams(newImsInstagrams);
+                    setInitialSnapshot((prev) => ({
+                        ...(prev ?? {}),
+                        ims_instagram: newImsInstagrams,
+                    }));
                     break;
             }
         }
     };
     function resetToInitialContactInformation() {
-        setImsFacebooks(initial?.ims_facebook || []);
-        setImsMercadolibre(initial?.ims_mercadolibre || []);
-        setImsWebchats(initial?.ims_webchat || []);
-        setImsInstagrams(initial?.ims_instagram || []);
-        setImsWhatsApp(initial?.ims_whatsapp || []);
-        setImsRCS(initial?.ims_rcs || []);
-        setEmails(initial?.emails || []);
-        setPhoneNumbers(initial?.phones || []);
+        setImsFacebooks(initialSnapshot?.ims_facebook || []);
+        setImsMercadolibre(initialSnapshot?.ims_mercadolibre || []);
+        setImsWebchats(initialSnapshot?.ims_webchat || []);
+        setImsInstagrams(initialSnapshot?.ims_instagram || []);
+        setImsWhatsApp(initialSnapshot?.ims_whatsapp || []);
+        setImsRCS(initialSnapshot?.ims_rcs || []);
+        setEmails(initialSnapshot?.emails || []);
+        setPhoneNumbers(initialSnapshot?.phones || []);
     }
     React$1.useEffect(() => {
+        setInitialSnapshot(initial);
         if (initial?.emails && initial?.phones) {
             setEmails(initial.emails);
             setPhoneNumbers(initial.phones);
@@ -25970,7 +26226,7 @@ const useMultipleSelect = ({ initialState = [], } = {}) => {
     };
 };
 
-const useEditBusiness = ({ business, customContactFields, baseUrl, spaceId }) => {
+const useEditBusiness = ({ business, customContactFields, baseUrl, spaceId, }) => {
     const apiDeleteAddress = React$1.useMemo(() => async (payload) => {
         if (!baseUrl || !spaceId)
             return;
@@ -26010,8 +26266,7 @@ const useEditBusiness = ({ business, customContactFields, baseUrl, spaceId }) =>
     const country = useField$1('text', business?.address1?.country || '');
     const secondaryCountry = useField$1('text', business?.address2?.country || '');
     const getEditedField = (key, originalValue, editedValue) => {
-        if (originalValue !== editedValue &&
-            !(originalValue === null && editedValue === '')) {
+        if (originalValue !== editedValue && !(originalValue === null && editedValue === '')) {
             return { [key]: editedValue };
         }
         return {};
@@ -26038,9 +26293,7 @@ const useEditBusiness = ({ business, customContactFields, baseUrl, spaceId }) =>
             id: business.id,
             ...getEditedField('owner', business.owner, contactPropietary.attributes.value),
             ...getEditedField('name', business.name, name.attributes.value),
-            imageUrl: contactImage.imageUrl
-                ? contactImage.removeParams(contactImage.imageUrl)
-                : null,
+            imageUrl: contactImage.imageUrl ? contactImage.removeParams(contactImage.imageUrl) : null,
             tags: labelMultipleSelect.attributes.value,
             properties: customProperties,
             members: selectedContacts,
@@ -26055,26 +26308,23 @@ const useEditBusiness = ({ business, customContactFields, baseUrl, spaceId }) =>
     function resetCustomProperty(nameKey) {
         if (!business)
             return;
-        const defaultProperty = business.properties.find((property) => property.nameKey === nameKey);
+        const normalizeNameKey = (input) => input.trim().toLowerCase().replace(/\s+/g, '-').replace(/-+/g, '-');
+        const defaultProperty = business.properties.find((property) => property.nameKey === nameKey) ??
+            business.properties.find((property) => normalizeNameKey(property.nameKey) === normalizeNameKey(nameKey));
         if (!defaultProperty) {
             console.error(`No se encontró una propiedad con nameKey: ${nameKey}`);
             return; // Salir de la función si no se encuentra la propiedad
         }
-        const updatedProperties = customProperties.map((property) => property.nameKey === nameKey
-            ? { ...property, value: defaultProperty.value }
-            : property);
+        const updatedProperties = customProperties.map((property) => property.nameKey === nameKey ? { ...property, value: defaultProperty.value } : property);
         setCustomProperties(updatedProperties);
     }
-    function replaceSpacesWithHyphen(input) {
-        const result = input.replace(/ /g, '-');
-        return result;
-    }
     const getFilteredCustomProperties = () => {
         if (!business)
             return [];
         return customContactFields.map((customField) => {
-            const customFieldWithHyphen = replaceSpacesWithHyphen(customField.nameKey);
-            const existingBusinessProperty = business.properties.find((property) => property.nameKey === customFieldWithHyphen);
+            const normalizeNameKey = (input) => input.trim().toLowerCase().replace(/\s+/g, '-').replace(/-+/g, '-');
+            const existingBusinessProperty = business.properties.find((property) => property.nameKey === customField.nameKey) ??
+                business.properties.find((property) => normalizeNameKey(property.nameKey) === normalizeNameKey(customField.nameKey));
             if (existingBusinessProperty) {
                 return {
                     ...existingBusinessProperty,
@@ -26159,7 +26409,7 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-const useEditContact = ({ contact, customContactFields, baseUrl, spaceId }) => {
+const useEditContact = ({ contact, customContactFields, baseUrl, spaceId, }) => {
     const apiDeleteAddress = React$1.useMemo(() => async (payload) => {
         if (!baseUrl || !spaceId)
             return;
@@ -26243,9 +26493,7 @@ const useEditContact = ({ contact, customContactFields, baseUrl, spaceId }) => {
             phones: modifiedPhones,
             // ims_whatsapp: modifiedImsWhatsapp,
             tags: modifiedTags,
-            imageUrl: contactImage.imageUrl
-                ? contactImage.removeParams(contactImage.imageUrl)
-                : null,
+            imageUrl: contactImage.imageUrl ? contactImage.removeParams(contactImage.imageUrl) : null,
             properties: customProperties,
             // businessId: selectedBusiness[0]?.businessId || '',
             // businessName: selectedBusiness[0]?.businessName || '',
@@ -26271,27 +26519,23 @@ const useEditContact = ({ contact, customContactFields, baseUrl, spaceId }) => {
     function resetCustomProperty(nameKey) {
         if (!contact)
             return;
-        const defaultProperty = contact.properties.find((property) => property.nameKey === nameKey);
+        const normalizeNameKey = (input) => input.trim().toLowerCase().replace(/\s+/g, '-').replace(/-+/g, '-');
+        const defaultProperty = contact.properties.find((property) => property.nameKey === nameKey) ??
+            contact.properties.find((property) => normalizeNameKey(property.nameKey) === normalizeNameKey(nameKey));
         if (!defaultProperty) {
             console.error(`No se encontró una propiedad con nameKey: ${nameKey}`);
             return; // Salir de la función si no se encuentra la propiedad
         }
-        const updatedProperties = customProperties.map((property) => property.nameKey === nameKey
-            ? { ...property, value: defaultProperty.value }
-            : property);
+        const updatedProperties = customProperties.map((property) => property.nameKey === nameKey ? { ...property, value: defaultProperty.value } : property);
         setCustomProperties(updatedProperties);
     }
-    // Utils
-    function replaceSpacesWithHyphen(input) {
-        const result = input.replace(/ /g, '-');
-        return result;
-    }
     const getFilteredCustomProperties = () => {
         if (!contact)
             return [];
         return customContactFields.map((customField) => {
-            const customFieldWithHypen = replaceSpacesWithHyphen(customField.nameKey);
-            const existingProperty = contact.properties.find((property) => property.nameKey === customFieldWithHypen);
+            const normalizeNameKey = (input) => input.trim().toLowerCase().replace(/\s+/g, '-').replace(/-+/g, '-');
+            const existingProperty = contact.properties.find((property) => property.nameKey === customField.nameKey) ??
+                contact.properties.find((property) => normalizeNameKey(property.nameKey) === normalizeNameKey(customField.nameKey));
             if (existingProperty) {
                 return {
                     ...existingProperty,
@@ -26423,7 +26667,7 @@ const Section = ({ title, children }) => {
             borderRadius: 2,
             p: 2,
             mb: 2,
-        }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: title }), jsxRuntimeExports.jsx(material.Divider, { sx: { my: 1.5 } }), children] }));
+        }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(material.Divider, { sx: { my: 1.5 } }), children] }));
 };
 
 const SectionContent = ({ children, ...boxProps }) => {
@@ -52571,7 +52815,7 @@ function SelectBusinessLabel({ value, displayValue, businessId }) {
         }
         setAnchorEl(targetElement);
     };
-    return (jsxRuntimeExports.jsxs(material.Box, { display: "flex", alignItems: "center", children: [jsxRuntimeExports.jsx(material.Typography, { onClick: handleOpenInfoPopover, fontWeight: '600', sx: {
+    return (jsxRuntimeExports.jsxs(material.Box, { display: "flex", alignItems: "center", children: [jsxRuntimeExports.jsx(material.Typography, { onClick: handleOpenInfoPopover, variant: "body2", 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 }) }))] }));
@@ -52600,11 +52844,38 @@ const EntityInfoLabel = (props) => {
     const inputType = props.inputType ?? 'text';
     const [isEditing, setIsEditing] = React$1.useState(false);
     const [isSaving, setIsSaving] = React$1.useState(false);
+    const titleRef = React$1.useRef(null);
+    const [isTitleTruncated, setIsTitleTruncated] = React$1.useState(false);
     const [inputValue, setInputValue] = React$1.useState(() => {
         if (props.entityType === 'business')
             return value;
         return typeof value === 'string' ? value : undefined;
     });
+    React$1.useEffect(() => {
+        const el = titleRef.current;
+        if (!el)
+            return;
+        const check = () => {
+            const next = el.scrollWidth > el.clientWidth;
+            setIsTitleTruncated(next);
+        };
+        check();
+        if (typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(() => {
+                check();
+            });
+            ro.observe(el);
+            return () => {
+                ro.disconnect();
+            };
+        }
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('resize', check);
+        return () => {
+            window.removeEventListener('resize', check);
+        };
+    }, [title, isEditing]);
     React$1.useEffect(() => {
         if (props.entityType === 'business') {
             setInputValue(value);
@@ -52709,12 +52980,17 @@ 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$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'
+        }, children: [jsxRuntimeExports.jsxs(material.Box, { display: "flex", position: "relative", minHeight: '25px', children: [isTitleTruncated ? (jsxRuntimeExports.jsx(material.Tooltip, { title: title, arrow: true, children: jsxRuntimeExports.jsx(material.Typography, { ref: titleRef, component: "span", variant: "body2", letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, noWrap: true, sx: {
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            }, children: title }) })) : (jsxRuntimeExports.jsx(material.Typography, { ref: titleRef, component: "span", variant: "body2", letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, noWrap: true, sx: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: title })), isNotEditable ? null : isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(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(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) || '-' })) })] }));
+                    props.businessId ? (jsxRuntimeExports.jsx(SelectBusinessLabel, { value: String(value ?? ''), displayValue: String(displayValue ?? ''), businessId: props.businessId })) : (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", 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) => {
@@ -54546,13 +54822,19 @@ const ContactBox = material.styled(material.Box)(({ theme }) => ({
 }));
 const FieldName = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 600,
+    fontSize: '0.875rem',
     alignSelf: 'center',
     color: theme.palette.text.primary,
     letterSpacing: -0.5,
     padding: 0,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    minWidth: 0,
 }));
 const FieldValue = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 400,
+    fontSize: '0.875rem',
     padding: '2.5px 14px 8.5px 0px',
     color: theme.palette.text.primary,
     wordWrap: 'break-word',
@@ -54565,6 +54847,8 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
     const { setCustomProperties } = entity.action;
     const [isEditing, setIsEditing] = React$1.useState(false);
     const [isSaving, setIsSaving] = React$1.useState(false);
+    const titleRef = React$1.useRef(null);
+    const [isTitleTruncated, setIsTitleTruncated] = React$1.useState(false);
     const userDateFormat = (userTrii?.regCon_dateFormat || 'YYYY/MM/DD').toUpperCase();
     const userTimeFormat = userTrii?.regCon_timeFormat || '24';
     // Determina si el tipo de campo es numérico
@@ -54670,6 +54954,31 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
         const foundField = customContactFields.find((field) => field.nameKey === propertyNameKey);
         return foundField?.name || propertyNameKey;
     };
+    React$1.useEffect(() => {
+        const el = titleRef.current;
+        if (!el)
+            return;
+        const check = () => {
+            const next = el.scrollWidth > el.clientWidth;
+            setIsTitleTruncated(next);
+        };
+        check();
+        if (typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(() => {
+                check();
+            });
+            ro.observe(el);
+            return () => {
+                ro.disconnect();
+            };
+        }
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('resize', check);
+        return () => {
+            window.removeEventListener('resize', check);
+        };
+    }, [customContactFields, property.nameKey, isEditing]);
     const handleInputChange = (name, value) => {
         const updatedValue = property.type === Contacts.ContactField_type.DATERANGE
             ? Array.isArray(value) && value[0] && value[1]
@@ -54722,7 +55031,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$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)
+    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", alignItems: "center", children: [isTitleTruncated ? (jsxRuntimeExports.jsx(material.Tooltip, { title: getPropertyName(property.nameKey), arrow: true, children: jsxRuntimeExports.jsx(FieldName, { ref: titleRef, flexGrow: 1, noWrap: true, children: getPropertyName(property.nameKey) }) })) : (jsxRuntimeExports.jsx(FieldName, { ref: titleRef, flexGrow: 1, noWrap: true, children: getPropertyName(property.nameKey) })), isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(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') {
@@ -57189,7 +57498,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 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) => ({
+    const AddressGroup = ({ addressNumber, title, }) => (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4 rounded-xl p-4", children: [jsxRuntimeExports.jsx(material.Typography, { variant: "body2", 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 },
@@ -57229,11 +57538,31 @@ const useTagsEditorController = ({ open, baseUrl, spaceId, contactData, contactT
     const [draftLabels, setDraftLabels] = React$1.useState([]);
     const [tagsEditorInitialized, setTagsEditorInitialized] = React$1.useState(false);
     const [isSaving, setIsSaving] = React$1.useState(false);
+    const [createdLabels, setCreatedLabels] = React$1.useState([]);
+    const [isCreatingLabel, setIsCreatingLabel] = React$1.useState(false);
+    const labelsOptions = React$1.useMemo(() => {
+        const safeLabels = labels ?? [];
+        const safeCreated = createdLabels ?? [];
+        const byId = new Map();
+        for (const label of safeLabels) {
+            if (!label?.id)
+                continue;
+            byId.set(String(label.id), label);
+        }
+        for (const label of safeCreated) {
+            if (!label?.id)
+                continue;
+            byId.set(String(label.id), label);
+        }
+        return Array.from(byId.values());
+    }, [labels, createdLabels]);
     const reset = React$1.useCallback(() => {
         setView('main');
         setDraftLabels([]);
         setTagsEditorInitialized(false);
         setIsSaving(false);
+        setCreatedLabels([]);
+        setIsCreatingLabel(false);
     }, []);
     React$1.useEffect(() => {
         if (!open) {
@@ -57247,13 +57576,61 @@ const useTagsEditorController = ({ open, baseUrl, spaceId, contactData, contactT
         }
         if (tagsEditorInitialized)
             return;
-        if (!labels.length)
+        if (!labelsOptions.length)
             return;
         const selectedTagIds = new Set(selectedTags.map((t) => String(t.id)));
-        const initialDraft = labels.filter((l) => selectedTagIds.has(String(l?.id)));
+        const initialDraft = labelsOptions.filter((l) => selectedTagIds.has(String(l?.id)));
         setDraftLabels(initialDraft);
         setTagsEditorInitialized(true);
-    }, [view, tagsEditorInitialized, labels, selectedTags]);
+    }, [view, tagsEditorInitialized, labelsOptions, selectedTags]);
+    const handleCreateLabel = React$1.useCallback(async (name) => {
+        if (isCreatingLabel)
+            return;
+        if (!baseUrl || !spaceId)
+            return;
+        const trimmedName = String(name ?? '').trim();
+        if (!trimmedName)
+            return;
+        const normalizedName = trimmedName.toLowerCase();
+        const existing = labelsOptions.find((l) => String(l?.name ?? '')
+            .trim()
+            .toLowerCase() === normalizedName);
+        if (existing?.id) {
+            setDraftLabels((prev) => {
+                const safePrev = prev ?? [];
+                const existsInDraft = safePrev.some((p) => String(p?.id) === String(existing.id));
+                if (existsInDraft)
+                    return safePrev;
+                return [...safePrev, existing];
+            });
+            return;
+        }
+        setIsCreatingLabel(true);
+        try {
+            const created = await createLabel({ baseUrl, spaceId, name: trimmedName });
+            setCreatedLabels((prev) => {
+                const safePrev = prev ?? [];
+                if (!created?.id)
+                    return safePrev;
+                const existsInCreated = safePrev.some((p) => String(p?.id) === String(created.id));
+                if (existsInCreated)
+                    return safePrev;
+                return [...safePrev, created];
+            });
+            setDraftLabels((prev) => {
+                const safePrev = prev ?? [];
+                if (!created?.id)
+                    return safePrev;
+                const existsInDraft = safePrev.some((p) => String(p?.id) === String(created.id));
+                if (existsInDraft)
+                    return safePrev;
+                return [...safePrev, created];
+            });
+        }
+        finally {
+            setIsCreatingLabel(false);
+        }
+    }, [isCreatingLabel, baseUrl, spaceId, labelsOptions]);
     const handleSaveTags = React$1.useCallback(async () => {
         if (isSaving)
             return;
@@ -57287,28 +57664,32 @@ const useTagsEditorController = ({ open, baseUrl, spaceId, contactData, contactT
         setView,
         draftLabels,
         setDraftLabels,
+        labelsOptions,
         isSaving,
+        isCreatingLabel,
+        handleCreateLabel,
         handleSaveTags,
     };
 };
 
 const useModalCloseHandler = ({ onClose }) => {
-    const handleClose = React$1.useCallback((event, reason) => {
+    const handleClose = React$1.useCallback((_event, reason) => {
         if (reason === 'escapeKeyDown') {
-            const maybeEvent = event;
-            if (typeof maybeEvent?.stopPropagation === 'function') {
-                maybeEvent.stopPropagation();
-            }
-            if (typeof maybeEvent?.preventDefault === 'function') {
-                maybeEvent.preventDefault();
-            }
+            return;
         }
         onClose();
     }, [onClose]);
     return handleClose;
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, navigate, }) => {
+const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
+    const { t: i18nT, i18n } = reactI18next.useTranslation();
+    React$1.useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+    const t = (key) => i18nT(key);
     const api = React$1.useMemo(() => {
         if (!baseUrl || !spaceId)
             return null;
@@ -57324,7 +57705,7 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, n
         entity: state.contactData,
         setEntity: (next) => actions.setContactData(next ?? undefined),
     });
-    const { view, setView, draftLabels, setDraftLabels, isSaving: isSavingTags, handleSaveTags, } = useTagsEditorController({
+    const { view, setView, draftLabels, setDraftLabels, labelsOptions, isSaving: isSavingTags, isCreatingLabel, handleCreateLabel, handleSaveTags, } = useTagsEditorController({
         open,
         baseUrl,
         spaceId,
@@ -57364,22 +57745,29 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, n
         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(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 }) }) }) }) }) }));
-};
-
+    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.jsxs(material.Box, { sx: mergedSx, children: [jsxRuntimeExports.jsx(material.IconButton, { "aria-label": "close", onClick: handleClose, sx: {
+                                        position: 'absolute',
+                                        right: 8,
+                                        top: 8,
+                                        color: (theme) => theme.palette.grey[500],
+                                        zIndex: 1,
+                                    }, children: jsxRuntimeExports.jsx(default_1$g, {}) }), 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: labelsOptions, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, onCreateNew: handleCreateLabel, isCreatingNew: isCreatingLabel }) }) })] }) })) : null] }) }) }) }) }) }));
+};
+
+exports.i18n = i18n;
 exports.ContactInfoPopup = ContactInfoPopup;
 exports.EditContactModal = EditContactModal;
 //# sourceMappingURL=index.js.map