@atlaskit/primitives 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 3.2.0
+
+### Minor Changes
+
+- [#77488](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77488) [`9e119dcbfd60`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e119dcbfd60) - The `xcss` prop on select components have had its type expanded to support styles being passed from Compiled CSS-in-JS. This is still experimental and something we'll be iterating on.
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/cjs/components/anchor.js

@@ -76,13 +76,15 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.1.0",
+    packageVersion: "3.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   var RouterLink = (0, _appProvider.useRouterLink)();
 
-  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);

package/dist/cjs/components/bleed.js

@@ -66,11 +66,12 @@ var Bleed = /*#__PURE__*/_react.default.memo(function (_ref) {
     block = _ref.block,
     all = _ref.all,
     xcss = _ref.xcss;
-  var xcssStyles = xcss && (0, _xcss.parseXcss)(xcss);
+  var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)("div", {
+    className: resolvedStyles.static,
     css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssStyles],
+    resolvedStyles.emotion],
     "data-testid": testId
   }, children);
 });

package/dist/cjs/components/box.js

@@ -32,7 +32,7 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
  */
 var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'div' : _ref$as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -46,24 +46,24 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     testId = _ref.testId,
     xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var Component = as;
   // This is to remove className from safeHtmlAttributes
   // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
-  var className = xcss && (0, _xcss.parseXcss)(xcss);
+  var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   var node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
   (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: style
     // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,
-    ref: ref
+    ref: ref,
+    className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
     css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], (0, _styleMaps.isSurfaceColorToken)(backgroundColor) && _styleMaps.surfaceColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className],
+    resolvedStyles.emotion],
     "data-testid": testId
   }), children);
   return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {

package/dist/cjs/components/flex.js

@@ -105,12 +105,13 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     direction = _ref.direction,
     wrap = _ref.wrap,
     xcss = _ref.xcss;
-  var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
+  var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(Component, {
     role: role,
+    className: resolvedStyles.static,
     css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    resolvedStyles.emotion],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/cjs/components/grid.js

@@ -152,7 +152,7 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     gridTemplateColumns = _ref.templateColumns,
     xcss = _ref.xcss;
   var Component = as || 'div';
-  var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
+  var resolvedStyles = (0, _xcss.parseXcss)(xcss);
 
   /**
    * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
@@ -172,9 +172,10 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     id: id,
     role: role,
     style: style,
+    className: resolvedStyles.static,
     css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName],
+    resolvedStyles.emotion],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/cjs/components/inline.js

@@ -73,6 +73,11 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
+  var styles = grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return (0, _react2.jsx)(_flex.default, {
     as: as,
     role: role,
@@ -81,10 +86,10 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     direction: "row",
     gap: space,
     rowGap: rowSpace,
-    wrap: shouldWrap ? 'wrap' : undefined,
-    xcss: grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) :
+    wrap: shouldWrap ? 'wrap' : undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcss,
+    ,
+    xcss: styles,
     testId: testId,
     ref: ref
   }, children);

package/dist/cjs/components/pressable.js

@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.1.0",
+    packageVersion: "3.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -89,6 +89,10 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var styles = [(0, _xcss.xcss)({
     cursor: isDisabled ? 'not-allowed' : 'pointer'
   }), focusRingStyles];
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   styles = Array.isArray(xcssStyles) ? [].concat((0, _toConsumableArray2.default)(styles), (0, _toConsumableArray2.default)(xcssStyles)) : [].concat((0, _toConsumableArray2.default)(styles), [xcssStyles]);
   return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
     as: "button",

package/dist/cjs/components/stack.js

@@ -50,16 +50,21 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     xcss = _ref.xcss,
     role = _ref.role;
   var justifyContent = spread || alignBlock;
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
+  var styles = grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return (0, _react2.jsx)(_flex.default, {
     as: as,
     role: role,
     gap: space,
     direction: "column",
     alignItems: alignItems,
-    justifyContent: justifyContent,
-    xcss: grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) :
+    justifyContent: justifyContent
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcss,
+    ,
+    xcss: styles,
     testId: testId,
     ref: ref
   }, children);

package/dist/cjs/xcss/xcss.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tokensMap = exports.parseXcss = void 0;
 exports.xcss = xcss;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
 var _styleMaps = require("./style-maps.partial");
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line import/no-extraneous-dependencies
 var tokensMap = exports.tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   blockSize: _styleMaps.dimensionMap,
@@ -155,21 +155,59 @@ var baseXcss = function baseXcss(style) {
 };
 
 /**
- * @internal used in primitives
- * @returns a collection of styles that can be applied to the respective primitive
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
+ * to supported both Emotion and Compiled styles until we've fully migrated
+ * to Compiled.
+ *
+ * @private
+ * @deprecated
  */
-
 var parseXcss = exports.parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
-    return args.map(function (x) {
-      return x && parseXcss(x);
-    }).filter(Boolean);
+    var emotion = [];
+    var staticArr = [];
+    var _iterator = _createForOfIteratorHelper(args),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var arg = _step.value;
+        var result = parseXcss(arg);
+        if (result.emotion) {
+          emotion.push.apply(emotion, (0, _toConsumableArray2.default)(result.emotion));
+        }
+        if (result.static) {
+          staticArr.push(result.static);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return {
+      emotion: emotion,
+      static: staticArr.join(' ')
+    };
   }
-  var styles = args[uniqueSymbol];
-  if ((typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
-    throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
+  var objArgs = args;
+  var _ref4 = objArgs || {},
+    styles = _ref4[uniqueSymbol];
+  if (styles) {
+    return {
+      emotion: [styles]
+    };
+  }
+  if (args) {
+    // We use string interpolation here instead of .toString() just
+    // in case the resulting object doesn't have the method available.
+    var stringifiedArgs = "".concat(args);
+    if (stringifiedArgs) {
+      return {
+        static: stringifiedArgs
+      };
+    }
   }
-  return styles;
+  return {};
 };
 
 // Media queries should not contain nested media queries

package/dist/es2019/components/anchor.js

@@ -62,13 +62,15 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.1.0",
+    packageVersion: "3.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   const RouterLink = useRouterLink();
 
-  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   const styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles, ...xcssStyles] : [defaultStyles, focusRingStyles, xcssStyles];
   const isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   const isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);

package/dist/es2019/components/bleed.js

@@ -59,11 +59,12 @@ const Bleed = /*#__PURE__*/React.memo(({
   all,
   xcss
 }) => {
-  const xcssStyles = xcss && parseXcss(xcss);
+  const resolvedStyles = parseXcss(xcss);
   return jsx("div", {
+    className: resolvedStyles.static,
     css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssStyles],
+    resolvedStyles.emotion],
     "data-testid": testId
   }, children);
 });

