@retinalabsllc/zairusjs 16.0.35 → 16.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -382,12 +382,21 @@ var import_browser = require("@simplewebauthn/browser");
382
382
  // src/components/TextInput.tsx
383
383
  var import_react6 = __toESM(require("react"));
384
384
  var InputSpinner = () => /* @__PURE__ */ import_react6.default.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react6.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react6.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
385
+ var getCustomFlagUrl = (code) => {
386
+ const map = {
387
+ "NG": "https://retinalabs.company/assets/images/ng.avif",
388
+ "GH": "https://retinalabs.company/assets/images/gh.avif",
389
+ "KE": "https://retinalabs.company/assets/images/ksh.avif",
390
+ "UG": "https://retinalabs.company/assets/images/ugx.avif"
391
+ };
392
+ return map[code?.toUpperCase()] || map["NG"];
393
+ };
385
394
  var FlagImage = ({ countryCode }) => {
386
395
  const [loaded, setLoaded] = (0, import_react6.useState)(false);
387
396
  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative w-5 h-5 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ import_react6.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ import_react6.default.createElement(InputSpinner, null)), /* @__PURE__ */ import_react6.default.createElement(
388
397
  "img",
389
398
  {
390
- src: `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`,
399
+ src: getCustomFlagUrl(countryCode),
391
400
  alt: countryCode,
392
401
  className: `object-cover w-full h-full transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`,
393
402
  onLoad: () => setLoaded(true)
@@ -458,7 +467,7 @@ var PhoneInput = ({
458
467
  className: "flex items-center gap-1.5 outline-none hover:opacity-80 transition-opacity"
459
468
  },
460
469
  /* @__PURE__ */ import_react6.default.createElement(FlagImage, { countryCode: selectedCountry.code }),
461
- /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm text-black pl-1" }, selectedCountry.dialCode),
470
+ /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm text-black pl-1" }, selectedCountry.dialCode),
462
471
  /* @__PURE__ */ import_react6.default.createElement("svg", { className: "w-3 h-3 text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react6.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
463
472
  ), /* @__PURE__ */ import_react6.default.createElement(
464
473
  "input",
@@ -2902,12 +2911,12 @@ var UniversalSecurityPage = ({
2902
2911
  className: "w-full"
2903
2912
  },
2904
2913
  hasPasscode ? "Update Passcode" : "Set Passcode"
2905
- )))))), showPasskeyModal && /* @__PURE__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ import_react41.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ import_react41.default.createElement("h2", { className: "text-lg text-black mb-2 tracking-tight" }, "Simplify your Sign In"), /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-[13px] text-neutral-500 mb-8 leading-relaxed" }, "Use your device's biometrics (Face ID, Touch ID, or PIN) to securely sign into your account without needing a password."), /* @__PURE__ */ import_react41.default.createElement(
2914
+ )))))), showPasskeyModal && /* @__PURE__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ import_react41.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-[13px] text-neutral-500 mb-8 leading-relaxed" }, "Use your device's biometrics (Face ID, Touch ID, or PIN) to securely sign into your account without needing a password."), /* @__PURE__ */ import_react41.default.createElement(
2906
2915
  ThreeDActionButton,
2907
2916
  {
2908
2917
  onClick: submitEnablePasskey,
2909
2918
  isLoading: isSubmitting,
2910
- className: "w-full py-3.5"
2919
+ className: "w-full"
2911
2920
  },
2912
2921
  "Create Passkey"
2913
2922
  )))));
