@trii/components 2.0.3 → 2.0.5

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,
 });
@@ -14240,8 +14243,9 @@ 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,
@@ -14251,7 +14255,7 @@ const PopupContainer = material.styled(material.Box)({
     padding: '8px',
     zIndex: 1300,
     '&::-webkit-scrollbar': {
-        width: 8,
+        width: 5,
     },
     '&::-webkit-scrollbar-track': {
         background: '#E0E0E0',
@@ -14265,7 +14269,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 +14279,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',