@sonordev/site-kit 1.5.4 → 2.0.0

package/dist/forms/index.js

@@ -1,11 +1,321 @@
 'use client';
 'use strict';
 
-var chunk373TK6TZ_js = require('../chunk-373TK6TZ.js');
 require('../chunk-ZSMWDLMK.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+// src/forms/formsApi.ts
+var config = null;
+function configureFormsApi(options) {
+  config = options;
+}
+function getConfig() {
+  if (config) return config;
+  if (typeof window !== "undefined") {
+    const apiUrl = window.__SITE_KIT_API_URL__;
+    const apiKey = window.__SITE_KIT_API_KEY__;
+    if (apiUrl && apiKey) {
+      return { baseUrl: apiUrl, apiKey };
+    }
+  }
+  throw new Error(
+    "Forms API not configured. Either wrap your app in SiteKitProvider or call configureFormsApi() first."
+  );
+}
+async function apiRequest(method, path, body) {
+  const { baseUrl, apiKey, getAuthToken } = getConfig();
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (apiKey) {
+    headers["x-api-key"] = apiKey;
+  } else if (getAuthToken) {
+    const token = await getAuthToken();
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : void 0
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: response.statusText }));
+    throw new Error(error.message || `API error: ${response.status}`);
+  }
+  if (response.status === 204) {
+    return void 0;
+  }
+  return response.json();
+}
+var formsApi = {
+  /**
+   * List all forms for a project
+   */
+  async list(options = {}) {
+    const params = new URLSearchParams();
+    if (options.projectId) params.set("projectId", options.projectId);
+    if (options.formType) params.set("formType", options.formType);
+    if (options.isActive !== void 0) params.set("isActive", String(options.isActive));
+    if (options.search) params.set("search", options.search);
+    const query = params.toString();
+    const result = await apiRequest("GET", `/forms${query ? `?${query}` : ""}`);
+    return result.data;
+  },
+  /**
+   * Get a single form by ID or slug
+   */
+  async get(idOrSlug) {
+    return apiRequest("GET", `/forms/${idOrSlug}`);
+  },
+  /**
+   * Create a new form
+   */
+  async create(input) {
+    return apiRequest("POST", "/forms", input);
+  },
+  /**
+   * Update an existing form
+   */
+  async update(id, input) {
+    return apiRequest("PUT", `/forms/${id}`, input);
+  },
+  /**
+   * Delete a form
+   */
+  async delete(id) {
+    return apiRequest("DELETE", `/forms/${id}`);
+  },
+  /**
+   * Add a field to an existing form
+   */
+  async addField(formId, field2) {
+    const form = await formsApi.get(formId);
+    const maxSortOrder = Math.max(0, ...(form.fields || []).map((f) => f.sortOrder || 0));
+    return formsApi.update(formId, {
+      fields: [
+        ...form.fields || [],
+        { ...field2, sortOrder: field2.sortOrder ?? maxSortOrder + 1 }
+      ]
+    });
+  },
+  /**
+   * Update a field in an existing form
+   */
+  async updateField(formId, fieldSlug, updates) {
+    const form = await formsApi.get(formId);
+    return formsApi.update(formId, {
+      fields: (form.fields || []).map(
+        (f) => f.slug === fieldSlug ? { ...f, ...updates } : f
+      )
+    });
+  },
+  /**
+   * Remove a field from a form
+   */
+  async removeField(formId, fieldSlug) {
+    const form = await formsApi.get(formId);
+    return formsApi.update(formId, {
+      fields: (form.fields || []).filter((f) => f.slug !== fieldSlug)
+    });
+  },
+  /**
+   * Reorder fields in a form
+   */
+  async reorderFields(formId, fieldSlugs) {
+    const form = await formsApi.get(formId);
+    const fieldsMap = new Map((form.fields || []).map((f) => [f.slug, f]));
+    const orderedFields = fieldSlugs.map((slug, index) => {
+      const field2 = fieldsMap.get(slug);
+      if (!field2) throw new Error(`Field not found: ${slug}`);
+      return { ...field2, sortOrder: index };
+    });
+    return formsApi.update(formId, { fields: orderedFields });
+  },
+  /**
+   * Clone a form
+   */
+  async clone(formId, newSlug, newName) {
+    const form = await formsApi.get(formId);
+    return formsApi.create({
+      projectId: form.projectId,
+      slug: newSlug,
+      name: newName || `${form.name} (Copy)`,
+      description: form.description,
+      formType: form.formType,
+      successMessage: form.successMessage,
+      redirectUrl: form.redirectUrl,
+      notificationEmails: form.notificationEmails,
+      submitButtonText: form.submitButtonText,
+      layout: form.layout,
+      showProgress: form.showProgress,
+      enableSaveDraft: form.enableSaveDraft,
+      isActive: false,
+      // Clone as inactive
+      fields: (form.fields || []).map(({ id, ...field2 }) => field2),
+      // Remove IDs
+      steps: (form.steps || []).map(({ id, ...step }) => step)
+      // Remove IDs
+    });
+  },
+  /**
+   * Activate or deactivate a form
+   */
+  async setActive(formId, isActive) {
+    return formsApi.update(formId, { isActive });
+  },
+  /**
+   * Sync a form definition to the backend
+   * Creates the form if it doesn't exist, updates if it does
+   * Perfect for defining forms in code during development
+   * 
+   * @example
+   * ```tsx
+   * // In your app initialization or form component
+   * await formsApi.sync({
+   *   slug: 'contact',
+   *   name: 'Contact Form',
+   *   formType: 'prospect',
+   *   fields: [
+   *     field.text('name', 'Your Name', { isRequired: true }),
+   *     field.email('email', 'Email Address'),
+   *     field.phone('phone', 'Phone Number'),
+   *     field.textarea('message', 'Message'),
+   *   ]
+   * })
+   * ```
+   */
+  async sync(input) {
+    return apiRequest(
+      "POST",
+      "/api/public/forms/sync",
+      input
+    );
+  },
+  /**
+   * Sync multiple forms at once
+   * Useful for initializing all forms in your app
+   */
+  async syncAll(forms) {
+    return Promise.all(forms.map((form) => formsApi.sync(form)));
+  }
+};
+var field = {
+  text: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "text",
+    ...options
+  }),
+  email: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "email",
+    isRequired: true,
+    ...options
+  }),
+  phone: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "phone",
+    ...options
+  }),
+  textarea: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "textarea",
+    ...options
+  }),
+  select: (slug, label, choices, options) => ({
+    slug,
+    label,
+    fieldType: "select",
+    options: choices,
+    ...options
+  }),
+  radio: (slug, label, choices, options) => ({
+    slug,
+    label,
+    fieldType: "radio",
+    options: choices,
+    ...options
+  }),
+  checkbox: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "checkbox",
+    ...options
+  }),
+  date: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "date",
+    ...options
+  }),
+  number: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "number",
+    ...options
+  }),
+  rating: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "rating",
+    ...options
+  }),
+  file: (slug, label, options) => ({
+    slug,
+    label,
+    fieldType: "file",
+    ...options
+  }),
+  hidden: (slug, defaultValue) => ({
+    slug,
+    label: "",
+    fieldType: "hidden",
+    defaultValue
+  }),
+  heading: (slug, label) => ({
+    slug,
+    label,
+    fieldType: "heading"
+  }),
+  paragraph: (slug, label) => ({
+    slug,
+    label,
+    fieldType: "paragraph"
+  })
+};
+function defineForm(definition) {
+  const fieldsWithOrder = definition.fields.map((f, index) => ({
+    ...f,
+    sortOrder: f.sortOrder ?? index
+  }));
+  return {
+    ...definition,
+    fields: fieldsWithOrder,
+    formType: definition.formType || "contact",
+    successMessage: definition.successMessage || "Thank you for your submission!",
+    submitButtonText: definition.submitButtonText || "Submit",
+    layout: definition.layout || "stacked",
+    isActive: definition.isActive ?? true
+  };
+}
+async function initializeForms(forms) {
+  if (typeof window === "undefined") {
+    console.log(`[Site-Kit] ${forms.length} form(s) ready to sync: ${forms.map((f) => f.slug).join(", ")}`);
+    return;
+  }
+  try {
+    const results = await formsApi.syncAll(forms);
+    const created = results.filter((r) => r.created).length;
+    const updated = results.filter((r) => r.updated).length;
+    console.log(`[Site-Kit] Forms synced: ${created} created, ${updated} updated`);
+  } catch (error) {
+    console.error("[Site-Kit] Failed to sync forms:", error);
+  }
+}
 function useFormTracking({
   formId,
   totalSteps,
@@ -465,7 +775,7 @@ function useForm(formIdOrSlug, options = {}) {
       const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
       const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
       if (!apiKey) {
-        throw new Error("API key is required. Set SONOR_API_KEY (or NEXT_PUBLIC_UPTRADE_API_KEY) in your .env");
+        throw new Error("API key is required. Set SONOR_API_KEY in your .env");
       }
       const honeypotFieldName = form.honeypot_field || "website";
       const recaptchaToken = form.recaptcha_enabled ? await getRecaptchaToken(form.recaptcha_site_key) : null;
@@ -483,7 +793,7 @@ function useForm(formIdOrSlug, options = {}) {
           pageUrl: typeof window !== "undefined" ? window.location.href : null,
           referrer: typeof document !== "undefined" ? document.referrer || null : null,
           userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
-          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null,
+          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
           recaptchaToken: recaptchaToken || void 0,
           utmSource: utm.utm_source,
           utmMedium: utm.utm_medium,
@@ -571,32 +881,32 @@ function normalizeOptions(options) {
   }
   return [];
 }
-function FormField({ field: field2, value, error, onChange, classPrefix = "uptrade-form" }) {
-  const inputId = `uptrade-${field2.id || field2.slug}`;
+function FormField({ field: field2, value, error, onChange, classPrefix = "sk-form" }) {
+  const inputId = `sk-${field2.id || field2.slug}`;
   const options = normalizeOptions(field2.options);
   const baseInputStyle = {
     width: "100%",
-    padding: "var(--uptrade-input-padding, 10px 12px)",
-    fontSize: "var(--uptrade-font-size, 16px)",
-    border: error ? "1px solid var(--uptrade-input-border-error, #ef4444)" : "1px solid var(--uptrade-input-border, #d1d5db)",
-    borderRadius: "var(--uptrade-input-radius, 6px)",
-    backgroundColor: "var(--uptrade-input-bg, #ffffff)",
+    padding: "var(--sk-input-padding, 10px 12px)",
+    fontSize: "var(--sk-font-size, 16px)",
+    border: error ? "1px solid var(--sk-input-border-error, #ef4444)" : "1px solid var(--sk-input-border, #d1d5db)",
+    borderRadius: "var(--sk-input-radius, 6px)",
+    backgroundColor: "var(--sk-input-bg, #ffffff)",
     outline: "none",
     fontFamily: "inherit"
   };
   const labelStyle = {
     display: "block",
     marginBottom: 6,
-    fontWeight: "var(--uptrade-label-weight, 500)",
-    color: "var(--uptrade-label-color, inherit)"
+    fontWeight: "var(--sk-label-weight, 500)",
+    color: "var(--sk-label-color, inherit)"
   };
   const errorStyle = {
-    color: "var(--uptrade-error-color, #ef4444)",
+    color: "var(--sk-error, #ef4444)",
     fontSize: 14,
     marginTop: 4
   };
   const helpStyle = {
-    color: "var(--uptrade-help-color, #6b7280)",
+    color: "var(--sk-text-tertiary, #6b7280)",
     fontSize: 14,
     marginTop: 4
   };
@@ -604,7 +914,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: `${classPrefix}__heading`, style: { margin: "16px 0 8px", fontWeight: 600, fontSize: 18 }, children: field2.label });
   }
   if (field2.field_type === "paragraph") {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${classPrefix}__paragraph`, style: { color: "var(--uptrade-help-color, #6b7280)", margin: "8px 0" }, children: field2.help_text || field2.label });
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${classPrefix}__paragraph`, style: { color: "var(--sk-text-tertiary, #6b7280)", margin: "8px 0" }, children: field2.help_text || field2.label });
   }
   if (field2.field_type === "hidden") {
     return /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: field2.slug, value: String(value || "") });
