@atlaskit/primitives 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/primitives
 
+## 0.9.4
+
+### Patch Changes
+
+- [`b19d5c53b64`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b19d5c53b64) - Internal changest to the primitives package related to token generated styles.
+- [`4c4dcc3d571`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c4dcc3d571) - Updates primitives internal style map.
+- Updated dependencies
+
+## 0.9.3
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [`e06d56c5a3d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e06d56c5a3d) - Adds type hinting for `fill` CSS property.
+
 ## 0.9.2
 
 ### Patch Changes

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

@@ -7,6 +7,8 @@ exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_CONFIG = ex
 /**
  * Our internal configuration for breakpoints configuration.
  *
+ * These are `rem` based multiples.
+ *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
 var UNSAFE_BREAKPOINTS_CONFIG = {
@@ -14,50 +16,57 @@ var UNSAFE_BREAKPOINTS_CONFIG = {
   xxs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    min: 0,
-    max: 479
+    below: '0rem',
+    min: '0rem',
+    max: '29.998rem'
   },
   // phablet
   xs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    min: 480,
-    max: 767
+    below: '29.998rem',
+    min: '30rem',
+    max: '47.998rem'
   },
   // tablet
   sm: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-300, 24px)",
-    min: 768,
-    max: 1023
+    below: '47.998rem',
+    min: '48rem',
+    max: '63.998rem'
   },
   // laptop desktop
   md: {
     gridItemGutter: "var(--ds-space-300, 24px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    min: 1024,
-    max: 1439
+    below: '63.998rem',
+    min: '64rem',
+    max: '89.998rem'
   },
   // monitor
   lg: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    min: 1440,
-    max: 1767
+    below: '89.998rem',
+    min: '90rem',
+    max: '109.998rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: 1768,
-    max: 2159
+    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)",
-    min: 2160,
-    max: Number.MAX_SAFE_INTEGER
+    below: '134.998rem',
+    min: '135rem',
+    max: "".concat(Number.MAX_SAFE_INTEGER, "rem")
   }
 };
 
@@ -69,9 +78,7 @@ var UNSAFE_BREAKPOINTS_CONFIG = {
  * @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;
-});
+var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
 
 /**
  * This is our smallest breakpoint with a few nuances to it:

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

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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.
  */
@@ -25,37 +19,37 @@ var internalMedia = {
      *
      * 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)")
+    xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ")"),
+    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, ")")
   },
   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)`
+     * 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.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)")
+    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, ")")
   },
   /**
    * 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)")
+    xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
+    xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.max, ")"),
+    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, ")")
   }
 };
 

package/dist/cjs/version.json

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

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

@@ -4,26 +4,26 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
+exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.fillMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
 var dimensionMap = {
   '100%': '100%',
-  'size.100': '16px',
-  'size.200': '24px',
-  'size.300': '32px',
-  'size.400': '40px',
-  'size.500': '48px',
-  'size.600': '96px',
-  'size.1000': '192px'
+  'size.100': '1rem',
+  'size.200': '1.5rem',
+  'size.300': '2rem',
+  'size.400': '2.5rem',
+  'size.500': '3rem',
+  'size.600': '6rem',
+  'size.1000': '12rem'
 };
 exports.dimensionMap = dimensionMap;
 /**
@@ -32,10 +32,10 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 var spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",
@@ -60,10 +60,10 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 var borderColorMap = {
@@ -240,19 +240,43 @@ var textColorMap = {
   subtle: "var(--ds-text-subtle, #42526E)"
 };
 exports.textColorMap = textColorMap;
+var fillMap = {
+  'color.icon': "var(--ds-icon, #505F79)",
+  'accent.red': "var(--ds-icon-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-icon-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
+  disabled: "var(--ds-icon-disabled, #8993A4)",
+  inverse: "var(--ds-icon-inverse, #FFFFFF)",
+  selected: "var(--ds-icon-selected, #0052CC)",
+  brand: "var(--ds-icon-brand, #0065FF)",
+  danger: "var(--ds-icon-danger, #DE350B)",
+  warning: "var(--ds-icon-warning, #FFC400)",
+  'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
+  success: "var(--ds-icon-success, #00875A)",
+  discovery: "var(--ds-icon-discovery, #8777D9)",
+  information: "var(--ds-icon-information, #0747A6)",
+  subtle: "var(--ds-icon-subtle, #6B778C)"
+};
+exports.fillMap = fillMap;
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -342,24 +366,24 @@ exports.positionMap = positionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
  * @codegenId border
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
 var borderWidthMap = {
-  'width.0': "var(--ds-width-0, 0)",
-  'width.050': "var(--ds-width-050, 0.0625rem)",
-  'width.100': "var(--ds-width-100, 0.125rem)"
+  'width.0': "var(--ds-width-0, 0px)",
+  'width.050': "var(--ds-width-050, 1px)",
+  'width.100': "var(--ds-width-100, 2px)"
 };
 exports.borderWidthMap = borderWidthMap;
 var borderRadiusMap = {
-  'radius.050': "var(--ds-radius-050, 0.125rem)",
-  'radius.100': "var(--ds-radius-100, 0.25rem)",
-  'radius.200': "var(--ds-radius-200, 0.5rem)",
-  'radius.300': "var(--ds-radius-300, 0.75rem)",
-  'radius.400': "var(--ds-radius-400, 1rem)",
+  'radius.050': "var(--ds-radius-050, 2px)",
+  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.200': "var(--ds-radius-200, 8px)",
+  'radius.300': "var(--ds-radius-300, 12px)",
+  'radius.400': "var(--ds-radius-400, 16px)",
   'radius.round': "var(--ds-radius-round, 50%)"
 };
 

package/dist/cjs/xcss/xcss.js

@@ -27,6 +27,7 @@ var tokensMap = {
   color: _styleMaps.textColorMap,
   columnGap: _styleMaps.spaceMap,
   display: _styleMaps.displayMap,
+  fill: _styleMaps.fillMap,
   flex: _styleMaps.flexMap,
   flexDirection: _styleMaps.flexDirectionMap,
   flexGrow: _styleMaps.flexGrowMap,

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

@@ -1,6 +1,8 @@
 /**
  * Our internal configuration for breakpoints configuration.
  *
+ * These are `rem` based multiples.
+ *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
 export const UNSAFE_BREAKPOINTS_CONFIG = {
@@ -8,50 +10,57 @@ export const UNSAFE_BREAKPOINTS_CONFIG = {
   xxs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    min: 0,
-    max: 479
+    below: '0rem',
+    min: '0rem',
+    max: '29.998rem'
   },
   // phablet
   xs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    min: 480,
-    max: 767
+    below: '29.998rem',
+    min: '30rem',
+    max: '47.998rem'
   },
   // tablet
   sm: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-300, 24px)",
-    min: 768,
-    max: 1023
+    below: '47.998rem',
+    min: '48rem',
+    max: '63.998rem'
   },
   // laptop desktop
   md: {
     gridItemGutter: "var(--ds-space-300, 24px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    min: 1024,
-    max: 1439
+    below: '63.998rem',
+    min: '64rem',
+    max: '89.998rem'
   },
   // monitor
   lg: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    min: 1440,
-    max: 1767
+    below: '89.998rem',
+    min: '90rem',
+    max: '109.998rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: 1768,
-    max: 2159
+    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)",
-    min: 2160,
-    max: Number.MAX_SAFE_INTEGER
+    below: '134.998rem',
+    min: '135rem',
+    max: `${Number.MAX_SAFE_INTEGER}rem`
   }
 };
 
@@ -62,7 +71,7 @@ export const UNSAFE_BREAKPOINTS_CONFIG = {
  *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
-export const UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort((a, b) => UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min);
+export const UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
 
 /**
  * This is our smallest breakpoint with a few nuances to it:

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

@@ -1,11 +1,5 @@
 import { UNSAFE_BREAKPOINTS_CONFIG } from './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…"
- */
-const BELOW_PRECISION = 0.02;
-
 /**
  * This is the full internal version.  The import has been separated to only expose as-needed.
  */
