@atlaskit/css 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/css
 
+## 0.6.2
+
+### Patch Changes
+
+- [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
+  [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
+## 0.6.1
+
+### Patch Changes
+
+- [#160054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160054)
+  [`a85c8b06aad62`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a85c8b06aad62) -
+  Updates to the 0.5.2-primitives-emotion-to-compiled codemod to group imports from
+  @atlaskit/primitives.
+
 ## 0.6.0
 
 ### Minor Changes

package/codemods/0.5.2-primitives-emotion-to-compiled/index.tsx

@@ -50,8 +50,6 @@ 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) {
@@ -62,6 +60,8 @@ export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API,
 
 	updateImports(j, base);
 
+	addJsxPragma(j, base);
+
 	return base.toSource();
 }
 
@@ -221,20 +221,34 @@ function ensureSelectorAmpersand(j: core.JSCodeshift, objectExpression: core.Obj
 }
 
 function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
-	// remove xcss import
+	// remove xcss import and collect primitives to import
+	const primitivesToImport = new Set<string>();
 	source
 		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === '@atlaskit/primitives')
+		.filter((path: ASTPath<ImportDeclaration>) => {
+			const importSource = path.node.source.value as string;
+			return (
+				importSource === '@atlaskit/primitives' || importSource.startsWith('@atlaskit/primitives/')
+			);
+		})
 		.forEach((path) => {
 			if (path.node.specifiers) {
-				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();
-				}
+				path.node.specifiers.forEach((specifier) => {
+					if (specifier.type === 'ImportSpecifier' && specifier.imported) {
+						const importedName = specifier.imported.name;
+						if (importedName !== 'xcss') {
+							primitivesToImport.add(importedName);
+						}
+					} else if (specifier.type === 'ImportDefaultSpecifier') {
+						// handle deep imports like `import Anchor from '@atlaskit/primitives/anchor'`
+						if (specifier.local) {
+							primitivesToImport.add(specifier.local.name);
+						}
+					}
+				});
 			}
+			// remove the import declaration
+			j(path).remove();
 		});
 
 	const importsNeeded = {
@@ -245,18 +259,17 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 
 	// check existing imports
 	source.find(j.ImportDeclaration).forEach((path) => {
-		switch (path.node.source.value) {
+		const importSource = path.node.source.value as string;
+		switch (importSource) {
 			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;
-						}
-					});
-				}
+				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;
@@ -264,7 +277,17 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 			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',
+					(specifier) => !(j.ImportSpecifier.check(specifier) && specifier.imported.name === 'jsx'),
+				);
+				if (path.node.specifiers?.length === 0) {
+					j(path).remove();
+				}
+				break;
+			case 'react':
+				// remove default import React from 'react' if not needed
+				path.node.specifiers = path.node.specifiers?.filter(
+					(specifier) =>
+						!(specifier.type === 'ImportDefaultSpecifier' && specifier.local?.name === 'React'),
 				);
 				if (path.node.specifiers?.length === 0) {
 					j(path).remove();
@@ -275,15 +298,47 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 
 	const newImports: ImportDeclaration[] = [];
 
-	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('jsx'))],
-			j.literal('@atlaskit/css'),
+	// add grouped import for primitives
+	// e.g. import { Anchor, Box } from '@atlaskit/primitives/compiled';
+	if (primitivesToImport.size > 0) {
+		const primitivesImport = j.importDeclaration(
+			Array.from(primitivesToImport)
+				.sort()
+				.map((name) => j.importSpecifier(j.identifier(name))),
+			j.literal('@atlaskit/primitives/compiled'),
 		);
-		newImports.push(cssMapImport);
+		newImports.push(primitivesImport);
+	}
+
+	// add cssMap and jsx import if needed
+	if (!importsNeeded.cssMap || !importsNeeded.jsx) {
+		const existingCssImports = source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === '@atlaskit/css');
+
+		const newSpecifiers: core.ImportSpecifier[] = [];
+
+		if (!importsNeeded.cssMap) {
+			newSpecifiers.push(j.importSpecifier(j.identifier('cssMap')));
+		}
+		if (!importsNeeded.jsx) {
+			newSpecifiers.push(j.importSpecifier(j.identifier('jsx')));
+		}
+
+		if (existingCssImports.size() > 0) {
+			// existing import from '@atlaskit/css'
+			const existingCssImport = existingCssImports.at(0).get();
+
+			if (existingCssImport && existingCssImport.node.specifiers) {
+				existingCssImport.node.specifiers.push(...newSpecifiers);
+			}
+		} else {
+			const cssMapImport = j.importDeclaration(newSpecifiers, j.literal('@atlaskit/css'));
+			newImports.push(cssMapImport);
+		}
 	}
 
