@wistia/vhs 2.77.2-beta.badb476a.b497659 → 2.77.2-beta.f198e438.dc9f333

package/dist/index.d.mts

@@ -0,0 +1,3484 @@
+import * as styled_components from 'styled-components';
+import { css, DefaultTheme } from 'styled-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
+import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
+export { useFormikContext } from 'formik';
+import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
+export { DropdownMenuRadioGroup as MenuRadioGroup } from '@radix-ui/react-dropdown-menu';
+import { Descendant } from 'slate';
+import { ReactEditor } from 'slate-react';
+
+interface VHSTheme {
+    readonly breakpoint: {
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+    };
+    readonly color: {
+        readonly brandBlue100: string;
+        readonly brandBlue200: string;
+        readonly brandBlue300: string;
+        readonly brandBlue400: string;
+        readonly brandBlue500: string;
+        readonly brandBlue600: string;
+        readonly brandBlue700: string;
+        readonly brandBlue800: string;
+        readonly purple100: string;
+        readonly purple200: string;
+        readonly purple300: string;
+        readonly purple400: string;
+        readonly purple500: string;
+        readonly purple600: string;
+        readonly purple700: string;
+        readonly purple800: string;
+        readonly green100: string;
+        readonly green200: string;
+        readonly green300: string;
+        readonly green400: string;
+        readonly green500: string;
+        readonly green600: string;
+        readonly green700: string;
+        readonly green800: string;
+        readonly blue100: string;
+        readonly blue200: string;
+        readonly blue300: string;
+        readonly blue400: string;
+        readonly blue500: string;
+        readonly blue600: string;
+        readonly blue700: string;
+        readonly blue800: string;
+        readonly pink100: string;
+        readonly pink200: string;
+        readonly pink300: string;
+        readonly pink400: string;
+        readonly pink500: string;
+        readonly pink600: string;
+        readonly pink700: string;
+        readonly pink800: string;
+        readonly red100: string;
+        readonly red200: string;
+        readonly red300: string;
+        readonly red400: string;
+        readonly red500: string;
+        readonly red600: string;
+        readonly red700: string;
+        readonly red800: string;
+        readonly yellow100: string;
+        readonly yellow200: string;
+        readonly yellow300: string;
+        readonly yellow400: string;
+        readonly yellow500: string;
+        readonly yellow600: string;
+        readonly yellow700: string;
+        readonly yellow800: string;
+        readonly orange100: string;
+        readonly orange200: string;
+        readonly orange300: string;
+        readonly orange400: string;
+        readonly orange500: string;
+        readonly orange600: string;
+        readonly orange700: string;
+        readonly orange800: string;
+        readonly grey100: string;
+        readonly grey200: string;
+        readonly grey300: string;
+        readonly grey400: string;
+        readonly grey500: string;
+        readonly grey600: string;
+        readonly grey700: string;
+        readonly grey800: string;
+        readonly grey900: string;
+        readonly grey1000: string;
+        readonly grey1100: string;
+        readonly error100: string;
+        readonly error200: string;
+        readonly error300: string;
+        readonly error400: string;
+        readonly error500: string;
+        readonly error600: string;
+        readonly error700: string;
+        readonly error800: string;
+        readonly success100: string;
+        readonly success200: string;
+        readonly success300: string;
+        readonly success400: string;
+        readonly success500: string;
+        readonly success600: string;
+        readonly success700: string;
+        readonly success800: string;
+        readonly warning100: string;
+        readonly warning200: string;
+        readonly warning300: string;
+        readonly warning400: string;
+        readonly warning500: string;
+        readonly warning600: string;
+        readonly warning700: string;
+        readonly warning800: string;
+    };
+    readonly duration: {
+        readonly productive: {
+            readonly fast: string;
+            readonly moderate: string;
+            readonly slow: string;
+        };
+        readonly expressive: {
+            readonly fast: string;
+            readonly moderate: string;
+            readonly slow: string;
+        };
+    };
+    readonly easing: {
+        readonly standard: {
+            readonly productive: string;
+            readonly expressive: string;
+        };
+        readonly entrance: {
+            readonly productive: string;
+            readonly expressive: string;
+        };
+        readonly exit: {
+            readonly productive: string;
+            readonly expressive: string;
+        };
+    };
+    readonly font: {
+        readonly family: {
+            readonly default: string;
+            readonly monospace: string;
+        };
+        readonly size: {
+            readonly default: string;
+            readonly small: string;
+        };
+        readonly weight: {
+            readonly thin: number;
+            readonly extraLight: number;
+            readonly light: number;
+            readonly regular: number;
+            readonly medium: number;
+            readonly semiBold: number;
+            readonly bold: number;
+            readonly extraBold: number;
+        };
+    };
+    readonly shadow: {
+        readonly elevation0: string;
+        readonly elevation1: string;
+        readonly elevation2: string;
+    };
+    readonly spacing: {
+        readonly space01: string;
+        readonly space02: string;
+        readonly space03: string;
+        readonly space04: string;
+        readonly space05: string;
+        readonly space06: string;
+        readonly space07: string;
+        readonly space08: string;
+        readonly space09: string;
+        readonly space10: string;
+        readonly space11: string;
+    };
+    readonly zIndex: {
+        readonly ModalCloseButton: number;
+        readonly Backdrop: number;
+        readonly ActionModal: number;
+        readonly FullScreenModal: number;
+        readonly RangeSelector: number;
+        readonly MenuComponent: number;
+        readonly Toast: number;
+        readonly Tooltip: number;
+        readonly BackdropElevated: number;
+    };
+    readonly button: {
+        readonly borderRadius: string;
+    };
+    readonly buttonGroup: {
+        readonly gap: string;
+    };
+    readonly headline: {
+        readonly family: {
+            readonly default: string;
+            readonly monospace: string;
+        };
+        readonly headline1: {
+            readonly weight: number;
+        };
+        readonly headline2: {
+            readonly weight: number;
+        };
+        readonly headline3: {
+            readonly weight: number;
+        };
+    };
+    readonly paper: {
+        readonly elevation0: string;
+        readonly elevation1: string;
+        readonly elevation2: string;
+    };
+}
+
+/**
+ * Copies a string to user's clipboard for easy pasting in another location
+ *
+ * @param {string} textToCopy - the string that will be copied to users clipboard
+ * @returns {Promise} - Promise object that represents the copied string
+ */
+declare const copyToClipboard: (textToCopy: string) => Promise<void>;
+
+declare const datetimeHelpers: {
+    isDate: (date: unknown) => date is Date;
+    dateOnlyString: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    dateOnlyStringNumeric: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    dateOnlyISOString: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    monthDayStringNumeric: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    dayOfWeekString: (date: Date | null, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    timeOnlyString: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    dateTimeString: (date: Date | number | string | null | undefined, { timeZone, omitYear }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    dateTimeStringForSentence: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    dateOnlyStringForSentence: (date: unknown, { timeZone }?: {
+        timeZone?: string;
+        omitYear?: boolean;
+    }) => string;
+    timeAgoString: (date: Date, { nowAnchor, includeTime }?: {
+        nowAnchor?: Date;
+        includeTime?: boolean;
+    }) => string;
+    dateUTCOffset: (date: Date) => string;
+    buildTimeDuration: (numberOfMilliseconds: number) => {
+        seconds: number;
+        minutes: number;
+        hours: number;
+    };
+    mediaDurationString: (numberOfMilliseconds: number) => string;
+    sessionDurationString: (numberOfMilliseconds: number) => string;
+    dateToDateTime: (date: Date | null | undefined) => {
+        minutes: number;
+        hours: number;
+        dayOfMonth: number;
+        year: number;
+        month: number;
+    } | null;
+    dateTimeToDate: (dateTime: Partial<{
+        minutes: number;
+        hours: number;
+        dayOfMonth: number;
+        year: number;
+        month: number;
+    }> | null | undefined) => Date | null;
+    dateTimeToISO: (dateTime: Partial<{
+        minutes: number;
+        hours: number;
+        dayOfMonth: number;
+        year: number;
+        month: number;
+    }>) => string | null;
+    dateTimeRounded: {
+        (dateTime: Date, toISOString?: true): string | null;
+        (dateTime: Date, toISOString: false): Date | null;
+    };
+    millisecondsToDurationISOString: (numberOfMilliseconds: number) => string;
+};
+
+declare const gradients: {
+    defaultDarkOne: styled_components.FlattenSimpleInterpolation;
+    defaultDarkTwo: styled_components.FlattenSimpleInterpolation;
+    defaultLightOne: styled_components.FlattenSimpleInterpolation;
+    defaultLightTwo: styled_components.FlattenSimpleInterpolation;
+    defaultMidOne: styled_components.FlattenSimpleInterpolation;
+    defaultMidTwo: styled_components.FlattenSimpleInterpolation;
+    green: styled_components.FlattenSimpleInterpolation;
+    greenWithPop: styled_components.FlattenSimpleInterpolation;
+    pink: styled_components.FlattenSimpleInterpolation;
+    pinkWithPop: styled_components.FlattenSimpleInterpolation;
+    playfulGradientOne: styled_components.FlattenSimpleInterpolation;
+    playfulGradientTwo: styled_components.FlattenSimpleInterpolation;
+    purple: styled_components.FlattenSimpleInterpolation;
+    purpleWithPop: styled_components.FlattenSimpleInterpolation;
+    yellow: styled_components.FlattenSimpleInterpolation;
+    yellowWithPop: styled_components.FlattenSimpleInterpolation;
+};
+type GradientNameType = keyof typeof gradients;
+type GetBackgroundGradientType = GradientNameType | undefined;
+/**
+ * Retrieves the CSS background gradient corresponding to the given gradient name.
+ * If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
+ * @param {GradientName} gradientName - The name of the gradient to retrieve.
+ * @returns {FlattenSimpleInterpolation} The CSS string representing the specified gradient.
+ */
+declare const getBackgroundGradient: (gradientName?: GetBackgroundGradientType) => ReturnType<typeof css>;
+
+/**
+ * Retrieves a semi-random background gradient based on the given id.
+ *
+ * @param {string} id - The id to use to generate the semi-random background gradient.
+ * @returns {GradientName} gradientName
+ */
+declare const getSemiRandomBackgroundGradient: (id: string) => GradientNameType | undefined;
+
+declare const mq: {
+    xsAndUp: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    smAndUp: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    mdAndUp: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    lgAndUp: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    xlAndUp: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    xsAndDown: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    smAndDown: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    mdAndDown: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    lgAndDown: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+    xlAndDown: <T extends DefaultTheme = DefaultTheme>({ theme }: {
+        theme: T;
+    }) => string;
+};
+
+declare const objectHelpers: {
+    isObject: (value: unknown) => value is Record<string, unknown>;
+    deepFreeze: (obj: Record<string, unknown>) => Record<string, unknown>;
+    merge: (target: Record<string, unknown>, ...sources: Record<string, unknown>[]) => Record<string, unknown>;
+    selectKeys: (obj: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
+};
+
+declare const stringHelpers: {
+    camelCase: (str?: string) => string;
+    coerceToBoolean: (value: unknown) => boolean;
+    coerceToString: (value: unknown) => string;
+    isHttpUrl: (str: unknown) => boolean;
+    isString: (value: unknown) => value is string;
+    isUrl: (str: unknown) => boolean;
+    lowerFirst: (str?: string) => string;
+    removeNewlines: (str: string) => string;
+    stripExtension: (str: string) => string;
+    truncate: (str: string, maxChars: number) => string;
+    upperFirst: (str?: string) => string;
+};
+
+type LinkURLParameters = Record<string, string>;
+type LinkTypes = 'default' | 'email' | 'external' | 'phone';
+type DefaultLinkWrapperProps = {
+    [anchorProps: string]: unknown;
+    RenderedLink: ({ ...args }: {
+        [x: string]: any;
+    }) => JSX.Element;
+    children: ReactNode;
+};
+type LinkProps = ComponentPropsWithoutRef<'a'> & {
+    /**
+     * A Promise to invoke before navigating to location.
+     * _Caution: if used with `external` type prop a new window will **not** be opened_
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * The content that will be rendered inside the link
+     */
+    children: ReactNode;
+    /**
+     * Disables Link
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Link into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover';
+    /**
+     * The entity to link to (url, email address, telephone number)
+     */
+    href: string;
+    /**
+     * Use this if your link is "nested" inside another link
+     */
+    nested?: boolean;
+    /**
+     * An object that will be converted into a search parameter string and appended to
+     * the `to` prop value
+     */
+    params?: LinkURLParameters;
+    /**
+     * Type of link to display
+     *
+     *   * `email` creates a mailto
+     *   * `phone` creates a telephone number
+     *   * `external` will open links in a new window
+     */
+    type?: LinkTypes;
+    /**
+     * Will only display an underline when the Link is in a hover state
+     */
+    underlineOnHover?: boolean;
+    /**
+     * Renders a link without any of the default styling applied
+     */
+    unstyled?: boolean;
+    /**
+     * The visual type of Link to display
+     */
+    variant?: 'dangerous' | 'primary' | 'secondary';
+};
+declare const Link: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    /**
+     * A Promise to invoke before navigating to location.
+     * _Caution: if used with `external` type prop a new window will **not** be opened_
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * The content that will be rendered inside the link
+     */
+    children: ReactNode;
+    /**
+     * Disables Link
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Link into a particular css state (for debugging)
+     */
+    forceState?: "active" | "focus" | "hover";
+    /**
+     * The entity to link to (url, email address, telephone number)
+     */
+    href: string;
+    /**
+     * Use this if your link is "nested" inside another link
+     */
+    nested?: boolean;
+    /**
+     * An object that will be converted into a search parameter string and appended to
+     * the `to` prop value
+     */
+    params?: LinkURLParameters;
+    /**
+     * Type of link to display
+     *
+     *   * `email` creates a mailto
+     *   * `phone` creates a telephone number
+     *   * `external` will open links in a new window
+     */
+    type?: LinkTypes;
+    /**
+     * Will only display an underline when the Link is in a hover state
+     */
+    underlineOnHover?: boolean;
+    /**
+     * Renders a link without any of the default styling applied
+     */
+    unstyled?: boolean;
+    /**
+     * The visual type of Link to display
+     */
+    variant?: "dangerous" | "primary" | "secondary";
+} & react.RefAttributes<unknown>>;
+
+type WrapperProviderLinkType = ((props: DefaultLinkWrapperProps) => JSX.Element) | undefined;
+
+type VHSProviderProps = {
+    children: ReactNode;
+    globalStylesIncluded?: boolean;
+    Link?: WrapperProviderLinkType;
+    skipAnimations?: boolean;
+    theme?: Record<string, unknown>;
+};
+declare const VHSProvider: ({ children, theme, globalStylesIncluded, skipAnimations, Link, }: VHSProviderProps) => react_jsx_runtime.JSX.Element;
+
+type UseBooleanReturn = [
+    boolean,
+    () => void,
+    () => void,
+    () => void,
+    Dispatch<SetStateAction<boolean>>
+];
+declare const useBoolean: (initialValue?: boolean) => UseBooleanReturn;
+
+declare const useClipboard: (textToCopy: string, timeout?: number) => [() => Promise<void>, boolean, boolean];
+
+type Rect = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    x: number;
+    y: number;
+};
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+
+type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
+type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
+declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListenerType>[0], eventHandler: (event: T) => unknown, eventTarget?: unknown, eventOptions?: Parameters<RemoveEventListenerType>[2]) => void;
+
+type UseFocusTrapOptions = {
+    disableAriaHider?: boolean;
+    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+};
+declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
+
+declare const useForceUpdate: () => (() => void);
+
+type HoverProps = {
+    onFocus: () => void;
+    onMouseEnter: () => void;
+    onBlur: () => void;
+    onMouseLeave: () => void;
+    onMouseMove?: () => void;
+};
+declare const useIsHovered: () => [boolean, HoverProps, (hovered: boolean) => void];
+
+type KeyFilterPredicate = (evt: KeyboardEvent) => boolean;
+type KeyFilter = KeyFilterPredicate | boolean | string | null | undefined;
+type EventHandler = (event: KeyboardEvent) => unknown;
+type UseKeyOptions = {
+    eventName?: string;
+    eventTarget?: Parameters<typeof useEvent>[2];
+    eventOptions?: Parameters<typeof useEvent>[3];
+};
+declare const useKey: (key: KeyFilter, eventHandler: EventHandler, options?: UseKeyOptions, dependencies?: unknown[]) => void;
+
+type KeyPressState = [boolean, KeyboardEvent | null];
+declare const useKeyPress: (keyFilter: Parameters<typeof useKey>[0]) => KeyPressState;
+
+type KeyEventHandler = (keyboardEvent: KeyboardEvent) => unknown;
+declare const useKeyPressOnce: (key: Parameters<typeof useKeyPress>[0], keydownHandler?: KeyEventHandler | null | undefined, keyupHandler?: KeyEventHandler | null | undefined) => void;
+
+type SetItemType = Storage['setItem'];
+declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
+
+type AcceptedElementTypes = HTMLElement | JSX.Element | ReactNode;
+type AcceptedRefs = MutableRefObject<unknown> | ((element: AcceptedElementTypes) => unknown) | null | undefined;
+declare const useMergedRefs: (refs: AcceptedRefs[]) => (element: AcceptedElementTypes) => void;
+
+type MediaQueryBooleans = {
+    isXsAndUp: boolean;
+    isSmAndUp: boolean;
+    isMdAndUp: boolean;
+    isLgAndUp: boolean;
+    isXlAndUp: boolean;
+    isXsAndDown: boolean;
+    isSmAndDown: boolean;
+    isMdAndDown: boolean;
+    isLgAndDown: boolean;
+    isXlAndDown: boolean;
+};
+declare const useMq: () => MediaQueryBooleans;
+
+declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown) => void;
+
+declare const usePreventScroll: (locked: boolean) => void;
+
+declare const usePreviousValue: <T>(value: T) => T | undefined;
+
+declare const useTheme: <T extends DefaultTheme = DefaultTheme>() => T;
+
+type ColorKeysFromTheme<Theme extends DefaultTheme = DefaultTheme> = keyof Theme['color'];
+type UseThemeColor = {
+    (): DefaultTheme['color'];
+    <T extends DefaultTheme, K extends ColorKeysFromTheme<T>>(param: K): T['color'][K];
+    <T extends DefaultTheme, K extends ColorKeysFromTheme<T>[]>(param: [...K]): {
+        [I in keyof K]: T['color'][K[I] & keyof T['color']];
+    };
+};
+declare const useThemeColor: UseThemeColor;
+
+declare const useWindowSize: (interval?: number) => {
+    width: number;
+    height: number;
+};
+
+type OnBeforeHideInterface = {
+    shouldShowMessage: boolean;
+    message: string;
+};
+type ModalBaseContentProps = {
+    /**
+     * Class name applied to the modal root
+     */
+    className?: string | undefined;
+    /**
+     * Render the modal initially in shown state
+     */
+    initialShownState?: boolean;
+    /**
+     * The modal can be dismissed via esc button
+     */
+    isDismissible?: boolean;
+    /**
+     * Callback invoked before the modal is hidden
+     */
+    onBeforeHide?: (() => OnBeforeHideInterface) | undefined;
+    /**
+     * Callback invoked when the modal is dismissed
+     */
+    onHide?: ((...args: unknown[]) => unknown) | undefined;
+    /**
+     * Callback invoked when the modal is shown
+     */
+    onShow?: ((...args: unknown[]) => unknown) | undefined;
+    /**
+     * Optional function that exposes the `hide` function at the call site allowing
+     * the option to call the `hide` function from outside of this component
+     */
+    render?: (attemptHide: () => unknown) => ReactNode;
+    /**
+     * function(show, ref) that returns a node to open the modal
+     */
+    toggle?: ((show: () => unknown, toggleButtonRef?: RefObject<HTMLElement | null | undefined>) => ReactNode) | undefined;
+};
+declare const ModalBase: {
+    (props: ModalBaseContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ActionModalProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Horizontally align modal to the left, center, or right of the container
+     */
+    alignHorizontal?: 'center' | 'left' | 'normal' | 'right';
+    /**
+     * Vertically align modal to the top, center, or bottom of the container
+     */
+    alignVertical?: 'bottom' | 'center' | 'normal' | 'top';
+    /**
+     * Buttons to be shown at the bottom of the modal
+     */
+    buttons?: ReactNode | ((hide: () => void) => ReactNode);
+    /**
+     * Contents of the modal
+     */
+    children?: ReactNode;
+    /**
+     * Class to be applied to the base element of the modal
+     */
+    className?: string;
+    /**
+     * A prop that determines whether the modal will span the entirety of the screen vertically
+     */
+    fullHeight?: boolean;
+    /**
+     * Allows user to override default icon color
+     */
+    closeIconColorOverride?: string;
+    /**
+     * Increase the zIndex of the Modal, this should be used when calling ActionModal from a Menu
+     * this will prevent the Menu from staying above the ActionModal
+     */
+    elevated?: boolean;
+    /**
+     * Optional illustration to display alongside the modal
+     */
+    illustration?: ReactNode;
+    /**
+     * Background color that appears behind the optional illustration
+     * Can be any css background color or "blue", "brandBlue", "green",
+     * "pink", "purple", or "yellow" for theme colors
+     */
+    illustrationBackgroundColor?: string;
+    /**
+     * Render the modal initially in shown state
+     */
+    initialShownState?: boolean;
+    /**
+     * Allow the user to close the modal via x button or backdrop click
+     */
+    isDismissible?: boolean;
+    /**
+     * Callback invoked before the modal is hidden
+     */
+    onBeforeHide?: () => OnBeforeHideInterface;
+    /**
+     * Callback invoked when the modal is dismissed
+     */
+    onHide?: () => void;
+    /**
+     * Callback invoked when the modal is shown
+     */
+    onShow?: () => void;
+    /**
+     * Optional function that exposes the `hide` function at the call site allowing
+     * the option to call the `hide` function from outside of this component
+     */
+    render?: (hide: (event?: MouseEvent) => void) => ReactNode;
+    /**
+     * Title to display in the modal
+     */
+    title: string;
+    /**
+     * function(show, ref) that returns a node to open the modal
+     */
+    toggle?: (show: () => unknown, toggleButtonRef?: RefObject<HTMLElement | null | undefined>) => ReactNode;
+    /**
+     * The css width property of the modal. Ex - 'max-content', '532px', '100%', etc
+     */
+    width?: string;
+};
+/**
+ * @deprecated Please use Modal component, see [documentation](?path=/docs/components-modal--docs).
+ *
+ * #### Why ActionModal is being deprecated
+ * ActionModal's API tightly couples the modal itself with the button or element that toggles it. This makes it difficult to
+ * implement in several scenarios (such as within a Menu) or if it needs to be programatically opened by an external action.
+ *
+ * [Modal](?path=/docs/components-modal--docs) allows for a separate state control to toggle its visibility and is also more composable
+ * allowing for more variation.
+ */
+declare const ActionModal: {
+    ({ alignHorizontal, alignVertical, buttons, children, className, elevated, fullHeight, closeIconColorOverride, illustration, illustrationBackgroundColor, initialShownState, isDismissible, onBeforeHide, onHide, onShow, render, title, toggle, width, ...otherProps }: ActionModalProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type AvatarInstanceType = 'image' | 'initials';
+type AvatarProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The height and width of the avatar
+     */
+    heightAndWidth?: number;
+    /**
+     * The URL of the image to display
+     */
+    imageUrl?: string | null;
+    /**
+     * Initials to display if no image is provided
+     *
+     * _note: only first initial shown regardless of characters provided_
+     */
+    initials?: string | null;
+    /**
+     * A string that will deterministicly set the background color of the avatar
+     */
+    name?: string | null;
+    /**
+     * A callback that is invoked after the image has loaded or failed to load
+     */
+    onImageLoad?: (avatarType: AvatarInstanceType) => void;
+};
+declare const Avatar: {
+    ({ imageUrl, heightAndWidth, initials, name, onImageLoad, ...otherProps }: AvatarProps): JSX.Element;
+    displayName: string;
+};
+
+declare const alignVerticalMap: {
+    normal: string;
+    top: string;
+    center: string;
+    bottom: string;
+};
+declare const alignHorizontalMap: {
+    normal: string;
+    left: string;
+    center: string;
+    right: string;
+};
+type BackdropProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Optional prop to align the child content along the horizontal axis
+     */
+    alignHorizontal?: keyof typeof alignHorizontalMap;
+    /**
+     * Optional prop to align the child content along the vertical axis
+     */
+    alignVertical?: keyof typeof alignVerticalMap;
+    /**
+     * Color of the backdrop
+     */
+    backgroundColor?: string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * increase the z-index (workaround for ActionModals called within Menu)
+     */
+    elevated?: boolean;
+};
+declare const Backdrop: {
+    ({ alignHorizontal, alignVertical, backgroundColor, children, elevated, ...otherProps }: BackdropProps): JSX.Element;
+    displayName: string;
+};
+
+type OverflowObject = {
+    horizontal: string;
+    vertical: string;
+};
+type BackgroundImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src'> & {
+    /**
+     * The content that will be rendered inside
+     */
+    children?: ReactNode;
+    /**
+     * Sets whether a background image's position is fixed within the viewport,
+     * or scrolls with its containing block. [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment).
+     */
+    attachment?: string;
+    /**
+     * Sets whether an element's background extends underneath its border box,
+     * padding box, or content box. [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip).
+     */
+    clip?: string;
+    /**
+     * Color (as hex) of the component
+     */
+    color?: string | undefined;
+    /**
+     * Height of the component
+     */
+    height?: string;
+    /**
+     * Sets the background's origin: from the border start, inside the border, or inside the padding.
+     * _Note: origin is ignored when attachment is `fixed`._
+     * [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).
+     */
+    origin?: string;
+    /**
+     * Sets the desired behavior for an element's overflow (i.e. when an element's content is
+     * too big to fit in its block formatting context).
+     * [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow).
+     */
+    overflow?: OverflowObject | string;
+    /**
+     * Sets the initial position for each image; relative to the position layer
+     * set by origin. [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
+     */
+    position?: string;
+    /**
+     * Sets how background images are repeated.
+     * [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
+     */
+    repeat?: string;
+    /**
+     * Sets the size of the element's background image.
+     * [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
+     */
+    size?: string;
+    /**
+     * URL(s) to image file
+     */
+    src?: string[] | string;
+    /**
+     * Width of the component
+     */
+    width?: string;
+};
+declare const BackgroundImage: {
+    ({ children, attachment: bgAttachment, clip: bgClip, color: bgColor, height: elHeight, origin: bgOrigin, overflow: elOverflow, position: bgPosition, repeat: bgRepeat, size: bgSize, src: bgImage, width: elWidth, ...otherProps }: BackgroundImageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const iconMap: {
+    'ab-test': string;
+    'all-content': string;
+    archived: string;
+    'arrow-down': string;
+    'arrow-left': string;
+    'arrow-right': string;
+    'arrow-up': string;
+    asterisk: string;
+    audience: string;
+    calendar: string;
+    camera: string;
+    'caret-down': string;
+    'caret-left': string;
+    'caret-right': string;
+    'caret-up': string;
+    channel: string;
+    checkmark: string;
+    'checkmark-circle': string;
+    'checkmark-circle-outline': string;
+    'checkmark-circle-three-quarters': string;
+    'checkmark-underlined': string;
+    close: string;
+    'close-circle': string;
+    'collect-video': string;
+    collection: string;
+    comment: string;
+    community: string;
+    'contact-us': string;
+    copy: string;
+    'copy-disabled': string;
+    create: string;
+    delete: string;
+    'delete-sm': string;
+    'dottie-clock': string;
+    download: string;
+    draggable: string;
+    edit: string;
+    ellipsis: string;
+    'ellipsis-vertical': string;
+    embed: string;
+    episodes: string;
+    error: string;
+    expand: string;
+    export: string;
+    favorite: string;
+    'favorite-outline': string;
+    filter: string;
+    gear: string;
+    'getting-started': string;
+    globe: string;
+    'grid-view': string;
+    'group-record': string;
+    hamburger: string;
+    hazard: string;
+    'help-center': string;
+    hide: string;
+    home: string;
+    hourglass: string;
+    import: string;
+    info: string;
+    integrations: string;
+    invite: string;
+    'invite-to-record': string;
+    'lightning-bolt': string;
+    link: string;
+    'list-view': string;
+    live: string;
+    lock: string;
+    logout: string;
+    media: string;
+    megaphone: string;
+    'more-options': string;
+    'open-new': string;
+    overview: string;
+    paint: string;
+    pencil: string;
+    play: string;
+    playlist: string;
+    podcast: string;
+    preview: string;
+    'private-user-sessions': string;
+    project: string;
+    'question-mark': string;
+    react: string;
+    record: string;
+    redo: string;
+    'remove-from-channel': string;
+    replace: string;
+    reply: string;
+    'save-copy': string;
+    scissors: string;
+    search: string;
+    send: string;
+    settings: string;
+    share: string;
+    soapbox: string;
+    sort: string;
+    sparkle: string;
+    spinner: string;
+    stats: string;
+    'switch-accounts': string;
+    tag: string;
+    team: string;
+    'thumbs-down': string;
+    'thumbs-up': string;
+    triangle: string;
+    undo: string;
+    unlock: string;
+    upload: string;
+    'users-permissions': string;
+    'view-stream': string;
+    wand: string;
+    'zoom-in': string;
+    'zoom-out': string;
+};
+type IconNameType = keyof typeof iconMap;
+
+type BadgeColorScheme = 'brandBlue' | 'error' | 'green' | 'grey' | 'orange' | 'pink' | 'purple' | 'red' | 'success' | 'warning' | 'yellow';
+type BadgeProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The color scheme to use for the badge
+     */
+    colorScheme?: BadgeColorScheme;
+    /**
+     * The icon to display in the badge
+     */
+    icon?: IconNameType;
+    /**
+     * The text to display in the badge
+     */
+    label: string;
+};
+declare const Badge: {
+    ({ colorScheme, label, icon, ...otherProps }: BadgeProps): JSX.Element;
+    displayName: string;
+};
+
+type BannerProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * color string
+     */
+    backgroundColor?: string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * icon name from the icon library to be displayed on left side of banner
+     */
+    icon?: ReactNode;
+};
+declare const Banner: {
+    ({ backgroundColor, icon, children, ...otherProps }: BannerProps): react_jsx_runtime.JSX.Element;
+    Body: ({ children }: {
+        children?: ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    RightGutter: ({ verticalAlign, children }: {
+        children?: ReactNode;
+        verticalAlign?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Title: ({ children }: {
+        children?: ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type Gap = {
+    column: number | string;
+    row: number | string;
+};
+type BoxProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; has no effect on
+     * single line flexible boxes
+     */
+    alignContent?: 'around' | 'between' | 'center' | 'end' | 'start' | 'stretch';
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; the difference
+     * to the alignContent prop is that alignItems specifies the
+     * alignment of the items within the current container's line,
+     * whereas alignContent specifies the alignment of the lines themselves
+     */
+    alignItems?: 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+    /**
+     * Specifies how the browser aligns items of the current line, overriding the
+     * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
+     * then alignSelf is ignored
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    alignSelf?: 'auto' | 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+    /**
+     * Specifies the initial main size of an item
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    basis?: number | string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Specifies the main axis of the container
+     */
+    direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
+    /**
+     * Specifies whether the width and/or height should fill the container
+     */
+    fill?: boolean | 'horizontal' | 'vertical';
+    /**
+     * Specifies whether the width and/or height should fill the viewport
+     */
+    fillViewport?: boolean | 'horizontal' | 'vertical';
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: Gap | number | string;
+    /**
+     * Specifies what amount of space inside the flex container the item should take up
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    grow?: number;
+    /**
+     * Make Layout behave like an inline element but still lay out its content according to flexbox model
+     */
+    inline?: boolean;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the main axis of their container
+     */
+    justifyContent?: 'around' | 'between' | 'center' | 'end' | 'evenly' | 'start';
+    /**
+     * Specifies the order used to lay out an item in its container. Items within the same
+     * container are rendered in ascending order according to their order values.
+     * Elements with the _same_ order value are rendered in the order in which they appear in code
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    order?: number | 'inherit' | 'initial' | 'unset';
+    /**
+     * The DOM tag to use for the element
+     */
+    renderAs?: keyof JSX.IntrinsicElements;
+    /**
+     * Specifies how items will shrink inside the container when the default size of
+     * items is larger than their container
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    shrink?: number;
+    /**
+     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
+     */
+    wrapItems?: boolean;
+};
+declare const Box: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; has no effect on
+     * single line flexible boxes
+     */
+    alignContent?: "around" | "between" | "center" | "end" | "start" | "stretch";
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; the difference
+     * to the alignContent prop is that alignItems specifies the
+     * alignment of the items within the current container's line,
+     * whereas alignContent specifies the alignment of the lines themselves
+     */
+    alignItems?: "baseline" | "center" | "end" | "start" | "stretch";
+    /**
+     * Specifies how the browser aligns items of the current line, overriding the
+     * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
+     * then alignSelf is ignored
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    alignSelf?: "auto" | "baseline" | "center" | "end" | "start" | "stretch";
+    /**
+     * Specifies the initial main size of an item
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    basis?: number | string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Specifies the main axis of the container
+     */
+    direction?: "column-reverse" | "column" | "row-reverse" | "row";
+    /**
+     * Specifies whether the width and/or height should fill the container
+     */
+    fill?: boolean | "horizontal" | "vertical";
+    /**
+     * Specifies whether the width and/or height should fill the viewport
+     */
+    fillViewport?: boolean | "horizontal" | "vertical";
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: Gap | number | string;
+    /**
+     * Specifies what amount of space inside the flex container the item should take up
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    grow?: number;
+    /**
+     * Make Layout behave like an inline element but still lay out its content according to flexbox model
+     */
+    inline?: boolean;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the main axis of their container
+     */
+    justifyContent?: "around" | "between" | "center" | "end" | "evenly" | "start";
+    /**
+     * Specifies the order used to lay out an item in its container. Items within the same
+     * container are rendered in ascending order according to their order values.
+     * Elements with the _same_ order value are rendered in the order in which they appear in code
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    order?: number | "inherit" | "initial" | "unset";
+    /**
+     * The DOM tag to use for the element
+     */
+    renderAs?: keyof JSX.IntrinsicElements;
+    /**
+     * Specifies how items will shrink inside the container when the default size of
+     * items is larger than their container
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    shrink?: number;
+    /**
+     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
+     */
+    wrapItems?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type TextAlignValues = 'center' | 'left' | 'right';
+type ButtonProps = ComponentPropsWithRef<'button'> & {
+    /**
+     * Text that appears inside of the button *THIS WILL OVERRIDE THE LABEL PROP*
+     */
+    children?: ReactNode;
+    /**
+     * Allows user to override default button colors
+     */
+    colorOverride?: string;
+    /**
+     * Disables button
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover' | undefined;
+    /**
+     * Is the button full-width?
+     */
+    fullWidth?: boolean;
+    /**
+     * An SVG component
+     */
+    icon?: ReactNode;
+    /**
+     * The "type" name of a VHS icon. *THIS WILL OVERRIDE ANY ICON PROP PASSED*
+     */
+    iconName?: keyof typeof iconMap;
+    /**
+     * Should the icon appear at the start of the button or the end?
+     */
+    iconPosition?: 'end' | 'start';
+    /**
+     * Show a spinner when the button is in a loading state
+     */
+    isLoading?: boolean;
+    /**
+     * Text that appears inside the button
+     */
+    label?: string;
+    /**
+     * Should the label wrap if the button container is too narrow to fit the label text on one line
+     * @deprecated Apply white-space styling as needed
+     */
+    labelWrap?: boolean;
+    /**
+     * Provides a button without any styling (useful for wrapping another element)
+     */
+    noStyle?: boolean;
+    /**
+     * Callback function invoked when the button is clicked
+     */
+    onClick?: ((event: MouseEvent) => ReactNode) | ((event: MouseEvent) => void) | undefined;
+    /**
+     * The size of button to display
+     */
+    size?: 'lg' | 'md' | 'sm';
+    /**
+     * If true then rounded corners will be squared
+     */
+    square?: boolean;
+    /**
+     * Alignment of the button label
+     */
+    textAlign?: TextAlignValues;
+    /**
+     * The type of button element that should be rendered
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * The visual type of button to display
+     */
+    variant?: 'dangerous' | 'primary' | 'secondary' | 'tertiary';
+};
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Align buttons to the left or right of their container
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * Buttons that will be rendered in grouping
+     */
+    children?: ReactNode;
+    /**
+     * Force ButtonGroup to fill the width of it's container
+     */
+    fullWidth?: boolean;
+};
+declare const ButtonGroup: {
+    ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
+    displayName: string;
+};
+
+type ButtonLinkProps = ComponentPropsWithRef<'a'> & {
+    /**
+     * A Promise to invoke before navigating to location.
+     * _Caution: if used with `external` type prop a new window will **not** be opened_
+     */
+    beforeAction?: () => unknown;
+    /**
+     * The content that will be rendered inside the button
+     */
+    children?: ReactNode;
+    /**
+     * Option CSS color string
+     */
+    colorOverride?: string;
+    /**
+     * Disables Link
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Link into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover';
+    /**
+     * Is the button full-width?
+     */
+    fullWidth?: boolean;
+    /**
+     * The entity to link to (url, email address, telephone number)
+     */
+    href: string;
+    /**
+     * An SVG component
+     */
+    icon?: ReactNode;
+    /**
+     * The "type" name of a VHS icon. *THIS WILL OVERRIDE ANY ICON PROP PASSED*
+     */
+    iconName?: keyof typeof iconMap;
+    /**
+     * Should the icon appear at the start of the button or the end?
+     */
+    iconPosition?: 'end' | 'start';
+    /**
+     * Text that appears inside the button
+     */
+    label?: string;
+    /**
+     * Should the label wrap if the button container is too narrow to fit the label text on one line
+     */
+    labelWrap?: boolean;
+    /**
+     * An object that will be converted into a search parameter string and appended to
+     * the `to` prop value
+     */
+    params?: Record<string, string>;
+    /**
+     * The size of button to display
+     */
+    size?: 'lg' | 'md' | 'sm';
+    /**
+     * If true, rounded corners are disabled
+     */
+    square?: boolean;
+    /**
+     * Alignment of the button label
+     */
+    textAlign?: TextAlignValues;
+    /**
+     * Type of link to display
+     *
+     *   * `email` creates a mailto
+     *   * `phone` creates a telephone number
+     *   * `external` will open links in a new window
+     */
+    type?: 'default' | 'email' | 'external' | 'phone';
+    /**
+     * The visual type of button to display
+     */
+    variant?: 'dangerous' | 'primary' | 'secondary' | 'tertiary';
+};
+/**
+ * The `ButtonLink` component is useful for getting the functionality of a
+ * `Link` with the styling of a `Button`.
+ *
+ * A useful heuristic for using this component: Do you have an `href`? Some of the advantages are having a right-click
+ * context menu available opening a new tab, and copying the URL.
+ *
+ * **Note:** the props table below is incomplete; please
+ * refer to [Link](?path=/docs/link--link-stories) for additional props.
+ */
+declare const ButtonLink: react.ForwardRefExoticComponent<Omit<ButtonLinkProps, "ref"> & react.RefAttributes<unknown>>;
+
+type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
+    /**
+     * Indicates the state of the checkbox
+     */
+    checked?: boolean;
+    /**
+     * Should the radio buttons be displayed vertically as a column or horizontally as a row
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Disables checkbox
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Checkbox into a particular css state (for debugging)
+     */
+    forceState?: 'focus' | 'hover';
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the checkbox
+     */
+    id?: string;
+    /**
+     * The label for the checkbox
+     */
+    label?: JSX.Element | string | undefined;
+    /**
+     * The description for the checkbox
+     */
+    labelDescription?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the checkbox.
+     * Can be used to group together multiple checkboxes
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the checkbox value changes
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Make Input a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the checkbox
+     */
+    value?: string;
+};
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLLabelElement>>;
+
+type CheckboxPropsWithName = Omit<CheckboxProps, 'name'> & {
+    name: string;
+};
+type CheckboxGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
+    /**
+     * Should the radio buttons be displayed vertically as a column or horizontally as a row
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Whether CheckboxGroup is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message to be displayed
+     */
+    error?: string | undefined;
+    /**
+     * The label for the form field
+     */
+    label?: JSX.Element | string | undefined;
+    /**
+     * The hint/helper text under the label
+     */
+    labelDescription?: JSX.Element | string | undefined;
+    /**
+     * Props that are passed through to the underlying `<Label>` component
+     */
+    labelProps?: {
+        disabled?: boolean;
+        screenReaderOnly?: boolean;
+    };
+    /**
+     * Name of the form element
+     */
+    name: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, name: string) => unknown;
+    /**
+     * Array of checkbox attributes
+     */
+    options: CheckboxPropsWithName[];
+    /**
+     * Currently selected checkbox value
+     */
+    value?: string[] | boolean | undefined;
+};
+declare const CheckboxGroup: {
+    ({ direction, disabled, error, label, labelDescription, labelProps, name, onChange, options, value, ...otherProps }: CheckboxGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type ClickAreaProps = ComponentPropsWithRef<'div'> & {
+    /**
+     * Supply an element or Component to render as the root compoennt (default is div)
+     */
+    renderAs?: ElementType;
+    /**
+     * The content within the clickarea
+     */
+    children: ReactNode;
+    /**
+     * If provided, this click event happens instead of the target ref's click event
+     */
+    onClick?: (event: Event) => void;
+    /**
+     * A ref to the element within chldren that will be used as the target of the click event
+     * Should typically be a button or link
+     */
+    targetRef: RefObject<HTMLElement | null>;
+};
+/**
+ * ClickArea is useful when you want an entire element to be clickable, such as a card or an item in a list. Making the
+ * entire element clickable provides a better click target for users, especially on mobile devices. The problem with this is
+ * clickable divs are not accessible or tabbable. Using a `button` or `a` tag causes both styling and screenreader problems.
+ *
+ * To solve these issues, `ClickArea` maps a click event on the container element to a click event on a button or link within
+ * it, via a ref. Assistive devices can utilize the target element and ignore the container element's click property.
+ *
+ * ClickArea also makes having interactive elements within the clickable container easier. For example, if you have a card element
+ * that is clickable but with a "close" button in the top right, include `event.preventDefault()` in the close button's click handler
+ * to prevent the container's click handler from firing.
+ *
+ */
+declare const ClickArea: react.ForwardRefExoticComponent<Omit<ClickAreaProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+type CloseButtonProps = ComponentPropsWithoutRef<'button'> & {
+    /**
+     * Callback function invoked when the button is clicked
+     */
+    onClick?: () => void;
+};
+declare const CloseButton: {
+    ({ onClick, ...otherProps }: CloseButtonProps): JSX.Element;
+    displayName: string;
+};
+
+declare const VARIANT_BRAND_BLUE = "brandblue";
+declare const CARET_DIRECTION_UP = "up";
+declare const CARET_DIRECTION_DOWN = "down";
+declare const CARET_DIRECTION_LEFT = "left";
+declare const CARET_DIRECTION_RIGHT = "right";
+type CollapsibleGroupProps = {
+    /**
+     * Slot for adjacent options
+     */
+    actions?: ReactNode;
+    /**
+     * Custom background color
+     */
+    backgroundColor?: string;
+    /**
+     * Custom direction of the caret when open or closed
+     */
+    caretDirection?: {
+        closed: typeof CARET_DIRECTION_DOWN | typeof CARET_DIRECTION_LEFT | typeof CARET_DIRECTION_RIGHT | typeof CARET_DIRECTION_UP;
+        open: typeof CARET_DIRECTION_DOWN | typeof CARET_DIRECTION_LEFT | typeof CARET_DIRECTION_RIGHT | typeof CARET_DIRECTION_UP;
+    };
+    /**
+     * Toggleable contents
+     */
+    children?: ReactNode;
+    /**
+     * Optional CSS padding to be applied to the content container
+     */
+    contentPadding?: string | null;
+    /**
+     * The control has a caret by default. Set this to true to suppress the caret
+     */
+    hideCaret?: boolean;
+    /**
+     * Optional ID attribute
+     */
+    id?: string;
+    /**
+     * Control the initial open state. If not provided, the default is to start closed.
+     */
+    isOpen?: boolean;
+    /**
+     * Clickable text label for the control, or perhaps an inline editable
+     * control? Whatever suits you */
+    label?: ReactNode | (({ open, caret }: {
+        open: boolean;
+        caret: JSX.Element;
+    }) => ReactNode);
+    /**
+     * Choose on which side the caret shows
+     */
+    layout?: 'leading' | 'trailing';
+    /**
+     * Callback function invoked when the button is clicked
+     */
+    onClick?: () => unknown;
+    /**
+     * Callback function invoked when the open state changes
+     */
+    onOpenChange?: (newOpen: boolean) => unknown;
+    /**
+     * Extra actions are hidden by default and shown on hover. Set this to false
+     * to make always visible
+     */
+    showActionsOnHover?: boolean;
+    /**
+     * Display the open / close transition animation
+     */
+    showTransition?: boolean;
+    /**
+     * Changes the styling of the collapsible group banner when active
+     */
+    variant?: typeof VARIANT_BRAND_BLUE;
+};
+declare const CollapsibleGroup: {
+    ({ actions, backgroundColor, caretDirection, children, contentPadding, hideCaret, id, isOpen, label, layout, onOpenChange, showActionsOnHover, showTransition, variant, ...otherProps }: CollapsibleGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DividerProps = ComponentPropsWithoutRef<'hr'> & {
+    /**
+     * Allows user to override default divider color
+     */
+    colorOverride?: string;
+    /**
+     * Height (in pixels) of divider
+     */
+    height?: number;
+    /**
+     * The visual type of divider to display
+     */
+    variant?: 'dashed' | 'solid';
+};
+declare const Divider: {
+    ({ colorOverride, height, variant, ...otherProps }: DividerProps): JSX.Element;
+    displayName: string;
+};
+
+declare const ellipsisStyle: styled_components.FlattenSimpleInterpolation;
+declare const ellipsisFlexParentStyle: styled_components.FlattenSimpleInterpolation;
+type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The text that will be truncated with an ellipsis
+     */
+    children?: ReactNode;
+    /**
+     * The number that will be truncated with an ellipsis
+     */
+    lines?: number;
+};
+declare const Ellipsis: {
+    ({ children, lines, ...otherProps }: EllipsisProps): JSX.Element;
+    displayName: string;
+};
+
+type FileSelectProps = {
+    /**
+     * Allowlist of file types that the server will accept
+     * (see: <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-accept">file input docs</a>)
+     */
+    accept: string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children: ReactNode;
+    /**
+     * Disable the input. <em>Note: Does not "disable" the child component, only the hidden input</em>
+     */
+    disabled?: boolean;
+    /**
+     * ID of the input
+     */
+    id: string;
+    /**
+     * File size limit specified in MB
+     */
+    maxSize?: number;
+    /**
+     * Allow multiple files to be selected
+     */
+    multiple?: boolean;
+    /**
+     * Name of the input
+     */
+    name?: string;
+    /**
+     * Callback invoked when file has been selected
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback invoked when the file input is clicked (before the file has been selected)
+     */
+    onClick?: (...args: unknown[]) => unknown;
+    /**
+     * Callback invoked when there is an error selecting file(s)
+     */
+    onError?: (error: Error) => void;
+};
+declare const FileSelect: react.ForwardRefExoticComponent<FileSelectProps & react.RefAttributes<HTMLInputElement>>;
+
+type ValuesType = Record<string, unknown>;
+type Values = Record<string, unknown>;
+type FormState = FormikProps<Values>;
+type FormProps = {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Class(es) to be applied to formik container
+     */
+    className?: string;
+    /**
+     * Unique ID for Form, used for React Testing Library
+     */
+    formId: string;
+    /**
+     * Ref required to be ref of FormGlobalError. Simply assign `const globalErrorRef = useRef(null)`. Either a function or the instance of a DOM native element.
+     */
+    globalErrorRef: RefObject<HTMLElement | null | undefined>;
+    /**
+     * Form input values on initial load, often populated from server
+     */
+    initialValues: ValuesType;
+    /**
+     * Ref to access the form's state and API
+     */
+    innerRef?: React.Ref<FormState>;
+    /**
+     * On-submit callback
+     */
+    onSubmit: (values: Record<string, unknown>, ref: FormikHelpers<Values>) => unknown;
+    /**
+     * On form submission with errors (isValid=false), scroll to GlobalError section
+     */
+    scrollToFormErrorsOnSubmit?: boolean;
+    /**
+     * On-validate callback, params include values, and the rest of the form state params available in [Formik](https://jaredpalmer.com/formik/docs/api/formik#props-1)
+     */
+    shareFormContext?: (props: FormikProps<Values>) => unknown;
+    /**
+     * Show a top-level rundown of all the errors in the form
+     */
+    showGlobalError?: boolean;
+    /**
+     * Style object applied to Form component
+     */
+    style?: Record<string, string>;
+    /**
+     * Should form submit when an input's onChange is invoked?
+     */
+    submitOnChange?: boolean;
+    /**
+     * Validate function passed to formik
+     */
+    validate?: (values: Values) => Promise<FormikErrors<Values>> | object | void;
+    /**
+     * Should form run validate function on form blur?
+     */
+    validateOnBlur?: boolean;
+    /**
+     * Should form run validate function on form change?
+     */
+    validateOnChange?: boolean;
+    /**
+     * __[`yup` schema](https://github.com/jquense/yup#yup)__
+     */
+    validationSchema?: ValidationSchemaType;
+};
+type ValidationSchemaType = {
+    fields: Record<string, unknown>;
+};
+declare const Form: {
+    ({ children, className, formId, initialValues, onSubmit, scrollToFormErrorsOnSubmit, shareFormContext, style, submitOnChange, validate, validateOnBlur, validateOnChange, validationSchema, globalErrorRef, showGlobalError, innerRef, }: FormProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ButtonsType = {
+    [key: string]: unknown;
+    name: string;
+    type?: 'button' | 'reset' | 'submit' | undefined;
+};
+type FormButtonsProps = {
+    /**
+     * Align button left (typically on a page) or right (typically on a modal).
+     */
+    align?: 'left' | 'right';
+    /**
+     * Each button object must have a name, but can also be passed any props that apply to a Button component.
+     */
+    buttons: ButtonsType[];
+};
+declare const FormButtons: {
+    ({ buttons, align, ...props }: FormButtonsProps): JSX.Element;
+    displayName: string;
+};
+
+type CustomComponentClass = {
+    field: {
+        name: string;
+        value?: unknown;
+    };
+    form: {
+        errors?: Record<string, string> | undefined;
+        setFieldValue?: ((name: string, optionValue: string) => unknown) | undefined;
+        values?: Record<string, string> | undefined;
+    };
+};
+
+declare const rteFormatTypes: Readonly<{
+    BOLD: "BOLD";
+    ITALIC: "ITALIC";
+    UNDERLINE: "UNDERLINE";
+    STRIKETHROUGH: "STRIKETHROUGH";
+    HEADING_1: "HEADING_1";
+    HEADING_2: "HEADING_2";
+    BLOCKQUOTE: "BLOCKQUOTE";
+    NUMBERED_LIST: "NUMBERED_LIST";
+    BULLETED_LIST: "BULLETED_LIST";
+    LINK: "LINK";
+    IMAGE: "IMAGE";
+}>;
+
+type FormFieldProps = Omit<ComponentPropsWithRef<'input'>, 'placeholder'> & {
+    /**
+     * A custom component that acts as a field and that needs access to Formik fields
+     */
+    customComponent?: React.ComponentClass<CustomComponentClass> | ((arg?: React.ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
+    /**
+     * Should the radio buttons be displayed vertically as a column or horizontally as a row
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Disables form field
+     */
+    disabled?: boolean;
+    /**
+     * Only takes effect if type is richTextEditor. An array of formats that should be enabled in the toolbar.
+     */
+    enabledFormats?: (keyof typeof rteFormatTypes)[];
+    /**
+     * Visual label above the input
+     */
+    label?: JSX.Element | string | undefined;
+    /**
+     * The hint/helper text under the label
+     */
+    labelDescription?: ReactNode;
+    /**
+     * Props that are passed through to the underlying `<Label>` component
+     */
+    labelProps?: {
+        disabled?: boolean;
+        screenReaderOnly?: boolean;
+    };
+    /**
+     * HTML "name" attribute. Also needs to be unique in the form
+     */
+    name?: string;
+    /**
+     * Custom onChange callback add-on. args: "value"
+     */
+    onChangeCustom?: (value: string) => unknown;
+    /**
+     * Options passed down to the `<Field>` component
+     */
+    options?: Record<string, unknown>[];
+    /**
+     * Input's visual placeholder text
+     */
+    placeholder?: string | null | undefined;
+    /**
+     * Allows user to vertically or horizontally resize the form field, or to disable resizing altogether
+     */
+    resize?: 'horizontal' | 'none' | 'vertical';
+    /**
+     * The type of the field sets the type of input or select, texarea, radio, checkbox, etc.
+     */
+    type: 'checkbox' | 'custom' | 'email' | 'hidden' | 'multiline' | 'number' | 'password' | 'radio' | 'richTextEditor' | 'select' | 'text' | 'url';
+};
+declare const FormField: react.ForwardRefExoticComponent<Omit<FormFieldProps, "ref"> & react.RefAttributes<unknown>>;
+
+type FormFieldErrorProps = ComponentPropsWithoutRef<'div'> & {
+    children?: ReactNode | undefined;
+};
+declare const FormFieldError: {
+    ({ children, ...otherProps }: FormFieldErrorProps): JSX.Element | null;
+    displayName: string;
+};
+
+declare const FormGlobalError: react.ForwardRefExoticComponent<react.RefAttributes<HTMLDivElement>>;
+
+type FullScreenModalProps = {
+    /**
+     * Color of the modal background
+     */
+    backgroundColor?: string;
+    /**
+     * Contents of the modal
+     */
+    content: (hide: () => unknown) => ReactNode;
+    /**
+     * Render the modal initially in shown state
+     */
+    initialShownState?: boolean;
+    /**
+     * Callback invoked before the modal is hidden
+     */
+    onBeforeHide?: (() => OnBeforeHideInterface) | undefined;
+    /**
+     * Callback invoked when the modal is shown
+     */
+    onHide?: () => unknown;
+    /**
+     * function(show, ref) that returns a node to open the modal
+     */
+    toggle?: ((show: () => unknown, toggleButtonRef?: RefObject<HTMLElement | null | undefined>) => ReactNode) | undefined;
+};
+declare const FullScreenModal: {
+    ({ content, toggle, backgroundColor, initialShownState, onBeforeHide, onHide, }: FullScreenModalProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const iconSizeMap: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+type IconProps = ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Color (as hex) of the Icon
+     */
+    color?: string;
+    /**
+     * The size of the icon to display
+     */
+    size?: keyof typeof iconSizeMap;
+    /**
+     * @ignore
+     */
+    style?: Record<string, unknown>;
+    /**
+     * Determines which icon to display
+     */
+    type: IconNameType;
+};
+declare const Icon: {
+    ({ color, size, style, type, ...otherProps }: IconProps): JSX.Element;
+    displayName: string;
+};
+
+declare const sizeMap: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+declare const componentStyleMap: {
+    light: string;
+    dark: string;
+};
+type sizeType = keyof typeof sizeMap;
+type componentStyleType = keyof typeof componentStyleMap;
+type IconButtonProps = ComponentPropsWithRef<'button'> & {
+    /**
+     * Allows user to override default button colors
+     */
+    colorOverride?: string | undefined;
+    /**
+     * Choose light styles if this component appears on a dark background
+     */
+    componentStyle?: componentStyleType;
+    /**
+     * Disables button
+     */
+    disabled?: boolean;
+    /**
+     * An SVG component
+     */
+    icon?: ReactNode;
+    /**
+     * Text that appears as a tooltip when the user hovers over the button
+     */
+    label?: string;
+    /**
+     * Callback function invoked when the button is clicked
+     */
+    onClick?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * Prevent a Tooltip from appearing on hover
+     */
+    preventTooltip?: boolean;
+    /**
+     * The size of the button
+     */
+    size?: sizeType;
+    /**
+     * The direction of the tooltip
+     */
+    tooltipDirection?: 'bottom' | 'left' | 'right' | 'top';
+};
+declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+type ImageProps = ComponentPropsWithoutRef<'img'> & {
+    /**
+     * Accessible text to apply to the image
+     */
+    alt: string;
+    /**
+     * Specifies whether the width and/or height should fill the container
+     *
+     * *Note: this will override height/width attributes*
+     */
+    fill?: boolean | 'horizontal' | 'vertical';
+    /**
+     * Specifies how the image's intrinsic size (ie. its natural size) should
+     * be adjusted to fit within its container
+     */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * Indicates how the browser should load the image; `eager`loads the image immediately,
+     * `lazy` defers loading the image until it reaches a calculated distance from the viewport.
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * Specifies how the image will align itself in its container
+     */
+    position?: string;
+    /**
+     * URL to image file
+     */
+    src: string;
+};
+declare const Image: {
+    ({ src, alt, fill: fillContainer, fit: objFit, loading, position: objPosition, ...otherProps }: ImageProps): JSX.Element;
+    displayName: string;
+};
+
+type IconPositionStrings = 'end' | 'start';
+type ForcedStateStrings = 'active' | 'focus' | 'hover';
+type InputProps = ComponentPropsWithRef<'input'> & {
+    /**
+     * Copy-to-clipboard-on-click of input's value with copy icon
+     */
+    clickToCopy?: boolean;
+    /**
+     * Disables Input
+     */
+    disabled?: boolean | undefined;
+    /**
+     * @ignore
+     * Force an Input into a particular css state (for debugging)
+     */
+    forceState?: ForcedStateStrings;
+    /**
+     * Should Input occupy 100% of available space
+     */
+    fullWidth?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * An SVG component that will appear on the right-hand side of the input
+     * _Note:_ some input types will apply a icon by default
+     */
+    icon?: ReactNode;
+    /**
+     * Indicates on which side of the input the icon should render. Will default to `end` unless the `type` prop is `search`.
+     */
+    iconPosition?: IconPositionStrings;
+    /**
+     * @ignore
+     * This is a prop that is here for use by FormField. Otherwise,
+     * the ref prop should just be used
+     */
+    innerRef?: RefObject<HTMLInputElement | null>;
+    /**
+     * Displays text in monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Callback function invoked when the input focus blurs
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function invoked when the input value changes
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function invoked when the input value is copied
+     */
+    onClickToCopy?: () => void;
+    /**
+     * Callback function invoked when the input is focused
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function that will select input text when input is focused;
+     * receives event object but if that is not needed just pass a no-op function
+     */
+    onFocusToSelect?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * A short hint for the user about what value the Input expects
+     */
+    placeholder?: string | undefined;
+    /**
+     * Prevent the Input from being writable (different styling from disabled)
+     */
+    readOnly?: boolean;
+    /**
+     * Make Input a required element
+     */
+    required?: boolean;
+    /**
+     * The type of Input to render
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * The content of Input
+     */
+    value?: number | string | undefined;
+};
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+type AlphanumericKeyboardKeys = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
+type ModifierKeys = 'Alt' | 'Cmd' | 'Ctrl' | 'Meta' | 'Option' | 'Shift';
+type WhitespaceKeys = 'Enter' | 'Space' | 'Tab';
+type ArrowKeys = 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp';
+type KeyboardKeys = AlphanumericKeyboardKeys | ArrowKeys | ModifierKeys | WhitespaceKeys | '?' | 'Backspace' | 'Esc';
+
+type KeyboardShortcutProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * @description The visual style of the keyboard shortcut. Choose light if the background is dark and dark if the background is light.
+     */
+    componentStyle?: 'dark' | 'light';
+    /**
+     * @description If set to true, the keyboard shortcut will stretch the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * @description The keys displayed.
+     */
+    keyboardKeys: KeyboardKeys | KeyboardKeys[];
+    /**
+     * @description A visual label for the keyboard shortcut.
+     */
+    label?: string;
+};
+declare const KeyboardShortcut: {
+    ({ label, keyboardKeys, fullWidth, componentStyle, ...otherProps }: KeyboardShortcutProps): JSX.Element;
+    displayName: string;
+};
+
+type LabelProps = ComponentPropsWithoutRef<'label'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * To indicate that the label is for a disabled form component
+     */
+    disabled?: boolean;
+    /**
+     * ID of the form component that the label should be associated with
+     */
+    htmlFor?: string | undefined;
+    /**
+     * To use 'legend', 'p', 'span', or other instead of 'label'
+     */
+    renderAs?: 'div' | 'label' | 'legend' | 'p' | 'span' | undefined;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
+    /**
+     * For label text that needs to be available to assistive technology (e.g. screen readers)
+     * but otherwise hidden on screen.
+     */
+    screenReaderOnly?: boolean;
+};
+declare const Label: {
+    ({ renderAs, children, disabled, htmlFor, required, screenReaderOnly, ...otherProps }: LabelProps): JSX.Element;
+    displayName: string;
+};
+
+type LabelDescriptionProps = ComponentPropsWithoutRef<'div'> & {
+    children: ReactNode;
+    disabled?: boolean;
+};
+declare const LabelDescription: {
+    ({ children, disabled, ...otherProps }: LabelDescriptionProps): JSX.Element;
+    displayName: string;
+};
+
+type LinkButtonProps = ComponentPropsWithoutRef<'button'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Disables Button
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Button into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover';
+    /**
+     * Text that appears inside the button
+     */
+    label?: string;
+    /**
+     * Provides a button without any styling (useful for wrapping another element)
+     */
+    noStyle?: boolean;
+    /**
+     * Callback function invoked when the button is clicked
+     */
+    onClick?: (event: KeyboardEvent$1 | MouseEvent) => void;
+    /**
+     * Will only display an underline when the Link is in a hover state
+     */
+    underlineOnHover?: boolean;
+    /**
+     * The visual type of Button to display
+     */
+    variant?: 'primary' | 'secondary';
+};
+declare const LinkButton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Disables Button
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Button into a particular css state (for debugging)
+     */
+    forceState?: "active" | "focus" | "hover";
+    /**
+     * Text that appears inside the button
+     */
+    label?: string;
+    /**
+     * Provides a button without any styling (useful for wrapping another element)
+     */
+    noStyle?: boolean;
+    /**
+     * Callback function invoked when the button is clicked
+     */
+    onClick?: (event: KeyboardEvent$1 | MouseEvent) => void;
+    /**
+     * Will only display an underline when the Link is in a hover state
+     */
+    underlineOnHover?: boolean;
+    /**
+     * The visual type of Button to display
+     */
+    variant?: "primary" | "secondary";
+} & react.RefAttributes<HTMLSpanElement>>;
+
+type VariantType = 'breadcrumbs' | 'bullets' | 'commas' | 'ordered' | 'slashes' | 'spaces' | 'unbulleted';
+type ItemType = ItemType[] | string[] | string;
+type ListProps = ComponentPropsWithoutRef<'ul'> & {
+    /**
+     * Children should be wrapped in `<ListItem>`
+     */
+    children?: ReactNode;
+    /**
+     * As an alternative to passing children you can supply an array of strings that
+     * will be rendered as child `<ListItems>`s. Note that all items will be of the same variant.
+     */
+    items?: ItemType[];
+    /**
+     * The kind of list to render
+     */
+    variant?: VariantType;
+};
+declare const List: {
+    ({ children, items, variant, ...otherProps }: ListProps): JSX.Element | null;
+    displayName: string;
+};
+
+type ListItemProps = {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+};
+declare const ListItem: {
+    ({ children }: ListItemProps): JSX.Element | null;
+    displayName: string;
+};
+
+type ControlledMenuProps = {
+    /** Is the menu open. Must be used with `onOpenChange`. */
+    isOpen: boolean;
+    /** When an attempt to toggle the menu is triggered,
+     *  must be used with `isOpen`.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+};
+type UncontrolledMenuProps = {
+    isOpen?: never;
+    onOpenChange?: never;
+};
+type MenuControlProps = ControlledMenuProps | UncontrolledMenuProps;
+type DefaultMenuProps = DropdownMenuProps & MenuControlProps & {
+    /** The position of the Menu */
+    align?: 'center' | 'end' | 'start';
+    children: ReactNode;
+    /** Callback for when the user clicks or focuses outside of the menu */
+    onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
+    /** Props to pass to the trigger component, the default trigger is Button */
+    triggerProps?: ButtonProps;
+};
+type MenuPropsWithLabel = DefaultMenuProps & {
+    /** The label for the trigger element */
+    label: string;
+    trigger?: never;
+};
+type MenuPropsWithCustomTrigger = DefaultMenuProps & {
+    label?: never;
+    /** Replace the default trigger */
+    trigger: ReactNode;
+};
+type MenuProps = MenuPropsWithCustomTrigger | MenuPropsWithLabel;
+declare const Menu: {
+    ({ align, children, trigger, label, isOpen, triggerProps, onOpenChange, onInteractOutside, ...props }: MenuProps): JSX.Element;
+    displayName: string;
+};
+
+type MenuItemPropsWithLabelDescription = {
+    href?: string;
+    badge?: ReactNode;
+    children?: never;
+    label: ReactNode | string;
+    description?: ReactNode | string;
+    icon?: ReactNode;
+    indicator?: ReactNode;
+    renderAs?: ElementType;
+    target?: HTMLAnchorElement['target'];
+    variant?: 'dangerous' | 'pricing' | 'primary';
+};
+type MenuItemPropsWithChildren = {
+    href?: string;
+    children: ReactNode | string;
+    badge?: never;
+    label?: never;
+    description?: never;
+    icon?: never;
+    indicator?: ReactNode;
+    renderAs?: ElementType;
+    target?: HTMLAnchorElement['target'];
+    variant?: 'dangerous' | 'pricing' | 'primary';
+};
+type MenuItemProps = DropdownMenuItemProps & (MenuItemPropsWithChildren | MenuItemPropsWithLabelDescription);
+type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & (MenuItemPropsWithChildren | MenuItemPropsWithLabelDescription);
+type RadioMenuItemProps = DropdownMenuRadioItemProps & (MenuItemPropsWithChildren | MenuItemPropsWithLabelDescription);
+declare const MenuItem: ({ children, label, description, badge, icon, renderAs, href, target, variant, ...props }: MenuItemProps) => react_jsx_runtime.JSX.Element;
+declare const CheckboxMenuItem: ({ children, label, description, badge, icon, indicator, ...props }: CheckboxMenuItemProps) => react_jsx_runtime.JSX.Element;
+declare const RadioMenuItem: ({ children, label, badge, description, icon, indicator, ...props }: RadioMenuItemProps) => react_jsx_runtime.JSX.Element;
+
+type MenuLabelProps = {
+    children: ReactNode | string;
+};
+declare const MenuLabel: ({ children, ...props }: MenuLabelProps) => react_jsx_runtime.JSX.Element;
+
+type SubMenuProps = {
+    label: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+};
+declare const SubMenu: ({ label, icon, description, children }: SubMenuProps) => react_jsx_runtime.JSX.Element;
+
+type MenuButtonProps = ButtonProps & {
+    /**
+     * Disables button
+     */
+    disabled?: boolean;
+    /**
+     * Use this prop to pass an IconButton as the "trigger" instead of a standard Button
+     */
+    iconButtonComponent?: JSX.Element | ReactElement;
+    /**
+     * Text that appears inside the button
+     */
+    label: string;
+    /**
+     * Which side of the button should the menu be aligned
+     */
+    menuAlignment?: 'left' | 'right';
+    /**
+     * An array of Button/Link components
+     */
+    menuItems?: JSX.Element[];
+    /**
+     * Where should the menu appear relative to the button
+     */
+    menuPosition?: 'above' | 'below';
+    /**
+     * Can be a CSS width value string, 'fullWidth' or 'maxItem' (sized to the largest item width)
+     */
+    menuWidth?: string;
+    /**
+     * Function that is called after the menu is closed
+     */
+    onMenuClosed?: ((event: MouseEvent) => ReactNode) | ((event: MouseEvent) => void) | undefined;
+    /**
+     * Function that is called when the menu button is clicked
+     */
+    onMenuClick?: ((event: MouseEvent) => ReactNode) | ((event: MouseEvent) => void) | undefined;
+    /**
+     * A custom node to be displayed in the menu on extra small screens.
+     */
+    overrideMenuHeader?: ReactNode;
+    /**
+     * The size of button to display
+     */
+    size?: 'lg' | 'md' | 'sm';
+};
+/**
+ * @deprecated Please use Menu with a Button trigger, see [documentation](https://wistia.github.io/vhs/?path=/docs-components-menu--docs).
+ *
+ * #### Why MenuButton is being deprecated
+ *
+ * The [Menu](https://wistia.github.io/vhs/?path=/docs-components-menu--docs) component is preferred over MenuButton for several reasons:
+ * 1. Menu has better alignment and collision detection.
+ * 2. Menu supports submenus.
+ * 3. Menu is properly portalled.
+ */
+declare const MenuButton: {
+    ({ label, menuAlignment, menuItems, menuPosition, menuWidth, onMenuClick, onMenuClosed, disabled, iconButtonComponent, overrideMenuHeader, size, ...otherProps }: MenuButtonProps): JSX.Element;
+    displayName: string;
+};
+
+type ModalProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Horizontally align modal to the left, center, or right of the container
+     */
+    alignHorizontal?: 'center' | 'left' | 'normal' | 'right';
+    /**
+     * Vertically align modal to the top, center, or bottom of the container
+     */
+    alignVertical?: 'bottom' | 'center' | 'normal' | 'top';
+    /**
+     * Whether or not the modal should be allowed to exceed the viewport bounds.
+     * If it exceeds the bounds, the entire backdrop will be scrollable.
+     */
+    allowModalToExceedViewportBounds?: boolean;
+    /**
+     * Contents of the modal
+     */
+    children?: ReactNode;
+    /**
+     * Class to be applied to the base element of the modal
+     */
+    className?: string;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Whether or not the modal is open, and should be rendered
+     */
+    isOpen: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     * @returns
+     */
+    onRequestClose?: () => void;
+    /**
+     * Whether or not the modal should be closed when the user clicks outside of it
+     * @default true
+     */
+    shouldCloseOnClickOutside?: boolean;
+    /**
+     * Whether or not the modal should trap focus within itself
+     *
+     */
+    shouldTrapFocus?: boolean;
+    /** The base width to apply to the Modal */
+    width?: string;
+    /**
+     * The overflow behavior to apply to the modal
+     * @default 'auto'
+     */
+    overflow?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';
+};
+declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    displayName: string;
+};
+
+declare const ModalHeader: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+declare const ModalBody: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+declare const ModalFooter: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+type ModalCloseButtonProps = {
+    /**
+     * Callback invoked when the button is clicked
+     */
+    onClick?: (event: MouseEvent) => void;
+};
+declare const ModalCloseButton: ({ onClick, ...props }: ModalCloseButtonProps) => JSX.Element;
+
+type PaperProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The content within Paper component
+     */
+    children: ReactNode;
+    /**
+     * The "elevation" level of the Paper component
+     */
+    elevation?: 0 | 1 | 2 | undefined;
+};
+declare const Paper: {
+    ({ children, elevation, ...otherProps }: PaperProps): JSX.Element;
+    displayName: string;
+};
+
+type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Whether the progress bar has a label
+     */
+    hasLabel?: boolean;
+    /**
+     * Current numeric level of the progress (0 -> 1)
+     */
+    progress?: number;
+    /**
+     * Allows user to override default progress bar label colors
+     */
+    labelColorOverride?: string;
+    /**
+     * Allows user to override default progress bar meter background colors
+     */
+    meterBgColorOverride?: string;
+    /**
+     * Allows user to override default colors
+     */
+    colorOverride?: string;
+};
+declare const ProgressBar: {
+    ({ hasLabel, progress, colorOverride, labelColorOverride, meterBgColorOverride, ...otherProps }: ProgressBarProps): JSX.Element;
+    displayName: string;
+};
+
+type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'value'> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Should the radio buttons be displayed vertically as a column or horizontally as a row
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * @ignore // I don't know what to do with this
+     * Force a Radio into a particular css state (for debugging)
+     */
+    forceState?: 'focus' | 'hover';
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the input
+     */
+    labelDescription?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value"> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Should the radio buttons be displayed vertically as a column or horizontally as a row
+     */
+    direction?: "column" | "row";
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * @ignore // I don't know what to do with this
+     * Force a Radio into a particular css state (for debugging)
+     */
+    forceState?: "focus" | "hover";
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the input
+     */
+    labelDescription?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+} & react.RefAttributes<HTMLLabelElement>>;
+
+type RadioGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
+    /**
+     * Should the radio buttons be displayed vertically as a column or horizontally as a row
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Whether RadioGroup is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message to be displayed
+     */
+    error?: string | undefined;
+    /**
+     * The label for the form field
+     */
+    label?: JSX.Element | string | null | undefined;
+    /**
+     * The hint/helper text under the label
+     */
+    labelDescription?: JSX.Element | string | undefined;
+    /**
+     * Props that are passed through to the underlying `<Label>` component
+     */
+    labelProps?: {
+        disabled?: boolean;
+        screenReaderOnly?: boolean;
+    };
+    /**
+     * Should match the ID attribute of the radio. Can be used to group together multiple radios
+     */
+    name: string;
+    /**
+     * Fires on checking or unchecking radios in group
+     */
+    onChange?: (event: ChangeEvent, value: RadioProps['value']) => unknown;
+    /**
+     * Array of radios attributes
+     */
+    options: Pick<RadioProps, 'disabled' | 'label' | 'labelDescription' | 'value'>[];
+    /**
+     * Currently selected radio value
+     */
+    value?: string | undefined;
+};
+declare const RadioGroup: {
+    ({ direction, disabled, error, label, labelDescription, labelProps, name, onChange, options, value, ...otherProps }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type DateRangeType = {
+    start: Date;
+    end: Date;
+};
+
+type Preset = {
+    label?: string;
+    value: {
+        end: Date;
+        start: Date;
+    };
+    tooltipText?: string;
+};
+type RangeSelectorProps = {
+    /**
+     * Align the popup to the left or the right of the tigger button
+     */
+    align?: 'left' | 'right';
+    /**
+     * The variant to be passed to the button component
+     */
+    buttonVariant?: 'input' | 'primary' | 'secondary' | 'tertiary';
+    /**
+     * The earliest selectable date
+     */
+    earliestDate?: Date;
+    /**
+     * The latest selectable date
+     */
+    latestDate?: Date;
+    /**
+     * Text to display in the footer
+     */
+    footerText?: JSX.Element | string;
+    /**
+     * A function that receives a date range object and returns a string to be rendered in the
+     * trigger button
+     */
+    format?: (dataRange: DateRangeType) => JSX.Element | string;
+    /**
+     * Callback fired when the date range changes
+     */
+    onChange?: (dateRange: DateRangeType) => unknown;
+    presets?: Preset[];
+    /**
+     * The date range to be displayed in the picker
+     */
+    range?: DateRangeType;
+    /**
+     * Prevent dates in the future from being selected
+     */
+    shouldPreventFuture?: boolean;
+    /**
+     * If true, the button will take up the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * A custom width for the RangeSelector component (in px, %, or other CSS units)
+     */
+    width?: number | string;
+    /**
+     * A custom React component to use as the trigger button. The component should accept onClick,
+     * children, and other standard button props.
+     */
+    customTriggerComponent?: ComponentType<Record<string, any>>;
+};
+declare const RangeSelector: {
+    ({ align, buttonVariant, earliestDate, latestDate, format, fullWidth, footerText, onChange, presets, range, shouldPreventFuture, customTriggerComponent, width, ...props }: RangeSelectorProps): JSX.Element;
+    displayName: string;
+};
+
+type NodeElementObject = {
+    attributes?: Record<string, string>;
+    children?: NodeLeafObject[];
+    type?: string;
+    url?: string;
+};
+type NodeObject = NodeElementObject | NodeLeafObject;
+type NodeLeafObject = {
+    attributes?: Record<string, string>;
+    bold?: boolean;
+    code?: boolean;
+    italic?: boolean;
+    parent?: NodeObject;
+    children?: NodeLeafObject[];
+    strikethrough?: boolean;
+    text?: string;
+    type?: string;
+    url?: string;
+    underline?: boolean;
+};
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: ReactEditor;
+        Element: NodeElementObject;
+        Text: NodeLeafObject;
+    }
+}
+
+type RichTextEditorProps = {
+    /**
+     * Optional id to set aria-labelledby
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * @ignore
+     */
+    'data-testid'?: string;
+    /**
+     * Determines whether editor is clickable/read-only
+     */
+    disabled?: boolean;
+    /**
+     * Formats to enable in editor, restricted to rteFormatTypes
+     */
+    enabledFormats?: (keyof typeof rteFormatTypes)[];
+    /**
+     * Function to be called after editor state update
+     */
+    onChange?: ((value: NodeElementObject[]) => void) | undefined;
+    /**
+     * Function to be called when editor loses focus
+     */
+    onBlur?: ((value: NodeElementObject[]) => void) | undefined;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Value of editor based on controlled input
+     */
+    value?: Descendant[];
+    /**
+     * Whether to update the editor when the value prop changes
+     */
+    useExternalValue: boolean;
+    /**
+     * Custom height of editor
+     */
+    height?: string | undefined;
+};
+declare const RichTextEditor: {
+    ({ enabledFormats, value, onChange, onBlur, placeholder, disabled, ariaLabelledBy, useExternalValue, "data-testid": dataTestId, height, ...otherProps }: RichTextEditorProps): JSX.Element;
+    displayName: string;
+};
+
+declare const rteSerializeToHTML: (value: Descendant[]) => string | null;
+declare const rteDeserializeHTML: (htmlString: string) => (Descendant | string | null)[] | Descendant | string | null | undefined;
+
+declare const screenReaderOnlyStyle: styled_components.FlattenSimpleInterpolation;
+type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Display content _only_ when it's focused.
+     */
+    focusable?: boolean;
+    /**
+     * The text that will appear to screenreaders but not be displayed on screen
+     * (alternatively you can pass children)
+     */
+    text?: ReactNode;
+};
+declare const ScreenReaderOnly: {
+    ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type GroupOptionType = {
+    disabled?: boolean;
+    groupLabel?: string;
+    groupOptions: OptionType[];
+};
+type OptionType = {
+    disabled?: boolean;
+    label?: string;
+    value?: boolean | number | string;
+};
+type OptionsType = GroupOptionType[] | OptionType[];
+type SelectProps = Omit<ComponentPropsWithRef<'select'>, 'placeholder'> & {
+    /**
+     * Optional accessible label for when there is no accompanying <label> element
+     */
+    ariaLabel?: string;
+    /**
+     * Disables Select
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Select into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover';
+    /**
+     * Should Select occupy 100% of available space
+     */
+    fullWidth?: boolean;
+    /**
+     * Indicates that there is an error with the Select
+     */
+    hasError?: boolean;
+    /**
+     * Change option's label name from "label"
+     */
+    labelName?: string;
+    /**
+     * Allow multiple options in the list to be selected at the same time
+     */
+    multiple?: boolean;
+    /**
+     * Data structure to populate option labels & values. (`{ label, value, disabled }`)
+     * Additionally this can be used to render option groupings. (`{ groupLabel, groupOptions, disabled }`)
+     */
+    options: OptionsType;
+    /**
+     * Value of text to appear by default as first option in Select, use `null` for none
+     */
+    placeholder?: string | null | undefined;
+    /**
+     * Prevent the placeholder value from being selected
+     */
+    preventPlaceholderSelection?: boolean;
+    /**
+     * Make Select a required element
+     */
+    required?: boolean;
+    /**
+     * Change option's value name from "value"
+     */
+    valueName?: string;
+};
+declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLSelectElement>>;
+
+type ComponentPropsWithoutRefWithoutOnChange = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
+type SliderProps = ComponentPropsWithoutRefWithoutOnChange & {
+    /**
+     * aria-label for screen-readers to apply to the thumbs. Use an array for more than one thumb.
+     * The length of the array must match the number of thumbs in the value array.
+     */
+    ariaLabel?: string[] | string | undefined;
+    /**
+     * aria-labelledby for screen-readers to apply to the thumbs. Used when slider rendered with separate label.
+     * Use an array for more than one thumb. The length of the array must match the number of thumbs in the value array.
+     */
+    ariaLabelledby?: string[] | string | undefined;
+    /**
+     *
+     */
+    ariaValuetext?: string | ((state: Record<string, unknown>) => unknown);
+    /**
+     * @ignore
+     */
+    'data-testid'?: string;
+    /**
+     * Determines the initial position(s) of the thumb(s) and the number of thumbs.
+     *
+     * If a number is passed a slider with one thumb will be rendered.
+     * If an array is passed each value will determine the position of one thumb.
+     * The values in the array must be sorted.
+     *
+     * Don't pass a default value if the slider is controlled (i.e. if you already
+     * use the `value` prop).
+     */
+    initialValue?: number[] | number | undefined;
+    /**
+     * If `true` the thumbs can't be moved.
+     */
+    disabled?: boolean;
+    /**
+     * The maximum value of the slider.
+     */
+    max?: number;
+    /**
+     * The minimum value of the slider.
+     */
+    min?: number;
+    /**
+     * Callback called on every value change. The function will be called with two arguments,
+     * the first being the new value(s) the second being thumb index. **It does not return an event.**
+     */
+    onChange?: (value: number, index?: number) => unknown;
+    /**
+     * Value to be added or subtracted on each step the slider makes. Must be greater than zero.
+     * max - min should be evenly divisible by the step value.
+     */
+    step?: number;
+    /**
+     * Like 'initialValue' but for controlled components.
+     */
+    value?: number[] | number;
+};
+declare const Slider: {
+    ({ ariaLabel, ariaLabelledby, ariaValuetext, disabled, initialValue, max, min, onChange, step, value, "data-testid": passedDataTestId, ...otherProps }: SliderProps): JSX.Element;
+    displayName: string;
+};
+
+type StackProps<T extends ElementType> = ComponentPropsWithoutRef<T> & PropsWithChildren & {
+    /**
+     * The gap between each item in the stack. Should be one of the spacing values from the theme
+     */
+    gap?: keyof DefaultTheme['spacing'];
+    /**
+     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
+     * The default behavior is `vertical`.
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The element (e.g. div, span, p) or component to render as the root element.
+     */
+    renderAs?: T | 'div';
+};
+declare const Stack: react.ForwardRefExoticComponent<Omit<StackProps<ElementType>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type SwitchProps = Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> & {
+    /**
+     * Allows user to override default "on" color
+     */
+    colorOverride?: string;
+    /**
+     * Controls the `aria-disabled` property of the Switch
+     */
+    disabled?: boolean;
+    /**
+     * Determines if switch is checked
+     */
+    isChecked?: boolean;
+    /**
+     * Callback function invoked when the switch checked state changes
+     */
+    onChange?: (isChecked: boolean) => unknown;
+    /**
+     * Controls wether or not the ON / OFF text is shown
+     */
+    hideText?: boolean;
+};
+declare const Switch: {
+    ({ disabled, isChecked, onChange, colorOverride, hideText, ...otherProps }: SwitchProps): JSX.Element;
+    displayName: string;
+};
+
+declare const alignMap: {
+    left: string;
+    right: string;
+    center: string;
+    justify: string;
+};
+declare const renderMap: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    div: string;
+    label: string;
+    p: string;
+    pre: string;
+    span: string;
+};
+declare const variantStyleMap: {
+    headline1: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    headline2: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    headline3: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    overline: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    body1: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    body2: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    caption: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    subtitle1: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    subtitle2: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+    monospace: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+};
+type TextProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: keyof typeof alignMap;
+    /**
+     * Displays text as bold type
+     */
+    bold?: boolean;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Allows user to override default button colors
+     */
+    colorOverride?: string;
+    /**
+     * Used to indicate text is part of a "disabled" UI
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Displays text as italic type
+     */
+    italic?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * The type of html element to render as
+     */
+    renderAs?: keyof typeof renderMap;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap;
+};
+declare const Text: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: keyof typeof alignMap;
+    /**
+     * Displays text as bold type
+     */
+    bold?: boolean;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Allows user to override default button colors
+     */
+    colorOverride?: string;
+    /**
+     * Used to indicate text is part of a "disabled" UI
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Displays text as italic type
+     */
+    italic?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * The type of html element to render as
+     */
+    renderAs?: keyof typeof renderMap;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap;
+} & react.RefAttributes<HTMLElement>>;
+
+type IconThumbnailProps = {
+    /**
+     * The desired display of the thumbnail, either wide or square
+     */
+    thumbnailImageType?: never;
+    /**
+     * The URL of the thumbnail image to display
+     */
+    thumbnailUrl?: never;
+    /**
+     * The type of {@link https://wistia.github.io/vhs/?path=/docs/components-icon--docs Icon} to use in place of a thumbnail image
+     */
+    icon: IconNameType;
+    /**
+     * The color of the icon
+     */
+    iconColor?: string;
+};
+type ImageThumbnailProps = {
+    /**
+     * The desired display of the thumbnail, either wide or square
+     */
+    thumbnailImageType?: 'square' | 'wide' | undefined;
+    /**
+     * The URL of the thumbnail image to display
+     */
+    thumbnailUrl: string[] | string | null;
+    /**
+     * The type of {@link https://wistia.github.io/vhs/?path=/docs/components-icon--docs  Icon} to use in place of a thumbnail image
+     */
+    icon?: never;
+    /**
+     * The color of the icon
+     */
+    iconColor?: never;
+};
+type ThumbnailProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Text that displays in the bottom right hand corner of the thumbnail, usually the media duration
+     */
+    bottomRightText?: string;
+    /**
+     * Icon to display in bottom right corner of the thumbnail
+     */
+    bottomRightIcon?: IconNameType;
+    /**
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
+     */
+    gradientBackground?: GradientNameType;
+    /**
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     */
+    width?: string;
+} & (IconThumbnailProps | ImageThumbnailProps);
+declare const Thumbnail: {
+    ({ bottomRightText, thumbnailUrl, thumbnailImageType, icon, bottomRightIcon, width, gradientBackground, iconColor, ...otherProps }: ThumbnailProps): JSX.Element;
+    displayName: string;
+};
+
+type ThumbnailCollageProps = {
+    /**
+     * An array of image urls to show in the thumbnail. Supports up to 3 images
+     */
+    thumbnailUrls: string[];
+    /**
+     * The type of gradient to show when there are no thumbnail urls
+     */
+    gradientBackground?: GradientNameType;
+};
+declare const ThumbnailCollage: ({ thumbnailUrls, gradientBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
+
+type ToastVariants = 'dangerous' | 'error' | 'success' | 'warning';
+type ToastProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * A function that will be invoked when the action button is clicked instead of the internal handler
+     */
+    actionInterceptor?: (() => void) | undefined;
+    /**
+     * The text of the "action" button on the right
+     */
+    actionLabel?: string | undefined;
+    /**
+     * A hex value that will override the color values defined by `variant`
+     */
+    colorOverride?: string | undefined;
+    /**
+     * @ignore
+     * Avoids animation and positions Toast in normal flow for documentation/testing purposes
+     */
+    renderInPlace?: boolean;
+    /**
+     * Determines whether Toast is displayed
+     */
+    isOpen?: boolean;
+    /**
+     * The message displayed in the toast
+     */
+    message: string;
+    /**
+     * Callback that is invoked when toasts closes (via timeout or close button)
+     */
+    onClose: () => void;
+    /**
+     * The time in ms before the Toast calls the onClose function
+     */
+    timeout?: number | undefined;
+    /**
+     * The kind of Toast to display
+     */
+    variant?: ToastVariants | undefined;
+};
+declare const Toast: react.MemoExoticComponent<({ actionInterceptor, actionLabel, colorOverride, renderInPlace, isOpen, message, onClose, timeout, variant, ...otherProps }: ToastProps) => react_jsx_runtime.JSX.Element>;
+
+type UseToastProps = {
+    message: string;
+    variant?: ToastVariants;
+    actionLabel?: string;
+    actionInterceptor?: () => void;
+    timeout?: number;
+    colorOverride?: string | undefined;
+};
+type UseToastFn = (props: UseToastProps) => void;
+
+declare const useToast: () => UseToastFn;
+
+declare const ToastProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+type TooltipProps = Omit<ComponentPropsWithoutRef<'div'>, 'id'> & {
+    /**
+     * The node that will be wrapped by the Tooltip
+     */
+    children: ReactNode;
+    /**
+     * Where the tooltip should appear in relation to wrapped component
+     */
+    direction?: 'bottom' | 'left' | 'right' | 'top';
+    /**
+     * Length of time to wait before dismissing Tooltip for click eventType
+     */
+    duration?: boolean | number | string;
+    /**
+     * The type of event that triggers display of Tooltip
+     */
+    eventType?: 'click' | 'hover';
+    /**
+     * @ignore
+     * Force a Tooltip to display it's content without user interaction (for debugging)
+     */
+    forceState?: 'open' | undefined;
+    /**
+     * ID for tooltip (automatically created if omitted)
+     */
+    id?: string | null | undefined;
+    /**
+     * The content that will appear in the Tooltip popup
+     */
+    label: ReactNode;
+    /**
+     * The maximum number of characters to display inside the Tooltip
+     */
+    maxChars?: number | null;
+    /**
+     * Whether content within the label should wrap
+     */
+    shouldWrap?: boolean;
+    /**
+     * Color to override background of the tooltip.
+     */
+    backgroundColorOverride?: string;
+    /**
+     * Color to override font color of the tooltip.
+     */
+    fontColorOverride?: string;
+};
+declare const Tooltip: {
+    ({ label, direction, duration, eventType, forceState, maxChars, children, id, shouldWrap, backgroundColorOverride, fontColorOverride, ...otherProps }: TooltipProps): JSX.Element;
+    displayName: string;
+};
+
+type TruncateProps = {
+    /**
+     * Prevent ellipsis from truncating mid-word
+     */
+    breakOnWords?: boolean;
+    /**
+     * The string to be truncated
+     */
+    children: string | null | undefined;
+    /**
+     * The maximum number of characters to display inside the Tooltip
+     */
+    maxChars: number;
+    /**
+     * A string to append to the truncated string
+     */
+    terminator?: string;
+};
+declare const Truncate: {
+    ({ children, maxChars, terminator, breakOnWords, }: TruncateProps): JSX.Element | null;
+    displayName: string;
+};
+
+type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
+    /**
+     * An optional accessible description for the logo
+     */
+    description?: string;
+    /**
+     * Height, in pixels, of the logo
+     */
+    height?: number;
+    /**
+     * @ignore
+     * Change the color when hovering over the logo
+     */
+    hoverColor?: string;
+    /**
+     * Display just the icon portion of the logo (ie. hide `Wistia` text)
+     * note: there is no analogue to this because by brand guidelines, the
+     * `Wistia` text must not be displayed without the "flags" iconography
+     */
+    iconOnly?: boolean;
+    /**
+     * If provided, will wrap the logo in a link
+     */
+    href?: string;
+    /**
+     * An accessible title for the logo (defaults to "Wistia Logo")
+     */
+    title?: string;
+    /**
+     * Style of the logo
+     */
+    variant?: 'dark' | 'light' | 'standard';
+};
+declare const WistiaLogo: {
+    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { ActionModal, type ActionModalProps, Avatar, type AvatarInstanceType, type AvatarProps, Backdrop, type BackdropProps, BackgroundImage, type BackgroundImageProps, Badge, type BadgeColorScheme, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxMenuItem, type CheckboxMenuItemProps, type CheckboxProps, ClickArea, type ClickAreaProps, CloseButton, type CloseButtonProps, CollapsibleGroup, type CollapsibleGroupProps, Divider, type DividerProps, Ellipsis, type EllipsisProps, FileSelect, type FileSelectProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldError, type FormFieldErrorProps, type FormFieldProps, FormGlobalError, type FormProps, type FormState, FullScreenModal, type FullScreenModalProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, LabelDescription, type LabelDescriptionProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuButton, type MenuButtonProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, Modal, ModalBase, type ModalBaseContentProps, ModalBody, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, ModalHeader, type ModalProps, type NodeElementObject, type OnBeforeHideInterface, type OptionsType, Paper, type PaperProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioMenuItem, type RadioMenuItemProps, type RadioProps, RangeSelector, type RangeSelectorProps, RichTextEditor, type RichTextEditorProps, ScreenReaderOnly, type ScreenReaderOnlyProps, Select, type SelectProps, Slider, type SliderProps, Stack, type StackProps, SubMenu, Switch, type SwitchProps, Text, type TextProps, Thumbnail, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Toast, type ToastProps, ToastProvider, type ToastVariants, Tooltip, type TooltipProps, Truncate, type TruncateProps, VHSProvider, type VHSProviderProps, type VHSTheme, WistiaLogo, type WistiaLogoProps, type WrapperProviderLinkType, copyToClipboard, datetimeHelpers, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, mq, objectHelpers, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, stringHelpers, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };