@retinalabsllc/zairusjs 14.0.35 → 14.0.50

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +5 -12
  2. package/dist/index.d.ts +5 -12
  3. package/dist/index.js +80 -84
  4. package/dist/index.mjs +85 -89
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -123,19 +123,12 @@ interface MobileNavProps {
123
123
  declare const MobileNav: React.FC<MobileNavProps>;
124
124
 
125
125
  interface BannerProps {
126
- /** The heading text of the banner */
127
126
  title: string;
128
- /** The main message content */
129
127
  message: string;
130
- /** The type of banner, determines colors and default icon */
131
128
  type: 'success' | 'warning' | 'alert';
132
- /** Optional custom icon to override the default */
133
129
  icon?: any;
134
- /** Whether the banner can be dismissed by the user */
135
130
  isDismissible?: boolean;
136
- /** Optional callback when the banner is dismissed */
137
131
  onDismiss?: () => void;
138
- /** Optional custom action button */
139
132
  action?: React.ReactNode;
140
133
  }
141
134
 
@@ -216,6 +209,8 @@ interface UniversalTransaction {
216
209
  direction: 'CREDIT' | 'DEBIT';
217
210
  amount: string;
218
211
  currency: string;
212
+ name?: string;
213
+ description?: string;
219
214
  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'REVERSED';
220
215
  reference: string;
221
216
  metadata?: any;
@@ -319,13 +314,11 @@ interface CardData {
319
314
  tier: string;
320
315
  currency: string;
321
316
  cardHolderName: string;
322
- cardNumber: string;
323
- expiry: string;
324
- cvv: string;
325
317
  cardBgSrc: string;
326
- backgroundOverlay?: string;
327
- companyLogoSrc: string;
328
318
  networkLogoSrc: string;
319
+ preOrder?: boolean;
320
+ contentDark?: boolean;
321
+ bannerProps?: BannerProps;
329
322
  }
330
323
  interface UniversalCardPageProps {
331
324
  cards: CardData[];
package/dist/index.d.ts CHANGED
@@ -123,19 +123,12 @@ interface MobileNavProps {
123
123
  declare const MobileNav: React.FC<MobileNavProps>;
124
124
 
125
125
  interface BannerProps {
126
- /** The heading text of the banner */
127
126
  title: string;
128
- /** The main message content */
129
127
  message: string;
130
- /** The type of banner, determines colors and default icon */
131
128
  type: 'success' | 'warning' | 'alert';
132
- /** Optional custom icon to override the default */
133
129
  icon?: any;
134
- /** Whether the banner can be dismissed by the user */
135
130
  isDismissible?: boolean;
136
- /** Optional callback when the banner is dismissed */
137
131
  onDismiss?: () => void;
138
- /** Optional custom action button */
139
132
  action?: React.ReactNode;
140
133
  }
141
134
 
@@ -216,6 +209,8 @@ interface UniversalTransaction {
216
209
  direction: 'CREDIT' | 'DEBIT';
217
210
  amount: string;
218
211
  currency: string;
212
+ name?: string;
213
+ description?: string;
219
214
  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'REVERSED';
220
215
  reference: string;
221
216
  metadata?: any;
@@ -319,13 +314,11 @@ interface CardData {
319
314
  tier: string;
320
315
  currency: string;
321
316
  cardHolderName: string;
322
- cardNumber: string;
323
- expiry: string;
324
- cvv: string;
325
317
  cardBgSrc: string;
326
- backgroundOverlay?: string;
327
- companyLogoSrc: string;
328
318
  networkLogoSrc: string;
319
+ preOrder?: boolean;
320
+ contentDark?: boolean;
321
+ bannerProps?: BannerProps;
329
322
  }
330
323
  interface UniversalCardPageProps {
331
324
  cards: CardData[];
package/dist/index.js CHANGED
@@ -790,33 +790,32 @@ var Banner = ({
790
790
  };
791
791
  const config = {
792
792
  success: {
793
- bg: "bg-neutral-50",
794
- iconColor: "text-neutral-600",
795
- titleColor: "text-neutral-900",
796
- msgColor: "text-neutral-700",
793
+ bg: "bg-[#ceff8a22]",
794
+ iconColor: "text-[#143731]",
795
+ titleColor: "text-[#143731]",
796
+ msgColor: "text-[#143731]",
797
797
  defaultIcon: import_core_free_icons2.CheckmarkBadge01Icon,
798
798
  closeHover: "hover:bg-neutral-100 text-neutral-500"
799
799
  },
800
800
  warning: {
801
- bg: "bg-neutral-50",
802
- iconColor: "text-neutral-600",
803
- titleColor: "text-neutral-900",
804
- msgColor: "text-neutral-700",
801
+ bg: "bg-[#ceff8a22]",
802
+ iconColor: "text-[#143731]",
803
+ titleColor: "text-[#143731]",
804
+ msgColor: "text-[#143731]",
805
805
  defaultIcon: import_core_free_icons2.InformationCircleIcon,
806
806
  closeHover: "hover:bg-neutral-100 text-neutral-500"
807
807
  },
808
808
  alert: {
809
- bg: "bg-neutral-50",
810
- iconColor: "text-neutral-600",
811
- titleColor: "text-neutral-900",
812
- msgColor: "text-neutral-700",
809
+ bg: "bg-[#ff6b6b22]",
810
+ iconColor: "text-[#143731]",
811
+ titleColor: "text-[#143731]",
812
+ msgColor: "text-[#143731]",
813
813
  defaultIcon: import_core_free_icons2.Alert02Icon,
814
814
  closeHover: "hover:bg-neutral-100 text-neutral-500"
815
815
  }
816
816
  };
817
817
  const currentConfig = config[type];
818
- const IconToUse = icon || currentConfig.defaultIcon;
819
- return /* @__PURE__ */ import_react13.default.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ import_react13.default.createElement("h4", { className: `text-xs tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ import_react13.default.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ import_react13.default.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ import_react13.default.createElement(
818
+ return /* @__PURE__ */ import_react13.default.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ import_react13.default.createElement("h4", { className: `text-[10px] uppercase tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ import_react13.default.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ import_react13.default.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ import_react13.default.createElement(
820
819
  "button",
821
820
  {
822
821
  onClick: handleDismiss,
@@ -1363,11 +1362,6 @@ var UniversalTransactionPage = ({
1363
1362
  setLocalSearchQuery("");
1364
1363
  }
1365
1364
  }, [searchQuery]);
1366
- const getDisplayName = (tx) => {
1367
- if (tx.metadata?.merchantName) return tx.metadata.merchantName;
1368
- if (tx.metadata?.description) return tx.metadata.description;
1369
- return tx.type === "CARD_TRANSACTION" ? "Card Transaction" : "Wallet Transaction";
1370
- };
1371
1365
  const handleGenerateReceipt = async () => {
1372
1366
  if (!onGenerateReceipt || !selectedTransaction) return;
1373
1367
  setIsGeneratingReceipt(true);
@@ -1418,7 +1412,7 @@ var UniversalTransactionPage = ({
1418
1412
  onClick: () => setSelectedTransaction(tx),
1419
1413
  className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
1420
1414
  },
1421
- /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ import_react23.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react23.default.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ import_react23.default.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.amount))),
1415
+ /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ import_react23.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react23.default.createElement("p", { className: "text-[13px] text-black truncate" }, tx.name), /* @__PURE__ */ import_react23.default.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.amount))),
1422
1416
  /* @__PURE__ */ import_react23.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] text-neutral-400" }, formatDate2(tx.createdAt)), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] text-neutral-400 capitalize" }, tx.direction.toLowerCase()))
1423
1417
  ))), !hidePagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react23.default.createElement(
1424
1418
  "button",
@@ -1443,7 +1437,7 @@ var UniversalTransactionPage = ({
1443
1437
  className: "text-neutral-400 hover:text-black transition-colors outline-none"
1444
1438
  },
1445
1439
  /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.Copy01Icon, size: 14 })
