@rhinestone/deposit-modal 0.3.1 → 0.4.1

package/dist/styles.css

@@ -77,6 +77,11 @@
   --rs-button-ghost-bg: #e4e4e7;
   --rs-button-ghost-bg-hover: #d4d4d8;
   --rs-button-ghost-text: #27272a;
+  /* Segmented toggle (Crypto/Cash) — track + raised selected pill. */
+  --rs-segmented-track: #e4e4e7;
+  --rs-segmented-active-bg: #ffffff;
+  --rs-segmented-active-fg: #18181b;
+  --rs-segmented-idle-fg: #52525c;
 
   /* Primary (CTA). Default theme uses the dark-on-light pair.
      A custom theme overrides these directly via inline CSS vars,
@@ -218,6 +223,11 @@
   --rs-button-ghost-bg: #27272a;
   --rs-button-ghost-bg-hover: #3f3f46;
   --rs-button-ghost-text: #e4e4e7;
+  /* Segmented toggle (Crypto/Cash) — dark track + raised selected pill. */
+  --rs-segmented-track: #27272a;
+  --rs-segmented-active-bg: #52525c;
+  --rs-segmented-active-fg: #fafafa;
+  --rs-segmented-idle-fg: #9f9fa9;
   --rs-surface-hover: #3f3f46;
   /* Figma coin-select/selected (dark) — zinc-900 fill + zinc-700 border. */
   --rs-asset-selected-bg: #18181b;
@@ -2229,6 +2239,75 @@
   width: 100%;
 }
 
+/* Expandable "Fees" row on the Swapped receipt. Summary matches a detail row;
+   the breakdown reveals below. */
+.rs-fees-accordion {
+  display: flex;
+  flex-direction: column;
+}
+
+.rs-fees-accordion-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+  cursor: pointer;
+}
+
+.rs-fees-accordion-summary:disabled {
+  cursor: default;
+}
+
+.rs-fees-accordion-summary:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.rs-fees-accordion-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  transition: transform 0.18s ease;
+}
+
+.rs-fees-accordion-chevron svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-fees-accordion-chevron--open {
+  transform: rotate(180deg);
+}
+
+.rs-fees-accordion-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.rs-fees-accordion-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+}
+
 .rs-review-detail-row {
   display: flex;
   align-items: center;
@@ -4482,6 +4561,20 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+  min-width: 0;
+}
+
+/* Row that holds the title/subtitle block plus an optional right-aligned
+   aside (the Crypto/Cash toggle on the method picker). */
+.rs-body-header-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.rs-body-header-aside {
+  flex-shrink: 0;
 }
 
 .rs-body-header-title {
@@ -4500,6 +4593,61 @@
   margin: 0;
 }
 
+/* Segmented toggle (Crypto / Cash) — Figma "toggle container". */
+.rs-segmented {
+  position: relative;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+  padding: var(--rs-segmented-inset);
+  background: var(--rs-segmented-track);
+  border-radius: var(--rs-radius-full);
+  isolation: isolate;
+}
+
+.rs-segmented-thumb {
+  position: absolute;
+  z-index: 0;
+  top: var(--rs-segmented-inset);
+  bottom: var(--rs-segmented-inset);
+  left: calc(var(--rs-segmented-inset) + var(--rs-segmented-thumb-offset));
+  width: var(--rs-segmented-thumb-width);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-segmented-active-bg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  transition: left 180ms ease;
+  pointer-events: none;
+}
+
+.rs-segmented-option {
+  position: relative;
+  z-index: 1;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 5px 12px;
+  min-width: 70px;
+  border-radius: var(--rs-radius-full);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--rs-segmented-idle-fg);
+  cursor: pointer;
+  transition:
+    color 0.15s;
+}
+
+.rs-segmented-option:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-segmented-option--active {
+  color: var(--rs-segmented-active-fg);
+}
+
 /* Ticker — per-digit odometer-style animation for the live timer.
    Each slot clips its content; the outgoing digit slides up and out while
    the incoming digit slides up from below. Static chars (e.g. ":") never
@@ -4693,7 +4841,6 @@
 .rs-list-row-meta-icons {
   display: flex;
   align-items: center;
-  gap: 4px;
 }
 
 .rs-list-row-meta-icons > * {
@@ -4703,6 +4850,15 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  /* Ring in the row's surface color so overlapping marks read cleanly. */
+  box-shadow: 0 0 0 1.5px var(--rs-background-secondary);
+}
+
+/* Overlap each subsequent mark for the stacked-cluster look. */
+.rs-list-row-meta-icons > * + * {
+  margin-left: -6px;
 }
 
 .rs-list-row-meta-icons img,
@@ -4712,6 +4868,29 @@
   display: block;
 }
 
