import React, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, FormHTMLAttributes } from 'react';
import { Emitter } from 'mitt';
import z from 'zod';
import { ClassValue } from 'clsx';
import { UseFormSetError } from 'react-hook-form';

type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'error';
type ButtonSize = 'sm' | 'md' | 'lg';
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    children: ReactNode;
    variant?: ButtonVariant;
    size?: ButtonSize;
    isLoading?: boolean;
    isFullWidth?: boolean;
    leftIcon?: ReactNode;
    rightIcon?: ReactNode;
}
declare const Button: React.FC<ButtonProps>;

interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    label?: string;
    error?: string;
    helperText?: string;
    size?: 'sm' | 'md' | 'lg';
    fullWidth?: boolean;
    leftIcon?: ReactNode;
    rightIcon?: ReactNode;
    isLoading?: boolean;
}
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

interface SkeletonProps {
    className?: string;
    width?: string | number;
    height?: string | number;
    borderRadius?: string;
}
declare const Skeleton: React.FC<SkeletonProps>;

interface GridProps {
    children: ReactNode;
    container?: boolean;
    item?: boolean;
    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
    direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
    className?: string;
}
declare const Grid: React.FC<GridProps>;

type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
type IconVariant = 'outline' | 'solid';
interface IconProps {
    name: string;
    size?: IconSize;
    variant?: IconVariant;
    color?: string;
    className?: string;
}
declare const Icon: React.FC<IconProps>;

type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline';
type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
type TypographyColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
interface TypographyProps {
    variant?: TypographyVariant;
    align?: TypographyAlign;
    color?: TypographyColor;
    weight?: 'regular' | 'medium' | 'bold';
    children: ReactNode;
    className?: string;
    component?: React.ElementType;
    gutterBottom?: boolean;
    noWrap?: boolean;
}
declare const Typography: React.FC<TypographyProps>;

interface CardProps {
    children: ReactNode;
    className?: string;
    title?: string;
    subtitle?: string;
    footer?: ReactNode;
    elevation?: 'none' | 'sm' | 'md' | 'lg';
    bordered?: boolean;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    padding?: 'none' | 'sm' | 'md' | 'lg';
}
declare const Card: React.FC<CardProps>;

interface EmptyStateProps {
    title: string;
    description?: string;
    icon?: ReactNode;
    action?: {
        label: string;
        onClick: () => void;
    };
    className?: string;
    size?: 'sm' | 'md' | 'lg';
}
declare const EmptyState: React.FC<EmptyStateProps>;

interface ErrorStateProps {
    title?: string;
    message?: string;
    onRetry?: () => void;
    onHelp?: () => void;
    className?: string;
    icon?: React.ReactNode;
}
declare const ErrorState: React.FC<ErrorStateProps>;

interface FormFieldProps extends InputProps {
    name: string;
    children?: ReactNode;
}
declare const FormField: React.FC<FormFieldProps>;

type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
type AlertVariant = 'filled' | 'outlined' | 'standard';
interface AlertProps {
    severity?: AlertSeverity;
    variant?: AlertVariant;
    title?: string;
    children: ReactNode;
    className?: string;
    icon?: boolean | ReactNode;
    onClose?: () => void;
}
declare const Alert: React.FC<AlertProps>;

interface DataTableColumn<T> {
    key: keyof T & string;
    header: string;
    width?: string;
    render?: (item: T, index: number) => ReactNode;
}
interface DataTableProps<T> {
    columns: DataTableColumn<T>[];
    data?: T[];
    keyExtractor: (item: T) => string | number;
    isLoading?: boolean;
    error?: Error | null;
    onRetry?: () => void;
    emptyStateProps?: {
        title: string;
        description?: string;
        icon?: ReactNode;
        action?: {
            label: string;
            onClick: () => void;
        };
    };
    className?: string;
    rowClassName?: string | ((item: T, index: number) => string);
}
declare function DataTable<T>({ columns, data, keyExtractor, isLoading, error, onRetry, emptyStateProps, className, rowClassName, }: DataTableProps<T>): React.JSX.Element;

interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
    children: ReactNode;
    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
    isLoading?: boolean;
    submitLabel?: string;
    resetLabel?: string;
    onReset?: () => void;
    error?: string;
    success?: string;
    actionButtons?: ReactNode;
    alignActions?: 'left' | 'center' | 'right';
}
declare const Form: React.FC<FormProps>;

type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
type DeviceType = 'mobile' | 'tablet' | 'desktop';
type FluidSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
declare const FLUID_BREAKPOINTS: {
    readonly xs: "20rem";
    readonly sm: "30rem";
    readonly md: "48rem";
    readonly lg: "64rem";
    readonly xl: "80rem";
    readonly '2xl': "96rem";
    readonly '3xl': "120rem";
};
declare const TAILWIND_BREAKPOINTS: {
    readonly xs: 320;
    readonly sm: 640;
    readonly md: 768;
    readonly lg: 1024;
    readonly xl: 1280;
    readonly '2xl': 1536;
};
declare const createFluidGrid: (config: {
    type?: "auto-fit" | "auto-fill" | "fixed";
    minSize?: FluidSize | string;
    maxCols?: number;
    gap?: FluidSize;
    aspectRatio?: "square" | "video" | "photo" | "auto";
}) => string;
declare const createFluidText: (config: {
    size?: FluidSize;
    weight?: "normal" | "medium" | "semibold" | "bold";
    responsive?: boolean;
}) => string;
declare const createDisplayText: (config: {
    size?: "sm" | "md" | "lg" | "xl";
    weight?: "bold" | "black";
}) => string;
declare const createFluidSpacing: (config: {
    size?: FluidSize;
    type?: "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "m" | "mx" | "my" | "mt" | "mb" | "ml" | "mr";
    context?: "element" | "container" | "section";
}) => string;
declare const createFluidContainer: (config?: {
    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "fluid";
    padding?: boolean;
    center?: boolean;
}) => string;
declare const createFluidCard: (config?: {
    padding?: FluidSize;
    shadow?: "sm" | "md" | "lg" | "xl";
    rounded?: "sm" | "md" | "lg" | "xl";
    border?: boolean;
    hover?: boolean;
}) => string;
declare const createViewportGrid: (config: {
    minWidth?: string;
    maxCols?: number;
    gap?: FluidSize;
}) => string;
declare const createAspectRatioResponsive: (config: {
    widescreen?: string;
    standard?: string;
    mobile?: string;
}) => string;
declare const fluidPresets: {
    container: {
        narrow: string;
        default: string;
        wide: string;
        fullwidth: string;
        fluid: string;
    };
    typography: {
        hero: string;
        title: string;
        subtitle: string;
        heading: string;
        subheading: string;
        body: string;
        caption: string;
        small: string;
    };
    grid: {
        cards: string;
        products: string;
        gallery: string;
        'viewport-cards': string;
        'viewport-products': string;
        'viewport-gallery': string;
    };
    spacing: {
        section: string;
        container: string;
        element: string;
        sectionMargin: string;
        elementMargin: string;
    };
    card: {
        default: string;
        compact: string;
        spacious: string;
        minimal: string;
    };
};
declare const viewportUtils: {
    getViewportWidth: () => number;
    getViewportHeight: () => number;
    getAspectRatio: () => number;
    isWidescreen: () => boolean;
    getDeviceType: () => DeviceType;
    mediaQuery: (breakpoint: BreakpointKey) => string;
};
declare const createResponsiveGrid: (config: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
    gap?: "sm" | "md" | "lg";
}) => string;
declare const createResponsiveSpacing: (config: {
    mobile?: string;
    tablet?: string;
    desktop?: string;
    type?: "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "m" | "mx" | "my" | "mt" | "mb" | "ml" | "mr";
}) => string;

/**
 * Demo utility functions cho Fluid Responsive Design System
 * Showcase các tính năng mới: viewport percentages, rem-based breakpoints, fluid scaling
 */
