chore: update MUI to v7

package.json

@@ -7,8 +7,16 @@
     "url": "git+ssh://git@github.com/layer5io/sistent.git"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -47,7 +55,7 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.2",
     "@meshery/schemas": "^0.8.124",
-    "@mui/icons-material": "^6.4.8",
+    "@mui/icons-material": "^7.3.7",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
@@ -93,8 +101,8 @@
     "xstate": "^5.25.0"
   },
   "overrides": {
-    "@mui/icons-material": "^6.4.8",
-    "@mui/material": "^6.4.8",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
     "@meshery/schemas": {
       "react": "$react",
       "react-dom": "$react-dom"
@@ -115,7 +123,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@mui/material": "^6.4.8",
+    "@mui/material": "^7.3.7",
     "@sistent/mui-datatables": "^5.1.4",
     "@types/mui-datatables": "*",
     "billboard.js": "^3.15.0",

src/base/Grid2/Grid2.tsx

@@ -1,8 +1,8 @@
-import { Grid2 as MuiGrid, Grid2Props as MuiGridProps } from '@mui/material';
+import { Grid, GridProps } from '@mui/material';
 import React from 'react';
 
-const Grid2 = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
-  return <MuiGrid {...props} ref={ref} />;
+const Grid2 = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+  return <Grid {...props} ref={ref} />;
 });
 
 export { Grid2 };

src/base/Hidden/Hidden.tsx

@@ -1,7 +1,85 @@
-import { Hidden as MuiHidden, HiddenProps as MuiHiddenProps } from '@mui/material';
+import { useMediaQuery, useTheme } from '@mui/material';
+import React from 'react';
 
-export const Hidden = (props: MuiHiddenProps) => {
-  return <MuiHidden {...props} />;
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface HiddenProps {
+  children?: React.ReactNode;
+  only?: Breakpoint | Breakpoint[];
+  xsUp?: boolean;
+  smUp?: boolean;
+  mdUp?: boolean;
+  lgUp?: boolean;
+  xlUp?: boolean;
+  xsDown?: boolean;
+  smDown?: boolean;
+  mdDown?: boolean;
+  lgDown?: boolean;
+  xlDown?: boolean;
+  implementation?: 'js' | 'css';
+}
+
+export const Hidden = ({
+  children,
+  only,
+  xsUp = false,
+  smUp = false,
+  mdUp = false,
+  lgUp = false,
+  xlUp = false,
+  xsDown = false,
+  smDown = false,
+  mdDown = false,
+  lgDown = false,
+  xlDown = false
+}: HiddenProps) => {
+  const theme = useTheme();
+  const onlyValues = Array.isArray(only) ? only : only ? [only] : [];
+
+  const xsOnly = useMediaQuery(theme.breakpoints.only('xs'));
+  const smOnly = useMediaQuery(theme.breakpoints.only('sm'));
+  const mdOnly = useMediaQuery(theme.breakpoints.only('md'));
+  const lgOnly = useMediaQuery(theme.breakpoints.only('lg'));
+  const xlOnly = useMediaQuery(theme.breakpoints.only('xl'));
+
+  const xsUpMatch = useMediaQuery(theme.breakpoints.up('xs'));
+  const smUpMatch = useMediaQuery(theme.breakpoints.up('sm'));
+  const mdUpMatch = useMediaQuery(theme.breakpoints.up('md'));
+  const lgUpMatch = useMediaQuery(theme.breakpoints.up('lg'));
+  const xlUpMatch = useMediaQuery(theme.breakpoints.up('xl'));
+
+  const xsDownMatch = useMediaQuery(theme.breakpoints.down('xs'));
+  const smDownMatch = useMediaQuery(theme.breakpoints.down('sm'));
+  const mdDownMatch = useMediaQuery(theme.breakpoints.down('md'));
+  const lgDownMatch = useMediaQuery(theme.breakpoints.down('lg'));
+  const xlDownMatch = useMediaQuery(theme.breakpoints.down('xl'));
+
+  const onlyMatches =
+    (onlyValues.includes('xs') && xsOnly) ||
+    (onlyValues.includes('sm') && smOnly) ||
+    (onlyValues.includes('md') && mdOnly) ||
+    (onlyValues.includes('lg') && lgOnly) ||
+    (onlyValues.includes('xl') && xlOnly);
+
+  const upMatches =
+    (xsUp && xsUpMatch) ||
+    (smUp && smUpMatch) ||
+    (mdUp && mdUpMatch) ||
+    (lgUp && lgUpMatch) ||
+    (xlUp && xlUpMatch);
+
+  const downMatches =
+    (xsDown && xsDownMatch) ||
+    (smDown && smDownMatch) ||
+    (mdDown && mdDownMatch) ||
+    (lgDown && lgDownMatch) ||
+    (xlDown && xlDownMatch);
+
+  if (onlyMatches || upMatches || downMatches) {
+    return null;
+  }
+
+  return <>{children}</>;
 };
 
 export default Hidden;

src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Grid2, SwipeableDrawer } from '@mui/material';
+import { Grid as Grid2, SwipeableDrawer } from '@mui/material';
 import { useState } from 'react';
 import {
   Backdrop,

src/custom/InputSearchField/InputSearchField.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, Grid2 } from '@mui/material';
+import { Autocomplete, Grid as Grid2 } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Chip, CircularProgress, TextField, Tooltip, Typography } from '../../base';