@atlaskit/heading 2.3.1 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/heading
 
+## 2.4.0
+
+### Minor Changes
+
+- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
+  [`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.3.2
+
+### Patch Changes
+
+- [#110191](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110191)
+  [`c3dc02298f8aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3dc02298f8aa) -
+  [ux] Change heading xsmall lineheight from 16 to 20 for minor third theme.
+- Updated dependencies
+
 ## 2.3.1
 
 ### Patch Changes
@@ -20,7 +42,7 @@
 
 - [#91625](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91625)
   [`d7770083ff25`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7770083ff25) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 2.1.2
 

package/LICENSE.md

@@ -1,13 +1,11 @@
 Copyright 2020 Atlassian Pty Ltd
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/codemods/1.6.0-level-to-size.tsx

@@ -1,81 +1,66 @@
 import type {
-  API,
-  ASTPath,
-  default as core,
-  FileInfo,
-  ImportDeclaration,
-  Options,
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	Options,
 } from 'jscodeshift';
 
-export default function transformer(
-  fileInfo: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  const base = j(fileInfo.source);
-  const headingSpecifier = getDefaultSpecifier(j, base, '@atlaskit/heading');
-  if (!headingSpecifier) {
-    return;
-  }
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const base = j(fileInfo.source);
+	const headingSpecifier = getDefaultSpecifier(j, base, '@atlaskit/heading');
+	if (!headingSpecifier) {
+		return;
+	}
 
-  replaceLevelWithSize(j, base, headingSpecifier);
+	replaceLevelWithSize(j, base, headingSpecifier);
 
-  return base.toSource();
+	return base.toSource();
 }
 
 const levelToSizeMap = {
-  h900: 'xxlarge',
-  h800: 'xlarge',
-  h700: 'large',
-  h600: 'medium',
-  h500: 'small',
-  h400: 'xsmall',
-  h300: 'xxsmall',
-  // We may want to auto-transform h100s and h200s in the future
-  // h200: 'xxsmall',
-  // h100: 'xxsmall',
+	h900: 'xxlarge',
+	h800: 'xlarge',
+	h700: 'large',
+	h600: 'medium',
+	h500: 'small',
+	h400: 'xsmall',
+	h300: 'xxsmall',
+	// We may want to auto-transform h100s and h200s in the future
+	// h200: 'xxsmall',
+	// h100: 'xxsmall',
 };
 
 function replaceLevelWithSize(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  specifier: string,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
 ) {
-  source.findJSXElements(specifier).forEach(element => {
-    j(element)
-      .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'level' } })
-      .forEach(attr => {
-        const attrValue = j(attr).nodes()[0].value;
-        if (attrValue.type === 'StringLiteral') {
-          const replacementValue =
-            levelToSizeMap[attrValue.value as keyof typeof levelToSizeMap];
-          if (replacementValue) {
-            j(attr).replaceWith(
-              j.jsxAttribute(
-                j.jsxIdentifier('size'),
-                j.stringLiteral(replacementValue),
-              ),
-            );
-          }
-        }
-      });
-  });
+	source.findJSXElements(specifier).forEach((element) => {
+		j(element)
+			.find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'level' } })
+			.forEach((attr) => {
+				const attrValue = j(attr).nodes()[0].value;
+				if (attrValue.type === 'StringLiteral') {
+					const replacementValue = levelToSizeMap[attrValue.value as keyof typeof levelToSizeMap];
+					if (replacementValue) {
+						j(attr).replaceWith(
+							j.jsxAttribute(j.jsxIdentifier('size'), j.stringLiteral(replacementValue)),
+						);
+					}
+				}
+			});
+	});
 }
 
-function getDefaultSpecifier(
-  j: core.JSCodeshift,
-  source: any,
-  specifier: string,
-) {
-  const specifiers = source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === specifier,
-    )
-    .find(j.ImportDefaultSpecifier);
-  if (!specifiers.length) {
-    return null;
-  }
-  return specifiers.nodes()[0]!.local!.name;
+function getDefaultSpecifier(j: core.JSCodeshift, source: any, specifier: string) {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportDefaultSpecifier);
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
 }

package/dist/cjs/heading.js

@@ -13,7 +13,11 @@ 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',

package/dist/cjs/heading.partial.js

@@ -9,7 +9,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _headingContext = require("./heading-context");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var sizeTagMap = {
   xxlarge: 'h1',
@@ -93,7 +97,7 @@ var headingColorStylesMap = exports.headingColorStylesMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/es2019/heading.js

@@ -1,6 +1,10 @@
 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';

package/dist/es2019/heading.partial.js

@@ -1,4 +1,8 @@
+/**
+ * @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 { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
 import { useHeading } from './heading-context';
@@ -82,7 +86,7 @@ export const headingColorStylesMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/esm/heading.js

@@ -3,7 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 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';

package/dist/esm/heading.partial.js

@@ -1,5 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @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 { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
 import { useHeading } from './heading-context';
@@ -85,7 +89,7 @@ export var headingColorStylesMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

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

@@ -36,5 +36,5 @@ export interface HeadingLevelContextProps {
  * </HeadingContext>
  * ```
  */
-declare const HeadingLevelContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
+declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => JSX.Element;
 export default HeadingLevelContextProvider;

package/dist/types/heading.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { HeadingProps } from './types';

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

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx, type SerializedStyles } from '@emotion/react';
 import type { HeadingColor, NewHeadingProps } from './types';