declare const fluidTypographyExamples: {
    heroTitle: string;
    sectionTitle: string;
    mainHeading: string;
    subHeading: string;
    bodyLarge: string;
    bodyText: string;
    caption: string;
    small: string;
};
declare const fluidGridExamples: {
    cardsGrid: string;
    productsGrid: string;
    galleryGrid: string;
    viewportCards: string;
    viewportProducts: string;
    viewportGallery: string;
};
declare const fluidSpacingExamples: {
    elementPadding: {
        small: string;
        medium: string;
        large: string;
    };
    containerPadding: {
        small: string;
        medium: string;
        large: string;
    };
    sectionPadding: {
        small: string;
        medium: string;
        large: string;
    };
};
declare const fluidContainerExamples: {
    narrow: string;
    default: string;
    wide: string;
    fullwidth: string;
    fluid: string;
};
declare const fluidCardExamples: {
    compact: string;
    default: string;
    spacious: string;
    withShadow: string;
};
declare const responsiveVisibilityExamples: {
    mobileOnly: string;
    tabletOnly: string;
    desktopOnly: string;
    tabletUp: string;
    desktopUp: string;
    hideMobile: string;
    hideTablet: string;
    hideDesktop: string;
};
declare const usageExamples: {
    landingPage: {
        hero: string;
        title: string;
        subtitle: string;
        cta: string;
    };
    cardGrid: {
        container: string;
        grid: string;
        card: string;
        cardTitle: string;
        cardBody: string;
    };
    blog: {
        container: string;
        title: string;
        content: string;
        sidebar: string;
    };
    dashboard: {
        container: string;
        statsGrid: string;
        statCard: string;
        chartContainer: string;
    };
};
declare const demoUtils: {
    getCurrentDevice: () => DeviceType;
    getViewportInfo: () => {
        width: number;
        height: number;
        aspectRatio: number;
        isWidescreen: boolean;
        device: DeviceType;
    };
    createMediaQuery: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => string;
    matchesBreakpoint: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => boolean;
};
declare const completeExamples: {
    ecommerce: {
        container: string;
        grid: string;
        productCard: string;
        productImage: string;
        productTitle: string;
        productPrice: string;
    };
    news: {
        container: string;
        grid: string;
        articleCard: string;
        articleImage: string;
        articleTitle: string;
        articleExcerpt: string;
        articleMeta: string;
    };
    portfolio: {
        container: string;
        grid: string;
        galleryItem: string;
        galleryImage: string;
        galleryOverlay: string;
    };
    team: {
        container: string;
        grid: string;
        memberCard: string;
        memberAvatar: string;
        memberName: string;
        memberRole: string;
        memberBio: string;
    };
};
declare const fluidResponsiveDemo: {
    typography: {
        heroTitle: string;
        sectionTitle: string;
        mainHeading: string;
        subHeading: string;
        bodyLarge: string;
        bodyText: string;
        caption: string;
        small: string;
    };
    grids: {
        cardsGrid: string;
        productsGrid: string;
        galleryGrid: string;
        viewportCards: string;
        viewportProducts: string;
        viewportGallery: string;
    };
    spacing: {
        elementPadding: {
            small: string;
            medium: string;
            large: string;
        };
        containerPadding: {
            small: string;
            medium: string;
            large: string;
        };
        sectionPadding: {
            small: string;
            medium: string;
            large: string;
        };
    };
    containers: {
        narrow: string;
        default: string;
        wide: string;
        fullwidth: string;
        fluid: string;
    };
    cards: {
        compact: string;
        default: string;
        spacious: string;
        withShadow: string;
    };
    visibility: {
        mobileOnly: string;
        tabletOnly: string;
        desktopOnly: string;
        tabletUp: string;
        desktopUp: string;
        hideMobile: string;
        hideTablet: string;
        hideDesktop: string;
    };
    usage: {
        landingPage: {
            hero: string;
            title: string;
            subtitle: string;
            cta: string;
        };
        cardGrid: {
            container: string;
            grid: string;
            card: string;
            cardTitle: string;
            cardBody: string;
        };
        blog: {
            container: string;
            title: string;
            content: string;
            sidebar: string;
        };
        dashboard: {
            container: string;
            statsGrid: string;
            statCard: string;
            chartContainer: string;
        };
    };
    utils: {
        getCurrentDevice: () => DeviceType;
        getViewportInfo: () => {
            width: number;
            height: number;
            aspectRatio: number;
            isWidescreen: boolean;
            device: DeviceType;
        };
        createMediaQuery: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => string;
        matchesBreakpoint: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => boolean;
    };
    complete: {
        ecommerce: {
            container: string;
            grid: string;
            productCard: string;
            productImage: string;
            productTitle: string;
            productPrice: string;
        };
        news: {
            container: string;
            grid: string;
            articleCard: string;
            articleImage: string;
            articleTitle: string;
            articleExcerpt: string;
            articleMeta: string;
        };
        portfolio: {
            container: string;
            grid: string;
            galleryItem: string;
            galleryImage: string;
            galleryOverlay: string;
        };
        team: {
            container: string;
            grid: string;
            memberCard: string;
            memberAvatar: string;
            memberName: string;
            memberRole: string;
            memberBio: string;
        };
    };
    presets: {
        container: {
            narrow: string;
            default: string;
            wide: string;
            fullwidth: string;
            fluid: string;
        };
        typography: {
            hero: string;
            title: string;
            subtitle: string;
            heading: string;
            subheading: string;
            body: string;
            caption: string;
            small: string;
        };
        grid: {
            cards: string;
            products: string;
            gallery: string;
            'viewport-cards': string;
            'viewport-products': string;
            'viewport-gallery': string;
        };
        spacing: {
            section: string;
            container: string;
            element: string;
            sectionMargin: string;
            elementMargin: string;
        };
        card: {
            default: string;
            compact: string;
            spacious: string;
            minimal: string;
        };
    };
    common: {
        heroSection: string;
        cardGrid: string;
        productGrid: string;
        twoColumnLayout: string;
        threeColumnLayout: string;
    };
};

