@atlaskit/checkbox 17.3.9 → 17.3.11

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/checkbox
 
+## 17.3.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.3.10
+
+### Patch Changes
+
+- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
+  Enrol all Design System UI packages into the React Compiler with platform gating via
+  isReactCompilerActivePlatform.
+- Updated dependencies
+
 ## 17.3.9
 
 ### Patch Changes

package/codemods/15.0.0-size-removal.tsx

@@ -1,7 +1,7 @@
 import type { API, FileInfo, Options } from 'jscodeshift';
 
-import { removeSize } from './migrations/remove-props';
-import { createTransformer } from './utils';
+import { removeSize } from './migrations/remove-size';
+import { createTransformer } from './utils/create-transformer';
 
 const transformer: (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
 	createTransformer('@atlaskit/checkbox', [removeSize]);

package/codemods/migrations/remove-full-width.tsx

@@ -0,0 +1,6 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeFullWidth: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');

package/codemods/migrations/remove-imports.tsx

@@ -1,4 +1,4 @@
-import { createRemoveImportsFor } from '../utils';
+import { createRemoveImportsFor } from '../utils/create-remove-imports-for';
 
 export const removeThemeImports: (
 	j: import('jscodeshift/src/core').JSCodeshift,

package/codemods/migrations/remove-overrides.tsx

@@ -0,0 +1,15 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeOverrides: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
+	'@atlaskit/checkbox',
+	'Checkbox',
+	'overrides',
+	`This file uses the @atlaskit/checkbox \`overrides\` prop
+  which has now been removed due to its poor performance characteristics. We have not
+  replaced overrides with an equivalent API and the overrides pattern exposes internal
+  implementation detail as public API and makes it harder for you to upgrade. The appearance
+  of Checkbox will have likely changed.`,
+);

package/codemods/migrations/remove-size.tsx

@@ -0,0 +1,6 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeSize: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');

package/codemods/migrations/remove-theme.tsx

@@ -0,0 +1,15 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeTheme: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
+	'@atlaskit/checkbox',
+	'Checkbox',
+	'theme',
+	`This file uses the @atlaskit/checkbox \`theme\` prop which
+  has now been removed due to its poor performance characteristics. We have not replaced
+  theme with an equivalent API due to minimal usage of the \`theme\` prop. However if you
+  were using theme to customise the size of the checkbox there is now a \`size\` prop.
+  The appearance of Checkbox will have likely changed.`,
+);

package/codemods/migrations/rename-checkbox-without-analytics-import.tsx

@@ -0,0 +1,11 @@
+import { createRenameImportFor } from '../utils/create-rename-import-for';
+
+export const renameCheckboxWithoutAnalyticsImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
+	componentName: 'CheckboxWithoutAnalytics',
+	newComponentName: 'Checkbox',
+	oldPackagePath: '@atlaskit/checkbox/Checkbox',
+	newPackagePath: '@atlaskit/checkbox',
+});

package/codemods/migrations/rename-deep-type-import.tsx

@@ -0,0 +1,10 @@
+import { createRenameImportFor } from '../utils/create-rename-import-for';
+
+export const renameDeepTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
+	componentName: 'CheckboxProps',
+	oldPackagePath: '@atlaskit/checkbox/dist/cjs/types',
+	newPackagePath: '@atlaskit/checkbox',
+});

package/codemods/migrations/rename-input-ref-to-ref.tsx

@@ -1,4 +1,4 @@
-import { createRenameFuncFor } from '../utils';
+import { createRenameFuncFor } from '../utils/create-rename-func-for';
 
 export const renameInputRef: (
 	j: import('jscodeshift/src/core').JSCodeshift,

package/codemods/migrations/rename-type-import.tsx

@@ -0,0 +1,10 @@
+import { createRenameImportFor } from '../utils/create-rename-import-for';
+
+export const renameTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
+	componentName: 'CheckboxProps',
+	oldPackagePath: '@atlaskit/checkbox/types',
+	newPackagePath: '@atlaskit/checkbox',
+});

