@metrostar/comet-uswds/dist/index.d.ts

React with TypeScript Component Library based on USWDS 3.0.

import React$1, { ReactNode, ReactElement, SyntheticEvent, JSX, PropsWithChildren, ChangeEventHandler, MouseEventHandler, FormEvent } from 'react';

interface AccordionItemProps {
    /**
     * The unique identifier for the accordion item
     */
    id: string;
    /**
     * The label value for the accordion item
     */
    label: string;
    /**
     * Whether or not the accordion item is expanded
     */
    expanded: boolean;
    /**
     * The body of the accordion item
     */
    children: ReactNode;
}
interface AccordionProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * Whether or not to allow multiple items to be expanded at once
     */
    allowMultiSelect?: boolean;
    /**
     * An array of AccordionItem objects, used to build the accordion
     */
    items?: AccordionItemProps[];
    /**
     * AccordionItem components to display as children
     */
    children?: ReactElement<AccordionItemProps> | Array<ReactElement<AccordionItemProps>>;
}
/**
 * An accordion is a list of headers that hide or reveal additional content when selected.
 */
declare const Accordion: ({ id, allowMultiSelect, items, children, }: AccordionProps) => ReactElement;
declare const AccordionItem: ({ id, label, expanded, children, }: AccordionItemProps) => ReactElement;

interface AlertProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of alert to display
     */
    type: 'info' | 'warning' | 'error' | 'success' | 'emergency';
    /**
     * Whether or not to display the alert
     */
    show?: boolean;
    /**
     * Whether or not to display a slim version of the alert
     */
    slim?: boolean;
    /**
     * Whether or not to display the alert icon
     */
    noIcon?: boolean;
    /**
     * Whether or not to display the close button
     */
    allowClose?: boolean;
    /**
     * Whether or not to display the alert heading
     */
    heading?: string;
    /**
     * The body of the alert as an optional prop
     */
    body?: React.ReactNode;
    /**
     * The body of the alert
     */
    children?: React.ReactNode;
    /**
     * The function to call when the alert is closed
     * */
    onClose?: () => void;
}
/**
 * An alert keeps users informed of important and sometimes time-sensitive changes.
 */
declare const Alert: ({ id, type, show, slim, noIcon, allowClose, heading, body, children, onClose, }: AlertProps) => React.ReactElement;

interface BannerProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of banner to display
     */
    type?: 'gov' | 'mil';
}
/**
 * Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.
 */
declare const Banner: ({ id, type }: BannerProps) => React$1.ReactElement;

interface BreadcrumbItemProps {
    /**
     * The intended url path for the item
     */
    path: string;
    /**
     * The display value for this bread crumb item
     */
    name: string;
    /**
     * Custom callback for when breadcrumb item is clicked
     */
    action?: Function;
}
interface BreadcrumbProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * Custom callback for when breadcrumb item is clicked
     */
    action: Function;
    /**
     * Custom value to display as the current location
     */
    current?: string;
    /**
     * An array of bread crumb items to display
     */
    items?: BreadcrumbItemProps[];
    /**
     * BreadcrumbItem components to display as children
     */
    children?: ReactElement<BreadcrumbItemProps> | Array<ReactElement<BreadcrumbItemProps>>;
}
/**
 * Breadcrumbs provide secondary navigation to help users understand where they are in a website.
 */
declare const Breadcrumb: ({ id, current, action, items, children, }: BreadcrumbProps) => ReactElement;
declare const BreadcrumbItem: ({ path, name, action }: BreadcrumbItemProps) => ReactElement;

interface ButtonProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of button to display
     */
    type?: 'button' | 'submit' | 'reset';
    /**
     * The style variant of button to display
     */
    variant?: 'default' | 'secondary' | 'accent-cool' | 'accent-warm' | 'base' | 'outline' | 'outline-inverse' | 'unstyled';
    /**
     * The size of the button
     */
    size?: 'default' | 'big';
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * Custom callback for when button is clicked
     */
    onClick?: (param: SyntheticEvent) => void;
    /**
     * The contents of the button
     */
    children?: ReactNode;
}
/**
 * A button draws attention to important actions with a large selectable surface.
 */
declare const Button: ({ id, type, variant, size, className, children, ...props }: ButtonProps & JSX.IntrinsicElements["button"]) => React$1.ReactElement;

interface ButtonGroupProps {
    /**
     * The unique identifier for this component
     */
    id?: string;
    /**
     * The type of button group to display
     */
    type?: 'default' | 'segmented';
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * The contents of the label
     */
    children?: ReactNode;
}
/**
 * A button group collects similar or related actions.
 */
