@spark-web/heading/dist/spark-web-heading.cjs.prod.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('react');
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var css = require('@emotion/css');
var box = require('@spark-web/box');
var text = require('@spark-web/text');
var ts = require('@spark-web/utils/ts');
var theme = require('@spark-web/theme');
var jsxRuntime = require('react/jsx-runtime');

var HeadingContext = /*#__PURE__*/react.createContext(false);
function useHeadingContext() {
  return react.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$1 = theme.useTheme();
  var color = text.useForegroundTone(tone);
  var _theme$typography$hea = theme$1.typography.heading.level[level],
      mobile = _theme$typography$hea.mobile,
      tablet = _theme$typography$hea.tablet;
  var responsiveStyles = theme$1.utils.responsiveStyles({
    mobile: text.createTextStyles(mobile),
    tablet: text.createTextStyles(tablet)
  });
  return [{
    color: color,
    fontFamily: theme$1.typography.fontFamily.display.name,
    fontWeight: theme$1.typography.fontWeight.semibold,
    textAlign: align
  }, responsiveStyles];
}

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

exports.Heading = Heading;
exports.useHeading = useHeading;
exports.useHeadingContext = useHeadingContext;