package/codemods/types.tsx

@@ -0,0 +1 @@
+export type Nullable<T> = T | null;

package/codemods/utils/add-comment-before.tsx

@@ -0,0 +1,40 @@
+import { type ASTPath, type ImportDeclaration, type JSCodeshift, type Program } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+// not replacing newlines (which \s does)
+const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
+
+function clean(value: string): string {
+	return (
+		value
+			.replace(spacesAndTabs, ' ')
+			.replace(lineStartWithSpaces, '')
+			// using .trim() to clear the any newlines before the first text and after last text
+			.trim()
+	);
+}
+
+export function addCommentBefore({
+	j,
+	target,
+	message,
+}: {
+	j: JSCodeshift;
+	target: Collection<Program> | Collection<ImportDeclaration>;
+	message: string;
+}): void {
+	const content: string = ` TODO: (from codemod) ${clean(message)} `;
+	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
+		path.value.comments = path.value.comments || [];
+
+		const exists = path.value.comments.find((comment) => comment.value === content);
+
+		// avoiding duplicates of the same comment
+		if (exists) {
+			return;
+		}
+
+		path.value.comments.push(j.commentBlock(content));
+	});
+}

package/codemods/utils/add-comment-to-start-of-file.tsx

@@ -0,0 +1,20 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentBefore } from './add-comment-before';
+
+export function addCommentToStartOfFile({
+	j,
+	base,
+	message,
+}: {
+	j: JSCodeshift;
+	base: Collection<Node>;
+	message: string;
+}): void {
+	addCommentBefore({
+		j,
+		target: base.find(j.Program),
+		message,
+	});
+}

package/codemods/utils/add-to-import.tsx

@@ -0,0 +1,32 @@
+import { type ImportDefaultSpecifier, type ImportSpecifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function addToImport({
+	j,
+	base,
+	importSpecifier,
+	packageName,
+}: {
+	j: JSCodeshift;
+	base: Collection<any>;
+	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
+	packageName: string;
+}): void {
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === packageName)
+		.replaceWith((declaration) => {
+			return j.importDeclaration(
+				[
+					// we are appending to the existing specifiers
+					// We are doing a filter hear because sometimes specifiers can be removed
+					// but they hand around in the declaration
+					...(declaration.value.specifiers || []).filter(
+						(item) => item.type === 'ImportSpecifier' && item.imported != null,
+					),
+					importSpecifier,
+				],
+				j.literal(packageName),
+			);
+		});
+}

package/codemods/utils/create-remove-func-for.tsx

@@ -0,0 +1,33 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentToStartOfFile } from './add-comment-to-start-of-file';
+import { getDefaultSpecifier } from './get-default-specifier';
+import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import { getNamedSpecifier } from './get-named-specifier';
+
+export const createRemoveFuncFor: (
+	component: string,
+	importName: string,
+	prop: string,
+	comment?: string,
+) => (j: JSCodeshift, source: Collection<Node>) => void =
+	(component: string, importName: string, prop: string, comment?: string) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const specifier =
+			getNamedSpecifier(j, source, component, importName) ||
+			getDefaultSpecifier(j, source, component);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, prop).forEach((attribute) => {
+				j(attribute).remove();
+				if (comment) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+				}
+			});
+		});
+	};

package/codemods/utils/create-remove-imports-for.tsx

