@liiift-studio/deploy-vercel-from-sanity 1.2.0 → 1.2.1

package/src/components/DeployTargetForm.tsx

@@ -1,172 +0,0 @@
-// Dialog form for creating and editing vercel_deploy documents
-import { useId, useState, useCallback } from 'react'
-import { useClient } from 'sanity'
-import { CheckmarkCircleIcon } from '../icons'
-import type { DeployTarget } from '../types'
-import { Box, Button, Card, Dialog, Flex, Label, Stack, Switch, Text, TextInput } from '../compat'
-
-const VERCEL_HOOK_RE = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\//
-
-interface DeployTargetFormProps {
-	/** When provided, form is in edit mode; otherwise create mode */
-	initial?: DeployTarget
-	onSaved: () => void
-	onClose: () => void
-}
-
-export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetFormProps) {
-	const client = useClient({ apiVersion: '2025-01-01' })
-	const isEdit = Boolean(initial)
-
-	// Ids for label/description association. useId keeps them unique inside a published
-	// plugin, where a hardcoded id can collide with anything the host Studio renders.
-	const nameId      = useId()
-	const urlId       = useId()
-	const urlErrorId  = useId()
-	const urlHelpId   = useId()
-	const teamId_     = useId()
-	const teamHelpId  = useId()
-	const disableId   = useId()
-
-	const [name, setName]                       = useState(initial?.name ?? '')
-	const [url, setUrl]                         = useState(initial?.url ?? '')
-	const [teamId, setTeamId]                   = useState(initial?.teamId ?? '')
-	const [disableDelete, setDisableDelete]     = useState(initial?.disableDeleteAction ?? false)
-	const [saving, setSaving]                   = useState(false)
-	const [error, setError]                     = useState<string | null>(null)
-
-	const urlValid = !url || VERCEL_HOOK_RE.test(url.trim())
-	const canSave  = name.trim() && url.trim() && urlValid
-
-	const save = useCallback(async () => {
-		if (!canSave) return
-		setSaving(true)
-		setError(null)
-		const fields: { name: string; url: string; teamId: string | null; disableDeleteAction: boolean } = {
-			name:                name.trim(),
-			url:                 url.trim(),
-			teamId:              teamId.trim() || null,
-			disableDeleteAction: disableDelete,
-		}
-		try {
-			if (isEdit && initial) {
-				await client.patch(initial._id).set(fields).commit()
-			} else {
-				await client.create({ _type: 'vercel_deploy', ...fields })
-			}
-			onSaved()
-		} catch (err) {
-			setError(err instanceof Error ? err.message : 'Save failed')
-		} finally {
-			setSaving(false)
-		}
-	}, [canSave, isEdit, initial, client, name, url, teamId, disableDelete, onSaved])
-
-	return (
-		<Dialog
-			header={isEdit ? `Edit "${initial?.name}"` : 'Add deploy target'}
-			id="deploy-target-form"
-			onClose={onClose}
-			width={1}
-			footer={
-				<Flex padding={3} gap={2} justify="flex-end">
-					<Button text="Cancel" mode="ghost" onClick={onClose} style={{ cursor: 'pointer' }} />
-					<Button
-						text={isEdit ? 'Save changes' : 'Add target'}
-						tone="primary"
-						icon={CheckmarkCircleIcon}
-						loading={saving}
-						disabled={!canSave || saving}
-						onClick={save}
-						style={{ cursor: 'pointer' }}
-					/>
-				</Flex>
-			}
-		>
-			<Box padding={4}>
-				<Stack space={4}>
-
-					{/* Name. Label carries `as="label"` — @sanity/ui's Label renders a div otherwise,
-					    so the input would have no accessible name. */}
-					<Stack space={2}>
-						<Label as="label" size={1} htmlFor={nameId}>
-							Name <span aria-hidden="true">*</span>
-						</Label>
-						<TextInput
-							id={nameId}
-							required
-							aria-required="true"
-							value={name}
-							onChange={e => setName((e.target as HTMLInputElement).value)}
-							placeholder="Production"
-						/>
-					</Stack>
-
-					{/* Deploy hook URL */}
-					<Stack space={2}>
-						<Label as="label" size={1} htmlFor={urlId}>
-							Deploy hook URL <span aria-hidden="true">*</span>
-						</Label>
-						<TextInput
-							id={urlId}
-							required
-							aria-required="true"
-							aria-invalid={Boolean(url) && !urlValid}
-							aria-describedby={`${urlHelpId}${url && !urlValid ? ` ${urlErrorId}` : ''}`}
-							value={url}
-							onChange={e => setUrl((e.target as HTMLInputElement).value)}
-							placeholder="https://api.vercel.com/v1/integrations/deploy/…"
-						/>
-						{url && !urlValid && (
-							<Card tone="critical" padding={2} radius={2} role="alert">
-								<Text id={urlErrorId} size={1}>
-									Must be a Vercel deploy hook URL (api.vercel.com/v1/integrations/deploy/…)
-								</Text>
-							</Card>
-						)}
-						<Text id={urlHelpId} size={0} muted>
-							Vercel dashboard → Project → Settings → Git → Deploy Hooks
-						</Text>
-					</Stack>
-
-					{/* Team ID */}
-					<Stack space={2}>
-						<Label as="label" size={1} htmlFor={teamId_}>
-							Team ID <span style={{ opacity: 0.5, fontWeight: 'normal' }}>— optional</span>
-						</Label>
-						<TextInput
-							id={teamId_}
-							aria-describedby={teamHelpId}
-							value={teamId}
-							onChange={e => setTeamId((e.target as HTMLInputElement).value)}
-							placeholder="team_xxxxxxxx"
-						/>
-						<Text id={teamHelpId} size={0} muted>
-							Required for team-owned Vercel projects. Find it at Vercel → Settings → General → Team ID (starts with <code>team_</code>).
-						</Text>
-					</Stack>
-
-					{/* Disable delete */}
-					<Flex align="center" gap={3}>
-						<Switch
-							checked={disableDelete}
-							onChange={e => setDisableDelete((e.target as HTMLInputElement).checked)}
-							id={disableId}
-						/>
-						<Stack space={1}>
-							<Label as="label" size={1} htmlFor={disableId}>Disable delete action</Label>
-							<Text size={0} muted>Hides the delete button for this target in the studio.</Text>
-						</Stack>
-					</Flex>
-
-					{error && (
-						<Card tone="critical" padding={3} radius={2}>
-							<Text size={1}>{error}</Text>
-						</Card>
-					)}
-
-				</Stack>
-			</Box>
-		</Dialog>
-	)
-}

