@m4l/layouts 0.1.8 → 0.1.10

package/hooks/useMasterDetail/index.ca232c69.js

@@ -0,0 +1,6 @@
+import { useContext as t } from "react";
+import { M as e } from "../../layouts/MasterDetailLayout/index.56544ac9.js";
+const s = () => t(e);
+export {
+  s as u
+};

package/hooks/useModule/index.066da119.js

@@ -0,0 +1,11 @@
+import { useContext as o } from "react";
+import { M as t } from "../../layouts/ModuleLayout/index.4cfb7261.js";
+const n = () => {
+  const e = o(t);
+  if (!e)
+    throw new Error("useModule context must be use inside ModuleContext");
+  return e;
+};
+export {
+  n as u
+};

package/index.js

@@ -1,12 +1,25 @@
-export { a as ModuleLayout, d as defaultModuleLayoutDictionary, g as getModuleLayoutComponentsDictionary } from "./layouts/ModuleLayout/index.js";
+import { a as p, d as l, g as y } from "./layouts/ModuleLayout/index.4cfb7261.js";
 import "@m4l/components";
 import "react";
 import "@m4l/core";
-export { a as MasterDetailLayout, d as defaultMasterDetailDictionary, g as getMasterDetailLayoutComponentsDictionary } from "./layouts/MasterDetailLayout/index.js";
+import { a as n, d as M, g as D } from "./layouts/MasterDetailLayout/index.56544ac9.js";
 import "@m4l/graphics";
 import "@mui/material";
 import "react/jsx-runtime";
-export { N as NoAuthModuleLayout, d as defaultNoAuthModuleLayoutDictionary, g as getNoAuthModuleLayoutComponentsDictionary } from "./layouts/NoAuthModuleLayout/index.js";
-export { u as useMasterDetail } from "./hooks/useMasterDetail/index.js";
-export { u as useModule } from "./hooks/useModule/index.js";
+import { N as L, d as c, g } from "./layouts/NoAuthModuleLayout/index.5050b988.js";
+import { u as N } from "./hooks/useMasterDetail/index.ca232c69.js";
+import { u as A } from "./hooks/useModule/index.066da119.js";
 import "@mui/material/styles";
+export {
+  n as MasterDetailLayout,
+  p as ModuleLayout,
+  L as NoAuthModuleLayout,
+  M as defaultMasterDetailDictionary,
+  l as defaultModuleLayoutDictionary,
+  c as defaultNoAuthModuleLayoutDictionary,
+  D as getMasterDetailLayoutComponentsDictionary,
+  y as getModuleLayoutComponentsDictionary,
+  g as getNoAuthModuleLayoutComponentsDictionary,
+  N as useMasterDetail,
+  A as useModule
+};

package/layouts/MasterDetailLayout/index.56544ac9.js

