@atlaskit/primitives 0.12.6 → 0.14.0

package/dist/types-ts4.5/helpers/responsive/use-media-query.d.ts

@@ -1,5 +1,5 @@
-import { UNSAFE_media as media } from './media-helper';
-type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
+import { UNSAFE_media } from './media-helper';
+type NestedQueryString = `above.${keyof typeof UNSAFE_media.above}` | `below.${keyof typeof UNSAFE_media.below}`;
 /**
  * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
  *

package/dist/types-ts4.5/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::b6657585e3df6f8017d4c35bb9150e3f>>
+ * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
  * @codegenId dimensions
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  */
 export declare const dimensionMap: {
     readonly '100%': "100%";
@@ -17,23 +17,7 @@ export declare const dimensionMap: {
     readonly 'size.600': "6rem";
     readonly 'size.1000': "12rem";
 };
-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;
+export type Dimension = keyof typeof dimensionMap;
 /**
  * @codegenEnd
  */
@@ -66,11 +50,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
+ * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -283,63 +267,13 @@ export type Fill = keyof typeof fillMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
+ * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives 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::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
+ * @codegenParams ["layer"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
- * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
- * @codegenDependency ../../scripts/codegen-file-templates/position.tsx <<SignedSource::8709494ef16c48046c1784a9aaec6d80>>
  */
-export declare const alignSelfMap: {
-    readonly center: "center";
-    readonly start: "start";
-    readonly stretch: "stretch";
-    readonly end: "end";
-    readonly baseline: "baseline";
-};
-export type AlignSelf = keyof typeof alignSelfMap;
-export declare const borderStyleMap: {
-    readonly none: "none";
-    readonly solid: "solid";
-};
-export type BorderStyle = keyof typeof borderStyleMap;
-export declare const displayMap: {
-    readonly flex: "flex";
-    readonly block: "block";
-    readonly inline: "inline";
-    readonly inlineBlock: "inline-block";
-    readonly inlineFlex: "inline-flex";
-    readonly grid: "grid";
-};
-export type Display = keyof typeof displayMap;
-export declare const flexDirectionMap: {
-    readonly row: "row";
-    readonly column: "column";
-};
-export type FlexDirection = keyof typeof flexDirectionMap;
-export declare const flexGrowMap: {
-    readonly '0': 0;
-    readonly '1': 1;
-};
-export type FlexGrow = keyof typeof flexGrowMap;
-export declare const flexShrinkMap: {
-    readonly '0': "0";
-    readonly '1': 1;
-};
-export type FlexShrink = keyof typeof flexShrinkMap;
-export declare const flexMap: {
-    readonly '1': 1;
-};
-export type Flex = keyof typeof flexMap;
 export declare const layerMap: {
     readonly card: 100;
     readonly navigation: 200;
@@ -352,28 +286,6 @@ export declare const layerMap: {
     readonly tooltip: 800;
 };
 export type Layer = keyof typeof layerMap;
-export declare const overflowMap: {
-    readonly auto: "auto";
-    readonly hidden: "hidden";
-};
-export type Overflow = keyof typeof overflowMap;
-export declare const overflowInlineMap: {
-    readonly auto: "auto";
-    readonly hidden: "hidden";
-};
-export type OverflowInline = keyof typeof overflowInlineMap;
-export declare const overflowBlockMap: {
-    readonly auto: "auto";
-    readonly hidden: "hidden";
-};
-export type OverflowBlock = keyof typeof overflowBlockMap;
-export declare const positionMap: {
-    readonly absolute: "absolute";
-    readonly fixed: "fixed";
-    readonly relative: "relative";
-    readonly static: "static";
-};
-export type Position = keyof typeof positionMap;
 /**
  * @codegenEnd
  */
@@ -407,26 +319,18 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
-    alignSelf?: AlignSelf;
     backgroundColor?: BackgroundColor;
-    blockSize?: BlockSize;
+    blockSize?: AutoComplete<Dimension>;
     borderColor?: BorderColor;
     borderRadius?: BorderRadius;
-    borderStyle?: BorderStyle;
     borderWidth?: BorderWidth;
-    bottom?: Bottom;
+    bottom?: AutoComplete<Space>;
     boxShadow?: Shadow;
     color?: TextColor;
     columnGap?: Space;
-    display?: Display;
-    fill?: Fill;
-    flex?: Flex;
-    flexDirection?: FlexDirection;
-    flexGrow?: FlexGrow;
-    flexShrink?: FlexShrink;
     gap?: Space;
-    height?: AutoComplete<Height>;
-    inlineSize?: InlineSize;
+    height?: AutoComplete<Dimension>;
+    inlineSize?: AutoComplete<Dimension>;
     inset?: Space;
     insetBlock?: Space;
     insetBlockEnd?: Space;
@@ -434,21 +338,18 @@ export type TokenisedProps = {
     insetInline?: Space;
     insetInlineEnd?: Space;
     insetInlineStart?: Space;
-    left?: Left;
-    maxBlockSize?: AutoComplete<MaxBlockSize>;
-    maxHeight?: AutoComplete<MaxHeight>;
-    maxInlineSize?: AutoComplete<MaxInlineSize>;
-    maxWidth?: AutoComplete<MaxWidth>;
-    minBlockSize?: AutoComplete<MinBlockSize>;
-    minHeight?: AutoComplete<MinHeight>;
-    minInlineSize?: AutoComplete<MinInlineSize>;
-    minWidth?: AutoComplete<MinWidth>;
+    left?: AutoComplete<Space>;
+    maxBlockSize?: AutoComplete<Dimension>;
+    maxHeight?: AutoComplete<Dimension>;
+    maxInlineSize?: AutoComplete<Dimension>;
+    maxWidth?: AutoComplete<Dimension>;
+    minBlockSize?: AutoComplete<Dimension>;
+    minHeight?: AutoComplete<Dimension>;
+    minInlineSize?: AutoComplete<Dimension>;
+    minWidth?: AutoComplete<Dimension>;
     outlineColor?: BorderColor;
     outlineOffset?: Space;
     outlineWidth?: BorderWidth;
-    overflow?: Overflow;
-    overflowBlock?: OverflowBlock;
-    overflowInline?: OverflowInline;
     padding?: Space;
     paddingBlock?: Space;
     paddingBlockEnd?: Space;
@@ -456,11 +357,10 @@ export type TokenisedProps = {
     paddingInline?: Space;
     paddingInlineEnd?: Space;
     paddingInlineStart?: Space;
-    position?: Position;
-    right?: Right;
+    right?: AutoComplete<Space>;
     rowGap?: Space;
-    top?: Top;
-    width?: AutoComplete<Width>;
+    top?: AutoComplete<Space>;
+    width?: AutoComplete<Dimension>;
     zIndex?: Layer;
 };
 declare const spacingProperties: readonly [

package/dist/types-ts4.5/xcss/xcss.d.ts

@@ -28,7 +28,7 @@ declare const inlineWrapper: (style: any) => {
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
 type AllowedBoxStyles = keyof SafeCSSObject;
-type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
+type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
 /**
  * ### xcss
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.12.6",
+  "version": "0.14.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -64,6 +64,15 @@
           "status": {
             "type": "closed-beta"
           }
+        },
+        {
+          "title": "Responsive",
+          "folder": "responsive",
+          "slug": "primitives/responsive",
+          "id": "@atlaskit/primitives/responsive",
+          "status": {
+            "type": "alpha"
+          }
         }
       ]
     }
@@ -94,7 +103,7 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/tokens": "^1.8.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -123,7 +132,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.28",
+    "@atlassian/gemini-visual-regression": "^0.0.33",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "csstype": "^3.1.0",

package/report.api.md

@@ -43,18 +43,6 @@ type AlignInline = 'center' | 'end' | 'start';
 // @public (undocumented)
 type AlignInline_2 = 'center' | 'end' | 'start';
 
-// @public (undocumented)
-type AlignSelf = keyof typeof alignSelfMap;
-
-// @public
-const alignSelfMap: {
-  readonly center: 'center';
-  readonly start: 'start';
-  readonly stretch: 'stretch';
-  readonly end: 'end';
-  readonly baseline: 'baseline';
-};
-
 // @public (undocumented)
 type AllowedBoxStyles = keyof SafeCSSObject;
 
@@ -222,9 +210,6 @@ type BasePrimitiveProps = {
   style?: CSSProperties;
 };
 
-// @public (undocumented)
-type BlockSize = Dimension;
-
 // @public (undocumented)
 type BorderColor = keyof typeof borderColorMap;
 
@@ -269,15 +254,6 @@ const borderRadiusMap: {
   readonly 'border.radius.circle': 'var(--ds-border-radius-circle)';
 };
 
-// @public (undocumented)
-type BorderStyle = keyof typeof borderStyleMap;
-
-// @public (undocumented)
-const borderStyleMap: {
-  readonly none: 'none';
-  readonly solid: 'solid';
-};
-
 // @public (undocumented)
 type BorderWidth = keyof typeof borderWidthMap;
 
@@ -289,9 +265,6 @@ const borderWidthMap: {
   readonly 'border.width.100': 'var(--ds-border-width-100)';
 };
 
-// @public (undocumented)
-type Bottom = Dimension;
-
 // @public
 export const Box: BoxComponent;
 
@@ -324,7 +297,7 @@ type BoxXCSS = {
 };
 
 // @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
 // @public (undocumented)
 type CSSMediaQueries = {
@@ -351,92 +324,12 @@ const dimensionMap: {
   readonly 'size.1000': '12rem';
 };
 
-// @public (undocumented)
-type Display = keyof typeof displayMap;
-
-// @public (undocumented)
-const displayMap: {
-  readonly flex: 'flex';
-  readonly block: 'block';
-  readonly inline: 'inline';
-  readonly inlineBlock: 'inline-block';
-  readonly inlineFlex: 'inline-flex';
-  readonly grid: 'grid';
-};
-
-// @public (undocumented)
-type Fill = keyof typeof fillMap;
-
-// @public (undocumented)
-const fillMap: {
-  readonly 'color.icon': 'var(--ds-icon)';
-  readonly 'color.icon.accent.lime': 'var(--ds-icon-accent-lime)';
-  readonly 'color.icon.accent.red': 'var(--ds-icon-accent-red)';
-  readonly 'color.icon.accent.orange': 'var(--ds-icon-accent-orange)';
-  readonly 'color.icon.accent.yellow': 'var(--ds-icon-accent-yellow)';
-  readonly 'color.icon.accent.green': 'var(--ds-icon-accent-green)';
-  readonly 'color.icon.accent.teal': 'var(--ds-icon-accent-teal)';
-  readonly 'color.icon.accent.blue': 'var(--ds-icon-accent-blue)';
-  readonly 'color.icon.accent.purple': 'var(--ds-icon-accent-purple)';
-  readonly 'color.icon.accent.magenta': 'var(--ds-icon-accent-magenta)';
-  readonly 'color.icon.accent.gray': 'var(--ds-icon-accent-gray)';
-  readonly 'color.icon.disabled': 'var(--ds-icon-disabled)';
-  readonly 'color.icon.inverse': 'var(--ds-icon-inverse)';
-  readonly 'color.icon.selected': 'var(--ds-icon-selected)';
-  readonly 'color.icon.brand': 'var(--ds-icon-brand)';
-  readonly 'color.icon.danger': 'var(--ds-icon-danger)';
-  readonly 'color.icon.warning': 'var(--ds-icon-warning)';
-  readonly 'color.icon.warning.inverse': 'var(--ds-icon-warning-inverse)';
-  readonly 'color.icon.success': 'var(--ds-icon-success)';
-  readonly 'color.icon.discovery': 'var(--ds-icon-discovery)';
-  readonly 'color.icon.information': 'var(--ds-icon-information)';
-  readonly 'color.icon.subtle': 'var(--ds-icon-subtle)';
-};
-
-// @public (undocumented)
-type Flex = keyof typeof flexMap;
-
-// @public (undocumented)
-type FlexDirection = keyof typeof flexDirectionMap;
-
-// @public (undocumented)
-const flexDirectionMap: {
-  readonly row: 'row';
-  readonly column: 'column';
-};
-
-// @public (undocumented)
-type FlexGrow = keyof typeof flexGrowMap;
-
-// @public (undocumented)
-const flexGrowMap: {
-  readonly '0': 0;
-  readonly '1': 1;
-};
-
-// @public (undocumented)
-const flexMap: {
-  readonly '1': 1;
-};
-
-// @public (undocumented)
-type FlexShrink = keyof typeof flexShrinkMap;
-
-// @public (undocumented)
-const flexShrinkMap: {
-  readonly '0': '0';
-  readonly '1': 1;
-};
-
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
 
 // @public (undocumented)
 type Grow_2 = 'fill' | 'hug';
 
-// @public (undocumented)
-type Height = Dimension;
-
 // @public
 export const Inline: MemoExoticComponent<
   ForwardRefExoticComponent<
@@ -476,9 +369,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
   xcss?: Array<InlineXCSS | false | undefined> | InlineXCSS;
 }
 
-// @public (undocumented)
-type InlineSize = Dimension;
-
 // @public (undocumented)
 type InlineStyles = SerializedStyles & {
   [inlineTag]: true;
@@ -495,7 +385,7 @@ type InlineXCSS = {
 // @public (undocumented)
 type Layer = keyof typeof layerMap;
 
-// @public (undocumented)
+// @public
 const layerMap: {
   readonly card: 100;
   readonly navigation: 200;
@@ -508,84 +398,26 @@ const layerMap: {
   readonly tooltip: 800;
 };
 
-// @public (undocumented)
-type Left = Dimension;
-
-// @public (undocumented)
-type MaxBlockSize = Dimension;
-
-// @public (undocumented)
-type MaxHeight = Dimension;
-
-// @public (undocumented)
-type MaxInlineSize = Dimension;
-
-// @public (undocumented)
-type MaxWidth = Dimension;
-
-// @public (undocumented)
-type MediaQuery =
-  | (typeof UNSAFE_media.above)[Breakpoint]
-  | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
-
-// @public (undocumented)
-type MinBlockSize = Dimension;
-
-// @public (undocumented)
-type MinHeight = Dimension;
-
-// @public (undocumented)
-type MinInlineSize = Dimension;
-
-// @public (undocumented)
-type MinWidth = Dimension;
-
-// @public (undocumented)
-type Overflow = keyof typeof overflowMap;
-
-// @public (undocumented)
-type OverflowBlock = keyof typeof overflowBlockMap;
-
-// @public (undocumented)
-const overflowBlockMap: {
-  readonly auto: 'auto';
-  readonly hidden: 'hidden';
-};
-
-// @public (undocumented)
-type OverflowInline = keyof typeof overflowInlineMap;
-
-// @public (undocumented)
-const overflowInlineMap: {
-  readonly auto: 'auto';
-  readonly hidden: 'hidden';
-};
-
-// @public (undocumented)
-const overflowMap: {
-  readonly auto: 'auto';
-  readonly hidden: 'hidden';
+// @public
+const media: {
+  readonly above: {
+    readonly xxs: '@media all';
+    readonly xs: '@media (min-width: 30rem)';
+    readonly sm: '@media (min-width: 48rem)';
+    readonly md: '@media (min-width: 64rem)';
+    readonly lg: '@media (min-width: 90rem)';
+    readonly xl: '@media (min-width: 110rem)';
+  };
 };
 
-// @public (undocumented)
-type Position = keyof typeof positionMap;
-
-// @public (undocumented)
-const positionMap: {
-  readonly absolute: 'absolute';
-  readonly fixed: 'fixed';
-  readonly relative: 'relative';
-  readonly static: 'static';
-};
+// @public
+type MediaQuery = (typeof media.above)[Breakpoint];
 
 // @public (undocumented)
 type PublicBoxPropsBase = {
   xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
 };
 
-// @public (undocumented)
-type Right = Dimension;
-
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   TokenisedProps &
@@ -642,6 +474,13 @@ type Spacing =
   | 'insetInline'
   | 'insetInlineEnd'
   | 'insetInlineStart'
+  | 'margin'
+  | 'marginBlock'
+  | 'marginBlockEnd'
+  | 'marginBlockStart'
+  | 'marginInline'
+  | 'marginInlineEnd'
+  | 'marginInlineStart'
   | 'outlineOffset'
   | 'padding'
   | 'paddingBlock'
@@ -735,26 +574,18 @@ const textColorMap: {
 
 // @public (undocumented)
 type TokenisedProps = {
-  alignSelf?: AlignSelf;
   backgroundColor?: BackgroundColor;
-  blockSize?: BlockSize;
+  blockSize?: AutoComplete<Dimension>;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
-  borderStyle?: BorderStyle;
   borderWidth?: BorderWidth;
-  bottom?: Bottom;
+  bottom?: AutoComplete<Space>;
   boxShadow?: Shadow;
   color?: TextColor;
   columnGap?: Space;
-  display?: Display;
-  fill?: Fill;
-  flex?: Flex;
-  flexDirection?: FlexDirection;
-  flexGrow?: FlexGrow;
-  flexShrink?: FlexShrink;
   gap?: Space;
-  height?: AutoComplete<Height>;
-  inlineSize?: InlineSize;
+  height?: AutoComplete<Dimension>;
+  inlineSize?: AutoComplete<Dimension>;
   inset?: Space;
   insetBlock?: Space;
   insetBlockEnd?: Space;
@@ -762,21 +593,18 @@ type TokenisedProps = {
   insetInline?: Space;
   insetInlineEnd?: Space;
   insetInlineStart?: Space;
-  left?: Left;
-  maxBlockSize?: AutoComplete<MaxBlockSize>;
-  maxHeight?: AutoComplete<MaxHeight>;
-  maxInlineSize?: AutoComplete<MaxInlineSize>;
-  maxWidth?: AutoComplete<MaxWidth>;
-  minBlockSize?: AutoComplete<MinBlockSize>;
-  minHeight?: AutoComplete<MinHeight>;
-  minInlineSize?: AutoComplete<MinInlineSize>;
-  minWidth?: AutoComplete<MinWidth>;
+  left?: AutoComplete<Space>;
+  maxBlockSize?: AutoComplete<Dimension>;
+  maxHeight?: AutoComplete<Dimension>;
+  maxInlineSize?: AutoComplete<Dimension>;
+  maxWidth?: AutoComplete<Dimension>;
+  minBlockSize?: AutoComplete<Dimension>;
+  minHeight?: AutoComplete<Dimension>;
+  minInlineSize?: AutoComplete<Dimension>;
+  minWidth?: AutoComplete<Dimension>;
   outlineColor?: BorderColor;
   outlineOffset?: Space;
   outlineWidth?: BorderWidth;
-  overflow?: Overflow;
-  overflowBlock?: OverflowBlock;
-  overflowInline?: OverflowInline;
   padding?: Space;
   paddingBlock?: Space;
   paddingBlockEnd?: Space;
@@ -784,44 +612,16 @@ type TokenisedProps = {
   paddingInline?: Space;
   paddingInlineEnd?: Space;
   paddingInlineStart?: Space;
-  position?: Position;
-  right?: Right;
+  right?: AutoComplete<Space>;
   rowGap?: Space;
-  top?: Top;
-  width?: AutoComplete<Width>;
+  top?: AutoComplete<Space>;
+  width?: AutoComplete<Dimension>;
   zIndex?: Layer;
 };
 
-// @public (undocumented)
-type Top = Dimension;
-
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
-// @public
-const UNSAFE_media: {
-  readonly above: {
-    readonly xxs: `@media (min-width: ${number}rem)`;
-    readonly xs: `@media (min-width: ${number}rem)`;
-    readonly sm: `@media (min-width: ${number}rem)`;
-    readonly md: `@media (min-width: ${number}rem)`;
-    readonly lg: `@media (min-width: ${number}rem)`;
-    readonly xl: `@media (min-width: ${number}rem)`;
-    readonly xxl: `@media (min-width: ${number}rem)`;
-  };
-  readonly below: {
-    readonly xs: `@media (max-width: ${number}rem)`;
-    readonly sm: `@media (max-width: ${number}rem)`;
-    readonly md: `@media (max-width: ${number}rem)`;
-    readonly lg: `@media (max-width: ${number}rem)`;
-    readonly xl: `@media (max-width: ${number}rem)`;
-    readonly xxl: `@media (max-width: ${number}rem)`;
-  };
-};
-
-// @public (undocumented)
-type Width = Dimension;
-
 // @public
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
   style: Primitive extends typeof Box