package/src/components/DeployTool.tsx

@@ -1,318 +0,0 @@
-// Main deploy tool — fetches targets + token, renders per-project cards
-import { useState, useEffect, useCallback } from 'react'
-import { useClient } from 'sanity'
-import { TokenIcon, TrashIcon, WarningOutlineIcon, AddIcon } from '../icons'
-import { DeployItem } from './DeployItem'
-import { TokenSetup } from './TokenSetup'
-import { DeployTargetForm } from './DeployTargetForm'
-import { VERSION } from '../version'
-import type { DeployTarget } from '../types'
-import { Box, Button, Card, Dialog, Flex, Heading, Spinner, Stack, Text, ToastViewport, useToast } from '../compat'
-
-const TOKEN_QUERY   = `*[_id == "config.vercelDeploy"][0].accessToken`
-// `useClient` hands back a raw-perspective client, so drafts are returned alongside published
-// documents. `vercel_deploy` is a registered type and therefore editable from Structure, which
-// would otherwise render two cards for the same target.
-const TARGETS_QUERY = `*[_type == "vercel_deploy" && !(_id in path("drafts.**"))] | order(_createdAt asc)`
-
-export function DeployTool() {
-	const client = useClient({ apiVersion: '2025-01-01' })
-	const toast  = useToast()
-
-	const [token, setToken]                   = useState<string | null>(null)
-	const [targets, setTargets]               = useState<DeployTarget[]>([])
-	const [loading, setLoading]               = useState(true)
-	const [showTokenSetup, setShowTokenSetup] = useState(false)
-	const [showCreateForm, setShowCreateForm] = useState(false)
-	const [pendingEdit, setPendingEdit]       = useState<DeployTarget | null>(null)
-	const [pendingDelete, setPendingDelete]   = useState<DeployTarget | null>(null)
-	const [deleting, setDeleting]             = useState(false)
-
-	// ── Fetch token + targets ─────────────────────────────────────────────────
-	const load = useCallback(async () => {
-		setLoading(true)
-		try {
-			const [fetchedToken, fetchedTargets] = await Promise.all([
-				client.fetch<string | null>(TOKEN_QUERY),
-				client.fetch<DeployTarget[]>(TARGETS_QUERY),
-			])
-			setToken(fetchedToken ?? null)
-			setTargets(fetchedTargets)
-		} catch (err) {
-			console.error('deploy-vercel-from-sanity: load error', err)
-		} finally {
-			setLoading(false)
-		}
-	}, [client])
-
-	useEffect(() => { load() }, [load])
-
-	// Inject responsive styles once on mount
-	useEffect(() => {
-		// Reference-counted: with two tools mounted, the one that skipped creation must not
-		// remove the stylesheet the other is still using.
-		const existing = document.getElementById('dvfs-styles')
-		if (existing) {
-			const n = Number(existing.dataset.refs ?? '1') + 1
-			existing.dataset.refs = String(n)
-			return () => {
-				const left = Number(existing.dataset.refs ?? '1') - 1
-				existing.dataset.refs = String(left)
-				if (left <= 0) existing.remove()
-			}
-		}
-		const style = document.createElement('style')
-		style.id = 'dvfs-styles'
-		style.textContent = `
-			@media (max-width: 768px) {
-				.dvfs-header { flex-wrap: wrap !important; row-gap: 8px !important; }
-				.dvfs-header-actions { width: 100% !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
-				.dvfs-grid { grid-template-columns: 1fr !important; }
-				.dvfs-card-flex { flex-direction: column !important; }
-				.dvfs-deploy-col { width: 100% !important; align-self: auto !important; }
-				.dvfs-deploy-col button { border-radius: 3px !important; }
-			}
-			@keyframes dvfs-open {
-				from { opacity: 0; transform: translateY(-4px); }
-				to   { opacity: 1; transform: translateY(0); }
-			}
-			.dvfs-accordion-content {
-				animation: dvfs-open 0.15s ease-out;
-			}
-		`
-		document.head.appendChild(style)
-		style.dataset.refs = '1'
-		return () => {
-			const left = Number(style.dataset.refs ?? '1') - 1
-			style.dataset.refs = String(left)
-			if (left <= 0) style.remove()
-		}
-	}, [])
-
-	// Live subscription — update targets when documents change
-	useEffect(() => {
-		const sub = client
-			.listen<DeployTarget>(TARGETS_QUERY)
-			.subscribe(() => {
-				client.fetch<DeployTarget[]>(TARGETS_QUERY).then(setTargets).catch(err => {
-					console.error('deploy-vercel-from-sanity: subscription refresh error', err)
-				})
-			})
-		return () => sub.unsubscribe()
-	}, [client])
-
-	// ── Delete target ─────────────────────────────────────────────────────────
-	const confirmDelete = useCallback(async () => {
-		if (!pendingDelete) return
-		setDeleting(true)
-		try {
-			// Remove the draft counterpart as well; deleting only the published id leaves the
-			// target behind and it reappears on the next load.
-			await client.delete(pendingDelete._id)
-			await client.delete(`drafts.${pendingDelete._id}`).catch(() => {})
-			setTargets(prev => prev.filter(t => t._id !== pendingDelete._id))
-			toast.push({ status: 'success', title: `Deleted "${pendingDelete.name}"` })
-		} catch (err) {
-			toast.push({ status: 'error', title: 'Delete failed', description: String(err) })
-		} finally {
-			setDeleting(false)
-			setPendingDelete(null)
-		}
-	}, [client, pendingDelete, toast])
-
-	// ── Render ────────────────────────────────────────────────────────────────
-	if (loading) {
-		return (
-			<Card height="fill" tone="transparent">
-				<Flex align="center" justify="center" height="fill">
-					<Spinner muted />
-				</Flex>
-			</Card>
-		)
-	}
-
-	return (
-		<Card height="fill" tone="transparent">
-			<Box padding={5}>
-				<Stack space={5}>
-
-					{/* ── Header ──────────────────────────────────────────────── */}
-					<Flex align="center" justify="space-between" className="dvfs-header">
-						<Heading size={2}>Deploy with Vercel</Heading>
-						<Flex align="center" gap={3} className="dvfs-header-actions">
-							<Button
-								text={token ? 'Token connected' : 'Connect API token'}
-								mode="ghost"
-								icon={TokenIcon}
-								fontSize={1}
-								tone={token ? 'positive' : 'caution'}
-								onClick={() => setShowTokenSetup(true)}
-								style={{ cursor: 'pointer' }}
-							/>
-							<Button
-								text="Add target"
-								mode="ghost"
-								icon={AddIcon}
-								fontSize={1}
-								onClick={() => setShowCreateForm(true)}
-								style={{ cursor: 'pointer' }}
-							/>
-						</Flex>
-					</Flex>
-
-					{/* ── No-token upgrade banner ──────────────────────────────── */}
-					{!token && (
-						<Card padding={4} radius={2} tone="caution" shadow={1}>
-							<Flex align="center" justify="space-between" gap={4}>
-								<Stack space={2}>
-									<Text size={1} weight="semibold">Deploy status is not connected</Text>
-									<Text size={1} muted>
-										You can trigger deploys now. Connect a Vercel API token to also see
-										deployment status, build logs, history, and commit metadata.
-									</Text>
-								</Stack>
-								<Button
-									text="Connect"
-									tone="caution"
-									fontSize={1}
-									onClick={() => setShowTokenSetup(true)}
-									style={{ cursor: 'pointer', flexShrink: 0 }}
-								/>
-							</Flex>
-						</Card>
-					)}
-
-					{/* ── No targets ──────────────────────────────────────────── */}
-					{targets.length === 0 && (
-						<Card padding={5} radius={2} tone="transparent" shadow={1}>
-							<Stack space={4} style={{ textAlign: 'center' }}>
-								<Text size={2} weight="semibold">No deploy targets configured</Text>
-								<Text size={1} muted>
-									Add a deploy target using the button above, or create a{' '}
-									<code>vercel_deploy</code> document directly in the dataset.
-								</Text>
-								<Flex justify="center">
-									<Button
-										text="Add deploy target"
-										tone="primary"
-										icon={AddIcon}
-										onClick={() => setShowCreateForm(true)}
-										style={{ cursor: 'pointer' }}
-									/>
-								</Flex>
-							</Stack>
-						</Card>
-					)}
-
-					{/* ── Deploy targets — responsive 2-col grid ──────────────── */}
-					{targets.length > 0 && (
-						<div className="dvfs-grid" style={{
-							display: 'grid',
-							gridTemplateColumns: 'repeat(auto-fill, minmax(min(540px, 100%), 1fr))',
-							gap: '16px',
-							alignItems: 'start',
-						}}>
-							{targets.map(target => (
-								<DeployItem
-									key={target._id}
-									target={target}
-									token={token ?? ''}
-									onDelete={setPendingDelete}
-									onEdit={setPendingEdit}
-								/>
-							))}
-						</div>
-					)}
-
-				</Stack>
-			</Box>
-
-			{/* ── Version watermark ──────────────────────────────────────────── */}
-			<Box
-				style={{
-					position: 'fixed',
-					bottom: 12,
-					right: 16,
-					opacity: 0.25,
-					pointerEvents: 'none',
-					userSelect: 'none',
-				}}
-			>
-				<Text size={0} muted>v{VERSION}</Text>
-			</Box>
-
-			{/* ── Token setup dialog ──────────────────────────────────────────── */}
-			{/* The token dialog is always dismissable. Withholding Cancel on first run —
-			    exactly when the user may not have a token to hand — made it a keyboard trap,
-			    since Sanity's Dialog holds focus and Escape was wired to the absent handler. */}
-			{showTokenSetup && (
-				<TokenSetup
-					onSaved={() => { setShowTokenSetup(false); load() }}
-					onCancel={() => setShowTokenSetup(false)}
-				/>
-			)}
-
-			{/* ── Create form ─────────────────────────────────────────────────── */}
-			{showCreateForm && (
-				<DeployTargetForm
-					onSaved={() => { setShowCreateForm(false); toast.push({ status: 'success', title: 'Deploy target added' }) }}
-					onClose={() => setShowCreateForm(false)}
-				/>
-			)}
-
-			{/* ── Edit form ───────────────────────────────────────────────────── */}
-			{pendingEdit && (
-				<DeployTargetForm
-					initial={pendingEdit}
-					onSaved={() => { setPendingEdit(null); toast.push({ status: 'success', title: 'Deploy target updated' }) }}
-					onClose={() => setPendingEdit(null)}
-				/>
-			)}
-
-			{/* ── Delete confirmation ─────────────────────────────────────────── */}
-			{pendingDelete && (
-				<Dialog
-					header="Delete deploy target?"
-					id="confirm-delete"
-					onClose={() => setPendingDelete(null)}
-					width={1}
-					footer={
-						<Flex padding={3} gap={2} justify="flex-end">
-							<Button
-								text="Cancel"
-								mode="ghost"
-								onClick={() => setPendingDelete(null)}
-								style={{ cursor: 'pointer' }}
-							/>
-							<Button
-								text="Delete"
-								tone="critical"
-								icon={TrashIcon}
-								loading={deleting}
-								disabled={deleting}
-								onClick={confirmDelete}
-								style={{ cursor: 'pointer' }}
-							/>
-						</Flex>
-					}
-				>
-					<Box padding={4}>
-						<Stack space={3}>
-							<Flex align="center" gap={2}>
-								<WarningOutlineIcon />
-								<Text size={2} weight="semibold">{pendingDelete.name}</Text>
-							</Flex>
-							<Text size={1} muted>
-								This removes the deploy target from the dataset. The Vercel deploy hook
-								itself is not affected.
-							</Text>
-						</Stack>
-					</Box>
-				</Dialog>
-			)}
-
-			{/* Fallback toast surface — renders nothing when @sanity/ui exports its own useToast */}
-			<ToastViewport />
-		</Card>
-	)
-}

