From 49c65e0e1654af7eef487bb4d928c5d158dfc5e9 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin@plural.sh>
Date: Wed, 11 Oct 2023 10:15:13 +0200
Subject: [PATCH] fix: Adjust property components for backwards compatibility
 (#524)

---
 src/components/Prop.tsx           | 22 +++++++++++++---------
 src/components/PropsContainer.tsx |  2 +-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Prop.tsx b/src/components/Prop.tsx
index fdf81f3e..fc095f63 100644
--- a/src/components/Prop.tsx
+++ b/src/components/Prop.tsx
@@ -1,25 +1,29 @@
 import { Div, type DivProps } from 'honorable'
 import styled from 'styled-components'
 
-const PropSC = styled.div(({ theme }) => ({
-  margin: theme.spacing.medium,
+const PropSC = styled.div<{ $margin?: string | number }>(
+  ({ $margin, theme }) => ({
+    margin: $margin ?? theme.spacing.medium,
 
-  '.prop-title': {
-    ...theme.partials.text.caption,
-    color: theme.colors['text-xlight'],
-    marginBottom: theme.spacing.xxsmall,
-  },
-}))
+    '.prop-title': {
+      ...theme.partials.text.caption,
+      color: theme.colors['text-xlight'],
+      marginBottom: theme.spacing.xxsmall,
+    },
+  })
+)
 
 export default function Prop({
   children,
   title,
+  margin,
   ...props
 }: {
   title: string
+  margin?: string | number
 } & DivProps) {
   return (
-    <PropSC>
+    <PropSC $margin={margin}>
       <div className="prop-title">{title}</div>
       <Div {...props}>{children}</Div>
     </PropSC>
diff --git a/src/components/PropsContainer.tsx b/src/components/PropsContainer.tsx
index a400829f..edeab2a2 100644
--- a/src/components/PropsContainer.tsx
+++ b/src/components/PropsContainer.tsx
@@ -17,7 +17,7 @@ export default function PropsContainer({
   title,
   ...props
 }: {
-  title: string
+  title?: string
 } & DivProps) {
   return (
     <PropsContainerSC {...props}>