@atlaskit/primitives - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

box/package.json

@@ -9,5 +9,5 @@ {
   "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"
       ]
@@ -14,0 +14,0 @@ }

CHANGELOG.md

 # @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
@@ -4,0 +10,0 @@

dist/cjs/version.json

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

dist/cjs/xcss/style-maps.partial.js

@@ -7,3 +7,3 @@ "use strict";
 });
-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"));
@@ -13,7 +13,7 @@ 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>>
  */
@@ -37,25 +37,7 @@ var 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 = {
@@ -78,19 +60,2 @@ 'space.0': "var(--ds-space-0, 0px)",
 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;
 /**
@@ -288,3 +253,3 @@ * @codegenEnd
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
@@ -295,3 +260,3 @@ * @codegenCommand yarn codegen-styles
  * @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>>
@@ -411,3 +376,8 @@ * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
 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) {
@@ -420,3 +390,3 @@ return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
 var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
-  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
@@ -423,0 +393,0 @@ }, {});

dist/cjs/xcss/xcss.js

@@ -37,9 +37,9 @@ "use strict";
   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,
@@ -54,3 +54,3 @@ maxBlockSize: _styleMaps.dimensionMap,
   minWidth: _styleMaps.dimensionMap,
-  outlineOffset: _styleMaps.paddingMap,
+  outlineOffset: _styleMaps.spaceMap,
   outlineWidth: _styleMaps.borderWidthMap,
@@ -61,13 +61,13 @@ outlineColor: _styleMaps.borderColorMap,
   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,
@@ -74,0 +74,0 @@ right: _styleMaps.dimensionMap,

dist/es2019/version.json

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

dist/es2019/xcss/style-maps.partial.js

 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>>
  */
@@ -25,24 +25,7 @@ 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 = {
@@ -64,18 +47,2 @@ 'space.0': "var(--ds-space-0, 0px)",
 };
-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)"
-};
 /**
@@ -267,3 +234,3 @@ * @codegenEnd
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
@@ -274,3 +241,3 @@ * @codegenCommand yarn codegen-styles
  * @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>>
@@ -376,3 +343,8 @@ * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
 
-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) => {
@@ -387,3 +359,3 @@ return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
 export const paddingStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {
-  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
@@ -390,0 +362,0 @@ }, {});

dist/es2019/xcss/xcss.js

 /* 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 = {
@@ -25,9 +25,9 @@ alignSelf: alignSelfMap,
   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,
@@ -42,3 +42,3 @@ maxBlockSize: dimensionMap,
   minWidth: dimensionMap,
-  outlineOffset: paddingMap,
+  outlineOffset: spaceMap,
   outlineWidth: borderWidthMap,
@@ -49,13 +49,13 @@ outlineColor: borderColorMap,
   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,
@@ -62,0 +62,0 @@ right: dimensionMap,

dist/esm/version.json

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

dist/esm/xcss/style-maps.partial.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * 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>>
  */
@@ -27,24 +27,7 @@ export var 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 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)"
-};
 export var spaceMap = {
@@ -66,18 +49,2 @@ 'space.0': "var(--ds-space-0, 0px)",
 };
-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)"
-};
 /**
@@ -269,3 +236,3 @@ * @codegenEnd
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
@@ -276,3 +243,3 @@ * @codegenCommand yarn codegen-styles
  * @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>>
@@ -378,3 +345,8 @@ * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
 
-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) {
@@ -387,3 +359,3 @@ return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
 export var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
-  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
@@ -390,0 +362,0 @@ }, {});

dist/esm/xcss/xcss.js

@@ -7,3 +7,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 var tokensMap = {
@@ -29,9 +29,9 @@ alignSelf: alignSelfMap,
   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,
@@ -46,3 +46,3 @@ maxBlockSize: dimensionMap,
   minWidth: dimensionMap,
-  outlineOffset: paddingMap,
+  outlineOffset: spaceMap,
   outlineWidth: borderWidthMap,
@@ -53,13 +53,13 @@ outlineColor: borderColorMap,
   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,
@@ -66,0 +66,0 @@ right: dimensionMap,

dist/types/components/box.d.ts

@@ -5,4 +5,4 @@ /** @jsx jsx */
 import type { PublicBoxPropsBase } from './types';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
-declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
@@ -9,0 +9,0 @@ * __Box__

dist/types/components/inline.d.ts

 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
