fix: Adjust property components for backwards compatibility (#524)

Author: maciaszczykm

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>

src/components/PropsContainer.tsx

@@ -17,7 +17,7 @@ export default function PropsContainer({
   title,
   ...props
 }: {
-  title: string
+  title?: string
 } & DivProps) {
   return (
     <PropsContainerSC {...props}>