@m4l/components 9.3.2-B04082025-beta.3 → 9.3.2-B11082025-beta.1

package/@types/types.d.ts

@@ -134,7 +134,7 @@ import { ActionFormCancelOwnerState, ActionFormCancelSlotsType } from '../compon
 import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
 import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
 import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
-import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/ImageText/components/NoItemSelected/types';
+import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
 import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
 import { AreasViewerOwnerState, AreasViewerType } from '../components/areas/components/AreasViewer/types';
 import { TimePickerOwnerState, TimePickerSlotsType } from '../components/mui_extended/TimePicker/types';
@@ -144,13 +144,15 @@ import { RHFUploadSingleFileOwnerState, RHFUploadSingleFileSlotsType } from '../
 import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatusFormatter/types';
 import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
+import { SettingsLayoutOwnerState, SettingsLayoutSlotsType } from '../components/SettingsLayout/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';
-import { NoItemPrivilegesOwnerState, NoItemPrivilegesSlotsType } from '../components/ImageText/components/NoItemPrivileges/types';
+import { NoItemPrivilegesOwnerState, NoItemPrivilegesSlotsType } from '../components/NoItemPrivileges/types';
+import { ImageTextOwnerState, ImageTextSlotsType } from '../components/ImageText/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -226,12 +228,16 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
     M4LRHFUploadImage: RHFUploadImageSlotsType;
     M4LPrintingSystem: PrintingSystemSlotsType;
+    M4LSettingsLayout: SettingsLayoutSlotsType;
     M4LScrollbar: ScrollBarSlotsType;
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
+    M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
     M4LNoItemPrivileges: NoItemPrivilegesSlotsType;
+    M4LSettingsLayoutBase: SettingsLayoutSlotsType;
+    M4LImageText: ImageTextSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -307,12 +313,16 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: Partial<ChipStatusFormatterOwnerState>;
     M4LRHFUploadImage: Partial<RHFUploadImageOwnerState>;
     M4LPrintingSystem: Partial<PrintingSystemOwnerState>;
+    M4LSettingsLayout: Partial<SettingsLayoutOwnerState>;
     M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
+    M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
     M4LNoItemPrivileges: Partial<NoItemPrivilegesOwnerState>;
+    M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
+    M4LImageText: Partial<ImageTextOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -685,6 +695,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LPrintingSystem'];
       variants?: ComponentsVariants['M4LPrintingSystem'];
     };
