@atlaskit/primitives 1.0.9 → 1.0.11

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/components/pressable.js

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

package/dist/esm/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/esm/version.json

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

@@ -11,7 +11,9 @@ export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'c
 };
 type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -19,5 +21,5 @@ type PressableComponent = (props: PressableProps, displayName: string) => ReactE
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: PressableComponent;
-export default Pressable;
+declare const UNSAFE_PRESSABLE: PressableComponent;
+export default UNSAFE_PRESSABLE;

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/index.d.ts

@@ -1,8 +1,6 @@
 export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
-export { default as Pressable } from './components/pressable';
-export type { PressableProps } from './components/pressable';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';

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/pressable.d.ts

@@ -11,7 +11,9 @@ export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'c
 };
 type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -19,5 +21,5 @@ type PressableComponent = (props: PressableProps, displayName: string) => ReactE
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: PressableComponent;
-export default Pressable;
+declare const UNSAFE_PRESSABLE: PressableComponent;
+export default UNSAFE_PRESSABLE;

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/index.d.ts

@@ -1,8 +1,6 @@
 export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
-export { default as Pressable } from './components/pressable';
-export type { PressableProps } from './components/pressable';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';

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.11",
   "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",
@@ -178,7 +178,8 @@
     "./box": "./src/components/box.tsx",
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
+    "./pressable": "./src/components/pressable.tsx",
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/pressable/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/pressable",
+  "main": "../dist/cjs/components/pressable.js",
+  "module": "../dist/esm/components/pressable.js",
+  "module:es2019": "../dist/es2019/components/pressable.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/pressable.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/pressable.d.ts"
+      ]
+    }
+  }
+}