layer5io · amitamrutiya · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,49 +40,53 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@mui/icons-material": "^5.15.11",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@mui/icons-material": "^6.4.8",
     "@reduxjs/toolkit": "^2.2.5",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/lodash": "^4.17.7",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.16",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "@types/react-redux": "^7.1.33",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "commitizen": "^4.3.0",
+    "@types/react-redux": "^7.1.34",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.49.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^8.0.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^15.5.0",
     "mui-datatables": "^4.3.0",
-    "notistack": "^3.0.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-organize-imports": "^3.2.3",
-    "react-error-boundary": "^4.0.12",
-    "react-markdown": "^8.0.7",
+    "notistack": "^3.0.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "react-error-boundary": "^5.0.0",
+    "react-markdown": "^10.1.0",
     "react-redux": "^8.1.1",
     "redux": "^5.0.1",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
-    "rollup": "^4.34.8",
-    "ts-jest": "^29.1.1",
-    "tsup": "^8.2.4",
-    "typescript": "^5.3.3"
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "rollup": "^4.38.0",
+    "ts-jest": "^29.3.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
-    "@xstate/react": "^5.0.2",
+    "@xstate/react": "^5.0.3",
     "react": "^17.0.2 || ^18.3.1",
     "react-dom": "^17.0.2 || ^18.3.1",
-    "xstate": "^5.18.2"
+    "xstate": "^5.19.2"
+  },
+  "overrides": {
+    "@mui/icons-material": "^6.4.8",
+    "@mui/material": "^6.4.8"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -96,18 +100,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@mui/material": "^5.15.11",
+    "@mui/material": "^6.4.8",
     "@types/mui-datatables": "*",
-    "billboard.js": "^3.14.3",
+    "billboard.js": "^3.15.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "moment-timezone": "^0.5.47",
+    "moment": "^2.30.1",
     "mui-datatables": "*",
-    "re-resizable": "^6.10.3",
+    "re-resizable": "^6.11.2",
     "react-draggable": "^4.4.6",
-    "react-share": "^5.1.0"
+    "react-share": "^4.1.1"
   }
-}
+}
diff --git a/src/base/Grid/Grid.tsx b/src/base/Grid/Grid.tsx
@@ -1,6 +1,10 @@
 import { Grid as MuiGrid, GridProps as MuiGridProps } from '@mui/material';
 import React from 'react';
 
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Please use an alternative Grid2 component instead.
+ */
 const Grid = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
   return <MuiGrid {...props} ref={ref} />;
 });

diff --git a/src/base/Grid2/Grid2.tsx b/src/base/Grid2/Grid2.tsx
@@ -0,0 +1,8 @@
+import { Grid2 as MuiGrid, Grid2Props as MuiGridProps } from '@mui/material';
+import React from 'react';
+
+const Grid2 = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
+  return <MuiGrid {...props} ref={ref} />;
+});
+
+export { Grid2 };
diff --git a/src/base/Grid2/index.ts b/src/base/Grid2/index.ts
@@ -0,0 +1,2 @@
+import { Grid2 } from './Grid2';
+export { Grid2 };
diff --git a/src/base/index.tsx b/src/base/index.tsx
@@ -39,6 +39,7 @@ export * from './FormControlLabel';
 export * from './FormGroup';
 export * from './FormLabel';
 export * from './Grid';
+export * from './Grid2';
 export * from './Grow';
 export * from './Hidden';
 export * from './IconButton';

diff --git a/src/custom/CatalogDesignTable/AuthorCell.tsx b/src/custom/CatalogDesignTable/AuthorCell.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, Box, Grid, Typography } from '../../base';
+import { Avatar, Box, Grid2, Typography } from '../../base';
 import { CLOUD_URL } from '../../constants/constants';
 import { PersonIcon } from '../../icons';
 import { CustomTooltip } from '../CustomTooltip';
