@stridge/kit 0.1.0-alpha.6 → 0.1.0-alpha.60

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

@@ -0,0 +1,16 @@
+import { CashConfirmMethodBodyProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/cash-confirm/compound/components/CardBody.d.ts
+/**
+ * Card-method confirm body. Loading renders a `CARD DETAILS` label + a 44-tall skeleton block +
+ * a "Loading secure card input..." hint + a disabled "Pay Now" CTA. Ready renders the same label
+ * + the editable {@link CardInputRow} (brand glyph + PAN + MM/YY + CVC + its own "Pay {amount}
+ * securely" CTA — the row owns the wrapping `<form>` so browser-native saved-card autofill
+ * engages).
+ */
+declare function CashConfirmCardBody({
+  disabled
+}?: CashConfirmMethodBodyProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CashConfirmCardBody };

package/dist/flows/deposit/widgets/cash-confirm/compound/components/CardBody.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{Button as n}from"../../../../../../shared/ui/Button/Button.js";import{Skeleton as r}from"../../../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../../../shared/ui/Skeleton/index.js";import{text as i}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{CASH_CONFIRM_SLOTS as a}from"../CashConfirm.slots.js";import{styles as o}from"../CashConfirm.styles.js";import{cashConfirmDimensions as s}from"../cashConfirmDimensions.js";import{useCashConfirmContext as c}from"../context.js";import{BodyLabel as l}from"./BodyLabel.js";import{CardInputRow as u}from"./CardInputRow.js";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import*as m from"@stylexjs/stylex";function h({disabled:h=!1}={}){let{_:g}=t(),{phase:_,amount:v}=c(`CashConfirm.CardBody`),y=_.kind===`loading`;return p(`div`,{"data-stridge-slot":a.methodBody,...m.props(o.methodBody),children:[f(l,{children:f(e,{id:`iROlQr`,message:`Card details`})}),y?p(d,{children:[f(r,{width:`100%`,height:s.ctaHeight,radius:s.cardRowRadius}),f(i.span,{size:`xs`,leading:`tight`,color:`subdued`,...m.props(o.bodyHint),children:f(e,{id:`YKfMl6`,message:`Loading secure card input...`})}),f(n,{size:`cta`,disabled:!0,"aria-label":g({id:`PknXwq`,message:`Pay Now`}),"data-stridge-slot":a.cta,...m.props(o.cta),children:f(i.span,{size:`callout`,fontWeight:`semibold`,leading:`tight`,color:`inherit`,children:f(e,{id:`PknXwq`,message:`Pay Now`})})})]}):f(u,{amount:v,disabled:h})]})}export{h as CashConfirmCardBody};

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

@@ -0,0 +1 @@
+import{AmexIcon as e}from"../../../../../../shared/icons/AmexIcon.js";import{CardIcon as t}from"../../../../../../shared/icons/CardIcon.js";import{DiscoverIcon as n}from"../../../../../../shared/icons/DiscoverIcon.js";import{MastercardIcon as r}from"../../../../../../shared/icons/MastercardIcon.js";import{VisaIcon as i}from"../../../../../../shared/icons/VisaIcon.js";import"../../../../../../icons/index.js";function a(a){return a===`visa`?i:a===`mastercard`?r:a===`amex`?e:a===`discover`?n:t}export{a as pickBrandIcon};

package/dist/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.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{DEFAULT_TOKENIZE_CARD as ee,useDepositBindingsRef as r}from"../../../../bindings/DepositBindings.js";import"../../../../bindings/index.js";import{formatUsd as i}from"../../../../../../shared/format/formatUsd.js";import{Button as a}from"../../../../../../shared/ui/Button/Button.js";import{text as te}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{CASH_CONFIRM_SLOTS as o}from"../CashConfirm.slots.js";import{SUBMIT_SUCCESS_HOLD_MS as ne}from"../../mocks.js";import{pickBrandIcon as s}from"./CardInputRow.icons.js";import{expDigitCount as c,handleSegmentedKey as l}from"./CardInputRow.keys.js";import{cvcLengthForBrand as u,getCvcError as d,getExpError as f,getPanError as re,isValidCvc as ie,isValidExp as ae,isValidPan as p,panMaxChars as m}from"./cardFormat.js";import{cardInputRowReducer as h,initialCardInputRowState as g}from"./CardInputRow.state.js";import{styles as _}from"./CardInputRow.styles.js";import{useEffect as v,useId as oe,useMemo as se,useReducer as ce,useRef as y}from"react";import{jsx as b,jsxs as x}from"react/jsx-runtime";import*as S from"@stylexjs/stylex";function C({amount:C,disabled:w=!1}){let{_:T}=n(),E=i(C,e(),{showSmallValueClamp:!1}),[D,O]=ce(h,g),k=r(),A=y(null),j=y(null),M=y(null),N=y(null),P=y(null),F=oe(),I=y(!0),L=y(!1),R=y(null);v(()=>(I.current=!0,()=>{I.current=!1,R.current!==null&&(clearTimeout(R.current),R.current=null)}),[]);let z=s(D.brand),B=m(D.brand),V=u(D.brand),H=se(()=>new Date,[]),le=p(D.pan,D.brand),U=ae(D.exp,H),W=ie(D.cvc,D.brand),G=le&&U&&W,K=D.touchedPan?re(D.pan,D.brand):null,q=D.touchedExp?f(D.exp,H):null,J=D.touchedCvc?d(D.cvc,D.brand):null;function ue(){return D.submitError?D.submitError:K===`incomplete`?T({id:`SMl3YV`,message:`Card number is incomplete`}):K===`invalid`?T({id:`meq3YR`,message:`Card number is invalid`}):q===`incomplete`?T({id:`YruUmm`,message:`Expiry date is incomplete`}):q===`expired`?T({id:`yMg5R0`,message:`Card has expired`}):q===`invalid`?T({id:`DO0IYK`,message:`Expiry date is invalid`}):J===`incomplete`?T({id:`64M0UA`,message:`Security code is incomplete`}):null}let Y=ue(),X=y(!1);v(()=>{let e=p(D.pan,D.brand),t=!X.current&&e;X.current=e,t&&(typeof document>`u`||document.activeElement===A.current&&j.current?.focus())},[D.pan,D.brand]);let Z=y(0);v(()=>{let e=c(D.exp),t=Z.current<4&&e===4;Z.current=e,t&&(typeof document>`u`||document.activeElement===j.current&&M.current?.focus())},[D.exp]);let de=async e=>{if(e.preventDefault(),L.current||!G||D.submitting||D.submitted||D.submitError!==null)return;L.current=!0,O({type:`submit-start`});let t={pan:D.pan.replace(/\s/g,``),exp:D.exp,cvc:D.cvc,brand:D.brand},n=k.current.tokenizeCard??ee,r;try{r=await n(t)}catch(e){r={ok:!1,reason:e instanceof Error?e.message:`Tokenization failed`}}if(!I.current){L.current=!1;return}r.ok?(O({type:`submit-success`}),R.current=setTimeout(()=>{R.current=null,I.current&&(L.current=!1,O({type:`submit-reset`}))},ne)):(L.current=!1,O({type:`submit-error`,reason:r.reason}))},Q=D.submitting||D.submitted,fe=w||!G||D.submitting||D.submitted||D.submitError!==null;function pe(){return D.submitError?null:K?`pan`:q?`exp`:J?`cvc`:null}let $=pe(),me=$===`pan`?F:void 0,he=$===`exp`?F:void 0,ge=$===`cvc`?F:void 0;return x(`form`,{onSubmit:de,autoComplete:`off`,"data-stridge-slot":o.cardForm,...S.props(_.form),children:[x(`div`,{...S.props(_.row,!!Y&&_.rowError),children:[b(`span`,{tabIndex:-1,"aria-hidden":`true`,...S.props(_.brandSlot),children:b(z,{...S.props(_.brandIcon)})}),b(`input`,{ref:A,type:`text`,autoComplete:`off`,inputMode:`numeric`,maxLength:B,placeholder:`1234 5678 9012 3456`,"aria-label":T({id:`xHIEQ5`,message:`Card number`}),"aria-invalid":K?!0:void 0,"aria-describedby":me,value:D.pan,disabled:Q,onChange:e=>O({type:`pan-change`,raw:e.target.value}),onBlur:()=>O({type:`pan-blur`}),onKeyDown:e=>l(e,j,N),"data-stridge-slot":o.cardPan,...S.props(_.inputBase,_.panInput)}),b(`input`,{ref:j,type:`text`,autoComplete:`off`,inputMode:`numeric`,maxLength:5,placeholder:`MM/YY`,"aria-label":T({id:`bGtkfz`,message:`Card expiration`}),"aria-invalid":q?!0:void 0,"aria-describedby":he,value:D.exp,disabled:Q,onChange:e=>O({type:`exp-change`,raw:e.target.value}),onBlur:()=>O({type:`exp-blur`}),onKeyDown:e=>l(e,M,A),"data-stridge-slot":o.cardExp,...S.props(_.inputBase,_.expInput)}),b(`input`,{ref:M,type:`text`,autoComplete:`off`,inputMode:`numeric`,maxLength:V,placeholder:`CVC`,"aria-label":T({id:`wLmRnI`,message:`Security code`}),"aria-invalid":J?!0:void 0,"aria-describedby":ge,value:D.cvc,disabled:Q,onChange:e=>O({type:`cvc-change`,raw:e.target.value}),onBlur:()=>O({type:`cvc-blur`}),onKeyDown:e=>l(e,P,j),"data-stridge-slot":o.cardCvc,...S.props(_.inputBase,_.cvcInput)})]}),Y?b(`span`,{id:F,role:`status`,"aria-live":`polite`,...S.props(_.errorText),children:Y}):null,D.submitted?b(`span`,{role:`status`,...S.props(_.successText),children:b(t,{id:`XFvFyp`,message:`Card details submitted`})}):null,b(a,{type:`submit`,size:`cta`,disabled:fe,"aria-label":T({id:`I2Iug_`,message:`Pay {amountFormatted} securely`,values:{amountFormatted:E}}),"data-stridge-slot":o.cta,...S.props(_.cta),children:b(te.span,{size:`callout`,fontWeight:`semibold`,leading:`tight`,color:`inherit`,children:b(t,{id:`I2Iug_`,message:`Pay {amountFormatted} securely`,values:{amountFormatted:E}})})})]})}export{C as CardInputRow};

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

@@ -0,0 +1 @@
+function e(e){return e.replace(/\D/g,``).length}function t(e,t,n){if(e.key===`Tab`){let r=e.shiftKey?n.current:t.current;if(!r)return;e.preventDefault(),r.focus();return}if(e.shiftKey)return;let r=e.currentTarget;if(r.selectionStart===r.selectionEnd){if(e.key===`ArrowRight`){if(r.selectionStart!==r.value.length)return;let n=t.current;if(!n)return;e.preventDefault(),n.focus(),n.setSelectionRange(0,0);return}if(e.key===`ArrowLeft`){if(r.selectionStart!==0)return;let t=n.current;if(!t)return;e.preventDefault(),t.focus();let i=t.value.length;t.setSelectionRange(i,i)}}}export{e as expDigitCount,t as handleSegmentedKey};

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

@@ -0,0 +1 @@
+import{assertNever as e}from"../../../../../../shared/utils/assertNever.js";import{detectBrand as t,formatCvc as n,formatExp as r,formatPan as i}from"./cardFormat.js";const a={pan:``,exp:``,cvc:``,brand:`unknown`,touchedPan:!1,touchedExp:!1,touchedCvc:!1,submitting:!1,submitted:!1,submitError:null};function o(a,o){if(o.type===`pan-change`){let e=t(o.raw),r=e===a.brand?a.cvc:n(a.cvc,e);return{...a,pan:i(o.raw,e),brand:e,cvc:r,submitError:null}}return o.type===`exp-change`?{...a,exp:r(o.raw),submitError:null}:o.type===`cvc-change`?{...a,cvc:n(o.raw,a.brand),submitError:null}:o.type===`pan-blur`?{...a,touchedPan:!0}:o.type===`exp-blur`?{...a,touchedExp:!0}:o.type===`cvc-blur`?{...a,touchedCvc:!0}:o.type===`submit-start`?{...a,submitting:!0,submitError:null}:o.type===`submit-success`?{...a,submitting:!1,submitted:!0}:o.type===`submit-error`?{...a,submitting:!1,submitError:o.reason}:o.type===`submit-reset`?{...a,submitted:!1}:e(o)}export{o as cardInputRowReducer,a as initialCardInputRowState};

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

@@ -0,0 +1 @@
+const e={form:{"CardInputRow__styles.form":`CardInputRow__styles.form`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x2blr79`,"margin-kogj98":`x1ghz6dp`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:15`},row:{"CardInputRow__styles.row":`CardInputRow__styles.row`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x1a6yh9e`,"paddingBlock-k8WAf4":`x1yowcxs`,"paddingInline-kg3NbH":`x1fk34n2`,"backgroundColor-kWkggS":`x407w7c`,"borderColor-kVAM5u":`x1bue7yx`,"borderStyle-ksu8eU":`x1y0btm7`,"borderWidth-kMzoRj":`xmkeg23`,"borderRadius-kaIpWk":`x13pkpm2`,"transitionProperty-k1ekBW":`xshfolx`,"transitionDuration-kIyJzY":`x1vhb3u9`,"transitionTimingFunction-kAMwcw":`x9lcvmn`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:21`},rowError:{"CardInputRow__styles.rowError":`CardInputRow__styles.rowError`,"borderColor-kVAM5u":`x16691aj`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:37`},brandSlot:{"CardInputRow__styles.brandSlot":`CardInputRow__styles.brandSlot`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x6s0dn4`,"justifyContent-kjj79g":`xl56j7k`,"width-kzqmXN":`x1td3qas`,"height-kZKoxP":`x1qx5ct2`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xi96bwj`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:40`},brandIcon:{"CardInputRow__styles.brandIcon":`CardInputRow__styles.brandIcon`,"width-kzqmXN":`xh8yej3`,"height-kZKoxP":`x5yr21d`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:49`},inputBase:{"CardInputRow__styles.inputBase":`CardInputRow__styles.inputBase`,"appearance-kysU6D":`xjyslct`,"backgroundColor-kWkggS":`xjbqb8w`,"borderWidth-kMzoRj":`xc342km`,"outlineStyle-k3XXqK":`x1t137rt`,"padding-kmVPX3":`x1717udv`,"margin-kogj98":`x1ghz6dp`,"color-kMwMTN":`xzn0pkc`,"caretColor-knGrYV":`xv247kb`,"fontFamily-kMv6JI":`xlaww2m`,"fontSize-kGuDYH":`x14qa7mu`,"fontWeight-k63SB2":`xi0sa8g`,"lineHeight-kLWn49":`x1u7k74`,"fontVariantNumeric-kcqcaj":`xss6m8b`,"::placeholder_color-k8Qsv1":`x16nik3i`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:53`},panInput:{"CardInputRow__styles.panInput":`CardInputRow__styles.panInput`,"flexGrow-kzQI83":`x1iyjqo2`,"minWidth-k7Eaqz":`xeuugli`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:71`},expInput:{"CardInputRow__styles.expInput":`CardInputRow__styles.expInput`,"width-kzqmXN":`xig3uv9`,"flexShrink-kmuXW":`x2lah0s`,"textAlign-k9WMMc":`x2b8uid`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:75`},cvcInput:{"CardInputRow__styles.cvcInput":`CardInputRow__styles.cvcInput`,"width-kzqmXN":`x1bu4hv2`,"flexShrink-kmuXW":`x2lah0s`,"textAlign-k9WMMc":`x2b8uid`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:80`},errorText:{"CardInputRow__styles.errorText":`CardInputRow__styles.errorText`,"display-k1xSpc":`x1lliihq`,"fontSize-kGuDYH":`x1oae1zf`,"color-kMwMTN":`xreodjm`,"margin-kogj98":`x1ghz6dp`,"paddingInlineStart-kZCmMZ":`x1qntkwk`,"lineHeight-kLWn49":`x1u7k74`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:85`},successText:{"CardInputRow__styles.successText":`CardInputRow__styles.successText`,"display-k1xSpc":`x1lliihq`,"fontSize-kGuDYH":`x1oae1zf`,"color-kMwMTN":`xwiqrka`,"margin-kogj98":`x1ghz6dp`,"paddingInlineStart-kZCmMZ":`x1qntkwk`,"lineHeight-kLWn49":`x1u7k74`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:93`},cta:{"CardInputRow__styles.cta":`CardInputRow__styles.cta`,"alignSelf-kSGwAc":`xkh2ocl`,"borderWidth-kMzoRj":`xc342km`,"cursor-kkrTdU":`x1ypdohk`,$$css:`@stridge/kit:src/flows/deposit/widgets/cash-confirm/compound/components/CardInputRow.styles.ts:101`}};export{e as styles};

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

@@ -0,0 +1,16 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/cash-confirm/compound/components/GooglePayBody.d.ts
+/**
+ * Google-Pay confirm body. Loading paints a `TAP TO PAY` label above a 44-tall pill-radius
+ * skeleton in place of the button. Ready replaces the skeleton with a kit-tokened pill carrying
+ * the Google Pay icon + "Buy with Google Pay" lockup, followed by a "Confirm in your Google
+ * Wallet" helper below. Click is a no-op stub — no `PaymentRequest` SDK negotiation, no payment
+ * intent; a real merchant integration will replace this surface.
+ *
+ * Shares the `[BodyLabel] → [action] → [helper below]` rhythm with `CardConfirmBody` and
+ * `ApplePayConfirmBody` so the three per-method bodies read in lockstep.
+ */
+declare function CashConfirmGooglePayBody(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CashConfirmGooglePayBody };

package/dist/flows/deposit/widgets/cash-confirm/compound/components/GooglePayBody.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{GooglePayIcon as n}from"../../../../../../shared/icons/GooglePayIcon.js";import"../../../../../../icons/index.js";import{Skeleton as r}from"../../../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../../../shared/ui/Skeleton/index.js";import{text as i}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{CASH_CONFIRM_SLOTS as a}from"../CashConfirm.slots.js";import{styles as o}from"../CashConfirm.styles.js";import{cashConfirmDimensions as s}from"../cashConfirmDimensions.js";import{useCashConfirmContext as c}from"../context.js";import{BodyLabel as l}from"./BodyLabel.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";function p(){let{_:p}=t(),{phase:m}=c(`CashConfirm.GooglePayBody`),h=m.kind===`loading`,g=()=>{};return d(`div`,{"data-stridge-slot":a.methodBody,...f.props(o.methodBody),children:[u(l,{children:u(e,{id:`6ja7nr`,message:`Tap to pay`})}),h?u(r,{width:`100%`,height:s.ctaHeight,radius:s.googlePayPillRadius}):d(`button`,{type:`button`,onClick:g,"aria-label":p({id:`Qdn2XH`,message:`Buy with Google Pay`}),"data-stridge-slot":a.googlePayButton,...f.props(o.googlePayButton),children:[u(n,{"aria-hidden":!0,...f.props(o.googlePayIcon)}),u(i.span,{size:`sm`,fontWeight:`semibold`,leading:`tight`,color:`inherit`,children:u(e,{id:`Qdn2XH`,message:`Buy with Google Pay`})})]}),u(i.p,{size:`sm`,leading:`tight`,color:`subdued`,...f.props(o.bodyHint),children:u(e,{id:`t-aixw`,message:`Confirm in your Google Wallet`})})]})}export{p as CashConfirmGooglePayBody};

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/confirm-deposit/ConfirmDeposit.d.ts

@@ -1,8 +1,25 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { ConfirmTransferBodyProps } from "../../../../shared/widgets/confirm-transfer/compound/types.js";
+import { ConfirmTransferAmounts } from "../../../../shared/widgets/confirm-transfer/compound/components/Amounts.js";
+import { ConfirmTransferBreakdown } from "../../../../shared/widgets/confirm-transfer/compound/components/Breakdown.js";
+import { ConfirmTransferDisclaimer } from "../../../../shared/widgets/confirm-transfer/compound/components/Disclaimer.js";
+import { ConfirmTransferFooter } from "../../../../shared/widgets/confirm-transfer/compound/components/Footer.js";
+import { ConfirmTransferHeader } from "../../../../shared/widgets/confirm-transfer/compound/components/Header.js";
+import { ConfirmTransferHero } from "../../../../shared/widgets/confirm-transfer/compound/components/Hero.js";
+import { ConfirmTransferMeta } from "../../../../shared/widgets/confirm-transfer/compound/components/Meta.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.d.ts
+interface ConfirmDepositOwnProps {
+  /**
+   * Optional custom composition. When omitted, the canonical default composition renders —
+   * `<Header />` + `<Body>` containing `<Hero />` `<Meta />` `<Amounts />` `<Breakdown />`
+   * `<Disclaimer />` + `<Footer />`. Pass children to interleave your own elements between
+   * compound parts, drop parts you don't want, or replace the composition entirely.
+   */
+  children?: ReactNode;
+}
 /**
  * Orchestrated `ConfirmDeposit` widget. Reads the driver's `quote` entity for the transfer
  * payload + breakdown + hero amount, the driver's `brand` entity for the title brand, the FSM's
@@ -14,7 +31,10 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * USD figure (`amount × asset.priceUsd`) so the user doesn't see `$0` flash before the
  * round-trip completes.
  */
-declare function ConfirmDeposit(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+declare function ConfirmDeposit({
+  children,
+  ...props
+}: ComponentProps<"div"> & ConfirmDepositOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function ConfirmDepositDialog({
   open,
   defaultOpen,
@@ -23,9 +43,22 @@ declare function ConfirmDepositDialog({
   ...rootProps
 }: ConfirmDeposit.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace ConfirmDeposit {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & ConfirmDepositOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & ConfirmDepositOwnProps;
   const Dialog: typeof ConfirmDepositDialog;
+  /**
+   * Compound sub-parts exposed off the orchestrated widget so consumers can compose without
+   * importing the headless compound separately. Identity-equal to the parts on
+   * {@link ConfirmTransfer} from `@stridge/kit/deposit/compound`.
+   */
+  const Header: typeof ConfirmTransferHeader;
+  const Body: (props: ConfirmTransferBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const Hero: typeof ConfirmTransferHero;
+  const Meta: typeof ConfirmTransferMeta;
+  const Amounts: typeof ConfirmTransferAmounts;
+  const Breakdown: typeof ConfirmTransferBreakdown;
+  const Disclaimer: typeof ConfirmTransferDisclaimer;
+  const Footer: typeof ConfirmTransferFooter;
 }
 //#endregion
 export { ConfirmDeposit };

package/dist/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useKitI18n as t}from"../../../../shared/i18n/useKitI18n.js";import{useLingui as n}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as r,useDepositEffectiveState as i,useDepositState as a}from"../../orchestrator/controller.js";import{formatDurationCoarse as o}from"../../../../shared/format/formatDurationCoarse.js";import{formatUsd as s}from"../../../../shared/format/formatUsd.js";import{DialogShell as c}from"../../../../shared/dialog/DialogShell.js";import{ConfirmTransfer as l}from"../../../../shared/widgets/confirm-transfer/compound/ConfirmTransfer.js";import"../../../../shared/widgets/confirm-transfer/compound/index.js";import{useQuoteCountdown as u}from"../../../../shared/quote/useQuoteCountdown.js";import"../../../../shared/quote/index.js";import{jsx as d,jsxs as f}from"react/jsx-runtime";function p(o){let c=e(),p=i(),g=a(),{confirmDeposit:v,back:y}=r(),{_:b}=n(),x=t(),S=c.quote,C=p.name===`confirmDeposit`?p.ctx.phase:void 0,w=c.target,T=c.wallet,E=g.name===`confirmDeposit`&&g.ctx.phase.kind===`ready`,D=u({expiresAt:C?.kind===`ready`?C.quoteExpiresAt:void 0,enabled:E});if(!C)return null;let O=C.kind===`loading`||C.kind===`regenerating`,k=h(c,w,T,x),A=_(c,{routeLabel:b({id:`rT8e1f`,message:`Route`}),networkCostLabel:b({id:`bZnukT`,message:`Network cost`}),priceImpactLabel:b({id:`kH6wUX`,message:`Price impact`}),maxSlippageLabel:b({id:`SZRUQ4`,message:`Max slippage`})}),j=`$0.00`;if(S.status===`ready`||S.status===`stale`)j=S.payload.heroAmountUsd.formatted;else if(g.name===`confirmDeposit`){let e=g.ctx.asset,t=g.ctx.amount,n=e?.priceUsd;j=s(typeof n==`number`&&Number.isFinite(n)&&n>0?t*n:t,x)}let M=S.status===`ready`||S.status===`stale`?S.payload.quoteTotalSeconds:30,N=D,P=m(C),F=C.kind===`failed`?C.failure:void 0,I=C.kind===`regenerating`?C.notice:void 0,L=w.status===`ready`||w.status===`stale`?w.payload:void 0,R=c.brand.status===`ready`||c.brand.status===`stale`?c.brand.payload:void 0,z=L&&R?.name?b({id:`zbtijb`,message:`Deposit {0} to {1}`,values:{0:L.symbol,1:R.name}}):void 0;return f(l,{...o,transfer:k,breakdown:A,heroAmountUsd:j,loading:O,phase:P,...I?{notice:I}:{},...F?{error:{message:F.reason,...F.code?{code:F.code}:{}}}:{},...N===void 0?{}:{quoteSeconds:N},quoteTotalSeconds:M,...z?{headerTitle:z}:{},onBack:y,onConfirm:v,children:[d(l.Header,{}),f(l.Body,{children:[d(l.Hero,{}),d(l.Meta,{}),d(l.Amounts,{}),d(l.Breakdown,{}),d(l.Disclaimer,{})]}),d(l.Footer,{})]})}function m(e){switch(e.kind){case`loading`:return`loading`;case`ready`:return`ready`;case`regenerating`:return`regenerating`;case`submitting`:return`submitting`;case`failed`:return`error`}}function h(e,t,n,r){let i=e.quote,a=i.status===`ready`||i.status===`stale`?i.payload:void 0,s=t.status===`ready`||t.status===`stale`?t.payload:void 0,c=n.status===`ready`||n.status===`stale`?n.payload:void 0,l=e.brand.status===`ready`||e.brand.status===`stale`?e.brand.payload:void 0,u=a?.sendAsset,d=a?.receiveAsset??s,f=l?.name?`${l.name} Account`:`Account`,p=a?.etaSeconds===void 0?`—`:o(a.etaSeconds*1e3,r);return{sourceLabel:c?`Wallet (${c.address.formatted})`:`Wallet`,destinationLabel:f,eta:p,sendAmount:a?a.sendAmount.formatted:`0`,sendToken:u?g(u):{symbol:`—`},receiveAmount:a?a.receiveAmount.formatted:`0`,receiveToken:d?g(d):{symbol:s?.symbol??`—`}}}function g(e){return{symbol:e.symbol,...e.chainId===void 0?{}:{chainId:e.chainId},...e.address?{address:e.address}:{},...e.isNative===void 0?{}:{isNative:e.isNative},...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{}}}function _(e,t){let n=e.quote,r=n.status===`ready`||n.status===`stale`?n.payload:void 0;if(!r?.breakdown)return{};let i=r.breakdown,a={};return i.selectedRoute&&(a.selectedRoute={label:t.routeLabel,value:i.selectedRoute.label}),i.networkCost&&(a.networkCost={label:t.networkCostLabel,valueUsd:i.networkCost.formatted}),i.priceImpact&&(a.priceImpact={label:t.priceImpactLabel,valuePercent:i.priceImpact.formatted}),i.maxSlippage&&(a.maxSlippage={label:t.maxSlippageLabel,valuePercent:i.maxSlippage.value.formatted,auto:i.maxSlippage.auto}),a}function v({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return d(c,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:d(p,{...i})})}(function(e){e.Dialog=v})(p||={});export{p as ConfirmDeposit};
+"use client";import{useKitI18n as e}from"../../../../shared/i18n/useKitI18n.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,useDepositState as a}from"../../orchestrator/controller.js";import{formatDurationCoarse as o}from"../../../../shared/format/formatDurationCoarse.js";import{formatUsd as s}from"../../../../shared/format/formatUsd.js";import{useKitEmitter as c}from"../../../../events/emit/useKitEmitter.js";import"../../../../events/emit/index.js";import{DialogShell as l}from"../../../../shared/dialog/DialogShell.js";import{ConfirmTransfer as u}from"../../../../shared/widgets/confirm-transfer/compound/ConfirmTransfer.js";import"../../../../shared/widgets/confirm-transfer/compound/index.js";import{useQuoteCountdown as d}from"../../../../shared/quote/useQuoteCountdown.js";import"../../../../shared/quote/index.js";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";const h=m(f,{children:[p(u.Header,{}),m(u.Body,{children:[p(u.Hero,{}),p(u.Meta,{}),p(u.Amounts,{}),p(u.Breakdown,{}),p(u.Disclaimer,{})]}),p(u.Footer,{})]});function g({children:o,...l}){let f=n(),m=i(),g=a(),{confirmDeposit:y,back:x}=r(),{_:S}=t(),C=e(),w=c(),T=()=>{w({type:`deposit.confirm.clicked`,flow:`deposit`,tier:`ui`,payload:{}}),y()},E=f.quote,D=m.name===`confirmDeposit`?m.ctx.phase:void 0,O=f.target,k=f.wallet,A=g.name===`confirmDeposit`&&g.ctx.phase.kind===`ready`,j=d({expiresAt:D?.kind===`ready`?D.quoteExpiresAt:void 0,enabled:A});if(!D)return null;let M=D.kind===`loading`||D.kind===`regenerating`,N=v(f,O,k,C),P=b(f,{routeLabel:S({id:`rT8e1f`,message:`Route`}),networkCostLabel:S({id:`bZnukT`,message:`Network cost`}),priceImpactLabel:S({id:`kH6wUX`,message:`Price impact`}),maxSlippageLabel:S({id:`SZRUQ4`,message:`Max slippage`})}),F=`$0.00`;if(E.status===`ready`||E.status===`stale`)F=E.payload.heroAmountUsd.formatted;else if(g.name===`confirmDeposit`){let e=g.ctx.asset,t=g.ctx.amount,n=e?.priceUsd;F=s(typeof n==`number`&&Number.isFinite(n)&&n>0?t*n:t,C)}let I=E.status===`ready`||E.status===`stale`?E.payload.quoteTotalSeconds:30,L=j,R=_(D),z=D.kind===`failed`?D.failure:void 0,B=D.kind===`regenerating`?D.notice:void 0,V=O.status===`ready`||O.status===`stale`?O.payload:void 0,H=f.brand.status===`ready`||f.brand.status===`stale`?f.brand.payload:void 0,U=V&&H?.name?S({id:`zbtijb`,message:`Deposit {0} to {1}`,values:{0:V.symbol,1:H.name}}):void 0;return p(u,{...l,transfer:N,breakdown:P,heroAmountUsd:F,loading:M,phase:R,...B?{notice:B}:{},...z?{error:{message:z.reason,...z.code?{code:z.code}:{}}}:{},...L===void 0?{}:{quoteSeconds:L},quoteTotalSeconds:I,...U?{headerTitle:U}:{},onBack:x,onConfirm:T,children:o??h})}function _(e){switch(e.kind){case`loading`:return`loading`;case`ready`:return`ready`;case`regenerating`:return`regenerating`;case`submitting`:return`submitting`;case`failed`:return`error`}}function v(e,t,n,r){let i=e.quote,a=i.status===`ready`||i.status===`stale`?i.payload:void 0,s=t.status===`ready`||t.status===`stale`?t.payload:void 0,c=n.status===`ready`||n.status===`stale`?n.payload:void 0,l=e.brand.status===`ready`||e.brand.status===`stale`?e.brand.payload:void 0,u=a?.sendAsset,d=a?.receiveAsset??s,f=l?.name?`${l.name} Account`:`Account`,p=a?.etaSeconds===void 0?`—`:o(a.etaSeconds*1e3,r);return{sourceLabel:c?`Wallet (${c.address.formatted})`:`Wallet`,destinationLabel:f,eta:p,sendAmount:a?a.sendAmount.formatted:`0`,sendToken:u?y(u):{symbol:`—`},receiveAmount:a?a.receiveAmount.formatted:`0`,receiveToken:d?y(d):{symbol:s?.symbol??`—`}}}function y(e){return{symbol:e.symbol,...e.chainId===void 0?{}:{chainId:e.chainId},...e.address?{address:e.address}:{},...e.isNative===void 0?{}:{isNative:e.isNative},...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{}}}function b(e,t){let n=e.quote,r=n.status===`ready`||n.status===`stale`?n.payload:void 0;if(!r?.breakdown)return{};let i=r.breakdown,a={};return i.selectedRoute&&(a.selectedRoute={label:t.routeLabel,value:i.selectedRoute.label}),i.networkCost&&(a.networkCost={label:t.networkCostLabel,valueUsd:i.networkCost.formatted}),i.priceImpact&&(a.priceImpact={label:t.priceImpactLabel,valuePercent:i.priceImpact.formatted}),i.maxSlippage&&(a.maxSlippage={label:t.maxSlippageLabel,valuePercent:i.maxSlippage.value.formatted,auto:i.maxSlippage.auto}),a}function x({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return p(l,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:p(g,{...i})})}(function(e){e.Dialog=x,e.Header=u.Header,e.Body=u.Body,e.Hero=u.Hero,e.Meta=u.Meta,e.Amounts=u.Amounts,e.Breakdown=u.Breakdown,e.Disclaimer=u.Disclaimer,e.Footer=u.Footer})(g||={});export{g as ConfirmDeposit};

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

@@ -1,5 +1,14 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+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";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/deposit/Deposit.d.ts
@@ -13,7 +22,19 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * bar while `wallet.balanceTotalUsd` resolves, and the Transfer Crypto tile's chain stack is
  * driven by whatever rows the driver has surfaced so far.
  */
-declare function Deposit(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface DepositOwnProps {
+  /**
+   * Optional custom composition. When omitted, the canonical default composition renders —
+   * `<Header />` + `<Body>` containing `<Methods />`. Pass children to interleave your own
+   * elements between compound parts, drop parts you don't want, or replace the composition
+   * entirely.
+   */
+  children?: ReactNode;
+}
+declare function Deposit({
+  children,
+  ...props
+}: ComponentProps<"div"> & DepositOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function DepositDialog({
   open,
   defaultOpen,
@@ -22,9 +43,23 @@ declare function DepositDialog({
   ...rootProps
 }: Deposit.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Deposit {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & DepositOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & DepositOwnProps;
   const Dialog: typeof DepositDialog;
+  /**
+   * Compound sub-parts aliased on the orchestrated widget so consumers can compose without
+   * importing the headless compound separately. Identity-equal to the parts on the compound
+   * exported from `@stridge/kit/deposit/compound`.
+   */
+  const Header: typeof DepositHeader;
+  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{useDepositSnapshot as e}from"../../driver/context.js";import{useLingui as t}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as n,useDepositEffectiveState as r}from"../../orchestrator/controller.js";import{QrCodeIcon as i}from"../../../../shared/icons/QrCodeIcon.js";import{WalletIcon as a}from"../../../../shared/icons/WalletIcon.js";import"../../../../icons/index.js";import{DialogShell as o}from"../../../../shared/dialog/DialogShell.js";import{Image as s}from"../../../../shared/ui/Image/Image.js";import{Skeleton as c}from"../../../../shared/ui/Skeleton/Skeleton.js";import"../../../../shared/ui/Skeleton/index.js";import{TokenLogo as l}from"../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../shared/ui/TokenLogo/index.js";import"../../../../ui/index.js";import{Deposit as u}from"./compound/Deposit.js";import"./compound/index.js";import{useMemo as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={width:18,height:18,"aria-hidden":!0};function h(o){let s=e(),l=r().name,{selectMethod:h}=n(),{_}=t(),v=s.wallet,y=v.status===`ready`||v.status===`stale`?v.payload:void 0,b=s.brand,x=b.status===`ready`||b.status===`stale`?b.payload:void 0,S=s.addresses,C=S.status===`ready`||S.status===`stale`?S.payload:[],w=s.balances.status===`error`,T=!!s.brand,E=x?.name?_({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:x.name}}):void 0,D=d(()=>g(C),[C]),O=d(()=>{let e=[{id:`wallet`,title:_({id:`sb9Y58`,message:`Wallet`}),icon:f(a,{...m}),...y?{titleAdornment:y.address.formatted}:{},meta:y?.balanceTotalUsd?.formatted?y.balanceTotalUsd.formatted:w?void 0:f(c,{width:56,height:12}),recommended:!0,onSelect:()=>h(`wallet`)}];return T&&e.push({id:`transfer`,title:_({id:`3dqPLT`,message:`Transfer Crypto`}),icon:f(i,{...m}),meta:[_({id:`qtoOYG`,message:`No limit`}),_({id:`D79cZK`,message:`Instant`})],...D?{trailing:D}:{},onSelect:()=>h(`transfer`)}),e},[y,w,T,D,h,_]);return l===`deposit`?p(u,{...o,...E?{title:E}:{},methods:O,children:[f(u.Header,{}),f(u.Body,{children:f(u.Methods,{})})]}):null}function g(e){if(e.length!==0)return f(s.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>f(l,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function _({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return f(o,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:f(h,{...i})})}(function(e){e.Dialog=_})(h||={});export{h 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{useCashRailUnlocked as r,useDepositActions as i,useDepositEffectiveState as a,useDepositMethodsConfig as o,useEnabledRails as s}from"../../orchestrator/controller.js";import{ApplePayIcon as c}from"../../../../shared/icons/ApplePayIcon.js";import{BitcoinIcon as l}from"../../../../shared/icons/BitcoinIcon.js";import{CardIcon as ee}from"../../../../shared/icons/CardIcon.js";import{CashIcon as u}from"../../../../shared/icons/CashIcon.js";import{GooglePayIcon as d}from"../../../../shared/icons/GooglePayIcon.js";import{QrCodeIcon as te}from"../../../../shared/icons/QrCodeIcon.js";import{WalletIcon as ne}from"../../../../shared/icons/WalletIcon.js";import"../../../../icons/index.js";import{DialogShell as f}from"../../../../shared/dialog/DialogShell.js";import{Image as p}from"../../../../shared/ui/Image/Image.js";import{Skeleton as re}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 ie,jsx as _,jsxs as v}from"react/jsx-runtime";const y={width:18,height:18,"aria-hidden":!0},ae={card:`card`,"apple-pay":`applePay`,"google-pay":`googlePay`},b=`deposit.last-rail`;function x({children:f,...p}){let m=n(),x=a().name,{selectMethod:S,selectCashMethod:C}=i(),w=o(),T=r(),E=e(),{_:D}=t(),O=m.wallet,k=O.status===`ready`||O.status===`stale`?O.payload:void 0,A=k!==void 0,j=m.brand,M=j.status===`ready`||j.status===`stale`?j.payload:void 0,N=m.addresses,P=N.status===`ready`||N.status===`stale`?N.payload:[],F=m.balances.status===`error`,I=!k?.balanceTotalUsd?.formatted&&!F,L=!!m.brand,R=M?.name?D({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:M.name}}):void 0,z=g(()=>oe(P),[P]),B=w?.wallet,V=w?.transfer,H=w?.card,U=w?.applePay,W=w?.googlePay,G=w?.cashRail?.enabled===!0,K=m.cashMethods,q=K?.status,J=q===`ready`||q===`stale`?K?.payload:void 0,Y=T&&G&&J!==void 0,se=g(()=>{let e=!A||I,t=B?.disabled??!1,n=e||t,r=t?B?.disabledHint:void 0,i=(()=>{if(t)return r;if(!A)return D({id:`5AApJw`,message:`Connect a wallet to continue`});if(k?.balanceTotalUsd?.formatted)return k.balanceTotalUsd.formatted;if(!F)return _(re,{width:56,height:12})})(),a=[{id:`wallet`,title:D({id:`sb9Y58`,message:`Wallet`}),icon:_(ne,{...y}),...k&&!t?{titleAdornment:k.address.formatted}:{},...i===void 0?{}:{meta:i},recommended:!0,disabled:n,onSelect:n?void 0:()=>S(`wallet`)}];if(L){let e=V?.disabled??!1,t=e?V?.disabledHint:void 0,n=e?t:[D({id:`qtoOYG`,message:`No limit`}),D({id:`D79cZK`,message:`Instant`})];a.push({id:`transfer`,title:D({id:`3dqPLT`,message:`Transfer Crypto`}),icon:_(te,{...y}),...n===void 0?{}:{meta:n},...z?{trailing:z}:{},disabled:e,onSelect:e?void 0:()=>S(`transfer`)})}return a},[k,F,I,A,L,z,B,V,S,D]),X=g(()=>{let e=(e,n)=>{if(e!==void 0)return e;if(!n)return;let r=[];n.limit?.formatted&&r.push(D({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?D({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:()=>C(ae[t])}};return{card:n(`card`,D({id:`kryGs-`,message:`Card`}),_(ee,{...y}),H,J?.card),applePay:n(`apple-pay`,D({id:`6ws9A3`,message:`Apple Pay`}),_(c,{...y}),U,J?.applePay),googlePay:n(`google-pay`,D({id:`ybKOj4`,message:`Google Pay`}),_(d,{...y}),W,J?.googlePay)}},[H,U,W,J,C,D]),Z=s(g(()=>{let e=[{value:`crypto`,label:D({id:`CS69m9`,message:`Use Crypto`}),icon:_(l,{width:12,height:12,"aria-hidden":!0})}];return Y&&e.push({value:`cash`,label:D({id:`LSs4cd`,message:`Use Cash`}),icon:_(u,{width:12,height:12,"aria-hidden":!0})}),e},[D,Y]));if(x!==`deposit`)return null;let Q={crypto:_(h.Methods,{}),cash:v(h.Methods,{children:[_(h.MethodSection,{label:D({id:`y1ypMV`,message:`Most popular`}),children:_(h.Method,{...X.card})}),v(h.MethodSection,{label:D({id:`xOUCt3`,message:`Other options`}),children:[_(h.Method,{...X.applePay}),_(h.Method,{...X.googlePay})]})]})},[$]=Z,ce=E?.get(b)??null,le=Z.find(e=>e.value===ce)?.value??$?.value,ue=v(ie,{children:[_(h.Header,{}),_(h.Body,{children:Z.length>=2?_(h.RailPicker,{defaultValue:le,rails:Z,onValueChange:e=>E?.set(b,e),children:Z.map(e=>_(h.Rail,{value:e.value,children:Q[e.value]},e.value))}):Q[$?.value??`crypto`]})]});return _(h,{...p,...R?{title:R}:{},methods:se,children:f??ue})}function oe(e){if(e.length!==0)return _(p.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>_(m,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function S({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return _(f,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:_(x,{...i})})}(function(e){e.Dialog=S,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})(x||={});export{x as Deposit};

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

@@ -1,10 +1,23 @@
-import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodProps, DepositMethodsProps, DepositProps } from "./types.js";
+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, 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";
 
 //#region src/flows/deposit/widgets/deposit/compound/Deposit.d.ts
+interface DepositStepProps {
+  /** Matches against the deposit FSM's effective state name. */
+  name: DepositStateName;
+  children: ReactNode;
+}
 /**
  * Root of the Deposit compound. Renders the modal-frame card surface
  * and provides shared state to every compound part rendered inside it.
@@ -18,6 +31,8 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * - {@link Deposit.Body}
  * - {@link Deposit.Methods}
  * - {@link Deposit.Method}
+ * - {@link Deposit.Steps}
+ * - {@link Deposit.Step}
  *
  * Dialog form: {@link Deposit.Dialog} pre-composes the widget into a
  * `Dialog.Root + Dialog.Trigger + Dialog.Content` shell — the
@@ -40,12 +55,54 @@ 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;
+  /**
+   * Slot consumed by {@link Deposit.Steps}. `name` is the FSM state to match; the
+   * matched step's `children` are rendered, every other branch is dropped.
+   */
+  const Step: (props: DepositStepProps) => null;
+  /**
+   * Bootstrap-cascade guard. Wraps step content with three gates (wallet-required,
+   * bootstrap-fatal, bootstrap-loading); renders the matching gate panel or children.
+   */
+  const Guards: typeof DepositGuards;
+  /**
+   * Error-boundary part. Wires the kit's `GatewayKitBoundary` with deposit-flow recovery —
+   * `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{Tooltip as n}from"../../../../../shared/ui/Tooltip/Tooltip.js";import"../../../../../shared/ui/Tooltip/index.js";import"../../../../../ui/index.js";import{Frame as r}from"../../../../../shared/dialog/Frame.js";import{DepositContext as i}from"./context.js";import{DEPOSIT_SLOTS as a}from"./Deposit.slots.js";import{styles as o}from"./Deposit.styles.js";import{DepositHeader as s}from"./components/Header.js";import{DepositMethod as c}from"./components/Method.js";import{DepositMethods as l}from"./components/Methods.js";import{useMemo as u}from"react";import{jsx as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";const p=[];function m(e){let{title:t,methodsLabel:s,methods:c=p,children:l}=e,m=u(()=>({title:t,methodsLabel:s,methods:c}),[t,s,c]);return d(i.Provider,{value:m,children:d(n.Provider,{children:d(r,{"data-stridge-slot":a.root,...f.props(o.root),children:l})})})}function h(e){return d(t.Body,{"data-stridge-slot":a.body,...e})}function g({open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:a,...o}){return d(e,{open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:d(m,{...o,children:a})})}(function(e){e.Header=s,e.Body=h,e.Methods=l,e.Method=c,e.Dialog=g})(m||={});export{m 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`},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:28`},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:33`},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:40`},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:45`},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:56`},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:60`},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:74`},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:83`},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:89`},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:95`},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:100`},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:105`},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:112`}};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};