@wistia/ui 0.19.4 → 0.20.0

package/dist/index.d.mts

@@ -1,4390 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, AnchorHTMLAttributes, MouseEvent, ReactElement, ElementType, ChangeEvent, PropsWithChildren, InputHTMLAttributes, Ref, SyntheticEvent, HTMLAttributes, ForwardRefExoticComponent, RefAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentProps } from 'react';
-import { UseFilePickerConfig, FilePickerReturnTypes, ExtractContentTypeFromConfig, useImperativeFilePickerConfig, ImperativeFilePickerReturnTypes } from 'use-file-picker/types';
-export * from 'use-file-picker/types';
-import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
-import { Color } from 'culori/fn';
-import * as Ariakit from '@ariakit/react';
-import * as styled_components from 'styled-components';
-import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
-import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
-import { PopoverContentProps } from '@radix-ui/react-popover';
-import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
-import { TabsProps as TabsProps$1, TabsContentProps as TabsContentProps$1, TabsListProps as TabsListProps$1, TabsTriggerProps as TabsTriggerProps$1 } from '@radix-ui/react-tabs';
-export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
-
-type UIProviderProps = {
-    children: ReactNode;
-};
-declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * 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<void>} - Promise object that resolves when the text is copied
- */
-declare const copyToClipboard: (textToCopy: string) => Promise<void>;
-
-type DateOnlyStringOptions$1 = {
-    timeZone?: string;
-    /**
-     * When set to true, the returned string will omit the year.
-     * e.g. "Jun 3" instead of "Jun 3, 2021"
-     */
-    omitYear?: boolean;
-};
-
-declare const dateTime: {
-    buildTimeDuration: (numberOfMilliseconds: number) => Duration;
-    dateOnlyISOString: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
-    dateOnlyString: (date: unknown, { timeZone, omitYear }?: DateOnlyStringOptions$1) => string;
-    dateOnlyStringForSentence: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
-    dateOnlyStringNumeric: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
-    dateTimeRounded: DateTimeRoundedOverload;
-    dateTimeString: (date: Date | number | string | null | undefined, { timeZone, omitYear }?: DateOnlyStringOptions) => string;
-    dateTimeStringForSentence: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
-    dateTimeToDate: (dateTime: Partial<WistiaDateTimeObject> | null | undefined) => Date | null;
-    dateTimeToISO: (dateTime: Partial<WistiaDateTimeObject>) => string | null;
-    dateToDateTime: (date: Date | null | undefined) => WistiaDateTimeObject | null;
-    dateUTCOffset: (date: Date) => string;
-    dayOfWeekString: (date: Date | null, { timeZone }?: DateOnlyStringOptions) => string;
-    mediaDurationString: (numberOfMilliseconds: number) => string;
-    millisecondsToDurationISOString: (numberOfMilliseconds: number) => string;
-    monthDayStringNumeric: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
-    sessionDurationString: (numberOfMilliseconds: number) => string;
-    timeAgoString: (date: Date, { nowAnchor, includeTime }?: TimeAgoOptions) => string;
-    timeOnlyString: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
-};
-
-declare const mergeRefs: <T = unknown>(refs: (LegacyRef<T> | MutableRefObject<T> | null | undefined)[]) => RefCallback<T>;
-
-declare const mq: {
-    xsAndUp: () => string;
-    smAndUp: () => string;
-    mdAndUp: () => string;
-    lgAndUp: () => string;
-    xlAndUp: () => string;
-    xsAndDown: () => string;
-    smAndDown: () => string;
-    mdAndDown: () => string;
-    lgAndDown: () => string;
-    xlAndDown: () => string;
-};
-
-type AriaLiveContextType = {
-    announce: (message: string, politeness?: 'assertive' | 'polite') => void;
-};
-declare const useAriaLive: () => AriaLiveContextType;
-
-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 | null>, Rect];
-
-/**
- * Hook that wraps `useFilePicker` from the use-file-picker library
- *
- * @param config Optional configuration for the file picker
- */
-declare const useFilePicker: <T extends UseFilePickerConfig = UseFilePickerConfig>(config?: T) => FilePickerReturnTypes<ExtractContentTypeFromConfig<T>>;
-/**
- * Hook that wraps `useImperativeFilePicker` from the use-file-picker library
- *
- * @param config Optional configuration for the imperative file picker
- */
-declare const useImperativeFilePicker: <T extends useImperativeFilePickerConfig = useImperativeFilePickerConfig>(config?: T) => ImperativeFilePickerReturnTypes<ExtractContentTypeFromConfig<T>>;
-
-type UseFocusTrapOptions = {
-    disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | 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;
-};
-type UseIsHoveredReturnType = [boolean, HoverProps, (hovered: boolean) => void];
-declare const useIsHovered: () => UseIsHoveredReturnType;
-
-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 EventHandler = (event: KeyboardEvent) => void;
-type KeyFilterPredicate = (evt: KeyboardEvent) => boolean;
-type KeyFilter = KeyFilterPredicate | boolean | string | null | undefined;
-type UseKeyOptions = {
-    eventName?: string;
-    eventTarget?: Parameters<typeof useEvent>[2];
-    eventOptions?: Parameters<typeof useEvent>[3];
-};
-declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName, eventTarget, eventOptions }?: UseKeyOptions) => void;
-
-type SetItemType = Storage['setItem'];
-declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
-
-declare const useLockBodyScroll: (locked: boolean) => void;
-
-type UseMqReturnType = {
-    isXlAndUp: boolean;
-    isLgAndUp: boolean;
-    isMdAndUp: boolean;
-    isSmAndUp: boolean;
-    isXsAndUp: boolean;
-    isXsAndDown: boolean;
-    isSmAndDown: boolean;
-    isMdAndDown: boolean;
-    isLgAndDown: boolean;
-    isXlAndDown: boolean;
-};
-declare const useMq: () => UseMqReturnType;
-type UseActiveMqReturnType = keyof UseMqReturnType;
-declare const useActiveMq: () => UseActiveMqReturnType[];
-
-type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
-declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
-
-declare const usePreviousValue: <T>(value: T) => T | undefined;
-
-declare const colorSchemeOptions: readonly ["standard", "inherit", "error", "info", "success", "warning", "blue", "green", "orange", "pink", "purple", "red", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
-type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
-type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * @ignore For use in creating navs - will override any colorScheme prop
-     */
-    __nav?: boolean;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Children
-     */
-    children: ReactNode;
-};
-/**
- * A wrapper to apply a color scheme to its children.
- */
-declare const ColorSchemeWrapper: {
-    ({ __nav, colorScheme, children, ...props }: ColorSchemeWrapperProps): JSX.Element;
-    displayName: string;
-};
-
-type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
-
-type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type ReactRouterLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
-    reloadDocument?: boolean;
-    replace?: boolean;
-    state?: any;
-    preventScrollReset?: boolean;
-    viewTransition?: boolean;
-};
-type BaseProps$2 = {
-    /**
-     * 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);
-    /**
-     * Text that appears inside of the link
-     *
-     * @type ReactNode
-     */
-    children: ReactNode;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Disables the link
-     */
-    disabled?: boolean;
-    /**
-     * Icon to display on the left side of the link. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: ReactNode | undefined;
-    /**
-     * Icon to display on the right side of the link. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: ReactNode | undefined;
-    /**
-     * Type of link to display
-     *
-     *   * `email` creates a mailto
-     *   * `phone` creates a telephone number
-     *   * `external` will open links in a new window
-     */
-    type?: LinkTypes | undefined;
-    /**
-     * Controls the underline behavior of the link
-     *
-     * * `none` - no underline (default)
-     * * `always` - always show underline
-     * * `hover` - show underline only on hover
-     */
-    underline?: 'always' | 'hover' | 'none';
-};
-type LinkAsLinkProps = BaseProps$2 & ComponentPropsWithRef<'a'> & ReactRouterLinkProps & {
-    href: string | undefined;
-    type?: LinkTypes;
-};
-type LinkAsButtonProps = BaseProps$2 & ComponentPropsWithRef<'button'> & {
-    href?: never;
-    type?: 'button' | 'reset' | 'submit';
-};
-type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
-/**
- * Links are used for navigation. If no `href` is supplied, a button that is visually styled to appear as a link
- * is rendered. If used in a `react-router` context, their [Link](https://reactrouter.com/en/main/components/link).
- * component is used, otherwise a native `a` element.
- *
- * This means in addition to its own props, `Link` can use props from `react-router`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
- * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
- */
-declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
-type Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
-type AtLeastOneBreakpoint<T, U = {
-    [K in keyof T]: Pick<T, K>;
-}> = Partial<T> & U[keyof U];
-type ResponsiveObject<T> = AtLeastOneBreakpoint<Record<Breakpoints, T>> & {
-    base: T;
-};
-
-type ButtonSizes = 'lg' | 'md' | 'sm' | 'xl';
-type BaseButtonProps = {
-    /**
-     * Text that appears inside of the button
-     *
-     * @type ReactNode
-     */
-    children: ReactNode;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Disables the button
-     */
-    disabled?: boolean;
-    /**
-     * Show a spinner when the button is in a loading state
-     */
-    isLoading?: boolean;
-    /**
-     * Icon to display on the left side of the button. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: ReactNode | undefined;
-    /**
-     * Callback function invoked when the button is clicked
-     *
-     * @type (event: MouseEvent) => void
-     */
-    onClick?: ((event: MouseEvent) => void) | undefined;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: 'active' | 'focus' | 'hover' | undefined;
-    /**
-     * If true, the button will fill its container
-     *
-     * @type boolean | ResponsiveObject<boolean>
-     */
-    fullWidth?: ResponsiveObject<boolean> | boolean;
-    /**
-     * Provides a button without any styling (useful for wrapping another element)
-     */
-    unstyled?: boolean | undefined;
-    /**
-     * Icon to display on the right side of the button. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: ReactNode | undefined;
-    /**
-     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
-     */
-    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
-    /**
-     * A visual style for the button
-     */
-    variant?: ButtonVariants;
-};
-type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & LinkProps & {
-    href: string | undefined;
-    children: ReactNode;
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    beforeAction?: (() => Promise<void>) | (() => void);
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    type?: LinkTypes;
-};
-type ButtonAsButtonProps = BaseButtonProps & ComponentPropsWithRef<'button'> & {
-    /**
-     * If supplied, the button will render as a link
-     */
-    href?: never;
-    type?: 'button' | 'reset' | 'submit';
-    children: ReactNode;
-};
-type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
-/**
- * Button component is used to trigger an action or event,
- * such as submitting a form, opening a Dialog, canceling an
- * action, or performing a delete operation. It replaces the HTML `<button>` element,
- * unless an `href` attribute is passed, in which it will render an `<a>` element.
- */
-declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    beforeAction?: (() => Promise<void>) | (() => void);
-    children: ReactNode;
-    colorScheme?: ColorSchemeTypes;
-    disabled?: boolean;
-    leftIcon?: ReactNode | undefined;
-    rightIcon?: ReactNode | undefined;
-    type?: LinkTypes | undefined;
-    underline?: "always" | "hover" | "none";
-} & Omit<react.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
-    reloadDocument?: boolean;
-    replace?: boolean;
-    state?: any;
-    preventScrollReset?: boolean;
-    viewTransition?: boolean;
-} & {
-    href: string | undefined;
-    type?: LinkTypes;
-} & {
-    href: string | undefined;
-    children: ReactNode;
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    beforeAction?: (() => Promise<void>) | (() => void);
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    type?: LinkTypes;
-}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    beforeAction?: (() => Promise<void>) | (() => void);
-    children: ReactNode;
-    colorScheme?: ColorSchemeTypes;
-    disabled?: boolean;
-    leftIcon?: ReactNode | undefined;
-    rightIcon?: ReactNode | undefined;
-    type?: LinkTypes | undefined;
-    underline?: "always" | "hover" | "none";
-} & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
-    href?: never;
-    type?: "button" | "reset" | "submit";
-} & {
-    href: string | undefined;
-    children: ReactNode;
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    beforeAction?: (() => Promise<void>) | (() => void);
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    type?: LinkTypes;
-}, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
-type ToastProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Action can be undefined (default dismiss button), a Button component or false to hide the dismiss button
-     */
-    action?: ReactElement<typeof Button> | undefined;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes | undefined;
-    /**
-     * Optional `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * The message displayed in the toast
-     */
-    message: ReactNode;
-};
-
-type Position = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
-type UseToastProps = ToastProps & {
-    position?: Position;
-    duration?: number;
-};
-type UseToastReturnType = ({ message, icon, colorScheme, action, position, duration, }: UseToastProps) => void;
-declare const useToast: () => UseToastReturnType;
-
-declare const useWindowSize: (interval?: number) => {
-    width: number;
-    height: number;
-};
-
-type ActionButtonProps = {
-    /**
-     * @override
-     * The text to display for the ActionButton
-     *
-     */
-    children: ReactNode;
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon: JSX.Element;
-    /**
-     * @override
-     * Disables the button
-     */
-    disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: 'focus' | 'hover' | undefined;
-    /**
-     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
-     */
-    hoverColorScheme?: ColorSchemeTypes;
-    /**
-     * Changes the secondary icon for different use cases
-     */
-    variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
-} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
-/**
- * Action Button component is used as one of a group of main actions on the page. It composes [Button]().
- */
-declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
-    /**
-     * @override
-     * The text to display for the ActionButton
-     *
-     */
-    children: ReactNode;
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon: JSX.Element;
-    /**
-     * @override
-     * Disables the button
-     */
-    disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: "focus" | "hover" | undefined;
-    /**
-     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
-     */
-    hoverColorScheme?: ColorSchemeTypes;
-    /**
-     * Changes the secondary icon for different use cases
-     */
-    variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsButtonProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref"> | Omit<{
-    /**
-     * @override
-     * The text to display for the ActionButton
-     *
-     */
-    children: ReactNode;
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon: JSX.Element;
-    /**
-     * @override
-     * Disables the button
-     */
-    disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: "focus" | "hover" | undefined;
-    /**
-     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
-     */
-    hoverColorScheme?: ColorSchemeTypes;
-    /**
-     * Changes the secondary icon for different use cases
-     */
-    variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsLinkProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
-type AvatarInstanceType = 'image' | 'initials';
-type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
-type AvatarSizeType = 'lg' | 'md' | 'sm';
-type AvatarStatus = {
-    type: AvatarInstanceType;
-    state: AvatarImageLoadStateType;
-};
-type AvatarProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The height and width of the avatar (overrides size prop)
-     */
-    heightAndWidth?: number;
-    /**
-     * The URL of the image to display
-     */
-    imageUrl?: string | null;
-    /**
-     * A string that will deterministically set the initials & background color of the avatar
-     *
-     * _note: only first initial shown regardless of characters provided_
-     */
-    name?: string | null;
-    /**
-     * A predefined size for the avatar
-     */
-    size?: AvatarSizeType;
-    /**
-     * A callback that is invoked after the image has loaded or failed to load
-     */
-    onImageLoad?: (avatarStatus: AvatarStatus) => void;
-};
-/**
- * An avatar uses a photo or initials to represent an identity.
- */
-declare const Avatar: {
-    ({ imageUrl, heightAndWidth, name, size, onImageLoad, ...props }: AvatarProps): JSX.Element;
-    displayName: string;
-};
-
-type BadgeVariants = 'default' | 'outline';
-type BadgeProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
-     */
-    icon?: JSX.Element;
-    /**
-     * The text to display in the `Badge`
-     */
-    label?: ReactNode;
-    /**
-     * The variant of the `Badge`
-     */
-    variant?: BadgeVariants;
-};
-/**
- * A `Badge` is a compact label, with optional icon, to convey status or context.
- */
-declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
-     */
-    icon?: JSX.Element;
-    /**
-     * The text to display in the `Badge`
-     */
-    label?: ReactNode;
-    /**
-     * The variant of the `Badge`
-     */
-    variant?: BadgeVariants;
-} & react.RefAttributes<HTMLDivElement>>;
-
-type BannerProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The main text content displayed in the banner
-     */
-    bodyText: ReactNode;
-    /**
-     * Optional heading text displayed at the top of the banner content
-     */
-    headingText?: string;
-    /**
-     * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
-     */
-    icon?: JSX.Element;
-    /**
-     * Controls the visual prominence of the banner
-     */
-    prominence?: 'primary' | 'secondary';
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Optional image element to display in the banner
-     */
-    image?: JSX.Element | undefined;
-    /**
-     * Controls the layout direction. If set to 'auto', the banner will switch between horizontal and vertical based on the container width.
-     */
-    orientation?: 'auto' | 'horizontal' | 'vertical';
-    /**
-     * Primary call-to-action element (typically a [Button]() of the `solid` variant)
-     */
-    primaryAction?: ReactNode;
-    /**
-     * Secondary call-to-action element (typically a [Button]() of the `outline` variant)
-     */
-    secondaryAction?: ReactNode;
-    /**
-     * Optional callback function when the close button is clicked. If not provided, the close button will not be displayed.
-     */
-    onClose?: () => void;
-};
-/**
- * The `Banner` component is for displaying contextual information to the user such as alerts or feature announcements.
- */
-declare const Banner: {
-    ({ bodyText, colorScheme, headingText, icon, image, onClose, orientation, primaryAction, prominence, secondaryAction, ...props }: BannerProps): JSX.Element;
-    displayName: string;
-};
-
-type BannerImageProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The URL of the image to display in the banner
-     */
-    src: string;
-    /**
-     * Alternative text description of the image for accessibility
-     */
-    alt?: string;
-    /**
-     * Position of the image within the banner layout. Only applies in horizontal orientation.
-     */
-    alignment?: 'left' | 'right';
-};
-declare const BannerImage: ({ alignment, alt, src, ...props }: BannerImageProps) => react_jsx_runtime.JSX.Element;
-
-type UnknownRecord = Record<string, unknown>;
-type PropsOf<Component extends ElementType> = ComponentPropsWithoutRef<Component>;
-type ExtendedProps<Props = UnknownRecord, OverrideProps = UnknownRecord> = Omit<Props, keyof OverrideProps> & OverrideProps;
-type ComponentProp<Component extends ElementType> = {
-    /**
-     * The component or HTML element to render as the root instead of the default.
-     */
-    renderAs?: Component;
-};
-/**
- * extend the polymorphic component props to always include children
- */
-type PolymorphicComponentProps<Component extends ElementType, Props = UnknownRecord> = ExtendedProps<PropsOf<Component>, ComponentProp<Component> & Props> & {
-    children?: ReactNode;
-    ref?: ComponentPropsWithRef<Component>['ref'];
-};
-
-type Spacings = 'space-00' | 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09';
-
-type JustifyContentType =
-  | 'center'
-  | 'flex-end'
-  | 'flex-start'
-  | 'space-around'
-  | 'space-between'
-  | 'space-evenly';
-
-type AlignContentType =
-  | 'center'
-  | 'flex-end'
-  | 'flex-start'
-  | 'space-around'
-  | 'space-between'
-  | 'stretch';
-
-type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
-
-type AlignSelfType = 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
-
-type DirectionType = 'column-reverse' | 'column' | 'row-reverse' | 'row';
-
-type FillType = boolean | 'horizontal' | 'vertical';
-type Gap$1 = {
-    column: Spacings;
-    row: Spacings;
-};
-type ResponsiveGap$1 = ResponsiveObject<Gap$1 | Spacings>;
-type FlexModeType = 'equal' | 'fluid' | 'grow' | 'initial' | 'rigid';
-declare const DEFAULT_ELEMENT$1 = "div";
-/**
- * CSS property => Box prop:
- * flex-direction => direction
- * justify-content => justifyContent
- * align-items => alignItems
- * align-content => alignContent
- * flex-wrap => wrapItems
- * gap => gap
- * display: inline-flex => inline
- */
-type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
-    /**
-     * 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. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    alignContent?: AlignContentType | ResponsiveObject<AlignContentType>;
-    /**
-     * 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.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
-    /**
-     * 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. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    alignSelf?: AlignSelfType | ResponsiveObject<AlignSelfType>;
-    /**
-     * Specifies the initial main size of an item. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: Cannot be used with `flexMode` prop.*
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    basis?: ResponsiveObject<string> | string;
-    /**
-     * Pass an arbitrary child node
-     */
-    children?: ReactNode;
-    /**
-     * Specifies the main axis of the container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    direction?: DirectionType | ResponsiveObject<DirectionType>;
-    /**
-     * Specifies whether the width and/or height should fill the container.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: Cannot be used with height/width props when setting the corresponding dimension.*
-     *
-     * For example, `fill="vertical"` or `fill={true}` cannot be used with the `height` prop,
-     * and `fill="horizontal"` or `fill={true}` cannot be used with the `width` prop.
-     */
-    fill?: FillType | ResponsiveObject<FillType>;
-    /**
-     * Specifies whether the width and/or height should fill the viewport.
-     *
-     * *Note: Cannot be used with height/width props when setting the corresponding dimension.*
-     *
-     * For example, `fillViewport="vertical"` or `fillViewport={true}` cannot be used with the `height` prop,
-     * and `fillViewport="horizontal"` or `fillViewport={true}` cannot be used with the `width` prop.
-     */
-    fillViewport?: FillType;
-    /**
-     * Predefined `flex` behavior patterns. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * - `grow`: fills available space (`flex: 1 0 0`)
-     * - `initial`: default behavior (`flex: 0 1 auto`)
-     * - `equal`: equal space distribution (`flex: 1`)
-     * - `rigid`: fixed size (`flex: 0 0 auto`)
-     * - `fluid`: responsive (`flex: 1 1 auto`)
-     */
-    flexMode?: FlexModeType | ResponsiveObject<FlexModeType>;
-    /**
-     * Specifies the gaps (gutters) between rows and columns.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * Can be either a single spacing value that applies to both row and column gaps,
-     * or an object specifying different values for row and column gaps.
-     */
-    gap?: Gap$1 | ResponsiveGap$1 | Spacings;
-    /**
-     * Specifies what amount of space inside the flex container the item should take up.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: Cannot be used with `flexMode` prop.*
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    grow?: ResponsiveObject<number | string> | number | string;
-    /**
-     * Specifies the height of the box. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: Cannot be used with fill="vertical" or fillViewport="vertical"*
-     */
-    height?: ResponsiveObject<string> | string;
-    /**
-     * Make Layout behave like an inline element but still lay out its content according to flexbox model.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    inline?: ResponsiveObject<boolean> | boolean;
-    /**
-     * Specifies how the browser distributes space between and around
-     * items along the main axis of their container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    justifyContent?: JustifyContentType | ResponsiveObject<JustifyContentType>;
-    /**
-     * 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';
-    renderAs?: ElementType;
-    /**
-     * Specifies how items will shrink inside the container when the default size of
-     * items is larger than their container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: Cannot be used with `flexMode` prop.*
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    shrink?: ResponsiveObject<number> | number;
-    /**
-     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    wrapItems?: ResponsiveObject<boolean> | boolean;
-    /**
-     * Specifies the width of the box. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * *Note: Cannot be used with fill="horizontal" or fillViewport="horizontal"*
-     */
-    width?: ResponsiveObject<string> | string;
-};
-/**
- * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
- */
-declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & UnknownRecord;
-
-type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Should be at least one `Breadcrumb` component
-     */
-    children: ReactNode;
-};
-/**
- * Used to display a screens's location within a hierarchical structure. Each `Breadcrumb` is a composed version of
- * [Button](?path=/docs/components-button--docs). See it's documentation for additional functionality.
- */
-declare const Breadcrumbs: {
-    ({ children, ...props }: BreadcrumbsProps): JSX.Element;
-    displayName: string;
-};
-
-type BreadcrumbProps = ButtonAsLinkProps & {
-    /**
-     * An [Icon]() to show at the beginning of the breadcrumb
-     */
-    icon?: ButtonAsLinkProps['leftIcon'];
-    /**
-     * The text of the breadcrumb link
-     */
-    children: ReactNode;
-    /**
-     * The link to the page of the breadcrumb
-     */
-    href: string;
-};
-declare const Breadcrumb: ({ icon, href, children, ...props }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
-
-type ButtonGroupButtonSize = ButtonSizes | 'natural';
-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;
-    /**
-     * If true, the button group will collapse to a single column on small screens
-     * and the buttons will be stacked on top of each other.
-     */
-    collapseOnSmallScreens?: boolean;
-    /**
-     * The size of the buttons in the group. Setting this will override the size of any UI button passed in as a child.
-     */
-    buttonSize?: ButtonGroupButtonSize | ResponsiveObject<ButtonGroupButtonSize>;
-};
-/**
- * ButtonGroup is a layout component that groups buttons together,
- * with a standardized gap between them.
- */
-declare const ButtonGroup: {
-    ({ children, align, fullWidth, collapseOnSmallScreens, buttonSize, ...props }: ButtonGroupProps): JSX.Element | null;
-    displayName: string;
-};
-
-type BorderRadius = 'border-radius-00' | 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
-
-type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Content to be rendered inside the Card component
-     */
-    children: ReactNode;
-    /**
-     * Specifies the background and border color of the card.
-     */
-    prominence?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * Determines the color scheme for the card and its children.
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Specifies the internal padding of the card. Uses the design system's spacing scale.
-     */
-    paddingSize?: Spacings;
-    /**
-     * When true, adds a border around the card based on its colorScheme and prominence.
-     */
-    border?: boolean;
-    /**
-     * Border radius to apply to the Card
-     */
-    borderRadius?: BorderRadius;
-    /**
-     * Specifies the gaps (gutters) between rows and columns
-     */
-    gap?: BoxProps['gap'];
-    /**
-     * Specifies the height of the card.
-     */
-    height?: string;
-    /**
-     * Specifies the width of the card.
-     */
-    width?: string;
-    /**
-     * @ignore
-     */
-    alignContent?: BoxProps['alignContent'];
-    /**
-     * @ignore
-     */
-    alignItems?: BoxProps['alignItems'];
-    /**
-     * @ignore
-     */
-    alignSelf?: BoxProps['alignSelf'];
-    /**
-     * @ignore
-     */
-    basis?: BoxProps['basis'];
-    /**
-     * @ignore
-     */
-    direction?: BoxProps['direction'];
-    /**
-     * @ignore
-     */
-    fill?: BoxProps['fill'];
-    /**
-     * @ignore
-     */
-    fillViewport?: BoxProps['fillViewport'];
-    /**
-     * @ignore
-     */
-    flexMode?: BoxProps['flexMode'];
-    /**
-     * @ignore
-     */
-    grow?: BoxProps['grow'];
-    /**
-     * @ignore
-     */
-    inline?: BoxProps['inline'];
-    /**
-     * @ignore
-     */
-    justifyContent?: BoxProps['justifyContent'];
-    /**
-     * @ignore
-     */
-    order?: BoxProps['order'];
-    /**
-     * @ignore
-     */
-    shrink?: BoxProps['shrink'];
-    /**
-     * @ignore
-     */
-    wrapItems?: BoxProps['wrapItems'];
-};
-/**
- * A flexible container component that groups related content with consistent spacing and styling.
- * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
- */
-declare const Card: {
-    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX.Element;
-    displayName: string;
-};
-
-type CenterProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * A CSS max-width value
-     */
-    maxWidth?: string;
-    /**
-     * The space on either side of the content
-     */
-    gutterWidth?: Spacings;
-    /**
-     * Center child elements based on their content width
-     */
-    intrinsic?: boolean;
-    /**
-     * The content to be centered
-     */
-    children: ReactNode;
-};
-/**
- * Center component provides various ways to center content horizontally within a container.
- * It supports max-width constraints, text alignment, gutters, and intrinsic content centering.
- */
-declare const Center: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /**
-     * A CSS max-width value
-     */
-    maxWidth?: string;
-    /**
-     * The space on either side of the content
-     */
-    gutterWidth?: Spacings;
-    /**
-     * Center child elements based on their content width
-     */
-    intrinsic?: boolean;
-    /**
-     * The content to be centered
-     */
-    children: ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
-
-type CheckboxSizeType = 'lg' | 'md' | 'sm';
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "label" | "onChange" | "hideLabel"> & {
-    /**
-     * Indicates the state of the checkbox
-     */
-    checked?: boolean;
-    /**
-     * Disables checkbox
-     */
-    disabled?: boolean;
-    /**
-     * Optional ID attribute
-     */
-    id?: string | undefined;
-    /**
-     * The label for the checkbox
-     */
-    label: ReactNode;
-    /**
-     * The description for the checkbox
-     */
-    description?: ReactNode | undefined;
-    /**
-     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string | undefined;
-    /**
-     * Callback function invoked when the value changes
-     */
-    onChange?: (event: ChangeEvent) => unknown;
-    /**
-     * Indicates if the input is required
-     */
-    required?: boolean;
-    /**
-     * A predefined size for the checkbox
-     */
-    size?: CheckboxSizeType;
-    /**
-     * The value given as data when submitted with a `name`.
-     */
-    value?: string;
-    /**
-     * Whether to visually hide the label (it will still be available to screen readers)
-     */
-    hideLabel?: boolean;
-} & react.RefAttributes<HTMLInputElement>>;
-
-type ClickRegionProps = {
-    /**
-     * The content that should be clickable.
-     */
-    children: JSX.Element;
-    /**
-     * The ref to the button or link that should be clicked when the ClickRegion is clicked.
-     */
-    targetRef: RefObject<HTMLAnchorElement | HTMLButtonElement | null>;
-};
-/**
- * This allows larger elements to be interactive links or buttons while maintaining acessibility.
- *
- * For buttons, when the element is clicked, it will proxy a click event to the targetRef, which should be inside the ClickRegion.
- *
- * For links, a pseudo-element of the link is created that is the size of the ClickRegion. **Note**: this will prevent text selection
- * inside the text region.
- *
- * In either case, a link or button must be present, but can be hidden by using `ScreenReaderOnly`.
- */
-declare const ClickRegion: {
-    ({ children, targetRef }: ClickRegionProps): JSX.Element;
-    displayName: string;
-};
-
-type CollapsibleProps = {
-    /**
-     * `CollapsibleTrigger` and `CollapsibleContent` must be included somewhere inside these children.
-     */
-    children: ReactNode;
-    /**
-     * Whether the collapsible content is open or closed. If not provided, the collapsible will be uncontrolled.
-     */
-    isOpen?: boolean;
-    /**
-     * Callback for when the trigger is toggled. If not provided, the collapsible will be uncontrolled.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-};
-/**
- * Toggle the visibility of content with a trigger.
- */
-declare const Collapsible: {
-    ({ children, isOpen, onOpenChange, }: CollapsibleProps): JSX.Element;
-    displayName: string;
-};
-
-type CollapsibleTriggerProps = {
-    /**
-     * A trigger element that will toggle the collapsible content.
-     * Usually a [Button](?path=/docs/components-button--docs).
-     */
-    children: ReactNode;
-};
-declare const CollapsibleTrigger: ({ children }: CollapsibleTriggerProps) => react_jsx_runtime.JSX.Element;
-
-declare const iconMap: {
-    'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    accessibility: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    activity: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'add-folder': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'add-layout': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'add-media': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'annotation-link': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    appearance: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    archive: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'arrow-down': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'arrow-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'arrow-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'arrow-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'arrow-up-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    asterisk: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'audio-description': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'auto-scroll': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    background: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    bell: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    bolt: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    calendar: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'call-to-action': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    camera: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'camera-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-down': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-down-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-left-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-right-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'caret-up-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    channel: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    chapters: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    checkmark: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'checkmark-circle': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'checkmark-circle-outline': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'checkmark-three-quaters-circle': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'circle-slashed': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    clapboard: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    close: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'close-octagon': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'closed-captions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    cmd: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    collapse: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'collapse-diagonal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    collection: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    comments: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    company: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    compare: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'connection-okay': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'connection-poor': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'connection-strong': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'content-library': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    controls: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'cursor-click': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    delete: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    desktop: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'docs-dev': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'dots-horizontal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    download: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'edit-transcript': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'ellipses-vertical': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    embed: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    envelope: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'envelope-open': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    error: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    expand: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'expand-diagonal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'expand-horizontal': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'fast-forward': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    favorite: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'favorite-outline': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    featured: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'file-tree': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    fill: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'film-strip': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    filter: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    fit: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    fonts: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    footer: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'full-screen': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    gear: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'getting-started': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    grid: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'grip-dots-vertical': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    header: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'help-center': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    hide: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    home: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    hourglass: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    import: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    info: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    integrations: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    keyboard: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    layout: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    leave: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'light-bulb': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    link: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    list: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    live: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    localization: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    lock: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    logout: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    maximize: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    media: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    megaphone: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    menu: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    mic: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'mic-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    minimize: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    minus: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'minus-circle': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    mobile: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'more-options': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'move-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'move-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    music: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'on-air': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'open-new': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    overview: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    page: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'panel-left': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'panel-right': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'panel-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    password: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    pause: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    pencil: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    people: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    pin: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'pin-slash': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    pip: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    play: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    player: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    playlist: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    plus: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    podcast: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    preview: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'private-chat': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'private-user-sessions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    project: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'project-open': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    properties: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'question-mark': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    react: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    record: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'record-group': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    redo: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    refresh: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    replace: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    reply: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'request-video': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'revert-to-original': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    rewind: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    save: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'save-as-copy': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    scissors: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'screenshare-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'screenshare-on': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    search: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    send: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    shapes: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    share: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'sharing-permissions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    simulcast: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    sort: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    sparkle: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    speed: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    spinner: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    stats: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'switch-accounts': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    tag: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    teleprompter: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'text-size': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    thumbnail: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'thumbs-down': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'thumbs-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'timeline-vertical': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    token: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    transcript: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    transitions: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    transparency: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    trends: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'trial-unlock-clock': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    trim: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    turnstile: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    undo: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    unlock: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    upload: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'users-permissions': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'view-stream': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    volume: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'volume-off': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'volume-up': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'volume-x': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    wand: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    waveform: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    webhook: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'zoom-in': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-    'zoom-out': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
-};
-type IconNameType = keyof typeof iconMap;
-
-declare const iconSizeMap: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-};
-type IconProps = ComponentPropsWithoutRef<'svg'> & {
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Determines if the icon should use inline styles when used with [Text]() and [Heading]() components
-     */
-    useInlineStyles?: boolean;
-    /**
-     * Is Icon on a filled background?
-     */
-    invertColor?: boolean;
-    /**
-     * The size of the icon to display
-     *
-     */
-    size?: ResponsiveObject<keyof typeof iconSizeMap> | keyof typeof iconSizeMap;
-    /**
-     * @ignore
-     */
-    style?: Record<string, unknown>;
-    /**
-     * Determines which icon to display
-     */
-    type: IconNameType;
-};
-/**
- * A component that renders any of our available icons.
- *
- * For inline usage with text, wrap the Icon within a Text component
- * and set inline=true. The icon will automatically align with the text
- * using the typography-specific positioning.
- *
- * Note that icons should not be used directly for interactivity.
- * If you need an interactive element, use IconButton.
- */
-declare const Icon: {
-    ({ useInlineStyles, invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX.Element;
-    displayName: string;
-};
-
-type CollapsibleTriggerIconProps = Omit<IconProps, 'type'> & {
-    type: Extract<IconProps['type'], 'caret-left-strong' | 'caret-left' | 'caret-right-strong' | 'caret-right' | 'plus'>;
-};
-declare const CollapsibleTriggerIcon: {
-    ({ type, ...props }: CollapsibleTriggerIconProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type CollapsibleContentProps = {
-    /**
-     * The number of lines to clamp the content to when `Collapsible` is closed.
-     */
-    clamp?: number;
-    /**
-     * The content that will be hidden when `Collapsible` is closed.
-     */
-    children: CollapsibleContentProps$1['children'];
-};
-declare const CollapsibleContent: ({ clamp, children }: CollapsibleContentProps) => react_jsx_runtime.JSX.Element;
-
-type ColorGridProps = PropsWithChildren & {
-    label?: string;
-};
-declare const ColorGrid: {
-    ({ children, label }: ColorGridProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorPickerOption = {
-    /**
-     * The human-readable name of the color, if available.
-     */
-    name?: string | undefined;
-    /**
-     * The color value in hex format (e.g., "#54bbff").
-     */
-    value: string;
-};
-
-type ColorGridOptionProps = ColorPickerOption;
-declare const ColorGridOption: {
-    ({ value: rawValue, name }: ColorGridOptionProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorListProps = PropsWithChildren;
-declare const ColorList: {
-    ({ children }: ColorListProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorListGroupProps = PropsWithChildren<{
-    label: string;
-}>;
-declare const ColorListGroup: {
-    ({ label, children }: ColorListGroupProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorListOptionProps = ColorPickerOption;
-declare const ColorListOption: {
-    ({ value: rawValue, name }: ColorListOptionProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorPickerProps = PropsWithChildren<{
-    /**
-     * The color to compare against when checking contrast ratio.
-     */
-    colorForComparison?: string;
-    /**
-     * The minimum contrast ratio to enforce when `shouldEnforceMinContrast` is true.
-     */
-    minimumContrastRatio?: number;
-    /**
-     * The opacity to apply to the value color when calculating contrast.
-     */
-    opacityForContrastCalculation?: number;
-    /**
-     * Callback function invoked when the color value changes.
-     */
-    onValueChange: (value: string) => void;
-    /**
-     * The current color value in hex format (e.g., "#ff0000").
-     */
-    value: string;
-}>;
-/**
- * ColorPicker is a composable component that allows you to create a color
- * picker with various controls and options. Choose the parts you need, leave
- * out the ones you don't, and include any custom UI you need alongside its
- * subcomponents.
- */
-declare const ColorPicker: {
-    ({ children, colorForComparison, minimumContrastRatio, opacityForContrastCalculation, onValueChange, value, }: ColorPickerProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorPickerPopoverContentProps = PropsWithChildren;
-declare const ColorPickerPopoverContent: {
-    ({ children, }: ColorPickerPopoverContentProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorPickerSectionProps = PropsWithChildren;
-declare const ColorPickerSection: {
-    ({ children }: ColorPickerSectionProps): JSX.Element;
-    displayName: string;
-};
-
-type ColorPickerTriggerProps = PropsWithChildren;
-declare const ColorPickerTrigger: react.ForwardRefExoticComponent<{
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLButtonElement>>;
-
-declare const ContrastControls: {
-    (): JSX.Element;
-    displayName: string;
-};
-
-type HexColorInputProps = {
-    /**
-     * Whether the input should recieve focus automatically on mount.
-     */
-    autoFocus?: boolean;
-};
-declare const HexColorInput: {
-    ({ autoFocus }: HexColorInputProps): JSX.Element;
-    displayName: string;
-};
-
-declare const HueSlider: {
-    (): JSX.Element;
-    displayName: string;
-};
-
-type SaturationAndValuePickerProps = {
-    dataTestId?: string;
-};
-declare const SaturationAndValuePicker: {
-    ({ dataTestId, }: SaturationAndValuePickerProps): JSX.Element;
-    displayName: string;
-};
-
-declare const ValueNameOrHexCode: {
-    (): JSX.Element;
-    displayName: string;
-};
-
-type ColorSwatchProps = PropsWithChildren<{
-    derivativeIsSelected?: boolean;
-    diameterPx?: number;
-    isSelected?: boolean;
-    value: string;
-}>;
-
-type ValueSwatchProps = Pick<ColorSwatchProps, 'diameterPx'>;
-declare const ValueSwatch: {
-    ({ diameterPx, }: ValueSwatchProps): JSX.Element;
-    displayName: string;
-};
-
-declare const calculateContrast: ({ backgroundColor, foregroundColor, backgroundOpacity, }: {
-    backgroundColor: Color | string;
-    foregroundColor?: Color | string;
-    backgroundOpacity?: number;
-}) => number;
-
-type ComboboxOptionProps = {
-    value: string;
-    children: ReactNode;
-};
-declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
-type ComboboxProps = {
-    /**
-     * If true, the popover will flip to stay within the viewport
-     */
-    flipPopover?: Ariakit.ComboboxPopoverProps['flip'];
-    /**
-     * If true, the combox will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * The options to display in the combobox
-     */
-    children: ReactNode;
-    /**
-     * Function to render the selected values. Receives the selected values and a function to remove a value. This is only applicable for multi-select comboboxes.
-     */
-    displayValues?: (values: string[] | string, onRemove: (value: string) => void) => ReactNode;
-    /**
-     * The placeholder text for the combobox input
-     */
-    placeholder?: string;
-    /**
-     * The function to call when the search value changes.
-     */
-    onSearchValueChange: (value: string) => void;
-    /**
-     * The search value of the combobox input
-     */
-    searchValue: string;
-    /**
-     * Callback that fires when a value is selected
-     */
-    onChange: (value: string[] | string) => void;
-    /**
-     * The selected values of the combobox
-     */
-    value: string[] | string;
-};
-declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues, children, flipPopover, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
-
-type ContextMenuProps = {
-    children: ReactNode;
-    onRequestClose?: () => void;
-    /**
-     * If the menu is compact
-     */
-    compact?: boolean;
-} & ({
-    position: {
-        x: number;
-        y: number;
-    };
-    side?: 'bottom' | 'top';
-    triggerRef?: never;
-} | {
-    position?: never;
-    side?: never;
-    triggerRef: RefObject<HTMLElement | null>;
-});
-/**
- * The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
- * It can be used in two ways:
- * 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
- * 2. By providing a `position` prop, which will render the menu at the specified coordinates.
- */
-declare const ContextMenu: ({ position, triggerRef, children, side, onRequestClose, compact, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
-
-type DataCardProps = ComponentPropsWithoutRef<'div'> & Partial<Pick<ButtonAsLinkProps, 'beforeAction' | 'disabled' | 'href' | 'onClick' | 'type'>> & {
-    /**
-     * Label text displayed above the value
-     */
-    label: ReactNode;
-    /**
-     * Main value to display in the card
-     */
-    value: ReactNode;
-    /**
-     * Optional content to display in the top-right corner
-     */
-    upperRightSlot?: ReactNode;
-    /**
-     * Sets the color scheme of the card
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Controls the loading state of the card
-     */
-    isLoading?: boolean;
-    /**
-     * Forces a full page reload when navigating, bypassing client-side routing
-     */
-    reloadDocument?: boolean;
-    /**
-     * Optional trend arrow to display below the value. Use the `DataCardTrend` component to create this.
-     */
-    trend?: ReactNode;
-    /**
-     * Optional subtitle text to display below the value
-     */
-    subtitle?: ReactNode;
-};
-declare const DataCard: {
-    (props: DataCardProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Should be at least one `DataCard` component
-     */
-    children: ReactNode;
-    /**
-     * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
-     */
-    cardMaxWidth?: ResponsiveObject<string> | string;
-    /**
-     * Sets the color scheme of the cards, can be overriden at the card level
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Desired number of columns to display.
-     */
-    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
-};
-/**
- * Displays a series of cards tailor made for displaying analytics data
- */
-declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
-    displayName: string;
-};
-
-type DataCardTrendProps = {
-    /**
-     * Direction of the trend arrow
-     */
-    direction?: 'down' | 'up';
-    /**
-     * Outlook of the trend arrow
-     */
-    outlook?: 'negative' | 'positive';
-    /**
-     * Content to display next to the trend arrow
-     */
-    children: JSX.Element | string;
-};
-declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
-
-declare const DataCardHoverArrow: {
-    (): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type DataListProps = ComponentPropsWithoutRef<'dl'> & {
-    /**
-     * Should only contain `DataListItem` components.
-     */
-    children: ReactNode;
-    /**
-     * Maximum width for the label.
-     */
-    labelMaxWith?: string;
-    /**
-     * Prominence of the label text. Default is `primary`.
-     */
-    labelProminence?: 'primary' | 'secondary';
-    /**
-     * Alignment of the value text. Default is `start`.
-     */
-    valueAlignment?: 'end' | 'start';
-};
-/**
- * The DataList component is used to display a list of items with labels and values.
- */
-declare const DataList: {
-    ({ children, valueAlignment, labelMaxWith, labelProminence, ...props }: DataListProps): JSX.Element;
-    displayName: string;
-};
-
-type DataListItemProps = Omit<ComponentPropsWithoutRef<'dl'>, 'children'> & {
-    /**
-     * Should only contain `DataListItemLabel` and `DataListItemValue` components.
-     */
-    children: ReactNode;
-};
-/**
- * An item within a `DataList`. It should only contain `DataListItemLabel` and `DataListItemValue` components.
- */
-declare const DataListItem: {
-    ({ children }: DataListItemProps): ReactNode;
-    displayName: string;
-};
-
-type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
-declare const variantStyleMap$1: {
-    body1: styled_components.RuleSet<object>;
-    body2: styled_components.RuleSet<object>;
-    body3: styled_components.RuleSet<object>;
-    body4: styled_components.RuleSet<object>;
-    body1Mono: styled_components.RuleSet<object>;
-    body2Mono: styled_components.RuleSet<object>;
-    body3Mono: styled_components.RuleSet<object>;
-    body4Mono: styled_components.RuleSet<object>;
-    label1: styled_components.RuleSet<object>;
-    label2: styled_components.RuleSet<object>;
-    label3: styled_components.RuleSet<object>;
-    label4: styled_components.RuleSet<object>;
-};
-type TextProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The horizontal alignment
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    align?: AlignmentTypes$1;
-    /**
-     * The text content
-     */
-    children?: ReactNode | undefined;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Allows user to override default button colors
-     */
-    disabled?: boolean;
-    /**
-     * Display the text as inline content
-     */
-    inline?: boolean;
-    /**
-     * Maximum number of characters to display before truncating. Must be >= 1.
-     * When truncated, an ellipsis (...) will be added to the end.
-     */
-    maxChars?: number;
-    /**
-     * Prevents text from being highlighted and copied
-     */
-    preventUserSelect?: boolean;
-    /**
-     * Text prominence affects color. Use 'primary' for main non-interactive text, 'secondary' for supporting text, and 'button' in specific cases where text is used in an interactive component.
-     */
-    prominence?: 'button' | 'primary' | 'secondary';
-    /**
-     * This will inherit the jsdoc block from PolymorphicComponent
-     */
-    renderAs?: ElementType;
-    /**
-     * Number of lines to display before truncating with an ellipsis.
-     * Set to 1 to truncate after a single line, 2 for two lines, etc.
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    maxLines?: number;
-    /**
-     * The text style to display
-     */
-    variant?: keyof typeof variantStyleMap$1 | undefined;
-};
-/**
- * Used for rending paragraphs and inline text.
- */
-declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
-
-/**
- * The label of the `DataListItem`. Extends the [Text]() component.
- */
-declare const DataListItemLabel: {
-    (props: TextProps): JSX.Element;
-    displayName: string;
-};
-
-/**
- * The value of the `DataListItem`. Extends the [Text]() component.
- */
-declare const DataListItemValue: {
-    (props: TextProps): JSX.Element;
-    displayName: string;
-};
-
-type DividerProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Orientation of the divider.
-     */
-    orientation?: ResponsiveObject<'horizontal' | 'vertical'> | 'horizontal' | 'vertical';
-};
-/**
- * A line used to visually separate content; note that dividers have no margin/spacing on their own.
- */
-declare const Divider: {
-    ({ orientation, ...props }: DividerProps): JSX.Element;
-    displayName: string;
-};
-
-type AlignmentTypes = 'center' | 'justify' | 'left' | 'right';
-declare const variantStyleMap: {
-    hero: styled_components.RuleSet<object>;
-    heading1: styled_components.RuleSet<object>;
-    heading2: styled_components.RuleSet<object>;
-    heading3: styled_components.RuleSet<object>;
-    heading4: styled_components.RuleSet<object>;
-    heading5: styled_components.RuleSet<object>;
-    heading6: styled_components.RuleSet<object>;
-};
-declare const DEFAULT_ELEMENT = "h1";
-type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
-    /**
-     * The horizontal alignment
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    align?: AlignmentTypes;
-    /**
-     * The content of the heading
-     */
-    children: ReactNode;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Styles to text as disabled
-     */
-    disabled?: boolean;
-    /**
-     * Display the text as inline content
-     */
-    inline?: boolean;
-    /**
-     * Maximum number of characters to display before truncating. Must be >= 1.
-     * When truncated, an ellipsis (...) will be added to the end.
-     */
-    maxChars?: number;
-    /**
-     * Text prominence affects color. Use 'primary' for main non-interactive text, 'secondary' for supporting text, and 'button' in specific cases where text is used in an interactive component.
-     */
-    prominence?: 'button' | 'primary' | 'secondary';
-    /**
-     * Prevents text from being highlighted and copied
-     */
-    preventUserSelect?: boolean;
-    renderAs?: ElementType;
-    /**
-     * Number of lines to display before truncating with an ellipsis.
-     * Set to 1 to truncate after a single line, 2 for two lines, etc.
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    maxLines?: number;
-    /**
-     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
-     */
-    variant?: keyof typeof variantStyleMap;
-};
-/**
- * Displaying heading text, both visually and semantically
- */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
-
-type EditableHeadingProps = {
-    /**
-     * The initial text content of the heading.
-     * This will be displayed and used as the starting value when editing begins.
-     */
-    children: string;
-    /**
-     * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
-     * @param value The new text content after editing
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Callback fired when the editing state changes.
-     * @param isEditing True when entering edit mode, false when exiting
-     */
-    onEditingChange?: (isEditing: boolean) => void;
-    /**
-     * Custom tooltip text shown when hovering over the heading.
-     */
-    tooltipText?: string;
-    /**
-     * Sets an aria-label for the input and label for the screen reader only button.
-     */
-    ariaLabel?: string;
-    /**
-     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
-     */
-    variant?: HeadingProps['variant'];
-    /**
-     * Force editing state for testing purposes
-     * @ignore
-     */
-    __forceEditing?: boolean;
-    /**
-     * When true, prevents the heading from entering edit mode
-     * @default false
-     */
-    editingDisabled?: boolean;
-};
-/**
- * A special heading component that allows for inline editing. When clicked or activated via keyboard,
- * it transforms into an editable text field. In its default state, it renders as a heading with
- * an accessible button that enables editing mode. The component handles empty values, keyboard
- * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
- */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
-
-declare const typographicVariantStyleMap: {
-    hero: styled_components.RuleSet<object>;
-    heading1: styled_components.RuleSet<object>;
-    heading2: styled_components.RuleSet<object>;
-    heading3: styled_components.RuleSet<object>;
-    heading4: styled_components.RuleSet<object>;
-    heading5: styled_components.RuleSet<object>;
-    heading6: styled_components.RuleSet<object>;
-    body1: styled_components.RuleSet<object>;
-    body2: styled_components.RuleSet<object>;
-    body3: styled_components.RuleSet<object>;
-    body4: styled_components.RuleSet<object>;
-    body1Mono: styled_components.RuleSet<object>;
-    body2Mono: styled_components.RuleSet<object>;
-    body3Mono: styled_components.RuleSet<object>;
-    body4Mono: styled_components.RuleSet<object>;
-    label1: styled_components.RuleSet<object>;
-    label2: styled_components.RuleSet<object>;
-    label3: styled_components.RuleSet<object>;
-    label4: styled_components.RuleSet<object>;
-};
-type TypographicVariant = keyof typeof typographicVariantStyleMap;
-
-type EditableTextRootProps = Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'> & {
-    /**
-     * The children of the editable text root.
-     */
-    children: ReactNode;
-    /**
-     * The initial value for the editable text
-     */
-    defaultValue?: string;
-    /**
-     * The current value for the editable text
-     */
-    value?: string;
-    /**
-     * Callback fired when the value changes
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Callback fired when editing is committed (e.g., save button clicked, Enter pressed)
-     */
-    onValueCommit?: (value: string) => void;
-    /**
-     * Callback fired when editing is cancelled (e.g., cancel button clicked, Escape pressed)
-     */
-    onValueRevert?: (originalValue: string) => void;
-    /**
-     * Callback fired when the editing state changes (editing starts or stops)
-     */
-    onEditingChange?: (isEditing: boolean) => void;
-    /**
-     * The typographic variant to use for the display component
-     */
-    typographicVariant?: TypographicVariant;
-    /**
-     * The action(s) that trigger submit or dismiss in edit mode:
-     * - "enter": Trigger submit when the enter key is pressed, or dismiss when the esc key is pressed
-     * - "blur": Trigger submit when the editable is blurred, or dismiss when the esc key is pressed
-     * - "none": No action will trigger submit or dismiss. You need to use the submit or dismiss buttons
-     * - "both": Pressing Enter and blurring the input will trigger submit, or dismiss when the esc key is pressed
-     */
-    submitMode?: 'blur' | 'both' | 'enter' | 'none';
-    /**
-     * Whether the editable text is read only. If true, the editable text will not be editable and the trigger will not be shown.
-     */
-    readOnly?: boolean;
-    /**
-     * The id of the editable text.
-     */
-    id?: string;
-    /**
-     * The label of the editable text.
-     */
-    label: string;
-    /**
-     * Placeholder text for the input field and display
-     */
-    placeholder?: string;
-    /**
-     * Minimum number of lines to display.
-     */
-    minLines?: number;
-    /**
-     * Maximum number of lines to display. If not set, there is no maximum.
-     */
-    maxLines?: number | undefined;
-    /**
-     * The element to receive focus when the editable is closed.
-     */
-    finalFocusEl?: () => HTMLElement | null;
-};
-type EditableTextContextValues = {
-    isEditing: boolean;
-    setIsEditing: (editing: boolean) => void;
-    value: string;
-    setValue: (value: string) => void;
-    originalValue: string;
-    onValueCommit: ((value: string) => void) | undefined;
-    onValueRevert: ((originalValue: string) => void) | undefined;
-    typographicVariant: TypographicVariant;
-    submitMode: 'blur' | 'both' | 'enter' | 'none';
-    readOnly: boolean;
-    id: string;
-    label: string;
-    placeholder: string;
-    minLines: number;
-    maxLines: number | undefined;
-    finalFocusEl: (() => HTMLElement | null) | undefined;
-};
-declare const EditableTextContext: react.Context<EditableTextContextValues | null>;
-declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX.Element;
-
-type EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
-    /**
-     * Whether to visually hide the label.
-     */
-    hideLabel?: boolean;
-};
-/**
- * Used for inline editing of text.
- */
-declare const EditableText: {
-    ({ hideLabel, ...props }: EditableTextProps): JSX.Element;
-    displayName: string;
-};
-
-type EditableTextDisplayProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * When true, the user can click on the display to edit the text
-     */
-    asTrigger?: boolean;
-    renderAs?: ElementType;
-};
-declare const EditableTextDisplay: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, EditableTextDisplayProps>) => react.ReactElement | null) & UnknownRecord;
-
-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;
-    /**
-     * 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;
-};
-/**
- * Labels are used to give a title to a form component (eg. Input, Select, etc.)
- */
-declare const Label: {
-    ({ children, disabled, htmlFor, required, screenReaderOnly, ...props }: LabelProps): JSX.Element;
-    displayName: string;
-};
-
-type EditableTextLabelProps = Omit<LabelProps, 'disabled' | 'htmlFor' | 'required'>;
-declare const EditableTextLabel: ({ ...props }: EditableTextLabelProps) => react_jsx_runtime.JSX.Element;
-
-declare const EditableTextSubmitButton: ({ children, }: {
-    children: ReactElement;
-}) => JSX.Element | null;
-
-type EditableTextCancelButtonProps = {
-    /**
-     * A cancel button, typically a [Button]() that will revert the value when clicked.
-     */
-    children: ReactElement;
-};
-declare const EditableTextCancelButton: ({ children, }: EditableTextCancelButtonProps) => JSX.Element | null;
-
-type EditableTextTriggerProps = {
-    /**
-     * A trigger element, typically a [Button]() that will enter editing mode when clicked.
-     */
-    children: ReactElement;
-};
-declare const EditableTextTrigger: ({ children, ...props }: EditableTextTriggerProps) => JSX.Element | null;
-
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
-    /**
-     * When enabled, focusing the input will select the entire text within
-     */
-    autoSelect?: boolean;
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the height of its parent container
-     * _note: only applicable when `type="multiline"`_
-     */
-    fullHeight?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: ReactNode | undefined;
-    /**
-     * Icon to display on the right side of the input. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: ReactNode | undefined;
-    /**
-     * The type of the input
-     */
-    type?: 'email' | 'multiline' | 'number' | 'password' | 'phone' | 'search' | 'text' | 'url';
-};
-/**
- * Capture user input with a text field. Should be used within a [Form]() and [FormField]().
- */
-declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLTextAreaElement | HTMLInputElement>, "type"> & {
-    /**
-     * When enabled, focusing the input will select the entire text within
-     */
-    autoSelect?: boolean;
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the height of its parent container
-     * _note: only applicable when `type="multiline"`_
-     */
-    fullHeight?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: ReactNode | undefined;
-    /**
-     * Icon to display on the right side of the input. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: ReactNode | undefined;
-    /**
-     * The type of the input
-     */
-    type?: "email" | "multiline" | "number" | "password" | "phone" | "search" | "text" | "url";
-} & react.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
-
-type EditableTextInputProps = Pick<InputProps, 'autoSelect'>;
-declare const EditableTextInput: (props: EditableTextInputProps) => JSX.Element | null;
-
-type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
-    /**
-     * The text that will be truncated with an ellipsis
-     */
-    children?: ReactNode;
-    /**
-     * The number that will be truncated with an ellipsis
-     */
-    lines?: number | undefined;
-};
-/**
- * Truncate text with an ellispsis visble at the end
- */
-declare const Ellipsis: {
-    ({ children, lines, ...props }: EllipsisProps): JSX.Element;
-    displayName: string;
-};
-
-type ActionCallback<T> = (data: T, nextData: T) => Promise<T> | T;
-type Action = (data: FormData | null) => Promise<void>;
-type FormActionState<T> = [{
-    data: T;
-    error: Error | null;
-}, Action, boolean];
-declare const useFormState: <T extends object>(action: ActionCallback<T>, initialData?: Partial<T>) => FormActionState<T>;
-
-type ValidationCallback<T> = (data: T) => FormErrors<T>;
-type FormWithLabelledByProps = {
-    'aria-label'?: never;
-    /**
-     * The id of the element that labels the form. Typically a heading.
-     */
-    'aria-labelledby': string;
-};
-type FormWithLabelProps = {
-    /**
-     * Accessible name of the form. Use this only when a visible label is not possible. If the form has a title or heading, use `aria-labelledby` instead.
-     */
-    'aria-label': string;
-    'aria-labelledby'?: never;
-};
-type FormErrors<T> = Partial<{
-    [K in keyof T]: string[] | string;
-}>;
-type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-label' | 'aria-labelledby' | 'children'> & {
-    /**
-     * The action to be performed when the form is submitted. It can be asynchronous.
-     */
-    action?: Action;
-    /**
-     * Sets the default label position for all `FormFields` within the form. Will be ignored if labelPosition
-     * is set on the `FormField` itself.
-     */
-    labelPosition?: 'block' | 'inline-compact' | 'inline';
-    /**
-     * The form elements used in the form
-     */
-    children: ReactNode;
-    /**
-     * An object that providesd errors for the form fields. This is created by `useFormState` and passed along to `FormField`s.
-     */
-    errors?: FormErrors<T>;
-    /**
-     * If true, fills the entire container
-     */
-    fullWidth?: boolean;
-    /**
-     * The function for handling validation.
-     */
-    validate?: ValidationCallback<T>;
-    /**
-     * An object that provides valuesfor the form fields. This is typically the `state.data` value from `useFormState` and passed along to `FormField`s.
-     */
-    values?: T;
-} & (FormWithLabelledByProps | FormWithLabelProps);
-/**
- * For creating forms. It provides a context for the form fields to access the form state and validation.
- * It also provides a way to handle form submission and validation. It is built around [React 19's form APIs](https://react.dev/reference/react-dom/components/form).
- */
-declare const Form: <T>(props: FormProps<T> & {
-    ref?: Ref<HTMLFormElement>;
-}) => JSX.Element;
-
-type FormErrorSummaryProps = {
-    description: string;
-};
-declare const FormErrorSummary: ({ description }: FormErrorSummaryProps) => react_jsx_runtime.JSX.Element | null;
-
-type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * This should be a single child that is a valid form field (or can pretend to be one).
-     */
-    children: JSX.Element;
-    /**
-     * Additional descriptive text to display below the form field
-     */
-    description?: ReactNode;
-    /**
-     * Valid label text
-     */
-    label: ReactNode;
-    /**
-     * If an id isn't supplied, one is generated internally.
-     */
-    id?: string;
-    /**
-     * Will show an error message and put the child input into an invalid state
-     */
-    error?: ReactNode;
-    /**
-     * The name attribute of the field. It will map to the form data passed into `useFormState`.
-     */
-    name: string;
-    /**
-     * Use if label describes a required form component
-     */
-    required?: boolean;
-    /**
-     * A value that overrides the basic value. This should pair with `onChange`.
-     */
-    value?: string;
-    /**
-     * Setting to `inline` will have the label and input appear on the same line. Setting to `block` will have the label above the input.
-     */
-    labelPosition?: 'block' | 'inline-compact' | 'inline';
-};
-/**
- * FormField is a compound component that combines a label, form control, and optional description and error message.
- */
-declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX.Element;
-    displayName: string;
-};
-
-type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
-    children: ReactNode;
-    /**
-     * The label for the form group
-     */
-    label?: ReactNode;
-    /**
-     * The description for the form group
-     */
-    description?: ReactNode;
-};
-/**
- * For grouping like form elements together.
- */
-declare const FormGroup: {
-    ({ children, label, description, ...props }: FormGroupProps): JSX.Element;
-    displayName: string;
-};
-
-type RadioGroupProps = FormGroupProps & {
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    value?: string | undefined;
-    name: string;
-};
-/**
- * For grouping like form elements together. Can serve as a checkbox
- */
-declare const RadioGroup: {
-    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
-    displayName: string;
-};
-
-type CheckboxGroupProps = FormGroupProps & {
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    value?: string[] | undefined;
-    name: string;
-};
-/**
- * For grouping like form elements together. Can serve as a checkbox
- */
-declare const CheckboxGroup: {
-    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
-    displayName: string;
-};
-
-type Gap = {
-    column: Spacings;
-    row: Spacings;
-};
-type ResponsiveGap = ResponsiveObject<Gap | Spacings>;
-type GridProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The content to be displayed in the grid
-     */
-    children: ReactNode;
-    /**
-     * When minChildWidth is 'auto', this will be the number of columns, otherwise it will be the maximum number of columns.
-     */
-    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
-    /**
-     * Sets the minimum width for each grid item.
-     */
-    minChildWidth?: ResponsiveObject<number | 'auto'> | number | 'auto';
-    /**
-     * Controls the spacing between grid items.
-     */
-    gap?: Gap | ResponsiveGap | Spacings;
-    /**
-     * Controls whether grid items expand to fill available space when there are fewer items than columns.
-     * When true, items grow to fill space. When false, the grid will auto fill the additional space with empty tracks.
-     */
-    expandItems?: boolean;
-    renderAs?: ElementType;
-};
-declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
-
-type IconButtonProps = {
-    /**
-     * Accessible text for screen readers.
-     */
-    label: string;
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    children: JSX.Element;
-} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
-/**
- * IconButton behaves like a [Button](?path=/docs/components-button--docs),
- * but only accepts an [Icon](?path=/docs/components-icon--docs) as a child.
- */
-declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
-    /**
-     * Accessible text for screen readers.
-     */
-    label: string;
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
-    /**
-     * Accessible text for screen readers.
-     */
-    label: string;
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
-type ImageProps = ComponentPropsWithoutRef<'img'> & {
-    /**
-     * Accessible text to apply to the image
-     */
-    alt: string;
-    /**
-     * Border radius to apply to the image
-     */
-    borderRadius?: BorderRadius;
-    /**
-     * 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;
-    /**
-     * A callback that is invoked after the image has loaded
-     */
-    onLoad?: (event?: SyntheticEvent<HTMLImageElement>) => void;
-    /**
-     * A callback that is invoked after the image has failed to load
-     */
-    onError?: (event?: SyntheticEvent<HTMLImageElement>) => void;
-};
-declare const Image: {
-    ({ src, alt, borderRadius, fill: fillContainer, fit: objFit, loading, position: objPosition, onLoad, onError, ...props }: ImageProps): JSX.Element;
-    displayName: string;
-};
-
-type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'rightIcon' | 'type' | 'value'> & {
-    /**
-     * When disabled, the copy action will not be triggered
-     */
-    disabled?: boolean;
-    /**
-     * Callback function that is called when the value is copied to the clipboard
-     */
-    onCopy?: (value: string) => void;
-    /**
-     * the value of what is copied
-     */
-    value: string;
-};
-/**
- * Provides a readonly input that copies the text to the clipboard when clicked.
- */
-declare const InputClickToCopy: react.ForwardRefExoticComponent<Omit<InputProps, "disabled" | "value" | "type" | "rightIcon" | "autoSelect"> & {
-    /**
-     * When disabled, the copy action will not be triggered
-     */
-    disabled?: boolean;
-    /**
-     * Callback function that is called when the value is copied to the clipboard
-     */
-    onCopy?: (value: string) => void;
-    /**
-     * the value of what is copied
-     */
-    value: string;
-} & react.RefAttributes<HTMLInputElement>>;
-
-type InputPasswordProps = Omit<InputProps, 'leftIcon' | 'monospace' | 'rightIcon' | 'type'> & {
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * Callback function that is called when the visibility state changes
-     */
-    onVisibilityToggle?: (isVisible: boolean) => void;
-};
-/**
- * A password input component with a toggle button to show or hide the password text.
- */
-declare const InputPassword: react.ForwardRefExoticComponent<Omit<InputProps, "monospace" | "type" | "leftIcon" | "rightIcon"> & {
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * Callback function that is called when the visibility state changes
-     */
-    onVisibilityToggle?: (isVisible: boolean) => void;
-} & 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 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, ...otherProps }: KeyboardShortcutProps): JSX.Element;
-    displayName: string;
-};
-
-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 MarkProps = ComponentPropsWithoutRef<'div'> & {
-    /** The content of the Mark component. */
-    children: ReactNode;
-    colorScheme?: ColorSchemeTypes;
-};
-/**
- * Defines text that should be marked or highlighted.
- */
-declare const Mark: {
-    ({ children, colorScheme, ...props }: MarkProps): JSX.Element;
-    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 MenuProps = MenuControlProps & {
-    /**
-     * The position of the Menu
-     */
-    align?: 'center' | 'end' | 'start';
-    /**
-     * The content of the menu.
-     * Should be made up of `MenuItem`, `SubMenu`, `Divider`, or other subcomponents listed
-     */
-    children: ReactNode;
-    /**
-     * If the menu is compact
-     */
-    compact?: boolean;
-    /**
-     * If disabled, the trigger will appear disabled and the menu will not open
-     */
-    disabled?: boolean;
-    /**
-     * The label for the trigger element, this is ignored if `trigger` is defined
-     */
-    label?: string;
-    /**
-     * Callback for when the user clicks or focuses outside of the menu
-     */
-    onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
-    /**
-     * The side the menu appears on, relative to the trigger
-     */
-    side?: 'bottom' | 'top';
-    /**
-     * Replace the default trigger with a custom button or other element
-     */
-    trigger?: ReactNode;
-    /**
-     * Props to pass to the trigger component, the default trigger is Button
-     */
-    triggerProps?: Partial<ButtonProps>;
-};
-/**
- * Displays a menu to the users with a set of actions.
- */
-declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLButtonElement>>;
-
-type MenuLabelProps = {
-    /**
-     * The text of the label
-     */
-    children: ReactNode | string;
-};
-declare const MenuLabel: {
-    ({ children, ...props }: MenuLabelProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type SubMenuProps = {
-    /**
-     * The label of the submenu
-     */
-    label: ReactNode;
-    /**
-     * The description of the submenu
-     */
-    description?: ReactNode;
-    /**
-     * The menu items that will appear in this submenu
-     */
-    children: ReactNode[];
-    /**
-     * Callback when the submenu is opened or closed
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Icon to display on the left side of the SubMenu. Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    icon?: JSX.Element | undefined;
-};
-declare const SubMenu: {
-    ({ label, description, children, onOpenChange, ...props }: SubMenuProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type MenuItemButtonProps = ButtonProps & {
-    /**
-     *  Pre-defined visual treatments for the menu item
-     */
-    appearance?: 'dangerous' | 'default' | 'gated';
-    /**
-     * Optional `Badge` to display on the MenuItem. Must be an instance of [Badge](../?path=/docs/components-badge--docs)
-     */
-    badge?: JSX.Element;
-    /**
-     * The content of the MenuItem
-     */
-    children?: ReactNode;
-    /**
-     * Keyboard shortcut to bind to the MenuItem. Won't be shown if `badge` is set.
-     * *Note:* This is just visual, it doesn't actually bind the key command.
-     */
-    command?: ReactNode;
-    /**
-     * Icon to show before the MenuItem text. Ignored if children is provided or if `appearance` is `gated`
-     */
-    icon?: ButtonProps['leftIcon'];
-    /**
-     * @ignore
-     */
-    leftIcon?: ButtonProps['leftIcon'];
-    /**
-     * @ignore
-     */
-    rightIcon?: ButtonProps['rightIcon'];
-    /**
-     * @ignore
-     */
-    fullWidth?: never;
-    /**
-     * @ignore
-     */
-    asChild?: never;
-    /**
-     * @ignore
-     */
-    variant?: never;
-    /**
-     * @ignore
-     */
-    size?: never;
-    /**
-     * @ignore
-     */
-    unstyled?: never;
-};
-
-declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    beforeAction?: (() => Promise<void>) | (() => void);
-    children: react.ReactNode;
-    colorScheme?: ColorSchemeTypes;
-    disabled?: boolean;
-    leftIcon?: react.ReactNode | undefined;
-    rightIcon?: react.ReactNode | undefined;
-    type?: LinkTypes | undefined;
-    underline?: "always" | "hover" | "none";
-} & Omit<react.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
-    reloadDocument?: boolean;
-    replace?: boolean;
-    state?: any;
-    preventScrollReset?: boolean;
-    viewTransition?: boolean;
-} & {
-    href: string | undefined;
-    type?: LinkTypes;
-} & {
-    href: string | undefined;
-    children: react.ReactNode;
-    beforeAction?: (() => Promise<void>) | (() => void);
-    type?: LinkTypes;
-} & {
-    appearance?: "dangerous" | "default" | "gated";
-    badge?: react.JSX.Element;
-    children?: react.ReactNode;
-    command?: react.ReactNode;
-    icon?: ButtonProps["leftIcon"];
-    leftIcon?: ButtonProps["leftIcon"];
-    rightIcon?: ButtonProps["rightIcon"];
-    fullWidth?: never;
-    asChild?: never;
-    variant?: never;
-    size?: never;
-    unstyled?: never;
-} & {
-    /**
-     * Treats the menu item as a link when provided
-     */
-    href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    beforeAction?: (() => Promise<void>) | (() => void);
-    children: react.ReactNode;
-    colorScheme?: ColorSchemeTypes;
-    disabled?: boolean;
-    leftIcon?: react.ReactNode | undefined;
-    rightIcon?: react.ReactNode | undefined;
-    type?: LinkTypes | undefined;
-    underline?: "always" | "hover" | "none";
-} & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
-    href?: never;
-    type?: "button" | "reset" | "submit";
-} & {
-    href: string | undefined;
-    children: react.ReactNode;
-    beforeAction?: (() => Promise<void>) | (() => void);
-    type?: LinkTypes;
-} & {
-    appearance?: "dangerous" | "default" | "gated";
-    badge?: react.JSX.Element;
-    children?: react.ReactNode;
-    command?: react.ReactNode;
-    icon?: ButtonProps["leftIcon"];
-    leftIcon?: ButtonProps["leftIcon"];
-    rightIcon?: ButtonProps["rightIcon"];
-    fullWidth?: never;
-    asChild?: never;
-    variant?: never;
-    size?: never;
-    unstyled?: never;
-} & {
-    /**
-     * Treats the menu item as a link when provided
-     */
-    href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
-    href?: never;
-    type?: "button" | "reset" | "submit";
-    children: react.ReactNode;
-} & {
-    appearance?: "dangerous" | "default" | "gated";
-    badge?: react.JSX.Element;
-    children?: react.ReactNode;
-    command?: react.ReactNode;
-    icon?: ButtonProps["leftIcon"];
-    leftIcon?: ButtonProps["leftIcon"];
-    rightIcon?: ButtonProps["rightIcon"];
-    fullWidth?: never;
-    asChild?: never;
-    variant?: never;
-    size?: never;
-    unstyled?: never;
-} & {
-    /**
-     * Treats the menu item as a link when provided
-     */
-    href?: MenuItemButtonProps["href"];
-}, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
-type MenuItemLabelProps = {
-    /**
-     * The content of the label
-     */
-    children: ReactNode;
-};
-type MenuItemDescriptionProps = {
-    /**
-     * The content of the description
-     */
-    children: ReactNode;
-};
-declare const MenuItemLabel: ({ children }: MenuItemLabelProps) => react_jsx_runtime.JSX.Element;
-declare const MenuItemDescription: ({ children }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element;
-
-type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
-    /**
-     * The radio items
-     */
-    children: ReactNode | ReactNode[];
-    /**
-     * @ignore
-     */
-    asChild?: never;
-};
-declare const MenuRadioGroup: {
-    ({ children, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
-    /**
-     * Optional `Icon` to use as the indicator that the radio item is selected. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
-     */
-    indicator?: ReactNode;
-    /**
-     * The value of the item
-     */
-    value: DropdownMenuRadioItemProps['value'];
-    /**
-     * @ignore
-     */
-    href?: never;
-    /**
-     * @ignore
-     */
-    isLoading?: never;
-    /**
-     * @ignore
-     */
-    ref?: never;
-};
-declare const RadioMenuItem: {
-    ({ onSelect, value, indicator, ...props }: RadioMenuItemProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
-    /** Callback to fire when the checked status changes */
-    onCheckedChange: (checked: boolean) => void;
-    /**
-     * Optional `Icon` to use as the indicator that the checkbox item is selected. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
-     */
-    indicator?: ReactNode;
-    /**
-     * The  checked state of the menu item
-     */
-    checked: boolean;
-    /**
-     * @ignore
-     */
-    href?: never;
-    /**
-     * @ignore
-     */
-    isLoading?: never;
-    /**
-     * @ignore
-     */
-    ref?: never;
-};
-declare const CheckboxMenuItem: {
-    ({ onSelect, checked, onCheckedChange, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type FilterMenuProps = MenuProps & {
-    /**
-     * The selected values of the filter Menu
-     * */
-    value: string[];
-    /**
-     * Callback for when the selected values change
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The current search value
-     */
-    searchValue: string;
-    /**
-     * Callback for when the search value changes (by searching the input)
-     */
-    onSearchValueChange: (value: string) => void;
-};
-declare const FilterMenuItem: {
-    ({ onSelect, checked, onCheckedChange, ...props }: _radix_ui_react_dropdown_menu.DropdownMenuCheckboxItemProps & (MenuItemButtonProps & {
-        onCheckedChange: (checked: boolean) => void;
-        indicator?: react.ReactNode;
-        checked: boolean;
-        href?: never;
-        isLoading?: never;
-        ref?: never;
-    })): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const FilterMenu: react.ForwardRefExoticComponent<FilterMenuProps & react.RefAttributes<HTMLButtonElement>>;
-
-type ModalProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The content of the modal.
-     */
-    children: ReactNode;
-    /**
-     * Content that should be static at the bottom of the modal here (e.g. action buttons).
-     */
-    footer?: ReactNode;
-    /**
-     * The variant of the modal position
-     */
-    positionVariant?: 'centered' | 'fixed-top' | 'right-side-panel';
-    /**
-     * Ref to the element that should receive focus when the modal opens
-     */
-    initialFocusRef?: RefObject<HTMLElement | null>;
-    /**
-     * Determines if the modal is currently open
-     */
-    isOpen: boolean;
-    /**
-     * Determines if the close button is visible (if false, `esc` will still close the Modal)
-     */
-    hideCloseButton?: boolean;
-    /**
-     * Determines if the title is visible
-     */
-    hideTitle?: boolean;
-    /**
-     * When the Modal is dismissed, this function will be called. You'll typically want to set the
-     * state of `isOpen` to false here
-     */
-    onRequestClose?: () => void;
-    /**
-     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
-     * and the title will be hidden but still accessible to screen readers.
-     */
-    title: string;
-    /**
-     * The width of the modal when space allows. On smaller screens, the modal automatically adjusts to fit the available space.
-     */
-    width?: string;
-};
-/**
- * A Modal is a focused UI element that appears atop the main interface, requiring
- * user interaction or dismissal before returning to the underlying content.
- */
-declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /**
-     * The content of the modal.
-     */
-    children: ReactNode;
-    /**
-     * Content that should be static at the bottom of the modal here (e.g. action buttons).
-     */
-    footer?: ReactNode;
-    /**
-     * The variant of the modal position
-     */
-    positionVariant?: "centered" | "fixed-top" | "right-side-panel";
-    /**
-     * Ref to the element that should receive focus when the modal opens
-     */
-    initialFocusRef?: RefObject<HTMLElement | null>;
-    /**
-     * Determines if the modal is currently open
-     */
-    isOpen: boolean;
-    /**
-     * Determines if the close button is visible (if false, `esc` will still close the Modal)
-     */
-    hideCloseButton?: boolean;
-    /**
-     * Determines if the title is visible
-     */
-    hideTitle?: boolean;
-    /**
-     * When the Modal is dismissed, this function will be called. You'll typically want to set the
-     * state of `isOpen` to false here
-     */
-    onRequestClose?: () => void;
-    /**
-     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
-     * and the title will be hidden but still accessible to screen readers.
-     */
-    title: string;
-    /**
-     * The width of the modal when space allows. On smaller screens, the modal automatically adjusts to fit the available space.
-     */
-    width?: string;
-} & react.RefAttributes<HTMLDivElement>>;
-
-type ModalCalloutsProps = {
-    /**
-     * The content to be displayed in the modal callout.
-     */
-    children?: ReactNode;
-};
-declare const ModalCallouts: {
-    ({ children }: ModalCalloutsProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-type ModalCalloutProps = {
-    title: string;
-    image: JSX.Element;
-    /**
-     * The content to be displayed in the modal callout.
-     */
-    children?: ReactNode;
-};
-declare const ModalCallout: {
-    ({ title, image, children }: ModalCalloutProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type ControlledPopoverProps = {
-    /**
-     * Is the popover open.
-     * Must be used with `onOpenChange`.
-     */
-    isOpen: boolean;
-    /** When an attempt to toggle the popover is triggered.
-     *  Must be used with `isOpen`.
-     */
-    onOpenChange: (isOpen: boolean) => void;
-};
-type UncontrolledPopoverProps = {
-    isOpen?: never;
-    onOpenChange?: never;
-};
-type PopoverControlProps = ControlledPopoverProps | UncontrolledPopoverProps;
-type ContentProps = Omit<PopoverContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset' | 'updatePositionStrategy'>;
-type PopoverProps = ContentProps & PopoverControlProps & {
-    /**
-     * The content of the popover
-     */
-    children: ReactNode;
-    /**
-     * The maximum width of the popover
-     */
-    maxWidth?: string;
-    /**
-     * The maximum height of the popover
-     */
-    maxHeight?: string;
-    /**
-     * Determines if the close button is visible (if false, `esc` will still close the Modal)
-     */
-    hideCloseButton?: boolean;
-    /**
-     * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
-     */
-    trigger: JSX.Element;
-    /**
-     * If true, the popover will use the unstyled Content component instead of StyledContent
-     */
-    unstyled?: boolean;
-    /**
-     * If true, the popover will use a custom radix arrow to trigger
-     */
-    withArrow?: boolean;
-    /**
-     * Only works if `withArrow` is true, animates the hotspot attached to the arrow
-     */
-    isAnimated?: boolean;
-    colorScheme?: ColorSchemeTypes;
-};
-/**
- * Displays rich content in a portal, triggered by a button.
- */
-declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, ...props }: PopoverProps): JSX.Element;
-    displayName: string;
-};
-
-type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Current numeric level of the progress (0 -> max)
-     */
-    progress: number;
-    /**
-     * The maximum progress value
-     */
-    max?: number;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Slot for additional content to be rendered to the left of the progress bar
-     */
-    labelLeft?: ReactNode;
-    /**
-     * Slot for additional content to be rendered to the right of the progress bar
-     */
-    labelRight?: ReactNode;
-};
-/**
- * A progress component that visually represents the completion status of a task
- */
-declare const ProgressBar: {
-    ({ progress, max, children, labelLeft, labelRight, colorScheme, ...props }: ProgressBarProps): JSX.Element;
-    displayName: string;
-};
-
-type RadioSizeType = 'lg' | 'md' | 'sm';
-type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label' | 'onChange' | 'size' | 'value'> & {
-    /**
-     * Indicates the state of the radio
-     */
-    checked?: boolean;
-    /**
-     * Disables input
-     */
-    disabled?: boolean;
-    /**
-     * Indicates that there is an error with the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Provides an ID for the input
-     */
-    id?: string;
-    /**
-     * The label for the input
-     */
-    label: ReactNode;
-    /**
-     * The description for the radio
-     */
-    description?: ReactNode | 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;
-    /**
-     * Indicates if the input is required
-     */
-    required?: boolean;
-    /**
-     * A predefined size for the radio
-     */
-    size?: RadioSizeType;
-    /**
-     * The value attribute of the input
-     */
-    value?: string;
-    /**
-     * Whether to visually hide the label (it will still be available to screen readers)
-     */
-    hideLabel?: boolean;
-};
-declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "value" | "label" | "onChange" | "hideLabel"> & {
-    /**
-     * Indicates the state of the radio
-     */
-    checked?: boolean;
-    /**
-     * Disables input
-     */
-    disabled?: boolean;
-    /**
-     * Indicates that there is an error with the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Provides an ID for the input
-     */
-    id?: string;
-    /**
-     * The label for the input
-     */
-    label: ReactNode;
-    /**
-     * The description for the radio
-     */
-    description?: ReactNode | 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;
-    /**
-     * Indicates if the input is required
-     */
-    required?: boolean;
-    /**
-     * A predefined size for the radio
-     */
-    size?: RadioSizeType;
-    /**
-     * The value attribute of the input
-     */
-    value?: string;
-    /**
-     * Whether to visually hide the label (it will still be available to screen readers)
-     */
-    hideLabel?: boolean;
-} & react.RefAttributes<HTMLInputElement>>;
-
-type RadioCardDefaultLayoutProps = {
-    /**
-     * The icon to display
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * The main label text for the card.
-     *
-     *  *Note: `label` only allows for a string as any interactive elements inside of a RadioCard would be an accessibility violation.*
-     */
-    label?: string | undefined;
-    /**
-     * The description text for the card
-     *
-     * *Note: `description` only allows for a string as any interactive elements inside of a RadioCard would be an accessibility violation.*
-     */
-    description?: string | undefined;
-    /**
-     * Whether to show the indicator
-     */
-    showIndicator?: boolean | undefined;
-};
-
-type BaseRadioCardProps = Omit<ComponentPropsWithoutRef<'input'>, 'checked' | 'disabled' | 'id' | 'name' | 'onChange' | 'value'> & {
-    /**
-     * Indicates the state of the radio
-     */
-    checked?: boolean;
-    /**
-     * Disables the card
-     */
-    disabled?: boolean;
-    /**
-     * Provides an ID for the input
-     */
-    id?: string;
-    /**
-     * The name attribute of the input
-     */
-    name?: string;
-    /**
-     * Callback function invoked when the value changes
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The value attribute of the input
-     */
-    value: string;
-};
-type RadioCardWithChildren = BaseRadioCardProps & {
-    /**
-     * Custom content to display inside the card.
-     */
-    children: ReactNode;
-    icon?: never;
-    label?: never;
-    description?: never;
-    showIndicator?: never;
-};
-type RadioCardWithDefaultLayout = BaseRadioCardProps & RadioCardDefaultLayoutProps & {
-    children?: never;
-};
-type RadioCardProps = RadioCardWithChildren | RadioCardWithDefaultLayout;
-declare const RadioCard: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLInputElement>>;
-
-type RadioCardImageProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
-    /**
-     * Indicates the state of the radio
-     */
-    checked?: boolean;
-    /**
-     * Disables the card
-     */
-    disabled?: boolean;
-    /**
-     * Provides an ID for the input
-     */
-    id?: string;
-    /**
-     * The name attribute of the input
-     */
-    name?: string;
-    /**
-     * Callback function invoked when the value changes
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The value attribute of the input
-     */
-    value: string;
-    /**
-     * The label text for the radio card
-     */
-    label: string;
-    /**
-     * The source URL for the image to display
-     */
-    imageSrc: string;
-    /**
-     * The aspect ratio of the card
-     */
-    aspectRatio?: string;
-    /**
-     * The padding of the card
-     */
-    padding?: Spacings;
-};
-declare const RadioCardImage: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange"> & {
-    /**
-     * Indicates the state of the radio
-     */
-    checked?: boolean;
-    /**
-     * Disables the card
-     */
-    disabled?: boolean;
-    /**
-     * Provides an ID for the input
-     */
-    id?: string;
-    /**
-     * The name attribute of the input
-     */
-    name?: string;
-    /**
-     * Callback function invoked when the value changes
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The value attribute of the input
-     */
-    value: string;
-    /**
-     * The label text for the radio card
-     */
-    label: string;
-    /**
-     * The source URL for the image to display
-     */
-    imageSrc: string;
-    /**
-     * The aspect ratio of the card
-     */
-    aspectRatio?: string;
-    /**
-     * The padding of the card
-     */
-    padding?: Spacings;
-} & react.RefAttributes<HTMLInputElement>>;
-
-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;
-};
-/**
- * Used to hide content from the visual client, but keep it readable for screen readers.
- */
-declare const ScreenReaderOnly: {
-    ({ text, children, focusable, ...props }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * ScrollArea is a simple scrollable container with shadow effects to indicate
- * scrollability.
- */
-declare const ScrollArea: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /**
-     * When true, disables scrolling. Useful to temporarily prevent scrolling,
-     * like when drag-and-dropping an item from inside to outside of the scroll
-     * area.
-     */
-    locked?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
-
-type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
-    /**
-     * `SegmentedControlItem`s that will be rendered in grouping
-     */
-    children?: ReactNode;
-    /**
-     * Set the entire `SegmentedControl` to be disabled
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Force `SegmentedControl` to fill the width of it's container
-     */
-    fullWidth?: boolean | undefined;
-    /**
-     * Callback function invoked when the `SegmentedControlItem` value changes
-     */
-    onSelectedValueChange: (value: string) => void;
-    /**
-     * The value of the `SegmentedControlItem` which should be selected
-     */
-    selectedValue: string;
-};
-/**
- * Provides a horizontal set of segments for switching between different values
- */
-declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
-
-type BaseProps$1 = {
-    /**
-     * Disable the `SegmentedControlItem`
-     */
-    disabled?: boolean | undefined;
-    /**
-     * The value of the item
-     */
-    value: string;
-};
-type IconWithLabel$1 = {
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon?: JSX.Element;
-    /**
-     * The label of the item
-     */
-    label?: ReactNode | string | undefined;
-    'aria-label'?: never;
-};
-type IconWithAriaLabel$1 = {
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon?: JSX.Element;
-    /**
-     * Use this when displaying an icon without a label
-     */
-    'aria-label'?: string | undefined;
-    label?: never;
-};
-type NoIcon$1 = {
-    icon?: undefined;
-    /**
-     * The label of the item
-     */
-    label?: ReactNode | string | undefined;
-    'aria-label'?: never;
-};
-type SegmentedControlItemProps = BaseProps$1 & (IconWithAriaLabel$1 | IconWithLabel$1 | NoIcon$1);
-declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
-
-type SelectProps = {
-    /**
-     * Sets the validity status of the input
-     *
-     * @default false
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * A group of `Option` or `OptionGroup`s
-     */
-    children: ReactNode;
-    /**
-     * The color scheme of the select.
-     *
-     * @default inherit
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * When true, the select can't be interacted with.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * @ignore
-     * Force the Select to be open without user interaction (for debugging and CI)
-     */
-    forceOpen?: boolean;
-    /**
-     * If true, the select will fill its container
-     */
-    fullWidth?: ResponsiveObject<boolean> | boolean;
-    /**
-     * Called when the select is opened or closed
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Called when a value is changed.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Text shown when no value is selected
-     */
-    placeholder?: string;
-    /**
-     * The controlled value. Must be used in conjunction with `onChange`.
-     */
-    value?: string;
-};
-/**
- * Display a list of options and choose one of them. Replacement for the native Select HTML element.
- */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
-
-type SelectOptionProps = {
-    /**
-     * The visual content of the select
-     */
-    children: ReactNode;
-    /**
-     * The value to set. Leave this empty to define a placeholder option.
-     */
-    value: string;
-    /**
-     * When true, this option will not be selectable
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Optional content to display in the trigger when the option is selected. If undefined, it will show the `children`
-     * prop instead.
-     */
-    selectedDisplayValue?: ReactNode;
-    /**
-     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
-     * Use this when the content is complex, or you have non-textual content inside.
-     */
-    textValue?: string;
-    /**
-     * Vertical alignment of the checkmark icon when this option is selected.
-     */
-    checkmarkVerticalAlign?: 'center' | 'top';
-};
-declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
-
-type SelectOptionGroupProps = {
-    /** The label of the group */
-    label: string;
-    /** At least one `Option` */
-    children: ReactNode;
-};
-declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
-
-type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
-    /**
-     * aria-label for screen-readers to apply to the slider
-     */
-    'aria-label'?: string;
-    /**
-     * aria-labelledby for screen-readers to apply to the slider
-     */
-    'aria-labelledby'?: string;
-    /**
-     * @ignore
-     */
-    'data-testid'?: string;
-    /**
-     * Determines the initial position(s) of the thumb(s)
-     * Must be an array of numbers.
-     */
-    initialValue?: number[];
-    /**
-     * 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 value change
-     */
-    onChange?: (value: number[]) => void;
-    /**
-     * Value to be added or subtracted on each step
-     */
-    step?: number;
-    /**
-     * Current value of the slider
-     * Must be an array of numbers if provided.
-     */
-    value?: number[];
-};
-declare const Slider: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX.Element;
-    displayName: string;
-};
-
-type StackProps = {
-    /**
-     * Optional children
-     */
-    children?: ReactNode | undefined;
-    /**
-     * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     * TODO: add link to Spacing docs
-     *
-     */
-    gap?: ResponsiveObject<Spacings> | Spacings;
-    /**
-     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
-     * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     */
-    direction?: ResponsiveObject<'horizontal' | 'vertical'> | 'horizontal' | 'vertical';
-    /**
-     * Controls how items are aligned along the cross-axis.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
-     * @type 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | ResponsiveObject<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
-     */
-    alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
-    renderAs?: ElementType;
-};
-/**
- * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
- * This allows for layouting children in a consistent way without needing to manually add margins or padding.
- */
-declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & UnknownRecord;
-
-type SwitchSizeType = 'lg' | 'md' | 'sm';
-type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label' | 'size'> & {
-    /**
-     * The alignment of the switch relative to the label
-     */
-    align?: 'left' | 'right';
-    /**
-     * Indicates the state of the switch
-     */
-    checked?: boolean;
-    /**
-     * Disables switch
-     */
-    disabled?: boolean;
-    /**
-     * Optional ID attribute
-     */
-    id?: string | undefined;
-    /**
-     * The label for the switch
-     */
-    label: ReactNode;
-    /**
-     * The description for the switch
-     */
-    description?: ReactNode | undefined;
-    /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string | undefined;
-    /**
-     * Callback function invoked when the value changes
-     */
-    onChange?: (event: ChangeEvent) => unknown;
-    /**
-     * Indicates if the input is required
-     */
-    required?: boolean;
-    /**
-     * A predefined size for the switch
-     */
-    size?: SwitchSizeType;
-    /**
-     * The value given as data when submitted with a `name`.
-     */
-    value?: string;
-    /**
-     * Whether to visually hide the label (it will still be available to screen readers)
-     */
-    hideLabel?: boolean;
-};
-declare const Switch: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "label" | "hideLabel"> & {
-    /**
-     * The alignment of the switch relative to the label
-     */
-    align?: "left" | "right";
-    /**
-     * Indicates the state of the switch
-     */
-    checked?: boolean;
-    /**
-     * Disables switch
-     */
-    disabled?: boolean;
-    /**
-     * Optional ID attribute
-     */
-    id?: string | undefined;
-    /**
-     * The label for the switch
-     */
-    label: ReactNode;
-    /**
-     * The description for the switch
-     */
-    description?: ReactNode | undefined;
-    /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string | undefined;
-    /**
-     * Callback function invoked when the value changes
-     */
-    onChange?: (event: ChangeEvent) => unknown;
-    /**
-     * Indicates if the input is required
-     */
-    required?: boolean;
-    /**
-     * A predefined size for the switch
-     */
-    size?: SwitchSizeType;
-    /**
-     * The value given as data when submitted with a `name`.
-     */
-    value?: string;
-    /**
-     * Whether to visually hide the label (it will still be available to screen readers)
-     */
-    hideLabel?: boolean;
-} & react.RefAttributes<HTMLInputElement>>;
-
-type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
-    children?: ReactNode;
-};
-declare const TableBody: ({ children, ...props }: TableBodyProps) => JSX.Element;
-
-type CellAttrs = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'ref'> & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'ref'>;
-type TableCellProps = CellAttrs & {
-    children?: ReactNode;
-};
-declare const TableCell: ({ children, ...props }: TableCellProps) => JSX.Element;
-
-type TableFootProps = HTMLAttributes<HTMLTableSectionElement> & {
-    children?: ReactNode;
-};
-declare const TableFoot: ({ children, ...props }: TableFootProps) => JSX.Element;
-
-type TableHeadProps = HTMLAttributes<HTMLTableSectionElement> & {
-    children?: ReactNode;
-};
-declare const TableHead: ({ children, ...props }: TableHeadProps) => JSX.Element;
-
-type TableProps = ComponentPropsWithoutRef<'table'> & {
-    /**
-     * Should be some combination of `TableHead` and/or `TableBody` and/or `TableFoot`
-     */
-    children: ReactNode;
-    /**
-     * If true, will add dividing lines between rows
-     */
-    divided?: boolean;
-    /**
-     * If true, will stripe every other row
-     */
-    striped?: boolean;
-    /**
-     * If true, will visually hide the table header while keeping it accessible to screen readers
-     *
-     * @see https://www.accessibility-developer-guide.com/examples/tables/hidden-headers/
-     */
-    visuallyHiddenHeader?: boolean;
-};
-/**
- * Semantic table element for presenting data
- */
-declare const Table: ({ children, divided, striped, visuallyHiddenHeader, ...props }: TableProps) => JSX.Element;
-
-type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
-    children?: ReactNode;
-};
-declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;
-
-type TabsProps = Pick<TabsProps$1, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
-declare const Tabs: {
-    ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX.Element;
-    displayName: string;
-};
-
-type TabsContentProps = Pick<TabsContentProps$1, 'children' | 'value'>;
-declare const TabsContent: {
-    ({ children, value }: TabsContentProps): JSX.Element;
-    displayName: string;
-};
-
-type TabsListProps = Pick<TabsListProps$1, 'aria-label'> & PropsWithChildren<{
-    fullWidth?: boolean;
-}>;
-declare const TabsList: {
-    ({ children, fullWidth, ...props }: TabsListProps): JSX.Element;
-    displayName: string;
-};
-
-type BaseProps = Pick<TabsTriggerProps$1, 'disabled' | 'value'>;
-type IconWithLabel = {
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon?: JSX.Element;
-    /**
-     * The label of the item
-     */
-    label?: ReactNode | string;
-    'aria-label'?: never;
-};
-type IconWithAriaLabel = {
-    /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
-     */
-    icon?: JSX.Element;
-    /**
-     * Use this when displaying an icon without a label
-     */
-    'aria-label'?: string;
-    label?: never;
-};
-type NoIcon = {
-    icon?: undefined;
-    /**
-     * The label of the item
-     */
-    label?: ReactNode | string;
-    'aria-label'?: never;
-};
-type TabsTriggerProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
-declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-
-type TagProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Valid URL for the `Tag` label to link to
-     */
-    href?: string;
-    /**
-     * Optional icon to display before the label
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Text label for the `Tag`
-     */
-    label: ReactNode;
-    /**
-     * Callback function to be called when the `x` button is clicked
-     */
-    onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
-    /**
-     * Accessible label for the `x` button (ie. "Remove tag")
-     */
-    onClickRemoveLabel?: string | undefined;
-};
-/**
- * A `Tag` is an optionally linked label, with an optional action button, to categorize content.
- */
-declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Valid URL for the `Tag` label to link to
-     */
-    href?: string;
-    /**
-     * Optional icon to display before the label
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Text label for the `Tag`
-     */
-    label: ReactNode;
-    /**
-     * Callback function to be called when the `x` button is clicked
-     */
-    onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
-    /**
-     * Accessible label for the `x` button (ie. "Remove tag")
-     */
-    onClickRemoveLabel?: string | undefined;
-} & react.RefAttributes<HTMLDivElement>>;
-
-type ThumbnailBadgeProps = {
-    /**
-     * Icon to display on the left side of the badge
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Text content to display in the badge
-     */
-    label: string;
-};
-declare const ThumbnailBadge: {
-    ({ icon, label, ...props }: ThumbnailBadgeProps): JSX.Element;
-    displayName: string;
-};
-
-declare const gradients: {
-    defaultDarkOne: styled_components.RuleSet<object>;
-    defaultDarkTwo: styled_components.RuleSet<object>;
-    defaultLightOne: styled_components.RuleSet<object>;
-    defaultLightTwo: styled_components.RuleSet<object>;
-    defaultMidOne: styled_components.RuleSet<object>;
-    defaultMidTwo: styled_components.RuleSet<object>;
-    green: styled_components.RuleSet<object>;
-    greenWithPop: styled_components.RuleSet<object>;
-    pink: styled_components.RuleSet<object>;
-    pinkWithPop: styled_components.RuleSet<object>;
-    playfulGradientOne: styled_components.RuleSet<object>;
-    playfulGradientTwo: styled_components.RuleSet<object>;
-    purple: styled_components.RuleSet<object>;
-    purpleWithPop: styled_components.RuleSet<object>;
-    yellow: styled_components.RuleSet<object>;
-    yellowWithPop: styled_components.RuleSet<object>;
-};
-type GradientNameType = keyof typeof gradients;
-
-type AspectRatioType = 'square' | 'wide';
-type Storyboard = {
-    __typename?: string;
-    aspectRatio: number;
-    frameCount: number;
-    frameHeight: number;
-    frameWidth: number;
-    height: number;
-    id?: string;
-    url: string;
-    width: number;
-};
-type ThumbnailProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
-    /**
-     * The desired display of the thumbnail, either wide or square
-     */
-    thumbnailImageType?: 'square' | 'wide' | undefined;
-    /**
-     * The URL of the thumbnail image to display
-     */
-    thumbnailUrl: string | null | undefined;
-    /**
-     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
-     */
-    children?: ReactNode;
-    /**
-     * The type of gradient to show either behind the icon or when there is no thumbnail image
-     */
-    gradientBackground?: GradientNameType;
-    /**
-     * The storyboard data for "scrubbing" functionality
-     */
-    storyboard?: Storyboard;
-    /**
-     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
-     * Example: '320px'
-     */
-    width?: string;
-    /**
-     * The height of the thumbnail container when using storyboard.
-     * Example: '180px'
-     */
-    height?: string;
-    /**
-     * The aspect ratio of the thumbnail container.
-     * 'wide' maps to 16:9 ratio, 'square' maps to 1:1 ratio.
-     */
-    aspectRatio?: AspectRatioType;
-};
-/**
- * A `Thumbnail` is a small, reduced-size version of an image or video used as a preview or representative image.
- */
-declare const Thumbnail: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
-    /**
-     * The desired display of the thumbnail, either wide or square
-     */
-    thumbnailImageType?: "square" | "wide" | undefined;
-    /**
-     * The URL of the thumbnail image to display
-     */
-    thumbnailUrl: string | null | undefined;
-    /**
-     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
-     */
-    children?: ReactNode;
-    /**
-     * The type of gradient to show either behind the icon or when there is no thumbnail image
-     */
-    gradientBackground?: GradientNameType;
-    /**
-     * The storyboard data for "scrubbing" functionality
-     */
-    storyboard?: Storyboard;
-    /**
-     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
-     * Example: '320px'
-     */
-    width?: string;
-    /**
-     * The height of the thumbnail container when using storyboard.
-     * Example: '180px'
-     */
-    height?: string;
-    /**
-     * The aspect ratio of the thumbnail container.
-     * 'wide' maps to 16:9 ratio, 'square' maps to 1:1 ratio.
-     */
-    aspectRatio?: AspectRatioType;
-} & react.RefAttributes<HTMLDivElement>>;
-
-type ThumbnailCollageProps = {
-    /**
-     * An array of `Thumbnail` components to show in the collage. Supports up to 3 `Thumbnail`s.
-     */
-    children?: ReactElement<ThumbnailProps>[] | undefined;
-    /**
-     * The type of gradient to show if no `Thumbnail`s are provided
-     */
-    gradientBackground?: GradientNameType;
-};
-/**
- * A `ThumbnailCollage` is a component that displays multiple `Thumbnail` components in a responsive grid layout.
- * It supports up to 3 thumbnails arranged in different configurations based on the number of children provided.
- * If no thumbnails are provided, it displays a fallback thumbnail with a gradient background.
- */
-declare const ThumbnailCollage: ({ children, gradientBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
-
-type TooltipProps = {
-    /**
-     * The content of the tooltip
-     */
-    content: ReactNode;
-    /**
-     * The button or other interactive element that triggers the tooltip
-     */
-    children: ReactNode;
-    /**
-     * The delay in milliseconds before the tooltip appears
-     */
-    delay?: number;
-    /**
-     * The preferred direction to render the tooltip if no collisions prevent it
-     */
-    direction?: 'bottom' | 'left' | 'right' | 'top';
-    /**
-     * @ignore
-     * Force the tooltip to be open without user interaction (for debugging and CI)
-     */
-    forceOpen?: boolean;
-    /**
-     * Hides the arrow
-     */
-    hideArrow?: boolean;
-    /**
-     * Specify a container element to portal the tooltip into.
-     * Useful for rendering tooltips in contexts like pip windows.
-     * @default document.body
-     */
-    container?: Element | null;
-};
-/**
- * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
- * For elements that are not interactive, consider using a [Popover]() instead.
- *
- */
-declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, hideArrow, container, }: TooltipProps): JSX.Element;
-    displayName: string;
-};
-
-type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'height' | 'href'> & {
-    /**
-     * An optional accessible description for the logo
-     */
-    description?: string;
-    /**
-     * Height, in pixels, of the logo
-     */
-    height?: number;
-    /**
-     * If provided, will wrap the logo in a link
-     */
-    href?: string;
-    /**
-     * @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;
-    /**
-     * An accessible title for the logo (defaults to "Wistia Logo")
-     */
-    title?: string;
-    /**
-     * Style of the logo
-     */
-    variant?: 'dark' | 'light' | 'standard';
-    /**
-     * If true, the logo will be optically centered within its container
-     */
-    opticallyCentered?: boolean;
-};
-/**
- * Render the Wistia logo in various ways.
- */
-declare const WistiaLogo: {
-    ({ description, height, hoverColor, href, iconOnly, opticallyCentered, title, variant, ...props }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type SplitButtonProps = {
-    /**
-     * The text for the primary button
-     */
-    children?: ButtonProps['children'];
-    colorScheme?: ButtonProps['colorScheme'];
-    /**
-     * The icon to use for the menu toggle, defaults to a down caret
-     * @default <Icon type="caret-down" />
-     */
-    menuIcon?: JSX.Element;
-    /**
-     * The menu items to render within the menu. If the secondary behavior of `SplitButton` should be a button, rather than a menu, omit `menuItems` and use `secondaryAction` instead.
-     */
-    menuItems?: ReactNode;
-    /**
-     * The label to use for the menu, only for screenreaders
-     */
-    menuLabel?: string;
-    /**
-     * If using `menuItems`, any additional props to pass to the `Menu` component
-     */
-    menuProps?: Omit<ComponentProps<typeof Menu>, 'children' | 'disabled' | 'trigger'>;
-    /**
-     * Secondary action should not be used when menuItems is set
-     */
-    secondaryAction?: JSX.Element;
-    /**
-     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
-     */
-    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
-    /**
-     * A visual style for the button
-     */
-    variant?: ButtonVariants;
-} & (ButtonAsButtonProps | ButtonAsLinkProps);
-/**
- * A SplitButton is an extension of [Button]() that adds a menu to the right hand side of the button.
- */
-declare const SplitButton: {
-    ({ children, menuLabel, menuIcon, menuItems, disabled, colorScheme, variant, secondaryAction, size, unstyled, menuProps, ...props }: SplitButtonProps): JSX.Element;
-    displayName: string;
-};
-
-type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text' | '--wui-typography-family-brand' | '--wui-typography-family-default' | '--wui-typography-family-mono' | '--wui-typography-weight-body-bold' | '--wui-typography-weight-body' | '--wui-typography-weight-heading' | '--wui-typography-weight-label-bold' | '--wui-typography-weight-label';
-type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
-    children: ReactNode;
-    overrides: Partial<Record<CustomizableTokens, number | string>>;
-};
-/**
- * Used for overriding the default theme tokens with custom values.
- * This should only be used when the ui systems team has been consulted first.
- */
-declare const CustomizableThemeWrapper: {
-    ({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
-    displayName: string;
-};
-
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };