@m4l/layouts 1.0.4 → 2.0.0

package/dist/layouts/MasterDetailLayout/index.js

@@ -1,170 +0,0 @@
-import { createContext, useState, useRef, useCallback, useMemo } from "react";
-import { voidFunction, useEnvironment } from "@m4l/core";
-import { SplitLayout } from "@m4l/components";
-import { g as getModuleLayoutComponentsDictionary, d as defaultModuleLayoutDictionary, a as ModuleLayout } from "../ModuleLayout/index.js";
-import { jsx } from "react/jsx-runtime";
-import { u as useResponsiveDesktop } from "../../vendor.js";
-import { Button } from "@mui/material";
-import { u as useMasterDetail } from "../../hooks/useMasterDetail/index.js";
-function getMasterDetailLayoutComponentsDictionary() {
-  return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());
-}
-const defaultMasterDetailDictionary = {
-  master_detail_layout: {
-    split_vertical: "Split vertically",
-    split_horizontal: "Split horizontally",
-    no_split: "No split",
-    view_detail: "View detail"
-  },
-  ...defaultModuleLayoutDictionary
-};
-const initialState = {
-  masterSelection: void 0,
-  onChangeMasterSelection: voidFunction
-};
-const MasterDetailContext = createContext(initialState);
-function MasterDetailProvider(props) {
-  const {
-    children,
-    masterSelection,
-    setMasterSelection
-  } = props;
-  const onChangeMasterSelection = (newMasterSelection) => {
-    setMasterSelection(newMasterSelection);
-  };
-  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
-    value: {
-      masterSelection,
-      onChangeMasterSelection
-    },
-    children
-  });
-}
-function ButtonDetail(props) {
-  const {
-    masterSelection
-  } = useMasterDetail();
-  const {
-    onClick,
-    description
-  } = props;
-  return /* @__PURE__ */ jsx(Button, {
-    onClick,
-    variant: "outlined",
-    disabled: masterSelection === void 0 ? true : false,
-    children: description
-  }, "miDetail");
-}
-function getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop) {
-  let totalActions = isDesktop !== void 0 && isDesktop ? [...splitActions] : [viewDetailAction];
-  totalActions = totalActions.concat(moduleActions);
-  return totalActions;
-}
-function MasterDetailLayout(props) {
-  const {
-    moduleId,
-    moduleNameField,
-    detailComponent,
-    initialModuleActions: moduleActions,
-    urlIcon,
-    masterComponent,
-    defaultDictionary,
-    componentsDictionary,
-    breadcrumbLinks
-  } = props;
-  const {
-    host_static_assets,
-    environment
-  } = useEnvironment();
-  const [splitPosition, setSplitPosition] = useState("vertical");
-  const isDesktop = useResponsiveDesktop();
-  const moduleLayoutRef = useRef(null);
-  const [masterSelection, setMasterSelection] = useState(void 0);
-  const onChangePostionInternal = (newPostion) => {
-    const newSplitActions = [...initialSplitActions];
-    for (let i = 0; i < newSplitActions.length; i++) {
-      newSplitActions[i].disabled = false;
-      if (newSplitActions[i].tag === newPostion) {
-        newSplitActions[i].disabled = true;
-      }
-    }
-    setSplitActions(newSplitActions);
-    setSplitPosition(newPostion);
-  };
-  const initialSplitActions = [{
-    urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
-    onClick: () => onChangePostionInternal("vertical"),
-    disabled: true,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.split_vertical",
-    tag: "vertical",
-    className: "splitactions"
-  }, {
-    urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
-    onClick: () => onChangePostionInternal("horizontal"),
-    disabled: false,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.split_horizontal",
-    tag: "horizontal",
-    className: "splitactions"
-  }, {
-    urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
-    onClick: () => onChangePostionInternal("none"),
-    disabled: false,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.no_split",
-    tag: "none",
-    className: "splitactions"
-  }];
-  const onClickViewDetail = useCallback(() => {
-    moduleLayoutRef.current?.openModal({
-      title: "master_detail_layout.view_detail",
-      initialWidth: 500,
-      initialHeigth: 680,
-      contentComponent: detailComponent,
-      actionComponents: void 0
-    });
-  }, [detailComponent]);
-  const viewDetailAction = useMemo(() => {
-    return {
-      urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
-      onClick: onClickViewDetail,
-      disabled: false,
-      visibility: "allways",
-      dictionaryField: "master_detail_layout.view_detail",
-      tag: "none",
-      className: "",
-      component: ButtonDetail
-    };
-  }, [environment, onClickViewDetail]);
-  const [splitActions, setSplitActions] = useState(initialSplitActions);
-  const finalModuleActions = useMemo(() => {
-    const actions = getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop);
-    return actions;
-  }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
-  const finalComponentsDictionary = useMemo(() => componentsDictionary.concat(getMasterDetailLayoutComponentsDictionary()), [componentsDictionary]);
-  const finalDefaultDictionary = useMemo(() => ({
-    ...defaultDictionary,
-    ...defaultMasterDetailDictionary
-  }), [defaultDictionary]);
-  return /* @__PURE__ */ jsx(MasterDetailProvider, {
-    masterSelection,
-    setMasterSelection,
-    children: /* @__PURE__ */ jsx(ModuleLayout, {
-      ref: moduleLayoutRef,
-      moduleId,
-      moduleNameField,
-      urlIcon,
-      initialModuleActions: finalModuleActions,
-      defaultDictionary: finalDefaultDictionary,
-      componentsDictionary: finalComponentsDictionary,
-      breadcrumbLinks,
-      children: /* @__PURE__ */ jsx(SplitLayout, {
-        splitPosition: isDesktop ? splitPosition : "none",
-        firstPart: masterComponent,
-        secondPart: detailComponent
-      })
-    })
-  });
-}
-export { MasterDetailContext as M, MasterDetailLayout as a };

package/dist/layouts/ModuleLayout/components/Header/index.d.ts

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

package/dist/layouts/ModuleLayout/components/Header/skeleton.d.ts

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

package/dist/layouts/ModuleLayout/components/Header/styles.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ModuleTitleContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ModuleTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Separator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Breadcrumbs: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ModuleActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/layouts/ModuleLayout/components/Header/types.d.ts

@@ -1,2 +0,0 @@
-export interface HeaderProps {
-}

package/dist/layouts/ModuleLayout/components/ModuleContent/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ModuleProps, ModuleRef } from './types';
-export declare const Module: import("react").ForwardRefExoticComponent<ModuleProps & import("react").RefAttributes<ModuleRef>>;

package/dist/layouts/ModuleLayout/components/ModuleContent/styles.d.ts

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

package/dist/layouts/ModuleLayout/index.js

@@ -1,380 +0,0 @@
-import { BoxIcon, Breadcrumbs as Breadcrumbs$1, MenuActions, useModal, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
-import { createContext, useState, useMemo, forwardRef, useRef, useImperativeHandle } from "react";
-import { styled, useTheme } from "@mui/material/styles";
-import { voidFunction, useModuleDictionary, useFlagsPresent, FlagsProvider, ModuleDictionaryProvider } from "@m4l/core";
-import { Skeleton, Typography, IconButton } from "@mui/material";
-import { u as useResponsiveDesktop } from "../../vendor.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { u as useModule } from "../../hooks/useModule/index.js";
-const WrapperModule = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  margin: "12px",
-  left: "0px",
-  right: "0px",
-  top: "0px",
-  bottom: "0px",
-  overflow: "hidden"
-}));
-const ModuleContent = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  position: "relative",
-  marginTop: theme.spacing(2),
-  flexGrow: "1",
-  overflow: "hidden"
-}));
-const Container = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  position: "relative",
-  paddingTop: theme.spacing(2),
-  paddingBottom: theme.spacing(2),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "72px",
-  overflow: "hidden",
-  alignItems: "center",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-const Wrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: `${theme.spacing(2)} 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    height: theme.spacing(9)
-  }
-}));
-const ModuleTitleContent = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  gridGap: theme.spacing(1.75),
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: "repeat(3, auto)"
-  }
-}));
-const ModuleTitle = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(3)} auto`,
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  width: "auto",
-  height: "auto"
-}));
-const Separator = styled("div")(({
-  theme
-}) => ({
-  display: "none",
-  alignItems: "center",
-  width: "1px",
-  background: theme.palette.divider,
-  height: "100%",
-  margin: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.up("sm")]: {
-    display: "flex"
-  }
-}));
-const Breadcrumbs = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  alignItems: "center",
-  gridTemplateColumns: `repeat(3, auto)`,
-  gridGap: theme.spacing(2)
-}));
-const ModuleActions = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-    gridGap: theme.spacing(2)
-  }
-}));
-function SKTModuleHeader() {
-  const isDesktop = useResponsiveDesktop();
-  return /* @__PURE__ */ jsxs(Wrapper, {
-    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
-      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 120,
-          height: 14
-        })]
-      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 4,
-          height: 4
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ModuleActions, {
-      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        })]
-      }) : /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 24,
-        height: 24
-      })
-    })]
-  });
-}
-const initialState = {
-  moduleId: 0,
-  moduleNameField: "module_name",
-  urlIcon: "",
-  moduleActions: [],
-  dynamicActions: [],
-  setDynamicActions: voidFunction,
-  breadcrumbLinks: []
-};
-const ModuleContext = createContext(initialState);
-function ModuleProvider(props) {
-  const {
-    children,
-    initialModuleActions,
-    moduleId,
-    moduleNameField,
-    urlIcon,
-    breadcrumbLinks
-  } = props;
-  const [configOptions] = useState(() => ({
-    moduleId,
-    urlIcon,
-    moduleNameField,
-    dictionary: void 0,
-    breadcrumbLinks
-  }));
-  const [dynamicActions, setDynamicActions] = useState([]);
-  const finalModuleActions = useMemo(() => initialModuleActions.concat(dynamicActions), [initialModuleActions, dynamicActions]);
-  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
-    value: {
-      moduleActions: finalModuleActions,
-      dynamicActions,
-      setDynamicActions,
-      moduleId: configOptions.moduleId,
-      moduleNameField: configOptions.moduleNameField,
-      urlIcon: configOptions.urlIcon,
-      breadcrumbLinks: configOptions.breadcrumbLinks
-    },
-    children
-  });
-}
-function getMenuActions(isDesktop, moduleActions) {
-  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
-  if (isDesktop !== void 0 && isDesktop) {
-    menuActions = menuActions.filter((action) => action.visibility === "normal");
-  }
-  return menuActions;
-}
-function getMainActions(isDesktop, moduleActions) {
-  let mainActions = [];
-  if (isDesktop !== void 0 && isDesktop) {
-    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
-  }
-  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
-  return mainActions;
-}
-function Header() {
-  const {
-    moduleActions,
-    moduleNameField,
-    breadcrumbLinks,
-    urlIcon
-  } = useModule();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const theme = useTheme();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = !useFlagsPresent(["dictionary_loaded"]);
-  const menuActions = useMemo(() => getMenuActions(isDesktop, moduleActions), [moduleActions, isDesktop]);
-  const mainActions = useMemo(() => {
-    console.log("useMemo Header ModuleActions mainActions", isDesktop, moduleActions);
-    return getMainActions(isDesktop, moduleActions);
-  }, [moduleActions, isDesktop]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
-  }
-  return /* @__PURE__ */ jsxs(Container, {
-    id: "Header",
-    children: [/* @__PURE__ */ jsx(BoxIcon, {
-      src: urlIcon,
-      sx: {
-        color: theme.palette.primary.main
-      }
-    }), /* @__PURE__ */ jsx(Typography, {
-      variant: "h5",
-      sx: {
-        maxWidth: 260,
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        color: "text.primary",
-        marginRight: "24px",
-        textOverflow: "ellipsis"
-      },
-      children: getLabel(moduleNameField)
-    }), /* @__PURE__ */ jsx(Breadcrumbs$1, {
-      links: breadcrumbLinks
-    }), mainActions.map((mainAction, index) => {
-      const description = getLabel(mainAction.dictionaryField);
-      if (!mainAction.component) {
-        return /* @__PURE__ */ jsx(IconButton, {
-          className: mainAction.className,
-          onClick: mainAction.onClick,
-          "aria-label": `${description}`,
-          disabled: mainAction.disabled,
-          children: /* @__PURE__ */ jsx(BoxIcon, {
-            src: mainAction.urlIcon,
-            sx: {
-              width: 18,
-              height: 18
-            }
-          })
-        }, `main_action_${index}`);
-      }
-      return /* @__PURE__ */ jsx(mainAction.component, {
-        description,
-        onClick: mainAction.onClick
-      }, `main_action_${index}`);
-    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
-      arrow: "right-top",
-      marginTop: "-11px",
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions
-    })]
-  });
-}
-const Module = forwardRef((props, ref) => {
-  const {
-    children
-  } = props;
-  const {
-    openModal
-  } = useModal();
-  const divRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    openModal,
-    current: divRef.current
-  }));
-  return /* @__PURE__ */ jsxs(WrapperModule, {
-    id: "WrapperModule",
-    ref: divRef,
-    children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(ModuleContent, {
-      id: "ModuleContent",
-      children
-    })]
-  });
-});
-Module.displayName = "Module";
-const ModuleLayout = forwardRef((props, ref) => {
-  const {
-    moduleId,
-    moduleNameField = "module_name",
-    initialModuleActions,
-    urlIcon,
-    children,
-    componentsDictionary,
-    breadcrumbLinks
-  } = props;
-  const moduleRef = useRef(null);
-  const openModal = (modalOpenProps) => {
-    moduleRef.current?.openModal(modalOpenProps);
-  };
-  useImperativeHandle(ref, () => ({
-    openModal,
-    current: moduleRef.current
-  }));
-  return /* @__PURE__ */ jsx(FlagsProvider, {
-    children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
-      moduleId,
-      componentsDictionary,
-      children: /* @__PURE__ */ jsx(ModuleProvider, {
-        moduleId,
-        urlIcon,
-        moduleNameField,
-        initialModuleActions,
-        breadcrumbLinks,
-        children: /* @__PURE__ */ jsx(ModalProvider, {
-          children: /* @__PURE__ */ jsx(Module, {
-            ref: moduleRef,
-            children
-          })
-        })
-      })
-    })
-  });
-});
-ModuleLayout.displayName = "ModuleLayout";
-function getModuleLayoutComponentsDictionary() {
-  return ["module_layout"].concat(getModalDialogComponentsDictionary());
-}
-const defaultModuleLayoutDictionary = {
-  module_layout: {}
-};
-export { ModuleContext as M, ModuleLayout as a, defaultModuleLayoutDictionary as d, getModuleLayoutComponentsDictionary as g };

