# Lockup (/components/layout/lockup)

`Lockup` places icons, avatars, actions, shortcut hints, and counts beside a body that can grow,
wrap, or truncate. Read [Layout](/docs/layout) to choose a layout component.

Put exactly one `LockupBody` inside `Lockup`, with any number of `LockupRail` siblings before or
after it. Parts appear in DOM order, so the first part sits on the inline-start side in both
left-to-right and right-to-left text.

apps/docs/src/examples/lockup/basic.tsx

```tsx
import { Icon } from '@luke-ui/react/icon';
import { IconButton } from '@luke-ui/react/icon-button';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';

export default () => {
	return (
		<Lockup gap="space.8">
			<LockupRail>
				<Icon name="exclamationTriangle" />
			</LockupRail>
			<LockupBody>
				Example message that wraps onto multiple lines when the available space is limited.
			</LockupBody>
			<LockupRail>
				<IconButton aria-label="More options" icon="chevronDown" size="small" />
			</LockupRail>
		</Lockup>
	);
};
```

## Rails and sizing [#rails-and-sizing]

A rail keeps its intrinsic inline size. The body takes the remaining space and can shrink below its
content, so long text wraps or truncates instead of widening the row. Lockup does not truncate text
itself.

`gap` sets the same space between every pair of adjacent parts. For different spacing inside a rail,
put a [Cluster](/components/layout/cluster) inside it.

An empty rail still takes up a part and a gap. To leave a rail out, render the `LockupRail`
conditionally, not only its children.

## Rail content [#rail-content]

A rail holds supporting items, not running text. Pass a string, a number, or elements. Items in one
rail sit side by side. To keep text and an element flowing together, such as a phrase with a `Kbd`,
wrap them in one element.

apps/docs/src/examples/lockup/rail-content.tsx

```tsx
import { Kbd } from '@luke-ui/react/kbd';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Lockup gap="space.8">
			<LockupBody>Example command</LockupBody>
			<LockupRail>
				<Text color="secondary" typography="caption">
					Press <Kbd>K</Kbd>
				</Text>
			</LockupRail>
		</Lockup>
	);
};
```

## Alignment [#alignment]

`railAlignment` sets how rails line up with the body. `firstLine` is the default. It centres each
rail on the first line of the body, so an icon stays beside that line when the text wraps. A rail
taller than the first line makes the row taller. `center` centres each rail on the whole body.

apps/docs/src/examples/lockup/alignment.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison>
			<ComparisonItem label="First line">
				<Box style={{ maxInlineSize: '18rem' }}>
					<Lockup gap="space.8" railAlignment="firstLine">
						<LockupRail>
							<Icon name="checkCircle" />
						</LockupRail>
						<LockupBody>
							Example message that wraps onto multiple lines when the available space is limited.
						</LockupBody>
					</Lockup>
				</Box>
			</ComparisonItem>
			<ComparisonItem label="Center">
				<Box style={{ maxInlineSize: '18rem' }}>
					<Lockup gap="space.8" railAlignment="center">
						<LockupRail>
							<Icon name="checkCircle" />
						</LockupRail>
						<LockupBody>
							Example message that wraps onto multiple lines when the available space is limited.
						</LockupBody>
					</Lockup>
				</Box>
			</ComparisonItem>
		</Comparison>
	);
};
```

Use `center` for an avatar beside a name and description, for controls, and for a body without a
line of text to align with.

apps/docs/src/examples/lockup/avatar.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Lockup gap="space.12" railAlignment="center">
			<LockupRail>
				<Box
					backgroundColor="neutral.subtle"
					borderColor="decorative"
					borderRadius="full"
					borderStyle="solid"
					borderWidth="thin"
					style={{ blockSize: '3rem', inlineSize: '3rem' }}
				/>
			</LockupRail>
			<LockupBody>
				<Stack gap="space.4">
					<Text fontWeight="emphasis">Example name</Text>
					<Text typography="caption">Example description</Text>
				</Stack>
			</LockupBody>
		</Lockup>
	);
};
```

