@atlaskit/primitives 0.9.0 → 0.9.2

package/dist/cjs/{internal → xcss}/style-maps.partial.js

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.paddingMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.insetMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
+exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
+ * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  */
 var dimensionMap = {
   '100%': '100%',
@@ -32,29 +32,11 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
+ * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "space", "inset"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-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 spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",
   'space.025': "var(--ds-space-025, 2px)",
@@ -72,23 +54,6 @@ var spaceMap = {
   'space.1000': "var(--ds-space-1000, 80px)"
 };
 exports.spaceMap = spaceMap;
-var insetMap = {
-  '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.insetMap = insetMap;
 /**
  * @codegenEnd
  */
@@ -281,13 +246,13 @@ exports.textColorMap = textColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -402,7 +367,12 @@ var borderRadiusMap = {
  * @codegenEnd
  */
 exports.borderRadiusMap = borderRadiusMap;
-var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
+// Generate maps for Box props. backgroundColor, padding, etc
+var spacingProperties = [
+// Used by Box
+'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',
+// Used by Inline and Stack
+'gap', 'rowGap', 'columnGap'];
 var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
   return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
     emotionSpacingMap[token] = (0, _react.css)((0, _defineProperty2.default)({}, cssProperty, tokenMap[token]));
@@ -410,7 +380,7 @@ var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenM
   }, {});
 };
 var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
-  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
 }, {});
 exports.paddingStylesMap = paddingStylesMap;

package/dist/cjs/{internal → xcss}/xcss.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.parseXcss = void 0;
 exports.xcss = xcss;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
