text: import {
    createElement,
    forwardRef,
    AllHTMLAttributes,
    ElementType,
  } from 'react';
  import { useBoxStyles, UseBoxStylesProps } from './useBoxStyles';
  import { renderBackgroundProvider } from './BackgroundContext';
  
  export interface BoxProps
    extends Omit<UseBoxStylesProps, 'component'>,
      Omit<AllHTMLAttributes<HTMLElement>, 'width' | 'height' | 'className'> {
    component?: ElementType;
  }
  
  const NamedBox = forwardRef<HTMLElement, BoxProps>(
    (
      {
        component = 'div',
        padding,
        paddingX,
        paddingY,
        paddingTop,
        paddingBottom,
        paddingLeft,
        paddingRight,
        margin,
        marginX,
        marginY,
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        display,
        flexDirection,
        flexWrap,
        flexShrink,
        flexGrow,
        alignItems,
        justifyContent,
        textAlign,
        borderRadius,
        background,
        boxShadow,
        transition,
        transform,
        height,
        width,
        position,
        cursor,
        pointerEvents,
        overflow,
        minWidth,
        top,
        bottom,
        right,
        left,
        userSelect,
        outline,
        opacity,
        zIndex,
        className,
        ...restProps
      },
      ref,
    ) => {
      const boxStyles = useBoxStyles({
        component,
        padding,
        paddingX,
        paddingY,
        paddingTop,
        paddingBottom,
        paddingLeft,
        paddingRight,
        margin,
        marginX,
        marginY,
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        display,
        flexDirection,
        flexWrap,
        flexShrink,
        flexGrow,
        alignItems,
        justifyContent,
        textAlign,
        borderRadius,
        background,
        boxShadow,
        transition,
        transform,
        height,
        width,
        position,
        cursor,
        pointerEvents,
        overflow,
        minWidth,
        top,
        bottom,
        right,
        left,
        userSelect,
        outline,
        opacity,
        zIndex,
        className,
      });
  
      const element = createElement(component, {
        className: boxStyles,
        ...restProps,
        ref,
      });
  
      return renderBackgroundProvider(background, element);
    },
  );
  
  NamedBox.displayName = 'Box';
  
  export const Box = NamedBox;
  