@stridge/kit 0.1.0-alpha.0

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

@@ -0,0 +1,25 @@
+import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/asset-picker/AssetPicker.d.ts
+/**
+ * Orchestrated `AssetPicker` widget. Reads the source-asset list from the driver's `balances`
+ * 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;
+declare function AssetPickerDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  ...rootProps
+}: AssetPicker.DialogProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace AssetPicker {
+  type Props = ComponentProps<"div">;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  const Dialog: typeof AssetPickerDialog;
+}
+//#endregion
+export { AssetPicker };

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/confirm-deposit/ConfirmDeposit.d.ts
+/**
+ * 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
+ * `confirmDeposit` ctx for the phase + countdown, and routes the footer Confirm + Header back
+ * through orchestrator actions.
+ *
+ * Hero behavior — once the quote lands, reads `quote.payload.heroAmountUsd.formatted` verbatim.
+ * While the quote is loading (`phase: "loading" | "regenerating"`), pre-renders an estimated
+ * 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 ConfirmDepositDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  ...rootProps
+}: ConfirmDeposit.DialogProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace ConfirmDeposit {
+  type Props = ComponentProps<"div">;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  const Dialog: typeof ConfirmDepositDialog;
+}
+//#endregion
+export { ConfirmDeposit };

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/Deposit.d.ts
+/**
+ * Orchestrated `Deposit` widget — the deposit-method picker. Reads the connected wallet's
+ * formatted address + aggregated USD balance from the driver's `wallet` entity, the brand name
+ * from `brand` (drives the `"Deposit to <brand>"` title), and the per-chain deposit-address list
+ * from `addresses` (drives the chain-stack glyph cluster on the Transfer Crypto tile).
+ *
+ * Rendering during loading windows mirrors production: the Wallet meta swaps to a `<Skeleton>`
+ * 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;
+declare function DepositDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  ...rootProps
+}: Deposit.DialogProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace Deposit {
+  type Props = ComponentProps<"div">;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  const Dialog: typeof DepositDialog;
+}
+//#endregion
+export { Deposit };

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

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

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

@@ -0,0 +1,51 @@
+import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodProps, DepositMethodsProps, DepositProps } from "./types.js";
+import { DepositHeader } from "./components/Header.js";
+import { DepositMethod } from "./components/Method.js";
+import { DepositMethods } from "./components/Methods.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/Deposit.d.ts
+/**
+ * Root of the Deposit compound. Renders the modal-frame card surface
+ * and provides shared state to every compound part rendered inside it.
+ *
+ * Deposit is the kit's default entry point: users land here and pick
+ * one of the listed payment methods (Wallet / Transfer Crypto / Connect
+ * Exchange) to proceed.
+ *
+ * Parts:
+ * - {@link Deposit.Header}
+ * - {@link Deposit.Body}
+ * - {@link Deposit.Methods}
+ * - {@link Deposit.Method}
+ *
+ * Dialog form: {@link Deposit.Dialog} pre-composes the widget into a
+ * `Dialog.Root + Dialog.Trigger + Dialog.Content` shell — the
+ * production-recommended entry point. Use the bare `Deposit` form
+ * when you want the widget mounted inline (e.g. in a showcase canvas).
+ */
+declare function Deposit(props: DepositProps): _$react_jsx_runtime0.JSX.Element;
+declare function DepositBody(props: DepositBodyProps): _$react_jsx_runtime0.JSX.Element;
+declare function DepositDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  children,
+  ...rootProps
+}: DepositDialogProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace Deposit {
+  type Props = DepositProps;
+  type HeaderProps = DepositHeaderProps;
+  type BodyProps = DepositBodyProps;
+  type MethodsProps = DepositMethodsProps;
+  type MethodProps = DepositMethodProps;
+  type DialogProps = DepositDialogProps;
+  const Header: typeof DepositHeader;
+  const Body: typeof DepositBody;
+  const Methods: typeof DepositMethods;
+  const Method: typeof DepositMethod;
+  const Dialog: typeof DepositDialog;
+}
+//#endregion
+export { Deposit };

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

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

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