@@ -33,13 +34,13 @@ var tokensMap = {
   gap: _styleMaps.spaceMap,
   height: _styleMaps.dimensionMap,
   inlineSize: _styleMaps.dimensionMap,
-  inset: _styleMaps.insetMap,
-  insetBlock: _styleMaps.insetMap,
-  insetBlockEnd: _styleMaps.insetMap,
-  insetBlockStart: _styleMaps.insetMap,
-  insetInline: _styleMaps.insetMap,
-  insetInlineEnd: _styleMaps.insetMap,
-  insetInlineStart: _styleMaps.insetMap,
+  inset: _styleMaps.spaceMap,
+  insetBlock: _styleMaps.spaceMap,
+  insetBlockEnd: _styleMaps.spaceMap,
+  insetBlockStart: _styleMaps.spaceMap,
+  insetInline: _styleMaps.spaceMap,
+  insetInlineEnd: _styleMaps.spaceMap,
+  insetInlineStart: _styleMaps.spaceMap,
   left: _styleMaps.dimensionMap,
   maxBlockSize: _styleMaps.dimensionMap,
   maxHeight: _styleMaps.dimensionMap,
@@ -49,20 +50,23 @@ var tokensMap = {
   minHeight: _styleMaps.dimensionMap,
   minInlineSize: _styleMaps.dimensionMap,
   minWidth: _styleMaps.dimensionMap,
+  outlineOffset: _styleMaps.spaceMap,
+  outlineWidth: _styleMaps.borderWidthMap,
+  outlineColor: _styleMaps.borderColorMap,
   overflow: _styleMaps.overflowMap,
   overflowBlock: _styleMaps.overflowBlockMap,
   overflowInline: _styleMaps.overflowInlineMap,
-  padding: _styleMaps.paddingMap,
-  paddingBlock: _styleMaps.paddingMap,
-  paddingBlockEnd: _styleMaps.paddingMap,
-  paddingBlockStart: _styleMaps.paddingMap,
-  paddingBottom: _styleMaps.paddingMap,
-  paddingInline: _styleMaps.paddingMap,
-  paddingInlineEnd: _styleMaps.paddingMap,
-  paddingInlineStart: _styleMaps.paddingMap,
-  paddingLeft: _styleMaps.paddingMap,
-  paddingRight: _styleMaps.paddingMap,
-  paddingTop: _styleMaps.paddingMap,
+  padding: _styleMaps.spaceMap,
+  paddingBlock: _styleMaps.spaceMap,
+  paddingBlockEnd: _styleMaps.spaceMap,
+  paddingBlockStart: _styleMaps.spaceMap,
+  paddingBottom: _styleMaps.spaceMap,
+  paddingInline: _styleMaps.spaceMap,
+  paddingInlineEnd: _styleMaps.spaceMap,
+  paddingInlineStart: _styleMaps.spaceMap,
+  paddingLeft: _styleMaps.spaceMap,
+  paddingRight: _styleMaps.spaceMap,
+  paddingTop: _styleMaps.spaceMap,
   position: _styleMaps.positionMap,
   right: _styleMaps.dimensionMap,
   rowGap: _styleMaps.spaceMap,
@@ -70,7 +74,7 @@ var tokensMap = {
   width: _styleMaps.dimensionMap,
   zIndex: _styleMaps.layerMap
 };
-var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+var uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
 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';
 };
@@ -124,10 +128,7 @@ var transformStyles = function transformStyles(styleObj) {
 };
 var baseXcss = function baseXcss(style) {
   var transformedStyles = transformStyles(style);
-  return {
-    symbol: uniqueSymbol,
-    styles: (0, _react.css)(transformedStyles)
-  };
+  return (0, _defineProperty2.default)({}, uniqueSymbol, (0, _react.css)(transformedStyles));
 };
 
 /**
@@ -141,9 +142,8 @@ var parseXcss = function parseXcss(args) {
       return x && parseXcss(x);
     }).filter(Boolean);
   }
-  var symbol = args.symbol,
-    styles = args.styles;
-  if ((typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) && process.env.NODE_ENV === 'development' && symbol !== uniqueSymbol) {
+  var styles = args[uniqueSymbol];
+  if ((typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
     throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
   }
   return styles;
@@ -156,6 +156,18 @@ var boxWrapper = function boxWrapper(style) {
 var inlineWrapper = function inlineWrapper(style) {
   return xcss(style);
 };
+/**
+ * ### xcss
+ *
+ * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
+ * CSS application.
+ *
+ * ```tsx
+ * const styles = xcss({
+ *   padding: 'space.100'
+ * })
+ * ```
+ */
 function xcss(style) {
   return baseXcss(style);
 }

package/dist/es2019/components/box.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
-import { parseXcss } from '../internal/xcss';
+import { parseXcss } from '../xcss/xcss';
 import { BaseBox } from './internal/base-box';
 /**
  * __Box__

package/dist/es2019/components/inline.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../internal/style-maps.partial';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
 const alignItemsMap = {
   center: css({
     alignItems: 'center'

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { backgroundColorStylesMap, paddingStylesMap } from '../../internal/style-maps.partial';
+import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-maps.partial';
 
 // Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
 

package/dist/es2019/components/stack.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../internal/style-maps.partial';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
 const justifyContentMap = {
   start: css({
     justifyContent: 'start'

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
-export { xcss } from './internal/xcss';
+export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/es2019/version.json

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

package/dist/es2019/{internal → xcss}/style-maps.partial.js

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
+ * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  */
 export const dimensionMap = {
   '100%': '100%',
@@ -22,28 +22,11 @@ export const dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
+ * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "space", "inset"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-export const 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)"
-};
 export const spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",
   'space.025': "var(--ds-space-025, 2px)",
@@ -60,22 +43,6 @@ export const spaceMap = {
   'space.800': "var(--ds-space-800, 64px)",
   'space.1000': "var(--ds-space-1000, 80px)"
 };
-export const insetMap = {
-  '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)"
-};
 /**
  * @codegenEnd
  */