declare const ButtonGroup: ({ id, type, className, children, }: ButtonGroupProps) => React$1.ReactElement;

interface CardProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The layout of the card
     */
    layout?: 'default' | 'flag';
    /**
     * Whether the media is on the right
     */
    mediaRight?: boolean;
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * The body of the card
     */
    children: ReactNode;
}
interface CardMediaProps {
    /**
     * Whether the card media is inset
     */
    inset?: boolean;
    /**
     * Whether the card media is exdent
     */
    exdent?: boolean;
    /**
     * The body of the card media
     */
    children: ReactNode;
}
/**
 * Cards contain content and actions about a single subject.
 */
declare const Card: ({ id, layout, mediaRight, className, children, }: CardProps) => React$1.ReactElement;
declare const CardBody: ({ children }: PropsWithChildren) => React$1.ReactElement;
declare const CardHeader: ({ children }: PropsWithChildren) => React$1.ReactElement;
declare const CardMedia: ({ inset, exdent, children, }: CardMediaProps) => React$1.ReactElement;
declare const CardFooter: ({ children }: PropsWithChildren) => React$1.ReactElement;

declare const CharacterCountContainer: ({ className, ...divProps }: JSX.IntrinsicElements["div"]) => React$1.ReactElement;
interface CharacterCountProps {
    /**
     * The unique identifier for the character count span
     */
    id: string;
}
/**
 * Character count helps users know how much text they can enter when there is a limit on the number of characters.
 */
declare const CharacterCount: ({ id, ...spanProps }: CharacterCountProps & JSX.IntrinsicElements["span"]) => React$1.ReactElement;

interface CheckboxData {
    /**
     * The text inside of the checkbox
     */
    label: string;
    /**
     * Default value of the checkbox
     */
    value?: string | readonly string[] | number;
    /**
     * Whether the checkbox is checked by default
     */
    checked?: boolean;
    /**
     * Whether the checkbox is checked by default
     */
    defaultChecked?: boolean;
}
interface CheckboxProps extends CheckboxData {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name for the checkbox input field
     */
    name?: string;
    /**
     * Whether the component is rendered as a tile
     */
    isTile?: boolean;
    /**
     * Event handler will be triggered when the checkbox value changes
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Event handler will be triggered when the checkbox is clicked
     */
    onClick?: MouseEventHandler<HTMLInputElement>;
}
/**
 * Checkboxes allow users to select one or more options from a list.
 */
declare const Checkbox: ({ id, name, label, checked, defaultChecked, isTile, onChange, onClick, ...inputProps }: CheckboxProps & JSX.IntrinsicElements["input"]) => React$1.ReactElement;

interface CheckboxGroupProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name for all checkbox input fields
     */
    name: string;
    /**
     * Array of checkbox data for the input fields
     */
    data: CheckboxData[];
    /**
     * Whether the components are rendered as a tile
     */
    areTiles?: boolean;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * Event handler will be triggered when the checkbox value changes
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Event handler will be triggered when the checkbox is clicked
     */
    onClick?: MouseEventHandler<HTMLInputElement>;
}
declare const CheckboxGroup: ({ id, name, data, areTiles, required, label, helperText, errors, onChange, onClick, }: CheckboxGroupProps) => React$1.ReactElement;

interface SelectOptionProps {
    /**
     * The value for the option
     */
    value: string | readonly string[] | number;
    /**
     * The label for the option
     */
    label: string;
}
interface SelectProps {
    /**
     * The unique identifier for the select
     */
    id: string;
    /**
     * The name of the select
     */
    name?: string;
    /**
     * The default option of the select
     */
    defaultOption?: SelectOptionProps | null;
    /**
     * The options of the select
     */
    options?: SelectOptionProps[];
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * SelectOption components to display as children
     */
    children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>>;
    /**
     * Event handler for when value of the select is changed
     */
    onChange?: ChangeEventHandler<HTMLSelectElement>;
}
/**
 * A select component allows users to choose one option from a temporary modal menu.
 */
declare const Select: ({ id, defaultOption, options, required, label, helperText, errors, onChange, className, children, ...selectProps }: SelectProps & JSX.IntrinsicElements["select"]) => ReactElement;
declare const SelectOption: ({ value, label }: SelectOptionProps) => ReactElement;

type ComboBoxOptionProps = SelectOptionProps;
type ComboBoxProps = {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name of the select
     */
    name?: string;
    /**
     * The options of the select
     */
    options?: SelectOptionProps[];
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     *  The placeholder value to display in the control
     */
    placeholder?: string;
    /**
     * SelectOption components to display as children
     */
    children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>>;
    /**
     * Event handler for when value of the select is changed
     */
    onChange?: ChangeEventHandler<HTMLSelectElement>;
} & SelectProps & JSX.IntrinsicElements['select'];
/**
 * A combo box helps users select an item from a large list of options.
 */
