npm - @stridge/kit - Versions diffs - 0.1.0-alpha.6 → 0.1.0-alpha.61 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (580) hide show

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

@@ -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 { AmountEntryHeader } from "../../../../shared/widgets/amount-entry/compound/components/Header.js";
+import { AmountEntryFlow } from "../../../../shared/widgets/amount-entry/compound/components/Flow.js";
+import { AmountEntryFooter } from "../../../../shared/widgets/amount-entry/compound/components/Footer.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
@@ -14,11 +21,24 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * minimum-deposit USD floor from the driver's `target` entity. Renders nothing on any other
  * FSM state.
  *
- * Honors `target.payload.minDepositUsd.value`: when the entered amount is below it, the footer
+ * Honors `target.payload.minAmountUsd.value`: when the entered amount is below it, the footer
  * 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 CHANGED Viewed

	@@ -1 +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{~~DialogShell~~ as s}from"../../../../shared/dialog/DialogShell.js";import{~~text~~ as c}from"../../../../shared/ui/~~Text~~/~~Text~~.js";import"../../../../shared/ui/~~Text~~/index.js";import{AmountEntry as l}from"../../../../shared/widgets/amount-entry/compound/AmountEntry.js";import"../../../../shared/widgets/amount-entry/compound/index.js";import{toAssetDescriptor as u}from"../../../../shared/widgets/asset-descriptor.js";import{~~useEffect~~ as d,~~useMemo~~ as f,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=[{value:`25`,label:`25%`},{value:`50`,label:`50%`},{value:`75`,label:`75%`},{value:`max`,label:`Max`}];function v(s){let v=e(),y=a(),{confirmAmount:b,back:x}=i(),{_:S}=r(),C=t(),w=v.target,T=w.status===`ready`\|\|w.status===`stale`?w.payload:void 0,E=y.name===`amountEntry`?y.ctx.asset:void 0,D=E?.amountUsd?.value??0,O=T?.~~minDepositUsd~~?.value,k=T?.~~minDepositUsd~~?.formatted,A=E?.priceUsd,[j,M]=m(O??null),[N,P]=m(),F=p(void 0),I=E?`${E.eip155Id??``}:${E.address??``}`:void 0;d(()=>{I&&F.current!==I&&(F.current=I,typeof O==`number`&&(M(O),P(void 0)))},[I,O]);let L=e=>{P(e);let t=e===`max`?1:Number.parseInt(e,10)/100;Number.isFinite(t)~~&&M(D~~*t)},R=e=>{M(e),P(void 0)},z=f(~~()=>typeof~~ ~~O!=`number`\|\|O<=~~0~~?!1~~:j===~~null\|\|j<O,[j,O]),B=f(()=>typeof~~ ~~D!=`number`\|\|D<=~~0~~?!1~~:~~j!==null&&j>D~~,~~[j,D]~~),V=()=>{if(B){M(D),P(`max`);return}if(~~z&&~~typeof O==`number`){M(O),P(void 0);return}j!==null&&b(A&&A>0?j/A:j)};if(y.name!==`amountEntry`\|\|!E\|\|!T)return null;let H=y.ctx.backTarget===`closed`?void 0:x,U=u(E)??{symbol:E.symbol},W=u(T)??{symbol:T.symbol},G=`${o((j??0)/1,C,{maxDecimals:5})} ${T.symbol}~~`,K=B?S~~({id:`~~9cCjMJ~~`,message:`~~Deposit~~ ~~max balance~~`}):~~z&&k?S~~({id:`~~bOZXx5~~`,message:`~~Update~~ ~~order~~`})~~:void 0~~;return g(l,{...s,amount:j,sendToken:U,receiveToken:W,max:D,...O===void 0?{}:{min:O},onAmountChange:R,...H?{onBack:H}:{},subLineAmount:G,presets:_,...N===void 0?{}:{activePreset:N},onPresetSelect:~~L,...K===~~void 0?{}:{footerLabel:K},onContinue:V,children:[h(l.Header,{}),g(l.Body,{children:[h(l.Hero,{}),h(l.Pills,{}),~~B?h~~(c.p,{~~size:`sm`,color:`subdued`,className:`AmountEntry__noticeStyles~~.~~root~~ ~~x2b8uid~~ ~~x1vvogim`,"data-style-src":`@stridge/kit:src/flows/deposit/widgets/amount-entry/AmountEntry~~.~~tsx:16`,children:h~~(n,{id~~:`znqB4T~~`,message:`~~Insufficient~~ ~~balance`~~}~~)})~~:~~null,h(l.Flow,~~{})~~,!B&&z&&k?h~~(~~c.p~~,{~~size~~:`sm`,~~color~~:`~~subdued`,className:`AmountEntry__noticeStyles.root~~ ~~x2b8uid~~ ~~x1vvogim`,"data-style-src":`@stridge/kit:src/flows/deposit/widgets/amount-entry/AmountEntry.tsx:16`,children:h~~(n,{id:`3eKjkO`,message:`{formattedMin} minimum deposit`,values:{formattedMin:k}})}~~):null]}),h(l.Footer,{})]})}~~function y({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return h(s,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:h(v,{...i})})}(function(e){e.Dialog=y})(v\|\|={});export{v as AmountEntry};
1	+ "use client";import{useOptionalActivityDriverInstance as e}from"../../../activity/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{useDepositSnapshot as i}from"../../driver/context.js";import{useDepositActions as a,useDepositEffectiveState as ee}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{ActivityTrigger as l}from"../../../../shared/widgets/activity/ActivityTrigger.js";import"../../../../shared/widgets/activity/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 te}from"./footerIntent.js";import{useEffect as p,useRef as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=[{value:`25`,label:`25%`},{value:`50`,label:`50%`},{value:`75`,label:`75%`},{value:`max`,label:`Max`}];function b({children:n,...c}){let b=i(),C=ee(),{confirmAmount:w,back:T,openActivity:E}=a(),D=e()!==null,{_:O}=r(),k=t(),A=b.target,j=A.status===`ready`\|\|A.status===`stale`?A.payload:void 0,M=C.name===`amountEntry`?C.ctx.asset:void 0,N=M?.amountUsd?.value??0,P=j?.minAmountUsd?.value,F=j?.minAmountUsd?.formatted,I=j?.maxAmountUsd?.value,L=j?.maxAmountUsd?.formatted,R=f(N,I),z=M?.priceUsd,[B,V]=h(P??null),[H,U]=h(),W=s(),G=e=>{W({type:`deposit.amount.changed`,flow:`deposit`,tier:`ui`,payload:{raw:e===null?``:String(e),numeric:e}})},K=m(void 0),q=M?`${M.eip155Id??``}:${M.address??``}`:void 0;p(()=>{q&&K.current!==q&&(K.current=q,typeof P==`number`&&(V(P),U(void 0)))},[q,P]);let J=e=>{U(e);let t=e===`max`?1:Number.parseInt(e,10)/100;if(Number.isFinite(t)){let n=R*t;V(n),G(n),e===`max`&&W({type:`deposit.max.clicked`,flow:`deposit`,tier:`ui`,payload:{}})}},Y=e=>{V(e),U(void 0),G(e)},X=te({amount:B,...P===void 0?{}:{minAmountUsd:P},...I===void 0?{}:{maxAmountUsd:I},walletBalanceUsd:N}),Z=()=>{if(X===`aboveBalance`\|\|X===`aboveCap`){V(R),U(`max`);return}if(X===`belowMin`&&typeof P==`number`){V(P),U(void 0);return}B!==null&&w(z&&z>0?B/z:B)};if(C.name!==`amountEntry`\|\|!M\|\|!j)return null;let Q=C.ctx.backTarget===`closed`?void 0:T,ne=d(M)??{symbol:M.symbol},re=d(j)??{symbol:j.symbol},ie=`${o((B??0)/1,k,{maxDecimals:5})} ${j.symbol}`,$=x(X,{updateOrder:O({id:`bOZXx5`,message:`Update order`}),depositMax:O({id:`9cCjMJ`,message:`Deposit max balance`})}),ae=S(X,L,F);return _(u,{...c,amount:B,sendToken:ne,receiveToken:re,max:R,...P===void 0?{}:{min:P},onAmountChange:Y,...Q?{onBack:Q}:{},subLineAmount:ie,presets:y,...H===void 0?{}:{activePreset:H},onPresetSelect:J,...$===void 0?{}:{footerLabel:$},onContinue:Z,notice:ae,...D?{headerTrailing:_(l,{onOpen:E})}:{},children:n??v(g,{children:[_(u.Header,{}),v(u.Body,{children:[_(u.Hero,{}),_(u.Pills,{}),_(u.Flow,{}),_(u.Notice,{})]}),_(u.Footer,{})]})})}function x(e,t){if(e===`aboveCap`\|\|e===`belowMin`)return t.updateOrder;if(e===`aboveBalance`)return t.depositMax}function S(e,t,r){if(e===`aboveCap`&&t)return _(n,{id:`-I_tc5`,message:`Max {formattedCap}`,values:{formattedCap:t}});if(e===`aboveBalance`)return _(n,{id:`znqB4T`,message:`Insufficient balance`});if(e===`belowMin`&&r)return _(n,{id:`3eKjkO`,message:`{formattedMin} minimum deposit`,values:{formattedMin:r}})}function C({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...i}){return _(c,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:_(b,{...i})})}(function(e){e.Dialog=C,e.Header=u.Header,e.Body=u.Body,e.Hero=u.Hero,e.Pills=u.Pills,e.Flow=u.Flow,e.Footer=u.Footer,e.Notice=u.Notice})(b\|\|={});export{b as AmountEntry};

