From 5b4e350552f1faebc09ece5ccf4d87b5ed414d65 Mon Sep 17 00:00:00 2001
From: Ryan Turner <ryan.turner4370@gmail.com>
Date: Wed, 12 Feb 2025 10:08:12 -0500
Subject: [PATCH] Handle derived sx in Flex.tsx

---
 packages/components/src/Flex.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/Flex.tsx b/packages/components/src/Flex.tsx
index c389ae084..81da51be6 100644
--- a/packages/components/src/Flex.tsx
+++ b/packages/components/src/Flex.tsx
@@ -11,14 +11,15 @@ export type FlexProps = BoxProps
  */
 export const Flex: ForwardRef<HTMLElement, FlexProps> = React.forwardRef(
   function Flex(props: FlexProps, ref) {
+    const { sx } = props;
     return (
       <Box
         ref={ref}
         {...props}
-        sx={{
+        sx={theme => ({
           display: 'flex',
-          ...props.sx,
-        }}
+          ...(typeof sx === "function" ? sx(theme) : sx),
+        })}
       />
     )
   }