kaleido-ui 0.1.92 → 0.1.93

package/dist/web/index.cjs

@@ -336,7 +336,7 @@ var Input = React3.forwardRef(
       {
         type,
         className: cn(
-          "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
+          "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/25 focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
           className
         ),
         ref,
@@ -848,7 +848,7 @@ var NumberInput = React6.forwardRef(
           step,
           disabled,
           className: cn(
-            "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
+            "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
             "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
             className
           ),
@@ -1352,47 +1352,41 @@ function StatusBadge({ status, className }) {
     success: {
       color: "text-primary",
       bg: "bg-primary/10",
-      border: "border-primary/20",
       icon: "check_circle",
       label: "Success"
     },
     completed: {
       color: "text-primary",
       bg: "bg-primary/10",
-      border: "border-primary/20",
       icon: "check_circle",
       label: "Completed"
     },
     pending: {
       color: "text-warning",
       bg: "bg-warning/10",
-      border: "border-warning/20",
       icon: "schedule",
       label: "Pending"
     },
     failed: {
       color: "text-danger",
       bg: "bg-danger/10",
-      border: "border-danger/20",
       icon: "error",
       label: "Failed"
     },
     error: {
       color: "text-danger",
       bg: "bg-danger/10",
-      border: "border-danger/20",
       icon: "error",
       label: "Error"
     }
   };
-  const { color, bg, border, icon, label } = config[status];
+  const { color, bg, icon, label } = config[status];
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: cn(
-        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full border font-medium text-xs",
+        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-xs",
         bg,
-        border,
         color,
         className
       ),
@@ -1890,7 +1884,7 @@ function TransactionCard({
   className
 }) {
   const isInbound = direction === "inbound";
-  const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
+  const formatDate = (ts) => new Date(ts * 1e3).toLocaleString([], { dateStyle: "short", timeStyle: "short" });
   const statusStyle = {
     success: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
     completed: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
@@ -2654,7 +2648,7 @@ function InlineSelector({
         ),
         children: [
           renderPanelHeader?.(renderArgs),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ScrollArea, { className: "max-h-72", viewportClassName: "max-h-72", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "search", size: "md", className: "opacity-40" }),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "No results" })
           ] }) : options.map((option) => {
@@ -2684,7 +2678,7 @@ function InlineSelector({
               },
               option.id
             );
-          }) })
+          }) }) })
         ]
       }
     )
@@ -3064,15 +3058,13 @@ function AccountSettingsShell({
   onBack
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex h-14 shrink-0 items-center px-2", children: onBack && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "arrow_back", size: "xl" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("header", { className: "flex h-14 shrink-0 items-center gap-2 px-2", children: [
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "arrow_back", size: "xl" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccountHeaderIcons, { accountId }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-lg font-bold text-foreground", children: title })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("main", { className: "flex-1 space-y-6 overflow-y-auto px-5 pb-28 pt-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccountHeaderIcons, { accountId }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-xl font-bold text-foreground", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
-        ] })
-      ] }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm text-muted-foreground", children: subtitle }),
       children
     ] })
   ] });
@@ -3868,7 +3860,7 @@ function AssetSelector({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
-          optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               className: cn(
@@ -3983,7 +3975,7 @@ function AssetSelector({
                           value: search,
                           onChange: (event) => setSearch(event.target.value),
                           placeholder: "Search...",
-                          className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
+                          className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
                         }
                       )
                     ] }),
@@ -4043,7 +4035,7 @@ function AssetSelector({
                         },
                         className: cn(
                           "group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition-all duration-200",
-                          optionSelected ? "border-primary/30 bg-primary/[0.12]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
+                          optionSelected ? "border-transparent bg-primary/[0.14]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
                         ),
                         children: renderAssetOption(option, optionSelected, optionDisabled)
                       },
@@ -4134,7 +4126,7 @@ function AssetSelector({
                 value: search,
                 onChange: (event) => setSearch(event.target.value),
                 placeholder: "Search...",
-                className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
+                className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
               }
             )
           ] }),
