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

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

@@ -1,247 +1,176 @@
-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, {
+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
         "&&& .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
         },
-        ...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, {
+        // 🔍 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,
             "&&& .M4LIcon-icon": {
-              backgroundColor: o?.variant === "contained" ? a.vars.palette.primary.contrastText : r.semanticText
+              backgroundColor: o?.variant === "contained" ? c.vars.palette.primary.contrastText : r.semanticText
             }
-          })
-        },
-        // 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, {
+          },
+          // 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,
             "&&& .M4LIcon-icon": {
-              backgroundColor: o?.color === "default" ? a.vars.palette.primary.semanticText : o?.color === "warning" ? r.active : r.selected
+              backgroundColor: o.color === "default" ? c.vars.palette.primary.semanticText : o.color === "warning" ? r.active : r.selected
             }
-          })
-        },
-        ...o?.variant === "text" && {
-          backgroundColor: o?.color === "default" ? a.vars.palette.primary.selectedOpacity : r.selectedOpacity,
-          ...l(i, {
+          },
+          ...o.variant === "text" && {
+            backgroundColor: o.color === "default" ? c.vars.palette.primary.selectedOpacity : r.selectedOpacity,
             "&&& .M4LIcon-icon": {
-              backgroundColor: o?.color === "default" ? a.vars.palette.primary.semanticText : o?.color === "warning" ? r.active : r.selected
+              backgroundColor: o.color === "default" ? c.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" && {
-          ...l(i, {
+          }
+        } : {
+          /**
+           * 🔄 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" && {
             "&&& .M4LIcon-icon": {
               backgroundColor: r.semanticText
-            }
-          }),
-          // 🖱️ Estado Hover
-          "&:hover": {
-            backgroundColor: r.hoverOpacity,
-            ...l(i, {
+            },
+            // 🖱️ Estado Hover
+            "&:hover": {
+              backgroundColor: r.hoverOpacity,
               "&&& .M4LIcon-icon": {}
-            })
-          },
-          // 👇 Estado Active
-          "&:active": {
-            backgroundColor: r.activeOpacity,
-            ...l(i, {
+            },
+            // 👇 Estado Active
+            "&:active": {
+              backgroundColor: r.activeOpacity,
               "&&& .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}`
+            }
           },
-          // 🖱️ Estado Hover
-          "&:hover": {
-            background: r.hoverOpacity,
-            border: o?.color === "default" ? `1px solid ${a.vars.palette.border.default}` : `1px solid ${r.hover}`,
-            ...l(i, {
+          /**
+           * ⚪ 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}`,
               "&&& .M4LIcon-icon": {}
-            })
-          },
-          // 👇 Estado Active
-          "&:active": {
-            background: r.activeOpacity,
-            border: o?.color === "default" ? `1px solid ${a.vars.palette.border.default}` : `1px solid ${r.active}`,
-            ...l(i, {
+            },
+            // 👇 Estado Active
+            "&:active": {
+              background: r.activeOpacity,
+              border: o.color === "default" ? `1px solid ${c.vars.palette.border.default}` : `1px solid ${r.active}`,
               "&&& .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
-          ...l(i, {
+            }
+          },
+          /**
+           * 🔵 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 Hover
-          "&:hover": {
-            background: r.hover
-          },
-          // 👇 Estado Active
-          "&:active": {
-            background: r.active
-          }
-        }
-      },
-      /**
-       * 🚫 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%",
-          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
+        /**
+         * 🚫 ESTADO DISABLED
+         * Estilos específicos para cuando el botón está deshabilitado
+         */
+        ...o?.disabled === !0 && {
+          "&&& .M4LIcon-icon": {
+            color: c.vars.palette.text.disabled
           }
         },
-        "&:focus-visible": {
-          outline: a.vars.size.borderStroke.container,
-          outlineColor: a.vars.palette.default.focusVisible,
-          outlineOffset: "-1px",
-          background: "transparent",
-          backgroundColor: "transparent"
+        /**
+         * 📏 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": {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
         }
       }
-    },
-    ...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
@@ -251,15 +180,15 @@ const x = {
    * ⌛ Estilos para el estado skeleton del IconButton
    * Aplicados cuando se muestra un esqueleto de carga
    */
-  skeleton: ({ theme: o, ownerState: a }) => ({
+  skeleton: ({ theme: o, ownerState: c }) => ({
     "&.M4lclassCssSpecificity": {
-      ...s(
+      ...i(
         o,
-        a?.size || "medium",
+        c?.size || "medium",
         "action",
-        (i) => ({
-          width: i,
-          height: i
+        (r) => ({
+          width: r,
+          height: r
         })
       )
     }
@@ -268,16 +197,15 @@ const x = {
    * 🎭 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: a }) => {
-    const { iconColor: i } = b(o, a);
+  icon: ({ theme: o, ownerState: c }) => {
+    const { iconColor: r } = l(o, c);
     return {
       '& [class*="M4LIcon-icon"]': {
-        backgroundColor: i
+        backgroundColor: r
       }
     };
   }
 };
 export {
-  g as getIconButtonShellStyles,
-  x as iconButtonStyles
+  d as iconButtonStyles
 };

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

@@ -31,13 +31,11 @@ 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' | 'originalColor'> & {
+export type IconButtonOwnerState = Pick<IconButtonProps, 'size' | 'variant' | 'selected' | 'color'> & {
     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;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"}
+{"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"}

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

@@ -1,6 +1,6 @@
 import { ImageButtonProps } from './types';
 /**
- * Render an image source inside an icon button with optional tooltip support.
+ * TODO: Documentar
  */
-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;
+export declare function ImageButton({ src, width, tooltip, sx, className, dataTestId, alt, ...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,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"}
+{"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"}

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

@@ -1,86 +1,41 @@
 import { jsx as o } from "@emotion/react/jsx-runtime";
-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,
+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,
   dataTestId: e,
-  alt: x,
-  threshold: y,
-  enableIntersectionObserver: C,
-  disabled: t,
-  onClick: D,
-  size: I = "medium",
-  variant: r = "text",
-  color: m = "default",
-  selected: i = !1,
-  ..._
+  alt: u,
+  ...a
 }) {
-  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,
+  const i = f, N = B(), n = E(() => /* @__PURE__ */ o(
+    _,
     {
-      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
-            }
-          )
-        }
-      )
+      sx: m,
+      ...a,
+      ...process.env.NODE_ENV !== "production" ? { [p]: s(c, "button", e) } : {},
+      children: /* @__PURE__ */ o(O, { src: t, alt: u })
     }
-  ), z = n && t ? /* @__PURE__ */ o("span", { style: { display: "inline-flex" }, children: c }) : c;
+  ), [t, r, m]);
   return /* @__PURE__ */ o(
-    k,
+    g,
     {
-      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
+      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
     }
   );
 }
 export {
-  Q as ImageButton
+  b as ImageButton
 };

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

@@ -1,21 +1,2 @@
-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 {};
+export declare const WrapperImageButton: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# 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":"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"}
+{"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"}