@gearbox-protocol/ui-kit 3.14.0-next.8 → 4.0.0-next.1

package/dist/types/components/graph/graph.d.ts

@@ -1,7 +1,9 @@
-import { ChartOptions, DeepPartial, Time } from 'lightweight-charts';
+import { ChartOptions, DeepPartial, LineStyle, LineWidth, Time, LineStyle as LineStyleEnum } from 'lightweight-charts';
 import { Point, YMeasureUnits } from './formatters';
 import { GraphTooltipProps } from './graph-tooltip';
 import * as React from "react";
+export type SeriesPriceScaleId = "left" | "right";
+export type SeriesChartType = "area" | "line";
 export interface SeriesConfig {
     data: Array<Point>;
     label: string;
@@ -14,6 +16,12 @@ export interface SeriesConfig {
     /** Lower gradient of the area fill */
     bottomColor?: string;
     yMeasureUnit?: YMeasureUnits;
+    /** Price scale when `dualYAxis` is enabled on Graph. */
+    priceScaleId?: SeriesPriceScaleId;
+    /** Render as line (no fill) instead of area. */
+    seriesType?: SeriesChartType;
+    /** Line dash style (line series only). */
+    lineStyle?: LineStyle;
 }
 export type VerticalLineOptions = Partial<{
     color: string;
@@ -23,7 +31,56 @@ export type VerticalLineOptions = Partial<{
     labelBackgroundColor: string;
     labelTextColor: string;
     showLabel: boolean;
+    /**
+     * Text shown only on hover of the line's badge (not rendered inline). Use it
+     * for a longer explanation while the badge itself shows just the value.
+     */
+    tooltipText: string;
 }>;
+/**
+ * Horizontal reference line drawn at a fixed Y (price) value, e.g. a
+ * liquidation price level. Rendered as a native lightweight-charts price line
+ * attached to a series, so it tracks the series' price scale and does not
+ * affect autoscale or tooltips.
+ */
+export interface PriceLineConfig {
+    /** Y value (price) where the horizontal line is drawn. */
+    price: number;
+    /**
+     * Label of the series to attach the line to. When omitted, the line is
+     * attached to the first series that has data (its price scale is used).
+     */
+    seriesLabel?: string;
+    /** Line color. Defaults to the destructive theme color. */
+    color?: string;
+    /** Text shown next to the line on the price axis. */
+    title?: string;
+    /** Line thickness (1–4). Default 1. */
+    lineWidth?: LineWidth;
+    /** Line dash style. Default dashed. */
+    lineStyle?: LineStyleEnum;
+    /** Whether to render the value label on the price axis. Default true. */
+    axisLabelVisible?: boolean;
+}
+/**
+ * Shaded horizontal band drawn between two Y (price) values across the full
+ * width of the chart — e.g. a liquidation "danger zone" below a health-factor
+ * threshold. Rendered behind the series as a lightweight-charts primitive, so
+ * it tracks the series' price scale and does not affect tooltips.
+ */
+export interface PriceZoneConfig {
+    /** Upper price bound. Omit to extend the band to the top of the pane. */
+    priceTop?: number;
+    /** Lower price bound. Omit to extend the band to the bottom of the pane. */
+    priceBottom?: number;
+    /** Fill color — use a translucent value. Defaults to a translucent destructive tint. */
+    color?: string;
+    /**
+     * Label of the series whose price scale the band is drawn against. When
+     * omitted, the first series with data is used.
+     */
+    seriesLabel?: string;
+}
 /**
  * Returns formatted label and value strings for a vertical line tooltip.
  * Used by Graph and by tests.
@@ -32,6 +89,19 @@ export declare function getVerticalLineTooltipContent(opts: VerticalLineOptions,
     labelText: string;
     valueStr: string;
 };
+/** Gap (px) kept between a vertical-line badge and the chart edge. */
+export declare const VERTICAL_LINE_LABEL_EDGE_PADDING = 4;
+/**
+ * Positions a vertical-line badge so it stays centered on its line while never
+ * overflowing the chart. When the badge would clip an edge it is nudged inward
+ * just enough to fit — it keeps `translateX(-50%)` so it stays visually anchored
+ * to the line instead of flipping fully to one side (which looks detached and
+ * crowds neighboring badges).
+ *
+ * `labelWidth` is the measured badge width; until it is known the badge is
+ * simply centered on the line.
+ */
+export declare function getVerticalLineLabelStyle(x: number, containerWidth: number, labelWidth?: number): Pick<React.CSSProperties, "left" | "transform">;
 /**
  * Step-forward interpolation: find the last data point with
  * `time <= crosshairTime` and return its value.
@@ -70,6 +140,17 @@ export interface GraphProps {
         xCoordinate: Time;
         options?: VerticalLineOptions;
     }>;
+    /**
+     * Horizontal reference lines drawn at fixed Y (price) values, e.g. a
+     * liquidation price level. Each line is attached to a series' price scale.
+     */
+    priceLineOptions?: Array<PriceLineConfig>;
+    /**
+     * Shaded horizontal bands (e.g. a liquidation danger zone) drawn behind the
+     * series. Each zone is attached to a series' price scale; finite bounds are
+     * included in the Y autoscale so the band stays visible.
+     */
+    zoneOptions?: Array<PriceZoneConfig>;
     /**
      * Number of decimal places for current value display.
      * If 0, rounds to whole numbers. Default is 4.
@@ -82,6 +163,17 @@ export interface GraphProps {
      * own scale and fills the chart independently.
      */
     useSharedPriceScale?: boolean;
+    /**
+     * When true, renders left and right Y axes using each series'
+     * `priceScaleId` ("left" | "right"). Ignores per-series hidden scales.
+     */
+    dualYAxis?: boolean;
+    /** Preferred default price scale when both left and right are visible. */
+    defaultVisiblePriceScaleId?: SeriesPriceScaleId;
+    /** Optional label for the left Y axis (dualYAxis mode). */
+    leftPriceScaleTitle?: string;
+    /** Optional label for the right Y axis (dualYAxis mode). */
+    rightPriceScaleTitle?: string;
     /**
      * When true (default), shows the current value and date in the top-left corner
      * in single-series mode. Set to false to hide.
@@ -115,10 +207,28 @@ export interface GraphProps {
      * axis drag-to-scale, axis double-click reset, and scroll/drag panning.
      */
     disableZoom?: boolean;
+    /**
+     * When true, the floating value tooltip is not pinned to the latest data
+     * point by default in multi-scale (separate Y axes) mode. The tooltip still
+     * appears while hovering the chart. Has no effect in single/shared-scale
+     * mode, where the default tooltip is already hidden.
+     */
+    hideDefaultTooltip?: boolean;
 }
 /**
  * Graph component that renders a chart using lightweight-charts library
  * with support for area series, custom tooltips, and vertical line annotations
  * Supports single or multiple series with different colors and legends
  */
-export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, priceLineOptions, zoneOptions, currentValueDecimals, useSharedPriceScale, dualYAxis, defaultVisiblePriceScaleId, leftPriceScaleTitle, rightPriceScaleTitle: _rightPriceScaleTitle, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, hideDefaultTooltip, }: GraphProps): React.ReactElement;
+export interface GraphLegendProps {
+    series: Array<SeriesConfig>;
+    onUnselect?: (label: string) => void;
+    /**
+     * When true, the legend is laid out inline (no absolute positioning) so it
+     * can be placed in a toolbar/header slot. When false (default), it overlays
+     * the top-left corner of the chart.
+     */
+    inline?: boolean;
+}
+export declare function GraphLegend({ series, onUnselect, inline, }: GraphLegendProps): React.ReactElement;

