@stridge/kit 0.1.0-alpha.44 → 0.1.0-alpha.46

package/dist/drivers/stridge/internal/pollOnce.js

@@ -1 +1 @@
-async function e(e,t,n,r){try{return await e.gateway.poll(t,{...n?{network_id:n.network_id,to_address:n.to_address,asset_symbol:n.asset_symbol}:{},signal:r})}catch(e){if(r.aborted)throw e;if(e.statusCode===404)return null;throw e}}export{e as pollOnce};
+async function e(e,n,r,i){try{return t((await e.gateway.poll(n,{...r?{network_id:r.network_id,to_address:r.to_address,asset_symbol:r.asset_symbol}:{},signal:i})).udas,r)}catch(e){if(i.aborted)throw e;if(e.statusCode===404)return null;throw e}}function t(e,t){if(e.length===0)return null;if(!t)return e[0]??null;let n=t.to_address.toLowerCase(),r=t.asset_symbol.toUpperCase();return e.find(e=>e.destination.network_id===t.network_id&&(e.destination.asset_symbol??``).toUpperCase()===r&&(e.destination.address??``).toLowerCase()===n)??null}export{e as pollOnce};

package/dist/drivers/stridge-mock/fixtures.d.ts

@@ -1,7 +1,7 @@
 import { SettlementFailureKind } from "../../shared/driver/types.js";
 import { AddressItemPayload, BalanceItemPayload, BrandPayload, QuotePayload, SettlementFailurePayload, SettlementPayload, SettlementPendingPayload, SettlementSuccessPayload, TargetPayload, WalletInfo, WalletPayload } from "../../flows/deposit/driver/payloads.js";
 import { I18n } from "@lingui/core";
-import { DepositAddressDto, GatewayPollResponse, GatewaySettlementDto, GatewayStartResponse, OnchainBalanceResponse, QuoteResponse, SupportedAssetDto, SupportedAssetsResponse } from "@stridge/sdk";
+import { DepositAddressDto, GatewaySettlementDto, GatewayStartResponse, GatewayUdaDto, OnchainBalanceResponse, QuoteResponse, SupportedAssetDto, SupportedAssetsResponse } from "@stridge/sdk";
 
 //#region src/drivers/stridge-mock/fixtures.d.ts
 /**

package/dist/flows/deposit/dialog/DepositDialog.d.ts

@@ -8,9 +8,11 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * bound to the controller's `state.name !== "closed"`, so the dialog appears / disappears
  * automatically as descendants call `useDeposit().open()` / `.close()`.
  *
- * Each widget gates rendering on its own FSM state, so the dialog stacks them and only one
- * renders content per state. Skip the dialog entirely for fully custom UI — render against
- * `useDeposit()` / `useDepositState()` / `useDepositSnapshot()` directly.
+ * The dialog is a pure composition of compound parts — `<Deposit.Boundary>` for crash
+ * recovery, `<Deposit.Guards>` for the wallet-required / bootstrap-fatal / bootstrap-loading
+ * cascade, `<Deposit.Steps>` for FSM-driven screen routing, and `<DepositStatusBanner />` for
+ * the inline settlement banner. Each piece is independently overrideable via the compound
+ * surface; this is the canonical shape integrators can copy verbatim.
  *
  * Lifecycle observability is delivered by the unified event bus exported from
  * `@stridge/kit/events`. The dialog itself takes no `on*` callback props — subscribe via
@@ -37,7 +39,10 @@ declare namespace DepositDialog {
      * the terminal event. The kit does not validate or normalise the shape.
      */
     metadata?: Record<string, unknown>;
-    /** Forwarded to the dialog's internal {@link GatewayKitBoundary} for crash reporting. */
+    /**
+     * Forwarded to the dialog's internal `<Deposit.Boundary>` for crash reporting. The
+     * boundary's `onReset` is wired automatically through `useDeposit().close()`.
+     */
     onError?: (error: Error, errorInfo: ErrorInfo) => void;
   }
 }

