@openzeppelin/ui-components 3.0.0 → 3.1.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, MoreHorizontal, Network, Pencil, Plus, Search, Settings, Timer, Upload, X } from "lucide-react";
 import * as React$1 from "react";
 import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { cn, getDefaultValueForType, getInvalidUrlMessage, getServiceDisplayName, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
+import { classifyAddressCandidates, cn, getDefaultValueForType, getHostedNetworkAvailabilityNoticeCopy, getInvalidUrlMessage, getServiceDisplayName, isNetworkAvailabilityPolicyActive, isValidUrl, parseDelimitedAddressInput, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Slot, Slottable } from "@radix-ui/react-slot";
@@ -14,7 +14,7 @@ import { format } from "date-fns";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Controller, FormProvider, useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { Controller, FormProvider, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -26,7 +26,7 @@ import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
 
 //#region src/version.ts
-const VERSION = "3.0.0";
+const VERSION = "3.1.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -1336,7 +1336,7 @@ function NetworkIcon({ network, className, size = 16, variant = "branded" }) {
 //#endregion
 //#region src/components/ui/network-selector.tsx
 /** Searchable dropdown selector for blockchain networks with optional grouping and multi-select. */
-function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetworkType, getNetworkId, groupByEcosystem = false, getEcosystem, filterNetwork, className, placeholder = "Select Network", ...modeProps }) {
+function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetworkType, getNetworkId, groupByEcosystem = false, getEcosystem, filterNetwork, isNetworkDisabled, getNetworkDisabledLabel, className, placeholder = "Select Network", ...modeProps }) {
 	const [open, setOpen] = React$1.useState(false);
 	const [searchQuery, setSearchQuery] = React$1.useState("");
 	const isMultiple = modeProps.multiple === true;
@@ -1377,6 +1377,7 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 		getNetworkId
 	]);
 	const handleSelect = React$1.useCallback((network) => {
+		if (isNetworkDisabled?.(network)) return;
 		if (isMultiple && selectedNetworkIds && onSelectionChange) {
 			const id = getNetworkId(network);
 			onSelectionChange(selectedNetworkIds.includes(id) ? selectedNetworkIds.filter((x) => x !== id) : [...selectedNetworkIds, id]);
@@ -1389,7 +1390,8 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 		selectedNetworkIds,
 		onSelectionChange,
 		onSelectNetwork,
-		getNetworkId
+		getNetworkId,
+		isNetworkDisabled
 	]);
 	const handleClearAll = React$1.useCallback(() => {
 		if (isMultiple && onSelectionChange) onSelectionChange([]);
@@ -1475,31 +1477,47 @@ function NetworkSelector({ networks, getNetworkLabel, getNetworkIcon, getNetwork
 						className: "text-xs font-medium text-muted-foreground",
 						children: group
 					}),
-					/* @__PURE__ */ jsx(DropdownMenuGroup, { children: groupNetworks.map((network) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-						onSelect: (e) => {
-							if (isMultiple) e.preventDefault();
-							handleSelect(network);
-						},
-						className: "gap-2",
-						children: [
-							isMultiple ? /* @__PURE__ */ jsx("div", {
-								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),
-							/* @__PURE__ */ jsxs("div", {
-								className: "flex flex-1 items-center gap-2 min-w-0",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "truncate",
-									children: getNetworkLabel(network)
-								}), getNetworkType && /* @__PURE__ */ jsx("span", {
-									className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase text-muted-foreground",
-									children: getNetworkType(network)
-								})]
-							}),
-							!isMultiple && isSelected(network) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-selected opacity-100" })
-						]
-					}, getNetworkId(network))) }),
+					/* @__PURE__ */ jsx(DropdownMenuGroup, { children: groupNetworks.map((network) => {
+						const disabled = isNetworkDisabled?.(network) ?? false;
+						const disabledLabel = disabled ? getNetworkDisabledLabel?.(network) : void 0;
+						return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled,
+							onSelect: (e) => {
+								if (disabled) {
+									e.preventDefault();
+									return;
+								}
+								if (isMultiple) e.preventDefault();
+								handleSelect(network);
+							},
+							className: cn("gap-2", disabled && "cursor-not-allowed opacity-60"),
+							children: [
+								isMultiple ? /* @__PURE__ */ jsx("div", {
+									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", disabled && "opacity-50"),
+									children: isSelected(network) && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
+								}) : null,
+								getNetworkIcon?.(network),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex flex-1 items-center gap-2 min-w-0",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: getNetworkLabel(network)
+										}),
+										getNetworkType && /* @__PURE__ */ jsx("span", {
+											className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase text-muted-foreground",
+											children: getNetworkType(network)
+										}),
+										disabledLabel ? /* @__PURE__ */ jsx("span", {
+											className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+											children: disabledLabel
+										}) : null
+									]
+								}),
+								!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, {})
 				] }, group))]
 			})]
