@atlaskit/heading 0.1.17 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/heading
 
+## 1.0.0
+
+### Major Changes
+
+- [`7d92ed50264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d92ed50264) - [ux] This package is still considered to be in an experimental state and is discouraged for use in production. The major is to simplify consumption and versioning in product.
+
+  Other changes:
+
+  - Introduction of a `HeadingContext` provider to aid with creating the right semantic structure for headings.
+  - Migrated internals to use `@compiled/react` from `@emotion/react`.
+
+## 0.1.18
+
+### Patch Changes
+
+- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+
 ## 0.1.17
 
 ### Patch Changes

package/dist/cjs/heading-context.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHeadingElement = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var HeadingContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+var useHeadingElement = function useHeadingElement() {
+  return Math.min((0, _react.useContext)(HeadingContext) || 0, 6);
+};
+
+exports.useHeadingElement = useHeadingElement;
+
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+var HeadingContextProvider = function HeadingContextProvider(_ref) {
+  var children = _ref.children,
+      value = _ref.value;
+  var parentHeadingLevel = useHeadingElement();
+  var headingLevel = parentHeadingLevel + 1;
+  return /*#__PURE__*/_react.default.createElement(HeadingContext.Provider, {
+    value: value || headingLevel
+  }, children);
+};
+
+var _default = HeadingContextProvider;
+exports.default = _default;

package/dist/cjs/heading.js

@@ -1,3 +1,6 @@
+/* heading.tsx generated by @compiled/babel-plugin v0.15.0 */
+
+/** @jsx jsx */
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -5,13 +8,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("@emotion/react");
+var _runtime = require("@compiled/react/runtime");
 
-var _colors = require("@atlaskit/theme/colors");
+var _react = require("@compiled/react");
 
-var _utils = require("./utils");
+var _headingContext = require("./heading-context");
 
-/** @jsx jsx */
+var _28 = "._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}";
+var _27 = "._syaz15cr{color:var(--ds-text-inverse,#fff)}";
+var _26 = "._vwz41ylp{line-height:40px}";
+var _25 = "._1wybldb6{font-size:35px}";
+var _24 = "._vwz4zwfg{line-height:2pc}";
+var _23 = "._1wyb1pa9{font-size:29px}";
+var _22 = "._vwz41f4h{line-height:28px}";
+var _21 = "._1dyzz5jk{letter-spacing:-.01em}";
+var _20 = "._1wyb1tcg{font-size:24px}";
+var _19 = "._vwz41tcg{line-height:24px}";
+var _18 = "._1dyzvkfx{letter-spacing:-.008em}";
+var _17 = "._k48pbfng{font-weight:500}";
+var _16 = "._1wybgktf{font-size:20px}";
+var _15 = "._vwz4gktf{line-height:20px}";
+var _14 = "._1dyzqdok{letter-spacing:-.006em}";
+var _13 = "._1wyb7vkz{font-size:1pc}";
+var _12 = "._1dyz44hb{letter-spacing:-.003em}";
+var _11 = "._1wybdlk8{font-size:14px}";
+var _10 = "._1p1dangw{text-transform:uppercase}";
+var _9 = "._k48pni7l{font-weight:600}";
+var _8 = "._1wyb1crf{font-size:9pt}";
+var _7 = "._vwz47vkz{line-height:1pc}";
+var _6 = "._1dyzidpf{letter-spacing:0}";
+var _5 = "._k48p1fw0{font-weight:700}";
+var _4 = "._1wyb1skh{font-size:11px}";
+var _3 = "._syaz1fxt{color:var(--ds-text,#172b4d)}";
+var _2 = "._otyryy18{margin-bottom:var(--ds-scale-0,0)}";
+var _ = "._19pkyy18{margin-top:var(--ds-scale-0,0)}";
 // https://atlassian.design/foundations/typography
 var levelMap = {
   h900: 'h1',
@@ -25,86 +55,18 @@ var levelMap = {
   h200: 'div',
   h100: 'div'
 };
-var headingResetStyles = (0, _react.css)({
-  margin: 0
-});
-var h900Styles = (0, _react.css)({
-  fontSize: 35,
-  fontWeight: 500,
-  letterSpacing: '-0.01em',
-  lineHeight: (0, _utils.lh)(35, 40)
-});
-var h800Styles = (0, _react.css)({
-  fontSize: 29,
-  fontWeight: 600,
-  letterSpacing: '-0.01em',
-  lineHeight: (0, _utils.lh)(29, 32)
-});
-var h700Styles = (0, _react.css)({
-  fontSize: 24,
-  fontWeight: 500,
-  letterSpacing: '-0.01em',
-  lineHeight: (0, _utils.lh)(24, 28)
-});
-var h600Styles = (0, _react.css)({
-  fontSize: 20,
-  fontWeight: 500,
-  letterSpacing: '-0.008em',
-  lineHeight: (0, _utils.lh)(20, 24)
-});
-var h500Styles = (0, _react.css)({
-  fontSize: 16,
-  fontWeight: 600,
-  letterSpacing: '-0.006em',
-  lineHeight: (0, _utils.lh)(16, 20)
-});
-var h400Styles = (0, _react.css)({
-  fontSize: 14,
-  fontWeight: 600,
-  letterSpacing: '-0.003em',
-  lineHeight: (0, _utils.lh)(14, 16)
-});
-var h300Styles = (0, _react.css)({
-  fontSize: 12,
-  fontWeight: 600,
-  letterSpacing: 0,
-  lineHeight: (0, _utils.lh)(12, 16),
-  textTransform: 'uppercase'
-});
-var h200Styles = (0, _react.css)({
-  fontSize: 12,
-  fontWeight: 600,
-  letterSpacing: 0,
-  lineHeight: (0, _utils.lh)(12, 16)
-});
-var h100Styles = (0, _react.css)({
-  fontSize: 11,
-  fontWeight: 700,
-  letterSpacing: 0,
-  lineHeight: (0, _utils.lh)(11, 16)
-});
-var styleMap = {
-  h900: h900Styles,
-  h800: h800Styles,
-  h700: h700Styles,
-  h600: h600Styles,
-  h500: h500Styles,
-  h400: h400Styles,
-  h300: h300Styles,
-  h200: h200Styles,
-  h100: h100Styles
-};
-var colorStyleMap = {
-  default: (0, _react.css)({
-    color: "var(--ds-text, ".concat(_colors.N800, ")")
-  }),
-  inverse: (0, _react.css)({
-    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-  }),
-  subtlest: (0, _react.css)({
-    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-  })
-};
+var headingResetStyles = null;
+var h900Styles = null;
+var h800Styles = null;
+var h700Styles = null;
+var h600Styles = null;
+var h500Styles = null;
+var h400Styles = null;
+var h300Styles = null;
+var h200Styles = null;
+var h100Styles = null;
+var inverseStyles = null;
+var subtlestStyles = null;
 /**
  * __Heading__
  *
@@ -134,13 +96,23 @@ var Heading = function Heading(_ref) {
     throw new Error('`as` prop should be a string.');
   }
 
-  var Markup = as || levelMap[level];
+  var hLevel = (0, _headingContext.useHeadingElement)();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+
+  var Markup = as || hLevel && "h".concat(hLevel) || levelMap[level];
   var isSubtleHeading = level === 'h200' || level === 'h100';
-  return (0, _react.jsx)(Markup, {
+  return (0, _react.jsx)(_runtime.CC, null, (0, _react.jsx)(_runtime.CS, null, [_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28]), (0, _react.jsx)(Markup, {
     id: id,
-    "data-testid": testId,
-    css: [headingResetStyles, styleMap[level], color === 'inverse' && colorStyleMap.inverse, color === 'default' && isSubtleHeading && colorStyleMap.subtlest, color === 'default' && !isSubtleHeading && colorStyleMap.default]
-  }, children);
+    "data-testid": testId // @ts-ignore
+    // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
+    ,
+    className: (0, _runtime.ax)(["_19pkyy18 _otyryy18 _syaz1fxt", level === 'h100' && "_1wyb1skh _k48p1fw0 _1dyzidpf _vwz47vkz", level === 'h200' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz", level === 'h300' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz _1p1dangw", level === 'h400' && "_1wybdlk8 _k48pni7l _1dyz44hb _vwz47vkz", level === 'h500' && "_1wyb7vkz _k48pni7l _1dyzqdok _vwz4gktf", level === 'h600' && "_1wybgktf _k48pbfng _1dyzvkfx _vwz41tcg", level === 'h700' && "_1wyb1tcg _k48pbfng _1dyzz5jk _vwz41f4h", level === 'h800' && "_1wyb1pa9 _k48pni7l _1dyzz5jk _vwz4zwfg", level === 'h900' && "_1wybldb6 _k48pbfng _1dyzz5jk _vwz41ylp", color === 'inverse' && "_syaz15cr", color === 'default' && isSubtleHeading && "_syaz1wmz"])
+  }, children));
 };
 
 var _default = Heading;

package/dist/cjs/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "HeadingContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _headingContext.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -12,4 +18,6 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _heading = _interopRequireDefault(require("./heading"));
+var _heading = _interopRequireDefault(require("./heading"));
+
+var _headingContext = _interopRequireDefault(require("./heading-context"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "0.1.17",
+	"version": "1.0.0",
 	"sideEffects": false
 }

package/dist/es2019/heading-context.js

@@ -0,0 +1,34 @@
+import React, { createContext, useContext } from 'react';
+const HeadingContext = /*#__PURE__*/createContext(undefined);
+export const useHeadingElement = () => {
+  return Math.min(useContext(HeadingContext) || 0, 6);
+};
+
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+const HeadingContextProvider = ({
+  children,
+  value
+}) => {
+  const parentHeadingLevel = useHeadingElement();
+  const headingLevel = parentHeadingLevel + 1;
+  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
+    value: value || headingLevel
+  }, children);
+};
+
+export default HeadingContextProvider;

package/dist/es2019/heading.js

@@ -1,8 +1,39 @@
+/* heading.tsx generated by @compiled/babel-plugin v0.15.0 */
+
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { N0, N200, N800 } from '@atlaskit/theme/colors';
-import { lh } from './utils'; // https://atlassian.design/foundations/typography
 
+import { ax, ix, CC, CS } from "@compiled/react/runtime";
+import { jsx } from '@compiled/react';
+import { useHeadingElement } from './heading-context';
+const _28 = "._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}";
+const _27 = "._syaz15cr{color:var(--ds-text-inverse,#fff)}";
+const _26 = "._vwz41ylp{line-height:40px}";
+const _25 = "._1wybldb6{font-size:35px}";
+const _24 = "._vwz4zwfg{line-height:2pc}";
+const _23 = "._1wyb1pa9{font-size:29px}";
+const _22 = "._vwz41f4h{line-height:28px}";
+const _21 = "._1dyzz5jk{letter-spacing:-.01em}";
+const _20 = "._1wyb1tcg{font-size:24px}";
+const _19 = "._vwz41tcg{line-height:24px}";
+const _18 = "._1dyzvkfx{letter-spacing:-.008em}";
+const _17 = "._k48pbfng{font-weight:500}";
+const _16 = "._1wybgktf{font-size:20px}";
+const _15 = "._vwz4gktf{line-height:20px}";
+const _14 = "._1dyzqdok{letter-spacing:-.006em}";
+const _13 = "._1wyb7vkz{font-size:1pc}";
+const _12 = "._1dyz44hb{letter-spacing:-.003em}";
+const _11 = "._1wybdlk8{font-size:14px}";
+const _10 = "._1p1dangw{text-transform:uppercase}";
+const _9 = "._k48pni7l{font-weight:600}";
+const _8 = "._1wyb1crf{font-size:9pt}";
+const _7 = "._vwz47vkz{line-height:1pc}";
+const _6 = "._1dyzidpf{letter-spacing:0}";
+const _5 = "._k48p1fw0{font-weight:700}";
+const _4 = "._1wyb1skh{font-size:11px}";
+const _3 = "._syaz1fxt{color:var(--ds-text,#172b4d)}";
+const _2 = "._otyryy18{margin-bottom:var(--ds-scale-0,0)}";
+const _ = "._19pkyy18{margin-top:var(--ds-scale-0,0)}";
+// https://atlassian.design/foundations/typography
 const levelMap = {
   h900: 'h1',
   h800: 'h1',
@@ -15,86 +46,18 @@ const levelMap = {
   h200: 'div',
   h100: 'div'
 };
-const headingResetStyles = css({
-  margin: 0
-});
-const h900Styles = css({
-  fontSize: 35,
-  fontWeight: 500,
-  letterSpacing: '-0.01em',
-  lineHeight: lh(35, 40)
-});
-const h800Styles = css({
-  fontSize: 29,
-  fontWeight: 600,
-  letterSpacing: '-0.01em',
-  lineHeight: lh(29, 32)
-});
-const h700Styles = css({
-  fontSize: 24,
-  fontWeight: 500,
-  letterSpacing: '-0.01em',
-  lineHeight: lh(24, 28)
-});
-const h600Styles = css({
-  fontSize: 20,
-  fontWeight: 500,
-  letterSpacing: '-0.008em',
-  lineHeight: lh(20, 24)
-});
-const h500Styles = css({
-  fontSize: 16,
-  fontWeight: 600,
-  letterSpacing: '-0.006em',
-  lineHeight: lh(16, 20)
-});
-const h400Styles = css({
-  fontSize: 14,
-  fontWeight: 600,
-  letterSpacing: '-0.003em',
-  lineHeight: lh(14, 16)
-});
-const h300Styles = css({
-  fontSize: 12,
-  fontWeight: 600,
-  letterSpacing: 0,
-  lineHeight: lh(12, 16),
-  textTransform: 'uppercase'
-});
-const h200Styles = css({
-  fontSize: 12,
-  fontWeight: 600,
-  letterSpacing: 0,
-  lineHeight: lh(12, 16)
-});
-const h100Styles = css({
-  fontSize: 11,
-  fontWeight: 700,
-  letterSpacing: 0,
-  lineHeight: lh(11, 16)
-});
-const styleMap = {
-  h900: h900Styles,
-  h800: h800Styles,
-  h700: h700Styles,
-  h600: h600Styles,
-  h500: h500Styles,
-  h400: h400Styles,
-  h300: h300Styles,
-  h200: h200Styles,
-  h100: h100Styles
-};
-const colorStyleMap = {
-  default: css({
-    color: `var(--ds-text, ${N800})`
-  }),
-  inverse: css({
-    color: `var(--ds-text-inverse, ${N0})`
-  }),
-  subtlest: css({
-    color: `var(--ds-text-subtlest, ${N200})`
-  })
-};
+const headingResetStyles = null;
+const h900Styles = null;
+const h800Styles = null;
+const h700Styles = null;
+const h600Styles = null;
+const h500Styles = null;
+const h400Styles = null;
+const h300Styles = null;
+const h200Styles = null;
+const h100Styles = null;
+const inverseStyles = null;
+const subtlestStyles = null;
 /**
  * __Heading__
  *
@@ -123,13 +86,23 @@ const Heading = ({
     throw new Error('`as` prop should be a string.');
   }
 
-  const Markup = as || levelMap[level];
+  const hLevel = useHeadingElement();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+
+  const Markup = as || hLevel && `h${hLevel}` || levelMap[level];
   const isSubtleHeading = level === 'h200' || level === 'h100';
-  return jsx(Markup, {
+  return jsx(CC, null, jsx(CS, null, [_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28]), jsx(Markup, {
     id: id,
-    "data-testid": testId,
-    css: [headingResetStyles, styleMap[level], color === 'inverse' && colorStyleMap.inverse, color === 'default' && isSubtleHeading && colorStyleMap.subtlest, color === 'default' && !isSubtleHeading && colorStyleMap.default]
-  }, children);
+    "data-testid": testId // @ts-ignore
+    // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
+    ,
+    className: ax(["_19pkyy18 _otyryy18 _syaz1fxt", level === 'h100' && "_1wyb1skh _k48p1fw0 _1dyzidpf _vwz47vkz", level === 'h200' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz", level === 'h300' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz _1p1dangw", level === 'h400' && "_1wybdlk8 _k48pni7l _1dyz44hb _vwz47vkz", level === 'h500' && "_1wyb7vkz _k48pni7l _1dyzqdok _vwz4gktf", level === 'h600' && "_1wybgktf _k48pbfng _1dyzvkfx _vwz41tcg", level === 'h700' && "_1wyb1tcg _k48pbfng _1dyzz5jk _vwz41f4h", level === 'h800' && "_1wyb1pa9 _k48pni7l _1dyzz5jk _vwz4zwfg", level === 'h900' && "_1wybldb6 _k48pbfng _1dyzz5jk _vwz41ylp", color === 'inverse' && "_syaz15cr", color === 'default' && isSubtleHeading && "_syaz1wmz"])
+  }, children));
 };
 
 export default Heading;

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export { default } from './heading';
+export { default } from './heading';
+export { default as HeadingContextProvider } from './heading-context';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "0.1.17",
+	"version": "1.0.0",
 	"sideEffects": false
 }

package/dist/esm/heading-context.js

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+var HeadingContext = /*#__PURE__*/createContext(undefined);
+export var useHeadingElement = function useHeadingElement() {
+  return Math.min(useContext(HeadingContext) || 0, 6);
+};
+
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+var HeadingContextProvider = function HeadingContextProvider(_ref) {
+  var children = _ref.children,
+      value = _ref.value;
+  var parentHeadingLevel = useHeadingElement();
+  var headingLevel = parentHeadingLevel + 1;
+  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
+    value: value || headingLevel
+  }, children);
+};
+
+export default HeadingContextProvider;

package/dist/esm/heading.js

@@ -1,8 +1,39 @@
+/* heading.tsx generated by @compiled/babel-plugin v0.15.0 */
+
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { N0, N200, N800 } from '@atlaskit/theme/colors';
-import { lh } from './utils'; // https://atlassian.design/foundations/typography
 
+import { ax, ix, CC, CS } from "@compiled/react/runtime";
+import { jsx } from '@compiled/react';
+import { useHeadingElement } from './heading-context';
+var _28 = "._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}";
+var _27 = "._syaz15cr{color:var(--ds-text-inverse,#fff)}";
+var _26 = "._vwz41ylp{line-height:40px}";
+var _25 = "._1wybldb6{font-size:35px}";
+var _24 = "._vwz4zwfg{line-height:2pc}";
+var _23 = "._1wyb1pa9{font-size:29px}";
+var _22 = "._vwz41f4h{line-height:28px}";
+var _21 = "._1dyzz5jk{letter-spacing:-.01em}";
+var _20 = "._1wyb1tcg{font-size:24px}";
+var _19 = "._vwz41tcg{line-height:24px}";
+var _18 = "._1dyzvkfx{letter-spacing:-.008em}";
+var _17 = "._k48pbfng{font-weight:500}";
+var _16 = "._1wybgktf{font-size:20px}";
+var _15 = "._vwz4gktf{line-height:20px}";
+var _14 = "._1dyzqdok{letter-spacing:-.006em}";
+var _13 = "._1wyb7vkz{font-size:1pc}";
+var _12 = "._1dyz44hb{letter-spacing:-.003em}";
+var _11 = "._1wybdlk8{font-size:14px}";
+var _10 = "._1p1dangw{text-transform:uppercase}";
+var _9 = "._k48pni7l{font-weight:600}";
+var _8 = "._1wyb1crf{font-size:9pt}";
+var _7 = "._vwz47vkz{line-height:1pc}";
+var _6 = "._1dyzidpf{letter-spacing:0}";
+var _5 = "._k48p1fw0{font-weight:700}";
+var _4 = "._1wyb1skh{font-size:11px}";
+var _3 = "._syaz1fxt{color:var(--ds-text,#172b4d)}";
+var _2 = "._otyryy18{margin-bottom:var(--ds-scale-0,0)}";
+var _ = "._19pkyy18{margin-top:var(--ds-scale-0,0)}";
+// https://atlassian.design/foundations/typography
 var levelMap = {
   h900: 'h1',
   h800: 'h1',
@@ -15,86 +46,18 @@ var levelMap = {
   h200: 'div',
   h100: 'div'
 };
-var headingResetStyles = css({
-  margin: 0
-});
-var h900Styles = css({
-  fontSize: 35,
-  fontWeight: 500,
-  letterSpacing: '-0.01em',
-  lineHeight: lh(35, 40)
-});
-var h800Styles = css({
-  fontSize: 29,
-  fontWeight: 600,
-  letterSpacing: '-0.01em',
-  lineHeight: lh(29, 32)
-});
-var h700Styles = css({
-  fontSize: 24,
-  fontWeight: 500,
-  letterSpacing: '-0.01em',
-  lineHeight: lh(24, 28)
-});
-var h600Styles = css({
-  fontSize: 20,
-  fontWeight: 500,
-  letterSpacing: '-0.008em',
-  lineHeight: lh(20, 24)
-});
-var h500Styles = css({
-  fontSize: 16,
-  fontWeight: 600,
-  letterSpacing: '-0.006em',
-  lineHeight: lh(16, 20)
-});
-var h400Styles = css({
-  fontSize: 14,
-  fontWeight: 600,
-  letterSpacing: '-0.003em',
-  lineHeight: lh(14, 16)
-});
-var h300Styles = css({
-  fontSize: 12,
-  fontWeight: 600,
-  letterSpacing: 0,
-  lineHeight: lh(12, 16),
-  textTransform: 'uppercase'
-});
-var h200Styles = css({
-  fontSize: 12,
-  fontWeight: 600,
-  letterSpacing: 0,
-  lineHeight: lh(12, 16)
-});
-var h100Styles = css({
-  fontSize: 11,
-  fontWeight: 700,
-  letterSpacing: 0,
-  lineHeight: lh(11, 16)
-});
-var styleMap = {
-  h900: h900Styles,
-  h800: h800Styles,
-  h700: h700Styles,
-  h600: h600Styles,
-  h500: h500Styles,
-  h400: h400Styles,
-  h300: h300Styles,
-  h200: h200Styles,
-  h100: h100Styles
-};
-var colorStyleMap = {
-  default: css({
-    color: "var(--ds-text, ".concat(N800, ")")
-  }),
-  inverse: css({
-    color: "var(--ds-text-inverse, ".concat(N0, ")")
-  }),
-  subtlest: css({
-    color: "var(--ds-text-subtlest, ".concat(N200, ")")
-  })
-};
+var headingResetStyles = null;
+var h900Styles = null;
+var h800Styles = null;
+var h700Styles = null;
+var h600Styles = null;
+var h500Styles = null;
+var h400Styles = null;
+var h300Styles = null;
+var h200Styles = null;
+var h100Styles = null;
+var inverseStyles = null;
+var subtlestStyles = null;
 /**
  * __Heading__
  *
@@ -124,13 +87,23 @@ var Heading = function Heading(_ref) {
     throw new Error('`as` prop should be a string.');
   }
 
-  var Markup = as || levelMap[level];
+  var hLevel = useHeadingElement();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+
+  var Markup = as || hLevel && "h".concat(hLevel) || levelMap[level];
   var isSubtleHeading = level === 'h200' || level === 'h100';
-  return jsx(Markup, {
+  return jsx(CC, null, jsx(CS, null, [_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28]), jsx(Markup, {
     id: id,
-    "data-testid": testId,
-    css: [headingResetStyles, styleMap[level], color === 'inverse' && colorStyleMap.inverse, color === 'default' && isSubtleHeading && colorStyleMap.subtlest, color === 'default' && !isSubtleHeading && colorStyleMap.default]
-  }, children);
+    "data-testid": testId // @ts-ignore
+    // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
+    ,
+    className: ax(["_19pkyy18 _otyryy18 _syaz1fxt", level === 'h100' && "_1wyb1skh _k48p1fw0 _1dyzidpf _vwz47vkz", level === 'h200' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz", level === 'h300' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz _1p1dangw", level === 'h400' && "_1wybdlk8 _k48pni7l _1dyz44hb _vwz47vkz", level === 'h500' && "_1wyb7vkz _k48pni7l _1dyzqdok _vwz4gktf", level === 'h600' && "_1wybgktf _k48pbfng _1dyzvkfx _vwz41tcg", level === 'h700' && "_1wyb1tcg _k48pbfng _1dyzz5jk _vwz41f4h", level === 'h800' && "_1wyb1pa9 _k48pni7l _1dyzz5jk _vwz4zwfg", level === 'h900' && "_1wybldb6 _k48pbfng _1dyzz5jk _vwz41ylp", color === 'inverse' && "_syaz15cr", color === 'default' && isSubtleHeading && "_syaz1wmz"])
+  }, children));
 };
 
 export default Heading;

package/dist/esm/index.js

@@ -1 +1,2 @@
-export { default } from './heading';
+export { default } from './heading';
+export { default as HeadingContextProvider } from './heading-context';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "0.1.17",
+	"version": "1.0.0",
 	"sideEffects": false
 }

package/dist/types/heading-context.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+declare type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
+export declare const useHeadingElement: () => HeadingElement;
+export interface HeadingContextProps {
+    /**
+     * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
+     */
+    value?: HeadingElement;
+}
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+declare const HeadingContextProvider: FC<HeadingContextProps>;
+export default HeadingContextProvider;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './heading';
+export { default as HeadingContextProvider } from './heading-context';
 export type { HeadingProps } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "0.1.17",
+  "version": "1.0.0",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,6 +8,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "continuous",
     "website": {
@@ -20,30 +21,23 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
+    "@compiled/react": "^0.11.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-explorations": "*",
     "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -63,11 +57,11 @@
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
-        "static",
-        "emotion"
+        "static"
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.3 -->
+
 ## API Report File for "@atlaskit/heading"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { FC } from 'react';
@@ -16,24 +21,37 @@ import { ReactNode } from 'react';
 const Heading: FC<HeadingProps>;
 export default Heading;
 
+// @public (undocumented)
+interface HeadingContextProps {
+  value?: HeadingElement;
+}
+
+// @public
+export const HeadingContextProvider: FC<HeadingContextProps>;
+
+// @public (undocumented)
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
+
 // @public (undocumented)
 export type HeadingProps = {
   testId?: string;
   children: ReactNode;
   level:
-    | 'h900'
-    | 'h800'
-    | 'h700'
-    | 'h600'
-    | 'h500'
-    | 'h400'
-    | 'h300'
+    | 'h100'
     | 'h200'
-    | 'h100';
+    | 'h300'
+    | 'h400'
+    | 'h500'
+    | 'h600'
+    | 'h700'
+    | 'h800'
+    | 'h900';
   id?: string;
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
-  color?: 'inverse' | 'default';
+  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+  color?: 'default' | 'inverse';
 };
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,37 @@
+## API Report File for "@atlaskit/heading"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+// @public
+const Heading: FC<HeadingProps>;
+export default Heading;
+
+// @public (undocumented)
+interface HeadingContextProps {
+    value?: HeadingElement;
+}
+
+// @public
+export const HeadingContextProvider: FC<HeadingContextProps>;
+
+// @public (undocumented)
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
+
+// @public (undocumented)
+export type HeadingProps = {
+    testId?: string;
+    children: ReactNode;
+    level: 'h100' | 'h200' | 'h300' | 'h400' | 'h500' | 'h600' | 'h700' | 'h800' | 'h900';
+    id?: string;
+    as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+    color?: 'default' | 'inverse';
+};
+
+// (No @packageDocumentation comment for this package)
+
+```

package/dist/types-ts4.0/heading.d.ts

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import type { HeadingProps } from './types';
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-declare const Heading: FC<HeadingProps>;
-export default Heading;

package/dist/types-ts4.0/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './heading';
-export type { HeadingProps } from './types';

package/dist/types-ts4.0/types.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-export declare type HeadingProps = {
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
-     */
-    testId?: string;
-    /**
-     * The text of the heading
-     */
-    children: ReactNode;
-    /**
-     * The headling level as defined by by the ADG
-     */
-    level: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
-    id?: string;
-    /**
-     * Allows the component to be rendered as the specified DOM Element
-     */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
-    /**
-     * Text color of the heading.
-     */
-    color?: 'inverse' | 'default';
-};

package/dist/types-ts4.0/utils.d.ts

@@ -1 +0,0 @@
-export declare const lh: (sizePx: number, lineHeightPx: number) => number;