@m4l/components 9.71.0 → 9.72.0-beta-hotfix-image-button.0

package/components/extended/mui/IconButton/IconButton.styles.js

@@ -1,176 +1,247 @@
-import { getSizeStyles as i } from "../../../../utils/getSizeStyles/getSizeStyles.js";
-import { getIconButtonColors as l } from "./helpers/getIconButtonColors.js";
-const d = {
-  /**
-   * 🔘 Estilos generales para el componente IconButton
-   * Define la apariencia base y todos los estados interactivos
-   */
-  styledMUIIconButton: ({ ownerState: o, theme: c }) => {
-    const r = o?.disabled ? c.vars.palette.default : c.vars.palette[o?.color || "default"];
-    return {
-      "&&&": {
-        // 🔧 Triple & para aumentar la especificidad CSS
-        overflow: "hidden",
-        cursor: o?.disabled ? "not-allowed" : "pointer",
-        color: c.vars.palette.text.primary,
-        borderRadius: c.size.borderRadius["r1-5"],
-        pointerEvents: o?.disabled ? "none" : "auto",
-        display: o?.isSkeleton ? "none" : "flex",
-        justifyContent: "center",
-        padding: 0,
-        // 🖼️ Estilos para el icono dentro del botón
+import { getOriginalSvgIconPaintStyles as p } from "@m4l/base";
+import { getSizeStyles as s } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+import { getIconButtonColors as b } from "./helpers/getIconButtonColors.js";
+function l(o, a) {
+  return o ? a : {};
+}
+function g({ ownerState: o, theme: a }, { includeIconColorStyles: i = !0 } = {}) {
+  const r = o?.disabled ? a.vars.palette.default : a.vars.palette[o?.color || "default"], u = o?.originalColor === !0, t = o?.variant !== "text", v = o?.color === "default" ? a.vars.palette.border.default : r.enabled, e = o?.color === "default" ? a.vars.palette.border.default : r.hover, c = o?.color === "default" ? a.vars.palette.primary.active : r.active, n = o?.selected ? c : v;
+  return {
+    "&&&": {
+      // 🔧 Triple & para aumentar la especificidad CSS
+      overflow: "hidden",
+      cursor: o?.disabled ? "not-allowed" : "pointer",
+      color: a.vars.palette.text.primary,
+      borderRadius: a.size.borderRadius["r1-5"],
+      pointerEvents: o?.disabled ? "none" : "auto",
+      display: o?.isSkeleton ? "none" : "flex",
+      justifyContent: "center",
+      padding: 0,
+      // 🖼️ Estilos para el icono dentro del botón
+      ...l(i, {
         "&&& .M4LIcon-icon": {
           backgroundColor: o?.variant === "contained" ? r.contrastText : r.semanticText
+        }
+      }),
+      // 🔍 Estado Focus-visible
+      "&:focus-visible": {
+        outline: a.vars.size.borderStroke.container,
+        outlineColor: a.vars.palette.default.focusVisible,
+        outlineOffset: "-1px",
+        ...o?.variant === "outline" && {
+          backgroundColor: r.hoverOpacity
         },
-        // 🔍 Estado Focus-visible
-        "&:focus-visible": {
-          outline: c.vars.size.borderStroke.container,
-          outlineColor: c.vars.palette.default.focusVisible,
-          outlineOffset: "-1px",
-          ...o?.variant === "outline" && {
-            backgroundColor: r.hoverOpacity
-          },
-          ...o?.variant === "text" && {
-            backgroundColor: r.hoverOpacity
-          }
-        },
-        "&:-webkit-any-link:focus-visible": {
-          outline: c.vars.size.borderStroke.container,
-          outlineColor: c.vars.palette.default.focusVisible,
-          outlineOffset: "-1px"
-        },
-        /**
-         * ✅ ESTADO SELECCIONADO
-         * Maneja la apariencia cuando el botón está seleccionado (selected=true)
-         */
-        ...o?.selected === !0 ? {
-          // Estilos para la variante contained
-          ...o?.variant === "contained" && {
-            // 🎯 Color de fondo según variante y color del componente
-            backgroundColor: o?.variant === "contained" ? o?.color === "error" ? r.active : o?.color === "default" ? c.vars.palette.primary.selected : o?.color === "success" ? c.vars.palette.success.selected : r.selected : o?.color === "error" ? r.activeOpacity : r.selectedOpacity,
+        ...o?.variant === "text" && {
+          backgroundColor: r.hoverOpacity
+        }
+      },
+      "&:-webkit-any-link:focus-visible": {
+        outline: a.vars.size.borderStroke.container,
+        outlineColor: a.vars.palette.default.focusVisible,
+        outlineOffset: "-1px"
+      },
+      /**
+       * ✅ ESTADO SELECCIONADO
+       * Maneja la apariencia cuando el botón está seleccionado (selected=true)
+       */
+      ...o?.selected === !0 ? {
+        // Estilos para la variante contained
+        ...o?.variant === "contained" && {
+          // 🎯 Color de fondo según variante y color del componente
+          backgroundColor: o?.variant === "contained" ? o?.color === "error" ? r.active : o?.color === "default" ? a.vars.palette.primary.selected : o?.color === "success" ? a.vars.palette.success.selected : r.selected : o?.color === "error" ? r.activeOpacity : r.selectedOpacity,
+          ...l(i, {
             "&&& .M4LIcon-icon": {
-              backgroundColor: o?.variant === "contained" ? c.vars.palette.primary.contrastText : r.semanticText
+              backgroundColor: o?.variant === "contained" ? a.vars.palette.primary.contrastText : r.semanticText
             }
-          },
-          // Estilos para la variante text
-          ...o.variant === "outline" && {
-            backgroundColor: o.color === "default" ? c.vars.palette.primary.selectedOpacity : r.selectedOpacity,
-            border: c.vars.size.borderStroke.actionInput,
-            borderColor: o.color === "default" ? c.vars.palette.primary.active : r.active,
+          })
+        },
+        // Estilos para la variante text
+        ...o?.variant === "outline" && {
+          backgroundColor: o?.color === "default" ? a.vars.palette.primary.selectedOpacity : r.selectedOpacity,
+          border: a.vars.size.borderStroke.actionInput,
+          borderColor: o?.color === "default" ? a.vars.palette.primary.active : r.active,
+          ...l(i, {
             "&&& .M4LIcon-icon": {
-              backgroundColor: o.color === "default" ? c.vars.palette.primary.semanticText : o.color === "warning" ? r.active : r.selected
+              backgroundColor: o?.color === "default" ? a.vars.palette.primary.semanticText : o?.color === "warning" ? r.active : r.selected
             }
-          },
-          ...o.variant === "text" && {
-            backgroundColor: o.color === "default" ? c.vars.palette.primary.selectedOpacity : r.selectedOpacity,
+          })
+        },
+        ...o?.variant === "text" && {
+          backgroundColor: o?.color === "default" ? a.vars.palette.primary.selectedOpacity : r.selectedOpacity,
+          ...l(i, {
             "&&& .M4LIcon-icon": {
-              backgroundColor: o.color === "default" ? c.vars.palette.primary.semanticText : o.color === "warning" ? r.active : r.selected
+              backgroundColor: o?.color === "default" ? a.vars.palette.primary.semanticText : o?.color === "warning" ? r.active : r.selected
             }
-          }
-        } : {
-          /**
-           * 🔄 ESTADO NORMAL (NO SELECCIONADO)
-           * Define estilos para los diferentes estados y variantes cuando no está seleccionado
-           */
-          /**
-           * 📝 VARIANTE TEXT
-           * Apariencia base y estados interactivos para la variante text
-           */
-          ...o?.variant === "text" && {
+          })
+        }
+      } : {
+        /**
+         * 🔄 ESTADO NORMAL (NO SELECCIONADO)
+         * Define estilos para los diferentes estados y variantes cuando no está seleccionado
+         */
+        /**
+         * 📝 VARIANTE TEXT
+         * Apariencia base y estados interactivos para la variante text
+         */
+        ...o?.variant === "text" && {
+          ...l(i, {
             "&&& .M4LIcon-icon": {
               backgroundColor: r.semanticText
-            },
-            // 🖱️ Estado Hover
-            "&:hover": {
-              backgroundColor: r.hoverOpacity,
+            }
+          }),
+          // 🖱️ Estado Hover
+          "&:hover": {
+            backgroundColor: r.hoverOpacity,
+            ...l(i, {
               "&&& .M4LIcon-icon": {}
-            },
-            // 👇 Estado Active
-            "&:active": {
-              backgroundColor: r.activeOpacity,
+            })
+          },
+          // 👇 Estado Active
+          "&:active": {
+            backgroundColor: r.activeOpacity,
+            ...l(i, {
               "&&& .M4LIcon-icon": {
                 backgroundColor: o?.color === "default" ? r.semanticText : r.active
               }
-            }
+            })
+          }
+        },
+        /**
+         * ⚪ VARIANTE OUTLINE
+         * Apariencia base y estados interactivos para la variante outline
+         */
+        ...o?.variant === "outline" && {
+          // 🖋️ Borde diferente según el color del componente
+          ...o?.color !== "default" && {
+            border: `1px solid ${r.enabled}`
+          },
+          ...o?.color === "default" && {
+            border: `1px solid ${a.vars.palette.border.default}`
           },
-          /**
-           * ⚪ VARIANTE OUTLINE
-           * Apariencia base y estados interactivos para la variante outline
-           */
-          ...o?.variant === "outline" && {
-            // 🖋️ Borde diferente según el color del componente
-            ...o?.color !== "default" && {
-              border: `1px solid ${r.enabled}`
-            },
-            ...o?.color === "default" && {
-              border: `1px solid ${c.vars.palette.border.default}`
-            },
-            // 🖱️ Estado Hover
-            "&:hover": {
-              background: r.hoverOpacity,
-              border: o.color === "default" ? `1px solid ${c.vars.palette.border.default}` : `1px solid ${r.hover}`,
+          // 🖱️ Estado Hover
+          "&:hover": {
+            background: r.hoverOpacity,
+            border: o?.color === "default" ? `1px solid ${a.vars.palette.border.default}` : `1px solid ${r.hover}`,
+            ...l(i, {
               "&&& .M4LIcon-icon": {}
-            },
-            // 👇 Estado Active
-            "&:active": {
-              background: r.activeOpacity,
-              border: o.color === "default" ? `1px solid ${c.vars.palette.border.default}` : `1px solid ${r.active}`,
+            })
+          },
+          // 👇 Estado Active
+          "&:active": {
+            background: r.activeOpacity,
+            border: o?.color === "default" ? `1px solid ${a.vars.palette.border.default}` : `1px solid ${r.active}`,
+            ...l(i, {
               "&&& .M4LIcon-icon": {
                 backgroundColor: o?.color === "default" ? r.semanticText : r.active
               }
-            }
-          },
-          /**
-           * 🔵 VARIANTE CONTAINED
-           * Apariencia base y estados interactivos para la variante contained
-           */
-          ...o?.variant === "contained" && {
-            backgroundColor: r.enabled,
-            // 🖼️ Color del icono
-            "&&& .M4LIcon-icon": {
-              backgroundColor: o?.color === "default" ? r.semanticText : r.contrastText
-            },
-            // 🖱️ Estado Hover
-            "&:hover": {
-              background: r.hover
-            },
-            // 👇 Estado Active
-            "&:active": {
-              background: r.active
-            }
+            })
           }
         },
         /**
-         * 🚫 ESTADO DISABLED
-         * Estilos específicos para cuando el botón está deshabilitado
+         * 🔵 VARIANTE CONTAINED
+         * Apariencia base y estados interactivos para la variante contained
          */
-        ...o?.disabled === !0 && {
-          "&&& .M4LIcon-icon": {
-            color: c.vars.palette.text.disabled
+        ...o?.variant === "contained" && {
+          backgroundColor: r.enabled,
+          // 🖼️ Color del icono
+          ...l(i, {
+            "&&& .M4LIcon-icon": {
+              backgroundColor: o?.color === "default" ? r.semanticText : r.contrastText
+            }
+          }),
+          // 🖱️ Estado Hover
+          "&:hover": {
+            background: r.hover
+          },
+          // 👇 Estado Active
+          "&:active": {
+            background: r.active
           }
-        },
-        /**
-         * 📏 TAMAÑOS DEL COMPONENTE
-         * Aplica dimensiones según el tamaño especificado (small, medium, large)
-         */
-        ...i(
-          c,
-          o?.size || "medium",
-          "action",
-          (a) => ({
-            width: a,
-            height: a
-          })
-        ),
-        // 🔲 Estilos para el imagen dentro del botón
-        "&&& .M4LImage-root": {
+        }
+      },
+      /**
+       * 🚫 ESTADO DISABLED
+       * Estilos específicos para cuando el botón está deshabilitado
+       */
+      ...o?.disabled === !0 && l(i, {
+        "&&& .M4LIcon-icon": {
+          color: a.vars.palette.text.disabled
+        }
+      }),
+      /**
+       * 📏 TAMAÑOS DEL COMPONENTE
+       * Aplica dimensiones según el tamaño especificado (small, medium, large)
+       */
+      ...s(
+        a,
+        o?.size || "medium",
+        "action",
+        (d) => ({
+          width: d,
+          height: d
+        })
+      ),
+      // 🔲 Estilos para el imagen dentro del botón
+      "&&& .M4LImage-root": {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        minHeight: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        objectFit: "contain",
+        overflow: "visible",
+        "& .MuiSvgIcon-root, & svg": {
           width: "100%",
           height: "100%",
-          objectFit: "cover"
+          maxWidth: "100%",
+          maxHeight: "100%",
+          display: "block",
+          flexShrink: 0
+        }
+      },
+      ...u && {
+        background: "transparent",
+        backgroundColor: "transparent",
+        ...t && {
+          border: `1px solid ${n}`,
+          borderColor: n
+        },
+        "&:hover": {
+          background: "transparent",
+          backgroundColor: "transparent",
+          ...t && {
+            border: `1px solid ${e}`,
+            borderColor: e
+          }
+        },
+        "&:active": {
+          background: "transparent",
+          backgroundColor: "transparent",
+          ...t && {
+            border: `1px solid ${c}`,
+            borderColor: c
+          }
+        },
+        "&:focus-visible": {
+          outline: a.vars.size.borderStroke.container,
+          outlineColor: a.vars.palette.default.focusVisible,
+          outlineOffset: "-1px",
+          background: "transparent",
+          backgroundColor: "transparent"
         }
       }
-    };
-  },
+    },
+    ...o?.originalColor && p()
+  };
+}
+const x = {
+  /**
+   * 🔘 Estilos generales para el componente IconButton
+   * Define la apariencia base y todos los estados interactivos
+   */
+  styledMUIIconButton: g,
   /**
    * 🏷️ Estilos para el badge del IconButton
    * Actualmente no implementado, pendiente de documentación en Figma
@@ -180,15 +251,15 @@ const d = {
    * ⌛ Estilos para el estado skeleton del IconButton
    * Aplicados cuando se muestra un esqueleto de carga
    */
-  skeleton: ({ theme: o, ownerState: c }) => ({
+  skeleton: ({ theme: o, ownerState: a }) => ({
     "&.M4lclassCssSpecificity": {
-      ...i(
+      ...s(
         o,
-        c?.size || "medium",
+        a?.size || "medium",
         "action",
-        (r) => ({
-          width: r,
-          height: r
+        (i) => ({
+          width: i,
+          height: i
         })
       )
     }
@@ -197,15 +268,16 @@ const d = {
    * 🎭 Estilos específicos para el icono dentro del IconButton
    * Personaliza el color del icono según el estado del botón
    */
-  icon: ({ theme: o, ownerState: c }) => {
-    const { iconColor: r } = l(o, c);
+  icon: ({ theme: o, ownerState: a }) => {
+    const { iconColor: i } = b(o, a);
     return {
       '& [class*="M4LIcon-icon"]': {
-        backgroundColor: r
+        backgroundColor: i
       }
     };
   }
 };
 export {
-  d as iconButtonStyles
+  g as getIconButtonShellStyles,
+  x as iconButtonStyles
 };

package/components/extended/mui/IconButton/types.d.ts

@@ -31,11 +31,13 @@ export interface IconButtonProps extends Partial<Omit<IconProps, 'size' | 'color
     dataTestId?: string;
     /** Propiedad que sirve para cambiar al modo seleccionado */
     selected?: boolean;
+    /** Restores authored fills for multicolor SVG component sources. */
+    originalColor?: IconProps['originalColor'];
     /** Propiedades para el componente badge */
     badgeProps?: BadgeProps;
 }
 /** Tipo `IconButtonOwnerState` que define los valores que tendrá el ownerState */
-export type IconButtonOwnerState = Pick<IconButtonProps, 'size' | 'variant' | 'selected' | 'color'> & {
+export type IconButtonOwnerState = Pick<IconButtonProps, 'size' | 'variant' | 'selected' | 'color' | 'originalColor'> & {
     disabled?: boolean;
     isSkeleton: boolean;
 };

package/components/extended/mui/IconButton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/IconButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,qDAAqD;AACrD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,eACf,SAAQ,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,SAAS,GAAG,gBAAgB,CAAC,CAAC,EAClH,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC,EAC/D,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAE/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;IACxG,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qMAAqM;IACrM,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gHAAgH;IAChH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;CAEzB;AAED,kFAAkF;AAClF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACpG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,eAAe,CAAC;AAE/D,6EAA6E;AAC7E,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,mBAAmB,EAAE,OAAO,yBAAyB,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/IconButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,qDAAqD;AACrD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,eACf,SAAQ,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,SAAS,GAAG,gBAAgB,CAAC,CAAC,EAClH,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC,EAC/D,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAE/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;IACxG,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qMAAqM;IACrM,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gHAAgH;IAChH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAE3C,2CAA2C;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;CAEzB;AAED,kFAAkF;AAClF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IACtH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,eAAe,CAAC;AAE/D,6EAA6E;AAC7E,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,mBAAmB,EAAE,OAAO,yBAAyB,EAAE,KAAK,CAAC,CAAC"}

package/components/extended/mui/ImageButton/ImageButton.d.ts

@@ -1,6 +1,6 @@
 import { ImageButtonProps } from './types';
 /**
- * TODO: Documentar
+ * Render an image source inside an icon button with optional tooltip support.
  */
-export declare function ImageButton({ src, width, tooltip, sx, className, dataTestId, alt, ...other }: ImageButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ImageButton({ src, width, tooltip, sx, className, dataTestId, alt, threshold, enableIntersectionObserver, disabled, onClick, size, variant, color, selected, ...other }: ImageButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImageButton.d.ts.map

package/components/extended/mui/ImageButton/ImageButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/ImageButton/ImageButton.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,OAAO,EACP,EAAqB,EACrB,SAAS,EACT,UAAU,EACV,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,oDAyBlB"}
+{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/ImageButton/ImageButton.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAyB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQlE;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,OAAO,EACP,EAAE,EACF,SAAS,EACT,UAAU,EACV,GAAG,EACH,SAAS,EACT,0BAA0B,EAC1B,QAAQ,EACR,OAAO,EACP,IAAe,EACf,OAAgB,EAChB,KAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,oDA8DlB"}

package/components/extended/mui/ImageButton/ImageButton.js

@@ -1,41 +1,86 @@
 import { jsx as o } from "@emotion/react/jsx-runtime";
-import { useMemo as E } from "react";
-import T from "clsx";
-import { IconButton as _, Tooltip as I } from "@mui/material";
-import { Image as O } from "../../../Image/Image.js";
-import { WrapperImageButton as g } from "./styles.js";
-import { useUtilityClasses as B } from "./utils/Clases/index.js";
-import { TEST_PROP_ID as p } from "../../../../test/constants_no_mock.js";
-import { getNameDataTestId as s } from "../../../../test/getNameDataTestId.js";
-import { IMAGE_BUTTON_KEY_COMPONENT as c } from "./tests/constants.js";
-function b({
-  src: t,
-  width: r,
-  tooltip: f,
-  sx: m = { width: r },
-  className: l,
+import h from "clsx";
+import { useMemo as O } from "react";
+import { Tooltip as w } from "@mui/material";
+import { Image as R } from "../../../Image/Image.js";
+import { StyledMUIImageButton as V, ImageButtonResourceStyled as j, WrapperImageButton as k } from "./styles.js";
+import { useUtilityClasses as v, imageButtonClasses as g } from "./utils/Clases/index.js";
+import { useComponentSize as M } from "../../../../hooks/useComponentSize/index.js";
+import { TEST_PROP_ID as l } from "../../../../test/constants_no_mock.js";
+import { getNameDataTestId as u } from "../../../../test/getNameDataTestId.js";
+import { componentName as a } from "./utils/Clases/constants.js";
+function Q({
+  src: d,
+  width: P,
+  tooltip: S,
+  sx: E,
+  className: B,
   dataTestId: e,
-  alt: u,
-  ...a
+  alt: x,
+  threshold: y,
+  enableIntersectionObserver: C,
+  disabled: t,
+  onClick: D,
+  size: I = "medium",
+  variant: r = "text",
+  color: m = "default",
+  selected: i = !1,
+  ..._
 }) {
-  const i = f, N = B(), n = E(() => /* @__PURE__ */ o(
-    _,
+  const n = S, s = v(), { currentSize: p } = M(I), f = p === "small" || p === "medium" ? p : "medium", N = O(() => ({
+    variant: r,
+    size: f,
+    disabled: t,
+    color: m,
+    selected: i,
+    isSkeleton: !1
+  }), [r, f, t, m, i]), c = /* @__PURE__ */ o(
+    V,
     {
-      sx: m,
-      ...a,
-      ...process.env.NODE_ENV !== "production" ? { [p]: s(c, "button", e) } : {},
-      children: /* @__PURE__ */ o(O, { src: t, alt: u })
+      sx: E,
+      ..._,
+      ownerState: N,
+      onClick: t ? void 0 : D,
+      disableRipple: !0,
+      disabled: t,
+      color: m,
+      className: h(
+        s.button,
+        g[r],
+        i && g.selected
+      ),
+      ...process.env.NODE_ENV !== "production" ? { [l]: u(a, "button", e) } : {},
+      children: /* @__PURE__ */ o(
+        j,
+        {
+          ownerState: N,
+          className: s.resource,
+          ...process.env.NODE_ENV !== "production" ? { [l]: u(a, "resource", e) } : {},
+          children: /* @__PURE__ */ o(
+            R,
+            {
+              src: d,
+              alt: x,
+              width: "100%",
+              height: "100%",
+              threshold: y,
+              enableIntersectionObserver: C,
+              dataTestId: e
+            }
+          )
+        }
+      )
     }
-  ), [t, r, m]);
+  ), z = n && t ? /* @__PURE__ */ o("span", { style: { display: "inline-flex" }, children: c }) : c;
   return /* @__PURE__ */ o(
-    g,
+    k,
     {
-      className: T(N.root, l),
-      ...process.env.NODE_ENV !== "production" ? { [p]: s(c, "root", e) } : {},
-      children: i ? /* @__PURE__ */ o(I, { title: i || "", children: n }) : n
+      className: h(s.root, B),
+      ...process.env.NODE_ENV !== "production" ? { [l]: u(a, "root", e) } : {},
+      children: n ? /* @__PURE__ */ o(w, { title: n, children: z }) : c
     }
   );
 }
 export {
-  b as ImageButton
+  Q as ImageButton
 };

package/components/extended/mui/ImageButton/styles.d.ts

@@ -1,2 +1,21 @@
-export declare const WrapperImageButton: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { ImageButtonOwnerState, ImageButtonStyles } from './types';
+type ImageButtonBaseProps = MUIIconButtonProps & {
+    ownerState: ImageButtonOwnerState;
+};
+export declare const imageButtonStyles: ImageButtonStyles;
+export declare const WrapperImageButton: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<ImageButtonOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Styled ImageButton shell that mirrors M4L IconButton shape styles.
+ */
+export declare const StyledMUIImageButton: import('@emotion/styled').StyledComponent<Pick<Omit<ImageButtonBaseProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "action" | "classes" | "children" | "className" | "sx" | "form" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "component" | "name" | "size" | "type" | "ownerState" | "value" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+/**
+ * Resource area of the ImageButton: the `base` token box the nested Image fills.
+ */
+export declare const ImageButtonResourceStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<ImageButtonOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export {};
 //# sourceMappingURL=styles.d.ts.map

package/components/extended/mui/ImageButton/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/ImageButton/styles.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,kBAAkB,6NAC5B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/ImageButton/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,eAAe,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnG,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGnE,KAAK,oBAAoB,GAAG,kBAAkB,GAAG;IAC/C,UAAU,EAAE,qBAAqB,CAAC;CACnC,CAAC;AAWF,eAAO,MAAM,iBAAiB,EAAE,iBAmC/B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;6NAGL,CAAC;AAE3B;;GAEG;AACH,eAAO,MAAM,oBAAoB,wkLAQhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB;;iOAGR,CAAC"}