@atlaskit/primitives 19.0.0 → 19.0.2

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/primitives
 
+## 19.0.2
+
+### Patch Changes
+
+- [`71fee8de88abc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71fee8de88abc) -
+  Added new design tokens to support the Lozenge / Tag / Badge visual uplift:
+
+  **15 new `color.border.*.subtle` tokens** for decorative borders that do not need to meet 3:1
+  contrast requirements:
+  - 5 semantic: `danger`, `warning`, `success`, `discovery`, `information` (no `neutral.subtle` —
+    the default `color.border` already serves this case)
+  - 10 accent: `red`, `orange`, `yellow`, `lime`, `green`, `teal`, `blue`, `purple`, `magenta`,
+    `gray`
+  - Light theme maps to Color300; dark theme maps to Color800 (DarkNeutral400 for `accent.gray`)
+
+  **5 new `color.background.*.subtle` tokens** for non-interactive elements (e.g. semantic badges,
+  status pills, callout chips):
+  - `danger`, `success`, `discovery`, `information` — light theme maps to Color300, dark theme maps
+    to Color800
+  - `warning` — light theme maps to Orange250, dark theme maps to Orange850 (different stops because
+    Orange300 is already used by `warning.bold`)
+
+  Note: `color.background.*.subtle` is intentionally non-interactive only — no `.hovered` or
+  `.pressed` variants are provided. For interactive surfaces, use `color.background.<semantic>.bold`
+  or `color.background.<semantic>.subtler` instead.
+
+- Updated dependencies
+
+## 19.0.1
+
+### Patch Changes
+
+- [`79f04a5184ece`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79f04a5184ece) -
+  Apply a couple of minor fixes to the stage 1 codemod transform
+
 ## 19.0.0
 
 ### Major Changes

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

@@ -6,6 +6,11 @@ import type {
 	VariableDeclaration,
 } from 'jscodeshift';
 
+// ImportSpecifier with importKind property (exists at runtime but not in type definitions)
+type ImportSpecifierWithKind = ImportSpecifier & {
+	importKind?: 'type' | 'value' | undefined;
+};
+
 const ANCHOR_PRESSABLE_XCSS_PROPS = [
 	'backgroundColor',
 	'padding',
@@ -92,10 +97,21 @@ function transform(file: FileInfo, { jscodeshift: j }: API): string {
 					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',
-					) ?? [];
+
+				// Separate type and value specifiers
+				const typeSpecifiers: ImportSpecifier[] = [];
+				const valueSpecifiers: ImportSpecifier[] = [];
+
+				path.node.specifiers?.forEach((specifier) => {
+					if (j.ImportSpecifier.check(specifier) && specifier.imported.name !== 'xcss') {
+						const specifierWithKind = specifier as ImportSpecifierWithKind;
+						if (specifierWithKind.importKind === 'type') {
+							typeSpecifiers.push(specifier);
+						} else {
+							valueSpecifiers.push(specifier);
+						}
+					}
+				});
 
 				// Find components that use xcss
 				const componentsUsingXcss = new Set<string>();
@@ -118,25 +134,40 @@ function transform(file: FileInfo, { jscodeshift: j }: API): string {
 					}
 				});
 
-				// Split specifiers based on xcss usage
-				const specifiersToKeep = otherSpecifiers.filter(
+				// Split value specifiers based on xcss usage
+				const valueSpecifiersToKeep = valueSpecifiers.filter(
 					(specifier) =>
 						j.ImportSpecifier.check(specifier) && componentsUsingXcss.has(specifier.imported.name),
 				);
-				const specifiersToMove = otherSpecifiers.filter(
+				const valueSpecifiersToMove = valueSpecifiers.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')),
-					);
+				if (valueSpecifiersToMove.length > 0) {
+					// Check if there's an existing compiled import to merge into
+					const existingCompiledImports = root.find(j.ImportDeclaration, {
+						source: { value: '@atlaskit/primitives/compiled' },
+					});
+
+					if (existingCompiledImports.length > 0) {
+						// Merge into first existing compiled import
+						const firstCompiledImport = existingCompiledImports.get(0);
+						const existingSpecifiers = firstCompiledImport.node.specifiers || [];
+						firstCompiledImport.node.specifiers = [...existingSpecifiers, ...valueSpecifiersToMove];
+					} else {
+						// Create new import for components that don't use xcss
+						path.insertAfter(
+							j.importDeclaration(
+								valueSpecifiersToMove,
+								j.literal('@atlaskit/primitives/compiled'),
+							),
+						);
+					}
 				}
 
-				// Update original import to include xcss and components that use it
-				path.node.specifiers = [...xcssSpecifiers, ...specifiersToKeep];
+				// Update original import to include xcss, value specifiers, then type specifiers
+				path.node.specifiers = [...xcssSpecifiers, ...valueSpecifiersToKeep, ...typeSpecifiers];
 			});
 
 		return root.toSource({ quote: 'single' });
@@ -230,14 +261,144 @@ function transform(file: FileInfo, { jscodeshift: j }: API): string {
 	}
 
 	// Find all import declarations from '@atlaskit/primitives'
-	root.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } }).forEach((path) => {
-		// Skip type imports
+	const primitivesImports = root.find(j.ImportDeclaration, {
+		source: { value: '@atlaskit/primitives' },
+	});
+
+	// Collect all value specifiers to move to compiled
+	const valueSpecifiersToMove: ImportSpecifier[] = [];
+	const typeSpecifiersToKeep: ImportSpecifier[] = [];
+	const importsToRemove: Parameters<Parameters<typeof primitivesImports.forEach>[0]>[0][] = [];
+
+	primitivesImports.forEach((path) => {
+		// Handle type-only imports - keep them in @atlaskit/primitives
 		if (path.node.importKind === 'type') {
 			return;
 		}
-		path.node.source = j.literal('@atlaskit/primitives/compiled');
+
+		// Separate type and value specifiers
+		const typeSpecs: ImportSpecifier[] = [];
+		const valueSpecs: ImportSpecifier[] = [];
+
+		path.node.specifiers?.forEach((specifier) => {
+			if (j.ImportSpecifier.check(specifier)) {
+				// Check if this is a type import specifier
+				const specifierWithKind = specifier as ImportSpecifierWithKind;
+				const isTypeSpec = specifierWithKind.importKind === 'type';
+				if (isTypeSpec) {
+					typeSpecs.push(specifier);
+				} else {
+					valueSpecs.push(specifier);
+				}
+			}
+		});
+
+		// If there are type specifiers, keep them in a separate type import
+		if (typeSpecs.length > 0) {
+			typeSpecifiersToKeep.push(...typeSpecs);
+		}
+
+		// Collect value specifiers to move
+		if (valueSpecs.length > 0) {
+			valueSpecifiersToMove.push(...valueSpecs);
+		}
+
+		// Mark this import for removal if it had value specifiers
+		if (valueSpecs.length > 0) {
+			importsToRemove.push(path);
+		}
 	});
 
+	// Remove imports that had value specifiers (type-only imports stay)
+	importsToRemove.forEach((path) => {
+		j(path).remove();
+	});
+
+	// If we have type specifiers to keep, create/update a type import
+	if (typeSpecifiersToKeep.length > 0) {
+		// Check for existing imports from @atlaskit/primitives (not type-only, as we want inline type syntax)
+		const existingPrimitivesImports = root
+			.find(j.ImportDeclaration, {
+				source: { value: '@atlaskit/primitives' },
+			})
+			.filter((path) => path.node.importKind !== 'type');
+
+		if (existingPrimitivesImports.length > 0) {
+			// Merge type specifiers into first existing import (will use inline type syntax)
+			const firstImport = existingPrimitivesImports.get(0);
+			const existingSpecifiers = firstImport.node.specifiers || [];
+			firstImport.node.specifiers = [...existingSpecifiers, ...typeSpecifiersToKeep];
+		} else {
+			// Create new import with inline type syntax (regular import, not type-only)
+			// The specifiers already have importKind: 'type' which will produce inline type syntax
+			const allImports = root.find(j.ImportDeclaration);
+			if (allImports.length > 0) {
+				allImports
+					.at(0)
+					.insertBefore(
+						j.importDeclaration(typeSpecifiersToKeep, j.literal('@atlaskit/primitives')),
+					);
+			} else {
+				root
+					.get()
+					.node.program.body.unshift(
+						j.importDeclaration(typeSpecifiersToKeep, j.literal('@atlaskit/primitives')),
+					);
+			}
+		}
+	}
+
+	// Merge value specifiers into existing compiled import or create new one
+	if (valueSpecifiersToMove.length > 0) {
+		// Find compiled imports again after removals
+		const currentCompiledImports = root.find(j.ImportDeclaration, {
+			source: { value: '@atlaskit/primitives/compiled' },
+		});
+
+		if (currentCompiledImports.length > 0) {
+			// Collect all specifiers from all existing compiled imports
+			const allExistingSpecifiers: ImportSpecifier[] = [];
+			currentCompiledImports.forEach((path) => {
+				const specifiers = path.node.specifiers || [];
+				specifiers.forEach((spec) => {
+					if (j.ImportSpecifier.check(spec)) {
+						allExistingSpecifiers.push(spec);
+					}
+				});
+			});
+
+			// Merge all specifiers into first existing compiled import
+			const firstCompiledImport = currentCompiledImports.get(0);
+			firstCompiledImport.node.specifiers = [...allExistingSpecifiers, ...valueSpecifiersToMove];
+
+			// Remove the other compiled imports (keep only the first one)
+			if (currentCompiledImports.length > 1) {
+				currentCompiledImports.forEach((path, index) => {
+					if (index > 0) {
+						j(path).remove();
+					}
+				});
+			}
+		} else {
+			// Create new compiled import after the last import
+			const allImports = root.find(j.ImportDeclaration);
+			if (allImports.length > 0) {
+				allImports
+					.at(-1)
+					.insertAfter(
+						j.importDeclaration(valueSpecifiersToMove, j.literal('@atlaskit/primitives/compiled')),
+					);
+			} else {
+				// No imports at all, add at the beginning
+				root
+					.get()
+					.node.program.body.unshift(
+						j.importDeclaration(valueSpecifiersToMove, j.literal('@atlaskit/primitives/compiled')),
+					);
+			}
+		}
+	}
+
 	// Find existing cssMap import or alias
 	let cssMapName = 'cssMap';
 	const cssMapImport = root.find(j.ImportDeclaration, {

package/components/flex/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/components/flex",
+  "main": "../../dist/cjs/components/flex.js",
+  "module": "../../dist/esm/components/flex.js",
+  "module:es2019": "../../dist/es2019/components/flex.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/components/flex.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/components/flex.d.ts"
+      ]
+    }
+  }
+}

package/constellation/pressable/usage.mdx

@@ -15,6 +15,8 @@ to an HTML `<button>`, but with Atlassian focus styles, analytics events, and st
 For example, you could use pressable to make a colored square button that opens a color picker, or a
 basic card that shows more details when selected.
 
+## Parts
+
 ![Pressable anatomy](./images/pressable-anatomy.png)
 
 1. **Pressable area:** For accessibility this should be a minimum of 24 by 24 pixels, unless exempt

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

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

package/dist/cjs/compiled/components/box.compiled.css

@@ -56,6 +56,7 @@
 ._bfhk16zl{background-color:var(--ds-background-accent-teal-subtle-pressed,#b1e4f7)}
 ._bfhk1773{background-color:var(--ds-background-accent-yellow-subtler,#f5e989)}
 ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk18ah{background-color:var(--ds-background-accent-purple-subtle,#c97cf4)}
 ._bfhk18j9{background-color:var(--ds-background-accent-gray-subtle,#8c8f97)}
 ._bfhk18ut{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b7b9be)}
@@ -159,7 +160,6 @@
 ._bfhkattl{background-color:var(--ds-background-accent-purple-subtler-hovered,#e3bdfa)}
 ._bfhkaxpp{background-color:var(--ds-background-accent-orange-subtle-pressed,#fbd779)}
 ._bfhkbq5w{background-color:var(--ds-background-accent-lime-subtle,#94c748)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkbyip{background-color:var(--ds-background-accent-gray-bolder-hovered,#505258)}
 ._bfhkc3uk{background-color:var(--ds-background-accent-magenta-bolder,#ae4787)}
 ._bfhkchd4{background-color:var(--ds-elevation-surface-current,#fff)}

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

@@ -13,7 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _surfaceProvider = require("../../utils/surface-provider");
+var _surfaceContext = require("../../utils/surface-context");
 var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
   _excluded2 = ["className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -144,7 +144,7 @@ var backgroundColorMap = {
   'color.background.accent.gray.bolder': "_bfhk1i45",
   'color.background.accent.gray.bolder.hovered': "_bfhkbyip",
   'color.background.accent.gray.bolder.pressed': "_bfhk1van",
-  'color.background.disabled': "_bfhkby5v",
+  'color.background.disabled': "_bfhk187o",
   'color.background.input': "_bfhk1j9a",
   'color.background.input.hovered': "_bfhkl4ek",
   'color.background.input.pressed': "_bfhkr01l",
@@ -346,7 +346,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId
   }), children);
   if (backgroundColor) {
-    return /*#__PURE__*/React.createElement(_surfaceProvider.SurfaceContext.Provider, {
+    return /*#__PURE__*/React.createElement(_surfaceContext.SurfaceContext.Provider, {
       value: backgroundColor
     }, node);
   }

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: "19.0.0",
+    packageVersion: "19.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -169,4 +169,6 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     value: true
   }, component);
 });
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = Text;

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/box.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _surfaceProvider = require("../utils/surface-provider");
+var _surfaceContext = require("../utils/surface-context");
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
 var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
@@ -87,13 +87,15 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
     "data-testid": testId
   }), children);
-  return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
+  return backgroundColor ? (0, _react2.jsx)(_surfaceContext.SurfaceContext.Provider, {
     value: backgroundColor
   }, node) : node;
 }
 // @ts-ignore This typescript error has been surpessed while locally enrolling `@atlaskit/primitives` into Jira
 // The return type of `BoxComponent` does not match the return type of `forwardRef` in React 18
 );
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = Box;
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',

package/dist/cjs/components/pressable.js

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

package/dist/cjs/responsive/build-media-query-css.js

@@ -1,76 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNSAFE_buildBelowMediaQueryCSS = exports.UNSAFE_buildAboveMediaQueryCSS = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-var _constants = require("./constants");
-var _mediaHelper = require("./media-helper");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-/**
- * Build a map of breakpoints to css with media queries and nested styles.
- *
- * @internal Not intended to be used outside of DST at this stage.
- * @experimental Not intended to be used outside of DST at this stage.
- *
- * @example
- * A map to build optional `display:none` for consumption on a div.
- * ```ts
- * const hideMediaQueries = buildAboveMediaQueryCSS({ display: 'none' });
- *
- * const Component = ({ hideAtBreakpoints: ('xs' | 'sm')[], children: ReactNode }) => {
- *   return <div css={hideAtBreakpoints.map(b => hideMediaQueries[b])}>{children}</div>;
- * }
- * ```
- *
- * This roughly builds a map that will look roughly like this (if done manually):
- * ```ts
- * {
- *   xxs: css({ '@media all': { display: 'none' } }),
- *   xs: css({ '@media (min-width: 30rem)': { display: 'none' } }),
- *   sm: css({ '@media (min-width: 48rem)': { display: 'none' } }),
- * }
- * ```
- */
-var UNSAFE_buildAboveMediaQueryCSS = exports.UNSAFE_buildAboveMediaQueryCSS = function UNSAFE_buildAboveMediaQueryCSS(input) {
-  return _constants.UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react.css)((0, _defineProperty2.default)({}, _mediaHelper.media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
-  }, {});
-};
-
-/**
- * Build a map of breakpoints to css with media queries and nested styles.
- *
- * @internal Not intended to be used outside of DST at this stage.
- * @experimental Not intended to be used outside of DST at this stage.
- *
- * @example
- * A map to build optional `display:none` for consumption on a div.
- * ```ts
- * const hideMediaQueries = buildBelowMediaQueryCSS({ display: 'none' });
- *
- * const Component = ({ hideAtBreakpoints: ('xs' | 'sm')[], children: ReactNode }) => {
- *   return <div css={hideAtBreakpoints.map(b => hideMediaQueries[b])}>{children}</div>;
- * }
- * ```
- *
- * This roughly builds a map that will look roughly like this (if done manually):
- * ```ts
- * {
- *   xs: css({ '@media not all and (min-width: 30rem)': { display: 'none' } }),
- *   sm: css({ '@media not all and (min-width: 48rem)': { display: 'none' } }),
- * }
- * ```
- */
-var UNSAFE_buildBelowMediaQueryCSS = exports.UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
-  return _constants.UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
-    if (breakpoint === 'xxs') {
-      return acc;
-    }
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react.css)((0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.below[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
-  }, {});
-};
+Object.defineProperty(exports, "UNSAFE_buildAboveMediaQueryCSS", {
+  enumerable: true,
+  get: function get() {
+    return _unsafeBuildAboveMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_buildBelowMediaQueryCSS", {
+  enumerable: true,
+  get: function get() {
+    return _unsafeBuildBelowMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS;
+  }
+});
+var _unsafeBuildAboveMediaQueryCss = require("./unsafe-build-above-media-query-css");
+var _unsafeBuildBelowMediaQueryCss = require("./unsafe-build-below-media-query-css");

package/dist/cjs/responsive/constants.js

@@ -65,6 +65,7 @@ var UNSAFE_BREAKPOINTS_CONFIG = exports.UNSAFE_BREAKPOINTS_CONFIG = {
  *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
 
 /**
@@ -72,4 +73,5 @@ var UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_ORDERED_LIST =
  * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
  * 2. It's omitted in `media.below` as there's nothing below `0px`.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var SMALLEST_BREAKPOINT = exports.SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];

package/dist/cjs/responsive/hide.js

@@ -8,7 +8,8 @@ exports.Hide = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
-var _buildMediaQueryCss = require("./build-media-query-css");
+var _unsafeBuildAboveMediaQueryCss = require("./unsafe-build-above-media-query-css");
+var _unsafeBuildBelowMediaQueryCss = require("./unsafe-build-below-media-query-css");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -16,10 +17,10 @@ var _buildMediaQueryCss = require("./build-media-query-css");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
-var hideAboveQueries = (0, _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
+var hideAboveQueries = (0, _unsafeBuildAboveMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
   display: 'none'
 });
-var hideBelowQueries = (0, _buildMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS)({
+var hideBelowQueries = (0, _unsafeBuildBelowMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS)({
   display: 'none'
 });
 /**

package/dist/cjs/responsive/media-helper.js

@@ -3,44 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.media = exports.UNSAFE_media = void 0;
-/**
- * This is an object of usable media query helpers using our internal breakpoints configuration.
- *
- * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
- * This means that you should avoid multiple breakpoints taking effect at the same time,
- * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * Instead, make sure that only one breakpoint can take effect at a time,
- * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
- */
-var media = exports.media = {
-  above: {
-    xxs: '@media all',
-    xs: '@media (min-width: 30rem)',
-    sm: '@media (min-width: 48rem)',
-    md: '@media (min-width: 64rem)',
-    lg: '@media (min-width: 90rem)',
-    xl: '@media (min-width: 110.5rem)'
-  },
-  only: {
-    xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
-    xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
-    sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
-    md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
-    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
-    xl: '@media (min-width: 110.5rem)'
-  },
-  below: {
-    xs: '@media not all and (min-width: 30rem)',
-    sm: '@media not all and (min-width: 48rem)',
-    md: '@media not all and (min-width: 64rem)',
-    lg: '@media not all and (min-width: 90rem)',
-    xl: '@media not all and (min-width: 110.5rem)'
+exports.UNSAFE_media = void 0;
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _media.media;
   }
-};
-
+});
+var _media = require("./media");
 /**
  * Keep `UNSAFE_media` for backwards compatibility.
  */
-var UNSAFE_media = exports.UNSAFE_media = media;
+var UNSAFE_media = exports.UNSAFE_media = _media.media;

package/dist/cjs/responsive/media.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.media = void 0;
+var media = exports.media = {
+  above: {
+    xxs: '@media all',
+    xs: '@media (min-width: 30rem)',
+    sm: '@media (min-width: 48rem)',
+    md: '@media (min-width: 64rem)',
+    lg: '@media (min-width: 90rem)',
+    xl: '@media (min-width: 110.5rem)'
+  },
+  only: {
+    xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
+    xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
+    sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
+    md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
+    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
+    xl: '@media (min-width: 110.5rem)'
+  },
+  below: {
+    xs: '@media not all and (min-width: 30rem)',
+    sm: '@media not all and (min-width: 48rem)',
+    md: '@media not all and (min-width: 64rem)',
+    lg: '@media not all and (min-width: 90rem)',
+    xl: '@media not all and (min-width: 110.5rem)'
+  }
+};