@@ -0,0 +1,84 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { type Nullable } from '../types';
+
+import { addCommentToStartOfFile } from './add-comment-to-start-of-file';
+
+export const createRemoveImportsFor: ({
+	importsToRemove,
+	packagePath,
+	comment,
+}: {
+	importsToRemove: string[];
+	packagePath: string;
+	comment: string;
+}) => (j: JSCodeshift, source: Collection<Node>) => void =
+	({
+		importsToRemove,
+		packagePath,
+		comment,
+	}: {
+		importsToRemove: string[];
+		packagePath: string;
+		comment: string;
+	}) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const isUsingName: boolean =
+			source.find(j.ImportDeclaration).filter((path) => path.node.source.value === packagePath)
+				.length > 0;
+		if (!isUsingName) {
+			return;
+		}
+
+		const existingAlias: Nullable<string> =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.map((specifier): Nullable<string> => {
+					if (!importsToRemove.includes(specifier.imported.name)) {
+						return null;
+					}
+					// If aliased: return the alias
+					if (specifier.local && !importsToRemove.includes(specifier.local.name)) {
+						return specifier.local.name;
+					}
+
+					return null;
+				})
+				.filter(Boolean)[0] || null;
+
+		// Remove imports
+		source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === packagePath)
+			.find(j.ImportSpecifier)
+			.find(j.Identifier)
+			.filter((identifier) => {
+				if (
+					importsToRemove.includes(identifier.value.name) ||
+					identifier.value.name === existingAlias
+				) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+					return true;
+				}
+				return false;
+			})
+			.remove();
+
+		// Remove entire import if it is empty
+		const isEmptyImport =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.find(j.ImportSpecifier)
+				.find(j.Identifier).length === 0;
+		if (isEmptyImport) {
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.remove();
+		}
+	};

package/codemods/utils/create-rename-func-for.tsx

@@ -0,0 +1,42 @@
+import { type JSCodeshift, type VariableDeclaration } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { findIdentifierAndReplaceAttribute } from './find-identifier-and-replace-attribute';
+import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import { getNamedSpecifier } from './get-named-specifier';
+import { hasVariableAssignment } from './has-variable-assignment';
+
+export const createRenameFuncFor: (
+	component: string,
+	importName: string,
+	from: string,
+	to: string,
+) => (j: JSCodeshift, source: Collection<Node>) => void =
+	(component: string, importName: string, from: string, to: string) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const specifier = getNamedSpecifier(j, source, component, importName);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, from).forEach((attribute) => {
+				j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value));
+			});
+		});
+
+		let variable = hasVariableAssignment(j, source, specifier);
+		if (variable) {
+			(variable as Collection<VariableDeclaration>)
+				.find(j.VariableDeclarator)
+				.forEach((declarator) => {
+					j(declarator)
+						.find(j.Identifier)
+						.filter((identifier) => identifier.name === 'id')
+						.forEach((ids) => {
+							findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
+						});
+				});
+		}
+	};

package/codemods/utils/create-rename-import-for.tsx

@@ -0,0 +1,98 @@
+import { type ImportDefaultSpecifier, type ImportSpecifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { type Nullable } from '../types';
+
+import { addToImport } from './add-to-import';
+import { tryCreateImport } from './try-create-import';
+
+export const createRenameImportFor: ({
+	componentName,
+	newComponentName,
+	oldPackagePath,
+	newPackagePath,
+}: {
+	componentName: string;
+	newComponentName?: string;
+	oldPackagePath: string;
+	newPackagePath: string;
+}) => (j: JSCodeshift, source: Collection<Node>) => void =
+	({
+		componentName,
+		newComponentName,
+		oldPackagePath,
+		newPackagePath,
+	}: {
+		componentName: string;
+		newComponentName?: string;
+		oldPackagePath: string;
+		newPackagePath: string;
+	}) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const isUsingName: boolean =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === oldPackagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.filter((specifier) => specifier.imported && specifier.imported.name === componentName)
+				.length > 0;
+		if (!isUsingName) {
+			return;
+		}
+
+		const existingAlias: Nullable<string> =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === oldPackagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.map((specifier): Nullable<string> => {
+					if (specifier.imported && specifier.imported.name !== componentName) {
+						return null;
+					}
+					// If aliased: return the alias
+					if (specifier.local && specifier.local.name !== componentName) {
+						return specifier.local.name;
+					}
+
+					return null;
+				})
+				.filter(Boolean)[0] || null;
+
+		// Check to see if need to create new package path
+		// Try create an import declaration just before the old import
+		tryCreateImport({
+			j,
+			base: source,
+			relativeToPackage: oldPackagePath,
+			packageName: newPackagePath,
+		});
+
+		const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
+			// If there's a new name use that
+			if (newComponentName) {
+				return j.importSpecifier(j.identifier(newComponentName), j.identifier(newComponentName));
+			}
+
+			if (existingAlias) {
+				return j.importSpecifier(j.identifier(componentName), j.identifier(existingAlias));
+			}
+
+			// Add specifier
+			return j.importSpecifier(j.identifier(componentName), j.identifier(componentName));
+		})();
+
+		addToImport({
+			j,
+			base: source,
+			importSpecifier: newSpecifier,
+			packageName: newPackagePath,
+		});
+
+		// Remove old path
+		source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === oldPackagePath)
+			.remove();
+	};