@@ -0,0 +1,139 @@
+import { createContext as L, useState as v, useRef as P, useCallback as z, useMemo as p } from "react";
+import { voidFunction as N, useEnvironment as x } from "@m4l/core";
+import { SplitLayout as R } from "@m4l/components";
+import { g as B, a as V } from "../ModuleLayout/index.4cfb7261.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useResponsiveDesktop as j } from "@m4l/graphics";
+import { Button as E } from "@mui/material";
+import { u as H } from "../../hooks/useMasterDetail/index.ca232c69.js";
+function T() {
+  return ["master_detail_layout"].concat(B());
+}
+const ot = {
+  master_detail_layout: {
+    split_vertical: "Split vertically",
+    split_horizontal: "Split horizontally",
+    no_split: "No split",
+    view_detail: "View detail"
+  }
+}, W = {
+  masterSelection: void 0,
+  onChangeMasterSelection: N
+}, q = L(W);
+function G(i) {
+  const {
+    children: o
+  } = i, [e, t] = v(void 0);
+  return /* @__PURE__ */ r(q.Provider, {
+    value: {
+      masterSelection: e,
+      onChangeMasterSelection: t
+    },
+    children: o
+  });
+}
+function J(i) {
+  const {
+    masterSelection: o
+  } = H(), {
+    onClick: e,
+    description: t
+  } = i;
+  return /* @__PURE__ */ r(E, {
+    onClick: e,
+    variant: "outlined",
+    disabled: o === void 0,
+    children: t
+  }, "miDetail");
+}
+function K(i, o, e, t) {
+  let n = t !== void 0 && t ? [...i] : [e];
+  return n = o.concat(n), n;
+}
+function et(i) {
+  const {
+    moduleId: o,
+    moduleNameField: e,
+    detailComponent: t,
+    moduleActions: n,
+    urlIcon: D,
+    masterComponent: M,
+    componentsDictionary: y,
+    breadcrumbLinks: S,
+    privileges: b,
+    skeletonFlags: k
+  } = i, {
+    host_static_assets: c,
+    environment_assets: a
+  } = x(), [A, w] = v("vertical"), d = j(), f = P(null), u = (m) => {
+    const s = [..._];
+    for (let l = 0; l < s.length; l++)
+      s[l].disabled = !1, s[l].tag === m && (s[l].disabled = !0);
+    $(s), w(m);
+  }, _ = [{
+    urlIcon: `${c}/${a}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+    onClick: () => u("vertical"),
+    disabled: !0,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.split_vertical",
+    tag: "vertical",
+    className: "splitactions"
+  }, {
+    urlIcon: `${c}/${a}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+    onClick: () => u("horizontal"),
+    disabled: !1,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.split_horizontal",
+    tag: "horizontal",
+    className: "splitactions"
+  }, {
+    urlIcon: `${c}/${a}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+    onClick: () => u("none"),
+    disabled: !1,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.no_split",
+    tag: "none",
+    className: "splitactions"
+  }], g = z(() => {
+    f.current?.openModal({
+      title: "master_detail_layout.view_detail",
+      initialWidth: 500,
+      initialHeigth: 680,
+      contentComponent: t,
+      actions: void 0
+    });
+  }, [t]), C = p(() => ({
+    urlIcon: `${c}/${a}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+    onClick: g,
+    disabled: !1,
+    visibility: "allways",
+    dictionaryField: "master_detail_layout.view_detail",
+    tag: "none",
+    className: "",
+    component: J
+  }), [a, g]), [h, $] = v(_), F = p(() => K(h, n, C, d), [h, n, d, C]), I = p(() => y.concat(T()), [y]);
+  return /* @__PURE__ */ r(G, {
+    children: /* @__PURE__ */ r(V, {
+      ref: f,
+      moduleId: o,
+      moduleNameField: e,
+      urlIcon: D,
+      moduleActions: F,
+      privileges: b,
+      skeletonFlags: k,
+      componentsDictionary: I,
+      breadcrumbLinks: S,
+      children: /* @__PURE__ */ r(R, {
+        splitPosition: d ? A : "none",
+        firstPart: M,
+        secondPart: t
+      })
+    })
+  });
+}
+export {
+  q as M,
+  et as a,
+  ot as d,
+  T as g
+};

package/layouts/ModuleLayout/index.4cfb7261.js