package/dist/es2019/components/box.js

@@ -21,7 +21,7 @@ import { SurfaceContext } from './internal/surface-provider';
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 export const Box = /*#__PURE__*/forwardRef(({
-  as = 'div',
+  as: Component = 'div',
   children,
   backgroundColor,
   padding,
@@ -36,26 +36,26 @@ export const Box = /*#__PURE__*/forwardRef(({
   xcss,
   ...htmlAttributes
 }, ref) => {
-  const Component = as;
   // This is to remove className from safeHtmlAttributes
   // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   const {
     className: _spreadClass,
     ...safeHtmlAttributes
   } = htmlAttributes;
-  const className = xcss && parseXcss(xcss);
+  const resolvedStyles = parseXcss(xcss);
   const node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
   jsx(Component, _extends({
     style: style
     // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,
-    ref: ref
+    ref: ref,
+    className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
     css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className],
+    resolvedStyles.emotion],
     "data-testid": testId
   }), children);
   return backgroundColor ? jsx(SurfaceContext.Provider, {

package/dist/es2019/components/flex.js

@@ -98,12 +98,13 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   wrap,
   xcss
 }, ref) => {
-  const xcssClassName = xcss && parseXcss(xcss);
+  const resolvedStyles = parseXcss(xcss);
   return jsx(Component, {
     role: role,
+    className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    resolvedStyles.emotion],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/grid.js

@@ -144,7 +144,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   xcss
 }, ref) => {
   const Component = as || 'div';
-  const xcssClassName = xcss && parseXcss(xcss);
+  const resolvedStyles = parseXcss(xcss);
 
   /**
    * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
@@ -163,9 +163,10 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     id: id,
     role: role,
     style: style,
+    className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName],
+    resolvedStyles.emotion],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/inline.js

@@ -62,6 +62,11 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   const justifyContent = spread || alignInline;
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
+  const styles = grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] : xcss;
   return jsx(Flex, {
     as: as,
     role: role,
@@ -70,10 +75,10 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     direction: "row",
     gap: space,
     rowGap: rowSpace,
-    wrap: shouldWrap ? 'wrap' : undefined,
-    xcss: grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] :
+    wrap: shouldWrap ? 'wrap' : undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcss,
+    ,
+    xcss: styles,
     testId: testId,
     ref: ref
   }, children);

package/dist/es2019/components/pressable.js

@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.1.0",
+    packageVersion: "3.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -75,6 +75,10 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
   let styles = [xcss({
     cursor: isDisabled ? 'not-allowed' : 'pointer'
   }), focusRingStyles];
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
   return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
     as: "button",

package/dist/es2019/components/stack.js

@@ -41,16 +41,21 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   role
 }, ref) => {
   const justifyContent = spread || alignBlock;
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
+  const styles = grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] : xcss;
   return jsx(Flex, {
     as: as,
     role: role,
     gap: space,
     direction: "column",
     alignItems: alignItems,
-    justifyContent: justifyContent,
-    xcss: grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] :
+    justifyContent: justifyContent
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcss,
+    ,
+    xcss: styles,
     testId: testId,
     ref: ref
   }, children);

package/dist/es2019/xcss/xcss.js

@@ -141,21 +141,51 @@ const baseXcss = style => {
 };
 
 /**
- * @internal used in primitives
- * @returns a collection of styles that can be applied to the respective primitive
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
+ * to supported both Emotion and Compiled styles until we've fully migrated
+ * to Compiled.
+ *
+ * @private
+ * @deprecated
  */
-
 export const parseXcss = args => {
   if (Array.isArray(args)) {
-    return args.map(x => x && parseXcss(x)).filter(Boolean);
+    const emotion = [];
+    const staticArr = [];
+    for (const arg of args) {
+      const result = parseXcss(arg);
+      if (result.emotion) {
+        emotion.push(...result.emotion);
+      }
+      if (result.static) {
+        staticArr.push(result.static);
+      }
+    }
+    return {
+      emotion,
+      static: staticArr.join(' ')
+    };
   }
+  const objArgs = args;
   const {
     [uniqueSymbol]: styles
-  } = args;
-  if (typeof process && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
-    throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
+  } = objArgs || {};
+  if (styles) {
+    return {
+      emotion: [styles]
+    };
+  }
+  if (args) {
+    // We use string interpolation here instead of .toString() just
+    // in case the resulting object doesn't have the method available.
+    const stringifiedArgs = `${args}`;
+    if (stringifiedArgs) {
+      return {
+        static: stringifiedArgs
+      };
+    }
   }
-  return styles;
+  return {};
 };
 
 // Media queries should not contain nested media queries

package/dist/esm/components/anchor.js

@@ -66,13 +66,15 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.1.0",
+    packageVersion: "3.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   var RouterLink = useRouterLink();
 
-  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);

package/dist/esm/components/bleed.js

@@ -58,11 +58,12 @@ var Bleed = /*#__PURE__*/React.memo(function (_ref) {
     block = _ref.block,
     all = _ref.all,
     xcss = _ref.xcss;
-  var xcssStyles = xcss && parseXcss(xcss);
+  var resolvedStyles = parseXcss(xcss);
   return jsx("div", {
+    className: resolvedStyles.static,
     css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssStyles],
+    resolvedStyles.emotion],
     "data-testid": testId
   }, children);
 });