`firstLine` measures the first line with the typography Lockup inherits. When the body starts with
another type style, such as a `Heading`, the rails sit off-centre. Put the typography component
around Lockup instead, and set `elementType="span"` on a Lockup inside a `Heading`.

apps/docs/src/examples/lockup/heading.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Heading } from '@luke-ui/react/heading';
import { Icon } from '@luke-ui/react/icon';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';

export default () => {
	return (
		<Box style={{ maxInlineSize: '18rem' }}>
			<Heading level={2}>
				<Lockup elementType="span" gap="space.8">
					<LockupRail>
						<Icon name="search" />
					</LockupRail>
					<LockupBody>Example heading that wraps onto a second line</LockupBody>
				</Lockup>
			</Heading>
		</Box>
	);
};
```

## Interactive content [#interactive-content]

Put a link inside `LockupBody` and other controls in their own rails, as siblings of the link. Do
not put a control inside another interactive element.

apps/docs/src/examples/lockup/interactive.tsx

```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Link } from '@luke-ui/react/link';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Lockup gap="space.12">
			<LockupBody>
				<Stack gap="space.4">
					<Link href="#example-destination">Example destination</Link>
					<Text color="secondary" typography="caption">
						Example description
					</Text>
				</Stack>
			</LockupBody>
			<LockupRail>
				<IconButton aria-label="More options" icon="chevronDown" size="small" />
			</LockupRail>
		</Lockup>
	);
};
```

## Choose the rendered element [#choose-the-rendered-element]

Set `elementType="li"` on a Lockup that is a direct child of `ul` or `ol`.

apps/docs/src/examples/lockup/element.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';

const plainListStyle = { listStyle: 'none' } as const;

export default () => {
	return (
		<Box elementType="ul" margin="0" padding="0" style={plainListStyle}>
			<Lockup elementType="li" gap="space.8">
				<LockupRail>
					<Icon name="checkCircle" />
				</LockupRail>
				<LockupBody>First item</LockupBody>
			</Lockup>
			<Lockup elementType="li" gap="space.8">
				<LockupRail>
					<Icon name="checkCircle" />
				</LockupRail>
				<LockupBody>Second item</LockupBody>
			</Lockup>
		</Box>
	);
};
```

Set `elementType="span"` when Lockup sits inside phrasing content. Its parts, and any Lockup nested
inside it, then render `span` elements. The content you pass must also be phrasing content.

apps/docs/src/examples/lockup/element-span.tsx

```tsx
import { Icon } from '@luke-ui/react/icon';
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';

export default () => {
	return (
		<p>
			Example text with{' '}
			<Lockup elementType="span" gap="space.4">
				<LockupRail>
					<Icon name="checkCircle" />
				</LockupRail>
				<LockupBody>inline content</LockupBody>
			</Lockup>{' '}
			in the middle.
		</p>
	);
};
```

## Own the rendered elements [#own-the-rendered-elements]

Use `renderRoot` to render your own element for `Lockup`, `LockupRail`, or `LockupBody`, and spread
the `domProps` onto it. Lockup can't tell what your element is, so:

- Set `elementType` on the parts inside your root, such as `span` inside an `a`.
- Give an inline root, such as a link in running text, `display: inline-flex` with your own
  `className` or `style`. Lockup lays out a root you render as a block-level flex container, unless
  it sits inside a `span` Lockup.
- Return a container for `LockupRail`, such as a `div` or `span`, and render its children. Put an
  image inside the rail, not in its place.

Render a `figure` as the root and a `figcaption` as the body to caption an image. Set `margin="0"`
to remove the figure's browser margin.

apps/docs/src/examples/lockup/render-root.tsx

