@atlaskit/primitives 1.0.9 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.0.11
+
+### Patch Changes
+
+- [`30fb9fe0ff4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30fb9fe0ff4) - Mark Pressable exports as unsafe (for internal use only)
+
+## 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

package/constellation/box/usage.mdx

@@ -26,3 +26,6 @@ To identify usages of `Box` in a given design, look for where a UI element will
 ## 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/flex/examples.mdx

@@ -20,24 +20,20 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-The `Flex` component is designed as a very basic mapping to the CSS Flexbox API.
-It can be used as a less richly-configured `Inline` or `Stack`. Like `Stack` and `Inline`
-`Flex` exclusively supports token-backed `gap` properties to ensure layouts using `Flex` match
-the Atlassian Design System spacing scale.
+The `Flex` component is a basic mapping to the CSS Flexbox API. It can be used as a less richly-configured `Inline` or `Stack`. Like Stack and Inline, `Flex` exclusively supports token-backed `gap` properties to ensure layouts using `Flex` match the Atlassian Design System spacing scale.
 
 <Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
 
 ## Align items and justify content
 
-`Flex` applies the `alignItems` and `justifyContent` properties to align content
-along its cross and main axes respectively.
+`Flex` applies the `alignItems` and `justifyContent` properties to align content along its cross and main axes respectively.
 
 <Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
 
 ## Wrap
 
-Flex-prefixed properties in CSS do not have this prefix in the component API.
-For example `flex-wrap` is instead applied as the `wrap` property.
+Flex-prefixed properties in CSS do not have this prefix in the component API. 
+For example, `flex-wrap` is instead applied as the `wrap` property.
 
 <Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />
 

package/constellation/grid/examples.mdx

@@ -28,9 +28,8 @@ It can be used as an alternative to [Flex](/components/primitives/flex), [Inline
 
 ## Gap properties
 
-Gap properties - `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics
-and keep the whitespace of the grid harmonious with our spacing system.
 
+Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics and keep the whitespace of the grid harmonious with the spacing system.
 <Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
 
 ## Template syntax

package/constellation/inline/examples.mdx

@@ -27,8 +27,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Inline is an abstraction to efficiently lay-out a group of elements horizontally.
-Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+Inline should be used to efficiently lay-out a group of elements horizontally.
+
+Use the given props to configure display behaviour using designs tokens, as shown in the more complex examples below.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
 
@@ -38,16 +39,15 @@ Spacing between items can be controlled with the `space` prop:
 
 <Example Component={InlineSpaceBasic} packageName="@atlaskit/primitives/inline" />
 
-When content is set to wrap the `space` prop applies equal spacing between rows as well:
+When content is set to wrap, the `space` prop applies equal spacing between rows.
 
-<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
+For a different space value between rows use the `rowSpace` prop.
 
-For a different space value between rows use the `rowSpace` prop, as shown in the dynamic example above.
+<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
 
 ## Alignment
 
-To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
-alignment in the block and inline directions respectively.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control alignment in the vertical and horizontal axis respectively.
 
 ### Block alignment
 
@@ -59,7 +59,7 @@ alignment in the block and inline directions respectively.
 
 ## Spread
 
-Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behaviour) or spread equally in the space available.
 
 <Example Component={InlineSpread} packageName="@atlaskit/primitives/inline" />
 
@@ -71,15 +71,14 @@ When the number of items goes beyond the available space `shouldWrap` can be use
 
 ## Separator
 
-For logically related elements it's possible to specify a `separator` value.
+For logically related elements it's possible to specify a `separator` character value.
 
 <Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
 
 ## Width control
 
-By default an `Inline` will have its width influenced by the context where it appears.
-
-To control that the `grow` prop can be used with the values:
+By default an `Inline` will have its width influenced by the context where it appears. 
+To control the width, the `grow` prop can be used with the values:
 
 * `hug` (default) to use space only as required by its children, or
 * `fill` to take all space provided by the parent element.
@@ -92,6 +91,8 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 <Example Component={InlineAs} packageName="@atlaskit/primitives/inline" />
 