type EventData = string | number | boolean | object | null | undefined;
type Events = {
    [key: string]: EventData;
};
declare const eventBus: Emitter<Events>;

type EventHandler = (data?: EventData) => void;
/**
 * Hook để đăng ký và huỷ đăng ký sự kiện từ Event Bus
 * @param event Tên sự kiện cần lắng nghe
 * @param handler Hàm xử lý khi sự kiện được phát
 */
declare function useEventBus(event: string, handler: EventHandler): (data?: EventData) => void;

declare const LoginBody: z.ZodObject<{
    email: z.ZodString;
    password: z.ZodString;
}, "strict", z.ZodTypeAny, {
    email: string;
    password: string;
}, {
    email: string;
    password: string;
}>;
type LoginBodyType = z.TypeOf<typeof LoginBody>;
declare const LoginRes: z.ZodObject<{
    data: z.ZodObject<{
        accessToken: z.ZodString;
        refreshToken: z.ZodString;
    }, "strip", z.ZodTypeAny, {
        accessToken: string;
        refreshToken: string;
    }, {
        accessToken: string;
        refreshToken: string;
    }>;
    message: z.ZodString;
}, "strip", z.ZodTypeAny, {
    data: {
        accessToken: string;
        refreshToken: string;
    };
    message: string;
}, {
    data: {
        accessToken: string;
        refreshToken: string;
    };
    message: string;
}>;
type LoginResType = z.TypeOf<typeof LoginRes>;
declare const RefreshTokenBody: z.ZodObject<{
    refreshToken: z.ZodString;
}, "strict", z.ZodTypeAny, {
    refreshToken: string;
}, {
    refreshToken: string;
}>;
type RefreshTokenBodyType = z.TypeOf<typeof RefreshTokenBody>;
declare const RefreshTokenRes: z.ZodObject<{
    data: z.ZodObject<{
        accessToken: z.ZodString;
        refreshToken: z.ZodString;
    }, "strip", z.ZodTypeAny, {
        accessToken: string;
        refreshToken: string;
    }, {
        accessToken: string;
        refreshToken: string;
    }>;
    message: z.ZodString;
}, "strip", z.ZodTypeAny, {
    data: {
        accessToken: string;
        refreshToken: string;
    };
    message: string;
}, {
    data: {
        accessToken: string;
        refreshToken: string;
    };
    message: string;
}>;
type RefreshTokenResType = z.TypeOf<typeof RefreshTokenRes>;
declare const LogoutBody: z.ZodObject<{
    refreshToken: z.ZodString;
}, "strict", z.ZodTypeAny, {
    refreshToken: string;
}, {
    refreshToken: string;
}>;
type LogoutBodyType = z.TypeOf<typeof LogoutBody>;