1446
- ))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black" }, formatDate2(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
1440
+ ))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Description"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black" }, selectedTransaction.description)), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black" }, formatDate2(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
1447
1441
  if (key === "fromAddress" || key === "toAddress") return null;
1448
1442
  if (value === null || value === void 0 || typeof value === "object") return null;
1449
1443
  const formattedKey = key.includes(" ") ? key : key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
@@ -1524,7 +1518,23 @@ var renderKMT = (val, currencySymbol) => {
1524
1518
  suffix = "k";
1525
1519
  }
1526
1520
  const displayStr = parseFloat(formatted.toFixed(2)).toString();
1527
- return /* @__PURE__ */ import_react25.default.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] text-neutral-400 mr-0.5 " }, currencySymbol), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-xl text-neutral-800 tracking-tight " }, displayStr), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[14px] text-neutral-400 ml-0.5 " }, suffix));
1521
+ return /* @__PURE__ */ import_react25.default.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] text-neutral-800 mr-0.5 " }, currencySymbol), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-xl text-neutral-800 tracking-tight " }, displayStr), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[14px] text-neutral-600 ml-0.5 " }, suffix));
1522
+ };
1523
+ var renderKMT2 = (val, currencySymbol) => {
1524
+ let formatted = val;
1525
+ let suffix = "";
1526
+ if (val >= 1e12) {
1527
+ formatted = val / 1e12;
1528
+ suffix = "T";
1529
+ } else if (val >= 1e6) {
1530
+ formatted = val / 1e6;
1531
+ suffix = "M";
1532
+ } else if (val >= 1e3) {
1533
+ formatted = val / 1e3;
1534
+ suffix = "k";
1535
+ }
1536
+ const displayStr = parseFloat(formatted.toFixed(2)).toString();
1537
+ return /* @__PURE__ */ import_react25.default.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] text-white mr-0.5 " }, currencySymbol), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-xl text-white tracking-tight " }, displayStr), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[14px] text-white/50 ml-0.5 " }, suffix));
1528
1538
  };
1529
1539
  var UniversalHomeView = ({
1530
1540
  fullName = "",
@@ -1624,17 +1634,17 @@ var UniversalHomeView = ({
1624
1634
  className: "px-6 py-2 bg-transparent border border-white/20 text-white truncate text-[12px] rounded-full transition-colors hover:bg-white/10 outline-none text-center"
1625
1635
  },
1626
1636
  "Rewards"
1627
- )))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#FFD0AE_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Cashback"), renderKMT(cashbackValue, balanceCurrency)), /* @__PURE__ */ import_react25.default.createElement(
1637
+ )))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-white mb-1" }, "Cashback"), renderKMT2(cashbackValue, balanceCurrency)), /* @__PURE__ */ import_react25.default.createElement(
1628
1638
  "img",
1629
1639
  {
1630
- src: "https://retinalabs.company/assets/images/piggy.avif",
1640
+ src: "https://retinalabs.company/assets/images/save_box.avif",
1631
1641
  alt: "Cashback",
1632
1642
  className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1633
1643
  }
