@atlaskit/primitives 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.3.1
+
+### Patch Changes
+
+- [`114d6a73f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/114d6a73f72) - Cleanup the experimental responsive box utilizing our responsive helpers.
+
+## 0.3.0
+
+### Minor Changes
+
+- [`7c280fead96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c280fead96) - Add new responsive helpers, breakpoints config, and types into `@atlaskit/primitives/responsive`. Exports are treated as `UNSAFE_` and experimental until modified as they're being worked on in parallel to our Alpha Grid.
+
 ## 0.2.2
 
 ### Patch Changes

package/dist/cjs/components/internal/base-box.partial.js

@@ -12,18 +12,18 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _constants = require("../../constants");
+var _responsive = require("../../helpers/responsive");
 var _types = require("./types");
 var _utils = require("./utils");
 var _excluded = ["as", "className", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "UNSAFE_style", "testId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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) { (0, _defineProperty2.default)(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; }
 var responsiveRules = _types.BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, (0, _defineProperty2.default)({}, cssProperty, _constants.BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-    var config = _constants.BREAKPOINTS_CONFIG[breakpoint];
-    return Object.assign(configs, (0, _defineProperty2.default)({}, breakpoint, (0, _react2.css)((0, _defineProperty2.default)({}, "@media (min-width: ".concat(config.min, "px)"), (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"))))));
-  }, {
+  return Object.assign(mapping, (0, _defineProperty2.default)({}, cssProperty, _objectSpread({
     static: (0, _react2.css)((0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  })));
+  }, (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
+    return (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
+  }))));
 }, {});
 var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
   if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
@@ -37,8 +37,8 @@ var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue,
 var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
   (0, _tinyInvariant.default)(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
   if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
-    return Object.keys(propertyValue).map(function (responsiveProp) {
-      return responsiveRules[propertyName][responsiveProp];
+    return Object.keys(propertyValue).map(function (breakpoint) {
+      return responsiveRules[propertyName][breakpoint];
     });
   } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
     return responsiveRules[propertyName].static;
@@ -55,41 +55,41 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var as = _ref2.as,
-    className = _ref2.className,
-    children = _ref2.children,
-    color = _ref2.color,
-    backgroundColor = _ref2.backgroundColor,
-    shadow = _ref2.shadow,
-    borderStyle = _ref2.borderStyle,
-    borderWidth = _ref2.borderWidth,
-    borderRadius = _ref2.borderRadius,
-    borderColor = _ref2.borderColor,
-    layer = _ref2.layer,
-    flex = _ref2.flex,
-    flexGrow = _ref2.flexGrow,
-    flexShrink = _ref2.flexShrink,
-    alignSelf = _ref2.alignSelf,
-    overflow = _ref2.overflow,
-    overflowInline = _ref2.overflowInline,
-    overflowBlock = _ref2.overflowBlock,
-    padding = _ref2.padding,
-    paddingBlock = _ref2.paddingBlock,
-    paddingBlockStart = _ref2.paddingBlockStart,
-    paddingBlockEnd = _ref2.paddingBlockEnd,
-    paddingInline = _ref2.paddingInline,
-    paddingInlineStart = _ref2.paddingInlineStart,
-    paddingInlineEnd = _ref2.paddingInlineEnd,
-    height = _ref2.height,
-    width = _ref2.width,
-    _ref2$display = _ref2.display,
-    display = _ref2$display === void 0 ? displayMap.block : _ref2$display,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'static' : _ref2$position,
-    UNSAFE_style = _ref2.UNSAFE_style,
-    testId = _ref2.testId,
-    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
+  var as = _ref3.as,
+    className = _ref3.className,
+    children = _ref3.children,
+    color = _ref3.color,
+    backgroundColor = _ref3.backgroundColor,
+    shadow = _ref3.shadow,
+    borderStyle = _ref3.borderStyle,
+    borderWidth = _ref3.borderWidth,
+    borderRadius = _ref3.borderRadius,
+    borderColor = _ref3.borderColor,
+    layer = _ref3.layer,
+    flex = _ref3.flex,
+    flexGrow = _ref3.flexGrow,
+    flexShrink = _ref3.flexShrink,
+    alignSelf = _ref3.alignSelf,
+    overflow = _ref3.overflow,
+    overflowInline = _ref3.overflowInline,
+    overflowBlock = _ref3.overflowBlock,
+    padding = _ref3.padding,
+    paddingBlock = _ref3.paddingBlock,
+    paddingBlockStart = _ref3.paddingBlockStart,
+    paddingBlockEnd = _ref3.paddingBlockEnd,
+    paddingInline = _ref3.paddingInline,
+    paddingInlineStart = _ref3.paddingInlineStart,
+    paddingInlineEnd = _ref3.paddingInlineEnd,
+    height = _ref3.height,
+    width = _ref3.width,
+    _ref3$display = _ref3.display,
+    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
+    _ref3$position = _ref3.position,
+    position = _ref3$position === void 0 ? 'static' : _ref3$position,
+    UNSAFE_style = _ref3.UNSAFE_style,
+    testId = _ref3.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var Component = as || 'div';
   var inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({

package/dist/cjs/constants.js

@@ -3,20 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BREAKPOINTS_CONFIG", {
-  enumerable: true,
-  get: function get() {
-    return _dsExplorations.UNSAFE_BREAKPOINTS_CONFIG;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINTS_LIST", {
-  enumerable: true,
-  get: function get() {
-    return _dsExplorations.UNSAFE_BREAKPOINTS_LIST;
-  }
-});
 exports.LAYERS = void 0;
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var LAYERS = {
   card: 100,
   navigation: 200,

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_buildBelowMediaQueryCSS = exports.UNSAFE_buildAboveMediaQueryCSS = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _constants = require("./constants");
+var _mediaHelper = require("./media-helper");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * 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' } }),
+ * }
+ * ```
+ */
+var 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.UNSAFE_media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};
+
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * WARNING: The smallest breakpoint is not a valid key as a media query below 0px is misleading.
+ * This is separated from `buildAboveMediaQueryCSS` for that specific reason, you cannot have type safety with this variance.
+ *
+ * @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 = 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 (max-width: …px)': { display: 'none' } }),
+ *   sm: css({ '@media (max-width: …px)': { display: 'none' } }),
+ * }
+ * ```
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+exports.UNSAFE_buildAboveMediaQueryCSS = UNSAFE_buildAboveMediaQueryCSS;
+var UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
+  /**
+   * WARNING: it's very important that these are in the correct order.
+   * If they are not, cascading is not in the order higher/low breakpoints do not override as expected.
+   */
+  var reversedBreakpoints = (0, _toConsumableArray2.default)(_constants.UNSAFE_BREAKPOINTS_ORDERED_LIST).reverse();
+  return reversedBreakpoints.reduce(function (acc, breakpoint) {
+    // Omit `media.below.xxs` as it's not available as that would be `<0px`…
+    if (breakpoint === _constants.SMALLEST_BREAKPOINT) {
+      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/helpers/responsive/constants.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_CONFIG = exports.SMALLEST_BREAKPOINT = void 0;
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+var UNSAFE_BREAKPOINTS_CONFIG = {
+  // mobile
+  xxs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 0,
+    max: 479
+  },
+  // phablet
+  xs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 480,
+    max: 767
+  },
+  // tablet
+  sm: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-300, 24px)",
+    min: 768,
+    max: 1023
+  },
+  // laptop desktop
+  md: {
+    gridItemGutter: "var(--ds-space-300, 24px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1024,
+    max: 1439
+  },
+  // monitor
+  lg: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1440,
+    max: 1767
+  },
+  // large high res
+  xl: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 1768,
+    max: 2159
+  },
+  // extra large high res
+  xxl: {
+    gridItemGutter: "var(--ds-space-500, 40px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 2160,
+    max: Number.MAX_SAFE_INTEGER
+  }
+};
+
+/**
+ * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
+ *
+ * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+exports.UNSAFE_BREAKPOINTS_CONFIG = UNSAFE_BREAKPOINTS_CONFIG;
+var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
+  return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
+});
+
+/**
+ * This is our smallest breakpoint with a few nuances to it:
+ * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
+ * 2. It's omitted in `media.below` as there's nothing below `0px`.
+ *
+ * @experimental There's a chance this will change in _value_, but should only be used in a way that it will not matter if this value changes.
+ */
+exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = UNSAFE_BREAKPOINTS_ORDERED_LIST;
+var SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];
+exports.SMALLEST_BREAKPOINT = SMALLEST_BREAKPOINT;

package/dist/cjs/helpers/responsive/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
+  enumerable: true,
+  get: function get() {
+    return _constants.UNSAFE_BREAKPOINTS_CONFIG;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_ORDERED_LIST", {
+  enumerable: true,
+  get: function get() {
+    return _constants.UNSAFE_BREAKPOINTS_ORDERED_LIST;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_buildAboveMediaQueryCSS", {
+  enumerable: true,
+  get: function get() {
+    return _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_buildBelowMediaQueryCSS", {
+  enumerable: true,
+  get: function get() {
+    return _buildMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_media", {
+  enumerable: true,
+  get: function get() {
+    return _mediaHelper.UNSAFE_media;
+  }
+});
+var _mediaHelper = require("./media-helper");
+var _buildMediaQueryCss = require("./build-media-query-css");
+var _constants = require("./constants");

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_media = void 0;
+var _constants = require("./constants");
+/**
+ * To ensure min-width and max-width do both target at the same time, we subtract a value.
+ * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
+ */
+var BELOW_PRECISION = 0.02;
+
+/**
+ * This is the full internal version.  The import has been separated to only expose as-needed.
+ */
+var internalMedia = {
+  /**
+   * A media query to target viewports above the min width of a given breakpoint.
+   * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
+   */
+  above: {
+    /**
+     * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+     *
+     * Eg. this is `@media (min-width: 0px)`
+     */
+    xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
+    xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
+    sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
+    md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
+    lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
+    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
+    xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
+  },
+  below: {
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+     */
+    xs: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
+    sm: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
+    md: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
+    lg: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
+    xl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
+    xxl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
+  },
+  /**
+   * A media query to target viewports exactly between the min and max of a given breakpoint.
+   */
+  only: {
+    xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
+    xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
+    sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
+    md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
+    lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
+    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
+    xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
+  }
+};
+
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+var UNSAFE_media = {
+  above: internalMedia.above,
+  below: internalMedia.below
+};
+
+/**
+ * With these types:
+ * ```
+ * type MediaQuery = `@media (${string})`;
+ * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
+ * ```
+ *
+ * TODO: This `media` object as of typescript@4.9, would benefit from satisfies, eg.:
+ * ```
+ * const UNSAFE_media = { … } satisfies Record<'above' | 'only', ResponsiveMediaObject> & { below: Omit<ResponsiveMediaObject, 'xxs'> }
+ * ```
+ */
+exports.UNSAFE_media = UNSAFE_media;

package/dist/cjs/helpers/responsive/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

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

package/dist/es2019/components/internal/base-box.partial.js

@@ -3,26 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+import { LAYERS } from '../../constants';
+import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
 import { BOX_RESPONSIVE_PROPS } from './types';
 import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
 const responsiveRules = BOX_RESPONSIVE_PROPS.reduce((mapping, cssProperty) => {
   return Object.assign(mapping, {
-    [cssProperty]: BREAKPOINTS_LIST.reduce((configs, breakpoint) => {
-      const config = BREAKPOINTS_CONFIG[breakpoint];
-      return Object.assign(configs, {
-        [breakpoint]: css({
-          // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-          [`@media (min-width: ${config.min}px)`]: {
-            [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
-          }
-        })
-      });
-    }, {
+    [cssProperty]: {
       static: css({
         [cssProperty]: `var(--ds-box-static-${cssProperty})`
-      })
-    })
+      }),
+      ...UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+        [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
+      }))
+    }
   });
 }, {});
 const getResponsiveVars = (propertyName, propertyValue, mapping) => {
@@ -40,7 +34,7 @@ const getResponsiveVars = (propertyName, propertyValue, mapping) => {
 const getResponsiveStyles = (propertyName, propertyValue) => {
   invariant(typeof responsiveRules[propertyName] !== 'undefined', `Responsive rules for "${propertyName}" have not been statically defined.`);
   if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(responsiveProp => responsiveRules[propertyName][responsiveProp]);
+    return Object.keys(propertyValue).map(breakpoint => responsiveRules[propertyName][breakpoint]);
   } else if (isStaticStyleProp(propertyValue)) {
     return responsiveRules[propertyName].static;
   }

package/dist/es2019/constants.js

@@ -1,4 +1,3 @@
-import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export const LAYERS = {
   card: 100,
   navigation: 200,
@@ -9,5 +8,4 @@ export const LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };
+};

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

@@ -0,0 +1,85 @@
+import { css } from '@emotion/react';
+import { SMALLEST_BREAKPOINT, UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
+import { 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.
+ *
+ * @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
+      [UNSAFE_media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
+    })
+  }), {});
+};
+
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * WARNING: The smallest breakpoint is not a valid key as a media query below 0px is misleading.
+ * This is separated from `buildAboveMediaQueryCSS` for that specific reason, you cannot have type safety with this variance.
+ *
+ * @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 = 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 (max-width: …px)': { display: 'none' } }),
+ *   sm: css({ '@media (max-width: …px)': { display: 'none' } }),
+ * }
+ * ```
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export const UNSAFE_buildBelowMediaQueryCSS = input => {
+  /**
+   * WARNING: it's very important that these are in the correct order.
+   * If they are not, cascading is not in the order higher/low breakpoints do not override as expected.
+   */
+  const reversedBreakpoints = [...UNSAFE_BREAKPOINTS_ORDERED_LIST].reverse();
+  return reversedBreakpoints.reduce((acc, breakpoint) => {
+    // Omit `media.below.xxs` as it's not available as that would be `<0px`…
+    if (breakpoint === SMALLEST_BREAKPOINT) {
+      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
+      })
+    };
+  }, {});
+};