@openzeppelin/ui-components 1.1.0 → 1.2.0

package/dist/{ErrorMessage-DyO9ZWWz.js → ErrorMessage-BqOEJm84.mjs}

@@ -167,4 +167,4 @@ function ErrorMessage({ error, id, message, className = "" }) {
 
 //#endregion
 export { getValidationStateClasses as a, isDuplicateMapKey as c, INTEGER_HTML_PATTERN as d, INTEGER_INPUT_PATTERN as f, getErrorMessage as i, validateField as l, createValidationResult as n, handleValidationError as o, INTEGER_PATTERN as p, formatValidationError as r, hasFieldError as s, ErrorMessage as t, validateMapEntries as u };
-//# sourceMappingURL=ErrorMessage-DyO9ZWWz.js.map
+//# sourceMappingURL=ErrorMessage-BqOEJm84.mjs.map

package/dist/ErrorMessage-BqOEJm84.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage-BqOEJm84.mjs","names":[],"sources":["../src/components/fields/utils/integerValidation.ts","../src/components/fields/utils/validation.ts","../src/components/fields/utils/ErrorMessage.tsx"],"sourcesContent":["/**\n * Shared integer validation patterns for BigInt fields and validation utilities.\n *\n * These patterns ensure consistent validation across the application.\n */\n\n/**\n * Integer validation pattern - requires at least one digit\n * Used for validation to ensure complete integers are entered\n * Matches: -123, 0, 456\n * Does not match: -, abc, 12.3\n */\nexport const INTEGER_PATTERN = /^-?\\d+$/;\n\n/**\n * Integer input pattern - allows partial input during typing\n * Used during input to allow users to type minus sign first\n * Matches: -, -1, 123, (empty string)\n * Does not match: abc, 12.3\n */\nexport const INTEGER_INPUT_PATTERN = /^-?\\d*$/;\n\n/**\n * HTML pattern attribute for integer inputs\n * Must use [0-9] instead of \\d for HTML5 pattern attribute\n */\nexport const INTEGER_HTML_PATTERN = '-?[0-9]*';\n","/**\n * Validation and error handling utilities for form field components\n */\nimport { FieldError } from 'react-hook-form';\n\nimport { FieldValidation, MapEntry } from '@openzeppelin/ui-types';\n\nimport { INTEGER_PATTERN } from './integerValidation';\n\n/**\n * Determines if a field has an error\n */\nexport function hasFieldError(error: FieldError | undefined): boolean {\n  return !!error;\n}\n\n/**\n * Gets appropriate error message from field error\n */\nexport function getErrorMessage(error: FieldError | undefined): string | undefined {\n  if (!error) return undefined;\n\n  return error.message || 'This field is invalid';\n}\n\n/**\n * Formats validation error messages for display\n */\nexport function formatValidationError(\n  error: FieldError | undefined,\n  fieldName?: string\n): string | undefined {\n  if (!error) return undefined;\n\n  const defaultMessage = fieldName ? `${fieldName} is invalid` : 'This field is invalid';\n\n  return error.message || defaultMessage;\n}\n\n/**\n * Generates common CSS classes for field validation states\n */\nexport function getValidationStateClasses(\n  error: FieldError | undefined,\n  touched?: boolean\n): string {\n  if (error) {\n    return 'border-destructive focus:border-destructive focus:ring-destructive/30';\n  }\n\n  if (touched) {\n    return 'border-success focus:border-success focus:ring-success/30';\n  }\n\n  return '';\n}\n\n/**\n * Helper for handling form validation errors with React Hook Form\n */\nexport function handleValidationError(\n  error: FieldError | undefined,\n  id: string\n): {\n  errorId: string;\n  errorMessage: string | undefined;\n  hasError: boolean;\n  validationClasses: string;\n} {\n  const hasError = hasFieldError(error);\n  const errorMessage = getErrorMessage(error);\n  const errorId = `${id}-error`;\n  const validationClasses = getValidationStateClasses(error);\n\n  return {\n    errorId,\n    errorMessage,\n    hasError,\n    validationClasses,\n  };\n}\n\n/**\n * Creates a validation result object for field components\n */\nexport function createValidationResult(\n  id: string,\n  error: FieldError | undefined,\n  touched?: boolean\n): {\n  hasError: boolean;\n  errorMessage: string | undefined;\n  errorId: string;\n  validationClasses: string;\n  'aria-invalid': boolean;\n  'aria-errormessage'?: string;\n} {\n  const hasError = hasFieldError(error);\n  const errorMessage = getErrorMessage(error);\n  const errorId = `${id}-error`;\n  const validationClasses = getValidationStateClasses(error, touched);\n\n  return {\n    hasError,\n    errorMessage,\n    errorId,\n    validationClasses,\n    'aria-invalid': hasError,\n    'aria-errormessage': hasError ? errorId : undefined,\n  };\n}\n\n/**\n * Generic field validation function that can be used to validate any field type\n * based on common validation criteria\n */\nexport function validateField(value: unknown, validation?: FieldValidation): string | boolean {\n  // Return true if no validation rules are provided\n  if (!validation) return true;\n\n  // Check if required but empty\n  if (validation.required && (value === undefined || value === null || value === '')) {\n    return typeof validation.required === 'boolean'\n      ? 'This field is required'\n      : 'This field is required'; // Always return the standard message for required fields\n  }\n\n  // Skip other validations if value is empty and not required\n  if (value === undefined || value === null || value === '') {\n    return true;\n  }\n\n  // Validate string length\n  if (typeof value === 'string') {\n    if (validation.minLength && value.length < validation.minLength) {\n      return `Minimum length is ${validation.minLength} characters`;\n    }\n\n    if (validation.maxLength && value.length > validation.maxLength) {\n      return `Maximum length is ${validation.maxLength} characters`;\n    }\n\n    // Validate pattern\n    if (validation.pattern) {\n      const pattern =\n        typeof validation.pattern === 'string'\n          ? new RegExp(validation.pattern)\n          : validation.pattern;\n\n      if (!pattern.test(value)) {\n        // Provide more specific error message for integer validation\n        if (!INTEGER_PATTERN.test(value) && /\\d/.test(value)) {\n          return 'Value must be a valid integer (no decimals)';\n        }\n        return 'Value does not match the required pattern';\n      }\n    }\n  }\n\n  // Validate number range\n  if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {\n    const numValue = typeof value === 'number' ? value : Number(value);\n\n    if (validation.min !== undefined && numValue < validation.min) {\n      return `Minimum value is ${validation.min}`;\n    }\n\n    if (validation.max !== undefined && numValue > validation.max) {\n      return `Maximum value is ${validation.max}`;\n    }\n  }\n\n  // Check field conditions if defined\n  if (validation.conditions && validation.conditions.length > 0) {\n    // Note: This would need the current form values to evaluate conditions\n    // This is intended to be used with React Hook Form's validation context\n    // Implementation would depend on how conditions are evaluated in the form context\n  }\n\n  // If all validations pass\n  return true;\n}\n\n/**\n * Map validation utilities\n */\n\n/**\n * Checks if a map entry at the given index has a duplicate key\n * @param entries - Array of map entries\n * @param currentIndex - Index of the entry to check\n * @returns true if the key at currentIndex is duplicated elsewhere in the array\n */\nexport function isDuplicateMapKey(entries: MapEntry[], currentIndex: number): boolean {\n  if (!Array.isArray(entries) || entries.length <= 1) {\n    return false;\n  }\n\n  const currentKeyValue = entries[currentIndex]?.key;\n\n  // Don't consider empty keys as duplicates\n  if (!currentKeyValue || currentKeyValue === '') {\n    return false;\n  }\n\n  // Prefer strict equality to avoid cross-type false positives (e.g., 123 vs \"123\")\n  // Treat empty string as non-duplicate as above.\n  return entries.some((entry: MapEntry, i: number) => {\n    if (i === currentIndex) return false;\n    const key = entry?.key;\n    if (key === '') return false;\n    // If both are strings, compare strings\n    if (typeof key === 'string' && typeof currentKeyValue === 'string') {\n      return key === currentKeyValue;\n    }\n    // If both are numbers, compare numbers\n    if (typeof key === 'number' && typeof currentKeyValue === 'number') {\n      return Number.isNaN(key) ? Number.isNaN(currentKeyValue) : key === currentKeyValue;\n    }\n    // If both are booleans\n    if (typeof key === 'boolean' && typeof currentKeyValue === 'boolean') {\n      return key === currentKeyValue;\n    }\n    // For objects (including dates) fall back to reference equality\n    if (\n      typeof key === 'object' &&\n      key !== null &&\n      typeof currentKeyValue === 'object' &&\n      currentKeyValue !== null\n    ) {\n      return key === currentKeyValue;\n    }\n    // Otherwise, consider different types as different keys\n    return false;\n  });\n}\n\n/**\n * Validates an array of map entries for duplicate keys\n * @param entries - Array of map entries to validate\n * @returns Validation error message if duplicates found, otherwise undefined\n */\nexport function validateMapEntries(entries: MapEntry[]): string | undefined {\n  if (!Array.isArray(entries) || entries.length <= 1) {\n    return undefined;\n  }\n\n  const keys = entries\n    .map((entry) => entry?.key)\n    .filter((key) => key !== undefined && key !== null && key !== '');\n\n  const keyStrings = keys.map((key) => String(key));\n  const uniqueKeyStrings = new Set(keyStrings);\n\n  if (keyStrings.length !== uniqueKeyStrings.size) {\n    return 'Duplicate keys are not allowed';\n  }\n\n  return undefined;\n}\n","import React from 'react';\nimport { FieldError } from 'react-hook-form';\n\nimport { getErrorMessage } from './validation';\n\ninterface ErrorMessageProps {\n  /**\n   * The error object from React Hook Form\n   */\n  error?: FieldError;\n\n  /**\n   * The ID of the error message for aria-errormessage references\n   */\n  id: string;\n\n  /**\n   * Optional custom error message to display instead of the error from React Hook Form\n   */\n  message?: string;\n\n  /**\n   * Optional additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * Displays validation error messages for form fields\n */\nexport function ErrorMessage({\n  error,\n  id,\n  message,\n  className = '',\n}: ErrorMessageProps): React.ReactElement | null {\n  const errorMessage = message || getErrorMessage(error);\n\n  if (!errorMessage) return null;\n\n  return (\n    <div id={id} className={`text-destructive mt-1 text-sm ${className}`} role=\"alert\">\n      {errorMessage}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/code-editor.cjs

@@ -1,12 +1,12 @@
 const require_ErrorMessage = require('./ErrorMessage-D4BAP8iw.cjs');
+let react = require("react");
+react = require_ErrorMessage.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_hook_form = require("react-hook-form");
 let _uiw_react_textarea_code_editor = require("@uiw/react-textarea-code-editor");
 _uiw_react_textarea_code_editor = require_ErrorMessage.__toESM(_uiw_react_textarea_code_editor);
 let _uiw_react_textarea_code_editor_nohighlight = require("@uiw/react-textarea-code-editor/nohighlight");
 _uiw_react_textarea_code_editor_nohighlight = require_ErrorMessage.__toESM(_uiw_react_textarea_code_editor_nohighlight);
-let react = require("react");
-react = require_ErrorMessage.__toESM(react);
-let react_hook_form = require("react-hook-form");
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/fields/CodeEditorField.tsx
 /**

package/dist/code-editor.d.cts

@@ -116,7 +116,6 @@ declare function CodeEditorField<TFieldValues extends FieldValues = FieldValues>
 declare namespace CodeEditorField {
   var displayName: string;
 }
-//# sourceMappingURL=CodeEditorField.d.ts.map
 //#endregion
 export { CodeEditorField, CodeEditorFieldProps };
-//# sourceMappingURL=code-editor-BKEEXGxt.d.cts.map
+//# sourceMappingURL=code-editor.d.cts.map

package/dist/code-editor.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.d.cts","names":[],"sources":["../src/components/fields/CodeEditorField.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;AAA2D,UAA1C,oBAA0C,CAAA,qBAAA,WAAA,GAAc,WAAd,CAAA,CAAA;EAAc;;;EAmBtD,EAAA,EAAA,MAAA;EAAR;;AAsFX;EAAqD,SAAA,CAAA,EAAA,MAAA;EAAc;;;EAGjE,IAAA,EA9FM,IA8FN,CA9FW,YA8FX,CAAA;EACA;;;EAGA,OAAA,EA7FS,OA6FT,CA7FiB,YA6FjB,CAAA;EACA;;;EAGA,KAAA,CAAA,EAAA,MAAA;EACA;;;EAGA,UAAA,CAAA,EAAA,MAAA;EACA;;;EACsC,WAAM,CAAA,EAAA,MAAA;EAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjB1C,qCAAqC,cAAc;;;;;;;;;;;;;;;;;GAiBhE,qBAAqB,gBAAgB,KAAA,CAAM;kBAjB9B,eAAA"}

package/dist/{code-editor-CxxSe1o8.d.ts → code-editor.d.mts}

@@ -116,7 +116,6 @@ declare function CodeEditorField<TFieldValues extends FieldValues = FieldValues>
 declare namespace CodeEditorField {
   var displayName: string;
 }
-//# sourceMappingURL=CodeEditorField.d.ts.map
 //#endregion
 export { CodeEditorField, CodeEditorFieldProps };
-//# sourceMappingURL=code-editor-CxxSe1o8.d.ts.map
+//# sourceMappingURL=code-editor.d.mts.map

package/dist/code-editor.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.d.mts","names":[],"sources":["../src/components/fields/CodeEditorField.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;AAA2D,UAA1C,oBAA0C,CAAA,qBAAA,WAAA,GAAc,WAAd,CAAA,CAAA;EAAc;;;EAmBtD,EAAA,EAAA,MAAA;EAAR;;AAsFX;EAAqD,SAAA,CAAA,EAAA,MAAA;EAAc;;;EAGjE,IAAA,EA9FM,IA8FN,CA9FW,YA8FX,CAAA;EACA;;;EAGA,OAAA,EA7FS,OA6FT,CA7FiB,YA6FjB,CAAA;EACA;;;EAGA,KAAA,CAAA,EAAA,MAAA;EACA;;;EAGA,UAAA,CAAA,EAAA,MAAA;EACA;;;EACsC,WAAM,CAAA,EAAA,MAAA;EAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjB1C,qCAAqC,cAAc;;;;;;;;;;;;;;;;;GAiBhE,qBAAqB,gBAAgB,KAAA,CAAM;kBAjB9B,eAAA"}

package/dist/{code-editor.js → code-editor.mjs}

@@ -1,9 +1,9 @@
-import { t as ErrorMessage } from "./ErrorMessage-DyO9ZWWz.js";
-import CodeEditor from "@uiw/react-textarea-code-editor";
-import CodeEditorNoHighlight from "@uiw/react-textarea-code-editor/nohighlight";
+import { t as ErrorMessage } from "./ErrorMessage-BqOEJm84.mjs";
 import React from "react";
-import { Controller } from "react-hook-form";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import CodeEditor from "@uiw/react-textarea-code-editor";
+import CodeEditorNoHighlight from "@uiw/react-textarea-code-editor/nohighlight";
 
 //#region src/components/fields/CodeEditorField.tsx
 /**
@@ -126,4 +126,4 @@ CodeEditorField.displayName = "CodeEditorField";
 
 //#endregion
 export { CodeEditorField };
-//# sourceMappingURL=code-editor.js.map
+//# sourceMappingURL=code-editor.mjs.map

package/dist/code-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.mjs","names":[],"sources":["../src/components/fields/CodeEditorField.tsx"],"sourcesContent":["import CodeEditor from '@uiw/react-textarea-code-editor';\nimport CodeEditorNoHighlight from '@uiw/react-textarea-code-editor/nohighlight';\nimport React from 'react';\nimport { Controller, type Control, type FieldValues, type Path } from 'react-hook-form';\n\nimport { ErrorMessage } from './utils';\n\n/**\n * CodeEditorField component properties\n */\nexport interface CodeEditorFieldProps<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * Unique identifier for the field\n   */\n  id: string;\n\n  /**\n   * Optional CSS class name for the container\n   */\n  className?: string;\n\n  /**\n   * Field name for form control\n   */\n  name: Path<TFieldValues>;\n\n  /**\n   * React Hook Form control object\n   */\n  control: Control<TFieldValues>;\n\n  /**\n   * Field label\n   */\n  label?: string;\n\n  /**\n   * Helper text displayed below the field\n   */\n  helperText?: string;\n\n  /**\n   * Placeholder text when empty\n   */\n  placeholder?: string;\n\n  /**\n   * Programming language for syntax highlighting\n   */\n  language?: string;\n\n  /**\n   * Editor theme\n   */\n  theme?: string;\n\n  /**\n   * Editor height\n   */\n  height?: string;\n\n  /**\n   * Editor maximum height (with scrollbar for overflow)\n   */\n  maxHeight?: string;\n\n  /**\n   * Content size threshold for disabling syntax highlighting (default: 5000 chars)\n   */\n  performanceThreshold?: number;\n\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the field is read-only\n   */\n  readOnly?: boolean;\n\n  /**\n   * Custom validation function for code values\n   */\n  validateCode?: (value: string) => boolean | string;\n}\n\n/**\n * CodeEditorField provides syntax-highlighted code editing with form integration.\n *\n * Features:\n * - Syntax highlighting via @uiw/react-textarea-code-editor\n * - React Hook Form integration with Controller\n * - Configurable language support (JSON, TypeScript, etc.)\n * - Performance optimizations with smart highlighting\n * - Constrained height with automatic scrolling\n * - Design system styling integration\n *\n * @example\n * ```tsx\n * <CodeEditorField\n *   id=\"contractAbi\"\n *   name=\"contractSchema\"\n *   control={control}\n *   label=\"Contract ABI\"\n *   language=\"json\"\n *   placeholder=\"Paste your ABI JSON here...\"\n * />\n * ```\n */\nexport function CodeEditorField<TFieldValues extends FieldValues = FieldValues>({\n  id,\n  name,\n  control,\n  label,\n  helperText,\n  placeholder = '',\n  language = 'json',\n  theme = 'light',\n  height = '200px',\n  maxHeight = '400px',\n  performanceThreshold = 5000,\n  required = false,\n  disabled = false,\n  readOnly = false,\n  validateCode,\n  className,\n}: CodeEditorFieldProps<TFieldValues>): React.ReactElement {\n  // Convert height strings to numbers for native props with robust parsing\n  function extractPixelValue(val: string | number, fallback: number): number {\n    if (typeof val === 'number') return val;\n    const match = typeof val === 'string' ? val.match(/^(\\d+)\\s*px$/) : null;\n    if (match) return parseInt(match[1], 10);\n    return fallback;\n  }\n  const minHeightNum = extractPixelValue(height, 200);\n  const maxHeightNum = extractPixelValue(maxHeight, 400);\n\n  return (\n    <div className={className}>\n      {label && (\n        <label htmlFor={id} className=\"block text-sm font-medium text-foreground mb-2\">\n          {label}\n          {required && <span className=\"text-destructive ml-1\">*</span>}\n        </label>\n      )}\n\n      <Controller\n        name={name}\n        control={control}\n        rules={{\n          required: required ? 'This field is required' : false,\n          // Move validation to onBlur to avoid expensive operations on every keystroke\n          validate: {\n            validCode: (value: string) => {\n              if (!validateCode || !value) return true;\n\n              const validation = validateCode(value);\n              if (typeof validation === 'string') {\n                return validation;\n              }\n              if (validation === false) {\n                return 'Invalid code format';\n              }\n              return true;\n            },\n          },\n        }}\n        render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => {\n          // Check if content is too large for syntax highlighting\n          const contentSize = (value || '').length;\n          const shouldDisableHighlighting = contentSize > performanceThreshold;\n          const EditorComponent = shouldDisableHighlighting ? CodeEditorNoHighlight : CodeEditor;\n\n          // Update form immediately to prevent controlled component conflicts\n          const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n            onChange(event.target.value); // Immediate update for controlled component\n          };\n\n          // Simple blur handler\n          const handleBlur = (): void => {\n            onBlur();\n          };\n\n          return (\n            <div className=\"space-y-2\">\n              <div\n                className=\"w-full rounded-md border border-input bg-background ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed resize-y\"\n                style={{\n                  maxHeight: `${maxHeightNum}px`,\n                  overflow: 'auto',\n                  overflowX: 'hidden', // Prevent horizontal scrolling and expansion\n                  minHeight: `${minHeightNum}px`,\n                  resize: 'vertical',\n                }}\n              >\n                <EditorComponent\n                  id={id}\n                  value={value || ''}\n                  language={language}\n                  placeholder={placeholder}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  padding={12}\n                  minHeight={minHeightNum}\n                  data-color-mode={theme as 'light' | 'dark'}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  data-testid={`${id}-code-editor${shouldDisableHighlighting ? '-no-highlight' : ''}`}\n                  className=\"text-sm placeholder:text-muted-foreground\"\n                  style={{\n                    fontFamily:\n                      'ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace',\n                    fontSize: '14px',\n                    border: 'none',\n                    backgroundColor: 'transparent',\n                    width: '100%',\n                    wordWrap: 'break-word', // Break long words to prevent horizontal overflow\n                    whiteSpace: 'pre-wrap', // Preserve formatting while allowing wrapping\n                    overflowWrap: 'break-word', // Modern CSS property for word breaking\n                  }}\n                />\n              </div>\n\n              <ErrorMessage error={error} id={`${id}-error`} />\n\n              {helperText && !error && (\n                <p className=\"text-sm text-muted-foreground\" id={`${id}-helper`}>\n                  {helperText}\n                </p>\n              )}\n            </div>\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nCodeEditorField.displayName = 'CodeEditorField';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,SAAgB,gBAAgE,EAC9E,IACA,MACA,SACA,OACA,YACA,cAAc,IACd,WAAW,QACX,QAAQ,SACR,SAAS,SACT,YAAY,SACZ,uBAAuB,KACvB,WAAW,OACX,WAAW,OACX,WAAW,OACX,cACA,aACyD;CAEzD,SAAS,kBAAkB,KAAsB,UAA0B;AACzE,MAAI,OAAO,QAAQ,SAAU,QAAO;EACpC,MAAM,QAAQ,OAAO,QAAQ,WAAW,IAAI,MAAM,eAAe,GAAG;AACpE,MAAI,MAAO,QAAO,SAAS,MAAM,IAAI,GAAG;AACxC,SAAO;;CAET,MAAM,eAAe,kBAAkB,QAAQ,IAAI;CACnD,MAAM,eAAe,kBAAkB,WAAW,IAAI;AAEtD,QACE,qBAAC;EAAe;aACb,SACC,qBAAC;GAAM,SAAS;GAAI,WAAU;cAC3B,OACA,YAAY,oBAAC;IAAK,WAAU;cAAwB;KAAQ;IACvD,EAGV,oBAAC;GACO;GACG;GACT,OAAO;IACL,UAAU,WAAW,2BAA2B;IAEhD,UAAU,EACR,YAAY,UAAkB;AAC5B,SAAI,CAAC,gBAAgB,CAAC,MAAO,QAAO;KAEpC,MAAM,aAAa,aAAa,MAAM;AACtC,SAAI,OAAO,eAAe,SACxB,QAAO;AAET,SAAI,eAAe,MACjB,QAAO;AAET,YAAO;OAEV;IACF;GACD,SAAS,EAAE,OAAO,EAAE,UAAU,QAAQ,SAAS,YAAY,EAAE,cAAc;IAGzE,MAAM,6BADe,SAAS,IAAI,SACc;IAChD,MAAM,kBAAkB,4BAA4B,wBAAwB;IAG5E,MAAM,gBAAgB,UAAwD;AAC5E,cAAS,MAAM,OAAO,MAAM;;IAI9B,MAAM,mBAAyB;AAC7B,aAAQ;;AAGV,WACE,qBAAC;KAAI,WAAU;;MACb,oBAAC;OACC,WAAU;OACV,OAAO;QACL,WAAW,GAAG,aAAa;QAC3B,UAAU;QACV,WAAW;QACX,WAAW,GAAG,aAAa;QAC3B,QAAQ;QACT;iBAED,oBAAC;QACK;QACJ,OAAO,SAAS;QACN;QACG;QACb,UAAU;QACV,QAAQ;QACR,SAAS;QACT,WAAW;QACX,mBAAiB;QACP;QACA;QACV,eAAa,GAAG,GAAG,cAAc,4BAA4B,kBAAkB;QAC/E,WAAU;QACV,OAAO;SACL,YACE;SACF,UAAU;SACV,QAAQ;SACR,iBAAiB;SACjB,OAAO;SACP,UAAU;SACV,YAAY;SACZ,cAAc;SACf;SACD;QACE;MAEN,oBAAC;OAAoB;OAAO,IAAI,GAAG,GAAG;QAAW;MAEhD,cAAc,CAAC,SACd,oBAAC;OAAE,WAAU;OAAgC,IAAI,GAAG,GAAG;iBACpD;QACC;;MAEF;;IAGV;GACE;;AAIV,gBAAgB,cAAc"}

package/dist/index.cjs

@@ -1,13 +1,12 @@
 const require_ErrorMessage = require('./ErrorMessage-D4BAP8iw.cjs');
-let react = require("react");
-react = require_ErrorMessage.__toESM(react);
-let react_hook_form = require("react-hook-form");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 _radix_ui_react_accordion = require_ErrorMessage.__toESM(_radix_ui_react_accordion);
 let class_variance_authority = require("class-variance-authority");
 let lucide_react = require("lucide-react");
+let react = require("react");
+react = require_ErrorMessage.__toESM(react);
 let _openzeppelin_ui_utils = require("@openzeppelin/ui-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let react_day_picker = require("react-day-picker");
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
@@ -19,6 +18,7 @@ let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 _radix_ui_react_dialog = require_ErrorMessage.__toESM(_radix_ui_react_dialog);
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 _radix_ui_react_dropdown_menu = require_ErrorMessage.__toESM(_radix_ui_react_dropdown_menu);
+let react_hook_form = require("react-hook-form");
 let _radix_ui_react_label = require("@radix-ui/react-label");
 _radix_ui_react_label = require_ErrorMessage.__toESM(_radix_ui_react_label);
 let _radix_ui_react_progress = require("@radix-ui/react-progress");
@@ -37,195 +37,6 @@ let _openzeppelin_ui_types = require("@openzeppelin/ui-types");
 let sonner = require("sonner");
 let next_themes = require("next-themes");
 
-//#region src/components/fields/utils/accessibility.ts
-/**
-* Accessibility utilities for form field components
-*/
-/**
-* Default aria-describedby ID generator based on field ID
-*/
-function getDescribedById(id, type = "error") {
-	return `${id}-${type}`;
-}
-/**
-* Generates accessibility attributes for form fields
-*/
-function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
-	const describedByIds = [];
-	if (hasError) describedByIds.push(getDescribedById(id, "error"));
-	if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
-	if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
-	return {
-		"aria-invalid": hasError,
-		"aria-required": isRequired,
-		"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
-		"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
-		required: isRequired,
-		disabled: isDisabled,
-		readOnly: isReadOnly,
-		tabIndex: isDisabled ? -1 : 0
-	};
-}
-/**
-* Utility function to handle keyboard events for interactive elements
-* Helps ensure keyboard users can interact with form controls
-*/
-function handleKeyboardEvent(event, handlers) {
-	switch (event.key) {
-		case "Enter":
-			if (handlers.onEnter) {
-				event.preventDefault();
-				handlers.onEnter();
-			}
-			break;
-		case " ":
-			if (handlers.onSpace) {
-				event.preventDefault();
-				handlers.onSpace();
-			}
-			break;
-		case "Escape":
-			if (handlers.onEscape) {
-				event.preventDefault();
-				handlers.onEscape();
-			}
-			break;
-		case "ArrowUp":
-			if (handlers.onArrowUp) {
-				event.preventDefault();
-				handlers.onArrowUp();
-			}
-			break;
-		case "ArrowDown":
-			if (handlers.onArrowDown) {
-				event.preventDefault();
-				handlers.onArrowDown();
-			}
-			break;
-		case "ArrowLeft":
-			if (handlers.onArrowLeft) {
-				event.preventDefault();
-				handlers.onArrowLeft();
-			}
-			break;
-		case "ArrowRight":
-			if (handlers.onArrowRight) {
-				event.preventDefault();
-				handlers.onArrowRight();
-			}
-			break;
-		case "Tab":
-			if (handlers.onTab) {
-				event.preventDefault();
-				handlers.onTab();
-			}
-			break;
-		default: break;
-	}
-}
-/**
-* Field focus management utility
-* For managing focus within a field group or complex form component
-*/
-function createFocusManager() {
-	return {
-		focusFirstElement(container) {
-			if (!container) return;
-			const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
-			if (focusable.length > 0) focusable[0].focus();
-		},
-		focusElementById(id) {
-			const element = document.getElementById(id);
-			if (element) element.focus();
-		},
-		trapFocus(event, container) {
-			if (!container || event.key !== "Tab") return;
-			const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
-			if (focusable.length === 0) return;
-			const firstElement = focusable[0];
-			const lastElement = focusable[focusable.length - 1];
-			if (event.shiftKey && document.activeElement === firstElement) {
-				event.preventDefault();
-				lastElement.focus();
-			} else if (!event.shiftKey && document.activeElement === lastElement) {
-				event.preventDefault();
-				firstElement.focus();
-			}
-		}
-	};
-}
-/**
-* Provides a handler for Escape key to clear input fields
-*
-* @param onChange - Function to call when value changes
-* @param value - Current value of the input
-* @returns A function to handle the Escape key press
-*/
-function handleEscapeKey(onChange, value) {
-	return (e) => {
-		if (e.key === "Escape") {
-			e.preventDefault();
-			if (value) onChange("");
-			else e.target.blur();
-		}
-	};
-}
-/**
-* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
-*
-* @param onChange - Function to call when value changes
-* @param value - Current value of the input
-* @returns A function to handle the Space/Enter key press
-*/
-function handleToggleKeys(onChange, value) {
-	return (e) => {
-		if (e.key === " " || e.key === "Enter") {
-			e.preventDefault();
-			onChange(!value);
-		}
-	};
-}
-/**
-* Provides a handler for arrow keys for numeric inputs
-*
-* @param onChange - Function to call when value changes
-* @param value - Current numeric value
-* @param step - Step amount for increments/decrements
-* @param min - Minimum allowed value (optional)
-* @param max - Maximum allowed value (optional)
-* @returns A function to handle arrow key presses
-*/
-function handleNumericKeys(onChange, value, step = 1, min, max) {
-	return (e) => {
-		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-			e.preventDefault();
-			const direction = e.key === "ArrowUp" ? 1 : -1;
-			let newValue = typeof value === "number" ? value + step * direction : 0;
-			if (typeof min === "number") newValue = Math.max(min, newValue);
-			if (typeof max === "number") newValue = Math.min(max, newValue);
-			onChange(newValue);
-		}
-	};
-}
-
-//#endregion
-//#region src/components/fields/utils/layout.ts
-/**
-* Layout utility functions for form components
-*/
-/**
-* Helper function to get width classes based on the field width
-*/
-function getWidthClasses(width) {
-	switch (width) {
-		case "half": return "form-field-half";
-		case "third": return "form-field-third";
-		case "full":
-		default: return "form-field-full";
-	}
-}
-
-//#endregion
 //#region src/components/ui/accordion.tsx
 const accordionItemVariants = (0, class_variance_authority.cva)("", {
 	variants: { variant: {
@@ -1706,6 +1517,195 @@ function ViewContractStateButton({ contractAddress, onToggle }) {
 	});
 }
 
+//#endregion
+//#region src/components/fields/utils/accessibility.ts
+/**
+* Accessibility utilities for form field components
+*/
+/**
+* Default aria-describedby ID generator based on field ID
+*/
+function getDescribedById(id, type = "error") {
+	return `${id}-${type}`;
+}
+/**
+* Generates accessibility attributes for form fields
+*/
+function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
+	const describedByIds = [];
+	if (hasError) describedByIds.push(getDescribedById(id, "error"));
+	if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
+	if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
+	return {
+		"aria-invalid": hasError,
+		"aria-required": isRequired,
+		"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
+		"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
+		required: isRequired,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		tabIndex: isDisabled ? -1 : 0
+	};
+}
+/**
+* Utility function to handle keyboard events for interactive elements
+* Helps ensure keyboard users can interact with form controls
+*/
+function handleKeyboardEvent(event, handlers) {
+	switch (event.key) {
+		case "Enter":
+			if (handlers.onEnter) {
+				event.preventDefault();
+				handlers.onEnter();
+			}
+			break;
+		case " ":
+			if (handlers.onSpace) {
+				event.preventDefault();
+				handlers.onSpace();
+			}
+			break;
+		case "Escape":
+			if (handlers.onEscape) {
+				event.preventDefault();
+				handlers.onEscape();
+			}
+			break;
+		case "ArrowUp":
+			if (handlers.onArrowUp) {
+				event.preventDefault();
+				handlers.onArrowUp();
+			}
+			break;
+		case "ArrowDown":
+			if (handlers.onArrowDown) {
+				event.preventDefault();
+				handlers.onArrowDown();
+			}
+			break;
+		case "ArrowLeft":
+			if (handlers.onArrowLeft) {
+				event.preventDefault();
+				handlers.onArrowLeft();
+			}
+			break;
+		case "ArrowRight":
+			if (handlers.onArrowRight) {
+				event.preventDefault();
+				handlers.onArrowRight();
+			}
+			break;
+		case "Tab":
+			if (handlers.onTab) {
+				event.preventDefault();
+				handlers.onTab();
+			}
+			break;
+		default: break;
+	}
+}
+/**
+* Field focus management utility
+* For managing focus within a field group or complex form component
+*/
+function createFocusManager() {
+	return {
+		focusFirstElement(container) {
+			if (!container) return;
+			const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			if (focusable.length > 0) focusable[0].focus();
+		},
+		focusElementById(id) {
+			const element = document.getElementById(id);
+			if (element) element.focus();
+		},
+		trapFocus(event, container) {
+			if (!container || event.key !== "Tab") return;
+			const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
+			if (focusable.length === 0) return;
+			const firstElement = focusable[0];
+			const lastElement = focusable[focusable.length - 1];
+			if (event.shiftKey && document.activeElement === firstElement) {
+				event.preventDefault();
+				lastElement.focus();
+			} else if (!event.shiftKey && document.activeElement === lastElement) {
+				event.preventDefault();
+				firstElement.focus();
+			}
+		}
+	};
+}
+/**
+* Provides a handler for Escape key to clear input fields
+*
+* @param onChange - Function to call when value changes
+* @param value - Current value of the input
+* @returns A function to handle the Escape key press
+*/
+function handleEscapeKey(onChange, value) {
+	return (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			if (value) onChange("");
+			else e.target.blur();
+		}
+	};
+}
+/**
+* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
+*
+* @param onChange - Function to call when value changes
+* @param value - Current value of the input
+* @returns A function to handle the Space/Enter key press
+*/
+function handleToggleKeys(onChange, value) {
+	return (e) => {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			onChange(!value);
+		}
+	};
+}
+/**
+* Provides a handler for arrow keys for numeric inputs
+*
+* @param onChange - Function to call when value changes
+* @param value - Current numeric value
+* @param step - Step amount for increments/decrements
+* @param min - Minimum allowed value (optional)
+* @param max - Maximum allowed value (optional)
+* @returns A function to handle arrow key presses
+*/
+function handleNumericKeys(onChange, value, step = 1, min, max) {
+	return (e) => {
+		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			e.preventDefault();
+			const direction = e.key === "ArrowUp" ? 1 : -1;
+			let newValue = typeof value === "number" ? value + step * direction : 0;
+			if (typeof min === "number") newValue = Math.max(min, newValue);
+			if (typeof max === "number") newValue = Math.min(max, newValue);
+			onChange(newValue);
+		}
+	};
+}
+
+//#endregion
+//#region src/components/fields/utils/layout.ts
+/**
+* Layout utility functions for form components
+*/
+/**
+* Helper function to get width classes based on the field width
+*/
+function getWidthClasses(width) {
+	switch (width) {
+		case "half": return "form-field-half";
+		case "third": return "form-field-third";
+		case "full":
+		default: return "form-field-full";
+	}
+}
+
 //#endregion
 //#region src/components/fields/AddressField.tsx
 /**
@@ -5093,6 +5093,65 @@ function useNetworkErrorAwareAdapter(adapter) {
 	return wrappedAdapterRef.current;
 }
 
+//#endregion
+//#region src/components/network-errors/NetworkServiceErrorBanner.tsx
+/**
+* User-friendly banner displayed when a network service connection fails.
+* Works with any service type (RPC, Explorer, Indexer, etc.) and provides
+* a clear explanation of the issue with a call-to-action to open the
+* network settings dialog where users can configure an alternative endpoint.
+*
+* This component can be used with or without the NetworkErrorNotificationProvider:
+* - With provider: The settings handler is obtained from context
+* - Without provider: Pass onOpenNetworkSettings prop directly, or the button won't render
+*/
+function NetworkServiceErrorBanner({ networkConfig, serviceType, errorMessage, title, description, onOpenNetworkSettings: onOpenNetworkSettingsProp }) {
+	const context = (0, react.useContext)(NetworkErrorContext);
+	const onOpenNetworkSettings = onOpenNetworkSettingsProp ?? context?.onOpenNetworkSettings;
+	const handleOpenSettings = () => {
+		onOpenNetworkSettings?.(networkConfig.id);
+	};
+	const serviceName = (0, _openzeppelin_ui_utils.getServiceDisplayName)(serviceType);
+	const defaultTitle = `Unable to Connect to ${networkConfig.name}`;
+	const defaultDescription = onOpenNetworkSettings ? `This could be due to network congestion, rate limiting, or the service being temporarily down. You can configure a custom ${serviceName.toLowerCase()} endpoint in the network settings.` : `This could be due to network congestion, rate limiting, or the service being temporarily down.`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Alert, {
+		variant: "destructive",
+		className: "border-red-500/50 bg-red-50 dark:bg-red-950/20",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CloudOff, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertTitle, {
+				className: "text-red-900 dark:text-red-100",
+				children: title || defaultTitle
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDescription, {
+				className: "text-red-800 dark:text-red-200",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mb-2",
+						children: errorMessage || `The ${serviceName.toLowerCase()} for ${networkConfig.name} is currently unavailable or not responding.`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm mb-3",
+						children: description || defaultDescription
+					}),
+					onOpenNetworkSettings && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+						onClick: handleOpenSettings,
+						variant: "default",
+						size: "sm",
+						className: "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "mr-2 h-4 w-4" }),
+							"Configure ",
+							serviceName,
+							" Settings"
+						]
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/ui/sonner.tsx
 const Toaster = ({ ...props }) => {
@@ -5191,6 +5250,7 @@ exports.MidnightIcon = MidnightIcon;
 exports.NetworkErrorNotificationProvider = NetworkErrorNotificationProvider;
 exports.NetworkIcon = NetworkIcon;
 exports.NetworkSelector = NetworkSelector;
+exports.NetworkServiceErrorBanner = NetworkServiceErrorBanner;
 exports.NetworkStatusBadge = NetworkStatusBadge;
 exports.NumberField = NumberField;
 exports.ObjectField = ObjectField;