@m4l/components 0.1.35 → 0.1.36

package/dist/components/Period/index.74f35862.js

@@ -0,0 +1,254 @@
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { useMemo } from "react";
+import { I as Icon } from "../Icon/index.1dbd3e58.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.ba86f72f.js";
+import "@mui/material/Button";
+import "react-hook-form";
+import "../../contexts/ModalContext/index.0797eb17.js";
+import "../../react-draggable.3b5b6680.js";
+import "../ModalDialog/index.91777582.js";
+import "../Resizeable/index.44a0dd46.js";
+import "@m4l/graphics";
+import "../../index.js";
+import "@mui/material/styles";
+import "@mui/lab";
+const ContainerPeriod = styled("div")(({
+  theme,
+  error,
+  readOnly
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "auto",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px",
+  ...readOnly && {
+    border: "0px"
+  },
+  "& .MuiAutocomplete-root, & .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiAutocomplete-root .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiTextField-root .MuiInput-input": {
+    padding: "5px!important"
+  }
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+const SKTWrapper = styled("div", {
+  shouldForwardProp: (props) => props !== "readOnly"
+})(({
+  theme,
+  readOnly
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  ...readOnly && {
+    border: "0px"
+  },
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+const FieldPeriod = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+const FieldValue = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+const getSelPeriodTime = (period) => {
+  if (!period)
+    return ETimePeriods.YEARS;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    error = false,
+    readOnly = false,
+    skeletonWidth = "100%",
+    skeletonHeight = "18px"
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const selPeriodTime = getSelPeriodTime(value);
+  const singleValue = getSingleValue(value);
+  const onTotalChange = (newPeriodTime, newValue) => {
+    const newPeriod = {
+      selPeriodTime: newPeriodTime,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS)
+        newPeriod.years = newValue;
+      if (newPeriodTime === ETimePeriods.MONTHS)
+        newPeriod.months = newValue;
+      if (newPeriodTime === ETimePeriods.DAYS)
+        newPeriod.days = newValue;
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel("period.label_days")
+  }, {
+    id: 1,
+    label: getLabel("period.label_months")
+  }, {
+    id: 2,
+    label: getLabel("period.label_years")
+  }], [getLabel]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapper, {
+      readOnly,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50%",
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    });
+  }
+  if (readOnly) {
+    /* @__PURE__ */ jsxs(ContainerPeriod, {
+      error: false,
+      readOnly,
+      children: [/* @__PURE__ */ jsx(FieldPeriod, {
+        children: value.selPeriodTime
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(FieldValue, {
+        children: value.singleValue
+      }), /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(ContainerPeriod, {
+    error,
+    readOnly,
+    children: [/* @__PURE__ */ jsx(Autocomplete, {
+      options,
+      value: options[selPeriodTime],
+      disableClearable: true,
+      onChange: (_event, autcValue) => {
+        onChangeTime(autcValue);
+      },
+      renderInput: (params) => {
+        return /* @__PURE__ */ jsx(TextField, {
+          ...params,
+          fullWidth: true,
+          variant: "standard",
+          SelectProps: {
+            native: true
+          },
+          InputProps: {
+            disableUnderline: true,
+            ...params.InputProps
+          },
+          autoComplete: "off"
+        }, `tx_async_${params.id}`);
+      }
+    }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
+      type: "number",
+      variant: "standard",
+      value: singleValue,
+      InputProps: {
+        disableUnderline: true
+      },
+      onChange: (e) => {
+        onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+      }
+    }), /* @__PURE__ */ jsx(Icon, {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+    })]
+  });
+};
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
+export {
+  Period as P,
+  getPeriodComponetsDictionary as g
+};

package/dist/components/Resizeable/index.44a0dd46.js

@@ -0,0 +1,96 @@
+import { styled } from "@mui/material/styles";
+import { R as ResizableBox } from "../../react-resizable.6eae0397.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 ResizeableWindow(props) {
+  const {
+    children,
+    width = 200,
+    height = 200,
+    maxHeigth,
+    maxWidth,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperResizeable, {
+    width,
+    height,
+    maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
+    resizeHandles: ["se", "nw"],
+    ...other,
+    children
+  });
+}
+export {
+  ResizeableWindow as R
+};

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

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ResizableBoxProps } from 'react-resizable';
+declare type InternalResizeableProps = {
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeigth?: number;
+};
+export declare type ResizeableProps = InternalResizeableProps & Partial<ResizableBoxProps>;
+export {};

package/dist/components/SplitLayout/index.81fc4750.js

@@ -0,0 +1,133 @@
+import { S as SplitterLayout } from "../../react-splitter-layout.873aece3.js";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSplit = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  flexGrow: 1,
+  overflow: "hidden",
+  "& .splitter-layout": {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  },
+  "& .splitter-layout .layout-pane": {
+    position: "relative",
+    flex: "0 0 auto",
+    overflow: "auto"
+  },
+  "& .splitter-layout .layout-pane.layout-pane-primary": {
+    flex: "1 1 auto"
+  },
+  "& .splitter-layout.layout-changing": {
+    cursor: "col-resize"
+  },
+  "& .splitter-layout > .layout-splitter": {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: theme.palette.divider,
+    boxSizing: "border-box",
+    backgroundClip: "padding-box",
+    width: "11px",
+    margin: "0 5px",
+    borderLeft: "5px solid hsla(0, 0%, 100%, 0)",
+    borderRight: "5px solid hsla(0, 0%, 100%, 0)",
+    cursor: "col-resize",
+    justifyContent: "center",
+    height: "100%"
+  },
+  "& .splitter-layout .layout-splitter:before": {
+    content: `""`,
+    height: "45px",
+    width: "4px",
+    top: "calc(50% - 22.5px)",
+    position: "absolute",
+    background: theme.palette.grey[500],
+    borderRadius: "6px"
+  },
+  "& .splitter-layout > .layout-splitter:hover": {
+    borderLeft: `5px solid ${theme.palette.grey[5008]}`,
+    borderRight: `5px solid ${theme.palette.grey[5008]}`
+  },
+  "& .splitter-layout.splitter-layout-vertical.layout-changing": {
+    cursor: "row-resize"
+  },
+  "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
+    height: "11px !important",
+    width: "100% !important",
+    margin: "5px 0",
+    borderTop: "5px solid hsla(0, 0%, 100%, 0)",
+    borderBottom: "5px solid hsla(0, 0%, 100%, 0)",
+    cursor: "row-resize"
+  },
+  "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
+    width: "45px !important",
+    height: "4px !important",
+    left: "calc(50% - 22.5px)",
+    top: "unset"
+  },
+  "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
+    background: theme.palette.primary.main
+  },
+  "& .splitter-layout.splitter-layout-vertical": {
+    flexDirection: "column"
+  },
+  "& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover": {
+    borderTop: `5px solid ${theme.palette.grey[5008]}`,
+    borderBottom: `5px solid ${theme.palette.grey[5008]}`
+  }
+}));
+const SplitMaster = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SplitDetail = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  overflow: "hidden",
+  position: "absolute",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px"
+}));
+function SplitLayout(props) {
+  const {
+    splitPosition,
+    firstPart,
+    secondPart,
+    secondParrtInitialSize = 50,
+    percentage = true
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperSplit, {
+    id: "WrapperSplit",
+    className: `split_${splitPosition}`,
+    children: /* @__PURE__ */ jsxs(SplitterLayout, {
+      vertical: splitPosition === "vertical",
+      percentage,
+      secondaryInitialSize: secondParrtInitialSize,
+      children: [/* @__PURE__ */ jsx(SplitMaster, {
+        id: "splitMaster",
+        children: typeof firstPart === "function" ? firstPart() : firstPart
+      }), splitPosition !== "none" && /* @__PURE__ */ jsx(SplitDetail, {
+        id: "detail2",
+        children: typeof secondPart === "function" ? secondPart() : secondPart
+      })]
+    })
+  });
+}
+export {
+  SplitLayout as S
+};