@@ -614,7 +924,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classPrefix}__field ${classPrefix}__field--${field2.field_type}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: `${classPrefix}__label`, style: { ...labelStyle, ...hideLabel ? { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 } : {} }, children: [
       field2.label,
-      field2.is_required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--uptrade-error-color, #ef4444)" }, children: " *" })
+      field2.is_required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-error, #ef4444)" }, children: " *" })
     ] }),
     ["text", "email", "phone", "tel", "number"].includes(field2.field_type) && /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -790,7 +1100,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
           border: "none",
           fontSize: 24,
           cursor: "pointer",
-          color: value >= star ? "var(--uptrade-rating-active, #fbbf24)" : "var(--uptrade-rating-inactive, #d1d5db)"
+          color: value >= star ? "var(--sk-rating-active, #fbbf24)" : "var(--sk-rating-inactive, #d1d5db)"
         },
         children: "\u2605"
       },
@@ -817,7 +1127,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
   ] });
 }
 function FormClient({
-  config,
+  config: config2,
   className,
   onSuccess,
   onError,
@@ -829,19 +1139,19 @@ function FormClient({
   const [isSubmitting, setIsSubmitting] = react.useState(false);
   const [isComplete, setIsComplete] = react.useState(false);
   const [honeypotValue, setHoneypotValue] = react.useState("");
-  const honeypotFieldName = config.honeypot_field || "website";
+  const honeypotFieldName = config2.honeypot_field || "website";
   const { trackStepChange, trackComplete } = useFormTracking({
-    formId: config.id,
-    totalSteps: config.total_steps
+    formId: config2.id,
+    totalSteps: config2.total_steps
   });
   const currentFields = react.useMemo(() => {
-    if (!config.is_multi_step) {
-      return config.fields || [];
+    if (!config2.is_multi_step) {
+      return config2.fields || [];
     }
-    const currentStepConfig = config.steps?.find((s) => s.step_number === step);
-    if (!currentStepConfig) return config.fields || [];
-    return (config.fields || []).filter((f) => f.step_id === currentStepConfig.id);
-  }, [config, step]);
+    const currentStepConfig = config2.steps?.find((s) => s.step_number === step);
+    if (!currentStepConfig) return config2.fields || [];
+    return (config2.fields || []).filter((f) => f.step_id === currentStepConfig.id);
+  }, [config2, step]);
   const isFieldVisible = react.useCallback((field2) => {
     if (!field2.conditional?.show_when) return true;
     const { field: condField, operator, value } = field2.conditional.show_when;
@@ -923,14 +1233,14 @@ function FormClient({
   }, [errors]);
   const nextStep = react.useCallback(() => {
     if (!validateStep()) return false;
-    if (step < config.total_steps) {
+    if (step < config2.total_steps) {
       const newStep = step + 1;
       setStep(newStep);
       trackStepChange(newStep);
       return true;
     }
     return false;
-  }, [step, config.total_steps, validateStep, trackStepChange]);
+  }, [step, config2.total_steps, validateStep, trackStepChange]);
   const prevStep = react.useCallback(() => {
     if (step > 1) {
       const newStep = step - 1;
@@ -939,11 +1249,11 @@ function FormClient({
     }
   }, [step, trackStepChange]);
   const goToStep = react.useCallback((targetStep) => {
-    if (targetStep >= 1 && targetStep <= config.total_steps) {
+    if (targetStep >= 1 && targetStep <= config2.total_steps) {
       setStep(targetStep);
       trackStepChange(targetStep);
     }
-  }, [config.total_steps, trackStepChange]);
+  }, [config2.total_steps, trackStepChange]);
   const submit = react.useCallback(async () => {
     if (!validateStep()) return;
     setIsSubmitting(true);
@@ -951,27 +1261,27 @@ function FormClient({
       const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
       const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
       if (!apiKey) {
-        throw new Error("API key is required. Set SONOR_API_KEY (or NEXT_PUBLIC_UPTRADE_API_KEY) in your .env");
+        throw new Error("API key is required. Set SONOR_API_KEY in your .env");
       }
-      const recaptchaToken = config.recaptcha_enabled ? await getRecaptchaToken(config.recaptcha_site_key) : null;
-      if (config.recaptcha_enabled && !recaptchaToken) {
+      const recaptchaToken = config2.recaptcha_enabled ? await getRecaptchaToken(config2.recaptcha_site_key) : null;
+      if (config2.recaptcha_enabled && !recaptchaToken) {
         throw new Error("reCAPTCHA is required but could not be initialized.");
       }
       const utm = getUTMParams2();
       const submission = {
-        form_id: config.id,
-        project_id: config.project_id,
+        form_id: config2.id,
+        project_id: config2.project_id,
         data: {
           ...values,
-          ...config.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
+          ...config2.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
         },
-        routing_type: config.form_type,
+        routing_type: config2.form_type,
         status: "new",
         metadata: {
           pageUrl: typeof window !== "undefined" ? window.location.href : null,
           referrer: typeof document !== "undefined" ? document.referrer || null : null,
           userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
-          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null,
+          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
           recaptchaToken: recaptchaToken || void 0,
           utmSource: utm.utm_source,
           utmMedium: utm.utm_medium,
@@ -994,8 +1304,8 @@ function FormClient({
       trackComplete();
       setIsComplete(true);
       onSuccess?.(data);
-      if (config.redirect_url) {
-        window.location.href = config.redirect_url;
+      if (config2.redirect_url) {
+        window.location.href = config2.redirect_url;
       }
     } catch (error) {
       console.error("[Forms] Submission error:", error);
@@ -1003,15 +1313,15 @@ function FormClient({
     } finally {
       setIsSubmitting(false);
     }
-  }, [config, honeypotFieldName, honeypotValue, values, validateStep, trackComplete, onSuccess, onError]);
+  }, [config2, honeypotFieldName, honeypotValue, values, validateStep, trackComplete, onSuccess, onError]);
   const progress = react.useMemo(() => {
-    return Math.round(step / config.total_steps * 100);
-  }, [step, config.total_steps]);
+    return Math.round(step / config2.total_steps * 100);
+  }, [step, config2.total_steps]);
   const renderProps = {
-    config,
+    config: config2,
     fields: currentFields,
     step,
-    totalSteps: config.total_steps,
+    totalSteps: config2.total_steps,
     values,
     errors,
     isSubmitting,
@@ -1024,7 +1334,7 @@ function FormClient({
     isFieldVisible
   };
   if (isComplete) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: config.success_message }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: config2.success_message }) });
   }
   if (customRender) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: customRender(renderProps) });
@@ -1032,44 +1342,44 @@ function FormClient({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
-      className: `uptrade-form ${className || ""}`,
+      className: `sk-form ${className || ""}`,
       onSubmit: (e) => {
         e.preventDefault();
-        if (step < config.total_steps) {
+        if (step < config2.total_steps) {
           nextStep();
         } else {
           submit();
         }
       },
       children: [
-        config.is_multi_step && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "uptrade-form__progress", style: { marginBottom: 20 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "uptrade-form__progress-header", style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "uptrade-form__progress-step", children: [
+        config2.is_multi_step && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__progress", style: { marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__progress-header", style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sk-form__progress-step", children: [
               "Step ",
               step,
               " of ",
-              config.total_steps
+              config2.total_steps
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "uptrade-form__progress-percent", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sk-form__progress-percent", children: [
               progress,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "uptrade-form__progress-track", style: {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__progress-track", style: {
             height: 4,
-            backgroundColor: "var(--uptrade-progress-bg, #e5e7eb)",
+            backgroundColor: "var(--sk-progress-bg, #e5e7eb)",
             borderRadius: 2,
             overflow: "hidden"
-          }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "uptrade-form__progress-bar", style: {
+          }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__progress-bar", style: {
             width: `${progress}%`,
             height: "100%",
-            backgroundColor: "var(--uptrade-progress-fill, #3b82f6)",
+            backgroundColor: "var(--sk-progress-fill, #3b82f6)",
             transition: "width 0.3s ease"
           } }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "uptrade-form__fields", children: currentFields.map((field2) => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__fields", children: currentFields.map((field2) => {
           if (!isFieldVisible(field2)) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `uptrade-form__field-wrapper uptrade-form__field-wrapper--${field2.width || "full"}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `sk-form__field-wrapper sk-form__field-wrapper--${field2.width || "full"}`, children: /* @__PURE__ */ jsxRuntime.jsx(
             FormField,
             {
               field: field2,
@@ -1079,15 +1389,15 @@ function FormClient({
             }
           ) }, field2.id);
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "uptrade-form__actions", style: {
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__actions", style: {
           display: "flex",
           justifyContent: step > 1 ? "space-between" : "flex-end",
           marginTop: 24
         }, children: [
-          step > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "uptrade-form__btn uptrade-form__btn--back", onClick: prevStep, children: "Back" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "uptrade-form__btn uptrade-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config.total_steps ? "Next" : config.submit_button_text })
+          step > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config2.total_steps ? "Next" : config2.submit_button_text })
         ] }),
-        config.honeypot_enabled && /* @__PURE__ */ jsxRuntime.jsx(
+        config2.honeypot_enabled && /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             type: "text",
@@ -1158,29 +1468,14 @@ function ManagedForm({
   );
 }
 
-Object.defineProperty(exports, "configureFormsApi", {
-  enumerable: true,
-  get: function () { return chunk373TK6TZ_js.configureFormsApi; }
-});
-Object.defineProperty(exports, "defineForm", {
-  enumerable: true,
-  get: function () { return chunk373TK6TZ_js.defineForm; }
-});
-Object.defineProperty(exports, "field", {
-  enumerable: true,
-  get: function () { return chunk373TK6TZ_js.field; }
-});
-Object.defineProperty(exports, "formsApi", {
-  enumerable: true,
-  get: function () { return chunk373TK6TZ_js.formsApi; }
-});
-Object.defineProperty(exports, "initializeForms", {
-  enumerable: true,
-  get: function () { return chunk373TK6TZ_js.initializeForms; }
-});
 exports.FormClient = FormClient;
 exports.FormFieldComponent = FormField;
 exports.ManagedForm = ManagedForm;
+exports.configureFormsApi = configureFormsApi;
+exports.defineForm = defineForm;
+exports.field = field;
+exports.formsApi = formsApi;
+exports.initializeForms = initializeForms;
 exports.useForm = useForm;
 exports.useFormTracking = useFormTracking;
 //# sourceMappingURL=index.js.map