@@ -20,37 +14,37 @@ const internalMedia = {
      *
      * Eg. this is `@media (min-width: 0px)`
      */
-    xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}px)`,
-    xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}px)`,
-    sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}px)`,
-    md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}px)`,
-    lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}px)`,
-    xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}px)`,
-    xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}px)`
+    xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min})`,
+    xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min})`,
+    sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min})`,
+    md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min})`,
+    lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min})`,
+    xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`,
+    xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min})`
   },
   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)`
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
      */
-    xs: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION}px)`,
-    sm: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION}px)`,
-    md: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION}px)`,
-    lg: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION}px)`,
-    xl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION}px)`,
-    xxl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION}px)`
+    xs: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.below})`,
+    sm: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.below})`,
+    md: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.below})`,
+    lg: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.below})`,
+    xl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.below})`,
+    xxl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.below})`
   },
   /**
    * A media query to target viewports exactly between the min and max of a given breakpoint.
    */
   only: {
-    xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.max}px)`,
-    xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.max}px)`,
-    sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.max}px)`,
-    md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.max}px)`,
-    lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.max}px)`,
-    xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.max}px)`,
-    xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.max}px)`
+    xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.max})`,
+    xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.max})`,
+    sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.max})`,
+    md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.max})`,
+    lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.max})`,
+    xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.max})`,
+    xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.max})`
   }
 };
 

package/dist/es2019/version.json

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