@m4l/components 0.0.1 → 0.0.4

package/dist/commonjs.js

@@ -0,0 +1,5 @@
+import "clsx";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export { getDefaultExportFromCjs as g };

package/dist/components/FormActions/dictionary.d.ts

@@ -0,0 +1,3 @@
+import type { Dictionary } from '@m4l/core';
+export declare function getActionnsComponentsDictionary(): string[];
+export declare const defaultActionsDictionary: Dictionary;

package/dist/components/FormActions/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ActionsProps } from './types';
+export declare const FormActions: (props: ActionsProps) => JSX.Element;

package/dist/components/FormActions/index.js

@@ -0,0 +1,44 @@
+import { useModuleDictionary } from "@m4l/core";
+import { Button } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperActions = styled("div")(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+const FormActions = (props) => {
+  const {
+    variant,
+    standardActions,
+    actionComponents,
+    onCloseModal
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(WrapperActions, {
+    children: [actionComponents && actionComponents.map((action) => action), standardActions && standardActions.withCancel && /* @__PURE__ */ jsx(Button, {
+      variant: "outlined",
+      color: variant !== void 0 ? "inherit" : variant,
+      onClick: onCloseModal,
+      children: getLabel("actions.action_cancel")
+    }), standardActions && standardActions.onClickIntro && /* @__PURE__ */ jsx(Button, {
+      variant: "contained",
+      onClick: standardActions.onClickIntro,
+      type: "submit",
+      color: variant === "warning" ? "warning" : variant === "error" ? "error" : "info",
+      children: getLabel("actions.action_accept")
+    })]
+  });
+};
+function getActionnsComponentsDictionary() {
+  return ["actions"];
+}
+export { FormActions as F, getActionnsComponentsDictionary as g };

package/dist/components/FormActions/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/FormActions/types.d.ts

@@ -0,0 +1,7 @@
+import { ModalOpenOptions } from "src/contexts/ModalContext/types";
+declare type ImodalOpt = Pick<ModalOpenOptions, 'actionComponents' | 'standardActions'>;
+export interface ActionsProps extends ImodalOpt {
+    variant?: string | undefined;
+    onCloseModal?: () => void | undefined;
+}
+export {};

package/dist/components/ModalDialog/components/Header/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { HeaderProps } from './types';
+export declare const Header: (props: HeaderProps) => JSX.Element;

package/dist/components/ModalDialog/components/Header/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { VariantModal } from 'src/contexts/ModalContext/types';
+export interface HeaderProps {
+    variant?: VariantModal;
+    title: string;
+    iconComponent?: ReactNode;
+    withClose?: boolean;
+    onCloseModal?: () => void;
+}

package/dist/components/ModalDialog/dictionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from "@m4l/core";
+export declare function getModalDialogComponentsDictionary(): string[];
+export declare const defaultModalDialogDictionary: Dictionary;

package/dist/components/ModalDialog/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ModalDialog: () => JSX.Element;

package/dist/components/ModalDialog/index.js

@@ -0,0 +1,180 @@
+import { Dialog, IconButton, Paper } from "@mui/material";
+import { D as Draggable } from "../../react-draggable.js";
+import { u as useModal } from "../../hooks/useModal/index.js";
+import { styled } from "@mui/material/styles";
+import { R as Resizeable } from "../Resizeable/index.js";
+import { u as useResponsiveDesktop } from "../../vendor.js";
+import { useEnvironment } from "@m4l/core";
+import { B as BoxIcon } from "../mui_extended/BoxIcon/index.js";
+import "../mui_extended/MenuPopover/index.js";
+import "react";
+import "react-router-dom";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../mui_extended/MenuActions/index.js";
+import { F as FormActions, g as getActionnsComponentsDictionary } from "../FormActions/index.js";
+const WrapperDialog = styled(Dialog)(() => ({}));
+const Container = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const Header$1 = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  height: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+const IconTitleContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+const IconHeader = styled("div")(({ theme, variant }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5),
+  "& > span": {
+    background: variant === "warning" ? theme.palette.warning.main : variant === "error" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : theme.palette.text.primary
+  }
+}));
+const Content = styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const ModalTitle = styled("div")(({ theme, variant }) => ({
+  ...theme.typography.subtitle1,
+  color: variant === "warning" ? theme.palette.warning.main : variant === "error" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : theme.palette.text.primary
+}));
+const Header = (props) => {
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const {
+    variant,
+    title,
+    iconComponent,
+    withClose,
+    onCloseModal
+  } = props;
+  const iconSrcWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/warning.svg`;
+  const iconSrcError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/error.svg`;
+  const iconSrcInfo = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/info.svg`;
+  const iconDefault = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/icon_bar_tittle.svg`;
+  return /* @__PURE__ */ jsxs(Header$1, {
+    id: "Header",
+    children: [/* @__PURE__ */ jsxs(IconTitleContainer, {
+      className: "draggable-dialog-title",
+      children: [/* @__PURE__ */ jsx(IconHeader, {
+        variant,
+        children: !iconComponent ? /* @__PURE__ */ jsx(BoxIcon, {
+          src: variant === "warning" ? iconSrcWarning : variant === "delete" ? iconSrcError : variant === "info" ? iconSrcInfo : iconDefault
+        }) : iconComponent
+      }), /* @__PURE__ */ jsx(ModalTitle, {
+        variant,
+        children: title
+      })]
+    }), withClose && /* @__PURE__ */ jsx(IconButton, {
+      onClick: onCloseModal,
+      "aria-label": "click",
+      children: /* @__PURE__ */ jsx(BoxIcon, {
+        src: `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/close.svg`
+      })
+    })]
+  });
+};
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(Draggable, {
+    handle: ".draggable-dialog-title",
+    cancel: '[class*="MuiDialogContent-root"]',
+    children: /* @__PURE__ */ jsx(Paper, {
+      sx: {
+        maxHeight: "unset",
+        maxWidth: "unset"
+      },
+      ...props
+    })
+  });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, {
+    sx: {
+      maxHeight: "unset",
+      maxWidth: "unset",
+      height: "100%"
+    },
+    ...props
+  });
+}
+const ModalDialog = () => {
+  const {
+    open,
+    initialWidth = 600,
+    initialHeigth = 400,
+    maxWidth,
+    maxHeigth,
+    withClose = true,
+    onQueryClose,
+    contentComponent,
+    title,
+    closeModal,
+    iconComponent,
+    standardActions,
+    actionComponents,
+    variant
+  } = useModal();
+  const isDesktop = useResponsiveDesktop();
+  const onCloseModal = () => {
+    closeModal();
+  };
+  const contentComnponent = /* @__PURE__ */ jsxs(Container, {
+    id: "Container",
+    children: [/* @__PURE__ */ jsx(Header, {
+      variant,
+      title,
+      iconComponent,
+      withClose,
+      onCloseModal
+    }), /* @__PURE__ */ jsx(Content, {
+      id: "Content",
+      children: typeof contentComponent === "function" ? contentComponent() : contentComponent
+    }), (standardActions || actionComponents) && /* @__PURE__ */ jsx(FormActions, {
+      variant,
+      standardActions,
+      actionComponents,
+      onCloseModal
+    })]
+  });
+  return /* @__PURE__ */ jsxs(WrapperDialog, {
+    open,
+    onClose: onQueryClose,
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    children: [isDesktop && /* @__PURE__ */ jsx(Resizeable, {
+      width: initialWidth,
+      height: initialHeigth,
+      maxWidth,
+      maxHeigth,
+      children: contentComnponent
+    }), !isDesktop && contentComnponent]
+  });
+};
+function getModalDialogComponentsDictionary() {
+  return ["modal_dialog"].concat(getActionnsComponentsDictionary());
+}
+const defaultModalDialogDictionary = {
+  modal_dialog: {}
+};
+export { ModalDialog as M, defaultModalDialogDictionary as d, getModalDialogComponentsDictionary as g };