declare const ComboBox: ({ id, options, required, label, helperText, errors, onChange, className, children, defaultValue, placeholder, ...selectProps }: ComboBoxProps) => React$1.ReactElement;

type ValidationStatus = 'error' | 'success';

interface DatePickerProps {
    /**
     * The unique identifier for the input field
     */
    id: string;
    /**
     * The name of the input field
     */
    name?: string;
    /**
     * The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default.
     */
    minDate?: Date | string;
    /**
     * The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in an later date will cause native form validation error. There is no default maximum date.
     */
    maxDate?: Date | string;
    /**
     * The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD.
     */
    dateRange?: Date | string;
    /**
     * The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD.
     */
    defaultValue?: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * State based styling to apply to the form group
     */
    validationStatus?: ValidationStatus;
    /**
     * Event handler will be triggered when the date-picker value changes
     */
    onChange?: (this: HTMLInputElement, event: Event) => void;
}
/**
 * A date picker helps users select a single date.
 */
declare const DatePicker: ({ id, minDate, maxDate, dateRange, defaultValue, required, label, helperText, errors, validationStatus, onChange, ...inputProps }: DatePickerProps & JSX.IntrinsicElements["input"]) => React$1.ReactElement;

interface DateRangePickerProps {
    /**
     * The unique identifier for the date range picker field
     */
    id?: string;
}
/**
 * A date range picker helps users select a range between two dates.
 */
declare const DateRangePickerContainer: ({ id, children, }: DateRangePickerProps & PropsWithChildren<unknown>) => React$1.ReactElement;

interface ErrorMessagesProps {
    /**
     * The unique identifier for this component
     */
    id?: string;
    /**
     * An array of error strings to display
     */
    errors?: string | string[];
    /**
     * ReactNode components to display as children
     */
    children?: ReactNode;
}
/**
 * Outputs a list of error messages as HTML.
 */
declare const ErrorMessages: ({ id, errors, children, }: ErrorMessagesProps) => React$1.ReactElement;

interface FileInputProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name for the file input field
     */
    name?: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
}
/**
 * File input allows users to attach one or multiple files.
 */
declare const FileInput: ({ id, required, label, helperText, errors, ...inputProps }: FileInputProps & JSX.IntrinsicElements["input"]) => React$1.ReactElement;

interface FormProps {
    /**
     * The unique identifier for the dropdown
     */
    id: string;
    /**
     * Whether to render a large form
     */
    isLarge?: boolean;
}
/**
 * A form allows users to enter information into a page.
 */
declare const Form: ({ id, isLarge, className, children, ...formProps }: FormProps & JSX.IntrinsicElements["form"]) => React.ReactElement;

interface FormGroupProps {
    /**
     * The unique identifier for this component
     */
    id?: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * State based styling to apply to the form group
     */
    validationStatus?: ValidationStatus;
    /**
     * Additional class name for the form group
     */
    className?: string;
    /**
     * The contents of the form group
     */
    fieldControl?: ReactNode;
    /**
     * The contents of the form group
     */
    children?: ReactNode;
}
/**
 * A wrapper for form elements used to provide validation formatting.
 */
declare const FormGroup: ({ id, required, label, helperText, errors, validationStatus, className, fieldControl, children, }: FormGroupProps) => React$1.ReactElement;

interface HelperTextProps {
    /**
     * The unique identifier for this component
     */
    id?: string;
    /**
     * The contents of the helper text
     */
    children: ReactNode;
}
/**
 * Defines helper text for an HTML element.
 */
declare const HelperText: ({ id, children }: HelperTextProps) => React$1.ReactElement;

