@squaredr/fieldcraft-pro 1.7.0 → 1.9.0

package/dist/index.mjs

@@ -1,33 +1,1205 @@
-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-J5V6OVZO.mjs';
-export { ResponseViewer } from './chunk-GZIV2XAD.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-VEP3DOCQ.mjs';
-export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from './chunk-4TN6YJDF.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, Suspense } 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';
+import { formatAmount } from '@squaredr/paykit';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // package.json
-var version = "1.6.4";
-function formatCurrency(amount, currency) {
-  if (amount == null) return "";
-  try {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency: currency ?? "USD"
-    }).format(amount);
-  } catch {
-    return `${currency ?? "USD"} ${amount.toFixed(2)}`;
+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(".")) {
+    if (current == null || typeof current !== "object") return void 0;
+    current = current[key];
+  }
+  return current;
+}
+function isDarkTheme(theme) {
+  const bg = theme.colors?.background ?? "#FFFFFF";
+  let hex = bg.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  if (hex.length < 6) return false;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+}
+function resolveAppearance(theme) {
+  const c = theme.colors;
+  const isDark = isDarkTheme(theme);
+  return {
+    theme: isDark ? "night" : "default",
+    variables: {
+      colorPrimary: c?.primary,
+      colorBackground: c?.surface || c?.background,
+      colorText: c?.text,
+      colorDanger: c?.error,
+      colorSuccess: c?.success || "#22c55e",
+      borderRadius: theme.shape?.inputRadius || "6px",
+      fontFamily: theme.typography?.fontFamily
+    }
+  };
+}
+var PAYKIT_STYLES = `
+[data-paykit-form] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+[data-paykit-submit] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 20px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: var(--paykit-font-family, inherit);
+  line-height: 1.5;
+  color: #fff;
+  background: var(--paykit-color-primary, #635BFF);
+  border: none;
+  border-radius: var(--paykit-border-radius, 6px);
+  cursor: pointer;
+  transition: opacity 150ms ease, box-shadow 150ms ease, filter 150ms ease;
+}
+[data-paykit-submit]:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--paykit-color-primary, #635BFF) 35%, transparent);
+}
+[data-paykit-submit]:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+[data-paykit-submit]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+var paykitStylesInjected = false;
+function injectPayKitStyles() {
+  if (paykitStylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.setAttribute("data-paykit-pro", "");
+  style.textContent = PAYKIT_STYLES;
+  document.head.appendChild(style);
+  paykitStylesInjected = true;
+}
+function formatCurrency(amountCents, currency) {
+  if (amountCents == null) return "";
+  return formatAmount(amountCents, currency ?? "USD");
 }
 function ProPaymentField(props) {
-  const { field, value, error, touched, disabled, readonly, onChange, onBlur, customProps } = props;
+  injectPayKitStyles();
+  const {
+    field,
+    value,
+    error,
+    touched,
+    disabled,
+    readonly,
+    onChange,
+    onBlur,
+    customProps,
+    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;
@@ -36,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) {
@@ -44,31 +1225,77 @@ function ProPaymentField(props) {
     }
     if (mode === "setup" || !amount || !publicKey) return;
     if (clientSecret) return;
+    let cancelled = false;
+    const controller = mode === "url" ? new AbortController() : void 0;
     const fetchIntent = async () => {
       setIntentLoading(true);
       setIntentError(null);
       try {
         if (mode === "callback" && onCreateIntent) {
-          const result = await onCreateIntent({ amount, currency, provider, metadata: { fieldId: field.id } });
-          setClientSecret(result.clientSecret);
+          const result = await onCreateIntent({
+            amount,
+            currency,
+            provider,
+            metadata: { fieldId: field.id }
+          });
+          if (!cancelled) setClientSecret(result.clientSecret);
         } else if (mode === "url" && serverUrl) {
           const res = await fetch(serverUrl, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } })
+            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } }),
+            signal: controller?.signal
           });
           if (!res.ok) throw new Error(`Server error (${res.status})`);
           const data = await res.json();
-          setClientSecret(data.clientSecret);
+          const secretPath = config?.responseMapping?.clientSecretPath;
+          const secret = secretPath ? resolvePath(data, secretPath) : data.clientSecret;
+          if (!secret)
+            throw new Error(
+              "No clientSecret in response" + (secretPath ? ` at path "${secretPath}"` : "")
+            );
+          if (!cancelled) setClientSecret(secret);
         }
       } catch (err) {
+        if (cancelled) return;
         setIntentError(err instanceof Error ? err.message : "Failed to create payment intent");
       } finally {
-        setIntentLoading(false);
+        if (!cancelled) setIntentLoading(false);
       }
     };
     fetchIntent();
-  }, [mode, amount, currency, provider, publicKey, directSecret, clientSecret, onCreateIntent, serverUrl, field.id]);
+    return () => {
+      cancelled = true;
+      controller?.abort();
+    };
+  }, [
+    mode,
+    amount,
+    currency,
+    provider,
+    publicKey,
+    directSecret,
+    clientSecret,
+    onCreateIntent,
+    serverUrl,
+    field.id
+  ]);
+  const c = formTheme.colors;
+  const cardStyle = {
+    borderRadius: formTheme.shape?.inputRadius || "8px",
+    border: `1px solid ${c?.border || "var(--rule)"}`,
+    padding: "16px",
+    background: c?.surface || c?.background,
+    color: c?.text
+  };
+  const mutedTextStyle = { color: c?.textMuted, fontSize: "0.875rem" };
+  const badgeStyle = {
+    fontSize: "0.75rem",
+    padding: "2px 8px",
+    borderRadius: formTheme.shape?.inputRadius || "4px",
+    background: c?.secondary || c?.surface,
+    color: c?.secondaryForeground || c?.textMuted
+  };
   const handleSuccess = (chargeId) => {
     const result = { status: "succeeded", chargeId };
     onChange(result);
@@ -83,7 +1310,8 @@ function ProPaymentField(props) {
   };
   if (!publicKey) {
     return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-input p-4 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-      "Payment field \u2014 configure a ",
+      "Payment field \u2014 configure a",
+      " ",
       /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 rounded text-xs", children: "publicKey" }),
       " in the field properties panel."
     ] }) }) });
@@ -96,40 +1324,97 @@ function ProPaymentField(props) {
     ] }) }) });
   }
   if (current.status === "succeeded") {
-    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-      amount != null && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-2", children: [
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+      amount != null && /* @__PURE__ */ jsxs("p", { style: { ...mutedTextStyle, marginBottom: "8px" }, children: [
         formatCurrency(amount, currency),
         config?.description && /* @__PURE__ */ jsxs("span", { children: [
           " \u2014 ",
           config.description
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", style: { color: "var(--success, #22c55e)" }, children: [
-        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          "Payment successful",
-          current.chargeId ? ` (${current.chargeId})` : ""
-        ] })
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: c?.success || "#22c55e"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                width: 16,
+                height: 16,
+                children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Payment successful",
+              current.chargeId ? ` (${current.chargeId})` : ""
+            ] })
+          ]
+        }
+      )
     ] }) });
   }
   if (current.status === "failed") {
-    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-destructive/50 p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive font-medium", children: [
-        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: [
-          /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          "Payment failed",
-          current.error ? `: ${current.error}` : ""
-        ] })
-      ] }),
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { style: { ...cardStyle, borderColor: c?.error || "#dc2626" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: c?.error || "#dc2626"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                width: 16,
+                height: 16,
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Payment failed",
+              current.error ? `: ${current.error}` : ""
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: "mt-2 text-xs text-primary hover:underline",
+          style: {
+            marginTop: "8px",
+            fontSize: "0.75rem",
+            color: c?.primary,
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            textDecoration: "underline",
+            padding: 0
+          },
           onClick: () => {
             onChange({ status: "pending" });
             setClientSecret(void 0);
@@ -140,26 +1425,46 @@ function ProPaymentField(props) {
     ] }) });
   }
   if (intentLoading || mode !== "setup" && mode !== "direct" && !clientSecret) {
-    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Payment" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
-      ] }),
-      amount != null && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "12px"
+          },
+          children: [
+            /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Payment" }),
+            /* @__PURE__ */ jsx("span", { style: badgeStyle, children: provider })
+          ]
+        }
+      ),
+      amount != null && /* @__PURE__ */ jsxs("p", { style: { ...mutedTextStyle, marginBottom: "12px" }, children: [
         "Amount: ",
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: formatCurrency(amount, currency) }),
         config?.description && /* @__PURE__ */ jsxs("span", { children: [
           " \u2014 ",
           config.description
         ] })
       ] }),
       intentError ? /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: intentError }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: c?.error || "#dc2626" }, children: intentError }),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: "mt-2 text-xs text-primary hover:underline",
+            style: {
+              marginTop: "8px",
+              fontSize: "0.75rem",
+              color: c?.primary,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              textDecoration: "underline",
+              padding: 0
+            },
             onClick: () => {
               setIntentError(null);
               setClientSecret(void 0);
@@ -167,54 +1472,78 @@ function ProPaymentField(props) {
             children: "Retry"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+      ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", ...mutedTextStyle }, children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            style: { width: "16px", height: "16px", animation: "spin 1s linear infinite" },
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" })
+          }
+        ),
         /* @__PURE__ */ jsx("span", { children: "Preparing payment..." })
       ] })
     ] }) });
   }
   if (!clientSecret) {
     const waitingForAmount = config?.amountField && !amount;
-    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Payment" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "12px"
+          },
+          children: [
+            /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Payment" }),
+            /* @__PURE__ */ jsx("span", { style: badgeStyle, children: provider })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { style: mutedTextStyle, children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Payment" }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
-    ] }),
-    amount != null && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+  return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "12px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Payment" }),
+          /* @__PURE__ */ jsx("span", { style: badgeStyle, children: provider })
+        ]
+      }
+    ),
+    amount != null && /* @__PURE__ */ jsxs("p", { style: { ...mutedTextStyle, marginBottom: "12px" }, children: [
       "Amount: ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: formatCurrency(amount, currency) }),
       config?.description && /* @__PURE__ */ jsxs("span", { children: [
         " \u2014 ",
         config.description
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      Suspense,
+      PayKitCheckout,
       {
-        fallback: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-4", children: [
-          /* @__PURE__ */ jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
-          "Loading payment form..."
-        ] }),
-        children: /* @__PURE__ */ jsx(
-          PayKitCheckout,
-          {
-            publicKey,
-            clientSecret,
-            amount,
-            currency,
-            disabled: disabled || readonly,
-            onSuccess: handleSuccess,
-            onError: handleError
-          }
-        )
+        publicKey,
+        clientSecret,
+        amount,
+        currency,
+        appearance: resolveAppearance(formTheme),
+        disabled: disabled || readonly,
+        onSuccess: handleSuccess,
+        onError: handleError
       }
     )
   ] }) });
@@ -224,48 +1553,17 @@ function PayKitCheckout({
   clientSecret,
   amount,
   currency,
+  appearance,
   disabled,
   onSuccess,
   onError
 }) {
-  const [PayKit, setPayKit] = useState(null);
-  const [loadError, setLoadError] = useState(null);
-  useEffect(() => {
-    let cancelled = false;
-    Promise.all([
-      import('@squaredr/paykit-react'),
-      // @ts-expect-error — optional peer dep, types not available at build time
-      import('@squaredr/paykit/stripe/client')
-    ]).then(([paykit, stripe]) => {
-      if (cancelled) return;
-      setPayKit({
-        Provider: paykit.PayKitProvider,
-        Form: paykit.CheckoutForm,
-        adapter: new stripe.StripeClientAdapter(publicKey)
-      });
-    }).catch((err) => {
-      if (cancelled) return;
-      setLoadError(
-        `Failed to load payment SDK. Ensure @squaredr/paykit-react and @squaredr/paykit are installed. (${err.message})`
-      );
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [publicKey]);
-  if (loadError) {
-    return /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: loadError });
-  }
-  if (!PayKit) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-2", children: [
-      /* @__PURE__ */ jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
-      "Loading Stripe..."
-    ] });
-  }
-  return /* @__PURE__ */ jsx(PayKit.Provider, { clientAdapter: PayKit.adapter, children: /* @__PURE__ */ jsx(
-    PayKit.Form,
+  const clientAdapter = useMemo(() => new StripeClientAdapter(publicKey), [publicKey]);
+  return /* @__PURE__ */ jsx(PayKitProvider, { clientAdapter, children: /* @__PURE__ */ jsx(
+    CheckoutForm,
     {
       clientSecret,
+      appearance,
       submitLabel: disabled ? "Payment disabled" : `Pay ${formatCurrency(amount, currency)}`,
       onSuccess: (result) => onSuccess(result.chargeId),
       onError: (err) => onError(err.message)
@@ -273,7 +1571,9 @@ function PayKitCheckout({
   ) });
 }
 var PRO_FIELD_OVERRIDES = {
-  payment: ProPaymentField
+  payment: ProPaymentField,
+  file_upload: ProFileUploadField_default,
+  appointment: ProAppointmentField_default
 };
 
 // src/index.ts
@@ -297,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 };