@openzeppelin/ui-components 2.0.0 → 2.1.0

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "2.0.0";
+const VERSION = "2.1.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -126,7 +126,7 @@ 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),
+	className: (0, _openzeppelin_ui_utils.cn)("bg-foreground text-background 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;
@@ -573,15 +573,15 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 			weekdays: "flex",
 			weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
 			week: "flex w-full mt-2",
-			day: (0, _openzeppelin_ui_utils.cn)("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"),
+			day: (0, _openzeppelin_ui_utils.cn)("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-selected/15 [&:has([aria-selected].day-outside)]:bg-selected/10 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"),
 			day_button: (0, _openzeppelin_ui_utils.cn)(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-none hover:rounded-none"),
 			range_start: "day-range-start rounded-l-md",
 			range_end: "day-range-end rounded-r-md",
-			selected: "bg-zinc-200 dark:bg-zinc-700 text-foreground hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-foreground focus:bg-zinc-200 dark:focus:bg-zinc-700 focus:text-foreground",
+			selected: "bg-selected text-selected-foreground hover:bg-selected hover:text-selected-foreground focus:bg-selected focus:text-selected-foreground",
 			today: "bg-accent text-accent-foreground",
-			outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+			outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-selected/10 aria-selected:text-muted-foreground aria-selected:opacity-30",
 			disabled: "text-muted-foreground opacity-50",
-			range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+			range_middle: "aria-selected:bg-selected/15 aria-selected:text-foreground",
 			hidden: "invisible",
 			...classNames
 		},
@@ -650,7 +650,7 @@ function CardFooter({ className, ...props }) {
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_checkbox.Root, {
 		"data-slot": "checkbox",
-		className: (0, _openzeppelin_ui_utils.cn)("border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: (0, _openzeppelin_ui_utils.cn)("border-input data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground data-[state=checked]:border-selected focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_checkbox.Indicator, {
 			"data-slot": "checkbox-indicator",
@@ -1244,7 +1244,7 @@ const Header = ({ title, onOpenSidebar, rightContent }) => {
 					type: "button",
 					"aria-label": "Open menu",
 					onClick: onOpenSidebar,
-					className: "mr-2 sm:mr-3 inline-flex items-center justify-center rounded-md p-2 text-primary hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary xl:hidden",
+					className: "mr-2 sm:mr-3 inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary xl:hidden",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Menu, { className: "size-5" })
 				}),
 				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1491,7 +1491,7 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 						className: "gap-2",
 						children: [
 							isMultiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary",
+								className: (0, _openzeppelin_ui_utils.cn)("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border transition-colors", isSelected(network) ? "border-selected bg-selected text-selected-foreground" : "border-input bg-background"),
 								children: isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3 w-3" })
 							}) : null,
 							getNetworkIcon?.(network),
@@ -1505,7 +1505,7 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 									children: getNetworkType(network)
 								})]
 							}),
-							!isMultiple && isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 opacity-100" })
+							!isMultiple && isSelected(network) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 text-selected opacity-100" })
 						]
 					}, getNetworkId(network))) }),
 					index < Object.keys(groupedNetworks).length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, {})
@@ -1595,7 +1595,7 @@ RadioGroup.displayName = _radix_ui_react_radio_group.Root.displayName;
 const RadioGroupItem = react.forwardRef(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Item, {
 		ref,
-		className: (0, _openzeppelin_ui_utils.cn)("border-input bg-background text-primary h-4 w-4 rounded-full border shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: (0, _openzeppelin_ui_utils.cn)("border-input bg-background text-selected h-4 w-4 rounded-full border shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Indicator, {
 			className: "flex items-center justify-center",
@@ -1687,7 +1687,7 @@ 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 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 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-muted-foreground/60 cursor-not-allowed" : isSelected ? "text-selected bg-selected/10" : "text-muted-foreground hover:text-foreground 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]
@@ -1865,7 +1865,7 @@ function TabsList({ className, ...props }) {
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: (0, _openzeppelin_ui_utils.cn)("data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: (0, _openzeppelin_ui_utils.cn)("data-[state=active]:bg-background data-[state=active]:text-selected focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -1940,7 +1940,7 @@ function canClick(state, freeNavigation = false) {
 }
 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"),
+		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-selected text-selected-foreground", state === "current" && "bg-selected text-selected-foreground ring-2 ring-selected/30", state === "visited" && "bg-selected/10 text-selected ring-1 ring-selected/40", state === "invalid" && "bg-destructive/10 text-destructive ring-1 ring-destructive/40", state === "upcoming" && "bg-muted text-muted-foreground"),
 		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
 	});
 }
@@ -1948,10 +1948,10 @@ 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"),
+			className: (0, _openzeppelin_ui_utils.cn)("text-sm font-medium transition-colors", state === "current" && "text-selected", state === "completed" && "text-foreground", state === "visited" && "text-selected", state === "invalid" && "text-destructive", state === "upcoming" && "text-muted-foreground"),
 			children: title
 		}), isSkipped && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "mt-0.5 block text-[11px] text-zinc-400",
