From eeaf590f16fc0ac85fa9a9364c05d9f880520bc7 Mon Sep 17 00:00:00 2001
From: Anil Anar <anilanar@hotmail.com>
Date: Thu, 16 May 2024 10:34:33 +0200
Subject: [PATCH] add margin props to flex item

---
 .changeset/eleven-baboons-film.md |  5 +++++
 packages/chakra-ui/src/Flex.tsx   |  6 ++++--
 packages/chakra-ui/src/props.ts   | 28 ++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/eleven-baboons-film.md

diff --git a/.changeset/eleven-baboons-film.md b/.changeset/eleven-baboons-film.md
new file mode 100644
index 0000000..1c045ec
--- /dev/null
+++ b/.changeset/eleven-baboons-film.md
@@ -0,0 +1,5 @@
+---
+"@moblin/chakra-ui": patch
+---
+
+add margin props to flex item
diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx
index a61b9a1..7fb1d41 100644
--- a/packages/chakra-ui/src/Flex.tsx
+++ b/packages/chakra-ui/src/Flex.tsx
@@ -11,10 +11,10 @@ import {
   unsafeCoerce,
 } from "@moblin/core";
 
-import { ContainerProps } from "./props";
+import { ContainerProps, SafeFlexItemProps } from "./props";
 import { WithChildren } from "./react";
 
-export interface FlexItemProps extends WithChildren {
+export interface FlexItemProps extends WithChildren, SafeFlexItemProps {
   alignSelf?: AlignSelf;
   grow?: number;
   shrink?: number;
@@ -29,6 +29,7 @@ export const FlexItem = ({
   basis = "auto",
   children,
   overflowAnchor,
+  ...props
 }: FlexItemProps) => {
   return (
     <chakra.div
@@ -59,6 +60,7 @@ export const FlexItem = ({
         },
         overflowAnchor,
       }}
+      {...props}
     >
       {children}
     </chakra.div>
diff --git a/packages/chakra-ui/src/props.ts b/packages/chakra-ui/src/props.ts
index 93259f2..fcf75a3 100644
--- a/packages/chakra-ui/src/props.ts
+++ b/packages/chakra-ui/src/props.ts
@@ -72,6 +72,34 @@ export type SafeSpaceProps = Pick<
   | "py"
 >;
 
+export type SafeFlexItemProps = Pick<
+  SpaceProps,
+  | "m"
+  | "margin"
+  | "mt"
+  | "marginBlockStart"
+  | "marginTop"
+  | "mr"
+  | "marginInlineEnd"
+  | "marginEnd"
+  | "me"
+  | "marginRight"
+  | "mb"
+  | "marginBlockEnd"
+  | "marginBottom"
+  | "ml"
+  | "marginInlineStart"
+  | "marginStart"
+  | "ms"
+  | "marginLeft"
+  | "mx"
+  | "marginInline"
+  | "marginX"
+  | "my"
+  | "marginBlock"
+  | "marginY"
+>;
+
 export type ContainerProps<T extends As> = Omit<
   HTMLChakraProps<T>,
   keyof StyleProps