@@ -12,11 +15,11 @@ import type { HeadingColor, NewHeadingProps } from './types';
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color: colorProp, }: NewHeadingProps) => jsx.JSX.Element;
+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::d7d7bb136aa9b7935c15f8e85d0916d7>>
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

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

@@ -39,5 +39,5 @@ export interface HeadingLevelContextProps {
  * </HeadingContext>
  * ```
  */
-declare const HeadingLevelContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
+declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => JSX.Element;
 export default HeadingLevelContextProvider;

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

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { HeadingProps } from './types';

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

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx, type SerializedStyles } from '@emotion/react';
 import type { HeadingColor, NewHeadingProps } from './types';
@@ -12,11 +15,11 @@ import type { HeadingColor, NewHeadingProps } from './types';
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color: colorProp, }: NewHeadingProps) => jsx.JSX.Element;
+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::d7d7bb136aa9b7935c15f8e85d0916d7>>
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/package.json

@@ -1,90 +1,90 @@
 {
-  "name": "@atlaskit/heading",
-  "version": "2.3.1",
-  "description": "A heading is a typography component used to display text in different sizes and formats.",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": false,
-  "atlaskit:src": "src/index.tsx",
-  "atlassian": {
-    "team": "Design System Team",
-    "productPushConsumption": [
-      "jira"
-    ],
-    "releaseModel": "continuous",
-    "website": {
-      "name": "Heading",
-      "category": "Components",
-      "status": {
-        "type": "beta"
-      }
-    },
-    "runReact18": true
-  },
-  "scripts": {
-    "codegen": "ts-node ./scripts/codegen.tsx"
-  },
-  "dependencies": {
-    "@atlaskit/primitives": "^7.0.0",
-    "@atlaskit/tokens": "^1.49.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "devDependencies": {
-    "@af/accessibility-testing": "*",
-    "@af/formatting": "*",
-    "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/visual-regression": "*",
-    "@atlassian/codegen": "^0.1.0",
-    "@testing-library/react": "^12.1.5",
-    "jscodeshift": "^0.13.0",
-    "react-dom": "^16.8.0",
-    "ts-node": "^10.9.1",
-    "typescript": "~5.4.2"
-  },
-  "techstack": {
-    "@atlassian/frontend": {
-      "import-structure": "atlassian-conventions",
-      "circular-dependencies": "file-and-folder-level"
-    },
-    "@repo/internal": {
-      "dom-events": "use-bind-event-listener",
-      "design-system": "v1",
-      "styling": [
-        "emotion"
-      ],
-      "ui-components": "lite-mode",
-      "analytics": "analytics-next",
-      "design-tokens": [
-        "color",
-        "spacing"
-      ],
-      "deprecation": "no-deprecated-imports"
-    }
-  },
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "af:exports": {
-    ".": "./src/index.tsx"
-  },
-  "homepage": "https://atlassian.design/components/heading/"
-}
+	"name": "@atlaskit/heading",
+	"version": "2.4.0",
+	"description": "A heading is a typography component used to display text in different sizes and formats.",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"sideEffects": false,
+	"atlaskit:src": "src/index.tsx",
+	"atlassian": {
+		"team": "Design System Team",
+		"productPushConsumption": [
+			"jira"
+		],
+		"releaseModel": "continuous",
+		"website": {
+			"name": "Heading",
+			"category": "Components",
+			"status": {
+				"type": "beta"
+			}
+		},
+		"runReact18": true
+	},
+	"scripts": {
+		"codegen": "ts-node ./scripts/codegen.tsx"
+	},
+	"dependencies": {
+		"@atlaskit/primitives": "^7.4.0",
+		"@atlaskit/tokens": "^1.51.0",
+		"@babel/runtime": "^7.0.0",
+		"@emotion/react": "^11.7.1"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+	},
+	"devDependencies": {
+		"@af/accessibility-testing": "*",
+		"@af/formatting": "*",
+		"@atlaskit/ds-lib": "^2.3.0",
+		"@atlaskit/ssr": "*",
+		"@atlaskit/toggle": "^13.2.0",
+		"@atlaskit/visual-regression": "*",
+		"@atlassian/codegen": "^0.1.0",
+		"@testing-library/react": "^12.1.5",
+		"jscodeshift": "^0.13.0",
+		"react-dom": "^16.8.0",
+		"ts-node": "^10.9.1",
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": "atlassian-conventions",
+			"circular-dependencies": "file-and-folder-level"
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"design-system": "v1",
+			"styling": [
+				"emotion"
+			],
+			"ui-components": "lite-mode",
+			"analytics": "analytics-next",
+			"design-tokens": [
+				"color",
+				"spacing"
+			],
+			"deprecation": "no-deprecated-imports"
+		}
+	},
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"af:exports": {
+		".": "./src/index.tsx"
+	},
+	"homepage": "https://atlassian.design/components/heading/"
+}

package/report.api.md

@@ -2,7 +2,8 @@
 
 ## API Report File for "@atlaskit/heading"
 
-> Do not edit this file. This report is auto-generated using [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
@@ -24,45 +25,33 @@ const _default: ({ level, variant, ...props }: HeadingProps) => jsx.JSX.Element;
 export default _default;
 
 // @public
-export const HeadingContextProvider: ({
-  children,
-  value,
-}: HeadingLevelContextProps) => JSX.Element;
+export const HeadingContextProvider: ({ children, value }: HeadingLevelContextProps) => JSX.Element;
 
 // @public (undocumented)
 type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // @public (undocumented)
 interface HeadingLevelContextProps {
-  children: ReactNode;
-  value?: HeadingLevel;
+	children: ReactNode;
+	value?: HeadingLevel;
 }
 
 // @public (undocumented)
 export type HeadingProps = {
-  testId?: string;
-  children: ReactNode;
-  id?: string;
-  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
-  color?: 'default' | 'inverse';
+	testId?: string;
+	children: ReactNode;
+	id?: string;
+	as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+	color?: 'default' | 'inverse';
 } & (
-  | {
-      level?:
-        | 'h100'
-        | 'h200'
-        | 'h300'
-        | 'h400'
-        | 'h500'
-        | 'h600'
-        | 'h700'
-        | 'h800'
-        | 'h900';
-      variant?: never;
-    }
-  | {
-      level?: never;
-      variant?: HeadingVariant;
-    }
+	| {
+			level?: 'h100' | 'h200' | 'h300' | 'h400' | 'h500' | 'h600' | 'h700' | 'h800' | 'h900';
+			variant?: never;
+	  }
+	| {
+			level?: never;
+			variant?: HeadingVariant;
+	  }
 );
 
 // @public (undocumented)
@@ -70,13 +59,13 @@ type HeadingVariant = keyof typeof headingVariantStylesMap;
 
 // @public
 const headingVariantStylesMap: {
-  large: SerializedStyles;
-  medium: SerializedStyles;
-  small: SerializedStyles;
-  xlarge: SerializedStyles;
-  xsmall: SerializedStyles;
-  xxlarge: SerializedStyles;
-  xxsmall: SerializedStyles;
+	large: SerializedStyles;
+	medium: SerializedStyles;
+	small: SerializedStyles;
+	xlarge: SerializedStyles;
+	xsmall: SerializedStyles;
+	xxlarge: SerializedStyles;
+	xxsmall: SerializedStyles;
 };
 
 // (No @packageDocumentation comment for this package)
@@ -90,7 +79,7 @@ const headingVariantStylesMap: {
 
 ```json
 {
-  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+	"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 }
 ```
 

package/scripts/codegen.tsx

@@ -9,47 +9,47 @@ import { createPartialSignedArtifact } from '@atlassian/codegen';
 import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 
 const constructTokenFunctionCall = (tokenName: string) => {
-  return `token('${tokenName}')`;
+	return `token('${tokenName}')`;
 };
 
 const headingTokens = tokens
-  .filter(t => t.attributes.group === 'typography')
-  .filter(t => t.cleanName.includes('heading'));
+	.filter((t) => t.attributes.group === 'typography')
+	.filter((t) => t.cleanName.includes('heading'));
 
 const removeVerbosity = (name: string): string => {
-  return name.replace('font.heading.', '');
+	return name.replace('font.heading.', '');
 };
 
 export const createTypographyStylesFromTemplate = () => {
-  return (
-    format(
-      `
+	return (
+		format(
+			`
 const headingSizeStylesMap = {
   ${headingTokens
-    .map(token => {
-      return `
+		.map((token) => {
+			return `
         '${removeVerbosity(
-          token.name,
-        )}': css({ font: ${constructTokenFunctionCall(token.cleanName)} })
+					token.name,
+				)}': css({ font: ${constructTokenFunctionCall(token.cleanName)} })
       `.trim();
-    })
-    .join(',\n\t')}
+		})
+		.join(',\n\t')}
 };`,
-      'typescript',
-    ) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
-  );
+			'typescript',
+		) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
+	);
 };
 
 const targetPath = join(__dirname, '../', 'src', 'heading.partial.tsx');
 
 writeFileSync(
-  join(__dirname, '../src/heading.partial.tsx'),
-  createPartialSignedArtifact(
-    createTypographyStylesFromTemplate(),
-    'yarn workspace @atlaskit/heading codegen',
-    {
-      id: 'typography',
-      absoluteFilePath: targetPath,
-    },
-  ),
+	join(__dirname, '../src/heading.partial.tsx'),
+	createPartialSignedArtifact(
+		createTypographyStylesFromTemplate(),
+		'yarn workspace @atlaskit/heading codegen',
+		{
+			id: 'typography',
+			absoluteFilePath: targetPath,
+		},
+	),
 );