@openzeppelin/ui-components 1.4.0 → 1.6.0

package/dist/index.cjs

@@ -7,6 +7,8 @@ let react = require("react");
 react = require_ErrorMessage.__toESM(react);
 let _openzeppelin_ui_utils = require("@openzeppelin/ui-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+_radix_ui_react_tooltip = require_ErrorMessage.__toESM(_radix_ui_react_tooltip);
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let react_day_picker = require("react-day-picker");
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
@@ -31,8 +33,6 @@ let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 _radix_ui_react_collapsible = require_ErrorMessage.__toESM(_radix_ui_react_collapsible);
 let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 _radix_ui_react_tabs = require_ErrorMessage.__toESM(_radix_ui_react_tabs);
-let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
-_radix_ui_react_tooltip = require_ErrorMessage.__toESM(_radix_ui_react_tooltip);
 let _openzeppelin_ui_types = require("@openzeppelin/ui-types");
 let sonner = require("sonner");
 let next_themes = require("next-themes");
@@ -114,6 +114,19 @@ const AccordionContent = react.forwardRef(({ className, children, variant: varia
 });
 AccordionContent.displayName = "AccordionContent";
 
+//#endregion
+//#region src/components/ui/tooltip.tsx
+const TooltipProvider = _radix_ui_react_tooltip.Provider;
+const Tooltip = _radix_ui_react_tooltip.Root;
+const TooltipTrigger = _radix_ui_react_tooltip.Trigger;
+const TooltipContent = react.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
+	ref,
+	sideOffset,
+	className: (0, _openzeppelin_ui_utils.cn)("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs", className),
+	...props
+}) }));
+TooltipContent.displayName = _radix_ui_react_tooltip.Content.displayName;
+
 //#endregion
 //#region src/components/ui/address-display/context.ts
 /**
@@ -126,8 +139,20 @@ const AddressLabelContext = (0, react.createContext)(null);
 //#endregion
 //#region src/components/ui/address-display/address-display.tsx
 /**
+* True when the primary input can hover (e.g. desktop with mouse).
+* Touch-first phones typically report false. SSR assumes hover-capable.
+*/
+function usePrefersHover() {
+	return react.useSyncExternalStore(react.useCallback((onStoreChange) => {
+		if (typeof window === "undefined" || typeof window.matchMedia === "undefined") return () => {};
+		const mq = window.matchMedia("(hover: hover)");
+		mq.addEventListener("change", onStoreChange);
+		return () => mq.removeEventListener("change", onStoreChange);
+	}, []), () => typeof window !== "undefined" && typeof window.matchMedia !== "undefined" ? window.matchMedia("(hover: hover)").matches : true, () => true);
+}
+/**
 * Displays a blockchain address with optional truncation, copy button,
-* explorer link, and human-readable label.
+* explorer link, tooltip, and human-readable label.
 *
 * Labels are resolved in priority order:
 * 1. Explicit `label` prop
@@ -152,11 +177,22 @@ const AddressLabelContext = (0, react.createContext)(null);
 *
 * // Suppress label resolution for a specific instance
 * <AddressDisplay address="0x742d35Cc..." disableLabel />
+*
+* // Reveal full address on hover (still truncated when idle)
+* <AddressDisplay address="0x742d35Cc..." untruncateOnHover />
+*
+* // Tooltip with full address on hover + copy icon on hover
+* <AddressDisplay address="0x742d35Cc..." showTooltip showCopyButton showCopyButtonOnHover />
+*
+* // Inline variant (no chip background) — useful inside wallet bars
+* <AddressDisplay address="0x742d35Cc..." variant="inline" showTooltip showCopyButton />
 * ```
 */