```tsx
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';
import { vars } from '@luke-ui/react/theme';

export default () => {
	return (
		<Lockup gap="space.12" margin="0" renderRoot={(domProps) => <figure {...domProps} />}>
			<LockupRail>
				<img
					alt="Looking up between tall canyon walls at a strip of blue sky"
					src="https://images.unsplash.com/photo-1479030160180-b1860951d696?auto=format&fit=crop&w=200&q=80"
					style={{
						blockSize: '4rem',
						borderRadius: vars.radius.detail,
						inlineSize: '4rem',
						objectFit: 'cover',
					}}
				/>
			</LockupRail>
			<LockupBody renderRoot={(domProps) => <figcaption {...domProps} />}>
				Example caption
			</LockupBody>
		</Lockup>
	);
};
```

Render a rail as a `time` element so the date it shows carries a machine-readable value.

apps/docs/src/examples/lockup/render-rail.tsx

```tsx
import { Lockup, LockupBody, LockupRail } from '@luke-ui/react/lockup';

export default () => {
	return (
		<Lockup gap="space.8">
			<LockupBody>Example event</LockupBody>
			<LockupRail renderRoot={(domProps) => <time {...domProps} dateTime="2026-10-17" />}>
				17 Oct
			</LockupRail>
		</Lockup>
	);
};
```

