@m4l/components 9.3.2 → 9.3.4

package/@types/types.d.ts

@@ -145,10 +145,10 @@ import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatu
 import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
 import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar/types';
-
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
 import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
+import { CardOwnerState, CardSlotsType } from '../components/Card/types';
 import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -229,6 +229,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
+    M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
   }
   interface ComponentsPropsList {
@@ -309,6 +310,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
+    M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
   }
   interface Components {
@@ -702,6 +704,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LLanguagePopover'];
       variants?: ComponentsVariants['M4LLanguagePopover'];
     };
+    M4LCard?: {
+      defaultProps?: ComponentsPropsList['M4LCard'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCard'];
+      variants?: ComponentsVariants['M4LCard'];
+    };
     M4LContainerFlow?: {
       defaultProps?: ComponentsPropsList['M4LContainerFlow'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];

package/components/Card/Card.d.ts

@@ -0,0 +1,7 @@
+import { CardProps } from './types';
+/**
+ * Componente de tarjeta.
+ * @param props - Propiedades del componente.
+ * @returns Componente de tarjeta.
+ */
+export declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/components/Card/Card.styles.d.ts

@@ -0,0 +1,2 @@
+import { CardStyles } from './types';
+export declare const cardStyles: CardStyles;

package/components/Card/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CARD_KEY = "M4LCard";
+export declare const CARD_CLASSES: Record<string, string>;
+export declare const CARD_SIZES: {
+    compact: number;
+    standard: number;
+    comfortable: number;
+};

package/components/Card/helpers/getSizeSpacing.d.ts

@@ -0,0 +1,7 @@
+import { CardProps } from '../types';
+/**
+ * Obtiene el tamaño del gap de la tarjeta.
+ * @param gap - El gap de la tarjeta.
+ * @returns El tamaño del gap de la tarjeta.
+ */
+export declare const getSizeSpacing: (gap: CardProps["gap"] | number | undefined | null) => number;

package/components/Card/helpers/getSizeSpacing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

package/components/Card/slots/CardEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum CardSlots {
+    root = "root"
+}

package/components/Card/slots/CardSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const CardRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').CardOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/Card/test/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Card/types.d.ts

@@ -0,0 +1,59 @@
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { CARD_KEY } from './constants';
+import { CardSlots } from './slots/CardEnum';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Contenido de la tarjeta.
+     */
+    children: React.ReactNode;
+    /**
+     * Variante de la tarjeta.
+     */
+    variant?: 'text' | 'outlined';
+    /**
+     * Espacio entre los elementos de la tarjeta.
+     */
+    gap?: number | 'compact' | 'standard' | 'comfortable';
+    /**
+     * Espacio entre los elementos de la tarjeta.
+     */
+    padding?: number | 'compact' | 'standard' | 'comfortable';
+    /**
+     * Dirección de la tarjeta.
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Altura de la tarjeta.
+     */
+    height?: number | 'auto';
+    /**
+     * Clase de la tarjeta.
+     */
+    className?: string;
+    /**
+     * Estilo de la tarjeta.
+     */
+    justifyContent?: React.CSSProperties['justifyContent'];
+    /**
+     * Estilo de la tarjeta.
+     */
+    alignItems?: React.CSSProperties['alignItems'];
+    /**
+     * Estilo de la tarjeta.
+     */
+    selected?: boolean;
+}
+export type CardSlotsType = keyof typeof CardSlots;
+export type CardOwnerState = {
+    variant: CardProps['variant'];
+    gap: CardProps['gap'];
+    height: CardProps['height'];
+    padding: CardProps['padding'];
+    direction: CardProps['direction'];
+    onClick: boolean;
+    justifyContent: CardProps['justifyContent'];
+    alignItems: CardProps['alignItems'];
+    selected: CardProps['selected'];
+};
+export type CardStyles = M4LOverridesStyleRules<CardSlotsType, typeof CARD_KEY, Theme>;

package/components/DynamicFilter/subcomponents/PopoverFilter/usePopoverFilter.d.ts

@@ -17,11 +17,11 @@ declare function usePopoverFilter(): {
     filterFormValue: FormFilterValue;
     formFilter: FormFilterFieldApplied;
     popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }>, import('yup/lib/object').AssertsShape<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }>> | undefined;
     statusLoad: "initial" | "reload_values_provider" | "ready";
 };

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts

@@ -17,11 +17,11 @@ declare function usePopoverSort(): {
     sortFormValue: import('../../types').FormSortValueBase;
     formSort: FormSortFieldApplied;
     popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }>, import('yup/lib/object').AssertsShape<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }>> | undefined;
     statusLoad: "initial" | "reload_values_provider" | "ready";
 };

