@m4l/components 9.3.6 → 9.3.8

package/@types/types.d.ts

@@ -151,6 +151,8 @@ import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectL
 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/NoItemPrivileges/types';
+import { ImageTextOwnerState, ImageTextSlotsType } from '../components/ImageText/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -233,7 +235,9 @@ declare module '@mui/material/styles' {
     M4LLanguagePopover: LanguagePopoverSlotsType;
     M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
+    M4LNoItemPrivileges: NoItemPrivilegesSlotsType;
     M4LSettingsLayoutBase: SettingsLayoutSlotsType;
+    M4LImageText: ImageTextSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -316,7 +320,9 @@ declare module '@mui/material/styles' {
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
     M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
+    M4LNoItemPrivileges: Partial<NoItemPrivilegesOwnerState>;
     M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
+    M4LImageText: Partial<ImageTextOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -724,10 +730,20 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
       variants?: ComponentsVariants['M4LContainerFlow'];
     };
+    M4LNoItemPrivileges?: {
+      defaultProps?: ComponentsPropsList['M4LNoItemPrivileges'];
+      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/DataGrid/Datagrid.styles.js

@@ -14,7 +14,7 @@ const dataGridStyles = {
     //inset: theme.vars.size.baseSpacings.sp0,
     //overflow: 'hidden',
     container: "container / inline-size",
-    background: theme.vars.palette.background.default,
+    background: "transparent",
     //boxShadow: 'unset',
     borderRadius: theme.vars.size.borderRadius.r1,
     position: "relative",
@@ -64,7 +64,7 @@ const dataGridStyles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    background: theme.vars.palette.background.default,
+    background: "transparent",
     borderRadius: theme.vars.size.borderRadius.r1,
     gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",

package/components/DragResizeWindowRND/constants.d.ts

@@ -1,3 +1,47 @@
 export declare const COMPONENT_TEST_ID = "M4LDragResizeWindowRND";
 export declare const COMPONENT_KEY_COMPONENT = "M4LDragResizeWindowRND";
 export declare const DEFAULT_TRANSFORM_SCALE = 1;
+export declare const WINDOW_SIZES: {
+    horizontal: {
+        large: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        small: {
+            width: number;
+            height: number;
+        };
+    };
+    vertical: {
+        large: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        small: {
+            width: number;
+            height: number;
+        };
+    };
+    square: {
+        large: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        small: {
+            width: number;
+            height: number;
+        };
+    };
+};

package/components/DragResizeWindowRND/constants.js

@@ -1,6 +1,51 @@
 const COMPONENT_KEY_COMPONENT = "M4LDragResizeWindowRND";
 const DEFAULT_TRANSFORM_SCALE = 1;
+const WINDOW_SIZES = {
+  horizontal: {
+    large: {
+      width: 1e3,
+      height: 600
+    },
+    medium: {
+      width: 900,
+      height: 480
+    },
+    small: {
+      width: 750,
+      height: 380
+    }
+  },
+  vertical: {
+    large: {
+      width: 400,
+      height: 900
+    },
+    medium: {
+      width: 400,
+      height: 700
+    },
+    small: {
+      width: 400,
+      height: 500
+    }
+  },
+  square: {
+    large: {
+      width: 800,
+      height: 800
+    },
+    medium: {
+      width: 600,
+      height: 600
+    },
+    small: {
+      width: 400,
+      height: 400
+    }
+  }
+};
 export {
   COMPONENT_KEY_COMPONENT as C,
-  DEFAULT_TRANSFORM_SCALE as D
+  DEFAULT_TRANSFORM_SCALE as D,
+  WINDOW_SIZES as W
 };

package/components/DragResizeWindowRND/index.d.ts

@@ -1,2 +1,3 @@
 export { DragResizeWindowRND } from './DragResizeWindowRND';
 export { dragResizeWindowRNDClasses } from './classes/index';
+export { WINDOW_SIZES } from './constants';

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -33,7 +33,7 @@ const dynamicFilterStyles = {
     height: "fit-content",
     borderRadius: theme.vars.size.borderRadius.r2,
     background: theme.vars.palette.background.default,
-    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.default}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
+    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
     overflow: "hidden",
     '&:has([aria-expanded="true"])': {
       boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`
@@ -173,7 +173,7 @@ const dynamicFilterStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.default}`,
+    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.secondary}`,
     ...!ownerState?.visibleRefresh && !ownerState?.isDirty && {
       display: "none"
     },
@@ -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"
@@ -262,7 +264,9 @@ const dynamicFilterStyles = {
   /**
    * popoverFilterActions: Estilos del contenedor de acciones del menú emergente de filtro.
    */
-  popoverFilterActions: {},
+  popoverFilterActions: ({ theme }) => ({
+    paddingTop: theme.vars.size.baseSpacings.sp6
+  }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
@@ -288,7 +292,7 @@ const dynamicFilterStyles = {
   popoverFilterContainerFields: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4
+    gap: theme.vars.size.baseSpacings.sp3
   })
 };
 export {

package/components/DynamicFilter/subcomponents/FilterActions/FilterActions.js

@@ -20,6 +20,8 @@ function FilterActions() {
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {
+        role: "button",
+        "aria-label": "clear-filters",
         icon: clearIconUrl,
         size,
         onClick: onClickClearFilters,
@@ -31,6 +33,7 @@ function FilterActions() {
       {
         icon: filterIconUrl,
         size,
+        role: "button",
         "aria-label": "refresh",
         tooltip: getLabel(filterButtonDictionaryTooltip),
         onClick: onClickFilter,

package/components/DynamicSort/DynamicSort.styles.js

@@ -33,7 +33,7 @@ const dynamicSortStyles = {
     height: "fit-content",
     borderRadius: theme.vars.size.borderRadius.r2,
     background: theme.vars.palette.background.default,
-    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.default}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
+    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
     overflow: "hidden",
     '&:has([aria-expanded="true"])': {
       boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`
@@ -172,7 +172,7 @@ const dynamicSortStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.default}`,
+    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.secondary}`,
     ...!ownerState?.visibleRefresh && !ownerState?.isDirty && {
       display: "none"
     },
@@ -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,12 +267,14 @@ const dynamicSortStyles = {
   popoverSortContainerFields: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4
+    gap: theme.vars.size.baseSpacings.sp3
   }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
-  popoverSortActions: {},
+  popoverSortActions: ({ theme }) => ({
+    paddingTop: theme.vars.size.baseSpacings.sp6
+  }),
   /**
    * inputSortSkeleton: Estilos del esqueleto del campo de entrada 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/ImageText.styles.js

@@ -0,0 +1,79 @@
+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.
+   */
+  imageContainer: ({ ownerState }) => ({
+    visibility: ownerState?.isVisible ? "visible" : "hidden",
+    display: "flex",
+    justifyContent: "center",
+    height: "100%",
+    width: "100%",
+    maxWidth: "150px",
+    maxHeight: "106px",
+    minWidth: "70px",
+    '& [class*="M4LImage-imgSkeleton"]': {
+      opacity: 0
+    },
+    '& [class*="M4LImage"]': {
+      width: "100%",
+      height: "auto ",
+      maxWidth: "150px",
+      maxHeight: "106px",
+      minWidth: "70px",
+      minHeight: "50px"
+    }
+  }),
+  /**
+   * Estilos para la imagen.
+   */
+  img: {},
+  /**
+   * Estilos para el wrapper de la typography de NoItemPrivileges.
+   */
+  wrapperTitleMessage: ({ theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    "& .MuiTypography-root": {
+      width: "auto"
+    }
+  }),
+  /**
+   * Estilos para la typography de NoItemPrivileges.
+   */
+  title: ({ theme }) => ({
+    "&&&": {
+      color: theme.vars.palette.primary.semanticText
+    }
+  }),
+  /**
+   * Estilos para la typography del mensaje de NoItemPrivileges.
+   */
+  message: ({ theme }) => ({
+    "&&&": {
+      color: theme.vars.palette.text.secondary
+    }
+  })
+};
+export {
+  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

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

package/components/ImageText/index.js

@@ -0,0 +1 @@
+

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.d.ts

@@ -0,0 +1,7 @@
+import { NoItemPrivilegesProps } from './types';
+/**
+ * Componente que muestra un mensaje de que no hay privilegios para el item seleccionado.
+ * @param props - Propiedades del componente.
+ * @returns Componente NoItemPrivileges.
+ */
+export declare const NoItemPrivileges: (props: NoItemPrivilegesProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,5 @@
+import { NoItemPrivilegesStyles } from './types';
+/**
+ * Estilos para el componente NoItemPrivileges.
+ */
+export declare const noItemPrivilegesStyles: NoItemPrivilegesStyles;