@m4l/components 9.3.1 → 9.3.2-B04082025-beta.3

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/NoItemSelected/types';
+import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/ImageText/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';
@@ -150,6 +150,7 @@ import { SplitLayoutOwnerState } from '../components/extended/React-resizable-pa
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
 import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
 import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
+import { NoItemPrivilegesOwnerState, NoItemPrivilegesSlotsType } from '../components/ImageText/components/NoItemPrivileges/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -230,6 +231,7 @@ declare module '@mui/material/styles' {
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
+    M4LNoItemPrivileges: NoItemPrivilegesSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -310,6 +312,7 @@ declare module '@mui/material/styles' {
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
+    M4LNoItemPrivileges: Partial<NoItemPrivilegesOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -707,5 +710,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
       variants?: ComponentsVariants['M4LContainerFlow'];
     };
+    M4LNoItemPrivileges?: {
+      defaultProps?: ComponentsPropsList['M4LNoItemPrivileges'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LNoItemPrivileges'];
+      variants?: ComponentsVariants['M4LNoItemPrivileges'];
+    };
   }
 }

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",

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"
     },

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"
     },

package/components/ImageText/components/ImageTextContainer/ImageTextContainer.d.ts

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

package/components/ImageText/components/ImageTextContainer/ImageTextContainer.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { I as ImageTextContainerSlots } from "./slots/ImageTextContainerEnum.js";
+import { I as ImageTextContainerRoot } from "./slots/ImageTextContainerSlots.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { I as IMAGE_TEXT_CONTAINER_CLASSES, a as IMAGE_TEXT_CONTAINER_KEY_COMPONENT } from "./constants.js";
+import { clsx } from "clsx";
+const ImageTextContainer = (props) => {
+  const { className, dataTestId, children, ...others } = props;
+  return /* @__PURE__ */ jsx(
+    ImageTextContainerRoot,
+    {
+      ...others,
+      ...getPropDataTestId(
+        IMAGE_TEXT_CONTAINER_KEY_COMPONENT,
+        ImageTextContainerSlots.root,
+        dataTestId
+      ),
+      className: clsx(IMAGE_TEXT_CONTAINER_CLASSES.root, className),
+      children
+    }
+  );
+};
+export {
+  ImageTextContainer as I
+};

package/components/ImageText/components/ImageTextContainer/ImageTextContainerStyle.d.ts

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

package/components/ImageText/components/ImageTextContainer/ImageTextContainerStyle.js

@@ -0,0 +1,22 @@
+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
+  })
+};
+export {
+  imageTextContainerStyles as i
+};

package/components/ImageText/components/ImageTextContainer/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clave del componente ImageTextContainer.
+ */
+export declare const IMAGE_TEXT_CONTAINER_KEY_COMPONENT = "M4LImageTextContainer";
+/**
+ * Clases del componente ImageTextContainer.
+ */
+export declare const IMAGE_TEXT_CONTAINER_CLASSES: Record<string, string>;

package/components/ImageText/components/ImageTextContainer/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { I as ImageTextContainerSlots } from "./slots/ImageTextContainerEnum.js";
+const IMAGE_TEXT_CONTAINER_KEY_COMPONENT = "M4LImageTextContainer";
+const IMAGE_TEXT_CONTAINER_CLASSES = getComponentClasses(IMAGE_TEXT_CONTAINER_KEY_COMPONENT, ImageTextContainerSlots);
+export {
+  IMAGE_TEXT_CONTAINER_CLASSES as I,
+  IMAGE_TEXT_CONTAINER_KEY_COMPONENT as a
+};

package/components/ImageText/components/ImageTextContainer/index.d.ts

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

package/components/ImageText/components/ImageTextContainer/slots/ImageTextContainerEnum.d.ts

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

package/components/ImageText/components/ImageTextContainer/slots/ImageTextContainerEnum.js

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

package/components/ImageText/components/ImageTextContainer/slots/ImageTextContainerSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const ImageTextContainerRoot: import('@emotion/styled').StyledComponent<Pick<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>>, "title" | "id" | "hidden" | "content" | "style" | "translate" | "className" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "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" | "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" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/ImageText/components/ImageTextContainer/slots/ImageTextContainerSlots.js

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { a as IMAGE_TEXT_CONTAINER_KEY_COMPONENT } from "../constants.js";
+import { I as ImageTextContainerSlots } from "./ImageTextContainerEnum.js";
+import { i as imageTextContainerStyles } from "../ImageTextContainerStyle.js";
+const ImageTextContainerRoot = styled(Box, {
+  name: IMAGE_TEXT_CONTAINER_KEY_COMPONENT,
+  slot: ImageTextContainerSlots.root
+})(imageTextContainerStyles?.root);
+export {
+  ImageTextContainerRoot as I
+};

