@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.10

package/dist/types/components/styled-dropdown/styled-dropdown.d.ts

@@ -1,95 +0,0 @@
-import type * as React from "react";
-export interface StyledDropdownItem {
-    value?: string | number | boolean;
-    label?: React.ReactNode;
-    title?: React.ReactNode;
-    [key: string]: unknown;
-}
-export interface StyledDropdownProps<T extends StyledDropdownItem = StyledDropdownItem> {
-    /**
-     * Children content (dropdown items if not using `items` prop)
-     */
-    children?: React.ReactNode;
-    /**
-     * Whether dropdown is open (controlled)
-     */
-    open?: boolean;
-    /**
-     * Callback when open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Trigger element/label
-     */
-    trigger?: React.ReactNode;
-    /**
-     * Label element (alias for trigger)
-     */
-    label?: React.ReactNode;
-    /**
-     * Dropdown items
-     */
-    items?: T[];
-    /**
-     * Callback when item is selected
-     */
-    onSelect?: (item: T) => void;
-    /**
-     * Theme variant
-     */
-    theme?: "empty" | "default" | "dark" | "light" | "filledDark" | string;
-    /**
-     * Size variant
-     */
-    size?: "xs" | "sm" | "md" | "lg" | string;
-    /**
-     * Icon to display (can be ReactNode or FontAwesome IconDefinition)
-     */
-    icon?: React.ReactNode | {
-        icon: [number, number, unknown, unknown, string | string[]];
-        iconName?: string;
-    };
-    /**
-     * Icon size
-     */
-    iconSize?: number;
-    /**
-     * Alignment of dropdown
-     */
-    align?: "start" | "center" | "end";
-    /**
-     * Side of trigger to show dropdown
-     */
-    side?: "top" | "right" | "bottom" | "left";
-    /**
-     * Additional CSS class for content
-     */
-    className?: string;
-    /**
-     * Additional CSS class for trigger
-     */
-    triggerClassName?: string;
-    /**
-     * Analytics callback on click
-     */
-    onClickAnalytics?: (item: T) => void;
-}
-/**
- * StyledDropdown — a styled dropdown wrapper with legacy API support
- *
- * @example
- * ```tsx
- * // New API with children
- * <StyledDropdown trigger={<button>Open</button>}>
- *   <DropdownMenuItem>Item 1</DropdownMenuItem>
- * </StyledDropdown>
- *
- * // Legacy API with items
- * <StyledDropdown
- *   label={<span>Select option</span>}
- *   items={[{ value: 1, label: 'Option 1' }]}
- *   onSelect={(item) => console.log(item)}
- * />
- * ```
- */
-export declare function StyledDropdown<T extends StyledDropdownItem = StyledDropdownItem>({ children, open, onOpenChange, trigger, label, items, onSelect, theme, size, icon, iconSize, align, side, className, triggerClassName, onClickAnalytics, }: StyledDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,19 +0,0 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React from "react";
-export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
-    /**
-     * Size of the switch
-     */
-    size?: "sm" | "default" | "lg";
-}
-/**
- * Switch — toggle component for on/off states
- *
- * @example
- * ```tsx
- * <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
- * <Switch size="sm" disabled />
- * ```
- */
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
-export { Switch };

package/dist/types/components/table/edit-button.d.ts