1634
- )), /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#C8F7A8_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Rewards"), renderKMT(rewardsValue, balanceCurrency)), /* @__PURE__ */ import_react25.default.createElement(
1644
+ )), /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-black mb-1" }, "Rewards"), renderKMT(rewardsValue, balanceCurrency)), /* @__PURE__ */ import_react25.default.createElement(
1635
1645
  "img",
1636
1646
  {
1637
- src: "https://retinalabs.company/assets/images/gift.avif",
1647
+ src: "https://retinalabs.company/assets/images/gift_box.avif",
1638
1648
  alt: "Rewards",
1639
1649
  className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1640
1650
  }
@@ -2025,13 +2035,18 @@ var UniversalCardPage = ({
2025
2035
  onDelete
2026
2036
  }) => {
2027
2037
  const router = (0, import_navigation4.useRouter)();
2038
+ const sortedCards = import_react33.default.useMemo(() => {
2039
+ return [...cards].sort((a, b) => {
2040
+ if (a.type === "VIRTUAL" && b.type !== "VIRTUAL") return -1;
2041
+ if (b.type === "VIRTUAL" && a.type !== "VIRTUAL") return 1;
2042
+ return 0;
2043
+ });
2044
+ }, [cards]);
2028
2045
  const [activeTabIndex, setActiveTabIndex] = (0, import_react33.useState)(0);
2029
- const activeCard = cards[activeTabIndex];
2046
+ const activeCard = sortedCards[activeTabIndex];
2030
2047
  (0, import_react33.useEffect)(() => {
2031
- setIsFlipped(false);
2032
2048
  setIsRevealed(false);
2033
2049
  }, [activeTabIndex]);
2034
- const [isFlipped, setIsFlipped] = (0, import_react33.useState)(false);
2035
2050
  const [isBgLoaded, setIsBgLoaded] = (0, import_react33.useState)(false);
2036
2051
  const [isRevealed, setIsRevealed] = (0, import_react33.useState)(false);
2037
2052
  const [isRevealing, setIsRevealing] = (0, import_react33.useState)(false);
@@ -2054,10 +2069,13 @@ var UniversalCardPage = ({
2054
2069
  const isFrozen = activeCard.status === "FROZEN";
2055
2070
  const isUnactivated = activeCard.status === "UNACTIVATED";
2056
2071
  const isDead = ["BLOCKED", "EXPIRED", "DELETED"].includes(activeCard.status);
2057
- const canFlip = isBgLoaded && isActivated;
2072
+ const isPreordered = activeCard.preOrder === true;
2058
2073
  const actionsDisabled = !isActivated && !isFrozen;
2059
2074
  const revealDisabled = !isActivated;
2060
2075
  const freezeDisabled = isUnactivated || isDead;
2076
+ const showActionOverlay = !isActivated && isBgLoaded && !isPreordered || isFrozen;
2077
+ const overlayClasses = activeCard.contentDark ? "bg-white/20 backdrop-blur-[3px]" : "bg-black/10 backdrop-blur-[2px]";
2078
+ const buttonClasses = activeCard.contentDark ? "bg-black/10 text-black hover:bg-black/20 font-medium" : "bg-white/25 text-white hover:bg-white/35";
2061
2079
  const handleToggleReveal = () => {
2062
2080
  if (revealDisabled || isRevealing) return;
2063
2081
  if (isRevealed) {
@@ -2108,42 +2126,32 @@ var UniversalCardPage = ({
2108
2126
  const capitalized = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
2109
2127
  return `${capitalized} Card`;
2110
2128
  };
2111
- const displayCardNumber = isRevealed ? activeCard.cardNumber : `XXXX XXXX XXXX ${activeCard.cardNumber.slice(-4)}`;
2112
- const displayExpiry = isRevealed ? activeCard.expiry : "XX/XX";
2113
- const displayCvv = isRevealed ? activeCard.cvv : "XXX";
2114
- return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, cards.length > 1 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar " }, cards.map((tab, idx) => {
2129
+ return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, sortedCards.length > 1 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
2115
2130
  const isActive = activeTabIndex === idx;
2116
2131
  return /* @__PURE__ */ import_react33.default.createElement(
2117
2132
  "button",
2118
2133
  {
2119
2134
  key: tab.id,
2120
2135
  onClick: () => setActiveTabIndex(idx),
2121
- className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2136
+ className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2122
2137
  },
2123
2138
  formatTabLabel(tab.type)
2124
2139
  );
2125
- }))), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center", style: { perspective: "1000px" } }, /* @__PURE__ */ import_react33.default.createElement(
2140
+ }))), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react33.default.createElement(
2126
2141
  "div",
2127
2142
  {
2128
- onClick: () => {
2129
- if (canFlip) setIsFlipped(!isFlipped);
2130
- },
2131
- className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : canFlip ? "cursor-pointer" : "cursor-default"}`,
2132
- style: {
2133
- height: 180,
2134
- transformStyle: "preserve-3d",
2135
- transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
2136
- }
2143
+ className: "relative w-full max-w-85",
2144
+ style: { height: 180 }
2137
2145
  },
2138
- !isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50 " }, /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 28, className: "animate-spin text-black" })),
2139
- !isActivated && isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 z-40 w-full h-full rounded-2xl backdrop-blur-[2px] flex flex-col items-center justify-center ", style: { transform: "translateZ(1px)" } }, isUnactivated && /* @__PURE__ */ import_react33.default.createElement(
2146
+ !isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 28, className: "animate-spin text-black" })),
2147
+ showActionOverlay && /* @__PURE__ */ import_react33.default.createElement("div", { className: `absolute inset-0 z-40 w-full h-full rounded-2xl flex flex-col items-center justify-center transition-all ${overlayClasses}` }, isUnactivated && /* @__PURE__ */ import_react33.default.createElement(
2140
2148
  "button",
2141
2149
  {
2142
2150
  onClick: (e) => {
2143
2151
  e.stopPropagation();
2144
2152
  router.push(`${actionPath}${activeCard.id}`);
2145
2153
  },
2146
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2154
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2147
2155
  },
2148
2156
  "Activate Card"
2149
2157
  ), isDead && /* @__PURE__ */ import_react33.default.createElement(
@@ -2153,7 +2161,7 @@ var UniversalCardPage = ({
2153
2161
  e.stopPropagation();
2154
2162
  router.push(`${actionPath}${activeCard.id}`);
2155
2163
  },
2156
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2164
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2157
2165
  },
2158
2166
  "Create Card"
2159
2167
  ), isFrozen && /* @__PURE__ */ import_react33.default.createElement(
@@ -2164,50 +2172,38 @@ var UniversalCardPage = ({
2164
2172
  handleOverlayUnfreeze();
2165
2173
  },
2166
2174
  disabled: isOverlayActionLoading,
2167
- className: "px-6 py-2.5 bg-white/35 text-white text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80"
2175
+ className: `px-6 py-2.5 text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80 ${buttonClasses}`
2168
2176
  },
2169
- isOverlayActionLoading ? /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 16, className: "animate-spin" }) : "Unfreeze Card"
2177
+ isOverlayActionLoading ? /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Unfreeze Card"
2170
2178
  )),
2171
- /* @__PURE__ */ import_react33.default.createElement(
2179
+ /* @__PURE__ */ import_react33.default.createElement("div", { className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}` }, /* @__PURE__ */ import_react33.default.createElement(
2172
2180
  "div",
2173
2181
  {
2174
- className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}`,
2175
- style: { backfaceVisibility: "hidden" }
2176
- },
2177
- /* @__PURE__ */ import_react33.default.createElement(
2178
- "div",
2179
- {
2180
- className: "absolute inset-0 bg-cover bg-center",
2181
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2182
- }
2183
- ),
2184
- /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-start w-full gap-4" }, activeCard.companyLogoSrc && /* @__PURE__ */ import_react33.default.createElement("img", { src: activeCard.companyLogoSrc, alt: "Company Logo", className: "h-10 w-auto max-w-30 object-contain opacity-90" })), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "Card Number"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white tracking-widest font-light" }, displayCardNumber)), activeCard.networkLogoSrc && /* @__PURE__ */ import_react33.default.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-10 w-auto max-w-20 object-contain opacity-90" })))
2185
- ),
2186
- /* @__PURE__ */ import_react33.default.createElement(
2187
- "div",
2182
+ className: "absolute inset-0 bg-cover bg-center",
2183
+ style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
2184
+ }
2185
+ ), /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-start w-full gap-4" }), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[12px] tracking-widest font-medium uppercase ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ import_react33.default.createElement(
2186
+ "img",
2188
2187
  {
2189
- className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}`,
2190
- style: {
2191
- backfaceVisibility: "hidden",
2192
- transform: "rotateY(180deg)"
2193
- }
2194
- },
2195
- /* @__PURE__ */ import_react33.default.createElement(
2196
- "div",
2197
- {
2198
- className: "absolute inset-0 bg-cover bg-center",
2199
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2200
- }
2201
- ),
2202
- /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute top-6 left-0 right-0 h-10 bg-black/80 w-full" }),
2203
- /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-end" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full text-center mb-6" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-white text-3xl italic tracking-wide opacity-90", style: { fontFamily: "'Whisper', cursive" } }, activeCard.cardHolderName)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between w-full max-w-[80%]" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "Expiry"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white font-light" }, displayExpiry)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "CVV"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white font-light" }, displayCvv))))
2204
- )
2205
- )), /* @__PURE__ */ import_react33.default.createElement("p", { className: "w-full text-center text-xs text-neutral-400 mb-6 mt-1" }, isActivated ? "Tap to flip card" : "Action Required"), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react33.default.createElement(
2188
+ src: activeCard.networkLogoSrc,
2189
+ alt: "Network Logo",
2190
+ className: "h-10 w-auto max-w-20 object-contain opacity-90"
2191
+ }
2192
+ ))))
2193
+ )), activeCard.bannerProps ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ import_react33.default.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ import_react33.default.createElement(
2194
+ Banner,
2195
+ {
2196
+ type: "success",
2197
+ title: "Order Secured",
2198
+ message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
2199
+ isDismissible: false
2200
+ }
2201
+ )) : null, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react33.default.createElement(
2206
2202
  MenuRow,
2207
2203
  {
2208
2204
  icon: import_core_free_icons12.ViewOffSlashIcon,
2209
2205
  title: "Reveal Information",
2210
- subtitle: "Show card informations",
2206
+ subtitle: "Show secure card details",
2211
2207
  onClick: handleToggleReveal,
2212
2208
  isToggle: true,
2213
2209
  toggleState: isRevealed,
package/dist/index.mjs CHANGED
@@ -719,33 +719,32 @@ var Banner = ({
719
719
  };
720
720
  const config = {
721
721
  success: {
722
- bg: "bg-neutral-50",
723
- iconColor: "text-neutral-600",
724
- titleColor: "text-neutral-900",
725
- msgColor: "text-neutral-700",
722
+ bg: "bg-[#ceff8a22]",
723
+ iconColor: "text-[#143731]",
724
+ titleColor: "text-[#143731]",
725
+ msgColor: "text-[#143731]",
726
726
  defaultIcon: CheckmarkBadge01Icon,
727
727
  closeHover: "hover:bg-neutral-100 text-neutral-500"
728
728
  },
729
729
  warning: {
730
- bg: "bg-neutral-50",
731
- iconColor: "text-neutral-600",
732
- titleColor: "text-neutral-900",
733
- msgColor: "text-neutral-700",
730
+ bg: "bg-[#ceff8a22]",
731
+ iconColor: "text-[#143731]",
732
+ titleColor: "text-[#143731]",
733
+ msgColor: "text-[#143731]",
734
734
  defaultIcon: InformationCircleIcon,
735
735
  closeHover: "hover:bg-neutral-100 text-neutral-500"
736
736
  },
737
737
  alert: {
738
- bg: "bg-neutral-50",
739
- iconColor: "text-neutral-600",
740
- titleColor: "text-neutral-900",
741
- msgColor: "text-neutral-700",
738
+ bg: "bg-[#ff6b6b22]",
739
+ iconColor: "text-[#143731]",
740
+ titleColor: "text-[#143731]",
741
+ msgColor: "text-[#143731]",
742
742
  defaultIcon: Alert02Icon,
743
743
  closeHover: "hover:bg-neutral-100 text-neutral-500"
744
744
  }
745
745
  };
746
746
  const currentConfig = config[type];
747
- const IconToUse = icon || currentConfig.defaultIcon;
748
- return /* @__PURE__ */ React10.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ React10.createElement("h4", { className: `text-xs tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React10.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React10.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React10.createElement(
747
+ return /* @__PURE__ */ React10.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ React10.createElement("h4", { className: `text-[10px] uppercase tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React10.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React10.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React10.createElement(
749
748
  "button",
750
749
  {
751
750
  onClick: handleDismiss,
@@ -1312,11 +1311,6 @@ var UniversalTransactionPage = ({
1312
1311
  setLocalSearchQuery("");
1313
1312
  }
1314
1313
  }, [searchQuery]);
1315
- const getDisplayName = (tx) => {
1316
- if (tx.metadata?.merchantName) return tx.metadata.merchantName;
1317
- if (tx.metadata?.description) return tx.metadata.description;
1318
- return tx.type === "CARD_TRANSACTION" ? "Card Transaction" : "Wallet Transaction";
1319
- };
1320
1314
  const handleGenerateReceipt = async () => {
1321
1315
  if (!onGenerateReceipt || !selectedTransaction) return;
1322
1316
  setIsGeneratingReceipt(true);
@@ -1367,7 +1361,7 @@ var UniversalTransactionPage = ({
1367
1361
  onClick: () => setSelectedTransaction(tx),
1368
1362
  className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
1369
1363
  },
1370
- /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React15.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: tx.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ React15.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React15.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ React15.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.amount))),
1364
+ /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React15.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: tx.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ React15.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React15.createElement("p", { className: "text-[13px] text-black truncate" }, tx.name), /* @__PURE__ */ React15.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.amount))),
1371
1365
  /* @__PURE__ */ React15.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] text-neutral-400" }, formatDate2(tx.createdAt)), /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] text-neutral-400 capitalize" }, tx.direction.toLowerCase()))