package/codemods/utils/create-transformer.tsx

@@ -0,0 +1,23 @@
+import { type API, type FileInfo, type JSCodeshift, type Options } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { hasImportDeclaration } from './has-import-declaration';
+
+export const createTransformer: (
+	component: string,
+	migrates: {
+		(j: JSCodeshift, source: Collection<Node>): void;
+	}[],
+) => (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
+	(component: string, migrates: { (j: JSCodeshift, source: Collection<Node>): void }[]) =>
+	(fileInfo: FileInfo, { jscodeshift }: API, options: Options) => {
+		const source: Collection<Node> = jscodeshift(fileInfo.source);
+
+		if (!hasImportDeclaration(jscodeshift, source, component)) {
+			return fileInfo.source;
+		}
+
+		migrates.forEach((tf) => tf(jscodeshift, source));
+
+		return source.toSource(options.printOptions || { quote: 'single' });
+	};

package/codemods/utils/find-identifier-and-replace-attribute.tsx

@@ -0,0 +1,27 @@
+import { type JSCodeshift } from 'jscodeshift';
+
+export function findIdentifierAndReplaceAttribute(
+	j: JSCodeshift,
+	source: ReturnType<typeof j>,
+	identifierName: string,
+	searchAttr: string,
+	replaceWithAttr: string,
+): void {
+	source
+		.find(j.JSXElement)
+		.find(j.JSXOpeningElement)
+		.filter((path) => {
+			return !!j(path.node)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === identifierName);
+		})
+		.forEach((element) => {
+			j(element)
+				.find(j.JSXAttribute)
+				.find(j.JSXIdentifier)
+				.filter((attr) => attr.node.name === searchAttr)
+				.forEach((attribute) => {
+					j(attribute).replaceWith(j.jsxIdentifier(replaceWithAttr));
+				});
+		});
+}

package/codemods/utils/get-default-specifier.tsx

@@ -0,0 +1,17 @@
+import { type ASTPath, type ImportDeclaration, type JSCodeshift } from 'jscodeshift';
+
+export function getDefaultSpecifier(
+	j: JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
+): string | null {
+	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/codemods/utils/get-jsx-attributes-by-name.tsx

@@ -0,0 +1,18 @@
+import { type ASTPath, type JSCodeshift, type JSXAttribute } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getJSXAttributesByName(
+	j: JSCodeshift,
+	element: ASTPath<any>,
+	attributeName: string,
+): Collection<JSXAttribute> {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
+}

package/codemods/utils/get-named-specifier.tsx

@@ -0,0 +1,24 @@
+import {
+	type ASTPath,
+	type ImportDeclaration,
+	type ImportSpecifier,
+	type JSCodeshift,
+} from 'jscodeshift';
+
+export function getNamedSpecifier(
+	j: JSCodeshift,
+	source: any,
+	specifier: string,
+	importName: string,
+): any {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportSpecifier)
+		.filter((path: ASTPath<ImportSpecifier>) => path.node.imported.name === importName);
+
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
+}

package/codemods/utils/has-import-declaration.tsx

