@atlaskit/primitives - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

CHANGELOG.md

 # @atlaskit/primitives
 
+## 0.7.0
+
+### Minor Changes
+
+- [`7e17a8b8934`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e17a8b8934) - Box:
+
+  - Add xcss prop to enable token powered styling.
+
 ## 0.6.0
@@ -4,0 +12,0 @@

dist/cjs/components/box.js

@@ -13,5 +13,6 @@ "use strict";
 var _xcss = require("../internal/xcss");
-var _baseBox = require("./internal/base-box.partial");
-var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "style", "testId", "xcss"],
+var _baseBox = require("./internal/base-box");
+var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
   _excluded2 = ["className"];
+/** @jsx jsx */
 /**
@@ -30,17 +31,3 @@ * __Box__
     children = _ref.children,
-    color = _ref.color,
     backgroundColor = _ref.backgroundColor,
-    shadow = _ref.shadow,
-    borderStyle = _ref.borderStyle,
-    borderWidth = _ref.borderWidth,
-    borderRadius = _ref.borderRadius,
-    borderColor = _ref.borderColor,
-    layer = _ref.layer,
-    flex = _ref.flex,
-    flexGrow = _ref.flexGrow,
-    flexShrink = _ref.flexShrink,
-    alignSelf = _ref.alignSelf,
-    overflow = _ref.overflow,
-    overflowInline = _ref.overflowInline,
-    overflowBlock = _ref.overflowBlock,
     padding = _ref.padding,
@@ -53,8 +40,2 @@ paddingBlock = _ref.paddingBlock,
     paddingInlineEnd = _ref.paddingInlineEnd,
-    height = _ref.height,
-    width = _ref.width,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'block' : _ref$display,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'static' : _ref$position,
     style = _ref.style,
@@ -69,17 +50,3 @@ testId = _ref.testId,
     as: as,
-    color: color,
     backgroundColor: backgroundColor,
-    shadow: shadow,
-    borderStyle: borderStyle,
-    borderWidth: borderWidth,
-    borderRadius: borderRadius,
-    borderColor: borderColor,
-    layer: layer,
-    flex: flex,
-    flexGrow: flexGrow,
-    flexShrink: flexShrink,
-    alignSelf: alignSelf,
-    overflow: overflow,
-    overflowInline: overflowInline,
-    overflowBlock: overflowBlock,
     padding: padding,
@@ -92,6 +59,2 @@ paddingBlock: paddingBlock,
     paddingInlineEnd: paddingInlineEnd,
-    height: height,
-    width: width,
-    display: display,
-    position: position,
     style: style,
@@ -98,0 +61,0 @@ testId: testId,

dist/cjs/components/inline.partial.js

@@ -11,2 +11,3 @@ "use strict";
 var _react2 = require("@emotion/react");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -13,0 +14,0 @@

dist/cjs/components/stack.partial.js

@@ -11,2 +11,3 @@ "use strict";
 var _react2 = require("@emotion/react");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -13,0 +14,0 @@

dist/cjs/internal/xcss.js

@@ -12,3 +12,4 @@ "use strict";
 var _react = require("@emotion/react");
-var _styleMaps = require("./style-maps");
+var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -34,5 +35,9 @@
   paddingInlineStart: _styleMaps.paddingMap,
+  boxShadow: _styleMaps.shadowMap,
   width: _styleMaps.dimensionMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+var isSafeEnvToThrow = function isSafeEnvToThrow() {
+  return (typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) === 'object' && (0, _typeof2.default)(process.env) === 'object' && process.env.NODE_ENV !== 'production';
+};
 
@@ -55,7 +60,6 @@ /**
   Object.entries(styleObj).forEach(function (_ref) {
-    var _process, _process$env;
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    if (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') {
+    if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
@@ -84,3 +88,7 @@ if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
     if (!tokenValue) {
-      throw new Error('Invalid Token');
+      var message = "Invalid token alias: ".concat(value);
+      (0, _warnOnce.default)(message);
+      if (isSafeEnvToThrow()) {
+        throw new Error(message);
+      }
     }
@@ -102,8 +110,10 @@ styleObj[key] = tokenValue;
  * @internal used in primitives
- * @returns
+ * @returns a collection of styles that can be applied to the respective primitive
  */
+
 var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
-    // @ts-expect-error FIXME
-    return args.map(parseXcss);
+    return args.map(function (x) {
+      return x && parseXcss(x);
+    }).filter(Boolean);
   }
@@ -110,0 +120,0 @@ var symbol = args.symbol,

dist/cjs/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"sideEffects": false
 }

dist/es2019/components/box.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { parseXcss } from '../internal/xcss';
-import { BaseBox } from './internal/base-box.partial';
+import { BaseBox } from './internal/base-box';
 /**
@@ -21,17 +21,3 @@ * __Box__
   children,
-  color,
   backgroundColor,
-  shadow,
-  borderStyle,
-  borderWidth,
-  borderRadius,
-  borderColor,
-  layer,
-  flex,
-  flexGrow,
-  flexShrink,
-  alignSelf,
-  overflow,
-  overflowInline,
-  overflowBlock,
   padding,
@@ -44,6 +30,2 @@ paddingBlock,
   paddingInlineEnd,
-  height,
-  width,
-  display = 'block',
-  position = 'static',
   style,
@@ -61,17 +43,3 @@ testId,
     as: as,
-    color: color,
     backgroundColor: backgroundColor,
-    shadow: shadow,
-    borderStyle: borderStyle,
-    borderWidth: borderWidth,
-    borderRadius: borderRadius,
-    borderColor: borderColor,
-    layer: layer,
-    flex: flex,
-    flexGrow: flexGrow,
-    flexShrink: flexShrink,
-    alignSelf: alignSelf,
-    overflow: overflow,
-    overflowInline: overflowInline,
-    overflowBlock: overflowBlock,
     padding: padding,
@@ -84,6 +52,2 @@ paddingBlock: paddingBlock,
     paddingInlineEnd: paddingInlineEnd,
-    height: height,
-    width: width,
-    display: display,
-    position: position,
     style: style,
@@ -90,0 +54,0 @@ testId: testId,

dist/es2019/components/inline.partial.js

@@ -0,1 +1,2 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -2,0 +3,0 @@ import { Children, forwardRef, Fragment, memo } from 'react';

dist/es2019/components/stack.partial.js

@@ -0,1 +1,2 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -2,0 +3,0 @@ import { forwardRef, memo } from 'react';

dist/es2019/internal/xcss.js

 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
-import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, textColorMap } from './style-maps';
+import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
@@ -22,5 +23,7 @@ backgroundColor: backgroundColorMap,
   paddingInlineStart: paddingMap,
+  boxShadow: shadowMap,
   width: dimensionMap
 };
 const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
 
@@ -43,4 +46,3 @@ /**
   Object.entries(styleObj).forEach(([key, value]) => {
-    var _process, _process$env;
-    if (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') {
+    if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
@@ -69,3 +71,7 @@ if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
     if (!tokenValue) {
-      throw new Error('Invalid Token');
+      const message = `Invalid token alias: ${value}`;
+      warnOnce(message);
+      if (isSafeEnvToThrow()) {
+        throw new Error(message);
+      }
     }
@@ -86,8 +92,8 @@ styleObj[key] = tokenValue;
  * @internal used in primitives
- * @returns
+ * @returns a collection of styles that can be applied to the respective primitive
  */
+
 export const parseXcss = args => {
   if (Array.isArray(args)) {
-    // @ts-expect-error FIXME
-    return args.map(parseXcss);
+    return args.map(x => x && parseXcss(x)).filter(Boolean);
   }
@@ -94,0 +100,0 @@ const {

dist/es2019/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"sideEffects": false
 }

dist/esm/components/box.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "style", "testId", "xcss"],
+var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
   _excluded2 = ["className"];
@@ -9,3 +9,3 @@ /** @jsx jsx */
 import { parseXcss } from '../internal/xcss';