-import { type Gap, type RowGap } from '../xcss/style-maps.partial';
+import { type Space } from '../xcss/style-maps.partial';
 export interface InlineProps<T extends ElementType = 'div'> {
@@ -32,3 +32,3 @@ /**
      */
-    space?: Gap;
+    space?: Space;
     /**
@@ -38,3 +38,3 @@ * Represents the space between rows when content wraps.
      */
-    rowSpace?: RowGap;
+    rowSpace?: Space;
     /**
@@ -57,6 +57,6 @@ * Renders a separator string between each child.
 }
-export declare type AlignInline = 'start' | 'center' | 'end';
-export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
-export declare type Spread = 'space-between';
-export declare type Grow = 'hug' | 'fill';
+export type AlignInline = 'start' | 'center' | 'end';
+export type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
+export type Spread = 'space-between';
+export type Grow = 'hug' | 'fill';
 /**
@@ -63,0 +63,0 @@ * __Inline__

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

 /** @jsx jsx */
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { BackgroundColor, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from '../../xcss/style-maps.partial';
+import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { BackgroundColor, type Space } from '../../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from '../types';
-export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
-declare type BaseBoxPropsFoundation<T extends ElementType> = {
+export type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+export type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.
      */
-    as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+    as?: As;
     /**
@@ -37,3 +38,3 @@ * The HTML className attribute.
      */
-    padding?: Padding;
+    padding?: Space;
     /**
@@ -45,11 +46,11 @@ * Tokens representing CSS shorthand `paddingBlock`.
      */
-    paddingBlock?: PaddingBlock;
+    paddingBlock?: Space;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockStart?: Space;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockEnd?: Space;
     /**
@@ -61,17 +62,17 @@ * Tokens representing CSS shorthand `paddingInline`.
      */
-    paddingInline?: PaddingInline;
+    paddingInline?: Space;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineStart?: Space;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineEnd?: Space;
     /**
      * Forwarded ref element
      */
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 };
-export declare type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
+export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
 /**
@@ -78,0 +79,0 @@ * __Box__

dist/types/components/stack.d.ts

 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
-import { type Gap } from '../xcss/style-maps.partial';
+import { type Space } from '../xcss/style-maps.partial';
 export interface StackProps<T extends ElementType = 'div'> {
@@ -28,3 +28,3 @@ /**
      */
-    space?: Gap;
+    space?: Space;
     /**
@@ -43,6 +43,6 @@ * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
 }
-export declare type AlignInline = 'start' | 'center' | 'end';
-export declare type AlignBlock = 'start' | 'center' | 'end';
-export declare type Spread = 'space-between';
-export declare type Grow = 'hug' | 'fill';
+export type AlignInline = 'start' | 'center' | 'end';
+export type AlignBlock = 'start' | 'center' | 'end';
+export type Spread = 'space-between';
+export type Grow = 'hug' | 'fill';
 /**
@@ -49,0 +49,0 @@ * __Stack__

dist/types/components/types.d.ts

 import type { CSSProperties } from 'react';
 import { type BoxXCSS } from '../xcss/xcss';
-export declare type BasePrimitiveProps = {
+export type BasePrimitiveProps = {
     /**
@@ -13,3 +13,3 @@ * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
 };
-export declare type PublicBoxPropsBase = {
+export type PublicBoxPropsBase = {
     /**
@@ -16,0 +16,0 @@ * Safe subset of styles that can be applied as a classname.

dist/types/constants.d.ts

@@ -12,2 +12,2 @@ export declare const LAYERS: {
 };
-export declare type Layer = keyof typeof LAYERS;
+export type Layer = keyof typeof LAYERS;

dist/types/helpers/responsive/types.d.ts

@@ -6,7 +6,7 @@ import { SerializedStyles } from '@emotion/react';
  */
-export declare type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */
-export declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
 /**
@@ -27,7 +27,7 @@ * A map of breakpoints to CSS, commonly used to build maps given a responsive object
  */
-export declare type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
+export type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
 /**
  * Our internal breakpoint config used to build media queries and define attributes for certain components.
  */
-export declare type BreakpointConfig = {
+export type BreakpointConfig = {
     /**
@@ -34,0 +34,0 @@ * The gap between a `GridItem`.

dist/types/xcss/style-maps.partial.d.ts

 import { SerializedStyles } 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>>
  */
@@ -20,18 +20,19 @@ export declare const dimensionMap: {
 };
-export declare type Width = keyof typeof dimensionMap;
-export declare type Height = keyof typeof dimensionMap;
-export declare type MinWidth = keyof typeof dimensionMap;
-export declare type MaxWidth = keyof typeof dimensionMap;
-export declare type MinHeight = keyof typeof dimensionMap;
-export declare type MaxHeight = keyof typeof dimensionMap;
-export declare type Top = keyof typeof dimensionMap;
-export declare type Left = keyof typeof dimensionMap;
-export declare type Bottom = keyof typeof dimensionMap;
-export declare type Right = keyof typeof dimensionMap;
-export declare type BlockSize = keyof typeof dimensionMap;
-export declare type InlineSize = keyof typeof dimensionMap;
-export declare type MaxBlockSize = keyof typeof dimensionMap;
-export declare type MaxInlineSize = keyof typeof dimensionMap;
-export declare type MinBlockSize = keyof typeof dimensionMap;
-export declare type MinInlineSize = keyof typeof dimensionMap;
+type Dimension = keyof typeof dimensionMap;
+export type Width = Dimension;
+export type Height = Dimension;
+export type MinWidth = Dimension;
+export type MaxWidth = Dimension;
+export type MinHeight = Dimension;
+export type MaxHeight = Dimension;
+export type Top = Dimension;
+export type Left = Dimension;
+export type Bottom = Dimension;
+export type Right = Dimension;
+export type BlockSize = Dimension;
+export type InlineSize = Dimension;
+export type MaxBlockSize = Dimension;
+export type MaxInlineSize = Dimension;
+export type MinBlockSize = Dimension;
+export type MinInlineSize = Dimension;
 /**
@@ -42,77 +43,24 @@ * @codegenEnd
  * 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 declare const paddingMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
-};
-export declare type Padding = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingBottom = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingLeft = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingRight = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type PaddingTop = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
 export declare const spaceMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
+    'space.0': "var(--ds-space-0)";
+    'space.025': "var(--ds-space-025)";
+    'space.050': "var(--ds-space-050)";
+    'space.075': "var(--ds-space-075)";
+    'space.100': "var(--ds-space-100)";
+    'space.150': "var(--ds-space-150)";
+    'space.200': "var(--ds-space-200)";
+    'space.250': "var(--ds-space-250)";
+    'space.300': "var(--ds-space-300)";
+    'space.400': "var(--ds-space-400)";
+    'space.500': "var(--ds-space-500)";
+    'space.600': "var(--ds-space-600)";
+    'space.800': "var(--ds-space-800)";
+    'space.1000': "var(--ds-space-1000)";
 };
-export declare type Gap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type RowGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type ColumnGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare const insetMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
-};
-export declare type Inset = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type InsetBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type InsetBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type InsetBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type InsetInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type InsetInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
-export declare type InsetInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export type Space = keyof typeof spaceMap;
 /**
@@ -153,3 +101,3 @@ * @codegenEnd
 };
-export declare type BorderColor = keyof typeof borderColorMap;
+export type BorderColor = keyof typeof borderColorMap;
 export declare const backgroundColorMap: {
@@ -261,3 +209,3 @@ readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
 };
-export declare type BackgroundColor = keyof typeof backgroundColorMap;
+export type BackgroundColor = keyof typeof backgroundColorMap;
 export declare const shadowMap: {
@@ -270,3 +218,3 @@ readonly overflow: "var(--ds-shadow-overflow)";
 };
-export declare type Shadow = keyof typeof shadowMap;
+export type Shadow = keyof typeof shadowMap;
 export declare const textColorMap: {
@@ -305,3 +253,3 @@ readonly 'color.text': "var(--ds-text)";
 };
-export declare type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 /**
@@ -312,3 +260,3 @@ * @codegenEnd
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
@@ -319,3 +267,3 @@ * @codegenCommand yarn codegen-styles
  * @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>>
@@ -337,3 +285,3 @@ * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
 };
-export declare type AlignSelf = keyof typeof alignSelfMap;
+export type AlignSelf = keyof typeof alignSelfMap;
 export declare const borderStyleMap: {
@@ -343,3 +291,3 @@ readonly none: "none";
 };
-export declare type BorderStyle = keyof typeof borderStyleMap;
+export type BorderStyle = keyof typeof borderStyleMap;
 export declare const displayMap: {
@@ -352,3 +300,3 @@ readonly flex: "flex";
 };
-export declare type Display = keyof typeof displayMap;
+export type Display = keyof typeof displayMap;
 export declare const flexDirectionMap: {
@@ -358,3 +306,3 @@ readonly row: "row";
 };
-export declare type FlexDirection = keyof typeof flexDirectionMap;
+export type FlexDirection = keyof typeof flexDirectionMap;
 export declare const flexGrowMap: {
@@ -364,3 +312,3 @@ readonly '0': 0;
 };
-export declare type FlexGrow = keyof typeof flexGrowMap;
+export type FlexGrow = keyof typeof flexGrowMap;
 export declare const flexShrinkMap: {
@@ -370,7 +318,7 @@ readonly '0': 0;
 };
-export declare type FlexShrink = keyof typeof flexShrinkMap;
+export type FlexShrink = keyof typeof flexShrinkMap;
 export declare const flexMap: {
     readonly '1': 1;
 };
-export declare type Flex = keyof typeof flexMap;
+export type Flex = keyof typeof flexMap;
 export declare const layerMap: {
@@ -387,3 +335,3 @@ readonly card: 100;
 };
-export declare type Layer = keyof typeof layerMap;
+export type Layer = keyof typeof layerMap;
 export declare const overflowMap: {
@@ -393,3 +341,3 @@ readonly auto: "auto";
 };
-export declare type Overflow = keyof typeof overflowMap;
+export type Overflow = keyof typeof overflowMap;
 export declare const overflowInlineMap: {
@@ -399,3 +347,3 @@ readonly auto: "auto";
 };
-export declare type OverflowInline = keyof typeof overflowInlineMap;
+export type OverflowInline = keyof typeof overflowInlineMap;
 export declare const overflowBlockMap: {
@@ -405,3 +353,3 @@ readonly auto: "auto";
 };
-export declare type OverflowBlock = keyof typeof overflowBlockMap;
+export type OverflowBlock = keyof typeof overflowBlockMap;
 export declare const positionMap: {
@@ -413,3 +361,3 @@ readonly absolute: "absolute";
 };
-export declare type Position = keyof typeof positionMap;
+export type Position = keyof typeof positionMap;
 /**
@@ -431,3 +379,3 @@ * @codegenEnd
 };
-export declare type BorderWidth = keyof typeof borderWidthMap;
+export type BorderWidth = keyof typeof borderWidthMap;
 export declare const borderRadiusMap: {
@@ -441,7 +389,7 @@ readonly 'radius.050': "var(--ds-radius-050)";
 };
-export declare type BorderRadius = keyof typeof borderRadiusMap;
+export type BorderRadius = keyof typeof borderRadiusMap;
 /**
  * @codegenEnd
  */
-export declare type TokenisedProps = {
+export type TokenisedProps = {
     alignSelf?: AlignSelf;
@@ -457,3 +405,3 @@ backgroundColor?: BackgroundColor;
     color?: TextColor;
-    columnGap?: ColumnGap;
+    columnGap?: Space;
     display?: Display;
@@ -464,12 +412,12 @@ flex?: Flex;
     flexShrink?: FlexShrink;
-    gap?: Gap;
+    gap?: Space;
     height?: Height;
     inlineSize?: InlineSize;
-    inset?: Inset;
-    insetBlock?: InsetBlock;
-    insetBlockEnd?: InsetBlockEnd;
-    insetBlockStart?: InsetBlockStart;
-    insetInline?: InsetInline;
-    insetInlineEnd?: InsetInlineEnd;
-    insetInlineStart?: InsetInlineStart;
+    inset?: Space;
+    insetBlock?: Space;
+    insetBlockEnd?: Space;
+    insetBlockStart?: Space;
+    insetInline?: Space;
+    insetInlineEnd?: Space;
+    insetInlineStart?: Space;
     left?: Left;
@@ -485,3 +433,3 @@ maxBlockSize?: MaxBlockSize;
     outlineColor?: BorderColor;
-    outlineOffset?: Padding;
+    outlineOffset?: Space;
     outlineWidth?: BorderWidth;
@@ -491,12 +439,12 @@ overflow?: Overflow;
     overflowInline?: OverflowInline;
-    padding?: Padding;
-    paddingBlock?: PaddingBlock;
-    paddingBlockEnd?: PaddingBlockEnd;
-    paddingBlockStart?: PaddingBlockStart;
-    paddingInline?: PaddingInline;
-    paddingInlineEnd?: PaddingInlineEnd;
-    paddingInlineStart?: PaddingInlineStart;
+    padding?: Space;
+    paddingBlock?: Space;
+    paddingBlockEnd?: Space;
+    paddingBlockStart?: Space;
+    paddingInline?: Space;
+    paddingInlineEnd?: Space;
+    paddingInlineStart?: Space;
     position?: Position;
     right?: Right;
-    rowGap?: RowGap;
+    rowGap?: Space;
     top?: Top;
@@ -507,7 +455,7 @@ width?: Width;
 declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
-declare type SpacingProperty = (typeof spacingProperties)[number];
-declare type SpacingToken = keyof typeof paddingMap;
-declare type BackgroundColorToken = keyof typeof backgroundColorMap;
-declare type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
-declare type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
+type SpacingProperty = (typeof spacingProperties)[number];
+type SpacingToken = keyof typeof spaceMap;
+type BackgroundColorToken = keyof typeof backgroundColorMap;
+type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
+type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
 export declare const paddingStylesMap: SpacingStyleMap;
@@ -514,0 +462,0 @@ export declare const spaceStylesMap: SpacingStyleMap;

dist/types/xcss/xcss.d.ts

@@ -12,9 +12,9 @@ /// <reference types="react" />
  */
-declare type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
+type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
 export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
-declare type CSSPseudos = {
+type CSSPseudos = {
     [Pseudo in CSS.Pseudos]?: SafeCSSObject;
 };
-declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
-declare type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 declare const boxWrapper: (style: any) => {
@@ -26,5 +26,5 @@ readonly [uniqueSymbol]: BoxStyles;
 };
-declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
-declare type AllowedBoxStyles = keyof SafeCSSObject;
-declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
+type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+type AllowedBoxStyles = keyof SafeCSSObject;
+type AllowedInlineStyles = 'backgroundColor' | 'padding';
 /**
@@ -46,15 +46,15 @@ * ### xcss
 declare const boxTag: unique symbol;
-export declare type BoxStyles = SerializedStyles & {
+export type BoxStyles = SerializedStyles & {
     [boxTag]: true;
 };
-export declare type BoxXCSS = {
+export type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
 };
 declare const inlineTag: unique symbol;
-export declare type InlineStyles = SerializedStyles & {
+export type InlineStyles = SerializedStyles & {
     [inlineTag]: true;
 };
-export declare type InlineXCSS = {
+export type InlineXCSS = {
     readonly [uniqueSymbol]: InlineStyles;
 };
 export {};

inline/package.json

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

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -29,3 +29,3 @@ "author": "Atlassian Pty Ltd",
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
@@ -39,3 +39,3 @@ },
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
@@ -49,3 +49,3 @@ },
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
@@ -59,3 +59,3 @@ },
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
@@ -69,3 +69,3 @@ },
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
@@ -83,2 +83,10 @@ }
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
@@ -95,3 +103,3 @@ "atlaskit:src": "src/index.tsx",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
@@ -126,3 +134,3 @@ "@emotion/react": "^11.7.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.6",
+    "@atlassian/gemini-visual-regression": "^0.0.12",
     "@testing-library/react": "^12.1.5",
@@ -133,3 +141,3 @@ "csstype": "^3.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
@@ -163,2 +171,2 @@ },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

README.md

@@ -7,4 +7,8 @@ # Primitives
 
-`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)

report.api.md

@@ -21,3 +21,2 @@ <!-- API Report Version: 2.3 -->
 import { ComponentPropsWithoutRef } from 'react';
-import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
@@ -67,2 +66,18 @@ import type { CSSProperties } from 'react';
 // @public (undocumented)
+type As =
+  | 'article'
+  | 'aside'
+  | 'dialog'
+  | 'div'
+  | 'footer'
+  | 'header'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'section'
+  | 'span'
+  | 'ul';
+
+// @public (undocumented)
 type BackgroundColor = keyof typeof backgroundColorMap;
@@ -187,28 +202,15 @@
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType> = {
-  as?:
-    | 'article'
-    | 'aside'
-    | 'dialog'
-    | 'div'
-    | 'footer'
-    | 'header'
-    | 'li'
-    | 'main'
-    | 'nav'
-    | 'ol'
-    | 'section'
-    | 'span'
-    | 'ul';
+type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
+  as?: As;
   className?: string;
   children?: ReactNode;
   backgroundColor?: BackgroundColor;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
-  paddingInlineEnd?: PaddingInlineEnd;
-  ref?: ComponentPropsWithRef<T>['ref'];
+  padding?: Space;
+  paddingBlock?: Space;
+  paddingBlockStart?: Space;
+  paddingBlockEnd?: Space;
+  paddingInline?: Space;
+  paddingInlineStart?: Space;
+  paddingInlineEnd?: Space;
+  ref?: React.ComponentPropsWithRef<T>['ref'];
 };
@@ -223,3 +225,3 @@
 // @public (undocumented)
-type BlockSize = keyof typeof dimensionMap;
+type BlockSize = Dimension;
 
@@ -288,3 +290,3 @@ // @public (undocumented)
 // @public (undocumented)
-type Bottom = keyof typeof dimensionMap;
+type Bottom = Dimension;
 
@@ -323,19 +325,2 @@ // @public
 // @public (undocumented)
-type ColumnGap =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
 type CSSPseudos = {
@@ -345,2 +330,5 @@ [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
 
+// @public (undocumented)
+type Dimension = keyof typeof dimensionMap;
+
 // @public
@@ -406,19 +394,2 @@ const dimensionMap: {
 // @public (undocumented)
-type Gap =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -430,3 +401,3 @@
 // @public (undocumented)
-type Height = keyof typeof dimensionMap;
+type Height = Dimension;
 
@@ -462,6 +433,6 @@ // @public
   ref?: React.ComponentPropsWithRef<T>['ref'];
-  rowSpace?: RowGap;
+  rowSpace?: Space;
   separator?: string;
   shouldWrap?: boolean;
-  space?: Gap;
+  space?: Space;
   spread?: Spread;
@@ -472,3 +443,3 @@ testId?: string;
 // @public (undocumented)
-type InlineSize = keyof typeof dimensionMap;
+type InlineSize = Dimension;
 
@@ -484,121 +455,2 @@ // @public (undocumented)
 // @public (undocumented)
-type Inset =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type InsetBlock =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type InsetBlockEnd =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type InsetBlockStart =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type InsetInline =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type InsetInlineEnd =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type InsetInlineStart =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
 type Layer = keyof typeof layerMap;
@@ -620,27 +472,27 @@
 // @public (undocumented)
-type Left = keyof typeof dimensionMap;
+type Left = Dimension;
 
 // @public (undocumented)
-type MaxBlockSize = keyof typeof dimensionMap;
+type MaxBlockSize = Dimension;
 
 // @public (undocumented)
-type MaxHeight = keyof typeof dimensionMap;
+type MaxHeight = Dimension;
 
 // @public (undocumented)
-type MaxInlineSize = keyof typeof dimensionMap;
+type MaxInlineSize = Dimension;
 
 // @public (undocumented)
-type MaxWidth = keyof typeof dimensionMap;
+type MaxWidth = Dimension;
 
 // @public (undocumented)
-type MinBlockSize = keyof typeof dimensionMap;
+type MinBlockSize = Dimension;
 
 // @public (undocumented)
-type MinHeight = keyof typeof dimensionMap;
+type MinHeight = Dimension;
 
 // @public (undocumented)
-type MinInlineSize = keyof typeof dimensionMap;
+type MinInlineSize = Dimension;
 
 // @public (undocumented)
-type MinWidth = keyof typeof dimensionMap;
+type MinWidth = Dimension;
 
@@ -675,121 +527,2 @@ // @public (undocumented)
 // @public (undocumented)
-type Padding =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type PaddingBlock =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type PaddingBlockEnd =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type PaddingBlockStart =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type PaddingInline =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type PaddingInlineEnd =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
-type PaddingInlineStart =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
 type Position = keyof typeof positionMap;
@@ -811,22 +544,5 @@
 // @public (undocumented)
-type Right = keyof typeof dimensionMap;
+type Right = Dimension;
 
 // @public (undocumented)
-type RowGap =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.1000'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800';
-
-// @public (undocumented)
 type SafeCSSObject = CSSPseudos &
@@ -855,2 +571,23 @@ TokenisedProps &
 // @public (undocumented)
+type Space = keyof typeof spaceMap;
+
+// @public
+const spaceMap: {
+  'space.0': 'var(--ds-space-0)';
+  'space.025': 'var(--ds-space-025)';
+  'space.050': 'var(--ds-space-050)';
+  'space.075': 'var(--ds-space-075)';
+  'space.100': 'var(--ds-space-100)';
+  'space.150': 'var(--ds-space-150)';
+  'space.200': 'var(--ds-space-200)';
+  'space.250': 'var(--ds-space-250)';
+  'space.300': 'var(--ds-space-300)';
+  'space.400': 'var(--ds-space-400)';
+  'space.500': 'var(--ds-space-500)';
+  'space.600': 'var(--ds-space-600)';
+  'space.800': 'var(--ds-space-800)';
+  'space.1000': 'var(--ds-space-1000)';
+};
+
+// @public (undocumented)
 type Spread = 'space-between';
@@ -887,3 +624,3 @@
   ref?: React.ComponentPropsWithRef<T>['ref'];
-  space?: Gap;
+  space?: Space;
   spread?: Spread_2;
@@ -943,3 +680,3 @@ testId?: string;
   color?: TextColor;
-  columnGap?: ColumnGap;
+  columnGap?: Space;
   display?: Display;
@@ -950,12 +687,12 @@ flex?: Flex;
   flexShrink?: FlexShrink;
-  gap?: Gap;
+  gap?: Space;
   height?: Height;
   inlineSize?: InlineSize;
-  inset?: Inset;
-  insetBlock?: InsetBlock;
-  insetBlockEnd?: InsetBlockEnd;
-  insetBlockStart?: InsetBlockStart;
-  insetInline?: InsetInline;
-  insetInlineEnd?: InsetInlineEnd;
-  insetInlineStart?: InsetInlineStart;
+  inset?: Space;
+  insetBlock?: Space;
+  insetBlockEnd?: Space;
+  insetBlockStart?: Space;
+  insetInline?: Space;
+  insetInlineEnd?: Space;
+  insetInlineStart?: Space;
   left?: Left;
@@ -971,3 +708,3 @@ maxBlockSize?: MaxBlockSize;
   outlineColor?: BorderColor;
-  outlineOffset?: Padding;
+  outlineOffset?: Space;
   outlineWidth?: BorderWidth;
@@ -977,12 +714,12 @@ overflow?: Overflow;
   overflowInline?: OverflowInline;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingInline?: PaddingInline;
-  paddingInlineEnd?: PaddingInlineEnd;
-  paddingInlineStart?: PaddingInlineStart;
+  padding?: Space;
+  paddingBlock?: Space;
+  paddingBlockEnd?: Space;
+  paddingBlockStart?: Space;
+  paddingInline?: Space;
+  paddingInlineEnd?: Space;
+  paddingInlineStart?: Space;
   position?: Position;
   right?: Right;
-  rowGap?: RowGap;
+  rowGap?: Space;
   top?: Top;
@@ -994,3 +731,3 @@ width?: Width;
 // @public (undocumented)
-type Top = keyof typeof dimensionMap;
+type Top = Dimension;
 
@@ -1001,3 +738,3 @@ // @public (undocumented)
 // @public (undocumented)
-type Width = keyof typeof dimensionMap;
+type Width = Dimension;
 
@@ -1004,0 +741,0 @@ // @public

responsive/package.json

@@ -9,5 +9,5 @@ {
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/helpers/responsive/index.d.ts"
+        "../dist/types-ts4.5/helpers/responsive/index.d.ts"
       ]
@@ -14,0 +14,0 @@ }

stack/package.json

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

tmp/api-report-tmp.d.ts

@@ -10,3 +10,2 @@ ## API Report File for "@atlaskit/primitives"
 import { ComponentPropsWithoutRef } from 'react';
-import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
@@ -56,2 +55,5 @@ import type { CSSProperties } from 'react';
 // @public (undocumented)
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+
+// @public (undocumented)
 type BackgroundColor = keyof typeof backgroundColorMap;
@@ -171,15 +173,15 @@
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType> = {
-    as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
+    as?: As;
     className?: string;
     children?: ReactNode;
     backgroundColor?: BackgroundColor;
-    padding?: Padding;
-    paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
-    paddingBlockEnd?: PaddingBlockEnd;
-    paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
-    paddingInlineEnd?: PaddingInlineEnd;
-    ref?: ComponentPropsWithRef<T>['ref'];
+    padding?: Space;
+    paddingBlock?: Space;
+    paddingBlockStart?: Space;
+    paddingBlockEnd?: Space;
+    paddingInline?: Space;
+    paddingInlineStart?: Space;
+    paddingInlineEnd?: Space;
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 };
@@ -194,3 +196,3 @@
 // @public (undocumented)
-type BlockSize = keyof typeof dimensionMap;
+type BlockSize = Dimension;
 
@@ -259,3 +261,3 @@ // @public (undocumented)
 // @public (undocumented)
-type Bottom = keyof typeof dimensionMap;
+type Bottom = Dimension;
 
@@ -285,5 +287,2 @@ // @public
 // @public (undocumented)
-type ColumnGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
 type CSSPseudos = {
@@ -293,2 +292,5 @@ [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
 
+// @public (undocumented)
+type Dimension = keyof typeof dimensionMap;
+
 // @public
@@ -354,5 +356,2 @@ const dimensionMap: {
 // @public (undocumented)
-type Gap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -364,3 +363,3 @@
 // @public (undocumented)
-type Height = keyof typeof dimensionMap;
+type Height = Dimension;
 
@@ -378,6 +377,6 @@ // @public
     ref?: React.ComponentPropsWithRef<T>['ref'];
-    rowSpace?: RowGap;
+    rowSpace?: Space;
     separator?: string;
     shouldWrap?: boolean;
-    space?: Gap;
+    space?: Space;
     spread?: Spread;
@@ -388,3 +387,3 @@ testId?: string;
 // @public (undocumented)
-type InlineSize = keyof typeof dimensionMap;
+type InlineSize = Dimension;
 
@@ -400,23 +399,2 @@ // @public (undocumented)
 // @public (undocumented)
-type Inset = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type InsetBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type InsetBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type InsetBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type InsetInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type InsetInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type InsetInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
 type Layer = keyof typeof layerMap;
@@ -438,27 +416,27 @@
 // @public (undocumented)
-type Left = keyof typeof dimensionMap;
+type Left = Dimension;
 
 // @public (undocumented)
-type MaxBlockSize = keyof typeof dimensionMap;
+type MaxBlockSize = Dimension;
 
 // @public (undocumented)
-type MaxHeight = keyof typeof dimensionMap;
+type MaxHeight = Dimension;
 
 // @public (undocumented)
-type MaxInlineSize = keyof typeof dimensionMap;
+type MaxInlineSize = Dimension;
 
 // @public (undocumented)
-type MaxWidth = keyof typeof dimensionMap;
+type MaxWidth = Dimension;
 
 // @public (undocumented)
-type MinBlockSize = keyof typeof dimensionMap;
+type MinBlockSize = Dimension;
 
 // @public (undocumented)
-type MinHeight = keyof typeof dimensionMap;
+type MinHeight = Dimension;
 
 // @public (undocumented)
-type MinInlineSize = keyof typeof dimensionMap;
+type MinInlineSize = Dimension;
 
 // @public (undocumented)
-type MinWidth = keyof typeof dimensionMap;
+type MinWidth = Dimension;
 
@@ -493,23 +471,2 @@ // @public (undocumented)
 // @public (undocumented)
-type Padding = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type PaddingBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type PaddingBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type PaddingBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type PaddingInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type PaddingInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
-type PaddingInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
 type Position = keyof typeof positionMap;
@@ -531,8 +488,5 @@
 // @public (undocumented)
-type Right = keyof typeof dimensionMap;
+type Right = Dimension;
 
 // @public (undocumented)
-type RowGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
-
-// @public (undocumented)
 type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
@@ -556,2 +510,23 @@
 // @public (undocumented)
+type Space = keyof typeof spaceMap;
+
+// @public
+const spaceMap: {
+    'space.0': "var(--ds-space-0)";
+    'space.025': "var(--ds-space-025)";
+    'space.050': "var(--ds-space-050)";
+    'space.075': "var(--ds-space-075)";
+    'space.100': "var(--ds-space-100)";
+    'space.150': "var(--ds-space-150)";
+    'space.200': "var(--ds-space-200)";
+    'space.250': "var(--ds-space-250)";
+    'space.300': "var(--ds-space-300)";
+    'space.400': "var(--ds-space-400)";
+    'space.500': "var(--ds-space-500)";
+    'space.600': "var(--ds-space-600)";
+    'space.800': "var(--ds-space-800)";
+    'space.1000': "var(--ds-space-1000)";
+};
+
+// @public (undocumented)
 type Spread = 'space-between';
@@ -573,3 +548,3 @@
     ref?: React.ComponentPropsWithRef<T>['ref'];
-    space?: Gap;
+    space?: Space;
     spread?: Spread_2;
@@ -629,3 +604,3 @@ testId?: string;
     color?: TextColor;
-    columnGap?: ColumnGap;
+    columnGap?: Space;
     display?: Display;
@@ -636,12 +611,12 @@ flex?: Flex;
     flexShrink?: FlexShrink;
-    gap?: Gap;
+    gap?: Space;
     height?: Height;
     inlineSize?: InlineSize;
-    inset?: Inset;
-    insetBlock?: InsetBlock;
-    insetBlockEnd?: InsetBlockEnd;
-    insetBlockStart?: InsetBlockStart;
-    insetInline?: InsetInline;
-    insetInlineEnd?: InsetInlineEnd;
-    insetInlineStart?: InsetInlineStart;
+    inset?: Space;
+    insetBlock?: Space;
+    insetBlockEnd?: Space;
+    insetBlockStart?: Space;
+    insetInline?: Space;
+    insetInlineEnd?: Space;
+    insetInlineStart?: Space;
     left?: Left;
@@ -657,3 +632,3 @@ maxBlockSize?: MaxBlockSize;
     outlineColor?: BorderColor;
-    outlineOffset?: Padding;
+    outlineOffset?: Space;
     outlineWidth?: BorderWidth;
@@ -663,12 +638,12 @@ overflow?: Overflow;
     overflowInline?: OverflowInline;
-    padding?: Padding;
-    paddingBlock?: PaddingBlock;
-    paddingBlockEnd?: PaddingBlockEnd;
-    paddingBlockStart?: PaddingBlockStart;
-    paddingInline?: PaddingInline;
-    paddingInlineEnd?: PaddingInlineEnd;
-    paddingInlineStart?: PaddingInlineStart;
+    padding?: Space;
+    paddingBlock?: Space;
+    paddingBlockEnd?: Space;
+    paddingBlockStart?: Space;
+    paddingInline?: Space;
+    paddingInlineEnd?: Space;
+    paddingInlineStart?: Space;
     position?: Position;
     right?: Right;
-    rowGap?: RowGap;
+    rowGap?: Space;
     top?: Top;
@@ -680,3 +655,3 @@ width?: Width;
 // @public (undocumented)
-type Top = keyof typeof dimensionMap;
+type Top = Dimension;
 
@@ -687,3 +662,3 @@ // @public (undocumented)
 // @public (undocumented)
-type Width = keyof typeof dimensionMap;
+type Width = Dimension;
 
@@ -690,0 +665,0 @@ // @public

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1635616

increased by99.85%

Number of package files

110

increased by6.8%

Number of lines in readme file

14

increased by40%

Worsened metrics

Lines of code

5505

decreased by-0.02%

Dependency changes

• Updated@atlaskit/tokens@^1.4.0