@atlaskit/primitives 1.0.9 → 1.0.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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.
 
@@ -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/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 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/usage.mdx

@@ -109,6 +109,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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.9",
+	"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.9",
+	"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.9",
+	"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;

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

@@ -1,18 +1,19 @@
 import type { CSSProperties } from 'react';
-import { type BoxXCSS } from '../xcss/xcss';
+import type { XCSS } from '../xcss/xcss';
 export type BasePrimitiveProps = {
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
     /**
-     * Inline styles to be applied to the primitive.
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
      */
     style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
-    xcss?: BoxXCSS | BoxXCSS[];
+    xcss?: XCSS | Array<XCSS | false | undefined>;
     /**
      * Accessible role
      */

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

@@ -1,8 +1,6 @@
-/// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
 import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { Box } from '../index';
 import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -11,25 +9,20 @@ declare const uniqueSymbol: unique symbol;
  * @returns a collection of styles that can be applied to the respective primitive
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | XCSSArray) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
+type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
 type CSSMediaQueries = {
-    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+    [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | MediaQuery>;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
 };
-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;
+type AtRulesWithoutMedia = Exclude<CSS.AtRules, '@media'>;
+type CSSAtRules = {
+    [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>;
 };
-declare const spaceWrapper: (style: any) => {
-    readonly [uniqueSymbol]: SpaceStyles;
-};
-type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof spaceWrapper>;
-type XCSSArray = Array<XCSS | false | undefined>;
-type AllowedBoxStyles = keyof SafeCSSObject;
-type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
+type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+export type XCSS = ReturnType<typeof xcss>;
 /**
  * ### xcss
  *
@@ -42,18 +35,7 @@ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' |
  * })
  * ```
  */
-export declare function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any>>(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
-};
-declare const boxTag: unique symbol;
-declare const spaceTag: unique symbol;
-export type BoxStyles = SerializedStyles & {
-    [boxTag]: true;
-};
-export type SpaceStyles = SerializedStyles & {
-    [spaceTag]: true;
+export declare function xcss(style: SafeCSSObject): {
+    readonly [uniqueSymbol]: SerializedStyles;
 };
-export type BoxXCSS = {
-    readonly [uniqueSymbol]: BoxStyles;
-} | false | undefined;
 export {};

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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;

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

@@ -1,18 +1,19 @@
 import type { CSSProperties } from 'react';
-import { type BoxXCSS } from '../xcss/xcss';
+import type { XCSS } from '../xcss/xcss';
 export type BasePrimitiveProps = {
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
     /**
-     * Inline styles to be applied to the primitive.
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
      */
     style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
-    xcss?: BoxXCSS | BoxXCSS[];
+    xcss?: XCSS | Array<XCSS | false | undefined>;
     /**
      * Accessible role
      */

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

@@ -1,8 +1,6 @@
-/// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
 import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { Box } from '../index';
 import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -11,25 +9,20 @@ declare const uniqueSymbol: unique symbol;
  * @returns a collection of styles that can be applied to the respective primitive
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | XCSSArray) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
+type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
 type CSSMediaQueries = {
-    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+    [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | MediaQuery>;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
 };
-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;
+type AtRulesWithoutMedia = Exclude<CSS.AtRules, '@media'>;
+type CSSAtRules = {
+    [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>;
 };
-declare const spaceWrapper: (style: any) => {
-    readonly [uniqueSymbol]: SpaceStyles;
-};
-type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof spaceWrapper>;
-type XCSSArray = Array<XCSS | false | undefined>;
-type AllowedBoxStyles = keyof SafeCSSObject;
-type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
+type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+export type XCSS = ReturnType<typeof xcss>;
 /**
  * ### xcss
  *
@@ -42,18 +35,7 @@ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' |
  * })
  * ```
  */
-export declare function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any>>(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
-};
-declare const boxTag: unique symbol;
-declare const spaceTag: unique symbol;
-export type BoxStyles = SerializedStyles & {
-    [boxTag]: true;
-};
-export type SpaceStyles = SerializedStyles & {
-    [spaceTag]: true;
+export declare function xcss(style: SafeCSSObject): {
+    readonly [uniqueSymbol]: SerializedStyles;
 };
-export type BoxXCSS = {
-    readonly [uniqueSymbol]: BoxStyles;
-} | false | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
       "category": "Primitives",
       "name": "Primitives",
       "status": {
-        "type": "closed-beta"
+        "type": "beta"
       },
       "pages": [
         {
@@ -31,7 +31,7 @@
           "folder": "overview",
           "slug": "primitives/overview",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -40,7 +40,7 @@
           "slug": "primitives/box",
           "id": "@atlaskit/primitives/box",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -49,7 +49,7 @@
           "slug": "primitives/inline",
           "id": "@atlaskit/primitives/inline",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -58,7 +58,7 @@
           "slug": "primitives/stack",
           "id": "@atlaskit/primitives/stack",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -67,7 +67,7 @@
           "slug": "primitives/flex",
           "id": "@atlaskit/primitives/flex",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -76,7 +76,7 @@
           "slug": "primitives/grid",
           "id": "@atlaskit/primitives/grid",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -85,7 +85,7 @@
           "slug": "primitives/bleed",
           "id": "@atlaskit/primitives/bleed",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -94,7 +94,7 @@
           "slug": "primitives/xcss",
           "id": "@atlaskit/primitives/xcss",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -103,7 +103,7 @@
           "slug": "primitives/responsive",
           "id": "@atlaskit/primitives/responsive",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         }
       ]
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "@atlaskit/focus-ring": "^1.3.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -181,4 +181,4 @@
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -15,8 +15,6 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
-/// <reference types="react" />
-
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
@@ -26,7 +24,6 @@ import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { JSXElementConstructor } from 'react';
 import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -84,7 +81,15 @@ const alignItemsMap_2: {
 };
 
 // @public (undocumented)
-type AllowedBoxStyles = keyof SafeCSSObject;
+type AllMedia =
+  | '@media (prefers-color-scheme: dark)'
+  | '@media (prefers-color-scheme: light)'
+  | '@media (prefers-reduced-motion: reduce)'
+  | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)'
+  | MediaQuery;
+
+// @public (undocumented)
+type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
 
 // @public (undocumented)
 type AutoComplete<T extends string> = Omit<string, T> | T;
@@ -241,7 +246,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
 type BasePrimitiveProps = {
   testId?: string;
   style?: CSSProperties;
-  xcss?: BoxXCSS | BoxXCSS[];
+  xcss?: Array<XCSS | false | undefined> | XCSS;
   role?: string;
 };
 
@@ -337,22 +342,6 @@ export type BoxProps<T extends ElementType> = Omit<
   BasePrimitiveProps &
   BaseBoxPropsFoundation<T>;
 
-// @public (undocumented)
-type BoxStyles = SerializedStyles & {
-  [boxTag]: true;
-};
-
-// @public (undocumented)
-const boxTag: unique symbol;
-
-// @public (undocumented)
-type BoxXCSS =
-  | false
-  | undefined
-  | {
-      readonly [uniqueSymbol]: BoxStyles;
-    };
-
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -361,14 +350,22 @@ type ClassName = {
   className?: string;
 };
 
+// @public (undocumented)
+type CSSAtRules = {
+  [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<
+    SafeCSSObject,
+    AtRulesWithoutMedia
+  >;
+};
+
 // @public (undocumented)
 type CSSMediaQueries = {
-  [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+  [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
 
 // @public (undocumented)
 type CSSPseudos = {
-  [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
+  [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, AllMedia | CSS_2.Pseudos>;
 };
 
 // @public (undocumented)
@@ -815,16 +812,11 @@ export type PressableProps = Omit<
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
+  CSSAtRules &
   TokenisedProps &
   CSSMediaQueries &
   Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
-// @public (undocumented)
-type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<
-  SafeCSSObject,
-  T
->;
-
 // @public (undocumented)
 export type Shadow = keyof typeof shadowMap;
 
@@ -866,46 +858,6 @@ const spaceMap: {
   'space.1000': 'var(--ds-space-1000)';
 };
 
-// @public (undocumented)
-type SpaceStyles = SerializedStyles & {
-  [spaceTag]: true;
-};
-
-// @public (undocumented)
-const spaceTag: unique symbol;
-
-// @public (undocumented)
-type Spacing =
-  | 'columnGap'
-  | 'gap'
-  | 'inset'
-  | 'insetBlock'
-  | 'insetBlockEnd'
-  | 'insetBlockStart'
-  | 'insetInline'
-  | 'insetInlineEnd'
-  | 'insetInlineStart'
-  | 'margin'
-  | 'marginBlock'
-  | 'marginBlockEnd'
-  | 'marginBlockStart'
-  | 'marginInline'
-  | 'marginInlineEnd'
-  | 'marginInlineStart'
-  | 'outlineOffset'
-  | 'padding'
-  | 'paddingBlock'
-  | 'paddingBlockEnd'
-  | 'paddingBlockStart'
-  | 'paddingBottom'
-  | 'paddingInline'
-  | 'paddingInlineEnd'
-  | 'paddingInlineStart'
-  | 'paddingLeft'
-  | 'paddingRight'
-  | 'paddingTop'
-  | 'rowGap';
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -1126,24 +1078,12 @@ export const UNSAFE_media: {
 // @public (undocumented)
 type Wrap = keyof typeof flexWrapMap;
 
+// @public (undocumented)
+type XCSS = ReturnType<typeof xcss>;
+
 // @public
-export function xcss<Primitive extends typeof Box | void = typeof Box>(
-  style: Primitive extends typeof Box
-    ?
-        | ScopedSafeCSSObject<AllowedBoxStyles>
-        | ScopedSafeCSSObject<AllowedBoxStyles>[]
-    : Primitive extends void
-    ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[]
-    : never,
-): {
-  readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any>>(
-    props: BoxProps<T>,
-  ) => ReactElement<any, JSXElementConstructor<any> | string> | null) &
-    FC<BoxProps<'div'>>
-    ? BoxStyles
-    : Primitive extends void
-    ? SpaceStyles
-    : never;
+export function xcss(style: SafeCSSObject): {
+  readonly [uniqueSymbol]: SerializedStyles;
 };
 
 // (No @packageDocumentation comment for this package)

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

@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="react" />
-
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
@@ -15,7 +13,6 @@ import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { JSXElementConstructor } from 'react';
 import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -73,7 +70,10 @@ const alignItemsMap_2: {
 };
 
 // @public (undocumented)
-type AllowedBoxStyles = keyof SafeCSSObject;
+type AllMedia = '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)' | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | MediaQuery;
+
+// @public (undocumented)
+type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
 
 // @public (undocumented)
 type AutoComplete<T extends string> = Omit<string, T> | T;
@@ -224,7 +224,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
 type BasePrimitiveProps = {
     testId?: string;
     style?: CSSProperties;
-    xcss?: BoxXCSS | BoxXCSS[];
+    xcss?: Array<XCSS | false | undefined> | XCSS;
     role?: string;
 };
 
@@ -303,19 +303,6 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(prop
 // @public (undocumented)
 export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 
-// @public (undocumented)
-type BoxStyles = SerializedStyles & {
-    [boxTag]: true;
-};
-
-// @public (undocumented)
-const boxTag: unique symbol;
-
-// @public (undocumented)
-type BoxXCSS = false | undefined | {
-    readonly [uniqueSymbol]: BoxStyles;
-};
-
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -324,14 +311,19 @@ type ClassName = {
     className?: string;
 };
 
+// @public (undocumented)
+type CSSAtRules = {
+    [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>;
+};
+
 // @public (undocumented)
 type CSSMediaQueries = {
-    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+    [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
 
 // @public (undocumented)
 type CSSPseudos = {
-    [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
+    [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, AllMedia | CSS_2.Pseudos>;
 };
 
 // @public (undocumented)
@@ -558,10 +550,7 @@ export type PressableProps = Omit<BaseBoxProps<'button'>, 'as' | 'children' | 'd
 };
 
 // @public (undocumented)
-type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
-
-// @public (undocumented)
-type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
+type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
 export type Shadow = keyof typeof shadowMap;
@@ -599,17 +588,6 @@ const spaceMap: {
     'space.1000': "var(--ds-space-1000)";
 };
 
-// @public (undocumented)
-type SpaceStyles = SerializedStyles & {
-    [spaceTag]: true;
-};
-
-// @public (undocumented)
-const spaceTag: unique symbol;
-
-// @public (undocumented)
-type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -800,9 +778,12 @@ export const UNSAFE_media: {
 // @public (undocumented)
 type Wrap = keyof typeof flexWrapMap;
 
+// @public (undocumented)
+type XCSS = ReturnType<typeof xcss>;
+
 // @public
-export function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any>>(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
+export function xcss(style: SafeCSSObject): {
+    readonly [uniqueSymbol]: SerializedStyles;
 };
 
 // (No @packageDocumentation comment for this package)

package/constellation/accessibility/examples.mdx

@@ -1,9 +0,0 @@
----
-title: Accessibility
-description: Primitives accessibility.
-order: 0
----
-
-## Default
-
-This is placeholder text.