import React, { forwardRef } from "react";
import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { getStaticVariants, getDynamicVariants, getIntersectionStyles } from "./utils";
export { css };
const Root = /*#__PURE__*/ styled("div", {
    target: "e1j98gn0",
    label: "Root"
})(({ base })=>base, ";", ({ staticVariants })=>staticVariants, ";", ({ dynamicVariants })=>dynamicVariants, ";", ({ intersectionStyles })=>intersectionStyles, ";", ({ responsiveStyles })=>responsiveStyles, ";");
/* eslint-disable no-underscore-dangle */ export const _component = (componentConfig)=>{
    const { tag, base, intersections, responsive } = componentConfig;
    const staticVariants = getStaticVariants(componentConfig);
    const dynamicVariants = getDynamicVariants(componentConfig);
    // TODO: should we type tag as more then string ?
    const R = Root.withComponent(tag);
    return /*#__PURE__*/ forwardRef((props, ref)=>{
        const { responsive: responsiveProp, ...rest } = props;
        const intersectionStyles = getIntersectionStyles(rest, intersections);
        const responsiveStyles = responsiveProp ? responsive : undefined;
        return /*#__PURE__*/ React.createElement(R, {
            base: base,
            staticVariants: staticVariants,
            dynamicVariants: dynamicVariants,
            intersectionStyles: intersectionStyles,
            responsiveStyles: responsiveStyles,
            ...rest,
            ref: ref
        });
    });
};