package/components/ImageText/components/ImageTextContainer/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ImageTextContainerSlots } from './slots/ImageTextContainerEnum';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
+import { IMAGE_TEXT_CONTAINER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+export interface ImageTextContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Contenido del componente.
+     */
+    children: ReactNode;
+    /**
+     * Clase del componente.
+     */
+    className?: string;
+    /**
+     * ID de prueba.
+     */
+    dataTestId?: string;
+}
+export type ImageTextContainerOwnerState = {};
+export type ImageTextContainerSlotsType = keyof typeof ImageTextContainerSlots;
+export type ImageTextContainerStyles = M4LOverridesStyleRules<ImageTextContainerSlotsType, typeof IMAGE_TEXT_CONTAINER_KEY_COMPONENT, Theme>;

package/components/ImageText/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/ImageText/components/NoItemPrivileges/NoItemPrivileges.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { I as ImageContainerStyled, a as ImgStyled, W as WrapperTitleMessageStyled, T as TypographyStyledTitle, b as TypographyStyledMessage } from "./slots/NoItemPrivilegesSlots.js";
+import { D as DICTIONARY } from "./dictionary.js";
+import { I as IMG_ALT, D as DEFAULT_IMAGE_URL, N as NO_ITEM_PRIVILEGES_CLASSES } from "./constants.js";
+import clsx from "clsx";
+import { useRef } from "react";
+import { u as useIsVisible } from "../../hooks/useIsVisible/index.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { I as ImageTextContainer } from "../ImageTextContainer/ImageTextContainer.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);
+  const containerRef = useRef(null);
+  const isVisible = useIsVisible(containerRef);
+  return /* @__PURE__ */ jsxs(
+    ImageTextContainer,
+    {
+      className: clsx(className, NO_ITEM_PRIVILEGES_CLASSES.root),
+      dataTestId,
+      role: "alert",
+      "aria-label": "NoItemPrivileges",
+      children: [
+        /* @__PURE__ */ jsx(ImageContainerStyled, { ref: containerRef, ownerState: { isVisible }, children: /* @__PURE__ */ jsx(
+          ImgStyled,
+          {
+            src: imageUrl,
+            alt: IMG_ALT,
+            role: "presentation",
+            "aria-label": "illustration no item privileges",
+            ownerState: { isVisible }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(WrapperTitleMessageStyled, { children: [
+          /* @__PURE__ */ jsx(
+            TypographyStyledTitle,
+            {
+              size: currentSize,
+              skeletonWidth: 100,
+              variant: "bodyDens",
+              children: titleText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TypographyStyledMessage,
+            {
+              size: currentSize,
+              skeletonWidth: 200,
+              variant: "body",
+              children: messageText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  NoItemPrivileges as N
+};

package/components/ImageText/components/NoItemPrivileges/NoItemPrivilegesStyles.d.ts

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

package/components/ImageText/components/NoItemPrivileges/NoItemPrivilegesStyles.js

@@ -0,0 +1,62 @@
+const noItemPrivilegesStyles = {
+  /**
+   * 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.
+   */
+  typographyStyledTitle: ({ theme }) => ({
+    "&&&": {
+      color: theme.vars.palette.primary.semanticText
+    }
+  }),
+  /**
+   * Estilos para la typography del mensaje de NoItemPrivileges.
+   */
+  typographyStyledMessage: ({ theme }) => ({
+    "&&&": {
+      color: theme.vars.palette.text.secondary
+    }
+  })
+};
+export {
+  noItemPrivilegesStyles as n
+};

package/components/ImageText/components/NoItemPrivileges/constants.d.ts

@@ -0,0 +1,4 @@
+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/constants.js

@@ -0,0 +1,11 @@
+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
+};

package/components/ImageText/components/NoItemPrivileges/dictionary.d.ts

@@ -0,0 +1,5 @@
+export declare const getNoItemPrivilegesComponentsDictionary: () => string[];
+export declare const DICTIONARY: {
+    LABEL_TITLE: string;
+    LABEL_MESSAGE: string;
+};

package/components/ImageText/components/NoItemPrivileges/dictionary.js

@@ -0,0 +1,12 @@
+const NO_ITEM_PRIVILEGES_DICTIONARY_KEY = "no_item_privileges";
+const getNoItemPrivilegesComponentsDictionary = () => {
+  return [NO_ITEM_PRIVILEGES_DICTIONARY_KEY];
+};
+const DICTIONARY = {
+  LABEL_TITLE: `${NO_ITEM_PRIVILEGES_DICTIONARY_KEY}.label_title`,
+  LABEL_MESSAGE: `${NO_ITEM_PRIVILEGES_DICTIONARY_KEY}.label_message`
+};
+export {
+  DICTIONARY as D,
+  getNoItemPrivilegesComponentsDictionary as g
+};

package/components/ImageText/components/NoItemPrivileges/index.d.ts

@@ -0,0 +1,3 @@
+export { NoItemPrivileges } from './NoItemPrivileges';
+export type { NoItemPrivilegesSlotsType, NoItemPrivilegesOwnerState } from './types';
+export { getNoItemPrivilegesComponentsDictionary } from './dictionary';

package/components/ImageText/components/NoItemPrivileges/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,7 @@
+export declare enum NoItemPrivilegesSlots {
+    imageContainer = "imageContainer",
+    img = "img",
+    wrapperTitleMessage = "wrapperTitleMessage",
+    typographyStyledTitle = "typographyStyledTitle",
+    typographyStyledMessage = "typographyStyledMessage"
+}

package/components/ImageText/components/NoItemPrivileges/slots/NoItemPrivilegesEnum.js

@@ -0,0 +1,11 @@
+var NoItemPrivilegesSlots = /* @__PURE__ */ ((NoItemPrivilegesSlots2) => {
+  NoItemPrivilegesSlots2["imageContainer"] = "imageContainer";
+  NoItemPrivilegesSlots2["img"] = "img";
+  NoItemPrivilegesSlots2["wrapperTitleMessage"] = "wrapperTitleMessage";
+  NoItemPrivilegesSlots2["typographyStyledTitle"] = "typographyStyledTitle";
+  NoItemPrivilegesSlots2["typographyStyledMessage"] = "typographyStyledMessage";
+  return NoItemPrivilegesSlots2;
+})(NoItemPrivilegesSlots || {});
+export {
+  NoItemPrivilegesSlots as N
+};

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

@@ -0,0 +1,15 @@
+export declare const ImageContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').NoItemPrivilegesOwnerState> & 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('..').NoItemPrivilegesOwnerState> & 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('..').NoItemPrivilegesOwnerState> & 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 TypographyStyledTitle: 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('..').NoItemPrivilegesOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TypographyStyledMessage: 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('..').NoItemPrivilegesOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/ImageText/components/NoItemPrivileges/slots/NoItemPrivilegesSlots.js

@@ -0,0 +1,33 @@
+import { styled } from "@mui/material/styles";
+import { N as NoItemPrivilegesSlots } from "./NoItemPrivilegesEnum.js";
+import { N as NO_ITEM_SELECT_KEY_COMPONENT } from "../../NoItemSelected/constant.js";
+import { n as noItemPrivilegesStyles } from "../NoItemPrivilegesStyles.js";
+import { T as Typography } from "../../../../mui_extended/Typography/Typography.js";
+import { I as Image } from "../../../../Image/Image.js";
+const ImageContainerStyled = styled("div", {
+  name: NO_ITEM_SELECT_KEY_COMPONENT,
+  slot: NoItemPrivilegesSlots.imageContainer
+})(noItemPrivilegesStyles?.imageContainer);
+const ImgStyled = styled(Image, {
+  name: NO_ITEM_SELECT_KEY_COMPONENT,
+  slot: NoItemPrivilegesSlots.img
+})(noItemPrivilegesStyles?.img);
+const WrapperTitleMessageStyled = styled("div", {
+  name: NO_ITEM_SELECT_KEY_COMPONENT,
+  slot: NoItemPrivilegesSlots.wrapperTitleMessage
+})(noItemPrivilegesStyles?.wrapperTitleMessage);
+const TypographyStyledTitle = styled(Typography, {
+  name: NO_ITEM_SELECT_KEY_COMPONENT,
+  slot: NoItemPrivilegesSlots.typographyStyledTitle
+})(noItemPrivilegesStyles?.typographyStyledTitle);
+const TypographyStyledMessage = styled(Typography, {
+  name: NO_ITEM_SELECT_KEY_COMPONENT,
+  slot: NoItemPrivilegesSlots.typographyStyledMessage
+})(noItemPrivilegesStyles?.typographyStyledMessage);
+export {
+  ImageContainerStyled as I,
+  TypographyStyledTitle as T,
+  WrapperTitleMessageStyled as W,
+  ImgStyled as a,
+  TypographyStyledMessage as b
+};

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

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