@@ -4795,8 +4787,9 @@ function ActivityDetailRow({
   onCopy,
   isCopied
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between py-1 last:pb-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-3 py-1 last:pb-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex max-w-[65%] items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
       onCopy && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -5002,7 +4995,7 @@ function WithdrawAmountInput({
                 setFeeRateMode?.(mode);
                 if (mode !== "custom") setFeeRate(mode);
               },
-              className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-primary/40 bg-primary/10" : "border-transparent bg-card/70 hover:border-primary/40"}`,
+              className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-transparent bg-primary/[0.14]" : "border-transparent bg-card/70 hover:bg-card"}`,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   "span",
@@ -6366,7 +6359,7 @@ function SelectableCard({
   ] });
   const cardClassName = cn(
     "w-full rounded-2xl border p-4 text-left transition-all duration-200",
-    selected ? "border-primary/40 bg-primary/10 shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
+    selected ? "border-transparent bg-primary/[0.14] shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
     className
   );
   if (onClick) {
@@ -8604,7 +8597,7 @@ function DepositAssetSelection({
         {
           autoFocus: true,
           "data-testid": "deposit-asset-search",
-          className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
+          className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8",
           onChange: (event) => setSearchQuery(event.target.value),
           placeholder: "Search assets...",
           type: "text",

package/dist/web/index.js

@@ -148,7 +148,7 @@ var Input = React3.forwardRef(
       {
         type,
         className: cn(
-          "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
+          "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/25 focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
           className
         ),
         ref,
@@ -660,7 +660,7 @@ var NumberInput = React6.forwardRef(
           step,
           disabled,
           className: cn(
-            "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
+            "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
             "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
             className
           ),
@@ -1164,47 +1164,41 @@ function StatusBadge({ status, className }) {
     success: {
       color: "text-primary",
       bg: "bg-primary/10",
-      border: "border-primary/20",
       icon: "check_circle",
       label: "Success"
     },
     completed: {
       color: "text-primary",
       bg: "bg-primary/10",
-      border: "border-primary/20",
       icon: "check_circle",
       label: "Completed"
     },
     pending: {
       color: "text-warning",
       bg: "bg-warning/10",
-      border: "border-warning/20",
       icon: "schedule",
       label: "Pending"
     },
     failed: {
       color: "text-danger",
       bg: "bg-danger/10",
-      border: "border-danger/20",
       icon: "error",
       label: "Failed"
     },
     error: {
       color: "text-danger",
       bg: "bg-danger/10",
-      border: "border-danger/20",
       icon: "error",
       label: "Error"
     }
   };
-  const { color, bg, border, icon, label } = config[status];
+  const { color, bg, icon, label } = config[status];
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
-        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full border font-medium text-xs",
+        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-xs",
         bg,
-        border,
         color,
         className
       ),
@@ -1702,7 +1696,7 @@ function TransactionCard({
   className
 }) {
   const isInbound = direction === "inbound";
-  const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
+  const formatDate = (ts) => new Date(ts * 1e3).toLocaleString([], { dateStyle: "short", timeStyle: "short" });
   const statusStyle = {
     success: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
     completed: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
@@ -2472,7 +2466,7 @@ function InlineSelector({
         ),
         children: [
           renderPanelHeader?.(renderArgs),
-          /* @__PURE__ */ jsx30("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
+          /* @__PURE__ */ jsx30(ScrollArea, { className: "max-h-72", viewportClassName: "max-h-72", children: /* @__PURE__ */ jsx30("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
             /* @__PURE__ */ jsx30(Icon, { name: "search", size: "md", className: "opacity-40" }),
             /* @__PURE__ */ jsx30("span", { children: "No results" })
           ] }) : options.map((option) => {
@@ -2502,7 +2496,7 @@ function InlineSelector({
               },
               option.id
             );
-          }) })
+          }) }) })
         ]
       }
     )
@@ -2882,15 +2876,13 @@ function AccountSettingsShell({
   onBack
 }) {
   return /* @__PURE__ */ jsxs21("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
-    /* @__PURE__ */ jsx34("div", { className: "flex h-14 shrink-0 items-center px-2", children: onBack && /* @__PURE__ */ jsx34(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ jsx34(Icon, { name: "arrow_back", size: "xl" }) }) }),
+    /* @__PURE__ */ jsxs21("header", { className: "flex h-14 shrink-0 items-center gap-2 px-2", children: [
+      onBack && /* @__PURE__ */ jsx34(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ jsx34(Icon, { name: "arrow_back", size: "xl" }) }),
+      /* @__PURE__ */ jsx34(AccountHeaderIcons, { accountId }),
+      /* @__PURE__ */ jsx34("h1", { className: "text-lg font-bold text-foreground", children: title })
+    ] }),
     /* @__PURE__ */ jsxs21("main", { className: "flex-1 space-y-6 overflow-y-auto px-5 pb-28 pt-2", children: [
-      /* @__PURE__ */ jsxs21("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx34(AccountHeaderIcons, { accountId }),
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx34("h1", { className: "text-xl font-bold text-foreground", children: title }),
-          /* @__PURE__ */ jsx34("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
-        ] })
-      ] }),
+      subtitle && /* @__PURE__ */ jsx34("p", { className: "text-sm text-muted-foreground", children: subtitle }),
       children
     ] })
   ] });
