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

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

@@ -1,13 +1,9 @@
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
 import * as React from "react";
 export interface LegalAgreementCheckboxItem {
     id: string;
     content: React.ReactNode;
 }
-export interface LegalAgreementDialogLinks {
-    termsOfService: string;
-    privacyNotice: string;
-    riskDisclosure: string;
-}
 export interface LegalAgreementDialogConfig {
     /**
      * Product/service name (e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App")
@@ -41,6 +37,15 @@ export interface LegalAgreementDialogConfig {
      * Defaults to "Please sign the message in your wallet to agree to the Terms of Service."
      */
     waitingForSignatureText?: string;
+    /**
+     * Notice shown when terms are updated (hasV2Signature is true).
+     * Host app supplies legal copy; ui-kit only renders layout.
+     */
+    updatedTermsNoticeText?: React.ReactNode;
+    /**
+     * Optional heading above checkbox list (e.g. warranty section title).
+     */
+    checkboxListTitle?: React.ReactNode;
 }
 export interface LegalAgreementDialogProps {
     open: boolean;
@@ -50,6 +55,7 @@ export interface LegalAgreementDialogProps {
     hasV2Signature?: boolean;
     isAwaitingSignature?: boolean;
     config: LegalAgreementDialogConfig;
+    theme?: LegalAgreementVisualTheme;
 }
 /**
  * LegalAgreementDialog — dialog component for legal agreement signing.
@@ -77,59 +83,20 @@ export interface LegalAgreementDialogProps {
  * Note: Displays checkboxes for user agreement and handles signing flow.
  * Shows waiting state during signature process.
  *
- * Example usage with helper function:
+ * Example usage — host app supplies config (legal copy is app-owned):
  * ```tsx
- * import { LegalAgreementDialog, createLegalAgreementConfig } from '@gearbox-protocol/ui-kit';
+ * import { LegalAgreementDialog, LegalAgreementLink } from '@gearbox-protocol/ui-kit';
  *
- * const links = {
- *   termsOfService: 'https://gearbox.fi/terms',
- *   privacyNotice: 'https://gearbox.fi/privacy',
- *   riskDisclosure: 'https://gearbox.fi/risks',
+ * const config = {
+ *   productName: 'My App',
+ *   notificationText: <>…your legal copy with <LegalAgreementLink href="…">ToS</LegalAgreementLink>…</>,
+ *   checkboxItems: [{ id: 'consent', content: <>…</> }],
  * };
  *
- * // You can use any app name. For "Permissionless Interface" and "Permissionless Safe"
- * // it uses simplified consent flow. For other names (e.g., "Gearbox App") it uses
- * // extended consent flow with additional checkboxes.
- * const config = createLegalAgreementConfig("Permissionless Interface", links);
- *
- * <LegalAgreementDialog
- *   open={isOpen}
- *   onClose={handleClose}
- *   onSign={handleSign}
- *   isSigning={isSigning}
- *   config={config}
- * />
+ * <LegalAgreementDialog open={isOpen} onClose={handleClose} onSign={handleSign} isSigning={isSigning} config={config} />
  * ```
  */
-export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
-export type AppName = string;
-/**
- * Creates configuration for legal agreement dialog based on app name.
- * @param appName - Name of the application (any string, e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App", etc.)
- * @param links - URLs for legal documents
- * @param options - Optional configuration overrides
- */
-export declare function createLegalAgreementConfig(appName: AppName, links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Interface", links, options) instead
- */
-export declare function createPermissionlessInterfaceConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Safe", links, options) instead
- */
-export declare function createPermissionlessSafeConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Gearbox App", links, options) instead
- */
-export declare function createGearboxAppConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
+export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, theme, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
 export interface BlockedRegionDialogProps {
     open: boolean;
     onClose: () => void;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export interface LegalAgreementLinkProps {
+    readonly href: string;
+    readonly children: React.ReactNode;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+/**
+ * Styled external link for legal agreement copy supplied by the host app.
+ */
+export declare function LegalAgreementLink({ href, children, theme, }: LegalAgreementLinkProps): React.ReactElement;

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementPanelTest {
+    static root: string;
+}
+export interface LegalAgreementPanelProps {
+    readonly config: LegalAgreementDialogConfig;
+    readonly checkedItems: Readonly<Record<string, boolean>>;
+    readonly onCheckedChange: (id: string) => void;
+    readonly hasV2Signature?: boolean;
+    readonly showTitle?: boolean;
+    readonly checkboxIdPrefix?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementPanel({ config, checkedItems, onCheckedChange, hasV2Signature, showTitle, checkboxIdPrefix, theme, }: LegalAgreementPanelProps): React.ReactElement;

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

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+export type LegalAgreementVisualTheme = "default" | "gearboxV3";
+export declare const legalAgreementPanelRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelNotificationVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListVariants: (props?: ({
+    readonly theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxRowVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxLabelVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelV2BannerVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingDescriptionVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementLinkVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LegalAgreementThemeVariantProps = VariantProps<typeof legalAgreementPanelRootVariants>;

package/dist/types/components/legal-agreement/legal-agreement.stories-config.d.ts

@@ -0,0 +1,11 @@
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare function createStoryPermissionlessLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryExtendedLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryRwaLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+/** Storybook-only sample config (single-checkbox flow). Not exported from ui-kit. */
+export declare const storyPermissionlessLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only sample config (three-checkbox flow). Not exported from ui-kit. */
+export declare const storyExtendedLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only RWA sample config. Not exported from ui-kit. */
+export declare const storyRwaLegalConfig: LegalAgreementDialogConfig;

package/dist/types/components/points-icon/index.d.ts

@@ -1 +1 @@
-export { PointsIcon, type PointsIconProps, type PointsReward, } from './points-icon';
+export { PointsIcon, type PointsIconProps, type PointsIconReward, type PointsReward, } from './points-icon';

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

@@ -1,6 +1,12 @@
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 import * as React from "react";
-export interface PointsReward {
+/**
+ * Minimal reward identity for {@link PointsIcon} (name + icon slug).
+ *
+ * Prefer this over the deprecated {@link PointsReward} alias — that name
+ * collides with SDK `PointsReward<T>` from `@gearbox-protocol/sdk/rewards`.
+ */
+export interface PointsIconReward {
     /**
      * Display name of the reward program
      */
@@ -10,11 +16,16 @@ export interface PointsReward {
      */
     type: string;
 }
+/**
+ * @deprecated Use {@link PointsIconReward}. The bare name conflicts with SDK
+ * `PointsReward<T>` from `@gearbox-protocol/sdk/rewards`.
+ */
+export type PointsReward = PointsIconReward;
 export interface PointsIconProps extends React.HTMLAttributes<HTMLImageElement>, Omit<RoundedImageProps, "size" | "src" | "alt"> {
     /**
      * Reward information with name and type
      */
-    reward: PointsReward;
+    reward: PointsIconReward;
     /**
      * Size of the icon in pixels
      */

package/dist/types/components/pool-apy-tooltip/apy-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
+import type * as React from "react";
+export interface ApyTooltipProps {
+    /**
+     * SDK `ApyBreakdown`. Display-only — organic base, token rewards, total,
+     * and points programs. No `tokensList`, 7D history, or external APY.
+     */
+    apy: ApyBreakdown;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Tooltip for an SDK `ApyBreakdown` — organic base, token rewards, total,
+ * and points programs.
+ *
+ * Does not cover 1D/7D history, external APY, or rich point tip metadata
+ * (`duration`, `condition`, `tokenTitle`, preformatted `amount`). For those
+ * stay on the deprecated {@link PoolAPYTooltip}.
+ */
+export declare function ApyTooltip({ apy, children, className }: ApyTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/pool-apy-tooltip/index.d.ts

@@ -1 +1 @@
-export * from './pool-apy-tooltip';
+export * from './apy-tooltip';

package/dist/types/components/rwa-feature/index.d.ts

@@ -0,0 +1 @@
+export * from './rwa-feature';

package/dist/types/components/rwa-feature/rwa-feature.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface RWAFeatureProps {
+    disabledStyle: boolean;
+    tooltip?: React.ReactNode;
+}
+/** The "RWA" gradient chip with an explanatory tooltip. */
+export declare function RWAFeature({ disabledStyle, tooltip, }: RWAFeatureProps): React.ReactElement;

package/dist/types/components/split-list/split-list.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 type ColSize = boolean | "auto";
 export interface SplitListProps {
     /** Size for each column (or function for per-index). @default true */
-    colSize?: ColSize | ((index: number) => ColSize);
+    colSize?: ColSize | ((index: number, arr: unknown[]) => ColSize);
     /** List items. */
     children?: React.ReactNode;
     /** Extra class name for the root. */

package/dist/types/components/table/grid-table.d.ts

@@ -218,7 +218,7 @@ interface GridTableHeadProps extends ColProps, VariantProps<typeof gridTableHead
 declare const GridTableHead: React.ForwardRefExoticComponent<GridTableHeadProps & React.RefAttributes<HTMLDivElement>>;
 declare const gridTableCellVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
-    textAlign?: "left" | "center" | "right" | null | undefined;
+    textAlign?: "center" | "left" | "right" | null | undefined;
     gapBefore?: "none" | "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface GridTableCellProps extends ColProps, VariantProps<typeof gridTableCellVariants> {

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const textColorVariants: (props?: ({
-    buttonColor?: "primaryDashed" | "secondaryDashed" | "empty" | null | undefined;
+    buttonColor?: "empty" | "primaryDashed" | "secondaryDashed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const layoutVariants: (props?: ({
     size?: "default" | "sm" | "lg" | "md" | null | undefined;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const tipCardVariants: (props?: ({
-    backgroundColor?: "dark" | "transparent" | "light" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    backgroundColor?: "transparent" | "dark" | "light" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
     textColor?: "unset" | "dark" | "light" | null | undefined;
     borderColor?: "none" | "dark" | "light" | "gradient" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,5 +1,6 @@
 import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
 import { default as React } from 'react';
+import { TokenIconInput } from '../../utils/token-icon-source';
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 /**
  * TokenIcon — component for displaying token/asset icons.
@@ -9,7 +10,10 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * token symbols, asset icons, currency icons, token representations.
  *
  * Props:
- * - `symbol` — token symbol/ticker, direct icon URL, or `IconComposite` (see `TokenMetaInfo` in `@/types/common`).
+ * - `token` — token as it comes from the SDK/backend, or a bare symbol (preferred).
+ *   The component resolves the icon itself via `getTokenIcon`, so callers never
+ *   pass a pre-baked URL.
+ * - `symbol` — already-resolved source: direct icon URL or `IconComposite` (legacy).
  * - `size` — icon size in pixels (defaults to 48).
  *
  * Note: Fetches icon from Gearbox static CDN based on symbol.
@@ -29,7 +33,12 @@ type DirectIcon = {
 };
 export type SymbolOrIcon = string | DirectIcon | IconComposite;
 export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
-    symbol: SymbolOrIcon | undefined;
+    /**
+     * Token (or bare symbol). When set, takes precedence over `symbol` and is
+     * resolved via `getTokenIcon` (diesel composites, GEAR logo, etc.).
+     */
+    token?: TokenIconInput | string;
+    symbol?: SymbolOrIcon | undefined;
     size?: number;
     className?: string;
 }

package/dist/types/components/token-symbol/token-symbol.d.ts

@@ -1,16 +1,17 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
+import { Token } from '@gearbox-protocol/sdk/model';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
-import { TokenIconProps } from '../token-icon';
 import { TokenMetaInfo } from '../../types/common';
 declare const tokenSymbolVariants: (props?: ({
     marginSize?: "sm" | "lg" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof tokenSymbolVariants> {
     /**
-     * Token data object or symbol string
+     * SDK `Token`, `TokenMetaInfo`, or bare symbol string. Passed straight to
+     * `TokenIcon`, which resolves the icon via `getTokenIcon`.
      */
-    token?: TokenMetaInfo | string;
+    token?: Token | TokenMetaInfo | string;
     /**
      * Optional override title to display
      */
@@ -51,7 +52,6 @@ export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      */
     maxLength?: number;
 }
-export declare function getSymbolOrIcon(token: TokenSymbolProps["token"]): TokenIconProps["symbol"] | undefined;
 /**
  * TokenSymbol component for displaying token symbols with optional icon and comment
  *

package/dist/types/components/trading-view/trading-view.d.ts

@@ -1,3 +1,4 @@
+import { LineStyle } from 'lightweight-charts';
 import { RangeButtonsProps } from '../buttons/range-buttons/range-buttons';
 import { YMeasureUnits } from '../graph/formatters';
 import { GraphViewWithDataProps } from '../graph/graph-view';
@@ -26,6 +27,12 @@ export interface GraphData {
     topColor?: string;
     /** Area fill gradient bottom */
     bottomColor?: string;
+    /** Price scale when Graph `dualYAxis` is enabled. */
+    priceScaleId?: "left" | "right";
+    /** Render as line instead of area. */
+    seriesType?: "area" | "line";
+    /** Line dash style (line series). */
+    lineStyle?: LineStyle;
 }
 /**
  * TradingView component props
@@ -61,6 +68,13 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     graphsWithNoData?: Set<T>;
     /** Set of graph values that are currently loading */
     loadingGraphs?: Set<T>;
+    /**
+     * Explicit loading state. When provided, it takes precedence over the loading
+     * state inferred from `loadingGraphs`/`data`. Use it when the series list is
+     * empty while the underlying query is still pending (otherwise the chart would
+     * briefly show "no data" before data arrives).
+     */
+    isLoading?: boolean;
     /** Message to show when user selects a graph with no data */
     noDataMessage?: string;
     /**
@@ -157,4 +171,4 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
  * />
  * ```
  */
-export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;
+export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;

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

@@ -3,8 +3,8 @@ import * as React from "react";
 declare const typographyVariants: (props?: ({
     variant?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodySmall" | "overline" | "inherit" | null | undefined;
     color?: "inherit" | "default" | "muted" | "success" | "warning" | "destructive" | "primary" | "secondary" | null | undefined;
-    weight?: "medium" | "inherit" | "normal" | "semibold" | "bold" | null | undefined;
-    align?: "inherit" | "left" | "center" | "right" | null | undefined;
+    weight?: "bold" | "medium" | "inherit" | "normal" | "semibold" | null | undefined;
+    align?: "center" | "inherit" | "left" | "right" | null | undefined;
     leading?: "inherit" | "normal" | "tight" | "relaxed" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/vertical-indicator/vertical-indicator.d.ts

@@ -4,10 +4,10 @@ declare const rootVariants: (props?: ({
     align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const labelVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    size?: "default" | "unset" | "xs" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const valueVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    size?: "default" | "unset" | "xs" | "sm" | null | undefined;
     weight?: "medium" | "normal" | "unset" | null | undefined;
     color?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -24,6 +24,12 @@ export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDi
     value?: React.ReactNode;
     /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
     valueTo?: React.ReactNode;
+    /**
+     * When true (default) and valueTo is provided, the old value (value) is rendered in
+     * secondary-foreground color to visually dim it. Set to false to keep the original color
+     * (e.g. for Health Factor which uses zone-based coloring).
+     */
+    dimPreviousValue?: boolean;
     /** Called when the tip icon is hovered */
     onPointerEnterTip?: () => void;
 }

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

@@ -1,27 +1,44 @@
+import { SpaceSize } from '../base/spacing';
 import type * as React from "react";
+/**
+ * One step of the shared spacing scale, or an explicit pixel height for the
+ * rare outlier that the scale does not cover.
+ */
+export type VSpaceSize = SpaceSize | number;
 /**
  * VSpaceProps — props for VSpace component.
  */
 export interface VSpaceProps {
-    height: number;
+    /**
+     * Preferred form: one semantic step of the shared spacing scale. Each step
+     * already carries a mobile and a desktop height, so one prop covers both
+     * breakpoints. A number is the escape hatch: a fixed pixel height applied on
+     * all breakpoints (unless `mobileSize` overrides the mobile half).
+     */
+    size: VSpaceSize;
+    /**
+     * Optional mobile override for when the pair baked into `size` does not
+     * fit. Applies below the `md:` breakpoint; accepts a scale step (its mobile
+     * height is used) or explicit pixels.
+     */
+    mobileSize?: VSpaceSize;
+    className?: string;
 }
 /**
- * VSpace — vertical spacing component for creating vertical gaps.
+ * VSpace — vertical spacing between elements, on the shared spacing scale.
  *
  * @usage
- * Use VSpace to add vertical spacing between elements:
- * spacing between sections, gaps between components, vertical layout spacing.
- *
- * Props:
- * - `height` — height of the spacer in pixels (required).
- *
- * Note: Creates an empty div with specified height.
- * Useful for precise vertical spacing control in layouts.
+ * Use VSpace to add vertical gaps between sections or components. A `size`
+ * token is responsive by itself: it steps down on mobile and up from the `md:`
+ * breakpoint, so callers never branch on screen width. Numbers and
+ * `mobileSize` exist only for outliers the scale does not cover.
  *
  * @example
  * ```tsx
- * <VSpace height={16} />
- * <VSpace height={24} />
+ * <VSpace size="md" />                 // 12px on mobile, 24px from md up
+ * <VSpace size={20} />                 // fixed 20px on all breakpoints
+ * <VSpace size="lg" mobileSize="sm" /> // 8px on mobile, 48px from md up
+ * <VSpace size={24} mobileSize={12} /> // explicit pixels per breakpoint
  * ```
  */
-export declare function VSpace({ height }: VSpaceProps): React.ReactElement;
+export declare function VSpace({ size, mobileSize, className, }: VSpaceProps): React.ReactElement;

package/dist/types/components/yield-breakdown-tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './yield-breakdown-tooltip';

package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts

@@ -0,0 +1,32 @@
+import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
+import type * as React from "react";
+export interface YieldBreakdownTooltipProps {
+    /**
+     * Net yield (`ApyBreakdown`). For a strategy this is the net at
+     * {@link maxLeverage}.
+     */
+    supplyApy: ApyBreakdown;
+    /**
+     * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x). When set,
+     * the header shows "at Nx leverage" and borrow rows may appear.
+     */
+    maxLeverage?: Leverage;
+    /**
+     * Strategy collateral yield used for Base / Incentive rows. Falls back to
+     * {@link supplyApy} when omitted.
+     */
+    collateralApy?: ApyBreakdown;
+    /** Strategy base borrow cost in bps (shown as a negative rate). */
+    borrowApy?: Bps;
+    /** Strategy additional (quota) borrow cost in bps (shown as a negative rate). */
+    additionalBorrowApy?: Bps;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Yield Breakdown tooltip for Earn — pool and strategy layouts from SDK
+ * `ApyBreakdown` (+ optional strategy borrow / leverage fields).
+ *
+ * Visuals follow Figma «Yield Details Surface» (400px card, always expanded).
+ */
+export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/configs/tailwind-preset.d.ts

@@ -64,6 +64,7 @@ export declare const preset: {
                 "success-hover": string;
                 warning: string;
                 liquidation: string;
+                "liquidation-line": string;
                 border: string;
                 input: string;
                 ring: string;

package/dist/types/hooks/use-filter.d.ts

@@ -23,6 +23,52 @@ export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void
  * Hook for managing sort state
  */
 export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+/**
+ * Ordered list of active sort keys. The first entry is the primary sort key,
+ * the second is the tie-breaker, and so on. An empty array means "no sort".
+ */
+export type MultiSortField<T> = ReadonlyArray<FilterSortField<T>>;
+/** Resolved sort state for a single column inside a {@link MultiSortField}. */
+export interface MultiSortFieldState {
+    /** Sort direction for this field, or `undefined` when the field is inactive. */
+    sort: SortType | undefined;
+    /**
+     * 1-based position of the field within the active sort keys, or `undefined`
+     * when the field is inactive. Use it to render a priority badge (1, 2, …).
+     */
+    priority: number | undefined;
+}
+export type MultiSortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Resolve the direction and priority of a single field within a multi-sort.
+ *
+ * @example
+ * ```tsx
+ * const { sort, priority } = getSortForFields("type", state);
+ * <HeadCell sortDirection={sort} sortPriority={state.length > 1 ? priority : undefined} />
+ * ```
+ */
+export declare const getSortForFields: <T>(field: T, state: MultiSortField<T> | null) => MultiSortFieldState;
+/**
+ * Pure reducer behind {@link useMultiSort}. Each field cycles through three
+ * states on successive clicks: `startFromSort` → the opposite direction →
+ * removed. Clicking a brand-new field makes it the primary key (existing keys
+ * become tie-breakers) and the lowest-priority key is dropped once `maxFields`
+ * is reached.
+ */
+export declare function nextMultiSortState<T>(prev: MultiSortField<T>, field: T, startFromSort?: SortType, maxFields?: number): MultiSortField<T>;
+export interface UseMultiSortOptions {
+    /** Maximum number of simultaneously active sort keys. Defaults to `2`. */
+    maxFields?: number;
+}
+/**
+ * Hook for managing sort state across multiple fields (e.g. sort by `type`,
+ * then by `apy`). Mirrors {@link useSort} but keeps an ordered list of keys.
+ */
+export declare function useMultiSort<T>(initialState?: MultiSortField<T> | null, { maxFields }?: UseMultiSortOptions): readonly [MultiSortField<T>, MultiSortSetterFunction<T>, {
+    readonly removeSortField: (field: T) => void;
+    readonly resetSort: () => void;
+}];
 interface GeneralRangeFilterState {
     state: FilterRange | null;
 }

package/dist/types/hooks/use-media-query.d.ts

@@ -9,8 +9,12 @@
  *   return <div>{isMobile ? "Mobile view" : "Desktop view"}</div>;
  * }
  * ```
+ *
+ * @param enabled When `false`, skips the `matchMedia` subscription. Used by
+ *   the named breakpoint hooks so they do not attach listeners when a
+ *   `BreakpointProvider` already owns the shared state.
  */
-export declare function useMediaQuery(query: string): boolean;
+export declare function useMediaQuery(query: string, enabled?: boolean): boolean;
 /**
  * Checks if the viewport is mobile-sized (max-width: 500px-)
  */