@openzeppelin/ui-components 1.7.0 → 2.0.1

package/README.md

@@ -137,11 +137,29 @@ components/
 
 Components are styled using Tailwind CSS. The necessary Tailwind configuration is expected to be present in the consuming application. The UI package itself does not bundle CSS but provides the class names and structure.
 
-Import the shared styles from `@openzeppelin/ui-styles`:
+Important: a bare Tailwind import is not enough for OpenZeppelin packages. Tailwind v4 must be told to scan the relevant `@openzeppelin/*` sources, or some component classes will be omitted from the final CSS.
+
+For consumer apps that use `@openzeppelin/ui-dev-cli`, the recommended workflow is:
+
+```bash
+pnpm exec oz-ui-dev tailwind doctor --project "$PWD"
+pnpm exec oz-ui-dev tailwind fix --project "$PWD"
+```
+
+That creates a managed `oz-tailwind.generated.css` file and keeps the `@source` wiring in sync with your installed dependencies.
+
+If you need to configure Tailwind manually, import the shared styles and register the OpenZeppelin package sources explicitly:
 
 ```css
+@layer base, components, utilities;
+
+@import 'tailwindcss' source(none);
+@source "../node_modules/@openzeppelin/ui-components";
+@source "../node_modules/@openzeppelin/ui-react";
+@source "../node_modules/@openzeppelin/ui-renderer";
+@source "../node_modules/@openzeppelin/ui-styles";
+@source "../node_modules/@openzeppelin/ui-utils";
 @import '@openzeppelin/ui-styles/global.css';
-@import 'tailwindcss';
 ```
 
 ## Development

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "1.7.0";
+const VERSION = "2.0.1";
 
 //#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);
 			})
 		})
 	});
@@ -2674,13 +2674,13 @@ const MAX_SUGGESTIONS = 5;
 * 2. TransactionForm renders the overall form structure with React Hook Form
 * 3. DynamicFormField selects the appropriate field component (like AddressField) based on field type
 * 4. BaseField provides consistent layout and hook form integration
-* 5. This component handles blockchain address-specific rendering and validation using the passed adapter
+* 5. This component handles blockchain address-specific rendering and validation using the passed addressing capability
 *
 * The component includes:
 * - Integration with React Hook Form
-* - Blockchain address validation through adapter-provided custom validation
+* - Blockchain address validation through the provided addressing capability
 * - Automatic error handling and reporting
-* - Chain-agnostic design (validation handled by adapters)
+* - Chain-agnostic design (validation handled by capabilities)
 * - Full accessibility support with ARIA attributes
 * - Keyboard navigation
 *
@@ -2695,7 +2695,7 @@ const MAX_SUGGESTIONS = 5;
 * The suggestion dropdown includes built-in debouncing, keyboard navigation (Arrow keys,
 * Enter, Escape), click-outside dismissal, and ARIA listbox semantics.
 */
-function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, adapter, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
+function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, addressing, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -2778,8 +2778,8 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 				if (value === void 0 || value === null || value === "") return validation?.required ? "This field is required" : true;
 				const standardValidationResult = require_ErrorMessage.validateField(value, validation);
 				if (standardValidationResult !== true) return standardValidationResult;
-				if (adapter && typeof value === "string") {
-					if (!adapter.isValidAddress(value)) return "Invalid address format for the selected chain";
+				if (addressing && typeof value === "string") {
+					if (!addressing.isValidAddress(value)) return "Invalid address format for the selected chain";
 				}
 				return true;
 			} },
@@ -2855,7 +2855,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);
@@ -3335,7 +3335,7 @@ ArrayField.displayName = "ArrayField";
 * The component combines the functionality of ArrayField and ObjectField to handle
 * complex nested data structures commonly found in blockchain contracts.
 */