1372
1366
  ))), !hidePagination && /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
1373
1367
  "button",
@@ -1392,7 +1386,7 @@ var UniversalTransactionPage = ({
1392
1386
  className: "text-neutral-400 hover:text-black transition-colors outline-none"
1393
1387
  },
1394
1388
  /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: Copy01Icon, size: 14 })
1395
- ))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black" }, formatDate2(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ React15.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ React15.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ React15.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
1389
+ ))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Description"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black" }, selectedTransaction.description)), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black" }, formatDate2(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ React15.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ React15.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ React15.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
1396
1390
  if (key === "fromAddress" || key === "toAddress") return null;
1397
1391
  if (value === null || value === void 0 || typeof value === "object") return null;
1398
1392
  const formattedKey = key.includes(" ") ? key : key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
@@ -1481,7 +1475,23 @@ var renderKMT = (val, currencySymbol) => {
1481
1475
  suffix = "k";
1482
1476
  }
1483
1477
  const displayStr = parseFloat(formatted.toFixed(2)).toString();
1484
- return /* @__PURE__ */ React16.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[13px] text-neutral-400 mr-0.5 " }, currencySymbol), /* @__PURE__ */ React16.createElement("span", { className: "text-xl text-neutral-800 tracking-tight " }, displayStr), /* @__PURE__ */ React16.createElement("span", { className: "text-[14px] text-neutral-400 ml-0.5 " }, suffix));
1478
+ return /* @__PURE__ */ React16.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[13px] text-neutral-800 mr-0.5 " }, currencySymbol), /* @__PURE__ */ React16.createElement("span", { className: "text-xl text-neutral-800 tracking-tight " }, displayStr), /* @__PURE__ */ React16.createElement("span", { className: "text-[14px] text-neutral-600 ml-0.5 " }, suffix));
1479
+ };
1480
+ var renderKMT2 = (val, currencySymbol) => {
1481
+ let formatted = val;
1482
+ let suffix = "";
1483
+ if (val >= 1e12) {
1484
+ formatted = val / 1e12;
1485
+ suffix = "T";
1486
+ } else if (val >= 1e6) {
1487
+ formatted = val / 1e6;
1488
+ suffix = "M";
1489
+ } else if (val >= 1e3) {
1490
+ formatted = val / 1e3;
1491
+ suffix = "k";
1492
+ }
1493
+ const displayStr = parseFloat(formatted.toFixed(2)).toString();
1494
+ return /* @__PURE__ */ React16.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[13px] text-white mr-0.5 " }, currencySymbol), /* @__PURE__ */ React16.createElement("span", { className: "text-xl text-white tracking-tight " }, displayStr), /* @__PURE__ */ React16.createElement("span", { className: "text-[14px] text-white/50 ml-0.5 " }, suffix));
1485
1495
  };
