kaleido-ui 0.1.43 → 0.1.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/web/index.cjs +34 -53
  2. package/dist/web/index.js +34 -53
  3. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -179,10 +179,11 @@ var NUMBER_RE = /^(-?\d[\d,]*)(?:\.(\d+))?$/;
179
179
  function formatDisplayAmountText(value, options = {}) {
180
180
  if (value === null || value === void 0 || value === "") return "";
181
181
  const unit = options.unit ?? "token";
182
- const maxDecimals = unit === "sats" ? 0 : unit === "BTC" ? 8 : unit === "mBTC" ? 5 : options.maxDecimals ?? 6;
183
182
  const raw = typeof value === "number" ? String(value) : value.trim();
184
183
  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
185
184
  const suffix = suffixMatch?.[1] ?? "";
185
+ const detectedUnit = suffix.trim() === "BTC" ? "BTC" : suffix.trim() === "sats" ? "sats" : suffix.trim() === "mBTC" ? "mBTC" : unit;
186
+ const maxDecimals = detectedUnit === "sats" ? 0 : detectedUnit === "BTC" ? 8 : detectedUnit === "mBTC" ? 5 : options.maxDecimals ?? 6;
186
187
  const numeric = suffix ? raw.slice(0, -suffix.length) : raw;
187
188
  const match = numeric.match(NUMBER_RE);
188
189
  if (!match) return raw;
@@ -1622,13 +1623,19 @@ function NetworkBadge({
1622
1623
  backgroundColor: `var(${chipVar})`,
1623
1624
  color: `var(${textVar})`
1624
1625
  };
1625
- const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1626
- "span",
1626
+ const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1627
+ "svg",
1627
1628
  {
1628
- className: cn("material-symbols-outlined leading-none", className2),
1629
- style: { fontSize: size === "sm" ? 12 : size === "lg" ? 24 : 16 },
1629
+ viewBox: "0 0 47.5 47.5",
1630
+ fill: "currentColor",
1630
1631
  "aria-hidden": true,
1631
- children: "link"
1632
+ width: "1em",
1633
+ height: "1em",
1634
+ className: cn("inline-block shrink-0", className2),
1635
+ children: [
1636
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { transform: "matrix(1.25 0 0 -1.25 0 47.5)", d: "m16 28 6 6s6 6 12 0 0-12 0-12l-8-8s-6-6-12 0c-1.125 1.125-1.822 2.62-1.822 2.62l3.353 3.348S15.396 18.604 17 17c0 0 3-3 6 0l8 8s3 3 0 6-6 0-6 0l-3.729-3.729s-1.854 1.521-5.646.354L16 28Z" }),
1637
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { transform: "matrix(1.25 0 0 -1.25 0 47.5)", d: "m21.845 10-6-6s-6-6-12 0 0 12 0 12l8 8s6 6 12 0c1.125-1.125 1.822-2.62 1.822-2.62l-3.353-3.349s.135 1.365-1.469 2.969c0 0-3 3-6 0l-8-8s-3-3 0-6 6 0 6 0l3.729 3.729s1.854-1.52 5.646-.354L21.845 10Z" })
1638
+ ]
1632
1639
  }
1633
1640
  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1634
1641
  "img",
@@ -3346,7 +3353,7 @@ function ImageIcon({
3346
3353
  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src, alt, className });
3347
3354
  }
