Fix custom classes

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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,
     },

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}
       />
     );
   },

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}
     />
   );
 });

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}
     />
   );
 });