@@ -4010,7 +4019,7 @@ var UniversalReferralPage = ({
4010
4019
  const finalSrc = src || fallbackUrl;
4011
4020
  return /* @__PURE__ */ import_react69.default.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.Loading03Icon, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ import_react69.default.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
4012
4021
  };
4013
- return /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react69.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react69.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react69.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ import_react69.default.createElement("div", null, /* @__PURE__ */ import_react69.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "bg-[#143731] rounded-3xl p-4 relative overflow-hidden flex flex-col min-h-25 w-full mt-2" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[11px] text-white leading-tight mb-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-white/60" }, "AFT Balance")), isLoading ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-8 w-32 bg-white/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-lg text-white tracking-tight mt-1" }, referralCoins)))), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ import_react69.default.createElement(
4022
+ return /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react69.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react69.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react69.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ import_react69.default.createElement("div", null, /* @__PURE__ */ import_react69.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "bg-[#143731] rounded-3xl p-6 relative overflow-hidden flex flex-col min-h-25 w-full mt-2" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[11px] text-white leading-tight mb-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-white/60" }, "AFT Balance")), isLoading ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-8 w-32 bg-white/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-lg text-white tracking-tight mt-1" }, referralCoins)))), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ import_react69.default.createElement(
4014
4023
  "button",
4015
4024
  {
4016
4025
  onClick: handleCopyCode,
@@ -4500,7 +4509,7 @@ var UniversalBuyCryptoPage = ({
4500
4509
  }
4501
4510
  };
4502
4511
  const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
4503
- return /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react75.default.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ import_react75.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react75.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ import_react75.default.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full shadow-sm" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ import_react75.default.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ import_react75.default.createElement(
4512
+ return /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react75.default.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ import_react75.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react75.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ import_react75.default.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full " }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ import_react75.default.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ import_react75.default.createElement(
4504
4513
  "input",
4505
4514
  {
4506
4515
  type: "text",
@@ -4580,10 +4589,10 @@ var UniversalBuyCryptoPage = ({
4580
4589
  {
4581
4590
  key: c.code,
4582
4591
  onClick: () => handleCryptoSelect(c),
4583
- className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none ${isSelected ? " bg-neutral-50/50" : ""}`
4592
+ className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
4584
4593
  },
4585
4594
  /* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
4586
- /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-sm text-black truncate" }, c.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
4595
+ /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[13px] text-black truncate" }, c.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
4587
4596
  isSelected && /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CheckmarkCircle02Icon, size: 16, className: "text-black" })
4588
4597
  );
4589
4598
  }))))), isNetworkDialogOpen && /* @__PURE__ */ import_react75.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "absolute inset-0", onClick: () => setIsNetworkDialogOpen(false) }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react75.default.createElement(
@@ -4603,10 +4612,10 @@ var UniversalBuyCryptoPage = ({
4603
4612
  setSelectedNetwork(net);
4604
4613
  setIsNetworkDialogOpen(false);
4605
4614
  },
4606
- className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none ${isSelected ? " bg-neutral-50/50" : ""}`
4615
+ className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
4607
4616
  },
4608
4617
  /* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
4609
- /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-sm text-black truncate" }, net.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
4618
+ /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[13px] text-black truncate" }, net.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
4610
4619
  isSelected && /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CheckmarkCircle02Icon, size: 16, className: "text-black" })
4611
4620
  );
4612
4621
  }))))));
package/dist/index.mjs CHANGED
@@ -302,12 +302,21 @@ import { startAuthentication } from "@simplewebauthn/browser";
302
302
  // src/components/TextInput.tsx
303
303
  import React5, { useState as useState3 } from "react";
304
304
  var InputSpinner = () => /* @__PURE__ */ React5.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
305
+ var getCustomFlagUrl = (code) => {
306
+ const map = {
307
+ "NG": "https://retinalabs.company/assets/images/ng.avif",
308
+ "GH": "https://retinalabs.company/assets/images/gh.avif",
309
+ "KE": "https://retinalabs.company/assets/images/ksh.avif",
310
+ "UG": "https://retinalabs.company/assets/images/ugx.avif"
311
+ };
312
+ return map[code?.toUpperCase()] || map["NG"];
313
+ };
305
314
  var FlagImage = ({ countryCode }) => {
306
315
  const [loaded, setLoaded] = useState3(false);
307
316
  return /* @__PURE__ */ React5.createElement("div", { className: "relative w-5 h-5 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ React5.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)), /* @__PURE__ */ React5.createElement(
308
317
  "img",
309
318
  {
310
- src: `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`,
319
+ src: getCustomFlagUrl(countryCode),
311
320
  alt: countryCode,
312
321
  className: `object-cover w-full h-full transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`,
313
322
  onLoad: () => setLoaded(true)
@@ -378,7 +387,7 @@ var PhoneInput = ({
378
387
  className: "flex items-center gap-1.5 outline-none hover:opacity-80 transition-opacity"
379
388
  },
380
389
  /* @__PURE__ */ React5.createElement(FlagImage, { countryCode: selectedCountry.code }),
381
- /* @__PURE__ */ React5.createElement("span", { className: "text-sm text-black pl-1" }, selectedCountry.dialCode),
390
+ /* @__PURE__ */ React5.createElement("span", { className: "text-sm text-black pl-1" }, selectedCountry.dialCode),
382
391
  /* @__PURE__ */ React5.createElement("svg", { className: "w-3 h-3 text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React5.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
383
392
  ), /* @__PURE__ */ React5.createElement(
384
393
  "input",
@@ -2893,12 +2902,12 @@ var UniversalSecurityPage = ({
2893
2902
  className: "w-full"
2894
2903
  },
2895
2904
  hasPasscode ? "Update Passcode" : "Set Passcode"
2896
- )))))), showPasskeyModal && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ React25.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ React25.createElement("h2", { className: "text-lg text-black mb-2 tracking-tight" }, "Simplify your Sign In"), /* @__PURE__ */ React25.createElement("p", { className: "text-[13px] text-neutral-500 mb-8 leading-relaxed" }, "Use your device's biometrics (Face ID, Touch ID, or PIN) to securely sign into your account without needing a password."), /* @__PURE__ */ React25.createElement(
2905
+ )))))), showPasskeyModal && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ React25.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ React25.createElement("p", { className: "text-[13px] text-neutral-500 mb-8 leading-relaxed" }, "Use your device's biometrics (Face ID, Touch ID, or PIN) to securely sign into your account without needing a password."), /* @__PURE__ */ React25.createElement(
2897
2906
  ThreeDActionButton,
2898
2907
  {
2899
2908
  onClick: submitEnablePasskey,
2900
2909
  isLoading: isSubmitting,
2901
- className: "w-full py-3.5"
2910
+ className: "w-full"
2902
2911
  },
2903
2912
  "Create Passkey"
2904
2913
  )))));