@@ -262,13 +229,13 @@ export const textColorMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -369,7 +336,12 @@ export const borderRadiusMap = {
  * @codegenEnd
  */
 
-const spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
+// Generate maps for Box props. backgroundColor, padding, etc
+const spacingProperties = [
+// Used by Box
+'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',
+// Used by Inline and Stack
+'gap', 'rowGap', 'columnGap'];
 const getSerializedStylesMap = (cssProperty, tokenMap) => {
   return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
     emotionSpacingMap[token] = css({
@@ -379,7 +351,7 @@ const getSerializedStylesMap = (cssProperty, tokenMap) => {
   }, {});
 };
 export const paddingStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {
-  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
 }, {});
 export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {

package/dist/es2019/{internal → xcss}/xcss.js

@@ -1,7 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, insetMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, paddingMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
@@ -22,13 +22,13 @@ const tokensMap = {
   gap: spaceMap,
   height: dimensionMap,
   inlineSize: dimensionMap,
-  inset: insetMap,
-  insetBlock: insetMap,
-  insetBlockEnd: insetMap,
-  insetBlockStart: insetMap,
-  insetInline: insetMap,
-  insetInlineEnd: insetMap,
-  insetInlineStart: insetMap,
+  inset: spaceMap,
+  insetBlock: spaceMap,
+  insetBlockEnd: spaceMap,
+  insetBlockStart: spaceMap,
+  insetInline: spaceMap,
+  insetInlineEnd: spaceMap,
+  insetInlineStart: spaceMap,
   left: dimensionMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
@@ -38,20 +38,23 @@ const tokensMap = {
   minHeight: dimensionMap,
   minInlineSize: dimensionMap,
   minWidth: dimensionMap,
+  outlineOffset: spaceMap,
+  outlineWidth: borderWidthMap,
+  outlineColor: borderColorMap,
   overflow: overflowMap,
   overflowBlock: overflowBlockMap,
   overflowInline: overflowInlineMap,
-  padding: paddingMap,
-  paddingBlock: paddingMap,
-  paddingBlockEnd: paddingMap,
-  paddingBlockStart: paddingMap,
-  paddingBottom: paddingMap,
-  paddingInline: paddingMap,
-  paddingInlineEnd: paddingMap,
-  paddingInlineStart: paddingMap,
-  paddingLeft: paddingMap,
-  paddingRight: paddingMap,
-  paddingTop: paddingMap,
+  padding: spaceMap,
+  paddingBlock: spaceMap,
+  paddingBlockEnd: spaceMap,
+  paddingBlockStart: spaceMap,
+  paddingBottom: spaceMap,
+  paddingInline: spaceMap,
+  paddingInlineEnd: spaceMap,
+  paddingInlineStart: spaceMap,
+  paddingLeft: spaceMap,
+  paddingRight: spaceMap,
+  paddingTop: spaceMap,
   position: positionMap,
   right: dimensionMap,
   rowGap: spaceMap,
@@ -59,7 +62,7 @@ const tokensMap = {
   width: dimensionMap,
   zIndex: layerMap
 };
-const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+const uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
 const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
 const reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 const rePseudos = /^::?.*$/;
@@ -109,8 +112,7 @@ const transformStyles = styleObj => {
 const baseXcss = style => {
   const transformedStyles = transformStyles(style);
   return {
-    symbol: uniqueSymbol,
-    styles: cssEmotion(transformedStyles)
+    [uniqueSymbol]: cssEmotion(transformedStyles)
   };
 };
 
@@ -124,10 +126,9 @@ export const parseXcss = args => {
     return args.map(x => x && parseXcss(x)).filter(Boolean);
   }
   const {
-    symbol,
-    styles
+    [uniqueSymbol]: styles
   } = args;
-  if (typeof process && process.env.NODE_ENV === 'development' && symbol !== uniqueSymbol) {
+  if (typeof process && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
     throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
   }
   return styles;
@@ -135,6 +136,18 @@ export const parseXcss = args => {
 // unused private functions only so we can extract the return type from a generic function
 const boxWrapper = style => xcss(style);
 const inlineWrapper = style => xcss(style);
+/**
+ * ### xcss
+ *
+ * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
+ * CSS application.
+ *
+ * ```tsx
+ * const styles = xcss({
+ *   padding: 'space.100'
+ * })
+ * ```
+ */
 export function xcss(style) {
   return baseXcss(style);
 }

package/dist/esm/components/box.js

@@ -5,7 +5,7 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
-import { parseXcss } from '../internal/xcss';
+import { parseXcss } from '../xcss/xcss';
 import { BaseBox } from './internal/base-box';
 /**
  * __Box__

package/dist/esm/components/inline.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../internal/style-maps.partial';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
 var alignItemsMap = {
   center: css({
     alignItems: 'center'

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

@@ -5,7 +5,7 @@ var _excluded = ["as", "className", "children", "backgroundColor", "padding", "p
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { backgroundColorStylesMap, paddingStylesMap } from '../../internal/style-maps.partial';
+import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-maps.partial';
 
 // Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
 

package/dist/esm/components/stack.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../internal/style-maps.partial';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
 var justifyContentMap = {
   start: css({
     justifyContent: 'start'

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
-export { xcss } from './internal/xcss';
+export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/esm/version.json

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