package/src/components/StatusBadge.tsx

@@ -1,23 +0,0 @@
-// Status badge for a Vercel deployment state
-import { stateLabel } from '../lib/helpers'
-import type { VercelDeployState } from '../types'
-import { Badge, Flex, Spinner } from '../compat'
-
-interface StatusBadgeProps {
-	state: VercelDeployState | undefined
-	/** When true, shows a spinner alongside the label */
-	showSpinner?: boolean
-}
-
-export function StatusBadge({ state, showSpinner }: StatusBadgeProps) {
-	const { label, tone } = stateLabel(state)
-	const spinning = showSpinner && (state === 'QUEUED' || state === 'INITIALIZING' || state === 'BUILDING')
-	return (
-		<Flex align="center" gap={2}>
-			{spinning && <Spinner muted />}
-			<Badge tone={tone} padding={2}>
-				{label}
-			</Badge>
-		</Flex>
-	)
-}

package/src/components/TokenSetup.tsx

@@ -1,98 +0,0 @@
-// Vercel API token form — rendered inside a Dialog by DeployTool
-import { useId, useState, useCallback } from 'react'
-import { useClient } from 'sanity'
-import { CheckmarkCircleIcon } from '../icons'
-import { Button, Card, Dialog, Flex, Label, Stack, Text, TextInput } from '../compat'
-
-interface TokenSetupProps {
-	/** Called after the token is successfully saved */
-	onSaved: () => void
-	/** Called when the user dismisses — only available when a token already exists */
-	onCancel?: () => void
-}
-
-const TOKEN_DOC_ID = 'config.vercelDeploy'
-
-export function TokenSetup({ onSaved, onCancel }: TokenSetupProps) {
-	const tokenId = useId()
-	const client = useClient({ apiVersion: '2025-01-01' })
-	const [token, setToken] = useState('')
-	const [saving, setSaving] = useState(false)
-	const [error, setError] = useState<string | null>(null)
-
-	const save = useCallback(async () => {
-		if (!token.trim()) return
-		setSaving(true)
-		setError(null)
-		try {
-			await client.createOrReplace({
-				_id: TOKEN_DOC_ID,
-				_type: 'vercelDeploy.config',
-				accessToken: token.trim(),
-			})
-			onSaved()
-		} catch (err) {
-			setError(err instanceof Error ? err.message : 'Failed to save token')
-		} finally {
-			setSaving(false)
-		}
-	}, [client, token, onSaved])
-
-	return (
-		<Dialog
-			header="Connect Vercel API token"
-			id="token-setup"
-			onClose={onCancel}
-			width={1}
-			footer={
-				<Flex padding={3} gap={2} justify="flex-end">
-					{onCancel && (
-						<Button text="Cancel" mode="ghost" onClick={onCancel} style={{ cursor: 'pointer' }} />
-					)}
-					<Button
-						text="Save and connect"
-						tone="primary"
-						icon={CheckmarkCircleIcon}
-						loading={saving}
-						disabled={!token.trim() || saving}
-						onClick={save}
-						style={{ cursor: 'pointer' }}
-					/>
-				</Flex>
-			}
-		>
-			<Stack space={4} padding={4}>
-				<Stack space={3}>
-					<Text size={1} muted>
-						A Vercel API token lets this tool read deployment status, history, build logs,
-						and branch metadata. Without it you can still trigger deploys — you just won't
-						see any feedback.
-					</Text>
-					<Text size={1} muted>
-						Create one at <strong>vercel.com → Settings → Tokens</strong> with{' '}
-						<strong>Full Account</strong> scope. The token is stored in your Sanity dataset
-						and shared across all authenticated studio users.
-					</Text>
-				</Stack>
-
-				<Stack space={2}>
-					{/* A plain Text is not a label — @sanity/ui's Label needs `as="label"` to render one. */}
-					<Label as="label" size={1} htmlFor={tokenId}>Vercel API Token</Label>
-					<TextInput
-						id={tokenId}
-						value={token}
-						onChange={e => setToken((e.target as HTMLInputElement).value)}
-						placeholder="xxxxxxxxxxxxxxxxxxxxxxxx"
-						type="password"
-					/>
-				</Stack>
-
-				{error && (
-					<Card tone="critical" padding={3} radius={2} role="alert">
-						<Text size={1}>{error}</Text>
-					</Card>
-				)}
-			</Stack>
-		</Dialog>
-	)
-}

