@podoba/react 0.0.32 → 0.0.35

package/src/components/delivery/send-to-print-modal.tsx

@@ -21,9 +21,9 @@
 // field is aria-invalid when invalid; the server error is role="alert"; confirm
 // shows a pending state and disables while in flight / invalid.
 
-import { useMemo, useState } from 'react'
+import { useId, useMemo, useState } from 'react'
 import { Button } from '../button'
-import { Dialog } from '../dialog'
+import { ModalDialog, ModalOverlay, ModalSurface } from '../dialog'
 import { Input } from '../input'
 
 /** The validated print spec the modal yields on confirm. */
@@ -36,6 +36,20 @@ export interface PrintSpec {
 	quantity: number
 	/** Delivery address — non-blank. */
 	address: string
+	/** Company / recipient. */
+	company?: string
+	/** Street address. */
+	street?: string
+	/** City. */
+	city?: string
+	/** ZIP / postcode. */
+	zip?: string
+	/** Contact person. */
+	contactName?: string
+	/** Contact phone. */
+	phone?: string
+	/** Optional print-production note. */
+	note?: string
 }
 
 /** Strings the send-to-print modal renders — supplied by the app (i18n). */
@@ -50,6 +64,7 @@ export interface SendToPrintModalLabels {
 	/** Material field label + placeholder. */
 	materialLabel: string
 	materialPlaceholder: string
+	materialDefault?: string
 	/** Quantity field label + placeholder. */
 	quantityLabel: string
 	quantityPlaceholder: string
@@ -64,6 +79,34 @@ export interface SendToPrintModalLabels {
 	confirm: string
 	/** Confirm button — pending state. */
 	submitting: string
+	/** Optional old-Manager section label. */
+	sectionLabel?: string
+	outputName?: string
+	outputDescription?: string
+	/** Optional no-material message. */
+	noMaterialConfigured?: string
+	companyLabel?: string
+	companyPlaceholder?: string
+	streetLabel?: string
+	streetPlaceholder?: string
+	cityLabel?: string
+	cityPlaceholder?: string
+	zipLabel?: string
+	zipPlaceholder?: string
+	contactNameLabel?: string
+	contactNamePlaceholder?: string
+	phoneLabel?: string
+	phonePlaceholder?: string
+	noteLabel?: string
+	notePlaceholder?: string
+	priceEyebrow?: string
+	priceIdle?: string
+	closeLabel?: string
+}
+
+export interface PrintMaterialOption {
+	id: string
+	label: string
 }
 
 export interface SendToPrintModalProps {
@@ -79,6 +122,16 @@ export interface SendToPrintModalProps {
 	error?: string
 	/** App-supplied i18n strings. */
 	labels: SendToPrintModalLabels
+	/** Output title shown in the old Manager print-order summary card. */
+	outputName?: string
+	/** Output dimension / format line shown in the old Manager print-order summary card. */
+	outputDescription?: string
+	/** Available print materials. Empty means the old Manager disabled the order action. */
+	materialOptions?: PrintMaterialOption[]
+	/** Initial quantity. Old Manager opens print with a production-like quantity instead of blank. */
+	initialQuantity?: number
+	/** Modal family. Dashboard Workspace print orders use the old wider source panel. */
+	surfaceVariant?: 'standard' | 'dashboard'
 	/** Optional test id forwarded to the dialog. */
 	'data-testid'?: string
 }
@@ -92,6 +145,12 @@ function parseQuantity(raw: string): number | null {
 	return value
 }
 
+function capitalizeFirstAddressLetter(value: string): string {
+	const index = value.search(/\p{L}/u)
+	if (index < 0) return value
+	return `${value.slice(0, index)}${value.charAt(index).toUpperCase()}${value.slice(index + 1)}`
+}
+
 /** Send-to-print modal with validated size / material / quantity / address. */
 export function SendToPrintModal({
 	isOpen,
@@ -100,31 +159,69 @@ export function SendToPrintModal({
 	isPending = false,
 	error,
 	labels,
+	outputName,
+	outputDescription,
+	materialOptions = [],
+	initialQuantity = 500,
+	surfaceVariant = 'standard',
 	'data-testid': testId,
 }: SendToPrintModalProps): React.ReactNode {
-	const [size, setSize] = useState('')
-	const [material, setMaterial] = useState('')
-	const [quantityRaw, setQuantityRaw] = useState('')
-	const [address, setAddress] = useState('')
+	const titleId = useId()
+	const descriptionId = useId()
+	// `materialOptions` is normally fetched, so it is [] on mount. Seeding useState
+	// from it captures that empty first render forever; deriving the fallback each
+	// render selects the first option as soon as the list arrives. '' means
+	// "untouched", not "nothing selected".
+	const [materialId, setMaterialId] = useState('')
+	const [sizeRaw, setSizeRaw] = useState('')
+	const [quantityRaw, setQuantityRaw] = useState(String(initialQuantity))
+	const [company, setCompany] = useState('')
+	const [street, setStreet] = useState('')
+	const [city, setCity] = useState('')
+	const [zip, setZip] = useState('')
+	const [contactName, setContactName] = useState('')
+	const [phone, setPhone] = useState('')
+	const [note, setNote] = useState('')
 
 	const quantity = useMemo(() => parseQuantity(quantityRaw), [quantityRaw])
+	const effectiveMaterialId = materialId || (materialOptions[0]?.id ?? '')
+	const selectedMaterial = useMemo(
+		() => materialOptions.find((option) => option.id === effectiveMaterialId) ?? null,
+		[effectiveMaterialId, materialOptions],
+	)
+	// `size` is the caller's output description when it supplies one, and a collected
+	// field otherwise — the documented `print_specs` rule is that it is non-blank, and
+	// `outputDescription` is optional, so it cannot be the only source.
+	const derivedSize = outputDescription?.trim() ?? ''
+	const size = derivedSize || sizeRaw.trim()
 	// Surface the quantity error only once the user has typed something invalid
 	// (not on the initial blank state — that would scream before any input).
 	const quantityInvalid = quantityRaw.trim().length > 0 && quantity === null
 
 	const reset = (): void => {
-		setSize('')
-		setMaterial('')
-		setQuantityRaw('')
-		setAddress('')
+		setMaterialId('')
+		setSizeRaw('')
+		setQuantityRaw(String(initialQuantity))
+		setCompany('')
+		setStreet('')
+		setCity('')
+		setZip('')
+		setContactName('')
+		setPhone('')
+		setNote('')
 	}
 
 	const canConfirm =
 		!isPending &&
-		size.trim().length > 0 &&
-		material.trim().length > 0 &&
+		size.length > 0 &&
 		quantity !== null &&
-		address.trim().length > 0
+		selectedMaterial !== null &&
+		company.trim().length > 0 &&
+		street.trim().length > 0 &&
+		city.trim().length > 0 &&
+		zip.trim().length > 0 &&
+		contactName.trim().length > 0 &&
+		phone.trim().length > 0
 
 	const handleOpenChange = (open: boolean): void => {
 		if (!open) reset()
@@ -132,85 +229,255 @@ export function SendToPrintModal({
 	}
 
 	const handleConfirm = (): void => {
-		if (!canConfirm || quantity === null) return
+		if (!canConfirm || quantity === null || selectedMaterial === null) return
+		const address = [company, street, `${zip} ${city}`, contactName, phone]
+			.map((part) => part.trim())
+			.filter(Boolean)
+			.join(', ')
 		onConfirm({
-			size: size.trim(),
-			material: material.trim(),
+			size,
+			material: selectedMaterial.label.trim(),
 			quantity,
-			address: address.trim(),
+			address,
+			company: company.trim(),
+			street: street.trim(),
+			city: city.trim(),
+			zip: zip.trim(),
+			contactName: contactName.trim(),
+			phone: phone.trim(),
+			note: note.trim(),
 		})
 	}
 
+	const surfaceClassName = surfaceVariant === 'dashboard'
+		? 'box-border flex h-[min(90vh,72rem)] max-h-[min(90vh,72rem)] w-[min(50vw,72rem)] max-w-[min(50vw,72rem)] flex-col overflow-hidden p-0 max-[900px]:h-[90vh] max-[900px]:w-[92vw] max-[900px]:max-w-[92vw]'
+		: 'box-border flex h-[min(90vh,72rem)] max-h-[min(90vh,72rem)] w-[min(90vw,51rem)] max-w-[min(90vw,51rem)] flex-col overflow-hidden p-0 max-[900px]:h-[90vh] max-[900px]:w-[92vw] max-[900px]:max-w-[92vw]'
+
 	return (
-		<Dialog
-			title={labels.title}
-			data-testid={testId ?? 'delivery-print-modal'}
+		<ModalOverlay
 			isOpen={isOpen}
 			onOpenChange={handleOpenChange}
+			isDismissable
 		>
-			<div className="flex flex-col gap-3">
-				<p className="text-small text-fg-muted">{labels.body}</p>
-
-				<Input
-					label={labels.sizeLabel}
-					placeholder={labels.sizePlaceholder}
-					value={size}
-					onChange={setSize}
-					data-testid="delivery-print-size"
-				/>
-				<Input
-					label={labels.materialLabel}
-					placeholder={labels.materialPlaceholder}
-					value={material}
-					onChange={setMaterial}
-					data-testid="delivery-print-material"
-				/>
-				<Input
-					label={labels.quantityLabel}
-					placeholder={labels.quantityPlaceholder}
-					value={quantityRaw}
-					onChange={setQuantityRaw}
-					type="number"
-					inputMode="numeric"
-					isInvalid={quantityInvalid}
-					errorMessage={quantityInvalid ? labels.quantityError : undefined}
-					data-testid="delivery-print-quantity"
-				/>
-				<Input
-					label={labels.addressLabel}
-					placeholder={labels.addressPlaceholder}
-					value={address}
-					onChange={setAddress}
-					data-testid="delivery-print-address"
-				/>
-
-				{error ? (
-					<p data-testid="delivery-print-error" role="alert" className="text-small text-danger">
-						{error}
-					</p>
-				) : null}
-
-				<div className="mt-2 flex justify-end gap-2">
-					<Button
-						variant="secondary"
-						size="sm"
-						isDisabled={isPending}
-						onPress={() => handleOpenChange(false)}
-					>
-						{labels.cancel}
-					</Button>
-					<Button
-						data-testid="delivery-print-confirm"
-						variant="primary"
-						size="sm"
-						isDisabled={!canConfirm}
-						isPending={isPending}
-						onPress={handleConfirm}
-					>
-						{isPending ? labels.submitting : labels.confirm}
-					</Button>
-				</div>
-			</div>
-		</Dialog>
+			<ModalSurface className={surfaceClassName}>
+				<ModalDialog
+					aria-labelledby={titleId}
+					aria-describedby={descriptionId}
+					data-testid={testId ?? 'delivery-print-modal'}
+					className="flex min-h-0 flex-1 flex-col outline-none"
+				>
+					{({ close }) => (
+						<form
+							className="flex min-h-0 flex-1 flex-col gap-6 py-10"
+							onSubmit={(event) => {
+								event.preventDefault()
+								handleConfirm()
+							}}
+							noValidate
+						>
+							<div className="mx-auto box-border w-full max-w-[50rem] px-5">
+								<div className="flex items-start justify-between gap-4">
+									<h2 id={titleId} className="m-0 max-w-[19ch] text-heading1 font-medium leading-[1.02] tracking-tight text-fg">
+										{labels.title}
+									</h2>
+									<button
+										type="button"
+										onClick={close}
+										aria-label={labels.closeLabel ?? 'Close'}
+										className="-mr-1 -mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+									>
+										<svg
+											width="18"
+											height="18"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth="2"
+											strokeLinecap="round"
+											aria-hidden="true"
+										>
+											<path d="M6 6l12 12M18 6 6 18" />
+										</svg>
+									</button>
+								</div>
+							</div>
+
+							<div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+								<div className="mx-auto box-border flex w-full max-w-[50rem] flex-col gap-6 px-5">
+									<div className="flex flex-col gap-1">
+										<p className="m-0 text-body font-medium text-fg">
+											{labels.sectionLabel ?? labels.title}
+										</p>
+										<p id={descriptionId} className="m-0 max-w-[48ch] text-body font-normal text-fg">
+											{labels.body}
+										</p>
+									</div>
+
+									<div className="flex flex-col gap-1 rounded-md bg-surface-card p-3 text-caption leading-4 text-fg-muted">
+										<span>{outputName?.trim() || labels.outputName || labels.sizeLabel}</span>
+										{outputDescription?.trim() || labels.outputDescription || labels.sizePlaceholder ? (
+											<strong className="font-medium text-fg">
+												{outputDescription?.trim() || labels.outputDescription || labels.sizePlaceholder}
+											</strong>
+										) : null}
+									</div>
+
+									<div className="grid gap-3">
+										{derivedSize ? null : (
+											<Input
+												label={labels.sizeLabel}
+												placeholder={labels.sizePlaceholder}
+												value={sizeRaw}
+												onChange={setSizeRaw}
+												data-testid="delivery-print-size"
+											/>
+										)}
+
+										<Input
+											label={labels.quantityLabel}
+											placeholder={labels.quantityPlaceholder}
+											value={quantityRaw}
+											onChange={setQuantityRaw}
+											type="number"
+											inputMode="numeric"
+											isInvalid={quantityInvalid}
+											errorMessage={quantityInvalid ? labels.quantityError : undefined}
+											data-testid="delivery-print-quantity"
+										/>
+
+										{materialOptions.length > 1 ? (
+											<label className="grid gap-1.5 text-small font-medium text-fg">
+												<span>{labels.materialLabel}</span>
+												<select
+													value={effectiveMaterialId}
+													onChange={(event) => setMaterialId(event.currentTarget.value)}
+													data-testid="delivery-print-material"
+													className="h-12 rounded-md border border-border bg-surface px-3 text-body font-normal text-fg outline-none transition-colors hover:border-border-muted focus:border-fg focus:ring-2 focus:ring-ring"
+												>
+													{materialOptions.map((option) => (
+														<option key={option.id} value={option.id}>
+															{option.label}
+														</option>
+													))}
+												</select>
+											</label>
+										) : selectedMaterial ? (
+											<div
+												data-testid="delivery-print-material"
+												className="flex flex-col gap-1 rounded-md bg-surface-card p-3 text-caption leading-4 text-fg-muted"
+											>
+												<span>{labels.materialLabel}</span>
+												<strong className="font-medium text-fg">{selectedMaterial.label}</strong>
+											</div>
+										) : (
+											<p
+												role="note"
+												data-testid="delivery-print-material"
+												className="m-0 rounded-md bg-surface-card p-3 text-caption leading-4 text-fg-muted"
+											>
+												{labels.noMaterialConfigured ?? labels.materialPlaceholder}
+											</p>
+										)}
+
+										<Input
+											label={labels.companyLabel ?? labels.addressLabel}
+											placeholder={labels.companyPlaceholder ?? labels.addressPlaceholder}
+											value={company}
+											onChange={setCompany}
+											data-testid="delivery-print-company"
+										/>
+										<Input
+											label={labels.streetLabel ?? labels.addressLabel}
+											placeholder={labels.streetPlaceholder ?? labels.addressPlaceholder}
+											value={street}
+											onChange={(value) => setStreet(capitalizeFirstAddressLetter(value))}
+											data-testid="delivery-print-street"
+										/>
+										<div className="grid gap-4 sm:grid-cols-[1fr_10rem]">
+											<Input
+												label={labels.cityLabel ?? labels.addressLabel}
+												placeholder={labels.cityPlaceholder ?? labels.addressPlaceholder}
+												value={city}
+												onChange={setCity}
+												data-testid="delivery-print-city"
+											/>
+											<Input
+												label={labels.zipLabel ?? labels.addressLabel}
+												placeholder={labels.zipPlaceholder ?? labels.addressPlaceholder}
+												value={zip}
+												onChange={setZip}
+												data-testid="delivery-print-zip"
+											/>
+										</div>
+										<div className="grid gap-4 sm:grid-cols-2">
+											<Input
+												label={labels.contactNameLabel ?? labels.addressLabel}
+												placeholder={labels.contactNamePlaceholder ?? labels.addressPlaceholder}
+												value={contactName}
+												onChange={setContactName}
+												data-testid="delivery-print-contact"
+											/>
+											<Input
+												label={labels.phoneLabel ?? labels.addressLabel}
+												placeholder={labels.phonePlaceholder ?? labels.addressPlaceholder}
+												value={phone}
+												onChange={setPhone}
+												type="tel"
+												data-testid="delivery-print-phone"
+											/>
+										</div>
+										<Input
+											label={labels.noteLabel ?? labels.addressLabel}
+											placeholder={labels.notePlaceholder ?? labels.addressPlaceholder}
+											value={note}
+											onChange={setNote}
+											data-testid="delivery-print-note"
+										/>
+									</div>
+
+									{error ? (
+										<p data-testid="delivery-print-error" role="alert" className="m-0 text-small text-danger">
+											{error}
+										</p>
+									) : null}
+								</div>
+							</div>
+
+							<div className="sticky bottom-0 mt-0 w-full border-border border-t bg-surface pt-4">
+								<div className="mx-auto box-border flex w-full max-w-[50rem] items-center justify-between gap-4 px-5">
+									<div className="flex min-w-0 flex-col gap-1 text-small text-fg-muted">
+										{/* No fallback: borrowing `sizeLabel` / `materialPlaceholder` put
+										    "Size" and "e.g. Matte 250g" in a money slot for every consumer
+										    that had not adopted the new label set. */}
+										{labels.priceEyebrow ? <span>{labels.priceEyebrow}</span> : null}
+										{labels.priceIdle ? <span className="truncate">{labels.priceIdle}</span> : null}
+									</div>
+									<div className="flex shrink-0 justify-end gap-2">
+										<Button
+											variant="secondary"
+											size="sm"
+											isDisabled={isPending}
+											onPress={() => handleOpenChange(false)}
+										>
+											{labels.cancel}
+										</Button>
+										<Button
+											data-testid="delivery-print-confirm"
+											variant="primary"
+											size="sm"
+											isDisabled={!canConfirm}
+											isPending={isPending}
+											onPress={handleConfirm}
+										>
+											{isPending ? labels.submitting : labels.confirm}
+										</Button>
+									</div>
+								</div>
+							</div>
+						</form>
+					)}
+				</ModalDialog>
+			</ModalSurface>
+		</ModalOverlay>
 	)
 }

package/src/components/dialog-action-button.examples.tsx

@@ -0,0 +1,7 @@
+import { DialogActionButton } from './dialog-action-button'
+export const examples = {
+	default: () => <DialogActionButton>Review Mapping</DialogActionButton>,
+	variants: () => <><DialogActionButton variant="secondary">Change CSV</DialogActionButton><DialogActionButton>Bind CSV</DialogActionButton></>,
+	states: () => <><DialogActionButton isDisabled>Bind CSV</DialogActionButton><DialogActionButton isPending>Binding CSV…</DialogActionButton></>,
+}
+export const meta = { category: 'Primitives', description: 'Source UI dialog action palette, typography and pointer/keyboard states, independent of dashboard CTAs.' }

package/src/components/dialog-action-button.tsx

@@ -0,0 +1,22 @@
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+export const DIALOG_ACTION_VARIANTS = ['primary', 'secondary'] as const
+export type DialogActionVariant = (typeof DIALOG_ACTION_VARIANTS)[number]
+
+/** Source UI dialog action, distinct from the frontend dashboard CTA Button.
+ * Shares Button's semantic palette (brand-primary / surface-card) so the two never
+ * drift apart; only the geometry — pill radius, 24/12 padding — is specific here.
+ * Keyboard focus retains the shared RAC treatment.
+ */
+export const DialogActionButton = uic(AriaButton, {
+	displayName: 'DialogActionButton',
+	baseClass: 'inline-flex items-center justify-center rounded-full px-6 py-3 text-body font-medium leading-5 cursor-pointer transition-colors duration-200 motion-reduce:transition-none outline-none ' +
+		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
+		'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[pending]:cursor-progress',
+	variants: { variant: {
+		primary: 'border-0 bg-brand-primary text-fg-inverted data-[hovered]:bg-neutral-600 data-[pressed]:bg-brand-primary',
+		secondary: 'border border-border bg-surface-card text-fg data-[hovered]:bg-surface-muted data-[hovered]:border-border-muted data-[pressed]:bg-surface-muted',
+	} },
+	defaultVariants: { variant: 'primary' },
+})

package/src/components/dialog.tsx

@@ -32,7 +32,7 @@ export const ModalOverlay = uic(RACModalOverlay, {
 export const ModalSurface = uic(RACModal, {
 	displayName: 'DialogModal',
 	baseClass:
-		'rounded-lg bg-surface p-5 outline-none shadow-modal-surface ' +
+		'relative rounded-lg bg-surface p-5 outline-none shadow-modal-surface ' +
 		'data-[entering]:animate-modal-surface-in data-[exiting]:animate-modal-surface-out',
 })
 
@@ -92,6 +92,10 @@ export type DialogProps = RACDialogProps & {
 	badge?: ReactNode
 	/** Width preset — `md` (default) for forms; `sm` for tight confirms; `lg`/`xl` for wide stepper content. */
 	size?: DialogSize
+	/** Optional form-specific width cap; the viewport width preset still applies. */
+	maxWidth?: number
+	/** Responsive intrinsic detail envelope, independent of title sizing. */
+	widthPreset?: 'responsive-detail' | 'custom-task-detail'
 	children: ReactNode | ((opts: { close: () => void }) => ReactNode)
 	/**
 	 * Controlled open state. Provide together with `onOpenChange` to drive the
@@ -115,6 +119,8 @@ export const Dialog = ({
 	badge,
 	// gs DialogContent defaults to `md` (586px form width).
 	size = 'md',
+	maxWidth,
+	widthPreset,
 	children,
 	isOpen,
 	defaultOpen,
@@ -126,6 +132,11 @@ export const Dialog = ({
 	// `full` is a fixed-height flex canvas: the body fills and scrolls internally so
 	// the header (+ a footer the content pins) stay put. Other sizes are content-height.
 	const isFlex = size === 'full'
+	// The Manager header treatment — block layout, floated close, label-ramp
+	// description — belongs to the OPT-IN width presets, not to "any dialog that
+	// isn't `full`". Gating it on `isFlex` made every sm/md/lg/xl dialog render a
+	// display-scale title and stranded `TITLE_CLASS` on the single `full` size.
+	const isCompact = widthPreset !== undefined
 	return (
 		// `isOpen`/`defaultOpen`/`onOpenChange` go to the RAC ModalOverlay: when
 		// provided the dialog is controlled (renders independently of a DialogTrigger);
@@ -142,19 +153,28 @@ export const Dialog = ({
 			onOpenChange={onOpenChange}
 			isDismissable={isDismissable}
 		>
-			<ModalSurface className={SIZE_CLASS[size]}>
+			<ModalSurface
+				className={
+					widthPreset === 'responsive-detail'
+						? 'w-[90vw] max-w-125 md:max-w-150 lg:max-w-160 xl:max-w-180 max-h-[85vh] overflow-y-auto'
+						: widthPreset === 'custom-task-detail'
+							? 'w-[90vw] min-w-[400px] max-w-[500px] md:max-w-[600px] lg:max-w-[640px] xl:max-w-[720px] max-h-[85vh] overflow-y-auto max-[460px]:min-w-0'
+							: SIZE_CLASS[size]
+				}
+				style={maxWidth === undefined ? undefined : { maxWidth }}
+			>
 				<ModalDialog
 					{...props}
 					className={isFlex ? 'flex min-h-0 flex-1 flex-col outline-none' : 'outline-none'}
 				>
 					{(renderProps) => (
 						<>
-							<div className="mb-4 flex shrink-0 items-start justify-between gap-4">
+							<div className={isCompact ? 'block' : 'mb-4 flex shrink-0 items-start justify-between gap-4'}>
 								{title || description ? (
 									<div className="min-w-0">
 										{title ? (
 											<div className="flex items-center gap-2">
-												<Heading slot="title" className={`${TITLE_CLASS[size]} text-fg`}>
+												<Heading slot="title" className={isCompact ? 'm-0 mb-4 max-w-5/6 text-heading1 font-medium tracking-normal text-fg' : `${TITLE_CLASS[size]} text-fg`}>
 													{title}
 												</Heading>
 												{badge ? (
@@ -165,8 +185,8 @@ export const Dialog = ({
 											</div>
 										) : null}
 										{description ? (
-											// gs `.description` = base 16px, text-secondary (=fg).
-											<p className="mt-1 text-body text-fg">{description}</p>
+											// Source ordinary descriptions use the 14px/18px label ramp.
+											<p className={isCompact ? 'm-0 mb-6 max-w-5/6 text-small leading-4.5 font-normal text-fg-workflow-muted' : 'mt-1 text-body text-fg'}>{description}</p>
 										) : null}
 									</div>
 								) : (
@@ -179,19 +199,19 @@ export const Dialog = ({
 									// gs close: 32px square (`h-8 w-8`), medium radius (`rounded-md`),
 									// tertiary icon color (`text-fg-subtle`) → primary (`text-fg`) +
 									// subtle hover bg on hover. Smooth color transition.
-									className="-mr-1 -mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+									className={`${isCompact ? 'absolute top-[calc(var(--spacing)*3.375)] end-4 max-md:end-3' : '-mr-1 -mt-1'} inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none`}
 								>
 									<svg
-										width="18"
-										height="18"
-										viewBox="0 0 24 24"
+										width={isCompact ? 15 : 18}
+										height={isCompact ? 15 : 18}
+										viewBox={isCompact ? '0 0 15 15' : '0 0 24 24'}
 										fill="none"
-										stroke="currentColor"
+										stroke={isCompact ? undefined : 'currentColor'}
 										strokeWidth="2"
 										strokeLinecap="round"
 										aria-hidden="true"
 									>
-										<path d="M6 6l12 12M18 6 6 18" />
+										<path fill={isCompact ? 'currentColor' : undefined} d={isCompact ? 'M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z' : 'M6 6l12 12M18 6 6 18'} />
 									</svg>
 								</button>
 							</div>

package/src/components/document-upload-panel.examples.tsx

@@ -0,0 +1,12 @@
+import { DocumentUploadPanel } from './document-upload-panel'
+
+const copy = { title: 'CSV file', actionLabel: 'Select CSV', helperText: 'No CSV file selected yet.\nSelect the CSV file for content mapping.' }
+export const examples = {
+	default: () => <DocumentUploadPanel {...copy} />,
+	dragging: () => <DocumentUploadPanel {...copy} isDragging />,
+	disabled: () => <DocumentUploadPanel {...copy} isDisabled />,
+}
+export const meta = {
+	category: 'Form',
+	description: 'Upload tile with a centred keyboard-accessible action and a native drop surface. Focus/hover use the shared React Aria button; caller owns file validation.',
+}