@m4l/components 9.3.6 → 9.3.8-BE190825-beta.1

package/@types/types.d.ts

@@ -151,6 +151,10 @@ 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';
+import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -233,7 +237,10 @@ declare module '@mui/material/styles' {
     M4LLanguagePopover: LanguagePopoverSlotsType;
     M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
+    M4LNoItemPrivileges: NoItemPrivilegesSlotsType;
     M4LSettingsLayoutBase: SettingsLayoutSlotsType;
+    M4LImageText: ImageTextSlotsType;
+    M4LFormContainer: FormContainerSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -316,7 +323,10 @@ declare module '@mui/material/styles' {
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
     M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
+    M4LNoItemPrivileges: Partial<NoItemPrivilegesOwnerState>;
     M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
+    M4LImageText: Partial<ImageTextOwnerState>;
+    M4LFormContainer: Partial<FormContainerOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -724,10 +734,25 @@ 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'];
+    };
+    M4LFormContainer?: {
+      defaultProps?: ComponentsPropsList['M4LFormContainer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LFormContainer'];
+      variants?: ComponentsVariants['M4LFormContainer'];
+    };
   }
 }

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

@@ -0,0 +1,7 @@
+import { FormContainerProps } from './types';
+/**
+ * Componente que contiene un formulario y un grupo de botones.
+ * @param props - Propiedades del componente.
+ * @returns Componente FormContainer.
+ */
+export declare const FormContainer: (props: FormContainerProps) => import("react/jsx-runtime").JSX.Element;

package/components/FormContainer/FormContainer.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { R as RootStyled, F as FormContainerStyled, B as ButtonGroupStyled } from "./slots/FormContainerSlots.js";
+import { F as FORM_CONTAINER_CLASSES } from "./constants.js";
+const FormContainer = (props) => {
+  const { children, buttonGroup } = props;
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      role: "region",
+      "aria-label": "formContainer",
+      className: FORM_CONTAINER_CLASSES.root,
+      children: [
+        /* @__PURE__ */ jsx(FormContainerStyled, { children }),
+        buttonGroup && /* @__PURE__ */ jsx(ButtonGroupStyled, { children: buttonGroup })
+      ]
+    }
+  );
+};
+export {
+  FormContainer as F
+};

package/components/FormContainer/FormContainer.styles.d.ts

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

package/components/FormContainer/FormContainer.styles.js

@@ -0,0 +1,27 @@
+const formContainerStyles = {
+  /**
+   * Estilos para el contenedor principal.
+   */
+  root: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "auto",
+    flexDirection: "column"
+  }),
+  /**
+   * Estilos para el contenedor del formulario.
+   */
+  formContainer: ({ theme }) => ({
+    display: "flex",
+    width: "100%",
+    flexGrow: 1,
+    overflow: "auto",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp4
+  }),
+  buttonGroup: {}
+};
+export {
+  formContainerStyles as f
+};

package/components/FormContainer/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const FORM_CONTAINER_COMPONENT_KEY = "M4LFormContainer";
+export declare const FORM_CONTAINER_CLASSES: Record<string, string>;

package/components/FormContainer/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { F as FormContainerSlots } from "./slots/FormContainerEnum.js";
+const FORM_CONTAINER_COMPONENT_KEY = "M4LFormContainer";
+const FORM_CONTAINER_CLASSES = getComponentClasses(FORM_CONTAINER_COMPONENT_KEY, FormContainerSlots);
+export {
+  FORM_CONTAINER_CLASSES as F,
+  FORM_CONTAINER_COMPONENT_KEY as a
+};

package/components/FormContainer/index.d.ts

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

package/components/FormContainer/index.js

@@ -0,0 +1 @@
+

package/components/FormContainer/slots/FormContainerEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum FormContainerSlots {
+    root = "root",
+    formContainer = "formContainer",
+    buttonGroup = "buttonGroup"
+}

package/components/FormContainer/slots/FormContainerEnum.js

@@ -0,0 +1,9 @@
+var FormContainerSlots = /* @__PURE__ */ ((FormContainerSlots2) => {
+  FormContainerSlots2["root"] = "root";
+  FormContainerSlots2["formContainer"] = "formContainer";
+  FormContainerSlots2["buttonGroup"] = "buttonGroup";
+  return FormContainerSlots2;
+})(FormContainerSlots || {});
+export {
+  FormContainerSlots as F
+};

package/components/FormContainer/slots/FormContainerSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').FormContainerOwnerState> & 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 FormContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').FormContainerOwnerState> & 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 ButtonGroupStyled: import('@emotion/styled').StyledComponent<Pick<import('../../CommonActions/components/ActionsContainer').ActionsContainerProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../CommonActions/components/ActionsContainer').ActionsContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').FormContainerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/FormContainer/slots/FormContainerSlots.js

@@ -0,0 +1,22 @@
+import { styled } from "@mui/material";
+import { a as FORM_CONTAINER_COMPONENT_KEY } from "../constants.js";
+import { F as FormContainerSlots } from "./FormContainerEnum.js";
+import { f as formContainerStyles } from "../FormContainer.styles.js";
+import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+const RootStyled = styled("div", {
+  name: FORM_CONTAINER_COMPONENT_KEY,
+  slot: FormContainerSlots.root
+})(formContainerStyles?.root);
+const FormContainerStyled = styled("div", {
+  name: FORM_CONTAINER_COMPONENT_KEY,
+  slot: FormContainerSlots.formContainer
+})(formContainerStyles?.formContainer);
+const ButtonGroupStyled = styled(ActionsContainer, {
+  name: FORM_CONTAINER_COMPONENT_KEY,
+  slot: FormContainerSlots.buttonGroup
+})(formContainerStyles?.buttonGroup);
+export {
+  ButtonGroupStyled as B,
+  FormContainerStyled as F,
+  RootStyled as R
+};

package/components/FormContainer/test/FormContainer.test.d.ts

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

package/components/FormContainer/types.d.ts

@@ -0,0 +1,11 @@
+import { M4LOverridesStyleRules } from 'src/@types/augmentations';
+import { FormContainerSlots } from './slots/FormContainerEnum';
+import { FORM_CONTAINER_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+export interface FormContainerProps {
+    children: React.ReactNode;
+    buttonGroup?: React.ReactNode;
+}
+export type FormContainerOwnerState = {};
+export type FormContainerSlotsType = keyof typeof FormContainerSlots;
+export type FormContainerStyles = M4LOverridesStyleRules<FormContainerSlotsType, typeof FORM_CONTAINER_COMPONENT_KEY, Theme>;

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