@@ -0,0 +1,353 @@
+import { BoxIcon as y, Breadcrumbs as T, MenuActions as A, useModal as D, ModalProvider as F, getModalDialogComponentsDictionary as L } from "@m4l/components";
+import { createContext as N, useState as x, useMemo as f, forwardRef as M, useRef as b, useImperativeHandle as w } from "react";
+import { styled as d, useTheme as R } from "@mui/material/styles";
+import { voidFunction as S, useModuleDictionary as $, useModuleSkeleton as P, FlagsProvider as _, ModuleDictionaryProvider as B, ModuleSkeletonProvider as H, ModulePrivilegesProvider as G } from "@m4l/core";
+import { Skeleton as l, Typography as j, IconButton as O } from "@mui/material";
+import { useResponsiveDesktop as k } from "@m4l/graphics";
+import { jsxs as p, jsx as i, Fragment as W } from "react/jsx-runtime";
+import { u as z } from "../../hooks/useModule/index.066da119.js";
+const q = d("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  margin: "0px 12px 12px 12px",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px",
+  overflow: "hidden"
+})), K = d("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  position: "relative",
+  marginTop: e.spacing(1),
+  justifyContent: "center",
+  flexGrow: "1",
+  overflow: "hidden"
+})), E = d("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  position: "relative",
+  borderBottom: `1px solid ${e.palette.divider}`,
+  height: "60px",
+  minHeight: "60px",
+  alignItems: "center",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: e.spacing(3),
+    borderRight: `1px solid ${e.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: e.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+})), J = d("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: "0 0",
+  borderBottom: `1px solid ${e.palette.divider}`,
+  minHeight: "60px"
+})), Q = d("div")(({
+  theme: e
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  gridGap: e.spacing(1.75),
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [e.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(3, auto)"
+  }
+})), U = d("div")(({
+  theme: e
+}) => ({
+  display: "grid",
+  gridTemplateColumns: `${e.spacing(3)} auto`,
+  gridGap: e.spacing(2),
+  alignItems: "center",
+  width: "auto",
+  height: "auto"
+})), V = d("div")(({
+  theme: e
+}) => ({
+  display: "none",
+  alignItems: "center",
+  width: "1px",
+  background: e.palette.divider,
+  height: "100%",
+  margin: `0 ${e.spacing(2)}`,
+  [e.breakpoints.up("sm")]: {
+    display: "flex"
+  }
+})), X = d("div")(({
+  theme: e
+}) => ({
+  display: "grid",
+  alignItems: "center",
+  gridTemplateColumns: "repeat(3, auto)",
+  gridGap: e.spacing(2)
+})), Y = d("div")(({
+  theme: e
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [e.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(3, ${e.spacing(3)})`,
+    gridGap: e.spacing(2)
+  }
+}));
+function Z() {
+  const e = k();
+  return /* @__PURE__ */ p(J, {
+    id: "HeaderSkeleton",
+    children: [/* @__PURE__ */ p(Q, {
+      children: [/* @__PURE__ */ p(U, {
+        children: [/* @__PURE__ */ i(l, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ i(l, {
+          variant: "text",
+          width: 120,
+          height: 14
+        })]
+      }), /* @__PURE__ */ i(V, {}), /* @__PURE__ */ p(X, {
+        children: [/* @__PURE__ */ i(l, {
+          variant: "text",
+          width: 68,
+          height: 14
+        }), /* @__PURE__ */ i(l, {
+          variant: "circular",
+          width: 4,
+          height: 4
+        }), /* @__PURE__ */ i(l, {
+          variant: "text",
+          width: 68,
+          height: 14
+        })]
+      })]
+    }), /* @__PURE__ */ i(Y, {
+      children: e ? /* @__PURE__ */ p(W, {
+        children: [/* @__PURE__ */ i(l, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ i(l, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ i(l, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        })]
+      }) : /* @__PURE__ */ i(l, {
+        variant: "circular",
+        width: 24,
+        height: 24
+      })
+    })]
+  });
+}
+const ee = {
+  moduleId: "",
+  moduleNameField: "module_name",
+  urlIcon: "",
+  moduleActions: [],
+  dynamicActions: [],
+  setDynamicActions: S,
+  breadcrumbLinks: []
+}, ie = N(ee);
+function te(e) {
+  const {
+    children: n,
+    initialModuleActions: t,
+    moduleId: o,
+    moduleNameField: a,
+    urlIcon: g,
+    breadcrumbLinks: s
+  } = e, [c] = x(() => ({
+    moduleId: o,
+    urlIcon: g,
+    moduleNameField: a,
+    dictionary: void 0,
+    breadcrumbLinks: s
+  })), [u, h] = x([]), r = f(() => t.concat(u), [t, u]);
+  return /* @__PURE__ */ i(ie.Provider, {
+    value: {
+      moduleActions: r,
+      dynamicActions: u,
+      setDynamicActions: h,
+      moduleId: c.moduleId,
+      moduleNameField: c.moduleNameField,
+      urlIcon: c.urlIcon,
+      breadcrumbLinks: c.breadcrumbLinks
+    },
+    children: n
+  });
+}
+function oe(e, n) {
+  let t = [...n.filter((o) => o.visibility !== "allways")];
+  return e !== void 0 && e && (t = t.filter((o) => o.visibility === "normal")), t;
+}
+function ne(e, n) {
+  let t = [];
+  return e !== void 0 && e && (t = t.concat(n.filter((o) => o.visibility === "main"))), t = t.concat(n.filter((o) => o.visibility === "allways")), t;
+}
+function re() {
+  const {
+    moduleActions: e,
+    moduleNameField: n,
+    breadcrumbLinks: t,
+    urlIcon: o
+  } = z(), {
+    getLabel: a
+  } = $(), g = R(), s = k(), c = P(), u = f(
+    () => oe(s, e),
+    [e, s]
+  ), h = f(() => ne(s, e), [e, s]);
+  return c ? /* @__PURE__ */ i(Z, {}) : /* @__PURE__ */ p(E, {
+    id: "Header",
+    children: [/* @__PURE__ */ i(y, {
+      src: o,
+      sx: {
+        color: g.palette.primary.main
+      }
+    }), /* @__PURE__ */ i(j, {
+      variant: "h5",
+      sx: {
+        maxWidth: 260,
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        color: "text.primary",
+        marginRight: "24px",
+        textOverflow: "ellipsis"
+      },
+      children: a(n)
+    }), /* @__PURE__ */ i(T, {
+      links: t
+    }), h.map((r, m) => {
+      const v = a(r.dictionaryField);
+      return r.component ? /* @__PURE__ */ i(r.component, {
+        description: v,
+        onClick: r.onClick
+      }, `main_action_${m}`) : /* @__PURE__ */ i(O, {
+        className: r.className,
+        onClick: r.onClick,
+        "aria-label": `${v}`,
+        disabled: r.disabled,
+        children: /* @__PURE__ */ i(y, {
+          src: r.urlIcon,
+          sx: {
+            width: 18,
+            height: 18
+          }
+        })
+      }, `main_action_${m}`);
+    }), u.length > 0 && /* @__PURE__ */ i(A, {
+      arrow: "right-top",
+      marginTop: "-11px",
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions: u
+    })]
+  });
+}
+const I = M((e, n) => {
+  const {
+    children: t
+  } = e, {
+    openModal: o
+  } = D(), a = b(null);
+  return w(n, () => ({
+    openModal: o,
+    current: a.current
+  })), /* @__PURE__ */ p(q, {
+    id: "WrapperModule",
+    ref: a,
+    children: [/* @__PURE__ */ i(re, {}), /* @__PURE__ */ i(K, {
+      id: "ModuleContent",
+      children: t
+    })]
+  });
+});
+I.displayName = "Module";
+const ae = M((e, n) => {
+  const {
+    moduleId: t,
+    moduleNameField: o = "module_name",
+    moduleActions: a,
+    urlIcon: g,
+    children: s,
+    componentsDictionary: c,
+    breadcrumbLinks: u,
+    privileges: h,
+    skeletonFlags: r
+  } = e, m = b(null), v = (C) => {
+    m.current?.openModal(C);
+  };
+  return w(n, () => ({
+    openModal: v,
+    current: m.current
+  })), /* @__PURE__ */ i(_, {
+    children: /* @__PURE__ */ i(B, {
+      moduleId: t,
+      componentsDictionary: c,
+      children: /* @__PURE__ */ i(H, {
+        flags: r,
+        children: /* @__PURE__ */ i(G, {
+          queryPrivileges: h,
+          children: /* @__PURE__ */ i(te, {
+            moduleId: t,
+            urlIcon: g,
+            moduleNameField: o,
+            initialModuleActions: a,
+            breadcrumbLinks: u,
+            children: /* @__PURE__ */ i(F, {
+              children: /* @__PURE__ */ i(I, {
+                ref: m,
+                children: s
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+ae.displayName = "ModuleLayout";
+function he() {
+  return ["module_layout"].concat(L());
+}
+const ve = {
+  module_layout: {}
+};
+export {
+  ie as M,
+  ae as a,
+  ve as d,
+  he as g
+};

package/layouts/NoAuthModuleLayout/ModuleWrapper/styles.d.ts

@@ -7,7 +7,7 @@ export declare const SectionStyle: import("@emotion/styled").StyledComponent<Omi
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "translate" | "slot" | "title" | "children" | "ref" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "square" | "variant" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "translate" | "slot" | "title" | "children" | "ref" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "square" | "variant" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ContentStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ModuleTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;