themelia-ui 3.0.0 → 3.2.0

package/docs/generated/components/base--value-inputs.md

@@ -15,7 +15,6 @@ A single typed value needs a specialised editor — colour, datetime, phone, sli
 
 ```tsx fragment — import-only example
 import { ColorInput } from "themelia-ui/base/value-inputs"
-import "themelia-ui/base/value-inputs.css"
 ```
 
 ## Composition
@@ -46,8 +45,7 @@ Extends: `Omit<InputProps, "type">`.
 | `previewValue` | no | `string` | What the swatch shows, when it differs from the value — a resolved token, say. Defaults<br>to the current value. |
 | `onValueChange` | no | `(value: string) => void` | Called with the colour as a string. Typed text is any CSS colour and is not normalised —<br>what is typed is what is stored; the picker's value arrives in `format`. |
 | `strings` | no | `Partial<ColorInputStrings>` | Overrides this field's own copy — the swatch's name. The swatch is a control, with the<br>native picker under it, so it needs one. |
-| `format` | no | `"oklch" \| "hex" \| "rgb" \| "hsl"` | The notation the picker emits — typed text is never rewritten. The kit's own palette is<br>OKLCH, which is why that is the default; a consumer whose tokens are hex, rgb or hsl<br>gets their own notation back. The conversion is culori's. With the deprecated `emitHex`<br>and no `format`, it is `hex`. @default "oklch" |
-| `emitHex` | no | `boolean` | Makes the picker emit hex. `format` wins where both are given. @deprecated Use `format="hex"`; this spelling stays because it is published API. |
+| `format` | no | `"oklch" \| "hex" \| "rgb" \| "hsl"` | The notation the picker emits — typed text is never rewritten. The kit's own palette is<br>OKLCH, which is why that is the default; a consumer whose tokens are hex, rgb or hsl<br>gets their own notation back. The conversion is culori's. @default "oklch" |
 
 ### `ColorInputStrings`
 
@@ -246,8 +244,7 @@ Kind: interface.
 | `step` | no | `number` | The increment between values. |
 | `disabled` | no | `boolean` |  |
 | `invalid` | no | `boolean` | Applies the invalid treatment. The message stays on the FormField. |
-| `orientation` | no | `"horizontal" \| "vertical"` | The track's direction. A vertical slider takes its height from<br>`--slider-vertical-min-h`, because a slider has no content to size it. |
-| `size` | no | `"sm" \| "md"` | Track and thumb size: `md` is a larger drag target (touch, media controls). A slider is<br>dragged, which is why this one keeps a size prop. |
+| `orientation` | no | `"horizontal" \| "vertical"` | The track's direction. A vertical slider takes its height from its container, with a<br>10rem floor, because a slider has no content to size it. |
 | `onChange` | no | `(event: SliderChangeEvent<TValue extends number ? number : TValue>) => void` | Native-shaped handler, for form libraries. |
 | `onValueChange` | no | `(value: TValue extends number ? number : TValue) => void` | The value on its own, for everything else. |
 | `onValueCommitted` | no | `(value: TValue extends number ? number : TValue) => void` | Fires once on pointer release or keyboard commit, not on every step. |