package/dist/components/animate/PropagateLoader/index.eb401503.js

@@ -0,0 +1,94 @@
+import { styled, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { c as createAnimation, p as parseLengthAndUnit } from "../../../node_modules.e0b84fac.js";
+var __assign = globalThis && globalThis.__assign || function() {
+  __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = globalThis && globalThis.__rest || function(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+var distance = [1, 3, 5];
+var propagate = [
+  createAnimation("PropagateLoader", "25% {transform: translateX(-".concat(distance[0], "rem) scale(0.75)}\n    50% {transform: translateX(-").concat(distance[1], "rem) scale(0.6)}\n    75% {transform: translateX(-").concat(distance[2], "rem) scale(0.5)}\n    95% {transform: translateX(0rem) scale(1)}"), "propogate-0"),
+  createAnimation("PropagateLoader", "25% {transform: translateX(-".concat(distance[0], "rem) scale(0.75)}\n    50% {transform: translateX(-").concat(distance[1], "rem) scale(0.6)}\n    75% {transform: translateX(-").concat(distance[1], "rem) scale(0.6)}\n    95% {transform: translateX(0rem) scale(1)}"), "propogate-1"),
+  createAnimation("PropagateLoader", "25% {transform: translateX(-".concat(distance[0], "rem) scale(0.75)}\n    75% {transform: translateX(-").concat(distance[0], "rem) scale(0.75)}\n    95% {transform: translateX(0rem) scale(1)}"), "propogate-2"),
+  createAnimation("PropagateLoader", "25% {transform: translateX(".concat(distance[0], "rem) scale(0.75)}\n    75% {transform: translateX(").concat(distance[0], "rem) scale(0.75)}\n    95% {transform: translateX(0rem) scale(1)}"), "propogate-3"),
+  createAnimation("PropagateLoader", "25% {transform: translateX(".concat(distance[0], "rem) scale(0.75)}\n    50% {transform: translateX(").concat(distance[1], "rem) scale(0.6)}\n    75% {transform: translateX(").concat(distance[1], "rem) scale(0.6)}\n    95% {transform: translateX(0rem) scale(1)}"), "propogate-4"),
+  createAnimation("PropagateLoader", "25% {transform: translateX(".concat(distance[0], "rem) scale(0.75)}\n    50% {transform: translateX(").concat(distance[1], "rem) scale(0.6)}\n    75% {transform: translateX(").concat(distance[2], "rem) scale(0.5)}\n    95% {transform: translateX(0rem) scale(1)}"), "propogate-5")
+];
+function PropagateLoader$1(_a) {
+  var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 15 : _f, additionalprops = __rest(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size"]);
+  var _g = parseLengthAndUnit(size), value = _g.value, unit = _g.unit;
+  var wrapper = __assign({ display: "inherit", position: "relative" }, cssOverride);
+  var style = function(i) {
+    return {
+      position: "absolute",
+      fontSize: "".concat(value / 3).concat(unit),
+      width: "".concat(value).concat(unit),
+      height: "".concat(value).concat(unit),
+      background: color,
+      borderRadius: "50%",
+      animation: "".concat(propagate[i], " ").concat(1.5 / speedMultiplier, "s infinite"),
+      animationFillMode: "forwards"
+    };
+  };
+  if (!loading) {
+    return null;
+  }
+  return React.createElement(
+    "span",
+    __assign({ style: wrapper }, additionalprops),
+    React.createElement("span", { style: style(0) }),
+    React.createElement("span", { style: style(1) }),
+    React.createElement("span", { style: style(2) }),
+    React.createElement("span", { style: style(3) }),
+    React.createElement("span", { style: style(4) }),
+    React.createElement("span", { style: style(5) })
+  );
+}
+const WrapperPropageteLoader = styled("div")(({
+  theme
+}) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: "100%",
+  height: "100%",
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: theme.palette.background.default
+}));
+const PropagateLoader = () => {
+  const {
+    palette
+  } = useTheme();
+  return /* @__PURE__ */ jsx(WrapperPropageteLoader, {
+    children: /* @__PURE__ */ jsx(PropagateLoader$1, {
+      color: palette.primary.main
+    })
+  });
+};
+export {
+  PropagateLoader as P
+};

package/dist/components/areas/components/Area/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AreaProps } from './types';
+export declare const Area: {
+    (props: AreaProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/areas/components/Area/styles.d.ts

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