package/dist/flows/deposit/dialog/DepositDialog.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../driver/context.js";import{useControllerContext as t}from"../orchestrator/controller.js";import{useDepositEmissions as n}from"../../../events/emit/useDepositEmissions.js";import"../../../events/emit/index.js";import{useIntercomShutdownOnUnmount as r}from"../../../shared/support/useIntercomShutdownOnUnmount.js";import"../../../shared/support/index.js";import{useDepositOwnerContext as i}from"../../../stridge/depositOwner.js";import{Dialog as a}from"../../../shared/ui/Dialog/Dialog.js";import"../../../shared/ui/Dialog/index.js";import{Deposit as o}from"../widgets/deposit/compound/Deposit.js";import"../widgets/deposit/compound/index.js";import{AmountEntry as s}from"../widgets/amount-entry/AmountEntry.js";import"../widgets/amount-entry/index.js";import{AssetPicker as c}from"../widgets/asset-picker/AssetPicker.js";import"../widgets/asset-picker/index.js";import{ConfirmDeposit as l}from"../widgets/confirm-deposit/ConfirmDeposit.js";import"../widgets/confirm-deposit/index.js";import{Deposit as u}from"../widgets/deposit/Deposit.js";import"../widgets/deposit/index.js";import{DepositStatusBanner as d}from"../widgets/deposit-status-banner/DepositStatusBanner.js";import"../widgets/deposit-status-banner/index.js";import{ErrorState as f}from"../widgets/error-state/ErrorState.js";import"../widgets/error-state/index.js";import{ProcessingState as p}from"../widgets/processing-state/ProcessingState.js";import"../widgets/processing-state/index.js";import{SuccessState as m}from"../widgets/success-state/SuccessState.js";import"../widgets/success-state/index.js";import{TransferCrypto as h}from"../widgets/transfer-crypto/TransferCrypto.js";import"../widgets/transfer-crypto/index.js";import{LoadingState as g}from"../../../shared/dialog/LoadingState.js";import{GatewayKitBoundary as _}from"../../../shared/error-handling/components/GatewayKitBoundary.js";import"../../../shared/error-handling/index.js";import{DepositBootstrapErrorState as v}from"./DepositBootstrapErrorState.js";import{WalletRequiredState as y}from"./WalletRequiredState.js";import{jsx as b,jsxs as x}from"react/jsx-runtime";const S=new Set([`deposit`,`assetPicker`,`amountEntry`,`confirmDeposit`,`transferCrypto`]);function C({container:C,metadata:w,onError:T}={}){let{state:E,effectiveState:D,controller:O}=t(),k=e(),A=i(),j=E.name!==`closed`;n({state:E,settlement:k.settlement,quote:k.quote,metadata:w}),r();let M=D,N=A!==null&&!A.resolved&&S.has(M.name),P=!N&&k.target.status===`error`&&S.has(M.name),F=!N&&!P&&(k.target.status===`loading`||k.target.status===`idle`)&&S.has(M.name);return b(a,{open:j,onOpenChange:e=>{e||O.close()},children:b(a.Content,{container:C,children:x(_,{onError:T,onReset:O.close,children:[N?b(y,{}):P?b(v,{}):F?b(g,{slot:`deposit`}):x(o.Steps,{children:[b(o.Step,{name:`deposit`,children:b(u,{})}),b(o.Step,{name:`assetPicker`,children:b(c,{})}),b(o.Step,{name:`amountEntry`,children:b(s,{})}),b(o.Step,{name:`confirmDeposit`,children:b(l,{})}),b(o.Step,{name:`transferCrypto`,children:b(h,{})}),b(o.Step,{name:`processing`,children:b(p,{})}),b(o.Step,{name:`success`,children:b(m,{})}),b(o.Step,{name:`error`,children:b(f,{})})]}),b(d,{})]})})})}export{C as DepositDialog};
+"use client";import{useDepositSnapshot as e}from"../driver/context.js";import{useControllerContext as t}from"../orchestrator/controller.js";import{useDepositEmissions as n}from"../../../events/emit/useDepositEmissions.js";import"../../../events/emit/index.js";import{useIntercomShutdownOnUnmount as r}from"../../../shared/support/useIntercomShutdownOnUnmount.js";import"../../../shared/support/index.js";import{Dialog as i}from"../../../shared/ui/Dialog/Dialog.js";import"../../../shared/ui/Dialog/index.js";import{Deposit as a}from"../widgets/deposit/compound/Deposit.js";import"../widgets/deposit/compound/index.js";import{AmountEntry as o}from"../widgets/amount-entry/AmountEntry.js";import"../widgets/amount-entry/index.js";import{AssetPicker as s}from"../widgets/asset-picker/AssetPicker.js";import"../widgets/asset-picker/index.js";import{ConfirmDeposit as c}from"../widgets/confirm-deposit/ConfirmDeposit.js";import"../widgets/confirm-deposit/index.js";import{Deposit as l}from"../widgets/deposit/Deposit.js";import"../widgets/deposit/index.js";import{DepositStatusBanner as u}from"../widgets/deposit-status-banner/DepositStatusBanner.js";import"../widgets/deposit-status-banner/index.js";import{ErrorState as d}from"../widgets/error-state/ErrorState.js";import"../widgets/error-state/index.js";import{ProcessingState as f}from"../widgets/processing-state/ProcessingState.js";import"../widgets/processing-state/index.js";import{SuccessState as p}from"../widgets/success-state/SuccessState.js";import"../widgets/success-state/index.js";import{TransferCrypto as m}from"../widgets/transfer-crypto/TransferCrypto.js";import"../widgets/transfer-crypto/index.js";import{jsx as h,jsxs as g}from"react/jsx-runtime";function _({container:_,metadata:v,onError:y}={}){let{state:b,controller:x}=t(),S=e(),C=b.name!==`closed`;return n({state:b,settlement:S.settlement,quote:S.quote,metadata:v}),r(),h(i,{open:C,onOpenChange:e=>{e||x.close()},children:h(i.Content,{container:_,children:g(a.Boundary,{...y?{onError:y}:{},children:[h(a.Guards,{children:g(a.Steps,{children:[h(a.Step,{name:`deposit`,children:h(l,{})}),h(a.Step,{name:`assetPicker`,children:h(s,{})}),h(a.Step,{name:`amountEntry`,children:h(o,{})}),h(a.Step,{name:`confirmDeposit`,children:h(c,{})}),h(a.Step,{name:`transferCrypto`,children:h(m,{})}),h(a.Step,{name:`processing`,children:h(f,{})}),h(a.Step,{name:`success`,children:h(p,{})}),h(a.Step,{name:`error`,children:h(d,{})})]})}),h(u,{})]})})})}export{_ as DepositDialog};

package/dist/flows/deposit/driver/types.d.ts

@@ -1,6 +1,6 @@
 import { Entity, SettlementFailureKind, TxRef } from "../../../shared/driver/types.js";
 import { AcceptedAssetPayload, AddressItemPayload, AssetPayload, BalanceItemPayload, BrandPayload, ChainPayload, QuoteBreakdownPayload, QuotePayload, QuoteRoutePayload, SettlementFailurePayload, SettlementPayload, SettlementPendingPayload, SettlementSuccessPayload, SourceWalletPayload, TargetPayload, WalletInfo, WalletPayload } from "./payloads.js";
