@stridge/kit 0.1.0-alpha.0

package/dist/shared/widgets/error-state/compound/components/MoreDetails.d.ts

@@ -0,0 +1,18 @@
+import { ErrorStateMoreDetailsProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/error-state/compound/components/MoreDetails.d.ts
+/**
+ * Collapsible row that expands inline to surface additional context (e.g. Reason code, Detected, Source tx). The
+ * trigger renders as a `Details.Row`; children render as flat sibling rows underneath. Supports controlled and
+ * uncontrolled open state via `open` / `defaultOpen` / `onOpenChange`.
+ */
+declare function ErrorStateMoreDetails({
+  label,
+  defaultOpen,
+  open: openProp,
+  onOpenChange,
+  children
+}: ErrorStateMoreDetailsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ErrorStateMoreDetails };

package/dist/shared/widgets/error-state/compound/components/MoreDetails.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{ChevronRightIcon as t}from"../../../../icons/ChevronRightIcon.js";import"../../../../../icons/index.js";import{Collapsible as n}from"../../../../ui/Collapsible/Collapsible.js";import"../../../../ui/Collapsible/index.js";import{Details as r}from"../../../../ui/Details/Details.js";import"../../../../ui/Details/index.js";import{useDirectionalChevronTransform as i}from"../../../../dialog/useDirectionalChevronTransform.js";import{ERROR_STATE_SLOTS as a}from"../ErrorState.slots.js";import{styles as o}from"../ErrorState.styles.js";import{useCallback as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import*as d from"@stylexjs/stylex";function f({label:f,defaultOpen:p=!1,open:m,onOpenChange:h,children:g}){let{_}=e(),v=f??_({id:`LEbOpR`,message:`More details`}),y=typeof m==`boolean`,[b,x]=c(p),S=y?m:b,C=s(e=>{y||x(e),h?.(e)},[y,h]),w=d.props(o.moreDetailsTrigger,S?null:o.moreDetailsTriggerClosed),T=d.props(o.moreDetailsChevron),E=i(S);return u(n,{open:S,onOpenChange:C,children:[l(n.Trigger,{nativeButton:!1,render:l(r.Row,{"data-stridge-slot":a.moreDetailsTrigger,label:v,className:w.className,style:w.style,children:l(t,{"aria-hidden":!0,className:T.className,style:{...T.style,transform:E}})})}),l(n.Panel,{children:g})]})}export{f as ErrorStateMoreDetails};

package/dist/shared/widgets/error-state/compound/components/Rows.d.ts

@@ -0,0 +1,57 @@
+import { ErrorStateRowProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/error-state/compound/components/Rows.d.ts
+/**
+ * Predefined `Fill status` row — renders the danger-toned status text.
+ * Pulls the value text from `fillStatusLabel` on the {@link ErrorState}
+ * root, falling back to `"Failed"`. Always renders.
+ */
+declare function ErrorStateFillStatusRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Predefined `Source` row — wallet icon + name + truncated address +
+ * explorer link. Reads `sourceWallet` from the {@link ErrorState} root
+ * and renders nothing when the wallet payload is missing.
+ */
+declare function ErrorStateSourceRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Predefined `Destination` row. Reads `destination` from the
+ * {@link ErrorState} root and renders nothing when the payload is
+ * missing.
+ */
+declare function ErrorStateDestinationRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Predefined `You receive` row — `<icon> amount symbol` (struck through).
+ * Reads `receiveAmount` and `receiveAsset` from the {@link ErrorState}
+ * root and renders nothing when either is missing.
+ */
+declare function ErrorStateYouReceiveRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Predefined `Deposit tx` row inside `ErrorState.MoreDetails`. Reads
+ * `depositTx` from the {@link ErrorState} root.
+ */
+declare function ErrorStateDepositTxRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Predefined `Order submitted` row inside `ErrorState.MoreDetails`.
+ */
+declare function ErrorStateSubmittedAtRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Predefined `Order failed` row inside `ErrorState.MoreDetails`.
+ */
+declare function ErrorStateFailedAtRow({
+  label
+}?: ErrorStateRowProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ErrorStateDepositTxRow, ErrorStateDestinationRow, ErrorStateFailedAtRow, ErrorStateFillStatusRow, ErrorStateSourceRow, ErrorStateSubmittedAtRow, ErrorStateYouReceiveRow };

package/dist/shared/widgets/error-state/compound/components/Rows.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{TxHashValue as t}from"../../../../primitives/TxHashValue/TxHashValue.js";import"../../../../primitives/TxHashValue/index.js";import{WalletValue as n}from"../../../../primitives/WalletValue/WalletValue.js";import"../../../../primitives/WalletValue/index.js";import{useErrorStateContext as r}from"../context.js";import{ErrorStateAssetValue as i}from"./AssetValue.js";import{ErrorStateDetail as a}from"./Detail.js";import{ErrorStateStatusValue as o}from"./StatusValue.js";import{jsx as s}from"react/jsx-runtime";function c({label:t}={}){let n=r(`ErrorState.FillStatusRow`),{_:i}=e();return s(a,{label:t??i({id:`yxnt3y`,message:`Fill status`}),value:s(o,{children:n.fillStatusLabel??i({id:`7Bj3x9`,message:`Failed`})})})}function l({label:t}={}){let i=r(`ErrorState.SourceRow`),{_:o}=e();if(!i.sourceWallet)return null;let{name:c,address:l,explorerUrl:u}=i.sourceWallet;return s(a,{label:t??o({id:`wdxz7K`,message:`Source`}),value:s(n,{name:c??o({id:`sb9Y58`,message:`Wallet`}),address:l,...u?{explorerUrl:u}:{},density:`compact`,hideIcon:!0})})}function u({label:t}={}){let i=r(`ErrorState.DestinationRow`),{_:o}=e();if(!i.destination)return null;let{name:c,address:l}=i.destination;return s(a,{label:t??o({id:`Enslfm`,message:`Destination`}),value:s(n,{name:c??o({id:`AeXO77`,message:`Account`}),address:l,density:`compact`,hideIcon:!0})})}function d({label:t}={}){let n=r(`ErrorState.YouReceiveRow`),{_:o}=e();if(n.receiveAmount===void 0||!n.receiveAsset)return null;let c=n.receiveAsset;return s(a,{label:t??o({id:`88cUW-`,message:`You receive`}),value:s(i,{amount:n.receiveAmount,symbol:c.symbol,...c.chainId===void 0?{}:{chainId:c.chainId},...c.address?{address:c.address}:{},...c.isNative===void 0?{}:{isNative:c.isNative},...c.logoUrl?{logoUrl:c.logoUrl}:{}})})}function f({label:n}={}){let i=r(`ErrorState.DepositTxRow`),{_:o}=e();return i.depositTx?s(a,{label:n??o({id:`Q12Rrs`,message:`Deposit tx`}),value:s(t,{hash:i.depositTx.hash,...i.depositTx.explorerUrl?{explorerUrl:i.depositTx.explorerUrl}:{}})}):null}function p({label:t}={}){let n=r(`ErrorState.SubmittedAtRow`),{_:i}=e();return n.submittedAt===void 0?null:s(a,{label:t??i({id:`TT0aVH`,message:`Order submitted`}),value:n.submittedAt})}function m({label:t}={}){let n=r(`ErrorState.FailedAtRow`),{_:i}=e();return n.failedAt===void 0?null:s(a,{label:t??i({id:`VAZUpd`,message:`Order failed`}),value:n.failedAt})}export{f as ErrorStateDepositTxRow,u as ErrorStateDestinationRow,m as ErrorStateFailedAtRow,c as ErrorStateFillStatusRow,l as ErrorStateSourceRow,p as ErrorStateSubmittedAtRow,d as ErrorStateYouReceiveRow};

package/dist/shared/widgets/error-state/compound/components/StatusValue.d.ts

@@ -0,0 +1,14 @@
+import { ErrorStateStatusValueProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/error-state/compound/components/StatusValue.d.ts
+/**
+ * Renders a status label inside a `Detail` row. `tone="failed"` (default) paints the kit's danger red;
+ * `tone="neutral"` falls back to the row's primary text color so callers can render mixed-status receipts.
+ */
+declare function ErrorStateStatusValue({
+  tone,
+  children
+}: ErrorStateStatusValueProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ErrorStateStatusValue };

package/dist/shared/widgets/error-state/compound/components/StatusValue.js

@@ -0,0 +1 @@
+"use client";import{text as e}from"../../../../ui/Text/Text.js";import"../../../../../ui/index.js";import{ERROR_STATE_SLOTS as t}from"../ErrorState.slots.js";import{styles as n}from"../ErrorState.styles.js";import{jsx as r}from"react/jsx-runtime";import*as i from"@stylexjs/stylex";function a({tone:a=`failed`,children:o}){return r(e.span,{"data-stridge-slot":t.statusValue,size:`meta`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,color:a===`failed`?`inherit`:`default`,...i.props(a===`failed`?n.statusValueFailed:null),children:o})}export{a as ErrorStateStatusValue};

package/dist/shared/widgets/error-state/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 <ErrorState>.`);return r}export{n as ErrorStateContext,r as useErrorStateContext};

package/dist/shared/widgets/error-state/compound/index.d.ts

@@ -0,0 +1,3 @@
+import { ErrorStateActionsProps, ErrorStateAsset, ErrorStateAssetValueProps, ErrorStateBodyProps, ErrorStateDestination, ErrorStateDetailProps, ErrorStateDetailsProps, ErrorStateDialogProps, ErrorStateDisclosureChevronProps, ErrorStateHeaderProps, ErrorStateHelp, ErrorStateHelpInfoProps, ErrorStateHeroProps, ErrorStateMoreDetailsProps, ErrorStateProps, ErrorStateRowProps, ErrorStateSourceWallet, ErrorStateStatusValueProps, ErrorStateTxRef } from "./types.js";
+import { ErrorState } from "./ErrorState.js";
+import { ERROR_STATE_SLOTS, ErrorStateSlot } from "./ErrorState.slots.js";

package/dist/shared/widgets/error-state/compound/index.js

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

package/dist/shared/widgets/error-state/compound/types.d.ts

@@ -0,0 +1,291 @@
+import { DialogShellControls } from "../../../dialog/DialogShell.js";
+import { AssetDescriptor } from "../../asset-descriptor.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/shared/widgets/error-state/compound/types.d.ts
+/**
+ * Config for the optional help-info banner rendered between the receipt card and the action row. When omitted,
+ * the banner is hidden entirely.
+ */
+interface ErrorStateHelp {
+  /**
+   * External URL the link opens in a new tab.
+   */
+  url: string;
+  /**
+   * Banner copy preceding the link. Defaults to `"Experiencing problems?"`.
+   */
+  message?: string;
+  /**
+   * Visible link label. Defaults to `"Get help"`.
+   */
+  ctaLabel?: string;
+}
+/**
+ * The asset that didn't credit — drives the `<YouReceiveRow>`'s logo. Aliased to the kit-wide
+ * {@link AssetDescriptor}.
+ */
+type ErrorStateAsset = AssetDescriptor;
+/**
+ * Source-wallet payload backing the predefined `Source` row.
+ */
+interface ErrorStateSourceWallet {
+  /** Wallet display name (e.g. `"Wallet"`). */
+  name?: string;
+  /** Pre-formatted address string. */
+  address: string;
+  /** Explorer URL for the wallet on its native chain. */
+  explorerUrl?: string;
+}
+/**
+ * Destination payload backing the predefined `Destination` row.
+ */
+interface ErrorStateDestination {
+  /** Display name (e.g. `"Account"`). */
+  name?: string;
+  /** Pre-formatted destination address. */
+  address: string;
+}
+/**
+ * Tx-hash payload backing the predefined `Deposit tx` row.
+ */
+interface ErrorStateTxRef {
+  /** Pre-formatted hash string. */
+  hash: string;
+  /** Explorer URL for the tx. */
+  explorerUrl?: string;
+}
+/**
+ * Props for `<ErrorState.Dialog>` — the dialog form of the ErrorState
+ * widget. Combines the widget root props with the shared dialog shell
+ * controls (`open` / `defaultOpen` / `onOpenChange` / `trigger`).
+ */
+type ErrorStateDialogProps = ErrorStateProps & DialogShellControls;
+/**
+ * Public props accepted by the {@link ErrorState} root.
+ */
+interface ErrorStateProps {
+  /**
+   * Hero title text. Defaults to `"Deposit failed"`.
+   */
+  headline?: string;
+  /**
+   * Reason subtext rendered below the headline (e.g. `"Transaction rejected: adaptor call failed."`). Hides the
+   * line entirely when omitted.
+   */
+  reason?: string;
+  /**
+   * Optional help-info banner config. When omitted, the banner is hidden.
+   */
+  help?: ErrorStateHelp;
+  /**
+   * Optional override for the `Header` title. Defaults to
+   * `"Deposit failed"`.
+   */
+  headerTitle?: string;
+  /**
+   * Optional override for the `<FillStatusRow>` value text. Defaults to
+   * `"Failed"`.
+   */
+  fillStatusLabel?: string;
+  /**
+   * Source-wallet payload — surfaces as the `Source` row inside
+   * `<ErrorState.SourceRow />`.
+   */
+  sourceWallet?: ErrorStateSourceWallet;
+  /**
+   * Destination payload — surfaces as the `Destination` row inside
+   * `<ErrorState.DestinationRow />`.
+   */
+  destination?: ErrorStateDestination;
+  /**
+   * Pre-formatted receive amount (e.g. `"0.99790"`). Surfaces as part
+   * of the `<ErrorState.YouReceiveRow />`'s value.
+   */
+  receiveAmount?: string;
+  /**
+   * The asset that didn't credit — drives the `<YouReceiveRow>`'s
+   * logo and symbol.
+   */
+  receiveAsset?: ErrorStateAsset;
+  /**
+   * Source-chain deposit tx — surfaces as the `Deposit tx` row inside
+   * `<ErrorState.DepositTxRow />`.
+   */
+  depositTx?: ErrorStateTxRef;
+  /**
+   * Pre-formatted "order submitted" timestamp — surfaces as the
+   * `Order submitted` row inside `<ErrorState.SubmittedAtRow />`.
+   */
+  submittedAt?: string;
+  /**
+   * Pre-formatted "order failed" timestamp — surfaces as the
+   * `Order failed` row inside `<ErrorState.FailedAtRow />`.
+   */
+  failedAt?: string;
+  /**
+   * Click handler routed to the primary Try-again CTA on the Actions
+   * row.
+   */
+  onTryAgain?: () => void;
+  /**
+   * Optional override for the Try-again CTA label. Defaults to
+   * `"Try again"`.
+   */
+  tryAgainLabel?: string;
+  /**
+   * Compound parts; see `ErrorState.Header`, `ErrorState.Hero`, 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 ErrorStateBodyProps = ComponentProps<"div">;
+/**
+ * Props for `ErrorState.Header`.
+ */
+interface ErrorStateHeaderProps {
+  /**
+   * Optional override for the title rendered in this slot. Defaults to
+   * the `headerTitle` set on the {@link ErrorState} root, falling back
+   * to `"Deposit failed"`.
+   */
+  title?: string;
+}
+/**
+ * Props for `ErrorState.Hero`. Accepts no overrides; reads everything from context.
+ */
+type ErrorStateHeroProps = Record<string, never>;
+/**
+ * Props for `ErrorState.Details` (list container).
+ */
+interface ErrorStateDetailsProps {
+  /**
+   * `ErrorState.Detail` children.
+   */
+  children?: ReactNode;
+}
+/**
+ * Props for `ErrorState.Detail` (single row).
+ */
+interface ErrorStateDetailProps {
+  /**
+   * Row label rendered on the leading edge.
+   */
+  label: ReactNode;
+  /**
+   * Row value rendered on the trailing edge. Accepts a free-form `ReactNode`, so callers can mount the canonical
+   * helpers or arbitrary inline content.
+   */
+  value: ReactNode;
+}
+/**
+ * Props for the predefined detail rows
+ * ({@link ErrorState.FillStatusRow}, {@link ErrorState.SourceRow},
+ * {@link ErrorState.DestinationRow}, {@link ErrorState.YouReceiveRow},
+ * {@link ErrorState.DepositTxRow}, {@link ErrorState.SubmittedAtRow},
+ * {@link ErrorState.FailedAtRow}). Each row pulls its value from the
+ * {@link ErrorState} root's payload and renders nothing when its datum
+ * is missing.
+ */
+interface ErrorStateRowProps {
+  /** Override the row label. */
+  label?: string;
+}
+/**
+ * Props for `ErrorState.StatusValue`. Renders a status label inside a `Detail` row.
+ */
+interface ErrorStateStatusValueProps {
+  /**
+   * Rendered tone. `"failed"` (default) uses the kit's danger red; `"neutral"` falls back to the row's primary
+   * text color.
+   */
+  tone?: "failed" | "neutral";
+  /**
+   * Status text (e.g. `"Failed"`, `"Reverted"`, `"Cancelled"`).
+   */
+  children: ReactNode;
+}
+/**
+ * Props for `ErrorState.AssetValue` — `[icon] amount symbol`, optionally struck-through.
+ * Pre-formatted by driver transformer code (e.g. `payload.receiveAmount.formatted`); the
+ * compound never invokes `Intl.NumberFormat` itself.
+ */
+interface ErrorStateAssetValueProps {
+  /** Pre-formatted amount string (e.g. `"0.99790"`). */
+  amount: string;
+  /** Asset symbol, e.g. `"USDC"`. */
+  symbol: string;
+  /** EIP-155 chain id used to resolve the asset's logo. */
+  chainId?: number;
+  /** ERC-20 contract address on `chainId`. Omit for chain-native tokens. */
+  address?: string;
+  /** `true` for chain-native tokens (ETH, MATIC, …). */
+  isNative?: boolean;
+  /** Logo URL — final URL fallback before the gradient+letter visual. */
+  logoUrl?: string;
+  /**
+   * Whether the amount + symbol render with a strike-through. Defaults to `true`. The icon
+   * never strikes — it stays a plain visual anchor.
+   */
+  struck?: boolean;
+}
+/**
+ * Props for `ErrorState.DisclosureChevron`. Accepts no overrides; renders the trailing chevron-right glyph used
+ * in static "more details" rows that link out instead of expanding inline.
+ *
+ * For inline expand/collapse, use {@link ErrorStateMoreDetailsProps} instead.
+ */
+type ErrorStateDisclosureChevronProps = Record<string, never>;
+/**
+ * Props for `ErrorState.MoreDetails` — a collapsible row that expands inline to surface additional context.
+ * Children render as flat sibling rows underneath the trigger.
+ */
+interface ErrorStateMoreDetailsProps {
+  /**
+   * Trigger row label. Defaults to `"More details"`.
+   */
+  label?: ReactNode;
+  /**
+   * Initial open state for the uncontrolled case. Defaults to `false`.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled open state. When set, `defaultOpen` is ignored.
+   */
+  open?: boolean;
+  /**
+   * Fired when the open state changes (both controlled and uncontrolled).
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Detail rows rendered when expanded. Pass `ErrorState.Detail` children.
+   */
+  children?: ReactNode;
+}
+/**
+ * Props for `ErrorState.HelpInfo`. Accepts no overrides; reads `help` from context. Returns `null` when no `help`
+ * is configured on the root, so it can be mounted unconditionally.
+ */
+type ErrorStateHelpInfoProps = Record<string, never>;
+/**
+ * Props for `ErrorState.Actions`.
+ */
+interface ErrorStateActionsProps {
+  /**
+   * Optional override for the Try-again click handler. Defaults to the
+   * `onTryAgain` set on the {@link ErrorState} root.
+   */
+  onTryAgain?: () => void;
+  /**
+   * Optional override for the Try-again label. Defaults to the
+   * `tryAgainLabel` set on the {@link ErrorState} root, falling back
+   * to `"Try again"`.
+   */
+  tryAgainLabel?: string;
+}
+//#endregion
+export { ErrorStateActionsProps, ErrorStateAsset, ErrorStateAssetValueProps, ErrorStateBodyProps, ErrorStateDestination, ErrorStateDetailProps, ErrorStateDetailsProps, ErrorStateDialogProps, ErrorStateDisclosureChevronProps, ErrorStateHeaderProps, ErrorStateHelp, ErrorStateHelpInfoProps, ErrorStateHeroProps, ErrorStateMoreDetailsProps, ErrorStateProps, ErrorStateRowProps, ErrorStateSourceWallet, ErrorStateStatusValueProps, ErrorStateTxRef };

package/dist/shared/widgets/processing-state/compound/ProcessingState.d.ts

@@ -0,0 +1,77 @@
+import { TxHashValueProps } from "../../../primitives/TxHashValue/types.js";
+import { TxHashValue } from "../../../primitives/TxHashValue/TxHashValue.js";
+import { WalletValue, WalletValueProps } from "../../../primitives/WalletValue/WalletValue.js";
+import { ProcessingStateActionsProps, ProcessingStateBodyProps, ProcessingStateDetailProps, ProcessingStateDetailsProps, ProcessingStateDialogProps, ProcessingStateHeaderProps, ProcessingStateHeroProps, ProcessingStateProps, ProcessingStateRowProps, ProcessingStateStatusPillProps } from "./types.js";
+import { ProcessingStateActions } from "./components/Actions.js";
+import { ProcessingStateDetail } from "./components/Detail.js";
+import { ProcessingStateDetails } from "./components/Details.js";
+import { ProcessingStateHeader } from "./components/Header.js";
+import { ProcessingStateHero } from "./components/Hero.js";
+import { ProcessingStateDetectedAtRow, ProcessingStateSourceRow, ProcessingStateSourceTxRow, ProcessingStateSubmittedAtRow } from "./components/Rows.js";
+import { ProcessingStateStatusPill } from "./components/StatusPill.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/processing-state/compound/ProcessingState.d.ts
+/**
+ * Root of the ProcessingState compound. Renders the modal-frame card surface and surfaces the in-flight
+ * transaction (amount + asset + destination context) to every compound part rendered inside it. Use this for any
+ * deposit that has been detected on-source but not yet credited at the destination.
+ *
+ * Parts:
+ * - {@link ProcessingState.Header}
+ * - {@link ProcessingState.Body}
+ * - {@link ProcessingState.Hero}
+ * - {@link ProcessingState.StatusPill}
+ * - {@link ProcessingState.Details}
+ * - {@link ProcessingState.Detail}
+ * - {@link ProcessingState.Actions}
+ *
+ * Helpers:
+ * - {@link ProcessingState.WalletValue} — wallet icon + name + truncated address + explorer link
+ * - {@link ProcessingState.TxHashValue} — tx hash + explorer link
+ *
+ * Dialog form: {@link ProcessingState.Dialog} pre-composes the widget
+ * into a `Dialog.Root + Dialog.Trigger + Dialog.Content` shell — the
+ * production-recommended entry point. Use the bare `ProcessingState`
+ * form when you want the widget mounted inline.
+ */
+declare function ProcessingState(props: ProcessingStateProps): _$react_jsx_runtime0.JSX.Element;
+declare function ProcessingStateBody(props: ProcessingStateBodyProps): _$react_jsx_runtime0.JSX.Element;
+declare function ProcessingStateDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  children,
+  ...rootProps
+}: ProcessingStateDialogProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace ProcessingState {
+  type Props = ProcessingStateProps;
+  type HeaderProps = ProcessingStateHeaderProps;
+  type BodyProps = ProcessingStateBodyProps;
+  type HeroProps = ProcessingStateHeroProps;
+  type StatusPillProps = ProcessingStateStatusPillProps;
+  type DetailsProps = ProcessingStateDetailsProps;
+  type DetailProps = ProcessingStateDetailProps;
+  type ActionsProps = ProcessingStateActionsProps;
+  type RowProps = ProcessingStateRowProps;
+  type WalletValueProps = WalletValueProps;
+  type TxHashValueProps = TxHashValueProps;
+  type DialogProps = ProcessingStateDialogProps;
+  const Header: typeof ProcessingStateHeader;
+  const Body: typeof ProcessingStateBody;
+  const Hero: typeof ProcessingStateHero;
+  const StatusPill: typeof ProcessingStateStatusPill;
+  const Details: typeof ProcessingStateDetails;
+  const Detail: typeof ProcessingStateDetail;
+  const Actions: typeof ProcessingStateActions;
+  const SourceRow: typeof ProcessingStateSourceRow;
+  const SourceTxRow: typeof ProcessingStateSourceTxRow;
+  const SubmittedAtRow: typeof ProcessingStateSubmittedAtRow;
+  const DetectedAtRow: typeof ProcessingStateDetectedAtRow;
+  const WalletValue: typeof WalletValue;
+  const TxHashValue: typeof TxHashValue;
+  const Dialog: typeof ProcessingStateDialog;
+}
+//#endregion
+export { ProcessingState };

package/dist/shared/widgets/processing-state/compound/ProcessingState.js

@@ -0,0 +1 @@
+"use client";import{DialogShell as e}from"../../../dialog/DialogShell.js";import{Card as t}from"../../../ui/Card/Card.js";import"../../../../ui/index.js";import{Frame as n}from"../../../dialog/Frame.js";import{TxHashValue as r}from"../../../primitives/TxHashValue/TxHashValue.js";import"../../../primitives/TxHashValue/index.js";import{WalletValue as i}from"../../../primitives/WalletValue/WalletValue.js";import"../../../primitives/WalletValue/index.js";import{ProcessingStateContext as a}from"./context.js";import{PROCESSING_STATE_SLOTS as o}from"./ProcessingState.slots.js";import{styles as s}from"./ProcessingState.styles.js";import{ProcessingStateActions as c}from"./components/Actions.js";import{ProcessingStateDetail as l}from"./components/Detail.js";import{ProcessingStateDetails as u}from"./components/Details.js";import{ProcessingStateHeader as d}from"./components/Header.js";import{ProcessingStateHero as f}from"./components/Hero.js";import{ProcessingStateDetectedAtRow as p,ProcessingStateSourceRow as m,ProcessingStateSourceTxRow as h,ProcessingStateSubmittedAtRow as g}from"./components/Rows.js";import{ProcessingStateStatusPill as _}from"./components/StatusPill.js";import{useMemo as v}from"react";import{jsx as y}from"react/jsx-runtime";import*as b from"@stylexjs/stylex";function x(e){let{amount:t,creditedAsset:r,creditedTo:i,loading:c,headerTitle:l,onBack:u,statusPillLabel:d,sourceWallet:f,sourceTx:p,submittedAt:m,detectedAt:h,onClose:g,closeLabel:_,children:x}=e,S=v(()=>({amount:t,creditedAsset:r,creditedTo:i,...c?{loading:!0}:{},headerTitle:l,onBack:u,statusPillLabel:d,sourceWallet:f,sourceTx:p,submittedAt:m,detectedAt:h,onClose:g,closeLabel:_}),[t,r,i,c,l,u,d,f,p,m,h,g,_]);return y(a.Provider,{value:S,children:y(n,{"data-stridge-slot":o.root,...b.props(s.root),children:x})})}function S(e){return y(t.Body,{"data-stridge-slot":o.body,...e})}function C({open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:a,...o}){return y(e,{open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:y(x,{...o,children:a})})}(function(e){e.Header=d,e.Body=S,e.Hero=f,e.StatusPill=_,e.Details=u,e.Detail=l,e.Actions=c,e.SourceRow=m,e.SourceTxRow=h,e.SubmittedAtRow=g,e.DetectedAtRow=p,e.WalletValue=i,e.TxHashValue=r,e.Dialog=C})(x||={});export{x as ProcessingState};

package/dist/shared/widgets/processing-state/compound/ProcessingState.slots.d.ts

@@ -0,0 +1,15 @@
+//#region src/shared/widgets/processing-state/compound/ProcessingState.slots.d.ts
+declare const PROCESSING_STATE_SLOTS: {
+  readonly root: "processing-state";
+  readonly header: "processing-state-header";
+  readonly body: "processing-state-body";
+  readonly hero: "processing-state-hero";
+  readonly statusPill: "processing-state-status-pill";
+  readonly statusPillWrap: "processing-state-status-pill-wrap";
+  readonly actions: "processing-state-actions";
+  readonly details: "processing-state-details";
+  readonly detail: "processing-state-detail";
+};
+type ProcessingStateSlot = (typeof PROCESSING_STATE_SLOTS)[keyof typeof PROCESSING_STATE_SLOTS];
+//#endregion
+export { PROCESSING_STATE_SLOTS, ProcessingStateSlot };

package/dist/shared/widgets/processing-state/compound/ProcessingState.slots.js

@@ -0,0 +1 @@
+const e={root:`processing-state`,header:`processing-state-header`,body:`processing-state-body`,hero:`processing-state-hero`,statusPill:`processing-state-status-pill`,statusPillWrap:`processing-state-status-pill-wrap`,actions:`processing-state-actions`,details:`processing-state-details`,detail:`processing-state-detail`};export{e as PROCESSING_STATE_SLOTS};

package/dist/shared/widgets/processing-state/compound/ProcessingState.styles.js

@@ -0,0 +1 @@
+const e={root:{"ProcessingState__styles.root":`ProcessingState__styles.root`,"position-kVAEAm":`x1n2onr6`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x17fpy1y`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:26`},header:{"ProcessingState__styles.header":`ProcessingState__styles.header`,"justifyContent-kjj79g":`x1qughib`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:34`},headerLeft:{"ProcessingState__styles.headerLeft":`ProcessingState__styles.headerLeft`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x1v2ro7d`,"minWidth-k7Eaqz":`xeuugli`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:37`},closeIcon:{"ProcessingState__styles.closeIcon":`ProcessingState__styles.closeIcon`,"width-kzqmXN":`xsmyaan`,"height-kZKoxP":`x1kpxq89`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xdksllq`,"strokeWidth-kfJifR":`x1k315e8`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:44`},backIcon:{"ProcessingState__styles.backIcon":`ProcessingState__styles.backIcon`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`x1v9usgg`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xdksllq`,"strokeWidth-kfJifR":`xhxwl1`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:51`},hero:{"ProcessingState__styles.hero":`ProcessingState__styles.hero`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x1v2ro7d`,"paddingTop-kLKAdn":`x1miatn0`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,"paddingBottom-kGO01o":`xwib8y2`,"paddingInlineStart-kZCmMZ":`xz7312c`,"animationName-kKVMdj":`xv305lp`,"animationDuration-k44tkh":`xmprevt x1s1fvk8`,"animationTimingFunction-kyAemX":`xa3vuyk`,"animationFillMode-kWV6AL":`x1u6ievf`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:59`},heroAmountRow:{"ProcessingState__styles.heroAmountRow":`ProcessingState__styles.heroAmountRow`,"display-k1xSpc":`x3nfvp2`,"alignItems-kGNEyG":`x1pha0wt`,"justifyContent-kjj79g":`xl56j7k`,"gap-kOIVth":`x883omv`,"marginTop-keoZOQ":`xdj266r`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:76`},heroAmountIcon:{"ProcessingState__styles.heroAmountIcon":`ProcessingState__styles.heroAmountIcon`,"alignSelf-kSGwAc":`xamitd3`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:83`},statusPillWrap:{"ProcessingState__styles.statusPillWrap":`ProcessingState__styles.statusPillWrap`,"display-k1xSpc":`x78zum5`,"justifyContent-kjj79g":`xl56j7k`,"paddingTop-kLKAdn":`xyinxu5`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,"paddingBottom-kGO01o":`x1t4gjm`,"paddingInlineStart-kZCmMZ":`xz7312c`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:87`},statusPill:{"ProcessingState__styles.statusPill":`ProcessingState__styles.statusPill`,"display-k1xSpc":`x3nfvp2`,"flexDirection-kXwgrk":`x1q0g3np`,"alignItems-kGNEyG":`x6s0dn4`,"gap-kOIVth":`x883omv`,"paddingBlock-k8WAf4":`x1vvogim`,"paddingInlineStart-kZCmMZ":`x1g0dm76`,"paddingInlineEnd-kwRFfy":`x1pic42t`,"borderRadius-kaIpWk":`x1npxkrn`,"backgroundColor-kWkggS":`x407w7c`,"borderWidth-kMzoRj":`xmkeg23`,"borderStyle-ksu8eU":`x1y0btm7`,"borderColor-kVAM5u":`x1bue7yx`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:95`},statusPillIcon:{"ProcessingState__styles.statusPillIcon":`ProcessingState__styles.statusPillIcon`,"display-k1xSpc":`x1lliihq`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`xmix8c7`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`x1me39qh`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:109`},statusPillDot:{"ProcessingState__styles.statusPillDot":`ProcessingState__styles.statusPillDot`,"animationName-kKVMdj":`x194e4vk x1aquc0h`,"animationDuration-k44tkh":`x1m9vv7p`,"animationIterationCount-ko0y90":`xa4qsjk`,"animationTimingFunction-kyAemX":`x4hg4is`,"opacity-kSiTet":`x197sbye`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:116`},statusPillDotDelay0:{"ProcessingState__styles.statusPillDotDelay0":`ProcessingState__styles.statusPillDotDelay0`,"animationDelay-kKxzle":`x1uzojwf`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:126`},statusPillDotDelay1:{"ProcessingState__styles.statusPillDotDelay1":`ProcessingState__styles.statusPillDotDelay1`,"animationDelay-kKxzle":`x1k0bccz`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:129`},statusPillDotDelay2:{"ProcessingState__styles.statusPillDotDelay2":`ProcessingState__styles.statusPillDotDelay2`,"animationDelay-kKxzle":`x1t83zlg`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:132`},statusPillDotDelay3:{"ProcessingState__styles.statusPillDotDelay3":`ProcessingState__styles.statusPillDotDelay3`,"animationDelay-kKxzle":`x1x1c4bx`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:135`},statusPillDotDelay4:{"ProcessingState__styles.statusPillDotDelay4":`ProcessingState__styles.statusPillDotDelay4`,"animationDelay-kKxzle":`x1xwhvez`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:138`},statusPillDotDelay5:{"ProcessingState__styles.statusPillDotDelay5":`ProcessingState__styles.statusPillDotDelay5`,"animationDelay-kKxzle":`xfjzax6`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:141`},detailsSection:{"ProcessingState__styles.detailsSection":`ProcessingState__styles.detailsSection`,"marginInlineStart-keTefX":`xnzr9dm`,"marginInlineEnd-k71WvV":`xnqxrjt`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:151`},actions:{"ProcessingState__styles.actions":`ProcessingState__styles.actions`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"alignItems-kGNEyG":`x1qjc9v5`,"gap-kOIVth":`x1v2ro7d`,"paddingTop-kLKAdn":`x1xy6bms`,"paddingInlineEnd-kwRFfy":`x1o5r3ls`,"paddingBottom-kGO01o":`x1t4gjm`,"paddingInlineStart-kZCmMZ":`xz7312c`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:156`},closeCta:{"ProcessingState__styles.closeCta":`ProcessingState__styles.closeCta`,"width-kzqmXN":`xh8yej3`,":focus-visible_boxShadow-kEtg5x":`xhatipn`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:174`},closeCtaInteractive:{"ProcessingState__styles.closeCtaInteractive":`ProcessingState__styles.closeCtaInteractive`,"cursor-kkrTdU":`x1ypdohk`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:180`},closeCtaInert:{"ProcessingState__styles.closeCtaInert":`ProcessingState__styles.closeCtaInert`,"cursor-kkrTdU":`xt0e3qv`,$$css:`@stridge/kit:src/shared/widgets/processing-state/compound/ProcessingState.styles.ts:183`}};export{e as styles};

package/dist/shared/widgets/processing-state/compound/components/Actions.d.ts

@@ -0,0 +1,17 @@
+import { ProcessingStateActionsProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/processing-state/compound/components/Actions.d.ts
+/**
+ * Action row with the primary "Close — we'll notify you" CTA. Rendered as a quiet/subdued button rather than the
+ * accent fill, since dismiss during an in-flight credit is a soft action.
+ *
+ * Reads `onClose` and `closeLabel` from the {@link ProcessingState} root
+ * by default; pass props to override per-instance.
+ */
+declare function ProcessingStateActions({
+  onClose,
+  closeLabel
+}?: ProcessingStateActionsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProcessingStateActions };

package/dist/shared/widgets/processing-state/compound/components/Actions.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{MailIcon as t}from"../../../../icons/MailIcon.js";import"../../../../../icons/index.js";import{Button as n}from"../../../../ui/Button/Button.js";import"../../../../ui/Button/index.js";import{text as r}from"../../../../ui/Text/Text.js";import"../../../../../ui/index.js";import{useProcessingStateContext as i}from"../context.js";import{PROCESSING_STATE_SLOTS as a}from"../ProcessingState.slots.js";import{styles as o}from"../ProcessingState.styles.js";import{jsx as s}from"react/jsx-runtime";import*as c from"@stylexjs/stylex";function l({onClose:l,closeLabel:u}={}){let d=i(`ProcessingState.Actions`),{_:f}=e(),p=l??d.onClose,m=u??d.closeLabel??f({id:`HfPDJV`,message:`Close — we'll notify you`}),h=typeof p==`function`;return s(`div`,{"data-stridge-slot":a.actions,...c.props(o.actions),children:s(n,{size:`cta`,variant:`secondary`,prefix:s(t,{"aria-hidden":!0}),onClick:h?p:void 0,...c.props(o.closeCta,h?o.closeCtaInteractive:o.closeCtaInert),children:s(r.span,{size:`callout`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,color:`inherit`,children:m})})})}export{l as ProcessingStateActions};

package/dist/shared/widgets/processing-state/compound/components/Detail.d.ts

@@ -0,0 +1,14 @@
+import { ProcessingStateDetailProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/processing-state/compound/components/Detail.d.ts
+/**
+ * A single label/value row inside `ProcessingState.Details`. `value` is freeform, so callers can compose with the
+ * canonical helpers (`WalletValue`, `TxHashValue`) or any inline content.
+ */
+declare function ProcessingStateDetail({
+  label,
+  value
+}: ProcessingStateDetailProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProcessingStateDetail };

package/dist/shared/widgets/processing-state/compound/components/Detail.js

@@ -0,0 +1 @@
+"use client";import{Details as e}from"../../../../ui/Details/Details.js";import"../../../../ui/Details/index.js";import{PROCESSING_STATE_SLOTS as t}from"../ProcessingState.slots.js";import{jsx as n}from"react/jsx-runtime";function r({label:r,value:i}){return n(e.Row,{"data-stridge-slot":t.detail,label:r,children:i})}export{r as ProcessingStateDetail};

package/dist/shared/widgets/processing-state/compound/components/Details.d.ts

@@ -0,0 +1,12 @@
+import { ProcessingStateDetailsProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/processing-state/compound/components/Details.d.ts
+/**
+ * Bordered card containing `ProcessingState.Detail` children.
+ */
+declare function ProcessingStateDetails({
+  children
+}: ProcessingStateDetailsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProcessingStateDetails };

package/dist/shared/widgets/processing-state/compound/components/Details.js

@@ -0,0 +1 @@
+"use client";import{Details as e}from"../../../../ui/Details/Details.js";import"../../../../ui/Details/index.js";import{PROCESSING_STATE_SLOTS as t}from"../ProcessingState.slots.js";import{styles as n}from"../ProcessingState.styles.js";import{jsx as r}from"react/jsx-runtime";import*as i from"@stylexjs/stylex";function a({children:a}){let o=i.props(n.detailsSection);return r(e,{"data-stridge-slot":t.details,className:o.className,style:o.style,children:a})}export{a as ProcessingStateDetails};

package/dist/shared/widgets/processing-state/compound/components/Header.d.ts

@@ -0,0 +1,15 @@
+import { ProcessingStateHeaderProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/processing-state/compound/components/Header.d.ts
+/**
+ * Header row with optional back button and title. The back button
+ * renders only when `onBack` is provided. Dismiss is the dialog frame's
+ * concern; the widget does not paint a close affordance.
+ */
+declare function ProcessingStateHeader({
+  title,
+  onBack
+}?: ProcessingStateHeaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProcessingStateHeader };

package/dist/shared/widgets/processing-state/compound/components/Header.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{ChevronLeftIcon as t}from"../../../../icons/ChevronLeftIcon.js";import"../../../../../icons/index.js";import{IconButton as n}from"../../../../ui/IconButton/IconButton.js";import{Card as r}from"../../../../ui/Card/Card.js";import{text as i}from"../../../../ui/Text/Text.js";import"../../../../../ui/index.js";import{useProcessingStateContext as a}from"../context.js";import{PROCESSING_STATE_SLOTS as o}from"../ProcessingState.slots.js";import{styles as s}from"../ProcessingState.styles.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";import*as u from"@stylexjs/stylex";function d({title:d,onBack:f}={}){let p=a(`ProcessingState.Header`),{_:m}=e(),h=d??p.headerTitle??m({id:`vrnnn9`,message:`Processing`}),g=f===null?void 0:f??p.onBack;return c(r.Header,{"data-stridge-slot":o.header,...u.props(s.header),children:l(`div`,{...u.props(s.headerLeft),children:[typeof g==`function`?c(n,{"aria-label":m({id:`iH8pgl`,message:`Back`}),onClick:g,children:c(t,{"aria-hidden":!0,...u.props(s.backIcon)})}):null,c(i.span,{size:`base`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,style:{margin:0},children:h})]})})}export{d as ProcessingStateHeader};

package/dist/shared/widgets/processing-state/compound/components/Hero.d.ts

@@ -0,0 +1,16 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/processing-state/compound/components/Hero.d.ts
+/**
+ * Hero block: uppercase "CREDITING" caption, the token amount row, and a destination subcaption. Reads its data
+ * from the `ProcessingState` root context.
+ *
+ * When `loading=true`, the amount span is omitted entirely so the row reads `[icon] USDC` instead
+ * of `[icon] 0 USDC` or a shimmer placeholder. Used by the transfer-crypto path where the
+ * credited amount isn't known until the indexer settles — showing a literal `0` reads as
+ * "credited zero", and a shimmer over a number we never had reads as a fake placeholder.
+ * Surfacing only the symbol is the truthful UX.
+ */
+declare function ProcessingStateHero(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProcessingStateHero };

package/dist/shared/widgets/processing-state/compound/components/Hero.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{text as t}from"../../../../ui/Text/Text.js";import{TokenLogo as n}from"../../../../ui/TokenLogo/TokenLogo.js";import"../../../../ui/TokenLogo/index.js";import"../../../../../ui/index.js";import{useProcessingStateContext as r}from"../context.js";import{PROCESSING_STATE_SLOTS as i}from"../ProcessingState.slots.js";import{styles as a}from"../ProcessingState.styles.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"@stylexjs/stylex";function l(){let l=r(`ProcessingState.Hero`),{_:u}=e(),d=l.creditedTo??l.creditedAsset.symbol;return s(`div`,{"data-stridge-slot":i.hero,...c.props(a.hero),children:[o(t.span,{size:`caption`,fontWeight:`semibold`,leading:`tight`,tracking:`widest`,transform:`uppercase`,align:`center`,color:`tertiary`,children:u({id:`zYD5xm`,message:`Crediting`})}),s(`div`,{dir:`ltr`,...c.props(a.heroAmountRow),children:[o(n,{size:30,symbol:l.creditedAsset.symbol,...l.creditedAsset.chainId===void 0?{}:{chainId:l.creditedAsset.chainId},...l.creditedAsset.address===void 0?{}:{address:l.creditedAsset.address},...l.creditedAsset.isNative===void 0?{}:{isNative:l.creditedAsset.isNative},...l.creditedAsset.logoUrl===void 0?{}:{logoUrl:l.creditedAsset.logoUrl},hideChainBadge:!0,...c.props(a.heroAmountIcon)}),l.loading?null:o(t.span,{size:`4xl`,fontWeight:`semibold`,leading:`none`,tracking:`tight`,children:l.amount}),o(t.span,{size:l.loading?`4xl`:`xl`,fontWeight:`semibold`,leading:`none`,tracking:`tight`,children:l.creditedAsset.symbol})]}),o(t.span,{size:`meta`,fontWeight:`medium`,leading:`tight`,align:`center`,color:`subdued`,children:d})]})}export{l as ProcessingStateHero};