@atlaskit/heading/dist/es2019/heading-context.js

A heading is a typography component used to display text in different sizes and formats.

import React from 'react';
import { HeadingLevelContext } from './heading-level-context';
import { useHeadingLevel } from './use-heading-level';
/**
 * __Heading level provider__
 *
 * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
 *
 * @example
 * ```tsx
 * // Will correctly infer the heading level
 * <HeadingContext value={1}>
 *  <Heading>H1</Heading>
 *  <HeadingContext>
 *    <Heading>H2</Heading>
 *  </HeadingContext>
 * </HeadingContext>
 * ```
 */
const HeadingLevelContextProvider = ({
  children,
  value
}) => {
  const parentHeadingLevel = useHeadingLevel();
  const headingLevel = parentHeadingLevel + 1;
  return /*#__PURE__*/React.createElement(HeadingLevelContext.Provider, {
    value: value || headingLevel
  }, children);
};
export default HeadingLevelContextProvider;