@@ -351,7 +348,7 @@ export default function Color() {
 	const [color, setColor] = useState("oklch(0.45 0.12 155)")
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 			<FormField label="Brand" helperText="The swatch shows the painted colour, so var() and named colours work.">
 				<ColorInput value={color} onValueChange={setColor} />
 			</FormField>
@@ -373,7 +370,7 @@ import { ColorInput } from "themelia-ui/base/value-inputs"
 
 export default function ColorFormats() {
 	return (
-		<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 			<FormField label="oklch (default)" helperText="Pick a colour from the swatch to see the notation change.">
 				<ColorInput defaultValue="oklch(0.45 0.12 155)" />
 			</FormField>
@@ -406,7 +403,7 @@ export default function Phone() {
 	const [phone, setPhone] = useState("6 1234 5678")
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
 			<FormField label="Mobile" helperText="Leaving the field strips a typed prefix and the trunk zero.">
 				<PhoneInput
 					prefix={prefix}
@@ -438,7 +435,7 @@ export default function SliderExample() {
 	const [volume, setVolume] = useState(40)
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 			<FormField label="Volume">
 				<SliderField value={volume} onValueChange={setVolume} showValue unit="%" />
 			</FormField>
@@ -456,32 +453,6 @@ export default function SliderExample() {
 }
 ```
 
-### Sizes
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { useState } from "react"
-
-import { FormField } from "themelia-ui/base/forms"
-import { Stack } from "themelia-ui/base/structure"
-import { SliderField } from "themelia-ui/base/value-inputs"
-
-
-export default function SliderSizes() {
-	const [volume, setVolume] = useState(40)
-
-	return (
-		<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
-			<FormField label="sm — the default">
-				<SliderField value={volume} onValueChange={setVolume} showValue unit="%" />
-			</FormField>
-			<FormField label="md — a larger target">
-				<SliderField size="md" value={volume} onValueChange={setVolume} showValue unit="%" />
-			</FormField>
-		</Stack>
-	)
-}
-```
-
 ### Vertical, and a range
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -497,7 +468,7 @@ export default function SliderOrientation() {
 	const [range, setRange] = useState<number[]>([20, 70])
 
 	return (
-		<Stack direction="horizontal" gap="2xl" align="start">
+		<Stack direction="horizontal" align="start">
 			<FormField label="Level">
 				<SliderField
 					orientation="vertical"
@@ -545,7 +516,7 @@ export default function Tags() {
 	const [tags, setTags] = useState(["invoice", "q4"])
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 			<FormField label="Labels" helperText="Try pasting: alpha, beta, gamma">
 				<TagsInput value={tags} onValueChange={setTags} maxTags={5} showCount showClearAll />
 			</FormField>
@@ -581,7 +552,7 @@ export default function Time() {
 	const [instant, setInstant] = useState<string | undefined>("2026-03-12T09:30:00.000Z")
 
 	return (
-		<Stack gap="xl" style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
 			<FormField label="Start time">
 				<TimePicker value={time} onValueChange={setTime} minuteStep={15} />
 			</FormField>

package/docs/generated/components/{admin--patterns--access.md → blocks--admin--access.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `admin/patterns/access`
+# `blocks/admin/access`
 
 Admin screens present credentials, role permissions and destructive confirmations.
 
@@ -14,8 +14,7 @@ Admin screens present credentials, role permissions and destructive confirmation
 ## Import
 
 ```tsx fragment — import-only example
-import { CredentialList } from "themelia-ui/admin/patterns/access"
-import "themelia-ui/admin/patterns/access.css"
+import { CredentialList } from "themelia-ui/blocks/admin/access"
 ```
 
 ## Composition
@@ -119,6 +118,16 @@ Kind: interface.
 
 Kind: callable.
 
+**Use when:** A read-only role permission summary grouped by product area.
+
+**Avoid when:** Editing permission values or enforcing authorization.
+
+**Compose:** Supply roleName and grouped permission records. The app computes authorization and owns the edit callback; the block supplies visible and accessible state presentation.
+
+**Capabilities:** role permissions; permission summary; granted denied access facts.
+
+**Alternatives:** Table, FormSection.
+
 ```text
 ({ roleName, description, memberCount, groups, onEdit, strings, className, ...props }: RolePermissionsProps) => import("react").JSX.Element
 ```
@@ -176,7 +185,7 @@ Preview route: Timelines, onboarding & admin — `/blocks-admin`
 ### Credential list
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { CredentialList } from "themelia-ui/admin/patterns/access"
+import { CredentialList } from "themelia-ui/blocks/admin/access"
 
 const CREDENTIALS = [
 	{ id: "1", name: "Production", value: "sk_live_4417a92f0b3d", displayValue: "sk_live_••••0b3d" },
@@ -194,7 +203,7 @@ export default function BlocksCredentials() {
 ### Role permissions
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { RolePermissions } from "themelia-ui/admin/patterns/access"
+import { RolePermissions } from "themelia-ui/blocks/admin/access"
 
 const GROUPS = [
 	{
@@ -233,7 +242,7 @@ export default function BlocksRoles() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { KeyRoundIcon } from "lucide-react"
 
-import { SensitiveAction } from "themelia-ui/admin/patterns/access"
+import { SensitiveAction } from "themelia-ui/blocks/admin/access"
 import { Button } from "themelia-ui/base/buttons"
 
 export default function BlocksSensitive() {

package/docs/generated/components/{admin--patterns--commerce.md → blocks--admin--commerce.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `admin/patterns/commerce`
+# `blocks/admin/commerce`
 
 Admin screens present orders, invoices, carts, fulfilment and loyalty.
 
@@ -14,13 +14,12 @@ Admin screens present orders, invoices, carts, fulfilment and loyalty.
 ## Import
 
 ```tsx fragment — import-only example
-import { AddressCard } from "themelia-ui/admin/patterns/commerce"
-import "themelia-ui/admin/patterns/commerce.css"
+import { AddressCard } from "themelia-ui/blocks/admin/commerce"
 ```
 
 ## Composition
 
-This module composes `base/action-menu`, `base/avatar`, `base/badge`, `base/buttons`, `base/choice-inputs`, `base/copyable`, `base/display`, `base/feedback`, `base/forms`, `base/item`, `base/navigation`, `base/structure`, `base/table`, `base/text-inputs`, `base/timeline`, `base/typography`, `base/value-inputs`, `patterns/timelines`.
+This module composes `base/action-menu`, `base/avatar`, `base/badge`, `base/buttons`, `base/choice-inputs`, `base/copyable`, `base/display`, `base/feedback`, `base/forms`, `base/item`, `base/navigation`, `base/structure`, `base/table`, `base/text-inputs`, `base/timeline`, `base/typography`, `base/value-inputs`, `blocks/timelines`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -1825,7 +1824,7 @@ A performance tile. `change` is a comparison, and its tone is stated, not inferr
 | `label` | yes | `ReactNode` |  |
 | `value` | yes | `ReactNode` |  |
 | `change` | no | `ReactNode` |  |
-| `changeTone` | no | `"secondary" \| "success" \| "warning" \| "destructive"` |  |
+| `changeTone` | no | `Extract<SemanticTone, "secondary" \| "success" \| "warning" \| "destructive">` |  |
 
 ### `VendorStrings`
 
@@ -1861,7 +1860,7 @@ import {
 	SeoListing,
 	calculateSeoScore,
 	type SeoScoreInput,
-} from "themelia-ui/admin/patterns/commerce"
+} from "themelia-ui/blocks/admin/commerce"
 import { FormField } from "themelia-ui/base/forms"
 import { AdaptiveGrid, Stack } from "themelia-ui/base/structure"
 import { Input, Textarea } from "themelia-ui/base/text-inputs"
@@ -1903,7 +1902,7 @@ function ListingDemo({ initial }: { initial: SeoScoreInput }) {
 				strings={{ confirm: "Save changes" }}
 				onConfirm={() => setListing(draft)}
 			>
-				<Stack gap="lg">
+				<Stack>
 					<FormField label="Page title">
 						<Input value={draft.title ?? ""} onChange={event => setDraft({ ...draft, title: event.target.value })} />
 					</FormField>
@@ -1924,7 +1923,7 @@ function ListingDemo({ initial }: { initial: SeoScoreInput }) {
 
 export default function CatalogueSeo() {
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl" align="start">
+		<AdaptiveGrid minColumnWidth="20rem" align="start">
 			<ListingDemo initial={LISTING} />
 			{/* Scored outside the card and handed in — the seam an editor uses. */}
 			<ListingDemo initial={WEAK_LISTING} />
@@ -1938,7 +1937,7 @@ export default function CatalogueSeo() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { useState } from "react"
 
-import { InventorySection, type InventorySectionValue } from "themelia-ui/admin/patterns/commerce"
+import { InventorySection, type InventorySectionValue } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const INVENTORY: InventorySectionValue = {
@@ -1980,7 +1979,7 @@ export default function CatalogueInventory() {
 ### VendorProfile
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { VendorProfile } from "themelia-ui/admin/patterns/commerce"
+import { VendorProfile } from "themelia-ui/blocks/admin/commerce"
 import { ContentBlock } from "themelia-ui/base/display"
 import { AdaptiveGrid } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
@@ -1988,7 +1987,7 @@ import { Number as NumberValue } from "themelia-ui/primitives"
 
 export default function CatalogueVendor() {
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl" align="start">
+		<AdaptiveGrid minColumnWidth="20rem" align="start">
 			<ContentBlock surface="bordered">
 				<VendorProfile
 					name="Northwind Traders"
@@ -2029,7 +2028,7 @@ export default function CatalogueVendor() {
 ### BookingCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { BookingCard } from "themelia-ui/admin/patterns/commerce"
+import { BookingCard } from "themelia-ui/blocks/admin/commerce"
 import { Badge } from "themelia-ui/base/badge"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
@@ -2060,7 +2059,7 @@ export default function CatalogueBooking() {
 ### CartSummary
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { CartSummary, type CartLine } from "themelia-ui/admin/patterns/commerce"
+import { CartSummary, type CartLine } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2090,7 +2089,7 @@ export default function CartSummaryExample() {
 ### TaxBreakdown
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { TaxBreakdown } from "themelia-ui/admin/patterns/commerce"
+import { TaxBreakdown } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function TaxBreakdownExample() {
@@ -2113,7 +2112,7 @@ export default function TaxBreakdownExample() {
 ### DiscountStack
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { DiscountStack } from "themelia-ui/admin/patterns/commerce"
+import { DiscountStack } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function DiscountStackExample() {
@@ -2136,7 +2135,7 @@ export default function DiscountStackExample() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { useState } from "react"
 
-import { CodeEntry } from "themelia-ui/admin/patterns/commerce"
+import { CodeEntry } from "themelia-ui/blocks/admin/commerce"
 import { AdaptiveGrid, GridCell } from "themelia-ui/base/structure"
 
 function CodeEntryDemo({ gift = false }: { gift?: boolean }) {
@@ -2165,7 +2164,7 @@ function CodeEntryDemo({ gift = false }: { gift?: boolean }) {
 export default function CodeEntryExample() {
 	/* Two instances: empty on the left, applied on the right, covering both kinds. */
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl">
+		<AdaptiveGrid minColumnWidth="20rem">
 			<GridCell>
 				<CodeEntryDemo />
 			</GridCell>
@@ -2180,7 +2179,7 @@ export default function CodeEntryExample() {
 ### OrderStatusCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderStatusCard, type OrderEvent } from "themelia-ui/admin/patterns/commerce"
+import { OrderStatusCard, type OrderEvent } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const ORDER_EVENTS: OrderEvent[] = [
@@ -2203,7 +2202,7 @@ export default function OrderStatusExample() {
 ### ShipmentTracking
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { ShipmentTracking } from "themelia-ui/admin/patterns/commerce"
+import { ShipmentTracking } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function ShipmentTrackingExample() {
@@ -2230,7 +2229,7 @@ export default function ShipmentTrackingExample() {
 ### RefundStatus
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { RefundStatus } from "themelia-ui/admin/patterns/commerce"
+import { RefundStatus } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function RefundStatusExample() {
@@ -2251,7 +2250,7 @@ export default function RefundStatusExample() {
 ### InvoiceHeader
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InvoiceHeader } from "themelia-ui/admin/patterns/commerce"
+import { InvoiceHeader } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function InvoiceHeaderExample() {
@@ -2274,7 +2273,7 @@ export default function InvoiceHeaderExample() {
 ### InvoiceLineItems
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InvoiceLineItems } from "themelia-ui/admin/patterns/commerce"
+import { InvoiceLineItems } from "themelia-ui/blocks/admin/commerce"
 
 export default function InvoiceLineItemsExample() {
 	return (
@@ -2294,13 +2293,13 @@ export default function InvoiceLineItemsExample() {
 ### InvoiceMini
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InvoiceMini } from "themelia-ui/admin/patterns/commerce"
+import { InvoiceMini } from "themelia-ui/blocks/admin/commerce"
 import { ContentBlock } from "themelia-ui/base/display"
 import { AdaptiveGrid, GridCell } from "themelia-ui/base/structure"
 
 export default function InvoiceMiniExample() {
 	return (
-		<AdaptiveGrid minColumnWidth="md" gap="xl">
+		<AdaptiveGrid>
 			<GridCell>
 				<ContentBlock surface="bordered"><InvoiceMini invoiceNumber="INV-0114" status="overdue" customerName="Adventure Park Bansko" lineCount={3} dueAt="28 Aug" total="3,120.00 EUR" /></ContentBlock>
 			</GridCell>
@@ -2318,7 +2317,7 @@ export default function InvoiceMiniExample() {
 ### AddressCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { AddressCard } from "themelia-ui/admin/patterns/commerce"
+import { AddressCard } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2344,7 +2343,7 @@ export default function AddressCardExample() {
 ### PaymentMethodCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { PaymentMethodCard } from "themelia-ui/admin/patterns/commerce"
+import { PaymentMethodCard } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2362,7 +2361,7 @@ export default function PaymentMethod() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { BanknoteIcon, CreditCardIcon } from "lucide-react"
 
-import { PaymentTimeline } from "themelia-ui/admin/patterns/commerce"
+import { PaymentTimeline } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function PaymentTimelineExample() {
@@ -2385,7 +2384,7 @@ export default function PaymentTimelineExample() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { CheckIcon, CloudIcon, HeadphonesIcon, ShieldIcon } from "lucide-react"
 
-import { SubscriptionSummary } from "themelia-ui/admin/patterns/commerce"
+import { SubscriptionSummary } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2415,12 +2414,12 @@ export default function SubscriptionSummaryExample() {
 ### InventoryLevel
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InventoryLevel } from "themelia-ui/admin/patterns/commerce"
+import { InventoryLevel } from "themelia-ui/blocks/admin/commerce"
 import { AdaptiveGrid, GridCell } from "themelia-ui/base/structure"
 
 export default function InventoryLevelExample() {
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl">
+		<AdaptiveGrid minColumnWidth="20rem">
 			<GridCell>
 				<InventoryLevel productName="Merino crew neck" variant="Medium / Charcoal" stock={8} reorderLevel={12} maxStock={120} lastRestocked="02 Aug" />
 			</GridCell>
@@ -2435,7 +2434,7 @@ export default function InventoryLevelExample() {
 ### UpcomingBookings
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { UpcomingBookings, type Booking } from "themelia-ui/admin/patterns/commerce"
+import { UpcomingBookings, type Booking } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const BOOKINGS: Booking[] = [
@@ -2456,7 +2455,7 @@ export default function UpcomingBookingsExample() {
 ### LoyaltyPoints
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { LoyaltyPoints } from "themelia-ui/admin/patterns/commerce"
+import { LoyaltyPoints } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2482,12 +2481,12 @@ export default function LoyaltyPointsExample() {
 ### Two statuses, not one
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderHeader } from "themelia-ui/admin/patterns/commerce"
+import { OrderHeader } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function OrderStatusAxes() {
 	return (
-		<Stack gap="xl">
+		<Stack>
 			<OrderHeader
 				orderNumber="1036"
 				paymentStatus="refunded"
@@ -2511,7 +2510,7 @@ export default function OrderStatusAxes() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { BanIcon } from "lucide-react"
 
-import { FulfillmentGroup, type OrderLine } from "themelia-ui/admin/patterns/commerce"
+import { FulfillmentGroup, type OrderLine } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const LINES: OrderLine[] = [
@@ -2546,7 +2545,7 @@ const LINES: OrderLine[] = [
 
 export default function OrderFulfillment() {
 	return (
-		<Stack gap="xl">
+		<Stack>
 			<FulfillmentGroup
 				status="unfulfilled"
 				location="Bul Bulgaria 111"
@@ -2573,7 +2572,7 @@ export default function OrderFulfillment() {
 ### A line, and what a consumer attaches to it
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { FulfillmentGroup, OrderLineItem, type OrderLine } from "themelia-ui/admin/patterns/commerce"
+import { FulfillmentGroup, OrderLineItem, type OrderLine } from "themelia-ui/blocks/admin/commerce"
 
 const PERSONALISED: OrderLine = {
 	id: "4",
@@ -2604,7 +2603,7 @@ export default function OrderLineItemExample() {
 ### OrderSummary
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderSummary } from "themelia-ui/admin/patterns/commerce"
+import { OrderSummary } from "themelia-ui/blocks/admin/commerce"
 
 export default function OrderSummaryExample() {
 	return (
@@ -2629,7 +2628,7 @@ export default function OrderSummaryExample() {
 ### OrderTransactions
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderTransactions, type Transaction } from "themelia-ui/admin/patterns/commerce"
+import { OrderTransactions, type Transaction } from "themelia-ui/blocks/admin/commerce"
 
 const TRANSACTIONS: Transaction[] = [
 	{
@@ -2674,12 +2673,12 @@ export default function OrderTransactionsExample() {
 ### Customer and addresses
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderCustomer } from "themelia-ui/admin/patterns/commerce"
+import { OrderCustomer } from "themelia-ui/blocks/admin/commerce"
 import { Grid, GridCell } from "themelia-ui/base/structure"
 
 export default function OrderCustomerExample() {
 	return (
-		<Grid columns={{ base: 1, md: 2 }} gap="xl">
+		<Grid columns={{ base: 1, md: 2 }}>
 			<GridCell>
 				<OrderCustomer
 					name="Alice Mercer"