package/dist/components/ModalDialog/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { VariantProps } from './types';
+export declare const WrapperDialog: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ModalDialog/types.d.ts

@@ -0,0 +1,5 @@
+export interface ModalDialogProps {
+}
+export interface VariantProps {
+    variant?: string | undefined;
+}

package/dist/components/Resizeable/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ResizeableProps } from './types';
+export declare function Resizeable(props: ResizeableProps): JSX.Element;

package/dist/components/Resizeable/index.js

@@ -0,0 +1,92 @@
+import { styled } from "@mui/material/styles";
+import { R as ResizableBox } from "../../react-resizable.js";
+import { jsx } from "react/jsx-runtime";
+const WrapperResizeable = styled(ResizableBox)(({
+  theme
+}) => ({
+  "&.react-resizable": {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  },
+  "& .react-resizable-handle": {
+    position: "absolute",
+    width: "20px",
+    height: "20px",
+    margin: "4px",
+    backgroundRepeat: "no-repeat",
+    backgroundOrigin: "content-box",
+    boxSizing: "border-box",
+    backgroundColor: theme.palette.action.active,
+    mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
+    backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
+    backgroundPosition: "bottom right",
+    padding: "0 3px 3px 0"
+  },
+  "& .react-resizable-handle-sw": {
+    bottom: "0",
+    left: "0",
+    cursor: "sw-resize",
+    transform: "rotate(90deg)"
+  },
+  ".react-resizable-handle-se": {
+    bottom: "0",
+    right: "0",
+    cursor: "se-resize"
+  },
+  "& .react-resizable-handle-nw": {
+    top: "0",
+    left: "0",
+    cursor: "nw-resize",
+    transform: "rotate(180deg)"
+  },
+  "& .react-resizable-handle-ne": {
+    top: "0",
+    right: "0",
+    cursor: "ne-resize",
+    transform: "rotate(270deg)"
+  },
+  "& .react-resizable-handle-w, .react-resizable-handle-e": {
+    top: "50%",
+    marginTop: "-10px",
+    cursor: "ew-resize"
+  },
+  "& .react-resizable-handle-w": {
+    left: "0",
+    transform: "rotate(135deg)"
+  },
+  "& .react-resizable-handle-e": {
+    right: "0",
+    transform: "rotate(315deg) "
+  },
+  "& .react-resizable-handle-n,.react-resizable-handle-s": {
+    left: "50%",
+    marginLeft: "-10px",
+    cursor: "ns-resize"
+  },
+  "& .react-resizable-handle-n": {
+    top: "0",
+    transform: "rotate(225deg)"
+  },
+  "& .react-resizable-handle-s": {
+    bottom: "0",
+    transform: "rotate(45deg)"
+  }
+}));
+function Resizeable(props) {
+  const {
+    children,
+    width,
+    height,
+    maxHeigth,
+    maxWidth
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperResizeable, {
+    width,
+    height,
+    maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
+    resizeHandles: ["se", "nw"],
+    children
+  });
+}
+export { Resizeable as R };