declare const EVENTS: {
    USER: {
        LOGGED_IN: string;
        LOGGED_OUT: string;
        UPDATED_PROFILE: string;
    };
    DATA: {
        UPDATED: string;
        DELETED: string;
        CREATED: string;
        LOADED: string;
        ERROR: string;
    };
    UI: {
        THEME_CHANGED: string;
        LANGUAGE_CHANGED: string;
        SIDEBAR_TOGGLED: string;
        MODAL_OPENED: string;
        MODAL_CLOSED: string;
        NOTIFICATION_SHOWN: string;
    };
};

interface AccessTokenPayloadCreate {
    userId: number;
    deviceId: number;
    roleId: number;
    roleName: string;
}
interface AccessTokenPayload extends AccessTokenPayloadCreate {
    exp: number;
    iat: number;
}
interface RefreshTokenPayloadCreate {
    userId: number;
}
interface RefreshTokenPayload extends RefreshTokenPayloadCreate {
    exp: number;
    iat: number;
}

declare function cn(...inputs: ClassValue[]): string;

interface AuthApi {
    refreshToken: (body: RefreshTokenBodyType) => Promise<RefreshTokenResType>;
}
declare const handleErrorApi: ({ error, setError, }: {
    error: any;
    setError?: UseFormSetError<any>;
}) => void;
declare const getAccessTokenFromLocalStorage: () => string | null;
declare const getRefreshTokenFromLocalStorage: () => string | null;
declare const setAccessTokenToLocalStorage: (value: string) => void;
declare const setRefreshTokenToLocalStorage: (value: string) => void;
declare const removeTokensFromLocalStorage: () => void;
declare const checkAndRefreshToken: (param?: {
    onError?: () => void;
    onSuccess?: () => void;
    authApi: AuthApi;
}) => Promise<void>;
declare const decodeToken: (token: string) => RefreshTokenPayload | AccessTokenPayload;

/**
 * Design System Tokens
 * Các giá trị cơ bản trong hệ thống thiết kế
 */