Read [Composition](/docs/composition#render-a-different-dom-component) for the general `elementType`
and `renderRoot` rule.

## API [#api]

### LockupProps [#lockupprops]

### LockupProps

Props for `Lockup`.

`LockupProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

| Prop                      | Type                                                                                                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children?`               | `ReactNode \| undefined`                                                                                                                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `className?`              | `string \| undefined`                                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `style?`                  | `CSSProperties \| undefined`                                                                                                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `alignSelf?`              | `ResponsiveValue<"auto" \| "baseline" \| "center" \| "flex-end" \| "flex-start" \| "normal" \| "stretch"> \| undefined`                                                                                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `blockSize?`              | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `flexBasis?`              | `ResponsiveValue<"0" \| "100%" \| "auto" \| "content" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `flexGrow?`               | `ResponsiveValue<"0" \| "1"> \| undefined`                                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `flexShrink?`             | `ResponsiveValue<"0" \| "1"> \| undefined`                                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `inlineSize?`             | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `inset?`                  | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `insetBlock?`             | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `insetBlockEnd?`          | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `insetBlockStart?`        | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `insetInline?`            | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `insetInlineEnd?`         | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `insetInlineStart?`       | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `justifySelf?`            | `ResponsiveValue<"auto" \| "center" \| "end" \| "normal" \| "start" \| "stretch"> \| undefined`                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `margin?`                 | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `marginBlock?`            | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `marginBlockEnd?`         | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `marginBlockStart?`       | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `marginInline?`           | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `marginInlineEnd?`        | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `marginInlineStart?`      | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `maxBlockSize?`           | `ResponsiveValue<"0" \| "100%" \| "fit-content" \| "max-content" \| "min-content" \| "none"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `maxInlineSize?`          | `ResponsiveValue<"0" \| "100%" \| "container.448" \| "container.672" \| "container.896" \| "container.1152" \| "container.1280" \| "fit-content" \| "max-content" \| "min-content" \| "none"> \| undefined` |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `minBlockSize?`           | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `minInlineSize?`          | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `order?`                  | `ResponsiveValue<number> \| undefined`                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `overflow?`               | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `overflowX?`              | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `overflowY?`              | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `overscrollBehavior?`     | `ResponsiveValue<"auto" \| "contain"> \| undefined`                                                                                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `padding?`                | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `paddingBlock?`           | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `paddingBlockEnd?`        | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `paddingBlockStart?`      | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `paddingInline?`          | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `paddingInlineEnd?`       | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `paddingInlineStart?`     | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `placeSelf?`              | `ResponsiveValue<"auto" \| "center" \| "end" \| "normal" \| "start" \| "stretch"> \| undefined`                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `position?`               | `ResponsiveValue<"absolute" \| "fixed" \| "relative" \| "static" \| "sticky"> \| undefined`                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `borderBlockStartWidth?`  | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `borderBlockEndWidth?`    | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `borderInlineStartWidth?` | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `borderInlineEndWidth?`   | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                           |
| `ref?`                    | `Ref<HTMLElement>`                                                                                                                                                                                          | Ref to the rendered element.                                                                                                                                                                                                                                                                                                                                                                              |
| `renderRoot?`             | `(domProps: { [K in "children" \| "className" \| "ref" \| "style"]: BoxLikeResolvedRenderProps[K]; }, state: Record<string, never>) => React.ReactElement`                                                  | Use `renderRoot` instead of `elementType` to own the rendered element. Passes resolved `children`, `className`, `style`, and a callback `ref` as `domProps`. The second argument is an empty state object. Lockup lays the element out as a block-level flex container unless it sits inside a `span` Lockup, so give an inline element `display: inline-flex`. Set `elementType` on the parts inside it. |
| `gap?`                    | `RequiredInitialResponsive<SprinklesProps['gap']>`                                                                                                                                                          | Space between adjacent parts.                                                                                                                                                                                                                                                                                                                                                                             |
| `railAlignment?`          | `LockupRailAlignment`                                                                                                                                                                                       | How rails align with the body. `firstLine` centres each rail on the cap height of the body's first line, measured with the typography Lockup inherits. `center` centres each rail on the whole body. Default: `firstLine`                                                                                                                                                                                 |
| `elementType?`            | `'div' \| 'li' \| 'span'`                                                                                                                                                                                   | Root element. Use `li` as a direct child of `ul` or `ol`. Use `span` inside phrasing content, which also makes `span` the default element for its parts and nested Lockups. Inside a `span` Lockup, the default is `span`. Use `elementType` instead of `renderRoot` for a supported structural element. Default: `div`                                                                                   |

#### Type definitions

These are the types that this table's signatures and the definitions below name. TypeScript's built-in types, such as `Omit` and `ReadonlyArray`, are not listed.

##### `ResponsiveValue`

```ts
type ResponsiveValue<Value> = Value
  | null
  | {
    [Condition in BreakpointName]?: Value | null;
  };
```

Refers to `BreakpointName`.

##### `BreakpointName`

```ts
type BreakpointName = keyof typeof responsiveConditions;
```

Which resolves to:

```ts
"bp640"
  | "bp768"
  | "bp1024"
  | "bp1280"
  | "bp1536"
  | "initial"
```

##### `BoxLikeResolvedRenderProps`

```ts
type BoxLikeResolvedRenderProps = DistributiveOmit<BoxLikePresentationProps, 'ref'> & {
  ref: UseRenderRef;
};
```

Refers to `DistributiveOmit`, `BoxLikePresentationProps`, and `UseRenderRef`.

##### `DistributiveOmit`

```ts
type DistributiveOmit<T, K extends KeysOfUnion<T>> = T extends any ? Omit<T, Extract<K, keyof T>> : never;
```

Refers to `KeysOfUnion`.

##### `KeysOfUnion`

```ts
type KeysOfUnion<T> = T extends T ? keyof T : never;
```

##### `BoxLikePresentationProps`

```ts
interface BoxLikePresentationProps extends Pick<HTMLAttributes<HTMLElement>, 'children'
  | 'className'
  | 'style'> {
  ref?: Ref<HTMLElement>;
}
```

Refers to `HTMLAttributes` and `Ref`.

##### `UseRenderRef`

```ts
type UseRenderRef = NonNullable<Exclude<Ref<HTMLElement>, RefObject<HTMLElement | null>>>;
```

Refers to `Ref` and `RefObject`.

##### `RequiredInitialResponsive`

```ts
type RequiredInitialResponsive<Value> = DirectValue<NonNullable<Value>> | (ResponsiveObject<Value> & {
  initial: NonNullable<ResponsiveObject<Value> extends {
    initial?: infer Initial;
  } ? Initial : never>;
});
```

Refers to `DirectValue` and `ResponsiveObject`.

##### `DirectValue`

```ts
type DirectValue<Value> = Value extends ReadonlyArray<unknown> ? Value :
Value extends object ? never : Value;
```

##### `ResponsiveObject`

```ts
type ResponsiveObject<Value> = Exclude<Extract<NonNullable<Value>, object>, ReadonlyArray<unknown>>;
```

##### `SprinklesProps['gap']`

Resolves to:

```ts
ResponsiveValue<"0"
  | "space.4"
  | "space.8"
  | "space.12"
  | "space.16"
  | "space.24"
  | "space.32"
  | "space.40"
  | "space.48"
  | "space.64"
  | "space.96"> | undefined
```

Refers to `ResponsiveValue`.

##### `LockupRailAlignment`

```ts
type LockupRailAlignment = NonNullable<LockupRecipeVariants>['railAlignment'];
```

Which resolves to:

```ts
"center"
  | "firstLine"
  | undefined
```

Refers to `LockupRecipeVariants`.

##### `LockupRecipeVariants`

```ts
type LockupRecipeVariants = RecipeSelection<typeof lockupRecipe>;
```

Which resolves to:

```ts
{
  railAlignment?: "center"
    | "firstLine"
    | undefined;
  isInline?: boolean | undefined;
}
```

Refers to `RecipeSelection`.

##### `RecipeSelection`

```ts
type RecipeSelection<Fn> = Fn extends (input?: infer Input) => unknown ? VariantKeysOf<NonNullable<Input>> : never;
```

Refers to `VariantKeysOf`.

##### `VariantKeysOf`

```ts
type VariantKeysOf<Input> = [Exclude<keyof Input, keyof RecipeComposition>] extends [never] ? Record<string, never> : Omit<Input, keyof RecipeComposition>;
```

Refers to `RecipeComposition`.

##### `RecipeComposition`

```ts
interface RecipeComposition {
  className?: string;
}
```

##### `ReactNode`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

```ts
type ReactNode = ReactElement
  | string
  | number
  | bigint
  | Iterable<ReactNode>
  | ReactPortal
  | boolean
  | null
  | undefined
  | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES]
  | Promise<AwaitedReactNode>;
```

Refers to `ReactElement`, `ReactPortal`, `DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES`, and `AwaitedReactNode`.

##### `ReactElement`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `ReactPortal`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `AwaitedReactNode`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `CSSProperties`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `Ref`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

```ts
type Ref<T> = RefCallback<T>
  | RefObject<T | null>
  | null;
```

Refers to `RefCallback` and `RefObject`.

##### `RefCallback`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `RefObject`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `HTMLAttributes`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

### LockupRailProps [#lockuprailprops]

### LockupRailProps

Props for `LockupRail`.

`LockupRailProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

| Prop                      | Type                                                                                                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children?`               | `ReactNode \| undefined`                                                                                                                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `className?`              | `string \| undefined`                                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `style?`                  | `CSSProperties \| undefined`                                                                                                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `blockSize?`              | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `inlineSize?`             | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `inset?`                  | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `insetBlock?`             | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `insetBlockEnd?`          | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `insetBlockStart?`        | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `insetInline?`            | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `insetInlineEnd?`         | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `insetInlineStart?`       | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `justifySelf?`            | `ResponsiveValue<"auto" \| "center" \| "end" \| "normal" \| "start" \| "stretch"> \| undefined`                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `margin?`                 | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `marginBlock?`            | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `marginBlockEnd?`         | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `marginBlockStart?`       | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `marginInline?`           | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `marginInlineEnd?`        | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `marginInlineStart?`      | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `maxBlockSize?`           | `ResponsiveValue<"0" \| "100%" \| "fit-content" \| "max-content" \| "min-content" \| "none"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `maxInlineSize?`          | `ResponsiveValue<"0" \| "100%" \| "container.448" \| "container.672" \| "container.896" \| "container.1152" \| "container.1280" \| "fit-content" \| "max-content" \| "min-content" \| "none"> \| undefined` |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `minBlockSize?`           | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `minInlineSize?`          | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `overflow?`               | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `overflowX?`              | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `overflowY?`              | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `overscrollBehavior?`     | `ResponsiveValue<"auto" \| "contain"> \| undefined`                                                                                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `padding?`                | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `paddingBlock?`           | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `paddingBlockEnd?`        | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `paddingBlockStart?`      | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `paddingInline?`          | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `paddingInlineEnd?`       | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `paddingInlineStart?`     | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `position?`               | `ResponsiveValue<"absolute" \| "fixed" \| "relative" \| "static" \| "sticky"> \| undefined`                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `borderBlockStartWidth?`  | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `borderBlockEndWidth?`    | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `borderInlineStartWidth?` | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `borderInlineEndWidth?`   | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `ref?`                    | `Ref<HTMLElement>`                                                                                                                                                                                          | Ref to the rendered element.                                                                                                                                                                                                                                                                                                                                                                                                  |
| `renderRoot?`             | `(domProps: { [K in "children" \| "className" \| "ref" \| "style"]: BoxLikeResolvedRenderProps[K]; }, state: Record<string, never>) => React.ReactElement`                                                  | Use `renderRoot` instead of `elementType` to own the rendered element. Passes resolved `children`, `className`, `style`, and a callback `ref` as `domProps`. The second argument is an empty state object. Return a container element that can lay out flex items and draw a `::before` box, such as a `div` or `span`, spread `domProps` onto it, and render its children. Put an image inside the rail, not in place of it. |
| `elementType?`            | `'div' \| 'span'`                                                                                                                                                                                           | Element to render. Inside a `span` Lockup, the default is `span`. Use `elementType` instead of `renderRoot` for a supported structural element. Default: `div`                                                                                                                                                                                                                                                                |

#### Type definitions

These are the types that this table's signatures and the definitions below name. TypeScript's built-in types, such as `Omit` and `ReadonlyArray`, are not listed.

##### `ResponsiveValue`

```ts
type ResponsiveValue<Value> = Value
  | null
  | {
    [Condition in BreakpointName]?: Value | null;
  };
```

Refers to `BreakpointName`.

##### `BreakpointName`

```ts
type BreakpointName = keyof typeof responsiveConditions;
```

Which resolves to:

```ts
"bp640"
  | "bp768"
  | "bp1024"
  | "bp1280"
  | "bp1536"
  | "initial"
```

##### `BoxLikeResolvedRenderProps`

```ts
type BoxLikeResolvedRenderProps = DistributiveOmit<BoxLikePresentationProps, 'ref'> & {
  ref: UseRenderRef;
};
```

Refers to `DistributiveOmit`, `BoxLikePresentationProps`, and `UseRenderRef`.

##### `DistributiveOmit`

```ts
type DistributiveOmit<T, K extends KeysOfUnion<T>> = T extends any ? Omit<T, Extract<K, keyof T>> : never;
```

Refers to `KeysOfUnion`.

##### `KeysOfUnion`

```ts
type KeysOfUnion<T> = T extends T ? keyof T : never;
```

##### `BoxLikePresentationProps`

```ts
interface BoxLikePresentationProps extends Pick<HTMLAttributes<HTMLElement>, 'children'
  | 'className'
  | 'style'> {
  ref?: Ref<HTMLElement>;
}
```

Refers to `HTMLAttributes` and `Ref`.

##### `UseRenderRef`

```ts
type UseRenderRef = NonNullable<Exclude<Ref<HTMLElement>, RefObject<HTMLElement | null>>>;
```

Refers to `Ref` and `RefObject`.

##### `ReactNode`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

```ts
type ReactNode = ReactElement
  | string
  | number
  | bigint
  | Iterable<ReactNode>
  | ReactPortal
  | boolean
  | null
  | undefined
  | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES]
  | Promise<AwaitedReactNode>;
