@omnikit-js/ui 0.9.46 → 0.9.48

package/dist/chunk-LIZKLYHH.js

@@ -0,0 +1,2205 @@
+import { BillingContent, PaymentForm } from './chunk-SRPYYSJZ.js';
+import { Alert, Table, Card, Button } from '@marcoschwartz/lite-ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/lib/omnikit-client.ts
+var OmniKitClient = class {
+  constructor(config) {
+    this.baseUrl = config.baseUrl.replace(/\/$/, "");
+    this.apiKey = config.apiKey;
+    this.jwt = config.jwt;
+  }
+  getHeaders() {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.jwt) {
+      headers["Authorization"] = `Bearer ${this.jwt}`;
+    } else if (this.apiKey) {
+      headers["X-API-Key"] = this.apiKey;
+    }
+    return headers;
+  }
+  async request(endpoint, options) {
+    const url = `${this.baseUrl}${endpoint}`;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        ...this.getHeaders(),
+        ...options?.headers
+      }
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Request failed" }));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+  /**
+   * Query records from a table
+   */
+  async query(table, options) {
+    const params = new URLSearchParams();
+    if (options?.filter) {
+      params.append("filter", JSON.stringify(options.filter));
+    }
+    if (options?.sort) {
+      params.append("sort", options.sort);
+    }
+    if (options?.limit) {
+      params.append("limit", options.limit.toString());
+    }
+    if (options?.offset) {
+      params.append("offset", options.offset.toString());
+    }
+    const queryString = params.toString();
+    const endpoint = `/data/${table}${queryString ? `?${queryString}` : ""}`;
+    return this.request(endpoint);
+  }
+  /**
+   * Find a record by ID
+   */
+  async findById(table, id) {
+    return this.request(`/data/${table}/${id}`);
+  }
+  /**
+   * Insert a new record
+   */
+  async insert(table, data) {
+    return this.request(`/data/${table}`, {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  /**
+   * Update an existing record
+   */
+  async update(table, id, data) {
+    return this.request(`/data/${table}/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(data)
+    });
+  }
+  /**
+   * Delete a record
+   */
+  async delete(table, id) {
+    return this.request(`/data/${table}/${id}`, {
+      method: "DELETE"
+    });
+  }
+  /**
+   * Upsert a record (insert or update)
+   */
+  async upsert(table, data) {
+    return this.request(`/data/${table}`, {
+      method: "PUT",
+      body: JSON.stringify(data)
+    });
+  }
+};
+function createOmniKitClient(config) {
+  return new OmniKitClient(config);
+}
+function normalizeColumn(column) {
+  if (typeof column === "string") {
+    return {
+      key: column,
+      label: column.charAt(0).toUpperCase() + column.slice(1).replace(/_/g, " "),
+      sortable: true
+    };
+  }
+  return {
+    ...column,
+    label: column.label || column.key.charAt(0).toUpperCase() + column.key.slice(1).replace(/_/g, " ")
+  };
+}
+async function DataList({
+  table,
+  baseUrl,
+  apiKey,
+  jwt,
+  columns,
+  keyField = "id",
+  filter,
+  sort,
+  limit,
+  offset,
+  className = "",
+  emptyMessage = "No data found",
+  errorMessage = "Failed to load data"
+}) {
+  const client = createOmniKitClient({ baseUrl, apiKey, jwt });
+  let data = [];
+  let error = null;
+  try {
+    const response = await client.query(table, {
+      filter,
+      sort,
+      limit,
+      offset
+    });
+    if (response.success) {
+      data = response.data;
+    } else {
+      error = response.error || errorMessage;
+    }
+  } catch (err) {
+    error = err instanceof Error ? err.message : errorMessage;
+  }
+  const normalizedColumns = columns.map(normalizeColumn);
+  const processedData = data.map((row) => {
+    const processedRow = { ...row };
+    normalizedColumns.forEach((col) => {
+      if (col.render) {
+        const value = col.key.split(".").reduce((obj, k) => obj?.[k], row);
+        processedRow[`__rendered_${col.key}`] = col.render(value, row);
+      }
+    });
+    return processedRow;
+  });
+  const tableColumns = normalizedColumns.map((col) => ({
+    key: col.render ? `__rendered_${col.key}` : col.key,
+    title: col.label || col.key
+  }));
+  if (error) {
+    return /* @__PURE__ */ jsxs(Alert, { variant: "error", className, children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: error })
+    ] });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Alert, { variant: "info", className, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columns: tableColumns,
+      data: processedData,
+      keyField: String(keyField),
+      hoverable: true,
+      responsive: true,
+      className
+    }
+  );
+}
+
+// src/components/server/Billing/client.ts
+function createHeaders(config) {
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (config.accessToken) {
+    headers["Authorization"] = `Bearer ${config.accessToken}`;
+  }
+  if (config.apiKey) {
+    headers["X-API-Key"] = config.apiKey;
+  }
+  return headers;
+}
+async function fetchAPI(config, url, options = {}) {
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        ...createHeaders(config),
+        ...options.headers
+      },
+      // Prevent infinite re-fetching in Next.js
+      cache: "no-store"
+    });
+    if (!response.ok) {
+      try {
+        const errorData = await response.json();
+        return {
+          success: false,
+          error: errorData.error || `HTTP ${response.status}: ${response.statusText}`
+        };
+      } catch {
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+    }
+    const contentType = response.headers.get("content-type");
+    if (!contentType || !contentType.includes("application/json")) {
+      return {
+        success: false,
+        error: "Invalid response: expected JSON"
+      };
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "API request failed"
+    };
+  }
+}
+async function getOrCreateCustomer(config, userId, organizationId, email, name, testMode = true) {
+  const { baseUrl, projectId } = config;
+  const customerData = await fetchAPI(
+    config,
+    `${baseUrl}/billing/customers/by-user/${userId}?project_id=${projectId}`
+  );
+  if (customerData.success && customerData.data) {
+    return customerData;
+  }
+  const createData = await fetchAPI(
+    config,
+    `${baseUrl}/billing/customers`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        project_id: projectId,
+        user_id: userId,
+        organization_id: organizationId,
+        email,
+        name,
+        test_mode: testMode,
+        sync_to_stripe: true
+      })
+    }
+  );
+  return createData;
+}
+async function fetchUserData(config, userId) {
+  const { baseUrl } = config;
+  return fetchAPI(
+    config,
+    `${baseUrl}/data/users/${userId}`
+  );
+}
+async function fetchBillingData(props) {
+  const {
+    baseUrl,
+    apiKey,
+    accessToken,
+    projectId,
+    userId,
+    organizationId,
+    userEmail,
+    userName,
+    testMode = true
+  } = props;
+  const config = { baseUrl, apiKey, accessToken, projectId };
+  try {
+    let email = userEmail;
+    let name = userName;
+    let orgId = organizationId;
+    if (!email) {
+      const userResult = await fetchUserData(config, userId);
+      if (userResult.success && userResult.data) {
+        email = userResult.data.email;
+        name = name || userResult.data.full_name || userResult.data.display_name;
+        orgId = orgId || userResult.data.organization_id;
+      } else {
+        return { success: false, error: userResult.error || "User not found. Please provide userEmail." };
+      }
+    }
+    const finalOrgId = orgId || 1;
+    const customerResult = await getOrCreateCustomer(
+      config,
+      userId,
+      finalOrgId,
+      email,
+      name,
+      testMode
+    );
+    if (!customerResult.success || !customerResult.data) {
+      return { success: false, error: customerResult.error || "Failed to get customer" };
+    }
+    const customer = customerResult.data;
+    const customerId = customer.id;
+    const [
+      subsData,
+      productsData,
+      pricesData,
+      entitlementsData,
+      invoicesData,
+      pmData,
+      usageData
+    ] = await Promise.all([
+      fetchAPI(config, `${baseUrl}/billing/subscriptions?project_id=${projectId}&customer_id=${customerId}&status=active&include_items=true`),
+      fetchAPI(config, `${baseUrl}/billing/products?project_id=${projectId}&limit=100&include_prices=false`),
+      fetchAPI(config, `${baseUrl}/billing/products/prices?project_id=${projectId}&limit=1000`),
+      fetchAPI(config, `${baseUrl}/billing/entitlements/list-entitlements?project_id=${projectId}&customer_id=${customerId}`),
+      fetchAPI(config, `${baseUrl}/billing/invoices?project_id=${projectId}&customer_id=${customerId}&limit=10&sort=due_date:desc&include_line_items=true`),
+      fetchAPI(config, `${baseUrl}/billing/customers/${customerId}/payment-methods?project_id=${projectId}&status=active`),
+      fetchAPI(config, `${baseUrl}/billing/usage/get-all?project_id=${projectId}&customer_id=${customerId}`)
+    ]);
+    const currentSubscription = subsData.success && subsData.data && subsData.data.length > 0 ? subsData.data[0] : null;
+    const products = productsData.success && productsData.data ? productsData.data : [];
+    const allPrices = pricesData.success && pricesData.data ? pricesData.data : [];
+    const entitlements = entitlementsData.success && entitlementsData.data ? entitlementsData.data : [];
+    const invoices = invoicesData.success && invoicesData.data ? invoicesData.data : [];
+    const paymentMethods = pmData.success && pmData.data ? pmData.data : [];
+    const featureUsage = usageData.success && usageData.data ? usageData.data : {};
+    const pricesByProduct = {};
+    allPrices.forEach((price) => {
+      if (!pricesByProduct[price.product_id]) {
+        pricesByProduct[price.product_id] = [];
+      }
+      pricesByProduct[price.product_id].push(price);
+    });
+    products.forEach((product) => {
+      product.prices = pricesByProduct[product.id] || [];
+    });
+    const productFeatures = {};
+    await Promise.all(
+      products.map(async (product) => {
+        const featuresData = await fetchAPI(
+          config,
+          `${baseUrl}/billing/features/product/${product.id}?project_id=${projectId}&limit=100`
+        );
+        productFeatures[product.id] = featuresData.success && featuresData.data ? featuresData.data : [];
+      })
+    );
+    const billingData = {
+      customer,
+      currentSubscription,
+      products,
+      productFeatures,
+      entitlements,
+      invoices,
+      paymentMethods,
+      featureUsage
+    };
+    return { success: true, data: billingData };
+  } catch (error) {
+    console.error("Error fetching billing data:", error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Failed to fetch billing data"
+    };
+  }
+}
+async function fetchProject(config) {
+  const { baseUrl, projectId } = config;
+  return fetchAPI(
+    config,
+    `${baseUrl}/data/projects/${projectId}`
+  );
+}
+async function fetchTaxInfo(config, customerId, referenceAmount = 1e4) {
+  const { baseUrl, projectId } = config;
+  return fetchAPI(
+    config,
+    `${baseUrl}/billing/tax/calculate`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        project_id: projectId,
+        customer_id: customerId,
+        amount: referenceAmount,
+        product_type: "digital"
+      })
+    }
+  );
+}
+async function Billing(props) {
+  const {
+    className = "",
+    errorMessage = "Failed to load billing information"
+  } = props;
+  const result = await fetchBillingData(props);
+  if (!result.success || !result.data) {
+    return /* @__PURE__ */ jsxs(Alert, { variant: "error", className, children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: result.error || errorMessage })
+    ] });
+  }
+  const { data } = result;
+  const apiConfig = {
+    baseUrl: props.baseUrl,
+    apiKey: props.apiKey,
+    accessToken: props.accessToken,
+    projectId: props.projectId
+  };
+  let initialTaxInfo = null;
+  if (data.customer?.id) {
+    const taxResult = await fetchTaxInfo(apiConfig, data.customer.id, 1e4);
+    if (taxResult.success && taxResult.data) {
+      initialTaxInfo = taxResult.data;
+    }
+  }
+  let businessName;
+  const projectResult = await fetchProject(apiConfig);
+  if (projectResult.success && projectResult.data?.name) {
+    businessName = projectResult.data.name;
+  }
+  const currentSubscriptionPriceId = data.currentSubscription?.items?.[0]?.price_id;
+  const currentPlan = currentSubscriptionPriceId ? data.products.find((p) => p.prices?.some((price) => price.id === currentSubscriptionPriceId)) : null;
+  const currentPrice = currentPlan?.prices?.find((p) => p.id === currentSubscriptionPriceId);
+  const subscription = data.currentSubscription ? {
+    id: data.currentSubscription.id,
+    plan: currentPlan?.name || "Unknown Plan",
+    status: data.currentSubscription.status,
+    price: formatCurrency(
+      currentPrice?.unit_amount || currentPrice?.amount || 0,
+      data.currentSubscription.currency
+    ),
+    period: currentPrice?.recurring_interval || "month",
+    nextBilling: formatDate(data.currentSubscription.current_period_end),
+    cancelAtPeriodEnd: data.currentSubscription.cancel_at_period_end
+  } : null;
+  const invoices = data.invoices.map((inv) => ({
+    id: inv.number || inv.uuid,
+    date: formatDate(inv.due_date || inv.created_at),
+    amount: formatCurrency(inv.total || inv.amount_due, inv.currency),
+    status: inv.status,
+    url: inv.pdf_url || "#"
+  }));
+  const plans = data.products.filter((p) => p.active && p.prices && p.prices.length > 0).map((product) => {
+    const price = product.prices?.find((p) => p.active) || product.prices?.[0];
+    const features = data.productFeatures[product.id] || [];
+    const isCurrentPlan = currentSubscriptionPriceId ? product.prices?.some((p) => p.id === currentSubscriptionPriceId) : false;
+    const priceAmount = price?.unit_amount || 0;
+    return {
+      id: product.id,
+      priceId: price?.id || 0,
+      name: product.name,
+      description: product.description,
+      price: formatCurrency(priceAmount, price?.currency || "usd"),
+      priceAmount,
+      // Raw amount in cents for sorting
+      period: price?.recurring_interval || "month",
+      features: features.map((f) => {
+        const featureName = f.feature_name || f.feature_key || "Feature";
+        const featureValue = typeof f.value === "object" && f.value !== null && "value" in f.value ? f.value.value : f.value;
+        const featureUnit = f.feature_unit || "";
+        if (featureValue === true) {
+          return featureName;
+        }
+        if (featureValue === false) {
+          return null;
+        }
+        if (typeof featureValue === "number" && featureValue === -1) {
+          return `Unlimited ${featureUnit || featureName.toLowerCase()}`;
+        }
+        if (typeof featureValue === "number") {
+          const formattedValue = featureValue.toLocaleString();
+          return `${formattedValue} ${featureUnit || featureName.toLowerCase()}`;
+        }
+        if (typeof featureValue === "string" && featureValue) {
+          return `${featureName}: ${featureValue}`;
+        }
+        return featureName;
+      }).filter(Boolean),
+      current: isCurrentPlan || false,
+      popular: product.name.toLowerCase().includes("pro") || product.name.toLowerCase().includes("professional")
+    };
+  }).sort((a, b) => a.priceAmount - b.priceAmount);
+  return /* @__PURE__ */ jsx(
+    BillingContent,
+    {
+      subscription,
+      invoices,
+      paymentMethods: data.paymentMethods,
+      plans,
+      customer: data.customer,
+      entitlements: data.entitlements,
+      featureUsage: data.featureUsage,
+      actionConfig: apiConfig,
+      initialTaxInfo,
+      businessName,
+      className
+    }
+  );
+}
+function formatCurrency(amount, currency = "usd") {
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currency.toUpperCase()
+  });
+  return formatter.format(amount / 100);
+}
+function formatDate(dateString) {
+  if (!dateString) return "N/A";
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+}
+var MOCK_CART = {
+  items: [
+    {
+      id: "item_001",
+      product: {
+        id: "prod_001",
+        name: "Wireless Bluetooth Headphones",
+        slug: "wireless-bluetooth-headphones",
+        description: "Premium noise-cancelling headphones",
+        price: 149.99,
+        compareAtPrice: 199.99,
+        images: ["/placeholder-product.jpg"],
+        sku: "WBH-001",
+        category: "Electronics",
+        inStock: true,
+        stockQuantity: 50
+      },
+      quantity: 1,
+      price: 149.99
+    },
+    {
+      id: "item_002",
+      product: {
+        id: "prod_002",
+        name: "USB-C Charging Cable (2-Pack)",
+        slug: "usb-c-charging-cable-2pack",
+        description: "Fast charging braided cables",
+        price: 24.99,
+        images: ["/placeholder-product.jpg"],
+        sku: "USBC-002",
+        category: "Accessories",
+        inStock: true,
+        stockQuantity: 200
+      },
+      quantity: 2,
+      price: 24.99
+    },
+    {
+      id: "item_003",
+      product: {
+        id: "prod_003",
+        name: "Laptop Stand - Aluminum",
+        slug: "laptop-stand-aluminum",
+        description: "Ergonomic adjustable laptop stand",
+        price: 79.99,
+        images: ["/placeholder-product.jpg"],
+        sku: "LS-003",
+        category: "Office",
+        inStock: true,
+        stockQuantity: 30
+      },
+      quantity: 1,
+      price: 79.99
+    }
+  ],
+  itemCount: 4,
+  subtotal: 279.96,
+  tax: 22.4,
+  discount: 0,
+  total: 302.36,
+  createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+};
+function LinkButton({ href, children, variant = "primary", size = "md", className = "" }) {
+  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantStyles = variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500" : "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300";
+  const sizeStyles = size === "sm" ? "px-3 py-1.5 text-sm" : size === "lg" ? "px-6 py-3 text-base" : "px-4 py-2 text-sm";
+  return /* @__PURE__ */ jsx("a", { href, className: `${baseStyles} ${variantStyles} ${sizeStyles} ${className}`, children });
+}
+async function Cart({
+  // API config - will be used when connected to real API
+  baseUrl: _baseUrl,
+  apiKey: _apiKey,
+  accessToken: _accessToken,
+  projectId: _projectId,
+  userId: _userId,
+  cartId: _cartId,
+  // Display options
+  showImages = true,
+  showQuantityControls = true,
+  showRemoveButton = true,
+  continueShoppingUrl = "/products",
+  checkoutUrl = "/checkout",
+  currencySymbol = "$",
+  emptyMessage = "Your cart is empty",
+  emptyActionText = "Continue Shopping",
+  emptyActionUrl = "/products",
+  className = ""
+}) {
+  const cart = MOCK_CART;
+  if (!cart || cart.items.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: `text-center py-12 ${className}`, children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx("svg", { className: "mx-auto h-16 w-16 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: emptyMessage }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-6", children: "Add some items to get started" }),
+      /* @__PURE__ */ jsx(LinkButton, { href: emptyActionUrl, children: emptyActionText })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("h1", { className: "text-2xl font-bold text-gray-900", children: [
+        "Shopping Cart (",
+        cart.itemCount,
+        " ",
+        "items",
+        ")"
+      ] }),
+      continueShoppingUrl && /* @__PURE__ */ jsx("a", { href: continueShoppingUrl, className: "text-sm text-blue-600 hover:text-blue-800", children: "Continue Shopping" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "lg:col-span-2 space-y-4", children: cart.items.map((item) => /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        showImages && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-24 h-24 bg-gray-100 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.product.images[0] || "/placeholder-product.jpg",
+            alt: item.product.name,
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-base font-medium text-gray-900 truncate", children: /* @__PURE__ */ jsx("a", { href: `/products/${item.product.slug}`, className: "hover:text-blue-600", children: item.product.name }) }),
+              item.product.sku && /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+                "SKU: ",
+                item.product.sku
+              ] }),
+              item.variant && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: Object.entries(item.variant.attributes).map(([key, value]) => `${key}: ${value}`).join(", ") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-base font-semibold text-gray-900", children: [
+                currencySymbol,
+                (item.price * item.quantity).toFixed(2)
+              ] }),
+              item.quantity > 1 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+                currencySymbol,
+                item.price.toFixed(2),
+                " each"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
+            showQuantityControls ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "w-8 h-8 flex items-center justify-center rounded-md border border-gray-300 bg-white text-gray-600 hover:bg-gray-50",
+                  "aria-label": "Decrease quantity",
+                  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: "M20 12H4" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "w-12 text-center text-sm font-medium", children: item.quantity }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "w-8 h-8 flex items-center justify-center rounded-md border border-gray-300 bg-white text-gray-600 hover:bg-gray-50",
+                  "aria-label": "Increase quantity",
+                  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: "M12 4v16m8-8H4" }) })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600", children: [
+              "Qty: ",
+              item.quantity
+            ] }),
+            showRemoveButton && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-sm text-red-600 hover:text-red-800",
+                children: "Remove"
+              }
+            )
+          ] })
+        ] })
+      ] }) }, item.id)) }),
+      /* @__PURE__ */ jsx("div", { className: "lg:col-span-1", children: /* @__PURE__ */ jsxs(Card, { className: "p-6 sticky top-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Order Summary" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Subtotal" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+              currencySymbol,
+              cart.subtotal.toFixed(2)
+            ] })
+          ] }),
+          cart.discount > 0,
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Shipping" }),
+            /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: "Free"  })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Tax" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+              currencySymbol,
+              cart.tax.toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border-t pt-3 mt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: "Total" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xl font-bold text-gray-900", children: [
+              currencySymbol,
+              cart.total.toFixed(2)
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Coupon code",
+              className: "flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Apply" })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(LinkButton, { href: checkoutUrl, className: "w-full", size: "lg", children: "Proceed to Checkout" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 pt-6 border-t", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 text-gray-400", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" }) }),
+            /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 text-center mt-2", children: "Secure checkout with SSL encryption" })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+var MOCK_CART2 = {
+  items: [
+    {
+      id: "item_001",
+      product: {
+        id: "prod_001",
+        name: "Wireless Bluetooth Headphones",
+        slug: "wireless-bluetooth-headphones",
+        price: 149.99,
+        images: ["/placeholder-product.jpg"],
+        inStock: true
+      },
+      quantity: 1,
+      price: 149.99
+    },
+    {
+      id: "item_002",
+      product: {
+        id: "prod_002",
+        name: "USB-C Charging Cable",
+        slug: "usb-c-charging-cable",
+        price: 24.99,
+        images: ["/placeholder-product.jpg"],
+        inStock: true
+      },
+      quantity: 2,
+      price: 24.99
+    }
+  ],
+  itemCount: 3,
+  subtotal: 199.97,
+  shipping: 0,
+  total: 215.97,
+  createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+};
+function LinkButton2({ href, children, variant = "primary", size = "md", className = "" }) {
+  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantStyles = variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500" : "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300";
+  const sizeStyles = size === "sm" ? "px-3 py-1.5 text-sm" : size === "lg" ? "px-6 py-3 text-base" : "px-4 py-2 text-sm";
+  return /* @__PURE__ */ jsx("a", { href, className: `${baseStyles} ${variantStyles} ${sizeStyles} ${className}`, children });
+}
+async function CartSummary({
+  // API config - will be used when connected to real API
+  baseUrl: _baseUrl,
+  apiKey: _apiKey,
+  accessToken: _accessToken,
+  projectId: _projectId,
+  userId: _userId,
+  cartId: _cartId,
+  // Display options
+  variant = "compact",
+  showBadge = true,
+  showTotal = true,
+  cartUrl = "/cart",
+  checkoutUrl = "/checkout",
+  currencySymbol = "$",
+  className = ""
+}) {
+  const cart = MOCK_CART2;
+  if (variant === "mini") {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: cartUrl,
+        className: `relative inline-flex items-center justify-center p-2 text-gray-600 hover:text-gray-900 ${className}`,
+        children: [
+          /* @__PURE__ */ jsx("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: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+            }
+          ) }),
+          showBadge && cart.itemCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center text-xs font-bold text-white bg-blue-600 rounded-full", children: cart.itemCount })
+        ]
+      }
+    );
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: cartUrl,
+        className: `inline-flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100 transition-colors ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+              }
+            ) }),
+            showBadge && cart.itemCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-2 -right-2 w-4 h-4 flex items-center justify-center text-[10px] font-bold text-white bg-blue-600 rounded-full", children: cart.itemCount })
+          ] }),
+          showTotal && cart.total > 0 && /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            currencySymbol,
+            cart.total.toFixed(2)
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: `p-4 w-80 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-gray-900", children: [
+        "Cart (",
+        cart.itemCount,
+        " ",
+        "items",
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("a", { href: cartUrl, className: "text-xs text-blue-600 hover:text-blue-800", children: "View All" })
+    ] }),
+    cart.items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 text-center py-4", children: "Your cart is empty" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-3 mb-4", children: cart.items.slice(0, 3).map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-gray-100 rounded-md overflow-hidden flex-shrink-0", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.product.images[0] || "/placeholder-product.jpg",
+            alt: item.product.name,
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: item.product.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+            "Qty: ",
+            item.quantity,
+            " \xD7 ",
+            currencySymbol,
+            item.price.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-900", children: [
+          currencySymbol,
+          (item.price * item.quantity).toFixed(2)
+        ] })
+      ] }, item.id)) }),
+      cart.items.length > 3 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 text-center mb-4", children: [
+        "+",
+        cart.items.length - 3,
+        " more ",
+        cart.items.length - 3 === 1 ? "item" : "items"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-t pt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Subtotal" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+            currencySymbol,
+            cart.subtotal.toFixed(2)
+          ] })
+        ] }),
+        cart.shipping > 0,
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm font-semibold", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: "Total" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+            currencySymbol,
+            cart.total.toFixed(2)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsx(LinkButton2, { href: checkoutUrl, className: "w-full", size: "sm", children: "Checkout" }),
+        /* @__PURE__ */ jsx(LinkButton2, { href: cartUrl, variant: "secondary", className: "w-full", size: "sm", children: "View Cart" })
+      ] })
+    ] })
+  ] });
+}
+var MOCK_CART3 = {
+  items: [
+    {
+      id: "item_001",
+      product: {
+        id: "prod_001",
+        name: "Wireless Bluetooth Headphones",
+        slug: "wireless-bluetooth-headphones",
+        price: 149.99,
+        images: ["/placeholder-product.jpg"],
+        inStock: true
+      },
+      quantity: 1,
+      price: 149.99
+    },
+    {
+      id: "item_002",
+      product: {
+        id: "prod_002",
+        name: "USB-C Charging Cable (2-Pack)",
+        slug: "usb-c-charging-cable",
+        price: 24.99,
+        images: ["/placeholder-product.jpg"],
+        inStock: true
+      },
+      quantity: 2,
+      price: 24.99
+    }
+  ],
+  subtotal: 199.97,
+  tax: 16,
+  shipping: 9.99,
+  discount: 0,
+  total: 225.96,
+  createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+};
+var MOCK_ADDRESSES = [
+  {
+    id: "addr_001",
+    firstName: "John",
+    lastName: "Doe",
+    address1: "123 Main Street",
+    address2: "Apt 4B",
+    city: "New York",
+    state: "NY",
+    postalCode: "10001",
+    country: "US",
+    phone: "+1 (555) 123-4567",
+    isDefault: true
+  }
+];
+var MOCK_SHIPPING_METHODS = [
+  {
+    id: "ship_001",
+    name: "Standard Shipping",
+    description: "Delivered in 5-7 business days",
+    price: 9.99,
+    estimatedDays: "5-7 business days",
+    carrier: "USPS"
+  },
+  {
+    id: "ship_002",
+    name: "Express Shipping",
+    description: "Delivered in 2-3 business days",
+    price: 19.99,
+    estimatedDays: "2-3 business days",
+    carrier: "FedEx"
+  },
+  {
+    id: "ship_003",
+    name: "Next Day Delivery",
+    description: "Delivered by tomorrow",
+    price: 34.99,
+    estimatedDays: "1 business day",
+    carrier: "UPS"
+  }
+];
+var DEFAULT_COUNTRIES = [
+  { code: "US", name: "United States" },
+  { code: "CA", name: "Canada" },
+  { code: "GB", name: "United Kingdom" },
+  { code: "DE", name: "Germany" },
+  { code: "FR", name: "France" },
+  { code: "AU", name: "Australia" }
+];
+var CHECKOUT_STEPS = [
+  { id: "shipping", title: "Shipping", description: "Enter your address", completed: false, active: true },
+  { id: "delivery", title: "Delivery", description: "Choose shipping method", completed: false, active: false },
+  { id: "payment", title: "Payment", description: "Enter payment details", completed: false, active: false },
+  { id: "review", title: "Review", description: "Confirm your order", completed: false, active: false }
+];
+function LinkButton3({ href, children, variant = "primary", size = "md", className = "" }) {
+  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantStyles = variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500" : "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300";
+  const sizeStyles = size === "sm" ? "px-3 py-1.5 text-sm" : size === "lg" ? "px-6 py-3 text-base" : "px-4 py-2 text-sm";
+  return /* @__PURE__ */ jsx("a", { href, className: `${baseStyles} ${variantStyles} ${sizeStyles} ${className}`, children });
+}
+async function Checkout({
+  // API config - will be used when connected to real API
+  baseUrl: _baseUrl,
+  apiKey: _apiKey,
+  accessToken: _accessToken,
+  projectId: _projectId,
+  userId: _userId,
+  cartId: _cartId,
+  // Display options
+  step = 1,
+  showOrderSummary = true,
+  showStepIndicator = true,
+  successUrl: _successUrl = "/order-confirmation",
+  cancelUrl = "/cart",
+  currencySymbol = "$",
+  shippingMethods,
+  savedAddresses,
+  allowGuestCheckout: _allowGuestCheckout = true,
+  requirePhone = false,
+  countries = DEFAULT_COUNTRIES,
+  className = ""
+}) {
+  const cart = MOCK_CART3;
+  const addresses = savedAddresses || MOCK_ADDRESSES;
+  const shipping = shippingMethods || MOCK_SHIPPING_METHODS;
+  const steps = CHECKOUT_STEPS.map((s, i) => ({
+    ...s,
+    completed: i < step - 1,
+    active: i === step - 1
+  }));
+  if (!cart || cart.items.length === 0) {
+    return /* @__PURE__ */ jsxs(Alert, { variant: "warning", className, children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Your cart is empty" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: "Add some items before checking out." }),
+      /* @__PURE__ */ jsx(LinkButton3, { href: cancelUrl, variant: "secondary", size: "sm", className: "mt-3", children: "Return to Cart" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-6 ${className}`, children: [
+    showStepIndicator && /* @__PURE__ */ jsx("nav", { "aria-label": "Checkout progress", className: "mb-8", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center justify-between", children: steps.map((s, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `
+                      flex items-center justify-center w-10 h-10 rounded-full text-sm font-semibold
+                      ${s.completed ? "bg-green-500 text-white" : s.active ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500"}
+                    `,
+            children: s.completed ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ml-3 hidden sm:block", children: [
+          /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${s.active ? "text-blue-600" : "text-gray-900"}`, children: s.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: s.description })
+        ] })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `w-12 sm:w-24 h-0.5 mx-2 sm:mx-4 ${s.completed ? "bg-green-500" : "bg-gray-200"}` })
+    ] }, s.id)) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
+        step === 1 && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-6", children: "Shipping Address" }),
+          addresses.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700 mb-3", children: "Saved Addresses" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: addresses.map((addr) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "flex items-start gap-3 p-4 border rounded-lg cursor-pointer hover:border-blue-500 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "radio",
+                      name: "address",
+                      value: addr.id,
+                      defaultChecked: addr.isDefault,
+                      className: "mt-1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-900", children: [
+                      addr.firstName,
+                      " ",
+                      addr.lastName
+                    ] }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+                      addr.address1,
+                      addr.address2 && `, ${addr.address2}`
+                    ] }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+                      addr.city,
+                      ", ",
+                      addr.state,
+                      " ",
+                      addr.postalCode
+                    ] }),
+                    addr.phone && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: addr.phone })
+                  ] })
+                ]
+              },
+              addr.id
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700 mb-3", children: addresses.length > 0 ? "Or enter a new address" : "Enter your address" }),
+            /* @__PURE__ */ jsxs("form", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "First Name" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "John"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Last Name" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "Doe"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Address" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                    placeholder: "123 Main Street"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Apartment, suite, etc. (optional)" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                    placeholder: "Apt 4B"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "col-span-2 sm:col-span-1", children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "City" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "New York"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "State" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "NY"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "ZIP Code" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "10001"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Country" }),
+                /* @__PURE__ */ jsx("select", { className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", children: countries.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.name }, c.code)) })
+              ] }),
+              requirePhone && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Phone Number" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "tel",
+                    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                    placeholder: "+1 (555) 123-4567"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-between", children: [
+            /* @__PURE__ */ jsx(LinkButton3, { href: cancelUrl, variant: "secondary", children: "Back to Cart" }),
+            /* @__PURE__ */ jsx(Button, { children: "Continue to Delivery" })
+          ] })
+        ] }),
+        step === 2 && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-6", children: "Delivery Method" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: shipping.map((method, index) => /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "flex items-center justify-between p-4 border rounded-lg cursor-pointer hover:border-blue-500 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "radio",
+                      name: "shipping",
+                      value: method.id,
+                      defaultChecked: index === 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: method.name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: method.description }),
+                    method.carrier && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+                      "via ",
+                      method.carrier
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-gray-900", children: method.price === 0 ? "Free" : `${currencySymbol}${method.price.toFixed(2)}` })
+              ]
+            },
+            method.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-between", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Back" }),
+            /* @__PURE__ */ jsx(Button, { children: "Continue to Payment" })
+          ] })
+        ] }),
+        step === 3 && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-6", children: "Payment Method" }),
+          /* @__PURE__ */ jsxs("form", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 p-4 border rounded-lg cursor-pointer hover:border-blue-500 border-blue-500 bg-blue-50", children: [
+                /* @__PURE__ */ jsx("input", { type: "radio", name: "payment_type", value: "card", defaultChecked: true }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-gray-600", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Credit / Debit Card" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 p-4 border rounded-lg cursor-pointer hover:border-blue-500", children: [
+                /* @__PURE__ */ jsx("input", { type: "radio", name: "payment_type", value: "paypal" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", viewBox: "0 0 24 24", fill: "#003087", children: /* @__PURE__ */ jsx("path", { d: "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106z" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "PayPal" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Card Number" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                    placeholder: "1234 5678 9012 3456"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Name on Card" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                    placeholder: "John Doe"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Expiry Date" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "MM/YY"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "CVC" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      placeholder: "123"
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", defaultChecked: true }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: "Billing address same as shipping" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-between", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Back" }),
+            /* @__PURE__ */ jsx(Button, { children: "Review Order" })
+          ] })
+        ] }),
+        step === 4 && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-6", children: "Review Your Order" }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-6 p-4 bg-gray-50 rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Shipping Address" }),
+              /* @__PURE__ */ jsx("button", { className: "text-sm text-blue-600 hover:text-blue-800", children: "Edit" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+              "John Doe",
+              /* @__PURE__ */ jsx("br", {}),
+              "123 Main Street, Apt 4B",
+              /* @__PURE__ */ jsx("br", {}),
+              "New York, NY 10001",
+              /* @__PURE__ */ jsx("br", {}),
+              "United States"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-6 p-4 bg-gray-50 rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Delivery Method" }),
+              /* @__PURE__ */ jsx("button", { className: "text-sm text-blue-600 hover:text-blue-800", children: "Edit" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+              "Standard Shipping - ",
+              currencySymbol,
+              "9.99",
+              /* @__PURE__ */ jsx("br", {}),
+              "Estimated delivery: 5-7 business days"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-6 p-4 bg-gray-50 rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Payment Method" }),
+              /* @__PURE__ */ jsx("button", { className: "text-sm text-blue-600 hover:text-blue-800", children: "Edit" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+              "Credit Card ending in 3456",
+              /* @__PURE__ */ jsx("br", {}),
+              "Expires 12/25"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 mb-3", children: "Order Items" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: cart.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-3 border-b last:border-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-md overflow-hidden", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: item.product.images[0] || "/placeholder-product.jpg",
+                  alt: item.product.name,
+                  className: "w-full h-full object-cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: item.product.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+                  "Qty: ",
+                  item.quantity
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-900", children: [
+                currencySymbol,
+                (item.price * item.quantity).toFixed(2)
+              ] })
+            ] }, item.id)) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", className: "mt-1" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600", children: [
+              "I agree to the",
+              " ",
+              /* @__PURE__ */ jsx("a", { href: "/terms", className: "text-blue-600 hover:text-blue-800", children: "Terms of Service" }),
+              " ",
+              "and",
+              " ",
+              /* @__PURE__ */ jsx("a", { href: "/privacy", className: "text-blue-600 hover:text-blue-800", children: "Privacy Policy" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Back" }),
+            /* @__PURE__ */ jsxs(Button, { size: "lg", children: [
+              "Place Order - ",
+              currencySymbol,
+              cart.total.toFixed(2)
+            ] })
+          ] })
+        ] })
+      ] }),
+      showOrderSummary && /* @__PURE__ */ jsx("div", { className: "lg:col-span-1", children: /* @__PURE__ */ jsxs(Card, { className: "p-6 sticky top-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Order Summary" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3 mb-4", children: cart.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-12 h-12 bg-gray-100 rounded-md overflow-hidden flex-shrink-0", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.product.images[0] || "/placeholder-product.jpg",
+                alt: item.product.name,
+                className: "w-full h-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center text-xs font-bold text-white bg-gray-600 rounded-full", children: item.quantity })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: item.product.name }) }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-900", children: [
+            currencySymbol,
+            (item.price * item.quantity).toFixed(2)
+          ] })
+        ] }, item.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "border-t pt-4 space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Subtotal" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+              currencySymbol,
+              cart.subtotal.toFixed(2)
+            ] })
+          ] }),
+          cart.discount > 0,
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Shipping" }),
+            /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: `${currencySymbol}${cart.shipping.toFixed(2)}` })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Tax" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+              currencySymbol,
+              cart.tax.toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border-t pt-3 mt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: "Total" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xl font-bold text-gray-900", children: [
+              currencySymbol,
+              cart.total.toFixed(2)
+            ] })
+          ] }) })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+var MOCK_ORDER = {
+  orderNumber: "ORD-2024-001234",
+  email: "john.doe@example.com",
+  status: "processing",
+  items: [
+    {
+      id: "item_001",
+      product: {
+        id: "prod_001",
+        name: "Wireless Bluetooth Headphones",
+        slug: "wireless-bluetooth-headphones",
+        price: 149.99,
+        images: ["/placeholder-product.jpg"],
+        inStock: true
+      },
+      quantity: 1,
+      price: 149.99
+    },
+    {
+      id: "item_002",
+      product: {
+        id: "prod_002",
+        name: "USB-C Charging Cable (2-Pack)",
+        slug: "usb-c-charging-cable",
+        price: 24.99,
+        images: ["/placeholder-product.jpg"],
+        inStock: true
+      },
+      quantity: 2,
+      price: 24.99
+    }
+  ],
+  subtotal: 199.97,
+  tax: 16,
+  shipping: 9.99,
+  discount: 0,
+  total: 225.96,
+  shippingAddress: {
+    firstName: "John",
+    lastName: "Doe",
+    address1: "123 Main Street",
+    address2: "Apt 4B",
+    city: "New York",
+    state: "NY",
+    postalCode: "10001",
+    country: "US",
+    phone: "+1 (555) 123-4567"
+  },
+  billingAddress: {
+    firstName: "John",
+    lastName: "Doe",
+    address1: "123 Main Street",
+    address2: "Apt 4B",
+    city: "New York",
+    state: "NY",
+    postalCode: "10001",
+    country: "US"
+  },
+  shippingMethod: {
+    name: "Standard Shipping",
+    estimatedDays: "5-7 business days",
+    carrier: "USPS"
+  },
+  paymentMethod: {
+    last4: "3456",
+    brand: "Visa",
+    expiryMonth: 12,
+    expiryYear: 2025
+  },
+  trackingNumber: "9400111899223456789012",
+  trackingUrl: "https://tools.usps.com/go/TrackConfirmAction?tLabels=9400111899223456789012",
+  createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+};
+var STATUS_CONFIG = {
+  pending: { label: "Pending", color: "text-yellow-600 bg-yellow-100" },
+  processing: { label: "Processing", color: "text-blue-600 bg-blue-100" },
+  shipped: { label: "Shipped", color: "text-purple-600 bg-purple-100" },
+  delivered: { label: "Delivered", color: "text-green-600 bg-green-100" },
+  cancelled: { label: "Cancelled", color: "text-red-600 bg-red-100" },
+  refunded: { label: "Refunded", color: "text-gray-600 bg-gray-100" }
+};
+function LinkButton4({ href, children, variant = "primary", size = "md", className = "", target, rel }) {
+  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantStyles = variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500" : "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300";
+  const sizeStyles = size === "sm" ? "px-3 py-1.5 text-sm" : size === "lg" ? "px-6 py-3 text-base" : "px-4 py-2 text-sm";
+  return /* @__PURE__ */ jsx("a", { href, className: `${baseStyles} ${variantStyles} ${sizeStyles} ${className}`, target, rel, children });
+}
+async function OrderConfirmation({
+  // API config - will be used when connected to real API
+  baseUrl: _baseUrl,
+  apiKey: _apiKey,
+  accessToken: _accessToken,
+  projectId: _projectId,
+  // Required props
+  orderId,
+  // Display options
+  showItems = true,
+  showShippingAddress = true,
+  showBillingAddress = false,
+  showPaymentMethod = true,
+  showTimeline = true,
+  continueShoppingUrl = "/products",
+  trackOrderUrl,
+  currencySymbol = "$",
+  className = ""
+}) {
+  const order = MOCK_ORDER;
+  if (!order) {
+    return /* @__PURE__ */ jsxs(Alert, { variant: "error", className, children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Order not found" }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm", children: [
+        "We couldn't find an order with ID: ",
+        orderId
+      ] }),
+      /* @__PURE__ */ jsx(LinkButton4, { href: continueShoppingUrl, variant: "secondary", size: "sm", className: "mt-3", children: "Continue Shopping" })
+    ] });
+  }
+  const statusConfig = STATUS_CONFIG[order.status];
+  return /* @__PURE__ */ jsxs("div", { className: `max-w-3xl mx-auto space-y-8 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }),
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Thank you for your order!" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-gray-600", children: [
+        "Your order ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: order.orderNumber }),
+        " has been placed successfully."
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-1", children: [
+        "A confirmation email has been sent to ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: order.email })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Order Status" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+            "Order #",
+            order.orderNumber
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `px-3 py-1 text-sm font-medium rounded-full ${statusConfig.color}`, children: statusConfig.label })
+      ] }),
+      showTimeline && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: ["Order Placed", "Processing", "Shipped", "Delivered"].map((step, index) => {
+          const isCompleted = index <= ["pending", "processing", "shipped", "delivered"].indexOf(order.status);
+          const isCurrent = index === ["pending", "processing", "shipped", "delivered"].indexOf(order.status);
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center flex-1", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `
+                        w-10 h-10 rounded-full flex items-center justify-center z-10
+                        ${isCompleted ? "bg-green-500 text-white" : "bg-gray-200 text-gray-500"}
+                        ${isCurrent ? "ring-4 ring-green-100" : ""}
+                      `,
+                children: isCompleted ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: index + 1 })
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: `mt-2 text-xs font-medium ${isCompleted ? "text-green-600" : "text-gray-500"}`, children: step })
+          ] }, step);
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-5 left-0 right-0 h-0.5 bg-gray-200 -z-0", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full bg-green-500 transition-all",
+            style: {
+              width: `${["pending", "processing", "shipped", "delivered"].indexOf(order.status) / 3 * 100}%`
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 p-4 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: "Tracking Number" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 font-mono", children: order.trackingNumber })
+        ] }),
+        /* @__PURE__ */ jsx(LinkButton4, { href: order.trackingUrl, target: "_blank", rel: "noopener noreferrer", size: "sm", children: "Track Package" })
+      ] }) })
+    ] }),
+    showItems && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Order Items" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: order.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-3 border-b last:border-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-md overflow-hidden flex-shrink-0", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.product.images[0] || "/placeholder-product.jpg",
+            alt: item.product.name,
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: item.product.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+            "Qty: ",
+            item.quantity
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-900", children: [
+          currencySymbol,
+          (item.price * item.quantity).toFixed(2)
+        ] })
+      ] }, item.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 pt-4 border-t space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Subtotal" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+            currencySymbol,
+            order.subtotal.toFixed(2)
+          ] })
+        ] }),
+        order.discount > 0,
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Shipping" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+            currencySymbol,
+            order.shipping.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Tax" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+            currencySymbol,
+            order.tax.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-base font-semibold pt-2 border-t", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: "Total" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-900", children: [
+            currencySymbol,
+            order.total.toFixed(2)
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      showShippingAddress && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Shipping Address" }),
+        /* @__PURE__ */ jsxs("address", { className: "text-sm text-gray-600 not-italic", children: [
+          order.shippingAddress.firstName,
+          " ",
+          order.shippingAddress.lastName,
+          /* @__PURE__ */ jsx("br", {}),
+          order.shippingAddress.address1,
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            order.shippingAddress.address2,
+            /* @__PURE__ */ jsx("br", {})
+          ] }),
+          order.shippingAddress.city,
+          ", ",
+          order.shippingAddress.state,
+          " ",
+          order.shippingAddress.postalCode,
+          /* @__PURE__ */ jsx("br", {}),
+          order.shippingAddress.country,
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: order.shippingAddress.phone })
+          ] })
+        ] })
+      ] }),
+      showBillingAddress && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Billing Address" }),
+        /* @__PURE__ */ jsxs("address", { className: "text-sm text-gray-600 not-italic", children: [
+          order.billingAddress.firstName,
+          " ",
+          order.billingAddress.lastName,
+          /* @__PURE__ */ jsx("br", {}),
+          order.billingAddress.address1,
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            order.billingAddress.address2,
+            /* @__PURE__ */ jsx("br", {})
+          ] }),
+          order.billingAddress.city,
+          ", ",
+          order.billingAddress.state,
+          " ",
+          order.billingAddress.postalCode,
+          /* @__PURE__ */ jsx("br", {}),
+          order.billingAddress.country
+        ] })
+      ] }),
+      showPaymentMethod && /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Payment Method" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-10 h-6 bg-gray-100 rounded flex items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { className: "w-8 h-4 text-gray-600", fill: "currentColor", viewBox: "0 0 32 16", children: [
+            /* @__PURE__ */ jsx("rect", { width: "32", height: "16", rx: "2", fill: "#1A1F71" }),
+            /* @__PURE__ */ jsx("text", { x: "6", y: "12", fontSize: "8", fill: "white", fontFamily: "Arial, sans-serif", fontWeight: "bold", children: "VISA" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-900", children: [
+              order.paymentMethod.brand,
+              " ending in ",
+              order.paymentMethod.last4
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+              "Expires ",
+              order.paymentMethod.expiryMonth,
+              "/",
+              order.paymentMethod.expiryYear
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Delivery Method" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900", children: order.shippingMethod.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+            order.shippingMethod.estimatedDays,
+            ` via ${order.shippingMethod.carrier}`
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [
+      /* @__PURE__ */ jsx(LinkButton4, { href: continueShoppingUrl, variant: "secondary", size: "lg", children: "Continue Shopping" }),
+      trackOrderUrl && /* @__PURE__ */ jsx(LinkButton4, { href: trackOrderUrl, size: "lg", children: "View Order Details" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-gray-500", children: /* @__PURE__ */ jsxs("p", { children: [
+      "Need help?",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: "/contact", className: "text-blue-600 hover:text-blue-800", children: "Contact our support team" })
+    ] }) })
+  ] });
+}
+
+// src/components/server/Payment/client.ts
+function createHeaders2(config) {
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (config.accessToken) {
+    headers["Authorization"] = `Bearer ${config.accessToken}`;
+  }
+  if (config.apiKey) {
+    headers["X-API-Key"] = config.apiKey;
+  }
+  return headers;
+}
+async function fetchAPI2(config, url, options = {}) {
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        ...createHeaders2(config),
+        ...options.headers
+      },
+      cache: "no-store"
+    });
+    if (!response.ok) {
+      try {
+        const errorData = await response.json();
+        return {
+          success: false,
+          error: errorData.error || `HTTP ${response.status}: ${response.statusText}`
+        };
+      } catch {
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+    }
+    const contentType = response.headers.get("content-type");
+    if (!contentType || !contentType.includes("application/json")) {
+      return {
+        success: false,
+        error: "Invalid response: expected JSON"
+      };
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "API request failed"
+    };
+  }
+}
+async function fetchProducts(config, productIds) {
+  const { baseUrl } = config;
+  try {
+    const productFilter = productIds.length === 1 ? { id: productIds[0] } : { id: { operator: "in", value: productIds } };
+    const productsResult = await fetchAPI2(
+      config,
+      `${baseUrl}/data/products?filter=${encodeURIComponent(JSON.stringify(productFilter))}`
+    );
+    if (!productsResult.success || !productsResult.data || productsResult.data.length === 0) {
+      return { success: false, error: productsResult.error || "No products found" };
+    }
+    const rawProducts = productsResult.data;
+    const numericProductIds = rawProducts.map((p) => p.id);
+    const priceFilter = {
+      product_id: { operator: "in", value: numericProductIds },
+      active: true
+    };
+    const pricesResult = await fetchAPI2(
+      config,
+      `${baseUrl}/data/prices?filter=${encodeURIComponent(JSON.stringify(priceFilter))}&limit=200`
+    );
+    const rawPrices = pricesResult.success ? pricesResult.data || [] : [];
+    const priceMap = /* @__PURE__ */ new Map();
+    for (const price of rawPrices) {
+      if (!priceMap.has(price.product_id)) {
+        priceMap.set(price.product_id, price);
+      }
+    }
+    const products = rawProducts.map((product) => {
+      const price = priceMap.get(product.id);
+      return {
+        id: String(product.id),
+        name: product.name,
+        description: product.description,
+        price: price ? price.unit_amount / 100 : 0,
+        type: price?.type === "recurring" ? "subscription" : "one-time",
+        interval: price?.interval
+      };
+    });
+    return { success: true, data: products };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Failed to fetch products"
+    };
+  }
+}
+async function getCustomerByUserId(config, userId) {
+  const { baseUrl, projectId } = config;
+  return fetchAPI2(
+    config,
+    `${baseUrl}/billing/customers/by-user/${userId}?project_id=${projectId}`
+  );
+}
+async function getPaymentMethods(config, customerId) {
+  const { baseUrl, projectId } = config;
+  return fetchAPI2(
+    config,
+    `${baseUrl}/billing/customers/${customerId}/payment-methods?project_id=${projectId}&status=active`
+  );
+}
+async function fetchPaymentConfig(config) {
+  const { baseUrl, projectId } = config;
+  return fetchAPI2(
+    config,
+    `${baseUrl}/billing/payment-config?project_id=${projectId}&test_mode=true`
+  );
+}
+var MOCK_PRODUCTS = {
+  "prod_pro": {
+    id: "prod_pro",
+    name: "Pro Plan",
+    description: "Unlock all premium features and priority support",
+    price: 29.99,
+    type: "subscription",
+    interval: "month",
+    image: "/placeholder-product.jpg",
+    features: [
+      "Unlimited projects",
+      "Priority support",
+      "Advanced analytics",
+      "Custom integrations",
+      "Team collaboration"
+    ]
+  },
+  "prod_starter": {
+    id: "prod_starter",
+    name: "Starter Plan",
+    description: "Perfect for getting started",
+    price: 9.99,
+    type: "subscription",
+    interval: "month",
+    image: "/placeholder-product.jpg",
+    features: [
+      "5 projects",
+      "Email support",
+      "Basic analytics"
+    ]
+  },
+  "prod_lifetime": {
+    id: "prod_lifetime",
+    name: "Lifetime Access",
+    description: "One-time payment, forever access",
+    price: 299.99,
+    type: "one-time",
+    image: "/placeholder-product.jpg",
+    features: [
+      "All Pro features",
+      "Lifetime updates",
+      "Priority support forever"
+    ]
+  }
+};
+async function Payment({
+  // API config
+  baseUrl,
+  apiKey,
+  accessToken,
+  projectId,
+  userId,
+  // Product options
+  productId,
+  productIds: productIdsProp,
+  product: productProp,
+  quantity = 1,
+  email: _email,
+  successUrl = "/success",
+  cancelUrl,
+  currencySymbol = "$",
+  showImage = true,
+  showFeatures = true,
+  submitText: _submitText,
+  showSecurityBadges = true,
+  allowPromoCode = true,
+  sellerName,
+  sellerLogo,
+  termsUrl,
+  privacyUrl,
+  className = "",
+  layout = "two-column"
+}) {
+  const productIds = productIdsProp || (productId ? [productId] : []);
+  const apiConfig = {
+    baseUrl,
+    apiKey,
+    accessToken,
+    projectId
+  };
+  let products = [];
+  if (productProp) {
+    products = [productProp];
+  } else if (productIds.length > 0 && baseUrl) {
+    try {
+      const result = await fetchProducts(apiConfig, productIds);
+      if (result.success && result.data) {
+        products = result.data;
+      }
+    } catch (error) {
+      console.error("Failed to fetch products:", error);
+      products = productIds.map((id) => MOCK_PRODUCTS[id]).filter(Boolean);
+    }
+  } else if (productIds.length > 0) {
+    products = productIds.map((id) => MOCK_PRODUCTS[id]).filter(Boolean);
+  }
+  if (products.length === 0) {
+    products = [MOCK_PRODUCTS["prod_pro"]];
+  }
+  let customer = null;
+  let paymentMethods = [];
+  let stripePublishableKey = null;
+  if (baseUrl && projectId) {
+    const configResult = await fetchPaymentConfig(apiConfig);
+    if (configResult.success && configResult.data?.public_key) {
+      stripePublishableKey = configResult.data.public_key;
+    }
+    if (userId) {
+      const customerResult = await getCustomerByUserId(apiConfig, userId);
+      if (customerResult.success && customerResult.data) {
+        customer = customerResult.data;
+        const pmResult = await getPaymentMethods(apiConfig, customer.id);
+        if (pmResult.success && pmResult.data) {
+          paymentMethods = pmResult.data;
+        }
+      }
+    }
+  }
+  const subtotal = products.reduce((sum, p) => sum + p.price * quantity, 0);
+  const total = subtotal;
+  const isMultiProduct = products.length > 1;
+  const primaryProduct = products[0];
+  const ProductSection = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    (sellerLogo || sellerName) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      sellerLogo && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: sellerLogo,
+          alt: sellerName || "Seller",
+          className: "h-8"
+        }
+      ),
+      sellerName && /* @__PURE__ */ jsx("span", { className: "text-lg font-medium text-gray-900 dark:text-white", children: sellerName })
+    ] }),
+    !isMultiProduct && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        showImage && primaryProduct.image && /* @__PURE__ */ jsx("div", { className: "w-full h-48 bg-gray-100 dark:bg-neutral-800 rounded-xl overflow-hidden mb-4", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: primaryProduct.image,
+            alt: primaryProduct.name,
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: primaryProduct.name }),
+        primaryProduct.description && /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-1", children: primaryProduct.description }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-4xl font-bold text-gray-900 dark:text-white", children: [
+            currencySymbol,
+            primaryProduct.price.toFixed(2)
+          ] }),
+          primaryProduct.type === "subscription" && primaryProduct.interval && /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400 text-lg ml-1", children: [
+            "/",
+            primaryProduct.interval
+          ] }),
+          quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400 text-sm ml-2", children: [
+            "x ",
+            quantity
+          ] })
+        ] })
+      ] }),
+      showFeatures && primaryProduct.features && primaryProduct.features.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-6 border-t border-gray-200 dark:border-neutral-700", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white mb-3", children: "What's included" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: primaryProduct.features.map((feature, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400", children: [
+          /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-500 flex-shrink-0 mt-0.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+          feature
+        ] }, index)) })
+      ] })
+    ] }),
+    isMultiProduct && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Order Summary" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: products.map((product) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-start p-3 bg-gray-50 dark:bg-neutral-800 rounded-lg", children: [
+        showImage && product.image && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 bg-gray-200 dark:bg-neutral-700 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: product.image,
+            alt: product.name,
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: product.name }),
+          product.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: product.description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+          /* @__PURE__ */ jsxs("p", { className: "font-semibold text-gray-900 dark:text-white", children: [
+            currencySymbol,
+            product.price.toFixed(2)
+          ] }),
+          product.type === "subscription" && product.interval && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            "/",
+            product.interval
+          ] })
+        ] })
+      ] }, product.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t border-gray-200 dark:border-neutral-700 flex justify-between items-center", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Total" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: [
+          currencySymbol,
+          total.toFixed(2)
+        ] })
+      ] })
+    ] }),
+    showSecurityBadges && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-400 dark:text-gray-500 text-sm", children: [
+      /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) }),
+      /* @__PURE__ */ jsx("span", { children: "Secure payment powered by Stripe" })
+    ] })
+  ] });
+  const FormSection = () => /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-xl border border-gray-200 dark:border-neutral-800 p-6 lg:p-8", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-6", children: "Payment Details" }),
+    /* @__PURE__ */ jsx(
+      PaymentForm,
+      {
+        products,
+        customerId: customer?.id || null,
+        paymentMethods,
+        stripePublishableKey,
+        actionConfig: apiConfig,
+        quantity,
+        currencySymbol,
+        successUrl,
+        cancelUrl,
+        allowPromoCode,
+        termsUrl,
+        privacyUrl
+      }
+    )
+  ] });
+  if (layout === "two-column") {
+    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-gray-50 dark:bg-neutral-950 ${className}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-6xl mx-auto px-4 py-8 lg:py-12", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16", children: [
+      /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-8 lg:self-start", children: /* @__PURE__ */ jsx(ProductSection, {}) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(FormSection, {}),
+        /* @__PURE__ */ jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsx("a", { href: "/", className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "Return to site" }) })
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-gray-50 dark:bg-neutral-950 py-8 px-4 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-lg mx-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-xl border border-gray-200 dark:border-neutral-800 overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-6 border-b border-gray-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx(ProductSection, {}) }),
+      /* @__PURE__ */ jsx("div", { className: "p-6 bg-gray-50 dark:bg-neutral-800", children: /* @__PURE__ */ jsx(
+        PaymentForm,
+        {
+          products,
+          customerId: customer?.id || null,
+          paymentMethods,
+          stripePublishableKey,
+          actionConfig: apiConfig,
+          quantity,
+          currencySymbol,
+          successUrl,
+          cancelUrl,
+          allowPromoCode,
+          termsUrl,
+          privacyUrl
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsx("a", { href: "/", className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "Return to site" }) })
+  ] }) });
+}
+
+export { Billing, Cart, CartSummary, Checkout, DataList, OmniKitClient, OrderConfirmation, Payment, createOmniKitClient };
+//# sourceMappingURL=chunk-LIZKLYHH.js.map
+//# sourceMappingURL=chunk-LIZKLYHH.js.map