@undp/design-system-react/dist/index.d.ts

React based design system for UNDP

import { Accordion as Accordion_2 } from 'radix-ui';
import { Avatar as Avatar_2 } from 'radix-ui';
import { Checkbox as Checkbox_2 } from 'radix-ui';
import { ClassProp } from 'class-variance-authority/types';
import { ClassValue } from 'clsx';
import { Components } from 'react-markdown';
import { components } from 'react-select';
import { createFilter } from 'react-select';
import { CSSProperties } from 'react';
import { DayPicker } from 'react-day-picker';
import { default as default_2 } from 'react';
import { default as default_3 } from 'rc-slider';
import { Drawer as Drawer_2 } from 'vaul';
import { DropdownMenu as DropdownMenu_2 } from 'radix-ui';
import { ForwardRefExoticComponent } from 'react';
import { GroupBase } from 'react-select';
import { HoverCard as HoverCard_2 } from 'radix-ui';
import { HTMLAttributes } from 'react';
import { JSX } from 'react/jsx-runtime';
import { Label as Label_2 } from 'radix-ui';
import { Matcher } from 'react-day-picker';
import { MessageScroller as MessageScroller_2 } from '@shadcn/react/message-scroller';
import { Popover as Popover_2 } from 'radix-ui';
import { Props as Props_2 } from 'react-select';
import { PropsSingle } from 'react-day-picker';
import { RadioGroup as RadioGroup_2 } from 'radix-ui';
import * as React_2 from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import { Separator as Separator_2 } from 'radix-ui';
import { Switch as Switch_2 } from 'radix-ui';
import { Tabs as Tabs_2 } from 'radix-ui';
import { Toast as Toast_3 } from 'radix-ui';
import { Tooltip as Tooltip_2 } from 'radix-ui';
import { useMessageScroller } from '@shadcn/react/message-scroller';
import { useMessageScrollerScrollable } from '@shadcn/react/message-scroller';
import { useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
import { VariantProps } from 'class-variance-authority';

export declare const A: default_2.ForwardRefExoticComponent<default_2.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<(props?: ({
    variant?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "background" | "foreground" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLAnchorElement>>;

declare type AccentScale = {
    200?: string;
    400?: string;
    600?: string;
};

export declare const Accordion: default_2.ForwardRefExoticComponent<AccordionProps & default_2.RefAttributes<HTMLDivElement>>;

export declare const AccordionContent: default_2.ForwardRefExoticComponent<Omit<Accordion_2.AccordionContentProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;

export declare const AccordionItem: default_2.ForwardRefExoticComponent<Omit<Accordion_2.AccordionItemProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;

declare type AccordionProps = default_2.ComponentPropsWithoutRef<typeof Accordion_2.Root> & VariantProps<typeof accordionVariants>;

export declare const AccordionTrigger: default_2.ForwardRefExoticComponent<Omit<Accordion_2.AccordionTriggerProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & default_2.RefAttributes<HTMLButtonElement>>;

declare const accordionVariants: (props?: ({
    variant?: "primary" | "secondary" | "tertiary" | "quaternary" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Attachment({ className, state, size, orientation, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof attachmentVariants> & {
    state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
}): JSX.Element;

export declare function AttachmentAction({ variant, size, ...props }: React_2.ComponentProps<typeof Button>): JSX.Element;

export declare function AttachmentActions({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function AttachmentContent({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function AttachmentDescription({ className, ...props }: React_2.ComponentProps<'span'>): JSX.Element;

export declare function AttachmentGroup({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function AttachmentMedia({ className, variant, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof attachmentMediaVariants>): JSX.Element;

declare const attachmentMediaVariants: (props?: ({
    variant?: "image" | "icon" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function AttachmentTitle({ className, ...props }: React_2.ComponentProps<'span'>): JSX.Element;

export declare function AttachmentTrigger({ className, asChild, type, ...props }: React_2.ComponentProps<'button'> & {
    asChild?: boolean;
}): JSX.Element;

declare const attachmentVariants: (props?: ({
    size?: "default" | "xs" | "sm" | null | undefined;
    orientation?: "horizontal" | "vertical" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Avatar({ className, size, ...props }: React_2.ComponentProps<typeof Avatar_2.Root> & {
    size?: 'default' | 'sm' | 'lg';
}): JSX.Element;

export declare function AvatarBadge({ className, status, ...props }: React_2.ComponentProps<'span'> & VariantProps<typeof avatarBadgeVariants>): JSX.Element;

declare const avatarBadgeVariants: (props?: ({
    status?: "idle" | "available" | "offline" | "busy" | null | undefined;
} & ClassProp) | undefined) => string;

declare const avatarColorVariants: (props?: ({
    color?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "background" | "background-soft" | "foreground" | "foreground-soft" | "transparent" | "surface-2xs" | "surface-xs" | "surface-sm" | "surface-md" | "surface-lg" | "surface-xl" | "surface-2xl" | "surface-3xl" | "surface-4xl" | "sgd-1" | "sgd-2" | "sgd-3" | "sgd-4" | "sgd-5" | "sgd-6" | "sgd-7" | "sgd-8" | "sgd-9" | "sgd-10" | "sgd-11" | "sgd-12" | "sgd-13" | "sgd-14" | "sgd-15" | "sgd-16" | "sgd-17" | null | undefined;
    border?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

export declare function AvatarFallback({ className, color, border, ...props }: React_2.ComponentProps<typeof Avatar_2.Fallback> & VariantProps<typeof avatarColorVariants>): JSX.Element;

export declare function AvatarGroup({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function AvatarGroupCount({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function AvatarImage({ className, ...props }: React_2.ComponentProps<typeof Avatar_2.Image>): JSX.Element;

export declare function Badge({ className, rounded, variant, size, ...props }: default_2.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>): JSX.Element;

declare const badgeVariants: (props?: ({
    variant?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "outline" | "surface-sm" | "surface-xl" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
    size?: "base" | "xs" | "sm" | "lg" | "xl" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Banner: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
    backgroundColor?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "background" | "background-soft" | "foreground" | "foreground-soft" | "transparent" | null | undefined;
    padding?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "none" | null | undefined;
} & ClassProp) | undefined) => string> & VariantProps<(props?: ({
    bodyMaxWidth?: "base" | "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
    bodyGap?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "none" | null | undefined;
} & ClassProp) | undefined) => string> & VariantProps<(props?: ({
    sidebarWidth?: "base" | "sm" | "lg" | "full" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLDivElement>>;

export declare const BannerBody: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & default_2.RefAttributes<HTMLDivElement>>;

export declare const BannerBodyContent: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & default_2.RefAttributes<HTMLDivElement>>;

export declare const BannerBodySidebar: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & default_2.RefAttributes<HTMLDivElement>>;

declare interface BaseOption {
    value: string | number;
    label: string | number;
}

export declare const Blockquote: default_2.ForwardRefExoticComponent<default_2.QuoteHTMLAttributes<HTMLQuoteElement> & VariantProps<(props?: ({
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLQuoteElement>>;

declare type BlueScale = {
    100?: string;
    200?: string;
    300?: string;
    400?: string;
    500?: string;
    600?: string;
    700?: string;
};

export declare const Breadcrumb: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & default_2.RefAttributes<HTMLElement>>;

export declare function BreadcrumbEllipsis({ className, variant, ...props }: default_2.ComponentProps<'span'> & {
    variant?: 'default' | 'reverse';
}): JSX.Element;

export declare namespace BreadcrumbEllipsis {
    var displayName: string;
}

export declare const BreadcrumbItem: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & default_2.RefAttributes<HTMLLIElement>>;

export declare const BreadcrumbLink: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
    variant?: "default" | "reverse";
} & default_2.RefAttributes<HTMLAnchorElement>>;

export declare const BreadcrumbList: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & default_2.RefAttributes<HTMLOListElement>>;

export declare const BreadcrumbPage: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
    variant?: "default" | "reverse";
} & default_2.RefAttributes<HTMLSpanElement>>;

export declare function BreadcrumbSeparator({ variant }: {
    variant?: 'default' | 'reverse';
}): JSX.Element;

export declare namespace BreadcrumbSeparator {
    var displayName: string;
}

export declare function Bubble({ variant, align, className, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof bubbleVariants> & {
    align?: 'start' | 'end';
}): JSX.Element;

export declare function BubbleContent({ asChild, className, ...props }: React_2.ComponentProps<'div'> & {
    asChild?: boolean;
}): JSX.Element;

export declare function BubbleGroup({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function BubbleReactions({ side, align, className, ...props }: React_2.ComponentProps<'div'> & {
    align?: 'start' | 'end';
    side?: 'top' | 'bottom';
}): JSX.Element;

declare const bubbleVariants: (props?: ({
    variant?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "outline" | "surface-2xs" | "surface-xs" | "surface-sm" | "surface-md" | "surface-lg" | "surface-xl" | "surface-2xl" | "surface-3xl" | "surface-4xl" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Button({ className, variant, size, arrow, rounded, padding, asChild, ...props }: React_2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
}): JSX.Element;

declare const buttonVariants: (props?: ({
    variant?: "link" | "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "outline" | "icon" | "surface-hard" | "background" | "background-soft" | "foreground" | "foreground-soft" | null | undefined;
    arrow?: boolean | null | undefined;
    size?: "base" | "xs" | "sm" | "xl" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
    padding?: "base" | "sm" | "none" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React_2.ComponentProps<typeof DayPicker> & {
    buttonVariant?: React_2.ComponentProps<typeof Button>['variant'];
}): JSX.Element;

export declare const Card: React_2.ForwardRefExoticComponent<CardProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const CardDescription: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const CardFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const CardHeader: React_2.ForwardRefExoticComponent<CardProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const CardImage: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLImageElement> & {
    src: string;
    alt?: string;
} & React_2.RefAttributes<HTMLImageElement>>;

declare interface CardProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
    border?: boolean;
}

declare interface CardProps_2 extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants_2> {
    border?: boolean;
}

declare interface CardProps_3 extends React_2.HTMLAttributes<HTMLDivElement> {
    hoverImage?: string;
}

declare interface CardProps_4 extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants_3> {
    slides: {
        content: ReactNode;
        viz: ReactNode;
    }[];
    slideNo?: boolean;
    autoScroll?: boolean | number;
    classNames?: {
        content?: string;
        viz?: string;
        arrowButton?: string;
        arrows?: string;
        playPauseButton?: string;
        playPauseIcon?: string;
        progressBar?: string;
        progressBarBg?: string;
    };
    styles?: {
        content?: CSSProperties;
        viz?: CSSProperties;
        arrowButton?: CSSProperties;
        arrows?: CSSProperties;
        playPauseButton?: CSSProperties;
        playPauseIcon?: CSSProperties;
        progressBar?: CSSProperties;
        progressBarBg?: CSSProperties;
    };
}

export declare const CardTag: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLHeadingElement> & React_2.RefAttributes<HTMLHeadingElement>>;

export declare const CardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

declare const cardVariants: (props?: ({
    variant?: "with-image" | "without-image" | null | undefined;
    backgroundColor?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "background" | "background-soft" | "foreground" | "foreground-soft" | "transparent" | "surface-xl" | "surface-2xl" | "surface-3xl" | null | undefined;
    size?: "base" | "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
} & ClassProp) | undefined) => string;

declare const cardVariants_2: (props?: ({
    imageWidth?: "base" | "xs" | "sm" | "lg" | "xl" | "zero" | null | undefined;
} & ClassProp) | undefined) => string;

declare const cardVariants_3: (props?: ({
    vizWidth?: "base" | "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Carousel: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & default_2.RefAttributes<HTMLDivElement>>;

export declare const CarouselItem: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
    size?: "base" | "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLDivElement>>;

export declare const Checkbox: default_2.ForwardRefExoticComponent<Omit<Checkbox_2.CheckboxProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
    color?: "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "foreground" | null | undefined;
    variant?: "light" | "normal" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
} & ClassProp) | undefined) => string> & {
    label?: string;
    labelClassName?: string;
    checkBoxClassName?: string;
    checkIconClassName?: string;
} & default_2.RefAttributes<HTMLButtonElement>>;

export declare const CheckboxGroup: default_2.ForwardRefExoticComponent<CheckboxGroupProps & default_2.RefAttributes<HTMLDivElement>>;

export declare const CheckboxGroupItem: default_2.ForwardRefExoticComponent<CheckboxGroupItemProps & default_2.RefAttributes<HTMLButtonElement>>;

declare interface CheckboxGroupItemProps extends Omit<default_2.ComponentPropsWithoutRef<typeof Checkbox_2.Root>, 'value'> {
    label?: string;
    labelClassName?: string;
    checkBoxClassName?: string;
    checkIconClassName?: string;
    value: string;
}

declare interface CheckboxGroupProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'onValueChange'> {
    defaultValue?: string[];
    value?: string[];
    onValueChange?: (value: string[]) => void;
    color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'foreground' | undefined;
    rounded?: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
    variant?: 'light' | 'normal' | undefined;
}

export declare const Cite: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLElement>>;

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

export declare const Code: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLElement>>;

export { components }

declare interface ConfigDataType {
    blue?: BlueScale;
    gray?: GrayScale;
    yellow?: AccentScale;
    red?: AccentScale;
    green?: AccentScale;
    azure?: AccentScale;
    foreground?: string;
    foregroundSoft?: string;
    background?: string;
    backgroundSoft?: string;
    ring?: string;
    cardHoverColor?: string;
    footerBackground?: string;
    error?: SemanticGroup;
    warning?: SemanticGroup;
    success?: SemanticGroup;
    info?: SemanticGroup;
    primary?: SemanticGroup;
    secondary?: SemanticGroup;
    tertiary?: SemanticGroup;
    quaternary?: SemanticGroup;
    content?: ContentScale;
    surface?: SurfaceScale;
    stroke?: StrokeScale;
    opacityDisabled?: string;
    fonts?: {
        body?: string;
        heading?: string;
        sans?: string;
        mono?: string;
        serif?: string;
    };
    typography?: TypographyScale;
    leading?: LeadingScale;
    rounded?: RoundedScale;
    blurFrosted?: string;
}

export declare const ConfigProvider: ({ children, config, rtl }: ConfigProviderProps) => JSX.Element;

declare interface ConfigProviderProps {
    children: ReactNode;
    config?: ConfigDataType;
    theme?: 'dark' | 'light';
    rtl?: boolean;
}

export declare const Container: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
    backgroundColor?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "background" | "background-soft" | "foreground" | "foreground-soft" | "transparent" | "surface-2xs" | "surface-xs" | "surface-sm" | "surface-md" | "surface-lg" | "surface-xl" | "surface-2xl" | "surface-3xl" | "surface-4xl" | "sgd-1" | "sgd-2" | "sgd-3" | "sgd-4" | "sgd-5" | "sgd-6" | "sgd-7" | "sgd-8" | "sgd-9" | "sgd-10" | "sgd-11" | "sgd-12" | "sgd-13" | "sgd-14" | "sgd-15" | "sgd-16" | "sgd-17" | null | undefined;
    layout?: "default" | "flex" | null | undefined;
    width?: "base" | "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
    padding?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "none" | null | undefined;
    gap?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "none" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLDivElement>>;

declare type ContentScale = {
    primary?: string;
    secondary?: string;
    tertiary?: string;
    quaternary?: string;
    placeholder?: string;
    disabled?: string;
    reverse?: string;
};

export { createFilter }

export declare function DatePicker({ selected, onSelect, disablePopover, classNames, variant, inputSize, placeHolder, ...props }: SingleCalendarProps & VariantProps<typeof datePickerVariants> & {
    disablePopover?: boolean;
    classNames?: {
        popOverTrigger?: string;
        popOverContent?: string;
        popOverTriggerIcon?: string;
        popOverTriggerButton?: string;
    };
    placeHolder?: string;
}): JSX.Element;

declare const datePickerVariants: (props?: ({
    variant?: "light" | "normal" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
    inputSize?: "base" | "sm" | null | undefined;
} & ClassProp) | undefined) => string;

declare const datePickerVariants_2: (props?: ({
    variant?: "light" | "normal" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
    inputSize?: "base" | "sm" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function DateRangePicker({ onValueChange, value, defaultValue, disablePopover, classNames, variant, inputSize, numberOfMonths, ...props }: SingleCalendarProps_2 & VariantProps<typeof datePickerVariants_2> & {
    numberOfMonths?: number;
    disablePopover?: boolean;
    classNames?: {
        popOverTrigger?: string;
        popOverContent?: string;
        popOverTriggerIcon?: string;
        popOverTriggerButton?: string;
    };
    onValueChange?: (range: {
        from: Date | undefined;
        to: Date | undefined;
    }) => void;
    value?: {
        from: Date | undefined;
        to: Date | undefined;
    };
    defaultValue?: {
        from: Date | undefined;
        to: Date | undefined;
    };
}): JSX.Element;

export declare function DateTimePicker({ selected, onSelect, disablePopover, disabled, classNames, variant, inputSize, onValueChange, disabledHours, disabledMinutes, placeHolder, ...props }: SingleCalendarProps_3 & VariantProps<typeof dateTimePickerVariants> & {
    disablePopover?: boolean;
    classNames?: {
        popOverTrigger?: string;
        popOverContent?: string;
        popOverTriggerIcon?: string;
        popOverTriggerButton?: string;
    };
    onValueChange?: (date?: Date) => void;
    disabledHours?: number[];
    disabledMinutes?: number[];
    disabled?: Matcher | Matcher[];
    placeHolder?: string;
}): JSX.Element;

declare const dateTimePickerVariants: (props?: ({
    variant?: "light" | "normal" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
    inputSize?: "base" | "sm" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function DateTimeRangePicker({ disablePopover, classNames, variant, inputSize, rounded, onValueChange, value, defaultValue, disabled, }: {
    variant?: 'light' | 'normal';
    inputSize?: 'sm' | 'base';
    rounded?: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
    classNames?: {
        popOverTrigger?: string;
        popOverContent?: string;
        popOverTriggerIcon?: string;
    };
    onValueChange?: (dates?: {
        startDate?: Date;
        endDate?: Date;
    }) => void;
    value?: {
        startDate?: Date;
        endDate?: Date;
    };
    defaultValue?: {
        startDate?: Date;
        endDate?: Date;
    };
    disablePopover?: boolean;
    disabled?: Matcher | Matcher[];
}): JSX.Element;

export declare function Drawer({ direction, ...props }: React_2.ComponentProps<typeof Drawer_2.Root>): JSX.Element;

export declare function DrawerBody({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function DrawerClose({ ...props }: React_2.ComponentProps<typeof Drawer_2.Close>): JSX.Element;

export declare function DrawerContent({ className, children, inPortal, overlayClassName, closeButtonClassName, ...props }: DrawerContentProps): JSX.Element;

declare type DrawerContentProps = React_2.ComponentProps<typeof Drawer_2.Content> & {
    inPortal?: boolean;
    overlayClassName?: string;
    closeButtonClassName?: string;
};

export declare function DrawerDescription({ ...props }: React_2.ComponentProps<typeof Drawer_2.Description>): JSX.Element;

export declare function DrawerFooter({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function DrawerHeader({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function DrawerTitle({ ...props }: React_2.ComponentProps<typeof Drawer_2.Title>): JSX.Element;

export declare function DrawerTrigger({ ...props }: React_2.ComponentProps<typeof Drawer_2.Trigger>): JSX.Element;

export declare const DropdownMenu: default_2.FC<DropdownMenu_2.DropdownMenuProps>;

export declare const DropdownMenuContent: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuContentProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & {
    inPortal?: boolean;
} & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuGroup: default_2.ForwardRefExoticComponent<DropdownMenu_2.DropdownMenuGroupProps & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuItem: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuItemProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuLabel: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuLabelProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuPortal: default_2.FC<DropdownMenu_2.DropdownMenuPortalProps>;

export declare const DropdownMenuSeparator: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuSeparatorProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuSub: default_2.FC<DropdownMenu_2.DropdownMenuSubProps>;

export declare const DropdownMenuSubContent: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuSubContentProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuSubTrigger: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuSubTriggerProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & default_2.RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuTrigger: default_2.ForwardRefExoticComponent<Omit<DropdownMenu_2.DropdownMenuTriggerProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & default_2.RefAttributes<HTMLButtonElement>>;

export declare function DropdownSelect<Option extends BaseOption = BaseOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>({ className, classNames, variant, size, truncateLabel, placeholder, maxTagCount, isDisabled, components, isSearchable, color, showCheck, ...props }: SelectPropsDataType<Option, IsMulti, Group>): JSX.Element;

export declare const FeaturedCard: React_2.ForwardRefExoticComponent<FeaturedCardProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const FeaturedCardDescription: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const FeaturedCardFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

declare interface FeaturedCardProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof featuredCardVariants> {
    border?: boolean;
}

export declare const FeaturedCardTag: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const FeaturedCardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

declare const featuredCardVariants: (props?: ({
    backgroundColor?: "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "background" | "background-soft" | "foreground" | "foreground-soft" | "transparent" | "surface-xl" | "surface-2xl" | "surface-3xl" | null | undefined;
    size?: "base" | "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const FeatureShowcase: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare function FeatureShowcaseCard(props: {
    showTabs?: boolean;
    className?: string;
    sections: {
        section: string;
        items: {
            headerImage: string;
            stripColor?: string;
            content: React_2.ReactNode;
        }[];
    }[];
}): JSX.Element;

export declare const FeatureShowcaseIntro: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const FeatureShowcaseIntroBody: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLHeadingElement> & React_2.RefAttributes<HTMLHeadingElement>>;

export declare const FeatureShowcaseIntroTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLHeadingElement> & React_2.RefAttributes<HTMLHeadingElement>>;

export declare function FileUpload({ onFileChange, children, ...props }: default_2.InputHTMLAttributes<HTMLInputElement> & {
    onFileChange?: (_d: File[]) => void;
}): JSX.Element;

export declare function Footer({ className, children, ...props }: default_2.HTMLAttributes<HTMLElement>): JSX.Element;

export declare function FooterContent({ className, children, ...props }: default_2.HTMLAttributes<HTMLDivElement>): JSX.Element;

export declare function FooterCopyrightUnit({ className, children, ...props }: default_2.HTMLAttributes<HTMLDivElement>): JSX.Element;

export declare function FooterLogoUnit({ className, link, children, locale, ...props }: default_2.HTMLAttributes<HTMLDivElement> & {
    link?: string;
    locale?: 'en' | 'fr' | 'es';
}): JSX.Element;

export declare function FooterMainNavUnit({ className, children, ...props }: default_2.HTMLAttributes<HTMLDivElement>): JSX.Element;

declare type GrayScale = {
    100?: string;
    200?: string;
    300?: string;
    400?: string;
    500?: string;
    530?: string;
    560?: string;
    600?: string;
    700?: string;
};

export declare const Grid: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & GridProps & default_2.RefAttributes<HTMLDivElement>>;

export declare const GridItem: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & GridItemProps & default_2.RefAttributes<HTMLDivElement>>;

declare interface GridItemProps extends default_2.HTMLAttributes<HTMLDivElement> {
    noOfColSpan?: number | {
        base?: number;
        sm?: number;
        md?: number;
        lg?: number;
        xl?: number;
        '2xl'?: number;
    };
}

declare interface GridProps extends default_2.HTMLAttributes<HTMLDivElement> {
    noOfCol?: number | ResponsiveValue;
    gap?: string;
}

export declare const H1: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLHeadingElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    size?: "base" | "sm" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLHeadingElement>>;

export declare const H2: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLHeadingElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLHeadingElement>>;

export declare const H3: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLHeadingElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLHeadingElement>>;

export declare const H4: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLHeadingElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLHeadingElement>>;

export declare const H5: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLHeadingElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    size?: "base" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLHeadingElement>>;

export declare const H6: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLHeadingElement> & VariantProps<(props?: ({
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "base-responsive" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLHeadingElement>>;

export declare function Header({ className, children, ...props }: default_2.HTMLAttributes<HTMLElement>): JSX.Element;

export declare function HeaderActions({ className, children, ...props }: default_2.HTMLAttributes<HTMLDivElement>): JSX.Element;

export declare function HeaderLogoUnit({ className, siteName, siteSubName, hyperlink, logoLocale, ...props }: default_2.HTMLAttributes<HTMLDivElement> & {
    siteName: string;
    siteSubName?: string;
    hyperlink?: string;
    logoLocale?: 'en' | 'fr' | 'es';
}): JSX.Element;

export declare function HeaderMainNavUnit({ className, children, ...props }: default_2.HTMLAttributes<HTMLDivElement>): JSX.Element;

export declare function HeaderMenuUnit({ className, children, align, ...props }: default_2.HTMLAttributes<HTMLDivElement> & {
    align?: 'center' | 'end';
}): JSX.Element;

declare type HeadingSizeScale = {
    base?: string;
    sm?: string;
    xs?: string;
};

export declare const HoverCard: default_2.FC<HoverCard_2.HoverCardProps>;

export declare const HoverCardContent: default_2.ForwardRefExoticComponent<Omit<HoverCard_2.HoverCardContentProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;

export declare const HoverCardTrigger: default_2.ForwardRefExoticComponent<Omit<HoverCard_2.HoverCardTriggerProps & default_2.RefAttributes<HTMLAnchorElement>, "ref"> & default_2.RefAttributes<HTMLAnchorElement>>;

export declare const Input: default_2.ForwardRefExoticComponent<default_2.InputHTMLAttributes<HTMLInputElement> & VariantProps<(props?: ({
    variant?: "light" | "normal" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
    inputSize?: "base" | "sm" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLInputElement>>;

export declare function InputGroup({ className, variant, rounded, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>): JSX.Element;

export declare function InputGroupAddon({ className, align, variant, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): JSX.Element;

declare const inputGroupAddonVariants: (props?: ({
    variant?: "error" | "warning" | "success" | "info" | "surface" | "surface-hard" | "background" | "background-soft" | "foreground" | "foreground-soft" | "transparent" | null | undefined;
    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React_2.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>): JSX.Element;

declare const inputGroupButtonVariants: (props?: ({
    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function InputGroupInput({ className, ...props }: React_2.ComponentProps<'input'>): JSX.Element;

export declare function InputGroupText({ className, variant, ...props }: React_2.ComponentProps<'span'> & VariantProps<typeof inputGroupTextVariants>): JSX.Element;

export declare function InputGroupTextarea({ className, ...props }: React_2.ComponentProps<'textarea'>): JSX.Element;

declare const inputGroupTextVariants: (props?: ({
    variant?: "reverse" | "error" | "warning" | "success" | "info" | "primary" | "secondary" | "tertiary" | "quaternary" | "placeholder" | null | undefined;
} & ClassProp) | undefined) => string;

declare const inputGroupVariants: (props?: ({
    variant?: "light" | "normal" | null | undefined;
    rounded?: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Label: default_2.ForwardRefExoticComponent<Omit<Label_2.LabelProps & default_2.RefAttributes<HTMLLabelElement>, "ref"> & default_2.RefAttributes<HTMLLabelElement>>;

export declare function LanguageSwitcher(props: {
    options: {
        label: string;
        id: string;
    }[];
    defaultValue: string;
    value?: string;
    onValueChange?: (_d: string) => void;
    inPortal?: boolean;
}): JSX.Element;

declare type LeadingScale = {
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
    p?: string;
    '2xl'?: string;
    xl?: string;
    lg?: string;
    base?: string;
    sm?: string;
    xs?: string;
};

export declare const Li: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & default_2.RefAttributes<HTMLLIElement>>;

declare const loaderVariants: (props?: ({
    color?: "primary" | "secondary" | "tertiary" | "quaternary" | "foreground" | null | undefined;
    size?: "base" | "sm" | "lg" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function MarkdownRenderer({ classNames, text, components, }: {
    classNames?: {
        h1?: string;
        h2?: string;
        h3?: string;
        h4?: string;
        h5?: string;
        h6?: string;
        cite?: string;
        code?: string;
        blockquote?: string;
        p?: string;
        a?: string;
        ul?: string;
        ol?: string;
        li?: string;
        hr?: string;
        pre?: string;
        table?: string;
        thead?: string;
        td?: string;
        tr?: string;
        tbody?: string;
        th?: string;
    };
    components?: Components;
    text?: string;
}): JSX.Element;

export declare function Marker({ className, variant, asChild, ...props }: React_2.ComponentProps<'div'> & VariantProps<typeof markerVariants> & {
    asChild?: boolean;
}): JSX.Element;

export declare function MarkerContent({ className, ...props }: React_2.ComponentProps<'span'>): JSX.Element;

export declare function MarkerIcon({ className, ...props }: React_2.ComponentProps<'span'>): JSX.Element;

declare const markerVariants: (props?: ({
    variant?: "default" | "separator" | "border" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Message({ className, align, ...props }: React_2.ComponentProps<'div'> & {
    align?: 'start' | 'end';
}): JSX.Element;

export declare function MessageAvatar({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function MessageContent({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function MessageFooter({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function MessageGroup({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function MessageHeader({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;

export declare function MessageScroller({ className, ...props }: React_2.ComponentProps<typeof MessageScroller_2.Root>): JSX.Element;

export declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React_2.ComponentProps<typeof MessageScroller_2.Button> & Pick<React_2.ComponentProps<typeof Button>, 'variant' | 'size'>): JSX.Element;

export declare function MessageScrollerContent({ className, ...props }: React_2.ComponentProps<typeof MessageScroller_2.Content>): JSX.Element;

export declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React_2.ComponentProps<typeof MessageScroller_2.Item>): JSX.Element;

export declare function MessageScrollerProvider(props: React_2.ComponentProps<typeof MessageScroller_2.Provider>): JSX.Element;

export declare function MessageScrollerViewport({ className, ...props }: React_2.ComponentProps<typeof MessageScroller_2.Viewport>): JSX.Element;

export declare function Modal(props: {
    title?: string;
    description?: string;
    children?: default_2.ReactNode;
    footer?: default_2.ReactNode;
    open?: boolean;
    onClose?: () => void;
    className?: string;
    showCloseButton?: boolean;
    titleClassName?: string;
    footerClassName?: string;
    descriptionClassName?: string;
    overlayClassName?: string;
    closeButtonClassName?: string;
    inPortal?: boolean;
}): JSX.Element;

export declare const Ol: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & default_2.RefAttributes<HTMLOListElement>>;

export declare const P: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLParagraphElement> & VariantProps<(props?: ({
    size?: "base" | "xs" | "sm" | "lg" | "xl" | "base-responsive" | null | undefined;
    leading?: "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "none" | null | undefined;
    weight?: "light" | "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
    decoration?: "normal" | "italic" | "underline" | "line-through" | null | undefined;
    marginBottom?: "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "none" | "3xs" | null | undefined;
    alignment?: "left" | "right" | "center" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLParagraphElement>>;

export declare const PageHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & {
    backgroundImage?: string;
    minHeight?: boolean | string;
    contentMode?: "light" | "dark";
    variant?: "primary" | "secondary";
} & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageHeaderContent: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageHeaderHead: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCard: React_2.ForwardRefExoticComponent<CardProps_2 & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardContainer: React_2.ForwardRefExoticComponent<CardProps_2 & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardContent: React_2.ForwardRefExoticComponent<CardProps_2 & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardDescription: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardHeader: React_2.ForwardRefExoticComponent<CardProps_2 & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardImage: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLImageElement> & {
    src: string;
    alt?: string;
} & React_2.RefAttributes<HTMLImageElement>>;

export declare const PageWideCardTag: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const PageWideCardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare function Pagination(props: {
    defaultPage?: number;
    total: number;
    pageSize: number;
    onChange: (page: number) => void;
    className?: string;
    classNames?: {
        control?: string;
        list?: string;
        navigation?: string;
        ellipsis?: string;
        active?: string;
    };
}): JSX.Element;

export declare const Popover: default_2.FC<Popover_2.PopoverProps>;

export declare const PopoverAnchor: default_2.ForwardRefExoticComponent<Popover_2.PopoverAnchorProps & default_2.RefAttributes<HTMLDivElement>>;

export declare const PopoverContent: default_2.ForwardRefExoticComponent<Omit<Popover_2.PopoverContentProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;

export declare const PopoverTrigger: default_2.ForwardRefExoticComponent<Popover_2.PopoverTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;

declare interface Props {
    sdg: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | '17' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17;
    size?: number;
    background: boolean;
}

export declare const RadioGroup: default_2.ForwardRefExoticComponent<Omit<RadioGroup_2.RadioGroupProps & default_2.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
    color?: "primary" | "secondary" | "tertiary" | "quaternary" | "surface" | "foreground" | null | undefined;
    variant?: "light" | "normal" | null | undefined;
} & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLDivElement>>;

export declare const RadioGroupItem: default_2.ForwardRefExoticComponent<Omit<RadioGroup_2.RadioGroupItemProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & {
    label: string;
    radioClassName?: string;
    labelClassName?: string;
} & default_2.RefAttributes<HTMLButtonElement>>;

exp