1486
1496
  var UniversalHomeView = ({
1487
1497
  fullName = "",
@@ -1581,17 +1591,17 @@ var UniversalHomeView = ({
1581
1591
  className: "px-6 py-2 bg-transparent border border-white/20 text-white truncate text-[12px] rounded-full transition-colors hover:bg-white/10 outline-none text-center"
1582
1592
  },
1583
1593
  "Rewards"
1584
- )))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement("div", { className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#FFD0AE_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Cashback"), renderKMT(cashbackValue, balanceCurrency)), /* @__PURE__ */ React16.createElement(
1594
+ )))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement("div", { className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-white mb-1" }, "Cashback"), renderKMT2(cashbackValue, balanceCurrency)), /* @__PURE__ */ React16.createElement(
1585
1595
  "img",
1586
1596
  {
1587
- src: "https://retinalabs.company/assets/images/piggy.avif",
1597
+ src: "https://retinalabs.company/assets/images/save_box.avif",
1588
1598
  alt: "Cashback",
1589
1599
  className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1590
1600
  }
1591
- )), /* @__PURE__ */ React16.createElement("div", { className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#C8F7A8_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Rewards"), renderKMT(rewardsValue, balanceCurrency)), /* @__PURE__ */ React16.createElement(
1601
+ )), /* @__PURE__ */ React16.createElement("div", { className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-black mb-1" }, "Rewards"), renderKMT(rewardsValue, balanceCurrency)), /* @__PURE__ */ React16.createElement(
1592
1602
  "img",
1593
1603
  {
1594
- src: "https://retinalabs.company/assets/images/gift.avif",
1604
+ src: "https://retinalabs.company/assets/images/gift_box.avif",
1595
1605
  alt: "Rewards",
1596
1606
  className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1597
1607
  }
@@ -1999,13 +2009,18 @@ var UniversalCardPage = ({
1999
2009
  onDelete
2000
2010
  }) => {
2001
2011
  const router = useRouter();
2012
+ const sortedCards = React20.useMemo(() => {
2013
+ return [...cards].sort((a, b) => {
2014
+ if (a.type === "VIRTUAL" && b.type !== "VIRTUAL") return -1;
2015
+ if (b.type === "VIRTUAL" && a.type !== "VIRTUAL") return 1;
2016
+ return 0;
2017
+ });
2018
+ }, [cards]);
2002
2019
  const [activeTabIndex, setActiveTabIndex] = useState12(0);
2003
- const activeCard = cards[activeTabIndex];
2020
+ const activeCard = sortedCards[activeTabIndex];
2004
2021
  useEffect9(() => {
2005
- setIsFlipped(false);
2006
2022
  setIsRevealed(false);
2007
2023
  }, [activeTabIndex]);
2008
- const [isFlipped, setIsFlipped] = useState12(false);
2009
2024
  const [isBgLoaded, setIsBgLoaded] = useState12(false);
2010
2025
  const [isRevealed, setIsRevealed] = useState12(false);
2011
2026
  const [isRevealing, setIsRevealing] = useState12(false);
@@ -2028,10 +2043,13 @@ var UniversalCardPage = ({
2028
2043
  const isFrozen = activeCard.status === "FROZEN";
2029
2044
  const isUnactivated = activeCard.status === "UNACTIVATED";
2030
2045
  const isDead = ["BLOCKED", "EXPIRED", "DELETED"].includes(activeCard.status);
2031
- const canFlip = isBgLoaded && isActivated;
2046
+ const isPreordered = activeCard.preOrder === true;
2032
2047
  const actionsDisabled = !isActivated && !isFrozen;
2033
2048
  const revealDisabled = !isActivated;
2034
2049
  const freezeDisabled = isUnactivated || isDead;
2050
+ const showActionOverlay = !isActivated && isBgLoaded && !isPreordered || isFrozen;
2051
+ const overlayClasses = activeCard.contentDark ? "bg-white/20 backdrop-blur-[3px]" : "bg-black/10 backdrop-blur-[2px]";
2052
+ const buttonClasses = activeCard.contentDark ? "bg-black/10 text-black hover:bg-black/20 font-medium" : "bg-white/25 text-white hover:bg-white/35";
2035
2053
  const handleToggleReveal = () => {
2036
2054
  if (revealDisabled || isRevealing) return;
2037
2055
  if (isRevealed) {
@@ -2082,42 +2100,32 @@ var UniversalCardPage = ({
2082
2100
  const capitalized = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
2083
2101
  return `${capitalized} Card`;
2084
2102
  };
2085
- const displayCardNumber = isRevealed ? activeCard.cardNumber : `XXXX XXXX XXXX ${activeCard.cardNumber.slice(-4)}`;
2086
- const displayExpiry = isRevealed ? activeCard.expiry : "XX/XX";
2087
- const displayCvv = isRevealed ? activeCard.cvv : "XXX";
2088
- return /* @__PURE__ */ React20.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, cards.length > 1 && /* @__PURE__ */ React20.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar " }, cards.map((tab, idx) => {
2103
+ return /* @__PURE__ */ React20.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, sortedCards.length > 1 && /* @__PURE__ */ React20.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
2089
2104
  const isActive = activeTabIndex === idx;
2090
2105
  return /* @__PURE__ */ React20.createElement(
2091
2106
  "button",
2092
2107
  {
2093
2108
  key: tab.id,
2094
2109
  onClick: () => setActiveTabIndex(idx),
2095
- className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2110
+ className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2096
2111
  },
2097
2112
  formatTabLabel(tab.type)
2098
2113
  );
2099
- }))), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center", style: { perspective: "1000px" } }, /* @__PURE__ */ React20.createElement(
2114
+ }))), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React20.createElement(
2100
2115
  "div",
2101
2116
  {
2102
- onClick: () => {
2103
- if (canFlip) setIsFlipped(!isFlipped);
2104
- },
2105
- className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : canFlip ? "cursor-pointer" : "cursor-default"}`,
2106
- style: {
2107
- height: 180,
2108
- transformStyle: "preserve-3d",
2109
- transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
2110
- }
2117
+ className: "relative w-full max-w-85",
2118
+ style: { height: 180 }
2111
2119
  },
2112
- !isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50 " }, /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 28, className: "animate-spin text-black" })),
2113
- !isActivated && isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 z-40 w-full h-full rounded-2xl backdrop-blur-[2px] flex flex-col items-center justify-center ", style: { transform: "translateZ(1px)" } }, isUnactivated && /* @__PURE__ */ React20.createElement(
2120
+ !isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 28, className: "animate-spin text-black" })),
2121
+ showActionOverlay && /* @__PURE__ */ React20.createElement("div", { className: `absolute inset-0 z-40 w-full h-full rounded-2xl flex flex-col items-center justify-center transition-all ${overlayClasses}` }, isUnactivated && /* @__PURE__ */ React20.createElement(
2114
2122
  "button",
2115
2123
  {
2116
2124
  onClick: (e) => {
2117
2125
  e.stopPropagation();
2118
2126
  router.push(`${actionPath}${activeCard.id}`);
2119
2127
  },
2120
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2128
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2121
2129
  },
2122
2130
  "Activate Card"
2123
2131
  ), isDead && /* @__PURE__ */ React20.createElement(
@@ -2127,7 +2135,7 @@ var UniversalCardPage = ({
2127
2135
  e.stopPropagation();
2128
2136
  router.push(`${actionPath}${activeCard.id}`);
2129
2137
  },
2130
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2138
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2131
2139
  },
2132
2140
  "Create Card"
2133
2141
  ), isFrozen && /* @__PURE__ */ React20.createElement(
@@ -2138,50 +2146,38 @@ var UniversalCardPage = ({
2138
2146
  handleOverlayUnfreeze();
2139
2147
  },
2140
2148
  disabled: isOverlayActionLoading,
2141
- className: "px-6 py-2.5 bg-white/35 text-white text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80"
2149
+ className: `px-6 py-2.5 text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80 ${buttonClasses}`
2142
2150
  },
2143
- isOverlayActionLoading ? /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 16, className: "animate-spin" }) : "Unfreeze Card"
2151
+ isOverlayActionLoading ? /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Unfreeze Card"
2144
2152
  )),
2145
- /* @__PURE__ */ React20.createElement(
2153
+ /* @__PURE__ */ React20.createElement("div", { className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}` }, /* @__PURE__ */ React20.createElement(
2146
2154
  "div",
2147
2155
  {
2148
- className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}`,
2149
- style: { backfaceVisibility: "hidden" }
2150
- },
2151
- /* @__PURE__ */ React20.createElement(
2152
- "div",
2153
- {
2154
- className: "absolute inset-0 bg-cover bg-center",
2155
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2156
- }
2157
- ),
2158
- /* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-start w-full gap-4" }, activeCard.companyLogoSrc && /* @__PURE__ */ React20.createElement("img", { src: activeCard.companyLogoSrc, alt: "Company Logo", className: "h-10 w-auto max-w-30 object-contain opacity-90" })), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "Card Number"), /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white tracking-widest font-light" }, displayCardNumber)), activeCard.networkLogoSrc && /* @__PURE__ */ React20.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-10 w-auto max-w-20 object-contain opacity-90" })))
2159
- ),
2160
- /* @__PURE__ */ React20.createElement(
2161
- "div",
2156
+ className: "absolute inset-0 bg-cover bg-center",
2157
+ style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
2158
+ }
2159
+ ), /* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-start w-full gap-4" }), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React20.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ React20.createElement("span", { className: `text-[12px] tracking-widest font-medium uppercase ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ React20.createElement(
2160
+ "img",
2162
2161
  {
2163
- className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}`,
2164
- style: {
2165
- backfaceVisibility: "hidden",
2166
- transform: "rotateY(180deg)"
2167
- }
2168
- },
2169
- /* @__PURE__ */ React20.createElement(
2170
- "div",
2171
- {
2172
- className: "absolute inset-0 bg-cover bg-center",
2173
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2174
- }
2175
- ),
2176
- /* @__PURE__ */ React20.createElement("div", { className: "absolute top-6 left-0 right-0 h-10 bg-black/80 w-full" }),
2177
- /* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-end" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full text-center mb-6" }, /* @__PURE__ */ React20.createElement("span", { className: "text-white text-3xl italic tracking-wide opacity-90", style: { fontFamily: "'Whisper', cursive" } }, activeCard.cardHolderName)), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between w-full max-w-[80%]" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "Expiry"), /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white font-light" }, displayExpiry)), /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "CVV"), /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white font-light" }, displayCvv))))
2178
- )
2179
- )), /* @__PURE__ */ React20.createElement("p", { className: "w-full text-center text-xs text-neutral-400 mb-6 mt-1" }, isActivated ? "Tap to flip card" : "Action Required"), /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React20.createElement(
2162
+ src: activeCard.networkLogoSrc,
2163
+ alt: "Network Logo",
2164
+ className: "h-10 w-auto max-w-20 object-contain opacity-90"
2165
+ }
2166
+ ))))
2167
+ )), activeCard.bannerProps ? /* @__PURE__ */ React20.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ React20.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ React20.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ React20.createElement(
2168
+ Banner,
2169
+ {
2170
+ type: "success",
2171
+ title: "Order Secured",
2172
+ message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
2173
+ isDismissible: false
2174
+ }
2175
+ )) : null, /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React20.createElement(
2180
2176
  MenuRow,
2181
2177
  {
2182
2178
  icon: ViewOffSlashIcon2,
2183
2179
  title: "Reveal Information",
2184
- subtitle: "Show card informations",
2180
+ subtitle: "Show secure card details",
2185
2181
  onClick: handleToggleReveal,
2186
2182
  isToggle: true,
2187
2183
  toggleState: isRevealed,
@@ -2274,7 +2270,7 @@ var MenuRow = ({
2274
2270
  import React21, { useState as useState13 } from "react";
2275
2271
  import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
2276
2272
  import {
2277
- UserIcon as UserIcon2,
2273
+ UserIcon,
2278
2274
  LockKeyIcon as LockKeyIcon2,
2279
2275
  ShieldUserIcon,
2280
2276
  MessageQuestionIcon,
@@ -2328,10 +2324,10 @@ var UniversalProfilePage = ({
2328
2324
  onLoad: () => setIsAvatarLoaded(true),
2329
2325
  className: `w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? "opacity-100" : "opacity-0"}`
2330
2326
  }
2331
- )) : /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon: UserIcon2, size: 40, className: "text-neutral-300" }))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-full px-4 py-2 flex items-center justify-center gap-2 mb-3" }, /* @__PURE__ */ React21.createElement("span", { className: "text-[12px] text-black" }, roleName), /* @__PURE__ */ React21.createElement("span", { className: getBadgeColorClass(roleName), "aria-hidden": true }, /* @__PURE__ */ React21.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React21.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), /* @__PURE__ */ React21.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React21.createElement("g", { id: "SVGRepo_iconCarrier" }, " ", /* @__PURE__ */ React21.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z", fill: "currentColor" }), " ")))), /* @__PURE__ */ React21.createElement("span", { className: "text-[12px] text-neutral-500" }, memberSince)), /* @__PURE__ */ React21.createElement("div", { className: "w-full flex flex-col gap-4 mt-2" }, /* @__PURE__ */ React21.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React21.createElement(
2327
+ )) : /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon: UserIcon, size: 40, className: "text-neutral-300" }))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-full px-4 py-2 flex items-center justify-center gap-2 mb-3" }, /* @__PURE__ */ React21.createElement("span", { className: "text-[12px] text-black" }, roleName), /* @__PURE__ */ React21.createElement("span", { className: getBadgeColorClass(roleName), "aria-hidden": true }, /* @__PURE__ */ React21.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React21.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), /* @__PURE__ */ React21.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React21.createElement("g", { id: "SVGRepo_iconCarrier" }, " ", /* @__PURE__ */ React21.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z", fill: "currentColor" }), " ")))), /* @__PURE__ */ React21.createElement("span", { className: "text-[12px] text-neutral-500" }, memberSince)), /* @__PURE__ */ React21.createElement("div", { className: "w-full flex flex-col gap-4 mt-2" }, /* @__PURE__ */ React21.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React21.createElement(
2332
2328
  MenuRow2,
2333
2329
  {
2334
- icon: UserIcon2,
2330
+ icon: UserIcon,
2335
2331
  title: "Account",
2336
2332
  subtitle: "Your account details",
2337
2333
  onClick: onAccountTap
@@ -3910,7 +3906,7 @@ import {
3910
3906
  ArrowLeft01Icon as ArrowLeft01Icon8,
3911
3907
  Mail01Icon,
3912
3908
  SmartPhone01Icon,
3913
- UserIcon as UserIcon3,
3909
+ UserIcon as UserIcon2,
3914
3910
  CheckmarkCircle01Icon,
3915
3911
  Time02Icon,
3916
3912
  InformationCircleIcon as InformationCircleIcon2,
@@ -4011,7 +4007,7 @@ var UniversalVerificationPage = ({
4011
4007
  ), /* @__PURE__ */ React41.createElement(
4012
4008
  VerificationRow,
4013
4009
  {
4014
- icon: UserIcon3,
4010
+ icon: UserIcon2,
4015
4011
  title: "Identity Verification",
4016
4012
  status: identityStatus,
4017
4013
  isLoading: activeLoadingType === "IDENTITY",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "14.0.35",
3
+ "version": "14.0.50",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",