@jazadev/react-native 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1988 @@
+"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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_API_BASE_URL: () => DEFAULT_API_BASE_URL,
+  DIAL_CODES: () => DIAL_CODES,
+  JazaBalanceWidget: () => JazaBalanceWidget,
+  JazaProvider: () => JazaProvider,
+  JazaSdkError: () => JazaSdkError,
+  JazaTopUpButton: () => JazaTopUpButton,
+  PublicClient: () => PublicClient,
+  VERSION: () => VERSION,
+  buildE164: () => buildE164,
+  darkTheme: () => darkTheme,
+  enrichCountries: () => enrichCountries,
+  formatCredits: () => formatCredits,
+  formatCurrencyAmount: () => formatCurrencyAmount,
+  formatLocalAmount: () => formatLocalAmount,
+  formatUsd: () => formatUsd,
+  getDialCode: () => getDialCode,
+  isDepositTerminal: () => isDepositTerminal,
+  iso2ToFlag: () => iso2ToFlag,
+  lightTheme: () => lightTheme,
+  pickDefaultCurrencyCode: () => pickDefaultCurrencyCode,
+  useJaza: () => useJaza
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider/JazaProvider.tsx
+var import_react8 = require("react");
+var import_react_native10 = require("react-native");
+
+// src/api/errors.ts
+var JazaSdkError = class _JazaSdkError extends Error {
+  constructor(statusCode, message, raw) {
+    super(message);
+    __publicField(this, "statusCode");
+    __publicField(this, "code");
+    __publicField(this, "raw");
+    this.name = "JazaSdkError";
+    this.statusCode = statusCode;
+    this.code = `HTTP_${statusCode}`;
+    this.raw = raw;
+  }
+  static fromResponse(status, body) {
+    let message = `Request failed (${status})`;
+    if (typeof body === "object" && body !== null) {
+      const m = body.message;
+      if (typeof m === "string") {
+        message = m;
+      } else if (typeof m === "object" && m?.message) {
+        message = m.message;
+      }
+    }
+    return new _JazaSdkError(status, message, body);
+  }
+};
+
+// src/version.ts
+var VERSION = "0.1.0";
+var DEFAULT_API_BASE_URL = "https://api.jaza.dev";
+
+// src/api/publicClient.ts
+var PublicClient = class {
+  constructor(config) {
+    __publicField(this, "apiBaseUrl");
+    __publicField(this, "publishableKey");
+    __publicField(this, "topUpToken", null);
+    this.apiBaseUrl = (config.apiBaseUrl ?? DEFAULT_API_BASE_URL).replace(
+      /\/$/,
+      ""
+    );
+    this.publishableKey = config.publishableKey;
+  }
+  setTopUpToken(token) {
+    this.topUpToken = token;
+  }
+  async listCountries() {
+    return this.request("GET", "/v1/catalog/countries");
+  }
+  async listBundles() {
+    return this.authedRequest("GET", "/v1/public/bundles");
+  }
+  async predictProvider(phoneNumber) {
+    return this.authedRequest(
+      "POST",
+      "/v1/public/payments/predict",
+      { phoneNumber }
+    );
+  }
+  async quotePayment(body) {
+    return this.authedRequest(
+      "POST",
+      "/v1/public/payments/quote",
+      body
+    );
+  }
+  async createDeposit(body) {
+    return this.authedRequest(
+      "POST",
+      "/v1/public/payments/deposits",
+      body
+    );
+  }
+  async getDeposit(paymentRequestId) {
+    return this.authedRequest(
+      "GET",
+      `/v1/public/payments/deposits/${paymentRequestId}`
+    );
+  }
+  async authedRequest(method, path, body) {
+    if (!this.topUpToken) {
+      throw new JazaSdkError(401, "Top-up session token is not set");
+    }
+    return this.request(method, path, body, this.topUpToken);
+  }
+  async request(method, path, body, token) {
+    const headers = {
+      Accept: "application/json",
+      "User-Agent": `@jazadev/react-native/${VERSION}`
+    };
+    if (token) {
+      headers.Authorization = `Bearer ${token}`;
+      headers["X-Jaza-Public-Key"] = this.publishableKey;
+    }
+    if (body !== void 0) {
+      headers["Content-Type"] = "application/json";
+    }
+    const response = await fetch(`${this.apiBaseUrl}${path}`, {
+      method,
+      headers,
+      body: body === void 0 ? void 0 : JSON.stringify(body)
+    });
+    const text = await response.text();
+    let parsed = null;
+    if (text) {
+      try {
+        parsed = JSON.parse(text);
+      } catch {
+        parsed = { message: text };
+      }
+    }
+    if (!response.ok) {
+      throw JazaSdkError.fromResponse(response.status, parsed);
+    }
+    return parsed;
+  }
+};
+
+// src/data/dialCodes.ts
+var DIAL_CODES = {
+  BJ: "229",
+  BF: "226",
+  CM: "237",
+  CI: "225",
+  CD: "243",
+  CG: "242",
+  ET: "251",
+  GA: "241",
+  GH: "233",
+  KE: "254",
+  MW: "265",
+  MZ: "258",
+  NG: "234",
+  RW: "250",
+  SN: "221",
+  SL: "232",
+  TZ: "255",
+  UG: "256",
+  ZM: "260"
+};
+function iso2ToFlag(iso2) {
+  const code = iso2.toUpperCase();
+  if (code.length !== 2) return "";
+  const points = [...code].map((c) => 127462 - 65 + c.charCodeAt(0));
+  return String.fromCodePoint(...points);
+}
+function getDialCode(iso2) {
+  return DIAL_CODES[iso2.toUpperCase()];
+}
+
+// src/utils/helpers.ts
+function enrichCountries(countries) {
+  return countries.filter((c) => c.isActive && getDialCode(c.iso2)).map((c) => {
+    const dialCode = getDialCode(c.iso2);
+    const currencies = c.currencies?.map((cc) => cc.currency).filter((cur) => cur?.isActive).map((cur) => ({
+      code: cur.code,
+      decimals: cur.decimals,
+      name: cur.name
+    })) ?? [];
+    return {
+      id: c.id,
+      name: c.name,
+      iso2: c.iso2,
+      iso3: c.iso3,
+      dialCode,
+      flag: iso2ToFlag(c.iso2),
+      currencies
+    };
+  }).filter((c) => c.currencies.length > 0).sort((a, b) => a.name.localeCompare(b.name));
+}
+function buildE164(dialCode, nationalNumber) {
+  const digits = nationalNumber.replace(/\D/g, "");
+  const code = dialCode.replace(/\D/g, "");
+  if (digits.length < 6) {
+    throw new Error("Phone number too short");
+  }
+  return `${code}${digits}`;
+}
+function pickDefaultCurrencyCode(codes) {
+  if (codes.length === 0) {
+    throw new Error("No currencies available");
+  }
+  const local = codes.find((c) => c.toUpperCase() !== "USD");
+  return (local ?? codes[0]).toUpperCase();
+}
+function isDepositTerminal(status) {
+  return status === "COMPLETED" || status === "FAILED" || status === "EXPIRED" || status === "CANCELLED";
+}
+function formatCredits(n) {
+  return n.toLocaleString("en-US");
+}
+function formatUsd(priceUsd) {
+  const n = Number(priceUsd);
+  if (Number.isNaN(n)) return priceUsd;
+  return formatCurrencyAmount(n, "USD", 2);
+}
+function resolveCurrencyFractionDigits(currencyCode) {
+  return currencyCode.toUpperCase() === "USD" ? 2 : 0;
+}
+function formatCurrencyAmount(amount, currencyCode, _decimals) {
+  const n = typeof amount === "string" ? Number(amount) : amount;
+  const code = currencyCode.toUpperCase();
+  if (Number.isNaN(n)) return `${amount} ${code}`;
+  const fractionDigits = resolveCurrencyFractionDigits(code);
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: code,
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits
+    }).format(n);
+  } catch {
+    const grouped = n.toLocaleString("en-US", {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits
+    });
+    return `${grouped} ${code}`;
+  }
+}
+function formatLocalAmount(amount, currencyCode, decimals) {
+  return formatCurrencyAmount(amount, currencyCode, decimals);
+}
+
+// src/theme/tokens.ts
+var spacing = { xs: 4, sm: 8, md: 16, lg: 24, xl: 40, gutter: 20 };
+var radius = { md: 8, lg: 12, xl: 16, full: 9999 };
+var darkTheme = {
+  mode: "dark",
+  spacing,
+  radius,
+  colors: {
+    background: "#121414",
+    surface: "#121414",
+    surfaceContainer: "#1e2020",
+    surfaceContainerLow: "#1a1c1c",
+    surfaceContainerHigh: "#282a2b",
+    surfaceContainerHighest: "#333535",
+    surfaceVariant: "#333535",
+    onSurface: "#e2e2e2",
+    onSurfaceVariant: "#bacac5",
+    primary: "#57f1db",
+    onPrimary: "#003731",
+    primaryContainer: "#2dd4bf",
+    onPrimaryContainer: "#00574d",
+    secondaryContainer: "#00bd85",
+    onSecondaryContainer: "#00452e",
+    outline: "#859490",
+    outlineVariant: "#3c4a46",
+    error: "#ffb4ab",
+    success: "#45dfa4",
+    overlay: "rgba(12,15,15,0.8)",
+    bundleBorder: "#262626",
+    bundleBorderSelected: "#2dd4bf",
+    bundleBg: "#111111"
+  }
+};
+var lightTheme = {
+  ...darkTheme,
+  mode: "light"
+};
+function resolveTheme(preference, systemScheme) {
+  if (preference === "system") {
+    return systemScheme === "dark" ? darkTheme : lightTheme;
+  }
+  return preference === "dark" ? darkTheme : lightTheme;
+}
+
+// src/provider/JazaContext.tsx
+var import_react = require("react");
+var JazaContext = (0, import_react.createContext)(null);
+function useJaza() {
+  const ctx = (0, import_react.useContext)(JazaContext);
+  if (!ctx) {
+    throw new Error("useJaza must be used within JazaProvider");
+  }
+  return ctx;
+}
+
+// src/sheet/TopUpBottomSheet.tsx
+var import_react7 = require("react");
+var import_react_native9 = require("react-native");
+var import_react_native_gesture_handler = require("react-native-gesture-handler");
+var import_bottom_sheet2 = __toESM(require("@gorhom/bottom-sheet"), 1);
+var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
+
+// src/sheet/steps/OfferStep.tsx
+var import_react_native = require("react-native");
+
+// src/components/Icon.tsx
+var import_MaterialIcons = __toESM(require("@expo/vector-icons/MaterialIcons"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Icon({ name, size = 24, color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MaterialIcons.default, { name, size, color });
+}
+
+// src/sheet/steps/OfferStep.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function OfferStep() {
+  const {
+    theme,
+    balance,
+    balanceLoading,
+    bundles,
+    bundlesLoading,
+    bundlesError,
+    selectedBundle,
+    setSelectedBundle,
+    goToPayment
+  } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const styles = import_react_native.StyleSheet.create({
+    balanceCard: {
+      backgroundColor: colors.surfaceContainer,
+      borderRadius: radius2.xl,
+      padding: spacing2.md,
+      marginBottom: spacing2.lg
+    },
+    balanceLabel: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginBottom: spacing2.xs
+    },
+    balanceRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm
+    },
+    balanceValue: {
+      color: colors.onSurface,
+      fontSize: 48,
+      fontWeight: "700"
+    },
+    title: {
+      color: colors.onSurface,
+      fontSize: 24,
+      fontWeight: "600",
+      marginBottom: spacing2.md
+    },
+    bundle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: spacing2.md,
+      borderRadius: radius2.xl,
+      backgroundColor: colors.bundleBg,
+      borderWidth: 1,
+      borderColor: colors.bundleBorder,
+      marginBottom: spacing2.sm
+    },
+    bundleSelected: {
+      borderColor: colors.bundleBorderSelected,
+      borderWidth: 2
+    },
+    bundleLabel: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    bundleLabelSelected: {
+      color: colors.primaryContainer
+    },
+    bundleSub: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginTop: 2
+    },
+    bundleCredits: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    bundlePrice: {
+      color: colors.onSurfaceVariant,
+      fontSize: 12,
+      fontFamily: "monospace"
+    },
+    cta: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingVertical: spacing2.md,
+      marginTop: spacing2.lg,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing2.sm
+    },
+    ctaText: {
+      color: colors.onPrimaryContainer,
+      fontSize: 16,
+      fontWeight: "600"
+    },
+    loading: { padding: spacing2.xl, alignItems: "center" },
+    error: {
+      color: colors.error,
+      fontSize: 14,
+      marginBottom: spacing2.md,
+      lineHeight: 20
+    }
+  });
+  const renderBundle = (bundle) => {
+    const selected = selectedBundle?.id === bundle.id;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_react_native.Pressable,
+      {
+        style: [styles.bundle, selected && styles.bundleSelected],
+        onPress: () => setSelectedBundle(bundle),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_react_native.Text,
+              {
+                style: [styles.bundleLabel, selected && styles.bundleLabelSelected],
+                children: bundle.label ?? "Bundle"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.Text, { style: styles.bundleSub, children: [
+              formatCredits(bundle.credits),
+              " credits"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { style: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.bundleCredits, children: formatCredits(bundle.credits) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.Text, { style: styles.bundlePrice, children: [
+              formatUsd(bundle.priceUsd),
+              " USD"
+            ] })
+          ] })
+        ]
+      },
+      bundle.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { style: styles.balanceCard, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.balanceLabel, children: "Current Balance" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { style: styles.balanceRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "bolt", size: 28, color: colors.primary }),
+        balanceLoading && balance === null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.ActivityIndicator, { color: colors.primary }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.balanceValue, children: balance !== null ? formatCredits(balance) : "\u2014" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.title, children: "Top-up Credits" }),
+    bundlesError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.error, children: bundlesError }) : null,
+    bundlesLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: styles.loading, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.ActivityIndicator, { color: colors.primary }) }) : bundles.map(renderBundle),
+    !bundlesLoading && !bundlesError && bundles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.error, children: "No active bundles for this app." }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_react_native.Pressable,
+      {
+        style: styles.cta,
+        onPress: goToPayment,
+        disabled: !selectedBundle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.Text, { style: styles.ctaText, children: [
+            "Continue with ",
+            selectedBundle?.label ?? "bundle"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/sheet/steps/PaymentStep.tsx
+var import_react4 = require("react");
+var import_react_native6 = require("react-native");
+
+// src/components/PhoneDigitInput.tsx
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
+var import_bottom_sheet = require("@gorhom/bottom-sheet");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MAX_DIGITS = 10;
+function PhoneDigitInput({
+  theme,
+  value,
+  onChangeText,
+  dialPressable,
+  trailing
+}) {
+  const { colors, spacing: spacing2 } = theme;
+  const inputRef = (0, import_react2.useRef)(null);
+  const [focused, setFocused] = (0, import_react2.useState)(false);
+  const digits = value.replace(/\D/g, "").slice(0, MAX_DIGITS);
+  const activeIndex = digits.length >= MAX_DIGITS ? MAX_DIGITS - 1 : digits.length;
+  const styles = import_react_native2.StyleSheet.create({
+    label: {
+      color: colors.onSurfaceVariant,
+      fontSize: 12,
+      letterSpacing: 0.5,
+      marginBottom: spacing2.sm,
+      textTransform: "uppercase"
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      gap: spacing2.sm
+    },
+    slots: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      minHeight: 40
+    },
+    slot: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    slotChar: {
+      fontSize: 22,
+      fontWeight: "600",
+      color: colors.onSurfaceVariant,
+      fontVariant: ["tabular-nums"]
+    },
+    slotCharFocused: {
+      color: colors.primaryContainer
+    },
+    hiddenInput: {
+      position: "absolute",
+      opacity: 0,
+      height: 1,
+      width: 1
+    }
+  });
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: styles.label, children: "Phone Number" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.Pressable, { style: styles.row, onPress: focusInput, children: [
+      dialPressable,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: styles.slots, pointerEvents: "none", children: Array.from({ length: MAX_DIGITS }, (_, i) => {
+        const char = digits[i];
+        const isFocused = focused && i === activeIndex;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: styles.slot, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native2.Text,
+          {
+            style: [
+              styles.slotChar,
+              isFocused ? styles.slotCharFocused : null
+            ],
+            children: char ?? "_"
+          }
+        ) }, i);
+      }) }),
+      trailing,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_bottom_sheet.BottomSheetTextInput,
+        {
+          ref: inputRef,
+          style: styles.hiddenInput,
+          value: digits,
+          onChangeText: (text) => onChangeText(text.replace(/\D/g, "").slice(0, MAX_DIGITS)),
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          keyboardType: "phone-pad",
+          autoComplete: "tel",
+          textContentType: "telephoneNumber",
+          maxLength: MAX_DIGITS,
+          caretHidden: true
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/sheet/CountryPickerSheet.tsx
+var import_react3 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+
+// src/theme/listStyles.ts
+var import_react_native3 = require("react-native");
+function createSelectableRowStyles(theme) {
+  const { colors, spacing: spacing2 } = theme;
+  return import_react_native3.StyleSheet.create({
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: spacing2.md,
+      borderBottomWidth: import_react_native3.StyleSheet.hairlineWidth,
+      borderBottomColor: colors.outlineVariant,
+      gap: spacing2.md
+    },
+    rowSelected: {
+      borderBottomColor: colors.primaryContainer
+    },
+    label: {
+      color: colors.onSurface,
+      fontSize: 16,
+      fontWeight: "500",
+      flexShrink: 1
+    },
+    labelSelected: {
+      color: colors.primaryContainer,
+      fontWeight: "600"
+    },
+    sublabel: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14
+    }
+  });
+}
+
+// src/sheet/CountryPickerSheet.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CountryPickerSheet({
+  visible,
+  onClose
+}) {
+  const { theme, countries, selectedCountry, setSelectedCountry } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const [query, setQuery] = (0, import_react3.useState)("");
+  const rowStyles = createSelectableRowStyles(theme);
+  (0, import_react3.useEffect)(() => {
+    if (!visible) setQuery("");
+  }, [visible]);
+  const filtered = (0, import_react3.useMemo)(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return countries;
+    return countries.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase().includes(q) || c.dialCode.includes(q)
+    );
+  }, [countries, query]);
+  const styles = import_react_native4.StyleSheet.create({
+    root: {
+      flex: 1,
+      justifyContent: "flex-end",
+      backgroundColor: colors.overlay
+    },
+    sheet: {
+      backgroundColor: colors.surface,
+      borderTopLeftRadius: radius2.xl,
+      borderTopRightRadius: radius2.xl,
+      paddingHorizontal: spacing2.gutter,
+      paddingTop: spacing2.md,
+      paddingBottom: Math.max(insets.bottom, spacing2.md),
+      maxHeight: "85%",
+      minHeight: 320
+    },
+    handle: {
+      width: 48,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.surfaceContainerHighest,
+      alignSelf: "center",
+      marginBottom: spacing2.md
+    },
+    search: {
+      backgroundColor: colors.surfaceContainerHigh,
+      borderRadius: radius2.lg,
+      paddingHorizontal: spacing2.md,
+      minHeight: 48,
+      fontSize: 16,
+      lineHeight: 22,
+      color: colors.onSurface,
+      marginBottom: spacing2.md
+    },
+    list: {
+      flexGrow: 1,
+      flexShrink: 1
+    },
+    nameRow: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.md,
+      minWidth: 0
+    },
+    flag: {
+      fontSize: 24,
+      flexShrink: 0
+    },
+    dial: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      fontFamily: "monospace",
+      flexShrink: 0,
+      marginLeft: spacing2.sm
+    },
+    empty: {
+      color: colors.onSurfaceVariant,
+      textAlign: "center",
+      paddingVertical: spacing2.lg
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native4.Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        import_react_native4.KeyboardAvoidingView,
+        {
+          style: styles.root,
+          behavior: import_react_native4.Platform.OS === "ios" ? "padding" : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Pressable, { style: import_react_native4.StyleSheet.absoluteFill, onPress: onClose }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.sheet, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles.handle }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_react_native4.TextInput,
+                {
+                  style: styles.search,
+                  placeholder: "Search country",
+                  placeholderTextColor: colors.onSurfaceVariant,
+                  value: query,
+                  onChangeText: setQuery,
+                  autoCorrect: false,
+                  autoCapitalize: "none",
+                  clearButtonMode: "while-editing",
+                  returnKeyType: "search"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_react_native4.FlatList,
+                {
+                  style: styles.list,
+                  data: filtered,
+                  keyExtractor: (item) => item.id,
+                  keyboardShouldPersistTaps: "handled",
+                  keyboardDismissMode: "on-drag",
+                  renderItem: ({ item }) => {
+                    const selected = selectedCountry?.id === item.id;
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      import_react_native4.Pressable,
+                      {
+                        style: [rowStyles.row, selected && rowStyles.rowSelected],
+                        onPress: () => {
+                          setSelectedCountry(item);
+                          onClose();
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.nameRow, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.flag, children: item.flag }),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              import_react_native4.Text,
+                              {
+                                style: [
+                                  rowStyles.label,
+                                  selected && rowStyles.labelSelected
+                                ],
+                                numberOfLines: 1,
+                                ellipsizeMode: "tail",
+                                children: item.name
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.Text, { style: styles.dial, children: [
+                            "+",
+                            item.dialCode
+                          ] })
+                        ]
+                      }
+                    );
+                  },
+                  ListEmptyComponent: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.empty, children: "No countries match" })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/sheet/CurrencyPickerSheet.tsx
+var import_react_native5 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CurrencyPickerSheet({
+  visible,
+  currencies,
+  selectedCode,
+  onSelect,
+  onClose
+}) {
+  const { theme } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  const rowStyles = createSelectableRowStyles(theme);
+  const styles = import_react_native5.StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: colors.overlay,
+      justifyContent: "flex-end"
+    },
+    sheet: {
+      backgroundColor: colors.surface,
+      borderTopLeftRadius: radius2.xl,
+      borderTopRightRadius: radius2.xl,
+      maxHeight: "50%",
+      paddingHorizontal: spacing2.gutter,
+      paddingTop: spacing2.md,
+      paddingBottom: insets.bottom + spacing2.md
+    },
+    handle: {
+      width: 48,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.surfaceContainerHighest,
+      alignSelf: "center",
+      marginBottom: spacing2.md
+    },
+    title: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600",
+      marginBottom: spacing2.md
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native5.Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Pressable, { style: styles.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.Pressable, { style: styles.sheet, onPress: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: styles.handle }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: styles.title, children: "Select currency" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_native5.FlatList,
+          {
+            data: currencies,
+            keyExtractor: (item) => item.code,
+            keyboardShouldPersistTaps: "handled",
+            renderItem: ({ item }) => {
+              const selected = selectedCode === item.code;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_react_native5.Pressable,
+                {
+                  style: [rowStyles.row, selected && rowStyles.rowSelected],
+                  onPress: () => onSelect(item.code),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    import_react_native5.Text,
+                    {
+                      style: [rowStyles.label, selected && rowStyles.labelSelected],
+                      children: item.code
+                    }
+                  )
+                }
+              );
+            }
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+// src/sheet/steps/PaymentStep.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PaymentStep() {
+  const {
+    theme,
+    balance,
+    selectedBundle,
+    selectedCountry,
+    selectedCurrencyCode,
+    setSelectedCurrencyCode,
+    phoneNational,
+    setPhoneNational,
+    predict,
+    predictLoading,
+    predictError,
+    quote,
+    quoteLoading,
+    quoteError,
+    goToOffer,
+    submitDeposit
+  } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const [countryPickerOpen, setCountryPickerOpen] = (0, import_react4.useState)(false);
+  const [currencyPickerOpen, setCurrencyPickerOpen] = (0, import_react4.useState)(false);
+  const currencyOptions = (0, import_react4.useMemo)(() => {
+    if (predict?.currencies?.length) {
+      return predict.currencies;
+    }
+    return selectedCountry?.currencies ?? [];
+  }, [predict, selectedCountry]);
+  const showCurrencyPicker = currencyOptions.length > 1;
+  const formattedQuote = quote ? formatCurrencyAmount(quote.totalLocal, quote.currencyCode) : null;
+  const buyLabel = quote ? `Buy ${formattedQuote}` : quoteLoading ? "Loading\u2026" : selectedBundle ? `Buy ${formatUsd(selectedBundle.priceUsd)}` : "Buy";
+  const styles = import_react_native6.StyleSheet.create({
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: spacing2.lg
+    },
+    headerLeft: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm,
+      flex: 1
+    },
+    backBtn: {
+      width: 40,
+      height: 40,
+      borderRadius: radius2.full,
+      backgroundColor: colors.surfaceContainer,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    headerTitle: {
+      color: colors.onSurface,
+      fontSize: 24,
+      fontWeight: "600",
+      flexShrink: 1
+    },
+    balanceChip: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.xs,
+      backgroundColor: colors.surfaceContainer,
+      paddingHorizontal: spacing2.sm,
+      paddingVertical: spacing2.xs,
+      borderRadius: radius2.full
+    },
+    balanceChipText: {
+      color: colors.primary,
+      fontSize: 12,
+      fontWeight: "500"
+    },
+    dialBtn: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.xs
+    },
+    dialText: {
+      color: colors.primaryContainer,
+      fontSize: 22,
+      fontWeight: "700"
+    },
+    providerText: {
+      color: colors.primaryContainer,
+      fontSize: 14,
+      fontWeight: "500",
+      marginTop: spacing2.sm
+    },
+    providerError: {
+      color: colors.error,
+      fontSize: 14,
+      marginTop: spacing2.sm
+    },
+    payCard: {
+      backgroundColor: colors.surfaceContainerLow,
+      borderRadius: radius2.xl,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      padding: spacing2.md,
+      marginTop: spacing2.lg
+    },
+    payRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: spacing2.md
+    },
+    currencyBtn: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.xs
+    },
+    currencyCode: {
+      color: colors.primaryContainer,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    amountText: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    cta: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingVertical: spacing2.md,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing2.sm
+    },
+    ctaDisabled: { opacity: 0.5 },
+    ctaText: {
+      color: colors.onPrimaryContainer,
+      fontSize: 16,
+      fontWeight: "600"
+    },
+    quoteError: {
+      color: colors.error,
+      fontSize: 12,
+      marginBottom: spacing2.sm
+    }
+  });
+  const canSubmit = !!predict && !!quote && !quoteLoading && !predictLoading && phoneNational.replace(/\D/g, "").length >= 6;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles.headerLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Pressable, { style: styles.backBtn, onPress: goToOffer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "arrow-back", size: 22, color: colors.onSurfaceVariant }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.headerTitle, numberOfLines: 1, children: selectedBundle?.label ?? "Top-up Balance" })
+      ] }),
+      balance !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles.balanceChip, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "bolt", size: 16, color: colors.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.balanceChipText, children: balance.toLocaleString() })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PhoneDigitInput,
+      {
+        theme,
+        value: phoneNational,
+        onChangeText: setPhoneNational,
+        dialPressable: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_react_native6.Pressable,
+          {
+            style: styles.dialBtn,
+            onPress: () => setCountryPickerOpen(true),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.Text, { style: styles.dialText, children: [
+                "+",
+                selectedCountry?.dialCode ?? "\u2026"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "expand-more", size: 24, color: colors.primaryContainer })
+            ]
+          }
+        ),
+        trailing: predict && !predictLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check-circle", size: 24, color: colors.primary }) : predictLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.ActivityIndicator, { color: colors.primary, size: "small" }) : null
+      }
+    ),
+    predict ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.providerText, children: predict.provider.displayName }) : predictError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.providerError, children: predictError }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles.payCard, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles.payRow, children: [
+        showCurrencyPicker ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_react_native6.Pressable,
+          {
+            style: styles.currencyBtn,
+            onPress: () => setCurrencyPickerOpen(true),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.currencyCode, children: selectedCurrencyCode ?? "\u2014" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "expand-more", size: 20, color: colors.primaryContainer })
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.currencyCode, children: selectedCurrencyCode ?? quote?.currencyCode ?? "USD" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.amountText, children: formattedQuote ?? (selectedBundle ? formatUsd(selectedBundle.priceUsd) : "\u2014") })
+      ] }),
+      quoteError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.quoteError, children: quoteError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        import_react_native6.Pressable,
+        {
+          style: [styles.cta, !canSubmit && styles.ctaDisabled],
+          onPress: () => void submitDeposit(),
+          disabled: !canSubmit,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "lock", size: 18, color: colors.onPrimaryContainer }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles.ctaText, children: buyLabel })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      CountryPickerSheet,
+      {
+        visible: countryPickerOpen,
+        onClose: () => setCountryPickerOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      CurrencyPickerSheet,
+      {
+        visible: currencyPickerOpen,
+        currencies: currencyOptions,
+        selectedCode: selectedCurrencyCode,
+        onSelect: (code) => {
+          setSelectedCurrencyCode(code);
+          setCurrencyPickerOpen(false);
+        },
+        onClose: () => setCurrencyPickerOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/sheet/steps/ResultStep.tsx
+var import_react6 = require("react");
+var import_react_native8 = require("react-native");
+
+// src/components/ProcessingSpinner.tsx
+var import_react5 = require("react");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ProcessingSpinner({
+  theme,
+  size = 64
+}) {
+  const { colors } = theme;
+  const spin = (0, import_react5.useRef)(new import_react_native7.Animated.Value(0)).current;
+  (0, import_react5.useEffect)(() => {
+    const loop = import_react_native7.Animated.loop(
+      import_react_native7.Animated.timing(spin, {
+        toValue: 1,
+        duration: 900,
+        easing: import_react_native7.Easing.linear,
+        useNativeDriver: true
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin]);
+  const rotate = spin.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  const ring = size;
+  const stroke = 4;
+  const styles = import_react_native7.StyleSheet.create({
+    wrap: {
+      width: ring,
+      height: ring,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    ring: {
+      position: "absolute",
+      width: ring,
+      height: ring,
+      borderRadius: ring / 2,
+      borderWidth: stroke,
+      borderColor: colors.surfaceContainerHighest,
+      borderTopColor: colors.primary
+    },
+    icon: {
+      position: "absolute",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles.wrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Animated.View, { style: [styles.ring, { transform: [{ rotate }] }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "lock", size: Math.round(size * 0.38), color: colors.primary }) })
+  ] });
+}
+
+// src/sheet/steps/ResultStep.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ResultStep() {
+  const {
+    theme,
+    resultPhase,
+    selectedBundle,
+    deposit,
+    failureReason,
+    depositError,
+    closeTopUp,
+    retryPayment
+  } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const scale = (0, import_react6.useRef)(new import_react_native8.Animated.Value(0)).current;
+  (0, import_react6.useEffect)(() => {
+    if (resultPhase === "success") {
+      scale.setValue(0);
+      import_react_native8.Animated.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true,
+        friction: 6
+      }).start();
+    }
+  }, [resultPhase, scale]);
+  const styles = import_react_native8.StyleSheet.create({
+    container: {
+      alignItems: "center",
+      paddingVertical: spacing2.xl
+    },
+    spinnerWrap: {
+      marginBottom: spacing2.lg
+    },
+    title: {
+      color: colors.onSurface,
+      fontSize: 20,
+      fontWeight: "600",
+      textAlign: "center"
+    },
+    titlePulse: {
+      opacity: 0.9
+    },
+    subtitle: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginTop: spacing2.xs,
+      textAlign: "center"
+    },
+    successIcon: {
+      width: 80,
+      height: 80,
+      borderRadius: radius2.full,
+      backgroundColor: `${colors.success}20`,
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: spacing2.lg
+    },
+    failIcon: {
+      width: 80,
+      height: 80,
+      borderRadius: radius2.full,
+      backgroundColor: `${colors.error}20`,
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: spacing2.lg
+    },
+    doneBtn: {
+      backgroundColor: colors.surfaceContainerHigh,
+      borderRadius: radius2.full,
+      paddingHorizontal: spacing2.xl,
+      paddingVertical: spacing2.sm,
+      marginTop: spacing2.lg
+    },
+    doneText: {
+      color: colors.onSurface,
+      fontSize: 12,
+      fontWeight: "500",
+      letterSpacing: 0.5
+    },
+    retryBtn: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingHorizontal: spacing2.xl,
+      paddingVertical: spacing2.sm,
+      marginTop: spacing2.md
+    },
+    retryText: {
+      color: colors.onPrimaryContainer,
+      fontSize: 14,
+      fontWeight: "600"
+    }
+  });
+  if (resultPhase === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: styles.spinnerWrap, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProcessingSpinner, { theme, size: 64 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: [styles.title, styles.titlePulse], children: "Processing payment..." }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.subtitle, children: "Please authorize on your device" })
+    ] });
+  }
+  if (resultPhase === "failure") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: styles.failIcon, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "error-outline", size: 48, color: colors.error }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.title, children: "Payment failed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.subtitle, children: failureReason ?? depositError ?? "Something went wrong" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Pressable, { style: styles.retryBtn, onPress: retryPayment, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.retryText, children: "Try again" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Pressable, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.doneText, children: "Dismiss" }) })
+    ] });
+  }
+  const credits = deposit?.credits ?? selectedBundle?.credits ?? 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Animated.View, { style: [styles.successIcon, { transform: [{ scale }] }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check-circle", size: 48, color: colors.success }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.title, children: "Top-up Successful" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.Text, { style: styles.subtitle, children: [
+      formatCredits(credits),
+      " credits have been added to your balance."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Pressable, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.doneText, children: "Done" }) })
+  ] });
+}
+
+// src/sheet/TopUpBottomSheet.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function TopUpBottomSheet() {
+  const { theme, sheetOpen, step, closeTopUp } = useJaza();
+  const { colors, spacing: spacing2 } = theme;
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const ref = (0, import_react7.useRef)(null);
+  const snapPoints = (0, import_react7.useMemo)(() => ["92%"], []);
+  const renderBackdrop = (0, import_react7.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_bottom_sheet2.BottomSheetBackdrop,
+      {
+        ...props,
+        disappearsOnIndex: -1,
+        appearsOnIndex: 0,
+        opacity: 0.6,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
+  const styles = import_react_native9.StyleSheet.create({
+    root: {
+      flex: 1
+    },
+    handle: {
+      width: 48,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.surfaceContainerHighest,
+      alignSelf: "center",
+      marginTop: spacing2.sm,
+      marginBottom: spacing2.md
+    },
+    content: {
+      paddingHorizontal: spacing2.gutter,
+      paddingBottom: insets.bottom + spacing2.xl
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_native9.Modal,
+    {
+      visible: sheetOpen,
+      transparent: true,
+      animationType: "fade",
+      statusBarTranslucent: true,
+      onRequestClose: closeTopUp,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_bottom_sheet2.default,
+        {
+          ref,
+          index: 0,
+          snapPoints,
+          enablePanDownToClose: true,
+          onClose: closeTopUp,
+          backdropComponent: renderBackdrop,
+          keyboardBehavior: "interactive",
+          keyboardBlurBehavior: "restore",
+          android_keyboardInputMode: "adjustResize",
+          backgroundStyle: { backgroundColor: colors.surface },
+          handleComponent: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.View, { style: styles.handle }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            import_bottom_sheet2.BottomSheetScrollView,
+            {
+              keyboardShouldPersistTaps: "handled",
+              contentContainerStyle: styles.content,
+              children: [
+                step === "offer" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OfferStep, {}) : null,
+                step === "payment" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PaymentStep, {}) : null,
+                step === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ResultStep, {}) : null
+              ]
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+
+// src/provider/JazaProvider.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PREDICT_DEBOUNCE_MS = 500;
+var POLL_INTERVAL_MS = 2e3;
+var POLL_TIMEOUT_MS = 12e4;
+function JazaProvider({
+  publishableKey,
+  apiBaseUrl,
+  getBalance,
+  onTopUpComplete,
+  theme: themePreference = "system",
+  children
+}) {
+  const client = (0, import_react8.useMemo)(
+    () => new PublicClient({ publishableKey, apiBaseUrl }),
+    [publishableKey, apiBaseUrl]
+  );
+  const [systemScheme, setSystemScheme] = (0, import_react8.useState)(
+    () => {
+      const scheme = import_react_native10.Appearance.getColorScheme();
+      return scheme === "dark" ? "dark" : "light";
+    }
+  );
+  (0, import_react8.useEffect)(() => {
+    const sub = import_react_native10.Appearance.addChangeListener(({ colorScheme }) => {
+      setSystemScheme(colorScheme === "dark" ? "dark" : "light");
+    });
+    return () => sub.remove();
+  }, []);
+  const theme = (0, import_react8.useMemo)(
+    () => resolveTheme(themePreference, systemScheme),
+    [themePreference, systemScheme]
+  );
+  const [balance, setBalance] = (0, import_react8.useState)(null);
+  const [balanceLoading, setBalanceLoading] = (0, import_react8.useState)(false);
+  const [balanceError, setBalanceError] = (0, import_react8.useState)(null);
+  const refreshBalance = (0, import_react8.useCallback)(async () => {
+    setBalanceLoading(true);
+    setBalanceError(null);
+    try {
+      const value2 = await getBalance();
+      setBalance(value2);
+    } catch (err) {
+      setBalanceError(
+        err instanceof Error ? err.message : "Failed to load balance"
+      );
+    } finally {
+      setBalanceLoading(false);
+    }
+  }, [getBalance]);
+  (0, import_react8.useEffect)(() => {
+    void refreshBalance();
+  }, [refreshBalance]);
+  const [sheetOpen, setSheetOpen] = (0, import_react8.useState)(false);
+  const [step, setStep] = (0, import_react8.useState)("offer");
+  const [resultPhase, setResultPhase] = (0, import_react8.useState)("loading");
+  const [topUpToken, setTopUpToken] = (0, import_react8.useState)(null);
+  const [bundles, setBundles] = (0, import_react8.useState)([]);
+  const [bundlesLoading, setBundlesLoading] = (0, import_react8.useState)(false);
+  const [bundlesError, setBundlesError] = (0, import_react8.useState)(null);
+  const [selectedBundle, setSelectedBundle] = (0, import_react8.useState)(null);
+  const [countries, setCountries] = (0, import_react8.useState)([]);
+  const [selectedCountry, setSelectedCountryState] = (0, import_react8.useState)(null);
+  const [selectedCurrencyCode, setSelectedCurrencyCode] = (0, import_react8.useState)(null);
+  const [phoneNational, setPhoneNational] = (0, import_react8.useState)("");
+  const [predict, setPredict] = (0, import_react8.useState)(
+    null
+  );
+  const [predictLoading, setPredictLoading] = (0, import_react8.useState)(false);
+  const [predictError, setPredictError] = (0, import_react8.useState)(null);
+  const [quote, setQuote] = (0, import_react8.useState)(null);
+  const [quoteLoading, setQuoteLoading] = (0, import_react8.useState)(false);
+  const [quoteError, setQuoteError] = (0, import_react8.useState)(null);
+  const [deposit, setDeposit] = (0, import_react8.useState)(null);
+  const [depositError, setDepositError] = (0, import_react8.useState)(null);
+  const [failureReason, setFailureReason] = (0, import_react8.useState)(null);
+  const predictTimer = (0, import_react8.useRef)(null);
+  const pollTimer = (0, import_react8.useRef)(null);
+  const pollStarted = (0, import_react8.useRef)(null);
+  const clearPoll = (0, import_react8.useCallback)(() => {
+    if (pollTimer.current) {
+      clearInterval(pollTimer.current);
+      pollTimer.current = null;
+    }
+    pollStarted.current = null;
+  }, []);
+  const resetPaymentState = (0, import_react8.useCallback)(() => {
+    setPredict(null);
+    setPredictError(null);
+    setQuote(null);
+    setQuoteError(null);
+    setDeposit(null);
+    setDepositError(null);
+    setFailureReason(null);
+    setResultPhase("loading");
+  }, []);
+  const setSelectedCountry = (0, import_react8.useCallback)((country) => {
+    setSelectedCountryState(country);
+    setPhoneNational("");
+    setPredict(null);
+    setPredictError(null);
+    if (country && country.currencies.length > 0) {
+      const codes = country.currencies.map((c) => c.code);
+      setSelectedCurrencyCode(pickDefaultCurrencyCode(codes));
+    } else {
+      setSelectedCurrencyCode(null);
+    }
+  }, []);
+  const loadSessionData = (0, import_react8.useCallback)(async () => {
+    setBundlesLoading(true);
+    setBundlesError(null);
+    try {
+      const [bundleList, catalogCountries] = await Promise.all([
+        client.listBundles(),
+        client.listCountries()
+      ]);
+      const active = bundleList.filter((b) => b.isActive).sort((a, b) => a.sortOrder - b.sortOrder);
+      setBundles(active);
+      if (active.length > 0) {
+        setSelectedBundle(active[0]);
+      } else {
+        setSelectedBundle(null);
+      }
+      const enriched = enrichCountries(catalogCountries);
+      setCountries(enriched);
+      if (enriched.length > 0) {
+        setSelectedCountryState((prev) => {
+          if (prev) return prev;
+          return enriched.find((c) => c.iso2 === "CD") ?? enriched[0];
+        });
+        setSelectedCurrencyCode((prev) => {
+          if (prev) return prev;
+          const country = enriched.find((c) => c.iso2 === "CD") ?? enriched[0];
+          const codes = country.currencies.map((c) => c.code);
+          return pickDefaultCurrencyCode(codes);
+        });
+      }
+    } catch (err) {
+      setBundles([]);
+      setSelectedBundle(null);
+      setBundlesError(
+        err instanceof Error ? err.message : "Failed to load bundles"
+      );
+    } finally {
+      setBundlesLoading(false);
+    }
+  }, [client]);
+  const openTopUp = (0, import_react8.useCallback)(
+    async (token) => {
+      client.setTopUpToken(token);
+      setTopUpToken(token);
+      setStep("offer");
+      resetPaymentState();
+      setSelectedCountryState(null);
+      setSelectedCurrencyCode(null);
+      setPhoneNational("");
+      setBundlesError(null);
+      setSheetOpen(true);
+      void loadSessionData();
+      void refreshBalance();
+    },
+    [client, loadSessionData, refreshBalance, resetPaymentState]
+  );
+  const closeTopUp = (0, import_react8.useCallback)(() => {
+    clearPoll();
+    setSheetOpen(false);
+    client.setTopUpToken(null);
+    setTopUpToken(null);
+    setStep("offer");
+    resetPaymentState();
+  }, [clearPoll, client, resetPaymentState]);
+  const goToOffer = (0, import_react8.useCallback)(() => {
+    clearPoll();
+    setStep("offer");
+    resetPaymentState();
+  }, [clearPoll, resetPaymentState]);
+  const goToPayment = (0, import_react8.useCallback)(() => {
+    setStep("payment");
+    resetPaymentState();
+  }, [resetPaymentState]);
+  const startPoll = (0, import_react8.useCallback)(
+    (depositId, credits) => {
+      clearPoll();
+      pollStarted.current = Date.now();
+      pollTimer.current = setInterval(() => {
+        void (async () => {
+          if (pollStarted.current && Date.now() - pollStarted.current > POLL_TIMEOUT_MS) {
+            clearPoll();
+            setResultPhase("failure");
+            setFailureReason("Payment timed out. Please try again.");
+            return;
+          }
+          try {
+            const updated = await client.getDeposit(depositId);
+            setDeposit(updated);
+            if (updated.status === "COMPLETED") {
+              clearPoll();
+              setResultPhase("success");
+              await refreshBalance();
+              onTopUpComplete?.({
+                depositId: updated.id,
+                credits,
+                status: updated.status
+              });
+            } else if (isDepositTerminal(updated.status)) {
+              clearPoll();
+              setResultPhase("failure");
+              setFailureReason(
+                updated.failureReason ?? `Payment ${updated.status.toLowerCase()}`
+              );
+            }
+          } catch {
+          }
+        })();
+      }, POLL_INTERVAL_MS);
+    },
+    [clearPoll, client, onTopUpComplete, refreshBalance]
+  );
+  const submitDeposit = (0, import_react8.useCallback)(async () => {
+    if (!selectedBundle || !predict || !quote || !selectedCountry) return;
+    const e164 = buildE164(selectedCountry.dialCode, phoneNational);
+    setStep("processing");
+    setResultPhase("loading");
+    setDepositError(null);
+    try {
+      const created = await client.createDeposit({
+        bundleId: selectedBundle.id,
+        currencyCode: quote.currencyCode,
+        paymentGatewayCode: predict.provider.code,
+        phoneNumber: e164
+      });
+      setDeposit(created);
+      if (created.status === "COMPLETED") {
+        setResultPhase("success");
+        await refreshBalance();
+        onTopUpComplete?.({
+          depositId: created.id,
+          credits: created.credits,
+          status: created.status
+        });
+        return;
+      }
+      if (isDepositTerminal(created.status)) {
+        setResultPhase("failure");
+        setFailureReason(
+          created.failureReason ?? `Payment ${created.status.toLowerCase()}`
+        );
+        return;
+      }
+      startPoll(created.id, created.credits);
+    } catch (err) {
+      setResultPhase("failure");
+      setDepositError(
+        err instanceof Error ? err.message : "Failed to start payment"
+      );
+      setFailureReason(
+        err instanceof Error ? err.message : "Failed to start payment"
+      );
+    }
+  }, [
+    client,
+    onTopUpComplete,
+    phoneNational,
+    predict,
+    quote,
+    refreshBalance,
+    selectedBundle,
+    selectedCountry,
+    startPoll
+  ]);
+  const retryPayment = (0, import_react8.useCallback)(() => {
+    clearPoll();
+    setStep("payment");
+    setResultPhase("loading");
+    setDepositError(null);
+    setFailureReason(null);
+  }, [clearPoll]);
+  (0, import_react8.useEffect)(() => {
+    if (step !== "payment" || !selectedCountry) return;
+    const digits = phoneNational.replace(/\D/g, "");
+    if (digits.length < 6) {
+      setPredict(null);
+      setPredictError(null);
+      return;
+    }
+    if (predictTimer.current) clearTimeout(predictTimer.current);
+    predictTimer.current = setTimeout(() => {
+      void (async () => {
+        setPredictLoading(true);
+        setPredictError(null);
+        try {
+          const e164 = buildE164(selectedCountry.dialCode, phoneNational);
+          const result = await client.predictProvider(e164);
+          setPredict(result);
+          const codes = result.currencies.map((c) => c.code);
+          if (selectedCurrencyCode && codes.includes(selectedCurrencyCode)) {
+          } else {
+            setSelectedCurrencyCode(pickDefaultCurrencyCode(codes));
+          }
+        } catch (err) {
+          setPredict(null);
+          setPredictError(
+            err instanceof Error ? err.message : "Could not detect provider"
+          );
+        } finally {
+          setPredictLoading(false);
+        }
+      })();
+    }, PREDICT_DEBOUNCE_MS);
+    return () => {
+      if (predictTimer.current) clearTimeout(predictTimer.current);
+    };
+  }, [
+    client,
+    phoneNational,
+    selectedCountry,
+    selectedCurrencyCode,
+    step
+  ]);
+  (0, import_react8.useEffect)(() => {
+    if (step !== "payment" || !selectedBundle || !predict || !selectedCurrencyCode) {
+      setQuote(null);
+      return;
+    }
+    void (async () => {
+      setQuoteLoading(true);
+      setQuoteError(null);
+      try {
+        const q = await client.quotePayment({
+          bundleId: selectedBundle.id,
+          currencyCode: selectedCurrencyCode,
+          paymentGatewayCode: predict.provider.code
+        });
+        setQuote(q);
+      } catch (err) {
+        setQuote(null);
+        setQuoteError(
+          err instanceof Error ? err.message : "Could not load quote"
+        );
+      } finally {
+        setQuoteLoading(false);
+      }
+    })();
+  }, [client, predict, selectedBundle, selectedCurrencyCode, step]);
+  (0, import_react8.useEffect)(() => () => clearPoll(), [clearPoll]);
+  const value = (0, import_react8.useMemo)(
+    () => ({
+      theme,
+      themePreference,
+      publishableKey,
+      client,
+      balance,
+      balanceLoading,
+      balanceError,
+      refreshBalance,
+      sheetOpen,
+      step,
+      resultPhase,
+      topUpToken,
+      bundles,
+      bundlesLoading,
+      bundlesError,
+      selectedBundle,
+      setSelectedBundle,
+      countries,
+      selectedCountry,
+      setSelectedCountry,
+      selectedCurrencyCode,
+      setSelectedCurrencyCode,
+      phoneNational,
+      setPhoneNational,
+      predict,
+      predictLoading,
+      predictError,
+      quote,
+      quoteLoading,
+      quoteError,
+      deposit,
+      depositError,
+      failureReason,
+      openTopUp,
+      closeTopUp,
+      goToOffer,
+      goToPayment,
+      submitDeposit,
+      retryPayment,
+      onTopUpComplete
+    }),
+    [
+      theme,
+      themePreference,
+      publishableKey,
+      client,
+      balance,
+      balanceLoading,
+      balanceError,
+      refreshBalance,
+      sheetOpen,
+      step,
+      resultPhase,
+      topUpToken,
+      bundles,
+      bundlesLoading,
+      bundlesError,
+      selectedBundle,
+      countries,
+      selectedCountry,
+      setSelectedCountry,
+      selectedCurrencyCode,
+      phoneNational,
+      predict,
+      predictLoading,
+      predictError,
+      quote,
+      quoteLoading,
+      quoteError,
+      deposit,
+      depositError,
+      failureReason,
+      openTopUp,
+      closeTopUp,
+      goToOffer,
+      goToPayment,
+      submitDeposit,
+      retryPayment,
+      onTopUpComplete
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(JazaContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopUpBottomSheet, {})
+  ] });
+}
+
+// src/widgets/JazaBalanceWidget.tsx
+var import_react9 = require("react");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function JazaBalanceWidget({ style }) {
+  const { theme, balance, balanceLoading, balanceError, refreshBalance } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  (0, import_react9.useEffect)(() => {
+    void refreshBalance();
+  }, [refreshBalance]);
+  const styles = import_react_native11.StyleSheet.create({
+    card: {
+      backgroundColor: colors.surfaceContainer,
+      borderRadius: radius2.xl,
+      padding: spacing2.md,
+      ...style
+    },
+    label: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginBottom: spacing2.xs
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm
+    },
+    value: {
+      color: colors.onSurface,
+      fontSize: 48,
+      fontWeight: "700",
+      letterSpacing: -1
+    },
+    error: {
+      color: colors.error,
+      fontSize: 14,
+      marginTop: spacing2.xs
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: styles.card, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.label, children: "Current Balance" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: styles.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "bolt", size: 28, color: colors.primary }),
+      balanceLoading && balance === null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.ActivityIndicator, { color: colors.primary }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.value, children: balance !== null ? formatCredits(balance) : "\u2014" })
+    ] }),
+    balanceError ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.error, children: balanceError }) : null
+  ] });
+}
+
+// src/widgets/JazaTopUpButton.tsx
+var import_react10 = require("react");
+var import_react_native12 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function JazaTopUpButton({
+  onRequestToken,
+  label = "Top up credits",
+  style
+}) {
+  const { theme, openTopUp } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const styles = import_react_native12.StyleSheet.create({
+    button: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingVertical: spacing2.md,
+      paddingHorizontal: spacing2.lg,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing2.sm,
+      ...style
+    },
+    pressed: { opacity: 0.9, transform: [{ scale: 0.98 }] },
+    label: {
+      color: colors.onPrimaryContainer,
+      fontSize: 16,
+      fontWeight: "600"
+    },
+    error: {
+      color: colors.error,
+      fontSize: 12,
+      marginTop: spacing2.xs,
+      textAlign: "center"
+    }
+  });
+  const handlePress = async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const token = await onRequestToken();
+      if (!token?.trim()) {
+        throw new Error("Top-up token was empty");
+      }
+      await openTopUp(token.trim());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not start top-up");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_native12.Pressable,
+      {
+        style: ({ pressed }) => [styles.button, pressed && styles.pressed],
+        onPress: () => void handlePress(),
+        disabled: loading,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.ActivityIndicator, { color: colors.onPrimaryContainer }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.Text, { style: styles.label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
+        ] })
+      }
+    ),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.Text, { style: styles.error, children: error }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_API_BASE_URL,
+  DIAL_CODES,
+  JazaBalanceWidget,
+  JazaProvider,
+  JazaSdkError,
+  JazaTopUpButton,
+  PublicClient,
+  VERSION,
+  buildE164,
+  darkTheme,
+  enrichCountries,
+  formatCredits,
+  formatCurrencyAmount,
+  formatLocalAmount,
+  formatUsd,
+  getDialCode,
+  isDepositTerminal,
+  iso2ToFlag,
+  lightTheme,
+  pickDefaultCurrencyCode,
+  useJaza
+});
+//# sourceMappingURL=index.cjs.map