@miden-npm/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1865 @@
+"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, {
+  BzpCheckoutButton: () => BzpCheckoutButton,
+  BzpCheckoutCard: () => BzpCheckoutCard,
+  BzpCheckoutIframe: () => BzpCheckoutIframe,
+  MidenPGClient: () => MidenPGClient,
+  MidenPGProvider: () => MidenPGProvider,
+  useMidenPGClient: () => useMidenPGClient,
+  usePaymentIntents: () => usePaymentIntents
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client.ts
+var MidenPGClient = class {
+  constructor(cfg) {
+    this.cfg = cfg;
+    this.base = cfg.apiBaseUrl ?? "https://api.buzapay.com";
+  }
+  async createPaymentIntent(params) {
+    const res = await fetch(`${this.base}/v1/payment_intents`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Publishable-Key": this.cfg.publishableKey
+      },
+      body: JSON.stringify(params)
+    });
+    if (!res.ok) throw new Error(`Failed to create PI: ${res.status}`);
+    return res.json();
+  }
+  async confirmCardPayment(params) {
+    const res = await fetch(`${this.base}/v1/payment_intents/confirm`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Publishable-Key": this.cfg.publishableKey
+      },
+      body: JSON.stringify(params)
+    });
+    if (!res.ok) throw new Error(`Failed to confirm: ${res.status}`);
+    return res.json();
+  }
+};
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Ctx = (0, import_react.createContext)(null);
+var MidenPGProvider = ({ config, children }) => {
+  const client = (0, import_react.useMemo)(
+    () => new MidenPGClient(config),
+    [config.publishableKey, config.apiBaseUrl]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: client, children });
+};
+var useMidenPGClient = () => {
+  const ctx = (0, import_react.useContext)(Ctx);
+  if (!ctx)
+    throw new Error("useMidenPGClient must be used within MidenPGProvider");
+  return ctx;
+};
+
+// src/hooks.ts
+var import_react2 = require("react");
+function usePaymentIntents() {
+  const client = useMidenPGClient();
+  const create = (0, import_react2.useCallback)(
+    (p) => client.createPaymentIntent(p),
+    [client]
+  );
+  const confirm = (0, import_react2.useCallback)(
+    (p) => client.confirmCardPayment(p),
+    [client]
+  );
+  return { create, confirm };
+}
+
+// src/buzapay-checkout/checkout-button.tsx
+var import_react6 = require("react");
+
+// src/utils/object.util.ts
+var checkObjectTruthy = (obj) => {
+  if (obj == null || typeof obj !== "object") return false;
+  return Object.values(obj).every(Boolean);
+};
+
+// src/utils/api.util.ts
+var getBaseUrl = (mode) => {
+  return mode === "sandbox" ? "https://sandbox-api.midencards.io/payment-gateway-api" : "";
+};
+
+// src/utils/string.util.ts
+var currencySign = (currency) => {
+  if (currency === "USD") return "$";
+  if (currency === "NGN") return "\u20A6";
+  if (currency === "EUR") return "\u20AC";
+  if (currency === "GBP") return "\xA3";
+  if (currency === "JPY") return "\xA5";
+  if (currency === "CNY") return "\xA5";
+  if (currency === "USDC" || currency === "usdc") return "$\u29EB";
+  if (currency === "USDT" || currency === "usdt") return "\u20AE";
+  return "$";
+};
+var formatAmount = (value, currency) => {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "0";
+  return `${currency ? currencySign(currency) : ""} ${num?.toLocaleString(
+    "en-US"
+  )}`;
+};
+var truncateString = (str, num) => {
+  if (str.length <= num) {
+    return str;
+  }
+  return str.slice(0, num) + "...";
+};
+
+// src/utils/input.util.ts
+var restrictToNumericKeys = (event) => {
+  const allowedKeys = [
+    "Backspace",
+    "Tab",
+    "ArrowLeft",
+    "ArrowRight",
+    "Delete",
+    "Home",
+    "End",
+    "."
+  ];
+  if ((event.ctrlKey || event.metaKey) && ["a", "c", "v", "x"].includes(event.key.toLowerCase())) {
+    return;
+  }
+  if (!allowedKeys.includes(event.key) && !/^\d$/.test(event.key)) {
+    event.preventDefault();
+  }
+  if (event.key === "." && event.target.value.includes(".")) {
+    event.preventDefault();
+  }
+};
+
+// src/apis/checkout.api.ts
+async function createPaymentLink(paymentObject, environment, secretKey) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/checkout/generate-payment-link2`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          merchantId: secretKey
+        },
+        body: JSON.stringify({
+          ...paymentObject,
+          LinkName: `${Date.now()}-Link`
+        })
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+
+// src/components/base/input-error.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BaseInputError({ errorMessage }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-0 text-body-3xs font-normal text-red-500", children: errorMessage });
+}
+
+// src/components/icons/icon-loader.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function IconLoader({
+  size = 24,
+  color = "currentColor",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      className: `animate-spin ${className}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      role: "img",
+      "aria-label": "loading",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: color,
+            strokeWidth: 4
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            className: "opacity-75",
+            fill: color,
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/icons/icon-chevron-left.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function IconChevronLeft({
+  width = 17,
+  height = 17,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 17 17",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "path",
+        {
+          d: "M10.5 14.28C10.3734 14.28 10.2467 14.2333 10.1467 14.1333L5.80002 9.78668C5.09335 9.08001 5.09335 7.92001 5.80002 7.21335L10.1467 2.86668C10.34 2.67335 10.66 2.67335 10.8534 2.86668C11.0467 3.06001 11.0467 3.38001 10.8534 3.57335L6.50669 7.92001C6.18669 8.24001 6.18669 8.76001 6.50669 9.08001L10.8534 13.4267C11.0467 13.62 11.0467 13.94 10.8534 14.1333C10.7534 14.2267 10.6267 14.28 10.5 14.28Z",
+          fill: color
+        }
+      )
+    }
+  );
+}
+
+// src/components/icons/icon-buzapay-icon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function IconBuzapayIcon({
+  width = 15,
+  height = 13,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 15 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M9.97919 0.5C10.8854 0.5 11.6276 0.585938 12.2057 0.757812C12.7891 0.924479 13.2188 1.22396 13.4948 1.65625C13.7761 2.08333 13.9167 2.6901 13.9167 3.47656C13.9167 4.1849 13.7526 4.77083 13.4245 5.23438C13.0964 5.69792 12.5938 5.95312 11.9167 6C12.8021 6.08854 13.4401 6.40625 13.8307 6.95312C14.2214 7.49479 14.4167 8.17708 14.4167 9C14.4167 9.71354 14.3334 10.2995 14.1667 10.7578C14.0052 11.2161 13.7318 11.5729 13.3464 11.8281C12.961 12.0781 12.4375 12.2526 11.7761 12.3516C11.1198 12.4505 10.2995 12.5 9.31512 12.5H0.416687V0.5H9.97919ZM2.91669 7.77344H5.97235V11.167L10.2497 5.22754H7.19501V1.83398L2.91669 7.77344ZM5.97235 6.07617H8.2702L7.19501 7.57324V6.9248H4.89716L5.97235 5.42676V6.07617Z",
+          fill: color
+        }
+      )
+    }
+  );
+}
+
+// src/components/icons/icon-check-circle.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function IconCheckCircle({
+  width = 67,
+  height = 67,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 67 67",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          d: "M33.6705 0.0820312C15.2758 0.0820312 0.36377 14.9941 0.36377 33.3888C0.36377 51.7846 15.2758 66.6956 33.6705 66.6956C52.0663 66.6956 66.9773 51.7846 66.9773 33.3888C66.9773 14.9941 52.0663 0.0820312 33.6705 0.0820312ZM33.6705 62.5978C17.6011 62.5978 4.52712 49.4583 4.52712 33.3887C4.52712 17.3192 17.6011 4.24525 33.6705 4.24525C49.74 4.24525 62.814 17.3193 62.814 33.3887C62.814 49.4581 49.74 62.5978 33.6705 62.5978ZM46.9631 21.2016L27.4213 40.8662L18.621 32.0659C17.8081 31.253 16.4904 31.253 15.6765 32.0659C14.8636 32.8788 14.8636 34.1965 15.6765 35.0094L25.9797 45.3137C26.7926 46.1255 28.1103 46.1255 28.9243 45.3137C29.0179 45.22 29.0981 45.1179 29.171 45.0118L49.9086 24.1461C50.7205 23.3332 50.7205 22.0155 49.9086 21.2016C49.0947 20.3888 47.777 20.3888 46.9631 21.2016Z",
+          fill: color
+        }
+      )
+    }
+  );
+}
+
+// src/components/icons/icon-copy-success.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function IconCopySuccess({
+  width = 16,
+  height = 17,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 16 17",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M11.4002 1.6875H8.60016C5.9935 1.6875 4.8335 2.8475 4.8335 5.45417V6.1875C4.8335 6.46083 5.06016 6.6875 5.3335 6.6875H7.40016C9.46683 6.6875 10.1668 7.3875 10.1668 9.45417V11.5208C10.1668 11.7942 10.3935 12.0208 10.6668 12.0208H11.4002C14.0068 12.0208 15.1668 10.8608 15.1668 8.25417V5.45417C15.1668 2.8475 14.0068 1.6875 11.4002 1.6875ZM5.8335 5.6875V5.45417C5.8335 3.3875 6.5335 2.6875 8.60016 2.6875H11.4002C13.4668 2.6875 14.1668 3.3875 14.1668 5.45417V8.25417C14.1668 10.3208 13.4668 11.0208 11.4002 11.0208H11.1668V9.45417C11.1668 6.8475 10.0068 5.6875 7.40016 5.6875H5.8335Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M7.40016 5.6875H4.60016C1.9935 5.6875 0.833496 6.8475 0.833496 9.45417V12.2542C0.833496 14.8608 1.9935 16.0208 4.60016 16.0208H7.40016C10.0068 16.0208 11.1668 14.8608 11.1668 12.2542V9.45417C11.1668 6.8475 10.0068 5.6875 7.40016 5.6875ZM4.60016 15.0208C2.5335 15.0208 1.8335 14.3208 1.8335 12.2542V9.45417C1.8335 7.3875 2.5335 6.6875 4.60016 6.6875H7.40016C9.46683 6.6875 10.1668 7.3875 10.1668 9.45417V12.2542C10.1668 14.3208 9.46683 15.0208 7.40016 15.0208H4.60016Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M5.35302 12.6542C5.22635 12.6542 5.09969 12.6075 4.99969 12.5075L3.69969 11.2075C3.50635 11.0142 3.50635 10.6942 3.69969 10.5008C3.89302 10.3075 4.21302 10.3075 4.40635 10.5008L5.35302 11.4475L7.59302 9.2075C7.78635 9.01417 8.10635 9.01417 8.29969 9.2075C8.49302 9.40083 8.49302 9.72083 8.29969 9.91417L5.69969 12.5075C5.60635 12.6008 5.47969 12.6542 5.35302 12.6542Z",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/icons/icon-chevron-up.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function IconChevronUp({
+  width = 24,
+  height = 24,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { opacity: "0.7", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          d: "M2.73508 9.73495L7.73508 4.73495C7.80539 4.66473 7.9007 4.62528 8.00008 4.62528C8.09945 4.62528 8.19476 4.66473 8.26508 4.73495L13.2651 9.73495C13.3313 9.80604 13.3674 9.90006 13.3657 9.99722C13.364 10.0944 13.3246 10.1871 13.2559 10.2558C13.1872 10.3245 13.0945 10.3638 12.9973 10.3655C12.9002 10.3673 12.8062 10.3312 12.7351 10.265L8.00008 5.53058L3.26508 10.265C3.19399 10.3312 3.09997 10.3673 3.00282 10.3655C2.90566 10.3638 2.81297 10.3245 2.74427 10.2558C2.67556 10.1871 2.6362 10.0944 2.63449 9.99722C2.63277 9.90006 2.66884 9.80604 2.73508 9.73495Z",
+          fill: color
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/icons/icon-chevron-down.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function IconChevronDown({
+  width = 24,
+  height = 24,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("g", { opacity: "0.6", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "path",
+        {
+          d: "M16.5813 7.83128L10.3313 14.0813C10.2434 14.1691 10.1242 14.2184 10 14.2184C9.87581 14.2184 9.75667 14.1691 9.66878 14.0813L3.41878 7.83128C3.33598 7.74242 3.2909 7.62489 3.29304 7.50345C3.29518 7.38201 3.34438 7.26615 3.43026 7.18026C3.51615 7.09438 3.63201 7.04518 3.75345 7.04304C3.87489 7.0409 3.99242 7.08598 4.08128 7.16878L10 13.0867L15.9188 7.16878C16.0076 7.08598 16.1252 7.0409 16.2466 7.04304C16.368 7.04518 16.4839 7.09438 16.5698 7.18026C16.6557 7.26615 16.7049 7.38201 16.707 7.50345C16.7092 7.62489 16.6641 7.74242 16.5813 7.83128Z",
+          fill: color
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/icons/icon-usdt.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function IconUsdt({
+  width = 28,
+  height = 28,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { "clip-path": "url(#clip0_10908_387045)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "path",
+          {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M14 28C6.26763 28 0 21.7324 0 14C0 6.26763 6.26763 0 14 0C21.7324 0 28 6.26763 28 14C28 21.7324 21.7324 28 14 28ZM15.6818 12.0689V9.99863H20.419V6.84162H7.52063V9.99863H12.2579V12.068C8.40787 12.2447 5.5125 13.0077 5.5125 13.9212C5.5125 14.8347 8.40787 15.5969 12.2579 15.7745V22.4088H15.6818V15.7727C19.5256 15.596 22.414 14.8339 22.414 13.9212C22.414 13.0086 19.5256 12.2465 15.6818 12.0689ZM15.6818 15.2101V15.2084C15.5855 15.2154 15.0894 15.2451 13.9825 15.2451C13.0987 15.2451 12.4766 15.2189 12.2579 15.2084V15.211C8.85587 15.0614 6.31662 14.469 6.31662 13.7602C6.31662 13.0524 8.85587 12.46 12.2579 12.3077V14.6212C12.4801 14.637 13.1171 14.6746 13.9974 14.6746C15.0535 14.6746 15.5829 14.6309 15.6818 14.6221V12.3095C19.0768 12.4609 21.6099 13.0532 21.6099 13.7602C21.6099 14.469 19.0768 15.0596 15.6818 15.2101Z",
+            fill: color
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("clipPath", { id: "clip0_10908_387045", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "28", height: "28", fill: color }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/icons/icon-usdc.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function IconUsdc({
+  width = 28,
+  height = 28,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { "clip-path": "url(#clip0_10908_387048)", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "path",
+          {
+            d: "M14 0C21.7324 0 28 6.26763 28 14C28 21.7324 21.7324 28 14 28C6.26763 28 0 21.7324 0 14C0 6.26763 6.26763 0 14 0ZM16.933 4.865C16.7195 4.76 16.506 4.865 16.4535 5.07762C16.4001 5.131 16.4001 5.18438 16.4001 5.29025V6.034L16.4089 6.125C16.4546 6.30501 16.5652 6.46177 16.7195 6.56512C20.8792 8.05262 23.0125 12.6726 21.4655 16.7615C20.6657 18.9928 18.9061 20.6911 16.7195 21.4883C16.506 21.5941 16.4001 21.7534 16.4001 22.0194V22.7631L16.4045 22.8401C16.4128 22.9241 16.4479 23.0033 16.5047 23.0658C16.5614 23.1284 16.6367 23.171 16.7195 23.1875C16.7729 23.1875 16.8796 23.1875 16.933 23.135C18.1331 22.7602 19.2473 22.1517 20.2113 21.3446C21.1753 20.5375 21.9701 19.5476 22.5499 18.432C23.1298 17.3164 23.4833 16.0972 23.59 14.8444C23.6967 13.5917 23.5546 12.3302 23.1718 11.1326C22.2128 8.10512 19.866 5.8205 16.933 4.865ZM11.2805 4.8125C11.2271 4.8125 11.1204 4.8125 11.067 4.865C9.86688 5.23978 8.75274 5.84826 7.78874 6.6554C6.82475 7.46254 6.02993 8.4524 5.45006 9.56797C4.87019 10.6836 4.51673 11.9028 4.41001 13.1556C4.30329 14.4083 4.44543 15.6698 4.82825 16.8674C5.78725 19.8424 8.08062 22.1261 11.067 23.0816C11.2805 23.1875 11.494 23.0816 11.5465 22.869C11.5999 22.8165 11.5999 22.7622 11.5999 22.6564V21.9126L11.5911 21.8426C11.5544 21.6947 11.417 21.5259 11.2805 21.4349C7.12075 19.9474 4.9875 15.3274 6.5345 11.2385C7.33425 9.00725 9.09388 7.30887 11.2805 6.51175C11.494 6.40587 11.5999 6.24663 11.5999 5.98063V5.23688L11.5955 5.15987C11.5872 5.07585 11.5521 4.99673 11.4954 4.93418C11.4386 4.87163 11.3633 4.82898 11.2805 4.8125ZM14.3736 7.574H13.573L13.496 7.581C13.321 7.616 13.1933 7.7665 13.146 7.99925V9.22075L12.9649 9.24875C11.4704 9.51475 10.5341 10.5464 10.5341 11.823C10.5341 13.5748 11.5999 14.2651 13.8399 14.5311C15.3335 14.7963 15.813 15.1156 15.813 15.9653C15.813 16.814 15.0666 17.3985 14.0534 17.3985C12.6665 17.3985 12.187 16.8149 12.0269 16.0177C11.9744 15.806 11.8134 15.6992 11.6532 15.6992H10.7467L10.6776 15.7054C10.5913 15.7193 10.513 15.7641 10.4572 15.8313C10.4014 15.8985 10.3718 15.9838 10.374 16.0711V16.1236L10.4029 16.2811C10.6566 17.5271 11.5106 18.4187 13.2003 18.6734V19.9483L13.2072 20.0252C13.2422 20.1985 13.3936 20.3263 13.6273 20.3726H14.427L14.504 20.3656C14.679 20.3306 14.8067 20.1801 14.854 19.9483V18.6725L15.0351 18.6375C16.534 18.3207 17.5201 17.2366 17.5201 15.8576C17.5201 13.9991 16.4001 13.3621 14.1601 13.0961C12.5598 12.8835 12.2404 12.4591 12.2404 11.7154C12.2404 10.9716 12.7741 10.4939 13.8399 10.4939C14.7998 10.4939 15.3335 10.8124 15.5995 11.6095C15.6272 11.6866 15.6779 11.7533 15.7447 11.8007C15.8115 11.8481 15.8912 11.8739 15.9731 11.8746H16.8262L16.8954 11.8694C16.982 11.8556 17.0606 11.8108 17.1166 11.7434C17.1726 11.6759 17.2022 11.5904 17.1999 11.5027V11.4503L17.1675 11.2989C17.0361 10.755 16.7366 10.2664 16.3115 9.90255C15.8864 9.53872 15.3574 9.31821 14.7997 9.27238V7.99925L14.7928 7.92225C14.7578 7.74812 14.6073 7.62038 14.3736 7.574Z",
+            fill: color
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("clipPath", { id: "clip0_10908_387048", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "28", height: "28", fill: color }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/icons/icon-arrow-swap.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function IconArrowSwap({
+  width = 16,
+  height = 17,
+  color = "currentColor",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 16 17",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M10.3265 14.1948C10.1998 14.1948 10.0731 14.1481 9.97313 14.0481C9.77979 13.8548 9.77979 13.5348 9.97313 13.3414L13.3131 10.0014C13.5065 9.80811 13.8265 9.80811 14.0198 10.0014C14.2131 10.1948 14.2131 10.5148 14.0198 10.7081L10.6798 14.0481C10.5798 14.1414 10.4531 14.1948 10.3265 14.1948Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M13.6668 10.8477H2.3335C2.06016 10.8477 1.8335 10.621 1.8335 10.3477C1.8335 10.0743 2.06016 9.84766 2.3335 9.84766H13.6668C13.9402 9.84766 14.1668 10.0743 14.1668 10.3477C14.1668 10.621 13.9402 10.8477 13.6668 10.8477Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M2.33329 6.86079C2.20663 6.86079 2.07996 6.81413 1.97996 6.71413C1.78663 6.52079 1.78663 6.20079 1.97996 6.00746L5.31996 2.66746C5.51329 2.47413 5.83329 2.47413 6.02663 2.66746C6.21996 2.86079 6.21996 3.18079 6.02663 3.37413L2.68663 6.71413C2.59329 6.80746 2.45996 6.86079 2.33329 6.86079Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M13.6668 6.86133H2.3335C2.06016 6.86133 1.8335 6.63466 1.8335 6.36133C1.8335 6.08799 2.06016 5.86133 2.3335 5.86133H13.6668C13.9402 5.86133 14.1668 6.08799 14.1668 6.36133C14.1668 6.63466 13.9402 6.86133 13.6668 6.86133Z",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/base/button.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function getButtonBgClass(type, disabled) {
+  if (disabled)
+    return "bg-gray-200 text-gray-400 cursor-not-allowed border-gray-200";
+  switch (type) {
+    case "primary":
+      return "bg-primary text-white hover:bg-primary-black hover:border-primary-black border-primary";
+    case "secondary":
+      return "bg-gray-200 border-gray-200 hover:bg-gray-300 text-heading-text";
+    case "danger":
+      return "bg-red-500 border-red-500 text-white hover:bg-red-600";
+    case "neutral":
+    default:
+      return "bg-off-white border-grey-border hover:bg-gray-100";
+  }
+}
+function getButtonSizeClass(size) {
+  switch (size) {
+    case "de":
+      return "h-68px rounded-xl";
+    case "md":
+      return "h-42px rounded-lg";
+    case "sm":
+      return "h-32px rounded-md";
+    default:
+      return "h-68px rounded-xl";
+  }
+}
+function getLabelSizeClass(size) {
+  switch (size) {
+    case "de":
+    case "md":
+    case "sm":
+      return "text-body-2xs font-normal";
+    default:
+      return "text-body-xs font-normal";
+  }
+}
+function BaseButton({
+  label,
+  type = "neutral",
+  size = "de",
+  paddingClassX = "px-8",
+  disabled = false,
+  loading = false,
+  customClass,
+  onClick,
+  prefix,
+  suffix,
+  children
+}) {
+  const isDisabled = disabled || loading;
+  const handleClick = () => {
+    if (!isDisabled) onClick?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "button",
+    {
+      className: `flex items-center justify-center gap-2 py-3 border font-normal text-input-grey transition-colors duration-300 ease-in-out ${getButtonBgClass(
+        type,
+        isDisabled
+      )} ${getButtonSizeClass(size)} ${paddingClassX} ${customClass}`,
+      type: "button",
+      disabled: isDisabled,
+      onClick: handleClick,
+      children: [
+        prefix,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconLoader, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `mb-0 ${getLabelSizeClass(size)}`, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children }) }),
+        suffix
+      ]
+    }
+  );
+}
+
+// src/components/base/back.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function BaseBack({ back }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 cursor-pointer", onClick: back, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconChevronLeft, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mb-0 text-body-xs font-normal", children: "Back" })
+  ] });
+}
+
+// src/components/base/card.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function BaseCard({
+  showBackButton = false,
+  onBack,
+  children,
+  onClose
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "checkout-card w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-1/2", children: [
+    showBackButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BaseBack, { back: () => onBack?.() }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-8 w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-off-white rounded-xl", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-light-white-100 text-body-2xs font-regular", children: "Powered by Buzapay" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconBuzapayIcon, { color: "#E8F4FF" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          onClick: onClose,
+          className: "close-icon flex flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-white", children: "x" })
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/base/radio-group.tsx
+var import_react3 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var BaseRadioGroup = ({
+  options,
+  type = "vertical",
+  value,
+  defaultValue,
+  selectedChange,
+  className = ""
+}) => {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = (0, import_react3.useState)("");
+  (0, import_react3.useEffect)(() => {
+    if (isControlled) return;
+    const initial = defaultValue ?? (options.length > 0 ? options[0].value : "");
+    setInternal(initial);
+    selectedChange?.(initial);
+  }, [isControlled, defaultValue, options]);
+  const selected = isControlled ? value : internal;
+  const setSelected = (v) => {
+    if (!isControlled) setInternal(v);
+    selectedChange?.(v);
+  };
+  const containerLayout = type === "horizontal" ? "flex-row gap-5" : "flex-col gap-6";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `flex ${containerLayout} ${className}`,
+      role: "radiogroup",
+      "aria-orientation": type === "horizontal" ? "horizontal" : "vertical",
+      tabIndex: 0,
+      children: options.map((option) => {
+        const isActive = selected === option.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "div",
+          {
+            role: "radio",
+            "aria-checked": isActive,
+            tabIndex: -1,
+            onClick: () => setSelected(option.value),
+            className: "flex items-center gap-2 cursor-pointer transition-colors duration-200",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "div",
+                {
+                  className: [
+                    "w-4 h-4 rounded-full border flex items-center justify-center",
+                    isActive ? "bg-orange-500 border-orange-500" : "bg-white border-grey-200"
+                  ].join(" "),
+                  children: isActive && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "bg-white w-2 h-2 rounded-full" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-heading-text", children: option.label })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+};
+
+// src/components/base/image.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function BaseImage({
+  src,
+  height = 50,
+  width = 50,
+  alt = "Image",
+  customClass,
+  isFullWidth,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "img",
+    {
+      src,
+      height,
+      alt,
+      className: `${customClass} ${isFullWidth ? "w-full" : ""}`,
+      style: { width: isFullWidth ? "100%" : `${width}px` },
+      onClick
+    }
+  );
+}
+
+// src/components/base/copy.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function BaseCopy({ copyText, color }) {
+  const copyToClipboard = (text) => {
+    return navigator.clipboard.writeText(text);
+  };
+  const copyHandler = () => {
+    copyToClipboard(copyText).then(() => {
+    }).catch((err) => {
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    IconCopySuccess,
+    {
+      className: "cursor-pointer",
+      color,
+      onClick: () => copyHandler()
+    }
+  );
+}
+
+// src/components/base/label-info.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var BaseLabelInfo = ({
+  type = "vertical",
+  label = "",
+  labelCustomClass = "text-body-4xs font-medium text-light-copy",
+  valueImageSrc = "",
+  valueImageCustomClass = "",
+  valueImagePosition = "prefix",
+  hasValueCopy = false,
+  value = "",
+  valueCustomClass = "text-body-2xs font-medium text-sub-copy",
+  alignRight = false
+}) => {
+  const showPrefixImg = valueImageSrc && valueImagePosition === "prefix";
+  const showSuffixImg = valueImageSrc && valueImagePosition === "suffix";
+  if (type === "vertical") {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "div",
+      {
+        className: `flex flex-col gap-1 ${alignRight ? "text-right items-end" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: labelCustomClass, children: label.toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1", children: [
+            showPrefixImg && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              BaseImage,
+              {
+                src: valueImageSrc,
+                alt: value,
+                width: 22,
+                customClass: valueImageCustomClass
+              }
+            ),
+            !hasValueCopy ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: valueCustomClass, children: value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `${valueCustomClass} truncate`, children: truncateString(value, 40) }),
+            hasValueCopy && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BaseCopy, { copyText: value, color: "#9DBFDE" }),
+            showSuffixImg && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              BaseImage,
+              {
+                src: valueImageSrc,
+                alt: value,
+                width: 22,
+                customClass: valueImageCustomClass
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: labelCustomClass, children: label.toUpperCase() }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1", children: [
+      showPrefixImg && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        BaseImage,
+        {
+          src: valueImageSrc,
+          alt: value,
+          width: 22,
+          customClass: valueImageCustomClass
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: valueCustomClass, children: value }),
+      hasValueCopy && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BaseCopy, { copyText: value, color: "#9DBFDE" }),
+      showSuffixImg && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        BaseImage,
+        {
+          src: valueImageSrc,
+          alt: value,
+          width: 22,
+          customClass: valueImageCustomClass
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/base/success.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var BaseSuccess = ({}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-8 p-16", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconCheckCircle, { color: "#F47A1F", className: "mx-auto" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col text-center", style: { gap: "2px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-heading-text font-medium text-header-2xl", children: "\u20A62,500.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sub-copy font-regular text-body-3xs", children: "Has been paid successfully" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-4 border-b border-grey-100", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          BaseLabelInfo,
+          {
+            type: "horizontal",
+            label: "Order ID",
+            value: "9900009000-8890-8829hd7"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          BaseLabelInfo,
+          {
+            type: "horizontal",
+            label: "Payment date",
+            value: "July 24, 2025"
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mx-auto", style: { width: "80%" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      BaseButton,
+      {
+        label: "Return to Merchant Website",
+        type: "secondary",
+        customClass: "w-full"
+      }
+    ) })
+  ] });
+};
+
+// src/components/base/hint.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function BaseHint({ hint }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mb-0 text-body-3xs font-medium text-orange-500", children: hint });
+}
+
+// src/components/base/select.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var BaseSelect = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Select an option",
+  hasSearch = true,
+  disabled = false,
+  loading = false,
+  validationError = "",
+  label = "",
+  hint = "",
+  required = false,
+  itemImageType = null,
+  prefix,
+  className = ""
+}) => {
+  const isControlled = value !== void 0;
+  const [open, setOpen] = import_react4.default.useState(false);
+  const [internalValue, setInternalValue] = import_react4.default.useState(
+    defaultValue ?? value ?? ""
+  );
+  const [filtered, setFiltered] = import_react4.default.useState(options);
+  const [activeIndex, setActiveIndex] = import_react4.default.useState(-1);
+  const triggerRef = import_react4.default.useRef(null);
+  const menuRef = import_react4.default.useRef(null);
+  const searchRef = import_react4.default.useRef(null);
+  import_react4.default.useEffect(() => {
+    if (isControlled) setInternalValue(value ?? "");
+  }, [isControlled, value]);
+  import_react4.default.useEffect(() => {
+    setFiltered(options);
+  }, [options]);
+  const selected = import_react4.default.useMemo(
+    () => options.find((o) => o.value === (isControlled ? value : internalValue)) || null,
+    [options, value, internalValue, isControlled]
+  );
+  const displayText = selected?.label || placeholder || (label ? `Select ${label}` : "Select an option");
+  const openMenu = import_react4.default.useCallback(() => {
+    if (disabled || open) return;
+    setFiltered(options);
+    const idx = selected ? Math.max(
+      0,
+      options.findIndex((o) => o.value === selected.value)
+    ) : 0;
+    setActiveIndex(idx);
+    setOpen(true);
+    setTimeout(() => {
+      if (hasSearch && searchRef.current) {
+        searchRef.current.focus();
+        searchRef.current.select();
+      }
+    });
+  }, [disabled, open, options, selected, hasSearch]);
+  const closeMenu = import_react4.default.useCallback(() => {
+    if (!open) return;
+    setOpen(false);
+    setActiveIndex(-1);
+  }, [open]);
+  const toggleMenu = import_react4.default.useCallback(() => {
+    if (disabled) return;
+    open ? closeMenu() : openMenu();
+  }, [open, disabled, openMenu, closeMenu]);
+  import_react4.default.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      const tri = triggerRef.current;
+      const menu = menuRef.current;
+      if (tri && !tri.contains(t) && menu && !menu.contains(t)) closeMenu();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, closeMenu]);
+  const commit = (val) => {
+    if (!isControlled) setInternalValue(val);
+    onChange?.(val);
+    closeMenu();
+  };
+  const onSearchInput = (e) => {
+    const q = e.target.value.toLowerCase();
+    const list = options.filter((o) => o.label.toLowerCase().includes(q));
+    setFiltered(list);
+    setActiveIndex(list.length ? 0 : -1);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+      case "Spacebar":
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openMenu();
+        else moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openMenu();
+        else moveActive(-1);
+        break;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          closeMenu();
+        }
+        break;
+    }
+  };
+  const onMenuKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(filtered.length ? 0 : -1);
+        scrollActiveIntoView(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(filtered.length - 1);
+        scrollActiveIntoView(filtered.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0) {
+          const opt = filtered[activeIndex];
+          if (opt) commit(opt.value);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        closeMenu();
+        break;
+      case "Tab":
+        closeMenu();
+        break;
+    }
+  };
+  const moveActive = (delta) => {
+    if (!filtered.length) return;
+    const max = filtered.length - 1;
+    const next = activeIndex < 0 ? 0 : Math.min(max, Math.max(0, activeIndex + delta));
+    setActiveIndex(next);
+    scrollActiveIntoView(next);
+  };
+  const scrollActiveIntoView = (index) => {
+    const menu = menuRef.current;
+    if (!menu) return;
+    const items = menu.querySelectorAll("[data-option]");
+    if (index >= 0 && index < items.length) {
+      items[index]?.scrollIntoView({ block: "nearest" });
+    }
+  };
+  const containerBg = disabled ? "bg-grey-100 cursor-not-allowed" : "bg-white";
+  const containerBorder = validationError ? "border-red-300 bg-red-50" : "border-grey-100 bg-white";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `flex flex-col gap-2 relative ${className}`, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "mb-0 text-body-2xs font-normal text-heading-text", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-orange-required", children: " *" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        ref: triggerRef,
+        className: `border-c rounded-md flex items-center justify-between h-12 cursor-pointer px-3 py-2 ${containerBg} ${containerBorder}`,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? "select-menu" : void 0,
+        "aria-disabled": disabled || void 0,
+        "aria-activedescendant": open && activeIndex >= 0 ? `option-${activeIndex}` : void 0,
+        tabIndex: 0,
+        onClick: toggleMenu,
+        onKeyDown: onTriggerKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+            prefix,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+              selected && itemImageType === "country" && selected.countryCode && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                BaseImage,
+                {
+                  src: `https://flagcdn.com/w40/${selected.countryCode.toLowerCase()}.png`,
+                  alt: selected.countryCode,
+                  width: 28,
+                  customClass: "rounded-lg"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "p",
+                {
+                  className: `text-body-2xs font-normal mb-0 ${selected?.label ? "text-sub-copy" : "text-grey-500"}`,
+                  children: displayText
+                }
+              )
+            ] })
+          ] }),
+          loading ? (
+            // Loader (replace with your own IconLoader if you have one)
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" })
+          ) : open ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconChevronUp, { color: "#8FAECA" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconChevronDown, { color: "#8FAECA" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        ref: menuRef,
+        id: "select-menu",
+        className: "border-c bg-white rounded-md border-grey-border text-body-xs font-normal text-input-grey w-full mt-2 max-h-22rem overflow-y-auto",
+        role: "listbox",
+        "aria-label": label || "Options",
+        style: { position: "absolute", top: "100%", zIndex: 10 },
+        onKeyDown: onMenuKeyDown,
+        children: [
+          hasSearch && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-4 pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              ref: searchRef,
+              type: "text",
+              onChange: onSearchInput,
+              placeholder: `Search ${label || "options"}`,
+              className: "bg-transparent outline-none border-b pb-2 w-full focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal"
+            }
+          ) }),
+          filtered.map((opt, i) => {
+            const selectedOpt = selected?.value === opt.value;
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "div",
+              {
+                onClick: () => commit(opt.value),
+                id: `option-${i}`,
+                "data-option": true,
+                role: "option",
+                "aria-selected": selectedOpt,
+                className: `px-4 py-3 first:pt-0 hover:bg-gray-100 flex items-center gap-2 cursor-pointer ${i === activeIndex ? "bg-gray-100" : ""}`,
+                children: [
+                  itemImageType === "country" && opt.countryCode && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    BaseImage,
+                    {
+                      src: `https://flagcdn.com/w40/${opt.countryCode.toLowerCase()}.png`,
+                      alt: opt.countryCode,
+                      width: 28,
+                      customClass: "rounded-lg"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mb-0 text-body-2xs font-medium", children: opt.label })
+                ]
+              },
+              opt.value
+            );
+          })
+        ]
+      }
+    ),
+    hint && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseHint, { hint }),
+    validationError && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseInputError, { errorMessage: validationError })
+  ] });
+};
+
+// src/components/base/currency-amount.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var BaseCurrencyAmount = ({
+  currency,
+  amount,
+  textClass = "",
+  iconColorClass = "",
+  iconWidth = 16,
+  iconHeight = 16
+}) => {
+  const cur = currency?.toUpperCase();
+  if (cur !== "USDT" && cur !== "USDC") {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: textClass, children: formatAmount(amount, cur) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1", children: [
+    cur === "USDT" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      IconUsdt,
+      {
+        width: iconWidth,
+        height: iconHeight,
+        color: iconColorClass
+      }
+    ),
+    cur === "USDC" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      IconUsdc,
+      {
+        width: iconWidth,
+        height: iconHeight,
+        color: iconColorClass
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: textClass, children: formatAmount(amount) })
+  ] });
+};
+
+// src/buzapay-checkout/checkout-iframe.tsx
+var import_react5 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function BzpCheckoutIframe({
+  style = {
+    width: "100%",
+    height: "100vh",
+    border: "0",
+    borderRadius: "6px",
+    overflow: "hidden"
+  },
+  url,
+  secretKey,
+  environment = "sandbox",
+  paymentObject = {
+    amount: 0,
+    currency: "",
+    email: "",
+    phoneNumber: "",
+    narration: "",
+    redirectUrl: ""
+  }
+}) {
+  const containerRef = (0, import_react5.useRef)(null);
+  const iframeRef = (0, import_react5.useRef)(null);
+  const [message, setMessage] = (0, import_react5.useState)("");
+  const [launchUrl, setLaunchUrl] = (0, import_react5.useState)("");
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const launchIframe = (0, import_react5.useCallback)(
+    (url2) => {
+      if (iframeRef.current && iframeRef.current.parentNode) {
+        iframeRef.current.parentNode.removeChild(iframeRef.current);
+      }
+      const iframe = document.createElement("iframe");
+      iframe.src = url2;
+      if (style.width) iframe.style.width = style.width;
+      if (style.height) iframe.style.height = style.height;
+      if (style.border) iframe.style.border = style.border;
+      if (style.borderRadius) iframe.style.borderRadius = style.borderRadius;
+      if (style.overflow) iframe.style.overflow = style.overflow;
+      containerRef.current?.appendChild(iframe);
+      iframeRef.current = iframe;
+    },
+    [style]
+  );
+  const generatePaymentLinkHandler = async () => {
+    if (url) {
+      launchIframe(url);
+      return;
+    }
+    if (!secretKey) {
+      return setMessage("Secret key is required.");
+    }
+    if (!checkObjectTruthy(paymentObject)) {
+      return setMessage("Secret key is required.");
+    }
+    setLoading(true);
+    const response = await createPaymentLink(
+      paymentObject,
+      environment,
+      secretKey
+    );
+    if (response?.isSuccessful) {
+      setLaunchUrl(response.launchUrl ?? "");
+      setMessage("Payment link created successfully");
+      if (response.launchUrl) {
+        setLoading(false);
+        launchIframe(response.launchUrl);
+      }
+    } else {
+      setLoading(false);
+      setMessage("Failed to create payment link");
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    if (!containerRef.current) return;
+    generatePaymentLinkHandler();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: containerRef, className: "w-full h-full" }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute inset-0 grid place-items-center bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLoader, {}) })
+  ] });
+}
+
+// src/buzapay-checkout/checkout-button.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function BzpCheckoutButton({
+  secretKey,
+  environment = "sandbox",
+  paymentObject = {
+    amount: 0,
+    currency: "",
+    email: "",
+    phoneNumber: "",
+    narration: "",
+    redirectUrl: ""
+  },
+  mode = "redirect"
+}) {
+  const [message, setMessage] = (0, import_react6.useState)("");
+  const [launchUrl, setLaunchUrl] = (0, import_react6.useState)("");
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const generatePaymentLinkHandler = async () => {
+    if (!secretKey) {
+      setMessage("Secret key is required.");
+      return;
+    }
+    if (!checkObjectTruthy(paymentObject)) {
+      setMessage("Kindly ensure you are passing all the required data.");
+      return;
+    }
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await createPaymentLink(
+        paymentObject,
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful && response.launchUrl) {
+        setLaunchUrl(response.launchUrl);
+        setMessage("Payment link created successfully");
+        if (mode === "redirect") {
+          window.open(response.launchUrl, "_blank", "noopener,noreferrer");
+        }
+      } else {
+        setMessage("Failed to create payment link");
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to create payment link");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return launchUrl && mode === "iframe" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    BzpCheckoutIframe,
+    {
+      url: launchUrl,
+      secretKey,
+      environment
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      BaseButton,
+      {
+        label: "Pay",
+        type: "primary",
+        customClass: "w-full",
+        loading,
+        onClick: generatePaymentLinkHandler
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BaseInputError, { errorMessage: message })
+  ] });
+}
+
+// src/buzapay-checkout/checkout-card.tsx
+var import_react11 = require("react");
+
+// src/components/pay-by-card.tsx
+var import_react8 = require("react");
+
+// src/components/base/input.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var BaseInput = ({
+  label = "",
+  type = "text",
+  placeholder,
+  validationError = "",
+  hint = "",
+  rules = [],
+  isAmountInput = false,
+  required = false,
+  disabled = false,
+  loading = false,
+  showCopyIcon = false,
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  prefix,
+  suffix,
+  className = ""
+}) => {
+  const isControlled = value !== void 0;
+  const [rawValue, setRawValue] = import_react7.default.useState(
+    defaultValue ?? value ?? ""
+  );
+  const [localHint, setLocalHint] = import_react7.default.useState("");
+  const [localError, setLocalError] = import_react7.default.useState("");
+  import_react7.default.useEffect(() => {
+    if (isControlled) setRawValue(value ?? "");
+  }, [isControlled, value]);
+  const formattedValue = isAmountInput ? formatAmount(rawValue.replace(/,/g, "")) : rawValue;
+  const handleChange = (e) => {
+    const incoming = e.target.value.replace(/,/g, "");
+    if (!isControlled) setRawValue(incoming);
+    onChange?.(incoming);
+    setTimeout(() => {
+      const el = e.target;
+      el.selectionStart = el.selectionEnd = el.value.length;
+    });
+  };
+  const handleBlur = () => {
+    onBlur?.(rawValue);
+  };
+  const handleKeyDown = (e) => {
+    if (rules.includes("numeric")) restrictToNumericKeys(e);
+  };
+  const containerBg = disabled ? "bg-grey-50 cursor-not-allowed" : "bg-white";
+  const containerBorder = validationError || localError ? "border-red-300 bg-red-50" : "border-grey-100";
+  const copyToClipboard = (text) => {
+    return navigator.clipboard.writeText(text);
+  };
+  const copyHandler = () => {
+    copyToClipboard(rawValue).then(() => {
+      setLocalHint("Text copied to clipboard");
+    }).catch((err) => {
+      setLocalError("Failed to copy text to clipboard");
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `flex flex-col gap-2 ${className}`, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "mb-0 text-body-2xs font-normal text-heading-text", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-orange-required", children: " *" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        className: `border-c px-3 py-2 flex items-center justify-between rounded-md h-12 ${containerBg} ${containerBorder}`,
+        children: [
+          prefix,
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "input",
+            {
+              type,
+              value: formattedValue,
+              onChange: handleChange,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              disabled,
+              placeholder: placeholder ?? (label ? `Enter ${label.toLowerCase()}` : void 0),
+              inputMode: isAmountInput ? "decimal" : void 0,
+              className: "search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full"
+            }
+          ),
+          !loading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+            suffix,
+            showCopyIcon && rawValue && rawValue.trim() !== "" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              BaseImage,
+              {
+                src: "assets/images/copyIcon.svg",
+                alt: "copy",
+                width: 16,
+                height: 16,
+                customClass: "cursor-pointer hover:opacity-70 transition-opacity",
+                onClick: copyHandler
+              }
+            )
+          ] }) : (
+            // Simple loader placeholder; swap for your icon component if desired
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" })
+          )
+        ]
+      }
+    ),
+    (hint || localHint) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-body-3xs text-light-copy", children: localHint || hint }),
+    (validationError || localError) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-body-3xs text-red-500", children: localError || validationError })
+  ] });
+};
+
+// src/components/pay-by-card.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function PayByCard({}) {
+  const [formIndex, setFormIndex] = (0, import_react8.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-6 overflow-y-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "First Name", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Last Name", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Email", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Phone Number", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseSelect,
+        {
+          label: "Select Country",
+          required: true,
+          options: [
+            { label: "United States", value: "US" },
+            { label: "Canada", value: "CA" },
+            { label: "United Kingdom", value: "UK" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseSelect,
+        {
+          label: "Select State",
+          required: true,
+          options: [
+            { label: "California", value: "CA" },
+            { label: "Texas", value: "TX" },
+            { label: "New York", value: "NY" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "City", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Postal Code", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Street Address", required: true }) })
+    ] }),
+    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      "div",
+      {
+        className: "grid grid-cols-2 gap-6 overflow-y-auto",
+        style: { maxHeight: "320px" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Card Name", required: true }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Card Number", required: true }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Expiry Date", required: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "CVV", required: true })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      BaseButton,
+      {
+        label: formIndex === 0 ? "Proceed" : "Pay",
+        type: "primary",
+        customClass: "w-full",
+        onClick: formIndex === 0 ? () => setFormIndex(1) : void 0
+      }
+    )
+  ] });
+}
+
+// src/components/pay-by-transfer.tsx
+var import_react9 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var PayByTransfer = ({
+  amountDisplay = "NGN 200,500.00",
+  bankName = "Teerus MFB",
+  accountNumber = "0001928940",
+  initialSeconds = 30 * 60,
+  onConfirmPaid,
+  onCancel
+}) => {
+  const [remaining, setRemaining] = (0, import_react9.useState)(initialSeconds);
+  const intervalRef = (0, import_react9.useRef)(null);
+  const countDownTime = (0, import_react9.useMemo)(() => {
+    const clamped = Math.max(0, remaining);
+    const m = Math.floor(clamped / 60);
+    const s = clamped % 60;
+    return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  }, [remaining]);
+  (0, import_react9.useEffect)(() => {
+    intervalRef.current = window.setInterval(() => {
+      setRemaining((prev) => prev - 1);
+    }, 1e3);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (remaining < 0 && intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [remaining]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-sub-copy text-sm font-semibold text-center", children: [
+      "Amount to Pay ",
+      amountDisplay
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseLabelInfo, { label: "Bank Name", value: bankName, type: "horizontal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          BaseLabelInfo,
+          {
+            label: "Account Number",
+            value: accountNumber,
+            type: "horizontal"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseCopy, { color: "#9DBFDE", copyText: accountNumber })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          BaseLabelInfo,
+          {
+            label: "Amount",
+            value: amountDisplay,
+            type: "horizontal"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseCopy, { color: "#9DBFDE", copyText: amountDisplay })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy", children: [
+      "This account is for this transaction only and expires in",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-orange-500", children: remaining >= 0 ? countDownTime : "00:00" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        BaseButton,
+        {
+          label: "I have paid the money",
+          type: "primary",
+          customClass: "w-full",
+          onClick: onConfirmPaid
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer",
+          children: "Cancel Payment"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/pay-by-stable-coin.tsx
+var import_react10 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var PayByStableCoin = ({ onProceedToPay }) => {
+  const [formIndex, setFormIndex] = (0, import_react10.useState)(0);
+  const payHandler = () => {
+    setFormIndex(1);
+    onProceedToPay?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "grid grid-cols-1 gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          BaseSelect,
+          {
+            label: "Select Crypto",
+            required: true,
+            options: [
+              { label: "USDT", value: "USDT" },
+              { label: "USDC", value: "USDC" },
+              { label: "BUSD", value: "BUSD" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          BaseSelect,
+          {
+            label: "Select Network",
+            required: true,
+            options: [
+              { label: "Ethereum", value: "ETH" },
+              { label: "Binance Smart Chain", value: "BSC" },
+              { label: "Polygon", value: "MATIC" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        BaseButton,
+        {
+          label: "Pay",
+          type: "primary",
+          customClass: "w-full",
+          onClick: payHandler
+        }
+      )
+    ] }),
+    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mx-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          BaseImage,
+          {
+            src: "../../../assets/images/stable-coin-qr-code.png",
+            alt: "QR Code",
+            width: 122,
+            height: 122,
+            customClass: "mb-1"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-4xs text-light-copy font-normal text-center", children: "USDC" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "border-b border-grey-border pb-4 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Network" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy", children: "BNB Smart Chain (BEP20)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "*Est. arrival = 3 mins" }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "|" }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  BaseCurrencyAmount,
+                  {
+                    currency: "USDC",
+                    amount: 10,
+                    textClass: "mb-0 text-body-3xs text-light-copy font-normal",
+                    iconColorClass: "#557591",
+                    iconWidth: 12,
+                    iconHeight: 12
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconArrowSwap, {})
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "pb-4 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Deposit Address >" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words", children: "0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseCopy, { copyText: "0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between border-b border-grey-border py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-primary-black", children: "Network fee" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            BaseCurrencyAmount,
+            {
+              currency: "USDC",
+              amount: 12,
+              textClass: "mb-0 text-body-2xs font-extrabold text-primary-black",
+              iconColorClass: "#231F20"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-lg font-semibold text-primary-black", children: "Pay" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            BaseCurrencyAmount,
+            {
+              currency: "USDC",
+              amount: 15,
+              textClass: "mb-0 text-body-lg font-extrabold text-primary-black",
+              iconColorClass: "#231F20",
+              iconWidth: 20,
+              iconHeight: 20
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        BaseButton,
+        {
+          label: "Confirm Payment",
+          type: "primary",
+          customClass: "w-full"
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/buzapay-checkout/checkout-card.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function BzpCheckoutCard({
+  options,
+  environment = "sandbox",
+  paymentObject = {
+    amount: 0,
+    currency: "",
+    email: "",
+    phoneNumber: "",
+    narration: "",
+    redirectUrl: ""
+  }
+}) {
+  const [checkoutState, setCheckoutState] = (0, import_react11.useState)("PAYMENT");
+  const paymentTypeOptions = [
+    { label: "Card", value: "CARD" },
+    { label: "Bank Transfer", value: "BANK_TRANSFER" },
+    { label: "Stable Coin", value: "STABLE_COIN" }
+  ];
+  const [filteredPaymentTypeOptions, setFilteredPaymentTypeOptions] = (0, import_react11.useState)([]);
+  const [paymentType, setPaymentType] = (0, import_react11.useState)("");
+  const paymentTypeHandler = (event) => {
+    setPaymentType(event);
+  };
+  (0, import_react11.useEffect)(() => {
+    let options2 = [];
+    if (paymentObject.currency === "USD") {
+      options2 = paymentTypeOptions.filter(
+        (option) => option.value !== "BANK_TRANSFER"
+      );
+    } else {
+      options2 = paymentTypeOptions.filter(
+        (option) => option.value !== "STABLE_COIN"
+      );
+    }
+    setFilteredPaymentTypeOptions(options2);
+  }, [paymentObject.currency]);
+  (0, import_react11.useEffect)(() => {
+    if (filteredPaymentTypeOptions.length) {
+      setPaymentType(filteredPaymentTypeOptions[0].value);
+    }
+  }, [filteredPaymentTypeOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BaseCard, { showBackButton: checkoutState === "STABLE_COIN_PAYMENT", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "grid grid-cols-3", children: [
+    checkoutState === "PAYMENT" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-heading-text text-body-xs font-semibold", children: "Pay with" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        BaseRadioGroup,
+        {
+          options: paymentTypeOptions,
+          selectedChange: (e) => paymentTypeHandler(e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "col-span-2", children: [
+      (checkoutState === "PAYMENT" || checkoutState === "STABLE_COIN_PAYMENT") && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+        checkoutState === "PAYMENT" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
+          options?.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            BaseImage,
+            {
+              src: options?.imageUrl ?? "",
+              alt: "Merchant Logo",
+              width: 52,
+              height: 52,
+              customClass: "rounded-lg"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            "div",
+            {
+              className: "bg-heading-text rounded flex flex-col justify-center",
+              style: { width: "52px", height: "52px" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-white text-center text-body-2xs font-medium", children: "Logo" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: "Raymahni Merchant LLC" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
+              "Pay:",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-orange-500 font-extrabold", children: [
+                currencySign(paymentObject.currency),
+                " 100,051.00"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PayByCard, {}) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PayByTransfer, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          PayByStableCoin,
+          {
+            onProceedToPay: () => setCheckoutState("STABLE_COIN_PAYMENT")
+          }
+        ) })
+      ] }),
+      checkoutState === "SUCCESS" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BaseSuccess, {})
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BzpCheckoutButton,
+  BzpCheckoutCard,
+  BzpCheckoutIframe,
+  MidenPGClient,
+  MidenPGProvider,
+  useMidenPGClient,
+  usePaymentIntents
+});
+//# sourceMappingURL=index.cjs.map