@openzeppelin/ui-components 1.7.0 → 2.0.1

package/dist/index.mjs

@@ -26,7 +26,7 @@ import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
 
 //#region src/version.ts
-const VERSION = "1.7.0";
+const VERSION = "2.0.1";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -114,7 +114,7 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React$1.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 	ref,
 	sideOffset,
-	className: 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: 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 = TooltipPrimitive.Content.displayName;
@@ -561,15 +561,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: 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: 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: 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
 		},
@@ -638,7 +638,7 @@ function CardFooter({ className, ...props }) {
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
 		"data-slot": "checkbox",
-		className: 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: 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__ */ jsx(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",
@@ -1232,7 +1232,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__ */ jsx(Menu, { className: "size-5" })
 				}),
 				title && /* @__PURE__ */ jsx("div", {
@@ -1479,7 +1479,7 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 						className: "gap-2",
 						children: [
 							isMultiple ? /* @__PURE__ */ jsx("div", {
-								className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary",
+								className: 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__ */ jsx(Check, { className: "h-3 w-3" })
 							}) : null,
 							getNetworkIcon?.(network),
@@ -1493,7 +1493,7 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 									children: getNetworkType(network)
 								})]
 							}),
-							!isMultiple && isSelected(network) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 opacity-100" })
+							!isMultiple && isSelected(network) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-selected opacity-100" })
 						]
 					}, getNetworkId(network))) }),
 					index < Object.keys(groupedNetworks).length - 1 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
@@ -1583,7 +1583,7 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React$1.forwardRef(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
 		ref,
-		className: 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: 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__ */ jsx(RadioGroupPrimitive.Indicator, {
 			className: "flex items-center justify-center",
@@ -1675,7 +1675,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 * Can render as a button or anchor element depending on whether href is provided.
 */
 function SidebarButton({ icon, children, onClick, size = "default", badge, disabled = false, isSelected = false, href, target, rel, className }) {
-	const commonClass = cn("group relative flex 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 = 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
 		children: [icon, children]
@@ -1853,7 +1853,7 @@ function TabsList({ className, ...props }) {
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: 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: 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
 	});
 }
@@ -1928,7 +1928,7 @@ function canClick(state, freeNavigation = false) {
 }
 function StepCircle({ state, index }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-all", state === "completed" && "bg-blue-600 text-white", state === "current" && "bg-blue-600 text-white ring-2 ring-blue-200", state === "visited" && "bg-blue-100 text-blue-600 ring-1 ring-blue-300", state === "invalid" && "bg-red-100 text-red-600 ring-1 ring-red-300", state === "upcoming" && "bg-zinc-100 text-zinc-400"),
+		className: 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__ */ jsx(Check, { className: "size-3.5" }) : state === "visited" ? /* @__PURE__ */ jsx(Pencil, { className: "size-3" }) : state === "invalid" ? /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5" }) : index + 1
 	});
 }
@@ -1936,10 +1936,10 @@ function StepLabel({ title, state, isSkipped }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0 flex-1",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("text-sm font-medium transition-colors", state === "current" && "text-blue-700", state === "completed" && "text-zinc-700", state === "visited" && "text-blue-600", state === "invalid" && "text-red-600", state === "upcoming" && "text-zinc-400"),
+			className: 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__ */ jsx("span", {
-			className: "mt-0.5 block text-[11px] text-zinc-400",
+			className: "mt-0.5 block text-[11px] text-muted-foreground",
 			children: "Skipped"
 		})]
 	});
