@woven-planet/lakefront 5.5.0

package/dist/index.cjs.d.ts

@@ -0,0 +1,2775 @@
+/// <reference types="react" />
+import React from "react";
+import { ComponentPropsWithoutRef, FC, RefAttributes, ReactNode, ElementType, ReactElement, ChangeEvent, Dispatch, MouseEventHandler, SetStateAction, ComponentPropsWithRef, MouseEvent } from "react";
+import { LinkProps } from "react-router-dom";
+import { GetStyles, GroupBase } from "react-select/dist/declarations/src/types";
+import { ParsedQuery } from "query-string";
+import { Column } from "react-table";
+interface AnchorCopyProps {
+    /**
+     * The button or inner content to render. This defaults to
+     * a link icon button.
+     */
+    AnchorContent: FC;
+    /**
+     * The classes to pass to the anchor container.
+     */
+    className?: string;
+    /**
+     * A boolean that defines whether the anchor should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The (non-encoded) hash to be appended to the end of the url.
+     */
+    hashId?: string;
+    /**
+     * The action to run on copy success.
+     */
+    onCopy?: (scrollToUrl: string) => void;
+    /**
+     * The title to display next to the anchor button or content.
+     */
+    title: string;
+}
+/**
+ * AnchorCopy Component
+ *
+ * The AnchorCopy component is meant for creating in page anchor links that
+ * can be easily copied on button click. The `hashId` (or `title`
+ * if `hashId` is falsy) will be encoded, appended to the current url, and copied
+ * to the user's clipboard. `onCopy` can also be provided to perform additional
+ * operations on the copied content.
+ */
+declare const AnchorCopy: FC<AnchorCopyProps & Omit<ComponentPropsWithoutRef<"div">, "onCopy">>;
+interface BoundingBoxItemProp {
+    name: string;
+    items: {
+        confidence: number;
+        bbox: number[][];
+    }[];
+    color: string;
+}
+interface BoundingBoxesProps {
+    /**
+     * The name of the currently active item. When specified, only
+     * bounding boxes included in the first item with the matching name will be drawn.
+     */
+    activeBBox: string;
+    /**
+     * A list of bounding box items to draw including the name of the item,
+     * the color of the boxes, and a list of bounding boxes to draw.
+     */
+    boundingBoxItems: BoundingBoxItemProp[];
+    /**
+     * The classes to pass to the bounding boxes container.
+     */
+    className?: string;
+    /**
+     * The width of the image.
+     */
+    imageWidth: number;
+    /**
+     * The height of the image.
+     */
+    imageHeight: number;
+    /**
+     * The desired width to display the image. This will likely be observed in the
+     * parent component, changing often to allow the image to resize.
+     */
+    outputWidth: number;
+    /**
+     * The desired height to display the image. This will likely be observed in the
+     * parent component, changing often to allow the image to resize.
+     */
+    outputHeight: number;
+}
+/**
+ * BoundingBoxes Component
+ *
+ * The BoundingBoxes component is intended to draw boxes on top of specified areas
+ * of an image. This can be used to direct attention to key aspects or items within an image
+ * while also maintaining the proper aspect ratio and location offset(s) as the image is resized.
+ */
+declare const BoundingBoxes: FC<BoundingBoxesProps>;
+interface RouteProp {
+    /**
+     * This is to set the name of the breadcrumb to be displayed.
+     */
+    name: string;
+    /**
+     * This is to set the link of the breadcrumb.
+     */
+    url: string;
+}
+interface BreadcrumbProps {
+    /**
+     * This is to set the routes which includes the name of the breadcrumb that needs to be displayed.
+     *  You can also set the url for the breadcrumb to navigate to the appropriate link.
+     */
+    routes: RouteProp[];
+    /**
+     * This allows you to pass your own Link connected to your application router.
+     * This is most useful for applications using React-router v6 and above.
+     */
+    Link?: FC<LinkProps & RefAttributes<HTMLAnchorElement>>;
+}
+/**
+ *  The Breadcrumb Component is used to render the breadcrumb. The Name of the Breadcrumb is displayed.
+ *  The url can be used to link to the appropriate link.
+ */
+declare const Breadcrumb: FC<BreadcrumbProps>;
+interface BreadcrumbHeaderProps {
+    /**
+     * This is to set the routes which includes the name of the breadcrumb that needs to be displayed.
+     *  You can also set the url for the breadcrumb to navigate to the appropriate link.
+     */
+    routes: RouteProp[];
+    /**
+     * This is to set the Class on the Breadcrumb Header.
+     */
+    className?: string;
+    /**
+     * This is to set the standalone property. If set to true, this will add full width with margin
+     * and a bottom border.
+     */
+    standalone?: boolean;
+    /**
+     * If set to true, this will not display any routes.
+     */
+    hideRoutes?: boolean;
+    /**
+     * Children to display as the content.
+     */
+    children?: ReactNode;
+    /**
+     * This allows you to pass your own Link connected to your application router.
+     * This is most useful for applications using React-router v6 and above.
+     */
+    Link?: FC<LinkProps & RefAttributes<HTMLAnchorElement>>;
+}
+/**
+ * Breadcrumb navigation trail component that can be used as a header.
+ *
+ * Set [standalone] to false if you want to apply your own container styling (with className
+ * prop or a wrapper). Set [standalone] to true to add full-width behavior with margins and
+ * a bottom border (to function as a standalone header). Defaults to true.
+ */
+declare const BreadcrumbHeader: FC<BreadcrumbHeaderProps>;
+interface ButtonProps {
+    /**
+     * Determines the style of the button: primary, secondary, or destructive.
+     */
+    color?: "primary" | "secondary" | "destructive";
+    /**
+     * Provides an alternate color theme for use on darker backgrounds.
+     */
+    alternate?: boolean;
+    /**
+     * An emotion prop that allow for changing the type of element. It can be a simple string
+     * with an HTML element such as "a", or even a complex component such as a react router Link.
+     */
+    as?: ElementType | keyof JSX.IntrinsicElements;
+    /**
+     * The classes to pass to the button.
+     */
+    className?: string;
+}
+type Icon = ReactElement<SVGElement> | boolean | string | undefined;
+interface IconComponentProps {
+    /**
+     * When strictly true, the default icon for a color type will be inserted at the iconPosition prop's location.
+     * Primary and Secondary colors have a plus/add icon, and destructive has a garbage can/delete icon.
+     * When a svg, the svg will used as the icon.
+     * (Future) When a string, an icon lookup/conversion will be attempted.
+     */
+    icon?: Icon;
+    /**
+     * When provided will display next to icon.
+     */
+    children?: ReactNode;
+    /**
+     * When icon is defined, the position can be specified via the iconPosition prop.
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * Allows text to render under icon button.
+     */
+    iconLabel?: string;
+}
+type ButtonComponentProps = ButtonProps & IconComponentProps & ComponentPropsWithoutRef<"button">;
+/**
+ * Button Component
+ *
+ * The Button component takes in native button props along with color, alternate, icon, and iconPosition props.
+ * The color prop, which defaults to primary, determines its overall color scheme.
+ * The alternate prop inverts the color scheme to look better on dark backgrounds.
+ * className will properly apply itself, but the CSS may need to be more specific,
+ * such as button.MyClass instead of just .MyClass.
+ * The icon prop can be of several types. If it is an svg, that svg will be used. If it
+ * is strictly "true", we will apply the default icon based on the provided color. In the future, if it is a string,
+ * we will attempt to convert it into an icon. When icon is defined, the position can be specified via the iconPosition prop.
+ */
+declare const Button: FC<ButtonComponentProps>;
+type ButtonProps$0 = ButtonComponentProps;
+interface CardProps {
+    /**
+     * This will set the cards h1 heading.
+     */
+    title: string;
+    /**
+     * This is the callback that is fired when the top-right arrow button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Description of the card's intent.
+     */
+    description?: string;
+    /**
+     * Display content as a child node.
+     */
+    children?: ReactNode;
+    /**
+     * This takes in any ReactNode to be displayed in the main content area of the card.
+     */
+    content?: ReactNode;
+    /**
+     * If the button should or shouldn't be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * This is to set the class of the Card component.
+     */
+    className?: string;
+    /**
+     * This takes in any ReactNode to be displayed in the top right content area of the card.
+     */
+    topRightComponent?: ReactNode;
+}
+/**
+ *  The Card Component is used to render a single Card, or a collection of Cards.
+ */
+declare const Card: FC<CardProps>;
+interface CheckboxProps {
+    /**
+     * The value to control whether the checkbox should be checked or not.
+     */
+    checked?: boolean;
+    /**
+     * The svg icon to display when checked is true. If left undefined, a check mark will be displayed.
+     */
+    checkedIcon?: ReactElement<SVGElement>;
+    /**
+     * A display state in which it is unknown whether checked should be true or false.
+     */
+    indeterminate?: boolean;
+    /**
+     * The (optional) label for the checkbox.
+     */
+    label?: string | ReactElement;
+    /**
+     * HTML input element disabled prop.
+     */
+    disabled?: boolean;
+    /**
+     * The action that should be run when the checked state changes.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The classes to pass to the checkbox.
+     */
+    className?: string;
+    /**
+     * The classes to pass to the checkbox label.
+     */
+    labelClassName?: string;
+    description?: string;
+}
+/**
+ * Checkbox Component
+ *
+ * The Checkbox component takes in native checkbox props as well as its own CheckboxProps.
+ * The `checked` state is not managed in the component and should be received
+ * via the `checked` prop from the consuming app.
+ *
+ */
+declare const Checkbox: FC<CheckboxProps & ComponentPropsWithoutRef<"input">>;
+interface CheckboxGroupOption {
+    value: string;
+    label: string | ReactElement;
+    color?: string;
+    description?: string;
+}
+interface CheckboxGroupProps {
+    /**
+     * The options that should be displayed in the checkbox group.
+     */
+    options: CheckboxGroupOption[];
+    /**
+     * These are the classes that would be applied to the Checkbox group.
+     */
+    className?: string;
+    /**
+     * The action that should be run when the checked state changes.
+     */
+    onHandleChange(items: Set<string>): void;
+    /**
+     * The name of the Checkbox group.
+     */
+    name: string;
+    /**
+     * The options that are checked when the control loads.
+     */
+    selected: Set<string>;
+    /**
+     * This option is to select or unselect all the checkboxes.
+     * Specify the name of the label to be displayed for checkbox.
+     */
+    allLabel?: string;
+    /**
+     * This option is used to set the select all checkbox color.
+     */
+    allColor?: string;
+}
+/**
+ * The Checkbox Group Component
+ *
+ * The CheckboxGroup component can be used to provide multiple checkbox options. The user can set default selection on
+ * the checkbox group render. The All option is provided to check or uncheck all the options.
+ */
+declare const CheckboxGroup: FC<CheckboxGroupProps>;
+interface CollapsibleProps {
+    /**
+     * This is the initial display state of the component. When true, the child contents will be displayed.
+     * When false, the child contents will be hidden.
+     */
+    expanded?: boolean;
+    /**
+     * This is an action to run when the expand state changes.
+     */
+    onChange?: () => void;
+    /**
+     * This is an event which will trigger when the expand/collapse section is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Typically a string, this is the content to show at the top left of the component.
+     */
+    title?: string | ReactElement;
+    /**
+     * Typically a string, this is the content to show at the top right of the component.
+     */
+    subtitle?: string | ReactElement;
+    /**
+     * `Default = false` This determines if a horizontal divider should be displayed between the
+     * title and the child content.
+     */
+    divider?: boolean;
+    /**
+     * `Default = true` This determines if the expand/collapse icon should be displayed and usable.
+     */
+    collapsible?: boolean;
+    /**
+     * This is to render icon for expand/collapse control.
+     */
+    icon?: ReactElement<SVGElement> | boolean | string | undefined;
+    /**
+     * The classes to pass to the collapsible.
+     */
+    className?: string;
+}
+/**
+ * Collapsible Component
+ *
+ * The Collapsible component can be used to make collapsible sections within a document.
+ * The component takes in native div props as well as its own CollapsibleProps. The `expanded` prop
+ * controls the initial state of the component. Once initialized, the state is managed within this component.
+ *
+ */
+declare const Collapsible: FC<CollapsibleProps & Pick<ComponentPropsWithoutRef<"div">, Exclude<keyof ComponentPropsWithoutRef<"div">, keyof CollapsibleProps>>>;
+interface CopyButtonProps {
+    /**
+     * `Default = "Copy"` The text to display within the button.
+     */
+    buttonText?: string;
+    /**
+     * The classes to pass to the bounding boxes container.
+     */
+    className?: string;
+    /**
+     * A boolean that defines whether the anchor should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The action to run on copy success.
+     */
+    onCopy?: (scrollToUrl: string) => void;
+    /**
+     * The value to be copied to the clipboard.
+     */
+    valueToCopy: string;
+    /**
+     * This is to set the iconOnly property. If set to false, the icon and text will appear. If true, only copy icon will render.
+     * By default, the IconOnly property is set to false.
+     */
+    iconOnly: boolean;
+}
+/**
+ * CopyButton Component
+ *
+ * The CopyButton component is an implementation of the [Button Component](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-button--all-buttons)
+ * used specifically for copying provided text to the clipboard. While the default usage should suffice, various aspects can be overridden
+ * due to the inheritance of many `ButtonComponentProps`.
+ */
+declare const CopyButton: FC<CopyButtonProps & Omit<ButtonComponentProps, "onCopy">>;
+interface DrawerProps {
+    /**
+     * Children to display below the containers close button.
+     */
+    children?: ReactNode;
+    /**
+     * This is the initial display state of the component. When true, the drawer will be displayed.
+     * When false, the drawer will be hidden.
+     */
+    open: boolean;
+    /**
+     * This is an action to run when the drawer is closed.
+     */
+    onClose(): void;
+    /**
+     * This is the width for the drawer.
+     */
+    width?: string | number;
+    /**
+     * These are the classes that would be applied to drawer.
+     */
+    className?: string;
+    /**
+     * These are the classes for the toolbar.
+     */
+    toolbarClasses?: string;
+}
+/**
+ * The Drawer Component
+ *
+ * The Drawer component can be used to open the drawer and show the contents of the drawer.
+ * The component takes drawer props. The open prop controls the visibility of the component.
+ *
+ * Usage: Place this next to a flex container that has flex: 1
+ */
+declare const Drawer: FC<DrawerProps>;
+/**
+ * JSONObject is a wrapper for a generic JSON object structure.
+ */
+interface JSONObject {
+    [key: string]: any;
+}
+/**
+ * This is the structure of a selectable option.
+ */
+interface SelectOption<T> {
+    label: string;
+    value: T;
+}
+/**
+ * This is the structure of Tabs.
+ */
+interface TabDef {
+    key: string;
+    caption: string;
+}
+type MultiSelectOption = SelectOption<string>;
+interface SelectOption$0 {
+    value: string | number | undefined;
+    label: string;
+}
+interface SelectProps {
+    /**
+     * This is to set the options of the dropdown.
+     */
+    options: SelectOption$0[];
+    /**
+     * This is called when an dropdown change event.
+     */
+    onChange(event: any): void;
+    /**
+     * This is called on dropdown blur event.
+     */
+    onBlur?(event: any): void;
+    /**
+     * This is to set the autofocus of the dropdown.
+     */
+    autoFocus?: boolean;
+    /**
+     * This is to set the dropdown class.
+     */
+    className?: string;
+    /**
+     * This is to set the id of the dropdown.
+     */
+    id?: string;
+    /**
+     * This is to enable/disable the dropdown by default.
+     */
+    disabled?: boolean;
+    /**
+     * This is to set the searchable property of the dropdown.
+     * If set to true, the user can type the value to search from the available options.
+     */
+    isSearchable?: boolean;
+    /**
+     * This is to specify if multiple options can be selected.
+     */
+    isMulti?: boolean;
+    /**
+     * This is to leave the select menu open upon selection.
+     */
+    closeMenuOnSelect?: boolean;
+    /**
+     * This is to overwrite defaulted styles
+     */
+    styles?: Partial<GetStyles<SelectOption$0, true, GroupBase<SelectOption$0>>>;
+    /**
+     * This is the default text before an option is selected.
+     */
+    placeholder?: string;
+    value: any[] | string | number;
+}
+/**
+ *  The select component is used to render a dropdown with options. The user can set a selected option by default.
+ *  The isSearchable property allows user to find the value from the options available.
+ */
+declare const Select: FC<SelectProps>;
+/**
+ * FilterRenderProps are the required props of the renderComponent
+ * function of the FilterModule.
+ */
+interface FilterRenderProps<T> {
+    name: string;
+    value: T;
+    update(value: T | null | undefined): void;
+}
+/**
+ * FilterPostBody is a map of key/value pairs that's
+ * intended to be sent as a JSON post body payload.
+ */
+interface FilterPostBody extends JSONObject {
+}
+/**
+ * FilterModule is the minimum expected structure of a filter
+ * to be used in the filter system.
+ */
+interface FilterModule<T> {
+    /**
+     * Text label displayed above the filter input controls.
+     */
+    label: string;
+    /**
+     * Optional paragraph describing the filter (also displayed above the filter input controls).
+     */
+    description?: string;
+    /**
+     * When true, indicates that filter may not be dismissed and must always have a value. defaults to false.
+     */
+    required?: boolean;
+    /**
+     * When true, indicates that UI should not be displayed in left panel for this filter. defaults to false.
+     */
+    inputHidden?: boolean;
+    /**
+     * Gets the number of filter values this filter applies. If not supplied (and filter is not default value),
+     * the count will be assumed to be `1`.
+     */
+    getFilterCount?(value?: T): number;
+    /**
+     * Generates filter url query param in API calls (&key=valueString).
+     */
+    getApiQueryUrl(key: string, value: T): string;
+    /**
+     * Generates post body used to apply this filter when used in a POST search request.
+     */
+    getApiPostBody(key: string, value: T): FilterPostBody | null | undefined;
+    /**
+     * Generates the url query param value(s) for saving filter value(s) in the browser address bar (key is automatic).
+     * **Note: The output value here can be any valid object
+     * of type `Record<string, any>` as it will be stringified in the useFilter hook using the query-string library
+     * defaults (https://github.com/sindresorhus/query-string)**.
+     */
+    getBrowserQueryUrlValue(value: T): unknown;
+    /**
+     * Returns filter value that is set when filter is cleared.
+     */
+    getDefaultFilterValue(): T | null | undefined;
+    /**
+     * Returns boolean indicating if the current filter value matches the default value (if true, chip is hidden in the filter bar).
+     */
+    isDefaultFilterValue(value: T): boolean;
+    /**
+     * Generates the string in displayed on this filter's chip in the filter bar.
+     */
+    getFilterBarLabel(value: T): string;
+    /**
+     * Generates the array of labels to be displayed on this filter's section in the filter pane.
+     */
+    getFilterSectionLabel(value: T): string | string[];
+    /**
+     * Parses filter value from browser url query param value(s) and pre-populates the filter value on init.
+     */
+    parseInitialFilterValue(browserQueryUrlValue?: string | string[] | null | undefined): T | null | undefined;
+    /**
+     * Renders the filter input controls in the left filter drawer.
+     */
+    renderComponent(input: FilterRenderProps<T>): ReactElement;
+    /**
+     * Overrides the default FilterSectionHeader for a filter module. Recommended usage is to provide a customized
+     * FilterSectionHeader component.
+     */
+    renderSectionHeader?(sectionHeaderParams: FilterSectionHeaderProps): ReactElement;
+    /**
+     * OPTIONAL (support direct JSON input) - extracts/parses the filter value from an API post body.
+     * Note: should also delete this filter's key & value from the provided API post body, so that
+     * unparsed JSON can be identified and separated into its own pseudo-filter.
+     */
+    getFilterValueFromApiPostBody?(key: string, mutableApiPostBody: FilterPostBody | null | undefined): T | null | undefined;
+    /**
+     * Partially clear a filter when a filter has multiple selected options.
+     */
+    clearPartialSingleFilter?(originalValue: T, value: string): T | null | undefined;
+}
+/**
+ * FilterSet is the current set of filter names and their
+ * associated FilterModule.
+ */
+interface FilterSet {
+    [key: string]: FilterModule<any>;
+}
+/**
+ * FilterValues is a map of each filter and their current values.
+ */
+interface FilterValues {
+    [filterName: string]: any;
+}
+/**
+ * FilterHooks is the available values and functions returned from the useFilter hook.
+ */
+interface FilterHooks<T = FilterPostBody> {
+    /**
+     * The currently available filter set.
+     */
+    filters: FilterSet;
+    /**
+     * The current url state after filters applied.
+     */
+    filterUrl: string;
+    /**
+     * The current post body after filters applied.
+     */
+    filterPostBody: T;
+    /**
+     * The current filter values.
+     */
+    filterValues: FilterValues;
+    /**
+     * The function to update a particular filter.
+     */
+    updateFilter(name: string, value: any): void;
+    /**
+     * The function to reset a particular filter.
+     */
+    resetFilter(name: string | string[], value?: any): void;
+    /**
+     * The function to reset all current filters.
+     */
+    resetAllFilters(): void;
+    /**
+     * The function to determine how filters update the post body.
+     */
+    applyApiPostBody(apiPostBody: T): void;
+    /**
+     * The function sets initial filter preset values.
+     */
+    initializePresetValues(presetValues: {
+        [key: string]: any;
+    }): void;
+}
+/**
+ * FilterMap is the mapping of filters as they should
+ * be applied to the url and post body.
+ */
+interface FilterMap {
+    [key: string]: string;
+}
+interface FilterSectionHeaderProps {
+    activeSection?: string;
+    filter: FilterModule<any>;
+    name: string;
+    value: any;
+    onClick?: MouseEventHandler<HTMLHeadingElement>;
+    resetFilter: (name: string) => void;
+    badgeThreshold: number;
+    children?: ReactNode;
+}
+/**
+ * FilterMode is the list of available states to display
+ * the filter UI.
+ */
+declare enum FilterMode {
+    FilterUI = "filter",
+    JSON = "json"
+}
+/**
+ * LocationState is the current state of the location.
+ */
+interface LocationState {
+    search: string;
+    hash?: string;
+}
+/**
+ * Location holds information about the current user location
+ * and url state when using the consuming application.
+ */
+interface Location {
+    pathname: string;
+    search: string;
+    state: LocationState;
+    hash: string;
+    key?: string;
+}
+/**
+ * UrlParameters is a map of the current url parameter name and values.
+ */
+interface UrlParameters {
+    [key: string]: string[] | string | null;
+}
+/**
+ * UpdateHistory is the structure of a history update callback.
+ */
+type UpdateHistory = ({ search, hash }: LocationState) => void;
+/**
+ * ContextSwitchMenuValue is the type of possible Context
+ * Switch Menu values.
+ */
+type ContextSwitchMenuValue = FilterMode | string;
+/**
+ * ContextSwitchMenuProps is the structure of the ContextSwitchMenu
+ * component that can be used to toggle Filter component
+ * views.
+ */
+interface ContextSwitchMenuProps {
+    options: Map<ContextSwitchMenuValue, string>;
+    value: ContextSwitchMenuValue;
+    onChange?: (filterMode: ContextSwitchMenuValue) => void;
+    triggerClassName?: string;
+}
+/**
+ * FilterBarProps is the structure of the FilterBar
+ * component that can be used to display the applied filters.
+ */
+interface FilterBarProps {
+    filters: FilterSet;
+    filterValues: FilterValues;
+    resetFilter?: (name: string) => void;
+    resetAllFilters?: () => void;
+}
+/**
+ * FilterJSONConfirmationModalProps is the structure of the
+ * FilterJSONConfirmationModal component that can be used to
+ * confirm the user has finished making unsaved changes.
+ */
+interface FilterJSONConfirmationModalProps {
+    modalVisible: boolean;
+    handleModalClose?: () => void;
+    onConfirm?: () => void;
+}
+/**
+ * FilterJSONInputProps is the structure of the
+ * FilterJSONInput component that can be used by
+ * the end user to edit the filter JSON parameters and values.
+ */
+interface FilterJSONInputProps {
+    filterHooks: FilterHooks;
+    onInputModifiedChange?: Dispatch<SetStateAction<boolean>>;
+}
+/**
+ * FilterComponentProps is the structure of the expected props
+ * to be provided to the primary Filter component.
+ */
+interface FilterComponentProps {
+    /**
+     * ContextSwitchMenu can be used to toggle Filter component views.
+     */
+    ContextSwitchMenu?: FC<ContextSwitchMenuProps>;
+    /**
+     * FilterBar can be used to display the applied filters.
+     */
+    FilterBar?: FC<FilterBarProps>;
+    /**
+     * FilterJSONConfirmationModal can be used to
+     * confirm the user has finished making unsaved changes.
+     */
+    FilterJSONConfirmationModal?: FC<FilterJSONConfirmationModalProps>;
+    /**
+     * FilterJSONInput can be used by
+     * the end user to edit the filter JSON parameters and values.
+     */
+    FilterJSONInput?: FC<FilterJSONInputProps>;
+    /**
+     * The children to display at the bottom of the filter container.
+     */
+    children?: ReactNode;
+    /**
+     * Additional query params that can be provided separate from
+     * the current filters.
+     */
+    additionalQueryParams?: {
+        [key: string]: string;
+    };
+    /**
+     * The available values and functions returned from the useFilter hook.
+     */
+    filterHooks: FilterHooks;
+    /**
+     * Controls whether the FilterBar component (if provided)
+     * is visible.
+     */
+    hideFilterBar?: boolean;
+    /**
+     * Controls which filter (if any) is expanded by default.
+     */
+    initialActiveSection?: string;
+    /**
+     * Controls whether the filter side panel is expanded or collapsed.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Controls whether the user can add additional filters via a JSON editor.
+     */
+    isJSONInputAllowed?: boolean;
+    /**
+     * The (mutable) location state which gets updated as filters are applied.
+     */
+    location: Location;
+    /**
+     * The callback that runs when the filter pane is collapsed.
+     */
+    onToggleCollapsed?(isCollapsed: boolean): void;
+    /**
+     * This controls how the location/history state is updated
+     * as filters change.
+     */
+    updateHistory: UpdateHistory;
+    /**
+     * This is the max number of chips to display before switching to
+     * a badge displaying the number of applied filters.
+     */
+    badgeThreshold?: number;
+    /**
+     * The classes to pass to the filter container.
+     */
+    className?: string;
+    /**
+     * This is the mapping for the preset filter dropdown. Each key in this map should match the type of filter passed
+     * in the filter set.
+     */
+    filterMapping?: {
+        [key: string]: any;
+    };
+}
+/**
+ * FilterContainerProps is the structure of the expected props
+ * to be provided to outermost container of the Filter component.
+ */
+interface FilterContainerProps {
+    isCollapsed: boolean;
+    showJSONInput: boolean;
+    hideFilterBar?: boolean;
+}
+/**
+ * `AdditionalJSONFilterOptions` is any valid `FilterModule` property
+ * meant to override default additional JSON filter behaviour.
+ */
+interface AdditionalJSONFilterOptions extends Partial<FilterModule<JSONObject>> {
+}
+/**
+ * `DoubleMultiSelectData` is the definition for each select in the DoubleMultiSelect, such as `firstSelect` and `secondSelect`.
+ */
+interface DoubleMultiSelectData {
+    apiField: string;
+    label?: string;
+    name: string;
+    creatable: boolean;
+    items: MultiSelectOption[];
+    barLabel: string;
+    placeholder?: string;
+    disableMenu?: boolean;
+}
+/**
+ * `DoubleMultiSelectOptions` defines both multi selects in the DoubleMultiSelect component.
+ */
+interface DoubleMultiSelectOptions {
+    firstSelect: DoubleMultiSelectData;
+    secondSelect: DoubleMultiSelectData;
+}
+/**
+ * `DoubleMultiSelectValues` is an object used in the DoubleMultiSelect onChange which contains an array of values
+ *  stored for each MultiSelect.
+ */
+interface DoubleMultiSelectValues {
+    firstSelect: string[];
+    secondSelect: string[];
+}
+/**
+ * `DoubleMultiSelectFilterProps` defines the props for the DoubleMultiSelectFilter module.
+ */
+interface DoubleMultiSelectFilterProps {
+    label: string;
+    description?: string;
+    selectOptions: DoubleMultiSelectOptions;
+}
+/**
+ * `MultiSelectFilterOptions` is any valid `FilterModule` property (excluding description and label)
+ * meant to override default multi select filter behaviour.
+ */
+interface DoubleMultiSelectFilterOptions extends Omit<Partial<FilterModule<DoubleMultiSelectValues>>, "label" | "description" | "selectOptions"> {
+}
+/**
+ * `ListFilterOverrides` is any valid `FilterModule` property (excluding description and label)
+ * meant to override default list filter behaviour.
+ */
+interface ListFilterOverrides extends Omit<Partial<FilterModule<Set<string>>>, "description" | "label"> {
+}
+/**
+ * `MultiSelectFilterProps` are the props required to be supplied as the
+ * first argument of the MultiSelectFilter component.
+ */
+interface MultiSelectFilterProps {
+    options: MultiSelectOption[];
+    label: string;
+    description?: string;
+    initialValue?: any[];
+    creatable?: boolean;
+    handleCreateItem?: (item: string[]) => void;
+    disableMenu?: boolean;
+    delimiter?: string;
+}
+/**
+ * `MultiSelectFilterOptions` is any valid `FilterModule` property (excluding description and label)
+ * meant to override default multi select filter behaviour.
+ */
+interface MultiSelectFilterOptions extends Omit<Partial<FilterModule<string[]>>, "description" | "label"> {
+}
+/**
+ * `RadioFilterProps` are the props required to be supplied as the first argument of
+ * the RadioFilter component.
+ */
+interface RadioFilterProps {
+    initialValue: string;
+    defaultValue: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    label: string;
+    description?: string;
+}
+/**
+ * `RadioFilterOptions` is any valid `FilterModule` property (excluding description and label)
+ * meant to override default text filter behaviour.
+ */
+interface RadioFilterOptions extends Omit<Partial<FilterModule<string>>, "description" | "label"> {
+}
+/**
+ * `SingleSelectFilterProps` are the props required to be supplied as the
+ * first argument of the SingleSelectFilter component.
+ */
+interface SingleSelectFilterProps {
+    options: SelectOption$0[];
+    label: string;
+    description?: string;
+    selectPlaceholderLabel?: string;
+    filterLabelPrefix?: string;
+    initialValue?: string | number;
+    required?: boolean;
+}
+/**
+ * `SingleSelectFilterOptions` is any valid `FilterModule` property (excluding description, label, and required)
+ * meant to override default single select filter behaviour.
+ */
+interface SingleSelectFilterOptions extends Omit<Partial<FilterModule<string>>, "description" | "label" | "required"> {
+}
+/**
+ * `TextFilterOverrides` is any valid `FilterModule` property (excluding description and label)
+ * meant to override default text filter behaviour.
+ */
+interface TextFilterOverrides extends Omit<Partial<FilterModule<string>>, "description" | "label"> {
+}
+/**
+ * Filter Component
+ *
+ * The Filter component can be used to display the effects
+ * the `useFilter` hook (or other filter state manager) has on
+ * a given page. Various components can be provided to increase/limit
+ * what changes are displayed.
+ */
+declare const Filter: FC<FilterComponentProps>;
+/**
+ * The useFilter hook is primarily designed to use with the Filter
+ * component, but can be used standalone to maintain filter state.
+ * The state as it applies to the current url and a dynamic api post body
+ * can be updated and/or reset using this hook.
+ */
+declare const useFilter: <T extends FilterPostBody>(userFilters: FilterSet, supportJSON: boolean | undefined, location: Location, updateHistory: UpdateHistory) => FilterHooks<T>;
+/**
+ * Return the filter query string to be appended to API endpoint URL.
+ */
+declare const getApiQueryUrl: (filters: FilterSet, filterValues: FilterValues) => string;
+/**
+ * Return the filter post body to be passed for POST api calls.
+ */
+declare const getApiPostBody: <T extends FilterPostBody = {}>(filters: FilterSet, filterValues: FilterValues) => T;
+/**
+ * Parse filter values from browser url query param values to
+ * pre-populate filter values on init.
+ */
+declare const parseInitialFilterValues: (location: Location, filters: FilterSet, presetValues?: {
+    [key: string]: any;
+} | undefined) => FilterValues;
+/**
+ * Get current browser query params, optionally excluding the supplied keys.
+ */
+declare const getCurrentBrowserQueryParams: (location: Location, excludeKeys?: string[]) => ParsedQuery;
+/**
+ * Get browser query params to save in browser address bar
+ * using current filter values. **Note: Each filter value can be any valid object
+ * of type `Record<string, any>` as it will be stringified in the useFilter hook using the query-string library
+ * defaults (https://github.com/sindresorhus/query-string)**.
+ */
+declare const getFilterBrowserQueryParams: (filters: FilterSet, values: FilterValues) => ParsedQuery;
+/**
+ * FILTER_MODE_OPTIONS
+ */
+declare const FILTER_MODE_OPTIONS: Map<FilterMode, string>;
+/**
+ * Constant user JSON query parameter.
+ */
+declare const USER_JSON_QUERY_PARAM = "userJSON";
+/**
+ * Returns the default value or fallback value of a requested url parameter.
+ */
+declare const getDefaultValue: (urlParams: UrlParameters, key: string, defaultValue: any) => any;
+/**
+ * Returns the default value of `jsonView` parameter.
+ */
+declare const getDefaultJsonViewValue: (urlParams: UrlParameters) => boolean;
+/**
+ * Gets the count of applied filters.
+ */
+declare const getFilterAppliedCount: (filters: FilterSet, filterValues: FilterValues) => number;
+/**
+ * Given a list (Array or Set) of string, return a query string representation.
+ * Default behavior is that when all items are selected, nothing is returned.
+ */
+declare const getUrlFromList: (name: string, list: string[] | Set<string>, count: number, hasInitialValue?: boolean) => string;
+// compare Set values
+declare const areSetsEqual: (xs: Set<string>, ys: Set<string>) => boolean;
+declare const convertToFilterDropdownOptions: (filterMapping?: {
+    [key: string]: any;
+} | undefined) => SelectOption<string>[];
+/**
+ * AdditionalJSONFilter Component
+ *
+ * The AdditionalJSONFilter component is a "pseudo" filter used in Filter JSON input to track additional,
+ * user-supplied JSON values which have no equivalent UI filter to represent them.
+ * It acts like any other filter, in that is is able to parse its own value from a query string,
+ * serialize to a query string, and show a filter chip label in the Filter Bar,
+ * but it has (by default) `inputHidden` set to true which causes it to not render any UI in the filter drawer.
+ *
+ * This filter (by default) intentionally does not implement getFilterValueFromApiPostBody, because the useFilter hook
+ * sets this filter's value based on the JSON "leftover" after all the other filters parse their values from JSON.
+ */
+declare const AdditionalJSONFilter: (additionalJSONFilterOptions?: AdditionalJSONFilterOptions) => FilterModule<JSONObject>;
+declare const DoubleMultiSelectFilter: ({ label, description, selectOptions }: DoubleMultiSelectFilterProps, doubleMultiSelectOptions?: DoubleMultiSelectFilterOptions) => FilterModule<DoubleMultiSelectValues>;
+interface ListFilterOptions {
+    allLabel?: string;
+    initialValue?: string | any[];
+}
+/**
+ * ListFilter Component
+ *
+ * The ListFilter component is a checkbox control meant to be used for filtering specific items in a set. While the default
+ * behaviour should suffice, any valid `FilterModule` property (excluding description and label) can
+ * be supplied via the `listFilterOverrides` parameter to change how the filter looks and acts as well as the
+ * `listFilterOptions` to set additional properties related to the list filter itself.
+ *
+ * `label` - The label to display for the text filter component.
+ *
+ * `description` - The description/help text to display above the text filter component.
+ *
+ * `listFilterOptions` - Used to set additional listFilter options such as the allLabel and initialValue.
+ *
+ * `listFilterOverrides` - Any valid `FilterModule` property (excluding description and label)
+ * which will override default text filter behaviour.
+ */
+declare const ListFilter: (options: CheckboxGroupOption[], label: string, description?: string, listFilterOptions?: ListFilterOptions, listFilterOverrides?: ListFilterOverrides) => FilterModule<Set<string>>;
+/**
+ * MultiSelectFilter Component
+ *
+ * The MultiSelectFilter component is a multi select dropdown filter. While the default
+ * behaviour should suffice, any valid `FilterModule` property (excluding description and label) can
+ * be supplied via the `multiSelectFilterOptions` parameter to change how the filter looks and acts.
+ * MultiSelectFilter arguments include:
+ *
+ * `multiSelectFilterProps` - The props required to be supplied as the first argument of
+ * the MultiSelectFilter component. If the *optional* `delimiter` prop is provided, input parsing
+ * will be enabled to allow typing/pasting multiple values seperated by the chosen delimiter.
+ *
+ * `multiSelectFilterOptions` - Any valid `FilterModule` property (excluding description and label)
+ * meant to override default text filter behaviour.
+ */
+declare const MultiSelectFilter: ({ options, label, description, initialValue, creatable, disableMenu, handleCreateItem, delimiter }: MultiSelectFilterProps, multiSelectFilterOptions?: MultiSelectFilterOptions) => FilterModule<string[]>;
+/**
+ * RadioFilter Component
+ *
+ * The RadioFilter component is a filter by use of radio group. While the default
+ * behaviour should suffice, any valid `FilterModule` property (excluding label) can
+ * be supplied via the `radioFilterOptions` parameter to change how the filter looks and acts. RadioFilter
+ * arguments include:
+ *
+ * `radioFilterProps` - The props required to be supplied as the first argument of
+ * the RadioFilter component.
+ *
+ * `radioFilterOptions` - Any valid `FilterModule` property (excluding description and label)
+ * meant to override default text filter behaviour.
+ */
+declare const RadioFilter: ({ initialValue, defaultValue, options, label, description }: RadioFilterProps, radioFilterOptions?: RadioFilterOptions) => FilterModule<string | number>;
+/**
+ * SingleSelectFilter Component
+ *
+ * The SingleSelectFilter component is a single select dropdown filter. While the default
+ * behaviour should suffice, any valid `FilterModule` property (excluding description, label, and required) can
+ * be supplied via the `singleSelectFilterOptions` parameter to change how the filter looks and acts.
+ * SingleSelectFilter arguments include:
+ *
+ * `singleSelectFilterProps` - The props required to be supplied as the first argument of
+ * the SingleSelectFilter component.
+ *
+ * `singleSelectFilterOptions` - Any valid `FilterModule` property (excluding description, label, and required)
+ * meant to override default text filter behaviour.
+ */
+declare const SingleSelectFilter: ({ options, label, description, initialValue, selectPlaceholderLabel, filterLabelPrefix, required }: SingleSelectFilterProps, singleSelectFilterOptions?: SingleSelectFilterOptions) => FilterModule<string | number>;
+interface TextFilterOptions {
+    type?: "text" | "number";
+}
+/**
+ * TextFilter Component
+ *
+ * The TextFilter component is a text input control meant to be used as a keyword(s) search. While the default
+ * behaviour should suffice, any valid `FilterModule` property (excluding description and label) can
+ * be supplied via the `textFilterOverrides` parameter to change how the filter looks and acts. TextFilter arguments include:
+ *
+ * `label` - The label to display for the text filter component.
+ *
+ * `description` - The description/help text to display above the text filter component.
+ *
+ * `textFilterOverrides` - Any valid `FilterModule` property (excluding description and label)
+ * which will override default text filter behaviour.
+ *
+ * `textFilterOptions` - Used to set additional textFilter options such as the type of text input.
+ */
+declare const TextFilter: (label: string, description?: string, textFilterOverrides?: TextFilterOverrides, textFilterOptions?: TextFilterOptions) => FilterModule<string>;
+interface MinMax {
+    min?: number;
+    max?: number;
+}
+interface MinMaxInputProps {
+    value: MinMax | null;
+    onChange(value: MinMax | null): void;
+    allowNegativeInput: boolean;
+}
+declare const MinMaxInput: FC<MinMaxInputProps>;
+interface DurationFilterProps {
+    label: string;
+    description?: string;
+}
+declare const DurationFilter: ({ label, description }: DurationFilterProps) => FilterModule<MinMax>;
+interface MinMaxFilterProps {
+    label: string;
+    description?: string;
+    unitsOfMeasurement?: string;
+}
+declare const MinMaxFilter: ({ label, description, unitsOfMeasurement }: MinMaxFilterProps) => FilterModule<MinMax>;
+interface HeaderProps {
+    /**
+     * Children to display within header container.
+     */
+    children?: ReactNode;
+    /**
+     * The classes to pass to the header.
+     */
+    className?: string;
+}
+/**
+ * Header Component
+ *
+ * The Header component is used to render the header.
+ */
+declare const Header: FC<HeaderProps>;
+/**
+ * Icon Component
+ *
+ * The Icon component takes icon and iconPosition.
+ * The icon will be displayed along side any provided children.
+ * The iconPosition, determines if the icon precedes or proceeds the provided children.
+ *
+ */
+declare const IconButton: FC<IconComponentProps>;
+interface InputProps {
+    /**
+     * This shows a label above the input when provided.
+     */
+    label?: string;
+    /**
+     * If not empty, the input component will be displayed in an error state with the provided error message.
+     */
+    error?: string;
+    /**
+     * If required is provided, the label of the input component will be displayed with a red asterisk at its end.
+     */
+    required?: boolean;
+    /**
+     * The classes to pass to the input.
+     */
+    className?: string;
+    /**
+     * The classes to pass to the input label.
+     */
+    labelClassName?: string;
+}
+/**
+ * Input Component
+ *
+ * The Input component takes in native input props as well as its own InputProps. The state is not managed
+ * in this component and should be handled in the consuming app.
+ *
+ */
+declare const Input: FC<InputProps & ComponentPropsWithRef<"input">>;
+interface ItemGridProps {
+    /**
+     * The children to render inside the grid container.
+     */
+    children?: ReactNode;
+    /**
+     * This is the max number of columns that populates in a row.
+     */
+    maxColumns: number;
+    /**
+     * This is to set the minimum width for each column.
+     */
+    columnWidthMin?: string;
+    /**
+     * This to set the gap between rows and columns.
+     */
+    gridGap?: {
+        rowGap?: number;
+        columnGap?: number;
+    };
+    /**
+     * This would recalculate the size if set to true.
+     */
+    shouldRecalculateSize?: boolean;
+    /**
+     * This is to set the inner width.
+     */
+    innerWidth?: number;
+    /**
+     * The classes to pass to the item grid.
+     */
+    className?: string;
+}
+/**
+ * Item Grid Component
+ *
+ * This component is used to display the items in a grid. The component takes initial props like the maximum columns
+ * that needs to be displayed in each row, sets the minimum width for each column and the grid gap between rows and columns.
+ */
+declare const ItemGrid: React.FC<ItemGridProps>;
+interface ItemResultsProps {
+    /**
+     * The current number of data elements being displayed.
+     */
+    dataLength: number;
+    /**
+     * The total number of data elements.
+     */
+    totalItems: number;
+    /**
+     * The classes to pass to the item results.
+     */
+    className?: string;
+}
+declare const ItemResults: React.FC<ItemResultsProps>;
+interface LoadingProps {
+    /**
+     * Determines if the component should rotate.
+     */
+    animated?: boolean;
+    /**
+     * The direction of the default animation.
+     */
+    spinDirection?: "LEFT" | "RIGHT";
+    /**
+     * Label position in relation to the SVG.
+     */
+    labelPosition?: "BOTTOM" | "RIGHT";
+    /**
+     * The text or element that shows next to the svg.
+     */
+    label?: string | ReactElement;
+    /**
+     * The height of the loading image.
+     */
+    height?: number;
+    /**
+     * The width of the loading image.
+     */
+    width?: number;
+    /**
+     * The SVG image to be shown when loading.
+     */
+    svg?: ElementType;
+    /**
+     * The icon variant to display if svg isn't provided.
+     */
+    iconVariant?: string;
+    /**
+     * Additional styles.
+     */
+    className?: string;
+}
+declare const Loading: FC<LoadingProps>;
+interface ImageTagProps {
+    id: number;
+    name: string;
+    model: string;
+    display_name: string;
+    detector: string;
+    bounding_box: {
+        top_left_x: number;
+        top_left_y: number;
+        bottom_right_x: number;
+        bottom_right_y: number;
+        confidence: number;
+    };
+    items: {
+        confidence: number;
+        bbox: number[][];
+    }[];
+    color: string;
+}
+interface MaskableImageProps {
+    /**
+     * The url to set the image source.
+     */
+    url: string;
+    /**
+     * This is to set the full size dimension of the image.
+     */
+    fullSizeDimensions: {
+        height: number;
+        width: number;
+    };
+    /**
+     * This is to set the alternate text of the image.
+     */
+    alt?: string;
+    /**
+     * This will enable or disable the selection of the image when check icon is clicked.
+     */
+    selectable?: boolean;
+    /**
+     * This will set the selection of the image by default.
+     */
+    selected?: boolean;
+    /**
+     * This is an event that would be called when the image is selected.
+     */
+    onSelect?(selected: boolean): void;
+    /**
+     * This is to set the default property that would highlight the image.
+     */
+    highlighted?: boolean;
+    /**
+     * This is to set the bounding box tags.
+     */
+    boundingBoxTags?: ImageTagProps[];
+    /**
+     * This will set the show spinner property bey default.
+     */
+    showSpinner?: boolean;
+    /**
+     * If set to true,This will show spinner when the image is still loading.
+     */
+    showSpinnerOnLoad?: boolean;
+    /**
+     * This will add the class to the image component.
+     */
+    className?: string;
+    /**
+     * This will specify the heightToWidthRatio of the image.
+     */
+    heightToWidthRatio?: number;
+    /**
+     * This is to set the inner width of the image.
+     */
+    innerWidth?: number;
+}
+/**
+ * Maskable Image Component
+ *
+ * This Component is used to render an image. The image can be selected and highlighted. The showSpinnerOnLoad when set
+ * to true will show the loading spinner until the image is loaded.
+ */
+declare const MaskableImage: FC<MaskableImageProps>;
+interface ModalProps {
+    /**
+     * The action to run when close of the modal is triggered
+     * (either by the close button, cancel button, or clicking
+     * an area outside the modal dialog).
+     */
+    handleClose?: () => void;
+    /**
+     * The action to run when backdrop click is triggered
+     * by clicking on an area outside the modal dialog.
+     */
+    handleBackdropClick?: () => void;
+    /**
+     * The boolean value to determine if the modal is visible or not.
+     */
+    isOpen: boolean;
+    /**
+     * The header text to display on the modal.
+     * This defaults to an empty string.
+     */
+    headerText?: string;
+    /**
+     * The text to display beneath the header text on the modal.
+     * This defaults to an empty string.
+     */
+    subHeaderText?: string;
+    /**
+     * The boolean value to determine whether the close icon
+     * is visible or not. This defaults to `true`.
+     */
+    isCloseIconVisible?: boolean;
+    /**
+     * The primary submit/action button on the modal.
+     */
+    actionButton?: ReactNode;
+    /**
+     * The cancel button text. This defaults to `Cancel`.
+     */
+    cancelButtonText?: string;
+    /**
+     * Any valid React child.
+     */
+    children?: ReactNode;
+    /**
+     * The boolean value to determine whether a top divider shows
+     * between the header and the dialog main body.
+     */
+    showTopDivider?: boolean;
+    /**
+     * The boolean value to determine whether a bottom divider shows
+     * between the dialog main body and the action and cancel buttons.
+     */
+    showBottomDivider?: boolean;
+    /**
+     * The max-width of the dialog area. This width grows with the size
+     * of the screen. Setting to `false` will disable `maxWidth`.
+     */
+    dialogWidth?: false | "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * This is the id to assign to the appended div when rendering in a portal.
+     * This defaults to `lakefront-portal-container`.
+     */
+    portalId?: string;
+    /**
+     * When true, the component will mount a div to the body and render the dialog through it.
+     * This is useful when the dialog would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. Uses IntersectionObserver and needs a polyfill if IE compatibility is needed. This
+     * defaults to `false`.
+     */
+    renderInPortal?: boolean;
+    /**
+     * The classes to pass to the modal.
+     */
+    className?: string;
+}
+/**
+ * Modal Component
+ *
+ * The Modal component is a UI blocking dialog overlay.
+ * The state is not managed inside this component and visibility (via the `isOpen` prop) needs to be maintained in the
+ * parent component. While the default rendering behavior is often sufficient, the `renderInPortal` prop can be used to
+ * append a div to the body.
+ *
+ */
+declare const Modal: FC<ModalProps>;
+interface ConfirmationModalProps {
+    /**
+     * The boolean value to determine if the modal is visible or not.
+     */
+    modalVisible: boolean;
+    /**
+     * The title of the modal.
+     */
+    title?: string;
+    /**
+     * The text or content to display in the main body of the modal.
+     */
+    message: string | ReactElement;
+    /**
+     * The yes/accept button text. This defaults to `Yes`.
+     */
+    yes?: string;
+    /**
+     * The no/decline button text. This defaults to `No`.
+     */
+    no?: string;
+    /**
+     * The action to run when yes/accept action is triggered.
+     */
+    onYes: () => void;
+    /**
+     * The action to run when no/decline action is triggered.
+     */
+    onNo: () => void;
+    /**
+     * The classes to pass to the modal.
+     */
+    className?: string;
+    /**
+     * When true, the component will mount a div to the body and render the dialog through it.
+     * This is useful when the dialog would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. Uses IntersectionObserver and needs a polyfill if IE compatibility is needed. This
+     * defaults to `false`.
+     */
+    renderInPortal?: boolean;
+}
+/**
+ * Confirmation Modal Component
+ *
+ * The Confirmation modal component is a UI blocking dialog meant to handle yes/no responses.
+ * The state is not managed inside this component and visibility (via the `modalVisible` prop) needs to be maintained in the parent component.
+ * While the default rendering behavior is often sufficient, the `renderInPortal` prop can be used
+ * to append a div to the body.
+ *
+ */
+declare const ConfirmationModal: FC<ConfirmationModalProps>;
+interface ModeSelectorLegendRowProps {
+    label: string;
+    color: string;
+}
+interface ModeSelectorProps {
+    /**
+     * The title of the mode selector.
+     */
+    title?: string;
+    /**
+     * The classes to pass to the mode selector.
+     */
+    className?: string;
+    /**
+     * The classes to pass to the select drop-down.
+     */
+    selectClassName?: string;
+    /**
+     * The list of modes to include in the drop-down.
+     */
+    modes: SelectOption<string>[];
+    /**
+     * The selected mode to display on the drop-down.
+     */
+    selectedMode: string;
+    /**
+     * The legend symbol colors and labels.
+     */
+    legend?: ModeSelectorLegendRowProps[];
+    /**
+     * The action to take on the selected mode value.
+     */
+    onModeSelect: (mode: string) => void;
+}
+/**
+ *
+ * ModeSelector Component
+ *
+ * The ModeSelector component is intended to be used as a quick mode/context selection
+ * panel. The state is not managed inside this component (i.e. to be received by the parent).
+ * For this reason, `selectedMode`, `modes`, and `onModeSelect` must be provided.
+ */
+declare const ModeSelector: FC<ModeSelectorProps>;
+interface PageProps {
+    /**
+     * The children to display within the styled page container.
+     */
+    children?: ReactNode;
+    /**
+     * These are the classes that would be applied to the Page component.
+     */
+    className?: string;
+}
+/**
+ * Page Component
+ *
+ * The Page Component can be used to render other child components.
+ */
+declare const Page: FC<PageProps>;
+/**
+ * This is the structure for Highlights.
+ */
+interface HighlightsProp {
+    start: number;
+    end: number;
+    playback: boolean;
+}
+interface PlaybackBarProps {
+    /**
+     * This is to display the current duration of the playback component.
+     */
+    currentDuration: string;
+    /**
+     * This is to display the end duration of the playback component.
+     */
+    endDuration: string;
+    /**
+     * This is to set the slider position on initial render of the playback component.
+     */
+    currentSlider: number;
+    /**
+     * This is to set the max value of the playback component.
+     */
+    maxSlider: number;
+    /**
+     * This function is called when the slider is moved.
+     */
+    setSlider(index: number): void;
+    /**
+     * This is to highlight a particular section of the playback component in green.
+     */
+    highlights: HighlightsProp[];
+    /**
+     * The classes to pass to the playback bar.
+     */
+    className?: string;
+}
+/**
+ *  The Playback Component renders a slider.
+ *  The highlights property is an array and each item in an array has start,end and playback.
+ *  The Playback component is highlighted depending on the start and end value.
+ *  You can have multiple highlights in one single playback component.
+ *  The slider can be moved between the start point and the end point depending upon the playback property.
+ *  The playback property determines whether the slider can be moved freely or whether it is constrained to the highlighted areas.
+ */
+declare const PlaybackBar: FC<PlaybackBarProps>;
+interface PortalStyles {
+    className?: string;
+    styles?: Partial<CSSStyleDeclaration>;
+}
+interface UsePopoverProps {
+    /**
+     * This is the container where the popover will reside
+     * or must confirm exists (when rendering in a portal).
+     */
+    popoverContainer: HTMLElement | null;
+    /**
+     * This is the id to assign to the appended div when rendering in a portal.
+     * This defaults to `lakefront-portal-container`.
+     */
+    portalId?: string;
+    /**
+     * This is the className and styles to apply to the portal. This is useful for setting
+     * styles since the portal will render outside the majority of your css scope.
+     */
+    portalStyles?: PortalStyles;
+    /**
+     * When true, a div will be appended to the body in order to render the desired content through it.
+     * This is useful when the content would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. It uses IntersectionObserver and needs a polyfill if IE compatibility is needed. This
+     * defaults to `false`.
+     */
+    renderInPortal?: boolean;
+}
+interface UsePopoverResult {
+    portal: HTMLElement | null;
+    update: number;
+}
+declare const usePopover: ({ popoverContainer, portalId, portalStyles, renderInPortal }: UsePopoverProps) => UsePopoverResult;
+interface PopoverContentProps {
+    /**
+     * This is the (portal/outside) container to render content in. If null,
+     * content will be rendered in the closest parent node.
+     */
+    portal: HTMLElement | null;
+    /**
+     * When provided, these children will be memoized and render as the content.
+     */
+    children?: ReactNode;
+    /**
+     * This is an array of dependency values to check when determining
+     * if the memoized content should be recalculated. If none of the values
+     * in the dependency list have changed, the content will appear as it did
+     * in the last render.
+     */
+    deps: any[];
+}
+/**
+ * Popover Content Component
+ *
+ * The PopoverContent component is a support component to the `usePopover` hook.
+ * It is meant to handle the memoization of content to be rendered and logically
+ * switch between rendering content within or outside a portal as needed. Under the hood,
+ * all Lakefront popover components (Modal, Snackbar, et. al) utilize this component. View
+ * the [PopoverContent stories source code](https://github.com/woven-planet/lakefront/blob/main/src/stories/PopoverContent/PopoverContent.stories.tsx)
+ * for a more detailed look on how to implement.
+ */
+declare const PopoverContent: FC<PopoverContentProps>;
+interface ProgressBarProps {
+    /**
+     * This is to set the total of the progress bar.
+     */
+    total: number;
+    /**
+     * This is to set the width of the progress bar.
+     */
+    width: number;
+    /**
+     * The data that is passed to the Progress Bar Component to render the bar width of each label depending on the value.
+     */
+    data: {
+        label: string;
+        value: number;
+    }[];
+    /**
+     * This is to render the background color for each label that is being passed.
+     */
+    theme: {
+        [key: string]: {
+            bgColor: string;
+            fgColor: string;
+        };
+    };
+    /**
+     * The classes to pass to the progress bar.
+     */
+    className?: string;
+}
+/**
+ * Progress Bar Component
+ *
+ * The Progress Bar Component is used to render the bar. The bar displays each section in a given color and the width
+ * of each section is calculated according to the value provide.
+ */
+declare const ProgressBar: React.FC<ProgressBarProps>;
+interface CircularProgressProps {
+    /**
+     * This is to set the width of the pie chart.
+     */
+    width: number;
+    /**
+     * This is to set the text that would appear inside the pie chart.
+     */
+    text?: ReactNode;
+    /**
+     * The data that is passed to the Circular Progress Component to render different arcs for each value provided.
+     */
+    data: {
+        label: string;
+        value: number;
+        tooltip?: boolean;
+        key?: string;
+    }[];
+    /**
+     * This is to render the background color for each label that is being passed.
+     */
+    theme: {
+        [key: string]: {
+            bgColor: string;
+            fgColor: string;
+        };
+    };
+    /**
+     * The classes to pass to the circular progress.
+     */
+    className?: string;
+}
+/**
+ * Circular Progress Component
+ *
+ * The Circular Progress component is used to render the arcs depending on the value provided for each label.
+ */
+declare const CircularProgress: FC<CircularProgressProps>;
+interface DeviceProgressBarThreshold {
+    /**
+     * The unique id of the threshold.
+     */
+    id: string;
+    /**
+     * The percentage at which the threshold exists.
+     * This should be a string percentage (e.g. 10%) to accurately
+     * generate the width of the progress (via css).
+     */
+    percentage: string;
+    /**
+     * The color of the threshold. This defaults to `lakefrontColors.red` if left undefined.
+     */
+    color?: string;
+}
+interface DeviceProgressProps {
+    /**
+     * This is to set the used space of the device. The type should be a number.
+     */
+    used: number;
+    /**
+     * This is to set the available space of the device. The type should be a number.
+     */
+    available: number;
+    /**
+     * This is to set the total space of the device. The type should be a number.
+     */
+    total: number;
+    /**
+     * This is to set the capacity for the device progress bar.
+     * This should be a string percentage (e.g. 10%) to accurately
+     * generate the width of the progress (via css).
+     */
+    capacity: string;
+    /**
+     * This is the text to display after the capacity. By default, this value is empty.
+     */
+    capacitySubText?: string;
+    /**
+     * This is the location, respective to the progress bar, in which to display the capacity text.
+     * The default is "inside" the progress bar.
+     */
+    capacityLocation?: "below" | "inside";
+    /**
+     * This is to set the background color of the  progress bar.
+     */
+    backgroundColor?: string;
+    /**
+     * These are the classes to apply to the component.
+     */
+    className?: string;
+    /**
+     * These are optional thresholds to set on the progress bar.
+     */
+    thresholds?: DeviceProgressBarThreshold[];
+}
+/**
+ * Device Progress Component
+ *
+ * The Device Progress Component displays the used space, available space and the total space of the device in the
+ * form of a bar. It also displays the percentage of the device that is full.
+ *
+ */
+declare const DeviceProgressBar: FC<DeviceProgressProps>;
+interface Property {
+    /** This is to set the caption for the PropertyList */
+    caption: string;
+    /** This is to set the caption style that needs to be added to the caption */
+    captionStyles?: string | null;
+    /** This is to set the content for the corresponding caption */
+    content: (data: any) => ReactNode;
+    /** This is to set the style for the content associated to the caption */
+    contentStyles?: string | null;
+}
+interface BaseProps {
+    /** This is to set the list of the property- caption, captionStyle, content and contentStyles */
+    attributes: Property[];
+    /** This is to set the external class on the Property List. */
+    className?: string;
+    /** This is to set the data for the content defined in the Property */
+    data: any;
+}
+interface PropertyListProps extends BaseProps {
+    /** This is to set the caption width. Set variant as 'variable' to render the caption according to the size of the caption.
+     *  The default is set to Fixed. */
+    variant: string;
+}
+/** The PropertyList Component is used to display the list of captions and their corresponding data. The default behavior of the caption is fixed but you can choose to
+ *  set the variant='Variable'. The custom styles can be applied to the caption and the corresponding content.
+ *  For more information please check the implementations below.
+ */
+declare const PropertyList: React.FC<PropertyListProps>;
+declare const PropertyListVariable: React.FC<BaseProps>;
+interface RadioGroupProps {
+    /**
+     * The name of the radio button group.
+     */
+    name: string;
+    /**
+     * The options of each radio button within the radio group.
+     * Options include the `label` (appearance), `value` (returned on selection),
+     * and whether the individual option is `disabled`.
+     */
+    options: {
+        value: string | number;
+        label: string | ReactElement;
+        disabled?: boolean;
+    }[];
+    /**
+     * The value of the selected radio button.
+     */
+    value: string | number;
+    /**
+     * HTML input element disabled prop.
+     */
+    disabled?: boolean;
+    /**
+     * The action that should be run when a radio button is selected.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The classes to pass to the radio group.
+     */
+    className?: string;
+    /**
+     * The classes to pass to the radio group label.
+     */
+    labelClassName?: string;
+}
+/**
+ * RadioGroup Component
+ *
+ * The RadioGroup component takes in native radio button props as well as its own RadioGroupProps.
+ *
+ */
+declare const RadioGroup: FC<RadioGroupProps & ComponentPropsWithoutRef<"input">>;
+interface RefreshToolbarProps {
+    /**
+     * This is called when the refresh button is clicked.
+     */
+    handleRefresh(): void;
+    /**
+     * This is to set the Refresh toolbar class.
+     */
+    className?: string;
+    /**
+     * The additional content to display if desired.
+     */
+    children?: ReactNode;
+    /**
+     * This is to set to false if you want to apply your own container styling (with className prop or a wrapper)
+     */
+    standalone?: boolean;
+    /**
+     * Set this to true if you want to display the loading image.
+     */
+    isRefreshing?: boolean;
+    /**
+     * This is to set the last updated text.
+     */
+    lastUpdated?: string | null;
+    /**
+     * This is to display the loading image label.
+     */
+    refreshProgressLabel?: string;
+    /**
+     * This is to render right side components.
+     */
+    rightComp?: ReactNode;
+    /**
+     * This is to set right side text.
+     */
+    rightSideText?: string;
+    /**
+     * This is to render a custom refresh button.
+     */
+    refreshButton?: ReactNode;
+}
+/**
+ * Refresh toolbar component that can be used as an additional header row.
+ *
+ * Set [standalone] to false if you want to apply your own container styling (with className
+ * prop or a wrapper). Set [standalone] to true to add full-width behavior with margins and
+ * a bottom border (to function as a standalone header). Defaults to true.
+ */
+declare const RefreshToolbar: FC<RefreshToolbarProps>;
+type SelectOverlayStyles = Partial<GetStyles<SelectOption<any>, true, GroupBase<SelectOption<any>>>>;
+declare const SELECT_OVERLAY_STYLES: SelectOverlayStyles;
+interface SelectPopoverOption {
+    name: ReactElement | string;
+    value: unknown;
+    key?: string;
+    disabled?: boolean;
+}
+interface SelectPopoverProps {
+    /**
+     * Called on click with the value of the option that was clicked.
+     */
+    handleClick(value: unknown): void;
+    /**
+     * Children to render within popover wrapper.
+     */
+    children?: ReactNode;
+    /**
+     * Options to be mapped to items in the dropdown.
+     */
+    options: SelectPopoverOption[];
+    /**
+     * Determines whether the popover is visible. A key can be provided if the name is not unique.
+     */
+    visible: boolean;
+    /**
+     * This is the id to assign to the appended div when rendering in a portal.
+     * This defaults to `lakefront-portal-container`.
+     */
+    portalId?: string;
+    /**
+     * When true, the component will mount a div to the body and render the popover through it.
+     * This is useful when the popover would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. Uses IntersectionObserver and needs a polyfill if IE compatibility is needed.
+     */
+    renderInPortal?: boolean;
+    /**
+     * The classes to pass to the select popover.
+     */
+    className?: string;
+}
+/**
+ * Select Popover Component
+ *
+ * The Select Popover component is a select-style component that displays like a popover at the bottom of the children.
+ * The state is not managed inside this component and visible needs to be maintained in the parent component.
+ * When used inside a scrollable or "overflow: hidden" element it may get cut off. When this is an issue,
+ * use the "renderInPortal" prop which appends a div to the body and positions the component to the correct coordinates.
+ *
+ */
+declare const SelectPopover: FC<SelectPopoverProps>;
+declare enum MESSAGE_TYPES {
+    INFO = "info",
+    ERROR = "error",
+    SUCCESS = "success"
+}
+type SnackbarCloseReason = "timeout";
+interface SnackbarOrigin {
+    vertical: "top" | "bottom";
+    horizontal: "left" | "center" | "right";
+}
+interface SnackbarProps {
+    /**
+     * The action to display. It renders after the message, at the end of the snackbar.
+     */
+    action?: ReactNode;
+    /**
+     * The anchor of the `Snackbar`.
+     */
+    anchorOrigin?: SnackbarOrigin;
+    /**
+     * The number of milliseconds to wait before automatically calling the
+     * `onClose` function. `onClose` should then set the state of the `open`
+     * prop to hide the Snackbar. This behavior is disabled by default with
+     * the `null` value. If left undefined will auto hide after 4000ms.
+     */
+    autoHideDuration?: number | null;
+    /**
+     * The message to display.
+     */
+    message?: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     * Typically `onClose` is used to set state in the parent component,
+     * which is used to control the `Snackbar` `open` prop.
+     * The `reason` parameter can optionally be used to control the response to `onClose`,
+     * for example ignoring `clickaway`.
+     *
+     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+     */
+    onClose?: (reason: SnackbarCloseReason) => void;
+    /**
+     * If `true`, `Snackbar` is open.
+     */
+    open?: boolean;
+    /**
+     * Message types used to determine icon color and icon to render.
+     */
+    type: MESSAGE_TYPES;
+    /**
+     * This is the id to assign to the appended div when rendering in a portal.
+     * This defaults to `lakefront-portal-container`.
+     */
+    portalId?: string;
+    /**
+     * When true, the component will mount a div to the body and render the popover through it.
+     * This is useful when the popover would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. Uses IntersectionObserver and needs a polyfill if IE compatibility is needed.
+     */
+    renderInPortal?: boolean;
+    /**
+     * The classes to pass to the snackbar.
+     */
+    className?: string;
+}
+/**
+ * Snackbar Component
+ *
+ * The Snackbar component is a UI informational overlay.
+ * This can be used to display messages, as well as provide an action with an allocated type that has it's own corresponding icon and styling.
+ * The state is not managed inside this component and visibility (via the `open` prop) needs to be maintained in the parent component.
+ * The `renderInPortal` prop can be used to append a div to the body.
+ *
+ */
+declare const Snackbar: FC<SnackbarProps>;
+declare enum Mode {
+    minmax = "minmax",
+    presets = "presets"
+}
+interface VehicleSpeed {
+    min?: number;
+    max?: number;
+    unit: SPEED_UNITS;
+    mode: Mode;
+    preset?: string;
+}
+/**
+ * Enumerator for units of speed abbreviations
+ */
+declare enum SPEED_UNITS {
+    kilometersPerHour = "kph",
+    milesPerHour = "mph",
+    metersPerSecondSquared = "m/s\u00B2"
+}
+interface SpeedInputProps {
+    /**
+     *  The value prop is assigned to 'VehicleSpeed', which is made up of a 'min', 'max' for the input values. A 'unit'(SPEED_UNITS) which is currently a toggle between 'kph', 'mph', or 'm/s²'. And 'mode' which uses 'minmax' for both input values.
+     */
+    value: VehicleSpeed | null;
+    /**
+     * The function that should run when a radio button is selected.
+     */
+    onChange(speedRange: VehicleSpeed | null): void;
+    /**
+     * Toggle true, to have speed units validated for selected unit.
+     */
+    unitConversionRequired: boolean;
+    /**
+     * Toggle to accept negative input values or not.
+     */
+    allowNegativeInput: boolean;
+    /**
+     * We can set our defaultUnits with (kilometersPerHour(kph), milesPerHour(mph), metersPerSecondSquared(m/s²)).
+     * These values determine if the unitConversionRequired needs to validate the conversion or not.
+     */
+    defaultUnits: SPEED_UNITS;
+    /**
+     * If true, this prop will disable the radio buttons.
+     */
+    disabled: boolean;
+}
+/**
+ *
+ * The SpeedInput component takes in RadioGroup and MinMaxInput to create one component.
+ * This component is used for input values also to toggle between radio buttons to convert input to a range.
+ *
+ */
+declare const SpeedInput: FC<SpeedInputProps>;
+type SpeedInputVehicleSpeed = VehicleSpeed;
+declare const SpeedInputVehicleSpeedMode: typeof Mode;
+type StackBannerIcon = ReactElement<SVGElement> | boolean | undefined;
+interface StackBannerRowProps {
+    /**
+     * A unique string key required for React list item changes.
+     */
+    key: string;
+    /**
+     * The main content to be displayed in the banner.
+     */
+    content?: ReactNode;
+    /**
+     * The svg icon to display. If a svg is provided, the svg will be used.
+     * If explicitly true or left undefined, a default flag icon will be displayed.
+     * If explicitly false, no icon will be displayed.
+     */
+    icon?: StackBannerIcon;
+    /**
+     * The severity of the content that maps to varying background color levels.
+     * If left undefined, the background will be transparent.
+     */
+    severity?: "normal" | "warning" | "error" | "default";
+    /**
+     * The action to run when the banner is clicked.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The classes to pass to the stack banner row.
+     */
+    className?: string;
+}
+/**
+ * StackBannerRow Component
+ *
+ * The StackBannerRow component takes in content, icon, severity, and onClick props. It is
+ * designed to be used with a StackBanner component, but can be used as a standalone component.
+ *
+ */
+declare const StackBannerRow: FC<StackBannerRowProps & Omit<ComponentPropsWithoutRef<"div">, "content">>;
+interface StackBannerProps {
+    /**
+     * The rows to display in the stack banner.
+     */
+    rows: StackBannerRowProps[];
+    /**
+     * The classes to pass to the stack banner.
+     */
+    className?: string;
+}
+/**
+ * StackBanner Component
+ *
+ * The StackBanner component is the container for StackBannerRows. As such,
+ * rows are required to display any content.
+ *
+ */
+declare const StackBanner: FC<StackBannerProps & ComponentPropsWithoutRef<"div">>;
+interface StatusCardProps {
+    /**
+     * This is to set the status row.
+     */
+    statusRow: ReactNode;
+    /**
+     * This is to set the bottom row.
+     */
+    bottomRow: ReactNode;
+    /**
+     * This is to set an external class.
+     */
+    className?: string;
+}
+/**
+ * Status Card Component is used to render the status and the bottom row.
+ */
+declare const StatusCard: FC<StatusCardProps>;
+interface StatusCellBadgeProps {
+    /**
+     * This is to set the status.
+     */
+    status: string;
+    /**
+     * This is to set an external class.
+     */
+    className?: string;
+}
+/**
+ *  Status Cell Badge Component will display a round bullet colored according to the status and
+ *  display the status.
+ */
+declare const StatusCellBadge: FC<StatusCellBadgeProps>;
+declare enum Status {
+    RUNNING = "Running",
+    ENQUEUED = "Enqueued",
+    ERROR = "Error",
+    FAILED = "Failed",
+    NONE = "None"
+}
+interface StatusRowProps {
+    /**
+     * The children to display within row.
+     */
+    children?: ReactNode;
+    /**
+     * This is to set the status.
+     */
+    status?: Status;
+    /**
+     * This is to set an external classname.
+     */
+    className?: string;
+    /**
+     * This is to handle the row click event.
+     */
+    onRowClick?: () => void;
+}
+/**
+ *  Status Row Component is used to render the row with various colums.
+ */
+declare const StatusRow: FC<StatusRowProps>;
+interface StatusTableHeader {
+    /**
+     * This property is to set the name of the header.
+     */
+    name: string;
+    /**
+     * This is to set the name of the field.
+     */
+    field?: string;
+    /**
+     * This is to set whether the field is sortable.
+     */
+    sortable: boolean;
+}
+interface StatusTableProps {
+    /**
+     * The headers to populate the status table. The header should have a display name, field and sortable
+     *  set to true or false.
+     */
+    headers: StatusTableHeader[];
+    /**
+     * The children to render inside the table.
+     */
+    children?: ReactNode;
+    /**
+     * This is an event that triggers whenever the sorting is clicked.
+     */
+    handleSort?: (field: string) => void;
+    /**
+     * If set to true, this will render table as Status Table Card. The headers will not be visible.
+     */
+    cards?: boolean;
+    /**
+     * This is to set an external class.
+     */
+    className?: string;
+}
+/**
+ *
+ * Status Table Component has two variations- 1. Status Table with headers 2. Status Table as a card with no headers.
+ * The handleSort event is triggered whenever the sorting changes on the table.
+ * You can use this to write your own logic to handle sort.
+ * The colors for each row is rendered depending on the status.
+ */
+declare const StatusTable: FC<StatusTableProps>;
+interface SortOptions {
+    orderBy: string | string[];
+    ascending?: boolean;
+}
+/**
+ * mapTableFilters was primarily created to mitigate where different
+ * api endpoints can bring back the same data under different key names.
+ * This allows for filtering across tables.
+ */
+declare const mapTableFilters: (filterValues: FilterValues, filterMap: FilterMap) => FilterMap;
+declare const getCompareFormat: (value: any) => number | string;
+declare const sortByField: <T extends unknown>(ascending: boolean, inboundData: T[], field: string) => T[];
+declare const filterData: (filters: FilterMap) => <T extends unknown>(inboundData: T[] | null) => T[] | null;
+declare const sortData: (sortOptions: SortOptions) => <T extends unknown>(inboundData: T[]) => T[];
+interface StatusTableHooks<T> {
+    data: T[];
+    handleSort(field: string, bidirectional?: boolean): void;
+}
+interface StatusTableOptions {
+    filters?: {
+        filterMap: FilterMap;
+        filterValues: FilterValues;
+    };
+    sort?: SortOptions;
+}
+declare const useStatusTable: <T extends unknown>(inboundData: T[] | null, { filters: filterOptions, sort: sortOptions }?: StatusTableOptions) => StatusTableHooks<T>;
+interface GraphProps {
+    /**
+     * Sends data stored with each node from the parsing step on click inside of any drawn node. Use this data to
+     * store the node key for the highlightedKey prop if node highlighting is desired.
+     */
+    handleSelectedNode(node: any | null, vertex?: number): void;
+    /**
+     * Handle a right-click on any drawn node. This can be used to configure a context menu.
+     */
+    handleContextClickNode?(key: string, vertex: number, e: MouseEvent<HTMLCanvasElement>, ctx: CanvasRenderingContext2D): void;
+    /**
+     * Action to run when a node context menu is closed.
+     */
+    handleCloseContextMenu?(): void;
+    /**
+     * This should be the node key from the AWS JSON and if supplied, will highlight that node in the graph.
+     */
+    highlightedKey: string | null;
+    /**
+     * This is AWS Step Function JSON contained in an object. See the Storybook Canvas for detailed examples of what
+     * should be provided.
+     */
+    json: any;
+    /**
+     * The classes to pass to the step function graph container.
+     */
+    className?: string;
+}
+/**
+ * Step Function Graph Component
+ *
+ * The Step Function Graph takes AWS Step Function JSON and renders an interactive 2D canvas of how its states connect
+ * together. It can be panned by clicking in empty space and moving the mouse. It also takes a function "handleSelectedNode" that sends back which node has been clicked, so the
+ * the consuming application can use the "highlightedKey" prop to let it know to highlight a node.
+ * This component does not allow cycles, or nodes that connect such that a circular path is formed.
+ */
+declare const StepFunctionGraph: FC<GraphProps>;
+type StepFunctionGraphProps = GraphProps;
+interface TableSortByOptions {
+    id: string;
+    desc: boolean;
+}
+interface TableProps {
+    /**
+     * This is to set the data for the table.
+     */
+    data: Array<any> | null | undefined;
+    /**
+     * This is to set the columns of the table.
+     */
+    columns: Array<Column>;
+    /**
+     * This is to set the additional properties on the table like disableSortRemove,
+     * autoResetSortBy, disableMultiSort, etc.
+     */
+    options?: any;
+    /**
+     * This is to set the row properties.
+     */
+    rowProps?: object;
+    /**
+     * This is to set the display message when there is no data.
+     */
+    noDataMessage?: string;
+    /**
+     * This is to set some additional style on the table.
+     */
+    style?: any;
+    /**
+     * This is to set a class on the table.
+     */
+    className?: string;
+    /**
+     * This is to set the initial sorting on the table.
+     * When an array of items is provided, the order dictates the priority of sorting. Example: value --> title --> percentage.
+     */
+    initialSortBy?: {
+        id: string;
+        desc: boolean;
+    }[] | {
+        id: string;
+        desc: boolean;
+    };
+    /**
+     * This event is triggered when the sorting is changed on the table.
+     * The first argument is the sorted column and the second argument is the sortBy array
+     * (for if table is sorted by multiple columns).
+     */
+    onChangeSort?({ id, desc }: TableSortByOptions, sortedBy?: TableSortByOptions[]): void;
+    /**
+     * This is to set the row sub component on the table.
+     */
+    renderRowSubComponent?({ row }: {
+        row: any;
+    }): React.ReactNode;
+    /**
+     * This allows displaying the table rows without headers.
+     * This is defaulted to false.
+     */
+    hideHeaders?: boolean;
+}
+/**
+ *  The Table Component is used to render table with specified columns and data.
+ *  The no data meesage can be set when the data is not present.
+ *  You can set initial sorting on the table. OnChangeSort is triggered everytime the sorting is changed on the table.
+ *  For more information about react-table please check the link https://react-table.tanstack.com/docs/api/useTable
+ */
+declare const Table: React.FC<TableProps>;
+interface TabProps {
+    /**
+     * This is to set the options which has a key and a caption.
+     */
+    options: TabDef[];
+    /**
+     * This is to set the selected tab by default.
+     */
+    value: string;
+    /**
+     * This is an event which is called whenever a tab is clicked.
+     */
+    onChange(value: string): void;
+    /**
+     * This is to set a class on the tab component.
+     */
+    className?: string;
+}
+/**
+ * The Tab Component is used to render multiple tabs. The onChange event is called whenever the user clicks a different tab.
+ * The value will set the selection of the tab by default.
+ */
+declare const Tabs: FC<TabProps>;
+interface TextAreaProps {
+    /**
+     * This shows a label above the TextArea when provided.
+     */
+    label?: string;
+    /**
+     * If not empty, the TextArea component will be displayed in an error state with the provided error message.
+     */
+    error?: string;
+    /**
+     * The classes to pass to the text area.
+     */
+    className?: string;
+    /**
+     * The classes to pass to the text area label.
+     */
+    labelClassName?: string;
+}
+/**
+ * TextArea Component
+ *
+ * The TextArea component takes in native textarea props as well as its own TextAreaProps. The state is not managed
+ * in this component and should be handled in the consuming app.
+ *
+ */
+declare const TextArea: FC<TextAreaProps & ComponentPropsWithRef<"textarea">>;
+interface ToggleProps<T> {
+    /**
+     * Optional className for styling component.
+     */
+    className?: string;
+    /**
+     * When true, the switch will no longer toggle.
+     */
+    disabled?: boolean;
+    /**
+     * Options for the labels and their values. It should only contain two objects.
+     */
+    options: SelectOption<T>[];
+    /**
+     * This is called whenever the switch toggles with the value of the option.
+     * Clicking the label also toggles the switch.
+     */
+    onChange: (value: T) => void;
+    /**
+     * Determines which side of the switch the label is rendered.
+     */
+    position?: "LEFT" | "RIGHT";
+    /**
+     * The currently selected value. This value is passed in from the parent component.
+     */
+    value: T;
+}
+/**
+ * Toggle Component
+ *
+ * The Toggle component is a switch component that displays one of two labels depending on the state of the switch.
+ * It has a position prop to change the layout of the label. State for the value needs to be maintained in a parent
+ * component and passed in as a prop.
+ */
+declare const Toggle: <T>({ className, disabled, options, onChange, position, value }: ToggleProps<T>) => JSX.Element | null;
+interface ListItem {
+    label: string;
+    description: string;
+    value: string;
+}
+interface TransferListProps {
+    leftListData: ListItem[];
+    leftListName: string;
+    rightListData: ListItem[];
+    rightListName: string;
+    onListChange: (leftList: ListItem[], rightList: ListItem[]) => void;
+    sort?: boolean;
+    className?: string;
+}
+declare const TransferList: FC<TransferListProps>;
+interface TypeaheadResultItem {
+    label: ReactNode;
+    value: string;
+}
+interface TypeaheadSearchResultProps {
+    searchText: string;
+    onResultSelect: (result: TypeaheadResultItem) => void;
+    fetchResults?: (searchText: string) => Promise<TypeaheadResultItem[]>;
+}
+interface TypeaheadSearchProps {
+    /**
+     * Whether the search input should be focused on initialization.
+     */
+    autoFocus?: boolean;
+    /**
+     * The minimum amount of characters a user must enter before a (non-submit triggered)
+     * search will be initiated. `Default = 1`.
+     */
+    characterMinimum?: number;
+    /**
+     * The callback to render search text and/or asynchronous search results.
+     */
+    children?: (typeaheadSearchResultProps: TypeaheadSearchResultProps) => ReactNode;
+    /**
+     * The request to retrieve and format results using the search text. This is useful
+     * if the user does not want to supply their own callback render function as children.
+     */
+    fetchResults?: (searchText: string) => Promise<TypeaheadResultItem[]>;
+    /**
+     * The initial value of the search text input.
+     */
+    initialSearchText?: string;
+    /**
+     * The time (in `ms`) to delay between keystrokes before updating the search value. `Default = 250ms`.
+     */
+    inputDebounceMs?: number;
+    /**
+     * The action to run on a selected result.
+     */
+    onResultSelect?: (result: TypeaheadResultItem) => void;
+    /**
+     * The placeholder text to display when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Where the search results popover should render in relation to the search input.
+     */
+    placement?: "bottom-start" | "bottom-end";
+    /**
+     * This is the id to assign to the appended div when rendering in a portal.
+     * This defaults to `lakefront-portal-container`.
+     */
+    portalId?: string;
+    /**
+     * When true, the component will mount a div to the body and render the search results through it.
+     * This is useful when the popover would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. Uses IntersectionObserver and needs a polyfill if IE compatibility is needed.
+     */
+    renderInPortal?: boolean;
+    /**
+     * The action to run using the entered search text on submit.
+     */
+    submitSearch: (searchText: string) => void;
+    /**
+     * The classes to pass to the typeahead search container.
+     */
+    className?: string;
+}
+/**
+ * TypeaheadSearch Component
+ *
+ * The TypeaheadSearch component is a predictive search style input and especially useful
+ * when the result list needs to be fetched asynchronously. The component can be used as
+ * a stand-alone element (with no children) by providing a `fetchResults` function:
+ *
+ * ```jsx
+ * <TypeaheadSearch
+ *   autoFocus
+ *   fetchResults={fetchResults}
+ *   inputDebounceMs={250}
+ *   onResultSelect={onResultSelect}
+ *   placeholder="Search"
+ *   placement="bottom-start"
+ *   submitSearch={submitSearch}
+ * />
+ * ```
+ *
+ * If the default functionality needs to be extended to provide custom result rendering or
+ * to control when the result popover should close, the user can provide a render callback
+ * as follows:
+ *
+ * ```jsx
+ * <TypeaheadSearch {...typeaheadSearchProps}>
+ *    {(typeaheadSearchResultProps: TypeaheadSearchResultProps) => (
+ *        <TypeaheadCustom {...options} />
+ *    )}
+ * </TypeaheadSearch>
+ * ```
+ *
+ * ❗ **Note: In order to use the built-in handler to close the popover when selecting a**
+ * **result from the list, you'll need to spread in the props (as shown above).**
+ */
+declare const TypeaheadSearch: FC<TypeaheadSearchProps & ComponentPropsWithoutRef<"input">>;
+declare const LAKEFRONT_COLORS: {
+    white: string;
+    akoya: string;
+    selago: string;
+    mercury: string;
+    pavement: string;
+    dolphin: string;
+    gunpowder: string;
+    storm: string;
+    cinder: string;
+    black: string;
+    grey30: string;
+    doveGrey: string;
+    bombay: string;
+    alto: string;
+    red: string;
+    watermelon: string;
+    orange: string;
+    yellow: string;
+    gold: string;
+    green: string;
+    pastelGreen: string;
+    emerald: string;
+    teal: string;
+    blue: string;
+    lavender: string;
+    havelockBlue: string;
+    calmingBlue: string;
+    sinbad: string;
+    cranberry: string;
+    viking: string;
+    mediumPurple: string;
+    vista: string;
+    saturatedRed: string;
+    saturatedOrange: string;
+    saturatedYellow: string;
+    saturatedBlue: string;
+    saturatedGreen: string;
+    saturatedLavender: string;
+    saturatedTeal: string;
+    arsenic: string;
+};
+declare const THEME: {
+    colors: {
+        white: string;
+        akoya: string;
+        selago: string;
+        mercury: string;
+        pavement: string;
+        dolphin: string;
+        gunpowder: string;
+        storm: string;
+        cinder: string;
+        black: string;
+        grey30: string;
+        doveGrey: string;
+        bombay: string;
+        alto: string;
+        red: string;
+        watermelon: string;
+        orange: string;
+        yellow: string;
+        gold: string;
+        green: string;
+        pastelGreen: string;
+        emerald: string;
+        teal: string;
+        blue: string;
+        lavender: string;
+        havelockBlue: string;
+        calmingBlue: string;
+        sinbad: string;
+        cranberry: string;
+        viking: string;
+        mediumPurple: string;
+        vista: string;
+        saturatedRed: string;
+        saturatedOrange: string;
+        saturatedYellow: string;
+        saturatedBlue: string;
+        saturatedGreen: string;
+        saturatedLavender: string;
+        saturatedTeal: string;
+        arsenic: string;
+    };
+    borders: {
+        primary: string;
+        popover: string;
+    };
+    zIndex: {
+        modal: number;
+        popover: number;
+        snackbar: number;
+    };
+    DARKEN_MOST: number;
+    DARKEN_LEAST: number;
+};
+export { AnchorCopy, AnchorCopyProps, BoundingBoxes, BoundingBoxesProps, BoundingBoxItemProp, BreadcrumbHeader, BreadcrumbProps, RouteProp, Breadcrumb, BreadcrumbHeaderProps, Button, ButtonProps$0 as ButtonProps, Card, CardProps, Checkbox, CheckboxProps, CheckboxGroup, CheckboxGroupProps, CheckboxGroupOption, Collapsible, CollapsibleProps, CopyButton, CopyButtonProps, Drawer, DrawerProps, Filter, getApiQueryUrl, getApiPostBody, parseInitialFilterValues, getCurrentBrowserQueryParams, getFilterBrowserQueryParams, FILTER_MODE_OPTIONS, USER_JSON_QUERY_PARAM, getDefaultValue, getDefaultJsonViewValue, getFilterAppliedCount, getUrlFromList, areSetsEqual, convertToFilterDropdownOptions, useFilter, FilterRenderProps, FilterPostBody, FilterModule, FilterSet, FilterValues, FilterHooks, FilterMap, FilterSectionHeaderProps, FilterMode, Location, UrlParameters, UpdateHistory, ContextSwitchMenuValue, ContextSwitchMenuProps, FilterBarProps, FilterJSONConfirmationModalProps, FilterJSONInputProps, FilterComponentProps, FilterContainerProps, AdditionalJSONFilterOptions, DoubleMultiSelectData, DoubleMultiSelectOptions, DoubleMultiSelectValues, DoubleMultiSelectFilterProps, DoubleMultiSelectFilterOptions, ListFilterOverrides, MultiSelectFilterProps, MultiSelectFilterOptions, RadioFilterProps, RadioFilterOptions, SingleSelectFilterProps, SingleSelectFilterOptions, TextFilterOverrides, AdditionalJSONFilter, DoubleMultiSelectFilter, ListFilter, MultiSelectFilter, RadioFilter, SingleSelectFilter, TextFilter, DurationFilter, MinMaxFilter, MinMaxInput, Header, IconButton, Input, InputProps, ItemGrid, ItemGridProps, ItemResults, ItemResultsProps, Loading, LoadingProps, MaskableImage, MaskableImageProps, ImageTagProps, Modal, ConfirmationModal, ConfirmationModalProps, ModalProps, ModeSelector, ModeSelectorProps, ModeSelectorLegendRowProps, Page, PageProps, PlaybackBar, PlaybackBarProps, HighlightsProp, usePopover, UsePopoverProps, PortalStyles, PopoverContent, ProgressBar, ProgressBarProps, CircularProgress, CircularProgressProps, DeviceProgressBar, DeviceProgressProps, DeviceProgressBarThreshold, PropertyList, Property, PropertyListProps, PropertyListVariable, RadioGroup, RadioGroupProps, RefreshToolbar, RefreshToolbarProps, Select, SelectProps, SELECT_OVERLAY_STYLES, SelectOverlayStyles, SelectPopover, SelectPopoverProps, SelectPopoverOption, Snackbar, SnackbarProps, MESSAGE_TYPES as SNACKBAR_MESSAGE_TYPES, SpeedInput, SpeedInputProps, SpeedInputVehicleSpeed, SpeedInputVehicleSpeedMode, StackBanner, StackBannerProps, StackBannerRow, StackBannerRowProps, StatusTable, StatusCard, StatusCardProps, StatusCellBadge, StatusCellBadgeProps, StatusRow, StatusRowProps, Status, StatusTableProps, StatusTableHeader, useStatusTable, StatusTableHooks, StatusTableOptions, filterData, getCompareFormat, mapTableFilters, sortData, SortOptions, sortByField, StepFunctionGraph, StepFunctionGraphProps, Table, TableProps, TableSortByOptions, Tabs, TabProps, TextArea, TextAreaProps, Toggle, ToggleProps, TransferList, ListItem, TransferListProps, TypeaheadSearch, TypeaheadSearchResultProps, TypeaheadSearchProps, TypeaheadResultItem, LAKEFRONT_COLORS as colors, THEME as theme, SelectOption, TabDef };