@atlaskit/primitives 0.14.3 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 0.15.1
+
+### Patch Changes
+
+- [`7c1c449eb96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c1c449eb96) - Updated space token descriptions.
+
+## 0.15.0
+
+### Minor Changes
+
+- [`8b04f3e78bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b04f3e78bd) - Adds basic `<Show>` and `<Hide>` responsive primitive components to make consistent, composable UIs without writing a dozen lines for just one `display: none` css rule.
+
+  Additionally:
+
+  - Adds some further examples, tests, and VRs.
+  - Tweaks some internals around building these reusable media query maps.
+
 ## 0.14.3
 
 ### Patch Changes

package/constellation/responsive/examples.mdx

@@ -0,0 +1,51 @@
+---
+title: Responsive
+description: Responsive helpers and primitives to build responsive UIs with
+order: 1
+---
+
+import CSSExample from '../../examples/constellation/responsive/css';
+import XCSSExample from '../../examples/constellation/responsive/xcss';
+import ShowExample from '../../examples/constellation/responsive/show';
+import HideExample from '../../examples/constellation/responsive/hide';
+import ShowHideExample from '../../examples/constellation/responsive/show-hide';
+
+## Responsive `css` or `xcss`
+
+Utilize our media queries exposed in `css`, `styled`, or `xcss` as computed keys to build responsive UIs. Learn more about these media query exports in [usage](/components/primitives/responsive/usage).
+
+### Using with `xcss`
+
+Please use `xcss` whenever possible to ensure consistency and safety with style overrides.  Read more at [xcss](/components/primitives/xcss)
+
+<Example Component={XCSSExample} packageName="@atlaskit/primitives/responsive" />
+
+### Using with `css`
+<Example Component={CSSExample} packageName="@atlaskit/primitives/responsive" />
+
+
+## Responsive primitives
+
+Consider these shortcuts to writing your own custom media queries.  Composing with our primitives will be far quicker and consistent to implement, but may result in excess DOM nodes.
+
+### Show
+
+This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+
+Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
+
+<Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
+
+### Hide
+
+This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+
+When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
+
+<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
+
+### Mixing Show and Hide
+
+Prefer using consistent `above` or `below` for readability and consistency.
+
+<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />

package/constellation/responsive/usage.mdx

@@ -1,7 +1,7 @@
 ---
 title: Responsive
 description: Responsive helpers and primitives to build responsive UIs with
-order: 1
+order: 2
 ---
 
 ## Media query helpers

package/dist/cjs/index.js

@@ -44,4 +44,4 @@ var _box = _interopRequireDefault(require("./components/box"));
 var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));
-var _responsive = require("./helpers/responsive");
+var _responsive = require("./responsive");

package/dist/cjs/{helpers/responsive → responsive}/build-media-query-css.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNSAFE_buildAboveMediaQueryCSS = void 0;
+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");
@@ -14,7 +14,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /**
  * Build a map of breakpoints to css with media queries and nested styles.
  *
- * @experimental Unsafe for usage as the API is not finalized.
+ * @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.
@@ -29,9 +30,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * This roughly builds a map that will look roughly like this (if done manually):
  * ```ts
  * {
- *   xxs: css({ '@media (min-width: 0px)': { display: 'none' } }),
- *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
- *   sm: css({ '@media (min-width: …px)': { display: 'none' } }),
+ *   xxs: css({ '@media all': { display: 'none' } }),
+ *   xs: css({ '@media (min-width: 30rem)': { display: 'none' } }),
+ *   sm: css({ '@media (min-width: 48rem)': { display: 'none' } }),
  * }
  * ```
  */
@@ -40,4 +41,38 @@ var UNSAFE_buildAboveMediaQueryCSS = function UNSAFE_buildAboveMediaQueryCSS(inp
     return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react.css)((0, _defineProperty2.default)({}, _mediaHelper.media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
   }, {});
 };
-exports.UNSAFE_buildAboveMediaQueryCSS = UNSAFE_buildAboveMediaQueryCSS;
+
+/**
+ * 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' } }),
+ * }
+ * ```
+ */
+exports.UNSAFE_buildAboveMediaQueryCSS = UNSAFE_buildAboveMediaQueryCSS;
+var 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))));
+  }, {});
+};
+exports.UNSAFE_buildBelowMediaQueryCSS = UNSAFE_buildBelowMediaQueryCSS;