```

Refers to `ReactElement`, `ReactPortal`, `DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES`, and `AwaitedReactNode`.

##### `ReactElement`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `ReactPortal`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `AwaitedReactNode`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `CSSProperties`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `Ref`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

```ts
type Ref<T> = RefCallback<T>
  | RefObject<T | null>
  | null;
```

Refers to `RefCallback` and `RefObject`.

##### `RefCallback`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `RefObject`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `HTMLAttributes`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

### LockupBodyProps [#lockupbodyprops]

### LockupBodyProps

Props for `LockupBody`.

`LockupBodyProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

| Prop                      | Type                                                                                                                                                                                                        | Description                                                                                                                                                                                                                                                        |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children?`               | `ReactNode \| undefined`                                                                                                                                                                                    |                                                                                                                                                                                                                                                                    |
| `className?`              | `string \| undefined`                                                                                                                                                                                       |                                                                                                                                                                                                                                                                    |
| `style?`                  | `CSSProperties \| undefined`                                                                                                                                                                                |                                                                                                                                                                                                                                                                    |
| `blockSize?`              | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                    |
| `inlineSize?`             | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                    |
| `inset?`                  | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `insetBlock?`             | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `insetBlockEnd?`          | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `insetBlockStart?`        | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `insetInline?`            | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `insetInlineEnd?`         | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `insetInlineStart?`       | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `justifySelf?`            | `ResponsiveValue<"auto" \| "center" \| "end" \| "normal" \| "start" \| "stretch"> \| undefined`                                                                                                             |                                                                                                                                                                                                                                                                    |
| `margin?`                 | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `marginBlock?`            | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `marginBlockEnd?`         | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `marginBlockStart?`       | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `marginInline?`           | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `marginInlineEnd?`        | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `marginInlineStart?`      | `ResponsiveValue<"0" \| "auto" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                     |                                                                                                                                                                                                                                                                    |
| `maxBlockSize?`           | `ResponsiveValue<"0" \| "100%" \| "fit-content" \| "max-content" \| "min-content" \| "none"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                    |
| `maxInlineSize?`          | `ResponsiveValue<"0" \| "100%" \| "container.448" \| "container.672" \| "container.896" \| "container.1152" \| "container.1280" \| "fit-content" \| "max-content" \| "min-content" \| "none"> \| undefined` |                                                                                                                                                                                                                                                                    |
| `minBlockSize?`           | `ResponsiveValue<"0" \| "100%" \| "auto" \| "fit-content" \| "max-content" \| "min-content"> \| undefined`                                                                                                  |                                                                                                                                                                                                                                                                    |
| `overflow?`               | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                    |
| `overflowX?`              | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                    |
| `overflowY?`              | `ResponsiveValue<"auto" \| "clip" \| "hidden" \| "scroll" \| "visible"> \| undefined`                                                                                                                       |                                                                                                                                                                                                                                                                    |
| `overscrollBehavior?`     | `ResponsiveValue<"auto" \| "contain"> \| undefined`                                                                                                                                                         |                                                                                                                                                                                                                                                                    |
| `padding?`                | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `paddingBlock?`           | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `paddingBlockEnd?`        | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `paddingBlockStart?`      | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `paddingInline?`          | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `paddingInlineEnd?`       | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `paddingInlineStart?`     | `ResponsiveValue<"0" \| "space.4" \| "space.8" \| "space.12" \| "space.16" \| "space.24" \| "space.32" \| "space.40" \| "space.48" \| "space.64" \| "space.96"> \| undefined`                               |                                                                                                                                                                                                                                                                    |
| `position?`               | `ResponsiveValue<"absolute" \| "fixed" \| "relative" \| "static" \| "sticky"> \| undefined`                                                                                                                 |                                                                                                                                                                                                                                                                    |
| `borderBlockStartWidth?`  | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                    |
| `borderBlockEndWidth?`    | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                    |
| `borderInlineStartWidth?` | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                    |
| `borderInlineEndWidth?`   | `ResponsiveValue<"none" \| "thick" \| "thin"> \| undefined`                                                                                                                                                 |                                                                                                                                                                                                                                                                    |
| `ref?`                    | `Ref<HTMLElement>`                                                                                                                                                                                          | Ref to the rendered element.                                                                                                                                                                                                                                       |
| `renderRoot?`             | `(domProps: { [K in "children" \| "className" \| "ref" \| "style"]: BoxLikeResolvedRenderProps[K]; }, state: Record<string, never>) => React.ReactElement`                                                  | Use `renderRoot` instead of `elementType` to own the rendered element. Passes resolved `children`, `className`, `style`, and a callback `ref` as `domProps`. The second argument is an empty state object. Put DOM attributes on the element the callback returns. |
| `elementType?`            | `'div' \| 'span'`                                                                                                                                                                                           | Element to render. Inside a `span` Lockup, the default is `span`. Use `elementType` instead of `renderRoot` for a supported structural element. Default: `div`                                                                                                     |

#### Type definitions

These are the types that this table's signatures and the definitions below name. TypeScript's built-in types, such as `Omit` and `ReadonlyArray`, are not listed.

##### `ResponsiveValue`

```ts
type ResponsiveValue<Value> = Value
  | null
  | {
    [Condition in BreakpointName]?: Value | null;
  };