@@ -1,51 +0,0 @@
-import { ButtonProps } from '../buttons';
-import type * as React from "react";
-interface EditButtonProps extends Omit<ButtonProps, "variant" | "width"> {
-    /**
-     * @deprecated Use children instead
-     */
-    customButton?: React.ReactNode;
-    /**
-     * Width variant of the button
-     * - "default" — compact icon button
-     * - "wide" — full width button
-     */
-    width?: "default" | "wide";
-    /**
-     * @deprecated Use width="wide" instead
-     */
-    $width?: "default" | "wide";
-}
-/**
- * EditButton — button component for triggering edit actions.
- *
- * @usage
- * Use EditButton to provide edit functionality in editable components:
- * table cells, form fields, editable values.
- *
- * Props:
- * - `onClick` — callback function executed when button is clicked.
- * - `children` — custom content to replace default edit icon.
- * - `width` — button width: "default" or "wide".
- * - `disabled` — if true, button is disabled.
- *
- * Note: Uses ghost variant Button with Edit icon by default.
- *
- * @example
- * ```tsx
- * // Default icon button
- * <EditButton onClick={handleEdit} />
- *
- * // With custom content
- * <EditButton onClick={handleEdit}>
- *   Edit Item
- * </EditButton>
- *
- * // Wide button
- * <EditButton width="wide" onClick={handleEdit}>
- *   <span>Edit</span>
- * </EditButton>
- * ```
- */
-export declare function EditButton({ onClick, customButton, children, disabled, width, $width, className, style, ...props }: EditButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,120 +0,0 @@
-import { Address } from 'viem';
-/**
- * GridTableCellAssetProps — props for GridTableCellAsset component.
- */
-interface GridTableCellAssetProps {
-    assetAddress: Address;
-    symbol: string;
-    comment?: string;
-    explorerUrl?: string;
-    iconSymbol?: string;
-    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
-}
-/**
- * GridTableCellAsset — grid table cell component for displaying asset information.
- *
- * @usage
- * Use GridTableCellAsset to display asset data in grid table cells:
- * token symbols, asset addresses with icons, explorer links.
- *
- * Props:
- * - `assetAddress` — asset contract address (required).
- * - `symbol` — asset symbol/ticker (required).
- * - `comment` — optional comment displayed next to symbol.
- * - `explorerUrl` — optional explorer URL for external link button.
- * - `iconSymbol` — optional symbol for icon extraction (used when icon doesn't match symbol, e.g., pool tokens).
- * - `span` — number of columns to span (defaults to 1).
- *
- * Note: Displays token icon, symbol, optional comment, and optional explorer link in a grid cell.
- */
-export declare function GridTableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, span, }: GridTableCellAssetProps): import("react/jsx-runtime").JSX.Element;
-/**
- * GridTableCellUpdatableProps — props for GridTableCellUpdatable component.
- */
-export interface GridTableCellUpdatableProps {
-    oldValue?: string;
-    newValue: string;
-    onEdit?: () => void;
-    isEditable?: boolean;
-    className?: string;
-    customButton?: React.ReactNode;
-    align?: "left" | "right" | "center";
-    postfix?: string;
-    disabled?: boolean;
-    nowrap?: boolean;
-    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
-}
-/**
- * GridTableCellUpdatable — grid table cell component for displaying editable values with old/new value comparison.
- *
- * @usage
- * Use GridTableCellUpdatable to display values that can be edited in grid table cells:
- * editable parameters, configurable settings, updatable data with change indication.
- *
- * Props:
- * - `oldValue` — previous value displayed with strikethrough when different from newValue.
- * - `newValue` — current/new value to display (required).
- * - `onEdit` — callback function executed when edit button is clicked.
- * - `isEditable` — if false, edit button is not shown (defaults to true).
- * - `className` — additional CSS classes for styling.
- * - `customButton` — custom React node to replace default edit button.
- * - `align` — text alignment: "left", "right", or "center" (defaults to "right").
- * - `postfix` — optional text displayed after the value.
- * - `disabled` — if true, edit button is disabled.
- * - `nowrap` — if true, prevents text wrapping.
- * - `span` — number of columns to span (defaults to 1).
- *
- * Note: Uses UpdatedValue component internally to display old/new values with edit functionality.
- */
-export declare function GridTableCellUpdatable({ oldValue, newValue, onEdit, isEditable, className, align, customButton, postfix, disabled, nowrap, span, }: GridTableCellUpdatableProps): import("react/jsx-runtime").JSX.Element;
-/**
- * GridTableEditableAction — action button configuration for GridTableEditable.
- */
-export interface GridTableEditableAction {
-    text: string;
-    onClick: () => void;
-    loadingText?: string;
-    isLoading?: boolean;
-}
-/**
- * GridTableEditableProps — props for GridTableEditable component.
- */
-interface GridTableEditableProps {
-    title: string;
-    onNew?: () => void;
-    newButtonText?: string;
-    isLoading?: boolean;
-    buttonLoadingText?: string;
-    actions?: GridTableEditableAction[];
-    children: React.ReactNode;
-    disabled?: boolean;
-    skipSignIn?: boolean;
-    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
-}
-/**
- * GridTableEditable — grid table component with header, action buttons, and editable content.
- *
- * @usage
- * Use GridTableEditable to create grid tables with editable content and action buttons:
- * data management tables, configuration tables, editable parameter lists with grid layout.
- *
- * Props:
- * - `title` — table title displayed in header (required).
- * - `onNew` — callback function for "New" button action.
- * - `newButtonText` — text for "New" button (defaults to "New").
- * - `isLoading` — if true, "New" button shows loading state.
- * - `buttonLoadingText` — text shown in "New" button when loading (defaults to "Adding...").
- * - `actions` — array of additional action buttons (GridTableEditableAction[]).
- * - `children` — table content (GridTable rows/cells) (required).
- * - `disabled` — if true, all action buttons are disabled (defaults to false).
- * - `skipSignIn` — if true, skips sign-in requirement for actions (defaults to true).
- * - `cols` — number of columns (1-12) or custom CSS grid template (defaults to 12).
- *
- * Note: Action buttons are wrapped in SignInRequired component and use TabButton for styling. Table is wrapped in rounded border container.
- *
- * Do NOT use GridTableEditable:
- * - for read-only tables without editing capabilities (use regular GridTable component).
- * - when you don't need action buttons or title (use regular GridTable component).
- */
-export declare function GridTableEditable({ title, onNew, newButtonText, buttonLoadingText, isLoading, actions, children, disabled, skipSignIn, cols, }: GridTableEditableProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,101 +0,0 @@
-import { Address } from 'viem';
-interface TableCellAssetProps {
-    assetAddress: Address;
-    symbol: string;
-    comment?: string;
-    explorerUrl?: string;
-    iconSymbol?: string;
-}
-/**
- * TableCellAsset — table cell component for displaying asset information.
- *
- * @usage
- * Use TableCellAsset to display asset data in table cells:
- * token symbols, asset addresses, icons, explorer links.
- *
- * Props:
- * - `assetAddress` — asset contract address (required).
- * - `symbol` — asset symbol/ticker (required).
- * - `comment` — optional comment displayed next to symbol.
- * - `explorerUrl` — optional explorer URL for external link button.
- * - `iconSymbol` — optional symbol for icon extraction (used when icon doesn't match symbol, e.g., pool tokens).
- */
-export declare function TableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, }: TableCellAssetProps): import("react/jsx-runtime").JSX.Element;
-/**
- * TableCellUpdatable — table cell component for displaying editable values with old/new value comparison.
- *
- * @usage
- * Use TableCellUpdatable to display values that can be edited in table cells:
- * editable parameters, configurable settings, updatable data with change indication.
- *
- * Props:
- * - `oldValue` — previous value displayed with strikethrough when different from newValue.
- * - `newValue` — current/new value to display (required).
- * - `onEdit` — callback function executed when edit button is clicked.
- * - `isEditable` — if false, edit button is not shown (defaults to true).
- * - `className` — additional CSS classes for styling.
- * - `customButton` — custom React node to replace default edit button.
- * - `align` — text alignment: "left", "right", or "center" (defaults to "right").
- * - `postfix` — optional text displayed after the value.
- * - `disabled` — if true, edit button is disabled.
- * - `nowrap` — if true, prevents text wrapping.
- */
-export interface TableCellUpdatableProps {
-    oldValue?: string;
-    newValue: string;
-    onEdit?: () => void;
-    isEditable?: boolean;
-    className?: string;
-    customButton?: React.ReactNode;
-    align?: "left" | "right" | "center";
-    postfix?: string;
-    disabled?: boolean;
-    nowrap?: boolean;
-}
-export declare function TableCellUpdatable({ oldValue, newValue, onEdit, isEditable, className, align, customButton, postfix, disabled, nowrap, }: TableCellUpdatableProps): import("react/jsx-runtime").JSX.Element;
-/**
- * TableEditableAction — action button configuration for TableEditable.
- */
-export interface TableEditableAction {
-    text: string;
-    onClick: () => void;
-    loadingText?: string;
-    isLoading?: boolean;
-}
-/**
- * TableEditable — table component with header, action buttons, and editable content.
- *
- * @usage
- * Use TableEditable to create tables with editable content and action buttons:
- * data management tables, configuration tables, editable parameter lists.
- *
- * Props:
- * - `title` — table title displayed in header (required).
- * - `onNew` — callback function for "New" button action.
- * - `newButtonText` — text for "New" button (defaults to "New").
- * - `isLoading` — if true, "New" button shows loading state.
- * - `buttonLoadingText` — text shown in "New" button when loading (defaults to "Adding...").
- * - `actions` — array of additional action buttons (TableEditableAction[]).
- * - `children` — table content (Table rows/cells) (required).
- * - `disabled` — if true, all action buttons are disabled.
- * - `skipSignIn` — if true, skips sign-in requirement for actions (defaults to true).
- *
- * Note: Action buttons are wrapped in SignInRequired component and use TabButton for styling.
- *
- * Do NOT use TableEditable:
- * - for read-only tables without editing capabilities (use regular Table component).
- * - when you don't need action buttons or title (use regular Table component).
- */
-interface TableEditableProps {
-    title: string;
-    onNew?: () => void;
-    newButtonText?: string;
-    isLoading?: boolean;
-    buttonLoadingText?: string;
-    actions?: TableEditableAction[];
-    children: React.ReactNode;
-    disabled?: boolean;
-    skipSignIn?: boolean;
-}
-export declare function TableEditable({ title, onNew, newButtonText, buttonLoadingText, isLoading, actions, children, disabled, skipSignIn, }: TableEditableProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,25 +0,0 @@
-import * as React from "react";
-/**
- * GridTableLoaderProps — props for GridTableLoader component.
- */
-interface GridTableLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Number of columns to span (uses col-span-full by default)
-     */
-    colSpan?: number;
-}
-/**
- * GridTableLoader — loader component for infinite scroll in GridTable.
- *
- * @usage
- * Use GridTableLoader to display loading state at the bottom of grid tables:
- * infinite scroll loading indicators, table data fetching states.
- *
- * Props:
- * - `colSpan` — number of columns to span (uses col-span-full by default).
- *
- * Note: Displays centered spinner at the bottom of the table while loading more data.
- */
-declare const GridTableLoader: React.ForwardRefExoticComponent<GridTableLoaderProps & React.RefAttributes<HTMLDivElement>>;
-export { GridTableLoader };
-export type { GridTableLoaderProps };

