From 40c25975e336ffa614bc7e6d37ae7aa6220f7ff1 Mon Sep 17 00:00:00 2001
From: Francesca Guiducci <francesca@doist.com>
Date: Tue, 6 May 2025 15:01:01 +0200
Subject: [PATCH 1/2] chore: Repro PR for Columns space issue

---
 src/columns/columns.stories.tsx | 1 +
 src/columns/columns.tsx         | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/columns/columns.stories.tsx b/src/columns/columns.stories.tsx
index 7cd54d028..ed718993d 100644
--- a/src/columns/columns.stories.tsx
+++ b/src/columns/columns.stories.tsx
@@ -307,6 +307,7 @@ export function ResponsiveStory(args: PartialProps<typeof Columns>) {
                     </Columns>
                 </Wrapper>
                 <Wrapper title="Space between columns reduces on smaller screen sizes">
+                    {/* Here is the "offending" space prop format 👇 */}
                     <Columns space={{ mobile: 'xsmall', tablet: 'medium', desktop: 'xlarge' }}>
                         {times(5).map((i) => (
                             <Column key={i}>
diff --git a/src/columns/columns.tsx b/src/columns/columns.tsx
index 00c71c350..ddf5ef0de 100644
--- a/src/columns/columns.tsx
+++ b/src/columns/columns.tsx
@@ -71,12 +71,19 @@ const Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(
     },
     ref,
 ) {
+    // Here I'm just printing out how the generated className looks like
+    // You can see that the fact that `space` is a composite type (i.e. mobile: '...', table: '...')
+    // triggers the issue
+    // Everything works fine if `space` is a simple string like 'medium' (not composite)
+    console.log('className', getClassNames(styles, 'container', space))
+
     return (
         <Box
             {...props}
             className={[
                 exceptionallySetClassName,
                 styles.container,
+                // Here is where we actually call `getClassNames` 👇
                 getClassNames(styles, 'container', space),
             ]}
             display="flex"

From 4cdee18a76a7aa5f86bfbea0f563b585b3c9d37d Mon Sep 17 00:00:00 2001
From: Francesca Guiducci <francesca@doist.com>
Date: Tue, 6 May 2025 15:01:53 +0200
Subject: [PATCH 2/2] chore: Repro PR for Columns space issue

---
 src/columns/columns.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/columns/columns.tsx b/src/columns/columns.tsx
index ddf5ef0de..a120f7b39 100644
--- a/src/columns/columns.tsx
+++ b/src/columns/columns.tsx
@@ -75,6 +75,7 @@ const Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(
     // You can see that the fact that `space` is a composite type (i.e. mobile: '...', table: '...')
     // triggers the issue
     // Everything works fine if `space` is a simple string like 'medium' (not composite)
+    // eslint-disable-next-line no-console
     console.log('className', getClassNames(styles, 'container', space))
 
     return (