@atlaskit/primitives 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.0.10
+
+### Patch Changes
+
+- [`ac645224013`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac645224013) - Removes generic for `xcss` fn. Adds support for other `AtTypes`.
+
+## 1.0.9
+
+### Patch Changes
+
+- [`1859bc0b8c7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1859bc0b8c7) - Update the casing on `xcss` to ensure consistency with the API and package consumption.
+
 ## 1.0.8
 
 ### Patch Changes
@@ -96,7 +108,7 @@
 
 ### Patch Changes
 
-- [`4c026f170d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c026f170d6) - Remove warnings for non-token values passed to xCSS in non-development environments.
+- [`4c026f170d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c026f170d6) - Remove warnings for non-token values passed to xcss in non-development environments.
 
 ## 0.14.2
 
@@ -173,7 +185,7 @@
 
 ### Minor Changes
 
-- [`8bd6dc6027f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8bd6dc6027f) - Box backgroundColor prop now accepts full token names, abbreviated forms will no longer work. xCSS now accepts full token names, abbreviated forms will no longer work.
+- [`8bd6dc6027f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8bd6dc6027f) - Box backgroundColor prop now accepts full token names, abbreviated forms will no longer work. xcss now accepts full token names, abbreviated forms will no longer work.
 
 ## 0.10.1
 
@@ -186,7 +198,7 @@
 
 ### Minor Changes
 
-- [`313d71fce9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/313d71fce9c) - Allow media queries at predefined breakpoints to be applied through xCSS.
+- [`313d71fce9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/313d71fce9c) - Allow media queries at predefined breakpoints to be applied through xcss.
 
 ## 0.9.5
 

package/README.md

@@ -10,4 +10,4 @@ Detailed docs and example usage can be found at:
 - [Box](https://staging.atlassian.design/components/primitives/box)
 - [Inline](https://staging.atlassian.design/components/primitives/inline)
 - [Stack](https://staging.atlassian.design/components/primitives/stack)
-- [xCSS](https://staging.atlassian.design/components/primitives/xcss)
+- [xcss](https://staging.atlassian.design/components/primitives/xcss)

package/constellation/box/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Box
-description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
+description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
 order: 1
 ---
 

package/constellation/box/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Box
-description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
+description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
 order: 0
 ---
 
@@ -20,32 +20,33 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Box is a general-purpose container with controlled use of design tokens. Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+Box is a general-purpose container that allows for controlled use of design tokens. Use the given props to configure display behaviour and styling that aligns with the Atlassian Design System.
+[To learn more about styling primitive components visit our xcss documentation.](/components/primitives/xcss/usage)
 
 <Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
 
 ## Padding
 
-Padding props can be used to access spacing design token and control internal layout. The following example demonstrates how each prop works individually:
+Padding props can be used to access spacing design tokens and control internal layout. The following example demonstrates how each prop works with space tokens.
 
 <Example Component={BoxPadding} packageName="@atlaskit/primitives/box" />
 
-*Note*: The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). It might be less intuitive at first but they are adequate to properly support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
+The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). This naming is used to support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
 
 ## Background color
 
-`Box` accepts a wide variety of background colors, referenced as semantic design tokens.
+`Box` accepts a wide variety of background colors, referenced as semantic design tokens. For the full list of color tokens or to learn more, visit our [Token documentation](/tokens/design-tokens/).
 
 <Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
 
-## xCSS
+## xcss
 
-Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value.
+Box exposes an `xcss` prop. This prop accepts `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xcss accepts most CSS properties, and when a token exists, the rule accepts that token as a value.
+For more information on xcss, see the dedicated [xcss documentation](/components/primitives/xcss).
 
 <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
 
-For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.
-
-## Practical Use Case
+## Practical use case
 
+`Box` is designed to be used in conjunction with `Inline` and `Stack` to create layouts. This example demonstrates how primitives can be used to create familiar components and patterns.
 <Example Component={PracticalUseCase} packageName="@atlaskit/primitives/box" />

package/constellation/box/usage.mdx

@@ -4,12 +4,10 @@ description: A box is a primitive component that acts as a generic container, an
 order: 2
 ---
 
-Use box to compose layouts with the valid spacing and background colors. A `Box` is a generic container with convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System.
+A `Box` is a generic container with convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System.
+Use a `Box` to compose layouts and add styling to child elements through visual props, including spacing and color through design tokens.
 
-A `Box` is primarily a containment element, with visual props that affect the whitespace available to child elements. 
-
-
-## Use `Box`
+## `Box` styling
 Display behavior is set by using the available props or using `xcss`. Makers can make design decisions for `Box` by setting:
 
 - `padding`
@@ -21,10 +19,13 @@ Display behavior is set by using the available props or using `xcss`. Makers can
 - `paddingBlockEnd`
 - `backgroundColor`
 
-To identify usages of `Box` in a given design, look for where a UI element (could be as small as the parent of a button or as a big as the wrapper of an entire section) will receive some visual styles applied to a container.
-
+## Using `Box`
+To identify usages of `Box` in a given design, look for where a UI element will receive some visual styles applied to a container. `Box` can be used on a range of sizes of elements, from buttons to section wrappers.
 `Box`, being generic in nature, can be "over-used", so it’s important to consider situations where more specific and expressive primitives could be used, for example: `Inline` and `Stack` to manage horizontal and vertical layouts, respectively.
 
-Related
+## Related
 - [Learn more about the Inline primitive](/components/primitives/inline/usage)
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)
+- [Learn more about the Grid primitive](/components/primitives/grid/examples)
+- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
+- [Learn more about the Flex primitive](/components/primitives/flex/examples)

