@anpayeras/agnostic-checkout 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1622 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Checkout: () => Checkout,
+  checkoutThemes: () => checkoutThemes,
+  cn: () => cn,
+  createCartEditPlugin: () => createCartEditPlugin,
+  createCssVars: () => createCssVars,
+  createDiscountPlugin: () => createDiscountPlugin,
+  darken: () => darken,
+  defaultTheme: () => defaultTheme,
+  formatNumber: () => formatNumber,
+  generateBrandTheme: () => generateBrandTheme,
+  getContrastColor: () => getContrastColor,
+  getLuminance: () => getLuminance,
+  hexToRgb: () => hexToRgb,
+  isDark: () => isDark,
+  isPaymentStep: () => isPaymentStep,
+  isReviewStep: () => isReviewStep,
+  lighten: () => lighten,
+  mergeTheme: () => mergeTheme,
+  mix: () => mix,
+  resolveTheme: () => resolveTheme,
+  rgbToHex: () => rgbToHex,
+  useCheckout: () => useCheckout
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/color-utils.ts
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16)
+  };
+}
+function rgbToHex({ r, g, b }) {
+  const toHex = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function getLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(
+    (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  );
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastColor(hex) {
+  return getLuminance(hex) > 0.179 ? "#000000" : "#FFFFFF";
+}
+function isDark(hex) {
+  return getLuminance(hex) < 0.179;
+}
+function darken(hex, amount) {
+  const rgb = hexToRgb(hex);
+  const factor = 1 - amount / 100;
+  return rgbToHex({
+    r: rgb.r * factor,
+    g: rgb.g * factor,
+    b: rgb.b * factor
+  });
+}
+function lighten(hex, amount) {
+  const rgb = hexToRgb(hex);
+  const factor = amount / 100;
+  return rgbToHex({
+    r: rgb.r + (255 - rgb.r) * factor,
+    g: rgb.g + (255 - rgb.g) * factor,
+    b: rgb.b + (255 - rgb.b) * factor
+  });
+}
+function mix(hex1, hex2, ratio) {
+  const c1 = hexToRgb(hex1);
+  const c2 = hexToRgb(hex2);
+  return rgbToHex({
+    r: c1.r + (c2.r - c1.r) * ratio,
+    g: c1.g + (c2.g - c1.g) * ratio,
+    b: c1.b + (c2.b - c1.b) * ratio
+  });
+}
+
+// src/theme/tokens.ts
+var light = {
+  colors: {
+    primary: "#6366f1",
+    background: "#f8fafc",
+    surface: "#ffffff",
+    text: "#0f172a",
+    border: "#e2e8f0",
+    success: "#22c55e",
+    error: "#ef4444"
+  },
+  radius: "0.75rem",
+  fontFamily: "Inter, system-ui, sans-serif"
+};
+var dark = {
+  colors: {
+    primary: "#818cf8",
+    background: "#0f172a",
+    surface: "#1e293b",
+    text: "#f1f5f9",
+    border: "#334155",
+    success: "#34d399",
+    error: "#fb7185"
+  },
+  radius: "0.75rem",
+  fontFamily: "Inter, system-ui, sans-serif"
+};
+var minimal = {
+  colors: {
+    primary: "#0f172a",
+    background: "#ffffff",
+    surface: "#ffffff",
+    text: "#0f172a",
+    border: "#e5e7eb",
+    success: "#059669",
+    error: "#dc2626"
+  },
+  radius: "0.375rem",
+  fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
+};
+var corporate = {
+  colors: {
+    primary: "#1d4ed8",
+    background: "#f0f4f8",
+    surface: "#ffffff",
+    text: "#1e293b",
+    border: "#cbd5e1",
+    success: "#16a34a",
+    error: "#dc2626"
+  },
+  radius: "0.5rem",
+  fontFamily: "'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
+};
+var neon = {
+  colors: {
+    primary: "#a855f7",
+    background: "#0a0a0a",
+    surface: "#171717",
+    text: "#fafafa",
+    border: "#2e2e2e",
+    success: "#22d3ee",
+    error: "#f43f5e"
+  },
+  radius: "1rem",
+  fontFamily: "'Space Grotesk', system-ui, sans-serif"
+};
+var checkoutThemes = {
+  light,
+  dark,
+  minimal,
+  corporate,
+  neon
+};
+var defaultTheme = light;
+function mergeTheme(base, overrides) {
+  if (!overrides) return base;
+  return {
+    colors: { ...base.colors, ...overrides.colors },
+    radius: overrides.radius ?? base.radius,
+    fontFamily: overrides.fontFamily ?? base.fontFamily
+  };
+}
+function createCssVars(theme) {
+  return {
+    "--color-primary": theme.colors.primary,
+    "--color-background": theme.colors.background,
+    "--color-surface": theme.colors.surface,
+    "--color-text": theme.colors.text,
+    "--color-border": theme.colors.border,
+    "--color-success": theme.colors.success,
+    "--color-error": theme.colors.error,
+    "--theme-radius": theme.radius,
+    "--theme-font": theme.fontFamily
+  };
+}
+function generateBrandTheme(brandColor) {
+  const background = "#FFFFFF";
+  const text = getContrastColor(background);
+  return {
+    colors: {
+      primary: brandColor,
+      background,
+      surface: "#F9FAFB",
+      text,
+      border: "#E5E7EB",
+      success: "#16A34A",
+      error: "#DC2626"
+    },
+    radius: "0.75rem",
+    fontFamily: "Inter, system-ui, sans-serif"
+  };
+}
+function resolveTheme(theme, brandColor, customTheme) {
+  let base;
+  if (brandColor) {
+    base = generateBrandTheme(brandColor);
+  } else if (typeof theme === "string") {
+    base = checkoutThemes[theme] ?? defaultTheme;
+  } else {
+    base = mergeTheme(defaultTheme, theme);
+  }
+  return mergeTheme(base, customTheme);
+}
+
+// src/plugins/discount-plugin.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CouponInput = ({ onApply, t, compact }) => {
+  const [code, setCode] = (0, import_react.useState)("");
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const handleApply = () => {
+    if (!code.trim()) return;
+    setStatus("loading");
+    onApply(code.trim());
+    setCode("");
+    setTimeout(() => setStatus("idle"), 500);
+  };
+  const isBtnDisabled = status === "loading" || !code.trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex items-center gap-2 border border-border/60 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/5 rounded-xs px-3 py-2 transition-all bg-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Tag, { className: `${compact ? "w-3 h-3" : "w-3.5 h-3.5"} text-text/30 shrink-0` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "text",
+          value: code,
+          onChange: (e) => setCode(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && handleApply(),
+          placeholder: t.couponPlaceholder,
+          className: `bg-transparent outline-none w-full placeholder:text-text/30 text-text font-semibold ${compact ? "text-xs" : "text-sm"}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleApply,
+        disabled: isBtnDisabled,
+        className: `font-bold bg-primary text-surface rounded-xs hover:brightness-110 disabled:opacity-40 transition-all ${compact ? "px-3 py-2 text-xs" : "px-4 py-2 text-sm"} ${isBtnDisabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+        children: status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : t.couponApply
+      }
+    )
+  ] });
+};
+var RemoveCouponButton = ({ onRemove, t }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: onRemove,
+      className: "p-0.5 rounded text-error hover:text-error hover:bg-error/10 transition-colors",
+      "aria-label": t.couponRemove,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash2, { className: "w-3 h-3" })
+    }
+  );
+};
+function createDiscountPlugin(emit) {
+  return {
+    id: "discount",
+    slots: {
+      sidebarBeforeTotals: ({ step, t }) => {
+        if (step !== "review") return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CouponInput,
+          {
+            onApply: (code) => emit({ type: "COUPON_APPLY_REQUESTED", code }),
+            t,
+            compact: true
+          }
+        ) });
+      },
+      mobileBarExpanded: ({ step, t }) => {
+        if (step !== "review") return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-3 pb-3 border-b border-border/40", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CouponInput,
+          {
+            onApply: (code) => emit({ type: "COUPON_APPLY_REQUESTED", code }),
+            t
+          }
+        ) });
+      },
+      totalsDiscountAction: ({ step, t }) => {
+        if (step !== "review") return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RemoveCouponButton,
+          {
+            onRemove: () => emit({ type: "COUPON_REMOVE_REQUESTED" }),
+            t
+          }
+        );
+      }
+    }
+  };
+}
+
+// src/plugins/cart-edit-plugin.tsx
+var import_react2 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var QuantityStepper = ({ quantity, min, max, loading, onChange }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center border border-border/60 rounded-xl bg-background/30 p-0.5 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(quantity - 1),
+          disabled: loading || quantity <= min,
+          className: "w-8 h-8 flex items-center justify-center text-text/60 hover:bg-border/30 rounded-lg transition-colors disabled:opacity-30",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Minus, { className: "w-3.5 h-3.5" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm font-bold w-7 text-center select-none", children: quantity }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(quantity + 1),
+          disabled: loading || quantity >= max,
+          className: "w-8 h-8 flex items-center justify-center text-text/60 hover:bg-border/30 rounded-lg transition-colors disabled:opacity-30",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Plus, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Loader2, { className: "w-4 h-4 animate-spin text-primary" })
+  ] });
+};
+var RemoveButton = ({ loading, onRemove, label }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: onRemove,
+      disabled: loading,
+      className: "p-2 -mr-1 rounded-full text-text/20 hover:text-error hover:bg-error/10 transition-all disabled:opacity-50",
+      "aria-label": label,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Trash2, { className: "w-5 h-5" })
+    }
+  );
+};
+var CartEditItemActions = ({
+  props,
+  emit,
+  options
+}) => {
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const { item, t } = props;
+  const handleQtyChange = (qty) => {
+    if (qty < options.minQuantity || qty > options.maxQuantity) return;
+    setLoading(true);
+    emit({ type: "ITEM_QUANTITY_UPDATE_REQUESTED", itemId: item.id, quantity: qty });
+    setTimeout(() => setLoading(false), 2e3);
+  };
+  if (!options.allowQuantityEdit) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-sm text-text/40 mt-1 block font-semibold uppercase tracking-wider", children: [
+      t.quantityShort,
+      ": ",
+      item.quantity
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    QuantityStepper,
+    {
+      quantity: item.quantity,
+      min: options.minQuantity,
+      max: options.maxQuantity,
+      loading,
+      onChange: handleQtyChange
+    }
+  ) });
+};
+var CartEditItemEnd = ({
+  props,
+  emit,
+  options
+}) => {
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const { item, t } = props;
+  if (!options.allowRemove) return null;
+  const handleRemove = () => {
+    setLoading(true);
+    emit({ type: "ITEM_REMOVE_REQUESTED", itemId: item.id });
+    setTimeout(() => setLoading(false), 2e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    RemoveButton,
+    {
+      loading,
+      onRemove: handleRemove,
+      label: t.removeItem
+    }
+  );
+};
+function createCartEditPlugin(emit, options) {
+  const opts = {
+    allowRemove: !!options?.allowRemove,
+    allowQuantityEdit: !!options?.allowQuantityEdit,
+    minQuantity: options?.minQuantity ?? 1,
+    maxQuantity: options?.maxQuantity ?? 99
+  };
+  return {
+    id: "cart-edit",
+    slots: {
+      orderItemActions: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CartEditItemActions, { props, emit, options: opts }),
+      orderItemEnd: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CartEditItemEnd, { props, emit, options: opts })
+    }
+  };
+}
+
+// src/core/checkout-context.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CheckoutContext = (0, import_react3.createContext)(null);
+var checkoutReducer = (state, action) => {
+  switch (action.type) {
+    case "SET_STEP":
+      return { ...state, step: action.step };
+    case "SELECT_METHOD":
+      return { ...state, selectedMethodId: action.methodId };
+    case "SET_ERROR":
+      return { ...state, error: action.error };
+    case "SET_CART":
+      return { ...state, items: action.cartState.items, totals: action.cartState.totals };
+    case "SYNC_PROPS":
+      return { ...state, items: action.items, totals: action.totals };
+    case "SET_PAYMENT_RESULT":
+      return { ...state, paymentResult: action.result };
+    default:
+      return state;
+  }
+};
+var CheckoutProvider = ({
+  children,
+  config,
+  initialStatus,
+  onEvent
+}) => {
+  const [state, dispatch] = (0, import_react3.useReducer)(checkoutReducer, {
+    ...config,
+    step: initialStatus ? initialStatus.status : "review",
+    selectedMethodId: null,
+    error: null,
+    paymentResult: initialStatus
+  });
+  (0, import_react3.useEffect)(() => {
+    dispatch({ type: "SYNC_PROPS", items: config.items, totals: config.totals });
+  }, [config.items, config.totals]);
+  const [eventLog, setEventLog] = import_react3.default.useState([]);
+  const emitEvent = (0, import_react3.useCallback)(
+    (event) => {
+      onEvent?.(event);
+      setEventLog(
+        (prev) => [`[${(/* @__PURE__ */ new Date()).toLocaleTimeString()}] ${event.type}`, ...prev].slice(0, 20)
+      );
+    },
+    [onEvent]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckoutContext.Provider, { value: { state, dispatch, emitEvent, eventLog }, children });
+};
+var useCheckoutContext = () => {
+  const context = (0, import_react3.useContext)(CheckoutContext);
+  if (!context) {
+    throw new Error("useCheckoutContext must be used within a CheckoutProvider");
+  }
+  return context;
+};
+
+// src/hooks/useCheckout.ts
+var useCheckout = () => {
+  const { state, dispatch, emitEvent } = useCheckoutContext();
+  const setStep = (step) => {
+    dispatch({ type: "SET_STEP", step });
+    emitEvent({ type: "STEP_CHANGED", step });
+  };
+  const selectMethod = (methodId) => {
+    dispatch({ type: "SELECT_METHOD", methodId });
+    emitEvent({ type: "PAYMENT_METHOD_SELECTED", methodId });
+  };
+  const submitPayment = async (data) => {
+    if (!state.selectedMethodId) return;
+    emitEvent({ type: "PAYMENT_SUBMITTED" });
+    setStep("processing");
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const result = await state.provider.createPayment(data);
+      dispatch({ type: "SET_PAYMENT_RESULT", result });
+      console.log(result);
+      switch (result.status) {
+        case "success":
+          emitEvent({ type: "PAYMENT_SUCCESS", transactionId: "unknown" });
+          setStep("success");
+          break;
+        case "pending":
+          emitEvent({ type: "STEP_CHANGED", step: "pending" });
+          setStep("pending");
+          break;
+        case "redirect":
+          emitEvent({ type: "STEP_CHANGED", step: "redirect" });
+          setStep("redirect");
+          break;
+        case "error": {
+          const errMsg = result.feedback?.description ?? "Payment failed";
+          dispatch({ type: "SET_ERROR", error: errMsg });
+          emitEvent({ type: "PAYMENT_ERROR", error: errMsg });
+          setStep("error");
+          break;
+        }
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      dispatch({ type: "SET_ERROR", error: message });
+      emitEvent({ type: "PAYMENT_ERROR", error: message });
+      setStep("error");
+    }
+  };
+  const setError = (error) => {
+    dispatch({ type: "SET_ERROR", error });
+    emitEvent({ type: "PAYMENT_ERROR", error });
+  };
+  const updateQuantity = async (id, qty) => {
+    if (!state.cartController) return;
+    const cartState = await state.cartController.updateQuantity(id, qty);
+    dispatch({ type: "SET_CART", cartState });
+  };
+  const removeItem = async (id) => {
+    if (!state.cartController) return;
+    const cartState = await state.cartController.removeItem(id);
+    dispatch({ type: "SET_CART", cartState });
+  };
+  const applyCoupon = async (code) => {
+    if (!state.cartController) return false;
+    try {
+      const cartState = await state.cartController.applyCoupon(code);
+      dispatch({ type: "SET_CART", cartState });
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const removeCoupon = async () => {
+    if (!state.cartController?.removeCoupon) return false;
+    try {
+      const cartState = await state.cartController.removeCoupon();
+      dispatch({ type: "SET_CART", cartState });
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  return {
+    ...state,
+    setStep,
+    selectMethod,
+    submitPayment,
+    setError,
+    updateQuantity,
+    removeItem,
+    applyCoupon,
+    removeCoupon,
+    hasCartController: !!state.cartController,
+    hasRemoveCoupon: !!state.cartController?.removeCoupon
+  };
+};
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+var isPaymentStep = (step) => step === "payment_method" || step === "payment_details";
+var isReviewStep = (step) => step === "review";
+var formatNumber = (n, currency) => new Intl.NumberFormat("en-US", { style: "currency", currency }).format(n);
+
+// src/components/Checkout.tsx
+var import_react11 = require("react");
+
+// src/theme/theme-provider.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ThemeProvider = ({ theme, brandColor, customTheme, children }) => {
+  const resolved = resolveTheme(theme, brandColor, customTheme);
+  const cssVars = createCssVars(resolved);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      style: cssVars,
+      className: "bg-background text-text font-(--theme-font) h-full w-full",
+      children
+    }
+  );
+};
+
+// src/core/i18n-context.tsx
+var import_react5 = require("react");
+
+// src/locales/en.ts
+var en = {
+  // Order Summary
+  orderSummary: "Order Summary",
+  quantity: "Qty",
+  quantityShort: "Qty",
+  removeItem: "Remove item",
+  // Totals
+  subtotal: "Subtotal",
+  discount: "Discount",
+  shipping: "Shipping",
+  shippingFree: "Free",
+  taxes: "Taxes",
+  total: "Total",
+  // Coupon
+  couponPlaceholder: "Promo code",
+  couponApply: "Apply",
+  couponApplied: "\u2713 Coupon applied",
+  couponInvalid: "\u2717 Invalid code",
+  couponRemove: "Remove coupon",
+  // Sidebar
+  orderSummaryTitle: "Order summary",
+  securePayment: "SECURE SSL PAYMENT",
+  // Actions
+  continueToPay: "Continue to payment",
+  payNow: "Pay now",
+  pay: "Pay",
+  processing: "Processing\u2026",
+  continueNow: "Continue now",
+  // Payment Methods
+  paymentMethod: "Payment method",
+  back: "Back",
+  completeDetails: "Complete details",
+  selectMethod: "Select a method",
+  // Processing
+  processingPayment: "Processing payment\u2026",
+  processingDescription: "Don't close or reload this window.",
+  // Redirect
+  redirecting: "Redirecting\u2026",
+  redirectDescription: "You will be redirected to complete your payment securely.",
+  // Mobile bar
+  showOrderDetails: "Show order details",
+  hideOrderDetails: "Hide order details",
+  continue: "Continue"
+};
+
+// src/locales/es.ts
+var es = {
+  // Order Summary
+  orderSummary: "Resumen del pedido",
+  quantity: "Cant",
+  quantityShort: "Cant",
+  removeItem: "Eliminar item",
+  // Totals
+  subtotal: "Subtotal",
+  discount: "Descuento",
+  shipping: "Env\xEDo",
+  shippingFree: "Gratis",
+  taxes: "Impuestos",
+  total: "Total",
+  // Coupon
+  couponPlaceholder: "C\xF3digo promo",
+  couponApply: "Aplicar",
+  couponApplied: "\u2713 Cup\xF3n aplicado",
+  couponInvalid: "\u2717 C\xF3digo inv\xE1lido",
+  couponRemove: "Eliminar cup\xF3n",
+  // Sidebar
+  orderSummaryTitle: "Resumen del pedido",
+  securePayment: "PAGO SEGURO SSL",
+  // Actions
+  continueToPay: "Continuar al pago",
+  payNow: "Pagar ahora",
+  pay: "Pagar",
+  processing: "Procesando\u2026",
+  continueNow: "Continuar ahora",
+  // Payment Methods
+  paymentMethod: "M\xE9todo de pago",
+  back: "Volver",
+  completeDetails: "Completa los datos",
+  selectMethod: "Selecciona un m\xE9todo",
+  // Processing
+  processingPayment: "Procesando pago\u2026",
+  processingDescription: "No cierres ni recargues esta ventana.",
+  // Redirect
+  redirecting: "Redirigiendo\u2026",
+  redirectDescription: "Ser\xE1s redirigido para completar tu pago de forma segura.",
+  // Mobile bar
+  showOrderDetails: "Ver detalle del pedido",
+  hideOrderDetails: "Ocultar detalle del pedido",
+  continue: "Continuar"
+};
+
+// src/locales/pt-BR.ts
+var ptBR = {
+  // Order Summary
+  orderSummary: "Resumo do pedido",
+  quantity: "Qtd",
+  quantityShort: "Qtd",
+  removeItem: "Remover item",
+  // Totals
+  subtotal: "Subtotal",
+  discount: "Desconto",
+  shipping: "Frete",
+  shippingFree: "Gr\xE1tis",
+  taxes: "Impostos",
+  total: "Total",
+  // Coupon
+  couponPlaceholder: "C\xF3digo promocional",
+  couponApply: "Aplicar",
+  couponApplied: "\u2713 Cupom aplicado",
+  couponInvalid: "\u2717 C\xF3digo inv\xE1lido",
+  couponRemove: "Remover cupom",
+  // Sidebar
+  orderSummaryTitle: "Resumo do pedido",
+  securePayment: "PAGAMENTO SEGURO SSL",
+  // Actions
+  continueToPay: "Continuar para pagamento",
+  payNow: "Pagar agora",
+  pay: "Pagar",
+  processing: "Processando\u2026",
+  continueNow: "Continuar agora",
+  // Payment Methods
+  paymentMethod: "M\xE9todo de pagamento",
+  back: "Voltar",
+  completeDetails: "Complete os dados",
+  selectMethod: "Selecione um m\xE9todo",
+  // Processing
+  processingPayment: "Processando pagamento\u2026",
+  processingDescription: "N\xE3o feche nem recarregue esta janela.",
+  // Redirect
+  redirecting: "Redirecionando\u2026",
+  redirectDescription: "Voc\xEA ser\xE1 redirecionado para completar seu pagamento com seguran\xE7a.",
+  // Mobile bar
+  showOrderDetails: "Ver detalhes do pedido",
+  hideOrderDetails: "Ocultar detalhes do pedido",
+  continue: "Continuar"
+};
+
+// src/locales/index.ts
+var localeMap = {
+  en,
+  es,
+  "pt-BR": ptBR
+};
+var SUPPORTED_LOCALES = Object.keys(localeMap);
+function detectLocale() {
+  if (typeof navigator === "undefined") return "en";
+  const languages = navigator.languages ?? [navigator.language];
+  for (const lang of languages) {
+    if (SUPPORTED_LOCALES.includes(lang)) return lang;
+    const base = lang.split("-")[0];
+    if (SUPPORTED_LOCALES.includes(base)) return base;
+    if (base === "pt") return "pt-BR";
+  }
+  return "en";
+}
+function resolveLocale(locale) {
+  return locale === "auto" ? detectLocale() : locale;
+}
+function getMessages(locale) {
+  const resolved = resolveLocale(locale);
+  return localeMap[resolved] ?? en;
+}
+function resolveMessages(locale, overrides) {
+  const base = getMessages(locale);
+  if (!overrides) return base;
+  return { ...base, ...overrides };
+}
+
+// src/core/i18n-context.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var I18nContext = (0, import_react5.createContext)(null);
+var I18nProvider = ({ locale, currency, messages, formatters, children }) => {
+  const t = resolveMessages(locale, messages);
+  const fmt = formatters?.currency ? formatters.currency : (amount) => formatNumber(amount, currency);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(I18nContext.Provider, { value: { t, fmt }, children });
+};
+var useI18n = () => {
+  const ctx = (0, import_react5.useContext)(I18nContext);
+  if (!ctx) {
+    throw new Error("useI18n must be used within an I18nProvider");
+  }
+  return ctx;
+};
+
+// src/plugins/plugin-context.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PluginContext = (0, import_react6.createContext)({ plugins: [] });
+var PluginProvider = ({ plugins, children }) => {
+  const value = (0, import_react6.useMemo)(() => ({ plugins }), [plugins]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PluginContext.Provider, { value, children });
+};
+var usePlugins = () => (0, import_react6.useContext)(PluginContext);
+function renderSlot(plugins, slotName, props) {
+  return plugins.filter((p) => p.slots[slotName]).map((p) => {
+    const Slot = p.slots[slotName];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.Fragment, { children: Slot(props) }, p.id);
+  });
+}
+function renderItemSlot(plugins, slotName, props) {
+  return plugins.filter((p) => p.slots[slotName]).map((p) => {
+    const Slot = p.slots[slotName];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.Fragment, { children: Slot(props) }, p.id);
+  });
+}
+
+// src/components/checkout-content.tsx
+var import_lucide_react8 = require("lucide-react");
+
+// src/components/OrderSummary.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var OrderSummary = () => {
+  const { items, step } = useCheckout();
+  const { t, fmt } = useI18n();
+  const { plugins } = usePlugins();
+  const hasItemActions = plugins.some((p) => p.slots.orderItemActions);
+  const hasItemEnd = plugins.some((p) => p.slots.orderItemEnd);
+  const slotProps = { items, totals: { subtotal: 0, total: 0 }, step, t, fmt };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col h-full animate-in fade-in slide-in-from-bottom-4 duration-500 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "text-xl font-bold mb-6 shrink-0", children: t.orderSummary }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-1 overflow-y-auto pr-3 custom-scrollbar flex flex-col divide-y divide-border/30", children: items.map((item) => {
+      const discountedRow = !!item.discount;
+      const itemSlotProps = { ...slotProps, item };
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          className: "py-5 flex items-start gap-5 transition-opacity",
+          children: [
+            item.image && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "img",
+              {
+                src: item.image,
+                alt: item.name,
+                className: "w-20 h-20 rounded-2xl object-cover border border-border/40 shrink-0 shadow-sm transition-transform hover:scale-105 duration-300"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-bold text-lg text-text/90 block truncate leading-tight mb-1", children: item.name }),
+              hasItemActions ? renderItemSlot(plugins, "orderItemActions", itemSlotProps) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-sm text-text/40 mt-1 block font-semibold uppercase tracking-wider", children: [
+                t.quantityShort,
+                ": ",
+                item.quantity
+              ] }),
+              discountedRow && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 mt-3 flex-wrap", children: [
+                item.discount.label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] font-black uppercase tracking-widest bg-success/10 text-success px-2 py-1 rounded-md border border-success/20", children: item.discount.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs text-success font-black", children: item.discount.type === "percentage" ? `-${item.discount.value}%` : `-${fmt(item.discount.value)}` })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-end gap-2 shrink-0", children: [
+              hasItemEnd && renderItemSlot(plugins, "orderItemEnd", itemSlotProps),
+              discountedRow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex flex-col items-end", hasItemEnd ? "" : "mt-1"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs line-through text-text/30 font-medium tracking-tight", children: fmt(item.unitPrice * item.quantity) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-lg font-black text-success tracking-tight", children: fmt(item.total) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("text-lg font-bold text-text/80 tracking-tight", hasItemEnd ? "" : "mt-1"), children: fmt(item.total) })
+            ] })
+          ]
+        },
+        item.id
+      );
+    }) })
+  ] });
+};
+
+// src/components/PaymentMethods.tsx
+var import_react7 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var getDefaultIcon = (type) => {
+  switch (type) {
+    case "card":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CreditCard, { className: "w-5 h-5" });
+    case "wallet":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Wallet, { className: "w-5 h-5" });
+    case "bank":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Landmark, { className: "w-5 h-5" });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Wallet, { className: "w-5 h-5" });
+  }
+};
+var PaymentMethods = () => {
+  const { paymentMethods, selectedMethodId, selectMethod, setStep, submitPayment, totals, error } = useCheckout();
+  const { t, fmt } = useI18n();
+  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
+  const [readyMap, setReadyMap] = (0, import_react7.useState)({});
+  const selectedMethod = paymentMethods.find((m) => m.id === selectedMethodId);
+  const isReady = selectedMethod ? selectedMethod.renderComponent ? !!readyMap[selectedMethod.id] : true : false;
+  const handleSelectMethod = (id) => {
+    selectMethod(id);
+  };
+  const makeReadyCallback = (0, import_react7.useCallback)(
+    (methodId) => (ready) => {
+      setReadyMap((prev) => ({ ...prev, [methodId]: ready }));
+    },
+    []
+  );
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!selectedMethodId || !isReady) return;
+    setIsSubmitting(true);
+    await submitPayment({ methodId: selectedMethodId });
+    setIsSubmitting(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "form",
+    {
+      id: "checkout-payment-form",
+      onSubmit: handleSubmit,
+      className: "flex flex-col gap-3 animate-in fade-in slide-in-from-right-4 duration-500",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setStep("review"),
+              className: "p-1 hover:bg-border/50 rounded-full transition-colors text-text/80",
+              "aria-label": t.back,
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronLeft, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "text-xl font-semibold", children: t.paymentMethod })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 overflow-y-auto pr-1 custom-scrollbar flex flex-col gap-2", children: paymentMethods.map((method) => {
+          const isSelected = selectedMethodId === method.id;
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSelectMethod(method.id),
+                disabled: isSubmitting,
+                className: cn(
+                  "flex items-center gap-3 p-3.5 border transition-all duration-200 text-left",
+                  isSelected ? "border-primary bg-primary/5 ring-1 ring-primary shadow-sm" : "border-border/60 hover:border-primary/50 bg-background/50 hover:bg-background",
+                  isSelected && method.renderComponent ? "rounded-t-[var(--radius-DEFAULT)]" : "rounded-[var(--radius-DEFAULT)]"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("p-1.5 rounded-lg shrink-0", isSelected ? "text-primary" : "text-text/50"), children: getDefaultIcon(method.type) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-1 font-bold text-sm tracking-tight", children: method.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "div",
+                    {
+                      className: cn(
+                        "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all shrink-0",
+                        isSelected ? "border-primary bg-primary/10" : "border-text/20"
+                      ),
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-primary shadow-sm" })
+                    }
+                  )
+                ]
+              }
+            ),
+            isSelected && method.renderComponent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "border border-t-0 border-primary/20 bg-background/50 rounded-b-[var(--radius-DEFAULT)] px-5 pt-5 pb-5 animate-in fade-in slide-in-from-top-2 duration-300", children: method.renderComponent({ onReadyChange: makeReadyCallback(method.id) }) })
+          ] }, method.id);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: !isReady || isSubmitting,
+            className: cn(
+              "md:hidden flex w-full py-4 px-4 rounded-[var(--radius-DEFAULT)] mt-2 font-black uppercase tracking-widest justify-center items-center gap-2 transition-all shadow-lg active:scale-[0.98]",
+              !isReady || isSubmitting ? "bg-primary/40 text-surface cursor-not-allowed" : "bg-primary text-surface hover:brightness-110 shadow-primary/20"
+            ),
+            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Loader2, { className: "w-5 h-5 animate-spin" }),
+              t.processing
+            ] }) : isReady ? `${t.pay} ${fmt(totals.total)}` : selectedMethod ? t.completeDetails : t.selectMethod
+          }
+        ),
+        error && !isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-error text-center font-medium animate-in fade-in duration-300 -mt-1", children: error })
+      ]
+    }
+  );
+};
+
+// src/components/FeedbackScreen.tsx
+var import_react8 = require("react");
+var import_lucide_react4 = require("lucide-react");
+
+// src/components/button.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Button = ({
+  label,
+  onPress,
+  variant = "solid",
+  icon,
+  disabled,
+  className,
+  type = "button"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      type,
+      onClick: onPress,
+      disabled,
+      className: cn(
+        "flex items-center justify-center gap-2 px-5 py-2.5 rounded-[var(--radius-DEFAULT)] font-medium text-sm transition-all active:scale-[0.98]",
+        variant === "solid" && "bg-primary text-surface hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed",
+        variant === "outline" && "border border-primary text-primary hover:bg-primary/5 disabled:opacity-40 disabled:cursor-not-allowed",
+        variant === "ghost" && "text-text/70 hover:bg-border/50 hover:text-text disabled:opacity-40 disabled:cursor-not-allowed",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0", children: icon }),
+        label
+      ]
+    }
+  );
+};
+
+// src/components/FeedbackScreen.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var REDIRECT_DELAY = 2;
+var variantConfig = {
+  success: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "w-10 h-10" }),
+    iconBg: "bg-success/10",
+    iconColor: "text-success"
+  },
+  pending: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Clock, { className: "w-10 h-10" }),
+    iconBg: "bg-orange-500/10",
+    iconColor: "text-orange-500"
+  },
+  error: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.XCircle, { className: "w-10 h-10" }),
+    iconBg: "bg-error/10",
+    iconColor: "text-error"
+  },
+  redirect: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ExternalLink, { className: "w-10 h-10" }),
+    iconBg: "bg-primary/10",
+    iconColor: "text-primary"
+  }
+};
+var FeedbackScreen = ({
+  title,
+  description,
+  actions = [],
+  variant = "success",
+  children
+}) => {
+  const config = variantConfig[variant];
+  const [countdown, setCountdown] = (0, import_react8.useState)(variant === "redirect" ? REDIRECT_DELAY : 0);
+  (0, import_react8.useEffect)(() => {
+    if (variant !== "redirect") return;
+    if (countdown <= 0) {
+      const primaryAction = actions.find((a) => !a.variant || a.variant === "solid");
+      primaryAction?.onPress();
+      return;
+    }
+    const timer = setInterval(() => setCountdown((c) => c - 1), 1e3);
+    return () => clearInterval(timer);
+  }, [countdown, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 gap-5 animate-in zoom-in-95 fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className: cn(
+          "w-20 h-20 rounded-full flex items-center justify-center",
+          config.iconBg,
+          config.iconColor
+        ),
+        children: config.icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-2xl font-bold mb-1", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-text/60 text-sm max-w-[280px] mx-auto leading-relaxed", children: description })
+    ] }),
+    variant === "redirect" && countdown > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative w-14 h-14", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { className: "w-14 h-14 -rotate-90", viewBox: "0 0 56 56", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "circle",
+            {
+              cx: "28",
+              cy: "28",
+              r: "24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "4",
+              className: "text-border"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "circle",
+            {
+              cx: "28",
+              cy: "28",
+              r: "24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "4",
+              strokeLinecap: "round",
+              strokeDasharray: `${2 * Math.PI * 24}`,
+              strokeDashoffset: `${2 * Math.PI * 24 * (1 - countdown / REDIRECT_DELAY)}`,
+              className: "text-primary transition-all duration-1000"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-xl font-bold text-primary", children: countdown })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-xs text-text/50", children: [
+        "Redirigiendo en ",
+        countdown,
+        "s\u2026"
+      ] })
+    ] }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full", children }),
+    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-3 justify-center w-full mt-1", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Button,
+      {
+        label: action.label,
+        onPress: action.onPress,
+        variant: action.variant ?? "solid",
+        icon: action.icon,
+        className: action.variant === "solid" ? "flex-1" : void 0
+      },
+      i
+    )) })
+  ] });
+};
+
+// src/components/CheckoutLayout.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CheckoutLayout = ({ children, sidebar, className, ...props }) => {
+  const hasSidebar = !!sidebar;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: cn(
+        "w-full h-full bg-surface text-text rounded-(--theme-radius) shadow-2xl border border-border",
+        "overflow-hidden flex flex-col md:flex-row",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden p-4"
+            ),
+            children
+          }
+        ),
+        hasSidebar && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hidden md:block w-px bg-border/60 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hidden md:flex w-[320px] shrink-0 flex-col overflow-y-auto p-4 bg-background/60", children: sidebar })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/dev-tools.tsx
+var import_react9 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SCENARIOS = ["success", "pending", "error", "redirect"];
+var SCENARIO_LABELS = {
+  success: "\u2705 \xC9xito",
+  pending: "\u23F3 Pendiente",
+  error: "\u274C Error",
+  redirect: "\u2197\uFE0F Redirect"
+};
+var DevTools = () => {
+  const { state, eventLog } = useCheckoutContext();
+  const [showDevTools, setShowDevTools] = (0, import_react9.useState)(false);
+  const [scenario, setScenario] = (0, import_react9.useState)("success");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        onClick: () => setShowDevTools(true),
+        className: "fixed top-4 right-4 z-40 bg-surface text-text/50 hover:text-primary p-3 rounded-full shadow-md border border-border transition-all hover:scale-105",
+        "aria-label": "Open Dev Tools",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Code2, { className: "w-5 h-5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        className: `fixed top-0 right-0 h-full w-80 bg-surface shadow-2xl z-50 p-6 flex flex-col gap-6 overflow-y-auto transition-transform duration-300 ${showDevTools ? "translate-x-0" : "translate-x-full"}`,
+        style: { colorScheme: "light" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between pb-4 border-b border-border", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("h2", { className: "text-lg font-bold text-text flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Code2, { className: "w-5 h-5 text-primary" }),
+              "Dev Tools"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                onClick: () => setShowDevTools(false),
+                className: "text-text/50 hover:text-text p-1 bg-surface hover:bg-border/50 rounded-full transition-colors",
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.X, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-sm font-bold mb-3 text-slate-500 uppercase tracking-wider", children: "Escenario de pago" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col gap-1", children: SCENARIOS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer p-2 hover:bg-slate-50 rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "input",
+                {
+                  type: "radio",
+                  name: "scenario",
+                  checked: scenario === s,
+                  onChange: () => setScenario(s),
+                  className: "accent-indigo-500 w-4 h-4"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm", children: SCENARIO_LABELS[s] })
+            ] }, s)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-[11px] text-slate-400 mt-2 p-2 bg-slate-50 rounded leading-relaxed", children: [
+              "Cup\xF3n de prueba: ",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { className: "font-mono font-bold text-slate-600", children: "SAVE10" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("h2", { className: "text-sm font-bold mb-3 text-slate-500 uppercase tracking-wider flex items-center gap-2", children: [
+              "Event Logger ",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded-full font-semibold", children: "Live" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-slate-900 text-emerald-400 font-mono text-[10px] p-3 rounded-xl h-56 overflow-y-auto flex flex-col gap-1", children: eventLog.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-slate-500 italic", children: "Sin eventos a\xFAn\u2026" }) : eventLog.map((log, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "border-b border-white/10 pb-1", children: log }, i)) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-sm font-bold text-slate-500 uppercase tracking-wider", children: "Estado interno" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { className: "text-[10px] bg-slate-900 text-emerald-400 p-3 rounded-xl overflow-x-auto", children: JSON.stringify({ ...state, provider: "PaymentProvider instance" }, null, 2) })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var dev_tools_default = DevTools;
+
+// src/components/OrderSidebarSummary.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var OrderSidebarSummary = ({ showItems: propShowItems, isLoading }) => {
+  const { items, totals, step, setStep, selectedMethodId } = useCheckout();
+  const { t, fmt } = useI18n();
+  const { plugins } = usePlugins();
+  const showItems = propShowItems ?? step !== "review";
+  const handleAction = () => {
+    if (step === "review") {
+      setStep("payment_method");
+    } else {
+      const form = document.getElementById("checkout-payment-form");
+      form?.requestSubmit();
+    }
+  };
+  const actionLabel = step === "review" ? t.continueToPay : t.payNow;
+  const isReady = step === "review" || !!selectedMethodId;
+  const slotProps = { items, totals, step, t, fmt };
+  const hasDiscountAction = plugins.some((p) => p.slots.totalsDiscountAction);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col h-full animate-in fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-xs font-bold text-text/40 uppercase tracking-widest mb-6", children: t.orderSummaryTitle }),
+    showItems && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-4 overflow-y-auto pr-2 custom-scrollbar", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start gap-3", children: [
+      item.image && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "img",
+        {
+          src: item.image,
+          alt: item.name,
+          className: "w-10 h-10 rounded-lg object-cover border border-border/40 shrink-0 shadow-sm"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[13px] font-semibold leading-tight truncate text-text/80", children: item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "text-[11px] text-text/40 mt-0.5 font-medium", children: [
+          t.quantityShort,
+          ": ",
+          item.quantity
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-right shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[13px] font-bold text-text/80", children: fmt(item.total) }) })
+    ] }, item.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      renderSlot(plugins, "sidebarBeforeTotals", slotProps),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex  border-t border-border/50 justify-between text-sm text-text/60 font-medium", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: t.subtotal }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: fmt(totals.subtotal) })
+      ] }),
+      totals.discount !== void 0 && totals.discount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between items-center text-sm font-semibold text-success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: t.discount }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+          "-",
+          fmt(totals.discount),
+          hasDiscountAction && renderSlot(plugins, "totalsDiscountAction", slotProps)
+        ] })
+      ] }),
+      totals.shipping !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between text-sm text-text/60 font-medium", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: t.shipping }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: totals.shipping === 0 ? t.shippingFree : fmt(totals.shipping) })
+      ] }),
+      totals.taxes !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between text-sm text-text/60 font-medium", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: t.taxes }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: fmt(totals.taxes) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between items-center pt-4 border-t border-border/50 mt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-bold text-base text-text/90", children: t.total }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-2xl font-black text-primary tracking-tight", children: fmt(totals.total) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 mt-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          onClick: handleAction,
+          disabled: !isReady || isLoading,
+          className: cn(
+            "w-full mt-6 py-4 px-6 rounded-xs font-bold flex items-center justify-center gap-2 transition-all duration-300 shadow-lg active:scale-[0.98]",
+            isReady && !isLoading ? "bg-primary text-surface hover:brightness-110 shadow-primary/20 cursor-pointer" : "bg-primary/40 text-surface/60 cursor-not-allowed shadow-none"
+          ),
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Loader2, { className: "w-5 h-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            actionLabel,
+            step === "review" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ChevronRight, { className: "w-5 h-5" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2 mt-4 text-[11px] text-text/30 font-semibold tracking-wide", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ShieldCheck, { className: "w-4 h-4 opacity-50" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: t.securePayment })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/MobileOrderBar.tsx
+var import_react10 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var MobileOrderBar = ({
+  onAction,
+  actionLabel,
+  actionDisabled,
+  isSubmitting,
+  showItems = false
+}) => {
+  const { totals, items, step } = useCheckout();
+  const { t, fmt } = useI18n();
+  const { plugins } = usePlugins();
+  const [expanded, setExpanded] = (0, import_react10.useState)(false);
+  const slotProps = { items, totals, step, t, fmt };
+  const hasDiscountAction = plugins.some((p) => p.slots.totalsDiscountAction);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 z-30 md:hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: `bg-surface border-t border-border overflow-hidden transition-all duration-300 ease-in-out ${expanded ? "max-h-[70vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "px-4 pt-4 pb-2 flex flex-col gap-0", children: [
+          showItems && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-y-auto max-h-52 divide-y divide-border/40 mb-3", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3 py-2.5", children: [
+            item.image && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "img",
+              {
+                src: item.image,
+                alt: item.name,
+                className: "w-10 h-10 rounded-lg object-cover border border-border/30 shrink-0"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm font-medium truncate", children: item.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-xs text-text/50", children: [
+                t.quantityShort,
+                ": ",
+                item.quantity
+              ] }),
+              item.discount && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-[10px] text-success font-medium", children: [
+                item.discount.label && `${item.discount.label} \xB7 `,
+                item.discount.type === "percentage" ? `-${item.discount.value}%` : `-${fmt(item.discount.value)}`
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-right shrink-0", children: item.discount ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col items-end", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[11px] line-through text-text/40", children: fmt(item.unitPrice * item.quantity) }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sm font-semibold text-success", children: fmt(item.total) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sm font-medium", children: fmt(item.total) }) })
+          ] }, item.id)) }),
+          renderSlot(plugins, "mobileBarExpanded", slotProps),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex flex-col gap-1.5 text-sm pb-3 ${showItems ? "border-t border-border/50 pt-3" : "pt-1"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-text/60", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t.subtotal }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: fmt(totals.subtotal) })
+            ] }),
+            totals.discount !== void 0 && totals.discount > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between items-center text-success font-medium", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t.discount }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+                "-",
+                fmt(totals.discount),
+                hasDiscountAction && renderSlot(plugins, "totalsDiscountAction", slotProps)
+              ] })
+            ] }),
+            totals.shipping !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-text/60", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t.shipping }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: totals.shipping === 0 ? t.shippingFree : fmt(totals.shipping) })
+            ] }),
+            totals.taxes !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-text/60", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t.taxes }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: fmt(totals.taxes) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-surface border-t border-border shadow-[0_-4px_20px_rgba(0,0,0,0.1)] px-4 pt-3 pb-4 flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setExpanded((v) => !v),
+          className: "flex items-center justify-between w-full",
+          "aria-label": expanded ? t.hideOrderDetails : t.showOrderDetails,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sm font-medium text-text/60", children: t.total }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-lg font-bold text-primary", children: fmt(totals.total) }),
+              expanded ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ChevronDown, { className: "w-4 h-4 text-text/40" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ChevronUp, { className: "w-4 h-4 text-text/40" })
+            ] })
+          ]
+        }
+      ),
+      onAction && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onAction,
+          disabled: actionDisabled || isSubmitting,
+          className: `w-full py-3 rounded-[var(--radius-DEFAULT)] font-medium text-sm flex items-center justify-center gap-2 transition-all active:scale-[0.98] ${actionDisabled || isSubmitting ? "bg-primary/40 text-surface cursor-not-allowed" : "bg-primary text-surface hover:opacity-90"}`,
+          children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Loader2, { className: "w-4 h-4 animate-spin" }),
+            t.processing
+          ] }) : actionLabel ?? t.continue
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/mobile-bar.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var MobileBar = ({ step }) => {
+  const { setStep } = useCheckout();
+  const { t } = useI18n();
+  if (isReviewStep(step)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      MobileOrderBar,
+      {
+        onAction: () => setStep("payment_method"),
+        actionLabel: `${t.continueToPay} \u2192`,
+        showItems: false
+      }
+    );
+  }
+  if (isPaymentStep(step)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      MobileOrderBar,
+      {
+        onAction: () => {
+          const form = document.getElementById("checkout-payment-form");
+          form?.requestSubmit();
+        },
+        actionLabel: t.pay,
+        showItems: true
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/checkout-content.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CheckoutContent = ({ devTools }) => {
+  const { state } = useCheckoutContext();
+  const { t } = useI18n();
+  const { step, paymentResult } = state;
+  const renderStep = () => {
+    switch (step) {
+      case "review":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OrderSummary, {});
+      case "payment_method":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaymentMethods, {});
+      case "processing":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Loader2, { className: "w-12 h-12 animate-spin text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-medium text-lg animate-pulse", children: t.processingPayment }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-text/50", children: t.processingDescription })
+        ] });
+      case "success":
+      case "pending":
+      case "error":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          FeedbackScreen,
+          {
+            variant: paymentResult?.status,
+            title: paymentResult?.feedback?.title ?? "",
+            description: paymentResult?.feedback?.title,
+            actions: paymentResult?.feedback?.actions
+          }
+        );
+      case "redirect": {
+        const result = paymentResult?.status === "redirect" ? paymentResult : void 0;
+        const fb = result?.feedback;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          FeedbackScreen,
+          {
+            variant: "redirect",
+            title: fb?.title ?? t.redirecting,
+            description: fb?.description ?? t.redirectDescription,
+            actions: fb?.actions ?? [
+              {
+                label: t.continueNow,
+                variant: "solid",
+                onPress: () => {
+                  if (result?.url) window.location.href = result.url;
+                }
+              }
+            ]
+          }
+        );
+      }
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OrderSummary, {});
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "h-[80vh] md:h-full w-full flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckoutLayout, { sidebar: isReviewStep(step) || isPaymentStep(step) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OrderSidebarSummary, {}) : void 0, children: renderStep() }),
+    (isReviewStep(step) || isPaymentStep(step)) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MobileBar, { step }),
+    devTools && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(dev_tools_default, {})
+  ] });
+};
+
+// src/components/Checkout.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Checkout = ({
+  items,
+  totals,
+  paymentMethods,
+  provider,
+  currency,
+  locale = "es",
+  theme = "light",
+  brandColor,
+  customTheme,
+  onEvent,
+  cartController,
+  initialState,
+  devTools,
+  messages,
+  formatters,
+  plugins = []
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeProvider, { theme, brandColor, customTheme, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(I18nProvider, { locale, currency, messages, formatters, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PluginProvider, { plugins, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    CheckoutProvider,
+    {
+      config: { items, totals, paymentMethods, provider, currency, locale, cartController },
+      initialStatus: initialState,
+      onEvent,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckoutContent, { devTools })
+    }
+  ) }) }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkout,
+  checkoutThemes,
+  cn,
+  createCartEditPlugin,
+  createCssVars,
+  createDiscountPlugin,
+  darken,
+  defaultTheme,
+  formatNumber,
+  generateBrandTheme,
+  getContrastColor,
+  getLuminance,
+  hexToRgb,
+  isDark,
+  isPaymentStep,
+  isReviewStep,
+  lighten,
+  mergeTheme,
+  mix,
+  resolveTheme,
+  rgbToHex,
+  useCheckout
+});
+//# sourceMappingURL=index.cjs.map