fix(striker-ui): add wrapper around Grid to make it compatible with FlexBox spacing

striker-ui/components/Grid.tsx

@@ -1,9 +1,10 @@
-import { Grid as MUIGrid } from '@mui/material';
+import { Box as MUIBox, Grid as MUIGrid } from '@mui/material';
 import { FC, useMemo } from 'react';
 
 const Grid: FC<GridProps> = ({
   calculateItemBreakpoints = () => ({ xs: 1 }),
   layout,
+  wrapperBoxProps,
   ...restGridProps
 }) => {
   const itemElements = useMemo(() => {
@@ -24,9 +25,12 @@ const Grid: FC<GridProps> = ({
   }, [calculateItemBreakpoints, layout]);
 
   return (
-    <MUIGrid container {...restGridProps}>
-      {itemElements}
-    </MUIGrid>
+    // Make Grid compatible with FlexBox by adding an extra empty wrapper.
+    <MUIBox {...wrapperBoxProps}>
+      <MUIGrid container {...restGridProps}>
+        {itemElements}
+      </MUIGrid>
+    </MUIBox>
   );
 };
 

striker-ui/types/Grid.d.ts

@@ -9,6 +9,7 @@ type GridOptionalProps = {
   ) => Partial<
     Pick<import('@mui/material').GridProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>
   >;
+  wrapperBoxProps?: import('@mui/material').BoxProps;
 };
 
 type GridProps = import('@mui/material').GridProps &