@@ -30,12 +30,12 @@ const AuthorCell: React.FC<AuthorCellProps> = ({
 
   return (
     <Box sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
-      <Grid
+      <Grid2
         container
         alignItems="center"
         style={maxWidth ? { width: 'max-content' } : { width: '' }}
       >
-        <Grid item>
+        <Grid2>
           <Box sx={{ color: 'text.secondary', mr: 1 }}>
             <CustomTooltip title={`View ${displayName}'s Profile`}>
               <div>
@@ -52,13 +52,13 @@ const AuthorCell: React.FC<AuthorCellProps> = ({
               </div>
             </CustomTooltip>
           </Box>
-        </Grid>
+        </Grid2>
         {maxWidth && (
-          <Grid item>
+          <Grid2>
             <Typography variant="body2">{displayName}</Typography>
-          </Grid>
+          </Grid2>
         )}
-      </Grid>
+      </Grid2>
     </Box>
   );
 };

diff --git a/src/custom/CatalogDetail/MetricsDisplay.tsx b/src/custom/CatalogDetail/MetricsDisplay.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from '../../base';
+import { Grid2 } from '../../base';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { MetricsContainer, MetricsData, MetricsSection, MetricsType } from './style';
 
@@ -22,7 +22,15 @@ const MetricsDisplay: React.FC<MetricsDisplayProps> = ({ details }) => {
   ];
 
   return (
-    <Grid item lg={8} md={8} sm={12} xs={12} style={{ marginLeft: 'auto' }}>
+    <Grid2
+      style={{ marginLeft: 'auto' }}
+      size={{
+        lg: 8,
+        md: 8,
+        sm: 12,
+        xs: 12
+      }}
+    >
       <MetricsSection>
         {metrics.map((metric) => (
           <MetricsContainer key={metric.label}>
@@ -31,7 +39,7 @@ const MetricsDisplay: React.FC<MetricsDisplayProps> = ({ details }) => {
           </MetricsContainer>
         ))}
       </MetricsSection>
-    </Grid>
+    </Grid2>
   );
 };
 

diff --git a/src/custom/CatalogDetail/OverviewSection.tsx b/src/custom/CatalogDetail/OverviewSection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from '../../base';
+import { Grid2 } from '../../base';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import ContentClassInfo from './ContentClassInfo';
@@ -71,10 +71,25 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           handleShare={handleShare}
         />
       </div>
-      <Grid container spacing={2}>
-        <Grid item lg={4} md={4} sm={12} xs={12}>
-          <Grid container>
-            <Grid item lg={12} md={12} sm={6} xs={6} style={{ fontFamily: fontFamily }}>
+      <Grid2 container spacing={2}>
+        <Grid2
+          size={{
+            lg: 4,
+            md: 4,
+            sm: 12,
+            xs: 12
+          }}
+        >
+          <Grid2 container>
+            <Grid2
+              style={{ fontFamily: fontFamily }}
+              size={{
+                lg: 12,
+                md: 12,
+                sm: 6,
+                xs: 6
+              }}
+            >
               {details?.catalog_data?.content_class && (
                 <ContentRow>
                   <ContentClassInfo
@@ -90,10 +105,17 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
                 isVisibilityEnabled={isVisibilityEnabled}
                 handleVisibilityChange={handleVisibilityChange}
               />
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item lg={8} md={8} sm={12} xs={12}>
+            </Grid2>
+          </Grid2>
+        </Grid2>
+        <Grid2
+          size={{
+            lg: 8,
+            md: 8,
+            sm: 12,
+            xs: 12
+          }}
+        >
           {showContentDetails ? (
             <ContentRow>
               <h2 style={{ margin: '0' }}>WHAT DOES THIS DESIGN DO?</h2>
@@ -106,9 +128,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           ) : (
             ViewsComponent
           )}
-        </Grid>
+        </Grid2>
         {!(type === 'view' || type === 'filter') && <MetricsDisplay details={details} />}
-      </Grid>
+      </Grid2>
     </OverviewContainer>
   );
 };

diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx
@@ -83,7 +83,12 @@ const FilterSection: React.FC<FilterSectionProps> = ({
             }}
           >
             {showSearch && (
-              <Box px={'0.5rem'} mb={'0.5rem'}>
+              <Box
+                sx={{
+                  px: '0.5rem',
+                  mb: '0.5rem'
+                }}
+              >
                 <StyledSearchBar
                   value={searchQuery}
                   onChange={handleTextFieldChange}

diff --git a/src/custom/CustomCatalog/CustomCard.tsx b/src/custom/CustomCatalog/CustomCard.tsx
@@ -1,6 +1,6 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import React, { useEffect, useState } from 'react';
-import { Avatar, Grid } from '../../base';
+import { Avatar, Grid2 } from '../../base';
 import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
 import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
 import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
@@ -230,7 +230,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
               {cardTechnologies && (
                 <TechnologiesSection>
                   <TechnologyText>Technologies</TechnologyText>
-                  <Grid
+                  <Grid2
                     container
                     style={{ gap: '4px', alignItems: 'flex-start', flexWrap: 'nowrap' }}
                   >
@@ -243,7 +243,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                             (getHostUrl ? getHostUrl() : '') +
                             `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`;
                           return (
-                            <Grid item key={index}>
+                            <Grid2 key={index}>
                               <CustomTooltip key={index} title={technology.toLowerCase()}>
                                 <img
                                   height="24px"
@@ -252,12 +252,11 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                                   src={svgPath}
                                 />
                               </CustomTooltip>
-                            </Grid>
+                            </Grid2>
                           );
                         })}
                         {availableTechnologies.length > techlimit && (
-                          <Grid
-                            item
+                          <Grid2
                             sx={{
                               padding: '0 8px 0 4px',
                               borderRadius: '16px',
@@ -270,20 +269,19 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                             }}
                           >
                             +{availableTechnologies.length - techlimit}
-                          </Grid>
+                          </Grid2>
                         )}
                       </>
                     )}
-                  </Grid>
+                  </Grid2>
                 </TechnologiesSection>
               )}
             </DesignDetailsDiv>
 
             {isDetailed && (
               <DesignDetailsDiv style={{ marginTop: '20px' }}>
-                <Grid container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Grid
-                    item
+                <Grid2 container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Grid2
                     style={{
                       width: '100%',
                       display: 'flex',
@@ -313,8 +311,8 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                         }
                       )}
                     </DateText>
-                  </Grid>
-                </Grid>
+                  </Grid2>
+                </Grid2>
               </DesignDetailsDiv>
             )}
             {version && (
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { Grid2 } from './Grid2';
		export { Grid2 };