package/dist/layouts/ModuleLayout/types.d.ts

@@ -1,28 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ModuleDictionary } from '@m4l/core';
-import type { MenuAction, TLink, ModalOpenOptions } from '@m4l/components';
-import type { HeaderProps } from './components/Header/types';
-import type { ModuleRef } from './components/ModuleContent/types';
-export interface ContainerProps {
-    vertical: boolean;
-}
-export declare type MenuActionType = 'main' | 'allways' | 'normal';
-export declare type ModuleLayoutRef = {
-    openModal: (modalOpenProps: ModalOpenOptions) => void;
-    current: ModuleRef | null;
-};
-export interface ModuleAction extends MenuAction {
-    visibility: MenuActionType;
-    tag?: any;
-    className?: string;
-}
-export interface ModuleLayoutProps extends HeaderProps {
-    moduleId: number;
-    urlIcon: string;
-    moduleNameField?: string;
-    breadcrumbLinks: TLink[];
-    initialModuleActions: ModuleAction[];
-    defaultDictionary: ModuleDictionary;
-    componentsDictionary: string[];
-    children: ReactNode;
-}

package/dist/layouts/index.d.ts

@@ -1,2 +0,0 @@
-export { MasterDetailLayout } from './MasterDetailLayout';
-export { ModuleLayout } from './ModuleLayout';

package/dist/vendor.js

@@ -1,35 +0,0 @@
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import "react";
-import "@m4l/core";
-import "@m4l/components";
-import "./layouts/ModuleLayout/index.js";
-import "./layouts/MasterDetailLayout/index.js";
-import "@mui/material";
-import "react/jsx-runtime";
-import "./hooks/useMasterDetail/index.js";
-import "./hooks/useModule/index.js";
-function useResponsive(query, key, start, end) {
-  const theme = useTheme();
-  const mediaUp = useMediaQuery(theme.breakpoints.up(key));
-  const mediaDown = useMediaQuery(theme.breakpoints.down(key));
-  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
-  const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
-  if (query === "up") {
-    return mediaUp;
-  }
-  if (query === "down") {
-    return mediaDown;
-  }
-  if (query === "between") {
-    return mediaBetween;
-  }
-  if (query === "only") {
-    return mediaOnly;
-  }
-}
-function useResponsiveDesktop() {
-  const isDesktop = useResponsive("up", "sm");
-  return isDesktop;
-}
-export { useResponsiveDesktop as u };