@atlaskit/css 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/css
 
+## 0.6.0
+
+### Minor Changes
+
+- [#154669](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154669)
+  [`20db78434becd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/20db78434becd) -
+  Bump to the latest version of @compiled/\*
+- [#154669](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154669)
+  [`20db78434becd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/20db78434becd) -
+  Adds the `jsx` export to allow `@atlaskit/css` to be used for the JSX Pragma within the Compiled
+  ecosystem.
+
+## 0.5.3
+
+### Patch Changes
+
+- [#151036](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151036)
+  [`5fa98b5962048`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5fa98b5962048) -
+  Add version prefix to codemod
+
 ## 0.5.2
 
 ### Patch Changes

package/codemods/{primitives-emotion-to-compiled/next-primitives-emotion-to-compiled.tsx → 0.5.2-primitives-emotion-to-compiled/index.tsx}

@@ -50,14 +50,14 @@ const styleMaps = {
 export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
 	const base = j(fileInfo.source);
 
+	addJsxPragma(j, base);
+
 	// replace xcss with cssMap
 	const xcssSpecifier = getImportSpecifier(j, base, 'xcss');
 	if (!xcssSpecifier) {
 		return;
 	}
 
-	addJsxPragma(j, base);
-
 	replaceXcssWithCssMap(j, base, xcssSpecifier);
 
 	updateImports(j, base);
@@ -66,18 +66,23 @@ export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API,
 }
 
 function addJsxPragma(j: core.JSCodeshift, source: ReturnType<typeof j>) {
-	const jsxPragma = [j.commentBlock('*\n * @jsxRuntime classic\n * @jsx jsx\n ', true, false)];
-
-	const rootNode = source.get().node;
-	const existingComments = rootNode.comments || [];
-
-	const hasJsxPragma = existingComments.some(
-		(comment: core.Comment) =>
-			comment.value.includes('@jsxRuntime classic') && comment.value.includes('@jsx jsx'),
-	);
+	const jsxPragma = '*\n * @jsxRuntime classic\n * @jsx jsx\n ';
+	// extract all comments, not just root node
+	const allComments = source.find(j.Comment).nodes();
 
+	const hasJsxPragma = allComments.some((comment) => {
+		const value = comment.value;
+		return /@jsxRuntime\s+classic/.test(value) && /@jsx\s+jsx/.test(value);
+	});
 	if (!hasJsxPragma) {
-		rootNode.comments = [...existingComments, ...jsxPragma];
+		// create new comment block for the jsx pragma
+		const pragmaComment = j.commentBlock(jsxPragma, true, false);
+		// insert at the top of the file
+		const rootNode = source.get().node;
+		if (!rootNode.comments) {
+			rootNode.comments = [];
+		}
+		rootNode.comments.unshift(pragmaComment);
 	}
 }
 
@@ -132,7 +137,10 @@ function replaceXcssWithCssMap(
 				j.callExpression(j.identifier('cssMap'), [cssMapObject]),
 			),
 		]);
-		source.get().node.program.body.unshift(cssMapVariableDeclaration);
+
+		// insert the cssMap var after all imports
+		const lastImportIndex = source.find(j.ImportDeclaration).size();
+		source.get().node.program.body.splice(lastImportIndex, 0, cssMapVariableDeclaration);
 	}
 
 	// update the xcss prop references to use the new cssMap object