package/dist/esm/components/box.js

@@ -25,7 +25,7 @@ import { SurfaceContext } from './internal/surface-provider';
  */
 export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'div' : _ref$as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -39,24 +39,24 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var Component = as;
   // This is to remove className from safeHtmlAttributes
   // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
-  var className = xcss && parseXcss(xcss);
+  var resolvedStyles = parseXcss(xcss);
   var node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
   jsx(Component, _extends({
     style: style
     // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,
-    ref: ref
+    ref: ref,
+    className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
     css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className],
+    resolvedStyles.emotion],
     "data-testid": testId
   }), children);
   return backgroundColor ? jsx(SurfaceContext.Provider, {

package/dist/esm/components/flex.js

@@ -98,12 +98,13 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     direction = _ref.direction,
     wrap = _ref.wrap,
     xcss = _ref.xcss;
-  var xcssClassName = xcss && parseXcss(xcss);
+  var resolvedStyles = parseXcss(xcss);
   return jsx(Component, {
     role: role,
+    className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    resolvedStyles.emotion],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/esm/components/grid.js

@@ -144,7 +144,7 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     gridTemplateColumns = _ref.templateColumns,
     xcss = _ref.xcss;
   var Component = as || 'div';
-  var xcssClassName = xcss && parseXcss(xcss);
+  var resolvedStyles = parseXcss(xcss);
 
   /**
    * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
@@ -164,9 +164,10 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: id,
     role: role,
     style: style,
+    className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName],
+    resolvedStyles.emotion],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/esm/components/inline.js

@@ -65,6 +65,11 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
+  var styles = grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return jsx(Flex, {
     as: as,
     role: role,
@@ -73,10 +78,10 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     direction: "row",
     gap: space,
     rowGap: rowSpace,
-    wrap: shouldWrap ? 'wrap' : undefined,
-    xcss: grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) :
+    wrap: shouldWrap ? 'wrap' : undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcss,
+    ,
+    xcss: styles,
     testId: testId,
     ref: ref
   }, children);

package/dist/esm/components/pressable.js

@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.1.0",
+    packageVersion: "3.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -79,6 +79,10 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var styles = [xcss({
     cursor: isDisabled ? 'not-allowed' : 'pointer'
   }), focusRingStyles];
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   styles = Array.isArray(xcssStyles) ? [].concat(_toConsumableArray(styles), _toConsumableArray(xcssStyles)) : [].concat(_toConsumableArray(styles), [xcssStyles]);
   return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
     as: "button",

package/dist/esm/components/stack.js

@@ -42,16 +42,21 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss,
     role = _ref.role;
   var justifyContent = spread || alignBlock;
+
+  // We're type coercing this as Compiled styles in an array isn't supported by the types
+  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
+  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
+  var styles = grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return jsx(Flex, {
     as: as,
     role: role,
     gap: space,
     direction: "column",
     alignItems: alignItems,
-    justifyContent: justifyContent,
-    xcss: grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) :
+    justifyContent: justifyContent
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcss,
+    ,
+    xcss: styles,
     testId: testId,
     ref: ref
   }, children);

package/dist/esm/xcss/xcss.js

@@ -1,6 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 
@@ -147,21 +151,59 @@ var baseXcss = function baseXcss(style) {
 };
 
 /**
- * @internal used in primitives
- * @returns a collection of styles that can be applied to the respective primitive
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
+ * to supported both Emotion and Compiled styles until we've fully migrated
+ * to Compiled.
+ *
+ * @private
+ * @deprecated
  */
-
 export var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
-    return args.map(function (x) {
-      return x && parseXcss(x);
-    }).filter(Boolean);
+    var emotion = [];
+    var staticArr = [];
+    var _iterator = _createForOfIteratorHelper(args),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var arg = _step.value;
+        var result = parseXcss(arg);
+        if (result.emotion) {
+          emotion.push.apply(emotion, _toConsumableArray(result.emotion));
+        }
+        if (result.static) {
+          staticArr.push(result.static);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return {
+      emotion: emotion,
+      static: staticArr.join(' ')
+    };
+  }
+  var objArgs = args;
+  var _ref4 = objArgs || {},
+    styles = _ref4[uniqueSymbol];
+  if (styles) {
+    return {
+      emotion: [styles]
+    };
   }
-  var styles = args[uniqueSymbol];
-  if ((typeof process === "undefined" ? "undefined" : _typeof(process)) && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
-    throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
+  if (args) {
+    // We use string interpolation here instead of .toString() just
+    // in case the resulting object doesn't have the method available.
+    var stringifiedArgs = "".concat(args);
+    if (stringifiedArgs) {
+      return {
+        static: stringifiedArgs
+      };
+    }
   }
-  return styles;
+  return {};
 };
 
 // Media queries should not contain nested media queries

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

@@ -100,11 +100,11 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Used to align children along the main axis.
      */
-    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align children along the cross axis.
      */
-    alignItems?: "stretch" | "center" | "end" | "start" | "baseline" | undefined;
+    alignItems?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
     /**
      * Represents the space between each child.
      */

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

@@ -136,11 +136,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Used to align children along the inline axis.
      */
-    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align the grid along the inline axis.
      */
-    justifyItems?: "stretch" | "center" | "end" | "start" | undefined;
+    justifyItems?: "center" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align children along the block axis.
      */
@@ -148,7 +148,7 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Used to align the grid along the block axis.
      */
-    alignContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    alignContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
     /**
      * Represents the space between each column.
      */

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

@@ -63,5 +63,5 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
      * Additional information to be included in the `context` of analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any> | undefined;
-}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
+}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
 export default UNSAFE_PRESSABLE;

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

@@ -58,7 +58,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
     /**
      * Used to align children along the block axis (typically vertical).
      */
-    alignBlock?: "stretch" | "center" | "end" | "start" | undefined;
+    alignBlock?: "center" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align children along the inline axis (typically horizontal).
      */

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
 import type { XCSS } from '../xcss/xcss';
 export type BasePrimitiveProps = {
     /**
@@ -11,9 +12,9 @@ export type BasePrimitiveProps = {
      */
     'data-testid'?: never;
     /**
-     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
      */
-    xcss?: XCSS | Array<XCSS | false | undefined>;
+    xcss?: XCSS | Array<XCSS | false | undefined> | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
     /**
      * Accessible role.
      */

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

@@ -1,6 +1,6 @@
-import { css as cssEmotion } from '@emotion/react';
 import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
 import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 export declare const tokensMap: {
@@ -1627,11 +1627,17 @@ export declare const tokensMap: {
 };
 declare const uniqueSymbol: unique symbol;
 /**
- * @internal used in primitives
- * @returns a collection of styles that can be applied to the respective primitive
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
+ * to supported both Emotion and Compiled styles until we've fully migrated
+ * to Compiled.
+ *
+ * @private
+ * @deprecated
  */
-type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[] | undefined | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>) => {
+    emotion?: SerializedStyles[];
+    static?: string;
+};
 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 AllMedia]?: Omit<SafeCSSObject, AllMedia>;

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

@@ -100,11 +100,11 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Used to align children along the main axis.
      */
-    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align children along the cross axis.
      */
-    alignItems?: "stretch" | "center" | "end" | "start" | "baseline" | undefined;
+    alignItems?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
     /**
      * Represents the space between each child.
      */

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

@@ -136,11 +136,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Used to align children along the inline axis.
      */
-    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align the grid along the inline axis.
      */
-    justifyItems?: "stretch" | "center" | "end" | "start" | undefined;
+    justifyItems?: "center" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align children along the block axis.
      */
@@ -148,7 +148,7 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Used to align the grid along the block axis.
      */
-    alignContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    alignContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
     /**
      * Represents the space between each column.
      */

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

@@ -63,5 +63,5 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
      * Additional information to be included in the `context` of analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any> | undefined;
-}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
+}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
 export default UNSAFE_PRESSABLE;

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