+.rs-list-row-meta-icons--exchanges > * {
+  border-radius: 4px;
+}
+
+/* Card-network chips: exported Figma tiles are all 38×24. */
+.rs-list-row-meta-icons--cards > .rs-card-network {
+  width: 29px;
+  height: 18px;
+  border-radius: 3.25px;
+  overflow: hidden;
+  background: transparent;
+  box-shadow: none;
+}
+
+.rs-list-row-meta-icons--cards > .rs-card-network + .rs-card-network {
+  margin-left: -7px;
+}
+
+.rs-list-row-meta-icons--cards .rs-card-network svg {
+  width: 100%;
+  height: 100%;
+}
+
 .rs-list-row-chevron {
   flex-shrink: 0;
   width: 16px;
@@ -4753,10 +4932,13 @@
    ============================================================================= */
 
 /* `.rs-fiat-onramp` is a marker class on the .rs-screen root so the
-   modal-content `:has()` rules below can size correctly. Layout (padding,
-   gap, flex direction) comes from .rs-screen itself, identical to
-   ConnectStep — keeps the top of the page visually unchanged across the
-   payment-method picker → Swapped iframe transition. */
+   modal-content `:has()` rules below can size correctly. The Swapped iframe
+   phase intentionally omits the BodyHeader so the embedded widget starts
+   immediately below the modal nav chrome. */
+
+.rs-fiat-onramp-body {
+  gap: 0;
+}
 
 .rs-fiat-onramp-banner {
   display: flex;
@@ -4794,14 +4976,14 @@
   color: var(--rs-muted);
 }
 
-/* Iframe wrap sized to Swapped's documented dimensions — 400×482 for the
+/* Iframe wrap sized to Swapped's documented dimensions — 400×586 for the
    fiat on-ramp, 445×585 for Connect (overrides below). Centered horizontally
    inside the modal so the step body can have header padding. */
 .rs-fiat-onramp-iframe-wrap {
   position: relative;
   width: 100%;
   max-width: 400px;
-  min-height: 482px;
+  min-height: 586px;
   margin: 0 auto;
   border-radius: var(--rs-radius);
   overflow: hidden;
@@ -4815,8 +4997,8 @@
 .rs-fiat-onramp-iframe {
   display: block;
   width: 100%;
-  height: 482px;
-  min-height: 482px;
+  height: 586px;
+  min-height: 586px;
   border: 0;
   background: var(--rs-background);
 }
@@ -4826,6 +5008,51 @@
   min-height: 585px;
 }
 
+/* Finalising deposit — compact centered spinner screen (Swapped Connect). */
+.rs-finalising-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 32px 0 24px;
+  text-align: center;
+}
+
+.rs-finalising-spinner {
+  display: inline-flex;
+  color: var(--color-blue10);
+}
+
+.rs-finalising-spinner .rs-spinner {
+  width: 56px;
+  height: 56px;
+}
+
+.rs-finalising-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.rs-finalising-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--rs-foreground);
+  margin: 0;
+}
+
+.rs-finalising-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--rs-muted);
+  margin: 0;
+  max-width: 280px;
+}
+
 .rs-fiat-onramp-loading,
 .rs-fiat-onramp-error {
   position: absolute;
@@ -4863,7 +5090,7 @@
 
 .rs-exchange-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
 }
 
@@ -4901,9 +5128,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
   background: var(--rs-surface);
   color: #71717b;
   overflow: hidden;
@@ -4917,6 +5144,19 @@
   object-fit: contain;
 }
 
+/* Bundled branded logos fill the tile edge-to-edge (their own brand-colour
+   background), clipped to the tile's rounded corners. */
+.rs-exchange-card-logo--brand {
+  background: transparent;
+}
+
+.rs-exchange-card-logo--brand img,
+.rs-exchange-card-logo--brand svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .rs-exchange-card-name {
   width: 100%;
   min-width: 0;
@@ -4951,12 +5191,12 @@
    Modal sizing for the Swapped iframe step
    =============================================================================
    Modal stays at the default 400px width for the fiat variant (matches
-   Swapped's 400×482 iframe edge-to-edge). Connect needs 445px because its
+   Swapped's 400×586 iframe edge-to-edge). Connect needs 445px because its
    iframe is 445×585. Height grows with the Rhinestone chrome (header
    icon/title/subtitle + iframe + PoweredBy); cap to viewport so smaller
    laptops get a scrollable modal-body instead of overflowing the screen. */
 
-/* Connect's iframe is 445×585 (vs fiat's 400×482). To preserve the same
+/* Connect's iframe is 445×585 (vs fiat's 400×586). To preserve the same
    12px horizontal padding as ConnectStep while still giving Swapped's
    Connect iframe its documented width, widen the modal by 24px (12 each
    side) → 469px. Applied from the moment the user enters exchange-connect
@@ -4992,11 +5232,11 @@
    when the iframe→tracker phase swap fires. */
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"][data-step-type="setup"]),
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp) {
-  min-height: 691px;
+  min-height: 699px;
 }
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"][data-step-type="setup"]),
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
-  min-height: 794px;
+  min-height: 698px;
 }
 
 /* =============================================================================
@@ -5051,15 +5291,21 @@
   padding: 16px 0;
 }
 
-/* Dotted vertical connector between adjacent step markers. */
+/* Dashed vertical connector between adjacent step markers. */
 .rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
   content: "";
   position: absolute;
   top: -14px;
   right: 11px;