@@ -151,13 +159,13 @@ function replaceXcssWithCssMap(
 				if (expression.type === 'Identifier') {
 					// <Box xcss={buttonStyles} /> -> <Box xcss={styles.button} />
 					expression.name = `styles.${getCssMapKey(expression.name)}`;
-					// <Box xcss={[baseStyles, otherStyles]} /> -> <Box xcss={[styles.base, styles.otherStyles]} />
 				} else if (expression.type === 'ArrayExpression') {
+					// <Box xcss={[baseStyles, otherStyles]} /> -> <Box xcss={[styles.base, styles.otherStyles]} />
 					expression.elements.forEach((element) => {
 						if (element?.type === 'Identifier') {
 							element.name = `styles.${getCssMapKey(element.name)}`;
-							// <Box xcss={condition && styles} /> -> <Box xcss={condition && styles.root} />
 						} else if (
+							// <Box xcss={condition && styles} /> -> <Box xcss={condition && styles.root} />
 							element?.type === 'LogicalExpression' &&
 							element.right.type === 'Identifier'
 						) {
@@ -222,35 +230,80 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 				path.node.specifiers = path.node.specifiers.filter(
 					(specifier) => specifier.local?.name !== 'xcss',
 				);
+				if (path.node.specifiers.length === 0) {
+					// if no specifiers remain, remove the import
+					j(path).remove();
+				}
 			}
 		});
 
-	const existingImports = source.find(j.ImportDeclaration);
+	const importsNeeded = {
+		cssMap: false,
+		jsx: false,
+		token: false,
+	};
+
+	// check existing imports
+	source.find(j.ImportDeclaration).forEach((path) => {
+		switch (path.node.source.value) {
+			case '@atlaskit/css':
+				if (path.node.specifiers) {
+					path.node.specifiers.forEach((specifier) => {
+						if (specifier.local?.name === 'cssMap') {
+							importsNeeded.cssMap = true;
+						}
+						if (specifier.local?.name === 'jsx') {
+							importsNeeded.jsx = true;
+						}
+					});
+				}
+				break;
+			case '@atlaskit/tokens':
+				importsNeeded.token = true;
+				break;
+			case '@emotion/react':
+				// remove the jsx import from @emotion/react
+				path.node.specifiers = path.node.specifiers?.filter(
+					(specifier) => j.ImportSpecifier.check(specifier) && specifier.imported.name !== 'jsx',
+				);
+				if (path.node.specifiers?.length === 0) {
+					j(path).remove();
+				}
+				break;
+		}
+	});
+
+	const newImports: ImportDeclaration[] = [];
 
-	const hasCssMapImport = existingImports.some(
-		(path) => path.node.source.value === '@atlaskit/css',
-	);
-	if (!hasCssMapImport) {
+	if (!importsNeeded.cssMap || !importsNeeded.jsx) {
+		// add cssMap and jsx together if either is missing
 		const cssMapImport = j.importDeclaration(
-			[j.importSpecifier(j.identifier('cssMap'))],
+			[j.importSpecifier(j.identifier('cssMap')), j.importSpecifier(j.identifier('jsx'))],
 			j.literal('@atlaskit/css'),
 		);
-		source.get().node.program.body.unshift(cssMapImport);
+		newImports.push(cssMapImport);
 	}
 
-	const hasTokenImport = existingImports.some(
-		(path) => path.node.source.value === '@atlaskit/tokens',
-	);
-	if (!hasTokenImport) {
+	if (!importsNeeded.token) {
 		const tokenImport = j.importDeclaration(
 			[j.importSpecifier(j.identifier('token'))],
 			j.literal('@atlaskit/tokens'),
 		);
-		source.get().node.program.body.unshift(tokenImport);
+		newImports.push(tokenImport);
 	}
 
-	// update existing @atlaskit/primitives imports to @atlaskit/primitives/compiled
-	// e.g. import { Box } from '@atlaskit/primitives' -> import { Box } from '@atlaskit/primitives/compiled'
+	// remove default import React from 'react' if not needed
+	source.find(j.ImportDeclaration, { source: { value: 'react' } }).forEach((path) => {
+		path.node.specifiers = path.node.specifiers?.filter(
+			(specifier) =>
+				!(specifier.type === 'ImportDefaultSpecifier' && specifier.local?.name === 'React'),
+		);
+		if (path.node.specifiers?.length === 0) {
+			j(path).remove();
+		}
+	});
+
+	// update @atlaskit/primitives imports to @atlaskit/primitives/compiled
 	source
 		.find(j.ImportDeclaration)
 		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === '@atlaskit/primitives')
@@ -258,51 +311,16 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 			path.node.source.value = '@atlaskit/primitives/compiled';
 		});
 
-	const hasJsxImport = existingImports.some((path) => path.node.source.value === '@compiled/react');
-	if (!hasJsxImport) {
-		// check if there is `import { jsx } from '@emotion/react'`
-		// this should be replaced with `import { jsx } from '@compiled/react'`
-		const existingEmotionImport = source
-			.find(j.ImportDeclaration)
-			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === '@emotion/react')
-			.find(j.ImportSpecifier)
-			.filter((path) => path.node.imported.name === 'jsx');
-
-		const jsxImport = j.importDeclaration(
-			[j.importSpecifier(j.identifier('jsx'))],
-			j.literal('@compiled/react'),
-		);
-
-		if (existingEmotionImport.size() > 0) {
-			// replace jsx import from `@emotion/react` with `@compiled/react`
-			existingEmotionImport.closest(j.ImportDeclaration).replaceWith(jsxImport);
-		} else {
-			// add the new import at the top of the file
-			source.get().node.program.body.unshift(jsxImport);
-		}
-	}
-
-	// sort import declarations alphabetically
-	// probably not necessary as we can rely on prettier on save
-	const allImports = source.find(j.ImportDeclaration).nodes();
-	allImports.sort((a, b) => {
-		if (
-			typeof a.source.value === 'undefined' ||
-			typeof b.source.value === 'undefined' ||
-			a.source.value === null ||
-			b.source.value === null
-		) {
-			return 0;
-		}
+	// add new imports after any existing comments to ensure they're below the jsx pragma
+	const rootNode = source.get().node;
+	const firstNonCommentIndex = rootNode.program.body.findIndex(
+		(node: core.Node) =>
+			node.type !== 'ImportDeclaration' &&
+			node.type !== 'CommentBlock' &&
+			node.type !== 'CommentLine',
+	);
 
-		return a.source.value > b.source.value ? 1 : -1;
-	});
-	source.get().node.program.body = [
-		...allImports,
-		...source
-			.get()
-			.node.program.body.filter((node: core.Node) => node.type !== 'ImportDeclaration'),
-	];
+	rootNode.program.body.splice(firstNonCommentIndex, 0, ...newImports);
 }
 
 // look for xcss import

