@atlaskit/primitives 0.8.7 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.8.9
+
+### Patch Changes
+
+- [`da1727baf77`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da1727baf77) - Allow non tokenised values to be passed through for tokenisable properties like `padding`. Adds type hinting for zIndex CSS property.
+
+## 0.8.8
+
+### Patch Changes
+
+- [`5a134a5128a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a134a5128a) - Adds type hinting for boxShadow CSS property. Fixes bug with token to CSS custom property transformation for gap, rowGap, columnGap.
+
 ## 0.8.7
 
 ### Patch Changes

package/constellation/box/examples.mdx

@@ -1,7 +1,38 @@
 ---
 title: Box
-description: Box primitive...
+description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
 order: 0
 ---
 
-*Coming soon*
+import BoxBasic from '../../examples/constellation/box/basic';
+import BoxPadding from '../../examples/constellation/box/padding';
+import BoxBackgroundColor from '../../examples/constellation/box/background-color';
+import BoxXcss from '../../examples/constellation/box/xcss';
+
+## Basic
+
+Box is a general-purpose container with controlled use of design tokens. Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+
+<Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
+
+## Padding
+
+Padding props can be used to access spacing design token and control internal layout. The following example demonstrates how each prop works individually:
+
+<Example Component={BoxPadding} packageName="@atlaskit/primitives/box" />
+
+*Note*: The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). It might be less intuitive at first but they are adequate to properly support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
+
+## Background color
+
+`Box` accepts a wide variety of background colors, referenced as semantic design tokens.
+
+<Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
+
+## xCSS
+
+Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value. 
+
+<Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
+
+For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.

package/dist/cjs/internal/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.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = 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.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;
 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::1e44ed8fcd11d2f3864437fa047845a9>>
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
  */
 var dimensionMap = {
   '100%': '100%',
@@ -32,10 +32,10 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "space"]
+ * @codegenParams ["padding", "space", "inset"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 var paddingMap = {
@@ -72,6 +72,23 @@ 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
  */
@@ -264,14 +281,14 @@ exports.textColorMap = textColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
  * @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::89d19ca3937408eb7de5d72f4476a0f9>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @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>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -293,6 +310,14 @@ var borderStyleMap = {
   solid: 'solid'
 };
 exports.borderStyleMap = borderStyleMap;
+var displayMap = {
+  flex: 'flex',
+  block: 'block',
+  inline: 'inline',
+  inlineBlock: 'inline-block',
+  inlineFlex: 'inline-flex'
+};
+exports.displayMap = displayMap;
 var flexDirectionMap = {
   row: 'row',
   column: 'column'
@@ -377,7 +402,7 @@ var borderRadiusMap = {
  * @codegenEnd
  */
 exports.borderRadiusMap = borderRadiusMap;
-var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
+var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', '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]));

package/dist/cjs/internal/xcss.js

@@ -14,25 +14,61 @@ var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var tokensMap = {
+  alignSelf: _styleMaps.alignSelfMap,
   backgroundColor: _styleMaps.backgroundColorMap,
+  blockSize: _styleMaps.dimensionMap,
   borderColor: _styleMaps.borderColorMap,
   borderRadius: _styleMaps.borderRadiusMap,
+  borderStyle: _styleMaps.borderStyleMap,
   borderWidth: _styleMaps.borderWidthMap,
+  bottom: _styleMaps.dimensionMap,
+  boxShadow: _styleMaps.shadowMap,
   color: _styleMaps.textColorMap,
+  columnGap: _styleMaps.spaceMap,
+  display: _styleMaps.displayMap,
+  flex: _styleMaps.flexMap,
+  flexDirection: _styleMaps.flexDirectionMap,
+  flexGrow: _styleMaps.flexGrowMap,
+  flexShrink: _styleMaps.flexShrinkMap,
+  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,
+  left: _styleMaps.dimensionMap,
+  maxBlockSize: _styleMaps.dimensionMap,
   maxHeight: _styleMaps.dimensionMap,
+  maxInlineSize: _styleMaps.dimensionMap,
   maxWidth: _styleMaps.dimensionMap,
+  minBlockSize: _styleMaps.dimensionMap,
   minHeight: _styleMaps.dimensionMap,
+  minInlineSize: _styleMaps.dimensionMap,
   minWidth: _styleMaps.dimensionMap,
+  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,
-  boxShadow: _styleMaps.shadowMap,
-  width: _styleMaps.dimensionMap
+  paddingLeft: _styleMaps.paddingMap,
+  paddingRight: _styleMaps.paddingMap,
+  paddingTop: _styleMaps.paddingMap,
+  position: _styleMaps.positionMap,
+  right: _styleMaps.dimensionMap,
+  rowGap: _styleMaps.spaceMap,
+  top: _styleMaps.dimensionMap,
+  width: _styleMaps.dimensionMap,
+  zIndex: _styleMaps.layerMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
 var isSafeEnvToThrow = function isSafeEnvToThrow() {
@@ -81,11 +117,8 @@ var transformStyles = function transformStyles(styleObj) {
     if (!tokenValue) {
       var message = "Invalid token alias: ".concat(value);
       (0, _warnOnce.default)(message);
-      if (isSafeEnvToThrow()) {
-        throw new Error(message);
-      }
     }
-    styleObj[key] = tokenValue;
+    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
   });
   return styleObj;
 };

package/dist/cjs/version.json

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

package/dist/es2019/internal/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::1e44ed8fcd11d2f3864437fa047845a9>>
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
  */
 export const dimensionMap = {
   '100%': '100%',
@@ -22,10 +22,10 @@ export const dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "space"]
+ * @codegenParams ["padding", "space", "inset"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 export const paddingMap = {
@@ -60,6 +60,22 @@ 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
  */
@@ -246,14 +262,14 @@ export const textColorMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
  * @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::89d19ca3937408eb7de5d72f4476a0f9>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @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>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -273,6 +289,13 @@ export const borderStyleMap = {
   none: 'none',
   solid: 'solid'
 };
+export const displayMap = {
+  flex: 'flex',
+  block: 'block',
+  inline: 'inline',
+  inlineBlock: 'inline-block',
+  inlineFlex: 'inline-flex'
+};
 export const flexDirectionMap = {
   row: 'row',
   column: 'column'
@@ -346,7 +369,7 @@ export const borderRadiusMap = {
  * @codegenEnd
  */
 
-const spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
+const spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
 const getSerializedStylesMap = (cssProperty, tokenMap) => {
   return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
     emotionSpacingMap[token] = css({

package/dist/es2019/internal/xcss.js

@@ -1,27 +1,63 @@
 /* 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 { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
+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';
 const tokensMap = {
+  alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
+  blockSize: dimensionMap,
   borderColor: borderColorMap,
   borderRadius: borderRadiusMap,
+  borderStyle: borderStyleMap,
   borderWidth: borderWidthMap,
+  bottom: dimensionMap,
+  boxShadow: shadowMap,
   color: textColorMap,
+  columnGap: spaceMap,
+  display: displayMap,
+  flex: flexMap,
+  flexDirection: flexDirectionMap,
+  flexGrow: flexGrowMap,
+  flexShrink: flexShrinkMap,
+  gap: spaceMap,
   height: dimensionMap,
+  inlineSize: dimensionMap,
+  inset: insetMap,
+  insetBlock: insetMap,
+  insetBlockEnd: insetMap,
+  insetBlockStart: insetMap,
+  insetInline: insetMap,
+  insetInlineEnd: insetMap,
+  insetInlineStart: insetMap,
+  left: dimensionMap,
+  maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
+  maxInlineSize: dimensionMap,
   maxWidth: dimensionMap,
+  minBlockSize: dimensionMap,
   minHeight: dimensionMap,
+  minInlineSize: dimensionMap,
   minWidth: dimensionMap,
+  overflow: overflowMap,
+  overflowBlock: overflowBlockMap,
+  overflowInline: overflowInlineMap,
   padding: paddingMap,
   paddingBlock: paddingMap,
   paddingBlockEnd: paddingMap,
   paddingBlockStart: paddingMap,
+  paddingBottom: paddingMap,
   paddingInline: paddingMap,
   paddingInlineEnd: paddingMap,
   paddingInlineStart: paddingMap,
-  boxShadow: shadowMap,
-  width: dimensionMap
+  paddingLeft: paddingMap,
+  paddingRight: paddingMap,
+  paddingTop: paddingMap,
+  position: positionMap,
+  right: dimensionMap,
+  rowGap: spaceMap,
+  top: dimensionMap,
+  width: dimensionMap,
+  zIndex: layerMap
 };
 const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
 const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
@@ -65,11 +101,8 @@ const transformStyles = styleObj => {
     if (!tokenValue) {
       const message = `Invalid token alias: ${value}`;
       warnOnce(message);
-      if (isSafeEnvToThrow()) {
-        throw new Error(message);
-      }
     }
-    styleObj[key] = tokenValue;
+    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
   });
   return styleObj;
 };

package/dist/es2019/version.json

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

package/dist/esm/internal/style-maps.partial.js

@@ -2,11 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
  */
 export var dimensionMap = {
   '100%': '100%',
@@ -23,10 +23,10 @@ export var dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "space"]
+ * @codegenParams ["padding", "space", "inset"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 export var paddingMap = {
@@ -61,6 +61,22 @@ export var spaceMap = {
   'space.800': "var(--ds-space-800, 64px)",
   'space.1000': "var(--ds-space-1000, 80px)"
 };
+export 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)"
+};
 /**
  * @codegenEnd
  */
@@ -247,14 +263,14 @@ export var textColorMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
  * @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::89d19ca3937408eb7de5d72f4476a0f9>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @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>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -274,6 +290,13 @@ export var borderStyleMap = {
   none: 'none',
   solid: 'solid'
 };
+export var displayMap = {
+  flex: 'flex',
+  block: 'block',
+  inline: 'inline',
+  inlineBlock: 'inline-block',
+  inlineFlex: 'inline-flex'
+};
 export var flexDirectionMap = {
   row: 'row',
   column: 'column'
@@ -347,7 +370,7 @@ export var borderRadiusMap = {
  * @codegenEnd
  */
 
-var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
+var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
 var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
   return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
     emotionSpacingMap[token] = css(_defineProperty({}, cssProperty, tokenMap[token]));

package/dist/esm/internal/xcss.js

@@ -3,27 +3,63 @@ import _typeof from "@babel/runtime/helpers/typeof";
 /* 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 { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
+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';
 var tokensMap = {
+  alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
+  blockSize: dimensionMap,
   borderColor: borderColorMap,
   borderRadius: borderRadiusMap,
+  borderStyle: borderStyleMap,
   borderWidth: borderWidthMap,
+  bottom: dimensionMap,
+  boxShadow: shadowMap,
   color: textColorMap,
+  columnGap: spaceMap,
+  display: displayMap,
+  flex: flexMap,
+  flexDirection: flexDirectionMap,
+  flexGrow: flexGrowMap,
+  flexShrink: flexShrinkMap,
+  gap: spaceMap,
   height: dimensionMap,
+  inlineSize: dimensionMap,
+  inset: insetMap,
+  insetBlock: insetMap,
+  insetBlockEnd: insetMap,
+  insetBlockStart: insetMap,
+  insetInline: insetMap,
+  insetInlineEnd: insetMap,
+  insetInlineStart: insetMap,
+  left: dimensionMap,
+  maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
+  maxInlineSize: dimensionMap,
   maxWidth: dimensionMap,
+  minBlockSize: dimensionMap,
   minHeight: dimensionMap,
+  minInlineSize: dimensionMap,
   minWidth: dimensionMap,
+  overflow: overflowMap,
+  overflowBlock: overflowBlockMap,
+  overflowInline: overflowInlineMap,
   padding: paddingMap,
   paddingBlock: paddingMap,
   paddingBlockEnd: paddingMap,
   paddingBlockStart: paddingMap,
+  paddingBottom: paddingMap,
   paddingInline: paddingMap,
   paddingInlineEnd: paddingMap,
   paddingInlineStart: paddingMap,
-  boxShadow: shadowMap,
-  width: dimensionMap
+  paddingLeft: paddingMap,
+  paddingRight: paddingMap,
+  paddingTop: paddingMap,
+  position: positionMap,
+  right: dimensionMap,
+  rowGap: spaceMap,
+  top: dimensionMap,
+  width: dimensionMap,
+  zIndex: layerMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
 var isSafeEnvToThrow = function isSafeEnvToThrow() {
@@ -72,11 +108,8 @@ var transformStyles = function transformStyles(styleObj) {
     if (!tokenValue) {
       var message = "Invalid token alias: ".concat(value);
       warnOnce(message);
-      if (isSafeEnvToThrow()) {
-        throw new Error(message);
-      }
     }
-    styleObj[key] = tokenValue;
+    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
   });
   return styleObj;
 };

package/dist/esm/version.json

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