@atlaskit/grid - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 # @atlaskit/grid
 
+## 0.8.0
+
+### Minor Changes
+
+- [`28a87e4d9a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/28a87e4d9a2) - All responsive helpers, types, and breakpoints have been migrated to `@atlaskit/primitives/responsive` and imported from there. There should be no functionality change, though this is a breaking change while we're in Alpha and these are strictly used internally.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.7.0
@@ -4,0 +14,0 @@

dist/cjs/config.js

@@ -6,68 +6,4 @@ "use strict";
 });
-exports.GRID_COLUMNS = exports.BREAKPOINTS_LIST = exports.BREAKPOINTS_CONFIG = void 0;
+exports.GRID_COLUMNS = void 0;
 var GRID_COLUMNS = 12;
-exports.GRID_COLUMNS = GRID_COLUMNS;
-var BREAKPOINTS_CONFIG = {
-  // mobile
-  xxs: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-200, 16px)",
-    min: 0,
-    max: 479
-  },
-  // phablet
-  xs: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-200, 16px)",
-    min: 480,
-    max: 767
-  },
-  // tablet
-  sm: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-300, 24px)",
-    min: 768,
-    max: 1023
-  },
-  // laptop desktop
-  md: {
-    gutter: "var(--ds-space-300, 24px)",
-    margin: "var(--ds-space-400, 32px)",
-    min: 1024,
-    max: 1439
-  },
-  // monitor
-  lg: {
-    gutter: "var(--ds-space-400, 32px)",
-    margin: "var(--ds-space-400, 32px)",
-    min: 1440,
-    max: 1767
-  },
-  // large high res
-  xl: {
-    gutter: "var(--ds-space-400, 32px)",
-    margin: "var(--ds-space-500, 40px)",
-    min: 1768,
-    max: 2159
-  },
-  // extra large high res
-  xxl: {
-    gutter: "var(--ds-space-500, 40px)",
-    margin: "var(--ds-space-500, 40px)",
-    min: 2160,
-    max: Number.MAX_SAFE_INTEGER
-  }
-};
-
-/**
- * The list of breakpoints in order from smallest to largest.
- *
- * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
- *
- * You may need to clone and reverse this list if you want the opposite.
- */
-exports.BREAKPOINTS_CONFIG = BREAKPOINTS_CONFIG;
-var BREAKPOINTS_LIST = Object.keys(BREAKPOINTS_CONFIG).sort(function (a, b) {
-  return BREAKPOINTS_CONFIG[a].min - BREAKPOINTS_CONFIG[b].min;
-});
-exports.BREAKPOINTS_LIST = BREAKPOINTS_LIST;
+exports.GRID_COLUMNS = GRID_COLUMNS;

dist/cjs/grid-item.js

@@ -10,8 +10,8 @@ "use strict";
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _config = require("./config");
-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; }
@@ -23,19 +23,17 @@ 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 hideMediaQueries = _config.BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react2.css)((0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.above[breakpoint], {
-    display: 'none'
-  }))));
-}, {});
-var gridSpanMediaQueries = _config.BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react2.css)((0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.above[breakpoint], {
+var hideMediaQueries = (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)({
+  display: 'none'
+});
+var gridSpanMediaQueries = (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
+  return {
     display: 'block',
-    // required to reset the display: none we might cascade with `span="none"`
+    // override the display that might be cascaded in from `hideMediaQueries`
     gridColumnEnd: "span var(--grid-item-".concat(breakpoint, "-span, 12)")
-  }))));
-}, {});
-var gridStartMediaQueries = _config.BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react2.css)((0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.above[breakpoint], {
+  };
+});
+var gridStartMediaQueries = (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
+  return {
     gridColumnStart: "var(--grid-item-".concat(breakpoint, "-start, 'auto')")
-  }))));
-}, {});
+  };
+});
 
@@ -99,2 +97,3 @@ /**
   };
+  var spanDependencyComparison = JSON.stringify(span); // to compare `span` changes in a `useMemo` deps array (used a few times)
   var spanStyles = (0, _react.useMemo)(function () {
@@ -112,3 +111,3 @@ return buildCSSVarsFromConfig({
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `span` will change references easily, but we still need to allow content or key changes to update
-  [JSON.stringify(span)]);
+  [spanDependencyComparison]);
 
@@ -119,2 +118,3 @@ // If `prop` isn't a responsive object, we set the value against the `xs` breakpoint, eg. `start={6}` is the same as `start={{ xxs: 6 }}`
   };
+  var startDependencyComparison = JSON.stringify(start); // to compare `start` changes in a `useMemo` deps array (used a few times)
   var startStyles = (0, _react.useMemo)(function () {
@@ -128,3 +128,3 @@ return buildCSSVarsFromConfig({
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `start` will change references easily, but we still need to allow content or key changes to update
-  [JSON.stringify(start)]);
+  [startDependencyComparison]);
 
@@ -135,3 +135,3 @@ /**
   var mediaQueryStyles = (0, _react.useMemo)(function () {
-    return _config.BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
+    return _responsive.UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
       var styles = [];
@@ -155,3 +155,3 @@ if (breakpoint in span) {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `start` and `span` will change references easily, but we still need to allow content or key changes to update.  This _should_ be more performant than running on every render as I don't expect this to change.
-  [JSON.stringify(span), JSON.stringify(start)]);
+  [spanDependencyComparison, startDependencyComparison]);
   return (0, _react2.jsx)("div", {
@@ -158,0 +158,0 @@ style: _objectSpread(_objectSpread({}, startStyles), spanStyles),

dist/cjs/grid.js

@@ -8,20 +8,20 @@ "use strict";
 exports.Grid = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _responsive = require("@atlaskit/primitives/responsive");
 var _config = require("./config");
-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; }
-var gapMediaQueries = _config.BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.above[breakpoint], {
-    gap: _config.BREAKPOINTS_CONFIG[breakpoint].gutter
-  }));
-}, {});
-var inlinePaddingMediaQueries = _config.BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.above[breakpoint], {
-    paddingInline: _config.BREAKPOINTS_CONFIG[breakpoint].margin
-  }));
-}, {});
+/* eslint-disable @repo/internal/react/consistent-css-prop-usage */
+/** @jsx jsx */
+
+var gapMediaQueries = Object.values((0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
+  return {
+    gap: _responsive.UNSAFE_BREAKPOINTS_CONFIG[breakpoint].gridItemGutter
+  };
+}));
+var inlinePaddingMediaQueries = Object.values((0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
+  return {
+    paddingInline: _responsive.UNSAFE_BREAKPOINTS_CONFIG[breakpoint].gridMargin
+  };
+}));
 var baseStyles = (0, _react2.css)({
@@ -28,0 +28,0 @@ display: 'grid',

dist/cjs/index.js

@@ -6,14 +6,2 @@ "use strict";
 });
-Object.defineProperty(exports, "BREAKPOINTS_CONFIG", {
-  enumerable: true,
-  get: function get() {
-    return _config.BREAKPOINTS_CONFIG;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINTS_LIST", {
-  enumerable: true,
-  get: function get() {
-    return _config.BREAKPOINTS_LIST;
-  }
-});
 Object.defineProperty(exports, "GridItem", {
@@ -25,8 +13,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "UNSAFE_media", {
-  enumerable: true,
-  get: function get() {
-    return _mediaHelper.UNSAFE_media;
-  }
-});
 Object.defineProperty(exports, "default", {
@@ -39,4 +21,2 @@ enumerable: true,
 var _grid = require("./grid");
-var _gridItem = require("./grid-item");
-var _config = require("./config");
-var _mediaHelper = require("./media-helper");
+var _gridItem = require("./grid-item");

dist/cjs/version.json

 {
 	"name": "@atlaskit/grid",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"sideEffects": false
 }

dist/es2019/config.js

@@ -1,61 +0,1 @@
-export const GRID_COLUMNS = 12;
-export const BREAKPOINTS_CONFIG = {
-  // mobile
-  xxs: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-200, 16px)",
-    min: 0,
-    max: 479
-  },
-  // phablet
-  xs: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-200, 16px)",
-    min: 480,
-    max: 767
-  },
-  // tablet
-  sm: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-300, 24px)",
-    min: 768,
-    max: 1023
-  },
-  // laptop desktop
-  md: {
-    gutter: "var(--ds-space-300, 24px)",
-    margin: "var(--ds-space-400, 32px)",
-    min: 1024,
-    max: 1439
-  },
-  // monitor
-  lg: {
-    gutter: "var(--ds-space-400, 32px)",
-    margin: "var(--ds-space-400, 32px)",
-    min: 1440,
-    max: 1767
-  },
-  // large high res
-  xl: {
-    gutter: "var(--ds-space-400, 32px)",
-    margin: "var(--ds-space-500, 40px)",
-    min: 1768,
-    max: 2159
-  },
-  // extra large high res
-  xxl: {
-    gutter: "var(--ds-space-500, 40px)",
-    margin: "var(--ds-space-500, 40px)",
-    min: 2160,
-    max: Number.MAX_SAFE_INTEGER
-  }
-};
-
-/**
- * The list of breakpoints in order from smallest to largest.
- *
- * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
- *
- * You may need to clone and reverse this list if you want the opposite.
- */
-export const BREAKPOINTS_LIST = Object.keys(BREAKPOINTS_CONFIG).sort((a, b) => BREAKPOINTS_CONFIG[a].min - BREAKPOINTS_CONFIG[b].min);
+export const GRID_COLUMNS = 12;

dist/es2019/grid-item.js

 /** @jsx jsx */
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { BREAKPOINTS_LIST, GRID_COLUMNS } from './config';
-import { UNSAFE_media as media } from './media-helper';
+import { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_buildAboveMediaQueryCSS } from '@atlaskit/primitives/responsive';
+import { GRID_COLUMNS } from './config';
 // when in doubt simply span all columns
@@ -10,31 +10,13 @@ const baseGridItemStyles = css({
 });
-const hideMediaQueries = BREAKPOINTS_LIST.reduce((acc, breakpoint) => ({
-  ...acc,
-  [breakpoint]: css({
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-    [media.above[breakpoint]]: {
-      display: 'none'
-    }
-  })
-}), {});
-const gridSpanMediaQueries = BREAKPOINTS_LIST.reduce((acc, breakpoint) => ({
-  ...acc,
-  [breakpoint]: css({
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-    [media.above[breakpoint]]: {
-      display: 'block',
-      // required to reset the display: none we might cascade with `span="none"`
-      gridColumnEnd: `span var(--grid-item-${breakpoint}-span, 12)`
-    }
-  })
-}), {});
-const gridStartMediaQueries = BREAKPOINTS_LIST.reduce((acc, breakpoint) => ({
-  ...acc,
-  [breakpoint]: css({
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-    [media.above[breakpoint]]: {
-      gridColumnStart: `var(--grid-item-${breakpoint}-start, 'auto')`
-    }
-  })
-}), {});
+const hideMediaQueries = UNSAFE_buildAboveMediaQueryCSS({
+  display: 'none'
+});
+const gridSpanMediaQueries = UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+  display: 'block',
+  // override the display that might be cascaded in from `hideMediaQueries`
+  gridColumnEnd: `span var(--grid-item-${breakpoint}-span, 12)`
+}));
+const gridStartMediaQueries = UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+  gridColumnStart: `var(--grid-item-${breakpoint}-start, 'auto')`
+}));
 
@@ -95,2 +77,3 @@ /**
   };
+  const spanDependencyComparison = JSON.stringify(span); // to compare `span` changes in a `useMemo` deps array (used a few times)
   const spanStyles = useMemo(() => buildCSSVarsFromConfig({
@@ -104,3 +87,3 @@ responsiveObject: span,
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `span` will change references easily, but we still need to allow content or key changes to update
-  [JSON.stringify(span)]);
+  [spanDependencyComparison]);
 
@@ -111,2 +94,3 @@ // If `prop` isn't a responsive object, we set the value against the `xs` breakpoint, eg. `start={6}` is the same as `start={{ xxs: 6 }}`
   };
+  const startDependencyComparison = JSON.stringify(start); // to compare `start` changes in a `useMemo` deps array (used a few times)
   const startStyles = useMemo(() => buildCSSVarsFromConfig({
@@ -118,3 +102,3 @@ responsiveObject: start,
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `start` will change references easily, but we still need to allow content or key changes to update
-  [JSON.stringify(start)]);
+  [startDependencyComparison]);
 
@@ -124,3 +108,3 @@ /**
    */
-  const mediaQueryStyles = useMemo(() => BREAKPOINTS_LIST.reduce((acc, breakpoint) => {
+  const mediaQueryStyles = useMemo(() => UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => {
     const styles = [];
@@ -143,3 +127,3 @@ if (breakpoint in span) {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `start` and `span` will change references easily, but we still need to allow content or key changes to update.  This _should_ be more performant than running on every render as I don't expect this to change.
-  [JSON.stringify(span), JSON.stringify(start)]);
+  [spanDependencyComparison, startDependencyComparison]);
   return jsx("div", {
@@ -146,0 +130,0 @@ style: {

dist/es2019/grid.js

@@ -6,16 +6,10 @@ /* eslint-disable @repo/internal/react/consistent-css-prop-usage */
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, GRID_COLUMNS } from './config';
-import { UNSAFE_media as media } from './media-helper';
-const gapMediaQueries = BREAKPOINTS_LIST.reduce((acc, breakpoint) => ({
-  ...acc,
-  [media.above[breakpoint]]: {
-    gap: BREAKPOINTS_CONFIG[breakpoint].gutter
-  }
-}), {});
-const inlinePaddingMediaQueries = BREAKPOINTS_LIST.reduce((acc, breakpoint) => ({
-  ...acc,
-  [media.above[breakpoint]]: {
-    paddingInline: BREAKPOINTS_CONFIG[breakpoint].margin
-  }
-}), {});
+import { UNSAFE_BREAKPOINTS_CONFIG, UNSAFE_buildAboveMediaQueryCSS } from '@atlaskit/primitives/responsive';
+import { GRID_COLUMNS } from './config';
+const gapMediaQueries = Object.values(UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+  gap: UNSAFE_BREAKPOINTS_CONFIG[breakpoint].gridItemGutter
+})));
+const inlinePaddingMediaQueries = Object.values(UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+  paddingInline: UNSAFE_BREAKPOINTS_CONFIG[breakpoint].gridMargin
+})));
 const baseStyles = css({
@@ -22,0 +16,0 @@ display: 'grid',

dist/es2019/index.js

 export { Grid as default } from './grid';
-export { GridItem } from './grid-item';
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST } from './config';
-export { UNSAFE_media } from './media-helper';
+export { GridItem } from './grid-item';

dist/es2019/version.json

 {
 	"name": "@atlaskit/grid",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"sideEffects": false
 }

dist/esm/config.js

@@ -1,63 +0,1 @@
-export var GRID_COLUMNS = 12;
-export var BREAKPOINTS_CONFIG = {
-  // mobile
-  xxs: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-200, 16px)",
-    min: 0,
-    max: 479
-  },
-  // phablet
-  xs: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-200, 16px)",
-    min: 480,
-    max: 767
-  },
-  // tablet
-  sm: {
-    gutter: "var(--ds-space-200, 16px)",
-    margin: "var(--ds-space-300, 24px)",
-    min: 768,
-    max: 1023
-  },
-  // laptop desktop
-  md: {
-    gutter: "var(--ds-space-300, 24px)",
-    margin: "var(--ds-space-400, 32px)",
-    min: 1024,
-    max: 1439
-  },
-  // monitor
-  lg: {
-    gutter: "var(--ds-space-400, 32px)",
-    margin: "var(--ds-space-400, 32px)",
-    min: 1440,
-    max: 1767
-  },
-  // large high res
-  xl: {
-    gutter: "var(--ds-space-400, 32px)",
-    margin: "var(--ds-space-500, 40px)",
-    min: 1768,
-    max: 2159
-  },
-  // extra large high res
-  xxl: {
-    gutter: "var(--ds-space-500, 40px)",
-    margin: "var(--ds-space-500, 40px)",
-    min: 2160,
-    max: Number.MAX_SAFE_INTEGER
-  }
-};
-
-/**
- * The list of breakpoints in order from smallest to largest.
- *
- * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
- *
- * You may need to clone and reverse this list if you want the opposite.
- */
-export var BREAKPOINTS_LIST = Object.keys(BREAKPOINTS_CONFIG).sort(function (a, b) {
-  return BREAKPOINTS_CONFIG[a].min - BREAKPOINTS_CONFIG[b].min;
-});
+export var GRID_COLUMNS = 12;

dist/esm/grid-item.js

 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
@@ -10,4 +10,4 @@ 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, jsx } from '@emotion/react';
-import { BREAKPOINTS_LIST, GRID_COLUMNS } from './config';
-import { UNSAFE_media as media } from './media-helper';
+import { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_buildAboveMediaQueryCSS } from '@atlaskit/primitives/responsive';
+import { GRID_COLUMNS } from './config';
 // when in doubt simply span all columns
@@ -17,19 +17,17 @@ var baseGridItemStyles = css({
 });
-var hideMediaQueries = BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, media.above[breakpoint], {
-    display: 'none'
-  }))));
-}, {});
-var gridSpanMediaQueries = BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, media.above[breakpoint], {
+var hideMediaQueries = UNSAFE_buildAboveMediaQueryCSS({
+  display: 'none'
+});
+var gridSpanMediaQueries = UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
+  return {
     display: 'block',
-    // required to reset the display: none we might cascade with `span="none"`
+    // override the display that might be cascaded in from `hideMediaQueries`
     gridColumnEnd: "span var(--grid-item-".concat(breakpoint, "-span, 12)")
-  }))));
-}, {});
-var gridStartMediaQueries = BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, media.above[breakpoint], {
+  };
+});
+var gridStartMediaQueries = UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
+  return {
     gridColumnStart: "var(--grid-item-".concat(breakpoint, "-start, 'auto')")
-  }))));
-}, {});
+  };
+});
 
@@ -93,2 +91,3 @@ /**
   };
+  var spanDependencyComparison = JSON.stringify(span); // to compare `span` changes in a `useMemo` deps array (used a few times)
   var spanStyles = useMemo(function () {
@@ -106,3 +105,3 @@ return buildCSSVarsFromConfig({
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `span` will change references easily, but we still need to allow content or key changes to update
-  [JSON.stringify(span)]);
+  [spanDependencyComparison]);
 
@@ -113,2 +112,3 @@ // If `prop` isn't a responsive object, we set the value against the `xs` breakpoint, eg. `start={6}` is the same as `start={{ xxs: 6 }}`
   };
+  var startDependencyComparison = JSON.stringify(start); // to compare `start` changes in a `useMemo` deps array (used a few times)
   var startStyles = useMemo(function () {
@@ -122,3 +122,3 @@ return buildCSSVarsFromConfig({
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `start` will change references easily, but we still need to allow content or key changes to update
-  [JSON.stringify(start)]);
+  [startDependencyComparison]);
 
@@ -129,3 +129,3 @@ /**
   var mediaQueryStyles = useMemo(function () {
-    return BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
+    return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
       var styles = [];
@@ -149,3 +149,3 @@ if (breakpoint in span) {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- `start` and `span` will change references easily, but we still need to allow content or key changes to update.  This _should_ be more performant than running on every render as I don't expect this to change.
-  [JSON.stringify(span), JSON.stringify(start)]);
+  [spanDependencyComparison, startDependencyComparison]);
   return jsx("div", {
@@ -152,0 +152,0 @@ style: _objectSpread(_objectSpread({}, startStyles), spanStyles),

dist/esm/grid.js

@@ -1,4 +0,1 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _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; }
 /* eslint-disable @repo/internal/react/consistent-css-prop-usage */
@@ -9,14 +6,14 @@ /** @jsx jsx */
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, GRID_COLUMNS } from './config';
-import { UNSAFE_media as media } from './media-helper';
-var gapMediaQueries = BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, media.above[breakpoint], {
-    gap: BREAKPOINTS_CONFIG[breakpoint].gutter
-  }));
-}, {});
-var inlinePaddingMediaQueries = BREAKPOINTS_LIST.reduce(function (acc, breakpoint) {
-  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, media.above[breakpoint], {
-    paddingInline: BREAKPOINTS_CONFIG[breakpoint].margin
-  }));
-}, {});
+import { UNSAFE_BREAKPOINTS_CONFIG, UNSAFE_buildAboveMediaQueryCSS } from '@atlaskit/primitives/responsive';
+import { GRID_COLUMNS } from './config';
+var gapMediaQueries = Object.values(UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
+  return {
+    gap: UNSAFE_BREAKPOINTS_CONFIG[breakpoint].gridItemGutter
+  };
+}));
+var inlinePaddingMediaQueries = Object.values(UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
+  return {
+    paddingInline: UNSAFE_BREAKPOINTS_CONFIG[breakpoint].gridMargin
+  };
+}));
 var baseStyles = css({
@@ -23,0 +20,0 @@ display: 'grid',

dist/esm/index.js

 export { Grid as default } from './grid';
-export { GridItem } from './grid-item';
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST } from './config';
-export { UNSAFE_media } from './media-helper';
+export { GridItem } from './grid-item';

dist/esm/version.json

 {
 	"name": "@atlaskit/grid",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"sideEffects": false
 }

dist/types/config.d.ts

@@ -1,18 +0,1 @@
-import { token } from '@atlaskit/tokens';
-import type { Breakpoint } from './types';
-export declare type BreakpointConfig = {
-    gutter: ReturnType<typeof token>;
-    min: number;
-    max: number;
-    margin: ReturnType<typeof token>;
-};
 export declare const GRID_COLUMNS: 12;
-export declare const BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
-/**
- * The list of breakpoints in order from smallest to largest.
- *
- * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
- *
- * You may need to clone and reverse this list if you want the opposite.
- */
-export declare const BREAKPOINTS_LIST: ["xs", "sm", "md", "lg", "xl", "xxl"];

dist/types/index.d.ts

 export { Grid as default } from './grid';
 export { GridItem } from './grid-item';
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST } from './config';
-export { UNSAFE_media } from './media-helper';
 export type { GridProps } from './grid';
 export type { GridItemProps } from './types';

dist/types/types.d.ts

 import type { ReactNode } from 'react';
-import { css } from '@emotion/react';
-export declare type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-/**
- * Builds an object for each breakpoint, eg. `{ xxs?: T, xs?: T, sm?: T, … }`
- */
-export declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+import type { ResponsiveObject } from '@atlaskit/primitives/responsive';
 export declare type SpanOptions = 'none' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
@@ -50,2 +45,1 @@ export declare type SpanObject = ResponsiveObject<SpanOptions>;
 };
-export declare type BreakpointCSSObject = Record<Breakpoint, ReturnType<typeof css>>;

package.json

 {
   "name": "@atlaskit/grid",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A grid is a responsive layout component designed to manage the content of a page.",
@@ -32,3 +32,3 @@ "publishConfig": {
   "dependencies": {
-    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/primitives": "^0.3.0",
     "@babel/runtime": "^7.0.0",
@@ -47,2 +47,3 @@ "@emotion/react": "^11.7.1",
     "@atlaskit/textfield": "*",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visual-regression": "*",
@@ -49,0 +50,0 @@ "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

report.api.md

@@ -20,22 +20,5 @@ <!-- API Report Version: 2.3 -->
 import { ReactNode } from 'react';
-import { token } from '@atlaskit/tokens';
+import type { ResponsiveObject } from '@atlaskit/primitives/responsive';
 
-// @public (undocumented)
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
-
-// @public (undocumented)
-type BreakpointConfig = {
-  gutter: ReturnType<typeof token>;
-  min: number;
-  max: number;
-  margin: ReturnType<typeof token>;
-};
-
-// @public (undocumented)
-export const BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
-
 // @public
-export const BREAKPOINTS_LIST: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-
-// @public
 const Grid: FC<GridProps>;
@@ -63,5 +46,2 @@ export default Grid;
 
-// @public
-type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
-
 // @public (undocumented)
@@ -79,23 +59,2 @@ type SpanObject = ResponsiveObject<SpanOptions>;
 
-// @public
-export const UNSAFE_media: {
-  readonly above: {
-    readonly xxs: `@media (min-width: ${number}px)`;
-    readonly xs: `@media (min-width: ${number}px)`;
-    readonly sm: `@media (min-width: ${number}px)`;
-    readonly md: `@media (min-width: ${number}px)`;
-    readonly lg: `@media (min-width: ${number}px)`;
-    readonly xl: `@media (min-width: ${number}px)`;
-    readonly xxl: `@media (min-width: ${number}px)`;
-  };
-  readonly below: {
-    readonly xs: `@media (max-width: ${number}px)`;
-    readonly sm: `@media (max-width: ${number}px)`;
-    readonly md: `@media (max-width: ${number}px)`;
-    readonly lg: `@media (max-width: ${number}px)`;
-    readonly xl: `@media (max-width: ${number}px)`;
-    readonly xxl: `@media (max-width: ${number}px)`;
-  };
-};
-
 // (No @packageDocumentation comment for this package)
@@ -102,0 +61,0 @@ ```

tmp/api-report-tmp.d.ts

@@ -9,22 +9,5 @@ ## API Report File for "@atlaskit/grid"
 import { ReactNode } from 'react';
-import { token } from '@atlaskit/tokens';
+import type { ResponsiveObject } from '@atlaskit/primitives/responsive';
 
-// @public (undocumented)
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
-
-// @public (undocumented)
-type BreakpointConfig = {
-    gutter: ReturnType<typeof token>;
-    min: number;
-    max: number;
-    margin: ReturnType<typeof token>;
-};
-
-// @public (undocumented)
-export const BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
-
 // @public
-export const BREAKPOINTS_LIST: ["xs", "sm", "md", "lg", "xl", "xxl"];
-
-// @public
 const Grid: FC<GridProps>;
@@ -52,5 +35,2 @@ export default Grid;
 
-// @public
-type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
-
 // @public (undocumented)
@@ -68,25 +48,4 @@ type SpanObject = ResponsiveObject<SpanOptions>;
 
-// @public
-export const UNSAFE_media: {
-    readonly above: {
-        readonly xxs: `@media (min-width: ${number}px)`;
-        readonly xs: `@media (min-width: ${number}px)`;
-        readonly sm: `@media (min-width: ${number}px)`;
-        readonly md: `@media (min-width: ${number}px)`;
-        readonly lg: `@media (min-width: ${number}px)`;
-        readonly xl: `@media (min-width: ${number}px)`;
-        readonly xxl: `@media (min-width: ${number}px)`;
-    };
-    readonly below: {
-        readonly xs: `@media (max-width: ${number}px)`;
-        readonly sm: `@media (max-width: ${number}px)`;
-        readonly md: `@media (max-width: ${number}px)`;
-        readonly lg: `@media (max-width: ${number}px)`;
-        readonly xl: `@media (max-width: ${number}px)`;
-        readonly xxl: `@media (max-width: ${number}px)`;
-    };
-};
-
 // (No @packageDocumentation comment for this package)
 
 ```

No alert changes

Worsened metrics

Total package byte prevSize

38793

decreased by-39.25%

Dev dependency count

10

increased by11.11%

Number of package files

31

decreased by-11.43%

Lines of code

818

decreased by-40.77%

Dependency changes

• + Added@atlaskit/primitives@^0.3.0

• + Added@atlaskit/primitives@0.3.3(transitive)

• - Removed@atlaskit/tokens@^1.2.0