package/constellation/inline/usage.mdx

@@ -1,12 +1,12 @@
 ---
 title: Inline
-description: An Inline is a primitive component that is responsible for the horizontal layout of its child elements.
+description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
 order: 2
 ---
 
-Primitive components are designed to act as building blocks for composing a user experience. An Inline primitive should be used when you want to layout UI elements horizontally, and make use of the built-in design guidance from the Atlassian Design System. 
+Primitive components are designed to act as building blocks for composing a user experience. An Inline primitive should be used when you want to layout UI elements horizontally, and make use of the built-in design guidance from the Atlassian Design System.
 
-Inline primitives work as you might expect, aligning content horizontally across a page or layout, as a container that decides the horizontal layout of its children. Inline components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. Inline should be used purely for visual alignment, and should have no opinions about the functionality of its children.  
+Inline primitives work as you might expect, aligning content horizontally across a page or layout, as a container that decides the horizontal layout of its children. Inline components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. Inline should be used purely for visual alignment, and should have no opinions about the functionality of its children.
 
 In its simplest form, `Inline` operates like a flexbox row, however adds the built in design token support and guidance.
 
@@ -18,7 +18,7 @@ In its simplest form, `Inline` operates like a flexbox row, however adds the bui
 It also has a flex-direction: row; but that’s the default, so not explicitly applied.
 
 ## Use `Inline`
-The purpose of an Inline is primarily as a container element controlling how child components are displayed and positioned horizontally. Inline should be used any time you wish to layout elements or components horizontally. 
+The purpose of an Inline is primarily as a container element controlling how child components are displayed and positioned horizontally. Inline should be used any time you wish to layout elements or components horizontally.
 
 The various Inline props can then be used to customize the spacing and styling on any child elements. These include:
 
@@ -31,6 +31,9 @@ The various Inline props can then be used to customize the spacing and styling o
 - `rowSpace`
 - `separator`
 
-## Related
 - [Learn more about the Box primitive](/components/primitives/box/usage)
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)
+- [Learn more about the Grid primitive](/components/primitives/grid/examples)
+- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
+- [Learn more about the Flex primitive](/components/primitives/flex/examples)
+

package/constellation/overview/index.mdx

@@ -23,9 +23,8 @@ Primitives are a new type of component for layouts and the placement of elements
 They act as simple building blocks to compose different parts of the user experience,
 from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).
 
-Primitives are a combination of design tokens that go a step further.
-These are component-like abstractions powered by design tokens that add a layer of ergonomics and accessibility. Tokens are great at describing the what of a design decision;
-primitives make it easier to reason about the when and how. This reduces cognitive overhead and prevents accidents or mistakes.
+Primitives are powered by design tokens and add a layer of ergonomics and accessibility to token application. Tokens are great at describing the what of a design decision;
+primitives make it easier to reason about the when and how. This reduces cognitive overhead, improves productivity and prevents accidents or mistakes.
 
 ## Available Primitives
 
@@ -57,14 +56,14 @@ This involves breaking down a design into its core layout components to as granu
 
 You might like to think first about breaking down a page into `Box` containers,
 identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose
-in a layout and grouping them together under a Box.
+in a layout and grouping them together under a `Box`.
 
 <Image src={boxUsageExample} />
 
 The behavior within and around these boxes can then be broken down into their horizontal `Inline` and vertical `Stack` components.
 
 <SectionMessage>
