@squaredr/fieldcraft-pro 1.8.0 → 1.9.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from './chunk-GXKQCXIB.mjs';
-export { ResponseViewer } from './chunk-MLP5EDWP.mjs';
+export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from './chunk-DWRLPGX5.mjs';
+export { ResponseViewer } from './chunk-7GPX3YIB.mjs';
 export { cn } from './chunk-QQ4JZGTD.mjs';
-export { consultationBooking, consultationBookingMeta, consultationBookingSchema, ecommerceCheckout, ecommerceCheckoutMeta, ecommerceCheckoutSchema, proTemplates } from './chunk-IW654Z3M.mjs';
-export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from './chunk-CYXJGOQH.mjs';
+export { consultationBooking, consultationBookingMeta, consultationBookingSchema, ecommerceCheckout, ecommerceCheckoutMeta, ecommerceCheckoutSchema, proTemplates } from './chunk-5QXKDYWY.mjs';
+export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from './chunk-KTIU7VCP.mjs';
 export { FieldCraftProProvider, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense } from './chunk-4MMKB2EW.mjs';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { FieldWrapper } from '@squaredr/fieldcraft-react';
 import { PayKitProvider, CheckoutForm } from '@squaredr/paykit-react';
 import { StripeClientAdapter } from '@squaredr/paykit/stripe/client';
