@atlaskit/heading 2.4.6 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/heading
 
+## 3.0.0
+
+### Major Changes
+
+- [#165728](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165728)
+  [`061d0c77948b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/061d0c77948b7) -
+  **Breaking change:** The deprecated `level` prop has been removed. Use the `size` prop instead.
+  See https://atlassian.design/components/heading/migration-to-size-prop for migration details.
+
+### Patch Changes
+
+- [#166026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166026)
+  [`962b5e77810fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/962b5e77810fb) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
+## 2.4.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.4.6
 
 ### Patch Changes

package/dist/cjs/heading.partial.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.headingColorStylesMap = exports.default = void 0;
+exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
@@ -81,9 +81,7 @@ var Heading = function Heading(_ref) {
     css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var headingColorStylesMap = exports.headingColorStylesMap = {
+var headingColorStylesMap = {
   'color.text': (0, _react.css)({
     color: "var(--ds-text, #172B4D)"
   }),

package/dist/cjs/index.js

@@ -16,5 +16,5 @@ Object.defineProperty(exports, "default", {
     return _heading.default;
   }
 });
-var _heading = _interopRequireDefault(require("./heading"));
+var _heading = _interopRequireDefault(require("./heading.partial"));
 var _headingContext = _interopRequireDefault(require("./heading-context"));

package/dist/es2019/heading.partial.js

@@ -70,9 +70,7 @@ const Heading = ({
     css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export const headingColorStylesMap = {
+const headingColorStylesMap = {
   'color.text': css({
     color: "var(--ds-text, #172B4D)"
   }),

package/dist/es2019/index.js

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

package/dist/esm/heading.partial.js

@@ -73,9 +73,7 @@ var Heading = function Heading(_ref) {
     css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export var headingColorStylesMap = {
+var headingColorStylesMap = {
   'color.text': css({
     color: "var(--ds-text, #172B4D)"
   }),

package/dist/esm/index.js

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

package/dist/types/heading.partial.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { jsx, type SerializedStyles } from '@emotion/react';
-import type { HeadingColor, NewHeadingProps } from './types';
+import type { NewHeadingProps } from './types';
 /**
  * __Heading__
  *
@@ -16,7 +16,6 @@ import type { HeadingColor, NewHeadingProps } from './types';
  * ```
  */
 declare const Heading: ({ children, size, id, testId, as, color: colorProp }: NewHeadingProps) => jsx.JSX.Element;
-export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>

package/dist/types/index.d.ts

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

package/dist/types-ts4.5/heading.partial.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { jsx, type SerializedStyles } from '@emotion/react';
-import type { HeadingColor, NewHeadingProps } from './types';
+import type { NewHeadingProps } from './types';
 /**
  * __Heading__
  *
@@ -16,7 +16,6 @@ import type { HeadingColor, NewHeadingProps } from './types';
  * ```
  */
 declare const Heading: ({ children, size, id, testId, as, color: colorProp }: NewHeadingProps) => jsx.JSX.Element;
-export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "2.4.6",
+	"version": "3.0.0",
 	"description": "A heading is a typography component used to display text in different sizes and formats.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,7 +12,9 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
@@ -29,8 +31,8 @@
 		"codegen": "ts-node ./scripts/codegen.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/primitives": "^12.2.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -40,7 +42,8 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/formatting": "*",
-		"@atlaskit/ds-lib": "^2.6.0",
+		"@af/integration-testing": "*",
+		"@atlaskit/ds-lib": "^3.2.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",

package/dist/cjs/heading.js

@@ -1,172 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _headingContext = require("./heading-context");
-var _heading = _interopRequireDefault(require("./heading.partial"));
-var _excluded = ["level"];
-/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// https://atlassian.design/foundations/typography
-var levelMap = {
-  h900: 'h1',
-  h800: 'h1',
-  h700: 'h2',
-  h600: 'h3',
-  h500: 'h4',
-  h400: 'h5',
-  h300: 'h6',
-  // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
-  h200: 'div',
-  h100: 'div'
-};
-var headingResetStyles = (0, _react.css)({
-  color: "var(--ds-text, #172B4D)",
-  marginBlock: "var(--ds-space-0, 0px)"
-});
-var h900Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-600, 35px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-600, 40px)"
-});
-var h800Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-500, 29px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-500, 32px)"
-});
-var h700Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-400, 24px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-400, 28px)"
-});
-var h600Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-300, 20px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.008em',
-  lineHeight: "var(--ds-font-lineHeight-300, 24px)"
-});
-var h500Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-200, 16px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.006em',
-  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
-});
-var h400Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-100, 14px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.003em',
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-var h300Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-075, 12px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
-  textTransform: 'uppercase'
-});
-var h200Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-075, 12px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-var h100Styles = (0, _react.css)({
-  fontSize: "var(--ds-font-size-050, 11px)",
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-var inverseStyles = (0, _react.css)({
-  color: "var(--ds-text-inverse, #FFF)"
-});
-var subtlestStyles = (0, _react.css)({
-  color: "var(--ds-text-subtlest, #6B778C)"
-});
-
-/**
- * __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>
- * );
- * ```
- */
-var OldHeading = function OldHeading(_ref) {
-  var children = _ref.children,
-    level = _ref.level,
-    id = _ref.id,
-    testId = _ref.testId,
-    as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
-    throw new Error('`as` prop should be a string.');
-  }
-  var _useHeading = (0, _headingContext.useHeading)(levelMap[level]),
-    _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
-    hLevel = _useHeading2[0],
-    inferredElement = _useHeading2[1];
-  var Markup = as || inferredElement;
-  var isSubtleHeading = level === 'h200' || level === 'h100';
-  var needsAriaRole = Markup === 'div' && hLevel;
-  return (0, _react.jsx)(Markup, {
-    id: id,
-    "data-testid": testId,
-    role: needsAriaRole ? 'heading' : undefined,
-    "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
-  }, children);
-};
-
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * // New component
- * <Heading size="xxlarge">Page title</Heading>
- *
- * // Old component
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-var Heading = function Heading(_ref2) {
-  var level = _ref2.level,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return level ?
-  // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  (0, _react.jsx)(OldHeading, (0, _extends2.default)({
-    level: level
-  }, props)) :
-  // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  (0, _react.jsx)(_heading.default, props);
-};
-var _default = exports.default = Heading;

