@spark-web/heading/dist/spark-web-heading.esm.js

--- title: Heading storybookPath: typography-heading--default isExperimentalPackage: false ---

import { createContext, useContext } from 'react';
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import { css } from '@emotion/react';
import { Box } from '@spark-web/box';
import { useForegroundTone, createTextStyles, useOverflowStrategy, useNumberOfLines } from '@spark-web/text';
import { forwardRefWithAs } from '@spark-web/utils/ts';
import { useTheme } from '@spark-web/theme';
import { jsx } from '@emotion/react/jsx-runtime';

var HeadingContext = /*#__PURE__*/createContext(false);
function useHeadingContext() {
  return useContext(HeadingContext);
}

function useHeading(_ref) {
  var align = _ref.align,
    level = _ref.level,
    _ref$tone = _ref.tone,
    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
  var theme = useTheme();
  var color = useForegroundTone(tone);
  var _theme$typography$hea = theme.typography.heading.level[level],
    mobile = _theme$typography$hea.mobile,
    tablet = _theme$typography$hea.tablet;
  var responsiveStyles = theme.utils.responsiveStyles({
    mobile: createTextStyles(mobile),
    tablet: createTextStyles(tablet)
  });
  return [{
    color: color,
    fontFamily: theme.typography.fontFamily.display.name,
    textAlign: align
  }, responsiveStyles];
}

var _excluded = ["align", "as", "children", "data", "id", "level", "tone", "truncate", "numberOfLines"];
var Heading = forwardRefWithAs(function Heading(_ref, forwardedRef) {
  var align = _ref.align,
    as = _ref.as,
    children = _ref.children,
    data = _ref.data,
    id = _ref.id,
    level = _ref.level,
    tone = _ref.tone,
    truncate = _ref.truncate,
    numberOfLines = _ref.numberOfLines,
    consumerProps = _objectWithoutProperties(_ref, _excluded);
  var overflowStyles = useOverflowStrategy(truncate ? 'truncate' : undefined);
  var headingStyles = useHeading({
    align: align,
    level: level,
    tone: tone
  });
  var numberOfLinesStyle = useNumberOfLines(numberOfLines);
  var content = function content() {
    if (overflowStyles) {
      return jsx("span", {
        id: id,
        css: css(overflowStyles),
        children: children
      });
    }
    if (numberOfLines) {
      return jsx("span", {
        style: numberOfLinesStyle,
        children: children
      });
    }
    return children;
  };
  return jsx(HeadingContext.Provider, {
    value: true,
    children: jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
      as: as !== null && as !== void 0 ? as : levelToDefaultElement[level],
      data: data,
      ref: forwardedRef,
      id: id,
      css: css(headingStyles),
      children: content()
    }))
  });
});
var levelToDefaultElement = {
  '1': 'h1',
  '2': 'h2',
  '3': 'h3',
  '4': 'h4'
};

export { Heading, useHeading, useHeadingContext };