-function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4, showCopyButton = false, showCopyButtonOnHover = false, explorerUrl, label: labelProp, onLabelEdit: onLabelEditProp, networkId, disableLabel = false, className, ...props }) {
+function AddressDisplay({ address, truncate = true, untruncateOnHover = false, startChars = 6, endChars = 4, showCopyButton = false, showCopyButtonOnHover = false, explorerUrl, label: labelProp, onLabelEdit: onLabelEditProp, networkId, disableLabel = false, showTooltip = false, variant = "chip", className, onPointerEnter, onPointerLeave, onMouseEnter, onMouseLeave, onClick, ...props }) {
 	const [copied, setCopied] = react.useState(false);
+	const [isHovered, setIsHovered] = react.useState(false);
 	const copyTimeoutRef = react.useRef(null);
+	const prefersHover = usePrefersHover();
 	const resolver = react.useContext(AddressLabelContext);
 	const resolvedLabel = disableLabel ? void 0 : labelProp ?? resolver?.resolveLabel(address, networkId);
 	const contextEditHandler = react.useCallback(() => {
@@ -167,7 +203,25 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 		networkId
 	]);
 	const editHandler = disableLabel ? void 0 : onLabelEditProp ?? (resolver?.onEditLabel ? contextEditHandler : void 0);
-	const displayAddress = truncate ? (0, _openzeppelin_ui_utils.truncateMiddle)(address, startChars, endChars) : address;
+	const canUntruncate = untruncateOnHover && truncate && !showTooltip;
+	const showFullAddress = !truncate || canUntruncate && isHovered;
+	const displayAddress = showFullAddress ? address : (0, _openzeppelin_ui_utils.truncateMiddle)(address, startChars, endChars);
+	const addressTextClassName = (0, _openzeppelin_ui_utils.cn)(!showFullAddress && "truncate", (showFullAddress || !truncate) && "break-all");
+	const expandInteractionClassName = canUntruncate && !prefersHover ? "cursor-pointer" : void 0;
+	const handlePointerEnter = (e) => {
+		if (canUntruncate && prefersHover) setIsHovered(true);
+		onPointerEnter?.(e);
+		onMouseEnter?.(e);
+	};
+	const handlePointerLeave = (e) => {
+		if (canUntruncate && prefersHover) setIsHovered(false);
+		onPointerLeave?.(e);
+		onMouseLeave?.(e);
+	};
+	const handleUntruncateClick = (e) => {
+		if (canUntruncate && !prefersHover) setIsHovered((open) => !open);
+		onClick?.(e);
+	};
 	const handleCopy = (e) => {
 		e.stopPropagation();
 		navigator.clipboard.writeText(address);
@@ -183,6 +237,7 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			if (copyTimeoutRef.current) window.clearTimeout(copyTimeoutRef.current);
 		};
 	}, []);
+	const isChip = variant === "chip";
 	const actionButtons = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		showCopyButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
@@ -195,6 +250,9 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			href: explorerUrl,
 			target: "_blank",
 			rel: "noopener noreferrer",
+			onClick: (e) => {
+				e.stopPropagation();
+			},
 			className: "ml-1.5 shrink-0 text-slate-500 transition-colors hover:text-slate-700",
 			"aria-label": "View in explorer",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "h-3.5 w-3.5" })
@@ -210,28 +268,48 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" })
 		})
 	] });
-	if (resolvedLabel) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _openzeppelin_ui_utils.cn)("group inline-flex max-w-full flex-col rounded-md bg-slate-100 px-2 py-1", "text-xs text-slate-700", className),
+	const shouldShowTooltip = showTooltip && truncate;
+	const wrapWithTooltip = (content) => {
+		if (!shouldShowTooltip) return content;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipProvider, {
+			delayDuration: 300,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+				asChild: true,
+				children: content
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+				className: "font-mono text-xs",
+				children: address
+			})] })
+		});
+	};
+	if (resolvedLabel) return wrapWithTooltip(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("group inline-flex max-w-full min-w-0 flex-col", isChip && "rounded-md bg-slate-100 px-2 py-1", "text-xs text-slate-700", expandInteractionClassName, className),
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onClick: handleUntruncateClick,
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "truncate font-sans font-medium text-slate-900 leading-snug",
 			children: resolvedLabel
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center font-mono text-[10px] text-slate-400 leading-snug",
+			className: "flex min-w-0 items-center font-mono text-[10px] text-slate-400 leading-snug",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, _openzeppelin_ui_utils.cn)("truncate", truncate ? "" : "break-all"),
+				className: addressTextClassName,
 				children: displayAddress
 			}), actionButtons]
 		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _openzeppelin_ui_utils.cn)("group inline-flex max-w-full items-center rounded-md bg-slate-100 px-2 py-1", "text-xs font-mono text-slate-700", className),
+	}));
+	return wrapWithTooltip(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("group inline-flex max-w-full min-w-0 items-center", isChip && "rounded-md bg-slate-100 px-2 py-1", "text-xs font-mono text-slate-700", expandInteractionClassName, className),
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onClick: handleUntruncateClick,
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: (0, _openzeppelin_ui_utils.cn)("truncate", truncate ? "" : "break-all"),
+			className: addressTextClassName,
 			children: displayAddress
 		}), actionButtons]
-	});
+	}));
 }
 
 //#endregion
@@ -1605,12 +1683,12 @@ SelectSeparator.displayName = _radix_ui_react_select.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 = (0, _openzeppelin_ui_utils.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 = (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
 		children: [icon, children]
 	}), badge && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -1808,19 +1886,6 @@ const Textarea = react.forwardRef(({ className, ...props }, ref) => {
 });
 Textarea.displayName = "Textarea";
 