@@ -2922,6 +2940,312 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 }
 AddressField.displayName = "AddressField";
 
+//#endregion
+//#region src/components/fields/TextAreaField.tsx
+/**
+* Multi-line text input field component specifically designed for React Hook Form integration.
+*
+* Architecture flow:
+* 1. Form schemas are generated from contract functions using adapters
+* 2. TransactionForm renders the overall form structure with React Hook Form
+* 3. DynamicFormField selects the appropriate field component based on field type
+* 4. BaseField provides consistent layout and hook form integration
+* 5. This component handles textarea-specific rendering and validation
+*
+* The component includes:
+* - Integration with React Hook Form
+* - Resizable multi-line text input
+* - Character limit support
+* - Customizable validation through adapter integration
+* - Automatic error handling and reporting
+* - Full accessibility support with ARIA attributes
+* - Keyboard navigation with Escape to clear
+*/
+function TextAreaField({ id, label, placeholder, helperText, control, name, width = "full", validation, rows = 4, maxLength, validateTextArea, readOnly }) {
+	const isRequired = !!validation?.required;
+	const errorId = `${id}-error`;
+	const descriptionId = `${id}-description`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-2 ${width === "full" ? "w-full" : width === "half" ? "w-1/2" : "w-1/3"}`,
+		children: [label && /* @__PURE__ */ jsxs(Label, {
+			htmlFor: id,
+			children: [
+				label,
+				" ",
+				isRequired && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: "*"
+				})
+			]
+		}), /* @__PURE__ */ jsx(Controller, {
+			control,
+			name,
+			rules: { validate: (value) => {
+				if (value === void 0 || value === null || value === "") return validation?.required ? "This field is required" : true;
+				if (validateTextArea && value) {
+					const validation$1 = validateTextArea(value);
+					if (validation$1 !== true && typeof validation$1 === "string") return validation$1;
+				}
+				if (maxLength && typeof value === "string" && value.length > maxLength) return `Maximum length is ${maxLength} characters`;
+				return true;
+			} },
+			disabled: readOnly,
+			render: ({ field, fieldState: { error, isTouched } }) => {
+				const hasError = !!error;
+				const shouldShowError = hasError && isTouched;
+				const validationClasses = getValidationStateClasses(error, isTouched);
+				const accessibilityProps = getAccessibilityProps({
+					id,
+					hasError,
+					isRequired,
+					hasHelperText: !!helperText
+				});
+				return /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Textarea, {
+						...field,
+						id,
+						placeholder,
+						rows,
+						maxLength,
+						className: validationClasses,
+						value: field.value ?? "",
+						disabled: readOnly,
+						...accessibilityProps,
+						"aria-describedby": `${helperText ? descriptionId : ""} ${hasError ? errorId : ""}`,
+						onKeyDown: handleEscapeKey((value) => {
+							if (typeof field.onChange === "function") field.onChange(value);
+						}, field.value)
+					}),
+					maxLength && typeof field.value === "string" && /* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground text-right text-xs",
+						children: [
+							field.value.length,
+							"/",
+							maxLength
+						]
+					}),
+					helperText && /* @__PURE__ */ jsx("div", {
+						id: descriptionId,
+						className: "text-muted-foreground text-sm",
+						children: helperText
+					}),
+					/* @__PURE__ */ jsx(ErrorMessage, {
+						error,
+						id: errorId,
+						message: shouldShowError ? error?.message : void 0
+					})
+				] });
+			}
+		})]
+	});
+}
+TextAreaField.displayName = "TextAreaField";
+
+//#endregion
+//#region src/components/fields/AddressListField/labels.ts
+/** Default English labels for {@link AddressListField}. */
+const DEFAULT_ADDRESS_LIST_FIELD_LABELS = {
+	addAddresses: "Add addresses",
+	addAddressCount: (count) => `Add ${count} address${count === 1 ? "" : "es"}`,
+	invalidPrefix: "Invalid:",
+	invalidMore: (extraCount) => `(+${extraCount} more)`,
+	maxItemsReached: (maxItems) => `Maximum of ${maxItems} addresses reached.`,
+	addressesAdded: (count) => `${count} address${count === 1 ? "" : "es"} added`,
+	removeAddress: (index) => `Remove address ${index + 1}`,
+	previewReadyToAdd: (count) => `${count} ready to add`,
+	previewInvalid: (count) => `${count} invalid`,
+	previewAlreadyListed: (count) => `${count} already listed`,
+	previewDuplicateInPaste: (count) => `${count} duplicate in paste`,
+	bulkNothingAdded: "No addresses were added. Check formatting and try again.",
+	bulkAdded: (count) => `Added ${count} address${count === 1 ? "" : "es"}`,
+	bulkInvalidFormats: (count) => `${count} invalid format${count === 1 ? "" : "s"}`,
+	bulkAlreadyListed: (count) => `${count} already listed`,
+	bulkDuplicatesInPaste: (count) => `${count} duplicate${count === 1 ? "" : "s"} in paste`
+};
+/** Merges {@link DEFAULT_ADDRESS_LIST_FIELD_LABELS} with optional overrides. */
+function resolveAddressListFieldLabels(overrides) {
+	return {
+		...DEFAULT_ADDRESS_LIST_FIELD_LABELS,
+		...overrides
+	};
+}
+/** Builds the inline helper preview shown while the user types in the draft textarea. */
+function buildAddressListPreviewSummary(classification, labels) {
+	if (!classification) return null;
+	const skipped = classification.invalid.length + classification.alreadyListed.length + classification.duplicatesInInput.length;
+	if (classification.accepted.length === 0 && skipped === 0) return null;
+	const parts = [];
+	if (classification.accepted.length > 0) parts.push(labels.previewReadyToAdd(classification.accepted.length));
+	if (classification.invalid.length > 0) parts.push(labels.previewInvalid(classification.invalid.length));
+	if (classification.alreadyListed.length > 0) parts.push(labels.previewAlreadyListed(classification.alreadyListed.length));
+	if (classification.duplicatesInInput.length > 0) parts.push(labels.previewDuplicateInPaste(classification.duplicatesInInput.length));
+	return parts.join(" · ");
+}
+/** Formats post-add feedback after the user commits parsed addresses to the list. */
+function formatAddressBulkSummary(classification, addedCount, labels) {
+	if (addedCount === 0 && classification.accepted.length === 0) {
+		if (classification.invalid.length + classification.alreadyListed.length + classification.duplicatesInInput.length === 0) return null;
+		return labels.bulkNothingAdded;
+	}
+	const parts = [];
+	if (addedCount > 0) parts.push(labels.bulkAdded(addedCount));
+	if (classification.invalid.length > 0) parts.push(labels.bulkInvalidFormats(classification.invalid.length));
+	if (classification.alreadyListed.length > 0) parts.push(labels.bulkAlreadyListed(classification.alreadyListed.length));
+	if (classification.duplicatesInInput.length > 0) parts.push(labels.bulkDuplicatesInPaste(classification.duplicatesInInput.length));
+	if (parts.length === 0) return null;
+	return parts.join(". ") + ".";
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListField.tsx
+/**
+* Multi-address list field for bulk paste workflows.
+*
+* Architecture flow:
+* 1. App or wizard steps hold the committed address list in local or form state
+* 2. AddressListField renders a draft textarea plus the committed list rows
+* 3. Parsing and classification run via `@openzeppelin/ui-utils` helpers
+* 4. Optional {@link AddressingCapability} validates candidates before add
+* 5. {@link AddressDisplay} renders each committed row with copy and explorer links
+*
+* The component includes:
+* - Delimiter-aware bulk paste (newlines, commas, semicolons)
+* - Live preview of accepted, invalid, duplicate, and already-listed candidates
+* - Optional `maxItems` cap with disabled input at the limit
+* - Removable list rows with accessible remove buttons
+* - Caller-controlled copy for placeholders and format hints
+* - Optional `labels` overrides for built-in button and status strings
+*
+* @example
+* ```tsx
+* const [addresses, setAddresses] = useState<string[]>([]);
+*
+* <AddressListField
+*   value={addresses}
+*   onChange={setAddresses}
+*   placeholder="Paste addresses (one per line or comma-separated)"
+*   formatHint="Each entry is validated before it is added."
+*   addressing={capabilities}
+* />
+* ```
+*/
+function AddressListField({ value, onChange, placeholder, formatHint, addressing, getExplorerUrl, label, helperText, maxItems, disabled = false, maxInvalidPreview = 3, className, labels: labelOverrides }) {
+	const fieldId = useId();
+	const labels = useMemo(() => resolveAddressListFieldLabels(labelOverrides), [labelOverrides]);
+	const atLimit = maxItems != null && value.length >= maxItems;
+	const inputDisabled = disabled || atLimit;
+	const [feedback, setFeedback] = useState(null);
+	const { control, reset, watch } = useForm({
+		defaultValues: { input: "" },
+		mode: "onChange"
+	});
+	const rawInput = watch("input");
+	const classification = useMemo(() => {
+		if (!rawInput.trim()) return null;
+		return classifyAddressCandidates(parseDelimitedAddressInput(rawInput), value, addressing, maxItems);
+	}, [
+		rawInput,
+		value,
+		addressing,
+		maxItems
+	]);
+	const previewSummary = useMemo(() => buildAddressListPreviewSummary(classification, labels), [classification, labels]);
+	const inlineHelperText = rawInput.trim() ? previewSummary ?? void 0 : feedback ?? void 0;
+	const handleAdd = useCallback(() => {
+		if (!classification || classification.accepted.length === 0 || atLimit) return;
+		onChange([...value, ...classification.accepted]);
+		reset({ input: "" });
+		setFeedback(formatAddressBulkSummary(classification, classification.accepted.length, labels));
+	}, [
+		classification,
+		atLimit,
+		onChange,
+		value,
+		reset,
+		labels
+	]);
+	const handleRemove = useCallback((index) => {
+		onChange(value.filter((_, currentIndex) => currentIndex !== index));
+		setFeedback(null);
+	}, [onChange, value]);
+	const acceptedCount = classification?.accepted.length ?? 0;
+	const addButtonLabel = acceptedCount > 0 ? labels.addAddressCount(acceptedCount) : labels.addAddresses;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-3", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [helperText ? /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: helperText
+				}) : null, /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: formatHint
+				})]
+			}),
+			/* @__PURE__ */ jsx(TextAreaField, {
+				id: `address-list-field-${fieldId}`,
+				name: "input",
+				label: label ?? "",
+				placeholder,
+				helperText: inlineHelperText,
+				control,
+				rows: 4,
+				validation: { required: false },
+				readOnly: inputDisabled
+			}),
+			classification && classification.invalid.length > 0 && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-destructive",
+				children: [
+					labels.invalidPrefix,
+					" ",
+					classification.invalid.slice(0, maxInvalidPreview).join(", "),
+					classification.invalid.length > maxInvalidPreview ? ` ${labels.invalidMore(classification.invalid.length - maxInvalidPreview)}` : ""
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				disabled: inputDisabled || acceptedCount === 0,
+				onClick: () => handleAdd(),
+				children: addButtonLabel
+			}),
+			atLimit && maxItems != null && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: labels.maxItemsReached(maxItems)
+			}),
+			value.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: labels.addressesAdded(value.length)
+				}), /* @__PURE__ */ jsx("div", {
+					className: "max-h-44 space-y-1 overflow-y-auto rounded-md border border-border/70 p-1",
+					children: value.map((address, index) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between rounded bg-muted p-2",
+						children: [/* @__PURE__ */ jsx(AddressDisplay, {
+							address,
+							variant: "inline",
+							truncateWhenLabeled: true,
+							showCopyButton: true,
+							explorerUrl: getExplorerUrl?.(address) ?? void 0
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							className: "size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive",
+							onClick: () => handleRemove(index),
+							disabled,
+							"aria-label": labels.removeAddress(index),
+							children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+						})]
+					}, `${address}-${index}`))
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/fields/address-suggestion/address-suggestion-context.tsx
 /**
@@ -5714,105 +6038,6 @@ function SelectGroupedField({ id, label, placeholder = "Select an option", helpe
 }
 SelectGroupedField.displayName = "SelectGroupedField";
 
-//#endregion
-//#region src/components/fields/TextAreaField.tsx
-/**
-* Multi-line text input field component specifically designed for React Hook Form integration.
-*
-* Architecture flow:
-* 1. Form schemas are generated from contract functions using adapters
-* 2. TransactionForm renders the overall form structure with React Hook Form
-* 3. DynamicFormField selects the appropriate field component based on field type
-* 4. BaseField provides consistent layout and hook form integration
-* 5. This component handles textarea-specific rendering and validation
-*
-* The component includes:
-* - Integration with React Hook Form
-* - Resizable multi-line text input
-* - Character limit support
-* - Customizable validation through adapter integration
-* - Automatic error handling and reporting
-* - Full accessibility support with ARIA attributes
-* - Keyboard navigation with Escape to clear
-*/
-function TextAreaField({ id, label, placeholder, helperText, control, name, width = "full", validation, rows = 4, maxLength, validateTextArea }) {
-	const isRequired = !!validation?.required;
-	const errorId = `${id}-error`;
-	const descriptionId = `${id}-description`;
-	return /* @__PURE__ */ jsxs("div", {
-		className: `flex flex-col gap-2 ${width === "full" ? "w-full" : width === "half" ? "w-1/2" : "w-1/3"}`,
-		children: [label && /* @__PURE__ */ jsxs(Label, {
-			htmlFor: id,
-			children: [
-				label,
-				" ",
-				isRequired && /* @__PURE__ */ jsx("span", {
-					className: "text-destructive",
-					children: "*"
-				})
-			]
-		}), /* @__PURE__ */ jsx(Controller, {
-			control,
-			name,
-			rules: { validate: (value) => {
-				if (value === void 0 || value === null || value === "") return validation?.required ? "This field is required" : true;
-				if (validateTextArea && value) {
-					const validation$1 = validateTextArea(value);
-					if (validation$1 !== true && typeof validation$1 === "string") return validation$1;
-				}
-				if (maxLength && typeof value === "string" && value.length > maxLength) return `Maximum length is ${maxLength} characters`;
-				return true;
-			} },
-			render: ({ field, fieldState: { error, isTouched } }) => {
-				const hasError = !!error;
-				const shouldShowError = hasError && isTouched;
-				const validationClasses = getValidationStateClasses(error, isTouched);
-				const accessibilityProps = getAccessibilityProps({
-					id,
-					hasError,
-					isRequired,
-					hasHelperText: !!helperText
-				});
-				return /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(Textarea, {
-						...field,
-						id,
-						placeholder,
-						rows,
-						maxLength,
-						className: validationClasses,
-						value: field.value ?? "",
-						...accessibilityProps,
-						"aria-describedby": `${helperText ? descriptionId : ""} ${hasError ? errorId : ""}`,
-						onKeyDown: handleEscapeKey((value) => {
-							if (typeof field.onChange === "function") field.onChange(value);
-						}, field.value)
-					}),
-					maxLength && typeof field.value === "string" && /* @__PURE__ */ jsxs("div", {
-						className: "text-muted-foreground text-right text-xs",
-						children: [
-							field.value.length,
-							"/",
-							maxLength
-						]
-					}),
-					helperText && /* @__PURE__ */ jsx("div", {
-						id: descriptionId,
-						className: "text-muted-foreground text-sm",
-						children: helperText
-					}),
-					/* @__PURE__ */ jsx(ErrorMessage, {
-						error,
-						id: errorId,
-						message: shouldShowError ? error?.message : void 0
-					})
-				] });
-			}
-		})]
-	});
-}
-TextAreaField.displayName = "TextAreaField";
-
 //#endregion
 //#region src/components/fields/TextField.tsx
 /**
@@ -6356,6 +6581,35 @@ function NetworkServiceErrorBanner({ networkConfig, serviceType, errorMessage, t
 	});
 }
 
+//#endregion
+//#region src/components/network-availability/NetworkAvailabilityNotice.tsx
+/**
+* Banner shown when the deployment disables mainnet or specific network IDs.
+* Hidden when no network availability policy is active.
+*/
+function NetworkAvailabilityNotice({ appName, selfHostRepoUrl, className }) {
+	if (!isNetworkAvailabilityPolicyActive()) return null;
+	const { title, descriptionBeforeLink, descriptionLinkLabel } = getHostedNetworkAvailabilityNoticeCopy(appName);
+	return /* @__PURE__ */ jsxs(Alert, {
+		className,
+		children: [
+			/* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: title }),
+			/* @__PURE__ */ jsxs(AlertDescription, { children: [
+				descriptionBeforeLink,
+				/* @__PURE__ */ jsx("a", {
+					href: selfHostRepoUrl,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "font-medium underline underline-offset-4 hover:text-foreground",
+					children: descriptionLinkLabel
+				}),
+				"."
+			] })
+		]
+	});
+}
+
 //#endregion
 //#region src/components/ui/sonner.tsx
 const Toaster = ({ ...props }) => {
@@ -6375,5 +6629,5 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, VERSION, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressListField, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DEFAULT_ADDRESS_LIST_FIELD_LABELS, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkAvailabilityNotice, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, VERSION, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buildAddressListPreviewSummary, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatAddressBulkSummary, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, resolveAddressListFieldLabels, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
 //# sourceMappingURL=index.mjs.map