@m4l/components 9.2.32 → 9.2.34

package/@types/export.d.ts

@@ -31,9 +31,6 @@ declare module '@mui/material/styles' {
     M4LRHFDateTime?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDateTime'];
     };
-    M4LRHFUploadImage?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFUploadImage'];
-    };
     M4LIcon?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIcon'];
     };

package/@types/types.d.ts

@@ -116,7 +116,7 @@ import { AvatarOwnerState, AvatarSlotsType } from '../components/mui_extended/Av
 import { ToggleButtonOwnerState, ToggleButtonSlotsType } from '../components/mui_extended/ToggleButton/types';
 import { BooleanFormatterOwnerState, PresentationType } from '../components/formatters/BooleanFormatter/types';
 import { ToggleIconButtonOwnerState, ToggleIconButtonSlotsType } from '../components/mui_extended/ToggleIconButton/types';
-import { TabsSlotsType,TabsOwnerState } from '../components/mui_extended/Tabs/types';
+import { TabsSlotsType, TabsOwnerState } from '../components/mui_extended/Tabs/types';
 import { PopoverOwnerState, PopoverSlotsType } from '../components/mui_extended/Popover/types';
 import { NumberInputOwnerState, NumberInputSlotsType } from '../components/NumberInput/types';
 import { AccountPopoverOwnerState, AccountPopoverSlotsType } from '../components/AccountPopover/types';
@@ -138,11 +138,12 @@ import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/
 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';
+import { TimePickerOwnerState, TimePickerSlotsType } from '../components/mui_extended/TimePicker/types';
 import { DataGridOwnerState, DataGridSlotsType } from '../components/DataGrid/types';
 import { DynamicFilterAndSortOwnerState, DynamicFilterAndSortSlotsType } from '../hooks/useDynamicFilterAndSort/types';
 import { RHFUploadSingleFileOwnerState, RHFUploadSingleFileSlotsType } from '../components/hook-form/RHFUpload/RHFUploadSingleFile/types';
 import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatusFormatter/types';
