@amsterdam/design-system-react/dist/Heading/Heading.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { getHeadingTag } from './getHeadingTag';
export const headingSizes = [1, 2, 3, 4];
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
 */
export const Heading = forwardRef(({ children, className, color, level, size, ...restProps }, ref) => {
    const Tag = getHeadingTag(level);
    const visualLevel = size ? size.slice(-1) : level;
    return (_jsx(Tag, { className: clsx('ams-heading', `ams-heading--${visualLevel}`, color && `ams-heading--${color}`, className), ref: ref, ...restProps, children: children }));
});
Heading.displayName = 'Heading';