@@ -0,0 +1,12 @@
+import { type ASTPath, type ImportDeclaration, type JSCodeshift } from 'jscodeshift';
+
+export function hasImportDeclaration(j: JSCodeshift, source: any, importPath: string): boolean {
+	const imports = source
+		.find(j.ImportDeclaration)
+		.filter(
+			(path: ASTPath<ImportDeclaration>) =>
+				typeof path.node.source.value === 'string' && path.node.source.value.startsWith(importPath),
+		);
+
+	return Boolean(imports.length);
+}

package/codemods/utils/has-variable-assignment.tsx

@@ -0,0 +1,18 @@
+import { type JSCodeshift, type VariableDeclaration } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function hasVariableAssignment(
+	j: JSCodeshift,
+	source: ReturnType<typeof j>,
+	identifierName: string,
+): Collection<VariableDeclaration> | boolean {
+	const occurance = source.find(j.VariableDeclaration).filter((path) => {
+		return !!j(path.node)
+			.find(j.VariableDeclarator)
+			.find(j.Identifier)
+			.filter((identifier) => {
+				return identifier.node.name === identifierName;
+			}).length;
+	});
+	return !!occurance.length ? occurance : false;
+}

package/codemods/utils/try-create-import.tsx

@@ -0,0 +1,27 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function tryCreateImport({
+	j,
+	base,
+	relativeToPackage,
+	packageName,
+}: {
+	j: JSCodeshift;
+	base: Collection<any>;
+	relativeToPackage: string;
+	packageName: string;
+}): void {
+	const exists: boolean =
+		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
+			.length > 0;
+
+	if (exists) {
+		return;
+	}
+
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === relativeToPackage)
+		.insertBefore(j.importDeclaration([], j.literal(packageName)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "17.3.9",
+	"version": "17.3.11",
 	"description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,6 +25,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "Checkbox",
@@ -34,8 +41,8 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^6.0.0",
-		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/ds-lib": "^7.0.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -47,12 +54,13 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/suppress-react-warnings": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/link": "^3.3.0",
+		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/section-message": "^8.12.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",

package/codemods/migrations/remove-props.tsx

@@ -1,39 +0,0 @@
-import { createRemoveFuncFor } from '../utils';
-
-export const removeFullWidth: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');
-
-export const removeOverrides: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRemoveFuncFor(
-	'@atlaskit/checkbox',
-	'Checkbox',
-	'overrides',
-	`This file uses the @atlaskit/checkbox \`overrides\` prop
-  which has now been removed due to its poor performance characteristics. We have not
-  replaced overrides with an equivalent API and the overrides pattern exposes internal
-  implementation detail as public API and makes it harder for you to upgrade. The appearance
-  of Checkbox will have likely changed.`,
-);
-
-export const removeTheme: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRemoveFuncFor(
-	'@atlaskit/checkbox',
-	'Checkbox',
-	'theme',
-	`This file uses the @atlaskit/checkbox \`theme\` prop which
-  has now been removed due to its poor performance characteristics. We have not replaced
-  theme with an equivalent API due to minimal usage of the \`theme\` prop. However if you
-  were using theme to customise the size of the checkbox there is now a \`size\` prop.
-  The appearance of Checkbox will have likely changed.`,
-);
-
-export const removeSize: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');

package/codemods/migrations/rename-import.tsx

@@ -1,33 +0,0 @@
-import { createRenameImportFor } from '../utils';
-
-// As you could access everything in Checkbox with the old entry points
-// there are a lot of possible things to fix. Having searched on SourceTree
-// these are the only things that need to be fixed
-
-export const renameTypeImport: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRenameImportFor({
-	componentName: 'CheckboxProps',
-	oldPackagePath: '@atlaskit/checkbox/types',
-	newPackagePath: '@atlaskit/checkbox',
-});
-
-export const renameDeepTypeImport: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRenameImportFor({
-	componentName: 'CheckboxProps',
-	oldPackagePath: '@atlaskit/checkbox/dist/cjs/types',
-	newPackagePath: '@atlaskit/checkbox',
-});
-
-export const renameCheckboxWithoutAnalyticsImport: (
-	j: import('jscodeshift/src/core').JSCodeshift,
-	source: import('jscodeshift/src/Collection').Collection<Node>,
-) => void = createRenameImportFor({
-	componentName: 'CheckboxWithoutAnalytics',
-	newComponentName: 'Checkbox',
-	oldPackagePath: '@atlaskit/checkbox/Checkbox',
-	newPackagePath: '@atlaskit/checkbox',
-});

package/codemods/utils.tsx

@@ -1,477 +0,0 @@
-import type {
-	API,
-	ASTPath,
-	default as core,
-	FileInfo,
-	ImportDeclaration,
-	ImportDefaultSpecifier,
-	ImportSpecifier,
-	JSXAttribute,
-	Options,
-	Program,
-	VariableDeclaration,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-export type Nullable<T> = T | null;
-
-export function getNamedSpecifier(
-	j: core.JSCodeshift,
-	source: any,
-	specifier: string,
-	importName: string,
-): any {
-	const specifiers = source
-		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
-		.find(j.ImportSpecifier)
-		.filter((path: ASTPath<ImportSpecifier>) => path.node.imported.name === importName);
-
-	if (!specifiers.length) {
-		return null;
-	}
-	return specifiers.nodes()[0]!.local!.name;
-}
-
-function getDefaultSpecifier(j: core.JSCodeshift, source: ReturnType<typeof j>, 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;
-}
-
-export function getJSXAttributesByName(
-	j: core.JSCodeshift,
-	element: ASTPath<any>,
-	attributeName: string,
-): Collection<JSXAttribute> {
-	return j(element)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXAttribute)
-		.filter((attribute) => {
-			const matches = j(attribute)
-				.find(j.JSXIdentifier)
-				.filter((identifier) => identifier.value.name === attributeName);
-			return Boolean(matches.length);
-		});
-}
-
-export function hasImportDeclaration(
-	j: core.JSCodeshift,
-	source: any,
-	importPath: string,
-): boolean {
-	const imports = source
-		.find(j.ImportDeclaration)
-		.filter(
-			(path: ASTPath<ImportDeclaration>) =>
-				typeof path.node.source.value === 'string' && path.node.source.value.startsWith(importPath),
-		);
-
-	return Boolean(imports.length);
-}
-
-export function findIdentifierAndReplaceAttribute(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	identifierName: string,
-	searchAttr: string,
-	replaceWithAttr: string,
-): void {
-	source
-		.find(j.JSXElement)
-		.find(j.JSXOpeningElement)
-		.filter((path) => {
-			return !!j(path.node)
-				.find(j.JSXIdentifier)
-				.filter((identifier) => identifier.value.name === identifierName);
-		})
-		.forEach((element) => {
-			j(element)
-				.find(j.JSXAttribute)
-				.find(j.JSXIdentifier)
-				.filter((attr) => attr.node.name === searchAttr)
-				.forEach((attribute) => {
-					j(attribute).replaceWith(j.jsxIdentifier(replaceWithAttr));
-				});
-		});
-}
-
-export function hasVariableAssignment(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	identifierName: string,
-): Collection<VariableDeclaration> | boolean {
-	const occurance = source.find(j.VariableDeclaration).filter((path) => {
-		return !!j(path.node)
-			.find(j.VariableDeclarator)
-			.find(j.Identifier)
-			.filter((identifier) => {
-				return identifier.node.name === identifierName;
-			}).length;
-	});
-	return !!occurance.length ? occurance : false;
-}
-
-// not replacing newlines (which \s does)
-const spacesAndTabs: RegExp = /[ \t]{2,}/g;
-const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
-
-function clean(value: string): string {
-	return (
-		value
-			.replace(spacesAndTabs, ' ')
-			.replace(lineStartWithSpaces, '')
-			// using .trim() to clear the any newlines before the first text and after last text
-			.trim()
-	);
-}
-
-export function addCommentToStartOfFile({
-	j,
-	base,
-	message,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<Node>;
-	message: string;
-}): void {
-	addCommentBefore({
-		j,
-		target: base.find(j.Program),
-		message,
-	});
-}
-
-export function addCommentBefore({
-	j,
-	target,
-	message,
-}: {
-	j: core.JSCodeshift;
-	target: Collection<Program> | Collection<ImportDeclaration>;
-	message: string;
-}): void {
-	const content: string = ` TODO: (from codemod) ${clean(message)} `;
-	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
-		path.value.comments = path.value.comments || [];
-
-		const exists = path.value.comments.find((comment) => comment.value === content);
-
-		// avoiding duplicates of the same comment
-		if (exists) {
-			return;
-		}
-
-		path.value.comments.push(j.commentBlock(content));
-	});
-}
-
-export function tryCreateImport({
-	j,
-	base,
-	relativeToPackage,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	relativeToPackage: string;
-	packageName: string;
-}): void {
-	const exists: boolean =
-		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
-			.length > 0;
-
-	if (exists) {
-		return;
-	}
-
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.value.source.value === relativeToPackage)
-		.insertBefore(j.importDeclaration([], j.literal(packageName)));
-}
-
-export function addToImport({
-	j,
-	base,
-	importSpecifier,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
-	packageName: string;
-}): void {
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.value.source.value === packageName)
-		.replaceWith((declaration) => {
-			return j.importDeclaration(
-				[
-					// we are appending to the existing specifiers
-					// We are doing a filter hear because sometimes specifiers can be removed
-					// but they hand around in the declaration
-					...(declaration.value.specifiers || []).filter(
-						(item) => item.type === 'ImportSpecifier' && item.imported != null,
-					),
-					importSpecifier,
-				],
-				j.literal(packageName),
-			);
-		});
-}
-
-export const createRenameFuncFor: (
-	component: string,
-	importName: string,
-	from: string,
-	to: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	(component: string, importName: string, from: string, to: string) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier = getNamedSpecifier(j, source, component, importName);
-
-		if (!specifier) {
-			return;
-		}
-
-		source.findJSXElements(specifier).forEach((element) => {
-			getJSXAttributesByName(j, element, from).forEach((attribute) => {
-				j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value));
-			});
-		});
-
-		let variable = hasVariableAssignment(j, source, specifier);
-		if (variable) {
-			(variable as Collection<VariableDeclaration>)
-				.find(j.VariableDeclarator)
-				.forEach((declarator) => {
-					j(declarator)
-						.find(j.Identifier)
-						.filter((identifier) => identifier.name === 'id')
-						.forEach((ids) => {
-							findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
-						});
-				});
-		}
-	};
-
-export const createRemoveFuncFor: (
-	component: string,
-	importName: string,
-	prop: string,
-	comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	(component: string, importName: string, prop: string, comment?: string) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier =
-			getNamedSpecifier(j, source, component, importName) ||
-			getDefaultSpecifier(j, source, component);
-
-		if (!specifier) {
-			return;
-		}
-
-		source.findJSXElements(specifier).forEach((element) => {
-			getJSXAttributesByName(j, element, prop).forEach((attribute) => {
-				j(attribute).remove();
-				if (comment) {
-					addCommentToStartOfFile({ j, base: source, message: comment });
-				}
-			});
-		});
-	};
-
-export const createRenameImportFor: ({
-	componentName,
-	newComponentName,
-	oldPackagePath,
-	newPackagePath,
-}: {
-	componentName: string;
-	newComponentName?: string;
-	oldPackagePath: string;
-	newPackagePath: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	({
-		componentName,
-		newComponentName,
-		oldPackagePath,
-		newPackagePath,
-	}: {
-		componentName: string;
-		newComponentName?: string;
-		oldPackagePath: string;
-		newPackagePath: string;
-	}) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const isUsingName: boolean =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === oldPackagePath)
-				.find(j.ImportSpecifier)
-				.nodes()
-				.filter((specifier) => specifier.imported && specifier.imported.name === componentName)
-				.length > 0;
-		if (!isUsingName) {
-			return;
-		}
-
-		const existingAlias: Nullable<string> =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === oldPackagePath)
-				.find(j.ImportSpecifier)
-				.nodes()
-				.map((specifier): Nullable<string> => {
-					if (specifier.imported && specifier.imported.name !== componentName) {
-						return null;
-					}
-					// If aliased: return the alias
-					if (specifier.local && specifier.local.name !== componentName) {
-						return specifier.local.name;
-					}
-
-					return null;
-				})
-				.filter(Boolean)[0] || null;
-
-		// Check to see if need to create new package path
-		// Try create an import declaration just before the old import
-		tryCreateImport({
-			j,
-			base: source,
-			relativeToPackage: oldPackagePath,
-			packageName: newPackagePath,
-		});
-
-		const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
-			// If there's a new name use that
-			if (newComponentName) {
-				return j.importSpecifier(j.identifier(newComponentName), j.identifier(newComponentName));
-			}
-
-			if (existingAlias) {
-				return j.importSpecifier(j.identifier(componentName), j.identifier(existingAlias));
-			}
-
-			// Add specifier
-			return j.importSpecifier(j.identifier(componentName), j.identifier(componentName));
-		})();
-
-		addToImport({
-			j,
-			base: source,
-			importSpecifier: newSpecifier,
-			packageName: newPackagePath,
-		});
-
-		// Remove old path
-		source
-			.find(j.ImportDeclaration)
-			.filter((path) => path.node.source.value === oldPackagePath)
-			.remove();
-	};
-
-export const createRemoveImportsFor: ({
-	importsToRemove,
-	packagePath,
-	comment,
-}: {
-	importsToRemove: string[];
-	packagePath: string;
-	comment: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	({
-		importsToRemove,
-		packagePath,
-		comment,
-	}: {
-		importsToRemove: string[];
-		packagePath: string;
-		comment: string;
-	}) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const isUsingName: boolean =
-			source.find(j.ImportDeclaration).filter((path) => path.node.source.value === packagePath)
-				.length > 0;
-		if (!isUsingName) {
-			return;
-		}
-
-		const existingAlias: Nullable<string> =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === packagePath)
-				.find(j.ImportSpecifier)
-				.nodes()
-				.map((specifier): Nullable<string> => {
-					if (!importsToRemove.includes(specifier.imported.name)) {
-						return null;
-					}
-					// If aliased: return the alias
-					if (specifier.local && !importsToRemove.includes(specifier.local.name)) {
-						return specifier.local.name;
-					}
-
-					return null;
-				})
-				.filter(Boolean)[0] || null;
-
-		// Remove imports
-		source
-			.find(j.ImportDeclaration)
-			.filter((path) => path.node.source.value === packagePath)
-			.find(j.ImportSpecifier)
-			.find(j.Identifier)
-			.filter((identifier) => {
-				if (
-					importsToRemove.includes(identifier.value.name) ||
-					identifier.value.name === existingAlias
-				) {
-					addCommentToStartOfFile({ j, base: source, message: comment });
-					return true;
-				}
-				return false;
-			})
-			.remove();
-
-		// Remove entire import if it is empty
-		const isEmptyImport =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === packagePath)
-				.find(j.ImportSpecifier)
-				.find(j.Identifier).length === 0;
-		if (isEmptyImport) {
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === packagePath)
-				.remove();
-		}
-	};
-
-export const createTransformer: (
-	component: string,
-	migrates: {
-		(j: core.JSCodeshift, source: Collection<Node>): void;
-	}[],
-) => (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
-	(component: string, migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[]) =>
-	(fileInfo: FileInfo, { jscodeshift }: API, options: Options) => {
-		const source: Collection<Node> = jscodeshift(fileInfo.source);
-
-		if (!hasImportDeclaration(jscodeshift, source, component)) {
-			return fileInfo.source;
-		}
-
-		migrates.forEach((tf) => tf(jscodeshift, source));
-
-		return source.toSource(options.printOptions || { quote: 'single' });
-	};