kaleido-ui 0.1.119 → 0.1.121

package/dist/web/index.cjs

@@ -1412,7 +1412,7 @@ function StatusBadge({ status, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: icon, className: "text-icon-sm" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: label })
       ]
     }
@@ -1846,7 +1846,10 @@ function AssetCard({
   const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = (0, import_react4.useState)(false);
   const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
-  const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
+  const gradientStyle = accentColor ? {
+    background: `linear-gradient(135deg, var(--card) 35%, ${accentColor}${hovered ? "55" : "33"} 78%, ${accentColor}${hovered ? "99" : "70"} 100%)`,
+    transition: "background 0.3s ease"
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
@@ -3533,6 +3536,7 @@ function BalanceBreakdown({
   onRefresh,
   isRefreshing = false,
   onNavigate,
+  actionLabels,
   compact = false,
   tokenValueSats
 }) {
@@ -3767,7 +3771,7 @@ function BalanceBreakdown({
                 ActionTile,
                 {
                   icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "material-symbols-outlined text-icon-sm leading-none", children: "call_received" }),
-                  label: "Deposit",
+                  label: actionLabels?.receive ?? "Deposit",
                   onClick: () => onNavigate?.("deposit"),
                   "data-testid": "dashboard-action-deposit"
                 }
@@ -3785,7 +3789,7 @@ function BalanceBreakdown({
                 ActionTile,
                 {
                   icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "material-symbols-outlined text-icon-sm leading-none", children: "arrow_outward" }),
-                  label: "Withdraw",
+                  label: actionLabels?.send ?? "Withdraw",
                   onClick: () => onNavigate?.("withdraw"),
                   "data-testid": "dashboard-action-withdraw"
                 }
@@ -5030,7 +5034,7 @@ function ActivityDetailRow({
             },
             className: "-my-1 rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
             title: fullValue ? `Copy: ${fullValue}` : "Copy",
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: isCopied ? "check" : "content_copy" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: isCopied ? "check" : "content_copy", style: { fontSize: "14px" } })
           }
         )
       ] })
@@ -5507,6 +5511,7 @@ function WithdrawConfirmation({
   decodedRgbInvoice,
   witnessAmountSat,
   amount,
+  reviewLabels,
   handleConfirmSend
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
@@ -5528,7 +5533,7 @@ function WithdrawConfirmation({
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ScrollArea, { className: "flex-1", viewportClassName: "px-5 pt-16 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("main", { className: "space-y-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col items-center py-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "mb-1 text-sm uppercase tracking-wide text-muted-foreground", children: "Sending" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "mb-1 text-sm uppercase tracking-wide text-muted-foreground", children: reviewLabels?.recipientReceives ?? "Recipient receives" }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h1", { className: "mb-2 text-4xl font-bold", children: displayAmount.toLocaleString() }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-base text-muted-foreground", children: selectedAssetId === "BTC" ? "sats" : selectedAsset?.ticker ?? "units" })
       ] }),
@@ -5556,17 +5561,24 @@ function WithdrawConfirmation({
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm text-muted-foreground", children: "Asset" }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-bold text-white", children: selectedAsset?.ticker ?? selectedAssetId })
         ] }),
-        estimatedFee > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm text-muted-foreground", children: "Network Fee" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col items-end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "text-sm text-white", children: [
-              "~",
-              estimatedFee.toLocaleString(),
-              " sats"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "mt-0.5 text-xxs font-bold capitalize tracking-wider text-primary", children: feeRate })
-          ] })
-        ] }),
+        estimatedFee > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          "div",
+          {
+            "data-testid": "payment-review-fee",
+            className: "flex items-center justify-between px-5 py-4",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm text-muted-foreground", children: reviewLabels?.estimatedNetworkFee ?? "Estimated network fee" }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "text-sm text-white", children: [
+                  "~",
+                  estimatedFee.toLocaleString(),
+                  " sats"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "mt-0.5 text-xxs font-bold capitalize tracking-wider text-primary", children: feeRate })
+              ] })
+            ]
+          }
+        ),
         addressType === "rgb" && decodedRgbInvoice?.recipient_type === "Witness" && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between px-5 py-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm text-muted-foreground", children: "Witness Amount" }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "text-sm text-white", children: [
@@ -5575,14 +5587,21 @@ function WithdrawConfirmation({
           ] })
         ] })
       ] }),
