@atlaskit/primitives - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

 # @atlaskit/primitives
 
+## 0.4.2
+
+### Patch Changes
+
+- [`fa26963628c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa26963628c) - Removes `customStyles` in favour of `xcss`.
+
 ## 0.4.1
@@ -4,0 +10,0 @@

dist/cjs/components/box.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -11,8 +10,8 @@ value: true
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+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", "customStyles", "testId"],
-  _excluded2 = ["style", "className"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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"],
+  _excluded2 = ["className"];
 /**
@@ -59,9 +58,10 @@ * __Box__
     position = _ref$position === void 0 ? 'static' : _ref$position,
-    customStyles = _ref.customStyles,
+    style = _ref.style,
     testId = _ref.testId,
+    xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var style = htmlAttributes.style,
-    className = htmlAttributes.className,
+  var spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(_baseBox.BaseBox, (0, _extends2.default)({
+  var className = xcss && (0, _xcss.parseXcss)(xcss);
+  return (0, _react2.jsx)(_baseBox.BaseBox, (0, _extends2.default)({
     as: as,
@@ -94,8 +94,12 @@ color: color,
     position: position,
-    UNSAFE_style: customStyles,
+    style: style,
     testId: testId,
     ref: ref
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: className
   }, safeHtmlAttributes), children);
 });
+Box.displayName = 'Box';
 var _default = Box;
 exports.default = _default;

dist/cjs/components/internal/base-box.partial.js

@@ -18,3 +18,3 @@ "use strict";
 var _utils = require("./utils");
-var _excluded = ["as", "className", "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", "UNSAFE_style", "testId"];
+var _excluded = ["as", "className", "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"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -91,7 +91,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     position = _ref3$position === void 0 ? 'static' : _ref3$position,
-    UNSAFE_style = _ref3.UNSAFE_style,
+    style = _ref3.style,
     testId = _ref3.testId,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var Component = as || 'div';
-  var inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
+  var inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
@@ -98,0 +98,0 @@ style: inlineStyles,

dist/cjs/index.js

@@ -25,4 +25,11 @@ "use strict";
 });
+Object.defineProperty(exports, "xcss", {
+  enumerable: true,
+  get: function get() {
+    return _xcss.xcss;
+  }
+});
 var _box = _interopRequireDefault(require("./components/box"));
 var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _xcss = require("./internal/xcss");
 var _stack = _interopRequireDefault(require("./components/stack.partial"));

dist/cjs/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"sideEffects": false
 }

dist/es2019/components/box.js

 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { parseXcss } from '../internal/xcss';
 import { BaseBox } from './internal/base-box.partial';
@@ -43,12 +46,13 @@ /**
   position = 'static',
-  customStyles,
+  style,
   testId,
+  xcss,
   ...htmlAttributes
 }, ref) => {
   const {
-    style,
-    className,
+    className: spreadClass,
     ...safeHtmlAttributes
   } = htmlAttributes;
-  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+  const className = xcss && parseXcss(xcss);
+  return jsx(BaseBox, _extends({
     as: as,
@@ -81,7 +85,11 @@ color: color,
     position: position,
-    UNSAFE_style: customStyles,
+    style: style,
     testId: testId,
     ref: ref
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: className
   }, safeHtmlAttributes), children);
 });
+Box.displayName = 'Box';
 export default Box;

dist/es2019/components/internal/base-box.partial.js

@@ -83,3 +83,3 @@ import _extends from "@babel/runtime/helpers/extends";
   position = 'static',
-  UNSAFE_style,
+  style,
   testId,
@@ -89,3 +89,3 @@ ...htmlAttributes
   const Component = as || 'div';
-  const inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
+  const inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   const node = jsx(Component, _extends({
@@ -92,0 +92,0 @@ style: inlineStyles,

dist/es2019/index.js

 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline.partial';
+export { xcss } from './internal/xcss';
 export { default as Stack } from './components/stack.partial';

dist/es2019/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"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", "customStyles", "testId"],
-  _excluded2 = ["style", "className"];
-import React, { forwardRef } from 'react';
+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"],
+  _excluded2 = ["className"];
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { parseXcss } from '../internal/xcss';
 import { BaseBox } from './internal/base-box.partial';
@@ -48,9 +51,10 @@ /**
     position = _ref$position === void 0 ? 'static' : _ref$position,
-    customStyles = _ref.customStyles,
+    style = _ref.style,
     testId = _ref.testId,
+    xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var style = htmlAttributes.style,
-    className = htmlAttributes.className,
+  var spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
-  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+  var className = xcss && parseXcss(xcss);
+  return jsx(BaseBox, _extends({
     as: as,
@@ -83,7 +87,11 @@ color: color,
     position: position,
-    UNSAFE_style: customStyles,
+    style: style,
     testId: testId,
     ref: ref
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: className
   }, safeHtmlAttributes), children);
 });
+Box.displayName = 'Box';
 export default Box;

dist/esm/components/internal/base-box.partial.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["as", "className", "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", "UNSAFE_style", "testId"];
+var _excluded = ["as", "className", "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"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -84,7 +84,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     position = _ref3$position === void 0 ? 'static' : _ref3$position,
-    UNSAFE_style = _ref3.UNSAFE_style,
+    style = _ref3.style,
     testId = _ref3.testId,
     htmlAttributes = _objectWithoutProperties(_ref3, _excluded);
   var Component = as || 'div';
-  var inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
+  var inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = jsx(Component, _extends({
@@ -91,0 +91,0 @@ style: inlineStyles,

dist/esm/index.js

 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline.partial';
+export { xcss } from './internal/xcss';
 export { default as Stack } from './components/stack.partial';

dist/esm/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"sideEffects": false
 }

dist/types/components/box.d.ts

@@ -0,6 +1,7 @@
+/** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
 import { BaseBoxProps } from './internal/base-box.partial';
-import { BoxResponsiveProp } from './internal/types';
-import { PublicBoxPropsBase } from './types';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | 'UNSAFE_style' | BoxResponsiveProp> & PublicBoxPropsBase;
+import type { BoxResponsiveProp } from './internal/types';
+import type { PublicBoxPropsBase } from './types';
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
 declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
@@ -7,0 +8,0 @@ /**

dist/types/components/internal/base-box.partial.d.ts

@@ -6,3 +6,3 @@ /** @jsx jsx */
 import type { BasePrimitiveProps } from '../types';
-export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -30,2 +30,4 @@ /**
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing color with a fallback.
@@ -35,2 +37,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing background color with a fallback.
@@ -40,2 +44,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing shadow with a fallback
@@ -45,2 +51,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border style.
@@ -50,2 +58,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border width.
@@ -55,2 +65,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing border color with a fallback.
@@ -60,2 +72,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border radius.
@@ -65,2 +79,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Used for providing a z-index.
@@ -70,2 +86,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Shorthand `flex` property.
@@ -75,2 +93,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines the flex grow factor -- how much remaining space should be taken up.
@@ -80,2 +100,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines the flex shrink factor -- how the item will shrink relative to other flex items in the container.
@@ -85,2 +107,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Overrides the `align-items` value.
@@ -90,2 +114,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box.
@@ -99,2 +125,4 @@ * Shorthand for overflow-inline and overflow-block.
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box in the horizontal direction (inline).
@@ -104,2 +132,4 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box in the vertical direction (block).
@@ -146,12 +176,16 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing width.
-     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     width?: Width;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing height.
-     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     height?: Height;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines display type and layout. Defaults to `block`.
@@ -161,5 +195,10 @@ */
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * CSS position property.
      */
     position?: Position;
+    /**
+     * Forwarded ref element
+     */
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -166,0 +205,0 @@ };

dist/types/components/types.d.ts

 import type { CSSProperties } from 'react';
-import { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
-/**
- * Restricted set of inline styles to be applied to the primitive.
- * Should be avoided where possible, in favor of the pre-defined props and values on the primitive itself.
- * Tokens should be used where possible.
- */
-export declare type CustomStyles = Pick<CSSProperties, 'flexBasis' | 'flex' | 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight' | 'insetInlineStart' | 'insetInlineEnd' | 'insetBlockStart' | 'float' | 'margin' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInline' | 'marginBlock' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'>;
-export interface BasePrimitiveProps {
+import type { SafeCSS } from '../internal/xcss';
+import type { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
+export declare type BasePrimitiveProps = {
     /**
@@ -16,8 +11,5 @@ * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      * Inline styles to be applied to the primitive.
-     * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
-     * Effectively equivalent to the standard `style` prop but marked with a special name.
-     * Used only internally.
      */
-    UNSAFE_style?: CSSProperties;
-}
+    style?: CSSProperties;
+};
 export declare type PublicBoxPropsBase = {
@@ -69,3 +61,6 @@ /**
     paddingInlineEnd?: PaddingInlineEnd;
-    customStyles?: CustomStyles;
+    /**
+     * Safe subset of styles that can be applied as a classname.
+     */
+    xcss?: SafeCSS;
 };

dist/types/index.d.ts

 export { default as Box, type BoxProps } from './components/box';
 export { default as Inline, type InlineProps, } from './components/inline.partial';
+export { xcss } from './internal/xcss';
 export { default as Stack, type StackProps } from './components/stack.partial';

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -44,2 +44,3 @@ "author": "Atlassian Pty Ltd",
     "@emotion/react": "^11.7.1",
+    "@emotion/serialize": "^1.1.0",
     "tiny-invariant": "^1.2.0"
@@ -92,2 +93,2 @@ },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

report.api.md

@@ -21,2 +21,4 @@ <!-- API Report Version: 2.3 -->
 import type { CSSProperties } from 'react';
+import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
+import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
@@ -59,2 +61,5 @@ import { FC } from 'react';
 // @public (undocumented)
+type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
+
+// @public (undocumented)
 const backgroundColorMap: {
@@ -126,5 +131,35 @@ readonly 'accent.red.subtlest': SerializedStyles;
 // @public (undocumented)
+const backgroundColorMap_2: {
+  readonly disabled: 'var(--ds-background-disabled)';
+  readonly input: 'var(--ds-background-input)';
+  readonly 'inverse.subtle': 'var(--ds-background-inverse-subtle)';
+  readonly neutral: 'var(--ds-background-neutral)';
+  readonly 'neutral.subtle': 'var(--ds-background-neutral-subtle)';
+  readonly 'neutral.bold': 'var(--ds-background-neutral-bold)';
+  readonly selected: 'var(--ds-background-selected)';
+  readonly 'selected.bold': 'var(--ds-background-selected-bold)';
+  readonly 'brand.bold': 'var(--ds-background-brand-bold)';
+  readonly danger: 'var(--ds-background-danger)';
+  readonly 'danger.bold': 'var(--ds-background-danger-bold)';
+  readonly warning: 'var(--ds-background-warning)';
+  readonly 'warning.bold': 'var(--ds-background-warning-bold)';
+  readonly success: 'var(--ds-background-success)';
+  readonly 'success.bold': 'var(--ds-background-success-bold)';
+  readonly discovery: 'var(--ds-background-discovery)';
+  readonly 'discovery.bold': 'var(--ds-background-discovery-bold)';
+  readonly information: 'var(--ds-background-information)';
+  readonly 'information.bold': 'var(--ds-background-information-bold)';
+  readonly 'color.blanket': 'var(--ds-blanket)';
+  readonly 'color.blanket.selected': 'var(--ds-blanket-selected)';
+  readonly 'color.blanket.danger': 'var(--ds-blanket-danger)';
+  readonly 'elevation.surface': 'var(--ds-surface)';
+  readonly 'elevation.surface.overlay': 'var(--ds-surface-overlay)';
+  readonly 'elevation.surface.raised': 'var(--ds-surface-raised)';
+  readonly 'elevation.surface.sunken': 'var(--ds-surface-sunken)';
+};
+
+// @public (undocumented)
 type BaseBoxProps<T extends ElementType = 'div'> = Omit<
   ComponentPropsWithoutRef<T>,
-  'as' | 'className' | 'style'
+  'as' | 'className'
 > &
@@ -171,6 +206,6 @@ BasePrimitiveProps &
 // @public (undocumented)
-interface BasePrimitiveProps {
+type BasePrimitiveProps = {
   testId?: string;
-  UNSAFE_style?: CSSProperties;
-}
+  style?: CSSProperties;
+};
 
@@ -180,2 +215,5 @@ // @public (undocumented)
 
+// @public (undocumented)
+type BorderColor_2 = keyof typeof borderColorMap_2;
+
 // @public
@@ -208,2 +246,19 @@ const borderColorMap: {
 // @public (undocumented)
+const borderColorMap_2: {
+  readonly 'color.border': 'var(--ds-border)';
+  readonly disabled: 'var(--ds-border-disabled)';
+  readonly focused: 'var(--ds-border-focused)';
+  readonly input: 'var(--ds-border-input)';
+  readonly inverse: 'var(--ds-border-inverse)';
+  readonly selected: 'var(--ds-border-selected)';
+  readonly brand: 'var(--ds-border-brand)';
+  readonly danger: 'var(--ds-border-danger)';
+  readonly warning: 'var(--ds-border-warning)';
+  readonly success: 'var(--ds-border-success)';
+  readonly discovery: 'var(--ds-border-discovery)';
+  readonly information: 'var(--ds-border-information)';
+  readonly bold: 'var(--ds-border-bold)';
+};
+
+// @public (undocumented)
 type BorderRadius = keyof typeof borderRadiusMap;
@@ -233,2 +288,5 @@
 // @public (undocumented)
+type BorderWidth_2 = keyof typeof borderWidthMap_2;
+
+// @public (undocumented)
 const borderWidthMap: {
@@ -240,2 +298,9 @@ readonly 'size.0': 'var(--ds-width-0)';
 
+// @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
@@ -268,3 +333,3 @@ export const Box: BoxComponent;
   BaseBoxProps<T>,
-  'UNSAFE_style' | 'className' | BoxResponsiveProp
+  'className' | BoxResponsiveProp
 > &
@@ -279,29 +344,13 @@ PublicBoxPropsBase;
 
-// @public
-type CustomStyles = Pick<
-  CSSProperties,
-  | 'flex'
-  | 'flexBasis'
-  | 'float'
-  | 'height'
-  | 'insetBlockStart'
-  | 'insetInlineEnd'
-  | 'insetInlineStart'
-  | 'margin'
-  | 'marginBlock'
-  | 'marginBlockEnd'
-  | 'marginBlockStart'
-  | 'marginInline'
-  | 'marginInlineEnd'
-  | 'marginInlineStart'
-  | 'maxHeight'
-  | 'maxWidth'
-  | 'minHeight'
-  | 'minWidth'
-  | 'paddingBottom'
-  | 'paddingLeft'
-  | 'paddingRight'
-  | 'paddingTop'
-  | 'width'
->;
+// @public (undocumented)
+const dimensionMap: {
+  readonly '100%': '100%';
+  readonly 'size.100': '16px';
+  readonly 'size.200': '24px';
+  readonly 'size.300': '32px';
+  readonly 'size.400': '40px';
+  readonly 'size.500': '48px';
+  readonly 'size.600': '96px';
+  readonly 'size.1000': '192px';
+};
 
@@ -356,2 +405,5 @@ // @public (undocumented)
 // @public (undocumented)
+type Height_2 = keyof typeof dimensionMap;
+
+// @public (undocumented)
 const heightMap: {
@@ -423,2 +475,14 @@ readonly '100%': SerializedStyles;
 // @public (undocumented)
+type MaxHeight = keyof typeof dimensionMap;
+
+// @public (undocumented)
+type MaxWidth = keyof typeof dimensionMap;
+
+// @public (undocumented)
+type MinHeight = keyof typeof dimensionMap;
+
+// @public (undocumented)
+type MinWidth = keyof typeof dimensionMap;
+
+// @public (undocumented)
 type Overflow = keyof typeof overflowMap;
@@ -454,2 +518,5 @@
 // @public (undocumented)
+type Padding_2 = keyof typeof paddingMap_2;
+
+// @public (undocumented)
 type PaddingBlock = keyof typeof paddingMap;
@@ -491,2 +558,20 @@
 // @public (undocumented)
+const paddingMap_2: {
+  readonly 'space.0': 'var(--ds-space-0)';
+  readonly 'space.025': 'var(--ds-space-025)';
+  readonly 'space.050': 'var(--ds-space-050)';
+  readonly 'space.075': 'var(--ds-space-075)';
+  readonly 'space.100': 'var(--ds-space-100)';
+  readonly 'space.150': 'var(--ds-space-150)';
+  readonly 'space.200': 'var(--ds-space-200)';
+  readonly 'space.250': 'var(--ds-space-250)';
+  readonly 'space.300': 'var(--ds-space-300)';
+  readonly 'space.400': 'var(--ds-space-400)';
+  readonly 'space.500': 'var(--ds-space-500)';
+  readonly 'space.600': 'var(--ds-space-600)';
+  readonly 'space.800': 'var(--ds-space-800)';
+  readonly 'space.1000': 'var(--ds-space-1000)';
+};
+
+// @public (undocumented)
 type Position = keyof typeof positionMap;
@@ -513,3 +598,3 @@
   paddingInlineEnd?: PaddingInlineEnd;
-  customStyles?: CustomStyles;
+  xcss?: SafeCSS;
 };
@@ -542,2 +627,10 @@
 // @public (undocumented)
+type SafeCSS = XCSS | XCSS[];
+
+// @public (undocumented)
+type SafeCSSObject = CSSPseudos &
+  TokenisedProps &
+  Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+
+// @public (undocumented)
 type Shadow = keyof typeof shadowMap;
@@ -638,2 +731,5 @@
 // @public (undocumented)
+type TextColor_2 = keyof typeof textColorMap_2;
+
+// @public (undocumented)
 const textColorMap: {
@@ -674,4 +770,66 @@ readonly 'color.text': SerializedStyles;
 // @public (undocumented)
+const textColorMap_2: {
+  readonly 'color.text': 'var(--ds-text)';
+  readonly 'accent.red': 'var(--ds-text-accent-red)';
+  readonly 'accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
+  readonly 'accent.orange': 'var(--ds-text-accent-orange)';
+  readonly 'accent.orange.bolder': 'var(--ds-text-accent-orange-bolder)';
+  readonly 'accent.yellow': 'var(--ds-text-accent-yellow)';
+  readonly 'accent.yellow.bolder': 'var(--ds-text-accent-yellow-bolder)';
+  readonly 'accent.green': 'var(--ds-text-accent-green)';
+  readonly 'accent.green.bolder': 'var(--ds-text-accent-green-bolder)';
+  readonly 'accent.teal': 'var(--ds-text-accent-teal)';
+  readonly 'accent.teal.bolder': 'var(--ds-text-accent-teal-bolder)';
+  readonly 'accent.blue': 'var(--ds-text-accent-blue)';
+  readonly 'accent.blue.bolder': 'var(--ds-text-accent-blue-bolder)';
+  readonly 'accent.purple': 'var(--ds-text-accent-purple)';
+  readonly 'accent.purple.bolder': 'var(--ds-text-accent-purple-bolder)';
+  readonly 'accent.magenta': 'var(--ds-text-accent-magenta)';
+  readonly 'accent.magenta.bolder': 'var(--ds-text-accent-magenta-bolder)';
+  readonly 'accent.gray': 'var(--ds-text-accent-gray)';
+  readonly 'accent.gray.bolder': 'var(--ds-text-accent-gray-bolder)';
+  readonly disabled: 'var(--ds-text-disabled)';
+  readonly inverse: 'var(--ds-text-inverse)';
+  readonly selected: 'var(--ds-text-selected)';
+  readonly brand: 'var(--ds-text-brand)';
+  readonly danger: 'var(--ds-text-danger)';
+  readonly warning: 'var(--ds-text-warning)';
+  readonly 'warning.inverse': 'var(--ds-text-warning-inverse)';
+  readonly success: 'var(--ds-text-success)';
+  readonly discovery: 'var(--ds-text-discovery)';
+  readonly information: 'var(--ds-text-information)';
+  readonly subtlest: 'var(--ds-text-subtlest)';
+  readonly subtle: 'var(--ds-text-subtle)';
+};
+
+// @public (undocumented)
+type TokenisedProps = {
+  backgroundColor?: BackgroundColor_2;
+  borderColor?: BorderColor_2;
+  borderWidth?: BorderWidth_2;
+  color?: TextColor_2;
+  height?: Height_2;
+  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;
+};
+
+// @public (undocumented)
+const uniqueSymbol: unique symbol;
+
+// @public (undocumented)
 type Width = keyof typeof widthMap;
 
+// @public (undocumented)
+type Width_2 = keyof typeof dimensionMap;
+
 // @public
@@ -689,2 +847,11 @@ const widthMap: {
 
+// @public (undocumented)
+type XCSS = ReturnType<typeof xcss>;
+
+// @public (undocumented)
+export const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
+  readonly symbol: typeof uniqueSymbol;
+  readonly styles: SerializedStyles;
+};
+
 // (No @packageDocumentation comment for this package)
@@ -691,0 +858,0 @@ ```

tmp/api-report-tmp.d.ts

@@ -10,2 +10,4 @@ ## API Report File for "@atlaskit/primitives"
 import type { CSSProperties } from 'react';
+import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
+import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
@@ -48,2 +50,5 @@ import { FC } from 'react';
 // @public (undocumented)
+type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
+
+// @public (undocumented)
 const backgroundColorMap: {
@@ -115,5 +120,35 @@ readonly 'accent.red.subtlest': SerializedStyles;
 // @public (undocumented)
-type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+const backgroundColorMap_2: {
+    readonly disabled: "var(--ds-background-disabled)";
+    readonly input: "var(--ds-background-input)";
+    readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
+    readonly neutral: "var(--ds-background-neutral)";
+    readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
+    readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
+    readonly selected: "var(--ds-background-selected)";
+    readonly 'selected.bold': "var(--ds-background-selected-bold)";
+    readonly 'brand.bold': "var(--ds-background-brand-bold)";
+    readonly danger: "var(--ds-background-danger)";
+    readonly 'danger.bold': "var(--ds-background-danger-bold)";
+    readonly warning: "var(--ds-background-warning)";
+    readonly 'warning.bold': "var(--ds-background-warning-bold)";
+    readonly success: "var(--ds-background-success)";
+    readonly 'success.bold': "var(--ds-background-success-bold)";
+    readonly discovery: "var(--ds-background-discovery)";
+    readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
+    readonly information: "var(--ds-background-information)";
+    readonly 'information.bold': "var(--ds-background-information-bold)";
+    readonly 'color.blanket': "var(--ds-blanket)";
+    readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
+    readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
+    readonly 'elevation.surface': "var(--ds-surface)";
+    readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
+    readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
+    readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+};
 
 // @public (undocumented)
+type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+
+// @public (undocumented)
 type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -153,6 +188,6 @@ as?: 'div' | 'li' | 'span';
 // @public (undocumented)
-interface BasePrimitiveProps {
+type BasePrimitiveProps = {
     testId?: string;
-    UNSAFE_style?: CSSProperties;
-}
+    style?: CSSProperties;
+};
 
@@ -162,2 +197,5 @@ // @public (undocumented)
 
+// @public (undocumented)
+type BorderColor_2 = keyof typeof borderColorMap_2;
+
 // @public
@@ -190,2 +228,19 @@ const borderColorMap: {
 // @public (undocumented)
+const borderColorMap_2: {
+    readonly 'color.border': "var(--ds-border)";
+    readonly disabled: "var(--ds-border-disabled)";
+    readonly focused: "var(--ds-border-focused)";
+    readonly input: "var(--ds-border-input)";
+    readonly inverse: "var(--ds-border-inverse)";
+    readonly selected: "var(--ds-border-selected)";
+    readonly brand: "var(--ds-border-brand)";
+    readonly danger: "var(--ds-border-danger)";
+    readonly warning: "var(--ds-border-warning)";
+    readonly success: "var(--ds-border-success)";
+    readonly discovery: "var(--ds-border-discovery)";
+    readonly information: "var(--ds-border-information)";
+    readonly bold: "var(--ds-border-bold)";
+};
+
+// @public (undocumented)
 type BorderRadius = keyof typeof borderRadiusMap;
@@ -215,2 +270,5 @@
 // @public (undocumented)
+type BorderWidth_2 = keyof typeof borderWidthMap_2;
+
+// @public (undocumented)
 const borderWidthMap: {
@@ -222,2 +280,9 @@ readonly 'size.0': "var(--ds-width-0)";
 
+// @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
@@ -233,3 +298,3 @@ export const Box: BoxComponent;
 // @public (undocumented)
-export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'UNSAFE_style' | 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
 
@@ -242,4 +307,13 @@ // @public (undocumented)
 
-// @public
-type CustomStyles = Pick<CSSProperties, 'flex' | 'flexBasis' | 'float' | 'height' | 'insetBlockStart' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'width'>;
+// @public (undocumented)
+const dimensionMap: {
+    readonly '100%': "100%";
+    readonly 'size.100': "16px";
+    readonly 'size.200': "24px";
+    readonly 'size.300': "32px";
+    readonly 'size.400': "40px";
+    readonly 'size.500': "48px";
+    readonly 'size.600': "96px";
+    readonly 'size.1000': "192px";
+};
 
@@ -294,2 +368,5 @@ // @public (undocumented)
 // @public (undocumented)
+type Height_2 = keyof typeof dimensionMap;
+
+// @public (undocumented)
 const heightMap: {
@@ -343,2 +420,14 @@ readonly '100%': SerializedStyles;
 // @public (undocumented)
+type MaxHeight = keyof typeof dimensionMap;
+
+// @public (undocumented)
+type MaxWidth = keyof typeof dimensionMap;
+
+// @public (undocumented)
+type MinHeight = keyof typeof dimensionMap;
+
+// @public (undocumented)
+type MinWidth = keyof typeof dimensionMap;
+
+// @public (undocumented)
 type Overflow = keyof typeof overflowMap;
@@ -374,2 +463,5 @@
 // @public (undocumented)
+type Padding_2 = keyof typeof paddingMap_2;
+
+// @public (undocumented)
 type PaddingBlock = keyof typeof paddingMap;
@@ -411,2 +503,20 @@
 // @public (undocumented)
+const paddingMap_2: {
+    readonly 'space.0': "var(--ds-space-0)";
+    readonly 'space.025': "var(--ds-space-025)";
+    readonly 'space.050': "var(--ds-space-050)";
+    readonly 'space.075': "var(--ds-space-075)";
+    readonly 'space.100': "var(--ds-space-100)";
+    readonly 'space.150': "var(--ds-space-150)";
+    readonly 'space.200': "var(--ds-space-200)";
+    readonly 'space.250': "var(--ds-space-250)";
+    readonly 'space.300': "var(--ds-space-300)";
+    readonly 'space.400': "var(--ds-space-400)";
+    readonly 'space.500': "var(--ds-space-500)";
+    readonly 'space.600': "var(--ds-space-600)";
+    readonly 'space.800': "var(--ds-space-800)";
+    readonly 'space.1000': "var(--ds-space-1000)";
+};
+
+// @public (undocumented)
 type Position = keyof typeof positionMap;
@@ -433,3 +543,3 @@
     paddingInlineEnd?: PaddingInlineEnd;
-    customStyles?: CustomStyles;
+    xcss?: SafeCSS;
 };
@@ -462,2 +572,8 @@
 // @public (undocumented)
+type SafeCSS = XCSS | XCSS[];
+
+// @public (undocumented)
+type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+
+// @public (undocumented)
 type Shadow = keyof typeof shadowMap;
@@ -543,2 +659,5 @@
 // @public (undocumented)
+type TextColor_2 = keyof typeof textColorMap_2;
+
+// @public (undocumented)
 const textColorMap: {
@@ -579,4 +698,66 @@ readonly 'color.text': SerializedStyles;
 // @public (undocumented)
+const textColorMap_2: {
+    readonly 'color.text': "var(--ds-text)";
+    readonly 'accent.red': "var(--ds-text-accent-red)";
+    readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
+    readonly 'accent.orange': "var(--ds-text-accent-orange)";
+    readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
+    readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
+    readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
+    readonly 'accent.green': "var(--ds-text-accent-green)";
+    readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
+    readonly 'accent.teal': "var(--ds-text-accent-teal)";
+    readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
+    readonly 'accent.blue': "var(--ds-text-accent-blue)";
+    readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
+    readonly 'accent.purple': "var(--ds-text-accent-purple)";
+    readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
+    readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
+    readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
+    readonly 'accent.gray': "var(--ds-text-accent-gray)";
+    readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
+    readonly disabled: "var(--ds-text-disabled)";
+    readonly inverse: "var(--ds-text-inverse)";
+    readonly selected: "var(--ds-text-selected)";
+    readonly brand: "var(--ds-text-brand)";
+    readonly danger: "var(--ds-text-danger)";
+    readonly warning: "var(--ds-text-warning)";
+    readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
+    readonly success: "var(--ds-text-success)";
+    readonly discovery: "var(--ds-text-discovery)";
+    readonly information: "var(--ds-text-information)";
+    readonly subtlest: "var(--ds-text-subtlest)";
+    readonly subtle: "var(--ds-text-subtle)";
+};
+
+// @public (undocumented)
+type TokenisedProps = {
+    backgroundColor?: BackgroundColor_2;
+    borderColor?: BorderColor_2;
+    borderWidth?: BorderWidth_2;
+    color?: TextColor_2;
+    height?: Height_2;
+    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;
+};
+
+// @public (undocumented)
+const uniqueSymbol: unique symbol;
+
+// @public (undocumented)
 type Width = keyof typeof widthMap;
 
+// @public (undocumented)
+type Width_2 = keyof typeof dimensionMap;
+
 // @public
@@ -594,4 +775,13 @@ const widthMap: {
 
+// @public (undocumented)
+type XCSS = ReturnType<typeof xcss>;
+
+// @public (undocumented)
+export const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: SerializedStyles;
+};
+
 // (No @packageDocumentation comment for this package)
 
 ```

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

Total package byte prevSize

323759

increased by18.12%

Number of package files

90

increased by9.76%

Lines of code

7837

increased by15.3%

Worsened metrics

Dependency count

6

increased by20%

Number of low supply chain risk alerts

4

increased by300%

Dependency changes

• + Added@emotion/serialize@^1.1.0

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/serialize@1.3.2(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/utils@1.4.1(transitive)

• + Addedcsstype@3.1.3(transitive)