package/components/NumberInput/NumberInput.styles.js

@@ -15,6 +15,7 @@ const numberInputStyles = {
     paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: ownerState?.noButtons && theme.vars.size.baseSpacings.sp1,
     boxSizing: "border-box",
+    overflow: "hidden",
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
       ownerState?.size || "medium",

package/components/PaperForm/PaperForm.js

@@ -29,9 +29,8 @@ function PaperForm(props) {
   const { currentSize } = useComponentSize(size);
   const paperFormRef = useRef(null);
   const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
-    size: adjustedSize,
+    size: currentSize,
     color,
     isForm,
     paperFormVariant: variant

package/components/PaperForm/components/Header.js

@@ -1,26 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useModuleSkeleton } from "@m4l/core";
 import { H as HeaderStyled, I as IconStyled, T as TitleStyled } from "../slots/PaperFormSlots.js";
-import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 const Header = (props) => {
   const { urlIcon, title, size, dataTestId, color } = props;
-  const isSkeleton = useModuleSkeleton();
   const ownerState = {
     color
   };
-  const renderSkeleton = () => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      urlIcon ? /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16 }) : null,
-      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 })
-    ] });
-  };
   const renderContentHeader = () => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       urlIcon ? /* @__PURE__ */ jsx(IconStyled, { src: urlIcon, size }) : null,
       /* @__PURE__ */ jsx(TitleStyled, { variant: "bodyDens", size, children: title })
     ] });
   };