3348
3355
  function numberOnly(formatted) {
3349
- return formatted.replace(/\u00a0(sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
3356
+ return formatted.replace(/[\u00a0 ](sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
3350
3357
  }
3351
3358
  function BalanceBreakdown({
3352
3359
  btcOnchain,
@@ -3832,10 +3839,10 @@ function AssetSelector({
3832
3839
  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
3833
3840
  "div",
3834
3841
  {
3835
- className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-3xl border-t border-border bg-popover/95 shadow-popover backdrop-blur-2xl duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-3xl sm:border sm:slide-in-from-bottom-0 sm:zoom-in-95",
3842
+ className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-3xl bg-popover/95 shadow-popover backdrop-blur-2xl duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-3xl sm:border sm:slide-in-from-bottom-0 sm:zoom-in-95",
3836
3843
  onClick: (event) => event.stopPropagation(),
3837
3844
  children: [
3838
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-shrink-0 border-b border-white/[0.08] bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
3845
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-shrink-0 bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
3839
3846
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0", children: [
3840
3847
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-xxs font-bold uppercase tracking-eyebrow-wide text-text-dimmed", children: [
3841
3848
  label,
@@ -3848,13 +3855,13 @@ function AssetSelector({
3848
3855
  " available"
3849
3856
  ] })
3850
3857
  ] }),
3851
- selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
3858
+ selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
3852
3859
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
3853
3860
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
3854
3861
  selected.network && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
3855
3862
  ] })
3856
3863
  ] }) }),
3857
- /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-shrink-0 border-b border-white/[0.08] px-4 py-3", children: [
3864
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-shrink-0 px-4 py-3", children: [
3858
3865
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
3859
3866
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
3860
3867
  Icon,
@@ -3909,6 +3916,7 @@ function AssetSelector({
3909
3916
  })
3910
3917
  ] })
3911
3918
  ] }),
3919
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mx-4 h-px bg-white/[0.06]" }),
3912
3920
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
3913
3921
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "search", size: "md", className: "opacity-40" }),
3914
3922
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
@@ -3996,7 +4004,7 @@ function AssetSelector({
3996
4004
  ] })
3997
4005
  ] }),
3998
4006
  renderPanelHeader: () => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
3999
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-white/[0.08] bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
4007
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
4000
4008
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0", children: [
4001
4009
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-xxs font-bold uppercase tracking-eyebrow-wide text-text-dimmed", children: [
4002
4010
  label,
@@ -4009,13 +4017,13 @@ function AssetSelector({
4009
4017
  " available"
4010
4018
  ] })
4011
4019
  ] }),
4012
- selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
4020
+ selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
4013
4021
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
4014
4022
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
4015
4023
  selected.network && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
4016
4024
  ] })
4017
4025
  ] }) }),
4018
- /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "border-b border-white/[0.08] px-4 py-3", children: [
4026
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "px-4 py-3", children: [
4019
4027
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
4020
4028
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
4021
4029
  Icon,
@@ -4356,7 +4364,7 @@ function LoadingCard({ message = "Loading...", className }) {
4356
4364
  className
4357
4365
  ),
4358
4366
  children: [
4359
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mb-4 size-12 animate-spin rounded-full border-2 border-primary/20 border-t-primary" }),
4367
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mb-4 size-12 animate-spin rounded-full border-4 border-primary/20 border-t-primary" }),
4360
4368
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-sm", children: message })
4361
4369
  ]
4362
4370
  }
@@ -7535,9 +7543,6 @@ function formatAssetBalance(asset) {
7535
7543
  maximumFractionDigits: Math.min(precision, 8)
7536
7544
  });
7537
7545
  }
7538
- function NetBadge({ icon, className }) {
7539
- return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
7540
- }
7541
7546
  function DepositAssetSelection({
7542
7547
  setCurrentView,
7543
7548
  isNewAsset,
@@ -7641,43 +7646,19 @@ function DepositAssetSelection({
7641
7646
  {
7642
7647
  type: "button",
7643
7648
  "data-testid": "deposit-asset-btc",
7644
- className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
7649
+ className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-white/3 px-4 py-3 text-sm transition-all hover:bg-accent",
7645
7650
  onClick: () => onSelectAsset(btcAsset),
7646
7651
  children: [
7647
- /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AssetIcon, { ticker: "BTC", size: 40 }),
7652
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
7648
7653
  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
7649
7654
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: "Bitcoin" }),
7650
7655
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mt-0.5 text-xs text-white/40", children: "Choose destination account next" })
7651
7656
  ] }),