declare const colors: {
    primary: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    secondary: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    success: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    warning: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    error: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    info: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    neutral: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
};
declare const typography: {
    fontSize: {
        xs: string;
        sm: string;
        base: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
        '5xl': string;
    };
    fontWeight: {
        regular: number;
        medium: number;
        bold: number;
    };
    lineHeight: {
        none: number;
        tight: number;
        normal: number;
        relaxed: number;
    };
    letterSpacing: {
        tighter: string;
        tight: string;
        normal: string;
        wide: string;
        wider: string;
    };
    fontFamily: {
        heading: string;
        body: string;
    };
};
declare const spacing: {
    0: string;
    1: string;
    2: string;
    3: string;
    4: string;
    5: string;
    6: string;
    8: string;
    10: string;
    12: string;
    16: string;
    20: string;
    24: string;
    32: string;
};
declare const borderRadius: {
    none: string;
    sm: string;
    default: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    full: string;
};
declare const shadows: {
    none: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
};
declare const zIndex: {
    0: number;
    10: number;
    20: number;
    30: number;
    40: number;
    50: number;
    auto: string;
    dropdown: number;
    sticky: number;
    fixed: number;
    modalBackdrop: number;
    modal: number;
    popover: number;
    tooltip: number;
};
declare const transitions: {
    duration: {
        75: string;
        100: string;
        150: string;
        200: string;
        300: string;
        500: string;
        700: string;
        1000: string;
    };
    timing: {
        default: string;
        linear: string;
        in: string;
        out: string;
        'in-out': string;
    };
};
declare const grid: {
    columns: number;
    gutter: string;
    margin: string;
};
declare const breakpoints: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
};
declare const iconSizes: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
};
declare const designTokens: {
    colors: {
        primary: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        secondary: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        success: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        warning: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        error: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        info: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        neutral: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
    };
    typography: {
        fontSize: {
            xs: string;
            sm: string;
            base: string;
            lg: string;
            xl: string;
            '2xl': string;
            '3xl': string;
            '4xl': string;
            '5xl': string;
        };
        fontWeight: {
            regular: number;
            medium: number;
            bold: number;
        };
        lineHeight: {
            none: number;
            tight: number;
            normal: number;
            relaxed: number;
        };
        letterSpacing: {
            tighter: string;
            tight: string;
            normal: string;
            wide: string;
            wider: string;
        };
        fontFamily: {
            heading: string;
            body: string;
        };
    };
    spacing: {
        0: string;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        6: string;
        8: string;
        10: string;
        12: string;
        16: string;
        20: string;
        24: string;
        32: string;
    };
    borderRadius: {
        none: string;
        sm: string;
        default: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        full: string;
    };
    shadows: {
        none: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
    };
    zIndex: {
        0: number;
        10: number;
        20: number;
        30: number;
        40: number;
        50: number;
        auto: string;
        dropdown: number;
        sticky: number;
        fixed: number;
        modalBackdrop: number;
        modal: number;
        popover: number;
        tooltip: number;
    };
    transitions: {
        duration: {
            75: string;
            100: string;
            150: string;
            200: string;
            300: string;
            500: string;
            700: string;
            1000: string;
        };
        timing: {
            default: string;
            linear: string;
            in: string;
            out: string;
            'in-out': string;
        };
    };
    grid: {
        columns: number;
        gutter: string;
        margin: string;
    };
    breakpoints: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
    };
    iconSizes: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
    };
};

declare const TokenType: {
    readonly AccessToken: "AccessToken";
    readonly RefreshToken: "RefreshToken";
};

export { AccessTokenPayload, AccessTokenPayloadCreate, Alert, AlertProps, AlertSeverity, AlertVariant, BreakpointKey, Button, ButtonProps, ButtonSize, ButtonVariant, Card, CardProps, DataTable, DataTableColumn, DataTableProps, DeviceType, EVENTS, EmptyState, EmptyStateProps, ErrorState, ErrorStateProps, FLUID_BREAKPOINTS, FluidSize, Form, FormField, FormFieldProps, FormProps, Grid, GridProps, Icon, IconProps, IconSize, IconVariant, Input, InputProps, LoginBody, LoginBodyType, LoginRes, LoginResType, LogoutBody, LogoutBodyType, RefreshTokenBody, RefreshTokenBodyType, RefreshTokenPayload, RefreshTokenPayloadCreate, RefreshTokenRes, RefreshTokenResType, Skeleton, SkeletonProps, TAILWIND_BREAKPOINTS, TokenType, Typography, TypographyAlign, TypographyColor, TypographyProps, TypographyVariant, borderRadius, breakpoints, checkAndRefreshToken, cn, colors, completeExamples, createAspectRatioResponsive, createDisplayText, createFluidCard, createFluidContainer, createFluidGrid, createFluidSpacing, createFluidText, createResponsiveGrid, createResponsiveSpacing, createViewportGrid, decodeToken, demoUtils, designTokens, eventBus, fluidCardExamples, fluidContainerExamples, fluidGridExamples, fluidPresets, fluidResponsiveDemo, fluidSpacingExamples, fluidTypographyExamples, getAccessTokenFromLocalStorage, getRefreshTokenFromLocalStorage, grid, handleErrorApi, iconSizes, removeTokensFromLocalStorage, responsiveVisibilityExamples, setAccessTokenToLocalStorage, setRefreshTokenToLocalStorage, shadows, spacing, transitions, typography, usageExamples, useEventBus, viewportUtils, zIndex };