import React, { forwardRef } from "react";
import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
import { Item, ListItemInnerContainerClassNameSelector } from "./Item.js";
const StyledContent = styled("div", {
    flex: 1,
});
const StyledHeader = styled(Item, {
    paddingTop: dimensionsPxToRem(80),
    paddingBottom: dimensionsPxToRem(40),
    fontSize: fontPxToRem(26),
    color: "$sub",
    textTransform: "uppercase",
    [`& ${ListItemInnerContainerClassNameSelector}`]: {
        minHeight: 0,
    },
    variants: {
        inset: {
            true: {
                paddingLeft: 0,
                paddingRight: 0,
            },
        },
    },
});
const Header = forwardRef(({ as, ...props }, ref) => {
    return (React.createElement(StyledHeader, { ...props, ref: ref },
        React.createElement(StyledContent, { ...(as ? { as } : undefined) }, props.children)));
});
Header.displayName = "List.Header";
Header.toString = () => StyledHeader.toString();
const ListHeaderContentSelector = StyledContent.toString();
export { Header, ListHeaderContentSelector };
//# sourceMappingURL=Header.js.map