interface IconProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of icon to display
     */
    type?: 'accessibility_new' | 'accessible_forward' | 'account_balance' | 'account_box' | 'account_circle' | 'add' | 'add_circle' | 'add_circle_outline' | 'alarm' | 'alernate_email' | 'announcement' | 'arrow_back' | 'arrow_downward' | 'arrow_drop_down' | 'arrow_drop_up' | 'arrow_forward' | 'arrow_upward' | 'api' | 'assessment' | 'attach_file' | 'attach_money' | 'autorenew' | 'backpack' | 'bathtub' | 'bedding' | 'bookmark' | 'bug_report' | 'build' | 'calendar_today' | 'campaign' | 'camping' | 'cancel' | 'chat' | 'check' | 'check_box_outline_blank' | 'check_circle' | 'check_circle_outline' | 'checkroom' | 'clean_hands' | 'clothes' | 'close' | 'closed_caption' | 'cloud' | 'code' | 'comment' | 'connect_without_contact' | 'construction' | 'construction_worker' | 'contact_page' | 'content_copy' | 'coronavirus' | 'credit_card' | 'deck' | 'delete' | 'device_thermostat' | 'directions' | 'directions_bike' | 'directions_bus' | 'directions_car' | 'directions_walk' | 'do_not_disturb' | 'do_not_touch' | 'drag_handle' | 'eco' | 'edit' | 'electrical_services' | 'emoji_events' | 'error' | 'error_outline' | 'event' | 'expand_less' | 'expand_more' | 'facebook' | 'fast_forward' | 'fast_rewind' | 'favorite' | 'favorite_border' | 'file_download' | 'file_present' | 'file_upload' | 'filter_alt' | 'filter_list' | 'fingerprint' | 'first_page' | 'flag' | 'flickr' | 'flight' | 'flooding' | 'folder' | 'folder_open' | 'format_quote' | 'format_size' | 'forum' | 'github' | 'grid_view' | 'group_add' | 'groups' | 'hearing' | 'help' | 'help_outline' | 'highlight_off' | 'history' | 'home' | 'hospital' | 'hotel' | 'hourglass_empty' | 'hurricane' | 'identification' | 'image' | 'info' | 'info_outline' | 'insights' | 'instagram' | 'keyboard' | 'label' | 'language' | 'last_page' | 'launch' | 'lightbulb' | 'lightbulb_outline' | 'link' | 'link_off' | 'list' | 'local_cafe' | 'local_fire_department' | 'local_gas_station' | 'local_grocery_store' | 'local_hospital' | 'local_laundry_servie' | 'local_library' | 'local_offer' | 'local_parking' | 'local_pharmacy' | 'local_police' | 'local_taxi' | 'location_city' | 'lock' | 'lock_open' | 'lock_outline' | 'login' | 'logout' | 'loop' | 'mail' | 'mail_outline' | 'map' | 'masks' | 'medical_services' | 'menu' | 'military_tech' | 'more_horiz' | 'more_vert' | 'my_location' | 'navigate_before' | 'navigate_next' | 'navigate_far_before' | 'navigate_far_next' | 'near_me' | 'notifications' | 'notifications_active' | 'notifications_none' | 'park' | 'people' | 'person' | 'pets' | 'phone' | 'photo_camera' | 'print' | 'priority_high' | 'public' | 'push_pin' | 'radio_button_unchecked' | 'rain' | 'reduce_capacity' | 'remove' | 'report' | 'restaurant' | 'rss_feed' | 'safety_divider' | 'sanitizer' | 'save_alt' | 'severe_weather' | 'schedule' | 'school' | 'science' | 'search' | 'security' | 'send' | 'sentiment_dissatisfied' | 'sentiment_neutral' | 'sentiment_satisfied' | 'sentiment_satisfied_alt' | 'sentiment_very_dissatisfied' | 'settings' | 'share' | 'shield' | 'shopping_basket' | 'snow' | 'soap' | 'social_distance' | 'sort_arrow' | 'spellcheck' | 'star' | 'star_half' | 'star_outline' | 'store' | 'support' | 'support_agent' | 'text_fields' | 'thumb_down_alt' | 'thumb_up_alt' | 'timer' | 'toggle_off' | 'toggle_on' | 'topic' | 'tornado' | 'translate' | 'trending_down' | 'trending_up' | 'twitter' | 'undo' | 'unfold_less' | 'unfold_more' | 'update' | 'upload_file' | 'verified' | 'verified_user' | 'visibility' | 'visibility_off' | 'volume_off' | 'warning' | 'wash' | 'wifi' | 'work' | 'youtube' | 'zoom_in' | 'zoom_out_map' | 'zoom_out';
    /**
     * The size of the icon
     */
    size?: 'size-3' | 'size-4' | 'size-5' | 'size-6' | 'size-7' | 'size-8' | 'size-9';
    /**
     * A custom class to apply to the component
     */
    className?: string;
}
/**
 * Icons help communicate meaning, actions, status, or feedback.
 */
declare const Icon: ({ id, type, size, className, }: IconProps) => React.ReactElement;

interface InPageNavigationItemProps {
    heading: string;
    headingType: 'h2' | 'h3';
    content: ReactNode;
}
interface InPageNavigationProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The title of the page
     */
    pageTitle: string;
    /**
     * The title of the in-page navigation
     */
    navTitle?: string;
    /**
     * The list of navigation items to display
     */
    items: InPageNavigationItemProps[];
}
/**
 * The in-page navigation allows navigation to specific sections on a lengthy content page.
 */
