@openzeppelin/ui-components 1.0.4 → 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"}