package/dist/types/components/graph/index.d.ts

@@ -1,6 +1,6 @@
 export * from './default-config';
 export { getXFormatter, getXFormatters, getYFormatter, type Point as GraphPoint, type XFormatters, type XMeasureUnits, type YMeasureUnits, } from './formatters';
-export { DEFAULT_SERIES_COLORS, Graph, type GraphProps, getSeriesColorPalette, getVerticalLineTooltipContent, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
+export { DEFAULT_SERIES_COLORS, Graph, GraphLegend, type GraphLegendProps, type GraphProps, getSeriesColorPalette, getVerticalLineLabelStyle, getVerticalLineTooltipContent, type PriceLineConfig, type PriceZoneConfig, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
 export * from './graph-current-value';
 export * from './graph-tooltip';
 export * from './graph-view';

package/dist/types/components/health-factor/health-factor.d.ts

@@ -18,21 +18,24 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
     /** Pre-computed zone; if not set, derived from value. */
     zone?: HFZones | null;
     /**
-     * How to indicate zone: "color" (text color only) or "bars" (StatusBars before value).
+     * How to indicate zone: "color" (text color only), "bars" (StatusBars before value),
+     * or "dot" (HealthDot after value, text stays default color).
      * @default "color"
      */
-    zoneType?: "color" | "bars";
+    zoneType?: "color" | "bars" | "dot";
 }
 /**
  * HealthFactor — displays health factor value with optional zone color or StatusBars.
  *
  * @usage
  * Use for account/collateral health: value in basis points, zero debt shows "N/A".
- * zoneType "color" colors the text; zoneType "bars" shows StatusBars (and optional color).
+ * zoneType "color" colors the text; zoneType "bars" shows StatusBars;
+ * zoneType "dot" shows a HealthDot dot after the value while keeping text default color.
  *
  * @example
  * ```tsx
  * <HealthFactor value={15000} debt={1000000n} />
+ * <HealthFactor value={15000} debt={1000000n} zoneType="dot" zone="good" />
  * <HealthFactor value={12000} debt={1000000n} zoneType="bars" zone="medium" />
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```

package/dist/types/components/help-tip/help-tip.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const iconColorVariants: (props?: ({
-    iconColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
-    iconHoverColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconHoverColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface HelpTipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
     /** Tooltip popup content (what appears when hovering the icon). */

package/dist/types/components/icon-button/icon-button.d.ts

@@ -4,7 +4,7 @@ import * as React from "react";
 /** Button type for IconButton — matches interface (A) theme variants */
 export type IconButtonType = "outlined" | "filled" | "filledDark" | "hollow" | "empty";
 declare const iconButtonVariants: (props?: ({
-    buttonType?: "filledDark" | "outlined" | "filled" | "empty" | "hollow" | null | undefined;
+    buttonType?: "filled" | "outlined" | "filledDark" | "hollow" | "empty" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IconButtonIconProps {
     /** Tailwind text color class (e.g. "text-foreground", "text-gray-60") */

package/dist/types/components/index.d.ts

@@ -1,59 +1,40 @@
 export * from './accordion';
-export * from './address';
 export * from './alert-badge';
 export * from './alert-dialog';
 export * from './alert-modal';
-export * from './apy';
-export * from './arc-loader';
-export * from './asset-line';
 export * from './assets-list-cell';
-export * from './assets-ratio';
 export * from './auth';
-export * from './avatar';
 export * from './badge';
+export * from './base';
 export * from './base-link';
 export * from './block-sync';
+export * from './block-sync-pill';
 export * from './breadcrumbs';
-export * from './button-checkbox';
+export * from './breakpoint-provider';
 export * from './buttons';
-export * from './card-grid';
 export * from './cards';
-export * from './carousel';
 export * from './checkbox';
 export * from './checkbox-item';
 export * from './client-adapters';
-export * from './colored-text';
-export * from './complex-input';
 export * from './composites';
-export type { ExternalAPYData, ExtraRewardApy, PoolBaseAPY, } from './compound-apy';
 export * from './compound-apy';
 export * from './confirm-menu';
-export * from './credit-session-status';
-export * from './currency-button';
-export * from './description';
 export * from './detailed-apy';
 export * from './detailed-page-title';
 export * from './dialog';
-export * from './dropdown-label';
+export * from './disabled-wrap';
 export * from './dropdown-menu';
 export * from './edit-input';
 export * from './error-message';
-export * from './error-view';
 export * from './explorer-links-dropdown';
 export * from './fadeout-loading';
 export * from './filter';
-export * from './form';
 export * from './formatted-number';
 export * from './graph';
-export * from './grid-td-cell';
 export * from './guard';
 export * from './head-cell';
 export * from './health-factor';
-export * from './help-center-container';
-export * from './help-sections';
 export * from './help-tip';
-export * from './hide-on';
-export * from './horizontal-indicator';
 export * from './icon-button';
 export * from './icons';
 export * from './image';
@@ -62,80 +43,50 @@ export * from './label';
 export * from './layout';
 export * from './legal-agreement';
 export * from './link';
-export * from './liquidation';
-export * from './liquidation-price';
 export * from './loader';
-export * from './loader-guard';
 export * from './loading';
 export * from './loading-bar';
-export * from './markdown-viewer';
 export * from './modal';
 export * from './navbar';
 export * from './navbar-logo';
 export * from './navigation-context';
 export * from './navitem';
-export * from './not-found';
-export * from './options-list';
-export * from './overflow';
-export * from './overflow-container';
-export * from './page-title';
-export * from './percent-indicator';
 export * from './points-icon';
 export * from './pool-apy-tooltip';
-export * from './pool-indicator-icon';
 export * from './pool-points-indicator';
-export * from './progress';
-export * from './progress-bar';
-export * from './progress-circle';
-export * from './radio-group';
 export * from './rounded-image';
-export * from './row';
+export * from './rwa-feature';
 export * from './rwa-styles';
-export * from './search-bar';
 export * from './search-line';
 export * from './segmented-control';
 export * from './select';
 export * from './separate-line';
-export * from './separator';
 export * from './short-string';
-export * from './signatures';
 export * from './simple-accordion';
 export * from './simple-dropdown';
 export * from './skeleton';
 export * from './slider';
-export * from './slider-token';
-export * from './smart-number-input';
 export * from './spinner';
 export * from './spinner-loader';
 export * from './split-list';
-export * from './stat-badge';
 export * from './status-dot';
 export * from './status-elements';
-export * from './status-triangle';
-export * from './stepper';
-export * from './styled-dropdown';
-export * from './switch';
 export * from './tab-control';
 export * from './table';
 export * from './tabs';
 export * from './text-button';
 export * from './textarea';
 export * from './theme-provider';
-export * from './theme-toggle';
-export * from './time-to-liquidation';
 export * from './tip-card';
-export * from './toggle';
 export * from './token-icon';
 export * from './token-symbol';
 export * from './token-template';
-export * from './tokens-list-cell';
 export * from './tooltip';
 export * from './trading-view';
 export * from './typed-intl';
 export * from './typography';
 export * from './vertical-indicator';
-export * from './vertical-list';
 export * from './vspace';
 export * from './with-copy';
-export * from './with-filter-button';
 export * from './with-title';
+export * from './yield-breakdown-tooltip';

package/dist/types/components/input/input.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const inputVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | null | undefined;
-    colorTheme?: "filledDark" | "filledLight" | "outlined" | null | undefined;
+    colorTheme?: "outlined" | "filledDark" | "filledLight" | null | undefined;
     variant?: "default" | "success" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**

package/dist/types/components/layout/app-footer/app-footer.d.ts

@@ -0,0 +1,62 @@
+import { BlockSyncProps } from '../../../types/footer';
+import * as React from "react";
+/**
+ * A single legal/navigation link rendered in {@link AppFooter}.
+ */
+export interface AppFooterLink {
+    label: string;
+    href: string;
+}
+/**
+ * Default footer links used by the Gearbox App (client-v3) shell footer.
+ *
+ * `Support` points to the Gearbox Discord invite, matching `DISCORD_ADDR`
+ * in the app config.
+ */
+export declare const DEFAULT_APP_FOOTER_LINKS: ReadonlyArray<AppFooterLink>;
+export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Legal / navigation links rendered on the right side.
+     * Defaults to {@link DEFAULT_APP_FOOTER_LINKS}.
+     */
+    links?: ReadonlyArray<AppFooterLink>;
+    /**
+     * Copyright node on the left. Defaults to
+     * `© Gearbox Protocol, {year}`.
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Year used in the default copyright. Defaults to the current year.
+     */
+    year?: number;
+    /**
+     * Whether to show the status pill on the far right. Defaults to `true`.
+     */
+    showStatus?: boolean;
+    /**
+     * Label rendered inside the status pill. Defaults to `Status`.
+     */
+    statusLabel?: React.ReactNode;
+    /**
+     * When provided, the status pill becomes a live network-synchronization
+     * indicator ({@link BlockSyncPill}): the dot color reflects the time since
+     * the last block update and hovering reveals per-chain block details.
+     * Without it, a static green status pill is rendered.
+     */
+    blockSyncProps?: BlockSyncProps;
+}
+/**
+ * AppFooter — minimal, Hyperliquid-style footer used by the Gearbox App
+ * (client-v3): one thin line with copyright on the left and legal links plus a
+ * status pill on the right.
+ *
+ * Presentational port of client-v3 `AppFooter`. All dynamic content is
+ * controlled through props; defaults reproduce the app exactly.
+ *
+ * @example
+ * ```tsx
+ * <AppFooter />
+ * <AppFooter links={myLinks} copyright="© Acme, 2026" showStatus={false} />
+ * ```
+ */
+export declare const AppFooter: React.ForwardRefExoticComponent<AppFooterProps & React.RefAttributes<HTMLElement>>;

package/dist/types/components/layout/app-footer/index.d.ts

@@ -0,0 +1 @@
+export * from './app-footer';

package/dist/types/components/layout/app-header/app-header.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+export interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Home link target used by the default logos. Defaults to `/`.
+     */
+    homeHref?: string;
+    /**
+     * Desktop logo block (visible at `lg` and up). Defaults to the full Gearbox
+     * wordmark linking to {@link AppHeaderProps.homeHref}.
+     */
+    desktopLogo?: React.ReactNode;
+    /**
+     * Mobile logo block (visible below `lg`). Defaults to the Gearbox sign mark
+     * linking to {@link AppHeaderProps.homeHref}.
+     */
+    mobileLogo?: React.ReactNode;
+    /**
+     * Mobile menu trigger (hamburger dropdown), visible below `lg`.
+     */
+    mobileMenu?: React.ReactNode;
+    /**
+     * Center navigation tabs — typically a `TabControl`. Visible at `lg` and up.
+     */
+    tabs?: React.ReactNode;
+    /**
+     * Optional actions placed left of the wallet button (e.g. migration button).
+     */
+    actions?: React.ReactNode;
+    /**
+     * Wallet / connect button area, rendered on the right.
+     */
+    wallet?: React.ReactNode;
+    /**
+     * Optional dots menu placed after the wallet (e.g. settings, docs links).
+     */
+    extraMenu?: React.ReactNode;
+    /**
+     * Optional `data-testid` applied to the left side panel.
+     */
+    leftTestId?: string;
+    /**
+     * Optional `data-testid` applied to the center navigation area.
+     */
+    centerTestId?: string;
+    /**
+     * Optional `data-testid` applied to the right side panel.
+     */
+    rightTestId?: string;
+}
+/**
+ * AppHeader — three-column top navigation bar used by the **Gearbox App
+ * (client-v3)** shell: logo on the left, center `TabControl`, and wallet
+ * (plus optional actions) on the right.
+ *
+ * Presentational port of client-v3 `AppBarView`. Dynamic regions are exposed as
+ * slots; the logos default to the exact Gearbox assets used by the app.
+ *
+ * @example
+ * ```tsx
+ * <AppHeader
+ *   mobileMenu={<HamburgerDropdown />}
+ *   tabs={<TabControl state={tabState} tabs={tabs} showBorder={false} />}
+ *   wallet={<Button variant="outline">Connect wallet</Button>}
+ * />
+ * ```
+ */
+export declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/types/components/layout/app-header/index.d.ts

@@ -0,0 +1 @@
+export * from './app-header';

package/dist/types/components/layout/index.d.ts

@@ -1,3 +1,5 @@
+export * from './app-footer';
+export * from './app-header';
 export * from './app-logo';
 export * from './block';
 export * from './col';

package/dist/types/components/layout/main-aside-layout/main-aside-layout.d.ts

@@ -28,6 +28,37 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
      *   - pass `asideClassName` to override or augment aside classes (e.g. z-index)
      */
     variant?: "default" | "detail";
+    /**
+     * Hybrid centring for the main column. Only meaningful with
+     * `variant="detail"`.
+     *
+     * - **`≥1520px`** — the main column is centred on the viewport (`mx-auto`),
+     *   capped at `56rem`, with the aside in the left gutter (`absolute`).
+     * - **`lg`…`1519px`** — LP-style in-flow row (aside + main centred as one block).
+     *
+     * On screens below `lg` the layout falls back to the normal stacked column,
+     * so wrap usage in `hidden lg:block` if the mobile layout is handled
+     * separately.
+     */
+    centeredMain?: boolean;
+    /**
+     * Whether the detail-variant aside manages its own sticky / scroll behavior.
+     *
+     * - `true` (default) — ui-kit owns the aside positioning: built-in sticky
+     *   (`top-4`) below `2450px`, `fixed` (`top-28`) at `≥2450px`, plus an
+     *   internal `overflow-y-auto` / `max-h-[100vh]` scroll area.
+     * - `false` — the aside stays in normal document flow at all widths (no
+     *   `fixed`, no internal scroll container), so the page keeps a single
+     *   scrollbar and the consumer can run its own sticky controller. The detail
+     *   centring wrapper + `max-width` cap are preserved. At `≥2450px` the row
+     *   stays a flex row but centres the main column on the viewport
+     *   (`justify-center`, main `80rem`) while the in-flow aside is pulled into
+     *   the gutter via a negative margin — so the content reads centred with the
+     *   form beside it, and the consumer's controller keeps managing stickiness.
+     *
+     * Only meaningful with `variant="detail"` and without `centeredMain`.
+     */
+    stickyAside?: boolean;
 }
 /**
  * MainAsideLayout — main column + optional sidebar in one row.
@@ -54,5 +85,16 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
  * ```
  * This reproduces the `PoolDetailsScreen` two-column layout:
  * sticky aside below 2450 px viewport, fixed aside above it, correct max-widths.
+ *
+ * ### Detail variant — viewport-centred main (`centeredMain`)
+ * ```tsx
+ * <div className="hidden lg:block">
+ *   <MainAsideLayout variant="detail" asidePosition="left" centeredMain aside={<Panel />}>
+ *     <Content />
+ *   </MainAsideLayout>
+ * </div>
+ * ```
+ * Centres the main column on the viewport (up to `56rem`) while the aside sits
+ * in the left gutter from `1520px`; below that the row behaves like LP detail.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/legal-agreement/index.d.ts

@@ -1 +1,5 @@
-export { type AppName, BlockedRegionDialog, type BlockedRegionDialogProps, createGearboxAppConfig, createLegalAgreementConfig, createPermissionlessInterfaceConfig, createPermissionlessSafeConfig, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogLinks, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementAwaitingPanel, type LegalAgreementAwaitingPanelProps, LegalAgreementAwaitingPanelTest, } from './legal-agreement-awaiting-panel';
+export { BlockedRegionDialog, type BlockedRegionDialogProps, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementLink, type LegalAgreementLinkProps, } from './legal-agreement-link';
+export { LegalAgreementPanel, type LegalAgreementPanelProps, LegalAgreementPanelTest, } from './legal-agreement-panel';
+export { type LegalAgreementThemeVariantProps, type LegalAgreementVisualTheme, legalAgreementAwaitingDescriptionVariants, legalAgreementAwaitingRootVariants, legalAgreementAwaitingTitleVariants, legalAgreementLinkVariants, legalAgreementPanelCheckboxLabelVariants, legalAgreementPanelCheckboxListTitleVariants, legalAgreementPanelCheckboxListVariants, legalAgreementPanelCheckboxRowVariants, legalAgreementPanelNotificationVariants, legalAgreementPanelRootVariants, legalAgreementPanelV2BannerVariants, } from './legal-agreement-theme';

package/dist/types/components/legal-agreement/legal-agreement-awaiting-panel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementAwaitingPanelTest {
+    static root: string;
+}
+export interface LegalAgreementAwaitingPanelProps {
+    readonly waitingForSignatureText?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementAwaitingPanel({ waitingForSignatureText, theme, }: LegalAgreementAwaitingPanelProps): React.ReactElement;