package/dist/types/components/table/updated-value.d.ts

@@ -1,34 +0,0 @@
-/**
- * UpdatedValueProps — props for UpdatedValue component.
- */
-interface UpdatedValueProps {
-    oldValue?: string | number;
-    newValue: string | number;
-    onEdit?: () => void;
-    isEditable?: boolean;
-    disabled?: boolean;
-    nowrap?: boolean;
-    customButton?: React.ReactNode;
-    postfix?: string;
-}
-/**
- * UpdatedValue — component for displaying old and new values with edit functionality.
- *
- * @usage
- * Use UpdatedValue to show value changes with visual indication:
- * old value with strikethrough, new value, edit button for modifications.
- *
- * Props:
- * - `oldValue` — previous value displayed with strikethrough when different from newValue.
- * - `newValue` — current/new value to display (required).
- * - `onEdit` — callback function executed when edit button is clicked.
- * - `isEditable` — if false, edit button is not shown (defaults to true).
- * - `disabled` — if true, edit button is disabled (defaults to false).
- * - `nowrap` — if true, prevents text wrapping (defaults to false).
- * - `customButton` — custom React node to replace default edit button.
- * - `postfix` — optional text displayed after the value.
- *
- * Note: When oldValue differs from newValue, old value is shown with strikethrough and arrow (→) separator.
- */
-export declare function UpdatedValue({ oldValue, newValue, onEdit, isEditable, customButton, postfix, disabled, nowrap, }: UpdatedValueProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/theme-toggle/index.d.ts

@@ -1 +0,0 @@
-export * from './theme-toggle';

package/dist/types/components/theme-toggle/theme-toggle.d.ts

@@ -1,5 +0,0 @@
-/**
- * Theme toggle component
- * Example usage of ThemeProvider
- */
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/time-to-liquidation/index.d.ts

@@ -1 +0,0 @@
-export { TimeToLiquidation, type TimeToLiquidationProps, } from './time-to-liquidation';

package/dist/types/components/time-to-liquidation/time-to-liquidation.d.ts

@@ -1,24 +0,0 @@
-import { TTLZones } from '../../utils';
-import * as React from "react";
-export interface TimeToLiquidationProps {
-    /** Time to liquidation in milliseconds (bigint or number). */
-    timeToLiquidation: bigint | number | null;
-    /** TTL zone for status dot (matches A TTLZones). */
-    ttlZone?: TTLZones;
-    /** Extra class name. */
-    className?: string;
-}
-/**
- * TimeToLiquidation — displays time remaining until liquidation (matches interface).
- *
- * @usage
- * Use next to health/liquidation info to show remaining time and optional zone dot.
- *
- * @example
- * ```tsx
- * <TimeToLiquidation timeToLiquidation={86400000} ttlZone="good" />
- * <TimeToLiquidation timeToLiquidation={null} />
- * ```
- */
-declare const TimeToLiquidation: React.ForwardRefExoticComponent<TimeToLiquidationProps & React.RefAttributes<HTMLDivElement>>;
-export { TimeToLiquidation };

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

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

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-declare const toggleTrackVariants: (props?: ({
-    checked?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "onChange" | "type"> {
-    /** Controlled checked state */
-    checked: boolean;
-    /** Whether the toggle is disabled */
-    disabled?: boolean;
-    /** Callback when the user toggles; receives the next state */
-    onChange?: (nextState: boolean) => void;
-    /** Additional class name for the root label */
-    className?: string;
-}
-/**
- * Toggle — switch control for boolean state (on/off).
- * Matches interface (A): 32×20 track, 16px thumb, gray track / accent when checked.
- *
- * @usage
- * Use for: settings, options, or any on/off state where a switch is preferred over a checkbox.
- *
- * @example
- * ```tsx
- * <Toggle checked={enabled} onChange={setEnabled} />
- * <Toggle checked={value} onChange={setValue} disabled />
- * ```
- */
-declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
-export { Toggle, toggleTrackVariants };

package/dist/types/components/tokens-list-cell/index.d.ts

@@ -1 +0,0 @@
-export * from './tokens-list-cell';

package/dist/types/components/tokens-list-cell/tokens-list-cell.d.ts

@@ -1,92 +0,0 @@
-import { TokenFullData } from '../../types/common';
-import * as React from "react";
-/**
- * Display mode for the tokens list
- * - default: tokens displayed side by side with small gap
- * - cascade: tokens overlap each other (stacked effect)
- */
-export type TokensListCellMode = "default" | "cascade";
-/**
- * Asset balance type - either an object with token address or just an address string
- */
-export type AssetBalance = {
-    token: `0x${string}`;
-} | `0x${string}`;
-/**
- * Common options for TokensListCell
- */
-export interface TokensListCellOptions {
-    /**
-     * Display mode
-     * @default "default"
-     */
-    mode?: TokensListCellMode;
-    /**
-     * Whether to show tooltip with token name on icon hover
-     * @default true
-     */
-    showIconTooltip?: boolean;
-    /**
-     * Custom tooltip content for "+N" indicator
-     */
-    otherTooltip?: React.ReactNode;
-    /**
-     * Click handler for "+N" indicator
-     */
-    onOtherClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-}
-/**
- * Props for TokensListCell component
- */
-export interface TokensListCellProps {
-    /**
-     * Array of asset balances (token addresses or objects with token field)
-     */
-    balances: AssetBalance[];
-    /**
-     * Token data dictionary keyed by address
-     */
-    tokensList: Record<`0x${string}`, TokenFullData>;
-    /**
-     * Maximum number of tokens to display before showing "+N"
-     * @default 3
-     */
-    maxAssets?: number;
-    /**
-     * Size of token icons in pixels
-     * @default 24
-     */
-    iconSize?: number;
-    /**
-     * Additional display options
-     */
-    options?: TokensListCellOptions;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
-}
-/**
- * TokensListCell — displays a list of token icons with overflow indicator
- *
- * Shows up to `maxAssets` token icons, with a "+N" indicator for remaining tokens.
- * Supports two display modes: side-by-side (default) or cascading/stacked.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <TokensListCell
- *   balances={[{ token: "0x..." }, { token: "0x..." }]}
- *   tokensList={tokensMap}
- * />
- *
- * // Cascade mode with custom max
- * <TokensListCell
- *   balances={assets}
- *   tokensList={tokensMap}
- *   maxAssets={5}
- *   options={{ mode: "cascade" }}
- * />
- * ```
- */
-export declare function TokensListCell({ balances, tokensList, maxAssets, iconSize, options, className, }: TokensListCellProps): React.ReactElement;

package/dist/types/components/vertical-list/index.d.ts

@@ -1 +0,0 @@
-export { VerticalList, type VerticalListProps, verticalListVariants, } from './vertical-list';

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

@@ -1,52 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-declare const verticalListVariants: (props?: ({
-    rowGap?: "default" | "xs" | "md" | null | undefined;
-    divided?: boolean | null | undefined;
-    nested?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface VerticalListProps extends React.HTMLAttributes<HTMLUListElement>, VariantProps<typeof verticalListVariants> {
-    /**
-     * Show dividers between items
-     */
-    divided?: boolean;
-    /**
-     * Nested list (removes outer padding/margin)
-     */
-    nested?: boolean;
-}
-/**
- * VerticalList — component for displaying vertical lists of items.
- *
- * @usage
- * Use VerticalList to display a series of items in a vertical layout:
- * - Key-value pairs
- * - Transaction details
- * - Form field groups
- * - Settings lists
- *
- * @example
- * ```tsx
- * // Basic usage
- * <VerticalList>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </VerticalList>
- *
- * // With dividers
- * <VerticalList divided gap="md">
- *   <div>First item</div>
- *   <div>Second item</div>
- *   <div>Third item</div>
- * </VerticalList>
- *
- * // Nested list
- * <VerticalList nested gap="sm">
- *   <span>Nested item 1</span>
- *   <span>Nested item 2</span>
- * </VerticalList>
- * ```
- */
-declare const VerticalList: React.ForwardRefExoticComponent<VerticalListProps & React.RefAttributes<HTMLUListElement>>;
-export { VerticalList, verticalListVariants };