package/dist/es2019/heading.js

@@ -1,160 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { useHeading } from './heading-context';
-import NewHeading from './heading.partial';
-// https://atlassian.design/foundations/typography
-const levelMap = {
-  h900: 'h1',
-  h800: 'h1',
-  h700: 'h2',
-  h600: 'h3',
-  h500: 'h4',
-  h400: 'h5',
-  h300: 'h6',
-  // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
-  h200: 'div',
-  h100: 'div'
-};
-const headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
-  marginBlock: "var(--ds-space-0, 0px)"
-});
-const h900Styles = css({
-  fontSize: "var(--ds-font-size-600, 35px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-600, 40px)"
-});
-const h800Styles = css({
-  fontSize: "var(--ds-font-size-500, 29px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-500, 32px)"
-});
-const h700Styles = css({
-  fontSize: "var(--ds-font-size-400, 24px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-400, 28px)"
-});
-const h600Styles = css({
-  fontSize: "var(--ds-font-size-300, 20px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.008em',
-  lineHeight: "var(--ds-font-lineHeight-300, 24px)"
-});
-const h500Styles = css({
-  fontSize: "var(--ds-font-size-200, 16px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.006em',
-  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
-});
-const h400Styles = css({
-  fontSize: "var(--ds-font-size-100, 14px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.003em',
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-const h300Styles = css({
-  fontSize: "var(--ds-font-size-075, 12px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
-  textTransform: 'uppercase'
-});
-const h200Styles = css({
-  fontSize: "var(--ds-font-size-075, 12px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-const h100Styles = css({
-  fontSize: "var(--ds-font-size-050, 11px)",
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-const inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
-const subtlestStyles = css({
-  color: "var(--ds-text-subtlest, #6B778C)"
-});
-
-/**
- * __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>
- * );
- * ```
- */
-const OldHeading = ({
-  children,
-  level,
-  id,
-  testId,
-  as,
-  color = 'default'
-}) => {
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
-    throw new Error('`as` prop should be a string.');
-  }
-  const [hLevel, inferredElement] = useHeading(levelMap[level]);
-  const Markup = as || inferredElement;
-  const isSubtleHeading = level === 'h200' || level === 'h100';
-  const needsAriaRole = Markup === 'div' && hLevel;
-  return jsx(Markup, {
-    id: id,
-    "data-testid": testId,
-    role: needsAriaRole ? 'heading' : undefined,
-    "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
-  }, children);
-};
-
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * // New component
- * <Heading size="xxlarge">Page title</Heading>
- *
- * // Old component
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-const Heading = ({
-  level,
-  ...props
-}) => {
-  return level ?
-  // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(OldHeading, _extends({
-    level: level
-  }, props)) :
-  // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(NewHeading, props);
-};
-export default Heading;

