@trii/components 2.0.3 → 2.0.6

package/dist/cjs/index.js

@@ -8296,13 +8296,16 @@ var WhatsApp = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"
 }), 'WhatsApp');
 
-const ButtonsContainer = material.styled(material.Box)({
+const ButtonsContainer = material.styled(material.Box)(({ theme }) => ({
     position: 'absolute',
     top: 8,
     right: 8,
     display: 'flex',
     gap: 4,
-});
+    zIndex: 1,
+    //@ts-ignore
+    backgroundColor: theme.palette.background.panel,
+}));
 const SmallIconButton = material.styled(material.IconButton)({
     padding: 4,
 });
@@ -8354,9 +8357,10 @@ const StyledBox = material.styled(material.Box)({
     padding: 1,
     minHeight: '50px',
     position: 'relative',
+    maxWidth: 'inherit'
 });
 const IconBox = material.styled(material.Box)(({ theme }) => ({
-    marginTop: '-3px',
+    marginTop: '-20px',
     padding: 0,
     color: theme.palette.primary.main,
 }));
@@ -8373,15 +8377,15 @@ const InfoContainer = material.styled(material.Box)({
 const AddressContainer = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
-    height: '40px',
+    height: '50px',
 });
 const NoteText = material.styled(material.Typography)({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    maxWidth: '100%',
+    maxWidth: '90%',
     position: 'absolute',
-    bottom: 10,
+    bottom: 16,
     left: 40,
 });
 const ContactMethod = ({ icon, contactList, title, showTitle = true, }) => {
@@ -8390,8 +8394,8 @@ const ContactMethod = ({ icon, contactList, title, showTitle = true, }) => {
                                     textOverflow: 'ellipsis',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                    maxWidth: '100%',
-                                }, children: contact.address }) }), contact.profileName && (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", fontSize: 10, color: "text.disabled", sx: { marginLeft: '5px' }, children: contact.profileName }))] }), contact.note && (jsxRuntimeExports.jsx(NoteText, { variant: "body2", fontSize: 12, color: "text.secondary", children: contact.note }))] }) }, contact.id));
+                                    maxWidth: '00%',
+                                }, children: contact.address }) }), contact.profileName && (jsxRuntimeExports.jsx(material.Typography, { variant: "body2", fontSize: 10, color: "text.disabled", sx: { marginLeft: '5px', marginTop: '10px' }, children: contact.profileName }))] }), contact.note && (jsxRuntimeExports.jsx(NoteText, { variant: "body2", fontSize: 12, color: "text.secondary", children: contact.note }))] }) }, contact.id));
     return (jsxRuntimeExports.jsxs(Container$1, { children: [showTitle && (jsxRuntimeExports.jsx(TitleBox, { children: jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", fontWeight: "bold", gutterBottom: true, mt: 2, children: title }) })), contactList?.map(renderContactInfo)] }));
 };
 
@@ -14240,18 +14244,19 @@ const Properties = ({ properties, title }) => {
     return (jsxRuntimeExports.jsxs(Container, { children: [jsxRuntimeExports.jsx(SectionTitle$1, { fontWeight: "bold", gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), properties?.map((property, i) => property.value.length > 0 && (jsxRuntimeExports.jsxs(PropertyItem, { children: [jsxRuntimeExports.jsx(PropertyIcon, {}), jsxRuntimeExports.jsxs(PropertyText, { children: [getPropertyTitle(property.nameKey), ":", ' ', formatPropertyValue(property.value, property.type)] })] }, i)))] }));
 };
 
-const PopupContainer = material.styled(material.Box)({
-    backgroundColor: 'white',
+const PopupContainer = material.styled(material.Box)(({ theme }) => ({
+    //@ts-ignore
+    backgroundColor: theme.palette.background.panel,
     boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
     borderRadius: '8px',
     width: 300,
-    maxHeight: '600px',
+    maxHeight: 'calc(100vh - 500px)',
     overflowY: 'auto',
     transition: 'opacity 0.3s ease, transform 0.3s ease',
     padding: '8px',
     zIndex: 1300,
     '&::-webkit-scrollbar': {
-        width: 8,
+        width: 5,
     },
     '&::-webkit-scrollbar-track': {
         background: '#E0E0E0',
@@ -14265,7 +14270,7 @@ const PopupContainer = material.styled(material.Box)({
     '&::-webkit-scrollbar-thumb:hover': {
         background: '#616161',
     },
-});
+}));
 const SectionTitle = material.styled(material.Typography)({
     fontWeight: 'bold',
     marginBottom: '8px',
@@ -14275,10 +14280,11 @@ const SectionTitle = material.styled(material.Typography)({
 const TagContainer = material.styled(material.Box)({
     marginBottom: 16,
 });
-const StyledChip = material.styled(material.Chip)({
+const StyledChip = material.styled(material.Chip)(({ theme }) => ({
     marginRight: 8,
     marginBottom: 8,
-});
+    backgroundColor: `${theme.palette.primary.main}b3`
+}));
 const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, handleNavigateToContacts = () => { }, t = (key) => ({
     labels: 'Etiquetas',
     phone: 'Teléfono',