-import { DepositAddressDto, GatewayPollResponse, GatewaySettlementDto, GatewayStartResponse, OnchainBalanceResponse, QuoteResponse, SupportedAssetDto, SupportedAssetsResponse } from "@stridge/sdk";
+import { DepositAddressDto, GatewaySettlementDto, GatewayStartResponse, GatewayUdaDto, OnchainBalanceResponse, QuoteResponse, SupportedAssetDto, SupportedAssetsResponse } from "@stridge/sdk";
 
 //#region src/flows/deposit/driver/types.d.ts
 /**
@@ -39,7 +39,7 @@ interface DepositSnapshot {
    * the payload (`pending` / `succeeded` / `failed`) drives whether `<ProcessingState>`,
    * `<SuccessState>`, or `<ErrorState>` is shown.
    */
-  settlement: Entity<SettlementPayload, GatewaySettlementDto, GatewayPollResponse>;
+  settlement: Entity<SettlementPayload, GatewaySettlementDto, GatewayUdaDto>;
   /**
    * Connected-wallet identity. `idle` when no wallet is connected; `ready` once the host has
    * supplied an address. The `payload.address.formatted` field is the canonical
@@ -107,7 +107,7 @@ type FetchActiveSettlementInput = Record<string, never>;
 interface SettlementSnapshot {
   payload: SettlementPayload;
   raw: GatewaySettlementDto;
-  response: GatewayPollResponse;
+  response: GatewayUdaDto;
 }
 /**
  * Unified driver contract. A `DepositDriver` is the single host-supplied source of both reactive

package/dist/flows/deposit/widgets/amount-entry/AmountEntry.d.ts

@@ -1,5 +1,12 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { AmountEntryBodyProps } from "../../../../shared/widgets/amount-entry/compound/types.js";
+import { AmountEntryFlow } from "../../../../shared/widgets/amount-entry/compound/components/Flow.js";
+import { AmountEntryFooter } from "../../../../shared/widgets/amount-entry/compound/components/Footer.js";
+import { AmountEntryHeader } from "../../../../shared/widgets/amount-entry/compound/components/Header.js";
+import { AmountEntryHero } from "../../../../shared/widgets/amount-entry/compound/components/Hero/Hero.js";
+import { AmountEntryNotice } from "../../../../shared/widgets/amount-entry/compound/components/Notice.js";
+import { AmountEntryPills } from "../../../../shared/widgets/amount-entry/compound/components/Pills.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/amount-entry/AmountEntry.d.ts
@@ -18,7 +25,20 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * CTA flips to "Update order" and clicking auto-snaps the amount up to the floor. The widget
  * also prefills the entry to the floor on first render so the user starts at a valid amount.
  */