@@ -12,7 +12,1088 @@ import { formatAmount } from '@squaredr/paykit';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // package.json
-var version = "1.8.0";
+var version = "1.9.0";
+function formatBytes(bytes, decimals = 1) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+function isFileAccepted(file, acceptList) {
+  if (!acceptList || acceptList.length === 0) return true;
+  const fileName = file.name.toLowerCase();
+  const fileType = file.type.toLowerCase();
+  return acceptList.some((pattern) => {
+    const p = pattern.trim().toLowerCase();
+    if (!p) return false;
+    if (p === "*/*") return true;
+    if (p.startsWith(".")) {
+      return fileName.endsWith(p);
+    }
+    if (p.endsWith("/*")) {
+      const baseType = p.slice(0, -2);
+      return fileType.startsWith(baseType);
+    }
+    return fileType === p;
+  });
+}
+async function decipherPresignPayload(encryptedHex, ivHex, secretKeyStr) {
+  const enc = new TextEncoder();
+  const rawKey = enc.encode(secretKeyStr.padEnd(32, "0").slice(0, 32));
+  const cryptoObj = typeof window !== "undefined" ? window.crypto : globalThis.crypto;
+  if (!cryptoObj || !cryptoObj.subtle) {
+    throw new Error("Web Crypto API is not supported in this environment.");
+  }
+  const cryptoKey = await cryptoObj.subtle.importKey(
+    "raw",
+    rawKey,
+    { name: "AES-GCM" },
+    false,
+    ["decrypt"]
+  );
+  let iv;
+  if (/^[0-9a-fA-F]+$/.test(ivHex) && ivHex.length % 2 === 0) {
+    iv = new Uint8Array(ivHex.match(/.{1,2}/g).map((b) => parseInt(b, 16)));
+  } else {
+    iv = Uint8Array.from(atob(ivHex), (c) => c.charCodeAt(0));
+  }
+  let ciphertext;
+  if (/^[0-9a-fA-F]+$/.test(encryptedHex) && encryptedHex.length % 2 === 0) {
+    ciphertext = new Uint8Array(encryptedHex.match(/.{1,2}/g).map((b) => parseInt(b, 16)));
+  } else {
+    ciphertext = Uint8Array.from(atob(encryptedHex), (c) => c.charCodeAt(0));
+  }
+  const decryptedBuffer = await cryptoObj.subtle.decrypt(
+    { name: "AES-GCM", iv },
+    cryptoKey,
+    ciphertext
+  );
+  const plaintext = new TextDecoder().decode(decryptedBuffer);
+  return JSON.parse(plaintext);
+}
+function bytesToHex(bytes) {
+  let hex = "";
+  for (let i = 0; i < bytes.length; i++) {
+    hex += (bytes[i] ?? 0).toString(16).padStart(2, "0");
+  }
+  return hex;
+}
+async function generateEphemeralKeyPair() {
+  const cryptoObj = typeof window !== "undefined" ? window.crypto : globalThis.crypto;
+  if (!cryptoObj || !cryptoObj.subtle) {
+    throw new Error("Web Crypto API is not supported in this environment.");
+  }
+  return await cryptoObj.subtle.generateKey(
+    {
+      name: "RSA-OAEP",
+      modulusLength: 2048,
+      publicExponent: new Uint8Array([1, 0, 1]),
+      hash: "SHA-256"
+    },
+    true,
+    ["encrypt", "decrypt"]
+  );
+}
+async function exportPublicKeySpki(publicKey) {
+  const cryptoObj = typeof window !== "undefined" ? window.crypto : globalThis.crypto;
+  const exported = await cryptoObj.subtle.exportKey("spki", publicKey);
+  const bytes = new Uint8Array(exported);
+  let binary = "";
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i] ?? 0);
+  }
+  return btoa(binary);
+}
+async function decryptEphemeralPayload(payload, privateKey) {
+  const cryptoObj = typeof window !== "undefined" ? window.crypto : globalThis.crypto;
+  const cipher = payload.encryptedPayload || payload.ciphertext;
+  if (!cipher) throw new Error("Missing encryptedPayload in response");
+  let ciphertext;
+  if (/^[0-9a-fA-F]+$/.test(cipher) && cipher.length % 2 === 0) {
+    ciphertext = new Uint8Array(cipher.match(/.{1,2}/g).map((b) => parseInt(b, 16)));
+  } else {
+    ciphertext = Uint8Array.from(atob(cipher), (c) => c.charCodeAt(0));
+  }
+  if (payload.encryptedKey && payload.iv) {
+    let encKeyBytes;
+    if (/^[0-9a-fA-F]+$/.test(payload.encryptedKey) && payload.encryptedKey.length % 2 === 0) {
+      encKeyBytes = new Uint8Array(payload.encryptedKey.match(/.{1,2}/g).map((b) => parseInt(b, 16)));
+    } else {
+      encKeyBytes = Uint8Array.from(atob(payload.encryptedKey), (c) => c.charCodeAt(0));
+    }
+    const rawAesKey = await cryptoObj.subtle.decrypt(
+      { name: "RSA-OAEP" },
+      privateKey,
+      encKeyBytes
+    );
+    const aesKey = await cryptoObj.subtle.importKey(
+      "raw",
+      rawAesKey,
+      { name: "AES-GCM" },
+      false,
+      ["decrypt"]
+    );
+    let iv;
+    if (/^[0-9a-fA-F]+$/.test(payload.iv) && payload.iv.length % 2 === 0) {
+      iv = new Uint8Array(payload.iv.match(/.{1,2}/g).map((b) => parseInt(b, 16)));
+    } else {
+      iv = Uint8Array.from(atob(payload.iv), (c) => c.charCodeAt(0));
+    }
+    const decrypted2 = await cryptoObj.subtle.decrypt(
+      { name: "AES-GCM", iv },
+      aesKey,
+      ciphertext
+    );
+    return JSON.parse(new TextDecoder().decode(decrypted2));
+  }
+  const decrypted = await cryptoObj.subtle.decrypt(
+    { name: "RSA-OAEP" },
+    privateKey,
+    ciphertext
+  );
+  return JSON.parse(new TextDecoder().decode(decrypted));
+}
+async function encryptPresignPayload(data, secretKeyStr) {
+  const enc = new TextEncoder();
+  const rawKey = enc.encode(secretKeyStr.padEnd(32, "0").slice(0, 32));
+  const cryptoObj = typeof window !== "undefined" ? window.crypto : globalThis.crypto;
+  if (!cryptoObj || !cryptoObj.subtle) {
+    throw new Error("Web Crypto API is not supported in this environment.");
+  }
+  const cryptoKey = await cryptoObj.subtle.importKey(
+    "raw",
+    rawKey,
+    { name: "AES-GCM" },
+    false,
+    ["encrypt"]
+  );
+  const iv = cryptoObj.getRandomValues(new Uint8Array(12));
+  const plaintextBytes = enc.encode(JSON.stringify(data));
+  const encryptedBuffer = await cryptoObj.subtle.decrypt ? await cryptoObj.subtle.encrypt({ name: "AES-GCM", iv }, cryptoKey, plaintextBytes) : new ArrayBuffer(0);
+  const encryptedPayload = bytesToHex(new Uint8Array(encryptedBuffer));
+  const ivHex = bytesToHex(iv);
+  return { encryptedPayload, iv: ivHex };
+}
+function ProFileUploadField(props) {
+  const {
+    value,
+    onChange,
+    onBlur,
+    error,
+    touched,
+    disabled = false,
+    customProps
+  } = props;
+  const field = props.field || props.question;
+  const config = field?.config ?? {};
+  const maxFiles = config.maxFiles ?? 1;
+  const maxSizeMb = config.maxSizeMb ?? 10;
+  const maxSizeBytes = maxSizeMb * 1024 * 1024;
+  const acceptList = config.accept;
+  const [items, setItems] = useState(() => {
+    if (!value) return [];
+    const arrayVal = Array.isArray(value) ? value : [value];
+    return arrayVal.filter((v) => Boolean(v && typeof v === "object" && "url" in v)).map((v, idx) => ({
+      id: `init-${idx}-${v.name}`,
+      name: v.name,
+      size: v.size || 0,
+      type: v.type || "application/octet-stream",
+      progress: 100,
+      status: "succeeded",
+      url: v.url,
+      key: v.key
+    }));
+  });
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [generalError, setGeneralError] = useState(null);
+  const fileInputRef = useRef(null);
+  const activeXhrsRef = useRef(/* @__PURE__ */ new Map());
+  const notifyChange = useCallback(
+    (newItems) => {
+      const succeeded = newItems.filter((item) => item.status === "succeeded" && item.url).map((item) => ({
+        name: item.name,
+        size: item.size,
+        type: item.type,
+        url: item.url,
+        key: item.key,
+        uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }));
+      if (maxFiles === 1) {
+        onChange(succeeded.length > 0 ? succeeded[0] : null);
+      } else {
+        onChange(succeeded);
+      }
+    },
+    [maxFiles, onChange]
+  );
+  useEffect(() => {
+    return () => {
+      activeXhrsRef.current.forEach((xhr) => xhr.abort());
+      activeXhrsRef.current.clear();
+    };
+  }, []);
+  const uploadSingleFile = useCallback(
+    async (fileState) => {
+      const { file, id } = fileState;
+      if (!file) return;
+      const uploadEndpoint = config.uploadUrl || customProps?.uploadUrl || customProps?.presignUrl;
+      if (!uploadEndpoint) {
+        setItems((prev) => {
+          const next = prev.map(
+            (item) => item.id === id ? {
+              ...item,
+              progress: 0,
+              status: "error",
+              error: "No upload endpoint configured. Please configure storage settings or pass an uploadUrl."
+            } : item
+          );
+          setTimeout(() => notifyChange(next), 0);
+          return next;
+        });
+        return;
+      }
+      try {
+        let ephemeralKeyPair = null;
+        let ephemeralPublicKeyBase64 = void 0;
+        try {
+          const cryptoObj = typeof window !== "undefined" ? window.crypto : globalThis.crypto;
+          if (cryptoObj?.subtle) {
+            ephemeralKeyPair = await generateEphemeralKeyPair();
+            ephemeralPublicKeyBase64 = await exportPublicKeySpki(ephemeralKeyPair.publicKey);
+          }
+        } catch {
+        }
+        const headers = {
+          "Content-Type": "application/json",
+          ...ephemeralPublicKeyBase64 ? { "X-Ephemeral-Public-Key": ephemeralPublicKeyBase64 } : {},
+          ...config.publicKey ? { "X-Public-Key": config.publicKey } : {},
+          ...config.headers || {}
+        };
+        const presignRes = await fetch(uploadEndpoint, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            filename: file.name,
+            contentType: file.type || "application/octet-stream",
+            size: file.size,
+            ephemeralPublicKey: ephemeralPublicKeyBase64,
+            publicKey: config.publicKey,
+            storageProvider: config.storageProvider
+          })
+        });
+        if (!presignRes.ok) {
+          const errData = await presignRes.json().catch(() => null);
+          throw new Error(
+            errData?.message || `Presign request failed with status ${presignRes.status}`
+          );
+        }
+        let presignData = await presignRes.json();
+        if (ephemeralKeyPair && (presignData.encryptedPayload || presignData.ciphertext)) {
+          presignData = await decryptEphemeralPayload(presignData, ephemeralKeyPair.privateKey);
+        } else if (presignData.encryptedPayload || presignData.ciphertext) {
+          const cipher = presignData.encryptedPayload || presignData.ciphertext;
+          const iv = presignData.iv || presignData.nonce;
+          const key2 = config.publicKey || customProps?.publicKey;
+          if (key2) {
+            presignData = await decipherPresignPayload(cipher, iv, key2);
+          } else {
+            throw new Error(
+              "Cannot decipher encrypted upload payload: Missing public key in question configuration."
+            );
+          }
+        }
+        const uploadUrl = presignData.uploadUrl || presignData.url || presignData.signedUrl;
+        const fileUrl = presignData.fileUrl || presignData.publicUrl || uploadUrl.split("?")[0];
+        const key = presignData.key || presignData.fileKey;
+        if (!uploadUrl) {
+          throw new Error("Presign response did not contain an uploadUrl");
+        }
+        const xhr = new XMLHttpRequest();
+        activeXhrsRef.current.set(id, xhr);
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) {
+            const pct = Math.round(e.loaded / e.total * 100);
+            setItems(
+              (prev) => prev.map((item) => item.id === id ? { ...item, progress: pct } : item)
+            );
+          }
+        };
+        xhr.onload = () => {
+          activeXhrsRef.current.delete(id);
+          if (xhr.status >= 200 && xhr.status < 300) {
+            let finalUrl = fileUrl;
+            let finalKey = key;
+            try {
+              if (xhr.responseText) {
+                const resp = JSON.parse(xhr.responseText);
+                if (resp.secure_url) finalUrl = resp.secure_url;
+                else if (resp.url && !resp.url.includes("?")) finalUrl = resp.url;
+                if (resp.public_id) finalKey = resp.public_id;
+                else if (resp.key) finalKey = resp.key;
+              }
+            } catch {
+            }
+            setItems((prev) => {
+              const next = prev.map(
+                (item) => item.id === id ? {
+                  ...item,
+                  progress: 100,
+                  status: "succeeded",
+                  url: finalUrl,
+                  key: finalKey
+                } : item
+              );
+              setTimeout(() => notifyChange(next), 0);
+              return next;
+            });
+          } else {
+            setItems(
+              (prev) => prev.map(
+                (item) => item.id === id ? {
+                  ...item,
+                  status: "error",
+                  error: `Upload failed (Status ${xhr.status})`
+                } : item
+              )
+            );
+          }
+        };
+        xhr.onerror = () => {
+          activeXhrsRef.current.delete(id);
+          setItems(
+            (prev) => prev.map(
+              (item) => item.id === id ? { ...item, status: "error", error: "Network error during upload" } : item
+            )
+          );
+        };
+        if (presignData.fields && typeof presignData.fields === "object") {
+          const formData = new FormData();
+          Object.entries(presignData.fields).forEach(([k, v]) => {
+            formData.append(k, String(v));
+          });
+          formData.append("file", file);
+          xhr.open("POST", uploadUrl);
+          xhr.send(formData);
+        } else {
+          xhr.open("PUT", uploadUrl);
+          xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+          if (presignData.headers && typeof presignData.headers === "object") {
+            Object.entries(presignData.headers).forEach(([k, v]) => {
+              xhr.setRequestHeader(k, String(v));
+            });
+          }
+          xhr.send(file);
+        }
+      } catch (err) {
+        setItems(
+          (prev) => prev.map(
+            (item) => item.id === id ? {
+              ...item,
+              status: "error",
+              error: err.message || "Failed to initialize upload"
+            } : item
+          )
+        );
+      }
+    },
+    [config, customProps]
+  );
+  const handleFilesAdded = useCallback(
+    (files) => {
+      setGeneralError(null);
+      const incoming = Array.from(files);
+      if (incoming.length === 0) return;
+      const currentCount = items.filter((i) => i.status !== "error").length;
+      if (currentCount + incoming.length > maxFiles) {
+        setGeneralError(`You can upload a maximum of ${maxFiles} file${maxFiles === 1 ? "" : "s"}.`);
+        return;
+      }
+      const validFiles = [];
+      for (const file of incoming) {
+        if (!isFileAccepted(file, acceptList)) {
+          setGeneralError(`File "${file.name}" has an unsupported format.`);
+          return;
+        }
+        if (file.size > maxSizeBytes) {
+          setGeneralError(
+            `File "${file.name}" exceeds the maximum size limit of ${maxSizeMb} MB.`
+          );
+          return;
+        }
+        const newId = `file-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
+        validFiles.push({
+          id: newId,
+          file,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          progress: 0,
+          status: "uploading"
+        });
+      }
+      setItems((prev) => {
+        const next = maxFiles === 1 ? validFiles : [...prev, ...validFiles];
+        return next;
+      });
+      validFiles.forEach((f) => uploadSingleFile(f));
+    },
+    [acceptList, items, maxFiles, maxSizeBytes, maxSizeMb, uploadSingleFile]
+  );
+  const removeItem = useCallback(
+    (id) => {
+      const activeXhr = activeXhrsRef.current.get(id);
+      if (activeXhr) {
+        activeXhr.abort();
+        activeXhrsRef.current.delete(id);
+      }
+      setItems((prev) => {
+        const next = prev.filter((item) => item.id !== id);
+        setTimeout(() => notifyChange(next), 0);
+        return next;
+      });
+    },
+    [notifyChange]
+  );
+  const retryItem = useCallback(
+    (id) => {
+      const target = items.find((item) => item.id === id);
+      if (!target || !target.file) return;
+      setItems(
+        (prev) => prev.map(
+          (item) => item.id === id ? { ...item, progress: 0, status: "uploading", error: void 0 } : item
+        )
+      );
+      uploadSingleFile({ ...target, progress: 0, status: "uploading", error: void 0 });
+    },
+    [items, uploadSingleFile]
+  );
+  const canAddMore = items.length < maxFiles && !disabled;
+  const combinedError = error || generalError ? [
+    ...Array.isArray(error) ? error : error ? [String(error)] : [],
+    ...generalError ? [generalError] : []
+  ] : void 0;
+  const c = props.theme?.colors;
+  const inputRadius = props.theme?.shape?.inputRadius || "8px";
+  const dropzoneStyle = {
+    borderRadius: inputRadius,
+    ...c?.border && !isDragOver ? { borderColor: c.border } : {},
+    ...c?.surface ? { backgroundColor: isDragOver ? `${c.primary || "#3b82f6"}15` : c.surface } : {},
+    ...c?.text ? { color: c.text } : {}
+  };
+  const cardStyle = {
+    borderRadius: inputRadius,
+    ...c?.border ? { borderColor: c.border } : {},
+    ...c?.surface ? { backgroundColor: c.surface } : {},
+    ...c?.text ? { color: c.text } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    FieldWrapper,
+    {
+      field,
+      error: combinedError,
+      touched: touched || Boolean(generalError),
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 font-sans", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: maxFiles > 1,
+            accept: acceptList?.join(","),
+            className: "hidden",
+            disabled,
+            onChange: (e) => {
+              if (e.target.files) {
+                handleFilesAdded(e.target.files);
+                e.target.value = "";
+              }
+            },
+            onBlur
+          }
+        ),
+        canAddMore && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: dropzoneStyle,
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!disabled) setIsDragOver(true);
+            },
+            onDragLeave: () => setIsDragOver(false),
+            onDrop: (e) => {
+              e.preventDefault();
+              setIsDragOver(false);
+              if (!disabled && e.dataTransfer.files) {
+                handleFilesAdded(e.dataTransfer.files);
+              }
+            },
+            onClick: () => {
+              if (!disabled) fileInputRef.current?.click();
+            },
+            className: `
+              relative flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-xl cursor-pointer transition-all duration-200
+              ${isDragOver ? "border-primary bg-primary/5 scale-[0.99]" : "border-muted-foreground/25 hover:border-primary/60 hover:bg-muted/30 bg-muted/10"}
+              ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+            `,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "p-3 bg-primary/10 text-primary rounded-full", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "w-6 h-6",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Click to upload" }),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "or drag and drop" })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                acceptList && acceptList.length > 0 ? `Supported: ${acceptList.join(", ")}` : "All file types supported",
+                " ",
+                "(Max ",
+                maxSizeMb,
+                " MB)"
+              ] })
+            ] })
+          }
+        ),
+        items.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item) => {
+          const isImage = item.type.startsWith("image/") && item.url;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: cardStyle,
+              className: "flex items-center justify-between p-3 bg-card border rounded-lg shadow-sm text-sm",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 min-w-0 flex-1 mr-3", children: [
+                  isImage ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: item.url,
+                      alt: item.name,
+                      className: "w-10 h-10 rounded object-cover shrink-0 border"
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-muted flex items-center justify-center shrink-0 text-muted-foreground font-mono text-xs uppercase font-bold", children: item.name.split(".").pop()?.slice(0, 4) || "FILE" }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground truncate", children: item.name }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground shrink-0 ml-2", children: formatBytes(item.size) })
+                    ] }),
+                    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "mt-1.5 w-full bg-muted rounded-full h-1.5 overflow-hidden", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "bg-primary h-1.5 rounded-full transition-all duration-150",
+                        style: { width: `${item.progress}%` }
+                      }
+                    ) }),
+                    item.status === "error" && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-0.5", children: item.error || "Upload failed" }),
+                    item.status === "succeeded" && /* @__PURE__ */ jsxs("p", { className: "text-xs text-emerald-600 dark:text-emerald-400 mt-0.5 flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          fillRule: "evenodd",
+                          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                          clipRule: "evenodd"
+                        }
+                      ) }),
+                      "Uploaded"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1.5 shrink-0", children: [
+                  item.status === "error" && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => retryItem(item.id),
+                      className: "p-1 text-xs text-primary hover:underline",
+                      title: "Retry upload",
+                      children: "Retry"
+                    }
+                  ),
+                  item.status === "succeeded" && item.url && /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: item.url,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "p-1.5 text-muted-foreground hover:text-foreground rounded transition-colors",
+                      title: "View file",
+                      children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                        }
+                      ) })
+                    }
+                  ),
+                  !disabled && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => removeItem(item.id),
+                      className: "p-1.5 text-muted-foreground hover:text-destructive rounded transition-colors",
+                      title: "Remove file",
+                      children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M6 18L18 6M6 6l12 12"
+                        }
+                      ) })
+                    }
+                  )
+                ] })
+              ]
+            },
+            item.id
+          );
+        }) })
+      ] })
+    }
+  );
+}
+var ProFileUploadField_default = ProFileUploadField;
+function extractAttendeeInfo(fieldValues) {
+  if (!fieldValues) return {};
+  let name;
+  let email;
+  for (const [key, val] of Object.entries(fieldValues)) {
+    const k = key.toLowerCase();
+    if (!name && (k.includes("name") || k === "fullname" || k === "first_name")) {
+      if (typeof val === "string" && val.trim()) {
+        name = val.trim();
+      } else if (val && typeof val === "object" && "first" in val) {
+        const obj = val;
+        name = [obj.first, obj.middle, obj.last].filter(Boolean).join(" ").trim();
+      }
+    }
+    if (!email && (k.includes("email") || k.includes("mail"))) {
+      if (typeof val === "string" && val.includes("@")) {
+        email = val.trim();
+      }
+    }
+  }
+  return { name, email };
+}
+function formatTime12h(timeStr) {
+  const [hStr, mStr] = timeStr.split(":");
+  const h = parseInt(hStr, 10);
+  if (isNaN(h)) return timeStr;
+  const ampm = h >= 12 ? "PM" : "AM";
+  const h12 = h % 12 || 12;
+  return `${h12}:${mStr || "00"} ${ampm}`;
+}
+function ProAppointmentField(props) {
+  const {
+    value,
+    onChange,
+    onBlur,
+    error,
+    touched,
+    disabled = false,
+    fieldValues,
+    customProps
+  } = props;
+  const onNext = customProps?.onNext || props.onNext;
+  const field = props.field || props.question;
+  const config = field?.config ?? {};
+  const provider = useMemo(() => {
+    if (config.embedUrl) {
+      if (config.embedProvider === "calendly" || config.embedUrl.includes("calendly.com")) {
+        return "calendly";
+      }
+      return "cal_com";
+    }
+    return "slots";
+  }, [config.embedUrl, config.embedProvider]);
+  const booking = value ?? null;
+  const isConfirmed = booking?.status === "confirmed";
+  const resolvedTimezone = useMemo(() => {
+    if (config.timezoneField && fieldValues?.[config.timezoneField]) {
+      const dynamicVal = String(fieldValues[config.timezoneField]);
+      if (dynamicVal.trim()) return dynamicVal.trim();
+    }
+    if (config.timezone) return config.timezone;
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    } catch {
+      return "UTC";
+    }
+  }, [config.timezone, config.timezoneField, fieldValues]);
+  const [selectedDate, setSelectedDate] = useState(() => {
+    if (booking?.date) return booking.date;
+    if (config.slots && config.slots.length > 0) return config.slots[0].date;
+    return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  });
+  const [selectedTime, setSelectedTime] = useState(() => booking?.time || null);
+  const [remoteSlots, setRemoteSlots] = useState(config.slots || []);
+  const [isLoadingSlots, setIsLoadingSlots] = useState(false);
+  const [slotsFetchError, setSlotsFetchError] = useState(null);
+  useEffect(() => {
+    if (provider !== "slots" || !config.slotsUrl) return;
+    let isMounted = true;
+    setIsLoadingSlots(true);
+    setSlotsFetchError(null);
+    fetch(config.slotsUrl).then((res) => {
+      if (!res.ok) throw new Error(`Slots API returned status ${res.status}`);
+      return res.json();
+    }).then((data) => {
+      if (isMounted) {
+        const slotsList = Array.isArray(data) ? data : data.slots || [];
+        setRemoteSlots(slotsList);
+        if (slotsList.length > 0 && !selectedDate) {
+          setSelectedDate(slotsList[0].date);
+        }
+        setIsLoadingSlots(false);
+      }
+    }).catch((err) => {
+      if (isMounted) {
+        setSlotsFetchError(err.message || "Failed to load available slots");
+        setIsLoadingSlots(false);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [config.slotsUrl, provider, selectedDate]);
+  const embedSrc = useMemo(() => {
+    if (!config.embedUrl) return "";
+    try {
+      const url = new URL(config.embedUrl);
+      const { name, email } = extractAttendeeInfo(fieldValues);
+      if (name && !url.searchParams.has("name")) url.searchParams.set("name", name);
+      if (email && !url.searchParams.has("email")) url.searchParams.set("email", email);
+      if (resolvedTimezone && !url.searchParams.has("timezone")) {
+        url.searchParams.set("timezone", resolvedTimezone);
+      }
+      if (provider === "cal_com") {
+        if (!url.searchParams.has("embed")) url.searchParams.set("embed", "true");
+        if (!url.searchParams.has("layout")) url.searchParams.set("layout", "month_view");
+      } else if (provider === "calendly") {
+        if (!url.searchParams.has("embed_type")) url.searchParams.set("embed_type", "Inline");
+      }
+      return url.toString();
+    } catch {
+      return config.embedUrl;
+    }
+  }, [config.embedUrl, fieldValues, provider, resolvedTimezone]);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      let data = event.data;
+      if (!data) return;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch {
+        }
+      }
+      if (typeof data !== "object" || data === null) return;
+      if (data.type === "cal:bookingSuccessful" || data.origin === "CAL" && data.action === "bookingSuccessful" || data.event === "cal:bookingSuccessful") {
+        const payload = data.data || data.payload || {};
+        const newBooking = {
+          provider: "cal_com",
+          status: "confirmed",
+          bookingId: String(payload.bookingId || payload.id || `cal-${Date.now()}`),
+          date: payload.date || payload.startTime?.split("T")[0],
+          time: payload.time || payload.startTime?.split("T")[1]?.slice(0, 5),
+          duration: payload.duration || config.duration || 30,
+          timezone: payload.timezone || resolvedTimezone,
+          eventTitle: payload.eventTitle || payload.title,
+          attendeeName: payload.name || payload.attendeeName,
+          attendeeEmail: payload.email || payload.attendeeEmail,
+          confirmedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        onChange(newBooking);
+        if (config.autoAdvance !== false && typeof onNext === "function") {
+          setTimeout(() => onNext(), 400);
+        }
+      }
+      if (data.event === "calendly.event_scheduled" || data.action === "calendly.event_scheduled" || data.type === "calendly.event_scheduled" || data.event === "event_scheduled") {
+        const payload = data.payload || data.data || {};
+        const newBooking = {
+          provider: "calendly",
+          status: "confirmed",
+          eventUri: payload.event?.uri,
+          inviteeUri: payload.invitee?.uri,
+          bookingId: payload.event?.uri ? String(payload.event.uri).split("/").pop() : `cal-${Date.now()}`,
+          duration: config.duration || 30,
+          timezone: resolvedTimezone,
+          confirmedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        onChange(newBooking);
+        if (config.autoAdvance !== false && typeof onNext === "function") {
+          setTimeout(() => onNext(), 400);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [config.autoAdvance, config.duration, onChange, onNext, resolvedTimezone]);
+  const handleSlotSelect = useCallback(
+    (time) => {
+      setSelectedTime(time);
+      const newBooking = {
+        provider: "slots",
+        status: "confirmed",
+        date: selectedDate,
+        time,
+        duration: config.duration || 30,
+        timezone: resolvedTimezone,
+        confirmedAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      onChange(newBooking);
+    },
+    [config.duration, onChange, resolvedTimezone, selectedDate]
+  );
+  const handleResetBooking = useCallback(() => {
+    onChange(null);
+    setSelectedTime(null);
+  }, [onChange]);
+  const availableTimes = useMemo(() => {
+    const dayMatch = remoteSlots.find((s) => s.date === selectedDate);
+    if (dayMatch && Array.isArray(dayMatch.times) && dayMatch.times.length > 0) {
+      return dayMatch.times;
+    }
+    return [
+      "09:00",
+      "09:30",
+      "10:00",
+      "10:30",
+      "11:00",
+      "11:30",
+      "13:00",
+      "13:30",
+      "14:00",
+      "14:30",
+      "15:00",
+      "15:30",
+      "16:00"
+    ];
+  }, [remoteSlots, selectedDate]);
+  const combinedError = error || slotsFetchError ? [
+    ...Array.isArray(error) ? error : error ? [String(error)] : [],
+    ...slotsFetchError ? [slotsFetchError] : []
+  ] : void 0;
+  const c = props.theme?.colors;
+  const inputRadius = props.theme?.shape?.inputRadius || "8px";
+  const cardStyle = {
+    borderRadius: inputRadius,
+    ...c?.border ? { borderColor: c.border } : {},
+    ...c?.surface ? { backgroundColor: c.surface } : {},
+    ...c?.text ? { color: c.text } : {}
+  };
+  const activeSlotStyle = {
+    borderRadius: inputRadius,
+    ...c?.primary ? { backgroundColor: c.primary, borderColor: c.primary } : {},
+    ...c?.primaryForeground ? { color: c.primaryForeground } : {}
+  };
+  const inactiveSlotStyle = {
+    borderRadius: inputRadius,
+    ...c?.border ? { borderColor: c.border } : {},
+    ...c?.surface ? { backgroundColor: c.surface } : {},
+    ...c?.text ? { color: c.text } : {}
+  };
+  return /* @__PURE__ */ jsx(FieldWrapper, { field, error: combinedError, touched: touched || Boolean(slotsFetchError), children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 font-sans", children: [
+    isConfirmed && booking && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: cardStyle,
+        className: "p-5 border border-emerald-500/30 bg-emerald-500/5 rounded-xl text-foreground space-y-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "p-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                  clipRule: "evenodd"
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Appointment Confirmed" }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground capitalize", children: [
+                  "via ",
+                  booking.provider.replace("_", ".")
+                ] })
+              ] })
+            ] }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleResetBooking,
+                className: "text-xs text-muted-foreground hover:text-foreground underline transition-colors",
+                children: "Reschedule"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs pt-1 border-t border-emerald-500/20", children: [
+            booking.date && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Date:" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: booking.date })
+            ] }),
+            booking.time && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Time:" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: formatTime12h(booking.time) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Timezone:" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: booking.timezone || resolvedTimezone })
+            ] }),
+            booking.duration && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Duration:" }),
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+                booking.duration,
+                " mins"
+              ] })
+            ] })
+          ] }),
+          typeof onNext === "function" && /* @__PURE__ */ jsx("div", { className: "pt-2 border-t border-emerald-500/20 flex justify-end", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onNext,
+              className: "px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition-colors flex items-center gap-1",
+              children: [
+                "Continue",
+                /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    !isConfirmed && (provider === "cal_com" || provider === "calendly") && embedSrc && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: cardStyle,
+          className: "w-full border rounded-xl overflow-hidden shadow-sm bg-card",
+          children: /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: embedSrc,
+              title: "Schedule Appointment",
+              className: "w-full h-[580px] border-0",
+              allow: "camera; microphone; autoplay; fullscreen; payment",
+              loading: "lazy"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-xs text-muted-foreground px-1", children: [
+        /* @__PURE__ */ jsx("span", { children: "Finished scheduling in the calendar above?" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              const manualBooking = {
+                provider,
+                status: "confirmed",
+                bookingId: `manual-${Date.now()}`,
+                timezone: resolvedTimezone,
+                confirmedAt: (/* @__PURE__ */ new Date()).toISOString()
+              };
+              onChange(manualBooking);
+              if (typeof onNext === "function") {
+                setTimeout(() => onNext(), 300);
+              }
+            },
+            className: "px-3 py-1.5 font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors flex items-center justify-center gap-1 shadow-sm self-end sm:self-auto",
+            children: "\u2713 I've Completed My Booking"
+          }
+        )
+      ] })
+    ] }),
+    !isConfirmed && provider === "slots" && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: cardStyle,
+        className: "space-y-4 p-4 border rounded-xl bg-card shadow-sm",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-foreground block mb-1", children: "Select Date" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "date",
+                  value: selectedDate,
+                  min: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+                  disabled,
+                  onChange: (e) => setSelectedDate(e.target.value),
+                  onBlur,
+                  className: "px-3 py-1.5 text-sm border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/40"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1.5 self-start sm:self-auto", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-muted-foreground/70", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Timezone: ",
+                /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: resolvedTimezone })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-foreground block", children: [
+              "Available Times (",
+              config.duration || 30,
+              " mins)"
+            ] }),
+            isLoadingSlots ? /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-xs text-muted-foreground", children: "Loading available slots..." }) : availableTimes.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2", children: availableTimes.map((timeStr) => {
+              const isSelected = selectedTime === timeStr;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  style: isSelected ? activeSlotStyle : inactiveSlotStyle,
+                  disabled,
+                  onClick: () => handleSlotSelect(timeStr),
+                  className: `
+                          px-2.5 py-2 text-xs font-medium rounded-lg border transition-all duration-150 text-center
+                          ${isSelected ? "bg-primary text-primary-foreground border-primary shadow-sm ring-2 ring-primary/20 scale-[1.02]" : "bg-background text-foreground border-border hover:border-primary/60 hover:bg-muted/50"}
+                          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+                        `,
+                  children: formatTime12h(timeStr)
+                },
+                timeStr
+              );
+            }) }) : /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-xs text-muted-foreground", children: "No slots available on this date. Please select another date." })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+var ProAppointmentField_default = ProAppointmentField;
 function resolvePath(obj, path) {
   let current = obj;
   for (const key of path.split(".")) {
@@ -109,13 +1190,16 @@ function ProPaymentField(props) {
     onChange,
     onBlur,
     customProps,
-    theme: formTheme
+    theme: formTheme,
+    fieldValues
   } = props;
   const config = field.config;
   const current = value ?? { status: "pending" };
   const provider = config?.provider ?? "stripe";
   const publicKey = config?.publicKey;
-  const amount = customProps?.amount ?? config?.amount;
+  const rawDynamicAmount = config?.amountField && fieldValues ? fieldValues[config.amountField] : void 0;
+  const dynamicAmountCents = typeof rawDynamicAmount === "number" ? Math.round(rawDynamicAmount * 100) : typeof rawDynamicAmount === "string" && !isNaN(Number(rawDynamicAmount)) && rawDynamicAmount !== "" ? Math.round(Number(rawDynamicAmount) * 100) : void 0;
+  const amount = customProps?.amount ?? dynamicAmountCents ?? config?.amount;
   const currency = config?.currency ?? "USD";
   const directSecret = customProps?.clientSecret;
   const onCreateIntent = customProps?.onCreatePaymentIntent;
@@ -124,6 +1208,15 @@ function ProPaymentField(props) {
   const [clientSecret, setClientSecret] = useState(directSecret);
   const [intentLoading, setIntentLoading] = useState(false);
   const [intentError, setIntentError] = useState(null);
+  const prevAmountRef = useRef(amount);
+  useEffect(() => {
+    if (prevAmountRef.current !== amount) {
+      prevAmountRef.current = amount;
+      if (!directSecret) {
+        setClientSecret(void 0);
+      }
+    }
+  }, [amount, directSecret]);
   const mode = directSecret ? "direct" : onCreateIntent ? "callback" : serverUrl ? "url" : "setup";
   useEffect(() => {
     if (directSecret) {
@@ -190,7 +1283,7 @@ function ProPaymentField(props) {
   const c = formTheme.colors;
   const cardStyle = {
     borderRadius: formTheme.shape?.inputRadius || "8px",
-    border: `1px solid ${c?.border || "#e2e8f0"}`,
+    border: `1px solid ${c?.border || "var(--rule)"}`,
     padding: "16px",
     background: c?.surface || c?.background,
     color: c?.text
@@ -478,7 +1571,9 @@ function PayKitCheckout({
   ) });
 }
 var PRO_FIELD_OVERRIDES = {
-  payment: ProPaymentField
+  payment: ProPaymentField,
+  file_upload: ProFileUploadField_default,
+  appointment: ProAppointmentField_default
 };
 
 // src/index.ts
@@ -502,4 +1597,4 @@ Need a license? \u2192 https://fieldcraft.squaredr.tech/pro#pricing
   );
 }
 
-export { PRO_FIELD_OVERRIDES, ProPaymentField };
+export { PRO_FIELD_OVERRIDES, ProAppointmentField, ProFileUploadField, ProPaymentField, decipherPresignPayload, decryptEphemeralPayload, encryptPresignPayload, exportPublicKeySpki, generateEphemeralKeyPair };