declare const InPageNavigation: ({ id, navTitle, pageTitle, items, }: InPageNavigationProps) => React$1.ReactElement;

interface TextInputProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name for the combo box input field
     */
    name?: string;
    /**
     * The type of input to display
     */
    type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * State based styling to apply to the form group
     */
    validationStatus?: ValidationStatus;
    /**
     * The type of mask to apply to the input
     */
    mask?: 'ssn' | 'phone_number' | 'zip_5_digit' | 'zip_9_digit';
    /**
     * Custom element to display before the input
     */
    prefix?: ReactNode;
    /**
     * Custom element to display after the input
     */
    suffix?: ReactNode;
    /**
     * Custom callback for when input is changed
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
}
/**
 * A text input allows users to enter any combination of letters, numbers, or symbols.
 */
declare const TextInput: ({ id, name, required, label, helperText, errors, validationStatus, className, type, mask, prefix, suffix, onChange, ...props }: TextInputProps & Omit<JSX.IntrinsicElements["input"], "prefix" | "suffix">) => React$1.ReactElement;

interface LabelProps {
    /**
     * The HTML element that this is labeling
     */
    htmlFor?: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * The contents of the label
     */
    children: ReactNode;
}
/**
 * Defines a label for an HTML element.
 */
declare const Label: ({ htmlFor, required, children, ...labelProps }: LabelProps & JSX.IntrinsicElements["label"]) => React$1.ReactElement;

interface LanguageOptionProps {
    label: string;
    localLabel?: string;
    attr: string;
    onChange?: () => void;
}
interface LanguageSelectorProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The variant of the language selector to display
     */
    variant?: 'default' | 'unstyled';
    /**
     * The size of the language selector
     */
    size?: 'default' | 'small';
    /**
     * The list of language options to display
     */
    items: LanguageOptionProps[];
}
/**
 * The consistent placement, interface, and behavior of the language selection component allows users to easily find and
 * access content in the language the user is most comfortable in.
 */
declare const LanguageSelector: ({ id, items, variant, size, }: LanguageSelectorProps) => React.ReactElement;

interface ListItem {
    id: string;
    value: ReactNode;
}
interface ListProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of list to display
     */
    type?: 'ordered' | 'unordered';
    /**
     * The style variant of list to display
     */
    variant?: 'default' | 'unstyled';
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * The list of items to display
     */
    items: ListItem[];
}
/**
 * A list organizes information into discrete sequential sections.
 */
declare const List: ({ id, type, variant, className, items, ...listProps }: ListProps) => React$1.ReactElement;

interface MemorableDateProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * The default value for the day field
     */
    defaultDayValue?: number;
    /**
     * The default value for the year field
     */
    defaultMonthValue?: number;
    /**
     * The default value for the year field
     */
    defaultYearValue?: number;
    /**
     * Event handler will be triggered when a month value changes
     */
    onMonthChange?: ChangeEventHandler<HTMLSelectElement>;
    /**
     * Event handler will be triggered when a day value changes
     */
    onDayChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Event handler will be triggered when a year value changes
     */
    onYearChange?: ChangeEventHandler<HTMLInputElement>;
}
/**
 * A memorable date splits a date into three fields.
 */
declare const MemorableDate: ({ id, required, label, helperText, errors, defaultMonthValue, defaultDayValue, defaultYearValue, onMonthChange, onDayChange, onYearChange, ...props }: MemorableDateProps) => React$1.ReactElement;

interface ModalProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of modal to display
     */
    size?: 'small' | 'large';
    /**
     * The heading for the alert
     */
    heading: string;
    /**
     * The footer for the alert
     */
    footer?: ReactNode;
    /**
     * The contents of the alert
     */
    children: ReactNode;
}
/**
 * A modal disables page content and focuses the user’s attention on a single task or message.
 */
declare const Modal: ({ id, heading, size, footer, children, }: ModalProps) => React$1.ReactElement;

type CreatePageUrlHandler = (page: number) => string | undefined;
type OnPageHandler = (event: SyntheticEvent<Element, Event>, page: number) => void;
interface PaginationProps {
    /**
     * The unique identifier for the pagination
     */
    id: string;
    /**
     * The current page (0 indexed)
     */
    currentPage: number;
    /**
     * The amount of pages
     */
    amountOfPages: number;
    /**
     * The amount of page items to show
     */
    amountOfVisiblePageItems?: number;
    /**
     * Defines a string value that labels the current element.
     */
    ariaLabel: string;
    /**
     * Pass a function in to create href URLs
     */
    createPageUrl?: CreatePageUrlHandler;
    /**
     * Event handler for when a pagination item is clicked
     */
    onPage?: OnPageHandler;
}
/**
 * Pagination is navigation for paginated content.
 */
declare const Pagination: ({ id, currentPage, amountOfPages: pageSize, amountOfVisiblePageItems, ariaLabel, createPageUrl, onPage, }: PaginationProps) => React$1.ReactElement;

interface ProcessListStepProps {
    /**
     * The heading for the step
     */
    heading: string;
    /**
     * The level of the headings
     */
    headingElementName?: string;
    /**
     * Whether the step is the current step
     */
    isCurrentStep?: boolean;
    /**
     * Whether the step is a completed step
     */
    isCompletedStep?: boolean;
    /**
     * Whether the step is the last step
     */
    isLastStep?: boolean;
    /**
     * Additional class names for the heading element
     */
    headingClassName?: string;
    /**
     * The body of the step
     */
    children: ReactNode;
}
interface ProcessListProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The level of the headings
     */
    steps?: ProcessListStepProps[];
    /**
     * The current step (1 based index)
     */
    currentStep?: number;
    /**
     * ProcessListStep components to display as children
     */
    children?: ReactElement<ProcessListStepProps> | Array<ReactElement<ProcessListStepProps>>;
}
/**
 * A process list displays the steps or stages of important instructions or processes.
 */
declare const ProcessList: ({ id, steps, currentStep, children, }: ProcessListProps) => ReactElement;
declare const ProcessListStep: ({ heading, headingClassName, headingElementName, isCurrentStep, isCompletedStep, isLastStep, children, }: ProcessListStepProps) => ReactElement;

interface ProseProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * The contents of the prose
     */
    children?: ReactNode;
}
/**
 * Format a block of running text.
 */
declare const Prose: ({ id, className, children, ...props }: ProseProps & JSX.IntrinsicElements["section"]) => React$1.ReactElement;

interface RadioButtonData {
    /**
     * The text inside of the radioButton
     */
    label: string;
    /**
     * Default value of the radioButton
     */
    value?: string | readonly string[] | number;
    /**
     * Whether the radioButton is checked by default
     */
    checked?: boolean;
    /**
     * Whether the checkbox is checked by default
     */
    defaultChecked?: boolean;
}
interface RadioButtonProps extends RadioButtonData {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name for the radioButton input field
     */
    name?: string;
    /**
     * Whether the component is rendered as a tile
     */
    isTile?: boolean;
    /**
     * Event handler will be triggered when the radioButton value changes
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Event handler will be triggered when the radioButton is clicked
     */
    onClick?: MouseEventHandler<HTMLInputElement>;
}
/**
 * Radio buttons allow users to select exactly one choice from a group.
 */
declare const RadioButton: ({ id, name, label, checked, defaultChecked, isTile, onChange, onClick, ...inputProps }: RadioButtonProps & JSX.IntrinsicElements["input"]) => React$1.ReactElement;

interface RadioButtonGroupProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The name for all radioButton input fields
     */
    name: string;
    /**
     * Array of radioButton data for the input fields
     */
    data: RadioButtonData[];
    /**
     * Whether the components are rendered as a tile
     */
    areTiles?: boolean;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * Event handler will be triggered when the radioButton value changes
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Event handler will be triggered when the radioButton is clicked
     */
    onClick?: MouseEventHandler<HTMLInputElement>;
}
declare const RadioButtonGroup: ({ id, name, data, areTiles, required, label, helperText, errors, onChange, onClick, }: RadioButtonGroupProps) => React$1.ReactElement;

interface RangeSliderProps {
    /**
     * The unique identifier for the input field
     */
    id: string;
    /**
     * The name of the input field
     */
    name: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * A minimum value allowed for the slider
     */
    minValue?: string;
    /**
     * A maximum value allowed for the slider
     */
    maxValue?: string;
    /**
     * The value to increment the slider by as it is changed
     */
    step?: string;
    /**
     * The default value to apply to the range slider
     */
    defaultValue?: string;
    /**
     * Event handler will be triggered when the range slider value changes
     */
    onChange?: (this: HTMLInputElement, event: Event) => void;
}
/**
 * A range slider allows users to choose an approximate number from a range.
 */
declare const RangeSlider: ({ id, required, label, helperText, errors, minValue, maxValue, step, defaultValue, onChange, ...inputProps }: RangeSliderProps & Omit<JSX.IntrinsicElements["input"], "min" | "max">) => React.ReactElement;