@@ -0,0 +1,11 @@
+//#region src/flows/deposit/widgets/deposit/compound/Deposit.slots.d.ts
+declare const DEPOSIT_SLOTS: {
+  readonly root: "deposit";
+  readonly header: "deposit-header";
+  readonly body: "deposit-body";
+  readonly methods: "deposit-methods";
+  readonly method: "deposit-method";
+};
+type DepositSlot = (typeof DEPOSIT_SLOTS)[keyof typeof DEPOSIT_SLOTS];
+//#endregion
+export { DEPOSIT_SLOTS, DepositSlot };

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

@@ -0,0 +1 @@
+const e={root:`deposit`,header:`deposit-header`,body:`deposit-body`,methods:`deposit-methods`,method:`deposit-method`};export{e as DEPOSIT_SLOTS};

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

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

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

@@ -0,0 +1,15 @@
+import { DepositHeaderProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Header.d.ts
+/**
+ * Header part — title row, laid out over `Card.Header` for row alignment
+ * 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.
+ */
+declare function DepositHeader({
+  title
+}?: DepositHeaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositHeader };

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

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

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

@@ -0,0 +1,32 @@
+import { DepositMethodProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Method.d.ts
+/**
+ * Method part — single payment-method row. Lays out:
+ *
+ *   [icon slot]   [title (+ adornment)]            [trailing | chevron]
+ *                 [meta · meta · meta]
+ *
+ * Plus a leading-edge accent bar when `recommended` is true.
+ *
+ * Falls back to a chevron-right when no `trailing` element is supplied,
+ * matching the canvas's Wallet row.
+ *
+ * Surface chrome (background, border, radius, focus ring) flows through the shared
+ * `SelectableTile` primitive — see `ui/SelectableTile`. The row only contributes its
+ * own gap, leading-edge padding (so the recommended bar lands flush), and inner
+ * children layout.
+ */
+declare function DepositMethod({
+  title,
+  titleAdornment,
+  meta,
+  icon,
+  trailing,
+  recommended,
+  disabled,
+  onSelect
+}: DepositMethodProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositMethod };

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

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

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

@@ -0,0 +1,23 @@
+import { DepositMethodsProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Methods.d.ts
+/**
+ * Methods part — section wrapper around the payment-method list. Renders
+ * the "Payment Method" label and a vertical column for `Deposit.Method`
+ * children. The list participates in arrow-key navigation via
+ * `SelectableTileGroup` (roving-tabindex). No `value` is supplied here —
+ * each row's click navigates to the next step rather than toggling a
+ * pressed state, so the group is purely a keyboard-affordance wrapper.
+ *
+ * By default renders one `Deposit.Method` per entry on the {@link Deposit}
+ * root's `methods` prop. Pass `children` to opt out of the default
+ * rendering and supply a bespoke list.
+ */
+declare function DepositMethods({
+  label,
+  methods,
+  children
+}?: DepositMethodsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositMethods };

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodInput, DepositMethodOption, DepositMethodProps, DepositMethodsProps, DepositProps } from "./types.js";
+import { Deposit } from "./Deposit.js";
+import { DEPOSIT_SLOTS, DepositSlot } from "./Deposit.slots.js";

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

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

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

@@ -0,0 +1,129 @@
+import { DialogShellControls } from "../../../../../shared/dialog/DialogShell.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/flows/deposit/widgets/deposit/compound/types.d.ts
+/**
+ * A payment method rendered inside `Deposit.Methods`. Used by the bundled
+ * sample catalog and accepted by `Deposit.Method` as a destructured
+ * shape.
+ */
+interface DepositMethodOption {
+  /** Stable id, used as React key when iterating. */
+  id: string;
+  /** Primary row label (e.g. `"Wallet"`). */
+  title: string;
+  /**
+   * Optional inline adornment rendered next to the title — used for the
+   * truncated wallet address pill on the Wallet method. Mono-font in
+   * the design.
+   */
+  titleAdornment?: ReactNode;
+  /**
+   * One or more meta strings shown below the title and joined visually
+   * by middle-dot separators (e.g. `["$24.50", "Instant"]`).
+   */
+  meta?: ReactNode;
+  /** Icon rendered inside the 36×36 slot on the left of the row. */
+  icon?: ReactNode;
+  /**
+   * Optional trailing element — typically a chain stack or exchange
+   * stack. When omitted, a chevron-right is rendered in its place.
+   */
+  trailing?: ReactNode;
+  /**
+   * When true, marks the row as the recommended method via a vertical
+   * accent bar on the leading edge of the card.
+   */
+  recommended?: boolean;
+  /**
+   * When true, renders the row in a half-opacity inert state — used for
+   * "coming soon" methods. The row stays in the list for discoverability
+   * but click is a no-op.
+   */
+  disabled?: boolean;
+}
+/**
+ * A single method entry passed to the `Deposit` root via the `methods`
+ * prop — a `DepositMethodOption` plus its `onSelect` callback.
+ */
+interface DepositMethodInput extends DepositMethodOption {
+  /** Fired when the user clicks the row. */
+  onSelect?: () => void;
+}
+/**
+ * Props for `<Deposit.Dialog>` — the dialog form of the Deposit widget.
+ * Combines the widget root props with the shared dialog shell controls
+ * (`open` / `defaultOpen` / `onOpenChange` / `trigger`).
+ */
+type DepositDialogProps = DepositProps & DialogShellControls;
+/**
+ * Public props accepted by the {@link Deposit} root.
+ */
+interface DepositProps {
+  /**
+   * Header title text. Defaults to `"Deposit"`. Hosts wiring the
+   * orchestrated wrapper resolve `"Deposit to <brand>"` from the
+   * driver's `brand` entity.
+   */
+  title?: string;
+  /**
+   * Section label rendered above the methods list. Defaults to
+   * `"Payment Method"`.
+   */
+  methodsLabel?: string;
+  /**
+   * Methods rendered inside `Deposit.Methods`. Each entry is a
+   * `DepositMethodOption` with an optional `onSelect` callback.
+   */
+  methods?: readonly DepositMethodInput[];
+  /** Compound parts; see `Deposit.Header`, `Deposit.Methods`, etc. */
+  children?: ReactNode;
+}
+/**
+ * Body slot part props. Forwards every native `<div>` prop through to the
+ * underlying `Card.Body`, which becomes the scrollable region when the
+ * widget is mounted inside `Dialog.Content`.
+ */
+type DepositBodyProps = ComponentProps<"div">;
+/**
+ * Header part props.
+ */
+interface DepositHeaderProps {
+  /**
+   * Optional override for the title rendered in this slot. Defaults to
+   * the `title` set on the {@link Deposit} root, falling back to
+   * `"Deposit"`.
+   */
+  title?: string;
+}
+/**
+ * Methods (list container) part props.
+ */
+interface DepositMethodsProps {
+  /**
+   * Optional override for the section label. Defaults to the
+   * `methodsLabel` set on the {@link Deposit} root, falling back to
+   * `"Payment Method"`.
+   */
+  label?: string;
+  /**
+   * Optional override for the rendered methods. Defaults to the
+   * `methods` set on the {@link Deposit} root.
+   */
+  methods?: readonly DepositMethodInput[];
+  /**
+   * Optional `Deposit.Method` children. Power-user escape hatch —
+   * when provided, replaces the default rendering of
+   * `methods` from context.
+   */
+  children?: ReactNode;
+}
+/**
+ * Method (single row) part props.
+ */
+interface DepositMethodProps extends DepositMethodOption {
+  /** Fired when the user clicks the row. */
+  onSelect?: () => void;
+}
+//#endregion
+export { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodInput, DepositMethodOption, DepositMethodProps, DepositMethodsProps, DepositProps };

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

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

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

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

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

@@ -0,0 +1,20 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit-status-banner/DepositStatusBanner.d.ts
+/**
+ * Orchestrated `DepositStatusBanner`. Reads the active settlement entity from the
+ * {@link import("#/flows/deposit/driver").DepositDriver} and surfaces an inline lifecycle banner with a
+ * resume-into-full-widget CTA.
+ *
+ * Visibility — payload exists + bucket not acked + FSM step is not one that already paints the
+ * settlement at full size (`processing` / `success` / `error`, encoded once in
+ * {@link import("#/flows/deposit/orchestrator/steps").STEPS_WITH_OWN_SETTLEMENT_VIEW}).
+ *
+ * Acknowledgment — the kit's persistent {@link import("#/banners").useBannerAckForSettlement}
+ * hook keys ack rows by `<txHash, bucket>` where `bucket` is `inflight` for pending and
+ * `terminal` for succeeded / failed. Acking the pending banner does NOT suppress the eventual
+ * success / failure banner for the same source-chain tx — the buckets are distinct.
+ */
+declare function DepositStatusBanner(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositStatusBanner };

package/dist/flows/deposit/widgets/deposit-status-banner/DepositStatusBanner.js

@@ -0,0 +1 @@
+"use client";import{useBannerAckForSettlement as e}from"../../../../banners/useBannerAck.js";import"../../../../banners/index.js";import{useDepositSnapshot as t}from"../../driver/context.js";import{useLingui as n}from"../../../../shared/i18n/useLingui.js";import"../../../../i18n/index.js";import{useDepositActions as r,useDepositState as i}from"../../orchestrator/controller.js";import{stepRendersSettlement as a}from"../../orchestrator/steps.js";import{DepositStatusBanner as o}from"./compound/DepositStatusBanner.js";import"./compound/index.js";import{useEffect as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{AnimatePresence as d}from"motion/react";function f(){let o=t(),u=i().name,{resumeToProcessing:f,resumeToSuccess:h,resumeToError:_}=r(),{_:v}=n(),y=o.settlement,b=y.status===`ready`||y.status===`stale`?y.payload:void 0,{acked:x,ack:S}=e(b),[C,w]=c(!1);s(()=>{w(!1)},[b?`${b.kind}:${p(b)}`:null]);let T=b!==void 0&&!x&&!a(u);function E(e){return()=>{S(),e()}}return l(d,{children:T&&b?l(m,{payload:b,brandName:o.brand.status===`ready`||o.brand.status===`stale`?o.brand.payload.name:void 0,expanded:C,onToggleExpanded:()=>w(e=>!e),onDismiss:S,onResumeToProcessing:E(()=>f(`wallet`,g(b))),onResumeToSuccess:E(()=>h(`wallet`,g(b))),onResumeToError:E(()=>_(g(b))),labels:{completed:v({id:`3kg1gB`,message:`Deposit completed`}),didntComplete:v({id:`Rxjdjn`,message:`Deposit didn't complete`}),receivedProcessing:v({id:`junZX6`,message:`Deposit received and processing…`}),creditedToBrand:e=>v({id:`IRogzB`,message:`Your deposit has been credited to {brand}.`,values:{brand:e}}),creditedToAccount:v({id:`9JHY2T`,message:`Your deposit has been credited to your account.`}),fundsSafe:v({id:`Z1WbO6`,message:`Funds are safe on the source chain — contact support to recover.`}),willBeCreditedToBrand:e=>v({id:`TG4WOd`,message:`Your deposit will be credited to {brand}.`,values:{brand:e}}),willBeCreditedToAccount:v({id:`Offl0a`,message:`Your deposit will be credited to your account.`})}},`banner`):null})}function p(e){return e.kind===`succeeded`?e.depositTx.hash.value:e.kind===`failed`?e.txHash.value:e.txHash?.value??`pending`}function m({payload:e,brandName:t,expanded:n,onToggleExpanded:r,onDismiss:i,onResumeToProcessing:a,onResumeToSuccess:s,onResumeToError:c,labels:d}){let f=e.kind,p={symbol:e.creditedAsset.symbol,...e.creditedAsset.address?{address:e.creditedAsset.address}:{},...e.creditedAsset.isNative===void 0?{}:{isNative:e.creditedAsset.isNative},...e.creditedAsset.assetLogoUrl?{logoUrl:e.creditedAsset.assetLogoUrl}:{}},m=f===`succeeded`?d.completed:f===`failed`?d.didntComplete:d.receivedProcessing,g=f===`succeeded`?t?d.creditedToBrand(t):d.creditedToAccount:f===`failed`?d.fundsSafe:t?d.willBeCreditedToBrand(t):d.willBeCreditedToAccount,_=h(e),v=e.kind===`succeeded`&&e.completionTx?{hash:e.completionTx.hash.formatted,...e.completionTx.explorerUrl?{explorerUrl:e.completionTx.explorerUrl}:{}}:void 0,y=e.kind===`succeeded`||e.kind===`failed`?e.submittedAt.formatted:void 0,b=e.kind===`succeeded`?e.filledAt.formatted:void 0,x=f===`succeeded`?s:f===`failed`?c:a;return u(o,{kind:f,asset:p,headline:m,subline:g,expanded:n,onToggleExpanded:r,onDismiss:i,..._?{depositTx:_}:{},...v?{completionTx:v}:{},...y===void 0?{}:{submittedAt:y},...b===void 0?{}:{filledAt:b},onPrimaryAction:x,children:[u(o.Body,{children:[l(o.Hero,{}),l(o.Close,{})]}),u(o.Details,{children:[l(o.DepositTxRow,{}),l(o.CompletionTxRow,{}),l(o.SubmittedAtRow,{}),l(o.FilledAtRow,{})]}),u(o.Footer,{children:[l(o.Toggle,{}),l(o.PrimaryAction,{})]})]})}function h(e){if(e.kind===`succeeded`)return{hash:e.depositTx.hash.formatted,...e.depositTx.explorerUrl?{explorerUrl:e.depositTx.explorerUrl}:{}};if(e.kind===`failed`||e.txHash)return{hash:e.txHash.formatted,...e.txExplorerUrl?{explorerUrl:e.txExplorerUrl}:{}}}function g(e){return e.kind===`succeeded`?{hash:e.depositTx.hash.value,...e.depositTx.explorerUrl?{explorerUrl:e.depositTx.explorerUrl}:{}}:e.kind===`failed`?{hash:e.txHash.value,...e.txExplorerUrl?{explorerUrl:e.txExplorerUrl}:{}}:{hash:e.txHash?.value??``,...e.txExplorerUrl?{explorerUrl:e.txExplorerUrl}:{}}}export{f as DepositStatusBanner};

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

@@ -0,0 +1,102 @@
+import { DepositStatusBannerBodyProps, DepositStatusBannerCloseProps, DepositStatusBannerDetailProps, DepositStatusBannerDetailsProps, DepositStatusBannerFooterProps, DepositStatusBannerHeroProps, DepositStatusBannerPrimaryActionProps, DepositStatusBannerProps, DepositStatusBannerRowProps, DepositStatusBannerToggleProps } from "./types.js";
+import { DepositStatusBannerBody } from "./components/Body.js";
+import { DepositStatusBannerClose } from "./components/Close.js";
+import { DepositStatusBannerDetail } from "./components/Detail.js";
+import { DepositStatusBannerDetails } from "./components/Details.js";
+import { DepositStatusBannerFooter } from "./components/Footer.js";
+import { DepositStatusBannerHero } from "./components/Hero.js";
+import { DepositStatusBannerPrimaryAction } from "./components/PrimaryAction.js";
+import { DepositStatusBannerCompletionTxRow, DepositStatusBannerDepositTxRow, DepositStatusBannerFilledAtRow, DepositStatusBannerSubmittedAtRow } from "./components/Rows.js";
+import { DepositStatusBannerToggle } from "./components/Toggle.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit-status-banner/compound/DepositStatusBanner.d.ts
+/**
+ * Subline copy is length-matched on purpose. The pending and succeeded variants animate via
+ * `AnimatePresence` when the lifecycle advances; if one wraps to two lines and the other
+ * doesn't, the banner's height shifts during the swap and the motion reads as a layout jump.
+ * Both lines now read on the same number of glyphs so the row stays a single line at every
+ * width the banner sits at.
+ */
+/**
+ * Root of the {@link DepositStatusBanner} compound. Surfaces an in-flight or recently-completed
+ * deposit as a sticky bottom-of-dialog card. The orchestrator-bound `<DepositStatusBanner />` (one
+ * directory up) wires this against ambient state + the processing watcher; the compound form here
+ * is the same pixels but takes plain props so canvas / showcase / storybook mounts can render
+ * every visual variant without standing up an orchestrator.
+ *
+ * Parts:
+ * - {@link DepositStatusBanner.Body} — top row container.
+ * - {@link DepositStatusBanner.Hero} — token logo with status badge + headline + subline.
+ * - {@link DepositStatusBanner.Close} — X dismiss affordance (auto-hidden when `onDismiss` is unset).
+ * - {@link DepositStatusBanner.Details} — expanded detail panel container.
+ * - {@link DepositStatusBanner.Detail} — single label/value row inside Details.
+ * - {@link DepositStatusBanner.Footer} — bottom row container.
+ * - {@link DepositStatusBanner.Toggle} — See more / See less.
+ * - {@link DepositStatusBanner.PrimaryAction} — kind-aware CTA pill.
+ *
+ * @example
+ * ```tsx
+ * <DepositStatusBanner
+ *     kind="pending"
+ *     asset={{ symbol: "USDC", chainId: 1 }}
+ *     expanded={expanded}
+ *     onToggleExpanded={() => setExpanded((v) => !v)}
+ *     onDismiss={() => setHidden(true)}
+ * >
+ *     <DepositStatusBanner.Body>
+ *         <DepositStatusBanner.Hero />
+ *         <DepositStatusBanner.Close />
+ *     </DepositStatusBanner.Body>
+ *     <DepositStatusBanner.Details>
+ *         <DepositStatusBanner.Detail label="Deposit tx" value={…} />
+ *     </DepositStatusBanner.Details>
+ *     <DepositStatusBanner.Footer>
+ *         <DepositStatusBanner.Toggle />
+ *         <DepositStatusBanner.PrimaryAction onClick={resume} />
+ *     </DepositStatusBanner.Footer>
+ * </DepositStatusBanner>
+ * ```
+ */
+declare function DepositStatusBanner({
+  kind,
+  asset,
+  headline: headlineOverride,
+  subline: sublineOverride,
+  expanded,
+  onToggleExpanded,
+  onDismiss,
+  depositTx,
+  completionTx,
+  submittedAt,
+  filledAt,
+  onPrimaryAction,
+  inline,
+  children
+}: DepositStatusBannerProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DepositStatusBanner {
+  type Props = DepositStatusBannerProps;
+  type BodyProps = DepositStatusBannerBodyProps;
+  type HeroProps = DepositStatusBannerHeroProps;
+  type CloseProps = DepositStatusBannerCloseProps;
+  type DetailsProps = DepositStatusBannerDetailsProps;
+  type DetailProps = DepositStatusBannerDetailProps;
+  type FooterProps = DepositStatusBannerFooterProps;
+  type ToggleProps = DepositStatusBannerToggleProps;
+  type PrimaryActionProps = DepositStatusBannerPrimaryActionProps;
+  type RowProps = DepositStatusBannerRowProps;
+  const Body: typeof DepositStatusBannerBody;
+  const Hero: typeof DepositStatusBannerHero;
+  const Close: typeof DepositStatusBannerClose;
+  const Details: typeof DepositStatusBannerDetails;
+  const Detail: typeof DepositStatusBannerDetail;
+  const Footer: typeof DepositStatusBannerFooter;
+  const Toggle: typeof DepositStatusBannerToggle;
+  const PrimaryAction: typeof DepositStatusBannerPrimaryAction;
+  const DepositTxRow: typeof DepositStatusBannerDepositTxRow;
+  const CompletionTxRow: typeof DepositStatusBannerCompletionTxRow;
+  const SubmittedAtRow: typeof DepositStatusBannerSubmittedAtRow;
+  const FilledAtRow: typeof DepositStatusBannerFilledAtRow;
+}
+//#endregion
+export { DepositStatusBanner };

package/dist/flows/deposit/widgets/deposit-status-banner/compound/DepositStatusBanner.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../../shared/i18n/useLingui.js";import"../../../../../i18n/index.js";import{useKitConfig as t}from"../../../../../scope/context.js";import{Collapsible as n}from"../../../../../shared/ui/Collapsible/Collapsible.js";import"../../../../../shared/ui/Collapsible/index.js";import{DEPOSIT_STATUS_BANNER_SLOTS as r}from"./DepositStatusBanner.slots.js";import{styles as i}from"./DepositStatusBanner.styles.js";import{DepositStatusBannerBody as a}from"./components/Body.js";import{DepositStatusBannerContext as o}from"./context.js";import{DepositStatusBannerClose as s}from"./components/Close.js";import{DepositStatusBannerDetail as c}from"./components/Detail.js";import{DepositStatusBannerDetails as l}from"./components/Details.js";import{DepositStatusBannerFooter as u}from"./components/Footer.js";import{DepositStatusBannerHero as d}from"./components/Hero.js";import{DepositStatusBannerPrimaryAction as f}from"./components/PrimaryAction.js";import{DepositStatusBannerCompletionTxRow as p,DepositStatusBannerDepositTxRow as m,DepositStatusBannerFilledAtRow as h,DepositStatusBannerSubmittedAtRow as g}from"./components/Rows.js";import{DepositStatusBannerToggle as _}from"./components/Toggle.js";import{useEffect as v,useLayoutEffect as y,useMemo as b,useRef as x}from"react";import{jsx as S}from"react/jsx-runtime";import*as C from"@stylexjs/stylex";import{motion as w}from"motion/react";const T=[.16,1,.3,1],E=[.4,0,1,1];function D({kind:a,asset:s,headline:c,subline:l,expanded:u,onToggleExpanded:d,onDismiss:f,depositTx:p,completionTx:m,submittedAt:h,filledAt:g,onPrimaryAction:_,inline:D,children:O}){let{_:k}=e(),{direction:A}=t(),j=c??k(a===`succeeded`?{id:`3kg1gB`,message:`Deposit completed`}:a===`failed`?{id:`Rxjdjn`,message:`Deposit didn't complete`}:{id:`junZX6`,message:`Deposit received and processing…`}),M=l??k(a===`succeeded`?{id:`9JHY2T`,message:`Your deposit has been credited to your account.`}:a===`failed`?{id:`Z1WbO6`,message:`Funds are safe on the source chain — contact support to recover.`}:{id:`Offl0a`,message:`Your deposit will be credited to your account.`}),N=b(()=>({kind:a,asset:s,headline:j,subline:M,expanded:u,onToggleExpanded:d,onDismiss:f,depositTx:p,completionTx:m,submittedAt:h,filledAt:g,onPrimaryAction:_}),[a,s,j,M,u,d,f,p,m,h,g,_]),P=x(null),F=x(null),I=x(a),L=x(null),R=x(null);y(()=>{let e=P.current;if(!e)return;let t=e.getBoundingClientRect().height;if(I.current===a){F.current=t;return}let n=F.current;if(I.current=a,F.current=t,n===null||n===t)return;let r=e.style.transition;e.style.transition=`none`,e.style.height=`${n}px`,e.offsetHeight,e.style.transition=r,R.current!==null&&window.cancelAnimationFrame(R.current),R.current=window.requestAnimationFrame(()=>{R.current=null,P.current&&(P.current.style.height=`${t}px`)}),L.current!==null&&window.clearTimeout(L.current),L.current=window.setTimeout(()=>{L.current=null;let e=P.current;e&&(e.style.height=``)},320)}),v(()=>()=>{L.current!==null&&(window.clearTimeout(L.current),L.current=null),R.current!==null&&(window.cancelAnimationFrame(R.current),R.current=null)},[]);let z=D?`0%`:`-50%`;return S(o.Provider,{value:N,children:S(n,{open:u,onOpenChange:e=>{e!==u&&d()},children:S(w.div,{"data-stridge-slot":r.root,dir:A,...C.props(i.root,D&&i.rootInline),initial:{x:z,y:`100%`,opacity:0},animate:{x:z,y:`0%`,opacity:1,transition:{duration:.3,ease:T}},exit:{x:z,y:`100%`,opacity:0,transition:{duration:.22,ease:E}},children:S(`div`,{ref:P,style:{display:`flex`,flexDirection:`column`,overflow:`hidden`,transition:`height 260ms cubic-bezier(0.3, 0, 0.06, 1)`},children:O})})})})}(function(e){e.Body=a,e.Hero=d,e.Close=s,e.Details=l,e.Detail=c,e.Footer=u,e.Toggle=_,e.PrimaryAction=f,e.DepositTxRow=m,e.CompletionTxRow=p,e.SubmittedAtRow=g,e.FilledAtRow=h})(D||={});export{D as DepositStatusBanner};

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

@@ -0,0 +1,20 @@
+//#region src/flows/deposit/widgets/deposit-status-banner/compound/DepositStatusBanner.slots.d.ts
+declare const DEPOSIT_STATUS_BANNER_SLOTS: {
+  readonly root: "deposit-status-banner";
+  readonly body: "deposit-status-banner-body";
+  readonly hero: "deposit-status-banner-hero";
+  readonly logo: "deposit-status-banner-logo";
+  readonly badge: "deposit-status-banner-badge";
+  readonly text: "deposit-status-banner-text";
+  readonly headline: "deposit-status-banner-headline";
+  readonly subline: "deposit-status-banner-subline";
+  readonly close: "deposit-status-banner-close";
+  readonly details: "deposit-status-banner-details";
+  readonly detail: "deposit-status-banner-detail";
+  readonly footer: "deposit-status-banner-footer";
+  readonly toggle: "deposit-status-banner-toggle";
+  readonly primaryAction: "deposit-status-banner-primary-action";
+};
+type DepositStatusBannerSlot = (typeof DEPOSIT_STATUS_BANNER_SLOTS)[keyof typeof DEPOSIT_STATUS_BANNER_SLOTS];
+//#endregion
+export { DEPOSIT_STATUS_BANNER_SLOTS, DepositStatusBannerSlot };