-  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: isSkeleton ? renderSkeleton() : renderContentHeader() });
+  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: renderContentHeader() });
 };
 export {
   Header as H

package/components/PaperForm/styles.js

@@ -58,10 +58,7 @@ const paperFormStyles = {
    * @param theme
    ***********************************************************
    */
-  containerIcon: () => ({
-    display: "grid",
-    placeItems: "center"
-  }),
+  containerIcon: {},
   /**
    * ************************************************************
    * Estilos del contenido del componente PaperForm

package/components/PropertyValue/PropertyValue.js

@@ -77,7 +77,7 @@ function PropertyValue(props) {
       children: [
         /* @__PURE__ */ jsxs(NameStyled, { ownerState, children: [
           renderIcon(),
-          /* @__PURE__ */ jsx(
+          property && /* @__PURE__ */ jsx(
             Label,
             {
               size: currentSize,

package/components/ToastContainer/ToastContainer.js

@@ -3,7 +3,6 @@ import { ToastContainer as ToastContainer$1 } from "react-toastify";
 import { D as DEFAULT_CLOSE_TIME, T as TOAST_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { ModuleSkeletonProvider } from "@m4l/core";
-import "react-toastify/dist/ReactToastify.min.css";
 import { R as RootStyled } from "./slots/toastContainerSlots.js";
 import { T as ToastContainerSlots } from "./slots/ToastContainerEnum.js";
 const ToastContainer = (props) => {

package/components/ToastContainer/ToastContainer.styles.js

@@ -1,132 +1,136 @@
+import { a as TOAST_NATIVE_STYLES } from "./constants.js";
 const toastStyles = {
   /** Root del componente ToastContainer */
   root: ({ theme, ownerState }) => ({
-    "--toastify-color-light": theme.vars.palette.background.default,
-    "--toastify-color-dark": theme.vars.palette.background.default,
-    "--toastify-color-info": theme.vars.palette.info.enabled,
-    "--toastify-color-success": theme.vars.palette.success.enabled,
-    "--toastify-color-warning": theme.vars.palette.warning.enabled,
-    "--toastify-color-error": theme.vars.palette.error.enabled,
-    "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
-    "--toastify-icon-color-info": "var(--toastify-color-info)",
-    "--toastify-icon-color-success": "var(--toastify-color-success)",
-    "--toastify-icon-color-warning": "var(--toastify-color-warning)",
-    "--toastify-icon-color-error": "var(--toastify-color-error)",
-    "--toastify-toast-width": "320px",
-    "--toastify-toast-background": "#fff",
-    "--toastify-toast-min-height": "64px",
-    "--toastify-toast-max-height": "800px",
-    "--toastify-font-family": "sans-serif",
-    "--toastify-z-index": "9999",
-    "--toastify-text-color-light": "#757575",
-    "--toastify-text-color-dark": "#fff",
-    //Used only for colored theme
-    "--toastify-text-color-info": "#fff",
-    "--toastify-text-color-success": "#fff",
-    "--toastify-text-color-warning": "#fff",
-    "--toastify-text-color-error": "#fff",
-    "--toastify-spinner-color": "#616161",
-    "--toastify-spinner-color-empty-area": "#e0e0e0",
-    // Used when no type is provided
-    // toast("**hello**")
-    // '--toastify-color-progress-light': 'var(--toastify-color-info)',
-    // // Used when no type is provided
-    // '--toastify-color-progress-dark': 'var(--toastify-color-info)',
-    // '--toastify-color-progress-info': 'var(--toastify-color-info)',
-    // '--toastify-color-progress-success': 'var(--toastify-color-success)',
-    // '--toastify-color-progress-warning': 'var(--toastify-color-warning)',
-    // '--toastify-color-progress-error': 'var(--toastify-color-error)',
-    "--toastify-toast-bd-radius": "8px",
-    // used to control the opacity of the progress trail
-    "--toastify-color-progress-bgo": ".2",
-    ...ownerState?.fixed === false ? {
-      top: 0,
-      position: "absolute",
-      zIndex: theme.vars.zIndex.snackbar,
-      "@supports (position: sticky)": {
-        position: "sticky"
-      }
-    } : {},
-    "& .Toastify": {
-      margin: 0,
-      padding: 0,
-      height: 0
-    },
-    "& .Toastify__toast-container": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "16px",
+    ...TOAST_NATIVE_STYLES,
+    "&&&": {
+      "--toastify-color-light": theme.vars.palette.background.default,
+      "--toastify-color-dark": theme.vars.palette.background.default,
+      "--toastify-color-info": theme.vars.palette.info.enabled,
+      "--toastify-color-success": theme.vars.palette.success.enabled,
+      "--toastify-color-warning": theme.vars.palette.warning.enabled,
+      "--toastify-color-error": theme.vars.palette.error.enabled,
+      "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
+      "--toastify-icon-color-info": "var(--toastify-color-info)",
+      "--toastify-icon-color-success": "var(--toastify-color-success)",
+      "--toastify-icon-color-warning": "var(--toastify-color-warning)",
+      "--toastify-icon-color-error": "var(--toastify-color-error)",
+      "--toastify-toast-width": "320px",
+      "--toastify-toast-background": "#fff",
+      "--toastify-toast-min-height": "64px",
+      "--toastify-toast-max-height": "800px",
+      "--toastify-font-family": "sans-serif",
+      "--toastify-z-index": "9999",
+      "--toastify-text-color-light": "#757575",
+      "--toastify-text-color-dark": "#fff",
+      //Used only for colored theme
+      "--toastify-text-color-info": "#fff",
+      "--toastify-text-color-success": "#fff",
+      "--toastify-text-color-warning": "#fff",
+      "--toastify-text-color-error": "#fff",
+      "--toastify-spinner-color": "#616161",
+      "--toastify-spinner-color-empty-area": "#e0e0e0",
+      // Used when no type is provided
+      // toast("**hello**")
+      // '--toastify-color-progress-light': 'var(--toastify-color-info)',
+      // // Used when no type is provided
+      // '--toastify-color-progress-dark': 'var(--toastify-color-info)',
+      // '--toastify-color-progress-info': 'var(--toastify-color-info)',
+      // '--toastify-color-progress-success': 'var(--toastify-color-success)',
+      // '--toastify-color-progress-warning': 'var(--toastify-color-warning)',
+      // '--toastify-color-progress-error': 'var(--toastify-color-error)',
+      "--toastify-toast-bd-radius": "8px",
+      // used to control the opacity of the progress trail
+      "--toastify-color-progress-bgo": ".2",
       ...ownerState?.fixed === false ? {
-        top: "20px",
-        position: "absolute"
+        top: 0,
+        position: "absolute",
+        zIndex: theme.vars.zIndex.snackbar,
+        "@supports (position: sticky)": {
+          position: "sticky"
+        }
       } : {},
-      [theme.breakpoints.down(480)]: {
-        width: "100%",
-        minWidth: "100%",
-        padding: "0"
-      }
-    },
-    /** Used to define the position of the ToastContainer */
-    // '.Toastify__toast-container--top-left': {},
-    // '.Toastify__toast-container--top-center': {},
-    // '.Toastify__toast-container--top-right': {},
-    // '.Toastify__toast-container--bottom-left': {},
-    // '.Toastify__toast-container--bottom-center': {},
-    // '.Toastify__toast-container--bottom-right': {},
-    "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
-      opacity: 0.2
-    },
-    /** Classes for the displayed toast */
-    "& .Toastify__toast": {
-      minHeight: "min-content",
-      margin: "0",
-      padding: "0",
-      backgroundColor: theme.vars.palette.background.default,
-      boxShadow: theme.customShadows?.z4,
-      borderRadius: "4px",
-      border: `1px solid ${theme.vars.palette.border.default}`,
-      [theme.breakpoints.down(480)]: {
-        margin: "1%",
-        width: "98% !important"
+      "& .Toastify": {
+        margin: 0,
+        padding: 0,
+        height: 0
+      },
+      "& .Toastify__toast-container": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        ...ownerState?.fixed === false ? {
+          top: "20px",
+          position: "absolute"
+        } : {},
+        [theme.breakpoints.down(480)]: {
+          width: "100%",
+          minWidth: "100%",
+          padding: "0"
+        }
+      },
+      /** Used to define the position of the ToastContainer */
+      // '.Toastify__toast-container--top-left': {},
+      // '.Toastify__toast-container--top-center': {},
+      // '.Toastify__toast-container--top-right': {},
+      // '.Toastify__toast-container--bottom-left': {},
+      // '.Toastify__toast-container--bottom-center': {},
+      // '.Toastify__toast-container--bottom-right': {},
+      "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
+        opacity: 0.2
+      },
+      /** Classes for the displayed toast */
+      "& .Toastify__toast": {
+        minHeight: "min-content",
+        margin: "0",
+        padding: "0",
+        backgroundColor: theme.vars.palette.background.default,
+        boxShadow: theme.customShadows?.z4,
+        borderRadius: "4px",
+        border: `1px solid ${theme.vars.palette.border.default}`,
+        [theme.breakpoints.down(480)]: {
+          margin: "1%",
+          width: "98% !important"
+        }
+      },
+      ".Toastify__toast--rtl": {},
+      "& .Toastify__toast-body": {
+        margin: "0px",
+        padding: "0px"
+      },
+      /** Used to position the icon */
+      // '& .Toastify__toast-icon': {},
+      /** handle the notification color and the text color based on the theme */
+      // '& .Toastify__toast-theme--dark': {},
+      // '& .Toastify__toast-theme--light': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--default': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--info': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--success': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--warning': {},
+      // '& .Toastify__toast-theme--colored.Toastify__toast--error': {},
+      "& .Toastify__progress-bar--wrp": {
+        position: "absolute",
+        top: 0,
+        height: "2px",
+        borderTopLeftRadius: "2px",
+        borderTopRightRadius: "2px",
+        borderBottomLeftRadius: "0",
+        borderBottomRightRadius: "0",
+        overflow: "hidden"
+      },
+      "& .Toastify__progress-bar": {
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "0",
+        borderBottomRightRadius: "0"
       }
-    },
-    ".Toastify__toast--rtl": {},
-    "& .Toastify__toast-body": {
-      margin: "0px",
-      padding: "0px"
-    },
-    /** Used to position the icon */
-    // '& .Toastify__toast-icon': {},
-    /** handle the notification color and the text color based on the theme */
-    // '& .Toastify__toast-theme--dark': {},
-    // '& .Toastify__toast-theme--light': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--default': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--info': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--success': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--warning': {},
-    // '& .Toastify__toast-theme--colored.Toastify__toast--error': {},
-    "& .Toastify__progress-bar--wrp": {
-      position: "absolute",
-      top: 0,
-      height: "2px",
-      borderTopLeftRadius: "2px",
-      borderTopRightRadius: "2px",
-      borderBottomLeftRadius: "0",
-      borderBottomRightRadius: "0",
-      overflow: "hidden"
-    },
-    "& .Toastify__progress-bar": {
-      borderTopLeftRadius: "2px",
-      borderBottomLeftRadius: "0",
-      borderBottomRightRadius: "0"
+      // '& .Toastify__progress-bar--rtl': {},
+      // '& .Toastify__progress-bar-theme--light': {},
+      // '& .Toastify__progress-bar-theme--dark': {},
+      // '& .Toastify__progress-bar--info': {},
+      // '& .Toastify__progress-bar--success': {},
+      // '& .Toastify__progress-bar--warning': {},
+      // '& .Toastify__progress-bar--error': {},
     }
-    // '& .Toastify__progress-bar--rtl': {},
-    // '& .Toastify__progress-bar-theme--light': {},
-    // '& .Toastify__progress-bar-theme--dark': {},
-    // '& .Toastify__progress-bar--info': {},
-    // '& .Toastify__progress-bar--success': {},
-    // '& .Toastify__progress-bar--warning': {},
-    // '& .Toastify__progress-bar--error': {},
   }),
   /** 📦 Contenedor Principal del Toast 📦 */
   messageRoot: ({ theme }) => ({