@atlaskit/primitives 0.12.5 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/primitives
 
+## 0.13.0
+
+### Minor Changes
+
+- [`455677dbd4c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/455677dbd4c) - - Documents the responsive media helpers into an Alpha state.
+  - BREAKING: Removes the `xxl` breakpoint from all media queries (should be unused).
+  - Adds a new `media` export without `media.below` intentionally omitted. Should be unused externally, but used internally and still available via the existing `UNSAFE_media` export.
+  - Changes the underlying media queries to be a bit safer against unexpected overlap. This changes the breakpoints ever-so-slightly, but given browsers round fractional rems, it's impractical that this will have any unintended impact—if anything, it may fix a bug.
+
+## 0.12.6
+
+### Patch Changes
+
+- [`3be327cdd6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3be327cdd6a) - Allow styles to be applied to Inline through xcss.
+
 ## 0.12.5
 
 ### Patch Changes

package/constellation/responsive/usage.mdx

@@ -0,0 +1,53 @@
+---
+title: Responsive
+description: Responsive helpers and primitives to build responsive UIs with
+order: 1
+---
+
+## Media query helpers
+
+We expose two media query helper objects which map to our [breakpoints](/components/grid/usage#breakpoints) as media queries for use in css-in-js:
+ - `media.above[breakpoint]` to target all viewports **above** (larger than) the min-width of a given breakpoint
+
+### A basic example:
+
+Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`
+
+```tsx
+const customStyles = xcss({
+  display: 'none', // hide by default
+  padding: 'space.100',
+  [media.above.md]: { display: 'revert' }, // show above md
+  [media.above.lg]: { padding: 'space.150' }, // increase padding above md
+});
+
+export const Component = ({ children }: { children: ReactNode }) => (
+  <div css={customStyles}>{children}</div>
+);
+```
+
+### `media.above` usage
+
+Please note that `media.above.xxs` will **always** match; it is explicitly `'@media all'`.  This is only included for easy programatic usage, but it has a negative performance impact.
+
+```tsx
+const customStyles = css({
+  marginBlock: token('space.0'),
+  [media.above.xs]: { marginBlock: token('space.025') },
+  [media.above.sm]: { marginBlock: token('space.050') },
+  [media.above.md]: { marginBlock: token('space.075') },
+  [media.above.lg]: { marginBlock: token('space.100') },
+  [media.above.xl]: { marginBlock: token('space.150') },
+});
+```
+
+### `media.below` usage
+
+This is intentionally excluded at the moment as we're shipping our opinion that teams should design mobile-first.
+We understand this will not scale and we're open to change, but we'd like to change this with feedback.
+
+If we do add it back, we'd suggest codebases prefer a single approach (eg. `above` or `below`) and use that consistently.  Mixing them results in confusion (though they can be safely used together and can result in better CSS performance when done correctly).
+
+### Some notes and suggestions
+
+- Please combine this with our [xcss](/components/primitives/xcss) when available as this uses our media queries to allow for safe, responsive styling.

package/dist/cjs/components/inline.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../xcss/style-maps.partial");
+var _xcss = require("../xcss/xcss");
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
@@ -99,6 +100,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     space = _ref2.space,
     rowSpace = _ref2.rowSpace,
     separator = _ref2.separator,
+    xcss = _ref2.xcss,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
   var Component = as || 'div';
@@ -109,8 +111,11 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
+  var className = xcss && (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    className, baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

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

@@ -4,8 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNSAFE_buildBelowMediaQueryCSS = exports.UNSAFE_buildAboveMediaQueryCSS = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+exports.UNSAFE_buildAboveMediaQueryCSS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _constants = require("./constants");
@@ -38,51 +37,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 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))));
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react.css)((0, _defineProperty2.default)({}, _mediaHelper.media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
   }, {});
 };
-
-/**
- * Build a map of breakpoints to css with media queries and nested styles.
- *
- * 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;
+exports.UNSAFE_buildAboveMediaQueryCSS = UNSAFE_buildAboveMediaQueryCSS;

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

@@ -7,68 +7,56 @@ exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_CONFIG = ex
 /**
  * Our internal configuration for breakpoints configuration.
  *
- * These are `rem` based multiples.
+ * We explicitly use `-0.01rem` for "max" values to both ensure we do not overlap our media queries, but also don't skip any fractional pixels.  There is a chance this is not safe in some browsers, eg. Safari has weird rounding.
+ * @see: https://tzi.fr/css/prevent-double-breakpoint/
  *
- * @experimental Unsafe for consumption outside of the design system itself.
+ * @experimental Unsafe for direct consumption outside of the design system itself; please use our `media` export instead for media queries.
  */
 var UNSAFE_BREAKPOINTS_CONFIG = {
   // mobile
   xxs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    below: '0rem',
     min: '0rem',
-    max: '29.998rem'
+    max: '29.99rem'
   },
   // phablet
   xs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    below: '29.998rem',
     min: '30rem',
-    max: '47.998rem'
+    max: '47.99rem'
   },
   // tablet
   sm: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-300, 24px)",
-    below: '47.998rem',
     min: '48rem',
-    max: '63.998rem'
+    max: '63.99rem'
   },
   // laptop desktop
   md: {
     gridItemGutter: "var(--ds-space-300, 24px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    below: '63.998rem',
     min: '64rem',
-    max: '89.998rem'
+    max: '89.99rem'
   },
   // monitor
   lg: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    below: '89.998rem',
     min: '90rem',
-    max: '109.998rem'
+    max: '109.99rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    below: '109.998rem',
     min: '110rem',
-    max: '134.998rem'
-  },
-  // extra large high res
-  xxl: {
-    gridItemGutter: "var(--ds-space-500, 40px)",
-    gridMargin: "var(--ds-space-500, 40px)",
-    below: '134.998rem',
-    min: '135rem',
-    max: "".concat(Number.MAX_SAFE_INTEGER, "rem")
+    max: null
   }
-};
+  // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large
+}; //TODO: This `as const` should really be `satisfies Record<Breakpoint, BreakpointConfig>`, but that's not possible in our shipped TypeScript version yet.
 
 /**
  * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
@@ -84,8 +72,6 @@ var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
  * 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];

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

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "UNSAFE_buildAboveMediaQueryCSS", {
     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() {
@@ -39,6 +33,12 @@ Object.defineProperty(exports, "UNSAFE_useMediaQuery", {
     return _useMediaQuery.UNSAFE_useMediaQuery;
   }
 });
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _mediaHelper.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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNSAFE_media = void 0;
+exports.media = exports.UNSAFE_media = void 0;
 var _constants = require("./constants");
 /**
- * This is the full internal version.  The import has been separated to only expose as-needed.
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
  */
-var internalMedia = {
+var UNSAFE_media = {
   /**
    * 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.
@@ -16,31 +18,40 @@ var internalMedia = {
   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, ")"),
+    xxs: "@media all",
     xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
     sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
     md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
     lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
-    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")"),
-    xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ")")
+    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   },
+  /**
+   * A media query to target viewports below the min width of a given breakpoint.  We do this by testing the inverse, eg. below = not above…
+   *
+   * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
+   *
+   * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
+   * This is well describe in this: @see https://stackoverflow.com/a/13649011
+   *
+   * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
+   *
+   * @internal Not intended to be used outside of DST at this stage.
+   * @experimental Not intended to be used outside of DST at this stage.
+   */
   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: 0rem)`
-     */
-    xs: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.below, ")"),
-    sm: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.below, ")"),
-    md: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.below, ")"),
-    lg: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.below, ")"),
-    xl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.below, ")"),
-    xxl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.below, ")")
+    xs: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
+    sm: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
+    md: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
+    lg: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
+    xl: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   },
   /**
    * A media query to target viewports exactly between the min and max of a given breakpoint.
+   * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
+   *
+   * @internal Not intended to be used outside of DST at this stage.
+   * @experimental Not intended to be used outside of DST at this stage.
    */
   only: {
     xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
@@ -48,31 +59,17 @@ var internalMedia = {
     sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.max, ")"),
     md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.max, ")"),
     lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.max, ")"),
