@indico-data/design-system 2.43.1 → 2.44.0

package/lib/index.d.ts

@@ -1,890 +1,15 @@
-import { IconDefinition, IconName as IconName$2 } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
+import React$1, { MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as styled_components from 'styled-components';
-import React$1, { ChangeEvent, MouseEventHandler, ReactElement } from 'react';
-import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1, SemanticColor as SemanticColor$1 } from '@/types';
-import { AriaButtonProps } from '@react-types/button';
-import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
-import { Props as Props$q } from 'react-select';
+import { Props as Props$8 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
 
-declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
-
-declare const animation: {
-    readonly duration: "200ms";
-    readonly timing: "ease";
-};
-
-declare const breakpoints: {
-    readonly mediumScreen: "600px";
-    readonly largeScreen: "900px";
-    readonly maxScreen: "1300px";
-};
-declare const mediaQueries: {
-    mediumScreen: string;
-    largeScreen: string;
-    maxScreen: string;
-};
-
-declare const typography: {
-    fontFamily: {
-        base: string;
-        heading: string;
-    };
-    fontSize: {
-        readonly caption: "12px";
-        readonly base: "14px";
-        readonly subheadSmall: "16px";
-        readonly subheadLarge: "18px";
-        readonly subheadXl: "22px";
-        readonly display: "30px";
-    };
-    lineHeight: {
-        readonly base: 1.25;
-        readonly heading: 1.2;
-    };
-    spacing: {
-        base: string;
-        half: string;
-        quarter: string;
-        third: string;
-    };
-    ellipsis: styled_components.RuleSet<object>;
-    weight: {
-        light: number;
-        regular: number;
-        semibold: number;
-        bold: number;
-    };
-};
-
-declare const padding: {
-    readonly sm: "15px";
-    readonly md: "20px";
-};
-
-declare const spacings: {
-    readonly xs: "8px";
-    readonly sm: "12px";
-    readonly md: "24px";
-};
-
-declare const margin: {
-    readonly sm: "15px";
-    readonly md: "20px";
-};
-
-declare function decimalAdjust(type: any, value: any, exp: any): any;
-declare function round10(value: any, exp: any): any;
-declare function clamp(value: any, min: any, max: any): any;
-declare function numberWithCommas$1(x: any): any;
-declare namespace MATH {
-    export { decimalAdjust };
-    export { round10 };
-    export { clamp };
-    export { numberWithCommas$1 as numberWithCommas };
-}
-
-declare const allColors: {
-    readonly akaroa: "#cbc98f";
-    readonly alizarin: "#E72326";
-    readonly amber: "#f4c401";
-    readonly amethyst: "#8e57b3";
-    readonly aqua: "#10e4fe";
-    readonly astralBlue: "#2f7ca2";
-    readonly ateneoBlue: "#0d466a";
-    readonly avocado: "#81b12f";
-    readonly azure: "#108cf7";
-    readonly baliHai: "#8498b6";
-    readonly black: "#000";
-    readonly blueBayoux: "#4f5e74";
-    readonly blueDarknut: "#0070f5";
-    readonly blueMagenta: "#542f9d";
-    readonly blueRibbon: "#0b35ff";
-    readonly blueYonder: "#586fd2";
-    readonly bouqet: "#a35c9a";
-    readonly brick: "#c62828";
-    readonly brightDusk: "#efebf7";
-    readonly britishShorthair: "#4b94eb";
-    readonly brown: "#785349";
-    readonly candyCorn: "#fcef4d";
-    readonly carnation: "#ff8adf";
-    readonly carrot: "#f29a2d";
-    readonly cerise: "#d52a96";
-    readonly cerulean: "#008b9e";
-    readonly chantilly: "#f7b0eb";
-    readonly charcoal: "#474b4b";
-    readonly chartreuse: "#34ff01";
-    readonly clay: "#283243";
-    readonly clementine: "#F16E00";
-    readonly cocoaBean: "#5c1200";
-    readonly comet: "#5a6982";
-    readonly cornflower: "#2060ff";
-    readonly crimson: "#e53126";
-    readonly curiousBlue: "#178ee0";
-    readonly cyan: "#0cf";
-    readonly daisyBush: "#431B92";
-    readonly darkFontColor: "#0d151d";
-    readonly darkGray: "#333";
-    readonly darkPurple: "#6f3eae";
-    readonly darkRed: "#b30000";
-    readonly defaultFontColor: "#bbbfc5";
-    readonly dodgerBlue: "#1774ff";
-    readonly dusty: "#999999";
-    readonly eagleGreen: "#005557";
-    readonly ebony: "#101a26";
-    readonly eggplant: "#7a0074";
-    readonly electricGreen: "#00ff0a";
-    readonly emerald: "#09c199";
-    readonly endeavor: "#0055B9";
-    readonly espresso: "#5a3627";
-    readonly fieldPromptError: "#fd9693";
-    readonly fieldPromptInfo: "#00bfff";
-    readonly flamingo: "#f861b6";
-    readonly flirt: "#910870";
-    readonly forestGreen: "#1f7f1f";
-    readonly frostedOver: "#DCEAFD";
-    readonly geraldine: "#fe9486";
-    readonly grannysmith: "#92e959";
-    readonly green: "#4caf50";
-    readonly harlequin: "#20cb00";
-    readonly harvestGold: "#e6c079";
-    readonly hawkes: "#DCEAFD";
-    readonly hemlock: "#626740";
-    readonly imperial: "#4b0134";
-    readonly iron: "#d9dee0";
-    readonly japaneseIndigo: "#264359";
-    readonly juniper: "#6d9292";
-    readonly khaki: "#bba44b";
-    readonly koamaru: "#2f346a";
-    readonly korma: "#90370e";
-    readonly lavender: "#B086E3";
-    readonly lavenderRose: "#fb9fda";
-    readonly lightGray: "#eee";
-    readonly lightPurple: "#b43be4";
-    readonly lilac: "#a195d4";
-    readonly lincolnGreen: "#254600";
-    readonly magenta: "#ff15e0";
-    readonly malibu: "#68C2FB";
-    readonly mantis: "#4fa83d";
-    readonly maroon: "#ad3349";
-    readonly mauve: "#e06cfb";
-    readonly mediumGray: "#999";
-    readonly midFontColor: "#8593b3";
-    readonly mint: "#3ac999";
-    readonly mirage: "#182432";
-    readonly mulberry: "#5c0536";
-    readonly olive: "#807300";
-    readonly orange: "#ff7200";
-    readonly orchid: "#ab00ff";
-    readonly oxfordBlue: "#384558";
-    readonly pacific: "#00b5b6";
-    readonly palm: "#1aa511";
-    readonly persian: "#1717cf";
-    readonly persianLight: "#0327ce";
-    readonly pine: "#017074";
-    readonly pink: "#f74f8a";
-    readonly pistachio: "#aac609";
-    readonly raspberry: "#990030";
-    readonly red: "#f95359";
-    readonly robinsEggBlue: "#00bcd4";
-    readonly romanSilver: "#7d888d";
-    readonly sagatPurple: "#6833d0";
-    readonly salem: "#03832e";
-    readonly sapGreen: "#5f7e20";
-    readonly seaGreen: "#0b8a51";
-    readonly seance: "#7f1f82";
-    readonly shiraz: "#c61021";
-    readonly silverChalice: "#aaaaaa";
-    readonly sinopia: "#D14200";
-    readonly slaaneshGrey: "#dbd5e6";
-    readonly tangerine: "#ff9900";
-    readonly teal: "#008285";
-    readonly toast: "#997862";
-    readonly trueBlue: "#066CC6";
-    readonly tundora: "#444444";
-    readonly turquoise: "#00b5b6";
-    readonly vermilion: "#b95555";
-    readonly viking: "#59cfe0";
-    readonly violet: "#3e4eb8";
-    readonly violetBlue: "#8060d2";
-    readonly walnut: "#783f00";
-    readonly white: "#fff";
-    readonly windsorTan: "#b35c00";
-    readonly yellow: "#ffca28";
-    readonly zucchini: "#016422";
-    readonly hiliteFontColor: "#fff";
-    readonly lightFontColor: "#eee";
-    readonly borderColor: "#eee";
-    readonly actionColor: "#8593b3";
-    readonly backgroundColor: "#182432";
-};
-
-type Props$p = PermafrostComponent$1 & {
-    content: React$1.ReactNode;
-    header?: React$1.ReactNode | string;
-    open?: boolean;
-};
-declare const Accordion: (props: Props$p) => react_jsx_runtime.JSX.Element;
-
-type Props$o = PermafrostComponent$1 & {
-    style?: object;
-    children: React$1.ReactNode;
-};
-declare const Section: (props: Props$o) => react_jsx_runtime.JSX.Element;
-
-type Props$n = PermafrostComponent$1 & {
-    title?: string;
-    style?: object;
-    children: React$1.ReactNode;
-};
-declare const SectionBlock: (props: Props$n) => react_jsx_runtime.JSX.Element;
-
-type SectionBodyProps = PermafrostComponent$1 & {
-    style?: object;
-    children: React$1.ReactNode;
-};
-declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
-
-type Props$m = PermafrostComponent$1 & {
-    style?: object;
-    children?: React$1.ReactNode;
-};
-declare const SectionHeader: (props: Props$m) => react_jsx_runtime.JSX.Element;
-
-declare const SectionTable: (props: any) => react_jsx_runtime.JSX.Element;
-
-type ButtonVariant = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
-type ButtonProps$1 = PermafrostComponent$1 & {
-    'aria-label'?: string;
-    'aria-pressed'?: boolean;
-    'aria-selected'?: boolean;
-    busy?: boolean;
-    children: React$1.ReactNode | React$1.ReactNode[];
-    disabled?: boolean;
-    onClick: (...args: any[]) => void;
-    onFocus?: () => void;
-    role?: string;
-    style?: React$1.CSSProperties;
-    tabindex?: 0 | -1;
-    type?: 'submit' | 'button' | 'reset';
-    variant?: ButtonVariant;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-};
-declare function Button$1(props: ButtonProps$1): React$1.ReactElement;
-
-type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
-type ButtonSize = 'normal' | 'large';
-
-type Props$l = PermafrostComponent$1 & {
-    /**
-     * Adjusts vertical alignment of the text label, in relation to the icon
-     */
-    adjustAlignment?: number;
-    busy?: boolean;
-    iconName: IconName$1;
-    iconSide?: 'start' | 'end';
-    isDisabled?: boolean;
-    /**
-     * If element will be an `<a>`, the href URL
-     */
-    isLink?: string;
-    label?: string;
-    size?: ButtonSize;
-    style?: React$1.CSSProperties;
-    variant?: IconButtonVariant;
-} & AriaButtonProps;
-/**
- * General utility “button with an icon” component. May also be used for links that _look_
- * like buttons, via the `isLink` property.
- *
- * The button handler must be passed in via the `onPress` property (replaces `onClick`).
- *
- * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
- */
-declare function IconButton(props: Props$l): react_jsx_runtime.JSX.Element;
-
-type Props$k = PermafrostComponent$1 & {
-    defaultValue?: string;
-    disabled?: boolean;
-    horizontal?: boolean;
-    initialText?: string;
-    label?: string;
-    onChange(e: React$1.ChangeEvent<HTMLSelectElement>): void;
-    options: {
-        name: string;
-        value: string | number;
-    }[];
-    style?: object;
-    value?: string | number;
-    validationErrors?: string[];
-};
-declare const BorderSelect: (props: Props$k) => react_jsx_runtime.JSX.Element;
-
-type ComboboxProps = {
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    className?: string;
-    closeMenuOnSelect?: boolean;
-    /**
-     * Function to generate a custom React component for every available list `Option`
-     * @see {@link https://react-select.com/props#option}
-     */
-    customOption?: (props: any) => JSX.Element;
-    /**
-     * Customize the text to appear in selected items.
-     *
-     * @example (option) => `${option.value}`
-     */
-    customOptionLabel?(option: any): string;
-    /**
-     * Customize the value for the Combobox to use. Defaults to `value`
-     *
-     * @example (option) => `${option.id}`
-     */
-    customOptionValue?(option: any): string;
-    defaultValue?: any[];
-    disabled?: boolean;
-    loading?: boolean;
-    menuIsOpen?: boolean;
-    /**
-     * Custom text to show if there are no more items available to select
-     */
-    noOptionsMessage?: string;
-    /**
-     * Combobox defaults to expect { label: string; value: string; } at minimum - use `customOptionLabel` and `customOptionValue` props to change
-     */
-    options: ComboboxOption[];
-    /**
-     * Input placeholder text
-     */
-    placeholder?: string;
-};
-type ComboboxOption = {
-    label?: string;
-    [key: string]: any;
-};
-type ComboboxSize = 'small' | 'medium';
-type ComboboxVariant = 'default' | 'light';
-
-type Props$j = PermafrostComponent$1 & {
-    disabled?: boolean;
-    initialText?: string;
-    options: {
-        name: string;
-        value: string | number;
-    }[];
-    size?: ComboboxSize;
-    style?: object;
-    value?: string | number;
-    variant?: ComboboxVariant;
-    onChange(e: React$1.ChangeEvent<HTMLSelectElement>): void;
-    onClick?(e: React$1.MouseEvent<HTMLDivElement, MouseEvent>): void;
-};
-declare const Select$1: (props: Props$j) => react_jsx_runtime.JSX.Element;
-
-/**
- * Multiselect combobox component. If selections are not bound to outside state
- * via the `value` prop, you will need to import and use the `useCombobox` hook
- * in order to clear its selected value .
- *
- * @see [useCombobox]{@link import('useCombobox').useCombobox}
- */
-declare const MultiCombobox: React$1.ForwardRefExoticComponent<PermafrostComponent$1 & ComboboxProps & {
-    /**
-     * MultiValue is a selected option in the input area
-     */
-    multiValueProps?: {
-        "data-cy": string;
-    };
-    optionProps?: {
-        "data-cy": string;
-    };
-    values?: ComboboxOption[];
-    onChange: (selectedOption: ComboboxOption[]) => void;
-} & React$1.RefAttributes<unknown>>;
-
-/**
- * Combobox component to select a single option. If selections are not bound to
- * outside state via the `value` prop, you will need to import and use the
- * `useCombobox` hook in order to clear its selected value.
- *
- * @see [useCombobox]{@link import('useCombobox').useCombobox}
- */
-declare const SingleCombobox: React$1.ForwardRefExoticComponent<PermafrostComponent$1 & ComboboxProps & {
-    dropdownIndicatorProps?: {
-        "data-cy": string;
-    };
-    optionProps?: {
-        "data-cy": string;
-    };
-    value?: ComboboxOption;
-    onChange: (selectedOption: ComboboxOption) => void;
-} & React$1.RefAttributes<unknown>>;
-
-type Props$i = PermafrostComponent$1 & {
-    children: React$1.ReactNode | string;
-    minLength?: number;
-    onUpdate?(newValue: string): void;
-};
-/**
- * Wrapper component which enables text editing in place directly on a child component,
- * element, or plain text.
- */
-declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
-
-type Props$h = PermafrostComponent$1 & {
-    autoFocus?: boolean;
-    decrement?(): void;
-    disabled?: boolean;
-    hiddenLabel?: boolean;
-    increment?(): void;
-    label: string;
-    max?: number;
-    min?: number;
-    onChange(value: number | ''): void;
-    placeholder?: string;
-    required?: boolean;
-    step?: string;
-    tabIndex?: number;
-    value: number | '';
-};
-/**
- * Basic numeric input field. A label is required, but may be visually hidden
- * using the `hiddenLabel` property.
- */
-declare function NumberInput(props: Props$h): React$1.ReactElement;
-
-type Props$g = PermafrostComponent$1 & {
-    inputBorder?: boolean;
-    showClearInputIcon?: boolean;
-    showSearchIcon?: boolean;
-    inputProps?: {
-        [key: string]: string;
-    };
-    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
-    onClear?(): void;
-    onKeyUp?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
-    placeholder?: string;
-    value?: string;
-};
-declare const SearchInput: (props: Props$g) => react_jsx_runtime.JSX.Element;
-
-type Props$f = PermafrostComponent$1 & {
-    autoComplete?: 'email' | 'current-password' | 'new-password' | string;
-    autoFocus?: boolean;
-    defaultValue?: string;
-    disabled?: boolean;
-    displayErrors?: boolean;
-    inputProps?: any;
-    label?: string;
-    maxLength?: number;
-    name?: string;
-    onBlur?(): void;
-    onChange?(event: ChangeEvent<HTMLInputElement>): void;
-    onFocus?(): void;
-    placeholder?: string;
-    promptProps?: any;
-    required?: boolean;
-    type?: 'text' | 'email' | 'password' | string;
-    validationErrors?: string[];
-    value?: string;
-    readOnly?: boolean;
-};
-declare function TextInput(props: Props$f): React$1.ReactElement;
-
-type Props$e = {
-    ['aria-label']: string;
-    children?: React$1.ReactNode;
-    hideFocusRing: boolean;
-    color: string;
-    labelColor: string;
-    hoverAndSelectedColor: string;
-    focusRingColor: string;
-    value: string;
-} & RadioGroupProps$1 & PermafrostComponent$1;
-/**
- * Renders a group of radio buttons.
- *
- * A group label must be included: either pass a string or markup into the
- * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
- */
-declare function RadioGroup$1({ children, ...props }: Props$e): react_jsx_runtime.JSX.Element;
-/**
- * A single radio button and its label.
- */
-declare function Radio$2({ children, ...props }: AriaRadioProps): react_jsx_runtime.JSX.Element;
-
-type RadioGroupProps = PermafrostComponent$1 & {
-    value?: string;
-    onChange?: (value: string) => void;
-    children: React$1.ReactNode;
-    className?: string;
-} & AriaRadioGroupProps;
-/**
- * Renders a group of radio buttons with no styling. This component is not
- * designed to be user-facing, and should only be used to provide functionality.
- *
- * A group label must be included: either pass a string or markup into the
- * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
- */
-declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
-/**
- * A single radio button and its label; no styling is applied, and the native
- * radio button is visually hidden.
- */
-declare function Radio$1(props: AriaRadioProps & {
-    className?: string;
-    isVisuallySelected?: (selectedValue: string) => void;
-}): react_jsx_runtime.JSX.Element;
-
-type Props$d = PermafrostComponent$1 & {
-    ariaLabel?: string;
-    size?: IconSizes$1;
-    style?: React$1.CSSProperties;
-    fill?: string;
-};
-declare function CircleSpinner(props: Props$d): React$1.ReactElement;
-
-type Props$c = PermafrostComponent$1 & {
-    width?: string;
-};
-declare function BarSpinner(props: Props$c): React$1.ReactElement;
-
-type Props$b = PermafrostComponent$1 & {
-    color?: string;
-    overallSize?: string | number;
-    rippleSize?: string | number;
-    showRandomMessage?: boolean;
-};
-declare function CirclePulse(props: Props$b): React$1.ReactElement;
-
-declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
-
-type Props$a = PermafrostComponent$1 & {
-    backgroundColor?: string;
-    foregroundColor?: string;
-    ringRadius?: number;
-    strokeWidth?: number;
-    /** an integer between 0 and 1 */
-    value: number;
-    valueFontSize?: number;
-};
-declare function PercentageRing(props: Props$a): react_jsx_runtime.JSX.Element;
-
-declare const LoadingList: () => react_jsx_runtime.JSX.Element;
-
-type Props$9 = PermafrostComponent$1 & {
-    accordion?: boolean;
-    accordionDefaultOpen?: boolean;
-    emptyListMessage?: string;
-    error?: any;
-    errorMessage?: any;
-    headerComponent?: React$1.ReactNode;
-    listHeader: React$1.ReactNode;
-    listItems: React$1.ReactNode[];
-    loading?: any;
-    pagination?: {
-        currentPage: number;
-        limit: number;
-        pageInfo: {
-            startCursor: number;
-            endCursor: number;
-            hasNextPage: boolean;
-            aggregateCount: number;
-        };
-        getNextPage: (before: number) => void;
-        getPage: (after: number, pageOffset: number) => void;
-        getPreviousPage: (after: number) => void;
-    };
-    sortBy?: {
-        descending: boolean;
-        items: {
-            name: string;
-            value: string;
-        }[];
-        value: string;
-        onSort: (value: string) => void;
-        updateDescending: () => void;
-    };
-    subTitle?: string | React$1.ReactNode;
-    title: string;
-    totalCount?: number;
-};
-declare const ListTable: (props: Props$9) => react_jsx_runtime.JSX.Element;
-
-type Props$8 = PermafrostComponent$1 & {
-    currentPage: number;
-    limit: number;
-    pageInfo: {
-        aggregateCount: number;
-        endCursor: number;
-        hasNextPage: boolean;
-        startCursor: number;
-    };
-    quantity: number;
-    skip?: number;
-    getPage(startCursor: number, endCursor: number): void;
-    getNextPage(cursor: number): void;
-    getPreviousPage(cursor: number): void;
-};
-declare function Pagination(props: Props$8): react_jsx_runtime.JSX.Element;
-
-type Props$7 = PermafrostComponent$1 & {
-    actionLink?: string;
-    actionText?: string;
-    buttonAction?(): void;
-    buttonText?: string;
-    message?: string | React$1.ReactNode;
-    messageProps?: {
-        'data-cy': string;
-    };
-};
-declare function Shrug(props: Props$7): React$1.ReactElement;
-
-type ModalBaseProps = PermafrostComponent$1 & {
-    children: React$1.ReactNode | React$1.ReactNode[];
-    clickToDismiss?(): void;
-    describedBy?: string;
-    node?: string;
-    open: boolean;
-    preventEscDismiss?: boolean;
-    preventReturnFocus?: boolean;
-    maxWidth?: string;
-} & ({
-    labelElement: string;
-} | {
-    labelText: string;
-});
-/**
- * Base modal component, powered by [react-modal](http://reactcommunity.org/react-modal/#usage)
- *
- * (Also see `ModalAdapter` in the styles file)
- *
- * Accessible element label must be included either as a string passed to `labelText`, or
- * the id of one of the children passed to `labelElement`. If a description is available,
- * pass that element’s id to the `describedBy` prop.
- */
-declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
-
-type Props$6 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
-    describedBy?: string;
-    clickOutsideHandler(e?: React$1.SyntheticEvent): void;
-    confirmText?: string;
-    message?: string | React$1.ReactNode;
-    modalNode?: string;
-    processing?: boolean;
-    rejectText?: string;
-    responseHandler(response: boolean, event: React$1.SyntheticEvent): void;
-    title?: string | React$1.ReactNode;
-    width?: number;
-};
-declare function ConfirmModal(props: Props$6): react_jsx_runtime.JSX.Element;
-
-type Props$5 = {
-    children: React$1.ReactNode | React$1.ReactNode[];
-    className?: string;
-    isLoading?: boolean;
-    style?: React$1.CSSProperties;
-};
-/**
- * A functional container for content that is yet to load or will change; displays a loading indicator and announces
- * to Assistive Technology as needed.
- *
- * todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
- */
-declare function LoadingAwareContainer(props: Props$5): React$1.ReactElement;
-
-interface TextTruncateProps {
-    string: string;
-    maxChars: number;
-    children?: any;
-    noTitle?: boolean;
-}
-declare function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps): react_jsx_runtime.JSX.Element;
-
-type Props$4 = {
-    disabled: boolean;
-    onChange: any;
-    value: boolean;
-    ['aria-label']?: string;
-    iconSize?: IconSizes$1;
-    checkedIconName?: IconName$1;
-    notCheckedIconName?: IconName$1;
-} & PermafrostComponent$1;
-declare const Toggle$1: (props: Props$4) => react_jsx_runtime.JSX.Element;
-
-type Props$3 = PermafrostComponent$1 & {
-    questionMark?: boolean;
-    for?: string | null;
-    place?: string;
-    clickToShow?: boolean;
-    delayShow?: number;
-    delayHide?: number;
-    questionMarkClassName?: string;
-    children: React$1.ReactNode;
-    block?: boolean;
-};
-declare const Tooltip: (props: Props$3) => react_jsx_runtime.JSX.Element;
-
-declare const mix: (color_1: string, color_2: string, weight: number) => string;
-declare const shade: (color: string, percentage: number) => string;
-declare const tint: (color: string, percentage: number) => string;
-/**
- * Converts hex color values to rgb or rgba values if a opacity is supplied
- * @param hex
- * @returns {*}
- */
-declare const hexToRgb: (hex: string, opacity?: number) => string | undefined;
-/**
- * Takes a 3- or 6-character hex color value, and returns an object containing
- * its equivalent HSL values.
- *
- * @see {@link https://css-tricks.com/converting-color-spaces-in-javascript/}
- * @see {@link https://gist.github.com/mjackson/5311256}
- */
-declare function hexToHsl(hexColor: string): {
-    hue: number;
-    saturation: number;
-    lightness: number;
-};
-
-declare const color_hexToHsl: typeof hexToHsl;
-declare const color_hexToRgb: typeof hexToRgb;
-declare const color_mix: typeof mix;
-declare const color_shade: typeof shade;
-declare const color_tint: typeof tint;
-declare namespace color {
-  export { color_hexToHsl as hexToHsl, color_hexToRgb as hexToRgb, color_mix as mix, color_shade as shade, color_tint as tint };
-}
-
-declare const camelCaseToUpperUnderscore: (string: string) => string;
-declare const camelCaseToSpaceUpper: (string: string) => string;
-declare const underscoreToCapitalize: (string: string) => string;
-declare const snakeCaseToCamelCase: (string: string) => string;
-declare function capitalize(string: string): string;
-declare function capitalizeFirstOnly(string: string): string;
-/**
- * Generates a random string of English alphabet characters. Defaults to a length of 8.
- */
-declare function createRandomString(length?: number): string;
-declare const maxLengthWithEllipse: (string: string, maxLength: number) => string;
-declare const maxLengthWithMiddleEllipsis: (string: string, maxLength: number) => string;
-
-declare const string_camelCaseToSpaceUpper: typeof camelCaseToSpaceUpper;
-declare const string_camelCaseToUpperUnderscore: typeof camelCaseToUpperUnderscore;
-declare const string_capitalize: typeof capitalize;
-declare const string_capitalizeFirstOnly: typeof capitalizeFirstOnly;
-declare const string_createRandomString: typeof createRandomString;
-declare const string_maxLengthWithEllipse: typeof maxLengthWithEllipse;
-declare const string_maxLengthWithMiddleEllipsis: typeof maxLengthWithMiddleEllipsis;
-declare const string_snakeCaseToCamelCase: typeof snakeCaseToCamelCase;
-declare const string_underscoreToCapitalize: typeof underscoreToCapitalize;
-declare namespace string {
-  export { string_camelCaseToSpaceUpper as camelCaseToSpaceUpper, string_camelCaseToUpperUnderscore as camelCaseToUpperUnderscore, string_capitalize as capitalize, string_capitalizeFirstOnly as capitalizeFirstOnly, string_createRandomString as createRandomString, string_maxLengthWithEllipse as maxLengthWithEllipse, string_maxLengthWithMiddleEllipsis as maxLengthWithMiddleEllipsis, string_snakeCaseToCamelCase as snakeCaseToCamelCase, string_underscoreToCapitalize as underscoreToCapitalize };
-}
-
-/**
- * Takes a number and formats it nicely.
- *
- * @example numberWithCommas(12345)
- * // returns 12,345
- */
-declare function numberWithCommas(value: number): string;
-/**
- * Takes a number and returns it, rounded up to the maximum decimal places specified.
- *
- * @example maxDecimalPlaces(0.1694915254237288, 2)
- * // returns 0.17
- *
- * @example maxDecimalPlaces(0.1694915254237288, 3)
- * // returns 0.169
- *
- * @example maxDecimalPlaces(12.902, 2)
- * // returns 12.9
- */
-declare function maxDecimalPlaces(value: number, decimalPlaces: number): number;
-declare function formatConfidence(confidence: number): number;
-
-declare const number_formatConfidence: typeof formatConfidence;
-declare const number_maxDecimalPlaces: typeof maxDecimalPlaces;
-declare const number_numberWithCommas: typeof numberWithCommas;
-declare namespace number {
-  export { number_formatConfidence as formatConfidence, number_maxDecimalPlaces as maxDecimalPlaces, number_numberWithCommas as numberWithCommas };
-}
-
-declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
-
-declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.Element;
-
-declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
-
-type ButtonVariants = 'solid' | 'outline' | 'text';
-type ButtonIconPositions = 'left' | 'right';
-type ButtonSizes = 'sm' | 'md' | 'lg';
-type ButtonTypes = 'button' | 'submit' | 'reset';
-interface ButtonProps {
-    className?: string;
-    ariaLabel: string;
-    children?: React.ReactNode | React.ReactNode[];
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-    isLoading?: boolean;
-    onClick?: (...args: any[]) => void;
-    variant?: ButtonVariants;
-    iconPosition?: ButtonIconPositions;
-    color?: SemanticColor$1;
-    size?: ButtonSizes;
-    iconName?: IconName$1;
-    type?: ButtonTypes;
-    href?: string;
-    isDisabled?: boolean;
-}
-
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-type SelectOption = {
-    label: string;
-    value: string;
-    detail?: string;
-    [key: string]: any;
-};
-
-type Direction = `${Direction$1}`;
-type Alignment = `${Alignment$1}`;
-type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    direction?: Direction;
-    subHeaderAlign?: Alignment;
-    isFullHeight?: boolean;
-};
-
-type PillSize = 'sm' | 'md' | 'lg';
-type PillColor = SemanticColor | 'neutral';
-interface PillProps {
-    children: React$1.ReactNode | React$1.ReactNode[];
-    color?: PillColor;
-    size?: PillSize;
-    className?: string;
-}
-
-type PermafrostComponent = {
-    id?: string;
-    className?: string;
-    'data-cy'?: string;
-    'data-testid'?: string;
-};
-type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
-
 declare const indicons: {
     'indico-o-white': react_jsx_runtime.JSX.Element;
     account: react_jsx_runtime.JSX.Element;
@@ -1042,7 +167,7 @@ declare const indicons: {
 
 type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IndiconName = keyof typeof indicons;
-type IconName = IndiconName | `fa-${IconName$2}`;
+type IconName = IndiconName | `fa-${IconName$1}`;
 type IconProps = PermafrostComponent & {
     name: IconName;
     ariaLabel?: string;
@@ -1051,6 +176,144 @@ type IconProps = PermafrostComponent & {
     onClick?: MouseEventHandler<SVGElement>;
 };
 
+type SelectOption = {
+    label: string;
+    value: string;
+    detail?: string;
+    [key: string]: any;
+};
+
+type Direction = `${Direction$1}`;
+type Alignment = `${Alignment$1}`;
+type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    direction?: Direction;
+    subHeaderAlign?: Alignment;
+    isFullHeight?: boolean;
+};
+
+type PillSize = 'sm' | 'md' | 'lg';
+type PillColor = SemanticColor | 'neutral';
+interface PillProps {
+    children: React$1.ReactNode | React$1.ReactNode[];
+    color?: PillColor;
+    size?: PillSize;
+    className?: string;
+}
+
+type PermafrostComponent = {
+    id?: string;
+    className?: string;
+    'data-cy'?: string;
+    'data-testid'?: string;
+};
+
+type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+
+type Props$7 = PermafrostComponent & {
+    ariaLabel?: string;
+    size?: IconSizes;
+    style?: React$1.CSSProperties;
+    fill?: string;
+};
+declare function CircleSpinner(props: Props$7): React$1.ReactElement;
+
+type Props$6 = PermafrostComponent & {
+    width?: string;
+};
+declare function BarSpinner(props: Props$6): React$1.ReactElement;
+
+type Props$5 = PermafrostComponent & {
+    color?: string;
+    overallSize?: string | number;
+    rippleSize?: string | number;
+    showRandomMessage?: boolean;
+};
+declare function CirclePulse(props: Props$5): React$1.ReactElement;
+
+type ModalBaseProps = PermafrostComponent & {
+    children: React$1.ReactNode | React$1.ReactNode[];
+    clickToDismiss?(): void;
+    describedBy?: string;
+    node?: string;
+    open: boolean;
+    preventEscDismiss?: boolean;
+    preventReturnFocus?: boolean;
+    maxWidth?: string;
+} & ({
+    labelElement: string;
+} | {
+    labelText: string;
+});
+/**
+ * Base modal component, powered by [react-modal](http://reactcommunity.org/react-modal/#usage)
+ *
+ * (Also see `ModalAdapter` in the styles file)
+ *
+ * Accessible element label must be included either as a string passed to `labelText`, or
+ * the id of one of the children passed to `labelElement`. If a description is available,
+ * pass that element’s id to the `describedBy` prop.
+ */
+declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
+
+type Props$4 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
+    describedBy?: string;
+    clickOutsideHandler(e?: React$1.SyntheticEvent): void;
+    confirmText?: string;
+    message?: string | React$1.ReactNode;
+    modalNode?: string;
+    processing?: boolean;
+    rejectText?: string;
+    responseHandler(response: boolean, event: React$1.SyntheticEvent): void;
+    title?: string | React$1.ReactNode;
+    width?: number;
+};
+declare function ConfirmModal(props: Props$4): react_jsx_runtime.JSX.Element;
+
+type Props$3 = PermafrostComponent & {
+    questionMark?: boolean;
+    for?: string | null;
+    place?: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    questionMarkClassName?: string;
+    children: React$1.ReactNode;
+    block?: boolean;
+};
+declare const Tooltip: (props: Props$3) => react_jsx_runtime.JSX.Element;
+
+declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.Element;
+
+declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
+type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonTypes = 'button' | 'submit' | 'reset';
+interface ButtonProps {
+    className?: string;
+    ariaLabel: string;
+    children?: React.ReactNode | React.ReactNode[];
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    isLoading?: boolean;
+    onClick?: (...args: any[]) => void;
+    variant?: ButtonVariants;
+    isPill?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    size?: ButtonSizes;
+    type?: ButtonTypes;
+    href?: string;
+    isDisabled?: boolean;
+}
+
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
 declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
@@ -1073,7 +336,7 @@ interface BaseInputProps {
     onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
     errorMessage?: string | undefined;
     helpText?: string;
-    iconName?: IconName$1;
+    iconName?: IconName;
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
@@ -1155,7 +418,7 @@ interface PasswordInputProps extends LabelProps {
 }
 declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface SelectProps<OptionType extends SelectOption> extends Props$q<OptionType> {
+interface SelectProps<OptionType extends SelectOption> extends Props$8<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
@@ -1199,8 +462,8 @@ interface Props$2 {
     label?: string;
     onSelect?: (selected: Date | DateRange | undefined) => void;
     selected?: Date | DateRange | undefined;
-    triggerIcon: IconName$1;
-    triggerIconSize: IconSizes$1;
+    triggerIcon: IconName;
+    triggerIconSize: IconSizes;
     isOpen?: boolean;
     clearOnClose?: boolean;
     className?: string;
@@ -1223,7 +486,7 @@ interface SingleInputDatePickerProps {
     isOpen?: boolean;
     clearOnClose?: boolean;
     className?: string;
-    inputIconName?: IconName$1;
+    inputIconName?: IconName;
     isClearable?: boolean;
     inputPlaceholder?: string;
     errorMessage?: string | undefined;
@@ -1284,4 +547,4 @@ declare function Menu({ children }: MenuProps): react_jsx_runtime.JSX.Element;
 
 declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, FloatUI, Form, GlobalStyles, Icon, IconButton, IconTriggerDatePicker, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, SingleInputDatePicker, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, registerFontAwesomeIcons, string as stringUtils };
+export { BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, ModalBase, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };