@rhinestone/deposit-modal 0.0.0-dev-20260710200610 → 0.0.0-dev-20260714145510

package/dist/styles.css

@@ -5565,3 +5565,101 @@
   border-color: #fafafa;
   color: #18181b;
 }
+
+/* =============================================================================
+   Mobile bottom sheet (<= 639px)
+   =============================================================================
+   Below the 640px breakpoint the modal docks to the bottom of the viewport and
+   slides up as a full-width sheet — matching the 1auth dialog (bottom sheet on
+   mobile, centered card on desktop). Everything here is scoped under
+   `.rs-modal-overlay` so inline mode (`.rs-modal-content--inline`, which has no
+   overlay ancestor) is untouched, and desktop (>= 640px) keeps the centered
+   card verbatim. */
+@media (max-width: 639px) {
+  .rs-modal-overlay {
+    /* Dock the sheet to the bottom edge (desktop centers it). */
+    align-items: flex-end;
+    /* Fade the scrim in as the sheet rises. Animating background-color rather
+       than opacity keeps the sheet itself fully opaque while it slides — the
+       overlay is both scrim and flex parent, so an opacity fade would dim the
+       sheet too. */
+    animation: rs-backdrop-fade-in 0.2s ease-out;
+  }
+
+  .rs-modal-overlay .rs-modal-content {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    /* Top corners only; the bottom sits flush against the viewport edge. */
+    border-radius: 16px 16px 0 0;
+    /* Cap below full height so a strip of scrim shows above the sheet (the
+       bottom-sheet "peek"); taller content scrolls inside .rs-modal-body. */
+    max-height: min(92dvh, calc(100dvh - 24px));
+    /* Slide up from below the fold — iOS-sheet easing, matching 1auth's
+       dialog-slide-up. When it ends the content rests at its --open transform
+       (scale(1) == identity), so the settled position is unchanged. */
+    animation: rs-sheet-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Swapped/fiat/exchange flows pre-reserve a tall desktop iframe height
+     (min-height 585-699px) plus a 445px max-width. On a phone that would force
+     the sheet taller than the screen and push its top chrome out of reach, so
+     cap it to the sheet height and let the body scroll. Specificity (0,4,0)
+     matches the tallest :has() sizing rule and, appended last, wins the tie. */
+  .rs-modal-overlay .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]),
+  .rs-modal-overlay .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+    max-width: none;
+    min-height: 0;
+    max-height: min(92dvh, calc(100dvh - 24px));
+  }
+
+  /* The history panel is a long, scrollable list overlaid position:absolute, so
+     it can't grow the sheet itself — left alone the sheet stays as short as the
+     screen behind it and crams the list into a sliver at the bottom. When the
+     panel is mounted, give the sheet a tall min-height so the list uses most of
+     the phone screen. Placed after the fiat/exchange reset above so it wins when
+     history is opened over one of those flows. */
+  .rs-modal-overlay .rs-modal-content:has(.rs-history-panel) {
+    min-height: min(85dvh, calc(100dvh - 24px));
+  }
+
+  /* Clear the iOS home indicator. Excludes the immersive Swapped iframe, which
+     is intentionally full-bleed to the sheet edges. */
+  .rs-modal-overlay .rs-modal:not(.rs-modal--swapped-iframe) {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  }
+
+  /* iOS Safari zooms the page in when a focused input's font is < 16px. Bump
+     the small text inputs (the deposit amount input is 64px, so it is
+     unaffected) to kill the zoom-on-focus jump. */
+  .rs-modal-overlay .rs-modal .rs-input,
+  .rs-modal-overlay .rs-modal .rs-withdraw-input {
+    font-size: 16px;
+  }
+}
+
+@keyframes rs-sheet-slide-up {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes rs-backdrop-fade-in {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* Honour "Reduce motion": snap the sheet + scrim to their settled state. */
+@media (prefers-reduced-motion: reduce) {
+  .rs-modal-overlay,
+  .rs-modal-overlay .rs-modal-content {
+    animation: none !important;
+  }
+}

package/package.json

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