@@ -3686,7 +3678,7 @@ function AssetSelector({
           }
         ) }),
         /* @__PURE__ */ jsxs25("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
-          optionSelected ? /* @__PURE__ */ jsx38("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ jsx38(
+          optionSelected ? /* @__PURE__ */ jsx38("span", { className: "rounded-full bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ jsx38(
             "span",
             {
               className: cn(
@@ -3801,7 +3793,7 @@ function AssetSelector({
                           value: search,
                           onChange: (event) => setSearch(event.target.value),
                           placeholder: "Search...",
-                          className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
+                          className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
                         }
                       )
                     ] }),
@@ -3861,7 +3853,7 @@ function AssetSelector({
                         },
                         className: cn(
                           "group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition-all duration-200",
-                          optionSelected ? "border-primary/30 bg-primary/[0.12]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
+                          optionSelected ? "border-transparent bg-primary/[0.14]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
                         ),
                         children: renderAssetOption(option, optionSelected, optionDisabled)
                       },
@@ -3952,7 +3944,7 @@ function AssetSelector({
                 value: search,
                 onChange: (event) => setSearch(event.target.value),
                 placeholder: "Search...",
-                className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
+                className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
               }
             )
           ] }),
@@ -4613,8 +4605,9 @@ function ActivityDetailRow({
   onCopy,
   isCopied
 }) {
-  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between py-1 last:pb-0", children: [
-    /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
+  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-3 py-1 last:pb-0", children: [
+    /* @__PURE__ */ jsx45("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx45("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
     /* @__PURE__ */ jsxs32("div", { className: "flex max-w-[65%] items-center gap-2", children: [
       /* @__PURE__ */ jsx45("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
       onCopy && /* @__PURE__ */ jsx45(
@@ -4820,7 +4813,7 @@ function WithdrawAmountInput({
                 setFeeRateMode?.(mode);
                 if (mode !== "custom") setFeeRate(mode);
               },
-              className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-primary/40 bg-primary/10" : "border-transparent bg-card/70 hover:border-primary/40"}`,
+              className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-transparent bg-primary/[0.14]" : "border-transparent bg-card/70 hover:bg-card"}`,
               children: [
                 /* @__PURE__ */ jsx47(
                   "span",
@@ -6184,7 +6177,7 @@ function SelectableCard({
   ] });
   const cardClassName = cn(
     "w-full rounded-2xl border p-4 text-left transition-all duration-200",
-    selected ? "border-primary/40 bg-primary/10 shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
+    selected ? "border-transparent bg-primary/[0.14] shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
     className
   );
   if (onClick) {
@@ -8422,7 +8415,7 @@ function DepositAssetSelection({
         {
           autoFocus: true,
           "data-testid": "deposit-asset-search",
-          className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
+          className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8",
           onChange: (event) => setSearchQuery(event.target.value),
           placeholder: "Search assets...",
           type: "text",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.92",
+  "version": "0.1.93",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",