package/dist/esm/heading.js

@@ -1,165 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["level"];
-/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { useHeading } from './heading-context';
-import NewHeading from './heading.partial';
-// https://atlassian.design/foundations/typography
-var levelMap = {
-  h900: 'h1',
-  h800: 'h1',
-  h700: 'h2',
-  h600: 'h3',
-  h500: 'h4',
-  h400: 'h5',
-  h300: 'h6',
-  // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
-  h200: 'div',
-  h100: 'div'
-};
-var headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
-  marginBlock: "var(--ds-space-0, 0px)"
-});
-var h900Styles = css({
-  fontSize: "var(--ds-font-size-600, 35px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-600, 40px)"
-});
-var h800Styles = css({
-  fontSize: "var(--ds-font-size-500, 29px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-500, 32px)"
-});
-var h700Styles = css({
-  fontSize: "var(--ds-font-size-400, 24px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.01em',
-  lineHeight: "var(--ds-font-lineHeight-400, 28px)"
-});
-var h600Styles = css({
-  fontSize: "var(--ds-font-size-300, 20px)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: '-0.008em',
-  lineHeight: "var(--ds-font-lineHeight-300, 24px)"
-});
-var h500Styles = css({
-  fontSize: "var(--ds-font-size-200, 16px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.006em',
-  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
-});
-var h400Styles = css({
-  fontSize: "var(--ds-font-size-100, 14px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: '-0.003em',
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-var h300Styles = css({
-  fontSize: "var(--ds-font-size-075, 12px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
-  textTransform: 'uppercase'
-});
-var h200Styles = css({
-  fontSize: "var(--ds-font-size-075, 12px)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-var h100Styles = css({
-  fontSize: "var(--ds-font-size-050, 11px)",
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  letterSpacing: 0,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-});
-var inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
-var subtlestStyles = css({
-  color: "var(--ds-text-subtlest, #6B778C)"
-});
-
-/**
- * __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>
- * );
- * ```
- */
-var OldHeading = function OldHeading(_ref) {
-  var children = _ref.children,
-    level = _ref.level,
-    id = _ref.id,
-    testId = _ref.testId,
-    as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
-    throw new Error('`as` prop should be a string.');
-  }
-  var _useHeading = useHeading(levelMap[level]),
-    _useHeading2 = _slicedToArray(_useHeading, 2),
-    hLevel = _useHeading2[0],
-    inferredElement = _useHeading2[1];
-  var Markup = as || inferredElement;
-  var isSubtleHeading = level === 'h200' || level === 'h100';
-  var needsAriaRole = Markup === 'div' && hLevel;
-  return jsx(Markup, {
-    id: id,
-    "data-testid": testId,
-    role: needsAriaRole ? 'heading' : undefined,
-    "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
-  }, children);
-};
-
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * // New component
- * <Heading size="xxlarge">Page title</Heading>
- *
- * // Old component
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-var Heading = function Heading(_ref2) {
-  var level = _ref2.level,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  return level ?
-  // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(OldHeading, _extends({
-    level: level
-  }, props)) :
-  // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(NewHeading, props);
-};
-export default Heading;

package/dist/types/heading.d.ts

@@ -1,27 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/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';
- *
- * // New component
- * <Heading size="xxlarge">Page title</Heading>
- *
- * // Old component
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
-export default Heading;

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

@@ -1,27 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/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';
- *
- * // New component
- * <Heading size="xxlarge">Page title</Heading>
- *
- * // Old component
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
-export default Heading;