@m4l/components 0.1.40 → 0.1.41

package/components/hook-form/RHFUpload/index.d5cc7c13.js

@@ -0,0 +1,285 @@
+import { styled as styled$1, Skeleton, FormHelperText } from "@mui/material";
+import { useCallback } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import isString from "lodash/isString";
+import { useDropzone } from "react-dropzone";
+import { styled, alpha } from "@mui/material/styles";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const WrapperUploadImage = styled("div")(({
+  theme
+}) => ({
+  width: "inherit",
+  height: "100%",
+  minHeight: "200px",
+  minWidth: theme.spacing(20),
+  margin: "auto",
+  borderRadius: theme.spacing(1),
+  padding: theme.spacing(1),
+  border: `1px dashed ${theme.palette.divider}`
+}));
+const DropZoneStyle = styled("div")(({
+  theme
+}) => ({
+  zIndex: 0,
+  width: "100%",
+  height: "100%",
+  outline: "none",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: theme.spacing(1),
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center",
+  "& > *": {
+    width: "100%",
+    height: "100%"
+  },
+  "&:hover": {
+    cursor: "pointer",
+    "& .placeholder": {
+      zIndex: 9
+    }
+  }
+}));
+const PlaceholderStyle = styled("div")(({
+  theme
+}) => ({
+  "&:hover": {
+    opacity: 1
+  },
+  display: "flex",
+  justifyContent: "center",
+  position: "absolute",
+  zIndex: "2",
+  inset: "0",
+  transition: theme.transitions.create("opacity", {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shorter
+  }),
+  overflow: "auto"
+}));
+const ContainerUploadBody = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(3, 5),
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  gap: theme.spacing(3)
+}));
+const Containermessage = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: theme.spacing(1)
+}));
+const ContainerTitle = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle1,
+  textAlign: "center"
+}));
+const ContainerDescription = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  textAlign: "center"
+}));
+const ContainerConditions = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  textAlign: "center"
+}));
+const WrapperImage = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center"
+}));
+styled("div")(() => ({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  inset: "0",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+const WrapperFileImage = styled("div")(() => ({
+  "& .m4l_image > img": {
+    objectFit: "cover",
+    width: "auto",
+    margin: "0 auto"
+  }
+}));
+const MaskSkeletonUploadImage = styled$1("div")(({
+  theme
+}) => ({
+  maskPosition: "center!important",
+  maskRepeat: "no-repeat!important",
+  WebkitMaskRepeat: "no-repeat!important",
+  border: `1px dashed ${theme.palette.divider}`,
+  width: "100%",
+  height: "100%",
+  mask: `url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')`,
+  WebkitMask: `url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')`
+}));
+const SkeletonUploadImage = () => {
+  return /* @__PURE__ */ jsx(WrapperUploadImage, {
+    children: /* @__PURE__ */ jsx(MaskSkeletonUploadImage, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rectangular",
+        width: "100%",
+        height: "100%"
+      })
+    })
+  });
+};
+function UploadImage({
+  error,
+  file,
+  helperText,
+  sx,
+  ...other
+}) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject
+  } = useDropzone({
+    multiple: false,
+    ...other
+  });
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonUploadImage, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(WrapperUploadImage, {
+      sx: {
+        ...(isDragReject || error) && {
+          borderColor: "error.light"
+        },
+        ...sx
+      },
+      children: /* @__PURE__ */ jsxs(DropZoneStyle, {
+        ...getRootProps(),
+        sx: {
+          ...isDragActive && {
+            opacity: 0.72
+          }
+        },
+        children: [/* @__PURE__ */ jsx("input", {
+          ...getInputProps()
+        }), file && /* @__PURE__ */ jsx(WrapperFileImage, {
+          children: /* @__PURE__ */ jsx(Image, {
+            alt: "avatar",
+            src: isString(file) ? file : file.preview || "",
+            width: "auto",
+            height: "100%"
+          })
+        }), /* @__PURE__ */ jsx(PlaceholderStyle, {
+          id: "PlaceholderStyle",
+          className: "placeholder",
+          sx: {
+            ...file ? {
+              bgcolor: alpha("#161C24", 0.72),
+              color: "common.white",
+              opacity: 0
+            } : {
+              opacity: 1
+            },
+            ...(isDragReject || error) && {
+              bgcolor: "error.lighter",
+              borderColor: "error.light",
+              color: "error.main"
+            }
+          },
+          children: /* @__PURE__ */ jsxs(ContainerUploadBody, {
+            className: "ContainerUploadBody",
+            children: [/* @__PURE__ */ jsx(WrapperImage, {
+              children: /* @__PURE__ */ jsx(Image, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+                width: "100px",
+                height: "100px"
+              })
+            }), /* @__PURE__ */ jsxs(Containermessage, {
+              children: [/* @__PURE__ */ jsx(ContainerTitle, {
+                children: getLabel("upload_image.title_upload")
+              }), /* @__PURE__ */ jsx(ContainerDescription, {
+                children: getLabel("upload_image.description")
+              }), /* @__PURE__ */ jsx(ContainerConditions, {
+                children: getLabel("upload_image.conditions")
+              })]
+            })]
+          })
+        })]
+      })
+    }), helperText && helperText]
+  });
+}
+const WrapperRHFUploadImage = styled$1("div")(() => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
+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)
+      }));
+    }
+  }, [setValue]);
+  return /* @__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(FormHelperText, {
+          error: true,
+          sx: {
+            px: 2,
+            textAlign: "center"
+          },
+          children: error.message
+        })]
+      });
+    }
+  });
+}
+export {
+  RHFUploadImage as R
+};

package/components/hook-form/index.d.ts

@@ -0,0 +1,14 @@
+export { RHFAutocomplete } from './RHFAutocomplete';
+export { getRHFAutocompleteComponentsDictionary } from './RHFAutocomplete/dictionary';
+export { RHFAutocompleteAsync } from './RHFAutocompleteAsync';
+export { getRHFAutocompleteAsyncComponentsDictionary } from './RHFAutocompleteAsync/dictionary';
+export { RHFCheckbox } from './RHFCheckbox';
+export { RHFDateTime } from './RHFDateTime';
+export { RHFMultiCheckbox } from './RHFMultiCheckbox';
+export { RHFSelect } from './RHFSelect';
+export { RHFTextField } from './RHFTextField';
+export { RHFTextFieldPassword } from './RHFTextFieldPassword';
+export { RHFRadioGroup } from './RHFRadioGroup';
+export { RHFPeriod } from './RHFPeriod';
+export { getPeriodComponetsDictionary } from '../Period/dictionary';
+export * from './RHFUpload';

package/components/index.d.ts

@@ -0,0 +1,40 @@
+export * from './animate';
+export * from './areas';
+export * from './hook-form';
+export * from './mui_extended';
+export * from './formatters';
+export * from './formatters/types';
+export * from './formatters/dicctionary';
+export { DataGrid } from './DataGrid';
+export * from './DataGrid/formatters';
+export type { Column, EditorProps, FormatterProps } from 'react-data-grid';
+export type { RowKey } from './DataGrid/types';
+export { getDataGridComponentsDictionary as getGridComponentsDictionary } from './DataGrid/dictionary';
+export { TextEditor, NumberEditor } from './DataGrid/subcomponents/editors/TextEditor';
+export { getDataGridRowsFromSet } from './DataGrid/utils/getDataGridRowsFromSet';
+export * from './DynamicFilter';
+export * from './DynamicFilter/dictionary';
+export * from './ErrorLabel';
+export type { FilterFieldApply, RawFilterFieldApply, InitialFilterFieldApply, } from './DynamicFilter/types';
+export * from './CommonActions/';
+export * from './CommonActions/dictionary';
+export * from './DraggableWindow';
+export * from './Icon';
+export * from './Image';
+export * from './LanguagePopover';
+export * from './Loadable';
+export * from './modal';
+export * from './NoItemSelected';
+export * from './NoItemSelected/dictionary';
+export * from './ObjectLogs';
+export * from './ObjectLogs/dictionary';
+export * from './PaperForm';
+export * from './Period';
+export type { PeriodType } from './Period/types';
+export * from './HelmetPage';
+export * from './PropertyValue';
+export * from './ResizeableWindow';
+export * from './ScrollBar';
+export { ScrollToTop } from './ScrollToTop';
+export * from './SplitLayout';
+export type { SplitPosition } from './SplitLayout/types';

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

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

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

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

package/components/modal/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/components/modal/ModalDialog/types.d.ts

@@ -0,0 +1,6 @@
+import { VariantColor } from '../../../utils/types';
+export interface ModalDialogProps {
+}
+export interface VariantProps {
+    variant?: VariantColor;
+}

package/components/modal/WindowBase/index.d.ts

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

package/components/modal/WindowBase/styles.d.ts

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

package/components/modal/WindowBase/subcomponents/Header/index.d.ts

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

package/components/modal/WindowBase/subcomponents/Header/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VariantProps } from '../../types';
+export declare const WrapperHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHeader: 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 ModalTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/modal/WindowBase/subcomponents/Header/types.d.ts

@@ -0,0 +1,2 @@
+import { WindowBaseProps } from '../../types';
+export declare type HeaderProps = Pick<WindowBaseProps, 'title' | 'variant' | 'onClickCancel'>;

package/components/modal/WindowBase/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { VariantColor } from '../../../utils/types';
+export interface WindowBaseProps {
+    title: string;
+    variant?: VariantColor;
+    children: ReactNode;
+    onClickCancel?: () => void;
+}
+export declare type VariantProps = Pick<WindowBaseProps, 'variant'>;

package/components/modal/WindowBase.04439b8e.js

@@ -0,0 +1,120 @@
+import { useEnvironment } from "@m4l/core";
+import "react";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import { styled } from "@mui/material/styles";
+import { a as getThemeVariantColor } from "../../utils/index.899eb67b.js";
+import { IconButton } from "@mui/material";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperWindowBase = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+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: getThemeVariantColor(theme, variant)
+  }
+}));
+const ModalTitle = styled("div")(({
+  theme,
+  variant
+}) => ({
+  ...theme.typography.subtitle1,
+  color: getThemeVariantColor(theme, variant),
+  width: "100%",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const Header = (props) => {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    variant,
+    title,
+    onClickCancel
+  } = props;
+  const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
+  const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
+  const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
+  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
+  return /* @__PURE__ */ jsxs(WrapperHeader, {
+    id: "Header",
+    className: "m4l_draggable_handle",
+    children: [/* @__PURE__ */ jsx(IconHeader, {
+      variant,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: variant === "warning" ? iconSrcWarning : variant === "delete" ? iconSrcError : variant === "info" ? iconSrcInfo : iconDefault
+      })
+    }), /* @__PURE__ */ jsx(ModalTitle, {
+      variant,
+      children: title
+    }), /* @__PURE__ */ jsx(IconButton, {
+      onClick: onClickCancel,
+      "aria-label": "click",
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`
+      })
+    })]
+  });
+};
+const WindowBase = (props) => {
+  const {
+    variant,
+    title,
+    children,
+    onClickCancel
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  return /* @__PURE__ */ jsxs(WrapperWindowBase, {
+    id: "WrapperWindowBase",
+    children: [/* @__PURE__ */ jsx(Header, {
+      variant,
+      title,
+      onClickCancel: onCloseCancel
+    }), children]
+  });
+};
+export {
+  WindowBase as W
+};

package/components/modal/WindowConfirm/index.d.ts

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

package/components/modal/WindowConfirm/subcomponents/MessageIlustration/index.d.ts

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

package/components/modal/WindowConfirm/subcomponents/MessageIlustration/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VariantProps } from './types';
+export declare const WrapperMessageIlustration: 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/components/modal/WindowConfirm/subcomponents/MessageIlustration/types.d.ts

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

package/components/modal/WindowConfirm/types.d.ts

@@ -0,0 +1,10 @@
+import { VariantColor } from '../../../utils/types';
+export interface WindowConfirmProps {
+    title: string;
+    variant?: VariantColor;
+    titleAccept?: string;
+    msg: string;
+    onClickIntro?: () => void;
+    onClickCancel?: () => void;
+}
+export declare type VariantProps = Pick<WindowConfirmProps, 'variant'>;