@atlaskit/primitives 0.8.3 → 0.8.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.8.5
+
+### Patch Changes
+
+- [`0969a35c1b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0969a35c1b0) - Allow type hinting for nested styles inside pseudo-selectors.
+
+## 0.8.4
+
+### Patch Changes
+
+- [`7127e85932a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7127e85932a) - Update codegen to explicitly list spacing prop values as string unions for compatibility with extract-react-types.
+
 ## 0.8.3
 
 ### Patch Changes

package/constellation/inline/code.mdx

@@ -1,3 +1,11 @@
+---
+title: Inline
+description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+order: 1
+---
+
+import InlineProps from '!!extract-react-types-loader!../../src/components/internal/extract-react-types/inline-props'
+
 ## Props
 
-*Coming soon*
+<PropsTable heading="" props={InlineProps} />

package/constellation/inline/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: Inline is an abstraction to lay-out a group of elements horizontally.
+description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
 order: 0
 ---
 
@@ -67,7 +67,7 @@ For logically related elements it's possible to specify a `separator` value.
 
 ## Width control
 
-By default an `Inline` will have its width influenced by the context where it appears.  
+By default an `Inline` will have its width influenced by the context where it appears.
 
 To control that the `grow` prop can be used with the values:
 

package/constellation/overview/examples.mdx

@@ -1,9 +1,7 @@
 ---
 title: Overview
-description: Overview of primitives..
+description: Coming soon.
 order: 0
 ---
 
-## Default
-
-This is placeholder text.
+*Coming soon.*

package/constellation/stack/code.mdx

@@ -1,9 +1,11 @@
 ---
 title: Stack
-description: A stack is...
+description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
 order: 1
 ---
 
+import StackProps from '!!extract-react-types-loader!../../src/components/internal/extract-react-types/stack-props'
+
 ## Props
 
-*Coming soon*
+<PropsTable heading="" props={StackProps} />

package/constellation/stack/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Stack
-description: Stack is an abstraction to lay-out a group of elements vertically.
+description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
 order: 0
 ---
 

package/dist/cjs/components/internal/extract-react-types/inline-props.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Inline;
+function Inline(_) {}

package/dist/cjs/components/internal/extract-react-types/stack-props.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Inline;
+function Inline(_) {}

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

@@ -32,7 +32,7 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]

package/dist/cjs/internal/xcss.js

@@ -45,7 +45,7 @@ var transformStyles = function transformStyles(styleObj) {
     return styleObj;
   }
 
-  // If styles are defined as an CSSObject[], recursively call on each element until we reach CSSObject
+  // If styles are defined as a CSSObject[], recursively call on each element until we reach CSSObject
   if (Array.isArray(styleObj)) {
     return styleObj.map(transformStyles);
   }

package/dist/cjs/version.json

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

package/dist/es2019/components/internal/extract-react-types/inline-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

package/dist/es2019/components/internal/extract-react-types/stack-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

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

@@ -22,7 +22,7 @@ export const dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]

package/dist/es2019/internal/xcss.js

@@ -32,7 +32,7 @@ const transformStyles = styleObj => {
     return styleObj;
   }
 
-  // If styles are defined as an CSSObject[], recursively call on each element until we reach CSSObject
+  // If styles are defined as a CSSObject[], recursively call on each element until we reach CSSObject
   if (Array.isArray(styleObj)) {
     return styleObj.map(transformStyles);
   }

package/dist/es2019/version.json

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

package/dist/esm/components/internal/extract-react-types/inline-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

package/dist/esm/components/internal/extract-react-types/stack-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

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

@@ -23,7 +23,7 @@ export var dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]

package/dist/esm/internal/xcss.js

@@ -36,7 +36,7 @@ var transformStyles = function transformStyles(styleObj) {
     return styleObj;
   }
 
-  // If styles are defined as an CSSObject[], recursively call on each element until we reach CSSObject
+  // If styles are defined as a CSSObject[], recursively call on each element until we reach CSSObject
   if (Array.isArray(styleObj)) {
     return styleObj.map(transformStyles);
   }

