@atlaskit/primitives 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 0.9.2
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 0.9.1
 
 ### Patch Changes

package/README.md

@@ -4,6 +4,10 @@ Primitives are token-backed low-level building blocks.
 
 ## Usage
 
-`import Primitives from '@atlaskit/primitives';`
+Detailed docs and example usage can be found at:
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/primitives).
+- [Overview](https://staging.atlassian.design/components/primitives/overview)
+- [Box](https://staging.atlassian.design/components/primitives/box)
+- [Inline](https://staging.atlassian.design/components/primitives/inline)
+- [Stack](https://staging.atlassian.design/components/primitives/stack)
+- [xCSS](https://staging.atlassian.design/components/primitives/xcss)

package/box/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/components/box.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/components/box.d.ts"
+        "../dist/types-ts4.5/components/box.d.ts"
       ]
     }
   }

package/constellation/box/code.mdx

@@ -1,7 +1,11 @@
 ---
 title: Box
-description: A box is...
+description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
 order: 1
 ---
 
-*Coming soon*
+import BoxProps from '!!extract-react-types-loader!../../extract-react-types/box-props'
+
+## Props
+
+<PropsTable heading="" props={BoxProps} />

package/constellation/box/usage.mdx

@@ -0,0 +1,30 @@
+---
+title: Box
+description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
+order: 2
+---
+
+Use box to compose layouts with the valid spacing and background colors. A `Box` is a generic container with convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System.
+
+A `Box` is primarily a containment element, with visual props that affect the whitespace available to child elements. 
+
+
+## Use `Box`
+Display behavior is set by using the available props or using `xcss`. Makers can make design decisions for `Box` by setting:
+
+- `padding`
+- `paddingInline`
+- `paddingInlineStart`
+- `paddingInlineEnd`
+- `paddingBlock`
+- `paddingBlockStart`
+- `paddingBlockEnd`
+- `backgroundColor`
+
+To identify usages of `Box` in a given design, look for where a UI element (could be as small as the parent of a button or as a big as the wrapper of an entire section) will receive some visual styles applied to a container.
+
+`Box`, being generic in nature, can be "over-used", so it’s important to consider situations where more specific and expressive primitives could be used, for example: `Inline` and `Stack` to manage horizontal and vertical layouts, respectively.
+
+Related
+- [Learn more about the Inline primitive](/components/primitives/inline/usage)
+- [Learn more about the Stack primitive](/components/primitives/stack/usage)

package/constellation/inline/usage.mdx

@@ -0,0 +1,36 @@
+---
+title: Inline
+description: An Inline is a primitive component that is responsible for the horizontal layout of its child elements.
+order: 2
+---
+
+Primitive components are designed to act as building blocks for composing a user experience. An Inline primitive should be used when you want to layout UI elements horizontally, and make use of the built-in design guidance from the Atlassian Design System. 
+
+Inline primitives work as you might expect, aligning content horizontally across a page or layout, as a container that decides the horizontal layout of its children. Inline components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. Inline should be used purely for visual alignment, and should have no opinions about the functionality of its children.  
+
+In its simplest form, `Inline` operates like a flexbox row, however adds the built in design token support and guidance.
+
+```jsx
+<Inline space="space.100" alignInline="center" alignBlock="start">
+  ...
+</Inline>
+```
+It also has a flex-direction: row; but that’s the default, so not explicitly applied.
+
+## Use `Inline`
+The purpose of an Inline is primarily as a container element controlling how child components are displayed and positioned horizontally. Inline should be used any time you wish to layout elements or components horizontally. 
+
+The various Inline props can then be used to customize the spacing and styling on any child elements. These include:
+
+- `alignBlock`
+- `alignInline`
+- `shouldWrap`
+- `spread`
+- `grow`
+- `space`
+- `rowSpace`
+- `separator`
+
+## Related
+- [Learn more about the Box primitive](/components/primitives/box/usage)
+- [Learn more about the Stack primitive](/components/primitives/stack/usage)

package/constellation/overview/index.mdx

@@ -0,0 +1,66 @@
+---
+title: Primitives
+description: Primitives are composable components that solve common layout problems.
+
+order: 1
+---
+
+import SectionMessage from '@atlaskit/section-message';
+import Image from '@atlaskit/image';
+
+import boxUsageExample from './images/box-usage-example.png';
+import inlineUsageExample from './images/inline-usage-example.png';
+import stackUsageExample from './images/stack-usage-example.png';
+
+<SectionMessage title="This is a preview of our new primitive components." appearance="warning">
+Expect frequent changes as we iterate over the coming months. For early access and release updates for Atlassian employees, see details.
+</SectionMessage>
+
+Primitive components are a new type of component for layouts and placement of elements. They act as building blocks to compose different parts of the user experience, from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured). 
+
+Primitives are designed to work hand in hand with design tokens, to provide opinionated solutions for common low-level design decisions that engineers often have to make. They are designed to reduce cognitive overhead for engineers by providing guardrails around what is recommended within our design system. 
+
+A primitive component is a pre-built solution in that they will only accept values that are valid in the Atlassian Design System, and help to implement common layout patterns. This reduces the need to look up documentation and write custom CSS. 
+
+## Available Primitives
+
+Each primitive is designed to have a single responsibility, and it should be immediately clear where each primitive should be used. However, they are also flexible enough that they should be able to be used to compose complex designs not otherwise covered in the Design Systems. 
+
+Currently, three primitive components are available for use in Closed Beta they are Box, Inline and Stack. These were chosen because a large amount of layout problems can be reduced to laying out content:
+- in a container (see [box](/components/primitives/box))
+- horizontally (see [inline](/components/primitives/inline))
+- vertically (see [stack](/components/primitives/stack))
+
+## Installation
+
+To install primitive components, add @atlaskit/primitives as a dependency on your project:
+```bash
+$ yarn add @atlaskit/primitives
+```
+
+## Using Primitives
+
+Use primitives for general layout styles for components. Primitives are not currently available in Figma, so the first step in implementing primitive components is identifying where they might fit in a given design. This involves breaking down a design into its core layout components to as granular level as is useful.
+
+<SectionMessage appearance="warning">
+Primitives could be skipped where absolute DOM control is required or very specific styling values are needed, however, this approach is more likely to produce visual elements that fail to adhere to the guidelines of the Atlassian Design System.
+</SectionMessage>
+
+You might like to think first about breaking down a page into Box containers, identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose in a layout and grouping them together under a Box. 
+
+<Image src={boxUsageExample} />
+
+The behavior within and around these boxes can then be broken down into their horizontal Inline and vertical Stack components. 
+
+<SectionMessage>
+The ESLint rule use-primitives offers suggestions for possible primitives in a layout.
+</SectionMessage>
+
+<Image src={inlineUsageExample} />
+<Image src={stackUsageExample} />
+
+## Related
+
+- [Learn more about the Box primitive](/components/primitives/box/usage)
+- [Learn more about the Inline primitive](/components/primitives/inline/usage)
+- [Learn more about the Stack primitive](/components/primitives/stack/usage)

package/constellation/stack/usage.mdx

@@ -0,0 +1,31 @@
+---
+title: Stack
+description: A Stack is a primitive component that is responsible for the vertical layout of its child elements.
+order: 2
+---
+
+Primitive components are designed to act as building blocks for composing a user experience. A `Stack` primitive should be used when you want to layout UI elements vertically, and make use of the built-in design guidance from the Atlassian Design System. 
+
+`Stack` primitives work by aligning content vertically on a page or layout, as a container that decides the vertical layout of its children. `Stack` components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. `Stack` should be used purely for visual alignment, and should have no opinions about the functionality of its children.  
+
+In its simplest form, `Stack` operates like a flexbox column, however adds the built in design token support and guidance.
+
+```jsx
+<Stack space="space.100" alignInline="center" alignBlock="start">
+  ...
+</Stack>
+```
+
+## Use `Stack`
+The purpose of a `Stack` is primarily as a container element controlling how content is displayed and aligned vertically. `Stack` should be used any time you wish to layout elements or components vertically. 
+
+The various `Stack` props can then be used to customize the spacing and styling on any child elements. These include:
+- `alignBlock`
+- `alignInline`
+- `spread`
+- `grow`
+- `space`
+
+## Related
+- [Learn more about the Box primitive](/primitives/box/usage)
+- [Learn more about the Stack primitive](/primitives/box/usage)

package/dist/cjs/version.json

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

package/dist/cjs/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/xcss/xcss.js

@@ -34,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,
@@ -50,23 +50,23 @@ var tokensMap = {
   minHeight: _styleMaps.dimensionMap,
   minInlineSize: _styleMaps.dimensionMap,
   minWidth: _styleMaps.dimensionMap,
-  outlineOffset: _styleMaps.paddingMap,
+  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,

package/dist/es2019/version.json

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

package/dist/es2019/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/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,23 +38,23 @@ const tokensMap = {
   minHeight: dimensionMap,
   minInlineSize: dimensionMap,
   minWidth: dimensionMap,
-  outlineOffset: paddingMap,
+  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,

package/dist/esm/version.json

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