package/dist/flows/deposit/widgets/amount-entry/footerIntent.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ function e(e){let{amount:r,minAmountUsd:i,maxAmountUsd:a,walletBalanceUsd:o}=e,s=t(o,a);return r!==null&&s>0&&r>s?n(o,a)?`aboveCap`:`aboveBalance`:typeof i==`number`&&i>0&&(r===null\|\|r<i)?`belowMin`:`ready`}function t(e,t){return typeof t==`number`&&t>0?Math.min(e,t):e}function n(e,t){return typeof t==`number`&&t>0&&t<=e}export{t as effectiveMaxUsd,e as resolveFooterIntent};

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

@@ -1,5 +1,10 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { AssetPickerBodyProps } from "../../../../shared/widgets/asset-picker/compound/types.js";
+import { AssetPickerEmpty } from "../../../../shared/widgets/asset-picker/compound/components/Empty.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 +13,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 +32,14 @@ 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;
+  const Empty: typeof AssetPickerEmpty;
 }
 //#endregion
 export { AssetPicker };

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

	@@ -1 +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};
1	+ "use client";import{useOptionalActivityDriverInstance as e}from"../../../activity/driver/context.js";import{useDepositSnapshot as t}from"../../driver/context.js";import{useDepositActions as n,useDepositEffectiveState as r}from"../../orchestrator/controller.js";import{DialogShell as i}from"../../../../shared/dialog/DialogShell.js";import{ActivityTrigger as a}from"../../../../shared/widgets/activity/ActivityTrigger.js";import"../../../../shared/widgets/activity/index.js";import{AssetPicker as o}from"../../../../shared/widgets/asset-picker/compound/AssetPicker.js";import"../../../../shared/widgets/asset-picker/compound/index.js";import{useMemo as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=d(l,{children:[u(o.Header,{}),u(o.Body,{children:u(o.List,{})}),u(o.Footer,{})]}),p=d(l,{children:[u(o.Header,{}),u(o.Body,{children:u(o.Empty,{})})]});function m({children:i,...l}){let d=t(),m=r(),{confirmAsset:_,back:v,openActivity:y}=n(),b=e()!==null,[x,S]=c(void 0),C=d.balances,w=C.status===`ready`\|\|C.status===`stale`?C.payload:[],T=s(()=>w.map(h),[w]),E=(C.status===`ready`\|\|C.status===`stale`)&&T.length===0,D=s(()=>(e=>e!==void 0&&T.some(t=>t.id===e&&!t.disabled))(x)?x:T.find(e=>!e.disabled)?.id,[x,T]),O=d.target,k=O.status===`ready`\|\|O.status===`stale`?O.payload:void 0;if(m.name!==`assetPicker`)return null;let A=m.ctx.backTarget===`closed`?void 0:v,j=()=>{if(!D)return;let e=w.find(e=>g(e)===D);e&&_(e)};return u(o,{...l,...k?{token:{symbol:k.symbol}}:{},...D?{selectedId:D}:{},onSelect:S,assets:T,...A?{onBack:A}:{},onContinue:j,...b?{headerTrailing:u(a,{onOpen:y})}:{},children:i??(E?p:f)})}function h(e){let t=g(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 g(e){return e.eip155Id?`${e.eip155Id}:${e.address\|\|`native`}`:e.symbol.toLowerCase()}function _({open:e,defaultOpen:t,onOpenChange:n,trigger:r,...a}){return u(i,{open:e,defaultOpen:t,onOpenChange:n,trigger:r,children:u(m,{...a})})}(function(e){e.Dialog=_,e.Header=o.Header,e.Body=o.Body,e.List=o.List,e.Footer=o.Footer,e.Empty=o.Empty})(m\|\|={});export{m as AssetPicker};

package/dist/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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?tn: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.etaSeconds1e3,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};
1	+ "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?tn: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.etaSeconds1e3,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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 (e.g. partitioning a
+   * rail's methods 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 CHANGED Viewed

	@@ -1 +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};
1	+ "use client";import{DialogShell as e}from"../../../../../shared/dialog/DialogShell.js";import{Card as t}from"../../../../../shared/ui/Card/Card.js";import{Step as n}from"../../../../../shared/ui/Steps/Steps.js";import"../../../../../shared/ui/Steps/index.js";import{Tooltip as r}from"../../../../../shared/ui/Tooltip/Tooltip.js";import"../../../../../shared/ui/Tooltip/index.js";import"../../../../../ui/index.js";import{Frame as i}from"../../../../../shared/dialog/Frame.js";import{DepositBoundary as a}from"./components/Boundary.js";import{DepositGuards as o}from"./components/Guards.js";import{DepositContext as s}from"./context.js";import{DEPOSIT_SLOTS as c}from"./Deposit.slots.js";import{styles as l}from"./Deposit.styles.js";import{DepositHeader as u}from"./components/Header.js";import{DepositMethod as d}from"./components/Method.js";import{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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- const e={root:`deposit`,header:`deposit-header`,body:`deposit-body`,methods:`deposit-methods`,method:`deposit-method`};export{e as DEPOSIT_SLOTS};
1	+ 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 CHANGED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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`,`onrampAmountEntry`,`onrampConfirm`,`confirmDeposit`,`transferCrypto`]);function l({children:l}){let u=t(),d=e(),f=n(),p=c.has(u.name);return f!==null&&!f.resolved&&p?s(i,{}):d.target.status===`error`&&p?s(r,{}):(d.target.status===`loading`||d.target.status===`idle`)&&p?s(a,{slot:`deposit`}):s(o,{children:l})}export{l as DepositGuards};

package/dist/flows/deposit/widgets/deposit/compound/components/Header.d.ts CHANGED Viewed

@@ -7,6 +7,17 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * and the hairline divider. `Dialog.CloseButton` renders as the trailing
  * flex child only when the widget is mounted inside `Dialog.Content`;
  * card-mode renders no close affordance.
+ *
+ * Two trailing affordances flank the close X:
+ *
+ * 1. **Activity trigger** — `<ActivityTrigger>` button. Gated on the host mounting the standalone
+ *    {@link ActivityDriver} (Q4=(D) — activity is owned by the standalone driver, not the deposit
+ *    driver). When omitted, the icon hides gracefully so per-flow-only integrations stay clean.
+ *    FSM-state gating is handled upstream by the steps router — this header only mounts on the
+ *    `deposit` (method-picker) state, so a separate state allow-list would be redundant. Tap
+ *    fires `actions.openActivity()` which transitions the per-flow FSM into `activityList` with
+ *    the source step snapshotted into `ctx.backTarget`.
+ * 2. `<Dialog.CloseButton>` — kit's canonical close affordance.
  */
 declare function DepositHeader({
   title

package/dist/flows/deposit/widgets/deposit/compound/components/Header.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use client";import{~~useLingui~~ as e}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{Dialog as t}from"../../../../../../shared/ui/Dialog/Dialog.js";import"../../../../../../shared/ui/Dialog/index.js";import{Card as n}from"../../../../../../shared/ui/Card/Card.js";import{text as r}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{useDepositContext as i}from"../context.js";import{DEPOSIT_SLOTS as a}from"../Deposit.slots.js";import{styles as o}from"../Deposit.styles.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@stylexjs/stylex";function u({title:u}={}){let d=i(`Deposit.Header`),{_:f}=e(),p=u??d.title??f({id:`kj3M8S`,message:`Deposit`});return c(n.Header,{"data-stridge-slot":a.header,...l.props(o.header),children:[s(r.span,{size:`base`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,children:p}),s(t.CloseButton,{})]})}export{u as DepositHeader};
1	+ "use client";import{useOptionalActivityDriverInstance as e}from"../../../../../activity/driver/context.js";import{useLingui as t}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{useDepositActions as n}from"../../../../orchestrator/controller.js";import{Dialog as r}from"../../../../../../shared/ui/Dialog/Dialog.js";import"../../../../../../shared/ui/Dialog/index.js";import{Card as i}from"../../../../../../shared/ui/Card/Card.js";import{text as a}from"../../../../../../shared/ui/Text/Text.js";import"../../../../../../ui/index.js";import{ActivityTrigger as o}from"../../../../../../shared/widgets/activity/ActivityTrigger.js";import"../../../../../../shared/widgets/activity/index.js";import{useDepositContext as s}from"../context.js";import{DEPOSIT_SLOTS as c}from"../Deposit.slots.js";import{styles as l}from"../Deposit.styles.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import*as f from"@stylexjs/stylex";function p({title:p}={}){let m=s(`Deposit.Header`),{_:h}=t(),{openActivity:g}=n(),_=e()!==null,v=p??m.title??h({id:`kj3M8S`,message:`Deposit`});return d(i.Header,{"data-stridge-slot":c.header,...f.props(l.header),children:[u(a.span,{size:`base`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,children:v}),d(`div`,{...f.props(l.headerTrailing),children:[_?u(o,{onOpen:g}):null,u(r.CloseButton,{})]})]})}export{p as DepositHeader};