@squaredr/fieldcraft-pro 1.7.0 → 1.8.0

package/dist/index.mjs

@@ -1,28 +1,116 @@
-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-GXKQCXIB.mjs';
+export { ResponseViewer } from './chunk-MLP5EDWP.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-IW654Z3M.mjs';
+export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from './chunk-CYXJGOQH.mjs';
 export { FieldCraftProProvider, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense } from './chunk-4MMKB2EW.mjs';
-import { useState, useEffect, Suspense } from 'react';
+import { useState, 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.8.0";
+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
+  } = props;
   const config = field.config;
   const current = value ?? { status: "pending" };
   const provider = config?.provider ?? "stripe";
@@ -44,31 +132,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 || "#e2e8f0"}`,
+    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 +217,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 +231,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 +332,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 +379,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 +460,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)

package/dist/response-viewer/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { FormEngineSchema, FormResponse } from '@squaredr/fieldcraft-core';
+import { FormResponse, FormEngineSchema } from '@squaredr/fieldcraft-core';
 
 type FieldRenderer = (field: ResponseField, response: FormResponse) => React.ReactNode;
 type ResponseViewerProps = {

package/dist/response-viewer/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { FormEngineSchema, FormResponse } from '@squaredr/fieldcraft-core';
+import { FormResponse, FormEngineSchema } from '@squaredr/fieldcraft-core';
 
 type FieldRenderer = (field: ResponseField, response: FormResponse) => React.ReactNode;
 type ResponseViewerProps = {