+	// add token import
 	if (!importsNeeded.token) {
 		const tokenImport = j.importDeclaration(
 			[j.importSpecifier(j.identifier('token'))],
@@ -292,26 +347,7 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 		newImports.push(tokenImport);
 	}
 
-	// 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')
-		.forEach((path) => {
-			path.node.source.value = '@atlaskit/primitives/compiled';
-		});
-
-	// add new imports after any existing comments to ensure they're below the jsx pragma
+	// add new imports after any existing comments
 	const rootNode = source.get().node;
 	const firstNonCommentIndex = rootNode.program.body.findIndex(
 		(node: core.Node) =>

package/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx

@@ -846,14 +846,15 @@ export type Fill = keyof typeof fillMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dbfb4c7de16d0ae4a53d66f9663aca91>>
+ * @codegen <<SignedSource::042cbfe8041c09e3817ae74154994f32>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["layer"]
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const layerMap = {
+	'1': 1,
 	card: 100,
 	navigation: 200,
 	dialog: 300,
@@ -906,12 +907,12 @@ export type BorderRadius = keyof typeof borderRadiusMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::97e5ae47f252660a5ef7569a3880c26c>>
+ * @codegen <<SignedSource::96d9a841cb440c2bd770d0af5c670f10>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const fontMap = {
 	'font.body': token(
@@ -1006,11 +1007,11 @@ export type FontFamily = keyof typeof fontFamilyMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7dc7abf82a13bc780c338b9602508ae6>>
+ * @codegen <<SignedSource::ae96213e36b930556f9ad18382088ff8>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const textSizeMap = {
 	medium: token(

package/constellation/index/migration.mdx

@@ -2,21 +2,24 @@
 order: 1
 ---
 
+import SectionMessage from '@atlaskit/section-message';
+
 ## 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).
+<SectionMessage title="Migration from Emotion to Compiled" appearance="discovery">
+	<p>
+		The Atlassian Design System is migrating from Emotion to Compiled CSS-in-JS. This transition
+		aims to improve performance and align with modern React features.{' '}
+		<a href="https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953">
+			Read our RFC to learn more.
+		</a>
+	</p>
+</SectionMessage>
 
-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
+We have a codemod available to support this migration, but there are some breaking changes between
+Emotion and Compiled, 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`.
@@ -53,6 +56,10 @@ The codemod should migrate something like this:
 +export const MyComponent = () => <Box xcss={styles.root} />;
 ```
 
+The codemod will migrate most usecases, but there is a known issue that it's unable to handle any
+logical operators in the `xcss` property. If you have any logical operators in your `xcss` property,
+you will need to manually update them.
+
 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

package/constellation/index/overview.mdx

@@ -0,0 +1,276 @@
+---
+order: 0
+---
+
+import SectionMessage from '@atlaskit/section-message';
+
+<SectionMessage title="Migration from Emotion to Compiled" appearance="discovery">
+	<p>
+		The Atlassian Design System is migrating from Emotion to Compiled CSS-in-JS. This transition
+		aims to improve performance and align with modern React features.{' '}
+		<a href="https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953">
+			Read our RFC to learn more.
+		</a>
+	</p>
+</SectionMessage>
+
+`@atlaskit/css` is the replacement for `@atlaskit/primitives.xcss`. It serves as a bounded styling
+library for use with native HTML elements and the Atlassian Design System, including
+[primitive components](/components/primitives).
+
+Built on [Compiled CSS-in-JS](https://compiledcssinjs.com/), it provides a performant, static
+styling solution with some syntax changes. Notably, dynamic styles and certain imports/exports may
+not work as before.
+
+For configuration details, see our
+[Get Started](/get-started/develop#set-up-your-bundling-environment) guide.
+
+## Usage
+
+`@atlaskit/css` closely resembles the behavior of `@compiled/react` and other CSS-in-JS libraries'
+`css()` functions. However, we encourage using `cssMap` to create style maps, as the common practice
+at Atlassian.
+
+This is a strictly bounded variant designed to align the use of
+[Design System tokens](<(/components/tokens/all-tokens)>) and properties. You cannot use arbitrary
+values, such as `color: 'rgba(123, 45, 67)'` nor `padding: 8`. Typically, only tokenized values are
+allowed. Additionally, there are some restrictions, such as `zIndex`, which only supports a limited
+set of numeric values.
+
+### cssMap
+
+We recommend using `cssMap` to create style maps. These maps can be applied and reused on both
+native elements and React components using `props.css` and `props.xcss`.
+
+```tsx
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+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
+
+Use the `cx` function when combining styles in an `xcss` prop to maintain correct typing. This is
+not required for native elements, but still works with or without.
+
+```tsx
+<div css={[styles.root, styles.bordered]} />
+<div css={cx(styles.root, styles.bordered)} />
+<Box xcss={cx(styles.root, styles.bordered)} />
+```
+
+### JSX pragma
+
+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 reusable components
+
+With the introduction of `@atlaskit/css`, and leveraging the underlying `createStrictAPI` from
+Compiled, we've established a strictly bounded API for our components. This approach ensures
+consistency and alignment with our Design System, and it might be an API pattern you find beneficial
+to adopt in your own projects.
+
+For instance, if you want to create a 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,
+	isDense,
+}: {
+	children: React.ReactNode;
+	isDense?: boolean;
+	xcss?: StrictXCSSProp<
+		'padding' | 'borderRadius' | 'backgroundColor' | 'color',
+		'&:hover' | '&:focus'
+	>;
+}) {
+	return (
+		<div css={cx(styles.button, isDense && styles.dense)} className={xcss}>
+			{children}
+		</div>
+	);
+}
+```
+
+You can then build a component using this Card component and override its properties as needed:
+
+```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>;
+}
+```
+
+### Unbounded styles
+
+If you need to apply styles that aren't tokenized, or styles that aren't within the `@atlaskit/css`
+API, you can use the `cssMap()` function from `@compiled/react` directly on native HTML elements.
+Note that this won't work on primitive components. While it's best to stick to the Design System
+guidelines, this option can be useful for handling specific edge cases. Please note this isn't
+recommended for general use.
+
+```tsx
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { cssMap } from '@compiled/react';
+
+import { jsx } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+
+const unboundedStyles = cssMap({
+	container: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+		'&:first-child': {
+			paddingBlockEnd: token('space.150'),
+		},
+		'@media (min-width: 48rem)': {
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+			'&:first-child': {
+				paddingBlockStart: token('space.400'),
+			},
+		},
+	},
+});
+
+const Container = ({ children, testId }: ContainerProps) => (
+	<div css={unboundedStyles.container} data-testid={testId}>
+		{children}
+	</div>
+);
+```
+
+## Configuration required
+
+In order to use any Atlassian Design System packages that distribute Compiled CSS-in-JS, you
+**must** configure your project, please refer to our
+[Get started](/get-started/develop#set-up-your-bundling-environment) guide.

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.6.0",
+	"version": "0.6.2",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -15,7 +15,14 @@
 			"category": "Libraries",
 			"ignorePropTypes": true,
 			"status": {
-				"type": "alpha"
+				"type": "beta",
+				"description": "The Atlassian Design System is migrating from Emotion to Compiled CSS-in-JS. This transition aims to improve performance and align with modern React features.",
+				"actions": [
+					{
+						"text": "View RFC",
+						"href": "https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953"
+					}
+				]
 			}
 		}
 	},
@@ -32,13 +39,15 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"af:exports": {
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.1"
 	},
@@ -48,7 +57,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/ds-lib": "^3.2.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@emotion/react": "^11.7.1",

package/constellation/index/examples.mdx

@@ -1,366 +0,0 @@
----
-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