@openzeppelin/ui-components 1.4.0 → 1.5.0

package/dist/index.mjs

@@ -3,7 +3,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cva } from "class-variance-authority";
 import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, MoreHorizontal, Network, Pencil, Plus, Search, Settings, Timer, Upload, X } from "lucide-react";
 import * as React$1 from "react";
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cn, getDefaultValueForType, getInvalidUrlMessage, getServiceDisplayName, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot, Slottable } from "@radix-ui/react-slot";
@@ -1593,12 +1593,12 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 * Can render as a button or anchor element depending on whether href is provided.
 */
 function SidebarButton({ icon, children, onClick, size = "default", badge, disabled = false, isSelected = false, href, target, rel, className }) {
-	const commonClass = cn("group relative flex items-center gap-2 px-3 py-2.5 rounded-lg font-semibold text-sm transition-colors", badge ? "justify-between" : "justify-start", disabled ? "text-gray-400 cursor-not-allowed" : isSelected ? "text-[#111928] bg-neutral-100" : "text-gray-600 hover:text-gray-700 cursor-pointer hover:before:content-[\"\"] hover:before:absolute hover:before:inset-x-0 hover:before:top-1 hover:before:bottom-1 hover:before:bg-muted/80 hover:before:rounded-lg hover:before:-z-10", size === "small" ? "h-10" : "h-11", className);
+	const commonClass = cn("group relative flex flex-wrap items-center gap-x-2 gap-y-0.5 px-3 py-2 rounded-lg font-semibold text-sm transition-colors", badge ? "justify-between" : "justify-start", disabled ? "text-gray-400 cursor-not-allowed" : isSelected ? "text-[#111928] bg-neutral-100" : "text-gray-600 hover:text-gray-700 cursor-pointer hover:before:content-[\"\"] hover:before:absolute hover:before:inset-x-0 hover:before:top-1 hover:before:bottom-1 hover:before:bg-muted/80 hover:before:rounded-lg hover:before:-z-10", size === "small" ? "min-h-10" : "min-h-11", className);
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
 		children: [icon, children]
 	}), badge && /* @__PURE__ */ jsx("span", {
-		className: "text-xs px-2 py-1 bg-muted text-muted-foreground rounded-full font-medium",
+		className: "text-xs px-2 py-0.5 bg-muted text-muted-foreground rounded-full font-medium",
 		children: badge
 	})] });
 	if (href) return /* @__PURE__ */ jsx("a", {
@@ -1843,6 +1843,546 @@ function ViewContractStateButton({ contractAddress, onToggle }) {
 	});
 }
 
