Box: Add gap prop (#76953)

* Box: Add gap prop

* Update packages/grafana-ui/src/components/Layout/Box/Box.tsx

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

---------

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

packages/grafana-ui/src/components/Layout/Box/Box.tsx

@@ -59,6 +59,7 @@ interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' |
   shrink?: ResponsiveProp<number>;
   alignItems?: ResponsiveProp<AlignItems>;
   justifyContent?: ResponsiveProp<JustifyContent>;
+  gap?: ResponsiveProp<ThemeSpacingTokens>;
 
   // Other props
   backgroundColor?: ResponsiveProp<BackgroundColor>;
@@ -96,6 +97,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     alignItems,
     boxShadow,
     element,
+    gap,
     ...rest
   } = props;
   const styles = useStyles2(
@@ -123,7 +125,8 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     borderRadius,
     justifyContent,
     alignItems,
-    boxShadow
+    boxShadow,
+    gap
   );
   const Element = element ?? 'div';
 
@@ -185,7 +188,8 @@ const getStyles = (
   borderRadius: BoxProps['borderRadius'],
   justifyContent: BoxProps['justifyContent'],
   alignItems: BoxProps['alignItems'],
-  boxShadow: BoxProps['boxShadow']
+  boxShadow: BoxProps['boxShadow'],
+  gap: BoxProps['gap']
 ) => {
   return {
     root: css([
@@ -268,6 +272,9 @@ const getStyles = (
       getResponsiveStyle(theme, boxShadow, (val) => ({
         boxShadow: theme.shadows[val],
       })),
+      getResponsiveStyle(theme, gap, (val) => ({
+        gap: theme.spacing(val),
+      })),
     ]),
   };
 };