package/src/icons.tsx

@@ -1,78 +0,0 @@
-// Version-agnostic access to @sanity/icons — named exports on v2/v3/v4, <Icon symbol> on v5+
-import { forwardRef } from 'react'
-import type { ComponentType, SVGProps } from 'react'
-import { ICONS, resolveExport } from './compat/resolve'
-
-/** Props every Sanity icon accepts — it renders a plain sized SVG. */
-export type IconProps = SVGProps<SVGSVGElement>
-
-/** An icon component, whichever shape the installed @sanity/icons exposes it in. */
-export type IconComponent = ComponentType<IconProps>
-
-/** Sizing of a Sanity icon glyph — 1em square on a 25-unit viewBox, matching @sanity/icons. */
-const GLYPH = { width: '1em', height: '1em', viewBox: '0 0 25 25', fill: 'none' } as const
-
-/**
- * Placeholder for when the installed @sanity/icons exposes neither shape. Holds
- * layout, draws nothing, and is hidden from assistive tech since every icon in
- * this plugin is decorative.
- */
-const MissingIcon = forwardRef<SVGSVGElement, IconProps>(function MissingIcon(props, ref) {
-	return <svg {...GLYPH} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" {...props} ref={ref} />
-})
-
-/** The v5+ `<Icon>` component, absent on icons v2, v3 and v4. */
-type SymbolIcon = ComponentType<IconProps & { symbol: string }>
-
-/**
- * The symbol map v5+ exposes alongside `Icon`. Used to check a symbol exists
- * before relying on it: `<Icon>` renders `null` for an unrecognised symbol, so
- * a renamed glyph would otherwise vanish silently rather than reaching
- * {@link MissingIcon}.
- */
-const SYMBOL_MAP = resolveExport<Record<string, unknown>>(ICONS, 'icons')
-
-/**
- * Resolve one glyph against whichever @sanity/icons the host Studio installed.
- * Always reads from the host package, so new and revised artwork is picked up on
- * the consumer's next @sanity/icons update without a release here.
- *
- * Note the named exports are not merely absent on v5 — they are declared `never`
- * with a deprecation note pointing at per-icon subpaths, so a static named import
- * is a type error as well as a runtime one. Subpaths only exist from v4.1.0,
- * which is why this resolves at runtime instead.
- *
- * @param name   Named export used by icons v2, v3 and v4, e.g. `RocketIcon`.
- * @param symbol Kebab-case symbol used by the v5+ `<Icon>` component, e.g. `rocket`.
- */
-function resolveIcon(name: string, symbol: string): IconComponent {
-	const named = resolveExport<IconComponent>(ICONS, name)
-	if (named) return named
-
-	const Icon = resolveExport<SymbolIcon>(ICONS, 'Icon')
-	if (!Icon) return MissingIcon
-	// An unknown symbol would render nothing at all; fall back to the sized placeholder instead.
-	if (SYMBOL_MAP && !(symbol in SYMBOL_MAP)) return MissingIcon
-
-	const Resolved = forwardRef<SVGSVGElement, IconProps>(function SanityIcon(props, ref) {
-		return <Icon symbol={symbol} {...props} ref={ref} />
-	})
-	Resolved.displayName = name
-	return Resolved
-}
-
-export const AddIcon = resolveIcon('AddIcon', 'add')
-export const CheckmarkCircleIcon = resolveIcon('CheckmarkCircleIcon', 'checkmark-circle')
-export const CheckmarkIcon = resolveIcon('CheckmarkIcon', 'checkmark')
-export const ChevronDownIcon = resolveIcon('ChevronDownIcon', 'chevron-down')
-export const ChevronUpIcon = resolveIcon('ChevronUpIcon', 'chevron-up')
-export const ClockIcon = resolveIcon('ClockIcon', 'clock')
-export const CloseIcon = resolveIcon('CloseIcon', 'close')
-export const CopyIcon = resolveIcon('CopyIcon', 'copy')
-export const EditIcon = resolveIcon('EditIcon', 'edit')
-export const EllipsisVerticalIcon = resolveIcon('EllipsisVerticalIcon', 'ellipsis-vertical')
-export const LaunchIcon = resolveIcon('LaunchIcon', 'launch')
-export const RocketIcon = resolveIcon('RocketIcon', 'rocket')
-export const TokenIcon = resolveIcon('TokenIcon', 'token')
-export const TrashIcon = resolveIcon('TrashIcon', 'trash')
-export const WarningOutlineIcon = resolveIcon('WarningOutlineIcon', 'warning-outline')