From 9e5842bbecca6e249af2c5fc50078bb7ddd5420f Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Fri, 19 Jan 2024 18:10:02 +0100
Subject: [PATCH] fix: rowGap and columnGap style properties not accepting
 strings (#2525)

---
 .changeset/many-gorillas-mate.md |  5 +++
 packages/types/style.d.ts        | 66 +++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/many-gorillas-mate.md

diff --git a/.changeset/many-gorillas-mate.md b/.changeset/many-gorillas-mate.md
new file mode 100644
index 000000000..cada89ef9
--- /dev/null
+++ b/.changeset/many-gorillas-mate.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/types': patch
+---
+
+Fix rowGap and columnGap style properties not accepting strings
diff --git a/packages/types/style.d.ts b/packages/types/style.d.ts
index 2d39f2581..167feabdf 100644
--- a/packages/types/style.d.ts
+++ b/packages/types/style.d.ts
@@ -1,9 +1,21 @@
 export interface Style {
   // Flexbox
 
-  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
+  alignContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'stretch'
+    | 'space-between'
+    | 'space-around';
   alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+  alignSelf?:
+    | 'auto'
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'baseline'
+    | 'stretch';
   flex?: number | string;
   flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
   flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
@@ -11,10 +23,16 @@ export interface Style {
   flexGrow?: number;
   flexShrink?: number;
   flexBasis?: number | string;
-  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
   gap?: number | string;
-  rowGap?: number;
-  columnGap?: number;
+  rowGap?: number | string;
+  columnGap?: number | string;
 
   // Layout
 
@@ -48,14 +66,34 @@ export interface Style {
   fontSize?: number | string;
   fontFamily?: string;
   fontStyle?: string | 'normal';
-  fontWeight?: number | 'thin' | 'hairline' | 'ultralight' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'demibold' | 'bold' | 'ultrabold' | 'extrabold' | 'heavy' | 'black';
+  fontWeight?:
+    | number
+    | 'thin'
+    | 'hairline'
+    | 'ultralight'
+    | 'extralight'
+    | 'light'
+    | 'normal'
+    | 'medium'
+    | 'semibold'
+    | 'demibold'
+    | 'bold'
+    | 'ultrabold'
+    | 'extrabold'
+    | 'heavy'
+    | 'black';
   letterSpacing?: number | string;
   lineHeight?: number | string;
   maxLines?: number; // ?
   textAlign?: 'left' | 'right' | 'center' | 'justify'; // ?
-  textDecoration?: 'line-through' | 'underline' | 'none' | 'line-through underline' | 'underline line-through';
+  textDecoration?:
+    | 'line-through'
+    | 'underline'
+    | 'none'
+    | 'line-through underline'
+    | 'underline line-through';
   textDecorationColor?: string;
-  textDecorationStyle?: "dashed" | "dotted" | "solid" | string; // ?
+  textDecorationStyle?: 'dashed' | 'dotted' | 'solid' | string; // ?
   textIndent?: any; // ?
   textOverflow?: 'ellipsis';
   textTransform?: 'capitalize' | 'lowercase' | 'uppercase';
@@ -97,26 +135,26 @@ export interface Style {
   border?: number | string;
   borderWidth?: number | string;
   borderColor?: string;
-  borderStyle?: "dashed" | "dotted" | "solid";
+  borderStyle?: 'dashed' | 'dotted' | 'solid';
   borderTop?: number | string;
   borderTopColor?: string;
-  borderTopStyle?: "dashed" | "dotted" | "solid"; // ?
+  borderTopStyle?: 'dashed' | 'dotted' | 'solid'; // ?
   borderTopWidth?: number | string;
   borderRight?: number | string;
   borderRightColor?: string;
-  borderRightStyle?: "dashed" | "dotted" | "solid"; // ?
+  borderRightStyle?: 'dashed' | 'dotted' | 'solid'; // ?
   borderRightWidth?: number | string;
   borderBottom?: number | string;
   borderBottomColor?: string;
-  borderBottomStyle?: "dashed" | "dotted" | "solid"; // ?
+  borderBottomStyle?: 'dashed' | 'dotted' | 'solid'; // ?
   borderBottomWidth?: number | string;
   borderLeft?: number | string;
   borderLeftColor?: string;
-  borderLeftStyle?: "dashed" | "dotted" | "solid"; // ?
+  borderLeftStyle?: 'dashed' | 'dotted' | 'solid'; // ?
   borderLeftWidth?: number | string;
   borderTopLeftRadius?: number | string;
   borderTopRightRadius?: number | string;
   borderBottomRightRadius?: number | string;
   borderBottomLeftRadius?: number | string;
-  borderRadius?: number | string
+  borderRadius?: number | string;
 }