@atlaskit/primitives 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+### Patch Changes
+
+- [`8e03331eb8b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e03331eb8b) - Introduce 'as' prop to Inline and Stack so the resulting element can be controlled.
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/cjs/components/box.js

@@ -1,29 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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; }
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
+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"];
 /**
  * __Box__
  *
- * A box {description}.
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var as = _ref.as,
@@ -56,13 +54,14 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$position = _ref.position,
     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,
     color: color,
     backgroundColor: backgroundColor,
@@ -90,10 +89,14 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     width: width,
     display: display,
     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;

package/dist/cjs/components/inline.partial.js

@@ -184,7 +184,8 @@ var Separator = function Separator(_ref) {
  *
  */
 var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var alignInline = _ref2.alignInline,
+  var as = _ref2.as,
+    alignInline = _ref2.alignInline,
     alignItems = _ref2.alignBlock,
     _ref2$shouldWrap = _ref2.shouldWrap,
     shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
@@ -195,6 +196,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     separator = _ref2.separator,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
+  var Component = as || 'div';
   var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return (0, _react2.jsx)(_react.Fragment, {
@@ -202,7 +204,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(Component, {
     css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref

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

@@ -15,7 +15,7 @@ var _constants = require("../../constants");
 var _responsive = require("../../helpers/responsive");
 var _types = require("./types");
 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; }
 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; }
 var responsiveRules = _types.BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
@@ -87,11 +87,11 @@ var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
     display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
     _ref3$position = _ref3.position,
     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)({
     style: inlineStyles,
     ref: ref

package/dist/cjs/components/stack.partial.js

@@ -120,15 +120,17 @@ var baseStyles = (0, _react2.css)({
  *
  */
 var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var alignItems = _ref.alignInline,
+  var as = _ref.as,
+    alignItems = _ref.alignInline,
     alignBlock = _ref.alignBlock,
     spread = _ref.spread,
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
     testId = _ref.testId;
+  var Component = as || 'div';
   var justifyContent = spread || alignBlock;
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(Component, {
     css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref

package/dist/cjs/index.js

@@ -22,6 +22,13 @@ Object.defineProperty(exports, "Stack", {
     return _stack.default;
   }
 });
+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"));

package/dist/cjs/internal/style-maps.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColorMap = exports.paddingMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorMap = void 0;
+/* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+
+// TODO: All of these maps need to be codegen'd
+var backgroundColorMap = {
+  disabled: "var(--ds-background-disabled, #091e4289)",
+  input: "var(--ds-background-input, #FAFBFC)",
+  'inverse.subtle': "var(--ds-background-inverse-subtle, #00000029)",
+  neutral: "var(--ds-background-neutral, #DFE1E6)",
+  'neutral.subtle': "var(--ds-background-neutral-subtle, transparent)",
+  'neutral.bold': "var(--ds-background-neutral-bold, #42526E)",
+  selected: "var(--ds-background-selected, #DEEBFF)",
+  'selected.bold': "var(--ds-background-selected-bold, #0052CC)",
+  'brand.bold': "var(--ds-background-brand-bold, #0052CC)",
+  danger: "var(--ds-background-danger, #FFEBE6)",
+  'danger.bold': "var(--ds-background-danger-bold, #DE350B)",
+  warning: "var(--ds-background-warning, #FFFAE6)",
+  'warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
+  success: "var(--ds-background-success, #E3FCEF)",
+  'success.bold': "var(--ds-background-success-bold, #00875A)",
+  discovery: "var(--ds-background-discovery, #EAE6FF)",
+  'discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
+  information: "var(--ds-background-information, #DEEBFF)",
+  'information.bold': "var(--ds-background-information-bold, #0052CC)",
+  'color.blanket': "var(--ds-blanket, #091e4289)",
+  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
+  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
+  'elevation.surface': "var(--ds-surface, #FFFFFF)",
+  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
+  'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+};
+exports.backgroundColorMap = backgroundColorMap;
+var borderColorMap = {
+  'color.border': "var(--ds-border, #091e4221)",
+  disabled: "var(--ds-border-disabled, #FAFBFC)",
+  focused: "var(--ds-border-focused, #4C9AFF)",
+  input: "var(--ds-border-input, #FAFBFC)",
+  inverse: "var(--ds-border-inverse, #FFFFFF)",
+  selected: "var(--ds-border-selected, #0052CC)",
+  brand: "var(--ds-border-brand, #0052CC)",
+  danger: "var(--ds-border-danger, #FF5630)",
+  warning: "var(--ds-border-warning, #FFC400)",
+  success: "var(--ds-border-success, #00875A)",
+  discovery: "var(--ds-border-discovery, #998DD9)",
+  information: "var(--ds-border-information, #0065FF)",
+  bold: "var(--ds-border-bold, #344563)"
+};
+exports.borderColorMap = borderColorMap;
+var borderWidthMap = {
+  'size.0': "var(--ds-width-0, 0)",
+  'size.050': "var(--ds-width-050, 1px)",
+  'size.100': "var(--ds-width-100, 2px)"
+};
+exports.borderWidthMap = borderWidthMap;
+var borderRadiusMap = {
+  'radius.400': "var(--ds-radius-400, 16px)",
+  'radius.300': "var(--ds-radius-300, 12px)",
+  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.050': "var(--ds-radius-050, 2px)",
+  'radius.200': "var(--ds-radius-200, 8px)"
+};
+exports.borderRadiusMap = borderRadiusMap;
+var paddingMap = {
+  'space.0': "var(--ds-space-0, 0px)",
+  'space.025': "var(--ds-space-025, 2px)",
+  'space.050': "var(--ds-space-050, 4px)",
+  'space.075': "var(--ds-space-075, 6px)",
+  'space.100': "var(--ds-space-100, 8px)",
+  'space.150': "var(--ds-space-150, 12px)",
+  'space.200': "var(--ds-space-200, 16px)",
+  'space.250': "var(--ds-space-250, 20px)",
+  'space.300': "var(--ds-space-300, 24px)",
+  'space.400': "var(--ds-space-400, 32px)",
+  'space.500': "var(--ds-space-500, 40px)",
+  'space.600': "var(--ds-space-600, 48px)",
+  'space.800': "var(--ds-space-800, 64px)",
+  'space.1000': "var(--ds-space-1000, 80px)"
+};
+exports.paddingMap = paddingMap;
+var textColorMap = {
+  'color.text': "var(--ds-text, #172B4D)",
+  'accent.red': "var(--ds-text-accent-red, #DE350B)",
+  'accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
+  'accent.orange': "var(--ds-text-accent-orange, #F18D13)",
+  'accent.orange.bolder': "var(--ds-text-accent-orange-bolder, #B65C02)",
+  'accent.yellow': "var(--ds-text-accent-yellow, #FF991F)",
+  'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder, #FF8B00)",
+  'accent.green': "var(--ds-text-accent-green, #00875A)",
+  'accent.green.bolder': "var(--ds-text-accent-green-bolder, #006644)",
+  'accent.teal': "var(--ds-text-accent-teal, #00A3BF)",
+  'accent.teal.bolder': "var(--ds-text-accent-teal-bolder, #008DA6)",
+  'accent.blue': "var(--ds-text-accent-blue, #0052CC)",
+  'accent.blue.bolder': "var(--ds-text-accent-blue-bolder, #0747A6)",
+  'accent.purple': "var(--ds-text-accent-purple, #5243AA)",
+  'accent.purple.bolder': "var(--ds-text-accent-purple-bolder, #403294)",
+  'accent.magenta': "var(--ds-text-accent-magenta, #E774BB)",
+  'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder, #DA62AC)",
+  'accent.gray': "var(--ds-text-accent-gray, #505F79)",
+  'accent.gray.bolder': "var(--ds-text-accent-gray-bolder, #172B4D)",
+  disabled: "var(--ds-text-disabled, #A5ADBA)",
+  inverse: "var(--ds-text-inverse, #FFFFFF)",
+  selected: "var(--ds-text-selected, #0052CC)",
+  brand: "var(--ds-text-brand, #0065FF)",
+  danger: "var(--ds-text-danger, #DE350B)",
+  warning: "var(--ds-text-warning, #974F0C)",
+  'warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
+  success: "var(--ds-text-success, #006644)",
+  discovery: "var(--ds-text-discovery, #403294)",
+  information: "var(--ds-text-information, #0052CC)",
+  subtlest: "var(--ds-text-subtlest, #7A869A)",
+  subtle: "var(--ds-text-subtle, #42526E)"
+};
+exports.textColorMap = textColorMap;
+var dimensionMap = {
+  '100%': '100%',
+  'size.100': '16px',
+  'size.200': '24px',
+  'size.300': '32px',
+  'size.400': '40px',
+  'size.500': '48px',
+  'size.600': '96px',
+  'size.1000': '192px'
+};
+exports.dimensionMap = dimensionMap;

package/dist/cjs/internal/xcss.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.xcss = exports.transformStyles = exports.parseXcss = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("@emotion/react");
+var _styleMaps = require("./style-maps");
+var tokensMap = {
+  backgroundColor: _styleMaps.backgroundColorMap,
+  borderColor: _styleMaps.borderColorMap,
+  borderRadius: _styleMaps.borderRadiusMap,
+  borderWidth: _styleMaps.borderWidthMap,
+  color: _styleMaps.textColorMap,
+  height: _styleMaps.dimensionMap,
+  maxHeight: _styleMaps.dimensionMap,
+  maxWidth: _styleMaps.dimensionMap,
+  minHeight: _styleMaps.dimensionMap,
+  minWidth: _styleMaps.dimensionMap,
+  padding: _styleMaps.paddingMap,
+  paddingBlock: _styleMaps.paddingMap,
+  paddingBlockEnd: _styleMaps.paddingMap,
+  paddingBlockStart: _styleMaps.paddingMap,
+  paddingInline: _styleMaps.paddingMap,
+  paddingInlineEnd: _styleMaps.paddingMap,
+  paddingInlineStart: _styleMaps.paddingMap,
+  width: _styleMaps.dimensionMap
+};
+var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+
+/**
+ * Only exposed for testing.
+ * @internal
+ */
+var transformStyles = function transformStyles(styleObj) {
+  if (!styleObj || (0, _typeof2.default)(styleObj) !== 'object') {
+    return styleObj;
+  }
+
+  // If styles are defined as an CSSObject[], recursively call on each element until we reach CSSObject
+  if (Array.isArray(styleObj)) {
+    return styleObj.map(transformStyles);
+  }
+
+  // Modifies styleObj in place. Be careful.
+  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') {
+      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
+      if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
+        throw new Error("Styles not supported for key '".concat(key, "'."));
+      }
+    }
+
+    // If key is a pseudo class or a pseudo element, then value should be an object.
+    // So, call transformStyles on the value
+    if (/^::?.*$/.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
+
+    // TODO: Deal with media queries
+
+    // We have now dealt with all the special cases, so,
+    // check whether what remains is a style property
+    // that can be transformed.
+    if (!(key in tokensMap)) {
+      return;
+    }
+    var tokenValue = tokensMap[key][value];
+    if (!tokenValue) {
+      throw new Error('Invalid Token');
+    }
+    styleObj[key] = tokenValue;
+  });
+  return styleObj;
+};
+exports.transformStyles = transformStyles;
+var xcss = function xcss(style) {
+  var transformedStyles = transformStyles(style);
+  return {
+    symbol: uniqueSymbol,
+    styles: (0, _react.css)(transformedStyles)
+  };
+};
+
+/**
+ * @internal used in primitives
+ * @returns
+ */
+exports.xcss = xcss;
+var parseXcss = function parseXcss(args) {
+  if (Array.isArray(args)) {
+    // @ts-expect-error FIXME
+    return args.map(parseXcss);
+  }
+  var symbol = args.symbol,
+    styles = args.styles;
+  if ((typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) && process.env.NODE_ENV === 'development' && symbol !== uniqueSymbol) {
+    throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
+  }
+  return styles;
+};
+exports.parseXcss = parseXcss;

package/dist/cjs/version.json

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

package/dist/es2019/components/box.js

@@ -1,16 +1,18 @@
 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';
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Box__
  *
- * A box {description}.
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 const Box = /*#__PURE__*/forwardRef(({
   as,
@@ -41,16 +43,17 @@ const Box = /*#__PURE__*/forwardRef(({
   width,
   display = 'block',
   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,
     color: color,
     backgroundColor: backgroundColor,
@@ -78,9 +81,13 @@ const Box = /*#__PURE__*/forwardRef(({
     width: width,
     display: display,
     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;

package/dist/es2019/components/inline.partial.js

@@ -176,6 +176,7 @@ const Separator = ({
  *
  */
 const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
   alignInline,
   alignBlock: alignItems,
   shouldWrap = false,
@@ -187,6 +188,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   testId,
   children: rawChildren
 }, ref) => {
+  const Component = as || 'div';
   const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
     return jsx(Fragment, {
@@ -194,7 +196,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   const justifyContent = spread || alignInline;
-  return jsx("div", {
+  return jsx(Component, {
     css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref

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

@@ -80,12 +80,12 @@ export const BaseBox = /*#__PURE__*/forwardRef(({
   width,
   display = displayMap.block,
   position = 'static',
-  UNSAFE_style,
+  style,
   testId,
   ...htmlAttributes
 }, ref) => {
   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({
     style: inlineStyles,
     ref: ref

package/dist/es2019/components/stack.partial.js

@@ -113,6 +113,7 @@ const baseStyles = css({
  *
  */
 const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
   alignInline: alignItems,
   alignBlock,
   spread,
@@ -121,8 +122,9 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
+  const Component = as || 'div';
   const justifyContent = spread || alignBlock;
-  return jsx("div", {
+  return jsx(Component, {
     css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref

package/dist/es2019/index.js

@@ -1,3 +1,4 @@
 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';