package/dist/esm/version.json

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

package/dist/types/components/inline.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { type Gap, type RowGap } from '../internal/style-maps.partial';
 export interface InlineProps<T extends ElementType = 'div'> {
     /**
@@ -50,7 +50,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
     /**
      * Forwarded ref element
      */
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';

package/dist/types/components/internal/extract-react-types/inline-props.d.ts

@@ -0,0 +1,2 @@
+import type { InlineProps } from '../../inline';
+export default function Inline(_: InlineProps): void;

package/dist/types/components/internal/extract-react-types/stack-props.d.ts

@@ -0,0 +1,2 @@
+import type { StackProps } from '../../stack';
+export default function Inline(_: StackProps): void;

package/dist/types/components/stack.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { type Gap } from '../internal/style-maps.partial';
 export interface StackProps<T extends ElementType = 'div'> {
     /**
@@ -37,7 +37,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     /**
      * Forwarded ref element
      */
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end';

package/dist/types/internal/style-maps.partial.d.ts

@@ -28,7 +28,7 @@ export declare type MaxHeight = keyof typeof dimensionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]
@@ -50,13 +50,13 @@ export declare const paddingMap: {
     readonly 'space.800': "var(--ds-space-800)";
     readonly 'space.1000': "var(--ds-space-1000)";
 };
-export declare type Padding = keyof typeof paddingMap;
-export declare type PaddingBlock = keyof typeof paddingMap;
-export declare type PaddingBlockStart = keyof typeof paddingMap;
-export declare type PaddingBlockEnd = keyof typeof paddingMap;
-export declare type PaddingInline = keyof typeof paddingMap;
-export declare type PaddingInlineStart = keyof typeof paddingMap;
-export declare type PaddingInlineEnd = keyof typeof paddingMap;
+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 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 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 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 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 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 const spaceMap: {
     readonly 'space.0': "var(--ds-space-0)";
     readonly 'space.025': "var(--ds-space-025)";
@@ -73,8 +73,8 @@ export declare const spaceMap: {
     readonly 'space.800': "var(--ds-space-800)";
     readonly 'space.1000': "var(--ds-space-1000)";
 };
-export declare type Gap = keyof typeof spaceMap;
-export declare type RowGap = keyof typeof spaceMap;
+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';
 /**
  * @codegenEnd
  */

package/dist/types/internal/xcss.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
-import { CSSPropertiesWithMultiValues, CSSPseudos, SerializedStyles } from '@emotion/serialize';
+import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
+import type * as CSS from 'csstype';
 import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -10,6 +11,9 @@ declare const uniqueSymbol: unique symbol;
  */
 declare type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
 export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+declare 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>;
 declare const boxWrapper: (style: any) => {

package/extract-react-types/stack-props.tsx

@@ -0,0 +1,3 @@
+import type { StackProps } from '../src/components/stack';
+
+export default function Stack(_: StackProps) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -29,15 +29,6 @@
             "type": "alpha"
           }
         },
-        {
-          "title": "Box",
-          "folder": "box",
-          "slug": "primitives/box",
-          "id": "@atlaskit/primitives/box",
-          "status": {
-            "type": "alpha"
-          }
-        },
         {
           "title": "Inline",
           "folder": "inline",
@@ -106,6 +97,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.0.1",
     "@testing-library/react": "^12.1.5",
+    "csstype": "^3.1.0",
     "prettier": "^2.7.0",
     "react-dom": "^16.8.0",
     "ts-node": "^10.9.1",

package/report.api.md

@@ -19,9 +19,9 @@
 
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
+import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
-import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -296,6 +296,11 @@ type BoxXCSS = {
   readonly styles: BoxStyles;
 };
 
+// @public (undocumented)
+type CSSPseudos = {
+  [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
+};
+
 // @public
 const dimensionMap: {
   readonly '100%': '100%';
@@ -347,7 +352,21 @@ const flexShrinkMap: {
 };
 
 // @public (undocumented)
-type Gap = keyof typeof spaceMap;
+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';
@@ -386,7 +405,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
   as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow;
-  ref?: ComponentPropsWithRef<T>['ref'];
+  ref?: React.ComponentPropsWithRef<T>['ref'];
   rowSpace?: RowGap;
   separator?: string;
   shouldWrap?: boolean;
@@ -459,43 +478,123 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
-
-// @public
-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)';
-};
+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;
@@ -514,7 +613,21 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type RowGap = keyof typeof spaceMap;
+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 &
@@ -539,24 +652,6 @@ const shadowMap: {
   readonly raised: 'var(--ds-shadow-raised)';
 };
 
-// @public (undocumented)
-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)';
-};
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -588,7 +683,7 @@ export interface StackProps<T extends ElementType = 'div'> {
   as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow_2;
-  ref?: ComponentPropsWithRef<T>['ref'];
+  ref?: React.ComponentPropsWithRef<T>['ref'];
   space?: Gap;
   spread?: Spread_2;
   testId?: string;

package/scripts/spacing-codegen-template.tsx

@@ -48,9 +48,8 @@ export const createSpacingStylesFromTemplate = (
   const { cssProperties, propNameFormatter } =
     spacingProperties[spacingProperty]!;
 
-  return (
-    prettier.format(
-      `
+  return prettier.format(
+    `
   export const ${spacingProperty}Map = {
     ${activeTokens
       .sort((a, b) =>
@@ -65,22 +64,22 @@ export const createSpacingStylesFromTemplate = (
           token.fallback,
         )}`;
       })}
-    } as const;`,
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'typescript',
-        plugins: [parserTypeScript],
-      },
-    ) +
-    (cssProperties
-      .map(
-        cssProperty =>
-          `\nexport type ${capitalize(
-            cssProperty,
-          )} = keyof typeof ${spacingProperty}Map;`,
-      )
-      .join('') +
-      '\n')
+    } as const;` +
+      (cssProperties
+        .map(
+          cssProperty =>
+            // TODO: Update to use `keyof` when ERT supports it: https://github.com/atlassian/extract-react-types/issues/149
+            `\nexport type ${capitalize(cssProperty)} = ${activeTokens
+              .map(token => `'${token.name}'`)
+              .join(' | ')}`,
+        )
+        .join('') +
+        '\n'),
+    {
+      singleQuote: true,
+      trailingComma: 'all',
+      parser: 'typescript',
+      plugins: [parserTypeScript],
+    },
   );
 };

package/tmp/api-report-tmp.d.ts

@@ -8,9 +8,9 @@
 
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
+import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
-import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -271,6 +271,11 @@ type BoxXCSS = {
     readonly styles: BoxStyles;
 };
 
+// @public (undocumented)
+type CSSPseudos = {
+    [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
+};
+
 // @public
 const dimensionMap: {
     readonly '100%': "100%";
@@ -322,7 +327,7 @@ const flexShrinkMap: {
 };
 
 // @public (undocumented)
-type Gap = keyof typeof spaceMap;
+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';
@@ -343,7 +348,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow;
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
     rowSpace?: RowGap;
     separator?: string;
     shouldWrap?: boolean;
@@ -416,43 +421,25 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
+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 = keyof typeof paddingMap;
+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 = keyof typeof paddingMap;
+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 = keyof typeof paddingMap;
+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 = keyof typeof paddingMap;
+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 = keyof typeof paddingMap;
+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 = keyof typeof paddingMap;
-
-// @public
-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)";
-};
+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;
@@ -471,7 +458,7 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type RowGap = keyof typeof spaceMap;
+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>;
@@ -491,24 +478,6 @@ const shadowMap: {
     readonly raised: "var(--ds-shadow-raised)";
 };
 
-// @public (undocumented)
-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)";
-};
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -525,7 +494,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow_2;
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
     space?: Gap;
     spread?: Spread_2;
     testId?: string;

package/constellation/inline/usage.mdx

@@ -1,7 +0,0 @@
----
-order: 2
----
-
-## Usage
-
-*Coming soon*

package/constellation/stack/usage.mdx

@@ -1,7 +0,0 @@
----
-order: 2
----
-
-## Usage
-
-*Coming soon*