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..a120f7b39 100644
--- a/src/columns/columns.tsx
+++ b/src/columns/columns.tsx
@@ -71,12 +71,20 @@ 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)
+    // eslint-disable-next-line no-console
+    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"