-The ESLint rule use-primitives offers suggestions for possible primitives in a layout.
+The ESLint rule <a href="/components/eslint-plugin-design-system/usage#use-primitives">use-primitives</a> offers suggestions for possible primitives to apply in a layout.
 </SectionMessage>
 
 <Image src={inlineUsageExample} />
@@ -75,3 +74,6 @@ The ESLint rule use-primitives offers suggestions for possible primitives in a l
 - [Learn more about the Box primitive](/components/primitives/box/usage)
 - [Learn more about the Inline primitive](/components/primitives/inline/usage)
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)
+- [Learn more about the Grid primitive](/components/primitives/grid/examples)
+- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
+- [Learn more about the Fkex primitive](/components/primitives/flex/examples)

package/constellation/responsive/03-breakpoints/examples.mdx

@@ -19,33 +19,3 @@ Media queries can be applied through the `media` object.
 
 
 <MediaQueriesTable />
-
-When used with `xcss`, be aware that a media query can't contain another media query to prevent arbitrary nesting. Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
-
-```
-import { xcss } from '@atlaskit/primitives';
-import { media } from '@atlaskit/primitives/responsive';
-
-const someStyles = xcss({
-  // This is okay, since media queries can contain pseudos
-  [media.above.md]: {
-    ':hover': {
-      backgroundColor: 'color.background.primary.hovered'
-    }
-  },
-
-  // This is not okay, since pseudos can't contain media queries
-  ':hover': {
-    [media.above.md]: {
-      backgroundColor: 'color.background.primary.hovered'
-    }
-  },
-
-  // This is not okay, since media queries can't contain media queries
-  [media.above.md]: {
-    [media.above.xs]: {
-      backgroundColor: 'color.background.primary.hovered'
-    }
-  },
-});
-```

package/constellation/stack/usage.mdx

@@ -1,12 +1,12 @@
 ---
 title: Stack
-description: A Stack is a primitive component that is responsible for the vertical layout of its child elements.
+description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
 order: 2
 ---
 
-Primitive components are designed to act as building blocks for composing a user experience. A `Stack` primitive should be used when you want to layout UI elements vertically, and make use of the built-in design guidance from the Atlassian Design System. 
+Primitive components are designed to act as building blocks for composing a user experience. A `Stack` primitive should be used when you want to layout UI elements vertically, and make use of the built-in design guidance from the Atlassian Design System.
 
-`Stack` primitives work by aligning content vertically on a page or layout, as a container that decides the vertical layout of its children. `Stack` components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. `Stack` should be used purely for visual alignment, and should have no opinions about the functionality of its children.  
+`Stack` primitives work by aligning content vertically on a page or layout, as a container that decides the vertical layout of its children. `Stack` components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. `Stack` should be used purely for visual alignment, and should have no opinions about the functionality of its children.
 
 In its simplest form, `Stack` operates like a flexbox column, however adds the built in design token support and guidance.
 
@@ -17,7 +17,7 @@ In its simplest form, `Stack` operates like a flexbox column, however adds the b
 ```
 
 ## Use `Stack`
-The purpose of a `Stack` is primarily as a container element controlling how content is displayed and aligned vertically. `Stack` should be used any time you wish to layout elements or components vertically. 
+The purpose of a `Stack` is primarily as a container element controlling how content is displayed and aligned vertically. `Stack` should be used any time you wish to layout elements or components vertically.
 
 The various `Stack` props can then be used to customize the spacing and styling on any child elements. These include:
 - `alignBlock`
@@ -27,5 +27,9 @@ The various `Stack` props can then be used to customize the spacing and styling
 - `space`
 
 ## Related
-- [Learn more about the Box primitive](/primitives/box/usage)
-- [Learn more about the Stack primitive](/primitives/box/usage)
+
+- [Learn more about the Box primitive](/components/primitives/box/usage)
+- [Learn more about the Inline primitive](/components/primitives/inline/usage)
+- [Learn more about the Grid primitive](/components/primitives/grid/examples)
+- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
+- [Learn more about the Flex primitive](/components/primitives/flex/examples)

package/constellation/xcss/examples.mdx

@@ -1,6 +1,6 @@
 ---
-title: xCSS
-description: xCSS is a safer, tokens-first approach to CSS-in-JS.
+title: xcss
+description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 1
 ---
 
@@ -31,6 +31,6 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
 
 ## Responsiveness
 
-xCSS also accepts a subset of media queries at predefined breakpoints:
+xcss also accepts a subset of media queries at predefined breakpoints:
 
 <Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />

package/constellation/xcss/migration.mdx

@@ -1,6 +1,6 @@
 ---
-title: Migrating your app to xCSS
-description: xCSS is a safer, tokens-first approach to CSS-in-JS.
+title: Migrating your app to xcss
+description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 2
 ---
 

package/constellation/xcss/usage.mdx

@@ -1,6 +1,6 @@
 ---
-title: xCSS
-description: xCSS is a safer, tokens-first approach to CSS-in-JS.
+title: xcss
+description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 0
 ---
 import { MediaQueriesTable } from '@af/design-system-docs-ui';
@@ -55,7 +55,7 @@ Note: styles generated from `xcss` cannot be applied directly to the `className`
 
 ### Type safety
 
-`xcss` uses strongly-typed values generated from design token definitions, making it simpler to apply the right token to the right CSS property. 
+`xcss` uses strongly-typed values generated from design token definitions, making it simpler to apply the right token to the right CSS property.
 This is intended to be more ergonomic and intuitive, but also prevent the misapplication of tokens to the wrong properties.
 
 Any [valid token name](/components/tokens/all-tokens) is available to be applied against its
@@ -74,7 +74,7 @@ const someStyles = xcss({
 ```
 
 ### Restricted nesting
