@letar/forms 1.1.0 → 1.2.0

package/chunk-2PSXYC3I.js

@@ -0,0 +1,1782 @@
+import { createField, FieldLabel, FieldError, useDebounce, FieldTooltip, FieldWrapper, useDeclarativeForm, useDeclarativeFormOptional } from './chunk-XFWLD5EO.js';
+import { Field, Box, Input, Spinner, List, Text, parseColor, ColorPicker, HStack, Portal, FileUpload, Button, Icon, PinInput, Group, SegmentGroup, useFileUploadContext, Float, IconButton, Flex, Tooltip } from '@chakra-ui/react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { LuUpload, LuPen, LuType, LuEraser, LuX, LuFile } from 'react-icons/lu';
+import { withMask } from 'use-mask-input';
+import { z } from 'zod/v4';
+
+// src/lib/declarative/form-fields/specialized/providers/dadata.ts
+var DADATA_URL = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address";
+function createDaDataProvider(config) {
+  const { token, baseUrl = DADATA_URL } = config;
+  return {
+    async getSuggestions(query, options) {
+      const body = {
+        query,
+        count: options?.count ?? 10
+      };
+      if (options?.bounds) {
+        if (options.bounds.from) body.from_bound = { value: options.bounds.from };
+        if (options.bounds.to) body.to_bound = { value: options.bounds.to };
+      }
+      if (options?.filters) {
+        body.locations = [options.filters];
+      }
+      const response = await fetch(baseUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          Authorization: `Token ${token}`
+        },
+        body: JSON.stringify(body)
+      });
+      if (!response.ok) {
+        return [];
+      }
+      const data = await response.json();
+      const suggestions = data.suggestions ?? [];
+      return suggestions.map(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (s) => ({
+          label: s.value,
+          value: s.value,
+          data: s.data
+        })
+      );
+    }
+  };
+}
+function useAddressProvider(propProvider, token) {
+  const formContext = useDeclarativeFormOptional();
+  if (propProvider) return propProvider;
+  if (formContext?.addressProvider) return formContext.addressProvider;
+  if (token) return createDaDataProvider({ token });
+  return null;
+}
+var FieldAddress = createField({
+  displayName: "FieldAddress",
+  useFieldState: (props) => {
+    const { provider: propProvider, token, minChars = 3, debounceMs = 300, locations } = props;
+    const provider = useAddressProvider(propProvider, token);
+    const [inputValue, setInputValue] = useState("");
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const initializedRef = useRef(false);
+    const debouncedQuery = useDebounce(inputValue, debounceMs);
+    const fetchSuggestions = useCallback(
+      async (query) => {
+        if (query.length < minChars || !provider) {
+          setSuggestions([]);
+          return;
+        }
+        setIsLoading(true);
+        try {
+          const results = await provider.getSuggestions(query, {
+            count: 10,
+            filters: locations ? Object.assign({}, ...locations) : void 0
+          });
+          setSuggestions(results);
+          setIsOpen(true);
+        } catch (error) {
+          console.error("Error loading address suggestions:", error);
+          setSuggestions([]);
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      [provider, minChars, locations]
+    );
+    useEffect(() => {
+      if (debouncedQuery) {
+        fetchSuggestions(debouncedQuery);
+      } else {
+        setSuggestions([]);
+        setIsOpen(false);
+      }
+    }, [debouncedQuery, fetchSuggestions]);
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return {
+      inputValue,
+      setInputValue,
+      suggestions,
+      setSuggestions,
+      isLoading,
+      setIsLoading,
+      isOpen,
+      setIsOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      containerRef,
+      debouncedQuery,
+      fetchSuggestions,
+      initializedRef
+    };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const { valueOnly = false } = componentProps;
+    const {
+      inputValue,
+      setInputValue,
+      suggestions,
+      setSuggestions,
+      isLoading,
+      isOpen,
+      setIsOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      containerRef,
+      initializedRef
+    } = fieldState;
+    const fieldValue = field.state.value;
+    if (!initializedRef.current && fieldValue) {
+      const displayValue = typeof fieldValue === "string" ? fieldValue : fieldValue.value;
+      if (displayValue && displayValue !== inputValue) {
+        setInputValue(displayValue);
+      }
+      initializedRef.current = true;
+    }
+    const handleSelect = (suggestion) => {
+      setInputValue(suggestion.value);
+      setIsOpen(false);
+      setSuggestions([]);
+      if (valueOnly) {
+        field.handleChange(suggestion.value);
+      } else {
+        const addressValue = {
+          value: suggestion.value,
+          data: suggestion.data
+        };
+        field.handleChange(addressValue);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (!isOpen || suggestions.length === 0) {
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex(highlightedIndex < suggestions.length - 1 ? highlightedIndex + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex(highlightedIndex > 0 ? highlightedIndex - 1 : suggestions.length - 1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0) {
+            handleSelect(suggestions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+          /* @__PURE__ */ jsxs(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: inputValue,
+                onChange: (e) => {
+                  setInputValue(e.target.value);
+                  setHighlightedIndex(-1);
+                },
+                onFocus: () => {
+                  if (suggestions.length > 0) {
+                    setIsOpen(true);
+                  }
+                },
+                onBlur: field.handleBlur,
+                onKeyDown: handleKeyDown,
+                placeholder: resolved.placeholder ?? "Start typing address...",
+                "data-field-name": fullPath
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsx(Box, { position: "absolute", right: 3, top: "50%", transform: "translateY(-50%)", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }),
+            isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
+              List.Root,
+              {
+                position: "absolute",
+                zIndex: 10,
+                width: "100%",
+                bg: "bg.panel",
+                borderWidth: "1px",
+                borderRadius: "md",
+                shadow: "md",
+                maxH: "200px",
+                overflowY: "auto",
+                mt: 1,
+                children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+                  List.Item,
+                  {
+                    px: 3,
+                    py: 2,
+                    cursor: "pointer",
+                    bg: highlightedIndex === index ? "bg.muted" : void 0,
+                    _hover: { bg: "bg.muted" },
+                    onClick: () => handleSelect(suggestion),
+                    onMouseEnter: () => setHighlightedIndex(index),
+                    children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: suggestion.label })
+                  },
+                  suggestion.value + index
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var defaultSwatches = [
+  "#000000",
+  "#4A5568",
+  "#F56565",
+  "#ED64A6",
+  "#9F7AEA",
+  "#6B46C1",
+  "#4299E1",
+  "#0BC5EA",
+  "#38B2AC",
+  "#48BB78",
+  "#ECC94B",
+  "#DD6B20"
+];
+var FieldColorPicker = createField({
+  displayName: "FieldColorPicker",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
+    const {
+      swatches = defaultSwatches,
+      size = "md",
+      showArea = true,
+      showEyeDropper = true,
+      showSliders = true,
+      showInput = true
+    } = componentProps;
+    const currentValue = field.state.value || "#000000";
+    let parsedColor;
+    try {
+      parsedColor = parseColor(currentValue);
+    } catch {
+      parsedColor = parseColor("#000000");
+    }
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsxs(
+            ColorPicker.Root,
+            {
+              value: parsedColor,
+              onValueChange: (details) => {
+                field.handleChange(details.valueAsString);
+              },
+              disabled: resolved.disabled,
+              readOnly: resolved.readOnly,
+              size,
+              children: [
+                /* @__PURE__ */ jsx(ColorPicker.HiddenInput, { name: fullPath }),
+                resolved.label && /* @__PURE__ */ jsxs(ColorPicker.Label, { children: [
+                  resolved.tooltip ? /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
+                    /* @__PURE__ */ jsx("span", { children: resolved.label }),
+                    /* @__PURE__ */ jsx(FieldTooltip, { ...resolved.tooltip })
+                  ] }) : resolved.label,
+                  resolved.required && /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
+                ] }),
+                /* @__PURE__ */ jsxs(ColorPicker.Control, { children: [
+                  showInput && /* @__PURE__ */ jsx(ColorPicker.ChannelInput, { channel: "hex" }),
+                  /* @__PURE__ */ jsx(ColorPicker.Trigger, {})
+                ] }),
+                /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ColorPicker.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker.Content, { children: [
+                  showArea && /* @__PURE__ */ jsx(ColorPicker.Area, {}),
+                  (showEyeDropper || showSliders) && /* @__PURE__ */ jsxs(HStack, { children: [
+                    showEyeDropper && /* @__PURE__ */ jsx(ColorPicker.EyeDropper, { size: "xs", variant: "outline" }),
+                    showSliders && /* @__PURE__ */ jsx(ColorPicker.Sliders, {})
+                  ] }),
+                  swatches.length > 0 && /* @__PURE__ */ jsx(ColorPicker.SwatchGroup, { children: swatches.map((swatch) => /* @__PURE__ */ jsx(ColorPicker.SwatchTrigger, { value: swatch, children: /* @__PURE__ */ jsx(ColorPicker.Swatch, { value: swatch, boxSize: "4.5" }) }, swatch)) })
+                ] }) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+
+// src/lib/declarative/security/file-security.ts
+var MIME_SIGNATURES = [
+  // Изображения
+  { bytes: [255, 216, 255], mime: "image/jpeg" },
+  { bytes: [137, 80, 78, 71], mime: "image/png" },
+  { bytes: [71, 73, 70, 56], mime: "image/gif" },
+  { bytes: [82, 73, 70, 70], mime: "image/webp" },
+  // RIFF (WebP контейнер)
+  // Документы
+  { bytes: [37, 80, 68, 70], mime: "application/pdf" },
+  // Архивы
+  { bytes: [80, 75, 3, 4], mime: "application/zip" }
+];
+function parseFileSize(size) {
+  if (typeof size === "number") return size;
+  const match = size.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+  if (!match) {
+    throw new Error(`Invalid file size format: "${size}". Use "10MB", "500KB", etc.`);
+  }
+  const value = Number.parseFloat(match[1]);
+  const unit = match[2].toUpperCase();
+  const multipliers = {
+    B: 1,
+    KB: 1024,
+    MB: 1024 * 1024,
+    GB: 1024 * 1024 * 1024
+  };
+  return Math.floor(value * multipliers[unit]);
+}
+async function detectMimeType(file) {
+  const buffer = await file.slice(0, 8).arrayBuffer();
+  const bytes = new Uint8Array(buffer);
+  for (const sig of MIME_SIGNATURES) {
+    if (sig.bytes.every((b, i) => bytes[i] === b)) {
+      return sig.mime;
+    }
+  }
+  return null;
+}
+async function validateMimeType(file, allowedTypes) {
+  const detectedMime = await detectMimeType(file);
+  const mimeToCheck = detectedMime ?? file.type;
+  if (!mimeToCheck) {
+    return { valid: false, detectedMime, reason: "Unable to determine file type" };
+  }
+  const isAllowed = allowedTypes.some((allowed) => {
+    if (allowed.endsWith("/*")) {
+      const category = allowed.split("/")[0];
+      return mimeToCheck.startsWith(`${category}/`);
+    }
+    return allowed === mimeToCheck;
+  });
+  if (!isAllowed) {
+    return {
+      valid: false,
+      detectedMime,
+      reason: `File type "${mimeToCheck}" is not allowed. Allowed: ${allowedTypes.join(", ")}`
+    };
+  }
+  return { valid: true, detectedMime };
+}
+async function stripExifMetadata(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.type === "image/svg+xml") {
+    return file;
+  }
+  return new Promise((resolve) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        URL.revokeObjectURL(url);
+        resolve(file);
+        return;
+      }
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      const outputType = file.type === "image/png" ? "image/png" : "image/jpeg";
+      const quality = outputType === "image/jpeg" ? 0.92 : void 0;
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            resolve(file);
+            return;
+          }
+          resolve(new File([blob], file.name, { type: outputType, lastModified: Date.now() }));
+        },
+        outputType,
+        quality
+      );
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve(file);
+    };
+    img.src = url;
+  });
+}
+function sanitizeFileName(file) {
+  const baseName = file.name.split(/[/\\]/).pop() ?? file.name;
+  const lastDot = baseName.lastIndexOf(".");
+  const ext = lastDot > 0 ? baseName.slice(lastDot) : "";
+  const uuid = crypto.randomUUID();
+  const safeName = `${uuid}${ext}`;
+  return new File([file], safeName, { type: file.type, lastModified: file.lastModified });
+}
+async function processFileWithSecurity(file, config) {
+  if (config.maxSize) {
+    const maxBytes = parseFileSize(config.maxSize);
+    if (file.size > maxBytes) {
+      return {
+        valid: false,
+        file,
+        reason: `File size ${formatSize(file.size)} exceeds limit ${formatSize(maxBytes)}`
+      };
+    }
+  }
+  if (config.allowedTypes) {
+    const mimeResult = await validateMimeType(file, config.allowedTypes);
+    if (!mimeResult.valid) {
+      return { valid: false, file, reason: mimeResult.reason };
+    }
+  }
+  let processedFile = file;
+  if (config.stripMetadata) {
+    processedFile = await stripExifMetadata(processedFile);
+  }
+  if (config.renameFile) {
+    processedFile = sanitizeFileName(processedFile);
+  }
+  return { valid: true, file: processedFile };
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileImageList({ clearable }) {
+  const fileUpload = useFileUploadContext();
+  if (fileUpload.acceptedFiles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(HStack, { wrap: "wrap", gap: "3", mt: "2", children: fileUpload.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload.Item, { file, p: "2", width: "auto", pos: "relative", children: [
+    clearable && /* @__PURE__ */ jsx(Float, { placement: "top-end", children: /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "2xs", variant: "solid", colorPalette: "red", rounded: "full", children: /* @__PURE__ */ jsx(LuX, {}) }) }) }),
+    /* @__PURE__ */ jsx(FileUpload.ItemPreview, { type: "image/*", asChild: true, children: /* @__PURE__ */ jsx(FileUpload.ItemPreviewImage, { boxSize: "16", rounded: "md", objectFit: "cover" }) }),
+    /* @__PURE__ */ jsx(FileUpload.ItemPreview, { type: ".*", asChild: true, children: /* @__PURE__ */ jsx(Icon, { fontSize: "4xl", color: "fg.muted", children: /* @__PURE__ */ jsx(LuFile, {}) }) })
+  ] }, file.name)) });
+}
+function FileList({ showSize, clearable }) {
+  const fileUpload = useFileUploadContext();
+  if (fileUpload.acceptedFiles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FileUpload.ItemGroup, { mt: "2", children: fileUpload.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload.Item, { file, children: [
+    /* @__PURE__ */ jsx(FileUpload.ItemPreview, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { fontSize: "lg", color: "fg.muted", children: /* @__PURE__ */ jsx(LuFile, {}) }) }),
+    showSize ? /* @__PURE__ */ jsxs(FileUpload.ItemContent, { children: [
+      /* @__PURE__ */ jsx(FileUpload.ItemName, {}),
+      /* @__PURE__ */ jsx(FileUpload.ItemSizeText, {})
+    ] }) : /* @__PURE__ */ jsx(FileUpload.ItemName, { flex: "1" }),
+    clearable && /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", color: "fg.muted", size: "xs", children: /* @__PURE__ */ jsx(LuX, {}) }) })
+  ] }, file.name)) });
+}
+var FieldFileUpload = createField({
+  displayName: "FieldFileUpload",
+  useFieldState: (componentProps) => {
+    const [securityError, setSecurityError] = useState(null);
+    return { securityError, setSecurityError };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const {
+      accept,
+      maxFileSize,
+      maxFiles = 1,
+      variant = "button",
+      showSize = false,
+      clearable = true,
+      dropzoneLabel = "Drag and drop files here",
+      dropzoneDescription,
+      buttonText = "Upload file",
+      security
+    } = componentProps;
+    const { securityError, setSecurityError } = fieldState;
+    const placeholder = resolved.placeholder ?? "Select file(s)";
+    const normalizedAccept = accept ? typeof accept === "string" ? accept.split(",").map((s) => s.trim()) : accept : void 0;
+    const isImageUpload = normalizedAccept?.some((type) => type.startsWith("image/") || type === "image/*");
+    return /* @__PURE__ */ jsxs(Field.Root, { invalid: hasError, required: resolved.required, disabled: resolved.disabled, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+      /* @__PURE__ */ jsxs(
+        FileUpload.Root,
+        {
+          maxFiles,
+          maxFileSize,
+          accept: normalizedAccept,
+          disabled: resolved.disabled,
+          onFileChange: async (details) => {
+            if (!security || details.acceptedFiles.length === 0) {
+              setSecurityError(null);
+              field.handleChange(details.acceptedFiles);
+              return;
+            }
+            const results = await Promise.all(details.acceptedFiles.map((f) => processFileWithSecurity(f, security)));
+            const rejected = results.filter((r) => !r.valid);
+            if (rejected.length > 0) {
+              setSecurityError(rejected.map((r) => r.reason).join("; "));
+              const validFiles = results.filter((r) => r.valid).map((r) => r.file);
+              field.handleChange(validFiles.length > 0 ? validFiles : []);
+              return;
+            }
+            setSecurityError(null);
+            field.handleChange(results.map((r) => r.file));
+          },
+          "data-field-name": fullPath,
+          children: [
+            /* @__PURE__ */ jsx(FileUpload.HiddenInput, { onBlur: field.handleBlur }),
+            variant === "button" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(FileUpload.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+                /* @__PURE__ */ jsx(LuUpload, {}),
+                buttonText
+              ] }) }),
+              isImageUpload ? /* @__PURE__ */ jsx(FileImageList, { clearable }) : /* @__PURE__ */ jsx(FileList, { showSize, clearable })
+            ] }),
+            variant === "dropzone" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(FileUpload.Dropzone, { children: [
+                /* @__PURE__ */ jsx(Icon, { size: "md", color: "fg.muted", children: /* @__PURE__ */ jsx(LuUpload, {}) }),
+                /* @__PURE__ */ jsxs(FileUpload.DropzoneContent, { children: [
+                  /* @__PURE__ */ jsx(Box, { children: dropzoneLabel }),
+                  dropzoneDescription && /* @__PURE__ */ jsx(Text, { color: "fg.muted", children: dropzoneDescription })
+                ] })
+              ] }),
+              isImageUpload ? /* @__PURE__ */ jsx(FileImageList, { clearable }) : /* @__PURE__ */ jsx(FileList, { showSize, clearable })
+            ] }),
+            variant === "input" && /* @__PURE__ */ jsx(Input, { asChild: true, children: /* @__PURE__ */ jsx(FileUpload.Trigger, { children: /* @__PURE__ */ jsx(FileUpload.Context, { children: ({ acceptedFiles }) => {
+              if (acceptedFiles.length === 1) {
+                return /* @__PURE__ */ jsx("span", { children: acceptedFiles[0].name });
+              }
+              if (acceptedFiles.length > 1) {
+                return /* @__PURE__ */ jsxs("span", { children: [
+                  acceptedFiles.length,
+                  " files"
+                ] });
+              }
+              return /* @__PURE__ */ jsx(Text, { color: "fg.subtle", children: placeholder });
+            } }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FieldError,
+        {
+          hasError: hasError || !!securityError,
+          errorMessage: securityError ?? errorMessage,
+          helperText: resolved.helperText
+        }
+      )
+    ] });
+  }
+});
+var FieldOTPInput = createField({
+  displayName: "FieldOTPInput",
+  useFieldState: (props) => {
+    const [countdown, setCountdown] = useState(0);
+    const [isResending, setIsResending] = useState(false);
+    useEffect(() => {
+      if (countdown <= 0) {
+        return;
+      }
+      const timer = setInterval(() => {
+        setCountdown((prev) => prev - 1);
+      }, 1e3);
+      return () => clearInterval(timer);
+    }, [countdown]);
+    const handleResend = useCallback(async () => {
+      if (!props.onResend || countdown > 0) {
+        return;
+      }
+      setIsResending(true);
+      try {
+        await props.onResend();
+        setCountdown(props.resendTimeout ?? 60);
+      } finally {
+        setIsResending(false);
+      }
+    }, [props.onResend, countdown, props.resendTimeout]);
+    const formatCountdown = (seconds) => {
+      const mins = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return `${mins}:${secs.toString().padStart(2, "0")}`;
+    };
+    const formContext = useDeclarativeForm();
+    return { countdown, isResending, handleResend, formatCountdown, formContext };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const { length = 6, autoSubmit = false, type = "numeric", mask = false, onResend } = componentProps;
+    const { countdown, isResending, handleResend, formatCountdown, formContext } = fieldState;
+    const value = field.state.value ?? "";
+    const handleValueComplete = (details) => {
+      field.handleChange(details.valueAsString);
+      if (autoSubmit && details.valueAsString.length === length) {
+        formContext.form.handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(
+        PinInput.Root,
+        {
+          value: value.split(""),
+          onValueComplete: handleValueComplete,
+          onValueChange: (details) => field.handleChange(details.valueAsString),
+          count: length,
+          type,
+          mask,
+          otp: true,
+          children: [
+            /* @__PURE__ */ jsx(PinInput.Control, { children: /* @__PURE__ */ jsx(HStack, { gap: 2, children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(PinInput.Input, { index, "data-field-name": index === 0 ? fullPath : void 0 }, index)) }) }),
+            /* @__PURE__ */ jsx(PinInput.HiddenInput, {})
+          ]
+        }
+      ),
+      onResend && /* @__PURE__ */ jsx(HStack, { mt: 3, justify: "center", children: countdown > 0 ? /* @__PURE__ */ jsxs(Text, { fontSize: "sm", color: "fg.muted", children: [
+        "Redo in ",
+        formatCountdown(countdown)
+      ] }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleResend, disabled: isResending, loading: isResending, children: "Submit again" }) })
+    ] }) });
+  }
+});
+var PHONE_MASKS = {
+  RU: "+7 (999) 999-99-99",
+  US: "+1 (999) 999-9999",
+  UK: "+44 9999 999999",
+  DE: "+49 999 99999999",
+  FR: "+33 9 99 99 99 99",
+  IT: "+39 999 999 9999",
+  ES: "+34 999 99 99 99",
+  CN: "+86 999 9999 9999",
+  JP: "+81 99 9999 9999",
+  KR: "+82 99 9999 9999",
+  BY: "+375 (99) 999-99-99",
+  KZ: "+7 (999) 999-99-99",
+  UA: "+380 (99) 999-99-99"
+};
+var COUNTRY_FLAGS = {
+  RU: "\u{1F1F7}\u{1F1FA}",
+  US: "\u{1F1FA}\u{1F1F8}",
+  UK: "\u{1F1EC}\u{1F1E7}",
+  DE: "\u{1F1E9}\u{1F1EA}",
+  FR: "\u{1F1EB}\u{1F1F7}",
+  IT: "\u{1F1EE}\u{1F1F9}",
+  ES: "\u{1F1EA}\u{1F1F8}",
+  CN: "\u{1F1E8}\u{1F1F3}",
+  JP: "\u{1F1EF}\u{1F1F5}",
+  KR: "\u{1F1F0}\u{1F1F7}",
+  BY: "\u{1F1E7}\u{1F1FE}",
+  KZ: "\u{1F1F0}\u{1F1FF}",
+  UA: "\u{1F1FA}\u{1F1E6}"
+};
+var FieldPhone = createField({
+  displayName: "FieldPhone",
+  useFieldState: (props) => {
+    const { country = "RU", autoUnmask = false } = props;
+    const mask = PHONE_MASKS[country];
+    const maskRef = useCallback(
+      (element) => {
+        if (element && mask) {
+          const maskCallback = withMask(mask, {
+            showMaskOnFocus: true,
+            clearIncomplete: true,
+            autoUnmask
+          });
+          maskCallback(element);
+        }
+      },
+      [mask, autoUnmask]
+    );
+    return { maskRef };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const { country = "RU", showFlag = false } = componentProps;
+    const flag = COUNTRY_FLAGS[country];
+    const mask = PHONE_MASKS[country];
+    const value = field.state.value ?? "";
+    const resolvedPlaceholder = resolved.placeholder ?? mask?.toString().replace(/9/g, "_");
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+          /* @__PURE__ */ jsxs(Group, { attached: true, children: [
+            showFlag && /* @__PURE__ */ jsx(Text, { px: 3, display: "flex", alignItems: "center", bg: "bg.muted", borderWidth: "1px", borderRightWidth: "0", children: flag }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: fieldState.maskRef,
+                value,
+                onChange: (e) => field.handleChange(e.target.value),
+                onBlur: field.handleBlur,
+                placeholder: resolvedPlaceholder,
+                "data-field-name": fullPath,
+                type: "tel",
+                inputMode: "tel",
+                autoComplete: "tel"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var FieldPinInput = createField({
+  displayName: "FieldPinInput",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
+    const {
+      count = 4,
+      mask,
+      otp,
+      type = "numeric",
+      size = "md",
+      variant = "outline",
+      attached,
+      onComplete
+    } = componentProps;
+    const stringValue = field.state.value ?? "";
+    const arrayValue = stringValue.split("").slice(0, count);
+    while (arrayValue.length < count) {
+      arrayValue.push("");
+    }
+    const handleValueChange = (details) => {
+      const newValue = details.value.join("");
+      field.handleChange(newValue);
+    };
+    const handleValueComplete = (details) => {
+      const completeValue = details.value.join("");
+      onComplete?.(completeValue);
+    };
+    return /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsxs(
+      PinInput.Root,
+      {
+        value: arrayValue,
+        onValueChange: handleValueChange,
+        onValueComplete: handleValueComplete,
+        placeholder: resolved.placeholder,
+        mask,
+        otp,
+        type,
+        size,
+        variant,
+        attached,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        invalid: hasError,
+        count,
+        onBlur: field.handleBlur,
+        "data-field-name": fullPath,
+        children: [
+          /* @__PURE__ */ jsx(PinInput.HiddenInput, {}),
+          /* @__PURE__ */ jsx(PinInput.Control, { children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(PinInput.Input, { index }, index)) })
+        ]
+      }
+    ) });
+  }
+});
+function useCityProvider(propProvider, token) {
+  const formContext = useDeclarativeFormOptional();
+  if (propProvider) return propProvider;
+  if (formContext?.addressProvider) return formContext.addressProvider;
+  if (token) return createDaDataProvider({ token });
+  const envKey = typeof window !== "undefined" ? process.env.NEXT_PUBLIC_DADATA_API_KEY : "";
+  if (envKey) return createDaDataProvider({ token: envKey });
+  return null;
+}
+var FieldCity = createField({
+  displayName: "FieldCity",
+  useFieldState: (props) => {
+    const { provider: propProvider, token, minChars = 2, debounceMs = 300 } = props;
+    const provider = useCityProvider(propProvider, token);
+    const [inputValue, setInputValue] = useState("");
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const debouncedQuery = useDebounce(inputValue, debounceMs);
+    const justSelectedRef = useRef(false);
+    const initializedRef = useRef(false);
+    const fetchSuggestions = useCallback(
+      async (query) => {
+        if (query.length < minChars || !provider) {
+          setSuggestions([]);
+          return;
+        }
+        setIsLoading(true);
+        try {
+          const results = await provider.getSuggestions(query, {
+            count: 7,
+            bounds: { from: "city", to: "settlement" }
+          });
+          setSuggestions(results);
+          setIsOpen(results.length > 0);
+        } catch (error) {
+          console.error("Error loading city suggestions:", error);
+          setSuggestions([]);
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      [provider, minChars]
+    );
+    useEffect(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      if (debouncedQuery) {
+        fetchSuggestions(debouncedQuery);
+      } else {
+        setSuggestions([]);
+        setIsOpen(false);
+      }
+    }, [debouncedQuery, fetchSuggestions]);
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return {
+      inputValue,
+      setInputValue,
+      suggestions,
+      setSuggestions,
+      isLoading,
+      setIsLoading,
+      isOpen,
+      setIsOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      containerRef,
+      debouncedQuery,
+      justSelectedRef,
+      initializedRef
+    };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, fieldState }) => {
+    const {
+      inputValue,
+      setInputValue,
+      suggestions,
+      setSuggestions,
+      isLoading,
+      isOpen,
+      setIsOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      containerRef
+    } = fieldState;
+    const { justSelectedRef, initializedRef } = fieldState;
+    const fieldValue = field.state.value;
+    if (!initializedRef.current && fieldValue && fieldValue !== inputValue) {
+      initializedRef.current = true;
+      setInputValue(fieldValue);
+    }
+    const handleSelect = (suggestion) => {
+      const cityName = suggestion.data?.city || suggestion.data?.settlement || suggestion.value;
+      justSelectedRef.current = true;
+      setInputValue(cityName);
+      setIsOpen(false);
+      setSuggestions([]);
+      field.handleChange(cityName);
+    };
+    const handleKeyDown = (e) => {
+      if (!isOpen || suggestions.length === 0) {
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex(highlightedIndex < suggestions.length - 1 ? highlightedIndex + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex(highlightedIndex > 0 ? highlightedIndex - 1 : suggestions.length - 1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0) {
+            handleSelect(suggestions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+          /* @__PURE__ */ jsxs(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: inputValue,
+                onChange: (e) => {
+                  setInputValue(e.target.value);
+                  setHighlightedIndex(-1);
+                  if (!e.target.value) {
+                    field.handleChange("");
+                  }
+                },
+                onFocus: () => {
+                  if (suggestions.length > 0) {
+                    setIsOpen(true);
+                  }
+                },
+                onBlur: () => {
+                  if (inputValue && inputValue !== field.state.value) {
+                    field.handleChange(inputValue);
+                  }
+                  field.handleBlur();
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: resolved.placeholder ?? "Enter city",
+                "data-field-name": fullPath
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsx(Box, { position: "absolute", right: 3, top: "50%", transform: "translateY(-50%)", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }),
+            isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
+              List.Root,
+              {
+                position: "absolute",
+                zIndex: 10,
+                width: "100%",
+                bg: "bg.panel",
+                borderWidth: "1px",
+                borderRadius: "md",
+                shadow: "md",
+                maxH: "250px",
+                overflowY: "auto",
+                mt: 1,
+                listStyle: "none",
+                children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+                  List.Item,
+                  {
+                    px: 3,
+                    py: 2,
+                    cursor: "pointer",
+                    bg: highlightedIndex === index ? "bg.muted" : void 0,
+                    _hover: { bg: "bg.muted" },
+                    onClick: () => handleSelect(suggestion),
+                    onMouseEnter: () => setHighlightedIndex(index),
+                    children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: suggestion.label })
+                  },
+                  `${suggestion.value}-${index}`
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+function getCoords(e, canvas) {
+  const rect = canvas.getBoundingClientRect();
+  if ("touches" in e) {
+    const touch = e.touches[0];
+    return { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
+  }
+  return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+}
+var FieldSignature = createField({
+  displayName: "FieldSignature",
+  useFieldState: (props) => {
+    const canvasRef = useRef(null);
+    const isDrawingRef = useRef(false);
+    const [mode, setMode] = useState("draw");
+    const [typedText, setTypedText] = useState("");
+    const [isEmpty, setIsEmpty] = useState(true);
+    const strokeColor = props.strokeColor ?? "black";
+    const strokeWidth = props.strokeWidth ?? 2;
+    const backgroundColor = props.backgroundColor ?? "white";
+    const typedFont = props.typedFont ?? "'Segoe Script', 'Dancing Script', cursive";
+    const initCanvas = useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }, [backgroundColor]);
+    useEffect(() => {
+      initCanvas();
+    }, [initCanvas]);
+    const startDrawing = useCallback(
+      (e) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        if ("touches" in e) e.preventDefault();
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        isDrawingRef.current = true;
+        const { x, y } = getCoords(e, canvas);
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+      },
+      [strokeColor, strokeWidth]
+    );
+    const draw = useCallback((e) => {
+      if (!isDrawingRef.current) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      if ("touches" in e) e.preventDefault();
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { x, y } = getCoords(e, canvas);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    }, []);
+    const stopDrawing = useCallback(() => {
+      isDrawingRef.current = false;
+      const canvas = canvasRef.current;
+      if (!canvas) return "";
+      setIsEmpty(false);
+      return canvas.toDataURL("image/png");
+    }, []);
+    const clearCanvas = useCallback(() => {
+      initCanvas();
+      setIsEmpty(true);
+      setTypedText("");
+    }, [initCanvas]);
+    const renderTypedSignature = useCallback(
+      (text) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return "";
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return "";
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        if (!text.trim()) {
+          setIsEmpty(true);
+          return "";
+        }
+        const fontSize = Math.min(canvas.height * 0.4, 48);
+        ctx.font = `${fontSize}px ${typedFont}`;
+        ctx.fillStyle = strokeColor;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+        setIsEmpty(false);
+        return canvas.toDataURL("image/png");
+      },
+      [backgroundColor, strokeColor, typedFont]
+    );
+    return {
+      canvasRef,
+      mode,
+      setMode,
+      typedText,
+      setTypedText,
+      isEmpty,
+      startDrawing,
+      draw,
+      stopDrawing,
+      clearCanvas,
+      renderTypedSignature
+    };
+  },
+  render: ({ field, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const {
+      width = 400,
+      height = 150,
+      clearLabel = "Clear",
+      placeholder = "Sign here",
+      allowTyped = true,
+      disabled: _disabled
+    } = componentProps;
+    const {
+      canvasRef,
+      mode,
+      setMode,
+      typedText,
+      setTypedText,
+      isEmpty,
+      startDrawing,
+      draw,
+      stopDrawing,
+      clearCanvas,
+      renderTypedSignature
+    } = fieldState;
+    const isDisabled = resolved.disabled;
+    return /* @__PURE__ */ jsxs(Field.Root, { invalid: hasError, required: resolved.required, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          position: "relative",
+          borderWidth: "1px",
+          borderColor: hasError ? "border.error" : "border",
+          borderRadius: "md",
+          overflow: "hidden",
+          maxW: `${width}px`,
+          opacity: isDisabled ? 0.5 : 1,
+          pointerEvents: isDisabled ? "none" : "auto",
+          children: [
+            allowTyped && /* @__PURE__ */ jsx(HStack, { p: 2, borderBottomWidth: "1px", borderColor: "border", gap: 2, children: /* @__PURE__ */ jsxs(
+              SegmentGroup.Root,
+              {
+                size: "xs",
+                value: mode,
+                onValueChange: (details) => {
+                  const newMode = details.value;
+                  setMode(newMode);
+                  if (newMode === "draw") {
+                    clearCanvas();
+                    field.handleChange("");
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(SegmentGroup.Item, { value: "draw", children: [
+                    /* @__PURE__ */ jsxs(SegmentGroup.ItemText, { children: [
+                      /* @__PURE__ */ jsx(LuPen, {}),
+                      " Draw"
+                    ] }),
+                    /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {})
+                  ] }),
+                  /* @__PURE__ */ jsxs(SegmentGroup.Item, { value: "typed", children: [
+                    /* @__PURE__ */ jsxs(SegmentGroup.ItemText, { children: [
+                      /* @__PURE__ */ jsx(LuType, {}),
+                      " Type"
+                    ] }),
+                    /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {})
+                  ] })
+                ]
+              }
+            ) }),
+            mode === "typed" && /* @__PURE__ */ jsx(Box, { p: 2, borderBottomWidth: "1px", borderColor: "border", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Type your name...",
+                value: typedText,
+                onChange: (e) => {
+                  const text = e.target.value;
+                  setTypedText(text);
+                  const dataUrl = renderTypedSignature(text);
+                  field.handleChange(dataUrl || "");
+                },
+                fontFamily: "cursive",
+                fontSize: "lg"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  width,
+                  height,
+                  style: {
+                    display: "block",
+                    maxWidth: "100%",
+                    cursor: mode === "draw" ? "crosshair" : "default",
+                    touchAction: "none"
+                    // Отключить scroll при рисовании
+                  },
+                  role: "img",
+                  "aria-label": "Signature pad",
+                  tabIndex: 0,
+                  onMouseDown: mode === "draw" ? startDrawing : void 0,
+                  onMouseMove: mode === "draw" ? draw : void 0,
+                  onMouseUp: mode === "draw" ? () => {
+                    const dataUrl = stopDrawing();
+                    if (dataUrl) field.handleChange(dataUrl);
+                  } : void 0,
+                  onMouseLeave: mode === "draw" ? () => {
+                    const dataUrl = stopDrawing();
+                    if (dataUrl) field.handleChange(dataUrl);
+                  } : void 0,
+                  onTouchStart: mode === "draw" ? startDrawing : void 0,
+                  onTouchMove: mode === "draw" ? draw : void 0,
+                  onTouchEnd: mode === "draw" ? () => {
+                    const dataUrl = stopDrawing();
+                    if (dataUrl) field.handleChange(dataUrl);
+                  } : void 0
+                }
+              ),
+              isEmpty && mode === "draw" && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  pointerEvents: "none",
+                  color: "fg.subtle",
+                  fontSize: "sm",
+                  children: placeholder
+                }
+              )
+            ] }),
+            !isEmpty && /* @__PURE__ */ jsx(HStack, { p: 2, borderTopWidth: "1px", borderColor: "border", justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "xs",
+                variant: "ghost",
+                colorPalette: "red",
+                onClick: () => {
+                  clearCanvas();
+                  field.handleChange("");
+                },
+                children: [
+                  /* @__PURE__ */ jsx(LuEraser, {}),
+                  clearLabel
+                ]
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+    ] });
+  }
+});
+var BRAND_ICONS = {
+  visa: (s) => /* @__PURE__ */ jsx("svg", { width: s, height: s * 0.64, viewBox: "0 0 24 24", fill: "#1A1F71", "aria-label": "Visa", children: /* @__PURE__ */ jsx("path", { d: "M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z" }) }),
+  mastercard: (s) => /* @__PURE__ */ jsxs("svg", { width: s, height: s * 0.64, viewBox: "0 0 24 24", fill: "none", "aria-label": "Mastercard", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "7.416", cy: "12", r: "7.416", fill: "#EB001B" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16.584", cy: "12", r: "7.416", fill: "#F79E1B" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 6.174a7.4 7.4 0 00-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232C13.844 16.236 14.831 14.236 14.831 12c0-2.235-.987-4.236-2.551-5.595a7.4 7.4 0 00-.28-.231z",
+        fill: "#FF5F00"
+      }
+    )
+  ] }),
+  amex: (s) => /* @__PURE__ */ jsx("svg", { width: s, height: s * 0.64, viewBox: "0 0 24 24", fill: "#2E77BC", "aria-label": "American Express", children: /* @__PURE__ */ jsx("path", { d: "M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234.18-.072.48-.297.48-.747zm-.87.407c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0z" }) }),
+  mir: (s) => /* @__PURE__ */ jsxs("svg", { width: s, height: s * 0.3, viewBox: "0 0 400 120", fill: "none", "aria-label": "\u041C\u0418\u0420", children: [
+    /* @__PURE__ */ jsxs("linearGradient", { id: "mir-g", x1: "370", x2: "290", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx("stop", { stopColor: "#1F5CD7" }),
+      /* @__PURE__ */ jsx("stop", { stopColor: "#02AEFF", offset: "1" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "m31 13h33c3 0 12-1 16 13 3 9 7 23 13 44h2c6-22 11-37 13-44 4-14 14-13 18-13h31v96h-32v-57h-2l-17 57h-24l-17-57h-3v57h-31m139-96h32v57h3l21-47c4-9 13-10 13-10h30v96h-32v-57h-2l-21 47c-4 9-14 10-14 10h-30m142-29v29h-30v-50h98c-4 12-18 21-34 21",
+        fill: "#0F754E"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "m382 53c4-18-8-40-34-40h-68c2 21 20 40 39 40", fill: "url(#mir-g)" })
+  ] })
+};
+function GenericCardIcon({ size }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size * 0.64, viewBox: "0 0 24 24", fill: "#a0aec0", "aria-label": "\u041A\u0430\u0440\u0442\u0430", children: /* @__PURE__ */ jsx("path", { d: "M22 4H2c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H2V10h20v8zm0-12H2V6h20v2z" }) });
+}
+function CardBrandIcon({ brand, size = 32 }) {
+  const renderIcon = BRAND_ICONS[brand];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "opacity 200ms ease",
+        width: size,
+        minWidth: size
+      },
+      children: renderIcon ? renderIcon(size) : /* @__PURE__ */ jsx(GenericCardIcon, { size })
+    }
+  );
+}
+
+// src/lib/declarative/form-fields/specialized/credit-card/utils/detect-brand.ts
+var BRANDS = {
+  visa: {
+    brand: "visa",
+    name: "Visa",
+    lengths: [16, 18, 19],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  },
+  mastercard: {
+    brand: "mastercard",
+    name: "Mastercard",
+    lengths: [16],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  },
+  amex: {
+    brand: "amex",
+    name: "American Express",
+    lengths: [15],
+    cvcLength: 4,
+    gaps: [4, 6, 5]
+  },
+  mir: {
+    brand: "mir",
+    name: "\u041C\u0418\u0420",
+    lengths: [16, 17, 18, 19],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  },
+  unionpay: {
+    brand: "unionpay",
+    name: "UnionPay",
+    lengths: [16, 17, 18, 19],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  },
+  maestro: {
+    brand: "maestro",
+    name: "Maestro",
+    lengths: [12, 13, 14, 15, 16, 17, 18, 19],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  },
+  jcb: {
+    brand: "jcb",
+    name: "JCB",
+    lengths: [16, 17, 18, 19],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  },
+  discover: {
+    brand: "discover",
+    name: "Discover",
+    lengths: [16, 19],
+    cvcLength: 3,
+    gaps: [4, 4, 4, 4]
+  }
+};
+var UNKNOWN_BRAND = {
+  brand: "unknown",
+  name: "Unknown",
+  lengths: [16],
+  cvcLength: 3,
+  gaps: [4, 4, 4, 4]
+};
+function detectBrand(number) {
+  const digits = number.replace(/\D/g, "");
+  if (!digits) return UNKNOWN_BRAND;
+  const n2 = Number(digits.slice(0, 2));
+  const n4 = Number(digits.slice(0, 4));
+  const n6 = Number(digits.slice(0, 6));
+  if (n4 >= 2200 && n4 <= 2204) return BRANDS.mir;
+  if (n2 === 34 || n2 === 37) return BRANDS.amex;
+  if (digits[0] === "4") return BRANDS.visa;
+  if (n2 >= 51 && n2 <= 55 || n4 >= 2221 && n4 <= 2720) return BRANDS.mastercard;
+  if (n4 === 6011 || n6 >= 622126 && n6 <= 622925 || n2 >= 64 && n2 <= 65) return BRANDS.discover;
+  if (n4 >= 3528 && n4 <= 3589) return BRANDS.jcb;
+  if (n2 === 62) return BRANDS.unionpay;
+  if (n2 === 50 || n2 >= 56 && n2 <= 69) return BRANDS.maestro;
+  return UNKNOWN_BRAND;
+}
+
+// src/lib/declarative/form-fields/specialized/credit-card/utils/format-expiry.ts
+function formatExpiry(raw) {
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return "";
+  if (digits.length <= 2) {
+    return digits;
+  }
+  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;
+}
+function isExpiryValid(expiry) {
+  const match = expiry.match(/^(\d{2})\/(\d{2})$/);
+  if (!match) return false;
+  const month = Number(match[1]);
+  const year = Number(match[2]);
+  if (month < 1 || month > 12) return false;
+  const now = /* @__PURE__ */ new Date();
+  const currentYear = now.getFullYear() % 100;
+  const currentMonth = now.getMonth() + 1;
+  if (year < currentYear) return false;
+  if (year === currentYear && month < currentMonth) return false;
+  return true;
+}
+
+// src/lib/declarative/form-fields/specialized/credit-card/utils/format-number.ts
+function formatCardNumber(raw) {
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return "";
+  const brand = detectBrand(digits);
+  const { gaps } = brand;
+  const parts = [];
+  let pos = 0;
+  for (const gap of gaps) {
+    if (pos >= digits.length) break;
+    parts.push(digits.slice(pos, pos + gap));
+    pos += gap;
+  }
+  if (pos < digits.length) {
+    parts.push(digits.slice(pos));
+  }
+  return parts.join(" ");
+}
+function stripCardNumber(formatted) {
+  return formatted.replace(/\D/g, "");
+}
+function maxFormattedLength(raw) {
+  const brand = detectBrand(raw);
+  const maxDigits = Math.max(...brand.lengths);
+  const spaces = brand.gaps.length - 1;
+  return maxDigits + spaces;
+}
+
+// src/lib/declarative/form-fields/specialized/credit-card/utils/luhn.ts
+function luhn(cardNumber) {
+  const digits = cardNumber.replace(/\D/g, "");
+  if (digits.length < 12 || digits.length > 19) return false;
+  let sum = 0;
+  let isDouble = false;
+  for (let i = digits.length - 1; i >= 0; i--) {
+    let digit = Number(digits[i]);
+    if (isDouble) {
+      digit *= 2;
+      if (digit > 9) digit -= 9;
+    }
+    sum += digit;
+    isDouble = !isDouble;
+  }
+  return sum % 10 === 0;
+}
+function CreditCardField({
+  name = "card",
+  label = "\u0414\u0430\u043D\u043D\u044B\u0435 \u043A\u0430\u0440\u0442\u044B",
+  brands,
+  showBrandIcon = true,
+  layout = "inline",
+  disabled,
+  readOnly,
+  numberPlaceholder = "0000 0000 0000 0000",
+  expiryPlaceholder = "MM / YY",
+  cvcPlaceholder = "CVC"
+}) {
+  const formCtx = useDeclarativeFormOptional();
+  const expiryRef = useRef(null);
+  const cvcRef = useRef(null);
+  const [numberDisplay, setNumberDisplay] = useState("");
+  const [expiryDisplay, setExpiryDisplay] = useState("");
+  const [cvcValue, setCvcValue] = useState("");
+  const [numberStatus, setNumberStatus] = useState("idle");
+  const [expiryStatus, setExpiryStatus] = useState("idle");
+  const [cvcStatus, setCvcStatus] = useState("idle");
+  const [numberError, setNumberError] = useState();
+  const [expiryError, setExpiryError] = useState();
+  const brandInfo = useMemo(() => detectBrand(numberDisplay), [numberDisplay]);
+  const isBrandAllowed = useMemo(() => {
+    if (!brands || brands.length === 0) return true;
+    return brands.includes(brandInfo.brand);
+  }, [brands, brandInfo.brand]);
+  const handleNumberChange = useCallback(
+    (e) => {
+      const raw = stripCardNumber(e.target.value);
+      const formatted = formatCardNumber(raw);
+      setNumberDisplay(formatted);
+      setNumberStatus("idle");
+      setNumberError(void 0);
+      if (formCtx?.form) {
+        formCtx.form.setFieldValue(`${name}.number`, raw);
+      }
+      const maxLen = Math.max(...brandInfo.lengths);
+      if (raw.length >= maxLen) {
+        expiryRef.current?.focus();
+      }
+    },
+    [formCtx, name, brandInfo.lengths]
+  );
+  const handleNumberBlur = useCallback(() => {
+    const raw = stripCardNumber(numberDisplay);
+    if (!raw) return;
+    if (raw.length < 12) {
+      setNumberStatus("error");
+      setNumberError("\u041D\u043E\u043C\u0435\u0440 \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u043A\u043E\u0440\u043E\u0442\u043A\u0438\u0439");
+    } else if (!luhn(raw)) {
+      setNumberStatus("error");
+      setNumberError("\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u044B\u0439 \u043D\u043E\u043C\u0435\u0440 \u043A\u0430\u0440\u0442\u044B");
+    } else if (!isBrandAllowed) {
+      setNumberStatus("error");
+      setNumberError("\u042D\u0442\u043E\u0442 \u0442\u0438\u043F \u043A\u0430\u0440\u0442\u044B \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F");
+    } else {
+      setNumberStatus("valid");
+      setNumberError(void 0);
+    }
+  }, [numberDisplay, isBrandAllowed]);
+  const handleExpiryChange = useCallback(
+    (e) => {
+      let raw = e.target.value.replace(/\D/g, "");
+      if (raw.length === 1 && Number(raw) > 1) {
+        raw = `0${raw}`;
+      }
+      const formatted = formatExpiry(raw);
+      setExpiryDisplay(formatted);
+      setExpiryStatus("idle");
+      setExpiryError(void 0);
+      if (formCtx?.form) {
+        formCtx.form.setFieldValue(`${name}.expiry`, formatted);
+      }
+      if (formatted.length === 5) {
+        cvcRef.current?.focus();
+      }
+    },
+    [formCtx, name]
+  );
+  const handleExpiryBlur = useCallback(() => {
+    if (!expiryDisplay) return;
+    if (expiryDisplay.length < 5) {
+      setExpiryStatus("error");
+      setExpiryError("\u0412\u0432\u0435\u0434\u0438\u0442\u0435 MM/YY");
+    } else if (!isExpiryValid(expiryDisplay)) {
+      setExpiryStatus("error");
+      setExpiryError("\u041A\u0430\u0440\u0442\u0430 \u043F\u0440\u043E\u0441\u0440\u043E\u0447\u0435\u043D\u0430");
+    } else {
+      setExpiryStatus("valid");
+      setExpiryError(void 0);
+    }
+  }, [expiryDisplay]);
+  const handleCvcChange = useCallback(
+    (e) => {
+      const raw = e.target.value.replace(/\D/g, "").slice(0, brandInfo.cvcLength);
+      setCvcValue(raw);
+      setCvcStatus("idle");
+      if (formCtx?.form) {
+        formCtx.form.setFieldValue(`${name}.cvc`, raw);
+      }
+    },
+    [formCtx, name, brandInfo.cvcLength]
+  );
+  const handleCvcBlur = useCallback(() => {
+    if (!cvcValue) return;
+    if (cvcValue.length < brandInfo.cvcLength) {
+      setCvcStatus("error");
+    } else {
+      setCvcStatus("valid");
+    }
+  }, [cvcValue, brandInfo.cvcLength]);
+  const isInline = layout === "inline";
+  const statusBorder = (status) => {
+    if (status === "valid") return "1px solid var(--chakra-colors-green-500, #38a169)";
+    if (status === "error") return "1px solid var(--chakra-colors-red-500, #e53e3e)";
+    return void 0;
+  };
+  const statusIcon = (status) => {
+    if (status === "valid") return "\u2713";
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(Field.Root, { invalid: numberStatus === "error" || expiryStatus === "error", children: [
+    label && /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        role: "group",
+        "aria-label": label,
+        direction: isInline ? "row" : "column",
+        gap: isInline ? 0 : 3,
+        align: isInline ? "center" : "stretch",
+        borderWidth: isInline ? "1px" : 0,
+        borderColor: isInline ? "border" : void 0,
+        borderRadius: isInline ? "md" : void 0,
+        overflow: isInline ? "hidden" : void 0,
+        _focusWithin: isInline ? { borderColor: "colorPalette.500", boxShadow: "0 0 0 1px var(--chakra-colors-colorPalette-500)" } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              attached: !isInline,
+              flex: isInline ? "1" : void 0,
+              gap: 0,
+              children: [
+                showBrandIcon && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    px: 2,
+                    display: "flex",
+                    alignItems: "center",
+                    borderRightWidth: isInline ? "1px" : 0,
+                    borderColor: "border",
+                    children: /* @__PURE__ */ jsx(CardBrandIcon, { brand: brandInfo.brand, size: 28 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Box, { position: "relative", flex: 1, children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      value: numberDisplay,
+                      onChange: handleNumberChange,
+                      onBlur: handleNumberBlur,
+                      placeholder: numberPlaceholder,
+                      inputMode: "numeric",
+                      autoComplete: "cc-number",
+                      name: "cardnumber",
+                      maxLength: maxFormattedLength(numberDisplay),
+                      disabled,
+                      readOnly,
+                      "aria-label": "\u041D\u043E\u043C\u0435\u0440 \u043A\u0430\u0440\u0442\u044B",
+                      fontSize: "16px",
+                      border: isInline ? "none" : void 0,
+                      borderColor: !isInline ? statusBorder(numberStatus) ? void 0 : "border" : void 0,
+                      style: !isInline ? { border: statusBorder(numberStatus) } : void 0,
+                      _focus: isInline ? { boxShadow: "none" } : void 0
+                    }
+                  ),
+                  statusIcon(numberStatus) && /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      position: "absolute",
+                      right: 2,
+                      top: "50%",
+                      transform: "translateY(-50%)",
+                      color: "green.500",
+                      fontSize: "sm",
+                      fontWeight: "bold",
+                      children: statusIcon(numberStatus)
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { gap: isInline ? 0 : 2, children: [
+            /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: expiryRef,
+                  value: expiryDisplay,
+                  onChange: handleExpiryChange,
+                  onBlur: handleExpiryBlur,
+                  placeholder: expiryPlaceholder,
+                  inputMode: "numeric",
+                  autoComplete: "cc-exp",
+                  name: "cc-exp",
+                  maxLength: 5,
+                  disabled,
+                  readOnly,
+                  "aria-label": "\u0421\u0440\u043E\u043A \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F",
+                  width: isInline ? "100px" : void 0,
+                  fontSize: "16px",
+                  border: isInline ? "none" : void 0,
+                  borderLeft: isInline ? "1px solid" : void 0,
+                  borderColor: isInline ? "border" : void 0,
+                  borderRadius: isInline ? 0 : void 0,
+                  style: !isInline ? { border: statusBorder(expiryStatus) } : void 0,
+                  _focus: isInline ? { boxShadow: "none" } : void 0
+                }
+              ),
+              statusIcon(expiryStatus) && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  position: "absolute",
+                  right: 2,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "green.500",
+                  fontSize: "sm",
+                  fontWeight: "bold",
+                  children: statusIcon(expiryStatus)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+              /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+                /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    ref: cvcRef,
+                    value: cvcValue,
+                    onChange: handleCvcChange,
+                    onBlur: handleCvcBlur,
+                    placeholder: cvcPlaceholder,
+                    inputMode: "numeric",
+                    autoComplete: "cc-csc",
+                    name: "cvc",
+                    maxLength: brandInfo.cvcLength,
+                    disabled,
+                    readOnly,
+                    "aria-label": `CVC (${brandInfo.cvcLength} \u0446\u0438\u0444\u0440\u044B)`,
+                    width: isInline ? "80px" : void 0,
+                    fontSize: "16px",
+                    border: isInline ? "none" : void 0,
+                    borderLeft: isInline ? "1px solid" : void 0,
+                    borderColor: isInline ? "border" : void 0,
+                    borderRadius: isInline ? 0 : void 0,
+                    style: !isInline ? { border: statusBorder(cvcStatus) } : void 0,
+                    _focus: isInline ? { boxShadow: "none" } : void 0
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { fontSize: "xs", children: brandInfo.brand === "amex" ? "4 \u0446\u0438\u0444\u0440\u044B \u043D\u0430 \u043B\u0438\u0446\u0435\u0432\u043E\u0439 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043A\u0430\u0440\u0442\u044B" : "3 \u0446\u0438\u0444\u0440\u044B \u043D\u0430 \u043E\u0431\u0440\u0430\u0442\u043D\u043E\u0439 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043A\u0430\u0440\u0442\u044B" }) }) })
+              ] }),
+              statusIcon(cvcStatus) && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  position: "absolute",
+                  right: 2,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "green.500",
+                  fontSize: "sm",
+                  fontWeight: "bold",
+                  children: statusIcon(cvcStatus)
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    numberError && /* @__PURE__ */ jsx(Field.ErrorText, { children: numberError }),
+    expiryError && /* @__PURE__ */ jsx(Field.ErrorText, { children: expiryError })
+  ] });
+}
+function creditCardSchema() {
+  return z.object({
+    number: z.string().min(12, "\u041C\u0438\u043D\u0438\u043C\u0443\u043C 12 \u0446\u0438\u0444\u0440").max(19, "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C 19 \u0446\u0438\u0444\u0440").refine((val) => luhn(val), "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u044B\u0439 \u043D\u043E\u043C\u0435\u0440 \u043A\u0430\u0440\u0442\u044B"),
+    expiry: z.string().regex(/^\d{2}\/\d{2}$/, "\u0424\u043E\u0440\u043C\u0430\u0442 MM/YY").refine((val) => isExpiryValid(val), "\u041A\u0430\u0440\u0442\u0430 \u043F\u0440\u043E\u0441\u0440\u043E\u0447\u0435\u043D\u0430"),
+    cvc: z.string().min(3, "\u041C\u0438\u043D\u0438\u043C\u0443\u043C 3 \u0446\u0438\u0444\u0440\u044B").max(4, "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C 4 \u0446\u0438\u0444\u0440\u044B")
+  });
+}
+
+export { CardBrandIcon, CreditCardField, FieldAddress, FieldCity, FieldColorPicker, FieldFileUpload, FieldOTPInput, FieldPhone, FieldPinInput, FieldSignature, creditCardSchema, detectBrand, formatCardNumber, formatExpiry, isExpiryValid, luhn, parseFileSize, processFileWithSecurity, sanitizeFileName, validateMimeType };
+//# sourceMappingURL=chunk-2PSXYC3I.js.map
+//# sourceMappingURL=chunk-2PSXYC3I.js.map