@@ -4019,7 +4028,7 @@ var UniversalReferralPage = ({
4019
4028
  const finalSrc = src || fallbackUrl;
4020
4029
  return /* @__PURE__ */ React42.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: Loading03Icon17, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React42.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
4021
4030
  };
4022
- return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React42.createElement(ManagedToaster, null), /* @__PURE__ */ React42.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React42.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: ArrowLeft01Icon10, size: 16 }), " Back")), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ React42.createElement("div", { className: "bg-[#143731] rounded-3xl p-4 relative overflow-hidden flex flex-col min-h-25 w-full mt-2" }, /* @__PURE__ */ React42.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ React42.createElement("p", { className: "text-[11px] text-white leading-tight mb-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-white/60" }, "AFT Balance")), isLoading ? /* @__PURE__ */ React42.createElement("div", { className: "h-8 w-32 bg-white/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-lg text-white tracking-tight mt-1" }, referralCoins)))), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React42.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ React42.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ React42.createElement(
4031
+ return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React42.createElement(ManagedToaster, null), /* @__PURE__ */ React42.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React42.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: ArrowLeft01Icon10, size: 16 }), " Back")), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ React42.createElement("div", { className: "bg-[#143731] rounded-3xl p-6 relative overflow-hidden flex flex-col min-h-25 w-full mt-2" }, /* @__PURE__ */ React42.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ React42.createElement("p", { className: "text-[11px] text-white leading-tight mb-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-white/60" }, "AFT Balance")), isLoading ? /* @__PURE__ */ React42.createElement("div", { className: "h-8 w-32 bg-white/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-lg text-white tracking-tight mt-1" }, referralCoins)))), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React42.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ React42.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ React42.createElement(
4023
4032
  "button",
4024
4033
  {
4025
4034
  onClick: handleCopyCode,
@@ -4516,7 +4525,7 @@ var UniversalBuyCryptoPage = ({
4516
4525
  }
4517
4526
  };
4518
4527
  const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
4519
- return /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React45.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ React45.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React45.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: ArrowLeft01Icon12, size: 16 }), " Back")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ React45.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ React45.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full shadow-sm" }, /* @__PURE__ */ React45.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ React45.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ React45.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ React45.createElement(
4528
+ return /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React45.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ React45.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React45.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: ArrowLeft01Icon12, size: 16 }), " Back")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ React45.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ React45.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full " }, /* @__PURE__ */ React45.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ React45.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ React45.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ React45.createElement(
4520
4529
  "input",
4521
4530
  {
4522
4531
  type: "text",
@@ -4596,10 +4605,10 @@ var UniversalBuyCryptoPage = ({
4596
4605
  {
4597
4606
  key: c.code,
4598
4607
  onClick: () => handleCryptoSelect(c),
4599
- className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none ${isSelected ? " bg-neutral-50/50" : ""}`
4608
+ className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
4600
4609
  },
4601
4610
  /* @__PURE__ */ React45.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
4602
- /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-sm text-black truncate" }, c.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
4611
+ /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[13px] text-black truncate" }, c.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
4603
4612
  isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle02Icon, size: 16, className: "text-black" })
4604
4613
  );
4605
4614
  }))))), isNetworkDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsNetworkDialogOpen(false) }), /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React45.createElement(
@@ -4619,10 +4628,10 @@ var UniversalBuyCryptoPage = ({
4619
4628
  setSelectedNetwork(net);
4620
4629
  setIsNetworkDialogOpen(false);
4621
4630
  },
4622
- className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none ${isSelected ? " bg-neutral-50/50" : ""}`
4631
+ className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
4623
4632
  },
4624
4633
  /* @__PURE__ */ React45.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
4625
- /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-sm text-black truncate" }, net.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
4634
+ /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[13px] text-black truncate" }, net.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
4626
4635
  isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle02Icon, size: 16, className: "text-black" })
4627
4636
  );
4628
4637
  }))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "16.0.35",
3
+ "version": "16.0.45",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",