@atlaskit/primitives 0.14.3 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/primitives
 
+## 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.0",
 	"sideEffects": false
 }

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.0",
 	"sideEffects": false
 }

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.0",
 	"sideEffects": false
 }

package/dist/esm/xcss/xcss.js

@@ -4,7 +4,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 /* 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';
 var tokensMap = {
   backgroundColor: backgroundColorMap,

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,53 @@
+import { CSSObject } from '@emotion/react';
+import type { Breakpoint } from './types';
+/**
+ * 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 declare const UNSAFE_buildAboveMediaQueryCSS: (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.
+ *
+ * @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 declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

package/dist/types/responsive/hide.d.ts

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveHideProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to hide this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to hide this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * 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 declare const Hide: ({ above, below, children, as: AsElement, }: ResponsiveHideProps) => jsx.JSX.Element;
+export {};

package/dist/types/{helpers/responsive → responsive}/index.d.ts

@@ -3,3 +3,5 @@ export { UNSAFE_buildAboveMediaQueryCSS } from './build-media-query-css';
 export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
 export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
 export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

package/dist/types/responsive/show.d.ts

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveShowProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to show this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to show this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * 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 declare const Show: ({ above, below, children, as: AsElement, }: ResponsiveShowProps) => jsx.JSX.Element;
+export {};

package/dist/types/xcss/xcss.d.ts

@@ -2,8 +2,8 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
+import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
 /**

package/dist/types-ts4.5/index.d.ts

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

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

@@ -0,0 +1,53 @@
+import { CSSObject } from '@emotion/react';
+import type { Breakpoint } from './types';
+/**
+ * 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 declare const UNSAFE_buildAboveMediaQueryCSS: (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.
+ *
+ * @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 declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

package/dist/types-ts4.5/responsive/hide.d.ts

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveHideProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to hide this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to hide this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * 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 declare const Hide: ({ above, below, children, as: AsElement, }: ResponsiveHideProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/{helpers/responsive → responsive}/index.d.ts

@@ -3,3 +3,5 @@ export { UNSAFE_buildAboveMediaQueryCSS } from './build-media-query-css';
 export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
 export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
 export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

package/dist/types-ts4.5/responsive/show.d.ts

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveShowProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to show this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to show this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * 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 declare const Show: ({ above, below, children, as: AsElement, }: ResponsiveShowProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/xcss/xcss.d.ts

@@ -2,8 +2,8 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
+import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.14.3",
+  "version": "0.15.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -99,7 +99,7 @@
     "./box": "./src/components/box.tsx",
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
-    "./responsive": "./src/helpers/responsive/index.tsx"
+    "./responsive": "./src/responsive/index.tsx"
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
@@ -132,7 +132,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.34",
+    "@atlassian/gemini-visual-regression": "^0.0.35",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "csstype": "^3.1.0",

package/responsive/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@atlaskit/primitives/responsive",
-  "main": "../dist/cjs/helpers/responsive/index.js",
-  "module": "../dist/esm/helpers/responsive/index.js",
-  "module:es2019": "../dist/es2019/helpers/responsive/index.js",
+  "main": "../dist/cjs/responsive/index.js",
+  "module": "../dist/esm/responsive/index.js",
+  "module:es2019": "../dist/es2019/responsive/index.js",
   "sideEffects": false,
-  "types": "../dist/types/helpers/responsive/index.d.ts",
+  "types": "../dist/types/responsive/index.d.ts",
   "typesVersions": {
     ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.5/helpers/responsive/index.d.ts"
+        "../dist/types-ts4.5/responsive/index.d.ts"
       ]
     }
   }

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

@@ -1,36 +0,0 @@
-import { css } from '@emotion/react';
-import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
-import { 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.
- *
- * @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 (min-width: 0px)': { display: 'none' } }),
- *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
- *   sm: css({ '@media (min-width: …px)': { 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
-    })
-  }), {});
-};

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

@@ -1,27 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import type { Breakpoint } from './types';
-/**
- * Build a map of breakpoints to css with media queries and nested styles.
- *
- * @experimental Unsafe for usage as the API is not finalized.
- *
- * @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 (min-width: 0px)': { display: 'none' } }),
- *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
- *   sm: css({ '@media (min-width: …px)': { display: 'none' } }),
- * }
- * ```
- */
-export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

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

@@ -1,27 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import type { Breakpoint } from './types';
-/**
- * Build a map of breakpoints to css with media queries and nested styles.
- *
- * @experimental Unsafe for usage as the API is not finalized.
- *
- * @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 (min-width: 0px)': { display: 'none' } }),
- *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
- *   sm: css({ '@media (min-width: …px)': { display: 'none' } }),
- * }
- * ```
- */
-export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;