interface SearchProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The size of the search
     */
    type?: 'default' | 'small' | 'big';
    /**
     * Custom callback for when a search is performed
     */
    onSearch?: (event: FormEvent<HTMLFormElement>, searchText: string) => void;
}
/**
 * Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation
 */
declare const Search: ({ id, type, onSearch, ...props }: SearchProps & JSX.IntrinsicElements["input"]) => React$1.ReactElement;

interface SideNavigationItemProps {
    /**
     * Anchor to render for current SideNavigationItem
     */
    anchor: ReactNode;
    /**
     * Items of the navigation
     */
    items?: SideNavigationItemProps[];
}
interface SideNavigationProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The aria-label for the navigation element
     */
    ariaLabel: string;
    /**
     * Items of the navigation
     */
    items?: SideNavigationItemProps[];
    /**
     * SideNavigationItem components to display as children
     */
    children?: ReactElement<SideNavigationItemProps> | Array<ReactElement<SideNavigationItemProps>>;
}
/**
 * Hierarchical, vertical navigation to place at the side of a page.
 */
declare const SideNavigation: ({ id, ariaLabel, items, children, }: SideNavigationProps) => ReactElement;
declare const SideNavigationItem: ({ items, anchor }: SideNavigationItemProps) => JSX.Element;

interface SiteAlertProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The type of alert to display
     */
    type?: 'Info' | 'Emergency';
    /**
     * The heading for the alert
     */
    heading?: string;
    /**
     * A boolean indicating whether or not the alert should be slim
     */
    slim?: boolean;
    /**
     * A boolean indicating whether or not to show the applicable icon
     */
    noIcon?: boolean;
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * The contents of the alert
     */
    children: ReactNode;
}
/**
 * A site alert communicates urgent sitewide information.
 */
declare const SiteAlert: ({ id, type, heading, slim, noIcon, className, children, }: SiteAlertProps) => React$1.ReactElement;

interface StepIndicatorProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * Array of labels for the steps. Length of array will be used as step count.
     */
    steps: string[];
    /**
     * Step that is currently active. (0-based index)
     */
    currentStep: number;
    /**
     * Hides labels of step indicator if set to true. Defaults to false.
     */
    hideLabels?: boolean;
    /**
     * Shows step number in step indicator if set to true. Defaults to false.
     */
    showCounters?: boolean;
    /**
     * Shows small step number in step indicator if set to true. Defaults to false.
     */
    showSmallCounters?: boolean;
    /**
     * Centers label and counter if set to true. Defaults to false.
     */
    centerCounters?: boolean;
    /**
     * Level of the heading (h1, h2, h3, h4, h5, h6). Defaults to h4
     */
    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}
/**
 * A step indicator updates users on their progress through a multi-step process.
 */
declare const StepIndicator: ({ id, steps, currentStep, hideLabels, showCounters, showSmallCounters, centerCounters, headingLevel, }: StepIndicatorProps) => React$1.ReactElement;

interface SummaryBoxProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The heading for the summary box
     */
    heading: string;
    /**
     * A custom class to apply to the component
     */
    className?: string;
    /**
     * An array of string messages to display in the summary box
     */
    items: string[];
}
/**
 * A summary box highlights key information from a longer page or displays next steps.
 */
declare const SummaryBox: ({ id, heading, className, items, }: SummaryBoxProps) => React.ReactElement;

interface TableProps<T = any> {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The table header details for the table
     */
    columns: TableColumn[];
    /**
     * The data to display in the table rows
     */
    data: T[];
    /**
     * An optional caption to display above the table
     */
    caption?: string;
    /**
     * A boolean indicating if the table is sortable or not
     */
    sortable?: boolean;
    /**
     * The column index to set as the default sort
     */
    sortIndex?: number;
    /**
     * The default sort direction if sortIndex is provided
     */
    sortDir?: 'ascending' | 'descending';
    /**
     * A function to call when the table is sorted
     */
    onSort?: () => void;
    /**
     * A boolean indicating if the table is scrollable or not
     */
    scrollable?: boolean;
    /**
     * A boolean indicating if the table is borderless or not
     */
    borderless?: boolean;
    /**
     * A boolean indicating if the table is striped or not
     */
    striped?: boolean;
    /**
     * Additional class names for the table
     */
    className?: string;
    /**
     * Used primarily to make table focusable
     */
    tabIndex?: number;
}
interface TableColumn {
    id: string;
    name: string;
    sortable?: boolean;
}
interface TableCell {
    value: string;
    sortValue?: string;
}
/**
 * A table shows information in columns and rows.
 */
