@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 react$1 = require('@emotion/react');
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('@emotion/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,
    textAlign: align
  }, responsiveStyles];
}

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

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