@atlaskit/primitives 0.9.5 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 0.10.1
+
+### Patch Changes
+
+- [`b6302963111`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6302963111) - Change border.radius.normal to be 3px instead of 4px.
+  `display: grid` is now accepted for `xcss`.
+
+## 0.10.0
+
+### Minor Changes
+
+- [`313d71fce9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/313d71fce9c) - Allow media queries at predefined breakpoints to be applied through xCSS.
+
 ## 0.9.5
 
 ### Patch Changes

package/dist/cjs/components/box.js

@@ -55,7 +55,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     style: style,
     testId: testId,
     ref: ref
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     css: className
   }, safeHtmlAttributes), children);

package/dist/cjs/version.json

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

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

@@ -9,9 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
+ * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
  * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
@@ -32,9 +32,9 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
+ * @codegen <<SignedSource::de092b03d79b8477034921622fcddd53>>
  * @codegenId spacing
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 var spaceMap = {
@@ -60,9 +60,9 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
+ * @codegen <<SignedSource::98eba397b6a9706307e40f32a49200fd>>
  * @codegenId colors
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
@@ -270,17 +270,17 @@ exports.fillMap = fillMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
+ * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
  * @codegenId misc
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives 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::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
@@ -304,7 +304,8 @@ var displayMap = {
   block: 'block',
   inline: 'inline',
   inlineBlock: 'inline-block',
-  inlineFlex: 'inline-flex'
+  inlineFlex: 'inline-flex',
+  grid: 'grid'
 };
 exports.displayMap = displayMap;
 var flexDirectionMap = {
@@ -318,7 +319,7 @@ var flexGrowMap = {
 };
 exports.flexGrowMap = flexGrowMap;
 var flexShrinkMap = {
-  '0': 0,
+  '0': '0',
   '1': 1
 };
 exports.flexShrinkMap = flexShrinkMap;
@@ -366,9 +367,9 @@ exports.positionMap = positionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
+ * @codegen <<SignedSource::f923934816cc73cf3f82820a93df5377>>
  * @codegenId border
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
@@ -380,7 +381,7 @@ var borderWidthMap = {
 exports.borderWidthMap = borderWidthMap;
 var borderRadiusMap = {
   'radius.050': "var(--ds-radius-050, 2px)",
-  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.100': "var(--ds-radius-100, 3px)",
   'radius.200': "var(--ds-radius-200, 8px)",
   'radius.300': "var(--ds-radius-300, 12px)",
   'radius.400': "var(--ds-radius-400, 16px)",

package/dist/cjs/xcss/xcss.js

@@ -8,9 +8,11 @@ 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"));
+var _responsive = require("../helpers/responsive");
 var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -81,6 +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) {
+  return mediaQuery.replace(/[.()]/g, '\\$&');
+} // Escape the ".", "(", and ")" in the media query syntax.
+).join('|'), ")$"));
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || (0, _typeof2.default)(styleObj) !== 'object') {
     return styleObj;
@@ -98,7 +105,7 @@ var transformStyles = function transformStyles(styleObj) {
       value = _ref2[1];
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key)) {
+      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
       }
     }
@@ -109,8 +116,10 @@ var transformStyles = function transformStyles(styleObj) {
       styleObj[key] = transformStyles(value);
       return;
     }
-
-    // TODO: Deal with media queries
+    if (reMediaQuery.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
 
     // We have now dealt with all the special cases, so,
     // check whether what remains is a style property
@@ -120,7 +129,7 @@ var transformStyles = function transformStyles(styleObj) {
     }
     var tokenValue = tokensMap[key][value];
     if (!tokenValue) {
-      var message = "Invalid token alias: ".concat(value);
+      var message = "Invalid token alias: ".concat(key, ": ").concat(value);
       (0, _warnOnce.default)(message);
     }
     styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
@@ -149,6 +158,10 @@ var parseXcss = function parseXcss(args) {
   }
   return styles;
 };
+
+// Media queries should not contain nested media queries
+
+// Pseudos should not contain nested pseudos, or media queries
 exports.parseXcss = parseXcss;
 // unused private functions only so we can extract the return type from a generic function
 var boxWrapper = function boxWrapper(style) {

package/dist/es2019/components/box.js

@@ -48,7 +48,7 @@ const Box = /*#__PURE__*/forwardRef(({
     style: style,
     testId: testId,
     ref: ref
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     css: className
   }, safeHtmlAttributes), children);

package/dist/es2019/version.json

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

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
+ * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
  * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
@@ -22,9 +22,9 @@ export const dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
+ * @codegen <<SignedSource::de092b03d79b8477034921622fcddd53>>
  * @codegenId spacing
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export const spaceMap = {
@@ -48,9 +48,9 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
+ * @codegen <<SignedSource::98eba397b6a9706307e40f32a49200fd>>
  * @codegenId colors
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
@@ -252,17 +252,17 @@ export const fillMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
+ * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
  * @codegenId misc
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives 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::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
@@ -284,7 +284,8 @@ export const displayMap = {
   block: 'block',
   inline: 'inline',
   inlineBlock: 'inline-block',
-  inlineFlex: 'inline-flex'
+  inlineFlex: 'inline-flex',
+  grid: 'grid'
 };
 export const flexDirectionMap = {
   row: 'row',
@@ -295,7 +296,7 @@ export const flexGrowMap = {
   '1': 1
 };
 export const flexShrinkMap = {
-  '0': 0,
+  '0': '0',
   '1': 1
 };
 export const flexMap = {
@@ -335,9 +336,9 @@ export const positionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
+ * @codegen <<SignedSource::f923934816cc73cf3f82820a93df5377>>
  * @codegenId border
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
@@ -348,7 +349,7 @@ export const borderWidthMap = {
 };
 export const borderRadiusMap = {
   'radius.050': "var(--ds-radius-050, 2px)",
-  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.100': "var(--ds-radius-100, 3px)",
   'radius.200': "var(--ds-radius-200, 8px)",
   'radius.300': "var(--ds-radius-300, 12px)",
   'radius.400': "var(--ds-radius-400, 16px)",

package/dist/es2019/xcss/xcss.js

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { UNSAFE_media } from '../helpers/responsive';
 import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   alignSelf: alignSelfMap,
@@ -67,6 +68,9 @@ const uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
 const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
 const reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 const rePseudos = /^::?.*$/;
+const reMediaQuery = /^@media .*$/;
+const reValidMediaQuery = new RegExp(`^(${[...Object.values(UNSAFE_media.above), ...Object.values(UNSAFE_media.below)].map(mediaQuery => mediaQuery.replace(/[.()]/g, '\\$&') // Escape the ".", "(", and ")" in the media query syntax.
+).join('|')})$`);
 const transformStyles = styleObj => {
   if (!styleObj || typeof styleObj !== 'object') {
     return styleObj;
@@ -81,7 +85,7 @@ const transformStyles = styleObj => {
   Object.entries(styleObj).forEach(([key, value]) => {
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key)) {
+      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
         throw new Error(`Styles not supported for key '${key}'.`);
       }
     }
@@ -92,8 +96,10 @@ const transformStyles = styleObj => {
       styleObj[key] = transformStyles(value);
       return;
     }
-
-    // TODO: Deal with media queries
+    if (reMediaQuery.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
 
     // We have now dealt with all the special cases, so,
     // check whether what remains is a style property
@@ -103,7 +109,7 @@ const transformStyles = styleObj => {
     }
     const tokenValue = tokensMap[key][value];
     if (!tokenValue) {
-      const message = `Invalid token alias: ${value}`;
+      const message = `Invalid token alias: ${key}: ${value}`;
       warnOnce(message);
     }
     styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
@@ -134,6 +140,11 @@ export const parseXcss = args => {
   }
   return styles;
 };
+
+// Media queries should not contain nested media queries
+
+// Pseudos should not contain nested pseudos, or media queries
+
 // unused private functions only so we can extract the return type from a generic function
 const boxWrapper = style => xcss(style);
 const inlineWrapper = style => xcss(style);

package/dist/esm/components/box.js

@@ -48,7 +48,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: style,
     testId: testId,
     ref: ref
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     css: className
   }, safeHtmlAttributes), children);

package/dist/esm/version.json

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

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

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
+ * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
  * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
@@ -23,9 +23,9 @@ export var dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
+ * @codegen <<SignedSource::de092b03d79b8477034921622fcddd53>>
  * @codegenId spacing
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export var spaceMap = {
@@ -49,9 +49,9 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
+ * @codegen <<SignedSource::98eba397b6a9706307e40f32a49200fd>>
  * @codegenId colors
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
@@ -253,17 +253,17 @@ export var fillMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
+ * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
  * @codegenId misc
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives 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::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
@@ -285,7 +285,8 @@ export var displayMap = {
   block: 'block',
   inline: 'inline',
   inlineBlock: 'inline-block',
-  inlineFlex: 'inline-flex'
+  inlineFlex: 'inline-flex',
+  grid: 'grid'
 };
 export var flexDirectionMap = {
   row: 'row',
@@ -296,7 +297,7 @@ export var flexGrowMap = {
   '1': 1
 };
 export var flexShrinkMap = {
-  '0': 0,
+  '0': '0',
   '1': 1
 };
 export var flexMap = {
@@ -336,9 +337,9 @@ export var positionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
+ * @codegen <<SignedSource::f923934816cc73cf3f82820a93df5377>>
  * @codegenId border
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
@@ -349,7 +350,7 @@ export var borderWidthMap = {
 };
 export var borderRadiusMap = {
   'radius.050': "var(--ds-radius-050, 2px)",
-  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.100': "var(--ds-radius-100, 3px)",
   'radius.200': "var(--ds-radius-200, 8px)",
   'radius.300': "var(--ds-radius-300, 12px)",
   'radius.400': "var(--ds-radius-400, 16px)",

package/dist/esm/xcss/xcss.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { UNSAFE_media } from '../helpers/responsive';
 import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   alignSelf: alignSelfMap,
@@ -72,6 +74,11 @@ var isSafeEnvToThrow = function isSafeEnvToThrow() {
 };
 var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 var rePseudos = /^::?.*$/;
+var reMediaQuery = /^@media .*$/;
+var reValidMediaQuery = new RegExp("^(".concat([].concat(_toConsumableArray(Object.values(UNSAFE_media.above)), _toConsumableArray(Object.values(UNSAFE_media.below))).map(function (mediaQuery) {
+  return mediaQuery.replace(/[.()]/g, '\\$&');
+} // Escape the ".", "(", and ")" in the media query syntax.
+).join('|'), ")$"));
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || _typeof(styleObj) !== 'object') {
     return styleObj;
@@ -89,7 +96,7 @@ var transformStyles = function transformStyles(styleObj) {
       value = _ref2[1];
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key)) {
+      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
       }
     }
@@ -100,8 +107,10 @@ var transformStyles = function transformStyles(styleObj) {
       styleObj[key] = transformStyles(value);
       return;
     }
-
-    // TODO: Deal with media queries
+    if (reMediaQuery.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
 
     // We have now dealt with all the special cases, so,
     // check whether what remains is a style property
@@ -111,7 +120,7 @@ var transformStyles = function transformStyles(styleObj) {
     }
     var tokenValue = tokensMap[key][value];
     if (!tokenValue) {
-      var message = "Invalid token alias: ".concat(value);
+      var message = "Invalid token alias: ".concat(key, ": ").concat(value);
       warnOnce(message);
     }
     styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
@@ -140,6 +149,11 @@ export var parseXcss = function parseXcss(args) {
   }
   return styles;
 };
+
+// Media queries should not contain nested media queries
+
+// Pseudos should not contain nested pseudos, or media queries
+
 // unused private functions only so we can extract the return type from a generic function
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);

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

@@ -1,9 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
+import { UNSAFE_media } from './media-helper';
 /**
  * The breakpoints we have for responsiveness.
  */
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */

package/dist/types/xcss/style-maps.partial.d.ts

@@ -1,9 +1,9 @@
 import { SerializedStyles } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
+ * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
  * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
@@ -39,9 +39,9 @@ export type MinInlineSize = Dimension;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
+ * @codegen <<SignedSource::de092b03d79b8477034921622fcddd53>>
  * @codegenId spacing
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export declare const spaceMap: {
@@ -66,9 +66,9 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
+ * @codegen <<SignedSource::98eba397b6a9706307e40f32a49200fd>>
  * @codegenId colors
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
@@ -275,17 +275,17 @@ export type Fill = keyof typeof fillMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
+ * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
  * @codegenId misc
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives 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::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
@@ -310,6 +310,7 @@ export declare const displayMap: {
     readonly inline: "inline";
     readonly inlineBlock: "inline-block";
     readonly inlineFlex: "inline-flex";
+    readonly grid: "grid";
 };
 export type Display = keyof typeof displayMap;
 export declare const flexDirectionMap: {
@@ -323,7 +324,7 @@ export declare const flexGrowMap: {
 };
 export type FlexGrow = keyof typeof flexGrowMap;
 export declare const flexShrinkMap: {
-    readonly '0': 0;
+    readonly '0': "0";
     readonly '1': 1;
 };
 export type FlexShrink = keyof typeof flexShrinkMap;
@@ -370,9 +371,9 @@ export type Position = keyof typeof positionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
+ * @codegen <<SignedSource::f923934816cc73cf3f82820a93df5377>>
  * @codegenId border
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */

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

@@ -2,6 +2,7 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
+import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -11,10 +12,13 @@ declare const uniqueSymbol: unique symbol;
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
 export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+type CSSMediaQueries = {
+    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: SafeCSSObject;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | MediaQuery>;
 };
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 declare const boxWrapper: (style: any) => {
     readonly [uniqueSymbol]: BoxStyles;

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

@@ -1,9 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
+import { UNSAFE_media } from './media-helper';
 /**
  * The breakpoints we have for responsiveness.
  */
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -1,9 +1,9 @@
 import { SerializedStyles } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
+ * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
  * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
@@ -39,9 +39,9 @@ export type MinInlineSize = Dimension;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
+ * @codegen <<SignedSource::de092b03d79b8477034921622fcddd53>>
  * @codegenId spacing
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export declare const spaceMap: {
@@ -66,9 +66,9 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
+ * @codegen <<SignedSource::98eba397b6a9706307e40f32a49200fd>>
  * @codegenId colors
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
@@ -275,17 +275,17 @@ export type Fill = keyof typeof fillMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
+ * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
  * @codegenId misc
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives 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::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
@@ -310,6 +310,7 @@ export declare const displayMap: {
     readonly inline: "inline";
     readonly inlineBlock: "inline-block";
     readonly inlineFlex: "inline-flex";
+    readonly grid: "grid";
 };
 export type Display = keyof typeof displayMap;
 export declare const flexDirectionMap: {
@@ -323,7 +324,7 @@ export declare const flexGrowMap: {
 };
 export type FlexGrow = keyof typeof flexGrowMap;
 export declare const flexShrinkMap: {
-    readonly '0': 0;
+    readonly '0': "0";
     readonly '1': 1;
 };
 export type FlexShrink = keyof typeof flexShrinkMap;
@@ -370,9 +371,9 @@ export type Position = keyof typeof positionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
+ * @codegen <<SignedSource::f923934816cc73cf3f82820a93df5377>>
  * @codegenId border
- * @codegenCommand yarn codegen-styles
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */

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

@@ -2,6 +2,7 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
+import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -11,10 +12,13 @@ declare const uniqueSymbol: unique symbol;
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
 export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+type CSSMediaQueries = {
+    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: SafeCSSObject;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | MediaQuery>;
 };
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 declare const boxWrapper: (style: any) => {
     readonly [uniqueSymbol]: BoxStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.9.5",
+  "version": "0.10.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -69,7 +69,7 @@
     }
   },
   "scripts": {
-    "codegen-styles": "ts-node --project ./tsconfig.node.json ./scripts/codegen-styles"
+    "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -122,7 +122,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.24",
+    "@atlassian/gemini-visual-regression": "^0.0.27",
     "@testing-library/react": "^12.1.5",
     "csstype": "^3.1.0",
     "prettier": "^2.8.0",

package/report.api.md

@@ -316,9 +316,17 @@ type BoxXCSS = {
   readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
+// @public (undocumented)
+type CSSMediaQueries = {
+  [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
+
 // @public (undocumented)
 type CSSPseudos = {
-  [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
+  [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
 };
 
 // @public (undocumented)
@@ -346,6 +354,7 @@ const displayMap: {
   readonly inline: 'inline';
   readonly inlineBlock: 'inline-block';
   readonly inlineFlex: 'inline-flex';
+  readonly grid: 'grid';
 };
 
 // @public (undocumented)
@@ -407,7 +416,7 @@ type FlexShrink = keyof typeof flexShrinkMap;
 
 // @public (undocumented)
 const flexShrinkMap: {
-  readonly '0': 0;
+  readonly '0': '0';
   readonly '1': 1;
 };
 
@@ -499,6 +508,11 @@ type MaxInlineSize = Dimension;
 // @public (undocumented)
 type MaxWidth = Dimension;
 
+// @public (undocumented)
+type MediaQuery =
+  | (typeof UNSAFE_media.above)[Breakpoint]
+  | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+
 // @public (undocumented)
 type MinBlockSize = Dimension;
 
@@ -560,6 +574,7 @@ type Right = Dimension;
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   TokenisedProps &
+  CSSMediaQueries &
   Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
@@ -741,6 +756,27 @@ type Top = Dimension;
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
+// @public
+const UNSAFE_media: {
+  readonly above: {
+    readonly xxs: `@media (min-width: ${number}rem)`;
+    readonly xs: `@media (min-width: ${number}rem)`;
+    readonly sm: `@media (min-width: ${number}rem)`;
+    readonly md: `@media (min-width: ${number}rem)`;
+    readonly lg: `@media (min-width: ${number}rem)`;
+    readonly xl: `@media (min-width: ${number}rem)`;
+    readonly xxl: `@media (min-width: ${number}rem)`;
+  };
+  readonly below: {
+    readonly xs: `@media (max-width: ${number}rem)`;
+    readonly sm: `@media (max-width: ${number}rem)`;
+    readonly md: `@media (max-width: ${number}rem)`;
+    readonly lg: `@media (max-width: ${number}rem)`;
+    readonly xl: `@media (max-width: ${number}rem)`;
+    readonly xxl: `@media (max-width: ${number}rem)`;
+  };
+};
+
 // @public (undocumented)
 type Width = Dimension;
 

package/scripts/border-codegen-template.tsx

@@ -36,7 +36,7 @@ const activeTokens = tokens
   .map(
     (t): Token => ({
       token: t.name,
-      fallback: t.value as string,
+      fallback: t.value === '4px' ? '3px' : (t.value as string),
       isDeprecated: t.attributes.state === 'deprecated',
     }),
   );

package/scripts/codegen-file-templates/display.tsx

@@ -4,6 +4,7 @@ export const displayMap = {
   inline: 'inline',
   inlineBlock: 'inline-block',
   inlineFlex: 'inline-flex',
+  grid: 'grid',
 } as const;
 
 export type Display = keyof typeof displayMap;

package/scripts/codegen-file-templates/flex-shrink.tsx

@@ -1,5 +1,5 @@
 export const flexShrinkMap = {
-  '0': 0,
+  '0': '0',
   '1': 1,
 } as const;
 

package/scripts/codegen-styles.tsx

@@ -38,7 +38,7 @@ const sourceFns = [
   () =>
     createPartialSignedArtifact(
       options => options.map(createStylesFromFileTemplate).join('\n'),
-      'yarn codegen-styles',
+      'yarn workspace @atlaskit/primitives codegen-styles',
       {
         id: 'dimensions',
         absoluteFilePath: targetPath,
@@ -49,7 +49,7 @@ const sourceFns = [
   () =>
     createPartialSignedArtifact(
       createSpacingStylesFromTemplate,
-      'yarn codegen-styles',
+      'yarn workspace @atlaskit/primitives codegen-styles',
       {
         id: 'spacing',
         absoluteFilePath: targetPath,
@@ -60,7 +60,7 @@ const sourceFns = [
   () =>
     createPartialSignedArtifact(
       options => options.map(createColorStylesFromTemplate).join('\n'),
-      'yarn codegen-styles',
+      'yarn workspace @atlaskit/primitives codegen-styles',
       {
         id: 'colors',
         absoluteFilePath: targetPath,
@@ -71,7 +71,7 @@ const sourceFns = [
   () =>
     createPartialSignedArtifact(
       options => options.map(createBorderStylesFromTemplate).join('\n'),
-      'yarn codegen-styles',
+      'yarn workspace @atlaskit/primitives codegen-styles',
       {
         id: 'border',
         absoluteFilePath: targetPath,
@@ -82,7 +82,7 @@ const sourceFns = [
   () =>
     createPartialSignedArtifact(
       options => options.map(createStylesFromFileTemplate).join('\n'),
-      'yarn codegen-styles',
+      'yarn workspace @atlaskit/primitives codegen-styles',
       {
         id: 'misc',
         absoluteFilePath: targetPath,

package/tmp/api-report-tmp.d.ts

@@ -278,9 +278,17 @@ type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
+// @public (undocumented)
+type CSSMediaQueries = {
+    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
+
 // @public (undocumented)
 type CSSPseudos = {
-    [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
+    [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
 };
 
 // @public (undocumented)
@@ -308,6 +316,7 @@ const displayMap: {
     readonly inline: "inline";
     readonly inlineBlock: "inline-block";
     readonly inlineFlex: "inline-flex";
+    readonly grid: "grid";
 };
 
 // @public (undocumented)
@@ -369,7 +378,7 @@ type FlexShrink = keyof typeof flexShrinkMap;
 
 // @public (undocumented)
 const flexShrinkMap: {
-    readonly '0': 0;
+    readonly '0': "0";
     readonly '1': 1;
 };
 
@@ -443,6 +452,9 @@ type MaxInlineSize = Dimension;
 // @public (undocumented)
 type MaxWidth = Dimension;
 
+// @public (undocumented)
+type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+
 // @public (undocumented)
 type MinBlockSize = Dimension;
 
@@ -502,7 +514,7 @@ type PublicBoxPropsBase = {
 type Right = Dimension;
 
 // @public (undocumented)
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
 type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
@@ -665,6 +677,27 @@ type Top = Dimension;
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
+// @public
+const UNSAFE_media: {
+    readonly above: {
+        readonly xxs: `@media (min-width: ${number}rem)`;
+        readonly xs: `@media (min-width: ${number}rem)`;
+        readonly sm: `@media (min-width: ${number}rem)`;
+        readonly md: `@media (min-width: ${number}rem)`;
+        readonly lg: `@media (min-width: ${number}rem)`;
+        readonly xl: `@media (min-width: ${number}rem)`;
+        readonly xxl: `@media (min-width: ${number}rem)`;
+    };
+    readonly below: {
+        readonly xs: `@media (max-width: ${number}rem)`;
+        readonly sm: `@media (max-width: ${number}rem)`;
+        readonly md: `@media (max-width: ${number}rem)`;
+        readonly lg: `@media (max-width: ${number}rem)`;
+        readonly xl: `@media (max-width: ${number}rem)`;
+        readonly xxl: `@media (max-width: ${number}rem)`;
+    };
+};
+
 // @public (undocumented)
 type Width = Dimension;
 

package/tsconfig.node.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../../tsconfig.node.json",
-  "ts-node": {
-    // TODO: Remove this line when/if ../../../tsconfig.node.json adds it instead: https://atlassian.slack.com/archives/C048B3HSFB9/p1684121217771909
-    "require": ["tsconfig-paths/register"]
-  }
-}