-declare function AmountEntry(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface AmountEntryOwnProps {
+  /**
+   * Optional custom composition. Defaults to `<Header />` + `<Body><Hero /><Pills /><Flow />`
+   * + validation-notice slot `</Body>` + `<Footer />`. Pass children to interleave your own
+   * elements between compound parts. Note — the default composition embeds a runtime-driven
+   * `<NoticeSlot />` that surfaces validation hints (min / max / insufficient-balance); custom
+   * children replace it entirely.
+   */
+  children?: ReactNode;
+}
+declare function AmountEntry({
+  children,
+  ...props
+}: ComponentProps<"div"> & AmountEntryOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function AmountEntryDialog({
   open,
   defaultOpen,
@@ -27,9 +47,16 @@ declare function AmountEntryDialog({
   ...rootProps
 }: AmountEntry.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace AmountEntry {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & AmountEntryOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & AmountEntryOwnProps;
   const Dialog: typeof AmountEntryDialog;
+  const Header: typeof AmountEntryHeader;
+  const Body: (props: AmountEntryBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const Hero: typeof AmountEntryHero;
+  const Pills: typeof AmountEntryPills;
+  const Flow: typeof AmountEntryFlow;
+  const Footer: typeof AmountEntryFooter;
+  const Notice: typeof AmountEntryNotice;
 }
 //#endregion
 export { AmountEntry };

package/dist/flows/deposit/widgets/amount-entry/AmountEntry.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useKitI18n as t}from"../../../../shared/i18n/useKitI18n.js";import{Trans as n}from"../../../../shared/i18n/Trans.js";import{useLingui as r}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as i,useDepositEffectiveState as a}from"../../orchestrator/controller.js";import{formatTokenAmount as o}from"../../../../shared/format/formatTokenAmount.js";import{useKitEmitter as s}from"../../../../events/emit/useKitEmitter.js";import"../../../../events/emit/index.js";import{DialogShell as c}from"../../../../shared/dialog/DialogShell.js";import{text as l}from"../../../../shared/ui/Text/Text.js";import"../../../../shared/ui/Text/index.js";import{AmountEntry as u}from"../../../../shared/widgets/amount-entry/compound/AmountEntry.js";import"../../../../shared/widgets/amount-entry/compound/index.js";import{toAssetDescriptor as d}from"../../../../shared/widgets/asset-descriptor.js";import{effectiveMaxUsd as f,resolveFooterIntent as p}from"./footerIntent.js";import{useEffect as m,useRef as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{AnimatePresence as y,m as b}from"motion/react";const x=[.16,1,.3,1],S={enter:{opacity:0,height:0},center:{opacity:1,height:`auto`,transition:{duration:.22,ease:x}},exit:{opacity:0,height:0,transition:{duration:.18,ease:x}}},C={enter:{opacity:0,filter:`blur(6px)`},center:{opacity:1,filter:`blur(0px)`,transition:{duration:.2,ease:x}},exit:{opacity:0,filter:`blur(6px)`,transition:{duration:.16,ease:x}}},w=[{value:`25`,label:`25%`},{value:`50`,label:`50%`},{value:`75`,label:`75%`},{value:`max`,label:`Max`}];function T(n){let c=e(),l=a(),{confirmAmount:y,back:b}=i(),{_:x}=r(),S=t(),C=c.target,T=C.status===`ready`||C.status===`stale`?C.payload:void 0,O=l.name===`amountEntry`?l.ctx.asset:void 0,k=O?.amountUsd?.value??0,A=T?.minAmountUsd?.value,j=T?.minAmountUsd?.formatted,M=T?.maxAmountUsd?.value,N=T?.maxAmountUsd?.formatted,P=f(k,M),F=O?.priceUsd,[I,L]=g(A??null),[R,z]=g(),B=s(),V=e=>{B({type:`deposit.amount.changed`,flow:`deposit`,tier:`ui`,payload:{raw:e===null?``:String(e),numeric:e}})},H=h(void 0),U=O?`${O.eip155Id??``}:${O.address??``}`:void 0;m(()=>{U&&H.current!==U&&(H.current=U,typeof A==`number`&&(L(A),z(void 0)))},[U,A]);let W=e=>{z(e);let t=e===`max`?1:Number.parseInt(e,10)/100;if(Number.isFinite(t)){let n=P*t;L(n),V(n),e===`max`&&B({type:`deposit.max.clicked`,flow:`deposit`,tier:`ui`,payload:{}})}},G=e=>{L(e),z(void 0),V(e)},K=p({amount:I,...A===void 0?{}:{minAmountUsd:A},...M===void 0?{}:{maxAmountUsd:M},walletBalanceUsd:k}),q=()=>{if(K===`aboveBalance`||K===`aboveCap`){L(P),z(`max`);return}if(K===`belowMin`&&typeof A==`number`){L(A),z(void 0);return}I!==null&&y(F&&F>0?I/F:I)};if(l.name!==`amountEntry`||!O||!T)return null;let J=l.ctx.backTarget===`closed`?void 0:b,Y=d(O)??{symbol:O.symbol},X=d(T)??{symbol:T.symbol},Z=`${o((I??0)/1,S,{maxDecimals:5})} ${T.symbol}`,Q=E(K,{updateOrder:x({id:`bOZXx5`,message:`Update order`}),depositMax:x({id:`9cCjMJ`,message:`Deposit max balance`})});return v(u,{...n,amount:I,sendToken:Y,receiveToken:X,max:P,...A===void 0?{}:{min:A},onAmountChange:G,...J?{onBack:J}:{},subLineAmount:Z,presets:w,...R===void 0?{}:{activePreset:R},onPresetSelect:W,...Q===void 0?{}:{footerLabel:Q},onContinue:q,children:[_(u.Header,{}),v(u.Body,{children:[_(u.Hero,{}),_(u.Pills,{}),_(u.Flow,{}),_(D,{intent:K,formattedCap:N,formattedMin:j})]}),_(u.Footer,{})]})}function E(e,t){if(e===`aboveCap`||e===`belowMin`)return t.updateOrder;if(e===`aboveBalance`)return t.depositMax}function D({intent:e,formattedCap:t,formattedMin:r}){let i=null;return e===`aboveCap`&&t?i={kind:`aboveCap`,node:_(n,{id:`-I_tc5`,message:`Max {formattedCap}`,values:{formattedCap:t}})}:e===`aboveBalance`?i={kind:`aboveBalance`,node:_(n,{id:`znqB4T`,message:`Insufficient balance`})}:e===`belowMin`&&r&&(i={kind:`belowMin`,node:_(n,{id:`3eKjkO`,message:`{formattedMin} minimum deposit`,values:{formattedMin:r}})}),_(y,{initial:!1,children:i?_(b.div,{variants:S,initial:`enter`,animate:`center`,exit:`exit`,style:{overflow:`hidden`},children:_(y,{initial:!1,mode:`wait`,children:_(b.div,{variants:C,initial:`enter`,animate:`center`,exit:`exit`,children:_(l.p,{size:`sm`,color:`subdued`,className:`AmountEntry__noticeStyles.root x2b8uid x1vvogim`,"data-style-src":`@stridge/kit:src/flows/deposit/widgets/amount-entry/AmountEntry.tsx:19`,children:i.node})},i.kind)})},`notice-slot`):null})}function O({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return _(c,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:_(T,{...i})})}(function(e){e.Dialog=O})(T||={});export{T as AmountEntry};
+"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useKitI18n as t}from"../../../../shared/i18n/useKitI18n.js";import{Trans as n}from"../../../../shared/i18n/Trans.js";import{useLingui as r}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as i,useDepositEffectiveState as ee}from"../../orchestrator/controller.js";import{formatTokenAmount as a}from"../../../../shared/format/formatTokenAmount.js";import{useKitEmitter as o}from"../../../../events/emit/useKitEmitter.js";import"../../../../events/emit/index.js";import{DialogShell as s}from"../../../../shared/dialog/DialogShell.js";import{AmountEntry as c}from"../../../../shared/widgets/amount-entry/compound/AmountEntry.js";import"../../../../shared/widgets/amount-entry/compound/index.js";import{toAssetDescriptor as l}from"../../../../shared/widgets/asset-descriptor.js";import{effectiveMaxUsd as u,resolveFooterIntent as d}from"./footerIntent.js";import{useEffect as f,useRef as p,useState as m}from"react";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";const v=[{value:`25`,label:`25%`},{value:`50`,label:`50%`},{value:`75`,label:`75%`},{value:`max`,label:`Max`}];function y({children:n,...s}){let y=e(),S=ee(),{confirmAmount:C,back:w}=i(),{_:T}=r(),E=t(),D=y.target,O=D.status===`ready`||D.status===`stale`?D.payload:void 0,k=S.name===`amountEntry`?S.ctx.asset:void 0,A=k?.amountUsd?.value??0,j=O?.minAmountUsd?.value,M=O?.minAmountUsd?.formatted,N=O?.maxAmountUsd?.value,P=O?.maxAmountUsd?.formatted,F=u(A,N),I=k?.priceUsd,[L,R]=m(j??null),[z,B]=m(),V=o(),H=e=>{V({type:`deposit.amount.changed`,flow:`deposit`,tier:`ui`,payload:{raw:e===null?``:String(e),numeric:e}})},U=p(void 0),W=k?`${k.eip155Id??``}:${k.address??``}`:void 0;f(()=>{W&&U.current!==W&&(U.current=W,typeof j==`number`&&(R(j),B(void 0)))},[W,j]);let G=e=>{B(e);let t=e===`max`?1:Number.parseInt(e,10)/100;if(Number.isFinite(t)){let n=F*t;R(n),H(n),e===`max`&&V({type:`deposit.max.clicked`,flow:`deposit`,tier:`ui`,payload:{}})}},K=e=>{R(e),B(void 0),H(e)},q=d({amount:L,...j===void 0?{}:{minAmountUsd:j},...N===void 0?{}:{maxAmountUsd:N},walletBalanceUsd:A}),J=()=>{if(q===`aboveBalance`||q===`aboveCap`){R(F),B(`max`);return}if(q===`belowMin`&&typeof j==`number`){R(j),B(void 0);return}L!==null&&C(I&&I>0?L/I:L)};if(S.name!==`amountEntry`||!k||!O)return null;let Y=S.ctx.backTarget===`closed`?void 0:w,X=l(k)??{symbol:k.symbol},Z=l(O)??{symbol:O.symbol},Q=`${a((L??0)/1,E,{maxDecimals:5})} ${O.symbol}`,$=b(q,{updateOrder:T({id:`bOZXx5`,message:`Update order`}),depositMax:T({id:`9cCjMJ`,message:`Deposit max balance`})}),te=x(q,P,M);return g(c,{...s,amount:L,sendToken:X,receiveToken:Z,max:F,...j===void 0?{}:{min:j},onAmountChange:K,...Y?{onBack:Y}:{},subLineAmount:Q,presets:v,...z===void 0?{}:{activePreset:z},onPresetSelect:G,...$===void 0?{}:{footerLabel:$},onContinue:J,notice:te,children:n??_(h,{children:[g(c.Header,{}),_(c.Body,{children:[g(c.Hero,{}),g(c.Pills,{}),g(c.Flow,{}),g(c.Notice,{})]}),g(c.Footer,{})]})})}function b(e,t){if(e===`aboveCap`||e===`belowMin`)return t.updateOrder;if(e===`aboveBalance`)return t.depositMax}function x(e,t,r){if(e===`aboveCap`&&t)return g(n,{id:`-I_tc5`,message:`Max {formattedCap}`,values:{formattedCap:t}});if(e===`aboveBalance`)return g(n,{id:`znqB4T`,message:`Insufficient balance`});if(e===`belowMin`&&r)return g(n,{id:`3eKjkO`,message:`{formattedMin} minimum deposit`,values:{formattedMin:r}})}function S({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return g(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:g(y,{...i})})}(function(e){e.Dialog=S,e.Header=c.Header,e.Body=c.Body,e.Hero=c.Hero,e.Pills=c.Pills,e.Flow=c.Flow,e.Footer=c.Footer,e.Notice=c.Notice})(y||={});export{y as AmountEntry};

package/dist/flows/deposit/widgets/asset-picker/AssetPicker.d.ts

@@ -1,5 +1,9 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { AssetPickerBodyProps } from "../../../../shared/widgets/asset-picker/compound/types.js";
+import { AssetPickerFooter } from "../../../../shared/widgets/asset-picker/compound/components/Footer.js";
+import { AssetPickerHeader } from "../../../../shared/widgets/asset-picker/compound/components/Header.js";
+import { AssetPickerList } from "../../../../shared/widgets/asset-picker/compound/components/List.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/asset-picker/AssetPicker.d.ts
@@ -8,7 +12,17 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * entity and the destination header title from `target`. Owns the selected-id state locally and
  * routes the footer Continue through orchestrator's `confirmAsset`.
  */
-declare function AssetPicker(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface AssetPickerOwnProps {
+  /**
+   * Optional custom composition. Defaults to `<Header />` + `<Body><List /></Body>` + `<Footer />`.
+   * Pass children to interleave your own elements between compound parts.
+   */
+  children?: ReactNode;
+}
+declare function AssetPicker({
+  children,
+  ...props
+}: ComponentProps<"div"> & AssetPickerOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function AssetPickerDialog({
   open,
   defaultOpen,
@@ -17,9 +31,13 @@ declare function AssetPickerDialog({
   ...rootProps
 }: AssetPicker.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace AssetPicker {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & AssetPickerOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & AssetPickerOwnProps;
   const Dialog: typeof AssetPickerDialog;
+  const Header: typeof AssetPickerHeader;
+  const Body: (props: AssetPickerBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const List: typeof AssetPickerList;
+  const Footer: typeof AssetPickerFooter;
 }
 //#endregion
 export { AssetPicker };

package/dist/flows/deposit/widgets/asset-picker/AssetPicker.js

@@ -1 +1 @@
-"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useDepositActions as t,useDepositEffectiveState as n}from"../../orchestrator/controller.js";import{DialogShell as r}from"../../../../shared/dialog/DialogShell.js";import{AssetPicker as i}from"../../../../shared/widgets/asset-picker/compound/AssetPicker.js";import"../../../../shared/widgets/asset-picker/compound/index.js";import{useMemo as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(r){let l=e(),f=n(),{confirmAsset:p,back:m}=t(),[h,g]=o(void 0),_=l.balances,v=_.status===`ready`||_.status===`stale`?_.payload:[],y=a(()=>v.map(u),[v]),b=a(()=>(e=>e!==void 0&&y.some(t=>t.id===e&&!t.disabled))(h)?h:y.find(e=>!e.disabled)?.id,[h,y]),x=l.target,S=x.status===`ready`||x.status===`stale`?x.payload:void 0;if(f.name!==`assetPicker`)return null;let C=f.ctx.backTarget===`closed`?void 0:m,w=()=>{if(!b)return;let e=v.find(e=>d(e)===b);e&&p(e)};return c(i,{...r,...S?{token:{symbol:S.symbol}}:{},...b?{selectedId:b}:{},onSelect:g,assets:y,...C?{onBack:C}:{},onContinue:w,children:[s(i.Header,{}),s(i.Body,{children:s(i.List,{})}),s(i.Footer,{})]})}function u(e){let t=d(e),n=`${e.amount.formatted} ${e.symbol}`,r=e.amountUsd?.formatted??`—`;return{id:t,symbol:e.symbol,chain:e.networkName,balance:e.amount.value,balanceFormatted:n,fiatFormatted:r,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.address?{contractAddress:e.address}:{},isNative:e.isNative,...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{},...e.chainLogoUrl?{chainLogoUrl:e.chainLogoUrl}:{},decimals:e.decimals,...e.priceUsd===void 0?{}:{priceUsd:e.priceUsd},...e.lowBalance?{lowBalance:!0}:{},...e.disabled?{disabled:!0}:{}}}function d(e){return e.eip155Id?`${e.eip155Id}:${e.address||`native`}`:e.symbol.toLowerCase()}function f({open:e,defaultOpen:t,onOpenChange:n,trigger:i,...a}){return s(r,{open:e,defaultOpen:t,onOpenChange:n,trigger:i,children:s(l,{...a})})}(function(e){e.Dialog=f})(l||={});export{l as AssetPicker};
+"use client";import{useDepositSnapshot as e}from"../../driver/context.js";import{useDepositActions as t,useDepositEffectiveState as n}from"../../orchestrator/controller.js";import{DialogShell as r}from"../../../../shared/dialog/DialogShell.js";import{AssetPicker as i}from"../../../../shared/widgets/asset-picker/compound/AssetPicker.js";import"../../../../shared/widgets/asset-picker/compound/index.js";import{useMemo as a,useState as o}from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=l(s,{children:[c(i.Header,{}),c(i.Body,{children:c(i.List,{})}),c(i.Footer,{})]});function d({children:r,...s}){let l=e(),d=n(),{confirmAsset:m,back:h}=t(),[g,_]=o(void 0),v=l.balances,y=v.status===`ready`||v.status===`stale`?v.payload:[],b=a(()=>y.map(f),[y]),x=a(()=>(e=>e!==void 0&&b.some(t=>t.id===e&&!t.disabled))(g)?g:b.find(e=>!e.disabled)?.id,[g,b]),S=l.target,C=S.status===`ready`||S.status===`stale`?S.payload:void 0;if(d.name!==`assetPicker`)return null;let w=d.ctx.backTarget===`closed`?void 0:h,T=()=>{if(!x)return;let e=y.find(e=>p(e)===x);e&&m(e)};return c(i,{...s,...C?{token:{symbol:C.symbol}}:{},...x?{selectedId:x}:{},onSelect:_,assets:b,...w?{onBack:w}:{},onContinue:T,children:r??u})}function f(e){let t=p(e),n=`${e.amount.formatted} ${e.symbol}`,r=e.amountUsd?.formatted??`—`;return{id:t,symbol:e.symbol,chain:e.networkName,balance:e.amount.value,balanceFormatted:n,fiatFormatted:r,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.address?{contractAddress:e.address}:{},isNative:e.isNative,...e.assetLogoUrl?{logoUrl:e.assetLogoUrl}:{},...e.chainLogoUrl?{chainLogoUrl:e.chainLogoUrl}:{},decimals:e.decimals,...e.priceUsd===void 0?{}:{priceUsd:e.priceUsd},...e.lowBalance?{lowBalance:!0}:{},...e.disabled?{disabled:!0}:{}}}function p(e){return e.eip155Id?`${e.eip155Id}:${e.address||`native`}`:e.symbol.toLowerCase()}function m({open:e,defaultOpen:t,onOpenChange:n,trigger:i,...a}){return c(r,{open:e,defaultOpen:t,onOpenChange:n,trigger:i,children:c(d,{...a})})}(function(e){e.Dialog=m,e.Header=i.Header,e.Body=i.Body,e.List=i.List,e.Footer=i.Footer})(d||={});export{d as AssetPicker};

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{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{jsx as f,jsxs as p}from"react/jsx-runtime";function m(o){let l=e(),m=i(),_=a(),{confirmDeposit:y,back:b}=r(),{_:x}=n(),S=t(),C=c(),w=()=>{C({type:`deposit.confirm.clicked`,flow:`deposit`,tier:`ui`,payload:{}}),y()},T=l.quote,E=m.name===`confirmDeposit`?m.ctx.phase:void 0,D=l.target,O=l.wallet,k=_.name===`confirmDeposit`&&_.ctx.phase.kind===`ready`,A=d({expiresAt:E?.kind===`ready`?E.quoteExpiresAt:void 0,enabled:k});if(!E)return null;let j=E.kind===`loading`||E.kind===`regenerating`,M=g(l,D,O,S),N=v(l,{routeLabel:x({id:`rT8e1f`,message:`Route`}),networkCostLabel:x({id:`bZnukT`,message:`Network cost`}),priceImpactLabel:x({id:`kH6wUX`,message:`Price impact`}),maxSlippageLabel:x({id:`SZRUQ4`,message:`Max slippage`})}),P=`$0.00`;if(T.status===`ready`||T.status===`stale`)P=T.payload.heroAmountUsd.formatted;else if(_.name===`confirmDeposit`){let e=_.ctx.asset,t=_.ctx.amount,n=e?.priceUsd;P=s(typeof n==`number`&&Number.isFinite(n)&&n>0?t*n:t,S)}let F=T.status===`ready`||T.status===`stale`?T.payload.quoteTotalSeconds:30,I=A,L=h(E),R=E.kind===`failed`?E.failure:void 0,z=E.kind===`regenerating`?E.notice:void 0,B=D.status===`ready`||D.status===`stale`?D.payload:void 0,V=l.brand.status===`ready`||l.brand.status===`stale`?l.brand.payload:void 0,H=B&&V?.name?x({id:`zbtijb`,message:`Deposit {0} to {1}`,values:{0:B.symbol,1:V.name}}):void 0;return p(u,{...o,transfer:M,breakdown:N,heroAmountUsd:P,loading:j,phase:L,...z?{notice:z}:{},...R?{error:{message:R.reason,...R.code?{code:R.code}:{}}}:{},...I===void 0?{}:{quoteSeconds:I},quoteTotalSeconds:F,...H?{headerTitle:H}:{},onBack:b,onConfirm:w,children:[f(u.Header,{}),p(u.Body,{children:[f(u.Hero,{}),f(u.Meta,{}),f(u.Amounts,{}),f(u.Breakdown,{}),f(u.Disclaimer,{})]}),f(u.Footer,{})]})}function h(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 g(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?_(u):{symbol:`—`},receiveAmount:a?a.receiveAmount.formatted:`0`,receiveToken:d?_(d):{symbol:s?.symbol??`—`}}}function _(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 v(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 y({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return f(l,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:f(m,{...i})})}(function(e){e.Dialog=y})(m||={});export{m as ConfirmDeposit};
+"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{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=e(),m=i(),g=a(),{confirmDeposit:y,back:x}=r(),{_:S}=n(),C=t(),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,11 @@
 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 { DepositMethods } from "./compound/components/Methods.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 +19,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 +40,20 @@ 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 Steps: typeof DepositSteps;
+  const Step: typeof Deposit$1.Step;
 }
 //#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,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{jsx as p,jsxs as m}from"react/jsx-runtime";const h={width:18,height:18,"aria-hidden":!0};function g(s){let c=e(),u=r().name,{selectMethod:g}=n(),v=i(),{_:y}=t(),b=c.wallet,x=b.status===`ready`||b.status===`stale`?b.payload:void 0,S=x!==void 0,C=c.brand,w=C.status===`ready`||C.status===`stale`?C.payload:void 0,T=c.addresses,E=T.status===`ready`||T.status===`stale`?T.payload:[],D=c.balances.status===`error`,O=!x?.balanceTotalUsd?.formatted&&!D,k=!!c.brand,A=w?.name?y({id:`ogD_nm`,message:`Deposit to {0}`,values:{0:w.name}}):void 0,j=f(()=>_(E),[E]),M=v?.wallet,N=v?.transfer,P=f(()=>{let e=!S||O,t=M?.disabled??!1,n=e||t,r=t?M?.disabledHint:void 0,i=(()=>{if(t)return r;if(!S)return y({id:`5AApJw`,message:`Connect a wallet to continue`});if(x?.balanceTotalUsd?.formatted)return x.balanceTotalUsd.formatted;if(!D)return p(l,{width:56,height:12})})(),s=[{id:`wallet`,title:y({id:`sb9Y58`,message:`Wallet`}),icon:p(o,{...h}),...x&&!t?{titleAdornment:x.address.formatted}:{},...i===void 0?{}:{meta:i},recommended:!0,disabled:n,onSelect:n?void 0:()=>g(`wallet`)}];if(k){let e=N?.disabled??!1,t=e?N?.disabledHint:void 0,n=e?t:[y({id:`qtoOYG`,message:`No limit`}),y({id:`D79cZK`,message:`Instant`})];s.push({id:`transfer`,title:y({id:`3dqPLT`,message:`Transfer Crypto`}),icon:p(a,{...h}),...n===void 0?{}:{meta:n},...j?{trailing:j}:{},disabled:e,onSelect:e?void 0:()=>g(`transfer`)})}return s},[x,D,O,S,k,j,M,N,g,y]);return u===`deposit`?m(d,{...s,...A?{title:A}:{},methods:P,children:[p(d.Header,{}),p(d.Body,{children:p(d.Methods,{})})]}):null}function _(e){if(e.length!==0)return p(c.Group,{max:4,overflow:Math.max(0,e.length-4),size:`md`,children:e.map(e=>p(u,{isNative:!0,symbol:e.networkName,...e.eip155Id?{chainId:Number(e.eip155Id)}:{},...e.chainLogoUrl?{logoUrl:e.chainLogoUrl}:{},hideChainBadge:!0},e.eip155Id??e.networkName))})}function v({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return p(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:p(g,{...i})})}(function(e){e.Dialog=v})(g||={});export{g as Deposit};
+"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,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=e(),p=r().name,{selectMethod:h}=n(),v=i(),{_:b}=t(),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};

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

@@ -1,4 +1,6 @@
 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 { DepositHeader } from "./components/Header.js";
 import { DepositMethod } from "./components/Method.js";
@@ -53,6 +55,8 @@ declare namespace Deposit {
   type DialogProps = DepositDialogProps;
   type StepsProps = DepositStepsProps;
   type StepProps = DepositStepProps;
+  type GuardsProps = Props$1;
+  type BoundaryProps = Props;
   const Header: typeof DepositHeader;
   const Body: typeof DepositBody;
   const Methods: typeof DepositMethods;
@@ -64,6 +68,16 @@ declare namespace Deposit {
    * 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;
 }
 //#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{DepositContext as a}from"./context.js";import{DEPOSIT_SLOTS as o}from"./Deposit.slots.js";import{styles as s}from"./Deposit.styles.js";import{DepositHeader as c}from"./components/Header.js";import{DepositMethod as l}from"./components/Method.js";import{DepositMethods as u}from"./components/Methods.js";import{DepositSteps as d}from"./components/Steps.js";import{useMemo as f}from"react";import{jsx as p}from"react/jsx-runtime";import*as m from"@stylexjs/stylex";const h=[];function g(e){let{title:t,methodsLabel:n,methods:c=h,children:l}=e,u=f(()=>({title:t,methodsLabel:n,methods:c}),[t,n,c]);return p(a.Provider,{value:u,children:p(r.Provider,{children:p(i,{"data-stridge-slot":o.root,...m.props(s.root),children:l})})})}function _(e){return p(t.Body,{"data-stridge-slot":o.body,...e})}function v({open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:a,...o}){return p(e,{open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:p(g,{...o,children:a})})}(function(e){e.Header=c,e.Body=_,e.Methods=u,e.Method=l,e.Dialog=v,e.Steps=d,e.Step=n})(g||={});export{g 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{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};

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

@@ -0,0 +1,29 @@
+import { ErrorInfo, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Boundary.d.ts
+interface Props {
+  children: ReactNode;
+  /**
+   * Replaces the kit's default crash fallback. Compose `GatewayKitErrorCard` parts to keep
+   * kit styling, or render your own JSX for a fully custom recovery surface.
+   */
+  fallback?: ReactNode;
+  /**
+   * Fires once per caught render error. Pipe to your analytics or error-reporting pipeline
+   * (Sentry, Datadog, etc.) — the boundary itself only logs to `console.error` in development.
+   */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+/**
+ * Error-boundary part for the deposit flow. Wraps children with the kit's `GatewayKitBoundary`
+ * and pipes the recovery action through `useDeposit().close()` so a crash returns the user to a
+ * clean state. `onError` is host-supplied; `onReset` is wired internally.
+ */
+declare function DepositBoundary({
+  children,
+  fallback,
+  onError
+}: Props): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositBoundary, Props };

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

@@ -0,0 +1 @@
+"use client";import{useDepositActions as e}from"../../../../orchestrator/controller.js";import{GatewayKitBoundary as t}from"../../../../../../shared/error-handling/components/GatewayKitBoundary.js";import"../../../../../../shared/error-handling/index.js";import{jsx as n}from"react/jsx-runtime";function r({children:r,fallback:i,onError:a}){let{close:o}=e();return n(t,{...a?{onError:a}:{},...i===void 0?{}:{fallback:i},onReset:o,children:r})}export{r as DepositBoundary};

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

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Guards.d.ts
+interface Props {
+  children: ReactNode;
+}
+/**
+ * Bootstrap-cascade guard. Wraps the step content with three gates, in priority order:
+ *
+ * - **Wallet required** — `<StridgeProvider>` couldn't resolve a deposit owner from any of
+ *   `flows.deposit.owner` / wagmi / `dev.userAddressOverride`. Routes to a "Connect a wallet"
+ *   panel. BYO-driver hosts using `<KitProvider>` directly skip this gate entirely (no
+ *   owner-context provider above).
+ * - **Bootstrap fatal** — `gateway/start` landed in `error`. The dependent steps lose the
+ *   data they would render against; route to a recovery card.
+ * - **Bootstrap loading** — `gateway/start` is in flight (`idle` / `loading`). Surface a
+ *   centered spinner inside the same frame instead of empty step chrome.
+ *
+ * When none of the gates fire, renders the children unchanged. Terminal FSM steps
+ * (`processing` / `success` / `error`) also fall through because their data comes from
+ * `settlement`, not bootstrap.
+ */
+declare function DepositGuards({
+  children
+}: Props): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositGuards, Props };

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

@@ -0,0 +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};

package/dist/flows/deposit/widgets/deposit-status-banner/DepositStatusBanner.d.ts

@@ -1,3 +1,12 @@
+import { DepositStatusBannerBody } from "./compound/components/Body.js";
+import { DepositStatusBannerClose } from "./compound/components/Close.js";
+import { DepositStatusBannerDetails } from "./compound/components/Details.js";
+import { DepositStatusBannerFooter } from "./compound/components/Footer.js";
+import { DepositStatusBannerHero } from "./compound/components/Hero.js";
+import { DepositStatusBannerPrimaryAction } from "./compound/components/PrimaryAction.js";
+import { DepositStatusBannerCompletionTxRow, DepositStatusBannerDepositTxRow, DepositStatusBannerFilledAtRow, DepositStatusBannerSubmittedAtRow } from "./compound/components/Rows.js";
+import { DepositStatusBannerToggle } from "./compound/components/Toggle.js";
+import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/deposit-status-banner/DepositStatusBanner.d.ts
@@ -22,6 +31,30 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * still carries the terminal payload. `processing` is deliberately NOT auto-acked — an
  * in-flight deposit should still re-surface its banner on reopen.
  */
-declare function DepositStatusBanner(): _$react_jsx_runtime0.JSX.Element;
+interface DepositStatusBannerProps {
+  /**
+   * Optional custom composition rendered inside the banner shell. Defaults to `<Body><Hero />
+   * <Close /></Body>` + `<Details>…tx rows…</Details>` + `<Footer><Toggle /><PrimaryAction />
+   * </Footer>`. Pass children to interleave your own elements between parts.
+   */
+  children?: ReactNode;
+}
+declare function DepositStatusBanner({
+  children
+}?: DepositStatusBannerProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DepositStatusBanner {
+  type Props = DepositStatusBannerProps;
+  const Body: typeof DepositStatusBannerBody;
+  const Hero: typeof DepositStatusBannerHero;
+  const Close: typeof DepositStatusBannerClose;
+  const Details: typeof DepositStatusBannerDetails;
+  const DepositTxRow: typeof DepositStatusBannerDepositTxRow;
+  const CompletionTxRow: typeof DepositStatusBannerCompletionTxRow;
+  const SubmittedAtRow: typeof DepositStatusBannerSubmittedAtRow;
+  const FilledAtRow: typeof DepositStatusBannerFilledAtRow;
+  const Footer: typeof DepositStatusBannerFooter;
+  const Toggle: typeof DepositStatusBannerToggle;
+  const PrimaryAction: typeof DepositStatusBannerPrimaryAction;
+}
 //#endregion
 export { DepositStatusBanner };