@primer/react/dist/Heading/Heading.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React, { forwardRef } from 'react';
import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
import classes from './Heading.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { useMergedRefs } from '../hooks/useMergedRefs.js';

const Heading = /*#__PURE__*/forwardRef(({
  as: Component = 'h2',
  className,
  variant,
  ...props
}, forwardedRef) => {
  const innerRef = React.useRef(null);
  const mergedRef = useMergedRefs(forwardedRef, innerRef);
  useDevOnlyEffect(() => {
    if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
      // eslint-disable-next-line no-console
      console.warn('This Heading component should be an instanceof of h1-h6');
    }
  }, [innerRef]);
  return /*#__PURE__*/jsx(Component, {
    className: clsx(className, classes.Heading),
    "data-variant": variant,
    "data-component": "Heading",
    ...props,
    ref: mergedRef
  });
});
Heading.displayName = 'Heading';

export { Heading as default };