-//#endregion
-//#region src/components/ui/tooltip.tsx
-const TooltipProvider = _radix_ui_react_tooltip.Provider;
-const Tooltip = _radix_ui_react_tooltip.Root;
-const TooltipTrigger = _radix_ui_react_tooltip.Trigger;
-const TooltipContent = react.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
-	ref,
-	sideOffset,
-	className: (0, _openzeppelin_ui_utils.cn)("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs", className),
-	...props
-}));
-TooltipContent.displayName = _radix_ui_react_tooltip.Content.displayName;
-
 //#endregion
 //#region src/components/ui/view-contract-state-button.tsx
 /**
@@ -1855,6 +1920,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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5" }) : state === "visited" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "size-3" }) : state === "invalid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "size-3.5" }) : index + 1
+	});
+}
+function StepLabel({ title, state, isSkipped }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": "Wizard steps",
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => clickable && onStepClick?.(index),
+					disabled: !clickable,
+					className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+						state,
+						index
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, {
+						title: step.title,
+						state,
+						isSkipped: step.status === "skipped"
+					})]
+				}, step.id);
+			})
+		})
+	});
+}
+function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": "Wizard steps",
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => clickable && onStepClick?.(index),
+					disabled: !clickable,
+					className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+						state,
+						index
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "hidden sm:block",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, {
+							title: step.title,
+							state,
+							isSkipped: step.status === "skipped"
+						})
+					})]
+				}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)(VerticalStepper, {
+		...rest,
+		variant
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex items-center justify-between", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-2",
+			children: [onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onCancel,
+				className: "gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), "Cancel"]
+			}), !isFirstStep && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onPrevious,
+				className: "gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "size-4" }), "Previous"]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-2",
+			children: [extraActions, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				onClick: onNext,
+				disabled: !canProceed,
+				className: "gap-2",
+				children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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] = (0, react.useState)(currentStepIndex);
+	(0, react.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 = (0, react.useRef)(safeIndex);
+	const rafRef = (0, react.useRef)(null);
+	const manualSelectionIndexRef = (0, react.useRef)(null);
+	const stepsRef = (0, react.useRef)(steps);
+	const sectionIdRef = (0, react.useRef)(sectionId);
+	const onStepChangeRef = (0, react.useRef)(onStepChange);
+	const scrollPaddingRef = (0, react.useRef)(scrollPadding);
+	(0, react.useEffect)(() => {
+		stepsRef.current = steps;
+		sectionIdRef.current = sectionId;
+		onStepChangeRef.current = onStepChange;
+		scrollPaddingRef.current = scrollPadding;
+	});
+	const [activeIndex, setActiveIndex] = (0, react.useState)(initialIndexRef.current);
+	const activeIndexRef = (0, react.useRef)(initialIndexRef.current);
+	const [furthestStepIndex, setFurthestStepIndex] = (0, react.useState)(initialIndexRef.current);
+	const isMountedRef = (0, react.useRef)(false);
+	const clearManualSelection = (0, react.useCallback)(() => {
+		manualSelectionIndexRef.current = null;
+	}, []);
+	(0, react.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 = (0, react.useRef)(safeIndex);
+	(0, react.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: (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "shrink-0 border-t border-border bg-background px-8 py-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mx-auto max-w-5xl",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardNavigation, {
+				isFirstStep,
+				isLastStep,
+				canProceed,
+				onPrevious: handlePrevious,
+				onNext: handleNext,
+				onCancel,
+				extraActions: navActions
+			})
+		})
+	});
+	if (variant === "vertical") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex h-full gap-6", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-[220px] shrink-0 py-6 pl-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepper, {
+				variant: "vertical",
+				steps: stepDefs,
+				currentStepIndex: safeIndex,
+				furthestStepIndex: resolvedFurthestStepIndex,
+				onStepClick: onStepChange,
+				className: "h-full"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-auto max-w-5xl",
+					children: [header, currentStep?.component]
+				})
+			}), footer]
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex h-full flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "shrink-0 p-6 pb-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepper, {
+				variant: "horizontal",
+				steps: stepDefs,
+				currentStepIndex: safeIndex,
+				furthestStepIndex: resolvedFurthestStepIndex,
+				onStepClick: onStepChange
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-auto max-w-5xl",
+					children: [header, currentStep?.component]
+				})
+			}), footer]
+		})]
+	});
+}
+function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, scrollPadding, className }) {
+	const instanceId = (0, react.useId)();
+	const scrollRef = (0, react.useRef)(null);
+	const sectionId = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex h-full gap-6", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-[220px] shrink-0 py-6 pl-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepper, {
+				variant: "vertical",
+				steps: stepDefs,
+				currentStepIndex: activeIndex,
+				furthestStepIndex,
+				onStepClick: scrollToSection,
+				freeNavigation: true,
+				className: "h-full"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollRef,
+			className: "flex min-w-0 flex-1 flex-col overflow-y-auto p-8",
+			children: [
+				header,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "space-y-12",
+					children: steps.map((step) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+						id: sectionId(step.id),
+						children: step.component
+					}, step.id))
+				}),
+				onComplete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex justify-end pt-8",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(PagedLayout, {
+		...rest,
+		variant
+	});
+}
+
 //#endregion
 //#region src/components/fields/address-suggestion/context.ts
 /**
@@ -5860,6 +6465,9 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.UrlField = UrlField;
 exports.ViewContractStateButton = ViewContractStateButton;
+exports.WizardLayout = WizardLayout;
+exports.WizardNavigation = WizardNavigation;
+exports.WizardStepper = WizardStepper;
 exports.buttonVariants = buttonVariants;
 exports.computeChildTouched = computeChildTouched;
 exports.createFocusManager = createFocusManager;