@stridge/kit 0.1.0-alpha.54 → 0.1.0-alpha.56

package/dist/flows/deposit/widgets/cash-confirm/compound/components/Header.d.ts

@@ -0,0 +1,21 @@
+import { CashConfirmHeaderProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/cash-confirm/compound/components/Header.d.ts
+/**
+ * Header row for the per-method cash confirm screen. Renders a back affordance + "Pay with
+ * {method}" title in a left-aligned cluster, and the dialog close button as the trailing
+ * element. Mirrors `TransferCryptoHeader` / `WithdrawFormHeader` so all three back-bearing
+ * flow headers share the same chrome rhythm.
+ *
+ * Titles are inlined as `<Trans>` rather than computed in a helper because Lingui's macro
+ * extractor only recognises `t` as the destructured identifier from {@link useLingui} when the
+ * call sits in the component scope — pushing the cascade into a helper that takes `t` as a
+ * parameter loses the binding and the strings drop from the catalog.
+ */
+declare function CashConfirmHeader({
+  title,
+  onBack
+}?: CashConfirmHeaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CashConfirmHeader };

package/dist/flows/deposit/widgets/cash-confirm/compound/components/Header.js

@@ -0,0 +1 @@
+"use client";import{Trans as e}from"../../../../../../shared/i18n/Trans.js";import{useLingui as t}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{ChevronLeftIcon as n}from"../../../../../../shared/icons/ChevronLeftIcon.js";import"../../../../../../icons/index.js";import{IconButton as r}from"../../../../../../shared/ui/IconButton/IconButton.js";import{Dialog as i}from"../../../../../../shared/ui/Dialog/Dialog.js";import"../../../../../../shared/ui/Dialog/index.js";import{Card as a}from"../../../../../../shared/ui/Card/Card.js";import{text as o}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{CASH_CONFIRM_SLOTS as s}from"../CashConfirm.slots.js";import{styles as c}from"../CashConfirm.styles.js";import{useCashConfirmContext as l}from"../context.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";function p({title:p,onBack:m}={}){let h=l(`CashConfirm.Header`),{_:g}=t(),_=m===null?void 0:m??h.onBack,v=p??(h.cashMethod===`applePay`?u(e,{id:`WsByvK`,message:`Pay with Apple Pay`}):h.cashMethod===`googlePay`?u(e,{id:`1zDzn9`,message:`Pay with Google Pay`}):u(e,{id:`bAy57M`,message:`Pay with Card`}));return d(a.Header,{"data-stridge-slot":s.header,...f.props(c.header),children:[d(`div`,{...f.props(c.headerLeft),children:[typeof _==`function`?u(r,{"aria-label":g({id:`iH8pgl`,message:`Back`}),onClick:_,children:u(n,{"aria-hidden":!0,...f.props(c.backIcon)})}):null,u(o.span,{size:`base`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,...f.props(c.headerTitle),children:v})]}),u(i.CloseButton,{})]})}export{p as CashConfirmHeader};

package/dist/flows/deposit/widgets/cash-confirm/compound/components/Summary.d.ts

@@ -0,0 +1,17 @@
+import { CashConfirmSummaryProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/cash-confirm/compound/components/Summary.d.ts
+/**
+ * Read-only summary card sitting above the per-method body. Renders two static rows (Top up on /
+ * Total) followed by a `Collapsible` whose trigger shows "View breakdown ⌄" and whose panel
+ * reveals four `computeMockCashBreakdown`-driven rows when expanded.
+ *
+ * Reuses `computeMockCashBreakdown` directly so the rows replay what the user saw on
+ * `cashAmountEntry`; no duplicate fixture is introduced.
+ */
+declare function CashConfirmSummary({
+  brandName: brandNameOverride
+}?: CashConfirmSummaryProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CashConfirmSummary };

package/dist/flows/deposit/widgets/cash-confirm/compound/components/Summary.js

@@ -0,0 +1 @@
+"use client";import{useKitI18n as e}from"../../../../../../shared/i18n/useKitI18n.js";import{Trans as t}from"../../../../../../shared/i18n/Trans.js";import{useLingui as n}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{formatUsd as r}from"../../../../../../shared/format/formatUsd.js";import{ChevronRightIcon as i}from"../../../../../../shared/icons/ChevronRightIcon.js";import"../../../../../../icons/index.js";import{Card as a}from"../../../../../../shared/ui/Card/Card.js";import{Collapsible as o}from"../../../../../../shared/ui/Collapsible/Collapsible.js";import{text as s}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{MOCK_RECEIVE_TOKEN as c,computeMockCashBreakdown as l}from"../../../../shared/cash.js";import{CASH_CONFIRM_SLOTS as u}from"../CashConfirm.slots.js";import{styles as d}from"../CashConfirm.styles.js";import{useCashConfirmContext as f}from"../context.js";import{useDirectionalChevronTransform as p}from"../../../../../../shared/dialog/useDirectionalChevronTransform.js";import{useMemo as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import*as v from"@stylexjs/stylex";function y({brandName:i}={}){let{_:p}=n(),y=e(),{amount:S,cashMethod:C,brandName:w}=f(`CashConfirm.Summary`),[T,E]=h(!1),D=i??w,O=m(()=>{let e=l(S,C);return{totalUsd:r(S,y,{showSmallValueClamp:!1}),subtotalUsd:r(e.amountUsd,y,{showSmallValueClamp:!1}),rate:r(e.rate,y,{showSmallValueClamp:!1}),processing:r(e.processingFeeUsd,y,{showSmallValueClamp:!1}),network:r(e.networkFeeUsd,y,{showSmallValueClamp:!1})}},[S,C,y]);return _(a,{variant:`default`,"data-stridge-slot":u.summary,...v.props(d.summary),children:[_(`div`,{"data-stridge-slot":u.summaryStaticRow,...v.props(d.summaryStaticRow),children:[g(s.span,{size:`sm`,leading:`tight`,"data-stridge-slot":u.summaryRowLabel,...v.props(d.summaryLabel),children:g(t,{id:`HalPBQ`,message:`Top up on`})}),g(s.span,{size:`sm`,leading:`tight`,"data-stridge-slot":u.summaryRowValue,...v.props(d.summaryValue),children:D??``})]}),_(`div`,{"data-stridge-slot":u.summaryStaticRow,...v.props(d.summaryStaticRow),children:[g(s.span,{size:`sm`,leading:`tight`,"data-stridge-slot":u.summaryRowLabel,...v.props(d.summaryLabel),children:g(t,{id:`72c5Qo`,message:`Total`})}),g(s.span,{size:`sm`,leading:`tight`,"data-stridge-slot":u.summaryRowValue,...v.props(d.summaryValue),children:O.totalUsd})]}),_(o,{open:T,onOpenChange:E,children:[g(o.Trigger,{render:(e,{open:n})=>_(`button`,{type:`button`,"data-stridge-slot":u.breakdownTrigger,...e,children:[g(s.span,{size:`xs`,fontWeight:`medium`,leading:`tight`,color:`inherit`,children:n?g(t,{id:`t1k2Bt`,message:`Hide breakdown`}):g(t,{id:`3qkDVZ`,message:`View breakdown`})}),g(b,{open:n})]}),"aria-label":p(T?{id:`t1k2Bt`,message:`Hide breakdown`}:{id:`3qkDVZ`,message:`View breakdown`}),...v.props(d.breakdownTrigger)}),g(o.Panel,{children:_(`div`,{"data-stridge-slot":u.summaryBreakdown,...v.props(d.breakdownPanel),children:[g(x,{label:g(t,{id:`hehnjM`,message:`Amount`}),value:O.subtotalUsd}),g(x,{label:g(t,{id:`vepIdX`,message:`Crypto price`}),value:g(t,{id:`eUbBqz`,message:`1 {0} = {1}`,values:{0:c.symbol,1:O.rate}})}),g(x,{label:g(t,{id:`QFwptY`,message:`Processing fee`}),value:`− ${O.processing}`}),g(x,{label:g(t,{id:`y62Dys`,message:`Network fee`}),value:`− ${O.network}`})]})})]})]})}function b({open:e}){let t=p(e);return g(i,{"aria-hidden":!0,"data-stridge-slot":u.breakdownChevron,style:{transform:t},...v.props(d.breakdownChevron)})}function x({label:e,value:t}){return _(`div`,{"data-stridge-slot":u.breakdownRow,...v.props(d.breakdownRow),children:[g(s.span,{size:`xs`,leading:`tight`,"data-stridge-slot":u.breakdownRowLabel,...v.props(d.breakdownLabel),children:e}),g(s.span,{size:`xs`,leading:`tight`,"data-stridge-slot":u.breakdownRowValue,...v.props(d.breakdownValue),children:t})]})}export{y as CashConfirmSummary};

package/dist/flows/deposit/widgets/cash-confirm/compound/components/cardFormat.js

@@ -0,0 +1 @@
+function e(e){return e.replace(/\D/g,``)}function t(t){let n=e(t);if(n.length===0)return`unknown`;if(n[0]===`4`)return`visa`;if(n.length>=2){let e=n.slice(0,2);if(e===`34`||e===`37`)return`amex`;let t=Number.parseInt(e,10);if(t>=51&&t<=55)return`mastercard`;if(e===`65`)return`discover`}if(n.length>=4){let e=Number.parseInt(n.slice(0,4),10);if(e>=2221&&e<=2720)return`mastercard`;if(n.slice(0,4)===`6011`)return`discover`}if(n.length>=3){let e=Number.parseInt(n.slice(0,3),10);if(e>=644&&e<=649)return`discover`}return`unknown`}function n(e){return e===`amex`?[15]:e===`visa`?[13,16,19]:e===`discover`?[16,19]:[16]}function r(e){return e===`amex`?4:3}function i(t,r){let i=Math.max(...n(r)),a=e(t).slice(0,i);if(r===`amex`)return[a.slice(0,4),a.slice(4,10),a.slice(10,15)].filter(e=>e.length>0).join(` `);let o=[];for(let e=0;e<a.length;e+=4)o.push(a.slice(e,e+4));return o.join(` `)}function a(t){let n=e(t).slice(0,4);return n.length<=2?n:`${n.slice(0,2)}/${n.slice(2)}`}function o(t,n){return e(t).slice(0,r(n))}function s(e){if(e===`amex`)return 17;let t=Math.max(...n(e));return t+Math.floor((t-1)/4)}function c(t){let n=e(t);if(n.length===0)return!1;let r=0,i=!1;for(let e=n.length-1;e>=0;e--){let t=Number.parseInt(n[e]??`0`,10);i&&(t*=2,t>9&&(t-=9)),r+=t,i=!i}return r%10==0}function l(t,r){let i=e(t);return n(r).includes(i.length)?c(i):!1}function u(t,n=new Date){let r=e(t);if(r.length!==4)return!1;let i=Number.parseInt(r.slice(0,2),10),a=2e3+Number.parseInt(r.slice(2,4),10);if(i<1||i>12)return!1;let o=n.getFullYear(),s=n.getMonth()+1;return!(a<o||a===o&&i<s)}function d(t,n){return e(t).length===r(n)}function f(t,r){let i=e(t);return i.length===0?null:n(r).includes(i.length)?c(i)?null:`invalid`:`incomplete`}function p(t,n=new Date){let r=e(t);if(r.length===0)return null;if(r.length<4)return`incomplete`;let i=Number.parseInt(r.slice(0,2),10);if(i<1||i>12)return`invalid`;let a=2e3+Number.parseInt(r.slice(2,4),10),o=n.getFullYear(),s=n.getMonth()+1;return a<o||a===o&&i<s?`expired`:null}function m(t,n){let i=e(t);return i.length===0?null:i.length<r(n)?`incomplete`:null}export{r as cvcLengthForBrand,t as detectBrand,o as formatCvc,a as formatExp,i as formatPan,m as getCvcError,p as getExpError,f as getPanError,d as isValidCvc,u as isValidExp,l as isValidPan,s as panMaxChars};

package/dist/flows/deposit/widgets/cash-confirm/compound/context.js

@@ -0,0 +1 @@
+"use client";import{createContext as e,use as t}from"react";const n=e(null);function r(e){let r=t(n);if(!r)throw Error(`${e} must be rendered inside <CashConfirm>.`);return r}export{n as CashConfirmContext,r as useCashConfirmContext};

package/dist/flows/deposit/widgets/cash-confirm/compound/index.d.ts

@@ -0,0 +1,3 @@
+import { CashConfirmBodyProps, CashConfirmDialogProps, CashConfirmHeaderProps, CashConfirmMethodBodyProps, CashConfirmProps, CashConfirmSummaryProps } from "./types.js";
+import { CashConfirm } from "./CashConfirm.js";
+import { CASH_CONFIRM_SLOTS, CashConfirmSlot } from "./CashConfirm.slots.js";

package/dist/flows/deposit/widgets/cash-confirm/compound/index.js

@@ -0,0 +1 @@
+import"./CashConfirm.slots.js";import"./CashConfirm.js";

package/dist/flows/deposit/widgets/cash-confirm/compound/types.d.ts

@@ -0,0 +1,66 @@
+import { CashConfirmPhase, CashMethodId } from "../../../orchestrator/types.js";
+import { DialogShellControls } from "../../../../../shared/dialog/DialogShell.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/flows/deposit/widgets/cash-confirm/compound/types.d.ts
+/**
+ * Public props accepted by the {@link CashConfirm} compound root. Mirrors {@link ConfirmTransfer}
+ * in shape — required FSM-derived data on the root + optional callbacks the orchestrated wrapper
+ * supplies. Standalone compositions feed these directly.
+ */
+interface CashConfirmProps extends ComponentProps<"div"> {
+  /** Per-method confirm phase. Drives the loading/ready surface inside the per-method bodies. */
+  phase: CashConfirmPhase;
+  /** Cash method picked on the previous step. */
+  cashMethod: CashMethodId;
+  /** USD amount the user is paying. */
+  amount: number;
+  /** Brand name for the summary card's "Top up on" row. */
+  brandName?: string;
+  /** Back-affordance handler. When omitted, the header renders without the back button. */
+  onBack?: () => void;
+  /**
+   * Optional custom composition. When omitted, the canonical default composition renders —
+   * `<Header />` + `<Body>` (which auto-renders `<Summary />` + the cashMethod-branched per-method
+   * body). Pass children to interleave your own elements between compound parts or replace the
+   * composition entirely.
+   */
+  children?: ReactNode;
+}
+/** Props for {@link CashConfirm.Header}. */
+interface CashConfirmHeaderProps {
+  /** Override the default `Pay with <method>` title resolved from context. */
+  title?: ReactNode;
+  /**
+   * Override the context's `onBack`. Pass `null` explicitly to suppress the back affordance
+   * even when the context provides one.
+   */
+  onBack?: (() => void) | null;
+}
+/** Props for {@link CashConfirm.Body}. */
+interface CashConfirmBodyProps extends ComponentProps<"div"> {
+  /**
+   * Optional custom composition. When omitted, Body auto-renders `<Summary />` plus the
+   * cashMethod-branched per-method body. Pass children to override either or both.
+   */
+  children?: ReactNode;
+}
+/** Props for {@link CashConfirm.Summary}. */
+interface CashConfirmSummaryProps {
+  /** Override the context's `brandName` for the "Top up on" row value. */
+  brandName?: string;
+}
+/** Shared props for the per-method body parts. They read `phase` and `amount` from context. */
+interface CashConfirmMethodBodyProps {
+  /** When `true`, the body's CTA is rendered disabled. Standalone consumers use this; the
+   * orchestrated wrapper leaves it unset because the FSM owns the readiness signal. */
+  disabled?: boolean;
+}
+/**
+ * Props for `<CashConfirm.Dialog>` — the dialog form of the CashConfirm widget. Combines the
+ * widget root props with the shared dialog shell controls (`open` / `defaultOpen` /
+ * `onOpenChange` / `trigger`).
+ */
+type CashConfirmDialogProps = CashConfirmProps & DialogShellControls;
+//#endregion
+export { CashConfirmBodyProps, CashConfirmDialogProps, CashConfirmHeaderProps, CashConfirmMethodBodyProps, CashConfirmProps, CashConfirmSummaryProps };

package/dist/flows/deposit/widgets/cash-confirm/index.d.ts

@@ -0,0 +1 @@
+import { CashConfirm } from "./CashConfirm.js";

package/dist/flows/deposit/widgets/cash-confirm/index.js

@@ -0,0 +1 @@
+import"./CashConfirm.js";

package/dist/flows/deposit/widgets/cash-confirm/mocks.js

@@ -0,0 +1 @@
+const e=1500,t=1500;export{e as LOADING_TRANSITION_MS,t as SUBMIT_SUCCESS_HOLD_MS};

package/dist/flows/deposit/widgets/deposit/Deposit.d.ts

@@ -2,7 +2,10 @@ import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
 import { DepositBodyProps } from "./compound/types.js";
 import { DepositHeader } from "./compound/components/Header.js";
 import { DepositMethod } from "./compound/components/Method.js";
+import { DepositMethodSection } from "./compound/components/MethodSection.js";
 import { DepositMethods } from "./compound/components/Methods.js";
+import { DepositRail } from "./compound/components/Rail.js";
+import { DepositRailPicker } from "./compound/components/RailPicker.js";
 import { DepositSteps } from "./compound/components/Steps.js";
 import { Deposit as Deposit$1 } from "./compound/Deposit.js";
 import { ComponentProps, ReactNode } from "react";
@@ -52,8 +55,11 @@ declare namespace Deposit {
   const Body: (props: DepositBodyProps) => _$react_jsx_runtime0.JSX.Element;
   const Methods: typeof DepositMethods;
   const Method: typeof DepositMethod;
+  const MethodSection: typeof DepositMethodSection;
   const Steps: typeof DepositSteps;
   const Step: typeof Deposit$1.Step;
+  const RailPicker: typeof DepositRailPicker;
+  const Rail: typeof DepositRail;
 }
 //#endregion
 export { Deposit };

package/dist/flows/deposit/widgets/deposit/Deposit.js

@@ -1 +1 @@
-"use client";import{useLingui as e}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositSnapshot as t}from"../../driver/context.js";import{useDepositActions as n,useDepositEffectiveState as r,useDepositMethodsConfig as i}from"../../orchestrator/controller.js";import{QrCodeIcon as a}from"../../../../shared/icons/QrCodeIcon.js";import{WalletIcon as o}from"../../../../shared/icons/WalletIcon.js";import"../../../../icons/index.js";import{DialogShell as s}from"../../../../shared/dialog/DialogShell.js";import{Image as c}from"../../../../shared/ui/Image/Image.js";import{Skeleton as l}from"../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../shared/ui/Skeleton/index.js";import{TokenLogo as u}from"../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../shared/ui/TokenLogo/index.js";import"../../../../ui/index.js";import{Deposit as d}from"./compound/Deposit.js";import"./compound/index.js";import{useMemo as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";const g={width:18,height:18,"aria-hidden":!0},_=h(p,{children:[m(d.Header,{}),m(d.Body,{children:m(d.Methods,{})})]});function v({children:s,...c}){let u=t(),p=r().name,{selectMethod:h}=n(),v=i(),{_:b}=e(),x=u.wallet,S=x.status===`ready`||x.status===`stale`?x.payload:void 0,C=S!==void 0,w=u.brand,T=w.status===`ready`||w.status===`stale`?w.payload:void 0,E=u.addresses,D=E.status===`ready`||E.status===`stale`?E.payload:[],O=u.balances.status===`error`,k=!S?.balanceTotalUsd?.formatted&&!O,A=!!u.brand,j=T?.name?b({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:T.name}}):void 0,M=f(()=>y(D),[D]),N=v?.wallet,P=v?.transfer,F=f(()=>{let e=!C||k,t=N?.disabled??!1,n=e||t,r=t?N?.disabledHint:void 0,i=(()=>{if(t)return r;if(!C)return b({id:`5AApJw`,message:`Connect a wallet to continue`});if(S?.balanceTotalUsd?.formatted)return S.balanceTotalUsd.formatted;if(!O)return m(l,{width:56,height:12})})(),s=[{id:`wallet`,title:b({id:`sb9Y58`,message:`Wallet`}),icon:m(o,{...g}),...S&&!t?{titleAdornment:S.address.formatted}:{},...i===void 0?{}:{meta:i},recommended:!0,disabled:n,onSelect:n?void 0:()=>h(`wallet`)}];if(A){let e=P?.disabled??!1,t=e?P?.disabledHint:void 0,n=e?t:[b({id:`qtoOYG`,message:`No limit`}),b({id:`D79cZK`,message:`Instant`})];s.push({id:`transfer`,title:b({id:`3dqPLT`,message:`Transfer Crypto`}),icon:m(a,{...g}),...n===void 0?{}:{meta:n},...M?{trailing:M}:{},disabled:e,onSelect:e?void 0:()=>h(`transfer`)})}return s},[S,O,k,C,A,M,N,P,h,b]);return p===`deposit`?m(d,{...c,...j?{title:j}:{},methods:F,children:s??_}):null}function y(e){if(e.length!==0)return m(c.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>m(u,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function b({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return m(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:m(v,{...i})})}(function(e){e.Dialog=b,e.Header=d.Header,e.Body=d.Body,e.Methods=d.Methods,e.Method=d.Method,e.Steps=d.Steps,e.Step=d.Step})(v||={});export{v as Deposit};
+"use client";import{useOptionalKitStorage as e}from"../../../../storage/context.js";import"../../../../storage/index.js";import{useLingui as t}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositSnapshot as n}from"../../driver/context.js";import{useDepositActions as r,useDepositEffectiveState as i,useDepositMethodsConfig as a,useEnabledRails as o}from"../../orchestrator/controller.js";import{ApplePayIcon as s}from"../../../../shared/icons/ApplePayIcon.js";import{BitcoinIcon as c}from"../../../../shared/icons/BitcoinIcon.js";import{CardIcon as ee}from"../../../../shared/icons/CardIcon.js";import{CashIcon as te}from"../../../../shared/icons/CashIcon.js";import{GooglePayIcon as l}from"../../../../shared/icons/GooglePayIcon.js";import{QrCodeIcon as u}from"../../../../shared/icons/QrCodeIcon.js";import{WalletIcon as ne}from"../../../../shared/icons/WalletIcon.js";import"../../../../icons/index.js";import{DialogShell as d}from"../../../../shared/dialog/DialogShell.js";import{Image as f}from"../../../../shared/ui/Image/Image.js";import{Skeleton as p}from"../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../shared/ui/Skeleton/index.js";import{TokenLogo as m}from"../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../shared/ui/TokenLogo/index.js";import"../../../../ui/index.js";import{Deposit as h}from"./compound/Deposit.js";import"./compound/index.js";import{useMemo as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";const b={width:18,height:18,"aria-hidden":!0},x={card:`card`,"apple-pay":`applePay`,"google-pay":`googlePay`},S=`deposit.last-rail`;function C({children:d,...f}){let m=n(),C=i().name,{selectMethod:w,selectCashMethod:T}=r(),E=a(),D=e(),{_:O}=t(),k=m.wallet,A=k.status===`ready`||k.status===`stale`?k.payload:void 0,j=A!==void 0,M=m.brand,N=M.status===`ready`||M.status===`stale`?M.payload:void 0,P=m.addresses,F=P.status===`ready`||P.status===`stale`?P.payload:[],I=m.balances.status===`error`,L=!A?.balanceTotalUsd?.formatted&&!I,R=!!m.brand,z=N?.name?O({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:N.name}}):void 0,B=g(()=>re(F),[F]),V=E?.wallet,H=E?.transfer,U=E?.card,W=E?.applePay,G=E?.googlePay,ie=E?.cashRail?.enabled===!0,K=m.cashMethods,q=K?.status,J=q===`ready`||q===`stale`?K?.payload:void 0,Y=ie&&J!==void 0,ae=g(()=>{let e=!j||L,t=V?.disabled??!1,n=e||t,r=t?V?.disabledHint:void 0,i=(()=>{if(t)return r;if(!j)return O({id:`5AApJw`,message:`Connect a wallet to continue`});if(A?.balanceTotalUsd?.formatted)return A.balanceTotalUsd.formatted;if(!I)return v(p,{width:56,height:12})})(),a=[{id:`wallet`,title:O({id:`sb9Y58`,message:`Wallet`}),icon:v(ne,{...b}),...A&&!t?{titleAdornment:A.address.formatted}:{},...i===void 0?{}:{meta:i},recommended:!0,disabled:n,onSelect:n?void 0:()=>w(`wallet`)}];if(R){let e=H?.disabled??!1,t=e?H?.disabledHint:void 0,n=e?t:[O({id:`qtoOYG`,message:`No limit`}),O({id:`D79cZK`,message:`Instant`})];a.push({id:`transfer`,title:O({id:`3dqPLT`,message:`Transfer Crypto`}),icon:v(u,{...b}),...n===void 0?{}:{meta:n},...B?{trailing:B}:{},disabled:e,onSelect:e?void 0:()=>w(`transfer`)})}return a},[A,I,L,j,R,B,V,H,w,O]),X=g(()=>{let e=(e,n)=>{if(e!==void 0)return e;if(!n)return;let r=[];n.limit?.formatted&&r.push(O({id:`jtKSW-`,message:`{0} limit`,values:{0:n.limit.formatted}}));let i=t(n.processingTime);return i&&r.push(i),r.length>0?r:void 0},t=e=>{if(e)return e.value===0?O({id:`D79cZK`,message:`Instant`}):e.formatted||void 0},n=(t,n,r,i,a)=>{let o=i?.disabled??!1,s=e(o?i?.disabledHint:void 0,a);return{id:t,title:n,icon:r,...s===void 0?{}:{meta:s},metaEmphasis:`uniform`,disabled:o,onSelect:o?void 0:()=>T(x[t])}};return{card:n(`card`,O({id:`kryGs-`,message:`Card`}),v(ee,{...b}),U,J?.card),applePay:n(`apple-pay`,O({id:`6ws9A3`,message:`Apple Pay`}),v(s,{...b}),W,J?.applePay),googlePay:n(`google-pay`,O({id:`ybKOj4`,message:`Google Pay`}),v(l,{...b}),G,J?.googlePay)}},[U,W,G,J,T,O]),Z=o(g(()=>{let e=[{value:`crypto`,label:O({id:`CS69m9`,message:`Use Crypto`}),icon:v(c,{width:12,height:12,"aria-hidden":!0})}];return Y&&e.push({value:`cash`,label:O({id:`LSs4cd`,message:`Use Cash`}),icon:v(te,{width:12,height:12,"aria-hidden":!0})}),e},[O,Y]));if(C!==`deposit`)return null;let Q={crypto:v(h.Methods,{}),cash:y(h.Methods,{children:[v(h.MethodSection,{label:O({id:`y1ypMV`,message:`Most popular`}),children:v(h.Method,{...X.card})}),y(h.MethodSection,{label:O({id:`xOUCt3`,message:`Other options`}),children:[v(h.Method,{...X.applePay}),v(h.Method,{...X.googlePay})]})]})},[$]=Z,oe=D?.get(S)??null,se=Z.find(e=>e.value===oe)?.value??$?.value,ce=y(_,{children:[v(h.Header,{}),v(h.Body,{children:Z.length>=2?v(h.RailPicker,{defaultValue:se,rails:Z,onValueChange:e=>D?.set(S,e),children:Z.map(e=>v(h.Rail,{value:e.value,children:Q[e.value]},e.value))}):Q[$?.value??`crypto`]})]});return v(h,{...f,...z?{title:z}:{},methods:ae,children:d??ce})}function re(e){if(e.length!==0)return v(f.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>v(m,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function w({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return v(d,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:v(C,{...i})})}(function(e){e.Dialog=w,e.Header=h.Header,e.Body=h.Body,e.Methods=h.Methods,e.Method=h.Method,e.MethodSection=h.MethodSection,e.Steps=h.Steps,e.Step=h.Step,e.RailPicker=h.RailPicker,e.Rail=h.Rail})(C||={});export{C as Deposit};

package/dist/flows/deposit/widgets/deposit/compound/Deposit.d.ts

@@ -1,10 +1,13 @@
 import { DepositStateName } from "../../../orchestrator/types.js";
 import { DepositBoundary, Props } from "./components/Boundary.js";
 import { DepositGuards, Props as Props$1 } from "./components/Guards.js";
-import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodProps, DepositMethodsProps, DepositProps } from "./types.js";
+import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodProps, DepositMethodSectionProps, DepositMethodsProps, DepositProps, DepositRailPickerProps, DepositRailProps } from "./types.js";
 import { DepositHeader } from "./components/Header.js";
 import { DepositMethod } from "./components/Method.js";
+import { DepositMethodSection } from "./components/MethodSection.js";
 import { DepositMethods } from "./components/Methods.js";
+import { DepositRail } from "./components/Rail.js";
+import { DepositRailPicker } from "./components/RailPicker.js";
 import { DepositSteps, DepositStepsProps } from "./components/Steps.js";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -52,15 +55,26 @@ declare namespace Deposit {
   type BodyProps = DepositBodyProps;
   type MethodsProps = DepositMethodsProps;
   type MethodProps = DepositMethodProps;
+  type MethodSectionProps = DepositMethodSectionProps;
   type DialogProps = DepositDialogProps;
   type StepsProps = DepositStepsProps;
   type StepProps = DepositStepProps;
   type GuardsProps = Props$1;
   type BoundaryProps = Props;
+  type RailPickerProps = DepositRailPickerProps;
+  type RailProps = DepositRailProps;
   const Header: typeof DepositHeader;
   const Body: typeof DepositBody;
   const Methods: typeof DepositMethods;
   const Method: typeof DepositMethod;
+  /**
+   * Labelled cluster of methods within a single rail (Paper artboard
+   * `1IIA-0` partitions the cash picker into "Most popular" and
+   * "Other options"). Detected by `Deposit.Methods` via element identity;
+   * when present the parent skips its own label + tile-group and each
+   * section owns its label and roving-focus group.
+   */
+  const MethodSection: typeof DepositMethodSection;
   const Dialog: typeof DepositDialog;
   const Steps: typeof DepositSteps;
   /**
@@ -78,6 +92,17 @@ declare namespace Deposit {
    * `onReset` calls `useDeposit().close()` internally; `onError` is host-supplied.
    */
   const Boundary: typeof DepositBoundary;
+  /**
+   * Segmented payment-rail switcher above the methods list. One panel per rail
+   * via {@link Deposit.Rail}. Uncontrolled by default; controllable via
+   * `value` + `onValueChange`.
+   */
+  const RailPicker: typeof DepositRailPicker;
+  /**
+   * One panel inside {@link Deposit.RailPicker}. `value` matches a descriptor
+   * passed to the picker's `rails` prop.
+   */
+  const Rail: typeof DepositRail;
 }
 //#endregion
 export { Deposit };

package/dist/flows/deposit/widgets/deposit/compound/Deposit.js

@@ -1 +1 @@
-"use client";import{DialogShell as e}from"../../../../../shared/dialog/DialogShell.js";import{Card as t}from"../../../../../shared/ui/Card/Card.js";import{Step as n}from"../../../../../shared/ui/Steps/Steps.js";import"../../../../../shared/ui/Steps/index.js";import{Tooltip as r}from"../../../../../shared/ui/Tooltip/Tooltip.js";import"../../../../../shared/ui/Tooltip/index.js";import"../../../../../ui/index.js";import{Frame as i}from"../../../../../shared/dialog/Frame.js";import{DepositBoundary as a}from"./components/Boundary.js";import{DepositGuards as o}from"./components/Guards.js";import{DepositContext as s}from"./context.js";import{DEPOSIT_SLOTS as c}from"./Deposit.slots.js";import{styles as l}from"./Deposit.styles.js";import{DepositHeader as u}from"./components/Header.js";import{DepositMethod as d}from"./components/Method.js";import{DepositMethods as f}from"./components/Methods.js";import{DepositSteps as p}from"./components/Steps.js";import{useMemo as m}from"react";import{jsx as h}from"react/jsx-runtime";import*as g from"@stylexjs/stylex";const _=[];function v(e){let{title:t,methodsLabel:n,methods:a=_,children:o}=e,u=m(()=>({title:t,methodsLabel:n,methods:a}),[t,n,a]);return h(s.Provider,{value:u,children:h(r.Provider,{children:h(i,{"data-stridge-slot":c.root,...g.props(l.root),children:o})})})}function y(e){return h(t.Body,{"data-stridge-slot":c.body,...e})}function b({open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:a,...o}){return h(e,{open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:h(v,{...o,children:a})})}(function(e){e.Header=u,e.Body=y,e.Methods=f,e.Method=d,e.Dialog=b,e.Steps=p,e.Step=n,e.Guards=o,e.Boundary=a})(v||={});export{v as Deposit};
+"use client";import{DialogShell as e}from"../../../../../shared/dialog/DialogShell.js";import{Card as t}from"../../../../../shared/ui/Card/Card.js";import{Step as n}from"../../../../../shared/ui/Steps/Steps.js";import"../../../../../shared/ui/Steps/index.js";import{Tooltip as r}from"../../../../../shared/ui/Tooltip/Tooltip.js";import"../../../../../shared/ui/Tooltip/index.js";import"../../../../../ui/index.js";import{Frame as i}from"../../../../../shared/dialog/Frame.js";import{DepositBoundary as a}from"./components/Boundary.js";import{DepositGuards as o}from"./components/Guards.js";import{DepositContext as s}from"./context.js";import{DEPOSIT_SLOTS as c}from"./Deposit.slots.js";import{styles as l}from"./Deposit.styles.js";import{DepositHeader as u}from"./components/Header.js";import{DepositMethod as d}from"./components/Method.js";import{DepositMethodSection as f}from"./components/MethodSection.js";import{DepositMethods as p}from"./components/Methods.js";import{DepositRail as m}from"./components/Rail.js";import{DepositRailPicker as h}from"./components/RailPicker.js";import{DepositSteps as g}from"./components/Steps.js";import{useMemo as _}from"react";import{jsx as v}from"react/jsx-runtime";import*as y from"@stylexjs/stylex";const b=[];function x(e){let{title:t,methodsLabel:n,methods:a=b,children:o}=e,u=_(()=>({title:t,methodsLabel:n,methods:a}),[t,n,a]);return v(s.Provider,{value:u,children:v(r.Provider,{children:v(i,{"data-stridge-slot":c.root,...y.props(l.root),children:o})})})}function S(e){return v(t.Body,{"data-stridge-slot":c.body,...e})}function C({open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:a,...o}){return v(e,{open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:v(x,{...o,children:a})})}(function(e){e.Header=u,e.Body=S,e.Methods=p,e.Method=d,e.MethodSection=f,e.Dialog=C,e.Steps=g,e.Step=n,e.Guards=o,e.Boundary=a,e.RailPicker=h,e.Rail=m})(x||={});export{x as Deposit};

package/dist/flows/deposit/widgets/deposit/compound/Deposit.slots.d.ts

@@ -5,6 +5,12 @@ declare const DEPOSIT_SLOTS: {
   readonly body: "deposit-body";
   readonly methods: "deposit-methods";
   readonly method: "deposit-method";
+  readonly methodSection: "deposit-method-section";
+  readonly methodSectionLabel: "deposit-method-section-label";
+  readonly railPicker: "deposit-rail-picker";
+  readonly railList: "deposit-rail-list";
+  readonly railTab: "deposit-rail-tab";
+  readonly rail: "deposit-rail";
 };
 type DepositSlot = (typeof DEPOSIT_SLOTS)[keyof typeof DEPOSIT_SLOTS];
 //#endregion

package/dist/flows/deposit/widgets/deposit/compound/Deposit.slots.js

@@ -1 +1 @@
-const e={root:`deposit`,header:`deposit-header`,body:`deposit-body`,methods:`deposit-methods`,method:`deposit-method`};export{e as DEPOSIT_SLOTS};
+const e={root:`deposit`,header:`deposit-header`,body:`deposit-body`,methods:`deposit-methods`,method:`deposit-method`,methodSection:`deposit-method-section`,methodSectionLabel:`deposit-method-section-label`,railPicker:`deposit-rail-picker`,railList:`deposit-rail-list`,railTab:`deposit-rail-tab`,rail:`deposit-rail`};export{e as DEPOSIT_SLOTS};

package/dist/flows/deposit/widgets/deposit/compound/Deposit.styles.js

@@ -1 +1 @@
-const e={root:{"Deposit__styles.root":`Deposit__styles.root`,"position-kVAEAm":`x1n2onr6`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x17fpy1y`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:17`},header:{"Deposit__styles.header":`Deposit__styles.header`,"justifyContent-kjj79g":`x1qughib`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:25`},headerTrailing:{"Deposit__styles.headerTrailing":`Deposit__styles.headerTrailing`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x1a6yh9e`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:30`},closeIcon:{"Deposit__styles.closeIcon":`Deposit__styles.closeIcon`,"color-kMwMTN":`xdksllq`,"strokeWidth-kfJifR":`x1k315e8`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:35`},section:{"Deposit__styles.section":`Deposit__styles.section`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x883omv`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,"paddingInlineStart-kZCmMZ":`xz7312c`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:40`},sectionMethods:{"Deposit__styles.sectionMethods":`Deposit__styles.sectionMethods`,"paddingTop-kLKAdn":`x1cnzs8`,"paddingBottom-kGO01o":`x1t4gjm`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:47`},methodsList:{"Deposit__styles.methodsList":`Deposit__styles.methodsList`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x167g77z`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:52`},methodRow:{"Deposit__styles.methodRow":`Deposit__styles.methodRow`,"gap-kOIVth":`x1af02g3`,"paddingInlineStart-kZCmMZ":`xwn43p0`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:63`},methodIconSlot:{"Deposit__styles.methodIconSlot":`Deposit__styles.methodIconSlot`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"width-kzqmXN":`x14qfxbe`,"height-kZKoxP":`xc9qbxq`,"flexShrink-kmuXW":`x2lah0s`,"borderRadius-kaIpWk":`xi9trdq`,"backgroundColor-kWkggS":`xp5aqsh`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1bue7yx`,"color-kMwMTN":`xzn0pkc`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:67`},methodText:{"Deposit__styles.methodText":`Deposit__styles.methodText`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flexBasis-kCS8Yb":`x1r8uery`,"flexGrow-kzQI83":`x1iyjqo2`,"flexShrink-kmuXW":`xs83m0k`,"gap-kOIVth":`x1ed6fcf`,"minWidth-k7Eaqz":`xeuugli`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:81`},methodTitleRow:{"Deposit__styles.methodTitleRow":`Deposit__styles.methodTitleRow`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x167g77z`,"minWidth-k7Eaqz":`xeuugli`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:90`},methodMeta:{"Deposit__styles.methodMeta":`Deposit__styles.methodMeta`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x17d4w8g`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:96`},methodMetaItem:{"Deposit__styles.methodMetaItem":`Deposit__styles.methodMetaItem`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"whiteSpace-khDVqt":`xuxw1ft`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:102`},methodTrailing:{"Deposit__styles.methodTrailing":`Deposit__styles.methodTrailing`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"flexShrink-kmuXW":`x2lah0s`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:107`},methodChevron:{"Deposit__styles.methodChevron":`Deposit__styles.methodChevron`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`x1v9usgg`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xdksllq`,"strokeWidth-kfJifR":`x1k315e8`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:112`},methodRecommendedBar:{"Deposit__styles.methodRecommendedBar":`Deposit__styles.methodRecommendedBar`,"position-kVAEAm":`x10l6tqk`,"top-k87sOh":`xuivejd`,"bottom-krVfgx":`xmbx2d0`,"insetInlineStart-kLqNvP":`x1o0tod`,"width-kzqmXN":`xfo62xy`,"borderStartEndRadius-kfmiAY":`x1e4oeot`,"borderEndEndRadius-kT0f0o":`x1ui04y5`,"backgroundColor-kWkggS":`xdmxa9o`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:119`}};export{e as styles};
+const e={root:{"Deposit__styles.root":`Deposit__styles.root`,"position-kVAEAm":`x1n2onr6`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x17fpy1y`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:17`},header:{"Deposit__styles.header":`Deposit__styles.header`,"justifyContent-kjj79g":`x1qughib`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:25`},headerTrailing:{"Deposit__styles.headerTrailing":`Deposit__styles.headerTrailing`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x1a6yh9e`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:30`},closeIcon:{"Deposit__styles.closeIcon":`Deposit__styles.closeIcon`,"color-kMwMTN":`xdksllq`,"strokeWidth-kfJifR":`x1k315e8`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:35`},section:{"Deposit__styles.section":`Deposit__styles.section`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x883omv`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,"paddingInlineStart-kZCmMZ":`xz7312c`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:40`},sectionMethods:{"Deposit__styles.sectionMethods":`Deposit__styles.sectionMethods`,"paddingTop-kLKAdn":`x1cnzs8`,"paddingBottom-kGO01o":`x1t4gjm`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:47`},methodsList:{"Deposit__styles.methodsList":`Deposit__styles.methodsList`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x167g77z`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:52`},methodSection:{"Deposit__styles.methodSection":`Deposit__styles.methodSection`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x2blr79`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:65`},sectionMethodsGrouped:{"Deposit__styles.sectionMethodsGrouped":`Deposit__styles.sectionMethodsGrouped`,"gap-kOIVth":`xsfdumc`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:76`},railPicker:{"Deposit__styles.railPicker":`Deposit__styles.railPicker`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`xxhr3t`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:86`},railList:{"Deposit__styles.railList":`Deposit__styles.railList`,"display-k1xSpc":`x78zum5`,"marginInlineEnd-k71WvV":`xnqxrjt`,"marginInlineStart-keTefX":`xnzr9dm`,"marginTop-keoZOQ":`xw7yly9`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:91`},railListInner:{"Deposit__styles.railListInner":`Deposit__styles.railListInner`,"flexGrow-kzQI83":`x1iyjqo2`,"flexShrink-kmuXW":`xs83m0k`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:97`},railTabBadge:{"Deposit__styles.railTabBadge":`Deposit__styles.railTabBadge`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"width-kzqmXN":`x17z2i9w`,"height-kZKoxP":`x17rw0jw`,"flexShrink-kmuXW":`x2lah0s`,"borderRadius-kaIpWk":`x1npxkrn`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1bue7yx`,"backgroundColor-kWkggS":`xp5aqsh`,"transitionProperty-k1ekBW":`x1eaenvl`,"transitionDuration-kIyJzY":`x1vhb3u9`,"transitionTimingFunction-kAMwcw":`x1xv5090`,"[data-active]_backgroundColor-kUQuju":`x1anawn6`,"[data-active]_borderColor-kE2G9j":`x7kzco9`,"[data-active]_color-kZgtTg":`xuz9cdh`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:114`},methodRow:{"Deposit__styles.methodRow":`Deposit__styles.methodRow`,"gap-kOIVth":`x1af02g3`,"paddingInlineStart-kZCmMZ":`xwn43p0`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:141`},methodIconSlot:{"Deposit__styles.methodIconSlot":`Deposit__styles.methodIconSlot`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"width-kzqmXN":`x14qfxbe`,"height-kZKoxP":`xc9qbxq`,"flexShrink-kmuXW":`x2lah0s`,"borderRadius-kaIpWk":`xi9trdq`,"backgroundColor-kWkggS":`xp5aqsh`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1bue7yx`,"color-kMwMTN":`xzn0pkc`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:145`},methodText:{"Deposit__styles.methodText":`Deposit__styles.methodText`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flexBasis-kCS8Yb":`x1r8uery`,"flexGrow-kzQI83":`x1iyjqo2`,"flexShrink-kmuXW":`xs83m0k`,"gap-kOIVth":`x1ed6fcf`,"minWidth-k7Eaqz":`xeuugli`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:159`},methodTitleRow:{"Deposit__styles.methodTitleRow":`Deposit__styles.methodTitleRow`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x167g77z`,"minWidth-k7Eaqz":`xeuugli`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:168`},methodMeta:{"Deposit__styles.methodMeta":`Deposit__styles.methodMeta`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x17d4w8g`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:174`},methodMetaItem:{"Deposit__styles.methodMetaItem":`Deposit__styles.methodMetaItem`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"whiteSpace-khDVqt":`xuxw1ft`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:180`},methodTrailing:{"Deposit__styles.methodTrailing":`Deposit__styles.methodTrailing`,"display-k1xSpc":`x78zum5`,"alignItems-kGNEyG":`x6s0dn4`,"flexShrink-kmuXW":`x2lah0s`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:185`},methodChevron:{"Deposit__styles.methodChevron":`Deposit__styles.methodChevron`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`x1v9usgg`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xdksllq`,"strokeWidth-kfJifR":`x1k315e8`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:190`},methodRecommendedBar:{"Deposit__styles.methodRecommendedBar":`Deposit__styles.methodRecommendedBar`,"position-kVAEAm":`x10l6tqk`,"top-k87sOh":`xuivejd`,"bottom-krVfgx":`xmbx2d0`,"insetInlineStart-kLqNvP":`x1o0tod`,"width-kzqmXN":`xfo62xy`,"borderStartEndRadius-kfmiAY":`x1e4oeot`,"borderEndEndRadius-kT0f0o":`x1ui04y5`,"backgroundColor-kWkggS":`xdmxa9o`,$$css:`@stridge/kit:src/flows/deposit/widgets/deposit/compound/Deposit.styles.ts:197`}};export{e as styles};

package/dist/flows/deposit/widgets/deposit/compound/components/Guards.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../../../driver/context.js";import{useDepositEffectiveState as t}from"../../../../orchestrator/controller.js";import{useDepositOwnerContext as n}from"../../../../../../stridge/depositOwner.js";import{DepositBootstrapErrorState as r}from"../../../../dialog/DepositBootstrapErrorState.js";import{WalletRequiredState as i}from"../../../../dialog/WalletRequiredState.js";import{LoadingState as a}from"../../../../../../shared/dialog/LoadingState.js";import{Fragment as o,jsx as s}from"react/jsx-runtime";const c=new Set([`deposit`,`assetPicker`,`amountEntry`,`confirmDeposit`,`transferCrypto`]);function l({children:l}){let u=t(),d=e(),f=n(),p=c.has(u.name);return f!==null&&!f.resolved&&p?s(i,{}):d.target.status===`error`&&p?s(r,{}):(d.target.status===`loading`||d.target.status===`idle`)&&p?s(a,{slot:`deposit`}):s(o,{children:l})}export{l as DepositGuards};
+"use client";import{useDepositSnapshot as e}from"../../../../driver/context.js";import{useDepositEffectiveState as t}from"../../../../orchestrator/controller.js";import{useDepositOwnerContext as n}from"../../../../../../stridge/depositOwner.js";import{DepositBootstrapErrorState as r}from"../../../../dialog/DepositBootstrapErrorState.js";import{WalletRequiredState as i}from"../../../../dialog/WalletRequiredState.js";import{LoadingState as a}from"../../../../../../shared/dialog/LoadingState.js";import{Fragment as o,jsx as s}from"react/jsx-runtime";const c=new Set([`deposit`,`assetPicker`,`amountEntry`,`cashAmountEntry`,`cashConfirm`,`confirmDeposit`,`transferCrypto`]);function l({children:l}){let u=t(),d=e(),f=n(),p=c.has(u.name);return f!==null&&!f.resolved&&p?s(i,{}):d.target.status===`error`&&p?s(r,{}):(d.target.status===`loading`||d.target.status===`idle`)&&p?s(a,{slot:`deposit`}):s(o,{children:l})}export{l as DepositGuards};

package/dist/flows/deposit/widgets/deposit/compound/components/Method.d.ts

@@ -28,6 +28,7 @@ declare function DepositMethod({
   title,
   titleAdornment,
   meta,
+  metaEmphasis,
   icon,
   trailing,
   recommended,

package/dist/flows/deposit/widgets/deposit/compound/components/Method.js

@@ -1 +1 @@
-"use client";import{ChevronRightIcon as e}from"../../../../../../shared/icons/ChevronRightIcon.js";import"../../../../../../icons/index.js";import{SelectableTile as t}from"../../../../../../shared/ui/SelectableTile/SelectableTile.js";import"../../../../../../shared/ui/SelectableTile/index.js";import{text as n}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{DEPOSIT_SLOTS as r}from"../Deposit.slots.js";import{styles as i}from"../Deposit.styles.js";import{Fragment as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"@stylexjs/stylex";function l({title:a,titleAdornment:l,meta:d,icon:f,trailing:p,recommended:m=!1,disabled:h=!1,onSelect:g}){let _=h&&typeof d==`string`&&d.length>0?`${a} — ${d}`:a;return s(t,{shape:`card`,interactive:!0,onClick:h?void 0:g,disabled:h,"aria-label":_,"aria-disabled":h||void 0,"data-stridge-slot":r.method,"data-recommended":m||void 0,"data-disabled":h||void 0,...c.props(i.methodRow),children:[m?o(`span`,{"aria-hidden":!0,...c.props(i.methodRecommendedBar)}):null,o(`span`,{...c.props(i.methodIconSlot),children:f}),s(`span`,{...c.props(i.methodText),children:[s(`span`,{...c.props(i.methodTitleRow),children:[o(n.span,{size:`sm`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,truncate:!0,children:a}),l?o(n.span,{size:`xs`,leading:`tight`,tracking:`wide`,color:`subdued`,font:`mono`,style:{flexShrink:0},children:l}):null]}),d?o(u,{meta:d}):null]}),o(`span`,{...c.props(i.methodTrailing),children:p??o(e,{"aria-hidden":!0,...c.props(i.methodChevron)})})]})}function u({meta:e}){return Array.isArray(e)?o(n.span,{size:`xs`,leading:`tight`,color:`subdued`,...c.props(i.methodMeta),children:e.map((e,t)=>s(a,{children:[t>0?o(`span`,{...c.props(i.methodMetaItem),children:`·`}):null,o(n.span,{size:`xs`,leading:`tight`,fontWeight:t===0?`medium`:`normal`,color:t===0?`default`:`inherit`,...c.props(i.methodMetaItem),children:e})]},t))}):o(n.span,{size:`xs`,leading:`tight`,color:`subdued`,...c.props(i.methodMeta),children:e})}export{l as DepositMethod};
+"use client";import{ChevronRightIcon as e}from"../../../../../../shared/icons/ChevronRightIcon.js";import"../../../../../../icons/index.js";import{SelectableTile as t}from"../../../../../../shared/ui/SelectableTile/SelectableTile.js";import"../../../../../../shared/ui/SelectableTile/index.js";import{text as n}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{DEPOSIT_SLOTS as r}from"../Deposit.slots.js";import{styles as i}from"../Deposit.styles.js";import{Fragment as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"@stylexjs/stylex";function l({title:a,titleAdornment:l,meta:d,metaEmphasis:f=`lead`,icon:p,trailing:m,recommended:h=!1,disabled:g=!1,onSelect:_}){let v=g&&typeof d==`string`&&d.length>0?`${a} — ${d}`:a;return s(t,{shape:`card`,interactive:!0,onClick:g?void 0:_,disabled:g,"aria-label":v,"aria-disabled":g||void 0,"data-stridge-slot":r.method,"data-recommended":h||void 0,"data-disabled":g||void 0,...c.props(i.methodRow),children:[h?o(`span`,{"aria-hidden":!0,...c.props(i.methodRecommendedBar)}):null,o(`span`,{...c.props(i.methodIconSlot),children:p}),s(`span`,{...c.props(i.methodText),children:[s(`span`,{...c.props(i.methodTitleRow),children:[o(n.span,{size:`sm`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,truncate:!0,children:a}),l?o(n.span,{size:`xs`,leading:`tight`,tracking:`wide`,color:`subdued`,font:`mono`,style:{flexShrink:0},children:l}):null]}),d?o(u,{meta:d,emphasis:f}):null]}),o(`span`,{...c.props(i.methodTrailing),children:m??o(e,{"aria-hidden":!0,...c.props(i.methodChevron)})})]})}function u({meta:e,emphasis:t=`lead`}){return Array.isArray(e)?o(n.span,{size:`xs`,leading:`tight`,color:`subdued`,...c.props(i.methodMeta),children:e.map((e,r)=>{let l=t===`uniform`||r===0,u=t===`lead`&&r===0;return s(a,{children:[r>0?o(`span`,{...c.props(i.methodMetaItem),children:`·`}):null,o(n.span,{size:`xs`,leading:`tight`,fontWeight:l?`medium`:`normal`,color:u?`default`:`inherit`,...c.props(i.methodMetaItem),children:e})]},r)})}):o(n.span,{size:`xs`,leading:`tight`,color:`subdued`,...c.props(i.methodMeta),children:e})}export{l as DepositMethod};

package/dist/flows/deposit/widgets/deposit/compound/components/MethodSection.d.ts

@@ -0,0 +1,40 @@
+import { DepositMethodSectionProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/MethodSection.d.ts
+/**
+ * MethodSection part — labelled cluster of `Deposit.Method` rows inside a
+ * single rail. Renders its own label + `SelectableTileGroup` so each section
+ * owns a roving-focus group whose arrow-key navigation stays contained.
+ *
+ * Detected by the enclosing `<Deposit.Methods>` walker via React element
+ * identity (`child.type === DepositMethodSection`); when at least one section
+ * child is present, `Methods` skips its own label + tile-group wrapper and
+ * delegates that chrome to the sections. Flat-list behavior (no sections) is
+ * unchanged.
+ *
+ * Consumer shape — JSX composition, not data shape, so moving a method
+ * between sections, swapping a label per-locale, or dropping a section
+ * entirely never touches `DepositMethodInput` or the orchestrator:
+ *
+ * ```tsx
+ * <Deposit.Methods>
+ *   <Deposit.MethodSection label={t`Most popular`}>
+ *     <Deposit.Method {...card} />
+ *   </Deposit.MethodSection>
+ *   <Deposit.MethodSection label={t`Other options`}>
+ *     <Deposit.Method {...applePay} />
+ *     <Deposit.Method {...googlePay} />
+ *   </Deposit.MethodSection>
+ * </Deposit.Methods>
+ * ```
+ */
+declare function DepositMethodSection({
+  label,
+  children
+}: DepositMethodSectionProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DepositMethodSection {
+  var displayName: string;
+}
+//#endregion
+export { DepositMethodSection };

package/dist/flows/deposit/widgets/deposit/compound/components/MethodSection.js

@@ -0,0 +1 @@
+"use client";import{SelectableTileGroup as e}from"../../../../../../shared/ui/SelectableTile/SelectableTileGroup.js";import"../../../../../../shared/ui/SelectableTile/index.js";import{text as t}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{DEPOSIT_SLOTS as n}from"../Deposit.slots.js";import{styles as r}from"../Deposit.styles.js";import{useId as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as s from"@stylexjs/stylex";function c({label:c,children:l}){let u=i();return o(`div`,{"data-stridge-slot":n.methodSection,...s.props(r.methodSection),children:[a(t.span,{id:u,"data-stridge-slot":n.methodSectionLabel,size:`2xs`,fontWeight:`medium`,leading:`tight`,tracking:`widest`,transform:`uppercase`,color:`subdued`,children:c}),a(e,{"aria-labelledby":u,...s.props(r.methodsList),children:l})]})}c.displayName=`Deposit.MethodSection`;export{c as DepositMethodSection};

package/dist/flows/deposit/widgets/deposit/compound/components/Methods.d.ts

@@ -3,16 +3,23 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/deposit/compound/components/Methods.d.ts
 /**
- * Methods part — section wrapper around the payment-method list. Renders
- * the "Payment Method" label and a vertical column for `Deposit.Method`
- * children. The list participates in arrow-key navigation via
- * `SelectableTileGroup` (roving-tabindex). No `value` is supplied here —
- * each row's click navigates to the next step rather than toggling a
- * pressed state, so the group is purely a keyboard-affordance wrapper.
+ * Methods part — section wrapper around the payment-method list.
  *
- * By default renders one `Deposit.Method` per entry on the {@link Deposit}
- * root's `methods` prop. Pass `children` to opt out of the default
- * rendering and supply a bespoke list.
+ * Two modes, picked automatically off the shape of `children`:
+ *
+ * - **Flat** (default): renders the "PAYMENT METHOD" label and a single
+ *   `SelectableTileGroup` (roving-tabindex) containing one `Deposit.Method`
+ *   per entry on the {@link Deposit} root's `methods` prop, or the passed
+ *   `children` if supplied.
+ * - **Sectioned**: when at least one `<Deposit.MethodSection>` child is
+ *   detected, the outer label and tile-group are skipped — each section
+ *   owns its own label and roving-focus group so arrow-key navigation
+ *   stays contained inside a single section (the Paper artboard `1IIA-0`
+ *   cash picker shape).
+ *
+ * No `value` is supplied to the tile group — each row's click navigates to
+ * the next step rather than toggling a pressed state, so the group is purely
+ * a keyboard-affordance wrapper.
  */
 declare function DepositMethods({
   label,

package/dist/flows/deposit/widgets/deposit/compound/components/Methods.js

@@ -1 +1 @@
-"use client";import{useLingui as e}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{SelectableTileGroup as t}from"../../../../../../shared/ui/SelectableTile/SelectableTileGroup.js";import"../../../../../../shared/ui/SelectableTile/index.js";import{text as n}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{useDepositContext as r}from"../context.js";import{DEPOSIT_SLOTS as i}from"../Deposit.slots.js";import{styles as a}from"../Deposit.styles.js";import{DepositMethod as o}from"./Method.js";import{useId as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import*as u from"@stylexjs/stylex";function d({label:d,methods:f,children:p}={}){let m=r(`Deposit.Methods`),{_:h}=e(),g=s(),_=d??m.methodsLabel??h({id:`sbwbC0`,message:`Payment Method`}),v=f??m.methods;return l(`div`,{"data-stridge-slot":i.methods,...u.props(a.section,a.sectionMethods),children:[c(n.span,{id:g,size:`2xs`,fontWeight:`medium`,leading:`tight`,tracking:`widest`,transform:`uppercase`,color:`subdued`,children:_}),c(t,{"aria-labelledby":g,...u.props(a.methodsList),children:p??v.map(e=>c(o,{...e},e.id))})]})}export{d as DepositMethods};
+"use client";import{useLingui as e}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{SelectableTileGroup as t}from"../../../../../../shared/ui/SelectableTile/SelectableTileGroup.js";import"../../../../../../shared/ui/SelectableTile/index.js";import{text as n}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{useDepositContext as r}from"../context.js";import{DEPOSIT_SLOTS as i}from"../Deposit.slots.js";import{styles as a}from"../Deposit.styles.js";import{DepositMethod as o}from"./Method.js";import{DepositMethodSection as s}from"./MethodSection.js";import{Children as c,isValidElement as l,useId as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import*as m from"@stylexjs/stylex";function h(e){let t=!1;return c.forEach(e,e=>{t||l(e)&&e.type===s&&(t=!0)}),t}function g({label:s,methods:c,children:l}={}){let g=r(`Deposit.Methods`),{_}=e(),v=u(),y=s??g.methodsLabel??_({id:`sbwbC0`,message:`Payment Method`}),b=c??g.methods,x=l!==void 0&&h(l);return f(`div`,{"data-stridge-slot":i.methods,"data-sectioned":x?``:void 0,...m.props(a.section,a.sectionMethods,x&&a.sectionMethodsGrouped),children:x?l:p(d,{children:[f(n.span,{id:v,size:`2xs`,fontWeight:`medium`,leading:`tight`,tracking:`widest`,transform:`uppercase`,color:`subdued`,children:y}),f(t,{"aria-labelledby":v,...m.props(a.methodsList),children:l??b.map(e=>f(o,{...e},e.id))})]})})}export{g as DepositMethods};

package/dist/flows/deposit/widgets/deposit/compound/components/Rail.d.ts

@@ -0,0 +1,18 @@
+import { DepositRailProps } from "../types.js";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Rail.d.ts
+/**
+ * Rail marker — declarative slot consumed by `Deposit.RailPicker`. The
+ * component itself renders nothing; its children are lifted by the
+ * enclosing `RailPicker` when `value` matches the active rail and
+ * wrapped in the kit's `StepTransition` (slide + blur on rail change,
+ * animated height between commits) — same animation primitive the
+ * orchestrated dialog uses between FSM steps. Outside a `RailPicker`
+ * the component is a no-op.
+ */
+declare function DepositRail(_props: DepositRailProps): null;
+declare namespace DepositRail {
+  var displayName: string;
+}
+//#endregion
+export { DepositRail };

package/dist/flows/deposit/widgets/deposit/compound/components/Rail.js

@@ -0,0 +1 @@
+"use client";function e(e){return null}e.displayName=`Deposit.Rail`;export{e as DepositRail};

package/dist/flows/deposit/widgets/deposit/compound/components/RailPicker.d.ts

@@ -0,0 +1,43 @@
+import { DepositRailPickerProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/RailPicker.d.ts
+/**
+ * RailPicker part — segmented switcher above the methods list. Renders a
+ * `Tabs.List` with one `Tabs.Tab` per `rails` descriptor (each tab
+ * composes a 22px circular icon badge + label) plus a floating
+ * `Tabs.Indicator` pill that animates between tabs. The active rail's
+ * panel content is lifted from the matching `<Deposit.Rail>` marker
+ * child and wrapped in the kit's `StepTransition` — same slide+blur+
+ * layout-height animation used between FSM steps in the orchestrated
+ * dialog, so the picker reads as one orchestrated surface with the
+ * rest of the flow. Direction follows `StepTransition`'s history-stack
+ * logic: novel rail = forward (slides in from the right), known rail
+ * = backward (slides in from the left).
+ *
+ * The badge inversion (idle chip surface ↔ active foreground fill)
+ * still rides through the parent Base UI Tab's `data-active` via the
+ * `render` prop (StyleX does not compile parent-ancestor combinators).
+ *
+ * The active panel is rendered as a single manual `<div role="tabpanel">`
+ * tied to the active tab via `aria-labelledby` (each tab carries an
+ * `id={idPrefix}-{rail.value}` matching the panel's `aria-labelledby`),
+ * **not** as one `Tabs.Panel` per descriptor. The marker-walking pattern
+ * lifts the matched `<Deposit.Rail>`'s children into a single slot wrapped
+ * in `StepTransition`, so the picker reads as one orchestrated surface
+ * across rail changes. The tradeoff is losing Base UI's per-panel
+ * `aria-controls` wiring and its built-in hidden-when-inactive focus
+ * management; the manual `aria-labelledby` plus the marker-walker's
+ * one-panel-at-a-time render restore the equivalent semantics.
+ *
+ * Empty `rails` short-circuits to `null` — the orchestrated default composition only
+ * mounts the picker when `enabledRails.length >= 2`, but `Deposit.RailPicker` is part
+ * of the public API and a composition-path host could pass `rails={[]}` directly. The
+ * inner component owns the hooks so the early-return stays above any hook call.
+ */
+declare function DepositRailPicker(props: DepositRailPickerProps): _$react_jsx_runtime0.JSX.Element | null;
+declare namespace DepositRailPicker {
+  var displayName: string;
+}
+//#endregion
+export { DepositRailPicker };

package/dist/flows/deposit/widgets/deposit/compound/components/RailPicker.js

@@ -0,0 +1 @@
+"use client";import{StepTransition as e}from"../../../../../../shared/dialog/StepTransition.js";import{Tabs as t}from"../../../../../../shared/ui/Tabs/Tabs.js";import"../../../../../../shared/ui/Tabs/index.js";import{DEPOSIT_SLOTS as n}from"../Deposit.slots.js";import{styles as r}from"../Deposit.styles.js";import{DepositRail as i}from"./Rail.js";import{Children as a,isValidElement as o,useId as s,useMemo as c,useState as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";function p(e,t){let n=null;return a.forEach(e,e=>{n===null&&o(e)&&e.type===i&&e.props.value===t&&(n=e.props.children)}),n}function m(e){return e.rails.length===0?null:u(h,{...e})}m.displayName=`Deposit.RailPicker`;function h({defaultValue:i,value:a,onValueChange:o,rails:m,variant:h=`default`,children:g}){let[_]=m;if(!_)return null;let[v,y]=l(i??_.value),b=a!==void 0,x=b?a:v,S=s(),C=e=>{e!==`crypto`&&e!==`cash`||(b||y(e),o?.(e))},w=c(()=>p(g,x),[g,x]);return d(t.Root,{"data-stridge-slot":n.railPicker,value:x,onValueChange:C,...f.props(r.railPicker),children:[u(`div`,{...f.props(r.railList),children:d(t.List,{"data-stridge-slot":n.railList,variant:h,...f.props(r.railListInner),children:[m.map(e=>u(t.Tab,{id:`${S}-${e.value}`,"data-stridge-slot":n.railTab,"data-rail":e.value,value:e.value,disabled:e.disabled,render:(t,n)=>d(`button`,{type:`button`,...t,children:[e.icon?u(`span`,{"data-active":n.active?``:void 0,...f.props(r.railTabBadge),children:e.icon}):null,e.label]})},e.value)),u(t.Indicator,{})]})}),u(e,{stateKey:x,children:u(`div`,{role:`tabpanel`,"aria-labelledby":`${S}-${x}`,"data-stridge-slot":n.rail,"data-rail":x,children:w})})]})}export{m as DepositRailPicker};

package/dist/flows/deposit/widgets/deposit/compound/index.d.ts

@@ -1,4 +1,4 @@
-import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodInput, DepositMethodOption, DepositMethodProps, DepositMethodsProps, DepositProps } from "./types.js";
+import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodInput, DepositMethodOption, DepositMethodProps, DepositMethodSectionProps, DepositMethodsProps, DepositProps, DepositRail, DepositRailDescriptor, DepositRailPickerProps, DepositRailProps } from "./types.js";
 import { DepositStepsProps } from "./components/Steps.js";
 import { Deposit } from "./Deposit.js";
 import { DEPOSIT_SLOTS, DepositSlot } from "./Deposit.slots.js";