feature: use Element in Box + necessary fix changes

.changeset/eight-deers-confess.md

@@ -0,0 +1,6 @@
+---
+"@marigold/components": patch
+"@marigold/system": patch
+---
+
+feature: use Element in Box + necessary fix changes

packages/components/src/ActionGroup/ActionGroup.tsx

@@ -1,7 +1,7 @@
 import React, { Children } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
+import { ResponsiveStyleValue } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
 import { Box } from '../Box';
@@ -20,9 +20,9 @@ export const ActionGroup: React.FC<ActionGroupProps> = ({
   className,
   ...props
 }) => {
-  const childClassName = useStyles({
-    css: verticalAlignment ? { marginBottom: space } : { marginRight: space },
-  });
+  const childStyle = verticalAlignment
+    ? { marginBottom: space }
+    : { marginRight: space };
   return (
     <Box variant={`actionGroup.${variant}`} className={className} {...props}>
       {Children.map(
@@ -32,9 +32,7 @@ export const ActionGroup: React.FC<ActionGroupProps> = ({
           child !== undefined && (
             <Box
               as={verticalAlignment ? 'div' : 'span'}
-              className={
-                i < Children.count(children) - 1 ? childClassName : undefined
-              }
+              css={i < Children.count(children) - 1 ? childStyle : undefined}
             >
               {child}
             </Box>

packages/components/src/Box/Box.tsx

@@ -1,5 +1,5 @@
-import { createElement, forwardRef } from 'react';
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
+import React, { forwardRef } from 'react';
+import { CSSObject, Element, ResponsiveStyleValue } from '@marigold/system';
 import {
   PolymorphicPropsWithRef,
   PolymorphicComponentWithRef,
@@ -8,6 +8,7 @@ import {
 export type BoxOwnProps = {
   className?: string;
   variant?: string | string[];
+  css?: CSSObject;
 
   display?: ResponsiveStyleValue<string>;
 
@@ -63,6 +64,7 @@ export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
     {
       variant,
       as = 'div',
+      css,
       children,
       className,
       display,
@@ -106,52 +108,58 @@ export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
       ...props
     },
     ref
-  ) => {
-    const cn = useStyles({
-      element: as,
-      variant,
-      className,
-      css: {
-        display,
-        height,
-        width,
-        minWidth,
-        maxWidth,
-        position,
-        top,
-        bottom,
-        right,
-        left,
-        zIndex,
-        p,
-        px,
-        py,
-        pt,
-        pb,
-        pl,
-        pr,
-        m,
-        mx,
-        my,
-        mt,
-        mb,
-        ml,
-        mr,
-        flexDirection,
-        flexWrap,
-        flexShrink,
-        flexGrow,
-        alignItems,
-        justifyContent,
-        bg,
-        border,
-        borderRadius,
-        boxShadow,
-        opacity,
-        overflow,
-        transition,
-      },
-    });
-    return createElement(as, { ...props, ref, className: cn }, children);
-  }
+  ) => (
+    <Element
+      as={as}
+      ref={ref}
+      variant={variant}
+      css={{
+        ...{
+          display,
+          height,
+          width,
+          minWidth,
+          maxWidth,
+          position,
+          top,
+          bottom,
+          right,
+          left,
+          zIndex,
+          p,
+          px,
+          py,
+          pt,
+          pb,
+          pl,
+          pr,
+          m,
+          mx,
+          my,
+          mt,
+          mb,
+          ml,
+          mr,
+          flexDirection,
+          flexWrap,
+          flexShrink,
+          flexGrow,
+          alignItems,
+          justifyContent,
+          bg,
+          border,
+          borderRadius,
+          boxShadow,
+          opacity,
+          overflow,
+          transition,
+        },
+        ...css,
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Element>
+  )
 );

packages/components/src/Stack/Stack.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ResponsiveStyleValue, useClassname } from '@marigold/system';
+import { ResponsiveStyleValue } from '@marigold/system';
 
 import { Box } from '../Box';
 
@@ -22,15 +22,14 @@ export const Stack: React.FC<StackProps> = ({
   children,
   ...props
 }) => {
-  const className = useClassname({ '> * + *': { pt: space } });
   return (
     <Box
       {...props}
       as={as}
       display="flex"
       flexDirection="column"
       alignItems={ALIGNMENT[align]}
-      className={className}
+      css={{ '> * + *': { pt: space } }}
     >
       {children}
     </Box>

packages/components/src/Text/Text.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
+import { ResponsiveStyleValue } from '@marigold/system';
 import {
   PolymorphicComponentWithRef,
   PolymorphicPropsWithRef,
@@ -33,17 +33,16 @@ export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
         ...props
       },
       ref
-    ) => {
-      const cn = useStyles({
-        className,
-        variant: `text.${variant}`,
-        css: { textAlign: align, color, cursor, outline, userSelect },
-      });
-
-      return (
-        <Box {...props} as={as} className={cn} ref={ref}>
-          {children}
-        </Box>
-      );
-    }
+    ) => (
+      <Box
+        {...props}
+        as={as}
+        variant={`text.${variant}`}
+        css={{ textAlign: align, color, cursor, outline, userSelect }}
+        className={className}
+        ref={ref}
+      >
+        {children}
+      </Box>
+    )
   );