-  width: 0;
+  width: 2px;
   height: 28px;
-  border-left: 1.5px dotted #d4d4d8;
+  background: repeating-linear-gradient(
+    to bottom,
+    #5f5f5f 0,
+    #5f5f5f 3px,
+    transparent 3px,
+    transparent 7px
+  );
 }
 
 .rs-swapped-tracker-step-label {
@@ -5083,7 +5329,8 @@
 }
 
 .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
-  border-color: #d4d4d8;
+  border-color: transparent;
+  border-width: 0;
   background: transparent;
   /* Spinner SVG uses currentColor; base marker class sets color:transparent
      for the (hidden) ring glyph — re-establish a visible color here so the
@@ -5092,8 +5339,10 @@
 }
 
 .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker .rs-spinner {
-  width: 14px;
-  height: 14px;
+  display: block;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
 }
 
 /* Satisfying scale-pop when a step ticks complete — the color transition
@@ -5161,13 +5410,13 @@
   background: var(--rs-border);
 }
 
-.rs-modal[data-theme="dark"] .rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
-  border-left-color: #3f3f46;
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--pending .rs-swapped-tracker-step-marker {
+  border-color: #3f3f46;
 }
 
-.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--pending .rs-swapped-tracker-step-marker,
 .rs-modal[data-theme="dark"] .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
-  border-color: #3f3f46;
+  border-color: transparent;
+  color: #fafafa;
 }
 
 .rs-modal[data-theme="dark"] .rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {

package/dist/{types-RzfAD14B.d.ts → types-CFRuisqK.d.cts}

@@ -231,7 +231,7 @@ interface DepositModalProps {
      */
     fiatOnrampMethods?: FiatPaymentMethodOption[];
     /**
-     * Show a "Fund from Exchange" row that opens Swapped Connect — the user
+     * Show a "Connect exchange" row that opens Swapped Connect — the user
      * picks their CEX (Coinbase, Binance, Kraken…) or wallet inside the iframe
      * and Swapped pulls the crypto on-chain to the smart account. Default: false.
      */

package/dist/{types-RzfAD14B.d.cts → types-CFRuisqK.d.ts}

@@ -231,7 +231,7 @@ interface DepositModalProps {
      */
     fiatOnrampMethods?: FiatPaymentMethodOption[];
     /**
-     * Show a "Fund from Exchange" row that opens Swapped Connect — the user
+     * Show a "Connect exchange" row that opens Swapped Connect — the user
      * picks their CEX (Coinbase, Binance, Kraken…) or wallet inside the iframe
      * and Swapped pulls the crypto on-chain to the smart account. Default: false.
      */

package/dist/withdraw.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkLEL6GMEQcjs = require('./chunk-LEL6GMEQ.cjs');
-require('./chunk-MQIJZNTP.cjs');
-require('./chunk-AJHFNHG3.cjs');
-require('./chunk-MILJQWPT.cjs');
+var _chunkJHT2MJ42cjs = require('./chunk-JHT2MJ42.cjs');
+require('./chunk-LJJCPDZO.cjs');
+require('./chunk-UEKPBRBY.cjs');
+require('./chunk-ABVRVW3P.cjs');
 
 
-exports.WithdrawModal = _chunkLEL6GMEQcjs.WithdrawModal;
+exports.WithdrawModal = _chunkJHT2MJ42cjs.WithdrawModal;

package/dist/withdraw.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { n as WithdrawModalProps } from './types-RzfAD14B.cjs';
-export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-RzfAD14B.cjs';
+import { n as WithdrawModalProps } from './types-CFRuisqK.cjs';
+export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-CFRuisqK.cjs';
 import 'viem';
 
 declare function WithdrawModal(props: WithdrawModalProps): react.JSX.Element;

package/dist/withdraw.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { n as WithdrawModalProps } from './types-RzfAD14B.js';
-export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-RzfAD14B.js';
+import { n as WithdrawModalProps } from './types-CFRuisqK.js';
+export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-CFRuisqK.js';
 import 'viem';
 
 declare function WithdrawModal(props: WithdrawModalProps): react.JSX.Element;

package/dist/withdraw.mjs

@@ -1,9 +1,9 @@
 import {
   WithdrawModal
-} from "./chunk-DZQD3DAV.mjs";
-import "./chunk-3C35DVPE.mjs";
-import "./chunk-TQ2AYMWS.mjs";
-import "./chunk-6YRDD462.mjs";
+} from "./chunk-3GLQC2KQ.mjs";
+import "./chunk-A33QFRKD.mjs";
+import "./chunk-F7P4MV72.mjs";
+import "./chunk-WJX3TJFK.mjs";
 export {
   WithdrawModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhinestone/deposit-modal",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {