@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/css';
import { Box } from '@spark-web/box';
import { useForegroundTone, createTextStyles, useOverflowStrategy } from '@spark-web/text';
import { forwardRefWithAs } from '@spark-web/utils/ts';
import { useTheme } from '@spark-web/theme';
import { jsx } from '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,
    fontWeight: theme.typography.fontWeight.semibold,
    textAlign: align
  }, responsiveStyles];
}

var _excluded = ["align", "as", "children", "data", "id", "level", "tone", "truncate"];
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,
      consumerProps = _objectWithoutProperties(_ref, _excluded);

  var overflowStyles = useOverflowStrategy(truncate ? 'truncate' : undefined);
  var headingStyles = useHeading({
    align: align,
    level: level,
    tone: tone
  });
  var content = overflowStyles ? /*#__PURE__*/jsx("span", {
    id: id,
    className: css(overflowStyles),
    children: children
  }) : children;
  return /*#__PURE__*/jsx(HeadingContext.Provider, {
    value: true,
    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
      as: as !== null && as !== void 0 ? as : levelToDefaultElement[level],
      data: data,
      ref: forwardedRef,
      id: id,
      className: css(headingStyles),
      children: content
    }))
  });
});
var levelToDefaultElement = {
  '1': 'h1',
  '2': 'h2',
  '3': 'h3',
  '4': 'h4'
};

export { Heading, useHeading, useHeadingContext };