@dnb/eufemia/es/elements/typography/H.js

DNB Eufemia Design System UI Library

"use client";

import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import React, { useContext } from 'react';
import clsx from 'clsx';
import E from "../Element.js";
import { setNextLevel, getHeadingSize } from "../../components/heading/HeadingHelpers.js";
import { useTheme } from "../../shared/index.js";
import Context from "../../shared/Context.js";
import { TypographyContext } from "./Typography.js";
import { jsx as _jsx } from "react/jsx-runtime";
const H = ({
  element = 'h1',
  is,
  level,
  size,
  proseMaxWidth: proseMaxWidthProp,
  className,
  ...props
}) => {
  const resolvedElement = element !== null && element !== void 0 ? element : is;
  const numSiz = parseFloat(String(resolvedElement).substring(1));
  if (level === 'use') {
    setNextLevel(numSiz);
  }
  const theme = useTheme();
  const targetSize = size === 'auto' && getHeadingSize(theme?.name)[numSiz] || size || 'xx-large';
  const context = useContext(Context);
  const {
    proseMaxWidth: proseMaxWidthContext
  } = useContext(TypographyContext);
  const proseMaxWidth = proseMaxWidthProp !== null && proseMaxWidthProp !== void 0 ? proseMaxWidthProp : proseMaxWidthContext;
  const style = proseMaxWidth ? {
    maxWidth: `${proseMaxWidth === true ? 60 : proseMaxWidth}ch`
  } : undefined;
  return _jsx(E, {
    as: resolvedElement,
    internalClass: clsx(className, targetSize && `dnb-h--${targetSize}`, context?.theme?.surface === 'dark' && 'dnb-t--surface-dark'),
    ...props,
    style: {
      ...style,
      ...props.style
    }
  });
};
withComponentMarkers(H, {
  _isHeadingElement: true,
  _supportsSpacingProps: true
});
export default H;
//# sourceMappingURL=H.js.map