-function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, adapter, contractSchema }) {
+function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, typeMapping, contractSchema }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -3452,8 +3452,8 @@ function ArrayObjectField({ id, label, helperText, control, name, width = "full"
 								}), !isCollapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "space-y-4 mt-4",
 									children: components.map((component) => {
-										if (!adapter) throw new Error(`ArrayObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
-										const generatedField = adapter.generateDefaultField(component, contractSchema);
+										if (!typeMapping) throw new Error(`ArrayObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
+										const generatedField = typeMapping.generateDefaultField(component, contractSchema);
 										const propertyField = {
 											...generatedField,
 											id: `${id}-${index}-${component.name}`,
@@ -4549,15 +4549,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", {
@@ -5166,7 +5166,7 @@ NumberField.displayName = "NumberField";
 * The component reuses existing field components for individual properties,
 * maintaining consistency across the form system while supporting complex nested structures.
 */
-function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, adapter, contractSchema }) {
+function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, typeMapping, contractSchema }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -5193,8 +5193,8 @@ function ObjectField({ id, label, helperText, control, name, width = "full", val
 						className: "text-muted-foreground text-sm",
 						children: "No properties defined for this object"
 					}) : components.map((component) => {
-						if (!adapter) throw new Error(`ObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
-						const generatedField = adapter.generateDefaultField(component, contractSchema);
+						if (!typeMapping) throw new Error(`ObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
+						const generatedField = typeMapping.generateDefaultField(component, contractSchema);
 						const propertyField = {
 							...generatedField,
 							id: `${id}-${component.name}`,
@@ -5442,7 +5442,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 +5456,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);
 						})
@@ -6216,19 +6216,19 @@ function useNetworkErrors() {
 	return context;
 }
 /**
-* Hook for reporting network errors for a specific adapter
+* Hook for reporting network errors for a specific runtime-bound capability
 */
-function useNetworkErrorReporter(adapter) {
+function useNetworkErrorReporter(capability) {
 	const { reportNetworkError } = useNetworkErrors();
 	return {
 		reportRpcError: (0, react.useCallback)((message) => {
-			if (!adapter) return;
-			reportNetworkError("rpc", adapter.networkConfig.id, adapter.networkConfig.name, message);
-		}, [adapter, reportNetworkError]),
+			if (!capability) return;
+			reportNetworkError("rpc", capability.networkConfig.id, capability.networkConfig.name, message);
+		}, [capability, reportNetworkError]),
 		reportExplorerError: (0, react.useCallback)((message) => {
-			if (!adapter) return;
-			reportNetworkError("explorer", adapter.networkConfig.id, adapter.networkConfig.name, message);
-		}, [adapter, reportNetworkError])
+			if (!capability) return;
+			reportNetworkError("explorer", capability.networkConfig.id, capability.networkConfig.name, message);
+		}, [capability, reportNetworkError])
 	};
 }
 
@@ -6237,15 +6237,15 @@ function useNetworkErrorReporter(adapter) {
 /**
 * Creates an adapter proxy that intercepts and reports network errors
 */
-function useNetworkErrorAwareAdapter(adapter) {
+function useNetworkErrorAwareAdapter(capability) {
 	const { reportNetworkError } = useNetworkErrors();
-	const wrappedAdapterRef = (0, react.useRef)(null);
+	const wrappedCapabilityRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
-		if (!adapter) {
-			wrappedAdapterRef.current = null;
+		if (!capability) {
+			wrappedCapabilityRef.current = null;
 			return;
 		}
-		wrappedAdapterRef.current = new Proxy(adapter, { get(target, prop, receiver) {
+		wrappedCapabilityRef.current = new Proxy(capability, { get(target, prop, receiver) {
 			const value = Reflect.get(target, prop, receiver);
 			if (typeof value === "function" && (prop === "queryViewFunction" || prop === "loadContract")) return async (...args) => {
 				try {
@@ -6259,8 +6259,8 @@ function useNetworkErrorAwareAdapter(adapter) {
 			};
 			return value;
 		} });
-	}, [adapter, reportNetworkError]);
-	return wrappedAdapterRef.current;
+	}, [capability, reportNetworkError]);
+	return wrappedCapabilityRef.current;
 }
 
 //#endregion