From 5e285043b703d7e4d1f0596b9eb6d287b675aa9f Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 22 May 2024 15:00:18 +1000
Subject: [PATCH] feat: added flex gap support to Flex component

---
 ts/components/basic/Flex.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ts/components/basic/Flex.tsx b/ts/components/basic/Flex.tsx
index 3912d82da..7963a4040 100644
--- a/ts/components/basic/Flex.tsx
+++ b/ts/components/basic/Flex.tsx
@@ -18,6 +18,7 @@ export interface FlexProps {
     | 'initial'
     | 'inherit';
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  flexGap?: string;
   alignItems?:
     | 'stretch'
     | 'center'
@@ -50,6 +51,7 @@ export const Flex = styled.div<FlexProps>`
   flex-basis: ${props => (props.flexBasis !== undefined ? props.flexBasis : 'auto')};
   flex-shrink: ${props => (props.flexShrink !== undefined ? props.flexShrink : '1')};
   flex-wrap: ${props => (props.flexWrap !== undefined ? props.flexWrap : 'nowrap')};
+  gap: ${props => (props.flexGap !== undefined ? props.flexGap : undefined)};
   align-items: ${props => props.alignItems || 'stretch'};
   margin: ${props => props.margin || '0'};
   padding: ${props => props.padding || '0'};
@@ -68,6 +70,7 @@ export const AnimatedFlex = styled(motion.div)<FlexProps>`
   flex-basis: ${props => (props.flexBasis !== undefined ? props.flexBasis : 'auto')};
   flex-shrink: ${props => (props.flexShrink !== undefined ? props.flexShrink : '1')};
   flex-wrap: ${props => (props.flexWrap !== undefined ? props.flexWrap : 'nowrap')};
+  gap: ${props => (props.flexGap !== undefined ? props.flexGap : undefined)};
   align-items: ${props => props.alignItems || 'stretch'};
   margin: ${props => props.margin || '0'};
   padding: ${props => props.padding || '0'};