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

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

@@ -17,11 +17,18 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * `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.
+ *
+ * Disabled rows render natively `disabled` — the user-facing reason for the
+ * disable lives in the `meta` slot (the orchestrated `Deposit` widget maps
+ * `flows.deposit.methods.<m>.disabledHint` onto `meta` for host-gated methods).
+ * When `meta` is a string, it is also folded into the tile's accessible name so
+ * screen readers convey the reason alongside the title.
  */
 declare function DepositMethod({
   title,
   titleAdornment,
   meta,
+  metaEmphasis,
   icon,
   trailing,
   recommended,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/flows/deposit/widgets/deposit/compound/components/Steps.d.ts
+interface DepositStepsProps {
+  /**
+   * When true, the matched step renders without the kit's animated `StepTransition` wrapper.
+   * Forwarded to the underlying `Steps` primitive.
+   */
+  plain?: boolean;
+  children: ReactNode;
+}
+/**
+ * Deposit-bound slot-routing parent. Reads the deposit FSM's *effective* state name and
+ * renders only the `<Deposit.Step name="…" />` child whose name matches. Reading effective
+ * (rather than logical) state keeps the matched step mounted while the enclosing
+ * `Deposit.Dialog` plays its exit animation — see `StepTransition.tsx` for the rationale.
+ */
+declare function DepositSteps({
+  plain,
+  children
+}: DepositStepsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DepositSteps, type DepositStepsProps };

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

@@ -0,0 +1 @@
+"use client";import{useDepositEffectiveState as e}from"../../../../orchestrator/controller.js";import{Steps as t}from"../../../../../../shared/ui/Steps/Steps.js";import"../../../../../../shared/ui/Steps/index.js";import{jsx as n}from"react/jsx-runtime";function r({plain:r,children:i}){return n(t,{activeStep:e().name,...r===void 0?{}:{plain:r},children:i})}export{r as DepositSteps};

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

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

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

@@ -1,4 +1,5 @@
 import { DialogShellControls } from "../../../../../shared/dialog/DialogShell.js";
+import { Tabs } from "../../../../../shared/ui/Tabs/Tabs.js";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/flows/deposit/widgets/deposit/compound/types.d.ts
@@ -23,6 +24,14 @@ interface DepositMethodOption {
    * by middle-dot separators (e.g. `["$24.50", "Instant"]`).
    */
   meta?: ReactNode;
+  /**
+   * Emphasis treatment for a multi-segment `meta` array. `"lead"` (the
+   * default) renders the first segment at `medium` weight with full-foreground
+   * colour and subdues the rest — the wallet and transfer-crypto tiles.
+   * `"uniform"` renders every segment at `medium` weight with subdued colour —
+   * the onramp method tile. Ignored when `meta` is a single node.
+   */
+  metaEmphasis?: "lead" | "uniform";
   /** Icon rendered inside the 36×36 slot on the left of the row. */
   icon?: ReactNode;
   /**
@@ -36,9 +45,12 @@ interface DepositMethodOption {
    */
   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.
+   * When true, renders the row natively disabled — used for "coming soon"
+   * methods or host-gated options. The row stays in the list for
+   * discoverability but click is a no-op. Supply the user-facing reason
+   * through the `meta` slot; when `meta` is a string, it is also folded
+   * into the tile's accessible name so screen readers convey it alongside
+   * the title.
    */
   disabled?: boolean;
 }
@@ -125,5 +137,95 @@ interface DepositMethodProps extends DepositMethodOption {
   /** Fired when the user clicks the row. */
   onSelect?: () => void;
 }
+/**
+ * Method section part props. A `<Deposit.MethodSection>` is a labelled cluster
+ * of methods within a single rail — used to partition a rail's methods into
+ * named groups ("Most popular" / "Other options"). Sections live in the JSX
+ * composition rather than on the method
+ * data shape, so moving a method between sections, swapping a label per
+ * locale, or dropping a section entirely never touches `DepositMethodInput`
+ * or the orchestrator. Each section owns its own roving-focus
+ * `SelectableTileGroup`, so arrow-key navigation does not cross section
+ * boundaries.
+ *
+ * Sections are detected by the enclosing `<Deposit.Methods>` walker; when at
+ * least one `MethodSection` child is present, `Methods` skips its own
+ * "Payment Method" label and tile-group wrapper so each section owns its
+ * label + group. Flat-list behavior (no sections) is unchanged.
+ */
+interface DepositMethodSectionProps {
+  /**
+   * Section label rendered above the method group, in the same uppercase /
+   * tracking-widest / `text-2xs` treatment the outer `Methods` label uses
+   * (e.g. "MOST POPULAR", "OTHER OPTIONS").
+   */
+  label: ReactNode;
+  /** `Deposit.Method` children rendered inside this section's roving-focus group. */
+  children: ReactNode;
+}
+/**
+ * Payment rail discriminator. The first-step picker is partitioned by rail,
+ * then by method within the active rail. Crypto rail hosts the existing
+ * wallet / transfer methods; the onramp rail hosts the single "Cash"
+ * method.
+ *
+ * Lives in the compound layer while it is UI-only. Promotes to
+ * `orchestrator/types.ts` the first time the FSM needs to branch on rail
+ * (e.g. when the onramp method dispatches a different reducer event than
+ * `selectMethod`).
+ */
+type DepositRail = "crypto" | "onramp";
+/**
+ * A single rail tab — the label rendered in the `Deposit.RailPicker` tab
+ * strip plus the value that maps to a `Deposit.Rail` panel.
+ */
+interface DepositRailDescriptor {
+  /** Discriminator matching a `Deposit.Rail` panel's `value` prop. */
+  value: DepositRail;
+  /** Tab label. */
+  label: ReactNode;
+  /**
+   * Optional 12×12 glyph rendered inside a 22×22 pill badge in front of
+   * the label. The badge surface inverts on the active tab (idle paints
+   * `secondary` with `mutedForeground` glyph; active paints `foreground`
+   * with `background` glyph) so the icon reads as the heaviest element
+   * of the active tab.
+   */
+  icon?: ReactNode;
+  /** When `true`, the tab renders as `aria-disabled` and isn't activatable. */
+  disabled?: boolean;
+}
+/**
+ * Props for `<Deposit.RailPicker>` — the segmented switcher above the
+ * methods list. Uncontrolled by default via `defaultValue`; pass `value`
+ * + `onValueChange` to drive the rail from outside.
+ */
+interface DepositRailPickerProps {
+  /** Uncontrolled default. */
+  defaultValue?: DepositRail;
+  /** Controlled value. When set, `defaultValue` is ignored. */
+  value?: DepositRail;
+  /** Fired when the user activates a different rail. */
+  onValueChange?: (rail: DepositRail) => void;
+  /**
+   * Rail tabs rendered in the strip. Order in the array determines visual order.
+   * The kit ships `crypto` and `onramp` today; consumers pick the subset they want
+   * to surface based on host capabilities.
+   */
+  rails: readonly DepositRailDescriptor[];
+  /** Visual variant forwarded to the underlying `Tabs.List`. Defaults to `"default"`. */
+  variant?: Tabs.Variant;
+  /** `Deposit.Rail` children. One panel per rail value. */
+  children?: ReactNode;
+}
+/**
+ * Props for `<Deposit.Rail>` — a single rail panel. `value` matches one of
+ * the descriptors passed to `<Deposit.RailPicker>`.
+ */
+interface DepositRailProps {
+  /** Rail this panel renders for. */
+  value: DepositRail;
+  children?: ReactNode;
+}
 //#endregion
-export { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodInput, DepositMethodOption, DepositMethodProps, DepositMethodsProps, DepositProps };
+export { DepositBodyProps, DepositDialogProps, DepositHeaderProps, DepositMethodInput, DepositMethodOption, DepositMethodProps, DepositMethodSectionProps, DepositMethodsProps, DepositProps, DepositRail, DepositRailDescriptor, DepositRailPickerProps, DepositRailProps };

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

@@ -1,3 +1,12 @@
+import { DepositStatusBannerBody } from "./compound/components/Body.js";
+import { DepositStatusBannerClose } from "./compound/components/Close.js";
+import { DepositStatusBannerDetails } from "./compound/components/Details.js";
+import { DepositStatusBannerFooter } from "./compound/components/Footer.js";
+import { DepositStatusBannerHero } from "./compound/components/Hero.js";
+import { DepositStatusBannerPrimaryAction } from "./compound/components/PrimaryAction.js";
+import { DepositStatusBannerCompletionTxRow, DepositStatusBannerDepositTxRow, DepositStatusBannerFilledAtRow, DepositStatusBannerSubmittedAtRow } from "./compound/components/Rows.js";
+import { DepositStatusBannerToggle } from "./compound/components/Toggle.js";
+import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/deposit-status-banner/DepositStatusBanner.d.ts
@@ -14,7 +23,38 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * 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.
+ *
+ * Reaching a terminal FSM step (`success` / `error`) auto-acks the terminal bucket: the user is
+ * looking at the full-screen outcome, so that IS the acknowledgment. Without it, the natural
+ * `processing → success` / `processing → error` progression would re-surface the banner once
+ * the dialog is closed (FSM resets to `deposit`) and reopened, because the settlement entity
+ * still carries the terminal payload. `processing` is deliberately NOT auto-acked — an
+ * in-flight deposit should still re-surface its banner on reopen.
  */
-declare function DepositStatusBanner(): _$react_jsx_runtime0.JSX.Element;
+interface DepositStatusBannerProps {
+  /**
+   * Optional custom composition rendered inside the banner shell. Defaults to `<Body><Hero />
+   * <Close /></Body>` + `<Details>…tx rows…</Details>` + `<Footer><Toggle /><PrimaryAction />
+   * </Footer>`. Pass children to interleave your own elements between parts.
+   */
+  children?: ReactNode;
+}
+declare function DepositStatusBanner({
+  children
+}?: DepositStatusBannerProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DepositStatusBanner {
+  type Props = DepositStatusBannerProps;
+  const Body: typeof DepositStatusBannerBody;
+  const Hero: typeof DepositStatusBannerHero;
+  const Close: typeof DepositStatusBannerClose;
+  const Details: typeof DepositStatusBannerDetails;
+  const DepositTxRow: typeof DepositStatusBannerDepositTxRow;
+  const CompletionTxRow: typeof DepositStatusBannerCompletionTxRow;
+  const SubmittedAtRow: typeof DepositStatusBannerSubmittedAtRow;
+  const FilledAtRow: typeof DepositStatusBannerFilledAtRow;
+  const Footer: typeof DepositStatusBannerFooter;
+  const Toggle: typeof DepositStatusBannerToggle;
+  const PrimaryAction: typeof DepositStatusBannerPrimaryAction;
+}
 //#endregion
 export { DepositStatusBanner };

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

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

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

@@ -1 +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};
+"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{m as C}from"motion/react";import*as w from"@stylexjs/stylex";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||document.visibilityState===`hidden`)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(()=>{let e=()=>{if(document.visibilityState!==`hidden`)return;R.current!==null&&(window.cancelAnimationFrame(R.current),R.current=null),L.current!==null&&(window.clearTimeout(L.current),L.current=null);let e=P.current;e&&(e.style.height=``)};return document.addEventListener(`visibilitychange`,e),()=>{document.removeEventListener(`visibilitychange`,e),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(C.div,{"data-stridge-slot":r.root,dir:A,...w.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/components/Hero.js

@@ -1 +1 @@
-"use client";import{AlertIcon as e}from"../../../../../../shared/icons/AlertIcon.js";import{ArrowDownIcon as t}from"../../../../../../shared/icons/ArrowDownIcon.js";import{CheckIcon as n}from"../../../../../../shared/icons/CheckIcon.js";import"../../../../../../icons/index.js";import{TokenLogo as r}from"../../../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../../../shared/ui/TokenLogo/index.js";import{DEPOSIT_STATUS_BANNER_SLOTS as i}from"../DepositStatusBanner.slots.js";import{styles as a}from"../DepositStatusBanner.styles.js";import{useDepositStatusBannerContext as o}from"../context.js";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import*as u from"@stylexjs/stylex";import{AnimatePresence as d,motion as f}from"motion/react";const p=[.16,1,.3,1],m=.22,h=.08,g=.14,_={enter:{opacity:0,y:6,filter:`blur(4px)`},center:{opacity:1,y:0,filter:`blur(0px)`,transition:{duration:m,delay:h,ease:p}},exit:{opacity:0,y:-6,filter:`blur(4px)`,transition:{duration:g,ease:p}}},v={enter:{opacity:0,scale:.6},center:{opacity:1,scale:1,transition:{duration:m,delay:h,ease:p}},exit:{opacity:0,scale:.6,transition:{duration:g,ease:p}}};function y(){let{kind:e,asset:t,headline:n,subline:p}=o(`DepositStatusBanner.Hero`);return l(s,{children:[l(`span`,{"data-stridge-slot":i.logo,...u.props(a.logo),children:[c(r,{size:32,symbol:t.symbol,...typeof t.chainId==`number`?{chainId:t.chainId}:{},...t.address?{address:t.address}:{},...t.isNative===void 0?{}:{isNative:t.isNative},...t.logoUrl?{logoUrl:t.logoUrl}:{},hideChainBadge:!0}),c(`span`,{"aria-hidden":!0,"data-stridge-slot":i.badge,...u.props(a.badge,e===`succeeded`&&a.badgeSucceeded,e===`failed`&&a.badgeFailed,e===`pending`&&a.badgePending),children:c(d,{mode:`wait`,initial:!1,children:c(f.span,{variants:v,initial:`enter`,animate:`center`,exit:`exit`,style:{display:`flex`,alignItems:`center`,justifyContent:`center`},children:c(b,{kind:e})},e)})})]}),c(`div`,{"data-stridge-slot":i.text,...u.props(a.text),children:c(d,{mode:`wait`,initial:!1,children:l(f.div,{variants:_,initial:`enter`,animate:`center`,exit:`exit`,style:{display:`flex`,flexDirection:`column`,gap:`2px`,minWidth:0},children:[c(`span`,{"data-stridge-slot":i.headline,...u.props(a.headline),children:n}),c(`span`,{"data-stridge-slot":i.subline,...u.props(a.subline),children:p})]},e)})})]})}function b({kind:r}){let i=u.props(a.badgeIcon);return c(r===`succeeded`?n:r===`failed`?e:t,{"aria-hidden":!0,...i})}export{y as DepositStatusBannerHero};
+"use client";import{AlertIcon as e}from"../../../../../../shared/icons/AlertIcon.js";import{ArrowDownIcon as t}from"../../../../../../shared/icons/ArrowDownIcon.js";import{CheckIcon as n}from"../../../../../../shared/icons/CheckIcon.js";import"../../../../../../icons/index.js";import{TokenLogo as r}from"../../../../../../shared/ui/TokenLogo/TokenLogo.js";import"../../../../../../shared/ui/TokenLogo/index.js";import{DEPOSIT_STATUS_BANNER_SLOTS as i}from"../DepositStatusBanner.slots.js";import{styles as a}from"../DepositStatusBanner.styles.js";import{useDepositStatusBannerContext as o}from"../context.js";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{AnimatePresence as u,m as d}from"motion/react";import*as f from"@stylexjs/stylex";const p=[.16,1,.3,1],m=.22,h=.08,g=.14,_={enter:{opacity:0,y:6,filter:`blur(4px)`},center:{opacity:1,y:0,filter:`blur(0px)`,transition:{duration:m,delay:h,ease:p}},exit:{opacity:0,y:-6,filter:`blur(4px)`,transition:{duration:g,ease:p}}},v={enter:{opacity:0,scale:.6},center:{opacity:1,scale:1,transition:{duration:m,delay:h,ease:p}},exit:{opacity:0,scale:.6,transition:{duration:g,ease:p}}};function y(){let{kind:e,asset:t,headline:n,subline:p}=o(`DepositStatusBanner.Hero`);return l(s,{children:[l(`span`,{"data-stridge-slot":i.logo,...f.props(a.logo),children:[c(r,{size:32,symbol:t.symbol,...typeof t.chainId==`number`?{chainId:t.chainId}:{},...t.address?{address:t.address}:{},...t.isNative===void 0?{}:{isNative:t.isNative},...t.logoUrl?{logoUrl:t.logoUrl}:{},hideChainBadge:!0}),c(`span`,{"aria-hidden":!0,"data-stridge-slot":i.badge,...f.props(a.badge,e===`succeeded`&&a.badgeSucceeded,e===`failed`&&a.badgeFailed,e===`pending`&&a.badgePending),children:c(u,{mode:`wait`,initial:!1,children:c(d.span,{variants:v,initial:`enter`,animate:`center`,exit:`exit`,style:{display:`flex`,alignItems:`center`,justifyContent:`center`},children:c(b,{kind:e})},e)})})]}),c(`div`,{"data-stridge-slot":i.text,...f.props(a.text),children:c(u,{mode:`wait`,initial:!1,children:l(d.div,{variants:_,initial:`enter`,animate:`center`,exit:`exit`,style:{display:`flex`,flexDirection:`column`,gap:`2px`,minWidth:0},children:[c(`span`,{"data-stridge-slot":i.headline,...f.props(a.headline),children:n}),c(`span`,{"data-stridge-slot":i.subline,...f.props(a.subline),children:p})]},e)})})]})}function b({kind:r}){let i=f.props(a.badgeIcon);return c(r===`succeeded`?n:r===`failed`?e:t,{"aria-hidden":!0,...i})}export{y as DepositStatusBannerHero};

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

@@ -1 +1 @@
-"use client";import{useLingui as e}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{ChevronRightIcon as t}from"../../../../../../shared/icons/ChevronRightIcon.js";import"../../../../../../icons/index.js";import{Button as n}from"../../../../../../shared/ui/Button/Button.js";import"../../../../../../shared/ui/Button/index.js";import{DEPOSIT_STATUS_BANNER_SLOTS as r}from"../DepositStatusBanner.slots.js";import{useDepositStatusBannerContext as i}from"../context.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{AnimatePresence as s,motion as c}from"motion/react";const l=[.16,1,.3,1],u={enter:{opacity:0,y:`60%`},center:{opacity:1,y:`0%`,transition:{duration:.22,ease:l}},exit:{opacity:0,y:`-60%`,transition:{duration:.18,ease:l}}};function d({onClick:l,label:d}={}){let f=i(`DepositStatusBanner.PrimaryAction`),{kind:p}=f,m=l??f.onPrimaryAction,{_:h}=e();if(!m)return null;let g=d??h(p===`succeeded`?{id:`AO44G_`,message:`View receipt`}:p===`failed`?{id:`2Eoi_a`,message:`View details`}:{id:`Oi8TiZ`,message:`View progress`}),_=d??[h({id:`Oi8TiZ`,message:`View progress`}),h({id:`AO44G_`,message:`View receipt`}),h({id:`2Eoi_a`,message:`View details`})].reduce((e,t)=>t.length>e.length?t:e);return a(n,{type:`button`,onClick:m,variant:`default`,size:`sm`,suffix:a(t,{"aria-hidden":!0}),"data-stridge-slot":r.primaryAction,children:o(`span`,{style:{position:`relative`,display:`inline-flex`,alignItems:`center`,overflow:`hidden`},children:[a(`span`,{"aria-hidden":!0,style:{visibility:`hidden`,whiteSpace:`nowrap`},children:_}),a(s,{mode:`popLayout`,initial:!1,children:a(c.span,{variants:u,initial:`enter`,animate:`center`,exit:`exit`,style:{position:`absolute`,insetInlineStart:0,insetBlockStart:0,width:`100%`,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,whiteSpace:`nowrap`},children:g},g)})]})})}export{d as DepositStatusBannerPrimaryAction};
+"use client";import{useLingui as e}from"../../../../../../shared/i18n/useLingui.js";import"../../../../../../i18n/index.js";import{ChevronRightIcon as t}from"../../../../../../shared/icons/ChevronRightIcon.js";import"../../../../../../icons/index.js";import{Button as n}from"../../../../../../shared/ui/Button/Button.js";import"../../../../../../shared/ui/Button/index.js";import{DEPOSIT_STATUS_BANNER_SLOTS as r}from"../DepositStatusBanner.slots.js";import{useDepositStatusBannerContext as i}from"../context.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{AnimatePresence as s,m as c}from"motion/react";const l=[.16,1,.3,1],u={enter:{opacity:0,y:`60%`},center:{opacity:1,y:`0%`,transition:{duration:.22,ease:l}},exit:{opacity:0,y:`-60%`,transition:{duration:.18,ease:l}}};function d({onClick:l,label:d}={}){let f=i(`DepositStatusBanner.PrimaryAction`),{kind:p}=f,m=l??f.onPrimaryAction,{_:h}=e();if(!m)return null;let g=d??h(p===`succeeded`?{id:`AO44G_`,message:`View receipt`}:p===`failed`?{id:`2Eoi_a`,message:`View details`}:{id:`Oi8TiZ`,message:`View progress`}),_=d??[h({id:`Oi8TiZ`,message:`View progress`}),h({id:`AO44G_`,message:`View receipt`}),h({id:`2Eoi_a`,message:`View details`})].reduce((e,t)=>t.length>e.length?t:e);return a(n,{type:`button`,onClick:m,variant:`default`,size:`sm`,suffix:a(t,{"aria-hidden":!0}),"data-stridge-slot":r.primaryAction,children:o(`span`,{style:{position:`relative`,display:`inline-flex`,alignItems:`center`,overflow:`hidden`},children:[a(`span`,{"aria-hidden":!0,style:{visibility:`hidden`,whiteSpace:`nowrap`},children:_}),a(s,{mode:`popLayout`,initial:!1,children:a(c.span,{variants:u,initial:`enter`,animate:`center`,exit:`exit`,style:{position:`absolute`,insetInlineStart:0,insetBlockStart:0,width:`100%`,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,whiteSpace:`nowrap`},children:g},g)})]})})}export{d as DepositStatusBannerPrimaryAction};

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

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode } from "react";
-import { DestinationDto, GatewayLegFromDto, GatewayLegToDto, GatewayPollResponse } from "@stridge/sdk";
+import { DestinationDto, GatewayLegFromDto, GatewayLegToDto, GatewayUdaDto } from "@stridge/sdk";
 
 //#region src/flows/deposit/widgets/deposit-status-banner/compound/types.d.ts
 /**
@@ -25,9 +25,9 @@ interface DepositStatusBannerTxRef {
    */
   raw?: GatewayLegFromDto | GatewayLegToDto;
   /**
-   * Full `gateway/{owner}` poll response that produced the leg.
+   * Per-UDA view picked from `gateway/{owner}` that produced the leg.
    */
-  responseRaw?: GatewayPollResponse;
+  responseRaw?: GatewayUdaDto;
 }
 /**
  * Destination chrome rendered in the Hero. Drives the `<TokenLogo>` resolution.
@@ -43,9 +43,9 @@ interface DepositStatusBannerAsset {
    */
   raw?: DestinationDto;
   /**
-   * Full `gateway/{owner}` poll response that produced the destination.
+   * Per-UDA view picked from `gateway/{owner}` that produced the destination.
    */
-  responseRaw?: GatewayPollResponse;
+  responseRaw?: GatewayUdaDto;
 }
 /**
  * Public props accepted by the {@link DepositStatusBanner} root.

package/dist/flows/deposit/widgets/error-state/ErrorState.d.ts

@@ -1,5 +1,13 @@
 import { DialogShellControls } from "../../../../shared/dialog/DialogShell.js";
-import { ComponentProps } from "react";
+import { ErrorStateBodyProps } from "../../../../shared/widgets/error-state/compound/types.js";
+import { ErrorStateActions } from "../../../../shared/widgets/error-state/compound/components/Actions.js";
+import { ErrorStateDetails } from "../../../../shared/widgets/error-state/compound/components/Details.js";
+import { ErrorStateHeader } from "../../../../shared/widgets/error-state/compound/components/Header.js";
+import { ErrorStateHelpInfo } from "../../../../shared/widgets/error-state/compound/components/HelpInfo.js";
+import { ErrorStateHero } from "../../../../shared/widgets/error-state/compound/components/Hero.js";
+import { ErrorStateMoreDetails } from "../../../../shared/widgets/error-state/compound/components/MoreDetails.js";
+import { ErrorStateDepositTxRow, ErrorStateDestinationRow, ErrorStateFailedAtRow, ErrorStateFillStatusRow, ErrorStateSourceRow, ErrorStateSubmittedAtRow, ErrorStateYouReceiveRow } from "../../../../shared/widgets/error-state/compound/components/Rows.js";
+import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/flows/deposit/widgets/error-state/ErrorState.d.ts
@@ -13,7 +21,20 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  *   rejection). The widget renders just the headline + reason + Try again, since there's
  *   no settlement record to surface.
  */
-declare function ErrorState(props: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element | null;
+interface ErrorStateOwnProps {
+  /**
+   * Optional custom composition. Defaults vary by branch — settlement-derived failures render
+   * the full receipt (`<Header />` + `<Body>` containing `<Hero />` `<Details>…rows…</Details>`
+   * `<HelpInfo />` + `<Actions />`); FSM-derived failures render the minimal headline-only
+   * shape (`<Header />` + `<Body><Hero /></Body>` + `<Actions />`). Pass children once and
+   * they apply to whichever branch renders.
+   */
+  children?: ReactNode;
+}
+declare function ErrorState({
+  children,
+  ...props
+}: ComponentProps<"div"> & ErrorStateOwnProps): _$react_jsx_runtime0.JSX.Element | null;
 declare function ErrorStateDialog({
   open,
   defaultOpen,
@@ -22,9 +43,23 @@ declare function ErrorStateDialog({
   ...rootProps
 }: ErrorState.DialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace ErrorState {
-  type Props = ComponentProps<"div">;
-  type DialogProps = ComponentProps<"div"> & DialogShellControls;
+  type Props = ComponentProps<"div"> & ErrorStateOwnProps;
+  type DialogProps = ComponentProps<"div"> & DialogShellControls & ErrorStateOwnProps;
   const Dialog: typeof ErrorStateDialog;
+  const Header: typeof ErrorStateHeader;
+  const Body: (props: ErrorStateBodyProps) => _$react_jsx_runtime0.JSX.Element;
+  const Hero: typeof ErrorStateHero;
+  const Details: typeof ErrorStateDetails;
+  const FillStatusRow: typeof ErrorStateFillStatusRow;
+  const SourceRow: typeof ErrorStateSourceRow;
+  const DestinationRow: typeof ErrorStateDestinationRow;
+  const YouReceiveRow: typeof ErrorStateYouReceiveRow;
+  const MoreDetails: typeof ErrorStateMoreDetails;
+  const DepositTxRow: typeof ErrorStateDepositTxRow;
+  const SubmittedAtRow: typeof ErrorStateSubmittedAtRow;
+  const FailedAtRow: typeof ErrorStateFailedAtRow;
+  const HelpInfo: typeof ErrorStateHelpInfo;
+  const Actions: typeof ErrorStateActions;
 }
 //#endregion
 export { ErrorState };