-import { BaseBox } from './internal/base-box.partial';
+import { BaseBox } from './internal/base-box';
 /**
@@ -24,17 +24,3 @@ * __Box__
     children = _ref.children,
-    color = _ref.color,
     backgroundColor = _ref.backgroundColor,
-    shadow = _ref.shadow,
-    borderStyle = _ref.borderStyle,
-    borderWidth = _ref.borderWidth,
-    borderRadius = _ref.borderRadius,
-    borderColor = _ref.borderColor,
-    layer = _ref.layer,
-    flex = _ref.flex,
-    flexGrow = _ref.flexGrow,
-    flexShrink = _ref.flexShrink,
-    alignSelf = _ref.alignSelf,
-    overflow = _ref.overflow,
-    overflowInline = _ref.overflowInline,
-    overflowBlock = _ref.overflowBlock,
     padding = _ref.padding,
@@ -47,8 +33,2 @@ paddingBlock = _ref.paddingBlock,
     paddingInlineEnd = _ref.paddingInlineEnd,
-    height = _ref.height,
-    width = _ref.width,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'block' : _ref$display,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'static' : _ref$position,
     style = _ref.style,
@@ -63,17 +43,3 @@ testId = _ref.testId,
     as: as,
-    color: color,
     backgroundColor: backgroundColor,
-    shadow: shadow,
-    borderStyle: borderStyle,
-    borderWidth: borderWidth,
-    borderRadius: borderRadius,
-    borderColor: borderColor,
-    layer: layer,
-    flex: flex,
-    flexGrow: flexGrow,
-    flexShrink: flexShrink,
-    alignSelf: alignSelf,
-    overflow: overflow,
-    overflowInline: overflowInline,
-    overflowBlock: overflowBlock,
     padding: padding,
@@ -86,6 +52,2 @@ paddingBlock: paddingBlock,
     paddingInlineEnd: paddingInlineEnd,
-    height: height,
-    width: width,
-    display: display,
-    position: position,
     style: style,
@@ -92,0 +54,0 @@ testId: testId,

dist/esm/components/inline.partial.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -3,0 +4,0 @@ import { Children, forwardRef, Fragment, memo } from 'react';

dist/esm/components/stack.partial.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -3,0 +4,0 @@ import { forwardRef, memo } from 'react';

dist/esm/internal/xcss.js

@@ -5,3 +5,4 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { css as cssEmotion } from '@emotion/react';
-import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, textColorMap } from './style-maps';
+import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
@@ -25,5 +26,9 @@ backgroundColor: backgroundColorMap,
   paddingInlineStart: paddingMap,
+  boxShadow: shadowMap,
   width: dimensionMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+var isSafeEnvToThrow = function isSafeEnvToThrow() {
+  return (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && _typeof(process.env) === 'object' && process.env.NODE_ENV !== 'production';
+};
 
@@ -46,7 +51,6 @@ /**
   Object.entries(styleObj).forEach(function (_ref) {
-    var _process, _process$env;
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    if (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') {
+    if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
@@ -75,3 +79,7 @@ if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
     if (!tokenValue) {
-      throw new Error('Invalid Token');
+      var message = "Invalid token alias: ".concat(value);
+      warnOnce(message);
+      if (isSafeEnvToThrow()) {
+        throw new Error(message);
+      }
     }
@@ -92,8 +100,10 @@ styleObj[key] = tokenValue;
  * @internal used in primitives
- * @returns
+ * @returns a collection of styles that can be applied to the respective primitive
  */
+
 export var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
-    // @ts-expect-error FIXME
-    return args.map(parseXcss);
+    return args.map(function (x) {
+      return x && parseXcss(x);
+    }).filter(Boolean);
   }
@@ -100,0 +110,0 @@ var symbol = args.symbol,

dist/esm/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"sideEffects": false
 }

dist/types/components/box.d.ts

 /** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
-import { BaseBoxProps } from './internal/base-box.partial';
+import { BaseBoxProps } from './internal/base-box';
 import type { PublicBoxPropsBase } from './types';
@@ -5,0 +5,0 @@ export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;

dist/types/components/types.d.ts

@@ -17,3 +17,3 @@ import type { CSSProperties } from 'react';
      */
-    xcss?: BoxXCSS;
+    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
 };

dist/types/internal/xcss.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { Box, Inline } from '../index';
-import { TokenisedProps } from './style-maps';
+import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -15,5 +15,6 @@ /**
  * @internal used in primitives
- * @returns
+ * @returns a collection of styles that can be applied to the respective primitive
  */
-export declare const parseXcss: (args: SafeCSS) => ReturnType<typeof cssEmotion>;
+declare type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
+export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
 declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
@@ -30,6 +31,5 @@ declare type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
-declare type SafeCSS = XCSS | XCSS[];
 declare type AllowedBoxStyles = keyof SafeCSSObject;
 declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
-export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
+export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
     readonly symbol: typeof uniqueSymbol;