package/constellation/index/examples.mdx

@@ -0,0 +1,366 @@
+---
+order: 0
+---
+
+import SectionMessage from '@atlaskit/section-message';
+
+<SectionMessage title="Migration from Emotion to Compiled" appearance="discovery">
+	<p>
+		The Atlassian Design System is under the process of migrating from Emotion to Compiled for our
+		CSS-in-JS. Further details to come.
+	</p>
+</SectionMessage>
+
+`@atlaskit/css` is the replacement for `@atlaskit/primitives.xcss`, refer to
+[Migration](/components/css/migration) for details migrating.
+
+This is a bounded styling library to be used both with native styles (`<div>`) and the Atlassian
+Design System, such as our [primitive components](/components/primitives).
+
+This is built on top of [Compiled CSS-in-JS](https://compiledcssinjs.com/) which is a much more
+performant, static styling solution with the same syntax and a few breaking changes—the primary ones
+being dynamic styles as well as deep imports or exports for reuse of styles may not work.
+
+This will require major configuration, noted below.
+
+## Usage
+
+For the most part, `@atlaskit/css` should behave like `@compiled/react` or other CSS-in-JS
+libraries' `css()` syntaxes, however we promote `cssMap` as a way to create maps of styles as that's
+the common use-case at Atlassian.
+
+Please note that `@atlaskit/css` is a strictly bounded variant to help promote and align the usage
+of Design System tokens and properties, so you you cannot use arbitrary values such as
+`color: 'rgba(123, 45, 67)', padding: 8`, and typically we only allow our
+[tokenized values](/components/tokens/all-tokens), but a few other property restrictions or
+limitations exist, such as `zIndex` only having a few allowed literal numeric values.
+
+### cssMap
+
+`cssMap` is the default function we suggest to use, it can be reused across native elements through
+`props.css` and React components through `props.xcss` and is flexible to style maps that are known
+ahead-of-time.
+
+These can be reused across multiple components, even across native and non-native.
+
+```tsx
+import { cssMap } from '@atlaskit/css';
+const styles = cssMap({
+	root: { display: 'inline-block' },
+	primary: {
+		backgroundColor: token('color.background.brand.bold'),
+		color: token('color.text.inverse'),
+	},
+	discovery: {
+		backgroundColor: token('color.background.discovery.bold'),
+		color: token('color.text.inverse'),
+	},
+	success: {
+		backgroundColor: token('color.background.success.bold'),
+		color: token('color.text.inverse'),
+	},
+	disabled: { opacity: 0.7, cursor: 'not-allowed' },
+});
+export default ({
+	appearance = 'primary',
+	isDisabled,
+}: {
+	appearance?: 'primary' | 'discovery' | 'success';
+	isDisabled?: boolean;
+}) => <div css={(styles.root, styles[appearance], isDisabled && styles.disabled)} />;
+```
+
+### cx
+
+The `cx` function is required when combining styles inside of an `xcss` prop, but can be used
+anywhere. This is only required because `xcss={[styles.root, styles.bordered]}` results in incorrect
+typing while with a function it is preserved.
+
+```tsx
+<div css={[styles.root, styles.bordered]} />
+<div css={cx(styles.root, styles.bordered)} />
+<Box xcss={cx(styles.root, styles.bordered)} />
+```
+
+### Typical example
+
+You must have a JSX pragma in scope in order to use this, depending on your setup this may be
+automatic, require `React` imported, or require `jsx` imported.
+
+```tsx
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { cssMap, cx, jsx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	root: {
+		padding: token('space.100'),
+		color: token('color.text'),
+		backgroundColor: token('elevation.surface'),
+	},
+	compact: { padding: token('space.50') },
+	transparent: { backgroundColor: 'transparent' },
+});
+
+export default ({
+	spacing = 'default',
+	noBackground,
+}: {
+	spacing: 'compact' | 'default';
+	noBackground?: boolean;
+}) => {
+	return (
+		<Box
+			xcss={cx(
+				styles.root,
+				spacing === 'compact' && styles.compact,
+				noBackground && styles.transparent,
+			)}
+		>
+			<p css={[styles.compact, styles.transparent]}>Hello world!</p>
+		</Box>
+	);
+};
+```
+
+### Building a reusable component with pass-through styles
+
+With the introduction of `@atlaskit/css` (and the underlying `createStrictAPI` from Compiled), we're
+now able to define a strictly bounded API for our components. This may be an API pattern that you
+want to copy as well.
+
+For example, if you want to create your own component that allows you to extend and pass-through
+styles, you can do so:
+
+```tsx
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { cssMap, cx, jsx, type StrictXCSSProp } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	button: { padding: token('space.100'), borderRadius: token('border.radius.100') },
+	dense: { padding: token('space.050'), borderRadius: token('border.radius.050') },
+});
+
+export function Card({
+	children,
+	xcss,
+	dense,
+}: {
+	children: React.ReactNode;
+	dense?: boolean;
+	/** Only `padding`, `borderRadius`, `backgroundColor`, and `color` properties and `hover` and `focus` pseudos are allowed */
+	xcss?: StrictXCSSProp<
+		'padding' | 'borderRadius' | 'backgroundColor' | 'color',
+		'&:hover' | '&:focus'
+	>;
+}) {
+	return (
+		<div css={cx(styles.button, isDense && styles.dense)} className={xcss}>
+			{children}
+		</div>
+	);
+}
+```
+
+I'm then allowed to build a component that uses this `Card` component and overrides these properties
+as I see fit:
+
+```tsx
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { cssMap, cx, jsx, type StrictXCSSProp } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+import { Card } from './Card';
+
+const styles = cssMap({
+	root: { padding: token('space.200'), borderRadius: token('border.radius.200') },
+	inverse: {
+		backgroundColor: token('color.background.discovery'),
+		color: token('color.text.inverse'),
+	},
+});
+
+export const LargeCard = ({
+	children,
+	isInverse,
+}: {
+	children: React.ReactNode;
+	isInverse?: boolean;
+}) => {
+	return <Card xcss={cx(styles.root, isInverse && styles.inverse)}>{children}</Card>;
+};
+```
+
+However, if you're extending a component that uses `props.xcss` under the hood, for example a
+Primitive, the first `Card` component would look a bit different, brief example:
+
+```tsx
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { cssMap, cx, jsx, type StrictXCSSProp } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	button: { padding: token('space.100'), borderRadius: token('border.radius.100') },
+});
+
+export function Card({
+	children,
+	xcss,
+}: {
+	children: React.ReactNode;
+	xcss?: StrictXCSSProp<'padding' | 'borderRadius'>;
+}) {
+	return <Box xcss={cx(styles.button, xcss)}>{children}</Box>;
+}
+```
+
+## Configuration required
+
+<SectionMessage title="More details coming soon!" appearance="warning">
+	<p>This section is under development, more details will come soon.</p>
+</SectionMessage>
+
+In order to use any Atlassian Design System packages that distribute Compiled CSS-in-JS, you
+**must** configure your project via Babel as well your bundler with Webpack and/or Parcel and using
+the latest version of these plugins:
+
+- `@atlaskit/tokens/babel-plugin`
+- `@compiled/babel-plugin` configured with `sortShorthand: true` (or configured through
+  `@compiled/webpack-loader` or `@compiled/parcel-config` or similar)
+- **SUGGESTED:** You should turn on
+  [@atlaskit/eslint-plugin-ui-styling-standard](/components/eslint-plugin-ui-styling-standard) to
+  guide you
+
+Refer to https://compiledcssinjs.com/docs/installation
+
+### Setup your Babel plugins
+
+Most products will use Babel across the dev lifecycle, so this is typically a baseline
+configuration.
+
+```sh
+yarn install @atlaskit/tokens
+yarn install --dev @compiled/babel-plugin
+yarn install --dev @compiled/babel-plugin-strip-runtime # optional, for extracting styles
+```
+
+Plugin order matters, your `@atlaskit/tokens/babel-plugin` must come before your
+`@compiled/babel-plugin`, otherwise you may experience errors.
+
+```js
+// babel.config.js
+module.exports = {
+	plugins: [
+		// This will handle all `token()` calls, eg. if used in a non-Compiled CSS-in-JS library:
+		'@atlaskit/tokens/babel-plugin',
+		// ↓↓ Compiled should run last ↓↓
+		['@compiled/babel-plugin', { transformerBabelPlugins: ['@atlaskit/tokens/babel-plugin'] }],
+		// OPTIONAL: If you are distributing packages with Compiled styles, you should also include the following.
+		// Your `dest` may vary depending on how you distribute, eg. if you have multiple `cjs` and `esm` distributions
+		// those will each need a separate `dest` through Babel's environment-specific configuration.
+		[
+			'@compiled/babel-plugin-strip-runtime',
+			{
+				sortShorthand: true,
+				extractStylesToDirectory: { source: 'src', dest: 'dist' }
+			},
+		],
+	],
+};
+```
+
+For full documentation, refer to https://compiledcssinjs.com/docs/installation#babel
+
+### Bundling with Webpack
+
+This configuration may vary, this is the default production-like configuration expected where the
+primary suggestion is to use extracted styles for performance and consistency reasons. Development
+configuration may vary.
+
+```sh
+yarn install @atlaskit/tokens
+yarn install --dev @compiled/webpack-loader mini-css-extract-plugin
+```
+
+```js
+const { CompiledExtractPlugin } = require('@compiled/webpack-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx|ts|tsx)$/,
+				use: [
+					{ loader: 'babel-loader' },
+					{
+						// ↓↓ Compiled should run last ↓↓
+						loader: '@compiled/webpack-loader',
+						options: {
+							transformerBabelPlugins: ['@atlaskit/tokens/babel-plugin'],
+							extract: true,
+							inlineCss: true,
+						},
+					},
+				],
+			},
+			{
+				test: /compiled-css\.css$/i,
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+			{
+				test: /(?<!compiled-css)(?<!\.compiled)\.css$/,
+				use: ['style-loader', 'css-loader'],
+			},
+		],
+	},
+	plugins: [
+		new MiniCssExtractPlugin(),
+		new CompiledExtractPlugin({ sortShorthand: true }),
+	],
+};
+```
+
+For full documentation, refer to https://compiledcssinjs.com/docs/installation#webpack
+
+### Bundling with Parcel
+
+```sh
+yarn install @atlaskit/tokens
+yarn install --dev @compiled/parcel-config
+```
+
+Setup your `.compiledcssrc`:
+
+```json
+{
+	"transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]],
+	"extract": true,
+	"inlineCss": true,
+	"sortShorthand": true
+}
+```
+
+Setup your `.parcelrc`:
+
+```json
+{
+	"extends": ["@parcel/config-default", "@compiled/parcel-config"]
+}
+```
+
+For full documentation, refer to https://compiledcssinjs.com/docs/installation#(recommended)-parcel

package/constellation/index/migration.mdx

@@ -0,0 +1,59 @@
+---
+order: 1
+---
+
+## Migration to `@atlaskit/css`
+
+`@atlaskit/css` is the replacement for `@atlaskit/primitives/xcss` which will only work with the
+Compiled variants of packages, eg. `@atlaskit/primitives/compiled` (note that not all packages will
+be migrated to Compiled by the end of 2024).
+
+Typically, this migration means moving from the `const styles = xcss({ padding: 'space.100' })` API
+to a `const styles = cssMap({ root: { padding: token('space.100') } })` API, and we have a codemod
+to assist with a majority of this migration for you. Some things are not available in the Compiled
+API such as dynamic styles or imports, please use the
+[UI Styling Standard ESLint Plugin](/components/eslint-plugin-ui-styling-standard/) to guide you.
+
+Refer to [Configuration required](/components/css/examples#configuration-required) for details on
+how to configure your project to use `@atlaskit/css`
+
+## Codemod
+
+We have a codemod to assist in migrations from `xcss()` to `@atlaskit/css`.
+
+```sh
+npx @atlaskit/codemod-cli --packages @atlaskit/css@0.5.2-primitives-emotion-to-compiled --parser tsx --extensions ts,tsx,js ./path/to/folder
+```
+
+The codemod should migrate something like this:
+
+```diff
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+-import { Box, xcss } from '@atlaskit/primitives';
++import { cssMap, jsx } from '@atlaskit/css';
++import { Box } from '@atlaskit/primitives/compiled';
++import { token } from '@atlaskit/tokens';
+
+-const styles = xcss({
+-  color: 'color.text',
+-  zIndex: 'layer',
+-  backgroundColor: 'elevation.surface.hovered',
++const styles = cssMap({
++  root: {
++    color: token('color.text'),
++    zIndex: 400,
++    backgroundColor: token('elevation.surface.hovered'),
++  },
+});
+
+-export const MyComponent = () => <Box xcss={styles} />;
++export const MyComponent = () => <Box xcss={styles.root} />;
+```
+
+Please note there may be very minute differences in this migration if you do not have theming
+enabled as `@atlaskit/primitives` and the Compiled variant of `@atlaskit/primitives/compiled` have
+different fallback colors. They are unchanged with theming applied, this will only happen if you're
+in an unthemed environment (which is not suggested).

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.29.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cx = exports.cssMap = exports.css = void 0;
+Object.defineProperty(exports, "jsx", {
+  enumerable: true,
+  get: function get() {
+    return _react2.jsx;
+  }
+});
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _react2 = require("@compiled/react");

package/dist/es2019/index.js

@@ -1,7 +1,8 @@
-/* index.tsx generated by @compiled/babel-plugin v0.29.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';
+export { jsx } from '@compiled/react';
 const {
   XCSSProp,
   css,

package/dist/esm/index.js

@@ -1,7 +1,8 @@
-/* index.tsx generated by @compiled/babel-plugin v0.29.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';
+export { jsx } from '@compiled/react';
 var _createStrictAPI = createStrictAPI(),
   XCSSProp = _createStrictAPI.XCSSProp,
   css = _createStrictAPI.css,

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { type CSSPseudos, type StrictCSSProperties, type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
+export { jsx } from '@compiled/react';
 import { type DesignTokenStyles } from '@atlaskit/tokens/css-type-schema';
 type MediaQuery = '(min-width: 30rem)' | '(min-width: 48rem)' | '(min-width: 64rem)' | '(min-width: 90rem)' | '(min-width: 110.5rem)' | 'not all and (min-width: 30rem)' | 'not all and (min-width: 48rem)' | 'not all and (min-width: 64rem)' | 'not all and (min-width: 90rem)' | 'not all and (min-width: 110.5rem)' | '(min-width: 0rem) and (max-width: 29.99rem)' | '(min-width: 30rem) and (max-width: 47.99rem)' | '(min-width: 48rem) and (max-width: 63.99rem)' | '(min-width: 64rem) and (max-width: 89.99rem)' | '(min-width: 90rem) and (max-width: 110.49rem)' | '(prefers-reduced-motion: reduce)' | 'screen and (forced-colors: active), screen and (-ms-high-contrast: active)';
 declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {

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

@@ -1,4 +1,5 @@
 import { type CSSPseudos, type StrictCSSProperties, type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
+export { jsx } from '@compiled/react';
 import { type DesignTokenStyles } from '@atlaskit/tokens/css-type-schema';
 type MediaQuery = '(min-width: 30rem)' | '(min-width: 48rem)' | '(min-width: 64rem)' | '(min-width: 90rem)' | '(min-width: 110.5rem)' | 'not all and (min-width: 30rem)' | 'not all and (min-width: 48rem)' | 'not all and (min-width: 64rem)' | 'not all and (min-width: 90rem)' | 'not all and (min-width: 110.5rem)' | '(min-width: 0rem) and (max-width: 29.99rem)' | '(min-width: 30rem) and (max-width: 47.99rem)' | '(min-width: 48rem) and (max-width: 63.99rem)' | '(min-width: 64rem) and (max-width: 89.99rem)' | '(min-width: 90rem) and (max-width: 110.49rem)' | '(prefers-reduced-motion: reduce)' | 'screen and (forced-colors: active), screen and (-ms-high-contrast: active)';
 declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.5.2",
+	"version": "0.6.0",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -12,7 +12,11 @@
 		"runReact18": true,
 		"website": {
 			"name": "CSS",
-			"category": "Components"
+			"category": "Libraries",
+			"ignorePropTypes": true,
+			"status": {
+				"type": "alpha"
+			}
 		}
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -36,7 +40,7 @@
 	"dependencies": {
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.17.3"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -44,7 +48,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.0.0",
+		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@emotion/react": "^11.7.1",
@@ -91,5 +95,5 @@
 			]
 		}
 	},
-	"homepage": "https://atlaskit.atlassian.com/packages/design-system/styling"
+	"homepage": "https://atlassian.design/components/css"
 }