From 3b251e1a7f63c2017ef237c5f6b31ac9450e9722 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 11 Oct 2025 22:09:31 +0100
Subject: [PATCH] Fix custom classes

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/ui/src/components/Box/Box.tsx             |  4 ++--
 packages/ui/src/components/Container/Container.tsx |  6 ++++--
 packages/ui/src/components/Flex/Flex.tsx           |  6 ++++--
 packages/ui/src/components/Grid/Grid.tsx           | 12 ++++++++----
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx
index 729a0f7cec..2bb4e3cd15 100644
--- a/packages/ui/src/components/Box/Box.tsx
+++ b/packages/ui/src/components/Box/Box.tsx
@@ -26,13 +26,13 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
     props,
   );
 
-  const { as = 'div', children, ...rest } = cleanedProps;
+  const { as = 'div', children, className, ...rest } = cleanedProps;
 
   return createElement(
     as,
     {
       ref,
-      className: clsx(classNames.root, utilityClasses),
+      className: clsx(classNames.root, utilityClasses, className),
       style,
       ...rest,
     },
diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx
index 77b2cb3f18..f313f95eaa 100644
--- a/packages/ui/src/components/Container/Container.tsx
+++ b/packages/ui/src/components/Container/Container.tsx
@@ -27,12 +27,14 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
       props,
     );
 
+    const { className, ...rest } = cleanedProps;
+
     return (
       <div
         ref={ref}
-        className={clsx(classNames.root, utilityClasses)}
+        className={clsx(classNames.root, utilityClasses, className)}
         style={style}
-        {...cleanedProps}
+        {...rest}
       />
     );
   },
diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx
index ffd6b8633f..b1f5913c06 100644
--- a/packages/ui/src/components/Flex/Flex.tsx
+++ b/packages/ui/src/components/Flex/Flex.tsx
@@ -26,12 +26,14 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     { gap: '4', ...props },
   );
 
+  const { className, ...rest } = cleanedProps;
+
   return (
     <div
       ref={ref}
-      className={clsx(classNames.root, utilityClasses)}
+      className={clsx(classNames.root, utilityClasses, className)}
       style={style}
-      {...cleanedProps}
+      {...rest}
     />
   );
 });
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index 74eb3d790a..6ef72e381b 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/packages/ui/src/components/Grid/Grid.tsx
@@ -25,12 +25,14 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
     { columns: 'auto', gap: '4', ...props },
   );
 
+  const { className, ...rest } = cleanedProps;
+
   return (
     <div
       ref={ref}
-      className={clsx(classNames.root, utilityClasses)}
+      className={clsx(classNames.root, utilityClasses, className)}
       style={style}
-      {...cleanedProps}
+      {...rest}
     />
   );
 });
@@ -41,12 +43,14 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
     props,
   );
 
+  const { className, ...rest } = cleanedProps;
+
   return (
     <div
       ref={ref}
-      className={clsx(classNames.root, utilityClasses)}
+      className={clsx(classNames.root, utilityClasses, className)}
       style={style}
-      {...cleanedProps}
+      {...rest}
     />
   );
 });