@@ -36,0 +36,0 @@ readonly styles: Primitive extends (<T extends import("react").ElementType<any> = "div">(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 import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>> ? InlineStyles : never;

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -41,2 +41,3 @@ "author": "Atlassian Pty Ltd",
   "dependencies": {
+    "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/tokens": "^1.2.0",
@@ -43,0 +44,0 @@ "@babel/runtime": "^7.0.0",

report.api.md

@@ -33,4 +33,4 @@ <!-- API Report Version: 2.3 -->
 import { RefAttributes } from 'react';
-import { SerializedStyles } from '@emotion/react';
-import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
+import { SerializedStyles } from '@emotion/serialize';
+import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
 
@@ -52,9 +52,9 @@ // @public (undocumented)
 
-// @public (undocumented)
+// @public
 const alignSelfMap: {
-  readonly center: SerializedStyles;
-  readonly start: SerializedStyles;
-  readonly stretch: SerializedStyles;
-  readonly end: SerializedStyles;
-  readonly baseline: SerializedStyles;
+  readonly center: 'center';
+  readonly start: 'start';
+  readonly stretch: 'stretch';
+  readonly end: 'end';
+  readonly baseline: 'baseline';
 };
@@ -72,91 +72,94 @@
 // @public (undocumented)
-type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
-
-// @public (undocumented)
 const backgroundColorMap: {
-  readonly 'accent.red.subtlest': SerializedStyles;
-  readonly 'accent.red.subtler': SerializedStyles;
-  readonly 'accent.red.subtle': SerializedStyles;
-  readonly 'accent.red.bolder': SerializedStyles;
-  readonly 'accent.orange.subtlest': SerializedStyles;
-  readonly 'accent.orange.subtler': SerializedStyles;
-  readonly 'accent.orange.subtle': SerializedStyles;
-  readonly 'accent.orange.bolder': SerializedStyles;
-  readonly 'accent.yellow.subtlest': SerializedStyles;
-  readonly 'accent.yellow.subtler': SerializedStyles;
-  readonly 'accent.yellow.subtle': SerializedStyles;
-  readonly 'accent.yellow.bolder': SerializedStyles;
-  readonly 'accent.green.subtlest': SerializedStyles;
-  readonly 'accent.green.subtler': SerializedStyles;
-  readonly 'accent.green.subtle': SerializedStyles;
-  readonly 'accent.green.bolder': SerializedStyles;
-  readonly 'accent.teal.subtlest': SerializedStyles;
-  readonly 'accent.teal.subtler': SerializedStyles;
-  readonly 'accent.teal.subtle': SerializedStyles;
-  readonly 'accent.teal.bolder': SerializedStyles;
-  readonly 'accent.blue.subtlest': SerializedStyles;
-  readonly 'accent.blue.subtler': SerializedStyles;
-  readonly 'accent.blue.subtle': SerializedStyles;
-  readonly 'accent.blue.bolder': SerializedStyles;
-  readonly 'accent.purple.subtlest': SerializedStyles;
-  readonly 'accent.purple.subtler': SerializedStyles;
-  readonly 'accent.purple.subtle': SerializedStyles;
-  readonly 'accent.purple.bolder': SerializedStyles;
-  readonly 'accent.magenta.subtlest': SerializedStyles;
-  readonly 'accent.magenta.subtler': SerializedStyles;
-  readonly 'accent.magenta.subtle': SerializedStyles;
-  readonly 'accent.magenta.bolder': SerializedStyles;
-  readonly 'accent.gray.subtlest': SerializedStyles;
-  readonly 'accent.gray.subtler': SerializedStyles;
-  readonly 'accent.gray.subtle': SerializedStyles;
-  readonly 'accent.gray.bolder': SerializedStyles;
-  readonly disabled: SerializedStyles;
-  readonly input: SerializedStyles;
-  readonly 'inverse.subtle': SerializedStyles;
-  readonly neutral: SerializedStyles;
-  readonly 'neutral.subtle': SerializedStyles;
-  readonly 'neutral.bold': SerializedStyles;
-  readonly selected: SerializedStyles;
-  readonly 'selected.bold': SerializedStyles;
-  readonly 'brand.bold': SerializedStyles;
-  readonly danger: SerializedStyles;
-  readonly 'danger.bold': SerializedStyles;
-  readonly warning: SerializedStyles;
-  readonly 'warning.bold': SerializedStyles;
-  readonly success: SerializedStyles;
-  readonly 'success.bold': SerializedStyles;
-  readonly discovery: SerializedStyles;
-  readonly 'discovery.bold': SerializedStyles;
-  readonly information: SerializedStyles;
-  readonly 'information.bold': SerializedStyles;
-  readonly 'color.blanket': SerializedStyles;
-  readonly 'color.blanket.selected': SerializedStyles;
-  readonly 'color.blanket.danger': SerializedStyles;
-  readonly 'elevation.surface': SerializedStyles;
-  readonly 'elevation.surface.overlay': SerializedStyles;
-  readonly 'elevation.surface.raised': SerializedStyles;
-  readonly 'elevation.surface.sunken': SerializedStyles;
-};
-
-// @public (undocumented)
-const backgroundColorMap_2: {
+  readonly 'accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
+  readonly 'accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
+  readonly 'accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
+  readonly 'accent.red.bolder': 'var(--ds-background-accent-red-bolder)';
+  readonly 'accent.orange.subtlest': 'var(--ds-background-accent-orange-subtlest)';
+  readonly 'accent.orange.subtler': 'var(--ds-background-accent-orange-subtler)';
+  readonly 'accent.orange.subtle': 'var(--ds-background-accent-orange-subtle)';
+  readonly 'accent.orange.bolder': 'var(--ds-background-accent-orange-bolder)';
+  readonly 'accent.yellow.subtlest': 'var(--ds-background-accent-yellow-subtlest)';
+  readonly 'accent.yellow.subtler': 'var(--ds-background-accent-yellow-subtler)';
+  readonly 'accent.yellow.subtle': 'var(--ds-background-accent-yellow-subtle)';
+  readonly 'accent.yellow.bolder': 'var(--ds-background-accent-yellow-bolder)';
+  readonly 'accent.green.subtlest': 'var(--ds-background-accent-green-subtlest)';
+  readonly 'accent.green.subtler': 'var(--ds-background-accent-green-subtler)';
+  readonly 'accent.green.subtle': 'var(--ds-background-accent-green-subtle)';
+  readonly 'accent.green.bolder': 'var(--ds-background-accent-green-bolder)';
+  readonly 'accent.teal.subtlest': 'var(--ds-background-accent-teal-subtlest)';
+  readonly 'accent.teal.subtler': 'var(--ds-background-accent-teal-subtler)';
+  readonly 'accent.teal.subtle': 'var(--ds-background-accent-teal-subtle)';
+  readonly 'accent.teal.bolder': 'var(--ds-background-accent-teal-bolder)';
+  readonly 'accent.blue.subtlest': 'var(--ds-background-accent-blue-subtlest)';
+  readonly 'accent.blue.subtler': 'var(--ds-background-accent-blue-subtler)';
+  readonly 'accent.blue.subtle': 'var(--ds-background-accent-blue-subtle)';
+  readonly 'accent.blue.bolder': 'var(--ds-background-accent-blue-bolder)';
+  readonly 'accent.purple.subtlest': 'var(--ds-background-accent-purple-subtlest)';
+  readonly 'accent.purple.subtler': 'var(--ds-background-accent-purple-subtler)';
+  readonly 'accent.purple.subtle': 'var(--ds-background-accent-purple-subtle)';
+  readonly 'accent.purple.bolder': 'var(--ds-background-accent-purple-bolder)';
+  readonly 'accent.magenta.subtlest': 'var(--ds-background-accent-magenta-subtlest)';
+  readonly 'accent.magenta.subtler': 'var(--ds-background-accent-magenta-subtler)';
+  readonly 'accent.magenta.subtle': 'var(--ds-background-accent-magenta-subtle)';
+  readonly 'accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
+  readonly 'accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
+  readonly 'accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
+  readonly 'accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
+  readonly 'accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
   readonly disabled: 'var(--ds-background-disabled)';
   readonly input: 'var(--ds-background-input)';
+  readonly 'input.hovered': 'var(--ds-background-input-hovered)';
+  readonly 'input.pressed': 'var(--ds-background-input-pressed)';
   readonly 'inverse.subtle': 'var(--ds-background-inverse-subtle)';
+  readonly 'inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';
+  readonly 'inverse.subtle.pressed': 'var(--ds-background-inverse-subtle-pressed)';
   readonly neutral: 'var(--ds-background-neutral)';
+  readonly 'neutral.hovered': 'var(--ds-background-neutral-hovered)';
+  readonly 'neutral.pressed': 'var(--ds-background-neutral-pressed)';
   readonly 'neutral.subtle': 'var(--ds-background-neutral-subtle)';
+  readonly 'neutral.subtle.hovered': 'var(--ds-background-neutral-subtle-hovered)';
+  readonly 'neutral.subtle.pressed': 'var(--ds-background-neutral-subtle-pressed)';
   readonly 'neutral.bold': 'var(--ds-background-neutral-bold)';
+  readonly 'neutral.bold.hovered': 'var(--ds-background-neutral-bold-hovered)';
+  readonly 'neutral.bold.pressed': 'var(--ds-background-neutral-bold-pressed)';
   readonly selected: 'var(--ds-background-selected)';
+  readonly 'selected.hovered': 'var(--ds-background-selected-hovered)';
+  readonly 'selected.pressed': 'var(--ds-background-selected-pressed)';
   readonly 'selected.bold': 'var(--ds-background-selected-bold)';
+  readonly 'selected.bold.hovered': 'var(--ds-background-selected-bold-hovered)';
+  readonly 'selected.bold.pressed': 'var(--ds-background-selected-bold-pressed)';
   readonly 'brand.bold': 'var(--ds-background-brand-bold)';
+  readonly 'brand.bold.hovered': 'var(--ds-background-brand-bold-hovered)';
+  readonly 'brand.bold.pressed': 'var(--ds-background-brand-bold-pressed)';
   readonly danger: 'var(--ds-background-danger)';
+  readonly 'danger.hovered': 'var(--ds-background-danger-hovered)';
+  readonly 'danger.pressed': 'var(--ds-background-danger-pressed)';
   readonly 'danger.bold': 'var(--ds-background-danger-bold)';
+  readonly 'danger.bold.hovered': 'var(--ds-background-danger-bold-hovered)';
+  readonly 'danger.bold.pressed': 'var(--ds-background-danger-bold-pressed)';
   readonly warning: 'var(--ds-background-warning)';
+  readonly 'warning.hovered': 'var(--ds-background-warning-hovered)';
+  readonly 'warning.pressed': 'var(--ds-background-warning-pressed)';
   readonly 'warning.bold': 'var(--ds-background-warning-bold)';
+  readonly 'warning.bold.hovered': 'var(--ds-background-warning-bold-hovered)';
+  readonly 'warning.bold.pressed': 'var(--ds-background-warning-bold-pressed)';
   readonly success: 'var(--ds-background-success)';
+  readonly 'success.hovered': 'var(--ds-background-success-hovered)';
+  readonly 'success.pressed': 'var(--ds-background-success-pressed)';
   readonly 'success.bold': 'var(--ds-background-success-bold)';
+  readonly 'success.bold.hovered': 'var(--ds-background-success-bold-hovered)';
+  readonly 'success.bold.pressed': 'var(--ds-background-success-bold-pressed)';
   readonly discovery: 'var(--ds-background-discovery)';
+  readonly 'discovery.hovered': 'var(--ds-background-discovery-hovered)';
+  readonly 'discovery.pressed': 'var(--ds-background-discovery-pressed)';
   readonly 'discovery.bold': 'var(--ds-background-discovery-bold)';
+  readonly 'discovery.bold.hovered': 'var(--ds-background-discovery-bold-hovered)';
+  readonly 'discovery.bold.pressed': 'var(--ds-background-discovery-bold-pressed)';
   readonly information: 'var(--ds-background-information)';
+  readonly 'information.hovered': 'var(--ds-background-information-hovered)';
+  readonly 'information.pressed': 'var(--ds-background-information-pressed)';
   readonly 'information.bold': 'var(--ds-background-information-bold)';
+  readonly 'information.bold.hovered': 'var(--ds-background-information-bold-hovered)';
+  readonly 'information.bold.pressed': 'var(--ds-background-information-bold-pressed)';
   readonly 'color.blanket': 'var(--ds-blanket)';
@@ -166,4 +169,10 @@ readonly 'color.blanket.selected': 'var(--ds-blanket-selected)';
   readonly 'elevation.surface': 'var(--ds-surface)';
+  readonly 'elevation.surface.hovered': 'var(--ds-surface-hovered)';
+  readonly 'elevation.surface.pressed': 'var(--ds-surface-pressed)';
   readonly 'elevation.surface.overlay': 'var(--ds-surface-overlay)';
+  readonly 'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
+  readonly 'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
   readonly 'elevation.surface.raised': 'var(--ds-surface-raised)';
+  readonly 'elevation.surface.raised.hovered': 'var(--ds-surface-raised-hovered)';
+  readonly 'elevation.surface.raised.pressed': 'var(--ds-surface-raised-pressed)';
   readonly 'elevation.surface.sunken': 'var(--ds-surface-sunken)';
@@ -185,17 +194,3 @@ };
   children?: ReactNode;
-  color?: TextColor;
   backgroundColor?: BackgroundColor;
-  shadow?: Shadow;
-  borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth;
-  borderColor?: BorderColor;
-  borderRadius?: BorderRadius;
-  layer?: Layer;
-  flex?: Flex;
-  flexGrow?: FlexGrow;
-  flexShrink?: FlexShrink;
-  alignSelf?: AlignSelf;
-  overflow?: Overflow;
-  overflowInline?: OverflowInline;
-  overflowBlock?: OverflowBlock;
   padding?: Padding;
@@ -208,6 +203,2 @@ paddingBlock?: PaddingBlock;
   paddingInlineEnd?: PaddingInlineEnd;
-  width?: Width;
-  height?: Height;
-  display?: Display;
-  position?: Position;
   ref?: ComponentPropsWithRef<T>['ref'];
@@ -225,34 +216,14 @@ };
 
-// @public (undocumented)
-type BorderColor_2 = keyof typeof borderColorMap_2;
-
 // @public
 const borderColorMap: {
-  readonly 'color.border': SerializedStyles;
-  readonly 'accent.red': SerializedStyles;
-  readonly 'accent.orange': SerializedStyles;
-  readonly 'accent.yellow': SerializedStyles;
-  readonly 'accent.green': SerializedStyles;
-  readonly 'accent.teal': SerializedStyles;
-  readonly 'accent.blue': SerializedStyles;
-  readonly 'accent.purple': SerializedStyles;
-  readonly 'accent.magenta': SerializedStyles;
-  readonly 'accent.gray': SerializedStyles;
-  readonly disabled: SerializedStyles;
-  readonly focused: SerializedStyles;
-  readonly input: SerializedStyles;
-  readonly inverse: SerializedStyles;
-  readonly selected: SerializedStyles;
-  readonly brand: SerializedStyles;
-  readonly danger: SerializedStyles;
-  readonly warning: SerializedStyles;
-  readonly success: SerializedStyles;
-  readonly discovery: SerializedStyles;
-  readonly information: SerializedStyles;
-  readonly bold: SerializedStyles;
-};
-
-// @public (undocumented)
-const borderColorMap_2: {
   readonly 'color.border': 'var(--ds-border)';
+  readonly 'accent.red': 'var(--ds-border-accent-red)';
+  readonly 'accent.orange': 'var(--ds-border-accent-orange)';
+  readonly 'accent.yellow': 'var(--ds-border-accent-yellow)';
+  readonly 'accent.green': 'var(--ds-border-accent-green)';
+  readonly 'accent.teal': 'var(--ds-border-accent-teal)';
+  readonly 'accent.blue': 'var(--ds-border-accent-blue)';
+  readonly 'accent.purple': 'var(--ds-border-accent-purple)';
+  readonly 'accent.magenta': 'var(--ds-border-accent-magenta)';
+  readonly 'accent.gray': 'var(--ds-border-accent-gray)';
   readonly disabled: 'var(--ds-border-disabled)';
@@ -277,7 +248,8 @@ readonly focused: 'var(--ds-border-focused)';
 const borderRadiusMap: {
-  'radius.100': SerializedStyles;
-  'radius.200': SerializedStyles;
-  'radius.round': SerializedStyles;
-  'radius.300': SerializedStyles;
-  'radius.400': SerializedStyles;
+  readonly 'radius.050': 'var(--ds-radius-050)';
+  readonly 'radius.100': 'var(--ds-radius-100)';
+  readonly 'radius.200': 'var(--ds-radius-200)';
+  readonly 'radius.300': 'var(--ds-radius-300)';
+  readonly 'radius.400': 'var(--ds-radius-400)';
+  readonly 'radius.round': 'var(--ds-radius-round)';
 };
@@ -290,4 +262,4 @@
 const borderStyleMap: {
-  readonly none: SerializedStyles;
-  readonly solid: SerializedStyles;
+  readonly none: 'none';
+  readonly solid: 'solid';
 };
@@ -298,19 +270,9 @@
 
-// @public (undocumented)
-type BorderWidth_2 = keyof typeof borderWidthMap_2;
-
-// @public (undocumented)
+// @public
 const borderWidthMap: {
-  readonly 'size.0': SerializedStyles;
-  readonly 'size.050': SerializedStyles;
-  readonly 'size.100': SerializedStyles;
+  readonly 'width.0': 'var(--ds-width-0)';
+  readonly 'width.050': 'var(--ds-width-050)';
+  readonly 'width.100': 'var(--ds-width-100)';
 };
 
-// @public (undocumented)
-const borderWidthMap_2: {
-  readonly 'size.0': 'var(--ds-width-0)';
-  readonly 'size.050': 'var(--ds-width-050)';
-  readonly 'size.100': 'var(--ds-width-100)';
-};
-
 // @public
@@ -335,3 +297,3 @@ export const Box: BoxComponent;
 // @public (undocumented)
-type BoxStyles = SerializedStyles_2 & {
+type BoxStyles = SerializedStyles & {
   [boxTag]: true;
@@ -349,3 +311,3 @@ };
 
-// @public (undocumented)
+// @public
 const dimensionMap: {
@@ -363,14 +325,5 @@ readonly '100%': '100%';
 // @public (undocumented)
-type Display = keyof typeof displayMap;
+type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
 
 // @public (undocumented)
-const displayMap: {
-  readonly block: SerializedStyles;
-  readonly inline: SerializedStyles;
-  readonly flex: SerializedStyles;
-  readonly 'inline-flex': SerializedStyles;
-  readonly 'inline-block': SerializedStyles;
-};
-
-// @public (undocumented)
 type Flex = keyof typeof flexMap;
@@ -383,4 +336,4 @@
 const flexGrowMap: {
-  readonly '0': SerializedStyles;
-  readonly '1': SerializedStyles;
+  readonly '0': 0;
+  readonly '1': 1;
 };
@@ -390,3 +343,3 @@
 const flexMap: {
-  readonly '1': SerializedStyles;
+  readonly '1': 1;
 };
@@ -399,4 +352,4 @@
 const flexShrinkMap: {
-  readonly '0': SerializedStyles;
-  readonly '1': SerializedStyles;
+  readonly '0': 0;
+  readonly '1': 1;
 };
@@ -417,19 +370,4 @@
 // @public (undocumented)
-type Height = keyof typeof heightMap;
+type Height = keyof typeof dimensionMap;
 
-// @public (undocumented)
-type Height_2 = keyof typeof dimensionMap;
-
-// @public (undocumented)
-const heightMap: {
-  readonly '100%': SerializedStyles;
-  readonly 'size.100': SerializedStyles;
-  readonly 'size.200': SerializedStyles;
-  readonly 'size.300': SerializedStyles;
-  readonly 'size.400': SerializedStyles;
-  readonly 'size.500': SerializedStyles;
-  readonly 'size.600': SerializedStyles;
-  readonly 'size.1000': SerializedStyles;
-};
-
 // @public
@@ -475,16 +413,16 @@ export const Inline: MemoExoticComponent<
   [k: string]: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
+    readonly '0': SerializedStyles_2;
+    readonly '025': SerializedStyles_2;
+    readonly '050': SerializedStyles_2;
+    readonly '075': SerializedStyles_2;
+    readonly '100': SerializedStyles_2;
+    readonly '150': SerializedStyles_2;
+    readonly '200': SerializedStyles_2;
+    readonly '250': SerializedStyles_2;
+    readonly '300': SerializedStyles_2;
+    readonly '400': SerializedStyles_2;
+    readonly '500': SerializedStyles_2;
+    readonly '600': SerializedStyles_2;
+    readonly '800': SerializedStyles_2;
+    readonly '1000': SerializedStyles_2;
   };
@@ -494,3 +432,3 @@ };
 // @public (undocumented)
-type InlineStyles = SerializedStyles_2 & {
+type InlineStyles = SerializedStyles & {
   [inlineTag]: true;
@@ -503,6 +441,6 @@ };
 // @public (undocumented)
-type Layer = keyof typeof LAYERS;
+type Layer = keyof typeof layerMap;
 
 // @public (undocumented)
-const LAYERS: {
+const layerMap: {
   readonly card: 100;
@@ -539,4 +477,4 @@ readonly navigation: 200;
 const overflowBlockMap: {
-  readonly auto: SerializedStyles;
-  readonly hidden: SerializedStyles;
+  readonly auto: 'auto';
+  readonly hidden: 'hidden';
 };
@@ -549,4 +487,4 @@
 const overflowInlineMap: {
-  readonly auto: SerializedStyles;
-  readonly hidden: SerializedStyles;
+  readonly auto: 'auto';
+  readonly hidden: 'hidden';
 };
@@ -556,52 +494,29 @@
 const overflowMap: {
-  readonly auto: SerializedStyles;
-  readonly hidden: SerializedStyles;
+  readonly auto: 'auto';
+  readonly hidden: 'hidden';
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap.padding;
+type Padding = keyof typeof paddingMap;
 
 // @public (undocumented)
-type Padding_2 = keyof typeof paddingMap_2;
+type PaddingBlock = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+type PaddingBlockEnd = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+type PaddingBlockStart = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+type PaddingInline = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap.paddingInline;
+type PaddingInlineEnd = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+type PaddingInlineStart = keyof typeof paddingMap;
 
-// @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
-
 // @public
 const paddingMap: {
-  [k: string]: {
-    readonly 'space.0': SerializedStyles;
-    readonly 'space.025': SerializedStyles;
-    readonly 'space.050': SerializedStyles;
-    readonly 'space.075': SerializedStyles;
-    readonly 'space.100': SerializedStyles;
-    readonly 'space.150': SerializedStyles;
-    readonly 'space.200': SerializedStyles;
-    readonly 'space.250': SerializedStyles;
-    readonly 'space.300': SerializedStyles;
-    readonly 'space.400': SerializedStyles;
-    readonly 'space.500': SerializedStyles;
-    readonly 'space.600': SerializedStyles;
-    readonly 'space.800': SerializedStyles;
-    readonly 'space.1000': SerializedStyles;
-  };
-};
-
-// @public (undocumented)
-const paddingMap_2: {
   readonly 'space.0': 'var(--ds-space-0)';
@@ -628,6 +543,6 @@ readonly 'space.025': 'var(--ds-space-025)';
 const positionMap: {
-  readonly absolute: SerializedStyles;
-  readonly fixed: SerializedStyles;
-  readonly relative: SerializedStyles;
-  readonly static: SerializedStyles;
+  readonly absolute: 'absolute';
+  readonly fixed: 'fixed';
+  readonly relative: 'relative';
+  readonly static: 'static';
 };
@@ -637,3 +552,3 @@
 type PublicBoxPropsBase = {
-  xcss?: BoxXCSS;
+  xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
 };
@@ -660,7 +575,7 @@
 const shadowMap: {
-  readonly overflow: SerializedStyles;
-  readonly 'overflow.perimeter': SerializedStyles;
-  readonly 'overflow.spread': SerializedStyles;
-  readonly overlay: SerializedStyles;
-  readonly raised: SerializedStyles;
+  readonly overflow: 'var(--ds-shadow-overflow)';
+  readonly 'overflow.perimeter': 'var(--ds-shadow-overflow-perimeter)';
+  readonly 'overflow.spread': 'var(--ds-shadow-overflow-spread)';
+  readonly overlay: 'var(--ds-shadow-overlay)';
+  readonly raised: 'var(--ds-shadow-raised)';
 };
@@ -708,16 +623,16 @@
   [k: string]: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
+    readonly '0': SerializedStyles_2;
+    readonly '025': SerializedStyles_2;
+    readonly '050': SerializedStyles_2;
+    readonly '075': SerializedStyles_2;
+    readonly '100': SerializedStyles_2;
+    readonly '150': SerializedStyles_2;
+    readonly '200': SerializedStyles_2;
+    readonly '250': SerializedStyles_2;
+    readonly '300': SerializedStyles_2;
+    readonly '400': SerializedStyles_2;
+    readonly '500': SerializedStyles_2;
+    readonly '600': SerializedStyles_2;
+    readonly '800': SerializedStyles_2;
+    readonly '1000': SerializedStyles_2;
   };
@@ -730,41 +645,3 @@ };
 // @public (undocumented)
-type TextColor_2 = keyof typeof textColorMap_2;
-
-// @public (undocumented)
 const textColorMap: {
-  readonly 'color.text': SerializedStyles;
-  readonly 'accent.red': SerializedStyles;
-  readonly 'accent.red.bolder': SerializedStyles;
-  readonly 'accent.orange': SerializedStyles;
-  readonly 'accent.orange.bolder': SerializedStyles;
-  readonly 'accent.yellow': SerializedStyles;
-  readonly 'accent.yellow.bolder': SerializedStyles;
-  readonly 'accent.green': SerializedStyles;
-  readonly 'accent.green.bolder': SerializedStyles;
-  readonly 'accent.teal': SerializedStyles;
-  readonly 'accent.teal.bolder': SerializedStyles;
-  readonly 'accent.blue': SerializedStyles;
-  readonly 'accent.blue.bolder': SerializedStyles;
-  readonly 'accent.purple': SerializedStyles;
-  readonly 'accent.purple.bolder': SerializedStyles;
-  readonly 'accent.magenta': SerializedStyles;
-  readonly 'accent.magenta.bolder': SerializedStyles;
-  readonly 'accent.gray': SerializedStyles;
-  readonly 'accent.gray.bolder': SerializedStyles;
-  readonly disabled: SerializedStyles;
-  readonly inverse: SerializedStyles;
-  readonly selected: SerializedStyles;
-  readonly brand: SerializedStyles;
-  readonly danger: SerializedStyles;
-  readonly warning: SerializedStyles;
-  readonly 'warning.inverse': SerializedStyles;
-  readonly success: SerializedStyles;
-  readonly discovery: SerializedStyles;
-  readonly information: SerializedStyles;
-  readonly subtlest: SerializedStyles;
-  readonly subtle: SerializedStyles;
-};
-
-// @public (undocumented)
-const textColorMap_2: {
   readonly 'color.text': 'var(--ds-text)';
@@ -805,19 +682,32 @@ readonly 'accent.red': 'var(--ds-text-accent-red)';
 type TokenisedProps = {
-  backgroundColor?: BackgroundColor_2;
-  borderColor?: BorderColor_2;
-  borderWidth?: BorderWidth_2;
-  color?: TextColor_2;
-  height?: Height_2;
+  alignSelf?: AlignSelf;
+  backgroundColor?: BackgroundColor;
+  borderColor?: BorderColor;
+  borderStyle?: BorderStyle;
+  borderRadius?: BorderRadius;
+  borderWidth?: BorderWidth;
+  display?: Display;
+  flex?: Flex;
+  flexGrow?: FlexGrow;
+  flexShrink?: FlexShrink;
+  height?: Height;
+  layer?: Layer;
+  maxWidth?: MaxWidth;
+  maxHeight?: MaxHeight;
+  minWidth?: MinWidth;
   minHeight?: MinHeight;
-  minWidth?: MinWidth;
-  maxHeight?: MaxHeight;
-  maxWidth?: MaxWidth;
-  padding?: Padding_2;
-  paddingBlock?: Padding_2;
-  paddingInline?: Padding_2;
-  paddingBlockStart?: Padding_2;
-  paddingBlockEnd?: Padding_2;
-  paddingInlineStart?: Padding_2;
-  paddingInlineEnd?: Padding_2;
-  width?: Width_2;
+  overflow?: Overflow;
+  overflowInline?: OverflowInline;
+  overflowBlock?: OverflowBlock;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingBlockStart?: PaddingBlockStart;
+  paddingBlockEnd?: PaddingBlockEnd;
+  paddingInline?: PaddingInline;
+  paddingInlineStart?: PaddingInlineStart;
+  paddingInlineEnd?: PaddingInlineEnd;
+  position?: Position;
+  shadow?: Shadow;
+  textColor?: TextColor;
+  width?: Width;
 };
@@ -829,25 +719,14 @@
 // @public (undocumented)
-type Width = keyof typeof widthMap;
+type Width = keyof typeof dimensionMap;
 
 // @public (undocumented)
-type Width_2 = keyof typeof dimensionMap;
-
-// @public
-const widthMap: {
-  readonly '100%': SerializedStyles;
-  readonly 'size.100': SerializedStyles;
-  readonly 'size.200': SerializedStyles;
-  readonly 'size.300': SerializedStyles;
-  readonly 'size.400': SerializedStyles;
-  readonly 'size.500': SerializedStyles;
-  readonly 'size.600': SerializedStyles;
-  readonly 'size.1000': SerializedStyles;
-};
-
-// @public (undocumented)
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
   style: Primitive extends typeof Box
-    ? ScopedSafeCSSObject<AllowedBoxStyles>
+    ?
+        | ScopedSafeCSSObject<AllowedBoxStyles>
+        | ScopedSafeCSSObject<AllowedBoxStyles>[]
     : Primitive extends typeof Inline
-    ? ScopedSafeCSSObject<AllowedInlineStyles>
+    ?
+        | ScopedSafeCSSObject<AllowedInlineStyles>
+        | ScopedSafeCSSObject<AllowedInlineStyles>[]
     : never,
@@ -854,0 +733,0 @@ ): {

tmp/api-report-tmp.d.ts

@@ -22,4 +22,4 @@ ## API Report File for "@atlaskit/primitives"
 import { RefAttributes } from 'react';
-import { SerializedStyles } from '@emotion/react';
-import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
+import { SerializedStyles } from '@emotion/serialize';
+import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
 
@@ -41,9 +41,9 @@ // @public (undocumented)
 
-// @public (undocumented)
+// @public
 const alignSelfMap: {
-    readonly center: SerializedStyles;
-    readonly start: SerializedStyles;
-    readonly stretch: SerializedStyles;
-    readonly end: SerializedStyles;
-    readonly baseline: SerializedStyles;
+    readonly center: "center";
+    readonly start: "start";
+    readonly stretch: "stretch";
+    readonly end: "end";
+    readonly baseline: "baseline";
 };
@@ -61,91 +61,94 @@
 // @public (undocumented)
-type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
-
-// @public (undocumented)
 const backgroundColorMap: {
-    readonly 'accent.red.subtlest': SerializedStyles;
-    readonly 'accent.red.subtler': SerializedStyles;
-    readonly 'accent.red.subtle': SerializedStyles;
-    readonly 'accent.red.bolder': SerializedStyles;
-    readonly 'accent.orange.subtlest': SerializedStyles;
-    readonly 'accent.orange.subtler': SerializedStyles;
-    readonly 'accent.orange.subtle': SerializedStyles;
-    readonly 'accent.orange.bolder': SerializedStyles;
-    readonly 'accent.yellow.subtlest': SerializedStyles;
-    readonly 'accent.yellow.subtler': SerializedStyles;
-    readonly 'accent.yellow.subtle': SerializedStyles;
-    readonly 'accent.yellow.bolder': SerializedStyles;
-    readonly 'accent.green.subtlest': SerializedStyles;
-    readonly 'accent.green.subtler': SerializedStyles;
-    readonly 'accent.green.subtle': SerializedStyles;
-    readonly 'accent.green.bolder': SerializedStyles;
-    readonly 'accent.teal.subtlest': SerializedStyles;
-    readonly 'accent.teal.subtler': SerializedStyles;
-    readonly 'accent.teal.subtle': SerializedStyles;
-    readonly 'accent.teal.bolder': SerializedStyles;
-    readonly 'accent.blue.subtlest': SerializedStyles;
-    readonly 'accent.blue.subtler': SerializedStyles;
-    readonly 'accent.blue.subtle': SerializedStyles;
-    readonly 'accent.blue.bolder': SerializedStyles;
-    readonly 'accent.purple.subtlest': SerializedStyles;
-    readonly 'accent.purple.subtler': SerializedStyles;
-    readonly 'accent.purple.subtle': SerializedStyles;
-    readonly 'accent.purple.bolder': SerializedStyles;
-    readonly 'accent.magenta.subtlest': SerializedStyles;
-    readonly 'accent.magenta.subtler': SerializedStyles;
-    readonly 'accent.magenta.subtle': SerializedStyles;
-    readonly 'accent.magenta.bolder': SerializedStyles;
-    readonly 'accent.gray.subtlest': SerializedStyles;
-    readonly 'accent.gray.subtler': SerializedStyles;
-    readonly 'accent.gray.subtle': SerializedStyles;
-    readonly 'accent.gray.bolder': SerializedStyles;
-    readonly disabled: SerializedStyles;
-    readonly input: SerializedStyles;
-    readonly 'inverse.subtle': SerializedStyles;
-    readonly neutral: SerializedStyles;
-    readonly 'neutral.subtle': SerializedStyles;
-    readonly 'neutral.bold': SerializedStyles;
-    readonly selected: SerializedStyles;
-    readonly 'selected.bold': SerializedStyles;
-    readonly 'brand.bold': SerializedStyles;
-    readonly danger: SerializedStyles;
-    readonly 'danger.bold': SerializedStyles;
-    readonly warning: SerializedStyles;
-    readonly 'warning.bold': SerializedStyles;
-    readonly success: SerializedStyles;
-    readonly 'success.bold': SerializedStyles;
-    readonly discovery: SerializedStyles;
-    readonly 'discovery.bold': SerializedStyles;
-    readonly information: SerializedStyles;
-    readonly 'information.bold': SerializedStyles;
-    readonly 'color.blanket': SerializedStyles;
-    readonly 'color.blanket.selected': SerializedStyles;
-    readonly 'color.blanket.danger': SerializedStyles;
-    readonly 'elevation.surface': SerializedStyles;
-    readonly 'elevation.surface.overlay': SerializedStyles;
-    readonly 'elevation.surface.raised': SerializedStyles;
-    readonly 'elevation.surface.sunken': SerializedStyles;
-};
-
-// @public (undocumented)
-const backgroundColorMap_2: {
+    readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
+    readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
+    readonly 'accent.red.subtle': "var(--ds-background-accent-red-subtle)";
+    readonly 'accent.red.bolder': "var(--ds-background-accent-red-bolder)";
+    readonly 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
+    readonly 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
+    readonly 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
+    readonly 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
+    readonly 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
+    readonly 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
+    readonly 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
+    readonly 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
+    readonly 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
+    readonly 'accent.green.subtler': "var(--ds-background-accent-green-subtler)";
+    readonly 'accent.green.subtle': "var(--ds-background-accent-green-subtle)";
+    readonly 'accent.green.bolder': "var(--ds-background-accent-green-bolder)";
+    readonly 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
+    readonly 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
+    readonly 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
+    readonly 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
+    readonly 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
+    readonly 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
+    readonly 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
+    readonly 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
+    readonly 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
+    readonly 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
+    readonly 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
+    readonly 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
+    readonly 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
+    readonly 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
+    readonly 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
+    readonly 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
+    readonly 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
+    readonly 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
+    readonly 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
+    readonly 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
     readonly disabled: "var(--ds-background-disabled)";
     readonly input: "var(--ds-background-input)";
+    readonly 'input.hovered': "var(--ds-background-input-hovered)";
+    readonly 'input.pressed': "var(--ds-background-input-pressed)";
     readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
+    readonly 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
+    readonly 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
     readonly neutral: "var(--ds-background-neutral)";
+    readonly 'neutral.hovered': "var(--ds-background-neutral-hovered)";
+    readonly 'neutral.pressed': "var(--ds-background-neutral-pressed)";
     readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
+    readonly 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
+    readonly 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
     readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
+    readonly 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
+    readonly 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
     readonly selected: "var(--ds-background-selected)";
+    readonly 'selected.hovered': "var(--ds-background-selected-hovered)";
+    readonly 'selected.pressed': "var(--ds-background-selected-pressed)";
     readonly 'selected.bold': "var(--ds-background-selected-bold)";
+    readonly 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
+    readonly 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
     readonly 'brand.bold': "var(--ds-background-brand-bold)";
+    readonly 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
+    readonly 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
     readonly danger: "var(--ds-background-danger)";
+    readonly 'danger.hovered': "var(--ds-background-danger-hovered)";
+    readonly 'danger.pressed': "var(--ds-background-danger-pressed)";
     readonly 'danger.bold': "var(--ds-background-danger-bold)";
+    readonly 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
+    readonly 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
     readonly warning: "var(--ds-background-warning)";
+    readonly 'warning.hovered': "var(--ds-background-warning-hovered)";
+    readonly 'warning.pressed': "var(--ds-background-warning-pressed)";
     readonly 'warning.bold': "var(--ds-background-warning-bold)";
+    readonly 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
+    readonly 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
     readonly success: "var(--ds-background-success)";
+    readonly 'success.hovered': "var(--ds-background-success-hovered)";
+    readonly 'success.pressed': "var(--ds-background-success-pressed)";
     readonly 'success.bold': "var(--ds-background-success-bold)";
+    readonly 'success.bold.hovered': "var(--ds-background-success-bold-hovered)";
+    readonly 'success.bold.pressed': "var(--ds-background-success-bold-pressed)";
     readonly discovery: "var(--ds-background-discovery)";
+    readonly 'discovery.hovered': "var(--ds-background-discovery-hovered)";
+    readonly 'discovery.pressed': "var(--ds-background-discovery-pressed)";
     readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
+    readonly 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
+    readonly 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
     readonly information: "var(--ds-background-information)";
+    readonly 'information.hovered': "var(--ds-background-information-hovered)";
+    readonly 'information.pressed': "var(--ds-background-information-pressed)";
     readonly 'information.bold': "var(--ds-background-information-bold)";
+    readonly 'information.bold.hovered': "var(--ds-background-information-bold-hovered)";
+    readonly 'information.bold.pressed': "var(--ds-background-information-bold-pressed)";
     readonly 'color.blanket': "var(--ds-blanket)";
@@ -155,4 +158,10 @@ readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
     readonly 'elevation.surface': "var(--ds-surface)";
+    readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
+    readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
     readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
+    readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
+    readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
     readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
+    readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
+    readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
     readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
@@ -169,17 +178,3 @@ };
     children?: ReactNode;
-    color?: TextColor;
     backgroundColor?: BackgroundColor;
-    shadow?: Shadow;
-    borderStyle?: BorderStyle;
-    borderWidth?: BorderWidth;
-    borderColor?: BorderColor;
-    borderRadius?: BorderRadius;
-    layer?: Layer;
-    flex?: Flex;
-    flexGrow?: FlexGrow;
-    flexShrink?: FlexShrink;
-    alignSelf?: AlignSelf;
-    overflow?: Overflow;
-    overflowInline?: OverflowInline;
-    overflowBlock?: OverflowBlock;
     padding?: Padding;
@@ -192,6 +187,2 @@ paddingBlock?: PaddingBlock;
     paddingInlineEnd?: PaddingInlineEnd;
-    width?: Width;
-    height?: Height;
-    display?: Display;
-    position?: Position;
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -209,34 +200,14 @@ };
 
-// @public (undocumented)
-type BorderColor_2 = keyof typeof borderColorMap_2;
-
 // @public
 const borderColorMap: {
-    readonly 'color.border': SerializedStyles;
-    readonly 'accent.red': SerializedStyles;
-    readonly 'accent.orange': SerializedStyles;
-    readonly 'accent.yellow': SerializedStyles;
-    readonly 'accent.green': SerializedStyles;
-    readonly 'accent.teal': SerializedStyles;
-    readonly 'accent.blue': SerializedStyles;
-    readonly 'accent.purple': SerializedStyles;
-    readonly 'accent.magenta': SerializedStyles;
-    readonly 'accent.gray': SerializedStyles;
-    readonly disabled: SerializedStyles;
-    readonly focused: SerializedStyles;
-    readonly input: SerializedStyles;
-    readonly inverse: SerializedStyles;
-    readonly selected: SerializedStyles;
-    readonly brand: SerializedStyles;
-    readonly danger: SerializedStyles;
-    readonly warning: SerializedStyles;
-    readonly success: SerializedStyles;
-    readonly discovery: SerializedStyles;
-    readonly information: SerializedStyles;
-    readonly bold: SerializedStyles;
-};
-
-// @public (undocumented)
-const borderColorMap_2: {
     readonly 'color.border': "var(--ds-border)";
+    readonly 'accent.red': "var(--ds-border-accent-red)";
+    readonly 'accent.orange': "var(--ds-border-accent-orange)";
+    readonly 'accent.yellow': "var(--ds-border-accent-yellow)";
+    readonly 'accent.green': "var(--ds-border-accent-green)";
+    readonly 'accent.teal': "var(--ds-border-accent-teal)";
+    readonly 'accent.blue': "var(--ds-border-accent-blue)";
+    readonly 'accent.purple': "var(--ds-border-accent-purple)";
+    readonly 'accent.magenta': "var(--ds-border-accent-magenta)";
+    readonly 'accent.gray': "var(--ds-border-accent-gray)";
     readonly disabled: "var(--ds-border-disabled)";
@@ -261,7 +232,8 @@ readonly focused: "var(--ds-border-focused)";
 const borderRadiusMap: {
-    'radius.100': SerializedStyles;
-    'radius.200': SerializedStyles;
-    'radius.round': SerializedStyles;
-    'radius.300': SerializedStyles;
-    'radius.400': SerializedStyles;
+    readonly 'radius.050': "var(--ds-radius-050)";
+    readonly 'radius.100': "var(--ds-radius-100)";
+    readonly 'radius.200': "var(--ds-radius-200)";
+    readonly 'radius.300': "var(--ds-radius-300)";
+    readonly 'radius.400': "var(--ds-radius-400)";
+    readonly 'radius.round': "var(--ds-radius-round)";
 };
@@ -274,4 +246,4 @@
 const borderStyleMap: {
-    readonly none: SerializedStyles;
-    readonly solid: SerializedStyles;
+    readonly none: "none";
+    readonly solid: "solid";
 };
@@ -282,19 +254,9 @@
 
-// @public (undocumented)
-type BorderWidth_2 = keyof typeof borderWidthMap_2;
-
-// @public (undocumented)
+// @public
 const borderWidthMap: {
-    readonly 'size.0': SerializedStyles;
-    readonly 'size.050': SerializedStyles;
-    readonly 'size.100': SerializedStyles;
+    readonly 'width.0': "var(--ds-width-0)";
+    readonly 'width.050': "var(--ds-width-050)";
+    readonly 'width.100': "var(--ds-width-100)";
 };
 
-// @public (undocumented)
-const borderWidthMap_2: {
-    readonly 'size.0': "var(--ds-width-0)";
-    readonly 'size.050': "var(--ds-width-050)";
-    readonly 'size.100': "var(--ds-width-100)";
-};
-
 // @public
@@ -310,3 +272,3 @@ export const Box: BoxComponent;
 // @public (undocumented)
-type BoxStyles = SerializedStyles_2 & {
+type BoxStyles = SerializedStyles & {
     [boxTag]: true;
@@ -324,3 +286,3 @@ };
 
-// @public (undocumented)
+// @public
 const dimensionMap: {
@@ -338,14 +300,5 @@ readonly '100%': "100%";
 // @public (undocumented)
-type Display = keyof typeof displayMap;
+type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
 
 // @public (undocumented)
-const displayMap: {
-    readonly block: SerializedStyles;
-    readonly inline: SerializedStyles;
-    readonly flex: SerializedStyles;
-    readonly 'inline-flex': SerializedStyles;
-    readonly 'inline-block': SerializedStyles;
-};
-
-// @public (undocumented)
 type Flex = keyof typeof flexMap;
@@ -358,4 +311,4 @@
 const flexGrowMap: {
-    readonly '0': SerializedStyles;
-    readonly '1': SerializedStyles;
+    readonly '0': 0;
+    readonly '1': 1;
 };
@@ -365,3 +318,3 @@
 const flexMap: {
-    readonly '1': SerializedStyles;
+    readonly '1': 1;
 };
@@ -374,4 +327,4 @@
 const flexShrinkMap: {
-    readonly '0': SerializedStyles;
-    readonly '1': SerializedStyles;
+    readonly '0': 0;
+    readonly '1': 1;
 };
@@ -392,19 +345,4 @@
 // @public (undocumented)
-type Height = keyof typeof heightMap;
+type Height = keyof typeof dimensionMap;
 
-// @public (undocumented)
-type Height_2 = keyof typeof dimensionMap;
-
-// @public (undocumented)
-const heightMap: {
-    readonly '100%': SerializedStyles;
-    readonly 'size.100': SerializedStyles;
-    readonly 'size.200': SerializedStyles;
-    readonly 'size.300': SerializedStyles;
-    readonly 'size.400': SerializedStyles;
-    readonly 'size.500': SerializedStyles;
-    readonly 'size.600': SerializedStyles;
-    readonly 'size.1000': SerializedStyles;
-};
-
 // @public
@@ -432,16 +370,16 @@ export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
     [k: string]: {
-        readonly '0': SerializedStyles;
-        readonly '025': SerializedStyles;
-        readonly '050': SerializedStyles;
-        readonly '075': SerializedStyles;
-        readonly '100': SerializedStyles;
-        readonly '150': SerializedStyles;
-        readonly '200': SerializedStyles;
-        readonly '250': SerializedStyles;
-        readonly '300': SerializedStyles;
-        readonly '400': SerializedStyles;
-        readonly '500': SerializedStyles;
-        readonly '600': SerializedStyles;
-        readonly '800': SerializedStyles;
-        readonly '1000': SerializedStyles;
+        readonly '0': SerializedStyles_2;
+        readonly '025': SerializedStyles_2;
+        readonly '050': SerializedStyles_2;
+        readonly '075': SerializedStyles_2;
+        readonly '100': SerializedStyles_2;
+        readonly '150': SerializedStyles_2;
+        readonly '200': SerializedStyles_2;
+        readonly '250': SerializedStyles_2;
+        readonly '300': SerializedStyles_2;
+        readonly '400': SerializedStyles_2;
+        readonly '500': SerializedStyles_2;
+        readonly '600': SerializedStyles_2;
+        readonly '800': SerializedStyles_2;
+        readonly '1000': SerializedStyles_2;
     };
@@ -451,3 +389,3 @@ };
 // @public (undocumented)
-type InlineStyles = SerializedStyles_2 & {
+type InlineStyles = SerializedStyles & {
     [inlineTag]: true;
@@ -460,6 +398,6 @@ };
 // @public (undocumented)
-type Layer = keyof typeof LAYERS;
+type Layer = keyof typeof layerMap;
 
 // @public (undocumented)
-const LAYERS: {
+const layerMap: {
     readonly card: 100;
@@ -496,4 +434,4 @@ readonly navigation: 200;
 const overflowBlockMap: {
-    readonly auto: SerializedStyles;
-    readonly hidden: SerializedStyles;
+    readonly auto: "auto";
+    readonly hidden: "hidden";
 };
@@ -506,4 +444,4 @@
 const overflowInlineMap: {
-    readonly auto: SerializedStyles;
-    readonly hidden: SerializedStyles;
+    readonly auto: "auto";
+    readonly hidden: "hidden";
 };
@@ -513,52 +451,29 @@
 const overflowMap: {
-    readonly auto: SerializedStyles;
-    readonly hidden: SerializedStyles;
+    readonly auto: "auto";
+    readonly hidden: "hidden";
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap.padding;
+type Padding = keyof typeof paddingMap;
 
 // @public (undocumented)
-type Padding_2 = keyof typeof paddingMap_2;
+type PaddingBlock = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+type PaddingBlockEnd = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+type PaddingBlockStart = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+type PaddingInline = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap.paddingInline;
+type PaddingInlineEnd = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+type PaddingInlineStart = keyof typeof paddingMap;
 
-// @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
-
 // @public
 const paddingMap: {
-    [k: string]: {
-        readonly 'space.0': SerializedStyles;
-        readonly 'space.025': SerializedStyles;
-        readonly 'space.050': SerializedStyles;
-        readonly 'space.075': SerializedStyles;
-        readonly 'space.100': SerializedStyles;
-        readonly 'space.150': SerializedStyles;
-        readonly 'space.200': SerializedStyles;
-        readonly 'space.250': SerializedStyles;
-        readonly 'space.300': SerializedStyles;
-        readonly 'space.400': SerializedStyles;
-        readonly 'space.500': SerializedStyles;
-        readonly 'space.600': SerializedStyles;
-        readonly 'space.800': SerializedStyles;
-        readonly 'space.1000': SerializedStyles;
-    };
-};
-
-// @public (undocumented)
-const paddingMap_2: {
     readonly 'space.0': "var(--ds-space-0)";
@@ -585,6 +500,6 @@ readonly 'space.025': "var(--ds-space-025)";
 const positionMap: {
-    readonly absolute: SerializedStyles;
-    readonly fixed: SerializedStyles;
-    readonly relative: SerializedStyles;
-    readonly static: SerializedStyles;
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+    readonly relative: "relative";
+    readonly static: "static";
 };
@@ -594,3 +509,3 @@
 type PublicBoxPropsBase = {
-    xcss?: BoxXCSS;
+    xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
 };
@@ -612,7 +527,7 @@
 const shadowMap: {
-    readonly overflow: SerializedStyles;
-    readonly 'overflow.perimeter': SerializedStyles;
-    readonly 'overflow.spread': SerializedStyles;
-    readonly overlay: SerializedStyles;
-    readonly raised: SerializedStyles;
+    readonly overflow: "var(--ds-shadow-overflow)";
+    readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
+    readonly 'overflow.spread': "var(--ds-shadow-overflow-spread)";
+    readonly overlay: "var(--ds-shadow-overlay)";
+    readonly raised: "var(--ds-shadow-raised)";
 };
@@ -645,16 +560,16 @@
     [k: string]: {
-        readonly '0': SerializedStyles;
-        readonly '025': SerializedStyles;
-        readonly '050': SerializedStyles;
-        readonly '075': SerializedStyles;
-        readonly '100': SerializedStyles;
-        readonly '150': SerializedStyles;
-        readonly '200': SerializedStyles;
-        readonly '250': SerializedStyles;
-        readonly '300': SerializedStyles;
-        readonly '400': SerializedStyles;
-        readonly '500': SerializedStyles;
-        readonly '600': SerializedStyles;
-        readonly '800': SerializedStyles;
-        readonly '1000': SerializedStyles;
+        readonly '0': SerializedStyles_2;
+        readonly '025': SerializedStyles_2;
+        readonly '050': SerializedStyles_2;
+        readonly '075': SerializedStyles_2;
+        readonly '100': SerializedStyles_2;
+        readonly '150': SerializedStyles_2;
+        readonly '200': SerializedStyles_2;
+        readonly '250': SerializedStyles_2;
+        readonly '300': SerializedStyles_2;
+        readonly '400': SerializedStyles_2;
+        readonly '500': SerializedStyles_2;
+        readonly '600': SerializedStyles_2;
+        readonly '800': SerializedStyles_2;
+        readonly '1000': SerializedStyles_2;
     };
@@ -667,41 +582,3 @@ };
 // @public (undocumented)
-type TextColor_2 = keyof typeof textColorMap_2;
-
-// @public (undocumented)
 const textColorMap: {
-    readonly 'color.text': SerializedStyles;
-    readonly 'accent.red': SerializedStyles;
-    readonly 'accent.red.bolder': SerializedStyles;
-    readonly 'accent.orange': SerializedStyles;
-    readonly 'accent.orange.bolder': SerializedStyles;
-    readonly 'accent.yellow': SerializedStyles;
-    readonly 'accent.yellow.bolder': SerializedStyles;
-    readonly 'accent.green': SerializedStyles;
-    readonly 'accent.green.bolder': SerializedStyles;
-    readonly 'accent.teal': SerializedStyles;
-    readonly 'accent.teal.bolder': SerializedStyles;
-    readonly 'accent.blue': SerializedStyles;
-    readonly 'accent.blue.bolder': SerializedStyles;
-    readonly 'accent.purple': SerializedStyles;
-    readonly 'accent.purple.bolder': SerializedStyles;
-    readonly 'accent.magenta': SerializedStyles;
-    readonly 'accent.magenta.bolder': SerializedStyles;
-    readonly 'accent.gray': SerializedStyles;
-    readonly 'accent.gray.bolder': SerializedStyles;
-    readonly disabled: SerializedStyles;
-    readonly inverse: SerializedStyles;
-    readonly selected: SerializedStyles;
-    readonly brand: SerializedStyles;
-    readonly danger: SerializedStyles;
-    readonly warning: SerializedStyles;
-    readonly 'warning.inverse': SerializedStyles;
-    readonly success: SerializedStyles;
-    readonly discovery: SerializedStyles;
-    readonly information: SerializedStyles;
-    readonly subtlest: SerializedStyles;
-    readonly subtle: SerializedStyles;
-};
-
-// @public (undocumented)
-const textColorMap_2: {
     readonly 'color.text': "var(--ds-text)";
@@ -742,19 +619,32 @@ readonly 'accent.red': "var(--ds-text-accent-red)";
 type TokenisedProps = {
-    backgroundColor?: BackgroundColor_2;
-    borderColor?: BorderColor_2;
-    borderWidth?: BorderWidth_2;
-    color?: TextColor_2;
-    height?: Height_2;
+    alignSelf?: AlignSelf;
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    borderStyle?: BorderStyle;
+    borderRadius?: BorderRadius;
+    borderWidth?: BorderWidth;
+    display?: Display;
+    flex?: Flex;
+    flexGrow?: FlexGrow;
+    flexShrink?: FlexShrink;
+    height?: Height;
+    layer?: Layer;
+    maxWidth?: MaxWidth;
+    maxHeight?: MaxHeight;
+    minWidth?: MinWidth;
     minHeight?: MinHeight;
-    minWidth?: MinWidth;
-    maxHeight?: MaxHeight;
-    maxWidth?: MaxWidth;
-    padding?: Padding_2;
-    paddingBlock?: Padding_2;
-    paddingInline?: Padding_2;
-    paddingBlockStart?: Padding_2;
-    paddingBlockEnd?: Padding_2;
-    paddingInlineStart?: Padding_2;
-    paddingInlineEnd?: Padding_2;
-    width?: Width_2;
+    overflow?: Overflow;
+    overflowInline?: OverflowInline;
+    overflowBlock?: OverflowBlock;
+    padding?: Padding;
+    paddingBlock?: PaddingBlock;
+    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockEnd?: PaddingBlockEnd;
+    paddingInline?: PaddingInline;
+    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineEnd?: PaddingInlineEnd;
+    position?: Position;
+    shadow?: Shadow;
+    textColor?: TextColor;
+    width?: Width;
 };
@@ -766,21 +656,6 @@
 // @public (undocumented)
-type Width = keyof typeof widthMap;
+type Width = keyof typeof dimensionMap;
 
 // @public (undocumented)
-type Width_2 = keyof typeof dimensionMap;
-
-// @public
-const widthMap: {
-    readonly '100%': SerializedStyles;
-    readonly 'size.100': SerializedStyles;
-    readonly 'size.200': SerializedStyles;
-    readonly 'size.300': SerializedStyles;
-    readonly 'size.400': SerializedStyles;
-    readonly 'size.500': SerializedStyles;
-    readonly 'size.600': SerializedStyles;
-    readonly 'size.1000': SerializedStyles;
-};
-
-// @public (undocumented)
-export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
+export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
     readonly symbol: typeof uniqueSymbol;
@@ -787,0 +662,0 @@ readonly styles: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>> ? InlineStyles : never;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

88

increased by7.32%

Worsened metrics

Total package byte prevSize

270977

decreased by-14.34%

Dependency count

6

increased by20%

Lines of code

5356

decreased by-28.91%

Number of low supply chain risk alerts

10

increased by150%

Dependency changes

• + Added@atlaskit/ds-lib@^2.1.2