fannypack-v5/es/Heading/styles-ee8bd5ac.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import { css } from 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { font, fontWeight, space, fontSize, theme } from '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-weight: ", ";\n  line-height: 1.2;\n\n  &:not(:last-child) {\n    margin-bottom: ", "rem;\n  }\n\n  .heading& + .sub-heading {\n    margin-top: -0.5em;\n  }\n\n  h1& {\n    font-size: ", "rem;\n    & {\n      ", ";\n    }\n  }\n  h2& {\n    font-size: ", "rem;\n    & {\n      ", ";\n    }\n  }\n  h3& {\n    font-size: ", "rem;\n    & {\n      ", ";\n    }\n  }\n  h4& {\n    font-size: ", "rem;\n    & {\n      ", ";\n    }\n  }\n  h5& {\n    font-size: ", "rem;\n    & {\n      ", ";\n    }\n  }\n  h6& {\n    font-size: ", "rem;\n    & {\n      ", ";\n    }\n  }\n\n  & {\n    ", ";\n  }\n\n  & .fp-Icon {\n    vertical-align: -0.125em;\n  }\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var Heading = function Heading(styleProps) {
  return css(_templateObject(), font('heading')(styleProps), fontWeight('bold')(styleProps), space(4)(styleProps), fontSize('700')(styleProps), theme(styleProps.themeKey, "h1.css.root")(styleProps), fontSize('600')(styleProps), theme(styleProps.themeKey, "h2.css.root")(styleProps), fontSize('500')(styleProps), theme(styleProps.themeKey, "h3.css.root")(styleProps), fontSize('400')(styleProps), theme(styleProps.themeKey, "h4.css.root")(styleProps), fontSize('300')(styleProps), theme(styleProps.themeKey, "h5.css.root")(styleProps), fontSize('200')(styleProps), theme(styleProps.themeKey, "h6.css.root")(styleProps), styleProps.isSubHeading && getSubHeadingProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var getSubHeadingProperties = function getSubHeadingProperties(styleProps) {
  return css(_templateObject2(), fontWeight('semibold')(styleProps), theme(styleProps.themeKey, "subHeading.css.root")(styleProps));
};

var styles = /*#__PURE__*/Object.freeze({
  Heading: Heading,
  getSubHeadingProperties: getSubHeadingProperties
});

export { Heading as H, getSubHeadingProperties as g, styles as s };