7652
- /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-shrink-0 gap-1", children: [
7653
- /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
7654
- NetBadge,
7655
- {
7656
- className: "border-network-bitcoin/20 bg-network-bitcoin/15",
7657
- icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
7658
- }
7659
- ),
7660
- /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
7661
- NetBadge,
7662
- {
7663
- className: "border-warning/20 bg-warning/15",
7664
- icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
7665
- }
7666
- ),
7667
- isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
7668
- NetBadge,
7669
- {
7670
- className: "border-info/20 bg-info/15",
7671
- icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "h-2.5 w-2.5", alt: "Spark" })
7672
- }
7673
- ),
7674
- isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
7675
- NetBadge,
7676
- {
7677
- className: "border-network-arkade/20 bg-network-arkade/15",
7678
- icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", className: "h-2.5 w-2.5 rounded-sm", alt: "Arkade" })
7679
- }
7680
- )
7657
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
7658
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "L1", size: "sm" }),
7659
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "LN", size: "sm" }),
7660
+ isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "Spark", size: "sm" }),
7661
+ isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "Arkade", size: "sm" })
7681
7662
  ] }),
7682
7663
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
7683
7664
  ]
@@ -7696,8 +7677,8 @@ function DepositAssetSelection({
7696
7677
  onClick: () => !isSearching && setAssetsExpanded((value) => !value),
7697
7678
  disabled: isSearching,
7698
7679
  className: cn(
7699
- "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
7700
- showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
7680
+ "flex w-full items-center gap-2 rounded-2xl px-4 py-2.5 transition-all",
7681
+ showOwnedAssets ? "bg-white/4" : "bg-white/3 hover:bg-accent",
7701
7682
  isSearching && "cursor-default"
7702
7683
  ),
7703
7684
  children: [
@@ -7716,12 +7697,12 @@ function DepositAssetSelection({
7716
7697
  {
7717
7698
  type: "button",
7718
7699
  "data-testid": `deposit-asset-${asset.asset_id}`,
7719
- className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
7700
+ className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
7720
7701
  onClick: () => onSelectAsset(asset),
7721
7702
  children: [
7722
7703
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
7723
7704
  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
7724
- /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-1.5", children: [
7705
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
7725
7706
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
7726
7707
  protocolBadge && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
7727
7708
  "span",
package/dist/web/index.js CHANGED
@@ -12,10 +12,11 @@ var NUMBER_RE = /^(-?\d[\d,]*)(?:\.(\d+))?$/;
12
12
  function formatDisplayAmountText(value, options = {}) {
13
13
  if (value === null || value === void 0 || value === "") return "";
14
14
  const unit = options.unit ?? "token";
15
- const maxDecimals = unit === "sats" ? 0 : unit === "BTC" ? 8 : unit === "mBTC" ? 5 : options.maxDecimals ?? 6;
16
15
  const raw = typeof value === "number" ? String(value) : value.trim();
17
16
  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
18
17
  const suffix = suffixMatch?.[1] ?? "";
18
+ const detectedUnit = suffix.trim() === "BTC" ? "BTC" : suffix.trim() === "sats" ? "sats" : suffix.trim() === "mBTC" ? "mBTC" : unit;
19
+ const maxDecimals = detectedUnit === "sats" ? 0 : detectedUnit === "BTC" ? 8 : detectedUnit === "mBTC" ? 5 : options.maxDecimals ?? 6;
19
20
  const numeric = suffix ? raw.slice(0, -suffix.length) : raw;
20
21
  const match = numeric.match(NUMBER_RE);
21
22
  if (!match) return raw;
@@ -1455,13 +1456,19 @@ function NetworkBadge({
1455
1456
  backgroundColor: `var(${chipVar})`,
1456
1457
  color: `var(${textVar})`
1457
1458
  };
1458
- const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsx17(
1459
- "span",
1459
+ const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsxs7(
1460
+ "svg",
1460
1461
  {
1461
- className: cn("material-symbols-outlined leading-none", className2),
1462
- style: { fontSize: size === "sm" ? 12 : size === "lg" ? 24 : 16 },
1462
+ viewBox: "0 0 47.5 47.5",
1463
+ fill: "currentColor",
1463
1464
  "aria-hidden": true,
1464
- children: "link"
1465
+ width: "1em",
1466
+ height: "1em",
1467
+ className: cn("inline-block shrink-0", className2),
1468
+ children: [
1469
+ /* @__PURE__ */ jsx17("path", { transform: "matrix(1.25 0 0 -1.25 0 47.5)", d: "m16 28 6 6s6 6 12 0 0-12 0-12l-8-8s-6-6-12 0c-1.125 1.125-1.822 2.62-1.822 2.62l3.353 3.348S15.396 18.604 17 17c0 0 3-3 6 0l8 8s3 3 0 6-6 0-6 0l-3.729-3.729s-1.854 1.521-5.646.354L16 28Z" }),
1470
+ /* @__PURE__ */ jsx17("path", { transform: "matrix(1.25 0 0 -1.25 0 47.5)", d: "m21.845 10-6-6s-6-6-12 0 0 12 0 12l8 8s6 6 12 0c1.125-1.125 1.822-2.62 1.822-2.62l-3.353-3.349s.135 1.365-1.469 2.969c0 0-3 3-6 0l-8-8s-3-3 0-6 6 0 6 0l3.729 3.729s1.854-1.52 5.646-.354L21.845 10Z" })
1471
+ ]
1465
1472
  }
1466
1473
  ) : /* @__PURE__ */ jsx17(
1467
1474
  "img",
@@ -3185,7 +3192,7 @@ function ImageIcon({
3185
3192
  return /* @__PURE__ */ jsx36("img", { src, alt, className });
3186
3193
  }
3187
3194
  function numberOnly(formatted) {
3188
- return formatted.replace(/\u00a0(sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
3195
+ return formatted.replace(/[\u00a0 ](sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
3189
3196
  }
3190
3197
  function BalanceBreakdown({
3191
3198
  btcOnchain,
@@ -3671,10 +3678,10 @@ function AssetSelector({
3671
3678
  children: /* @__PURE__ */ jsxs24(
3672
3679
  "div",
3673
3680
  {
3674
- className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-3xl border-t border-border bg-popover/95 shadow-popover backdrop-blur-2xl duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-3xl sm:border sm:slide-in-from-bottom-0 sm:zoom-in-95",
3681
+ className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-3xl bg-popover/95 shadow-popover backdrop-blur-2xl duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-3xl sm:border sm:slide-in-from-bottom-0 sm:zoom-in-95",
3675
3682
  onClick: (event) => event.stopPropagation(),
3676
3683
  children: [
3677
- /* @__PURE__ */ jsx37("div", { className: "flex-shrink-0 border-b border-white/[0.08] bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-3", children: [
3684
+ /* @__PURE__ */ jsx37("div", { className: "flex-shrink-0 bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-3", children: [
3678
3685
  /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
3679
3686
  /* @__PURE__ */ jsxs24("p", { className: "text-xxs font-bold uppercase tracking-eyebrow-wide text-text-dimmed", children: [
3680
3687
  label,
@@ -3687,13 +3694,13 @@ function AssetSelector({
3687
3694
  " available"
3688
3695
  ] })
3689
3696
  ] }),
3690
- selected && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
3697
+ selected && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
3691
3698
  /* @__PURE__ */ jsx37(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
3692
3699
  /* @__PURE__ */ jsx37("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
3693
3700
  selected.network && /* @__PURE__ */ jsx37(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
3694
3701
  ] })
3695
3702
  ] }) }),
3696
- /* @__PURE__ */ jsxs24("div", { className: "flex-shrink-0 border-b border-white/[0.08] px-4 py-3", children: [
3703
+ /* @__PURE__ */ jsxs24("div", { className: "flex-shrink-0 px-4 py-3", children: [
3697
3704
  /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
3698
3705
  /* @__PURE__ */ jsx37(
3699
3706
  Icon,
@@ -3748,6 +3755,7 @@ function AssetSelector({
3748
3755
  })
3749
3756
  ] })
3750
3757
  ] }),
3758
+ /* @__PURE__ */ jsx37("div", { className: "mx-4 h-px bg-white/[0.06]" }),
3751
3759
  /* @__PURE__ */ jsx37(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
3752
3760
  /* @__PURE__ */ jsx37(Icon, { name: "search", size: "md", className: "opacity-40" }),
3753
3761
  /* @__PURE__ */ jsxs24("span", { children: [
@@ -3835,7 +3843,7 @@ function AssetSelector({
3835
3843
  ] })
3836
3844
  ] }),
3837
3845
  renderPanelHeader: () => /* @__PURE__ */ jsxs24(Fragment6, { children: [
3838
- /* @__PURE__ */ jsx37("div", { className: "border-b border-white/[0.08] bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-3", children: [
3846
+ /* @__PURE__ */ jsx37("div", { className: "bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-3", children: [
3839
3847
  /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
3840
3848
  /* @__PURE__ */ jsxs24("p", { className: "text-xxs font-bold uppercase tracking-eyebrow-wide text-text-dimmed", children: [
3841
3849
  label,
@@ -3848,13 +3856,13 @@ function AssetSelector({
3848
3856
  " available"
3849
3857
  ] })
3850
3858
  ] }),
3851
- selected && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
3859
+ selected && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
3852
3860
  /* @__PURE__ */ jsx37(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
3853
3861
  /* @__PURE__ */ jsx37("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
3854
3862
  selected.network && /* @__PURE__ */ jsx37(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
3855
3863
  ] })
3856
3864
  ] }) }),
3857
- /* @__PURE__ */ jsxs24("div", { className: "border-b border-white/[0.08] px-4 py-3", children: [
3865
+ /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3", children: [
3858
3866
  /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
3859
3867
  /* @__PURE__ */ jsx37(
3860
3868
  Icon,
@@ -4195,7 +4203,7 @@ function LoadingCard({ message = "Loading...", className }) {
4195
4203
  className
4196
4204
  ),
4197
4205
  children: [
4198
- /* @__PURE__ */ jsx39("div", { className: "mb-4 size-12 animate-spin rounded-full border-2 border-primary/20 border-t-primary" }),
4206
+ /* @__PURE__ */ jsx39("div", { className: "mb-4 size-12 animate-spin rounded-full border-4 border-primary/20 border-t-primary" }),
4199
4207
  /* @__PURE__ */ jsx39("p", { className: "text-sm", children: message })
4200
4208
  ]
4201
4209
  }
@@ -7374,9 +7382,6 @@ function formatAssetBalance(asset) {
7374
7382
  maximumFractionDigits: Math.min(precision, 8)
7375
7383
  });
7376
7384
  }
7377
- function NetBadge({ icon, className }) {
7378
- return /* @__PURE__ */ jsx65("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
7379
- }
7380
7385
  function DepositAssetSelection({
7381
7386
  setCurrentView,
7382
7387
  isNewAsset,
@@ -7480,43 +7485,19 @@ function DepositAssetSelection({
7480
7485
  {
7481
7486
  type: "button",
7482
7487
  "data-testid": "deposit-asset-btc",
7483
- className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
7488
+ className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-white/3 px-4 py-3 text-sm transition-all hover:bg-accent",
7484
7489
  onClick: () => onSelectAsset(btcAsset),
7485
7490
  children: [
7486
- /* @__PURE__ */ jsx65(AssetIcon, { ticker: "BTC", size: 40 }),
7491
+ /* @__PURE__ */ jsx65(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
7487
7492
  /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1 text-left", children: [
7488
7493
  /* @__PURE__ */ jsx65("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: "Bitcoin" }),
7489
7494
  /* @__PURE__ */ jsx65("div", { className: "mt-0.5 text-xs text-white/40", children: "Choose destination account next" })
7490
7495
  ] }),
7491
- /* @__PURE__ */ jsxs51("div", { className: "flex flex-shrink-0 gap-1", children: [
7492
- /* @__PURE__ */ jsx65(
7493
- NetBadge,
7494
- {
7495
- className: "border-network-bitcoin/20 bg-network-bitcoin/15",
7496
- icon: /* @__PURE__ */ jsx65("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
7497
- }
7498
- ),
7499
- /* @__PURE__ */ jsx65(
7500
- NetBadge,
7501
- {
7502
- className: "border-warning/20 bg-warning/15",
7503
- icon: /* @__PURE__ */ jsx65("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
7504
- }
7505
- ),
7506
- isSparkConnected && /* @__PURE__ */ jsx65(
7507
- NetBadge,
7508
- {
7509
- className: "border-info/20 bg-info/15",
7510
- icon: /* @__PURE__ */ jsx65("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "h-2.5 w-2.5", alt: "Spark" })
7511
- }
7512
- ),
7513
- isArkadeConnected && /* @__PURE__ */ jsx65(
7514
- NetBadge,
7515
- {
7516
- className: "border-network-arkade/20 bg-network-arkade/15",
7517
- icon: /* @__PURE__ */ jsx65("img", { src: "/icons/arkade/arkade-icon.svg", className: "h-2.5 w-2.5 rounded-sm", alt: "Arkade" })
7518
- }
7519
- )
7496
+ /* @__PURE__ */ jsxs51("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
7497
+ /* @__PURE__ */ jsx65(NetworkBadge, { network: "L1", size: "sm" }),
7498
+ /* @__PURE__ */ jsx65(NetworkBadge, { network: "LN", size: "sm" }),
7499
+ isSparkConnected && /* @__PURE__ */ jsx65(NetworkBadge, { network: "Spark", size: "sm" }),
7500
+ isArkadeConnected && /* @__PURE__ */ jsx65(NetworkBadge, { network: "Arkade", size: "sm" })
7520
7501
  ] }),
7521
7502
  /* @__PURE__ */ jsx65("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
7522
7503
  ]
@@ -7535,8 +7516,8 @@ function DepositAssetSelection({
7535
7516
  onClick: () => !isSearching && setAssetsExpanded((value) => !value),
7536
7517
  disabled: isSearching,
7537
7518
  className: cn(
7538
- "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
7539
- showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
7519
+ "flex w-full items-center gap-2 rounded-2xl px-4 py-2.5 transition-all",
7520
+ showOwnedAssets ? "bg-white/4" : "bg-white/3 hover:bg-accent",
7540
7521
  isSearching && "cursor-default"
7541
7522
  ),
7542
7523
  children: [
@@ -7555,12 +7536,12 @@ function DepositAssetSelection({
7555
7536
  {
7556
7537
  type: "button",
7557
7538
  "data-testid": `deposit-asset-${asset.asset_id}`,
7558
- className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
7539
+ className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
7559
7540
  onClick: () => onSelectAsset(asset),
7560
7541
  children: [
7561
7542
  /* @__PURE__ */ jsx65(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
7562
7543
  /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1 text-left", children: [
7563
- /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1.5", children: [
7544
+ /* @__PURE__ */ jsxs51("div", { className: "flex min-w-0 items-center gap-1.5", children: [
7564
7545
  /* @__PURE__ */ jsx65("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
7565
7546
  protocolBadge && /* @__PURE__ */ jsx65(
7566
7547
  "span",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.43",
3
+ "version": "0.1.45",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",