+//#endregion
+//#region src/components/ui/wizard/WizardStepper.tsx
+function resolveState(step, index, currentStepIndex, furthestStepIndex) {
+	if (step.status === "completed" || step.status === "skipped") return "completed";
+	if (index === currentStepIndex) return "current";
+	if (step.isInvalid && (index < currentStepIndex || index <= furthestStepIndex)) return "invalid";
+	if (index < currentStepIndex) return "completed";
+	if (index <= furthestStepIndex) return "visited";
+	return "upcoming";
+}
+function canClick(state, freeNavigation = false) {
+	if (freeNavigation) return true;
+	return state !== "upcoming";
+}
+function StepCircle({ state, index }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-all", state === "completed" && "bg-blue-600 text-white", state === "current" && "bg-blue-600 text-white ring-2 ring-blue-200", state === "visited" && "bg-blue-100 text-blue-600 ring-1 ring-blue-300", state === "invalid" && "bg-red-100 text-red-600 ring-1 ring-red-300", state === "upcoming" && "bg-zinc-100 text-zinc-400"),
+		children: state === "completed" ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : state === "visited" ? /* @__PURE__ */ jsx(Pencil, { className: "size-3" }) : state === "invalid" ? /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5" }) : index + 1
+	});
+}
+function StepLabel({ title, state, isSkipped }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("text-sm font-medium transition-colors", state === "current" && "text-blue-700", state === "completed" && "text-zinc-700", state === "visited" && "text-blue-600", state === "invalid" && "text-red-600", state === "upcoming" && "text-zinc-400"),
+			children: title
+		}), isSkipped && /* @__PURE__ */ jsx("span", {
+			className: "mt-0.5 block text-[11px] text-zinc-400",
+			children: "Skipped"
+		})]
+	});
+}
+function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Wizard steps",
+		className: cn("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-1",
+			children: steps.map((step, index) => {
+				const state = resolveState(step, index, currentStepIndex, furthestStepIndex);
+				const clickable = canClick(state, freeNavigation) && !!onStepClick;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => clickable && onStepClick?.(index),
+					disabled: !clickable,
+					className: cn("flex items-center gap-3 rounded-xl border border-transparent px-3 py-3 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-blue-200 bg-blue-50", state === "completed" && "bg-white hover:bg-gray-50", state === "visited" && "bg-white hover:bg-blue-50/50", state === "invalid" && "border-red-200 bg-red-50 hover:bg-red-100/60", state === "upcoming" && "bg-white"),
+					"aria-current": state === "current" ? "step" : void 0,
+					children: [/* @__PURE__ */ jsx(StepCircle, {
+						state,
+						index
+					}), /* @__PURE__ */ jsx(StepLabel, {
+						title: step.title,
+						state,
+						isSkipped: step.status === "skipped"
+					})]
+				}, step.id);
+			})
+		})
+	});
+}
+function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Wizard steps",
+		className: cn("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-center",
+			children: steps.map((step, index) => {
+				const state = resolveState(step, index, currentStepIndex, furthestStepIndex);
+				const clickable = canClick(state, freeNavigation) && !!onStepClick;
+				const isLast = index === steps.length - 1;
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => clickable && onStepClick?.(index),
+					disabled: !clickable,
+					className: cn("flex items-center gap-2 rounded-xl border border-transparent px-3 py-2 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-blue-200 bg-blue-50", state === "completed" && "bg-white hover:bg-gray-50", state === "visited" && "bg-white hover:bg-blue-50/50", state === "invalid" && "border-red-200 bg-red-50 hover:bg-red-100/60", state === "upcoming" && "bg-white"),
+					"aria-current": state === "current" ? "step" : void 0,
+					"aria-label": `Step ${index + 1}: ${step.title}`,
+					children: [/* @__PURE__ */ jsx(StepCircle, {
+						state,
+						index
+					}), /* @__PURE__ */ jsx("div", {
+						className: "hidden sm:block",
+						children: /* @__PURE__ */ jsx(StepLabel, {
+							title: step.title,
+							state,
+							isSkipped: step.status === "skipped"
+						})
+					})]
+				}), !isLast && /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-px flex-1 transition-colors sm:mx-2", index < currentStepIndex ? "bg-blue-600" : "bg-zinc-200") })] }, step.id);
+			})
+		})
+	});
+}
+/**
+* A stepper component for navigating through a series of steps.
+*
+* @param props - The props for the WizardStepper component.
+* @returns A React node representing the stepper component.
+*/
+function WizardStepper(props) {
+	const { variant = "horizontal", ...rest } = props;
+	return variant === "vertical" ? /* @__PURE__ */ jsx(VerticalStepper, {
+		...rest,
+		variant
+	}) : /* @__PURE__ */ jsx(HorizontalStepper, {
+		...rest,
+		variant
+	});
+}
+
+//#endregion
+//#region src/components/ui/wizard/WizardNavigation.tsx
+/**
+* A navigation component for the wizard.
+*
+* @param props - The props for the WizardNavigation component.
+* @returns A React node representing the navigation component.
+*/
+function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevious, onNext, onCancel, extraActions, nextLabel = "Next", lastStepLabel = "Finish", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [onCancel && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onCancel,
+				className: "gap-2",
+				children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), "Cancel"]
+			}), !isFirstStep && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onPrevious,
+				className: "gap-2",
+				children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }), "Previous"]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [extraActions, /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				onClick: onNext,
+				disabled: !canProceed,
+				className: "gap-2",
+				children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/ui/wizard/hooks.ts
+/**
+* Clamp a step index into the valid range for the current wizard.
+*/
+function getSafeStepIndex(stepCount, currentStepIndex) {
+	if (stepCount === 0) return 0;
+	return Math.max(0, Math.min(currentStepIndex, stepCount - 1));
+}
+/**
+* Track the highest step reached unless a controlled value is provided.
+*/
+function useFurthestStepIndex(currentStepIndex, controlledFurthestStepIndex) {
+	const [internalFurthestStepIndex, setInternalFurthestStepIndex] = useState(currentStepIndex);
+	useEffect(() => {
+		setInternalFurthestStepIndex((prev) => Math.max(prev, currentStepIndex));
+	}, [currentStepIndex]);
+	return controlledFurthestStepIndex ?? internalFurthestStepIndex;
+}
+/**
+* Keep the scrollable wizard's active and visited step state in sync with scrolling and clicks.
+*/
+function useScrollableWizardStepTracking({ steps, currentStepIndex, onStepChange, scrollRef, sectionId, scrollPadding = SCROLL_PADDING_PX }) {
+	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
+	const initialIndexRef = useRef(safeIndex);
+	const rafRef = useRef(null);
+	const manualSelectionIndexRef = useRef(null);
+	const stepsRef = useRef(steps);
+	const sectionIdRef = useRef(sectionId);
+	const onStepChangeRef = useRef(onStepChange);
+	const scrollPaddingRef = useRef(scrollPadding);
+	useEffect(() => {
+		stepsRef.current = steps;
+		sectionIdRef.current = sectionId;
+		onStepChangeRef.current = onStepChange;
+		scrollPaddingRef.current = scrollPadding;
+	});
+	const [activeIndex, setActiveIndex] = useState(initialIndexRef.current);
+	const activeIndexRef = useRef(initialIndexRef.current);
+	const [furthestStepIndex, setFurthestStepIndex] = useState(initialIndexRef.current);
+	const isMountedRef = useRef(false);
+	const clearManualSelection = useCallback(() => {
+		manualSelectionIndexRef.current = null;
+	}, []);
+	useEffect(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const ownerDocument = container.ownerDocument;
+		isMountedRef.current = false;
+		let didCompleteInitialRaf = false;
+		const releaseManualSelectionOnUserScroll = () => {
+			clearManualSelection();
+		};
+		const handleKeyDown = (event) => {
+			if (isScrollableNavigationKey(event)) clearManualSelection();
+		};
+		const handleScroll = () => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+			rafRef.current = requestAnimationFrame(() => {
+				const currentSteps = stepsRef.current;
+				const currentSectionId = sectionIdRef.current;
+				const currentOnStepChange = onStepChangeRef.current;
+				if (currentSteps.length === 0) return;
+				const manualSelectionIndex = manualSelectionIndexRef.current;
+				const naturalState = resolveScrollableActiveIndex(container, currentSteps, currentSectionId);
+				const naturalActiveIndex = naturalState.activeIndex;
+				const newActiveIndex = manualSelectionIndex ?? naturalActiveIndex;
+				const shouldCommitFurthestStepIndex = manualSelectionIndex !== null ? true : naturalState.commitFurthestStepIndex;
+				if (activeIndexRef.current !== newActiveIndex) {
+					activeIndexRef.current = newActiveIndex;
+					setActiveIndex(newActiveIndex);
+					if (isMountedRef.current) {
+						lastEmittedIndexRef.current = newActiveIndex;
+						currentOnStepChange(newActiveIndex);
+					}
+				} else setActiveIndex(newActiveIndex);
+				if (shouldCommitFurthestStepIndex) setFurthestStepIndex((prev) => Math.max(prev, newActiveIndex));
+				rafRef.current = null;
+				if (!didCompleteInitialRaf) {
+					didCompleteInitialRaf = true;
+					isMountedRef.current = true;
+				}
+			});
+		};
+		container.addEventListener("wheel", releaseManualSelectionOnUserScroll, { passive: true });
+		container.addEventListener("touchmove", releaseManualSelectionOnUserScroll, { passive: true });
+		container.addEventListener("pointerdown", releaseManualSelectionOnUserScroll);
+		ownerDocument.addEventListener("keydown", handleKeyDown);
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		handleScroll();
+		return () => {
+			isMountedRef.current = false;
+			container.removeEventListener("wheel", releaseManualSelectionOnUserScroll);
+			container.removeEventListener("touchmove", releaseManualSelectionOnUserScroll);
+			container.removeEventListener("pointerdown", releaseManualSelectionOnUserScroll);
+			ownerDocument.removeEventListener("keydown", handleKeyDown);
+			container.removeEventListener("scroll", handleScroll);
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		};
+	}, [clearManualSelection, scrollRef]);
+	const lastEmittedIndexRef = useRef(safeIndex);
+	useEffect(() => {
+		const newSafeIndex = getSafeStepIndex(stepsRef.current.length, currentStepIndex);
+		if (newSafeIndex === lastEmittedIndexRef.current) return;
+		lastEmittedIndexRef.current = newSafeIndex;
+		activeIndexRef.current = newSafeIndex;
+		setActiveIndex(newSafeIndex);
+		setFurthestStepIndex((prev) => Math.max(prev, newSafeIndex));
+		const step = stepsRef.current[newSafeIndex];
+		if (!step) return;
+		const sectionElement = scrollRef.current?.querySelector(`#${CSS.escape(sectionIdRef.current(step.id))}`);
+		if (scrollRef.current && sectionElement) scrollSectionIntoView(scrollRef.current, sectionElement, scrollPaddingRef.current);
+	}, [currentStepIndex, scrollRef]);
+	return {
+		activeIndex,
+		furthestStepIndex,
+		scrollToSection: useCallback((index) => {
+			const step = stepsRef.current[index];
+			if (!step) return;
+			manualSelectionIndexRef.current = index;
+			activeIndexRef.current = index;
+			lastEmittedIndexRef.current = index;
+			setActiveIndex(index);
+			setFurthestStepIndex((prev) => Math.max(prev, index));
+			onStepChangeRef.current(index);
+			const container = scrollRef.current;
+			const sectionElement = container?.querySelector(`#${CSS.escape(sectionIdRef.current(step.id))}`);
+			if (container && sectionElement) scrollSectionIntoView(container, sectionElement, scrollPaddingRef.current);
+		}, [scrollRef])
+	};
+}
+function resolveScrollableActiveIndex(container, steps, sectionId) {
+	if (steps.length === 0) return {
+		activeIndex: 0,
+		commitFurthestStepIndex: false
+	};
+	const containerRect = container.getBoundingClientRect();
+	const anchorY = containerRect.top + Math.min(containerRect.height * .35, 220);
+	const isScrollable = container.scrollHeight > container.clientHeight + 1;
+	const isAtBottom = isScrollable && container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
+	const isNearBottom = isScrollable && container.scrollTop + container.clientHeight >= container.scrollHeight - 4;
+	if (isAtBottom) return {
+		activeIndex: steps.length - 1,
+		commitFurthestStepIndex: false
+	};
+	let activeIndex = 0;
+	let highestScore = Number.NEGATIVE_INFINITY;
+	for (let i = 0; i < steps.length; i++) {
+		const sectionMetrics = getSectionMetrics(container, steps[i].id, sectionId, containerRect);
+		if (!sectionMetrics) continue;
+		const score = scoreScrollableStep({
+			stepIndex: i,
+			stepCount: steps.length,
+			containerRect,
+			anchorY,
+			isNearBottom,
+			...sectionMetrics
+		});
+		if (score >= highestScore) {
+			highestScore = score;
+			activeIndex = i;
+		}
+	}
+	return {
+		activeIndex,
+		commitFurthestStepIndex: true
+	};
+}
+const SCROLL_PADDING_PX = 32;
+function getSectionElement(container, stepId, sectionId) {
+	return container.querySelector(`#${CSS.escape(sectionId(stepId))}`);
+}
+function scrollSectionIntoView(container, sectionElement, padding) {
+	const elementTop = sectionElement.getBoundingClientRect().top;
+	const containerTop = container.getBoundingClientRect().top;
+	const targetScrollTop = container.scrollTop + (elementTop - containerTop) - padding;
+	container.scrollTo({
+		top: targetScrollTop,
+		behavior: "smooth"
+	});
+}
+function getSectionMetrics(container, stepId, sectionId, containerRect) {
+	const sectionElement = getSectionElement(container, stepId, sectionId);
+	if (!sectionElement) return null;
+	const sectionRect = sectionElement.getBoundingClientRect();
+	return {
+		sectionRect,
+		visibleHeight: getVisibleHeight(containerRect, sectionRect)
+	};
+}
+function getVisibleHeight(containerRect, sectionRect) {
+	return Math.max(0, Math.min(sectionRect.bottom, containerRect.bottom) - Math.max(sectionRect.top, containerRect.top));
+}
+function scoreScrollableStep({ stepIndex, stepCount, containerRect, sectionRect, visibleHeight, anchorY, isNearBottom }) {
+	const isVisible = visibleHeight > 0;
+	const focusBandTop = containerRect.top + Math.min(containerRect.height * .2, 140);
+	const focusBandBottom = containerRect.top + Math.min(containerRect.height * .55, 360);
+	const focusBandOverlap = getBandOverlapHeight(sectionRect, focusBandTop, focusBandBottom);
+	const distanceToFocusBand = focusBandOverlap > 0 ? 0 : Math.min(Math.abs(sectionRect.top - focusBandBottom), Math.abs(sectionRect.bottom - focusBandTop));
+	const lastStepProminent = stepIndex === stepCount - 1 && visibleHeight >= Math.min(sectionRect.height, containerRect.height) * .25 && sectionRect.top <= containerRect.top + containerRect.height * .65;
+	let score = isVisible ? visibleHeight : Number.NEGATIVE_INFINITY;
+	if (focusBandOverlap > 0) score += 12e3 + focusBandOverlap * 25;
+	if (sectionRect.top <= anchorY) score += 250;
+	score += Math.max(0, 1e3 - distanceToFocusBand);
+	if (isNearBottom && lastStepProminent && isVisible) score += 15e3;
+	return score;
+}
+function getBandOverlapHeight(sectionRect, bandTop, bandBottom) {
+	return Math.max(0, Math.min(sectionRect.bottom, bandBottom) - Math.max(sectionRect.top, bandTop));
+}
+function isScrollableNavigationKey(event) {
+	if (event.metaKey || event.ctrlKey || event.altKey) return false;
+	return [
+		"ArrowDown",
+		"ArrowUp",
+		"PageDown",
+		"PageUp",
+		"Home",
+		"End",
+		" "
+	].includes(event.key);
+}
+
+//#endregion
+//#region src/components/ui/wizard/WizardLayout.tsx
+function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onCancel, navActions, header, variant, className }) {
+	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
+	const resolvedFurthestStepIndex = useFurthestStepIndex(safeIndex, furthestStepIndexProp);
+	if (steps.length === 0) return null;
+	const isFirstStep = safeIndex === 0;
+	const isLastStep = safeIndex === steps.length - 1;
+	const currentStep = steps[safeIndex];
+	const canProceed = currentStep?.isValid !== false;
+	const handleNext = () => {
+		if (isLastStep) {
+			onComplete?.();
+			return;
+		}
+		onStepChange(safeIndex + 1);
+	};
+	const handlePrevious = () => {
+		if (!isFirstStep) onStepChange(safeIndex - 1);
+	};
+	const stepDefs = toStepDefs(steps, safeIndex);
+	const footer = /* @__PURE__ */ jsx("div", {
+		className: "shrink-0 border-t border-border bg-background px-8 py-4",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto max-w-5xl",
+			children: /* @__PURE__ */ jsx(WizardNavigation, {
+				isFirstStep,
+				isLastStep,
+				canProceed,
+				onPrevious: handlePrevious,
+				onNext: handleNext,
+				onCancel,
+				extraActions: navActions
+			})
+		})
+	});
+	if (variant === "vertical") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full gap-6", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-[220px] shrink-0 py-6 pl-6",
+			children: /* @__PURE__ */ jsx(WizardStepper, {
+				variant: "vertical",
+				steps: stepDefs,
+				currentStepIndex: safeIndex,
+				furthestStepIndex: resolvedFurthestStepIndex,
+				onStepClick: onStepChange,
+				className: "h-full"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-5xl",
+					children: [header, currentStep?.component]
+				})
+			}), footer]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full flex-col", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "shrink-0 p-6 pb-0",
+			children: /* @__PURE__ */ jsx(WizardStepper, {
+				variant: "horizontal",
+				steps: stepDefs,
+				currentStepIndex: safeIndex,
+				furthestStepIndex: resolvedFurthestStepIndex,
+				onStepClick: onStepChange
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-5xl",
+					children: [header, currentStep?.component]
+				})
+			}), footer]
+		})]
+	});
+}
+function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, scrollPadding, className }) {
+	const instanceId = useId();
+	const scrollRef = useRef(null);
+	const sectionId = useCallback((stepId) => `wizard-section-${instanceId}-${stepId}`, [instanceId]);
+	const { activeIndex, furthestStepIndex, scrollToSection } = useScrollableWizardStepTracking({
+		steps,
+		currentStepIndex,
+		onStepChange,
+		scrollRef,
+		sectionId,
+		scrollPadding
+	});
+	if (steps.length === 0) return null;
+	const stepDefs = toStepDefs(steps, activeIndex);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full gap-6", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-[220px] shrink-0 py-6 pl-6",
+			children: /* @__PURE__ */ jsx(WizardStepper, {
+				variant: "vertical",
+				steps: stepDefs,
+				currentStepIndex: activeIndex,
+				furthestStepIndex,
+				onStepClick: scrollToSection,
+				freeNavigation: true,
+				className: "h-full"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: scrollRef,
+			className: "flex min-w-0 flex-1 flex-col overflow-y-auto p-8",
+			children: [
+				header,
+				/* @__PURE__ */ jsx("div", {
+					className: "space-y-12",
+					children: steps.map((step) => /* @__PURE__ */ jsx("section", {
+						id: sectionId(step.id),
+						children: step.component
+					}, step.id))
+				}),
+				onComplete && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end pt-8",
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						onClick: onComplete,
+						children: "Finish"
+					})
+				})
+			]
+		})]
+	});
+}
+function toStepDefs(steps, currentStepIndex) {
+	return steps.map((s, i) => {
+		const isInvalid = s.isInvalid ?? s.isValid === false;
+		const status = s.status ?? (i < currentStepIndex && !isInvalid ? "completed" : "pending");
+		return {
+			id: s.id,
+			title: s.title,
+			status,
+			isInvalid
+		};
+	});
+}
+/**
+* A layout component for the wizard.
+*
+* @param props - The props for the WizardLayout component.
+* @returns A React node representing the layout component.
+*/
+function WizardLayout(props) {
+	const { variant = "horizontal", ...rest } = props;
+	if (variant === "scrollable") return /* @__PURE__ */ jsx(ScrollableLayout, {
+		steps: rest.steps,
+		currentStepIndex: rest.currentStepIndex,
+		onStepChange: rest.onStepChange,
+		header: rest.header,
+		onComplete: rest.onComplete,
+		scrollPadding: rest.scrollPadding,
+		className: rest.className
+	});
+	return /* @__PURE__ */ jsx(PagedLayout, {
+		...rest,
+		variant
+	});
+}
+
 //#endregion
 //#region src/components/fields/address-suggestion/context.ts
 /**
@@ -5720,5 +6260,5 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, ViewContractStateButton, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
 //# sourceMappingURL=index.mjs.map