+			className: "mt-0.5 block text-[11px] text-muted-foreground",
 			children: "Skipped"
 		})]
 	});
@@ -1959,7 +1959,7 @@ function StepLabel({ title, state, isSkipped }) {
 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),
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-2xl border border-border bg-card p-6", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex flex-col gap-1",
 			children: steps.map((step, index) => {
@@ -1969,7 +1969,7 @@ function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentS
 					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"),
+					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-selected/40 bg-selected/5", state === "completed" && "bg-card hover:bg-muted/40", state === "visited" && "bg-card hover:bg-selected/5", state === "invalid" && "border-destructive/40 bg-destructive/5 hover:bg-destructive/10", state === "upcoming" && "bg-card"),
 					"aria-current": state === "current" ? "step" : void 0,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
 						state,
@@ -1987,7 +1987,7 @@ function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentS
 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),
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-2xl border border-border bg-card p-6", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex w-full items-center",
 			children: steps.map((step, index) => {
@@ -1998,7 +1998,7 @@ function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = curren
 					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"),
+					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-selected/40 bg-selected/5", state === "completed" && "bg-card hover:bg-muted/40", state === "visited" && "bg-card hover:bg-selected/5", state === "invalid" && "border-destructive/40 bg-destructive/5 hover:bg-destructive/10", state === "upcoming" && "bg-card"),
 					"aria-current": state === "current" ? "step" : void 0,
 					"aria-label": `Step ${index + 1}: ${step.title}`,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
@@ -2012,7 +2012,7 @@ function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = curren
 							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);
+				}), !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-selected" : "bg-border") })] }, step.id);
 			})
 		})
 	});
@@ -2042,7 +2042,8 @@ function WizardStepper(props) {
 * @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 }) {
+function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevious, onNext, onCancel, extraActions, nextLabel = "Next", lastStepLabel = "Finish", showLastStepPrimary = true, className }) {
+	const showPrimary = !isLastStep || showLastStepPrimary;
 	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", {
@@ -2062,7 +2063,7 @@ function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevio
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-2",
-			children: [extraActions, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+			children: [extraActions, showPrimary && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 				type: "button",
 				onClick: onNext,
 				disabled: !canProceed,
@@ -2298,7 +2299,7 @@ function isScrollableNavigationKey(event) {
 
 //#endregion
 //#region src/components/ui/wizard/WizardLayout.tsx
-function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onCancel, navActions, header, variant, className }) {
+function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onLastStepPrimary, onCancel, nextLabel, lastStepLabel, hideLastStepPrimary, navActions, header, variant, className }) {
 	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
 	const resolvedFurthestStepIndex = useFurthestStepIndex(safeIndex, furthestStepIndexProp);
 	if (steps.length === 0) return null;
@@ -2308,7 +2309,8 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 	const canProceed = currentStep?.isValid !== false;
 	const handleNext = () => {
 		if (isLastStep) {
-			onComplete?.();
+			if (onLastStepPrimary) onLastStepPrimary();
+			else onComplete?.();
 			return;
 		}
 		onStepChange(safeIndex + 1);
@@ -2328,7 +2330,10 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 				onPrevious: handlePrevious,
 				onNext: handleNext,
 				onCancel,
-				extraActions: navActions
+				extraActions: navActions,
+				nextLabel,
+				lastStepLabel,
+				showLastStepPrimary: !hideLastStepPrimary
 			})
 		})
 	});
@@ -2378,7 +2383,7 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 		})]
 	});
 }
-function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, scrollPadding, className }) {
+function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, hideScrollableCompleteButton, scrollableCompleteLabel, scrollPadding, className }) {
 	const instanceId = (0, react.useId)();
 	const scrollRef = (0, react.useRef)(null);
 	const sectionId = (0, react.useCallback)((stepId) => `wizard-section-${instanceId}-${stepId}`, [instanceId]);
@@ -2417,12 +2422,12 @@ function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onCom
 						children: step.component
 					}, step.id))
 				}),