```

Refers to `BreakpointName`.

##### `BreakpointName`

```ts
type BreakpointName = keyof typeof responsiveConditions;
```

Which resolves to:

```ts
"bp640"
  | "bp768"
  | "bp1024"
  | "bp1280"
  | "bp1536"
  | "initial"
```

##### `BoxLikeResolvedRenderProps`

```ts
type BoxLikeResolvedRenderProps = DistributiveOmit<BoxLikePresentationProps, 'ref'> & {
  ref: UseRenderRef;
};
```

Refers to `DistributiveOmit`, `BoxLikePresentationProps`, and `UseRenderRef`.

##### `DistributiveOmit`

```ts
type DistributiveOmit<T, K extends KeysOfUnion<T>> = T extends any ? Omit<T, Extract<K, keyof T>> : never;
```

Refers to `KeysOfUnion`.

##### `KeysOfUnion`

```ts
type KeysOfUnion<T> = T extends T ? keyof T : never;
```

##### `BoxLikePresentationProps`

```ts
interface BoxLikePresentationProps extends Pick<HTMLAttributes<HTMLElement>, 'children'
  | 'className'
  | 'style'> {
  ref?: Ref<HTMLElement>;
}
```

Refers to `HTMLAttributes` and `Ref`.

##### `UseRenderRef`

```ts
type UseRenderRef = NonNullable<Exclude<Ref<HTMLElement>, RefObject<HTMLElement | null>>>;
```

Refers to `Ref` and `RefObject`.

##### `ReactNode`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

```ts
type ReactNode = ReactElement
  | string
  | number
  | bigint
  | Iterable<ReactNode>
  | ReactPortal
  | boolean
  | null
  | undefined
  | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES]
  | Promise<AwaitedReactNode>;
```

Refers to `ReactElement`, `ReactPortal`, `DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES`, and `AwaitedReactNode`.

##### `ReactElement`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `ReactPortal`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `AwaitedReactNode`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `CSSProperties`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `Ref`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

```ts
type Ref<T> = RefCallback<T>
  | RefObject<T | null>
  | null;
```

Refers to `RefCallback` and `RefObject`.

##### `RefCallback`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `RefObject`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).

##### `HTMLAttributes`

Declared in [`@types/react`](https://www.npmjs.com/package/@types/react) (`index.d.ts`).