+import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
 
 declare module '@mui/material/styles' {
@@ -219,6 +220,7 @@ declare module '@mui/material/styles' {
     M4LDynamicFilterAndSort: DynamicFilterAndSortSlotsType;
     M4LRHFUploadSingleFile: RHFUploadSingleFileSlotsType;
     M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
+    M4LRHFUploadImage: RHFUploadImageSlotsType;
     M4LPrintingSystem: PrintingSystemSlotsType;
   }
   interface ComponentsPropsList {
@@ -280,20 +282,21 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
     M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
-    M4LActionFormCancel : Partial<ActionFormCancelOwnerState>;
+    M4LActionFormCancel: Partial<ActionFormCancelOwnerState>;
     M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LAreasAdmin: Partial<AreasAdminOwnerState>;
     M4LStack: Partial<StackOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
     M4LDivider: Partial<DividerOwnerState>;
     M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
-    M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
+    M4LActionFormIntro: Partial<ActionFormIntroOwnerState>;
     M4LAreasViewer: Partial<AreasViewerOwnerState>;
     M4LTimePicker: Partial<TimePickerOwnerState>;
     M4LDataGrid: Partial<DataGridOwnerState>;
     M4LDynamicFilterAndSort: Partial<DynamicFilterAndSortOwnerState>;
     M4LRHFUploadSingleFile: Partial<RHFUploadSingleFileOwnerState>;
     M4LChipStatusFormatter: Partial<ChipStatusFormatterOwnerState>;
+    M4LRHFUploadImage: Partial<RHFUploadImageOwnerState>;
     M4LPrintingSystem: Partial<PrintingSystemOwnerState>;
   }
   interface Components {
@@ -568,14 +571,14 @@ declare module '@mui/material/styles' {
       variants?: ComponentsVariants['M4LLinearProgressIndeterminate'];
     };
     M4LMenuDivider?: {
-        defaultProps?: ComponentsPropsList['M4LMenuDivider'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
-        variants?: ComponentsVariants['M4LMenuDivider'];
-      };
+      defaultProps?: ComponentsPropsList['M4LMenuDivider'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
+      variants?: ComponentsVariants['M4LMenuDivider'];
+    };
     M4LRHFSelect?: {
-        defaultProps?: ComponentsPropsList['M4LRHFSelect'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
-        variants?: ComponentsVariants['M4LRHFSelect'];
+      defaultProps?: ComponentsPropsList['M4LRHFSelect'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
+      variants?: ComponentsVariants['M4LRHFSelect'];
     };
     M4LActionFormCancel: {
       defaultProps?: ComponentsPropsList['M4LActionFormCancel'];
@@ -593,9 +596,9 @@ declare module '@mui/material/styles' {
       variants?: ComponentsVariants['M4LRHFSelect'];
     };
     M4LScrollBar?: {
-        defaultProps?: ComponentsPropsList['M4LScrollBar'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
-        variants?: ComponentsVariants['M4LScrollBar'];
+      defaultProps?: ComponentsPropsList['M4LScrollBar'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
+      variants?: ComponentsVariants['M4LScrollBar'];
     }
     M4LAreasAdmin?: {
       defaultProps?: ComponentsPropsList['M4LAreasAdmin'];
@@ -613,14 +616,14 @@ declare module '@mui/material/styles' {
       variants?: ComponentsVariants['M4LDateTimePicker'];
     };
     M4LNoItemSelected?: {
-        defaultProps?: ComponentsPropsList['M4LNoItemSelected'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LNoItemSelected'];
-        variants?: ComponentsVariants['M4LNoItemSelected'];
+      defaultProps?: ComponentsPropsList['M4LNoItemSelected'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LNoItemSelected'];
+      variants?: ComponentsVariants['M4LNoItemSelected'];
     }
     M4LActionFormIntro?: {
-        defaultProps?: ComponentsPropsList['M4LActionFormIntro '];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LActionFormIntro '];
-        variants?: ComponentsVariants['M4LActionFormIntro '];
+      defaultProps?: ComponentsPropsList['M4LActionFormIntro '];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LActionFormIntro '];
+      variants?: ComponentsVariants['M4LActionFormIntro '];
     };
     M4LDivider?: {
       defaultProps?: ComponentsPropsList['M4LDivider'];
@@ -662,10 +665,15 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LChipStatusFormatter'];
       variants?: ComponentsVariants['M4LChipStatusFormatter'];
     };
+    M4LRHFUploadImage?: {
+      defaultProps?: ComponentsPropsList['M4LRHFUploadImage'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFUploadImage'];
+      variants?: ComponentsVariants['M4LRHFUploadImage'];
+    };
     M4LPrintingSystem?: {
       defaultProps?: ComponentsPropsList['M4LPrintingSystem'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LPrintingSystem'];
       variants?: ComponentsVariants['M4LPrintingSystem'];
     };
-   }
+  }
 }

package/components/DataGrid/subcomponents/Actions/subcomponents/hooks/useModalSettings/index.js

@@ -39,6 +39,7 @@ const useModalSettings = () => {
         {
           title: getLabel("data_grid.settings_title"),
           iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+          onClose: onCloseSettings,
           children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
             /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(TableContainerStyled, { children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(
               ColumnsConfig,

package/components/DynamicFilter/DynamicFilter.d.ts

@@ -1,9 +1,9 @@
 import { DynamicFilterProps, DynamicFilterRef } from './types';
 /**
  * DynamicFilter: Componente que renderiza filtros dinámicos para una lista de elementos.
+ * Permite filtrar datos junto con inputs, botón clear y refresh.
  *
- *  ### Dependecias:
- *- **`useFlagsPresent:`** Hook que permite verificar si una lista de flags se encuentran presentes.
- *
+ * ### Dependecias:
+ * - **`useFlagsPresent:`** Hook que permite verificar si una lista de flags se encuentran presentes.
  */
 export declare const DynamicFilter: import('react').ForwardRefExoticComponent<DynamicFilterProps & import('react').RefAttributes<DynamicFilterRef>>;

package/components/DynamicFilter/store/DynamicFilterContext.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { useIsMobile, useFirstRender } from "@m4l/graphics";
 import { createContext, forwardRef, useRef, useImperativeHandle, useEffect } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { useIsMobile, useFirstRender } from "@m4l/graphics";
 import { A as ALL_FIELD } from "../constants.js";
-import { f as formatToInitialFilters } from "../helpers/formatToInitialFilters.js";
 import { f as formatToRawFilter } from "../helpers/formatToRowFilter.js";
+import { f as formatToInitialFilters } from "../helpers/formatToInitialFilters.js";
 import { c as createDynamicFilterStore } from "./DynamicFilterStore.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const DynamicFilterContext = createContext(null);

package/components/ObjectLogs/ObjectLogs.d.ts

@@ -0,0 +1,5 @@
+import { LogsProps } from './types';
+/**
+ * TODO: Documentar
+ */
+export declare function ObjectLogs(props: LogsProps): import("react/jsx-runtime").JSX.Element;

package/components/ObjectLogs/components/DetailFormatter/index.js

@@ -9,14 +9,13 @@ import { S as Stack } from "../../../mui_extended/Stack/Stack.js";
 import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 function DetailFormatter(props) {
   const { log_id } = props;
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isDesktop = !useIsMobile();
   const onClickDetail = () => {
     openModal({
-      // onQueryClose: () => closeModal(),
-      window: /* @__PURE__ */ jsx(WindowBase, { title: getLabel("data_grid.settings_title"), children: /* @__PURE__ */ jsx(Stack, { direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialog, { log_id }) }) }),
+      window: /* @__PURE__ */ jsx(WindowBase, { onClose: closeModal, title: getLabel("data_grid.settings_title"), children: /* @__PURE__ */ jsx(Stack, { direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialog, { log_id }) }) }),
       fullScreen: !isDesktop ? true : false
     });
   };

package/components/ObjectLogs/index.d.ts

@@ -1,5 +1 @@
-import { LogsProps } from './types';
-/**
- * TODO: Documentar
- */
-export declare function ObjectLogs(props: LogsProps): import("react/jsx-runtime").JSX.Element;
+export * from './ObjectLogs';

package/components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.d.ts

@@ -1,5 +1,21 @@
 import { RHFUploadImageProps } from './types';
 /**
- * TODO: Documentar
+ * RHFUploadImage es un componente que permite subir una imagen con react-hook-form
+ *  ### Dependencias:
+ * - **`useFormContext:`** Hook que provee acceso a los métodos y propiedades de un formulario react-hook-form.
+ * - **`useFormatter:`** Hook que permite acceder a los diferentes formatters de la aplicación.
+ * @example
+ * ```tsx
+ * const ExampleComponent = () => {
+ *   const { control } = useForm();
+ *  return (
+ *    <RHFUploadImage
+ *     name="image"
+ *     control={control}
+ *     size="medium"
+ *     variant="outlined"
+ *     label="Imagen"
+ *     helperMessage="Seleccione una imagen"
+ *    />
  */
-export declare function RHFUploadImage({ name, ...other }: RHFUploadImageProps): import("react/jsx-runtime").JSX.Element;
+export declare function RHFUploadImage(props: RHFUploadImageProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js

@@ -1,40 +1,78 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
-import { U as UploadImage } from "./subcomponents/UploadImage/index.js";
-import { W as WrapperRHFUploadImage } from "./styles.js";
+import { R as RHFUploadImageRootStyled } from "./slots/RHFUploadImageSlots.js";
+import { U as UploadImage } from "./subcomponents/UploadImage/UploadImage.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { L as Label } from "../../../Label/Label.js";
 import { H as HelperError } from "../../../HelperError/HelperError.js";
-function RHFUploadImage({ name, ...other }) {
-  const { control, setValue } = useFormContext();
-  const handleDrop = useCallback(
-    (acceptedFiles) => {
-      const file = acceptedFiles[0];
-      if (file) {
-        setValue(
-          name,
-          Object.assign(file, {
-            preview: URL.createObjectURL(file)
-          })
-        );
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setValue]
-  );
-  return /* @__PURE__ */ jsx(
+function RHFUploadImage(props) {
+  const {
+    name,
+    size,
+    accept,
+    label,
+    mandatory,
+    mandatoryMessage,
+    maxSize,
+    helperMessage,
+    ...other
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(RHFUploadImageRootStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(
     Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error } }) => {
-        const checkError = !!error && !field.value;
-        return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, { children: [
-          /* @__PURE__ */ jsx(UploadImage, { onDrop: handleDrop, error: checkError, ...other, file: field.value }),
-          checkError && /* @__PURE__ */ jsx(HelperError, { message: error.message })
+      render: ({ field: { value, onChange }, fieldState: { error } }) => {
+        const checkError = !!error && !value;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            Label,
+            {
+              error: checkError,
+              label,
+              mandatory,
+              mandatoryMessage,
+              helperMessage,
+              size: adjustedSize
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            UploadImage,
+            {
+              onDrop: (acceptedFiles) => {
+                const file = acceptedFiles[0];
+                if (file) {
+                  onChange(
+                    Object.assign(file, {
+                      preview: URL.createObjectURL(file)
+                    })
+                  );
+                }
+              },
+              onRemove: () => {
+                onChange(null);
+              },
+              error: checkError,
+              ...other,
+              file: value,
+              size: adjustedSize,
+              maxSize
+            }
+          ),
+          checkError && /* @__PURE__ */ jsx(
+            HelperError,
+            {
+              message: error?.message,
+              size: adjustedSize
+            }
+          )
         ] });
       }
     }
-  );
+  ) });
 }
 export {
   RHFUploadImage as R

package/components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.styles.d.ts

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

package/components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.styles.js

@@ -0,0 +1,117 @@
+const rhfUploadImageStyles = {
+  /**
+   * rhfUploadImageRoot: estilos del contenedor principal
+   */
+  rhfUploadImageRoot: ({ theme }) => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: "100%",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * uploadImageRoot: estilos del contenedor principal
+   */
+  uploadImageRoot: ({ theme, ownerState }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp2}`,
+    border: theme.vars.size.borderStroke.container,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    borderColor: theme.vars.palette.border.default,
+    width: "100%",
+    ...ownerState.isDragAccept && {
+      borderColor: theme.vars.palette.primary.main
+    },
+    ...ownerState.isDragReject && {
+      borderColor: theme.vars.palette.error.main
+    },
+    ...ownerState.error && {
+      borderColor: theme.vars.palette.error.main
+    }
+  }),
+  /**
+   * contentModuleLayout: estilos del contenedor de contenido
+   */
+  contentModuleLayout: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings["sp2-5"],
+    background: theme.vars.palette.background.neutral,
+    borderRadius: theme.vars.size.borderRadius["r0-5"],
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp4,
+    flexDirection: "column",
+    "&:hover": {
+      button: {
+        display: "flex !important"
+      }
+    }
+  }),
+  /**
+   * contentImage: estilos del contenedor de la imagen
+   */
+  contentImage: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    width: "100%",
+    maxWidth: "200px"
+  }),
+  /**
+   * contentImageText: estilos del contenedor de texto de la imagen
+   */
+  contentImageText: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * contentMessage: estilos del contenedor de mensaje
+   */
+  contentMessage: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  typography: ({ theme }) => ({
+    color: theme.vars.palette.text.secondary
+  }),
+  /**
+   * buttonStyled: estilos del botón
+   */
+  button: () => ({
+    width: "fit-content",
+    alignSelf: "center",
+    "& span": {
+      cursor: "pointer"
+    }
+  }),
+  /**
+   * iconButtonRemove: estilos del botón de remover
+   */
+  iconButtonRemove: () => ({
+    display: "none !important",
+    position: "absolute",
+    top: "7px",
+    right: "7px",
+    zIndex: 1
+  }),
+  divider: ({ theme }) => ({
+    height: theme.vars.size.borderStroke.container
+  }),
+  /**
+   * containPreview: estilos del contenedor de la vista previa
+   */
+  containPreview: () => ({
+    position: "relative",
+    display: "flex",
+    "& img": {
+      width: "100%",
+      height: "auto"
+    }
+  })
+};
+export {
+  rhfUploadImageStyles as r
+};

package/components/hook-form/RHFUpload/RHFUploadImage/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHF_UPLOAD_IMAGE_KEY_COMPONENT = "M4LRHFUploadImage";

package/components/hook-form/RHFUpload/RHFUploadImage/constants.js

@@ -0,0 +1,4 @@
+const RHF_UPLOAD_IMAGE_KEY_COMPONENT = "M4LRHFUploadImage";
+export {
+  RHF_UPLOAD_IMAGE_KEY_COMPONENT as R
+};

package/components/hook-form/RHFUpload/RHFUploadImage/slots/RHFUploadImageEnum.d.ts

@@ -0,0 +1,13 @@
+export declare enum UploadImageSlots {
+    rhfUploadImageRoot = "rhfUploadImageRoot",
+    uploadImageRoot = "uploadImageRoot",
+    contentModuleLayout = "contentModuleLayout",
+    contentImage = "contentImage",
+    contentImageText = "contentImageText",
+    contentMessage = "contentMessage",
+    typography = "typography",
+    button = "button",
+    iconButtonRemove = "iconButtonRemove",
+    containPreview = "containPreview",
+    divider = "divider"
+}

package/components/hook-form/RHFUpload/RHFUploadImage/slots/RHFUploadImageEnum.js

@@ -0,0 +1,17 @@
+var UploadImageSlots = /* @__PURE__ */ ((UploadImageSlots2) => {
+  UploadImageSlots2["rhfUploadImageRoot"] = "rhfUploadImageRoot";
+  UploadImageSlots2["uploadImageRoot"] = "uploadImageRoot";
+  UploadImageSlots2["contentModuleLayout"] = "contentModuleLayout";
+  UploadImageSlots2["contentImage"] = "contentImage";
+  UploadImageSlots2["contentImageText"] = "contentImageText";
+  UploadImageSlots2["contentMessage"] = "contentMessage";
+  UploadImageSlots2["typography"] = "typography";
+  UploadImageSlots2["button"] = "button";
+  UploadImageSlots2["iconButtonRemove"] = "iconButtonRemove";
+  UploadImageSlots2["containPreview"] = "containPreview";
+  UploadImageSlots2["divider"] = "divider";
+  return UploadImageSlots2;
+})(UploadImageSlots || {});
+export {
+  UploadImageSlots as U
+};

package/components/hook-form/RHFUpload/RHFUploadImage/slots/RHFUploadImageSlots.d.ts

@@ -0,0 +1,33 @@
+export declare const RHFUploadImageRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const UploadImageRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentModuleLayoutStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentImageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentImageTextStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentMessageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TypographyStyled: 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> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const ButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "variant" | "translate" | "className" | "classes" | "sx" | "form" | "label" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "skeletonWidth" | "startIcon" | "endIcon" | keyof import('react').RefAttributes<HTMLButtonElement> | "disableElevation" | "fullWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const IconButtonRemoveStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const ContainPreviewStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DividerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../mui_extended/Divider/types').DividerProps, keyof import('../../../../mui_extended/Divider/types').DividerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFUploadImageOwnerState> & Record<string, unknown>;
+}, {}, {}>;