From ef7517bca5444d4c96e333aaf017b7f1c469f157 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 16:09:47 +0330
Subject: [PATCH] fix: flex props

---
 package.json                   |  2 +-
 src/components/layout/Flex.tsx | 35 +++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 2bcf597..2e40e7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.22",
+	"version": "1.11.23",
 	"files": [
 		"/lib"
 	],
diff --git a/src/components/layout/Flex.tsx b/src/components/layout/Flex.tsx
index 587095a..9a344d2 100644
--- a/src/components/layout/Flex.tsx
+++ b/src/components/layout/Flex.tsx
@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 interface IFlexProps {
 	$flexWrap?: boolean;
@@ -11,14 +11,31 @@ interface IFlexProps {
 
 export const Flex = styled.div<IFlexProps>`
 	display: flex;
-	flex-direction: ${props =>
-		props.$flexDirection ? props.$flexDirection : 'initial'};
-	flex-wrap: ${props => (props.$flexWrap ? 'wrap' : 'nowrap')};
-	align-items: ${props =>
-		props.$alignItems ? props.$alignItems : 'initial'};
-	justify-content: ${props =>
-		props.$justifyContent ? props.$justifyContent : 'initial'};
-	gap: ${props => props.gap};
+	${props =>
+		props.$flexDirection &&
+		css`
+			flex-direction: ${props.$flexDirection};
+		`}
+	${props =>
+		props.$flexWrap &&
+		css`
+			flex-wrap: wrap;
+		`}
+	${props =>
+		props.$alignItems &&
+		css`
+			align-items: ${props.$alignItems};
+		`}
+	${props =>
+		props.$justifyContent &&
+		css`
+			justify-content: ${props.$justifyContent};
+		`}
+	${props =>
+		props.gap &&
+		css`
+			gap: ${props.gap};
+		`}
 `;
 
 interface IFlexCenter {