@@ -58,7 +58,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
     /**
      * Used to align children along the block axis (typically vertical).
      */
-    alignBlock?: "stretch" | "center" | "end" | "start" | undefined;
+    alignBlock?: "center" | "stretch" | "end" | "start" | undefined;
     /**
      * Used to align children along the inline axis (typically horizontal).
      */

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
 import type { XCSS } from '../xcss/xcss';
 export type BasePrimitiveProps = {
     /**
@@ -11,9 +12,9 @@ export type BasePrimitiveProps = {
      */
     'data-testid'?: never;
     /**
-     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
      */
-    xcss?: XCSS | Array<XCSS | false | undefined>;
+    xcss?: XCSS | Array<XCSS | false | undefined> | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
     /**
      * Accessible role.
      */

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

@@ -1,6 +1,6 @@
-import { css as cssEmotion } from '@emotion/react';
 import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
 import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 export declare const tokensMap: {
@@ -1627,11 +1627,17 @@ export declare const tokensMap: {
 };
 declare const uniqueSymbol: unique symbol;
 /**
- * @internal used in primitives
- * @returns a collection of styles that can be applied to the respective primitive
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
+ * to supported both Emotion and Compiled styles until we've fully migrated
+ * to Compiled.
+ *
+ * @private
+ * @deprecated
  */
-type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[] | undefined | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>) => {
+    emotion?: SerializedStyles[];
+    static?: string;
+};
 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 AllMedia]?: Omit<SafeCSSObject, AllMedia>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -124,6 +124,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/app-provider": "^1.0.0",
+    "@atlaskit/css": "^0.0.3",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/tokens": "^1.38.0",