-## Practical Use Case
+## Practical use case
+
+An example of how an `Inline` might be used in product, using Atlassian Design System components.
 
 <Example Component={InlinePracticalUseCase} packageName="@atlaskit/primitives/inline" />

package/constellation/inline/usage.mdx

@@ -4,9 +4,9 @@ description: Inline is a primitive component based on flexbox that manages the h
 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.
 
@@ -15,10 +15,11 @@ In its simplest form, `Inline` operates like a flexbox row, however adds the bui
   ...
 </Inline>
 ```
-It also has a flex-direction: row; but that’s the default, so not explicitly applied.
+
+`Inline` also has a flex-direction: row; this is the default for flexbox, so it is 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 +32,9 @@ The various Inline props can then be used to customize the spacing and styling o
 - `rowSpace`
 - `separator`
 
-## Related
+- [Learn more about the Primitives](/components/primitives/overview)
 - [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/01-show/examples.mdx

@@ -18,9 +18,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ### Show
 
-This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+Using `Show` allows you to show the children using CSS `display: …` when the viewport size is above a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.
 
-Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
+Children that are not shown are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
 
 <Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
 

package/constellation/responsive/02-hide/examples.mdx

@@ -17,9 +17,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ### Hide
 
-This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+Using Hide allows you to Hide the children using CSS `display: none` when the viewport size is above a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.
 
-When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
+Children that are hidden are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
 
 <Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
 

package/constellation/responsive/usage.mdx

@@ -6,12 +6,13 @@ order: 2
 
 ## Media query helpers
 
-We expose two media query helper objects which map to our [breakpoints](/components/grid/usage#breakpoints) as media queries for use in css-in-js:
- - `media.above[breakpoint]` to target all viewports **above** (larger than) the min-width of a given breakpoint
+The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/grid/usage#breakpoints) as a media query for use in css-in-js. `media.above[breakpoint]` targets all viewports **above** (larger than) the min-width of a given breakpoint
+
+These responsive helpers are designed be used in conjunction with [xcss](/components/primitives/xcss). It is recommended that both are used when available as this uses our media queries to allow for safe, responsive styling.
 
 ### A basic example:
 
-Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`
+Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`.
 
 ```tsx
 const customStyles = xcss({
@@ -28,7 +29,7 @@ export const Component = ({ children }: { children: ReactNode }) => (
 
 ### `media.above` usage
 
-Please note that `media.above.xxs` will **always** match; it is explicitly `'@media all'`.  This is only included for easy programatic usage, but it has a negative performance impact.
+It is important to note that the `media.above.xxs` will **always** match, it is explicitly `'@media all'`. This is only included for easy programatic usage, but it has a negative performance impact.
 
 ```tsx
 const customStyles = css({
@@ -47,7 +48,3 @@ This is intentionally excluded at the moment as we're shipping our opinion that
 We understand this will not scale and we're open to change, but we'd like to change this with feedback.
 
 If we do add it back, we'd suggest codebases prefer a single approach (eg. `above` or `below`) and use that consistently.  Mixing them results in confusion (though they can be safely used together and can result in better CSS performance when done correctly).
-
-### Some notes and suggestions
-
-- Please combine this with our [xcss](/components/primitives/xcss) when available as this uses our media queries to allow for safe, responsive styling.

package/constellation/stack/examples.mdx

@@ -23,21 +23,20 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Stack is an abstraction to lay-out a group of elements vertically.
-Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+Stack should be used to efficiently lay-out a group of elements vertically.
+Use the given props to configure display behaviour using designs tokens, as shown in the more complex examples below.
 
 <Example Component={StackBasic} packageName="@atlaskit/primitives/stack" />
 
 ## Space
 
-Spacing between items can be controlled with the `space` prop:
+Spacing between items can be controlled with the `space` prop.
 
 <Example Component={StackSpaceBasic} packageName="@atlaskit/primitives/stack" />
 
 ## Alignment
 
-To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
-alignment in the block and inline directions respectively.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control alignment in the vertical and horizontal axis respectively.
 
 ### Block alignment
 
@@ -49,13 +48,13 @@ alignment in the block and inline directions respectively.
 
 ## Spread
 
-Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behaviour) or spread equally in the space available.
 
 <Example Component={StackSpread} packageName="@atlaskit/primitives/stack" />
 
 ## Width control
 
-By default a `Stack` will have its width influenced by the context where it appears.
+By default a `Stack` will have its width influenced by the context where it appears. To control the width the `grow` prop can be used with the values:
 
 To control that the `grow` prop can be used with the values:
 
@@ -70,6 +69,6 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 <Example Component={StackAs} packageName="@atlaskit/primitives/stack" />
 
-## Practical Use Case
+## Practical use case
 
 <Example Component={PracticalUseCase} packageName="@atlaskit/primitives/stack" />

package/constellation/stack/usage.mdx

@@ -4,9 +4,9 @@ description: Stack is a primitive component based on flexbox that manages the ve
 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 Primitives](/components/primitives/overview)
+- [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

@@ -18,7 +18,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-`xcss` can pull together different types of interactions and UI in a safer more composable way.
+`xcss` can pull together different types of interactions and UI in a safer, more composable way.
 
 <Example Component={xcssBasic} packageName="@atlaskit/primitives/xcss" />
 
@@ -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](/components/primitives/responsive/breakpoints/examples).
 
 <Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />

package/constellation/xcss/migration.mdx

@@ -105,7 +105,7 @@ const someStyles = xcss({
 #### Moving from the `styled` API
 
 If currently using the `styled` API there are a few steps to migrate.
-The safest approach is to a step change to use object styles, migrate to tokens (optionally) and then migrate to `xcss`.
+The safest approach is to use object styles, migrate to tokens (optionally) and then migrate to `xcss`.
 
 ```tsx
 const MyComponent = styled.div`

package/constellation/xcss/usage.mdx

@@ -51,7 +51,7 @@ const MyBox = () => {
 ```
 The `xcss` prop and the `xcss` function are direct complements and are designed to be used together.
 
-Note: styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
+It is important to note that styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
 
 ### Type safety
 
@@ -78,13 +78,6 @@ const someStyles = xcss({
 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.
 
-
-`xcss` is meant to be flexible enough for you 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
-your codebase more resilient to change.
-
 ```tsx
 import { xcss } from '@atlaskit/primitives';
 
@@ -109,6 +102,7 @@ For richer examples of how to use `xcss` please see the [primitives `xcss` docum
 
 ### 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:
+
 <MediaQueriesTable />
 
 Media queries can be applied through keys that can be imported from `@atlaskit/primitives/responsive`.

package/dist/cjs/components/pressable.js

@@ -18,7 +18,9 @@ var defaultStyles = (0, _react2.css)({
 });
 
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -26,7 +28,7 @@ var defaultStyles = (0, _react2.css)({
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -58,5 +60,5 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: isDisabled
   }), children));
 });
-var _default = Pressable;
+var _default = UNSAFE_PRESSABLE;
 exports.default = _default;

package/dist/cjs/index.js

@@ -34,12 +34,6 @@ Object.defineProperty(exports, "Inline", {
     return _inline.default;
   }
 });
-Object.defineProperty(exports, "Pressable", {
-  enumerable: true,
-  get: function get() {
-    return _pressable.default;
-  }
-});
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
@@ -71,7 +65,6 @@ Object.defineProperty(exports, "xcss", {
   }
 });
 var _box = _interopRequireDefault(require("./components/box"));
-var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.9",
+	"version": "1.0.11",
 	"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/components/pressable.js

@@ -9,7 +9,9 @@ const defaultStyles = css({
 });
 
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -17,7 +19,7 @@ const defaultStyles = css({
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-const Pressable = /*#__PURE__*/forwardRef(({
+const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
   children,
   backgroundColor,
   padding,
@@ -49,4 +51,4 @@ const Pressable = /*#__PURE__*/forwardRef(({
     disabled: isDisabled
   }), children));
 });
-export default Pressable;
+export default UNSAFE_PRESSABLE;

package/dist/es2019/index.js

@@ -1,5 +1,4 @@
 export { default as Box } from './components/box';
-export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/es2019/version.json

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