declare const Table: ({ id, caption, columns, data, sortable, sortIndex, sortDir, onSort, scrollable, borderless, striped, className, tabIndex, }: TableProps) => React$1.ReactElement;

interface TagProps {
    /**
     * The unique identifier for this component
     */
    id: string;
    /**
     * The children of the tag
     */
    children: ReactNode;
    /**
     * The size of the tag
     */
    size?: 'Default' | 'Big';
    /**
     * Any additional CSS classes will be added to the tag
     */
    className?: string;
}
/**
 * A tag draws attention to new or categorized content elements.
 */
declare const Tag: ({ id, children, size, className, }: TagProps) => React$1.ReactElement;

interface TextAreaProps {
    /**
     * The unique identifier for the textarea
     */
    id: string;
    /**
     * The name of the textarea
     */
    name?: string;
    /**
     * The number of rows to render for the textarea
     */
    rows?: number;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * State based styling to apply to the form group
     */
    validationStatus?: ValidationStatus;
    /**
     * Event handler for when value of textarea is changes
     */
    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
}
/**
 * A text area allows users to enter any combination of letters, numbers, or symbols.
 */
declare const TextArea: ({ id, name, rows, required, label, helperText, errors, validationStatus, className, onChange, ...props }: TextAreaProps & JSX.IntrinsicElements["textarea"]) => React$1.ReactElement;

interface TimePickerProps {
    /**
     * The unique identifier for the input
     */
    id: string;
    /**
     * The name of the input
     */
    name?: string;
    /**
     * A boolean indicating whether or not the field is required
     */
    required?: boolean;
    /**
     * Label text to display with the input
     */
    label?: string;
    /**
     * Helper text to display with the input
     */
    helperText?: string;
    /**
     * An array of string error messages
     */
    errors?: string | string[];
    /**
     * The time picker will use this regular expression to filter the time picker options.
     */
    filter?: string;
    /**
     * The start time used in the time picker in hh:mm 24-hour format. The default is 00:00.
     */
    minTime?: string;
    /**
     * The end time used for the time picker in hh:mm 24-hour format. The default is 23:59.
     */
    maxTime?: string;
    /**
     * The number of minutes between options. The minimum is 1 minute and the default is 30 minutes.
     */
    step?: number;
    /**
     * Event handler will be triggered when the time-picker value changes
     */
    onChange?: (this: HTMLInputElement, event: Event) => void;
}
/**
 * A time picker helps users select a specific time.
 */
declare const TimePicker: ({ id, required, label, helperText, errors, filter, minTime, maxTime, step, onChange, ...inputProps }: TimePickerProps & JSX.IntrinsicElements["input"]) => React$1.ReactElement;

interface TooltipProps {
    /**
     * The text value to display in the tooltip
     */
    label: string;
    /**
     * Where the tooltip will display in reference to its child
     */
    position?: 'top' | 'right' | 'bottom' | 'left';
    /**
     * The contents of the tooltip
     */
    children: ReactNode;
}
/**
 * A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.
 */
declare const Tooltip: ({ label, position, children, }: TooltipProps) => React$1.ReactElement;

declare const useFileInput: () => {
    clear: (elemId: string) => void;
};

declare const useHeader: () => {
    on: (element: HTMLElement) => void;
    off: (element: HTMLElement) => void;
};

declare const useModal: () => {
    toggleModal: (show: boolean) => void;
};

export { Accordion, AccordionItem, Alert, Banner, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Card, CardBody, CardFooter, CardHeader, CardMedia, CharacterCount, CharacterCountContainer, Checkbox, CheckboxGroup, ComboBox, DatePicker, DateRangePickerContainer as DateRangePicker, ErrorMessages, FileInput, Form, FormGroup, HelperText, Icon, InPageNavigation, Label, LanguageSelector, List, MemorableDate, Modal, Pagination, ProcessList, ProcessListStep, Prose, RadioButton, RadioButtonGroup, RangeSlider, Search, Select, SelectOption, SideNavigation, SideNavigationItem, SiteAlert, StepIndicator, SummaryBox, Table, Tag, TextArea, TextInput, TimePicker, Tooltip, useFileInput, useHeader, useModal };
export type { AccordionItemProps, BreadcrumbItemProps, CheckboxData, ComboBoxOptionProps, CreatePageUrlHandler, InPageNavigationItemProps, LanguageOptionProps, ListItem, OnPageHandler, ProcessListStepProps, RadioButtonData, SelectOptionProps, SideNavigationItemProps, TableCell, TableColumn, ValidationStatus };