package/dist/cjs/responsive/hide.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Hide = void 0;
+var _react = require("@emotion/react");
+var _buildMediaQueryCss = require("./build-media-query-css");
+/** @jsx jsx */
+
+var hideAboveQueries = (0, _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
+  display: 'none'
+});
+var hideBelowQueries = (0, _buildMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS)({
+  display: 'none'
+});
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+var Hide = function Hide(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as;
+  return (0, _react.jsx)(AsElement, {
+    css: [above && hideAboveQueries[above], below && hideBelowQueries[below]]
+  }, children);
+};
+exports.Hide = Hide;

package/dist/cjs/{helpers/responsive → responsive}/index.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Hide", {
+  enumerable: true,
+  get: function get() {
+    return _hide.Hide;
+  }
+});
+Object.defineProperty(exports, "Show", {
+  enumerable: true,
+  get: function get() {
+    return _show.Show;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
   enumerable: true,
   get: function get() {
@@ -42,4 +54,6 @@ Object.defineProperty(exports, "media", {
 var _mediaHelper = require("./media-helper");
 var _buildMediaQueryCss = require("./build-media-query-css");
 var _constants = require("./constants");
-var _useMediaQuery = require("./use-media-query");
+var _useMediaQuery = require("./use-media-query");
+var _show = require("./show");
+var _hide = require("./hide");

package/dist/cjs/responsive/show.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Show = void 0;
+var _react = require("@emotion/react");
+var _buildMediaQueryCss = require("./build-media-query-css");
+/** @jsx jsx */
+
+var showAboveQueries = (0, _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
+  display: 'revert'
+});
+var showBelowQueries = (0, _buildMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS)({
+  display: 'revert'
+});
+var defaultHiddenStyles = (0, _react.css)({
+  display: 'none'
+});
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+var Show = function Show(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as;
+  return (0, _react.jsx)(AsElement, {
+    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below]]
+  }, children);
+};
+exports.Show = Show;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.14.3",
+	"version": "0.15.1",
 	"sideEffects": false
 }

package/dist/cjs/xcss/style-maps.partial.js

@@ -32,10 +32,10 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0233b43df51e5fcf058349b5bff46ee3>>
+ * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::16655ab13ccb56521faa354636af2c8e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
  */
 var spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",

package/dist/cjs/xcss/xcss.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
-var _responsive = require("../helpers/responsive");
+var _mediaHelper = require("../responsive/media-helper");
 var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -82,7 +82,7 @@ var reMediaQuery = /^@media .*$/;
 /**
  * Reduce our media queries into a safe string for regex comparison.
  */
-var reValidMediaQuery = new RegExp("^(".concat(Object.values(_responsive.media.above).map(function (mediaQuery) {
+var reValidMediaQuery = new RegExp("^(".concat(Object.values(_mediaHelper.media.above).map(function (mediaQuery) {
   return mediaQuery.replace(/[.()]/g, '\\$&');
 } // Escape the ".", "(", and ")" in the media query syntax.
 ).join('|'), ")$"));

package/dist/es2019/index.js

@@ -2,4 +2,4 @@ export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './helpers/responsive';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

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

@@ -0,0 +1,76 @@
+import { css } from '@emotion/react';
+import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
+import { media, UNSAFE_media } from './media-helper';
+/**
+ * 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' } }),
+ * }
+ * ```
+ */
+export const UNSAFE_buildAboveMediaQueryCSS = input => {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
+    ...acc,
+    [breakpoint]: css({
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      [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' } }),
+ * }
+ * ```
+ */
+export const UNSAFE_buildBelowMediaQueryCSS = input => {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => {
+    if (breakpoint === 'xxs') {
+      return acc;
+    }
+    return {
+      ...acc,
+      [breakpoint]: css({
+        // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+        [UNSAFE_media.below[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
+      })
+    };
+  }, {});
+};

package/dist/es2019/responsive/hide.js

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+const hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
+  display: 'none'
+});
+const hideBelowQueries = UNSAFE_buildBelowMediaQueryCSS({
+  display: 'none'
+});
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export const Hide = ({
+  above,
+  below,
+  children,
+  as: AsElement = 'div'
+}) => {
+  return jsx(AsElement, {
+    css: [above && hideAboveQueries[above], below && hideBelowQueries[below]]
+  }, children);
+};

package/dist/es2019/{helpers/responsive → responsive}/index.js

@@ -1,4 +1,6 @@
 export { media, UNSAFE_media } from './media-helper';
 export { UNSAFE_buildAboveMediaQueryCSS } from './build-media-query-css';
 export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
-export { UNSAFE_useMediaQuery } from './use-media-query';
+export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

package/dist/es2019/responsive/show.js

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+const showAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
+  display: 'revert'
+});
+const showBelowQueries = UNSAFE_buildBelowMediaQueryCSS({
+  display: 'revert'
+});
+const defaultHiddenStyles = css({
+  display: 'none'
+});
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export const Show = ({
+  above,
+  below,
+  children,
+  as: AsElement = 'div'
+}) => {
+  return jsx(AsElement, {
+    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below]]
+  }, children);
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.14.3",
+	"version": "0.15.1",
 	"sideEffects": false
 }

package/dist/es2019/xcss/style-maps.partial.js

@@ -22,10 +22,10 @@ export const dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0233b43df51e5fcf058349b5bff46ee3>>
+ * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::16655ab13ccb56521faa354636af2c8e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
  */
 export const spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",

package/dist/es2019/xcss/xcss.js

@@ -1,7 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { media } from '../helpers/responsive';
+import { media } from '../responsive/media-helper';
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   backgroundColor: backgroundColorMap,

package/dist/esm/index.js

@@ -2,4 +2,4 @@ export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './helpers/responsive';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/esm/{helpers/responsive → responsive}/build-media-query-css.js

@@ -3,11 +3,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { css } from '@emotion/react';
 import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
-import { media } from './media-helper';
+import { media, UNSAFE_media } from './media-helper';
 /**
  * Build a map of breakpoints to css with media queries and nested styles.
  *
- * @experimental Unsafe for usage as the API is not finalized.
+ * @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.
@@ -22,9 +23,9 @@ import { media } from './media-helper';
  * This roughly builds a map that will look roughly like this (if done manually):
  * ```ts
  * {
- *   xxs: css({ '@media (min-width: 0px)': { display: 'none' } }),
- *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
- *   sm: css({ '@media (min-width: …px)': { display: 'none' } }),
+ *   xxs: css({ '@media all': { display: 'none' } }),
+ *   xs: css({ '@media (min-width: 30rem)': { display: 'none' } }),
+ *   sm: css({ '@media (min-width: 48rem)': { display: 'none' } }),
  * }
  * ```
  */
@@ -32,4 +33,37 @@ export var UNSAFE_buildAboveMediaQueryCSS = function UNSAFE_buildAboveMediaQuery
   return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
     return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, 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' } }),
+ * }
+ * ```
+ */
+export var UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
+    if (breakpoint === 'xxs') {
+      return acc;
+    }
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, UNSAFE_media.below[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
 };

package/dist/esm/responsive/hide.js

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+var hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
+  display: 'none'
+});
+var hideBelowQueries = UNSAFE_buildBelowMediaQueryCSS({
+  display: 'none'
+});
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export var Hide = function Hide(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as;
+  return jsx(AsElement, {
+    css: [above && hideAboveQueries[above], below && hideBelowQueries[below]]
+  }, children);
+};

package/dist/esm/{helpers/responsive → responsive}/index.js

@@ -1,4 +1,6 @@
 export { media, UNSAFE_media } from './media-helper';
 export { UNSAFE_buildAboveMediaQueryCSS } from './build-media-query-css';
 export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
-export { UNSAFE_useMediaQuery } from './use-media-query';
+export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

package/dist/esm/responsive/show.js

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+var showAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
+  display: 'revert'
+});
+var showBelowQueries = UNSAFE_buildBelowMediaQueryCSS({
+  display: 'revert'
+});
+var defaultHiddenStyles = css({
+  display: 'none'
+});
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export var Show = function Show(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as;
+  return jsx(AsElement, {
+    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below]]
+  }, children);
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.14.3",
+	"version": "0.15.1",
 	"sideEffects": false
 }