@atlaskit/primitives 0.9.1 → 0.9.2

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

@@ -1,11 +1,11 @@
 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>>
  */
 export declare const dimensionMap: {
     readonly '100%': "100%";
@@ -17,102 +17,50 @@ export declare const dimensionMap: {
     readonly 'size.600': "96px";
     readonly 'size.1000': "192px";
 };
-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;
 /**
  * @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)";
-};
-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)";
+    '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 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;
 /**
  * @codegenEnd
  */
@@ -148,7 +96,7 @@ export declare const borderColorMap: {
     readonly information: "var(--ds-border-information)";
     readonly bold: "var(--ds-border-bold)";
 };
-export declare type BorderColor = keyof typeof borderColorMap;
+export type BorderColor = keyof typeof borderColorMap;
 export declare const backgroundColorMap: {
     readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
     readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
@@ -255,7 +203,7 @@ export declare const backgroundColorMap: {
     readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
     readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
 };
-export declare type BackgroundColor = keyof typeof backgroundColorMap;
+export type BackgroundColor = keyof typeof backgroundColorMap;
 export declare const shadowMap: {
     readonly overflow: "var(--ds-shadow-overflow)";
     readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
@@ -263,7 +211,7 @@ export declare const shadowMap: {
     readonly overlay: "var(--ds-shadow-overlay)";
     readonly raised: "var(--ds-shadow-raised)";
 };
-export declare type Shadow = keyof typeof shadowMap;
+export type Shadow = keyof typeof shadowMap;
 export declare const textColorMap: {
     readonly 'color.text': "var(--ds-text)";
     readonly 'accent.red': "var(--ds-text-accent-red)";
@@ -297,19 +245,19 @@ export declare const textColorMap: {
     readonly subtlest: "var(--ds-text-subtlest)";
     readonly subtle: "var(--ds-text-subtle)";
 };
-export declare type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 /**
  * @codegenEnd
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -326,12 +274,12 @@ export declare const alignSelfMap: {
     readonly end: "end";
     readonly baseline: "baseline";
 };
-export declare type AlignSelf = keyof typeof alignSelfMap;
+export type AlignSelf = keyof typeof alignSelfMap;
 export declare const borderStyleMap: {
     readonly none: "none";
     readonly solid: "solid";
 };
-export declare type BorderStyle = keyof typeof borderStyleMap;
+export type BorderStyle = keyof typeof borderStyleMap;
 export declare const displayMap: {
     readonly flex: "flex";
     readonly block: "block";
@@ -339,26 +287,26 @@ export declare const displayMap: {
     readonly inlineBlock: "inline-block";
     readonly inlineFlex: "inline-flex";
 };
-export declare type Display = keyof typeof displayMap;
+export type Display = keyof typeof displayMap;
 export declare const flexDirectionMap: {
     readonly row: "row";
     readonly column: "column";
 };
-export declare type FlexDirection = keyof typeof flexDirectionMap;
+export type FlexDirection = keyof typeof flexDirectionMap;
 export declare const flexGrowMap: {
     readonly '0': 0;
     readonly '1': 1;
 };
-export declare type FlexGrow = keyof typeof flexGrowMap;
+export type FlexGrow = keyof typeof flexGrowMap;
 export declare const flexShrinkMap: {
     readonly '0': 0;
     readonly '1': 1;
 };
-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: {
     readonly card: 100;
     readonly navigation: 200;
@@ -370,29 +318,29 @@ export declare const layerMap: {
     readonly spotlight: 700;
     readonly tooltip: 800;
 };
-export declare type Layer = keyof typeof layerMap;
+export type Layer = keyof typeof layerMap;
 export declare const overflowMap: {
     readonly auto: "auto";
     readonly hidden: "hidden";
 };
-export declare type Overflow = keyof typeof overflowMap;
+export type Overflow = keyof typeof overflowMap;
 export declare const overflowInlineMap: {
     readonly auto: "auto";
     readonly hidden: "hidden";
 };
-export declare type OverflowInline = keyof typeof overflowInlineMap;
+export type OverflowInline = keyof typeof overflowInlineMap;
 export declare const overflowBlockMap: {
     readonly auto: "auto";
     readonly hidden: "hidden";
 };
-export declare type OverflowBlock = keyof typeof overflowBlockMap;
+export type OverflowBlock = keyof typeof overflowBlockMap;
 export declare const positionMap: {
     readonly absolute: "absolute";
     readonly fixed: "fixed";
     readonly relative: "relative";
     readonly static: "static";
 };
-export declare type Position = keyof typeof positionMap;
+export type Position = keyof typeof positionMap;
 /**
  * @codegenEnd
  */
@@ -409,7 +357,7 @@ export declare const borderWidthMap: {
     readonly 'width.050': "var(--ds-width-050)";
     readonly 'width.100': "var(--ds-width-100)";
 };
-export declare type BorderWidth = keyof typeof borderWidthMap;
+export type BorderWidth = keyof typeof borderWidthMap;
 export declare const borderRadiusMap: {
     readonly 'radius.050': "var(--ds-radius-050)";
     readonly 'radius.100': "var(--ds-radius-100)";
@@ -418,11 +366,11 @@ export declare const borderRadiusMap: {
     readonly 'radius.400': "var(--ds-radius-400)";
     readonly 'radius.round': "var(--ds-radius-round)";
 };
-export declare type BorderRadius = keyof typeof borderRadiusMap;
+export type BorderRadius = keyof typeof borderRadiusMap;
 /**
  * @codegenEnd
  */
-export declare type TokenisedProps = {
+export type TokenisedProps = {
     alignSelf?: AlignSelf;
     backgroundColor?: BackgroundColor;
     blockSize?: BlockSize;
@@ -433,22 +381,22 @@ export declare type TokenisedProps = {
     bottom?: Bottom;
     boxShadow?: Shadow;
     color?: TextColor;
-    columnGap?: ColumnGap;
+    columnGap?: Space;
     display?: Display;
     flex?: Flex;
     flexDirection?: FlexDirection;
     flexGrow?: FlexGrow;
     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;
     maxBlockSize?: MaxBlockSize;
     maxHeight?: MaxHeight;
@@ -459,31 +407,31 @@ export declare type TokenisedProps = {
     minInlineSize?: MinInlineSize;
     minWidth?: MinWidth;
     outlineColor?: BorderColor;
-    outlineOffset?: Padding;
+    outlineOffset?: Space;
     outlineWidth?: BorderWidth;
     overflow?: Overflow;
     overflowBlock?: OverflowBlock;
     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;
     width?: Width;
     zIndex?: Layer;
 };
 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;
 export declare const spaceStylesMap: SpacingStyleMap;
 export declare const backgroundColorStylesMap: BackgroundColorStyleMap;

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

@@ -9,22 +9,22 @@ declare const uniqueSymbol: unique symbol;
  * @internal used in primitives
  * @returns a collection of styles that can be applied to the respective primitive
  */
-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) => {
     readonly [uniqueSymbol]: BoxStyles;
 };
 declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
-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';
 /**
  * ### xcss
  *
@@ -41,17 +41,17 @@ export declare function xcss<Primitive extends typeof Box | typeof Inline = type
     readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
 };
 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 {};

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

@@ -0,0 +1,95 @@
+// TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
+import React, { ReactNode } from 'react';
+
+import { As } from '../src/components/internal/base-box';
+import {
+  BasePrimitiveProps,
+  PublicBoxPropsBase,
+} from '../src/components/types';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace Token {
+  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+  export type BackgroundColor = 'BackgroundColor';
+}
+
+type Space =
+  | '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 default function Box(
+  _: {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: As;
+
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     */
+    padding?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     */
+    paddingBlock?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     */
+    paddingInline?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+
+    /**
+     * A token alias for background color. See:<br>
+     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)
+     */
+    backgroundColor?: Token.BackgroundColor;
+
+    /**
+     * Elements to be rendered inside the primitive.
+     */
+    children?: ReactNode;
+
+    /**
+     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+     */
+    xcss?: PublicBoxPropsBase['xcss'];
+
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<As>['ref'];
+  } & BasePrimitiveProps,
+) {}

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

@@ -1,3 +1,88 @@
-import type { InlineProps } from '../src/components/inline';
+import { ElementType, ReactNode } from 'react';
+
+import type {
+  AlignBlock,
+  AlignInline,
+  Grow,
+  Spread,
+} from '../src/components/inline';
+
+type Space =
+  | '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';
+
+interface InlineProps<T extends ElementType = 'div'> {
+  /**
+   * The DOM element to render as the Inline. Defaults to `div`.
+   */
+  as?: 'div' | 'span' | 'ul' | 'ol';
+  /**
+   * Used to align children along the main axis.
+   */
+  alignBlock?: AlignBlock;
+
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignInline?: AlignInline;
+
+  /**
+   * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+   */
+  shouldWrap?: boolean;
+
+  /**
+   * Used to distribute the children along the main axis.
+   */
+  spread?: Spread;
+
+  /**
+   * Used to set whether the container should grow to fill the available space.
+   */
+  grow?: Grow;
+
+  /**
+   * Represents the space between each child.
+   */
+  space?: Space;
+
+  /**
+   * Represents the space between rows when content wraps.
+   * Used to override the `space` value in between rows.
+   */
+  rowSpace?: Space;
+
+  /**
+   * Renders a separator string between each child.
+   */
+  separator?: string;
+
+  /**
+   * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+   */
+  testId?: string;
+
+  /**
+   * Elements to be rendered inside the Inline.
+   */
+  children: ReactNode;
+
+  /**
+   * Forwarded ref element
+   */
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+}
 
 export default function Inline(_: InlineProps) {}