fix(striker-ui): adjust inner panel margin

striker-ui/components/Panels/InnerPanel.tsx

@@ -3,15 +3,33 @@ import { Box as MUIBox, SxProps, Theme } from '@mui/material';
 
 import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 
-const InnerPanel: FC<InnerPanelProps> = ({ sx, ...muiBoxRestProps }) => {
+const InnerPanel: FC<InnerPanelProps> = ({
+  headerMarginOffset: hmo = '.3em',
+  ml,
+  mv = '1.4em',
+  sx,
+  // Props that depend on others.
+  mb = mv,
+  mt = mv,
+
+  ...muiBoxRestProps
+}) => {
+  const marginLeft = useMemo(
+    () => (ml ? `calc(${ml} + ${hmo})` : hmo),
+    [hmo, ml],
+  );
+  const marginTop = useMemo(() => {
+    const resultMt = typeof mt === 'number' ? `${mt}px` : mt;
+
+    return `calc(${resultMt} + ${hmo})`;
+  }, [hmo, mt]);
+
   const combinedSx = useMemo<SxProps<Theme>>(
     () => ({
       borderWidth: '1px',
       borderRadius: BORDER_RADIUS,
       borderStyle: 'solid',
       borderColor: DIVIDER,
-      marginTop: '1.4em',
-      marginBottom: '1.4em',
       paddingBottom: 0,
       position: 'relative',
 
@@ -20,7 +38,15 @@ const InnerPanel: FC<InnerPanelProps> = ({ sx, ...muiBoxRestProps }) => {
     [sx],
   );
 
-  return <MUIBox {...muiBoxRestProps} sx={combinedSx} />;
+  return (
+    <MUIBox
+      mb={mb}
+      ml={marginLeft}
+      mt={marginTop}
+      {...muiBoxRestProps}
+      sx={combinedSx}
+    />
+  );
 };
 
 export default InnerPanel;

striker-ui/components/Panels/InnerPanelBody.tsx

@@ -1,17 +1,20 @@
-import { Box, BoxProps } from '@mui/material';
+import { Box, BoxProps, SxProps, Theme } from '@mui/material';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 
-const InnerPanelBody: FC<BoxProps> = ({ sx, ...innerPanelBodyRestProps }) => (
+const InnerPanelBody: FC<BoxProps> = ({ sx, ...innerPanelBodyRestProps }) => {
-  <Box
+  const combinedSx = useMemo<SxProps<Theme>>(
-    {...{
+    () => ({
-      ...innerPanelBodyRestProps,
+      position: 'relative',
-      sx: {
+      zIndex: 20,
-        padding: '.3em .7em',
 
-        ...sx,
+      ...sx,
-      },
+    }),
-    }}
+    [sx],
-  />
+  );
-);
+
+  return (
+    <Box padding=".3em .7em" {...innerPanelBodyRestProps} sx={combinedSx} />
+  );
+};
 
 export default InnerPanelBody;

striker-ui/types/InnerPanel.d.ts

@@ -1 +1,7 @@
-type InnerPanelProps = import('@mui/material').BoxProps;
+type InnerPanelOptionalProps = {
+  headerMarginOffset?: number | string;
+  mv?: number | string;
+};
+
+type InnerPanelProps = InnerPanelOptionalProps &
+  import('@mui/material').BoxProps;