+    M4LSettingsLayout?: {
+      defaultProps?: ComponentsPropsList['M4LSettingsLayout'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSettingsLayout'];
+      variants?: ComponentsVariants['M4LSettingsLayout'];
+    };
     M4LScrollBar?: {
       defaultProps?: ComponentsPropsList['M4LScrollBar'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
@@ -705,6 +720,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'];
@@ -715,5 +735,15 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LNoItemPrivileges'];
       variants?: ComponentsVariants['M4LNoItemPrivileges'];
     };
+    M4LSettingsLayoutBase?: {
+      defaultProps?: ComponentsPropsList['M4LSettingsLayoutBase'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSettingsLayoutBase'];
+      variants?: ComponentsVariants['M4LSettingsLayoutBase'];
+    };
+    M4LImageText?: {
+      defaultProps?: ComponentsPropsList['M4LImageText'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageText'];
+      variants?: ComponentsVariants['M4LImageText'];
+    };
   }
 }

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/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/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/DynamicFilter.styles.js

@@ -236,6 +236,7 @@ const dynamicFilterStyles = {
   popoverFilter: ({ theme }) => ({
     width: "auto",
     "& .MuiPaper-root": {
+      borderRadius: `${theme.vars.size.borderRadius.r3}!important`,
       padding: "0 !important",
       minWidth: "220px",
       maxWidth: "100%",
@@ -252,6 +253,7 @@ const dynamicFilterStyles = {
         height: "fit-content"
       },
       "& .M4LWindowBase-root": {
+        borderRadius: `${theme.vars.size.borderRadius.r3}!important`,
         border: "unset!important",
         "& .M4LWindowBase-headerWindowComponent": {
           cursor: "unset"
@@ -288,7 +290,7 @@ const dynamicFilterStyles = {
   popoverFilterContainerFields: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4
+    gap: theme.vars.size.baseSpacings.sp6
   })
 };
 export {

package/components/DynamicSort/DynamicSort.styles.js

@@ -240,6 +240,7 @@ const dynamicSortStyles = {
       minWidth: "220px",
       maxWidth: "100%",
       minHeight: "auto",
+      borderRadius: `${theme.vars.size.borderRadius.r3}!important`,
       boxShadow: theme.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
@@ -252,6 +253,7 @@ const dynamicSortStyles = {
         height: "fit-content"
       },
       "& .M4LWindowBase-root": {
+        borderRadius: `${theme.vars.size.borderRadius.r3} !important`,
         border: "unset!important",
         "& .M4LWindowBase-headerWindowComponent": {
           cursor: "unset"
@@ -265,7 +267,7 @@ const dynamicSortStyles = {
   popoverSortContainerFields: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4
+    gap: theme.vars.size.baseSpacings.sp6
   }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.

package/components/ImageText/ImageText.d.ts

@@ -0,0 +1,7 @@
+import { ImageTextProps } from './types';
+/**
+ * Componente que representa un contenedor que agrupa mensajes con imagen y texto.
+ * @param props - Propiedades del componente.
+ * @returns Un componente de tipo ReactNode.
+ */
+export declare const ImageText: (props: ImageTextProps) => import("react/jsx-runtime").JSX.Element;

package/components/ImageText/ImageText.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as ImageTextSlots } from "./slots/ImageTextEnum.js";
+import { I as ImageTextContainerRoot, a as ImageContainerStyled, b as ImgStyled, W as WrapperTitleMessageStyled, T as TypographyTitleStyled, c as TypographyMessageStyled } from "./slots/ImageTextSlots.js";
+import { I as IMG_ALT, a as IMAGE_TEXT_CLASSES, b as IMAGE_TEXT_KEY_COMPONENT } from "./constants.js";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { u as useIsVisible } from "../../hooks/useIsVisible/useIsVisible.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+const ImageText = (props) => {
+  const { className, dataTestId, imageUrl, title, message, size, imageAriaLabel, ...others } = props;
+  const containerRef = useRef(null);
+  const isVisible = useIsVisible(containerRef);
+  const { currentSize } = useComponentSize(size);
+  return /* @__PURE__ */ jsxs(
+    ImageTextContainerRoot,
+    {
+      ...others,
+      ...getPropDataTestId(
+        IMAGE_TEXT_KEY_COMPONENT,
+        ImageTextSlots.root,
+        dataTestId
+      ),
+      className: clsx(IMAGE_TEXT_CLASSES.root, className),
+      children: [
+        /* @__PURE__ */ jsx(ImageContainerStyled, { ref: containerRef, ownerState: { isVisible }, children: /* @__PURE__ */ jsx(
+          ImgStyled,
+          {
+            src: imageUrl,
+            alt: IMG_ALT,
+            role: "presentation",
+            "aria-label": imageAriaLabel,
+            ownerState: { isVisible }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(WrapperTitleMessageStyled, { children: [
+          /* @__PURE__ */ jsx(
+            TypographyTitleStyled,
+            {
+              size: currentSize,
+              skeletonWidth: 100,
+              variant: "bodyDens",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TypographyMessageStyled,
+            {
+              size: currentSize,
+              skeletonWidth: 200,
+              variant: "body",
+              children: message
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ImageText as I
+};

package/components/ImageText/ImageText.styles.d.ts

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

package/components/ImageText/{components/NoItemPrivileges/NoItemPrivilegesStyles.js → ImageText.styles.js}

@@ -1,4 +1,21 @@
-const noItemPrivilegesStyles = {
+const imageTextContainerStyles = {
+  /**
+   * Estilos para el contenedor principal del componente ImageTextContainer.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "80%",
+    width: "100%",
+    maxWidth: "600px",
+    minWidth: "200px",
+    padding: "10px",
+    gap: theme.vars.size.baseSpacings.sp2,
+    minHeight: "60px",
+    backgroundColor: theme.palette.background.default
+  }),
   /**
    * Estilos para el contenedor de la imagen.
    */
@@ -43,7 +60,7 @@ const noItemPrivilegesStyles = {
   /**
    * Estilos para la typography de NoItemPrivileges.
    */
-  typographyStyledTitle: ({ theme }) => ({
+  title: ({ theme }) => ({
     "&&&": {
       color: theme.vars.palette.primary.semanticText
     }
@@ -51,12 +68,12 @@ const noItemPrivilegesStyles = {
   /**
    * Estilos para la typography del mensaje de NoItemPrivileges.
    */
-  typographyStyledMessage: ({ theme }) => ({
+  message: ({ theme }) => ({
     "&&&": {
       color: theme.vars.palette.text.secondary
     }
   })
 };
 export {
-  noItemPrivilegesStyles as n
+  imageTextContainerStyles as i
 };

package/components/ImageText/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Clave del componente ImageTextContainer.
+ */
+export declare const IMAGE_TEXT_KEY_COMPONENT = "M4LImageText";
+/**
+ * Clases del componente ImageTextContainer.
+ */
+export declare const IMAGE_TEXT_CLASSES: Record<string, string>;
+/**
+ * URL de la imagen por defecto.
+ */
+export declare const DEFAULT_IMAGE_URL = "frontend/components/no_item_privileges/assets/img/ImageTextDefault.svg";
+/**
+ * Alt de la imagen.
+ */
+export declare const IMG_ALT = "illustration";

package/components/ImageText/constants.js

@@ -0,0 +1,10 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { I as ImageTextSlots } from "./slots/ImageTextEnum.js";
+const IMAGE_TEXT_KEY_COMPONENT = "M4LImageText";
+const IMAGE_TEXT_CLASSES = getComponentClasses(IMAGE_TEXT_KEY_COMPONENT, ImageTextSlots);
+const IMG_ALT = "illustration";
+export {
+  IMG_ALT as I,
+  IMAGE_TEXT_CLASSES as a,
+  IMAGE_TEXT_KEY_COMPONENT as b
+};

package/components/ImageText/index.d.ts

@@ -1,3 +1 @@
-export * from './components/NoItemPrivileges';
-export * from './components/NoItemSelected';
-export * from './components/ImageTextContainer';
+export { ImageText } from './ImageText';

package/components/ImageText/slots/ImageTextEnum.d.ts

@@ -0,0 +1,8 @@
+export declare enum ImageTextSlots {
+    root = "root",
+    imageContainer = "imageContainer",
+    img = "img",
+    wrapperTitleMessage = "wrapperTitleMessage",
+    title = "title",
+    message = "message"
+}

package/components/ImageText/slots/ImageTextEnum.js

@@ -0,0 +1,12 @@
+var ImageTextSlots = /* @__PURE__ */ ((ImageTextSlots2) => {
+  ImageTextSlots2["root"] = "root";
+  ImageTextSlots2["imageContainer"] = "imageContainer";
+  ImageTextSlots2["img"] = "img";
+  ImageTextSlots2["wrapperTitleMessage"] = "wrapperTitleMessage";
+  ImageTextSlots2["title"] = "title";
+  ImageTextSlots2["message"] = "message";
+  return ImageTextSlots2;
+})(ImageTextSlots || {});
+export {
+  ImageTextSlots as I
+};

package/components/ImageText/slots/ImageTextSlots.d.ts

@@ -0,0 +1,18 @@
+export declare const ImageTextContainerRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ImageTextOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ImageContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ImageTextOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ImgStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ImageTextOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const WrapperTitleMessageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ImageTextOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TypographyTitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ImageTextOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TypographyMessageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ImageTextOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/ImageText/slots/ImageTextSlots.js

@@ -0,0 +1,38 @@
+import { styled } from "@mui/material/styles";
+import { b as IMAGE_TEXT_KEY_COMPONENT } from "../constants.js";
+import { I as ImageTextSlots } from "./ImageTextEnum.js";
+import { i as imageTextContainerStyles } from "../ImageText.styles.js";
+import { I as Image } from "../../Image/Image.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+const ImageTextContainerRoot = styled("div", {
+  name: IMAGE_TEXT_KEY_COMPONENT,
+  slot: ImageTextSlots.root
+})(imageTextContainerStyles?.root);
+const ImageContainerStyled = styled("div", {
+  name: IMAGE_TEXT_KEY_COMPONENT,
+  slot: ImageTextSlots.imageContainer
+})(imageTextContainerStyles?.imageContainer);
+const ImgStyled = styled(Image, {
+  name: IMAGE_TEXT_KEY_COMPONENT,
+  slot: ImageTextSlots.img
+})(imageTextContainerStyles?.img);
+const WrapperTitleMessageStyled = styled("div", {
+  name: IMAGE_TEXT_KEY_COMPONENT,
+  slot: ImageTextSlots.wrapperTitleMessage
+})(imageTextContainerStyles?.wrapperTitleMessage);
+const TypographyTitleStyled = styled(Typography, {
+  name: IMAGE_TEXT_KEY_COMPONENT,
+  slot: ImageTextSlots.title
+})(imageTextContainerStyles?.title);
+const TypographyMessageStyled = styled(Typography, {
+  name: IMAGE_TEXT_KEY_COMPONENT,
+  slot: ImageTextSlots.message
+})(imageTextContainerStyles?.message);
+export {
+  ImageTextContainerRoot as I,
+  TypographyTitleStyled as T,
+  WrapperTitleMessageStyled as W,
+  ImageContainerStyled as a,
+  ImgStyled as b,
+  TypographyMessageStyled as c
+};

package/components/ImageText/types.d.ts

@@ -0,0 +1,40 @@
+import { ImageTextSlots } from './slots/ImageTextEnum';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { IMAGE_TEXT_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+export interface ImageTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Clase del componente.
+     */
+    className?: string;
+    /**
+     * ID de prueba.
+     */
+    dataTestId?: string;
+    /**
+     * URL de la imagen.
+     */
+    imageUrl: string;
+    /**
+     * Título del componente.
+     */
+    title: string;
+    /**
+     * Mensaje del componente.
+     */
+    message: string;
+    /**
+     * Aria-label de la imagen.
+     */
+    imageAriaLabel?: string;
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+export type ImageTextOwnerState = {
+    isVisible: boolean;
+};
+export type ImageTextSlotsType = keyof typeof ImageTextSlots;
+export type ImageTextStyles = M4LOverridesStyleRules<ImageTextSlotsType, typeof IMAGE_TEXT_KEY_COMPONENT, Theme>;

package/components/NoItemPrivileges/NoItemPrivileges.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { D as DICTIONARY } from "./dictionary.js";
+import { D as DEFAULT_IMAGE_URL, N as NO_ITEM_PRIVILEGES_CLASSES } from "./constants.js";
+import clsx from "clsx";
+import { N as NoItemPrivilegesRootStyled } from "./slots/NoItemPrivilegesSlots.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+const NoItemPrivileges = (props) => {
+  const { image, title, message, className, dataTestId, size } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const imageUrl = image || `${host_static_assets}/${environment_assets}/${DEFAULT_IMAGE_URL}`;
+  const titleText = title || getLabel(DICTIONARY.LABEL_TITLE);
+  const messageText = message || getLabel(DICTIONARY.LABEL_MESSAGE);
+  const { currentSize } = useComponentSize(size);
+  return /* @__PURE__ */ jsx(
+    NoItemPrivilegesRootStyled,
+    {
+      imageUrl,
+      title: titleText,
+      message: messageText,
+      size: currentSize,
+      className: clsx(NO_ITEM_PRIVILEGES_CLASSES.root, className),
+      dataTestId,
+      role: "alert",
+      "aria-label": "NoItemPrivileges",
+      imageAriaLabel: "illustration no item privileges"
+    }
+  );
+};
+export {
+  NoItemPrivileges as N
+};

package/components/NoItemPrivileges/NoItemPrivilegesStyles.js

@@ -0,0 +1,6 @@
+const noItemPrivilegesStyles = {
+  root: {}
+};
+export {
+  noItemPrivilegesStyles as n
+};

package/components/{ImageText/components/NoItemPrivileges → NoItemPrivileges}/constants.d.ts

@@ -1,4 +1,3 @@
 export declare const NO_ITEM_PRIVILEGES_KEY_COMPONENT = "M4LNoItemPrivileges";
 export declare const NO_ITEM_PRIVILEGES_CLASSES: Record<string, string>;
 export declare const DEFAULT_IMAGE_URL = "frontend/components/no_item_privileges/assets/img/ProtectionIllustration.svg";
-export declare const IMG_ALT = "No item privileges";

package/components/{ImageText/components/NoItemPrivileges → NoItemPrivileges}/constants.js

@@ -1,11 +1,10 @@
-import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { N as NoItemPrivilegesSlots } from "./slots/NoItemPrivilegesEnum.js";
 const NO_ITEM_PRIVILEGES_KEY_COMPONENT = "M4LNoItemPrivileges";
 const NO_ITEM_PRIVILEGES_CLASSES = getComponentClasses(NO_ITEM_PRIVILEGES_KEY_COMPONENT, [...Object.values(NoItemPrivilegesSlots), "root"]);
 const DEFAULT_IMAGE_URL = "frontend/components/no_item_privileges/assets/img/ProtectionIllustration.svg";
-const IMG_ALT = "No item privileges";
 export {
   DEFAULT_IMAGE_URL as D,
-  IMG_ALT as I,
-  NO_ITEM_PRIVILEGES_CLASSES as N
+  NO_ITEM_PRIVILEGES_CLASSES as N,
+  NO_ITEM_PRIVILEGES_KEY_COMPONENT as a
 };

package/components/NoItemPrivileges/slots/NoItemPrivilegesEnum.d.ts

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

package/components/NoItemPrivileges/slots/NoItemPrivilegesEnum.js

@@ -0,0 +1,7 @@
+var NoItemPrivilegesSlots = /* @__PURE__ */ ((NoItemPrivilegesSlots2) => {
+  NoItemPrivilegesSlots2["root"] = "root";
+  return NoItemPrivilegesSlots2;
+})(NoItemPrivilegesSlots || {});
+export {
+  NoItemPrivilegesSlots as N
+};

package/components/NoItemPrivileges/slots/NoItemPrivilegesSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const NoItemPrivilegesRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../ImageText/types').ImageTextProps, keyof import('../../ImageText/types').ImageTextProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').NoItemPrivilegesOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/NoItemPrivileges/slots/NoItemPrivilegesSlots.js

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material/styles";
+import { N as NoItemPrivilegesSlots } from "./NoItemPrivilegesEnum.js";
+import { a as NO_ITEM_PRIVILEGES_KEY_COMPONENT } from "../constants.js";
+import { n as noItemPrivilegesStyles } from "../NoItemPrivilegesStyles.js";
+import { I as ImageText } from "../../ImageText/ImageText.js";
+const NoItemPrivilegesRootStyled = styled(ImageText, {
+  name: NO_ITEM_PRIVILEGES_KEY_COMPONENT,
+  slot: NoItemPrivilegesSlots.root
+})(noItemPrivilegesStyles?.root);
+export {
+  NoItemPrivilegesRootStyled as N
+};

package/components/NoItemPrivileges/test/NoItemPrivileges.test.d.ts

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

package/components/{ImageText/components/NoItemPrivileges → NoItemPrivileges}/types.d.ts

@@ -1,5 +1,5 @@
 import { Sizes } from '@m4l/styles';
-import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { NoItemPrivilegesSlots } from './slots/NoItemPrivilegesEnum';
 import { NO_ITEM_PRIVILEGES_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';