-      selectedAssetId === "BTC" && estimatedFee > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between rounded-2xl bg-primary/10 p-5 px-2 shadow-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-bold uppercase tracking-wider text-primary", children: "Total to deduct" }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "text-xl font-bold text-white", children: [
-          (Math.round(parseFloat(amount) || 0) + estimatedFee).toLocaleString(),
-          " ",
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-lg text-primary/70", children: "sats" })
-        ] })
-      ] }),
+      selectedAssetId === "BTC" && estimatedFee > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        "div",
+        {
+          "data-testid": "payment-review-total",
+          className: "flex items-center justify-between rounded-2xl bg-primary/10 p-5 shadow-inner",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-bold uppercase tracking-wider text-primary", children: reviewLabels?.totalDeducted ?? "Total deducted" }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "text-xl font-bold text-white", children: [
+              (Math.round(parseFloat(amount) || 0) + estimatedFee).toLocaleString(),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-lg text-primary/70", children: "sats" })
+            ] })
+          ]
+        }
+      ),
       isPollingStatus && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-3 rounded-xl bg-primary/10 p-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "material-symbols-outlined animate-spin text-primary", children: "progress_activity" }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [

package/dist/web/index.d.cts

@@ -761,6 +761,11 @@ interface BalanceBreakdownProps {
     onRefresh?: () => void;
     isRefreshing?: boolean;
     onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
+    /** Localized labels for receiving and sending funds. */
+    actionLabels?: {
+        receive: string;
+        send: string;
+    };
     /** Reduce vertical padding/margins so the card occupies less of the viewport. */
     compact?: boolean;
     /**
@@ -770,7 +775,7 @@ interface BalanceBreakdownProps {
      */
     tokenValueSats?: number;
 }
-declare function BalanceBreakdown({ btcOnchain, btcLightning, externalLightningAvailable, btcSpark, btcArkade, btcLiquid, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, btcLiquidPending, onRefresh, isRefreshing, onNavigate, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
+declare function BalanceBreakdown({ btcOnchain, btcLightning, externalLightningAvailable, btcSpark, btcArkade, btcLiquid, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, btcLiquidPending, onRefresh, isRefreshing, onNavigate, actionLabels, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
     id: string;
@@ -1140,9 +1145,15 @@ interface WithdrawConfirmationProps {
     decodedRgbInvoice: WithdrawConfirmationRgbInvoice | null;
     witnessAmountSat: number;
     amount: string;
+    /** Localized labels for the payment review amounts. */
+    reviewLabels?: {
+        recipientReceives: string;
+        estimatedNetworkFee: string;
+        totalDeducted: string;
+    };
     handleConfirmSend: () => void;
 }
-declare function WithdrawConfirmation({ isConfirming, isPollingStatus, setShowConfirmation, displayAmount, selectedAssetId, selectedAsset, destination, networkLabel, routeAccount, routeMethod, estimatedFee, feeRate, addressType, decodedRgbInvoice, witnessAmountSat, amount, handleConfirmSend, }: WithdrawConfirmationProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawConfirmation({ isConfirming, isPollingStatus, setShowConfirmation, displayAmount, selectedAssetId, selectedAsset, destination, networkLabel, routeAccount, routeMethod, estimatedFee, feeRate, addressType, decodedRgbInvoice, witnessAmountSat, amount, reviewLabels, handleConfirmSend, }: WithdrawConfirmationProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawSuccessProps {
     displayAmount: number;

package/dist/web/index.d.ts

@@ -761,6 +761,11 @@ interface BalanceBreakdownProps {
     onRefresh?: () => void;
     isRefreshing?: boolean;
     onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
+    /** Localized labels for receiving and sending funds. */
+    actionLabels?: {
+        receive: string;
+        send: string;
+    };
     /** Reduce vertical padding/margins so the card occupies less of the viewport. */
     compact?: boolean;
     /**
@@ -770,7 +775,7 @@ interface BalanceBreakdownProps {
      */
     tokenValueSats?: number;
 }
-declare function BalanceBreakdown({ btcOnchain, btcLightning, externalLightningAvailable, btcSpark, btcArkade, btcLiquid, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, btcLiquidPending, onRefresh, isRefreshing, onNavigate, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
+declare function BalanceBreakdown({ btcOnchain, btcLightning, externalLightningAvailable, btcSpark, btcArkade, btcLiquid, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, btcLiquidPending, onRefresh, isRefreshing, onNavigate, actionLabels, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
     id: string;
@@ -1140,9 +1145,15 @@ interface WithdrawConfirmationProps {
     decodedRgbInvoice: WithdrawConfirmationRgbInvoice | null;
     witnessAmountSat: number;
     amount: string;
+    /** Localized labels for the payment review amounts. */
+    reviewLabels?: {
+        recipientReceives: string;
+        estimatedNetworkFee: string;
+        totalDeducted: string;
+    };
     handleConfirmSend: () => void;
 }
-declare function WithdrawConfirmation({ isConfirming, isPollingStatus, setShowConfirmation, displayAmount, selectedAssetId, selectedAsset, destination, networkLabel, routeAccount, routeMethod, estimatedFee, feeRate, addressType, decodedRgbInvoice, witnessAmountSat, amount, handleConfirmSend, }: WithdrawConfirmationProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawConfirmation({ isConfirming, isPollingStatus, setShowConfirmation, displayAmount, selectedAssetId, selectedAsset, destination, networkLabel, routeAccount, routeMethod, estimatedFee, feeRate, addressType, decodedRgbInvoice, witnessAmountSat, amount, reviewLabels, handleConfirmSend, }: WithdrawConfirmationProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawSuccessProps {
     displayAmount: number;

package/dist/web/index.js

@@ -1218,7 +1218,7 @@ function StatusBadge({ status, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-icon-sm", children: icon }),
+        /* @__PURE__ */ jsx16(Icon, { name: icon, className: "text-icon-sm" }),
         /* @__PURE__ */ jsx16("span", { children: label })
       ]
     }
@@ -1652,7 +1652,10 @@ function AssetCard({
   const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = useState5(false);
   const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
-  const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
+  const gradientStyle = accentColor ? {
+    background: `linear-gradient(135deg, var(--card) 35%, ${accentColor}${hovered ? "55" : "33"} 78%, ${accentColor}${hovered ? "99" : "70"} 100%)`,
+    transition: "background 0.3s ease"
+  } : void 0;
   return /* @__PURE__ */ jsxs10(
     "div",
     {
@@ -3345,6 +3348,7 @@ function BalanceBreakdown({
   onRefresh,
   isRefreshing = false,
   onNavigate,
+  actionLabels,
   compact = false,
   tokenValueSats
 }) {
@@ -3579,7 +3583,7 @@ function BalanceBreakdown({
                 ActionTile,
                 {
                   icon: /* @__PURE__ */ jsx38("span", { className: "material-symbols-outlined text-icon-sm leading-none", children: "call_received" }),
-                  label: "Deposit",
+                  label: actionLabels?.receive ?? "Deposit",
                   onClick: () => onNavigate?.("deposit"),
                   "data-testid": "dashboard-action-deposit"
                 }
@@ -3597,7 +3601,7 @@ function BalanceBreakdown({
                 ActionTile,
                 {
                   icon: /* @__PURE__ */ jsx38("span", { className: "material-symbols-outlined text-icon-sm leading-none", children: "arrow_outward" }),
-                  label: "Withdraw",
+                  label: actionLabels?.send ?? "Withdraw",
                   onClick: () => onNavigate?.("withdraw"),
                   "data-testid": "dashboard-action-withdraw"
                 }
@@ -4842,7 +4846,7 @@ function ActivityDetailRow({
             },
             className: "-my-1 rounded-md p-1 text-white/30 transition-colors hover:bg-accent hover:text-primary active:scale-95",
             title: fullValue ? `Copy: ${fullValue}` : "Copy",
-            children: /* @__PURE__ */ jsx46("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: isCopied ? "check" : "content_copy" })
+            children: /* @__PURE__ */ jsx46(Icon, { name: isCopied ? "check" : "content_copy", style: { fontSize: "14px" } })
           }
         )
       ] })
@@ -5319,6 +5323,7 @@ function WithdrawConfirmation({
   decodedRgbInvoice,
   witnessAmountSat,
   amount,
+  reviewLabels,
   handleConfirmSend
 }) {
   return /* @__PURE__ */ jsxs38("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
@@ -5340,7 +5345,7 @@ function WithdrawConfirmation({
     ) }),
     /* @__PURE__ */ jsx51(ScrollArea, { className: "flex-1", viewportClassName: "px-5 pt-16 pb-6", children: /* @__PURE__ */ jsxs38("main", { className: "space-y-6", children: [
       /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center py-6", children: [
-        /* @__PURE__ */ jsx51("p", { className: "mb-1 text-sm uppercase tracking-wide text-muted-foreground", children: "Sending" }),
+        /* @__PURE__ */ jsx51("p", { className: "mb-1 text-sm uppercase tracking-wide text-muted-foreground", children: reviewLabels?.recipientReceives ?? "Recipient receives" }),
         /* @__PURE__ */ jsx51("h1", { className: "mb-2 text-4xl font-bold", children: displayAmount.toLocaleString() }),
         /* @__PURE__ */ jsx51("p", { className: "text-base text-muted-foreground", children: selectedAssetId === "BTC" ? "sats" : selectedAsset?.ticker ?? "units" })
       ] }),
@@ -5368,17 +5373,24 @@ function WithdrawConfirmation({
           /* @__PURE__ */ jsx51("span", { className: "text-sm text-muted-foreground", children: "Asset" }),
           /* @__PURE__ */ jsx51("span", { className: "text-sm font-bold text-white", children: selectedAsset?.ticker ?? selectedAssetId })
         ] }),
-        estimatedFee > 0 && /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between px-5 py-4", children: [
-          /* @__PURE__ */ jsx51("span", { className: "text-sm text-muted-foreground", children: "Network Fee" }),
-          /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-end", children: [
-            /* @__PURE__ */ jsxs38("span", { className: "text-sm text-white", children: [
-              "~",
-              estimatedFee.toLocaleString(),
-              " sats"
-            ] }),
-            /* @__PURE__ */ jsx51("span", { className: "mt-0.5 text-xxs font-bold capitalize tracking-wider text-primary", children: feeRate })
-          ] })
-        ] }),
+        estimatedFee > 0 && /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            "data-testid": "payment-review-fee",
+            className: "flex items-center justify-between px-5 py-4",
+            children: [
+              /* @__PURE__ */ jsx51("span", { className: "text-sm text-muted-foreground", children: reviewLabels?.estimatedNetworkFee ?? "Estimated network fee" }),
+              /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ jsxs38("span", { className: "text-sm text-white", children: [
+                  "~",
+                  estimatedFee.toLocaleString(),
+                  " sats"
+                ] }),
+                /* @__PURE__ */ jsx51("span", { className: "mt-0.5 text-xxs font-bold capitalize tracking-wider text-primary", children: feeRate })
+              ] })
+            ]
+          }
+        ),
         addressType === "rgb" && decodedRgbInvoice?.recipient_type === "Witness" && /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between px-5 py-4", children: [
           /* @__PURE__ */ jsx51("span", { className: "text-sm text-muted-foreground", children: "Witness Amount" }),
           /* @__PURE__ */ jsxs38("span", { className: "text-sm text-white", children: [
@@ -5387,14 +5399,21 @@ function WithdrawConfirmation({
           ] })
         ] })
       ] }),
-      selectedAssetId === "BTC" && estimatedFee > 0 && /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between rounded-2xl bg-primary/10 p-5 px-2 shadow-inner", children: [
-        /* @__PURE__ */ jsx51("span", { className: "text-sm font-bold uppercase tracking-wider text-primary", children: "Total to deduct" }),
-        /* @__PURE__ */ jsxs38("span", { className: "text-xl font-bold text-white", children: [
-          (Math.round(parseFloat(amount) || 0) + estimatedFee).toLocaleString(),
-          " ",
-          /* @__PURE__ */ jsx51("span", { className: "text-lg text-primary/70", children: "sats" })
-        ] })
-      ] }),
+      selectedAssetId === "BTC" && estimatedFee > 0 && /* @__PURE__ */ jsxs38(
+        "div",
+        {
+          "data-testid": "payment-review-total",
+          className: "flex items-center justify-between rounded-2xl bg-primary/10 p-5 shadow-inner",
+          children: [
+            /* @__PURE__ */ jsx51("span", { className: "text-sm font-bold uppercase tracking-wider text-primary", children: reviewLabels?.totalDeducted ?? "Total deducted" }),
+            /* @__PURE__ */ jsxs38("span", { className: "text-xl font-bold text-white", children: [
+              (Math.round(parseFloat(amount) || 0) + estimatedFee).toLocaleString(),
+              " ",
+              /* @__PURE__ */ jsx51("span", { className: "text-lg text-primary/70", children: "sats" })
+            ] })
+          ]
+        }
+      ),
       isPollingStatus && /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-3 rounded-xl bg-primary/10 p-4", children: [
         /* @__PURE__ */ jsx51("span", { className: "material-symbols-outlined animate-spin text-primary", children: "progress_activity" }),
         /* @__PURE__ */ jsxs38("div", { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.119",
+  "version": "0.1.121",
   "description": "KaleidoSwap shared UI library \u2014 design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,8 @@
   "scripts": {
     "generate:css": "node node_modules/tsx/dist/cli.mjs scripts/generate-css.ts",
     "check:tokens": "node node_modules/tsx/dist/cli.mjs scripts/check-tokens.ts",
-    "build": "npm run generate:css && npm run check:tokens && tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css && mkdir -p dist/native/fonts && cp src/native/fonts/*.ttf dist/native/fonts/",
+    "check:design-doc": "node node_modules/tsx/dist/cli.mjs scripts/check-design-doc.ts",
+    "build": "npm run generate:css && npm run check:tokens && npm run check:design-doc && tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css && mkdir -p dist/native/fonts && cp src/native/fonts/*.ttf dist/native/fonts/",
     "dev": "tsup --watch",
     "showcase": "vite --config showcase/vite.config.ts",
     "showcase:build": "npm run generate:css && vite build --config showcase/vite.config.ts",