-`xcss` is flexible enough to implement any design, but it does restrict the application of styles in one key way. 
+`xcss` is flexible enough to implement any design, but it does restrict the application of styles in one key way.
 Selectors cannot be nested or target elements beyond the element on which styles are applied.
 This restriction is intended to encourage better component encapsulation, reduce side-effects and make the codebase more resilient to change.
 
@@ -108,14 +108,15 @@ These unsafe selectors will throw a type error if applied.
 For richer examples of how to use `xcss` please see the [primitives `xcss` documentation](/components/primitives/xcss/examples).
 
 ### Media Queries
-xCSS can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, xCSS exposes the following pre-defined breakpoints:
+xcss can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, xcss exposes the following pre-defined breakpoints:
+
 <MediaQueriesTable />
 
 Media queries can be applied through keys that can be imported from `@atlaskit/primitives/responsive`.
 For in depth examples on how to enable responsive behavior, please see our [primitive responsiveness documentation](/components/primitives/xcss/examples#responsiveness).
 
-The objects defined at each breakpoint behave in much the same way as a normal xCSS object, and can apply responsiveness to any CSS.
-The only limitation is that a media query can't contain another media query. This is to prevent arbitrary nesting. 
+The objects defined at each breakpoint behave in much the same way as a normal xcss object, and can apply responsiveness to any CSS.
+The only limitation is that a media query can't contain another media query. This is to prevent arbitrary nesting.
 Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
 
 ```

package/dist/cjs/version.json

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

package/dist/cjs/xcss/xcss.js

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
-var _mediaHelper = require("../responsive/media-helper");
 var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -75,16 +74,7 @@ var isSafeEnvToThrow = function isSafeEnvToThrow() {
   return (typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) === 'object' && (0, _typeof2.default)(process.env) === 'object' && process.env.NODE_ENV !== 'production';
 };
 var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
-var rePseudos = /^::?.*$/;
-var reMediaQuery = /^@media .*$/;
-
-/**
- * Reduce our media queries into a safe string for regex comparison.
- */
-var reValidMediaQuery = new RegExp("^(".concat(Object.values(_mediaHelper.media.above).map(function (mediaQuery) {
-  return mediaQuery.replace(/[.()]/g, '\\$&');
-} // Escape the ".", "(", and ")" in the media query syntax.
-).join('|'), ")$"));
+var safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || (0, _typeof2.default)(styleObj) !== 'object') {
     return styleObj;
@@ -100,23 +90,17 @@ var transformStyles = function transformStyles(styleObj) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    if (isSafeEnvToThrow()) {
-      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
-        throw new Error("Styles not supported for key '".concat(key, "'."));
-      }
-    }
-
     // If key is a pseudo class or a pseudo element, then value should be an object.
     // So, call transformStyles on the value
-    if (rePseudos.test(key)) {
+    if ((0, _typeof2.default)(value) === 'object' && safeSelectors.test(key)) {
       styleObj[key] = transformStyles(value);
       return;
     }
-    if (reMediaQuery.test(key)) {
-      // @ts-expect-error
-      styleObj[key] = transformStyles(value);
-      return;
+    if (isSafeEnvToThrow()) {
+      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
+      if (reNestedSelectors.test(key)) {
+        throw new Error("Styles not supported for key '".concat(key, "'."));
+      }
     }
 
     // We have now dealt with all the special cases, so,
@@ -157,13 +141,6 @@ var parseXcss = function parseXcss(args) {
 
 // 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) {
-  return xcss(style);
-};
-var spaceWrapper = function spaceWrapper(style) {
-  return xcss(style);
-};
 /**
  * ### xcss
  *

package/dist/es2019/version.json

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

package/dist/es2019/xcss/xcss.js

@@ -1,6 +1,5 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
-import { media } from '../responsive/media-helper';
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   backgroundColor: backgroundColorMap,
@@ -61,14 +60,7 @@ const tokensMap = {
 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 .*$/;
-
-/**
- * Reduce our media queries into a safe string for regex comparison.
- */
-const reValidMediaQuery = new RegExp(`^(${Object.values(media.above).map(mediaQuery => mediaQuery.replace(/[.()]/g, '\\$&') // Escape the ".", "(", and ")" in the media query syntax.
-).join('|')})$`);
+const safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;
 const transformStyles = styleObj => {
   if (!styleObj || typeof styleObj !== 'object') {
     return styleObj;
@@ -81,23 +73,17 @@ const transformStyles = styleObj => {
 
   // Modifies styleObj in place. Be careful.
   Object.entries(styleObj).forEach(([key, value]) => {
-    if (isSafeEnvToThrow()) {
-      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
-        throw new Error(`Styles not supported for key '${key}'.`);
-      }
-    }
-
     // If key is a pseudo class or a pseudo element, then value should be an object.
     // So, call transformStyles on the value
-    if (rePseudos.test(key)) {
+    if (typeof value === 'object' && safeSelectors.test(key)) {
       styleObj[key] = transformStyles(value);
       return;
     }
-    if (reMediaQuery.test(key)) {
-      // @ts-expect-error
-      styleObj[key] = transformStyles(value);
-      return;
+    if (isSafeEnvToThrow()) {
+      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
+      if (reNestedSelectors.test(key)) {
+        throw new Error(`Styles not supported for key '${key}'.`);
+      }
     }
 
     // We have now dealt with all the special cases, so,
@@ -140,9 +126,6 @@ export const parseXcss = args => {
 
 // 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 spaceWrapper = style => xcss(style);
 /**
  * ### xcss
  *

package/dist/esm/version.json

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

package/dist/esm/xcss/xcss.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
-import { media } from '../responsive/media-helper';
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   backgroundColor: backgroundColorMap,
@@ -66,16 +65,7 @@ var isSafeEnvToThrow = function isSafeEnvToThrow() {
   return (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && _typeof(process.env) === 'object' && process.env.NODE_ENV !== 'production';
 };
 var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
-var rePseudos = /^::?.*$/;
-var reMediaQuery = /^@media .*$/;
-
-/**
- * Reduce our media queries into a safe string for regex comparison.
- */
-var reValidMediaQuery = new RegExp("^(".concat(Object.values(media.above).map(function (mediaQuery) {
-  return mediaQuery.replace(/[.()]/g, '\\$&');
-} // Escape the ".", "(", and ")" in the media query syntax.
-).join('|'), ")$"));
+var safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || _typeof(styleObj) !== 'object') {
     return styleObj;
@@ -91,23 +81,17 @@ var transformStyles = function transformStyles(styleObj) {
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    if (isSafeEnvToThrow()) {
-      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
-        throw new Error("Styles not supported for key '".concat(key, "'."));
-      }
-    }
-
     // If key is a pseudo class or a pseudo element, then value should be an object.
     // So, call transformStyles on the value
-    if (rePseudos.test(key)) {
+    if (_typeof(value) === 'object' && safeSelectors.test(key)) {
       styleObj[key] = transformStyles(value);
       return;
     }
-    if (reMediaQuery.test(key)) {
-      // @ts-expect-error
-      styleObj[key] = transformStyles(value);
-      return;
+    if (isSafeEnvToThrow()) {
+      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
+      if (reNestedSelectors.test(key)) {
+        throw new Error("Styles not supported for key '".concat(key, "'."));
+      }
     }
 
     // We have now dealt with all the special cases, so,
@@ -148,13 +132,6 @@ export var parseXcss = function parseXcss(args) {
 
 // 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);
-};
-var spaceWrapper = function spaceWrapper(style) {
-  return xcss(style);
-};
 /**
  * ### xcss
  *

package/dist/types/components/flex.d.ts

@@ -133,5 +133,5 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | "wrap" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "as" | "children" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
 export default Flex;

package/dist/types/components/inline.d.ts

@@ -113,5 +113,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "as" | "children" | "space" | "separator" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "as" | "children" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

package/dist/types/components/stack.d.ts

@@ -87,5 +87,5 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "as" | "children" | "space" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "as" | "children" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;