package/dist/components/Resizeable/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ResizableBox } from 'react-resizable';
+export declare const WrapperResizeable: import("@emotion/styled").StyledComponent<import("react-resizable").ResizableProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
+    ref?: import("react").Ref<ResizableBox> | undefined;
+}>;

package/dist/components/Resizeable/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface ResizeableProps {
+    children: ReactNode;
+    width: number;
+    height: number;
+    maxWidth?: number;
+    maxHeigth?: number;
+}

package/dist/components/index.d.ts

@@ -1,2 +1,7 @@
 export * from '../components/mui_extended';
+export * from '../components/FormActions';
+export * from '../components/ModalDialog';
+export * from '../components/ModalDialog/dictionary';
+export * from '../components/Resizeable';
 export * from '../components/SplitLayout';
+export type { SplitPosition } from '../components/SplitLayout/types';

package/dist/components/mui_extended/MenuActions/styles.d.ts

@@ -2,7 +2,7 @@
 export declare const WrapperMenuActions: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
@@ -26,5 +26,5 @@ export declare const WrapperMenuActions: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/mui_extended/index.d.ts

@@ -3,7 +3,7 @@ export { default as MenuPopover } from './MenuPopover';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export { default as MenuActions } from './MenuActions';
-export type { MenuAction } from './MenuActions/types';
+export type { MenuAction, ComponentActionProps } from './MenuActions/types';
 declare module '@mui/material/styles/createPalette' {
     interface TypeBackground {
         neutral: string;

package/dist/contexts/ModalContext/components/ContentConfirm/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ModalConfirmProps } from './types';
+export declare const ContentConfirm: (props: ModalConfirmProps) => JSX.Element;

package/dist/contexts/ModalContext/components/ContentConfirm/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VariantProps } from './types';
+export declare const WrapperContentConfirm: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IllustrationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MessageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/contexts/ModalContext/components/ContentConfirm/types.d.ts

