@atlaskit/primitives 18.1.4 → 19.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/primitives
 
+## 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
+
+- [`72017386a0120`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/72017386a0120) -
+  Remove the deprecated `UNSAFE_small` size for the Text primitive. Please migrate any remaining
+  usages to `small`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.1.4
 
 ### Patch 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/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); }
@@ -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/text.compiled.css

@@ -1,6 +1,5 @@
 ._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8rymc{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18m915vq{overflow-y:hidden}
 ._18u0idpf{margin-left:0}

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

@@ -47,7 +47,6 @@ var styles = {
 };
 var fontSizeMap = {
   medium: "_11c8fhey",
-  UNSAFE_small: "_11c8rymc",
   large: "_11c81d4k",
   small: "_11c8wadc"
 };

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,7 +87,7 @@ 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;
 }

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/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)'
+  }
+};

package/dist/cjs/responsive/show.js

@@ -8,7 +8,8 @@ exports.Show = 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 -- Ignored via go/DSP-18766
 
-var showAboveQueries = (0, _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
+var showAboveQueries = (0, _unsafeBuildAboveMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
   display: 'revert'
 });
-var showBelowQueries = (0, _buildMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS)({
+var showBelowQueries = (0, _unsafeBuildBelowMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS)({
   display: 'revert'
 });
 var defaultHiddenStyles = (0, _react.css)({

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_buildAboveMediaQueryCSS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _constants = require("./constants");
+var _media = require("./media");
+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
+/**
+ * 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)({}, _media.media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_buildBelowMediaQueryCSS = 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
+/**
+ * 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))));
+  }, {});
+};