@atlaskit/primitives 14.11.3 → 14.11.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/primitives
 
+## 14.11.4
+
+### Patch Changes
+
+- [`31c57f650ba07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/31c57f650ba07) -
+  Improving tests for server side rendering and hydration
+- Updated dependencies
+
 ## 14.11.3
 
 ### Patch Changes

package/anchor/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/anchor.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/anchor.d.ts"
       ]

package/box/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/box.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/box.d.ts"
       ]

package/codemods/compiled-fork-stage1/transform.tsx

@@ -1,4 +1,10 @@
-import type { API, FileInfo, JSXAttribute } from 'jscodeshift';
+import type {
+	API,
+	FileInfo,
+	ImportSpecifier,
+	JSXAttribute,
+	VariableDeclaration,
+} from 'jscodeshift';
 
 const ANCHOR_PRESSABLE_XCSS_PROPS = [
 	'backgroundColor',
@@ -13,28 +19,12 @@ const ANCHOR_PRESSABLE_XCSS_PROPS = [
 
 const GRID_XCSS_PROPS = ['templateRows', 'templateColumns', 'templateAreas'];
 
+const PRIMITIVES_IMPORT_SOURCES = ['@atlaskit/primitives', '@atlaskit/primitives/compiled'];
+
 function transform(file: FileInfo, { jscodeshift: j }: API) {
 	const root = j(file.source);
 	let needsCssMapImport = false;
 
-	// Check if any import from '@atlaskit/primitives' contains 'xcss'
-	const hasDescopedImport = root
-		.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } })
-		.some((path) => {
-			return path.node.specifiers!.some((specifier) => {
-				if (!j.ImportSpecifier.check(specifier)) {
-					return false;
-				}
-
-				return ['xcss', 'media', 'XCSS'].includes(specifier.imported.name);
-			});
-		});
-
-	// If 'xcss' is imported, return the original source without transformations
-	if (hasDescopedImport) {
-		return file.source;
-	}
-
 	// If Box primitive is used with spread props, return the original source without transformations
 	const hasBoxPrimitiveWithSpreadProps = root
 		.find(j.JSXElement, { openingElement: { name: { name: 'Box' } } })
@@ -48,6 +38,144 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 		return file.source;
 	}
 
+	// Check if xcss is imported
+	const hasXcssImport = root
+		.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } })
+		.some(
+			(path) =>
+				path.node.specifiers?.some(
+					(specifier) => j.ImportSpecifier.check(specifier) && specifier.imported.name === 'xcss',
+				) ?? false,
+		);
+
+	// Check if media is imported
+	const hasMediaImport = root
+		.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } })
+		.some(
+			(path) =>
+				path.node.specifiers?.some(
+					(specifier) => j.ImportSpecifier.check(specifier) && specifier.imported.name === 'media',
+				) ?? false,
+		);
+
+	// If media is imported, return the original source without transformations
+	if (hasMediaImport) {
+		return file.source;
+	}
+
+	// If xcss is imported, check if there's only one other primitive component
+	if (hasXcssImport) {
+		const primitiveImports =
+			root
+				.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } })
+				.get()
+				.node.specifiers?.filter(
+					(specifier: ImportSpecifier) =>
+						j.ImportSpecifier.check(specifier) && specifier.imported.name !== 'xcss',
+				) ?? [];
+
+		// If there's only one other primitive component, skip the file
+		if (primitiveImports.length === 1) {
+			return file.source;
+		}
+
+		// Otherwise, split the imports but keep components that use xcss
+		root
+			.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } })
+			.forEach((path) => {
+				// Skip type imports
+				if (path.node.importKind === 'type') {
+					return;
+				}
+
+				const xcssSpecifiers =
+					path.node.specifiers?.filter(
+						(specifier) => j.ImportSpecifier.check(specifier) && specifier.imported.name === 'xcss',
+					) ?? [];
+				const otherSpecifiers =
+					path.node.specifiers?.filter(
+						(specifier) => j.ImportSpecifier.check(specifier) && specifier.imported.name !== 'xcss',
+					) ?? [];
+
+				// Find components that use xcss
+				const componentsUsingXcss = new Set<string>();
+				root.find(j.JSXElement).forEach((jsxPath) => {
+					if (!j.JSXIdentifier.check(jsxPath.node.openingElement.name)) {
+						return;
+					}
+
+					const elementName = jsxPath.node.openingElement.name.name;
+					const attributes = jsxPath.node.openingElement.attributes || [];
+					const hasXcssProp = attributes.some(
+						(attr) =>
+							j.JSXAttribute.check(attr) &&
+							j.JSXIdentifier.check(attr.name) &&
+							attr.name.name === 'xcss',
+					);
+
+					if (hasXcssProp) {
+						componentsUsingXcss.add(elementName);
+					}
+				});
+
+				// Split specifiers based on xcss usage
+				const specifiersToKeep = otherSpecifiers.filter(
+					(specifier) =>
+						j.ImportSpecifier.check(specifier) && componentsUsingXcss.has(specifier.imported.name),
+				);
+				const specifiersToMove = otherSpecifiers.filter(
+					(specifier) =>
+						j.ImportSpecifier.check(specifier) && !componentsUsingXcss.has(specifier.imported.name),
+				);
+
+				if (specifiersToMove.length > 0) {
+					// Add new import for components that don't use xcss
+					path.insertAfter(
+						j.importDeclaration(specifiersToMove, j.literal('@atlaskit/primitives/compiled')),
+					);
+				}
+
+				// Update original import to include xcss and components that use it
+				path.node.specifiers = [...xcssSpecifiers, ...specifiersToKeep];
+			});
+
+		return root.toSource({ quote: 'single' });
+	}
+
+	// Check if any component uses xcss
+	const hasXcssUsage = root.find(j.JSXElement).some((path) => {
+		if (!j.JSXIdentifier.check(path.node.openingElement.name)) {
+			return false;
+		}
+
+		const elementName = path.node.openingElement.name.name;
+		const isPrimitiveComponent = PRIMITIVES_IMPORT_SOURCES.some((importSource) =>
+			root.find(j.ImportDeclaration, { source: { value: importSource } }).some((importPath) => {
+				return importPath.node.specifiers!.some((specifier) => {
+					if (!j.ImportSpecifier.check(specifier)) {
+						return false;
+					}
+					return specifier.local?.name === elementName;
+				});
+			}),
+		);
+
+		if (!isPrimitiveComponent) {
+			return false;
+		}
+
+		const attributes = path.node.openingElement.attributes || [];
+		return attributes.some(
+			(attr) =>
+				j.JSXAttribute.check(attr) && j.JSXIdentifier.check(attr.name) && attr.name.name === 'xcss',
+		);
+	});
+
+	// If any component uses xcss, return the original source without transformations
+	if (hasXcssUsage) {
+		return file.source;
+	}
+
 	// Has @atlaskit/primitives import?
 	const hasPrimitivesImport =
 		root.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } }).length > 0;
@@ -56,9 +184,57 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 		return file.source;
 	}
 
+	// Check if any component has mixed xcss usage by looking at JSX elements directly
+	const componentXcssUsage = new Map<string, boolean>();
+	const hasMixedXcssUsage = root.find(j.JSXElement).some((path) => {
+		if (!j.JSXIdentifier.check(path.node.openingElement.name)) {
+			return false;
+		}
+
+		const elementName = path.node.openingElement.name.name;
+		const isPrimitiveComponent = PRIMITIVES_IMPORT_SOURCES.some((importSource) =>
+			root.find(j.ImportDeclaration, { source: { value: importSource } }).some((importPath) => {
+				return importPath.node.specifiers!.some((specifier) => {
+					if (!j.ImportSpecifier.check(specifier)) {
+						return false;
+					}
+					return specifier.local?.name === elementName;
+				});
+			}),
+		);
+
+		if (!isPrimitiveComponent) {
+			return false;
+		}
+
+		const attributes = path.node.openingElement.attributes || [];
+		const props = attributes.filter((attr) => j.JSXAttribute.check(attr)) as Array<JSXAttribute>;
+		const hasXcssProp = props.some(
+			(prop) => j.JSXIdentifier.check(prop.name) && prop.name.name === 'xcss',
+		);
+
+		// Track xcss usage for this component type
+		if (!componentXcssUsage.has(elementName)) {
+			componentXcssUsage.set(elementName, hasXcssProp);
+		} else if (componentXcssUsage.get(elementName) !== hasXcssProp) {
+			// If we've seen this component before and the xcss usage is different, we have mixed usage
+			return true;
+		}
+
+		return false;
+	});
+
+	// If there's mixed xcss usage, don't transform anything
+	if (hasMixedXcssUsage) {
+		return file.source;
+	}
+
 	// Find all import declarations from '@atlaskit/primitives'
 	root.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } }).forEach((path) => {
-		// Change the import to '@atlaskit/primitives/compiled'
+		// Skip type imports
+		if (path.node.importKind === 'type') {
+			return;
+		}
 		path.node.source = j.literal('@atlaskit/primitives/compiled');
 	});
 
@@ -77,21 +253,70 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 		}
 	}
 
-	// Find JSX elements for Grid, Anchor and Pressable
-	root.find(j.JSXElement).forEach((path) => {
+	// Find all existing cssMap declarations
+	const existingCssMapDeclarations = new Map<string, string>();
+	root.find(j.VariableDeclaration).forEach((path) => {
+		const declaration = path.node.declarations[0];
+		if (
+			j.VariableDeclarator.check(declaration) &&
+			j.Identifier.check(declaration.id) &&
+			j.CallExpression.check(declaration.init) &&
+			j.Identifier.check(declaration.init.callee) &&
+			declaration.init.callee.name === cssMapName
+		) {
+			existingCssMapDeclarations.set(declaration.id.name, declaration.id.name);
+		}
+	});
+
+	// Find all JSX elements
+	const jsxElements = root.find(j.JSXElement).paths();
+	const processedComponentTypes = new Map<
+		string,
+		{ name: string; declaration: VariableDeclaration }
+	>();
+
+	// Add token import if needed
+	let needsTokenImport = false;
+
+	jsxElements.forEach((path) => {
 		if (!j.JSXIdentifier.check(path.node.openingElement.name)) {
 			return;
 		}
 
 		const elementName = path.node.openingElement.name.name;
-		if (elementName !== 'Grid' && elementName !== 'Anchor' && elementName !== 'Pressable') {
+
+		// Find if this component is imported from @atlaskit/primitives or @atlaskit/primitives/compiled
+		const isPrimitiveComponent = PRIMITIVES_IMPORT_SOURCES.some((importSource) =>
+			root.find(j.ImportDeclaration, { source: { value: importSource } }).some((importPath) => {
+				return importPath.node.specifiers!.some((specifier) => {
+					if (!j.ImportSpecifier.check(specifier)) {
+						return false;
+					}
+					return specifier.local?.name === elementName;
+				});
+			}),
+		);
+
+		if (!isPrimitiveComponent) {
 			return;
 		}
 
 		const attributes = path.node.openingElement.attributes || [];
 		const props = attributes.filter((attr) => j.JSXAttribute.check(attr)) as Array<JSXAttribute>;
 
-		const xcssProps = elementName === 'Grid' ? GRID_XCSS_PROPS : ANCHOR_PRESSABLE_XCSS_PROPS;
+		// Skip if component already has xcss prop
+		const hasXcss = props.some(
+			(prop) => j.JSXIdentifier.check(prop.name) && prop.name.name === 'xcss',
+		);
+
+		if (hasXcss) {
+			return;
+		}
+
+		const xcssProps =
+			elementName === 'Grid'
+				? [...GRID_XCSS_PROPS, ...ANCHOR_PRESSABLE_XCSS_PROPS]
+				: ANCHOR_PRESSABLE_XCSS_PROPS;
 		const propsToTransform = props.filter(
 			(prop) => j.JSXIdentifier.check(prop.name) && xcssProps.includes(prop.name.name),
 		);
@@ -105,6 +330,45 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 		// Create styles variable name
 		const stylesName = `${elementName.toLowerCase()}Styles`;
 
+		// Skip if we've already processed this component type
+		if (processedComponentTypes.has(elementName)) {
+			// Use existing styles
+			const existingStyles = processedComponentTypes.get(elementName)!;
+			// Remove transformed props and add xcss prop
+			propsToTransform.forEach((prop) => {
+				const index = attributes.indexOf(prop);
+				attributes.splice(index, 1);
+			});
+			attributes.push(
+				j.jsxAttribute(
+					j.jsxIdentifier('xcss'),
+					j.jsxExpressionContainer(
+						j.memberExpression(j.identifier(existingStyles.name), j.identifier('root')),
+					),
+				),
+			);
+			return;
+		}
+
+		// Skip if we already have a cssMap declaration for this component type
+		if (existingCssMapDeclarations.has(stylesName)) {
+			// Remove transformed props and add xcss prop
+			propsToTransform.forEach((prop) => {
+				const index = attributes.indexOf(prop);
+				attributes.splice(index, 1);
+			});
+
+			attributes.push(
+				j.jsxAttribute(
+					j.jsxIdentifier('xcss'),
+					j.jsxExpressionContainer(
+						j.memberExpression(j.identifier(stylesName), j.identifier('root')),
+					),
+				),
+			);
+			return;
+		}
+
 		// Create cssMap declaration
 		const styleObj = j.objectExpression(
 			propsToTransform.map((prop) => {
@@ -127,6 +391,15 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 					return j.objectProperty(j.identifier(cssPropName), prop.value.expression);
 				}
 
+				// Only wrap string values in token() if they're not grid props
+				if (j.StringLiteral.check(prop.value) && !propName.startsWith('template')) {
+					needsTokenImport = true;
+					return j.objectProperty(
+						j.identifier(cssPropName),
+						j.callExpression(j.identifier('token'), [prop.value]),
+					);
+				}
+
 				return j.objectProperty(j.identifier(cssPropName), prop.value);
 			}),
 		);
@@ -140,50 +413,35 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 			),
 		]);
 
-		const importDeclaration = root.find(j.ImportDeclaration, {
-			source: { value: '@atlaskit/primitives/compiled' },
-		});
-
-		if (importDeclaration.length > 0) {
-			// insert after the last import declaration
-			const imports = root.find(j.ImportDeclaration);
-			const lastImport = imports.at(imports.length - 1);
-
-			const cssMapDeclaration = root
-				.find(j.VariableDeclaration)
-				// @ts-expect-error
-				.filter((path) => path.node.declarations[0].id.name === stylesName);
-
-			if (lastImport && !cssMapDeclaration.length) {
-				lastImport.insertAfter(cssMapDecl);
-			}
-		}
+		processedComponentTypes.set(elementName, { name: stylesName, declaration: cssMapDecl });
 
-		// Remove transformed props and add xcss prop
+		// Remove all props and add xcss prop
 		propsToTransform.forEach((prop) => {
 			const index = attributes.indexOf(prop);
 			attributes.splice(index, 1);
 		});
 
-		const existingXcss = props.find(
-			(prop) => j.JSXIdentifier.check(prop.name) && prop.name.name === 'xcss',
-		);
-
-		const xcssValue = existingXcss
-			? j.arrayExpression([
+		attributes.push(
+			j.jsxAttribute(
+				j.jsxIdentifier('xcss'),
+				j.jsxExpressionContainer(
 					j.memberExpression(j.identifier(stylesName), j.identifier('root')),
-					// @ts-expect-error
-					existingXcss.value.expression,
-				])
-			: j.memberExpression(j.identifier(stylesName), j.identifier('root'));
-
-		if (existingXcss) {
-			existingXcss.value = j.jsxExpressionContainer(xcssValue);
-		} else {
-			attributes.push(j.jsxAttribute(j.jsxIdentifier('xcss'), j.jsxExpressionContainer(xcssValue)));
-		}
+				),
+			),
+		);
 	});
 
+	// Insert cssMap declarations after the last import declaration
+	const imports = root.find(j.ImportDeclaration);
+	const lastImport = imports.at(imports.length - 1);
+
+	if (lastImport) {
+		// Insert declarations in the order they were first encountered
+		Array.from(processedComponentTypes.values()).forEach(({ declaration }) => {
+			lastImport.insertAfter(declaration);
+		});
+	}
+
 	// Add cssMap import if needed
 	if (needsCssMapImport && cssMapImport.length === 0) {
 		root
@@ -196,6 +454,18 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 			);
 	}
 
+	// Add token import if needed
+	if (needsTokenImport) {
+		root
+			.get()
+			.node.program.body.unshift(
+				j.importDeclaration(
+					[j.importSpecifier(j.identifier('token'))],
+					j.literal('@atlaskit/tokens'),
+				),
+			);
+	}
+
 	return root.toSource({ quote: 'single' });
 }
 

package/compiled/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/compiled/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/compiled/index.d.ts"
       ]

package/dist/cjs/compiled/components/anchor.js

@@ -71,7 +71,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/pressable.js

@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/anchor.js

@@ -104,7 +104,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/anchor.js

@@ -57,7 +57,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -94,7 +94,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/compiled/components/anchor.js

@@ -62,7 +62,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -98,7 +98,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/pressable.js

@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.2",
+    packageVersion: "14.11.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/types/compiled/responsive/use-media-query.d.ts

@@ -19,5 +19,5 @@ type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof ty
  *  - `MediaQueryList`, primarily used to get if that media query is currently
  *  - `null` when `matchMedia` is unavailable, eg. in SSR.
  */
-export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
+export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: (event: MediaQueryListEvent) => void) => MediaQueryList | null;
 export {};

package/dist/types/responsive/build-media-query-css.d.ts

@@ -25,7 +25,12 @@ import type { Breakpoint } from './types';
  * }
  * ```
  */
-export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+export declare const UNSAFE_buildAboveMediaQueryCSS: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
 /**
  * Build a map of breakpoints to css with media queries and nested styles.
  *
@@ -50,4 +55,9 @@ export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((break
  * }
  * ```
  */
-export declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+export declare const UNSAFE_buildBelowMediaQueryCSS: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

package/dist/types/responsive/use-media-query.d.ts

@@ -19,5 +19,5 @@ type NestedQueryString = `above.${keyof typeof UNSAFE_media.above}` | `below.${k
  *  - `MediaQueryList`, primarily used to get if that media query is currently
  *  - `null` when `matchMedia` is unavailable, eg. in SSR.
  */
-export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
+export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: (event: MediaQueryListEvent) => void) => MediaQueryList | null;
 export {};

package/dist/types/utils/has-text-ancestor-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @internal
  */

package/dist/types/utils/surface-provider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BackgroundColorToken } from './types';
 /**
  * __Surface context__

package/dist/types/xcss/style-maps.partial.d.ts

@@ -729,6 +729,6 @@ export declare const fontStylesMap: FontStyleMap;
 export declare const textSizeStylesMap: TextStyleMap;
 export declare const textWeightStylesMap: TextWeightStyleMap;
 export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
-export declare const isSurfaceColorToken: (color: unknown) => color is "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken";
+export declare const isSurfaceColorToken: (color: unknown) => color is SurfaceColorToken;
 export declare const metricTextSizeStylesMap: MetricTextStyleMap;
 export {};

package/dist/types-ts4.5/compiled/responsive/use-media-query.d.ts

@@ -19,5 +19,5 @@ type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof ty
  *  - `MediaQueryList`, primarily used to get if that media query is currently
  *  - `null` when `matchMedia` is unavailable, eg. in SSR.
  */
-export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
+export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: (event: MediaQueryListEvent) => void) => MediaQueryList | null;
 export {};

package/dist/types-ts4.5/responsive/build-media-query-css.d.ts

@@ -25,7 +25,12 @@ import type { Breakpoint } from './types';
  * }
  * ```
  */
-export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+export declare const UNSAFE_buildAboveMediaQueryCSS: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
 /**
  * Build a map of breakpoints to css with media queries and nested styles.
  *
@@ -50,4 +55,9 @@ export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((break
  * }
  * ```
  */
-export declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+export declare const UNSAFE_buildBelowMediaQueryCSS: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

package/dist/types-ts4.5/responsive/use-media-query.d.ts

@@ -19,5 +19,5 @@ type NestedQueryString = `above.${keyof typeof UNSAFE_media.above}` | `below.${k
  *  - `MediaQueryList`, primarily used to get if that media query is currently
  *  - `null` when `matchMedia` is unavailable, eg. in SSR.
  */
-export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
+export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: (event: MediaQueryListEvent) => void) => MediaQueryList | null;
 export {};

package/dist/types-ts4.5/utils/has-text-ancestor-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @internal
  */

package/dist/types-ts4.5/utils/surface-provider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BackgroundColorToken } from './types';
 /**
  * __Surface context__

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -740,6 +740,6 @@ export declare const fontStylesMap: FontStyleMap;
 export declare const textSizeStylesMap: TextStyleMap;
 export declare const textWeightStylesMap: TextWeightStyleMap;
 export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
-export declare const isSurfaceColorToken: (color: unknown) => color is "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken";
+export declare const isSurfaceColorToken: (color: unknown) => color is SurfaceColorToken;
 export declare const metricTextSizeStylesMap: MetricTextStyleMap;
 export {};

package/inline/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/inline.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/inline.d.ts"
       ]

package/metric-text/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/metric-text.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/metric-text.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "14.11.3",
+	"version": "14.11.4",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -133,7 +133,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/app-provider": "^3.0.0",
+		"@atlaskit/app-provider": "^3.1.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
@@ -156,21 +156,21 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/docs": "^11.0.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/flag": "^17.3.0",
-		"@atlaskit/form": "^12.0.0",
+		"@atlaskit/form": "^12.1.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.9.0",
-		"@atlaskit/icon-object": "^7.1.0",
+		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/icon-object": "^7.2.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/logo": "^19.6.0",
+		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/motion": "^5.1.0",
+		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/section-message": "^8.5.0",
 		"@atlaskit/textfield": "^8.0.0",
@@ -179,7 +179,7 @@
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/analytics-bridge": "^0.7.0",
 		"@atlassian/codegen": "^0.1.0",
-		"@atlassian/ssr-tests": "^0.2.0",
+		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
@@ -187,8 +187,7 @@
 		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0",
 		"react-resource-router": "^0.20.0",
-		"ts-node": "^10.9.1",
-		"typescript": "~5.4.2"
+		"ts-node": "^10.9.1"
 	},
 	"techstack": {
 		"@atlassian/frontend": {

package/pressable/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/pressable.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/pressable.d.ts"
       ]

package/responsive/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/responsive/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/responsive/index.d.ts"
       ]

package/stack/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/stack.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/stack.d.ts"
       ]

package/text/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/text.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/text.d.ts"
       ]