-    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.max, ")"),
-    xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.max, ")")
+    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   }
 };
 
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
- * @experimental Unsafe for usage as the API is not finalized.
+ * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
-var UNSAFE_media = {
-  above: internalMedia.above,
-  below: internalMedia.below
+exports.UNSAFE_media = UNSAFE_media;
+var media = {
+  above: UNSAFE_media.above
 };
-
-/**
- * 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;
+exports.media = media;

package/dist/cjs/helpers/responsive/use-media-query.js

@@ -7,7 +7,7 @@ exports.UNSAFE_useMediaQuery = void 0;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _mediaHelper = require("./media-helper");
-var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
+var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia;
 var queries = {
   'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, _mediaHelper.UNSAFE_media.above.xxs.replace('@media ', '').trim()),
   'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, _mediaHelper.UNSAFE_media.above.xs.replace('@media ', '').trim()),
@@ -15,13 +15,11 @@ var queries = {
   'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, _mediaHelper.UNSAFE_media.above.md.replace('@media ', '').trim()),
   'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, _mediaHelper.UNSAFE_media.above.lg.replace('@media ', '').trim()),
   'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, _mediaHelper.UNSAFE_media.above.xl.replace('@media ', '').trim()),
-  'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, _mediaHelper.UNSAFE_media.above.xxl.replace('@media ', '').trim()),
-  'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, _mediaHelper.UNSAFE_media.below.xs.replace('@media ', '').trim()),
-  'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, _mediaHelper.UNSAFE_media.below.sm.replace('@media ', '').trim()),
-  'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, _mediaHelper.UNSAFE_media.below.md.replace('@media ', '').trim()),
-  'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, _mediaHelper.UNSAFE_media.below.lg.replace('@media ', '').trim()),
-  'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, _mediaHelper.UNSAFE_media.below.xl.replace('@media ', '').trim()),
-  'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, _mediaHelper.UNSAFE_media.below.xxl.replace('@media ', '').trim())
+  'below.xs': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, _mediaHelper.UNSAFE_media.below.xs.replace('@media ', '').trim()),
+  'below.sm': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, _mediaHelper.UNSAFE_media.below.sm.replace('@media ', '').trim()),
+  'below.md': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, _mediaHelper.UNSAFE_media.below.md.replace('@media ', '').trim()),
+  'below.lg': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, _mediaHelper.UNSAFE_media.below.lg.replace('@media ', '').trim()),
+  'below.xl': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, _mediaHelper.UNSAFE_media.below.xl.replace('@media ', '').trim())
 };
 
 /**

package/dist/cjs/version.json

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

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

@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
+ * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
  */
 var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",

package/dist/cjs/xcss/xcss.js

@@ -8,7 +8,6 @@ exports.parseXcss = void 0;
 exports.xcss = xcss;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
@@ -84,7 +83,11 @@ var isSafeEnvToThrow = function isSafeEnvToThrow() {
 var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 var rePseudos = /^::?.*$/;
 var reMediaQuery = /^@media .*$/;
-var reValidMediaQuery = new RegExp("^(".concat([].concat((0, _toConsumableArray2.default)(Object.values(_responsive.UNSAFE_media.above)), (0, _toConsumableArray2.default)(Object.values(_responsive.UNSAFE_media.below))).map(function (mediaQuery) {
+
+/**
+ * Reduce our media queries into a safe string for regex comparison.
+ */
+var reValidMediaQuery = new RegExp("^(".concat(Object.values(_responsive.media.above).map(function (mediaQuery) {
   return mediaQuery.replace(/[.()]/g, '\\$&');
 } // Escape the ".", "(", and ")" in the media query syntax.
 ).join('|'), ")$"));

package/dist/es2019/components/inline.js

@@ -3,6 +3,7 @@
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
 const alignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -89,6 +90,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   space,
   rowSpace,
   separator,
+  xcss,
   testId,
   children: rawChildren
 }, ref) => {
@@ -100,8 +102,11 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   const justifyContent = spread || alignInline;
+  const className = xcss && parseXcss(xcss);
   return jsx(Component, {
-    css: [baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { SMALLEST_BREAKPOINT, UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
-import { UNSAFE_media } from './media-helper';
+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.
  *
@@ -30,56 +30,7 @@ export const UNSAFE_buildAboveMediaQueryCSS = input => {
     ...acc,
     [breakpoint]: css({
       // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-      [UNSAFE_media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
+      [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
-      })
-    };
-  }, {});
 };