import clsx from 'clsx';
const styleMap = {
    h1: clsx('text-4xl font-semibold sm:text-6xl'),
    h2: clsx('text-3xl font-semibold sm:text-5xl'),
    h3: clsx('text-2xl font-semibold sm:text-[2.125rem]'),
    h4: clsx('text-xl font-bold sm:text-[1.625rem]'),
    h5: clsx('text-lg font-semibold sm:text-2xl'),
    h6: clsx('text-base font-semibold sm:text-[1.3125rem]'),
    h7: clsx('text-sm font-semibold sm:text-lg'),
};
/**
 * Heading component for rendering different levels of headings with specific styles.
 *
 * @component
 * @example
 * // Example usage of Heading component
 * <Heading level="h1">This is a heading</Heading>
 *
 * @param {Object} props - The properties of the Heading component.
 * @param {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7'} props.level - The level of the heading.
 * @param {ReactNode} props.children - The content to be displayed inside the heading.
 * @param {HTMLAttributes<HTMLHeadingElement>} restProps - Additional properties for the heading element.
 *
 * @returns {ReactNode} The rendered Heading component.
 */
export function Heading({ level, children, ...restProps }) {
    const Tag = level === 'h7' ? 'h6' : level;
    const className = clsx(styleMap[level], restProps.className);
    return (<Tag {...restProps} className={className}>
      {children}
    </Tag>);
}
//# sourceMappingURL=Heading.jsx.map