From 99e1e16ce729ad493266b3fdbfc44a5eaf1e8c99 Mon Sep 17 00:00:00 2001
From: Daniel Stoyanoff <dannystoyanoff@gmail.com>
Date: Tue, 4 Jul 2023 08:53:34 +0300
Subject: [PATCH] feat: support inline flex by an inline prop

---
 lib/system/flex-system.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/system/flex-system.ts b/lib/system/flex-system.ts
index a266396..4c381fa 100644
--- a/lib/system/flex-system.ts
+++ b/lib/system/flex-system.ts
@@ -5,7 +5,7 @@ import { CssProperties, ResponsiveValue } from "./types";
 
 export const createFlex = (props: FlexSystem, theme: BaseTheme): CssProperties[] => {
   const { spacing } = theme;
-  const { direction, center, centerMain, centerCross, gap, justify, align } = props;
+  const { direction, center, centerMain, centerCross, gap, justify, align, inline } = props;
 
   const centerTransformer: ValueTransformer<"alignItems" | "justifyContent", boolean> = value =>
     value ? "center" : undefined;
@@ -13,7 +13,7 @@ export const createFlex = (props: FlexSystem, theme: BaseTheme): CssProperties[]
   const responsive = responsiveCssValueFactory(theme);
 
   return [
-    { display: "flex" },
+    { display: inline ? "inline-flex" : "flex" },
     responsive("flexDirection", direction),
 
     responsive("alignItems", align),
@@ -36,6 +36,7 @@ export const flexPropKeys = getAllPropKeys<FlexSystem>({
   justify: true,
   gap: true,
   direction: true,
+  inline: true
 });
 
 export type FlexSystem = {
@@ -73,4 +74,9 @@ export type FlexSystem = {
    * Applies align-items to the elements. It has lower priority than center/centerMain/centerCross
    */
   align?: ResponsiveValue<CssProperties["alignItems"]>;
+
+  /**
+   * Whether to render as inline-flex instead of flex
+   */
+  inline?: ResponsiveValue<boolean>;
 };