@@ -1947,7 +1947,7 @@ function StepLabel({ title, state, isSkipped }) {
 function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Wizard steps",
-		className: cn("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		className: cn("rounded-2xl border border-border bg-card p-6", className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-1",
 			children: steps.map((step, index) => {
@@ -1957,7 +1957,7 @@ function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentS
 					type: "button",
 					onClick: () => clickable && onStepClick?.(index),
 					disabled: !clickable,
-					className: cn("flex items-center gap-3 rounded-xl border border-transparent px-3 py-3 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-blue-200 bg-blue-50", state === "completed" && "bg-white hover:bg-gray-50", state === "visited" && "bg-white hover:bg-blue-50/50", state === "invalid" && "border-red-200 bg-red-50 hover:bg-red-100/60", state === "upcoming" && "bg-white"),
+					className: cn("flex items-center gap-3 rounded-xl border border-transparent px-3 py-3 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-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__ */ jsx(StepCircle, {
 						state,
@@ -1975,7 +1975,7 @@ function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentS
 function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Wizard steps",
-		className: cn("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		className: cn("rounded-2xl border border-border bg-card p-6", className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex w-full items-center",
 			children: steps.map((step, index) => {
@@ -1986,7 +1986,7 @@ function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = curren
 					type: "button",
 					onClick: () => clickable && onStepClick?.(index),
 					disabled: !clickable,
-					className: cn("flex items-center gap-2 rounded-xl border border-transparent px-3 py-2 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-blue-200 bg-blue-50", state === "completed" && "bg-white hover:bg-gray-50", state === "visited" && "bg-white hover:bg-blue-50/50", state === "invalid" && "border-red-200 bg-red-50 hover:bg-red-100/60", state === "upcoming" && "bg-white"),
+					className: cn("flex items-center gap-2 rounded-xl border border-transparent px-3 py-2 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-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__ */ jsx(StepCircle, {
@@ -2000,7 +2000,7 @@ function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = curren
 							isSkipped: step.status === "skipped"
 						})
 					})]
-				}), !isLast && /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-px flex-1 transition-colors sm:mx-2", index < currentStepIndex ? "bg-blue-600" : "bg-zinc-200") })] }, step.id);
+				}), !isLast && /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-px flex-1 transition-colors sm:mx-2", index < currentStepIndex ? "bg-selected" : "bg-border") })] }, step.id);
 			})
 		})
 	});
@@ -2662,13 +2662,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
 *
@@ -2683,7 +2683,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`;
@@ -2766,8 +2766,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 = 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;
 			} },
@@ -2843,7 +2843,7 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 								type: "button",
 								role: "option",
 								"aria-selected": i === highlightedIndex,
-								className: cn("flex w-full flex-col px-3 py-2 text-left text-sm", "hover:bg-accent", i === highlightedIndex && "bg-accent"),
+								className: 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);
@@ -3323,7 +3323,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`;
@@ -3440,8 +3440,8 @@ function ArrayObjectField({ id, label, helperText, control, name, width = "full"
 								}), !isCollapsed && /* @__PURE__ */ 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}`,
@@ -4537,15 +4537,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__ */ jsxs("div", {
 							className: "flex flex-col items-center justify-center gap-3 text-center",
 							children: [/* @__PURE__ */ jsx("div", {
-								className: `rounded-full p-3 transition-colors ${isDragOver ? "bg-primary/10" : "bg-muted"}`,
-								children: /* @__PURE__ */ jsx(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__ */ jsx(Upload, { className: `h-8 w-8 transition-colors ${isDragOver ? "text-selected" : "text-muted-foreground"}` })
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "space-y-1",
 								children: [/* @__PURE__ */ jsx("p", {
@@ -5154,7 +5154,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`;
@@ -5181,8 +5181,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}`,
@@ -5430,7 +5430,7 @@ function RadioField({ id, label, helperText, control, name, width = "full", vali
 							const isDisabled = option.disabled;
 							return /* @__PURE__ */ 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__ */ jsx("input", {
 										type: "radio",
@@ -5444,13 +5444,13 @@ function RadioField({ id, label, helperText, control, name, width = "full", vali
 									}),
 									/* @__PURE__ */ jsxs("div", {
 										className: "relative flex size-4 items-center justify-center",
-										children: [/* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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);
 						})
@@ -6204,19 +6204,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: 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: 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])
 	};
 }
 
@@ -6225,15 +6225,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 = useRef(null);
+	const wrappedCapabilityRef = useRef(null);
 	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 {
@@ -6247,8 +6247,8 @@ function useNetworkErrorAwareAdapter(adapter) {
 			};
 			return value;
 		} });
-	}, [adapter, reportNetworkError]);
-	return wrappedAdapterRef.current;
+	}, [capability, reportNetworkError]);
+	return wrappedCapabilityRef.current;
 }
 
 //#endregion