-				onComplete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				onComplete && !hideScrollableCompleteButton && /* @__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"
+						children: scrollableCompleteLabel ?? "Finish"
 					})
 				})
 			]
@@ -2455,6 +2460,8 @@ function WizardLayout(props) {
 		onStepChange: rest.onStepChange,
 		header: rest.header,
 		onComplete: rest.onComplete,
+		hideScrollableCompleteButton: rest.hideScrollableCompleteButton,
+		scrollableCompleteLabel: rest.scrollableCompleteLabel,
 		scrollPadding: rest.scrollPadding,
 		className: rest.className
 	});
@@ -2855,7 +2862,7 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 								type: "button",
 								role: "option",
 								"aria-selected": i === highlightedIndex,
-								className: (0, _openzeppelin_ui_utils.cn)("flex w-full flex-col px-3 py-2 text-left text-sm", "hover:bg-accent", i === highlightedIndex && "bg-accent"),
+								className: (0, _openzeppelin_ui_utils.cn)("flex w-full flex-col px-3 py-2 text-left text-sm", "hover:bg-selected/10", i === highlightedIndex && "bg-selected/10"),
 								onMouseDown: (e) => {
 									e.preventDefault();
 									applySuggestion(s);
@@ -4549,15 +4556,15 @@ function FileUploadField({ id, label, placeholder = "Drop your file here or clic
 						},
 						className: `
                 relative rounded-lg border-2 border-dashed transition-all duration-200
-                ${isDragOver ? "border-primary bg-primary/5" : hasError ? "border-destructive bg-destructive/5" : fileName ? "border-border bg-muted/30" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50"}
+                ${isDragOver ? "border-selected bg-selected/5" : hasError ? "border-destructive bg-destructive/5" : fileName ? "border-border bg-muted/30" : "border-border bg-background hover:border-selected/50 hover:bg-muted/50"}
                 ${readOnly || isProcessing ? "cursor-not-allowed opacity-60" : fileName ? "cursor-default" : "cursor-pointer"}
                 p-6
               `,
 						children: !fileName ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex flex-col items-center justify-center gap-3 text-center",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `rounded-full p-3 transition-colors ${isDragOver ? "bg-primary/10" : "bg-muted"}`,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: `h-8 w-8 transition-colors ${isDragOver ? "text-primary" : "text-muted-foreground"}` })
+								className: `rounded-full p-3 transition-colors ${isDragOver ? "bg-selected/10" : "bg-muted"}`,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: `h-8 w-8 transition-colors ${isDragOver ? "text-selected" : "text-muted-foreground"}` })
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "space-y-1",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -5442,7 +5449,7 @@ function RadioField({ id, label, helperText, control, name, width = "full", vali
 							const isDisabled = option.disabled;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 								htmlFor: optionId,
-								className: `group relative flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 transition-all duration-150 ${isDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50"} ${isSelected && !hasError ? "bg-primary/5" : ""}`,
+								className: `group relative flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 transition-all duration-150 ${isDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50"} ${isSelected && !hasError ? "bg-selected/5" : ""}`,
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 										type: "radio",
@@ -5456,13 +5463,13 @@ function RadioField({ id, label, helperText, control, name, width = "full", vali
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "relative flex size-4 items-center justify-center",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `absolute size-4 rounded-full border-2 transition-all duration-150 ${isSelected ? hasError ? "border-destructive bg-destructive/10" : "border-primary bg-primary/10" : hasError ? "border-destructive/50" : "border-muted-foreground/40 group-hover:border-muted-foreground/60"} ${!isDisabled && "group-hover:scale-105"}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `absolute size-1.5 rounded-full transition-all duration-150 ${isSelected ? hasError ? "bg-destructive scale-100 opacity-100" : "bg-primary scale-100 opacity-100" : "scale-0 opacity-0"}` })]
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `absolute size-4 rounded-full border-2 transition-all duration-150 ${isSelected ? hasError ? "border-destructive bg-destructive/10" : "border-selected bg-selected/10" : hasError ? "border-destructive/50" : "border-muted-foreground/40 group-hover:border-muted-foreground/60"} ${!isDisabled && "group-hover:scale-105"}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `absolute size-1.5 rounded-full transition-all duration-150 ${isSelected ? hasError ? "bg-destructive scale-100 opacity-100" : "bg-selected scale-100 opacity-100" : "scale-0 opacity-0"}` })]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: `text-sm transition-colors duration-150 ${isDisabled ? "text-muted-foreground" : isSelected ? hasError ? "text-destructive font-medium" : "text-foreground font-medium" : "text-foreground"}`,
 										children: option.label
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `absolute -inset-1 rounded-lg ring-2 ring-primary ring-offset-2 ring-offset-background transition-opacity duration-150 ${isSelected && !isDisabled ? "opacity-0 focus-within:opacity-100" : "opacity-0"}` })
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `absolute -inset-1 rounded-lg ring-2 ring-selected ring-offset-2 ring-offset-background transition-opacity duration-150 ${isSelected && !isDisabled ? "opacity-0 focus-within:opacity-100" : "opacity-0"}` })
 								]
 							}, option.value);
 						})