@openzeppelin/ui-components 3.0.1 → 3.2.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { a as getValidationStateClasses, c as isDuplicateMapKey, d as INTEGER_HTML_PATTERN, f as INTEGER_INPUT_PATTERN, i as getErrorMessage, l as validateField, n as createValidationResult, o as handleValidationError, p as INTEGER_PATTERN, r as formatValidationError, s as hasFieldError, t as ErrorMessage, u as validateMapEntries } from "./ErrorMessage-BqOEJm84.mjs";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 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 { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, ClipboardPaste, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, MoreHorizontal, Network, Pencil, PencilLine, 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, getHostedNetworkAvailabilityNoticeCopy, getInvalidUrlMessage, getServiceDisplayName, isNetworkAvailabilityPolicyActive, 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.1";
+const VERSION = "3.2.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -2940,6 +2940,457 @@ 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 = {
+	addSingleAddress: "Add",
+	invalidSingleAddress: "Enter a valid address",
+	enableBulkEntry: "Bulk paste",
+	enableSingleEntry: "Single entry",
+	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/AddressListBulkEntry.tsx
+/** Bulk paste entry — info callout, textarea, and add action in a compact stack. */
+function AddressListBulkEntry({ fieldId, value, onAdd, placeholder, formatHint, addressing, maxItems, disabled = false, maxInvalidPreview = 3, labels, modeToggle }) {
+	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 statusMessage = rawInput.trim() ? previewSummary ?? void 0 : feedback ?? void 0;
+	const handleAdd = useCallback(() => {
+		if (!classification || classification.accepted.length === 0 || atLimit) return;
+		onAdd(classification.accepted);
+		reset({ input: "" });
+		setFeedback(formatAddressBulkSummary(classification, classification.accepted.length, labels));
+	}, [
+		classification,
+		atLimit,
+		onAdd,
+		reset,
+		labels
+	]);
+	const acceptedCount = classification?.accepted.length ?? 0;
+	const addButtonLabel = acceptedCount > 0 ? labels.addAddressCount(acceptedCount) : labels.addAddresses;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-2 rounded-lg border border-border/70 bg-muted/30 px-3 py-2.5",
+				children: [/* @__PURE__ */ jsx(Info, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("p", {
+					className: "text-xs leading-relaxed text-muted-foreground",
+					children: formatHint
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "relative",
+				children: /* @__PURE__ */ jsx(TextAreaField, {
+					id: `address-list-bulk-${fieldId}`,
+					name: "input",
+					label: "",
+					placeholder,
+					helperText: statusMessage,
+					control,
+					rows: 4,
+					validation: { required: false },
+					readOnly: inputDisabled
+				})
+			}), modeToggle ? /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end pr-2",
+				children: modeToggle
+			}) : null] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [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)}` : ""
+						]
+					}) : null, atLimit && maxItems != null ? /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: labels.maxItemsReached(maxItems)
+					}) : null]
+				}), /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					size: "sm",
+					className: "shrink-0",
+					disabled: inputDisabled || acceptedCount === 0,
+					onClick: () => handleAdd(),
+					children: [/* @__PURE__ */ jsx(Plus, { className: "mr-1 size-4" }), addButtonLabel]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListEntries.tsx
+/** Renders committed addresses with remove actions. Shared by single and bulk entry modes. */
+function AddressListEntries({ value, getExplorerUrl, disabled = false, labels, onRemove }) {
+	if (value.length === 0) return null;
+	return /* @__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: () => onRemove(index),
+					disabled,
+					"aria-label": labels.removeAddress(index),
+					children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+				})]
+			}, `${address}-${index}`))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListSingleEntry.tsx
+/** Single-address entry — inline {@link AddressField} with an Add button (address-book aware). */
+function AddressListSingleEntry({ fieldId, value, onAdd, placeholder, addressing, maxItems, disabled = false, labels, modeToggle }) {
+	const atLimit = maxItems != null && value.length >= maxItems;
+	const inputDisabled = disabled || atLimit;
+	const { control, reset, getValues, handleSubmit } = useForm({
+		defaultValues: { draft: "" },
+		mode: "onChange"
+	});
+	const trimmedDraft = (useWatch({
+		control,
+		name: "draft"
+	}) ?? "").trim();
+	const validationState = useMemo(() => {
+		if (!trimmedDraft) return {
+			canAdd: false,
+			showInvalid: false
+		};
+		if (value.includes(trimmedDraft)) return {
+			canAdd: false,
+			showInvalid: false
+		};
+		if (atLimit) return {
+			canAdd: false,
+			showInvalid: false
+		};
+		if (addressing && !addressing.isValidAddress(trimmedDraft)) return {
+			canAdd: false,
+			showInvalid: true
+		};
+		return {
+			canAdd: true,
+			showInvalid: false
+		};
+	}, [
+		trimmedDraft,
+		value,
+		atLimit,
+		addressing
+	]);
+	const submitAdd = useCallback(() => {
+		if (!validationState.canAdd) return;
+		onAdd(getValues("draft").trim());
+		reset({ draft: "" });
+	}, [
+		validationState.canAdd,
+		onAdd,
+		getValues,
+		reset
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx(AddressField, {
+					id: `address-list-single-${fieldId}`,
+					name: "draft",
+					label: "",
+					placeholder,
+					helperText: validationState.showInvalid ? labels.invalidSingleAddress : void 0,
+					control,
+					addressing,
+					validation: { required: false },
+					readOnly: inputDisabled
+				}), modeToggle ? /* @__PURE__ */ jsx("div", {
+					className: "-mt-px flex justify-end pr-2",
+					children: modeToggle
+				}) : null]
+			}), /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				className: "h-10 shrink-0",
+				disabled: inputDisabled || !validationState.canAdd,
+				onClick: handleSubmit(submitAdd),
+				children: [/* @__PURE__ */ jsx(Plus, { className: "mr-1 size-4" }), labels.addSingleAddress]
+			})]
+		}), atLimit && maxItems != null && /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground",
+			children: labels.maxItemsReached(maxItems)
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/fields/AddressListField/AddressListField.tsx
+/**
+* Multi-address list field with single-entry default and optional bulk paste.
+*/
+function AddressListField({ value, onChange, placeholder, bulkPlaceholder, formatHint, addressing, getExplorerUrl, label, helperText, maxItems, disabled = false, maxInvalidPreview = 3, className, defaultEntryMode = "single", allowModeToggle = true, labels: labelOverrides }) {
+	const fieldId = useId();
+	const labels = useMemo(() => resolveAddressListFieldLabels(labelOverrides), [labelOverrides]);
+	const [entryMode, setEntryMode] = useState(defaultEntryMode);
+	const resolvedBulkPlaceholder = bulkPlaceholder ?? placeholder;
+	const handleRemove = useCallback((index) => {
+		onChange(value.filter((_, currentIndex) => currentIndex !== index));
+	}, [onChange, value]);
+	const handleAddSingle = useCallback((address) => {
+		onChange([...value, address]);
+	}, [onChange, value]);
+	const handleAddBulk = useCallback((addresses) => {
+		onChange([...value, ...addresses]);
+	}, [onChange, value]);
+	const switchToBulk = useCallback(() => setEntryMode("bulk"), []);
+	const switchToSingle = useCallback(() => setEntryMode("single"), []);
+	const toggleClassName = "inline-flex items-center gap-1 rounded-b-md rounded-t-none border border-t-0 border-input bg-muted/40 px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+	const modeToggle = !allowModeToggle ? void 0 : entryMode === "single" ? /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: switchToBulk,
+		className: toggleClassName,
+		children: [/* @__PURE__ */ jsx(ClipboardPaste, { className: "size-3" }), labels.enableBulkEntry]
+	}) : /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: switchToSingle,
+		className: toggleClassName,
+		children: [/* @__PURE__ */ jsx(PencilLine, { className: "size-3" }), labels.enableSingleEntry]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-3", className),
+		children: [
+			label ? /* @__PURE__ */ jsx(Label, {
+				className: "text-sm font-medium leading-none",
+				children: label
+			}) : null,
+			helperText && entryMode === "single" ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm leading-relaxed text-muted-foreground",
+				children: helperText
+			}) : null,
+			entryMode === "single" ? /* @__PURE__ */ jsx(AddressListSingleEntry, {
+				fieldId,
+				value,
+				onAdd: handleAddSingle,
+				placeholder,
+				addressing,
+				maxItems,
+				disabled,
+				labels,
+				modeToggle
+			}) : /* @__PURE__ */ jsx(AddressListBulkEntry, {
+				fieldId,
+				value,
+				onAdd: handleAddBulk,
+				placeholder: resolvedBulkPlaceholder,
+				formatHint,
+				addressing,
+				maxItems,
+				disabled,
+				maxInvalidPreview,
+				labels,
+				modeToggle
+			}),
+			/* @__PURE__ */ jsx(AddressListEntries, {
+				value,
+				getExplorerUrl,
+				disabled,
+				labels,
+				onRemove: handleRemove
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/fields/address-suggestion/address-suggestion-context.tsx
 /**
@@ -5732,105 +6183,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
 /**
@@ -6422,5 +6774,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, 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, 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