@@ -0,0 +1,8 @@
+import { VariantModal } from '../../types';
+export interface ModalConfirmProps {
+    variant?: VariantModal;
+    msg?: string;
+}
+export interface VariantProps {
+    variant?: VariantModal;
+}

package/dist/contexts/ModalContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ModalContextProps, TProps } from './types';
+declare const ModalContext: import("react").Context<ModalContextProps>;
+declare function ModalProvider({ children }: TProps): JSX.Element;
+export { ModalProvider, ModalContext };

package/dist/contexts/ModalContext/index.js

@@ -0,0 +1,162 @@
+import { createContext, useState } from "react";
+import { useEnvironment, voidFunction } from "@m4l/core";
+import Typography from "@mui/material/Typography";
+import { styled } from "@mui/material/styles";
+import { B as BoxIcon } from "../../components/mui_extended/BoxIcon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { M as ModalDialog } from "../../components/ModalDialog/index.js";
+const WrapperContentConfirm = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+}));
+const ModalContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gridGap: theme.spacing(5),
+  flexGrow: 1,
+  [theme.breakpoints.up("sm")]: {
+    display: "grid",
+    flexDirection: "row",
+    gridTemplateColumns: "1fr 1fr"
+  }
+}));
+const IllustrationContainer = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& > span": {
+    background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
+  }
+}));
+const MessageContainer = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const ContentConfirm = (props) => {
+  const {
+    variant = "info",
+    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
+  } = props;
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  return /* @__PURE__ */ jsx(WrapperContentConfirm, {
+    children: /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
+        variant,
+        children: /* @__PURE__ */ jsx(BoxIcon, {
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
+          sx: {
+            width: "230px",
+            height: "194px"
+          }
+        })
+      }), /* @__PURE__ */ jsx(MessageContainer, {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body1",
+          children: msg
+        })
+      })]
+    })
+  });
+};
+const initialState = {
+  initialWidth: 600,
+  initialHeigth: 400,
+  open: false,
+  withClose: true,
+  onQueryClose: voidFunction,
+  iconComponent: void 0,
+  contentComponent: void 0,
+  actionComponents: void 0,
+  openModal: voidFunction,
+  openModalConfirm: voidFunction,
+  closeModal: voidFunction,
+  hasChanges: false,
+  setChanges: voidFunction,
+  title: ""
+};
+const ModalContext = createContext(initialState);
+function ModalProvider({
+  children
+}) {
+  const [modalOptions, setModalOptions] = useState({
+    open: initialState.open,
+    withClose: true,
+    onQueryClose: voidFunction,
+    title: "",
+    iconComponent: void 0,
+    contentComponent: void 0,
+    actionComponents: void 0,
+    standardActions: void 0,
+    variant: void 0
+  });
+  const [hasChanges, setHasChanges] = useState(false);
+  const openModal = (modalOpenProps) => {
+    setModalOptions({
+      open: true,
+      ...modalOpenProps
+    });
+  };
+  const openModalConfirm = (modalOpenConfirmProps) => {
+    const {
+      variant = "warning",
+      title,
+      msg,
+      onClickIntro,
+      onClickCancel
+    } = modalOpenConfirmProps;
+    const onClickIntroClose = () => {
+      onClickIntro && onClickIntro();
+      closeModal();
+    };
+    setModalOptions({
+      open: true,
+      title,
+      variant,
+      contentComponent: /* @__PURE__ */ jsx(ContentConfirm, {
+        variant,
+        msg
+      }),
+      standardActions: {
+        withCancel: true,
+        onClickIntro: onClickIntroClose,
+        onClickCancel
+      }
+    });
+  };
+  const closeModal = () => {
+    setModalOptions((last) => ({
+      ...last,
+      open: false
+    }));
+    setHasChanges(false);
+  };
+  const setChanges = () => {
+    setHasChanges(true);
+  };
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+    value: {
+      ...modalOptions,
+      openModal,
+      openModalConfirm,
+      closeModal,
+      hasChanges,
+      setChanges
+    },
+    children: [children, /* @__PURE__ */ jsx(ModalDialog, {})]
+  });
+}
+export { ModalContext as M, ModalProvider as a };