@wistia/ui 0.14.26 → 0.14.27-beta.00a6ea3c.ab8f0ad

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, PropsWithChildren, Ref, SyntheticEvent, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, ReactElement } from 'react';
+import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, PropsWithChildren, ReactElement, InputHTMLAttributes, Ref, SyntheticEvent, HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UseFilePickerConfig, FilePickerReturnTypes, ExtractContentTypeFromConfig, useImperativeFilePickerConfig, ImperativeFilePickerReturnTypes } from 'use-file-picker/types';
 export * from 'use-file-picker/types';
 import * as react_router from 'react-router';
@@ -1601,6 +1601,27 @@ type ComboboxProps = {
 };
 declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
+type ContextMenuProps = {
+    children: ReactNode;
+    onRequestClose?: () => void;
+} & ({
+    position: {
+        x: number;
+        y: number;
+    };
+    triggerRef?: never;
+} | {
+    position?: never;
+    triggerRef: RefObject<HTMLElement>;
+});
+/**
+ * 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, onRequestClose, }: 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
@@ -1683,6 +1704,129 @@ declare const DataCardHoverArrow: {
     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.FlattenSimpleInterpolation;
+    body2: styled_components.FlattenSimpleInterpolation;
+    body3: styled_components.FlattenSimpleInterpolation;
+    body4: styled_components.FlattenSimpleInterpolation;
+    body1Mono: styled_components.FlattenSimpleInterpolation;
+    body2Mono: styled_components.FlattenSimpleInterpolation;
+    body3Mono: styled_components.FlattenSimpleInterpolation;
+    body4Mono: styled_components.FlattenSimpleInterpolation;
+    label1: styled_components.FlattenSimpleInterpolation;
+    label2: styled_components.FlattenSimpleInterpolation;
+    label3: styled_components.FlattenSimpleInterpolation;
+    label4: styled_components.FlattenSimpleInterpolation;
+};
+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;
+    /**
+     * 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_
+     */
+    truncate?: 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.
@@ -1697,8 +1841,8 @@ declare const Divider: {
     displayName: string;
 };
 
-type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
-declare const variantStyleMap$1: {
+type AlignmentTypes = 'center' | 'justify' | 'left' | 'right';
+declare const variantStyleMap: {
     hero: styled_components.FlattenSimpleInterpolation;
     heading1: styled_components.FlattenSimpleInterpolation;
     heading2: styled_components.FlattenSimpleInterpolation;
@@ -1714,7 +1858,7 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
      * <br />
      * _Note: this only affects block elements_
      */
-    align?: AlignmentTypes$1;
+    align?: AlignmentTypes;
     /**
      * The content of the heading
      */
@@ -1750,7 +1894,7 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
     /**
      * 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$1;
+    variant?: keyof typeof variantStyleMap;
 };
 /**
  * Displaying heading text, both visually and semantically
@@ -1804,293 +1948,196 @@ type EditableHeadingProps = {
  */
 declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
-type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
+declare const typographicVariantStyleMap: {
+    hero: styled_components.FlattenSimpleInterpolation;
+    heading1: styled_components.FlattenSimpleInterpolation;
+    heading2: styled_components.FlattenSimpleInterpolation;
+    heading3: styled_components.FlattenSimpleInterpolation;
+    heading4: styled_components.FlattenSimpleInterpolation;
+    heading5: styled_components.FlattenSimpleInterpolation;
+    heading6: styled_components.FlattenSimpleInterpolation;
+    body1: styled_components.FlattenSimpleInterpolation;
+    body2: styled_components.FlattenSimpleInterpolation;
+    body3: styled_components.FlattenSimpleInterpolation;
+    body4: styled_components.FlattenSimpleInterpolation;
+    body1Mono: styled_components.FlattenSimpleInterpolation;
+    body2Mono: styled_components.FlattenSimpleInterpolation;
+    body3Mono: styled_components.FlattenSimpleInterpolation;
+    body4Mono: styled_components.FlattenSimpleInterpolation;
+    label1: styled_components.FlattenSimpleInterpolation;
+    label2: styled_components.FlattenSimpleInterpolation;
+    label3: styled_components.FlattenSimpleInterpolation;
+    label4: styled_components.FlattenSimpleInterpolation;
+};
+type TypographicVariant = keyof typeof typographicVariantStyleMap;
+
+type EditableTextRootProps = Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'> & {
     /**
-     * The text that will be truncated with an ellipsis
+     * The children of the editable text root.
      */
-    children?: ReactNode;
+    children: ReactNode;
     /**
-     * The number that will be truncated with an ellipsis
+     * The initial value for the editable text
      */
-    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;
+    defaultValue?: string;
     /**
-     * The id of the element that labels the form. Typically a heading.
+     * The current value for the editable text
      */
-    'aria-labelledby': string;
-};
-type FormWithLabelProps = {
+    value?: string;
     /**
-     * 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.
+     * Callback fired when the value changes
      */
-    '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'> & {
+    onValueChange?: (value: string) => void;
     /**
-     * The action to be performed when the form is submitted. It can be asynchronous.
+     * Callback fired when editing is committed (e.g., save button clicked, Enter pressed)
      */
-    action?: Action;
+    onValueCommit?: (value: string) => void;
     /**
-     * Sets the default label position for all `FormFields` within the form. Will be ignored if labelPosition
-     * is set on the `FormField` itself.
+     * Callback fired when editing is cancelled (e.g., cancel button clicked, Escape pressed)
      */
-    labelPosition?: 'block' | 'inline-compact' | 'inline';
+    onValueRevert?: (originalValue: string) => void;
     /**
-     * The form elements used in the form
+     * Callback fired when the editing state changes (editing starts or stops)
      */
-    children: ReactNode;
+    onEditingChange?: (isEditing: boolean) => void;
     /**
-     * An object that providesd errors for the form fields. This is created by `useFormState` and passed along to `FormField`s.
+     * The typographic variant to use for the display component
      */
-    errors?: FormErrors<T>;
+    typographicVariant?: TypographicVariant;
     /**
-     * If true, fills the entire container
+     * 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
      */
-    fullWidth?: boolean;
+    submitMode?: 'blur' | 'both' | 'enter' | 'none';
     /**
-     * The function for handling validation.
+     * Whether the editable text is read only. If true, the editable text will not be editable and the trigger will not be shown.
      */
-    validate?: ValidationCallback<T>;
+    readOnly?: boolean;
     /**
-     * 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.
+     * The id of the editable text.
      */
     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`.
+     * The label of the editable text.
      */
-    name: string;
+    label: string;
     /**
-     * A value that overrides the basic value. This should pair with `onChange`.
+     * Placeholder text for the input field and display
      */
-    value?: string;
+    placeholder?: 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.
+     * Minimum number of lines to display.
      */
-    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, value, ...props }: FormFieldProps): JSX.Element;
-    displayName: string;
-};
-
-type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
-    children: ReactNode;
+    minLines?: number;
     /**
-     * The label for the form group
+     * Maximum number of lines to display. If not set, there is no maximum.
      */
-    label?: ReactNode;
+    maxLines?: number | undefined;
     /**
-     * The description for the form group
+     * The element to receive focus when the editable is closed.
      */
-    description?: ReactNode;
+    finalFocusEl?: () => HTMLElement | null;
 };
-/**
- * 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;
+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;
 };
-/**
- * For grouping like form elements together. Can serve as a checkbox
- */
-declare const RadioGroup: {
-    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
-    displayName: string;
-};
+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 CheckboxGroupProps = FormGroupProps & {
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    value?: string[] | undefined;
-    name: string;
+type EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
+    /**
+     * Whether to visually hide the label.
+     */
+    hideLabel?: boolean;
 };
 /**
- * For grouping like form elements together. Can serve as a checkbox
+ * Used for inline editing of text.
  */
-declare const CheckboxGroup: {
-    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
+declare const EditableText: {
+    ({ hideLabel, ...props }: EditableTextProps): 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;
+type EditableTextDisplayProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * 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.
+     * When true, the user can click on the display to edit the text
      */
-    expandItems?: boolean;
+    asTrigger?: boolean;
     renderAs?: ElementType;
 };
-declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
+declare const EditableTextDisplay: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, EditableTextDisplayProps>) => react.ReactElement | null) & UnknownRecord;
 
-type IconButtonProps = {
-    /**
-     * Accessible text for screen readers.
-     */
-    label: string;
+type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     * Pass an arbitrary child node
      */
-    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<{
+    children?: ReactNode;
     /**
-     * Accessible text for screen readers.
+     * To indicate that the label is for a disabled form component
      */
-    label: string;
+    disabled?: boolean;
     /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     * ID of the form component that the label should be associated with
      */
-    children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
+    htmlFor?: string | undefined;
     /**
-     * Accessible text for screen readers.
+     * Use if label describes a required form component
      */
-    label: string;
+    required?: boolean;
     /**
-     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     * For label text that needs to be available to assistive technology (e.g. screen readers)
+     * but otherwise hidden on screen.
      */
-    children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    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 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;
+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 callback that is invoked after the image has loaded
+     * A cancel button, typically a [Button]() that will revert the value when clicked.
      */
-    onLoad?: (event?: SyntheticEvent<HTMLImageElement>) => void;
+    children: ReactElement;
+};
+declare const EditableTextCancelButton: ({ children, }: EditableTextCancelButtonProps) => React.JSX.Element | null;
+
+type EditableTextTriggerProps = {
     /**
-     * A callback that is invoked after the image has failed to load
+     * A trigger element, typically a [Button]() that will enter editing mode when clicked.
      */
-    onError?: (event?: SyntheticEvent<HTMLImageElement>) => void;
+    children: ReactElement;
 };
-declare const Image: {
-    ({ src, alt, borderRadius, fill: fillContainer, fit: objFit, loading, position: objPosition, onLoad, onError, ...props }: ImageProps): JSX.Element;
-    displayName: string;
-};
+declare const EditableTextTrigger: ({ children, ...props }: EditableTextTriggerProps) => JSX.Element | null;
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
     /**
@@ -2164,207 +2211,504 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     type?: "email" | "multiline" | "number" | "password" | "phone" | "search" | "text" | "url";
 } & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
-type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'rightIcon' | 'type' | 'value'> & {
+type EditableTextInputProps = Pick<InputProps, 'autoSelect'>;
+declare const EditableTextInput: (props: EditableTextInputProps) => JSX.Element | null;
+
+type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
-     * When disabled, the copy action will not be triggered
+     * The text that will be truncated with an ellipsis
      */
-    disabled?: boolean;
+    children?: ReactNode;
     /**
-     * Callback function that is called when the value is copied to the clipboard
+     * The number that will be truncated with an ellipsis
      */
-    onCopy?: (value: string) => void;
-    /**
-     * the value of what is copied
-     */
-    value: string;
+    lines?: number | undefined;
 };
 /**
- * Provides a readonly input that copies the text to the clipboard when clicked.
+ * Truncate text with an ellispsis visble at the end
  */
-declare const InputClickToCopy: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "value" | "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>>;
+declare const Ellipsis: {
+    ({ children, lines, ...props }: EllipsisProps): JSX.Element;
+    displayName: string;
+};
 
-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 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 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[];
+type ValidationCallback<T> = (data: T) => FormErrors<T>;
+type FormWithLabelledByProps = {
+    'aria-label'?: never;
     /**
-     * @description A visual label for the keyboard shortcut.
+     * The id of the element that labels the form. Typically a heading.
      */
-    label?: string;
+    'aria-labelledby': string;
 };
-declare const KeyboardShortcut: {
-    ({ label, keyboardKeys, fullWidth, ...otherProps }: KeyboardShortcutProps): JSX.Element;
-    displayName: string;
-};
-
-type LabelProps = ComponentPropsWithoutRef<'label'> & {
+type FormWithLabelProps = {
     /**
-     * Pass an arbitrary child node
+     * 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.
      */
-    children?: ReactNode;
+    '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'> & {
     /**
-     * To indicate that the label is for a disabled form component
+     * The action to be performed when the form is submitted. It can be asynchronous.
      */
-    disabled?: boolean;
+    action?: Action;
     /**
-     * ID of the form component that the label should be associated with
+     * Sets the default label position for all `FormFields` within the form. Will be ignored if labelPosition
+     * is set on the `FormField` itself.
      */
-    htmlFor?: string | undefined;
+    labelPosition?: 'block' | 'inline-compact' | 'inline';
     /**
-     * Use if label describes a required form component
+     * The form elements used in the form
      */
-    required?: boolean;
+    children: ReactNode;
     /**
-     * For label text that needs to be available to assistive technology (e.g. screen readers)
-     * but otherwise hidden on screen.
+     * An object that providesd errors for the form fields. This is created by `useFormState` and passed along to `FormField`s.
      */
-    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 VariantType = 'breadcrumbs' | 'bullets' | 'commas' | 'ordered' | 'slashes' | 'spaces' | 'unbulleted';
-type ItemType = ItemType[] | string[] | string;
-type ListProps = ComponentPropsWithoutRef<'ul'> & {
+    errors?: FormErrors<T>;
     /**
-     * Children should be wrapped in `<ListItem>`
+     * If true, fills the entire container
      */
-    children?: ReactNode;
+    fullWidth?: boolean;
     /**
-     * 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.
+     * The function for handling validation.
      */
-    items?: ItemType[];
+    validate?: ValidationCallback<T>;
     /**
-     * The kind of list to render
+     * An object that provides valuesfor the form fields. This is typically the `state.data` value from `useFormState` and passed along to `FormField`s.
      */
-    variant?: VariantType;
+    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 List: {
-    ({ children, items, variant, ...otherProps }: ListProps): JSX.Element | null;
-    displayName: string;
-};
+declare const FormErrorSummary: ({ description }: FormErrorSummaryProps) => react_jsx_runtime.JSX.Element | null;
 
-type ControlledMenuProps = {
+type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * 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`.
+     * This should be a single child that is a valid form field (or can pretend to be one).
      */
-    onOpenChange: (isOpen: boolean) => void;
-};
-type UncontrolledMenuProps = {
-    isOpen?: never;
-    onOpenChange?: never;
-};
-type MenuControlProps = ControlledMenuProps | UncontrolledMenuProps;
-type MenuProps = MenuControlProps & {
+    children: JSX.Element;
     /**
-     * @ignore
+     * Additional descriptive text to display below the form field
      */
-    avoidCollisions?: boolean;
+    description?: ReactNode;
     /**
-     * The position of the Menu
+     * Valid label text
      */
-    align?: 'center' | 'end' | 'start';
+    label: ReactNode;
     /**
-     * The content of the menu.
-     * Should be made up of `MenuItem`, `SubMenu`, `Divider`, or other subcomponents listed
+     * If an id isn't supplied, one is generated internally.
      */
-    children: ReactNode;
+    id?: string;
     /**
-     * If the menu is compact
+     * Will show an error message and put the child input into an invalid state
      */
-    compact?: boolean;
+    error?: ReactNode;
     /**
-     * If disabled, the trigger will appear disabled and the menu will not open
+     * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
-    disabled?: boolean;
+    name: string;
     /**
-     * The label for the trigger element, this is ignored if `trigger` is defined
+     * A value that overrides the basic value. This should pair with `onChange`.
      */
-    label?: string;
+    value?: string;
     /**
-     * Callback for when the user clicks or focuses outside of the menu
+     * Setting to `inline` will have the label and input appear on the same line. Setting to `block` will have the label above the input.
      */
-    onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
+    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, value, ...props }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+
+type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
+    children: ReactNode;
     /**
-     * Replace the default trigger with a custom button or other element
+     * The label for the form group
      */
-    trigger?: ReactNode;
+    label?: ReactNode;
     /**
-     * Props to pass to the trigger component, the default trigger is Button
+     * The description for the form group
      */
-    triggerProps?: Partial<ButtonProps>;
+    description?: ReactNode;
 };
 /**
- * Displays a menu to the users with a set of actions.
+ * For grouping like form elements together.
  */
-declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLButtonElement>>;
+declare const FormGroup: {
+    ({ children, label, description, ...props }: FormGroupProps): JSX.Element;
+    displayName: string;
+};
 
-type MenuLabelProps = {
-    /**
-     * The text of the label
-     */
-    children: ReactNode | string;
+type RadioGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name: string;
 };
-declare const MenuLabel: {
-    ({ children, ...props }: MenuLabelProps): react_jsx_runtime.JSX.Element;
+/**
+ * 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 SubMenuProps = {
+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 label of the submenu
+     * The content to be displayed in the grid
      */
-    label: ReactNode;
+    children: ReactNode;
     /**
-     * The description of the submenu
+     * When minChildWidth is 'auto', this will be the number of columns, otherwise it will be the maximum number of columns.
      */
-    description?: ReactNode;
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
     /**
-     * The menu items that will appear in this submenu
+     * Sets the minimum width for each grid item.
      */
-    children: ReactNode[];
+    minChildWidth?: ResponsiveObject<number | 'auto'> | number | 'auto';
     /**
-     * Callback when the submenu is opened or closed
+     * Controls the spacing between grid items.
      */
-    onOpenChange?: (open: boolean) => void;
+    gap?: Gap | ResponsiveGap | Spacings;
     /**
-     * Icon to display on the left side of the SubMenu, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
+     * 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, "type" | "disabled" | "value" | "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, "type" | "monospace" | "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 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 & {
+    /**
+     * @ignore
+     */
+    avoidCollisions?: boolean;
+    /**
+     * 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'];
+    /**
+     * 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: {
@@ -2515,83 +2859,16 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     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 AlignmentTypes = 'center' | 'justify' | 'left' | 'right';
-declare const variantStyleMap: {
-    body1: styled_components.FlattenSimpleInterpolation;
-    body2: styled_components.FlattenSimpleInterpolation;
-    body3: styled_components.FlattenSimpleInterpolation;
-    body4: styled_components.FlattenSimpleInterpolation;
-    body1Mono: styled_components.FlattenSimpleInterpolation;
-    body2Mono: styled_components.FlattenSimpleInterpolation;
-    body3Mono: styled_components.FlattenSimpleInterpolation;
-    body4Mono: styled_components.FlattenSimpleInterpolation;
-    label1: styled_components.FlattenSimpleInterpolation;
-    label2: styled_components.FlattenSimpleInterpolation;
-    label3: styled_components.FlattenSimpleInterpolation;
-    label4: styled_components.FlattenSimpleInterpolation;
-};
-type TextProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The horizontal alignment
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    align?: AlignmentTypes;
-    /**
-     * 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;
-    /**
-     * 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_
-     */
-    truncate?: number;
+    asChild?: never;
+    variant?: never;
+    size?: never;
+    unstyled?: never;
+} & {
     /**
-     * The text style to display
+     * Treats the menu item as a link when provided
      */
-    variant?: keyof typeof variantStyleMap | undefined;
-};
-/**
- * Used for rending paragraphs and inline text.
- */
-declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
+    href?: MenuItemButtonProps["href"];
+}, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type MenuItemLabelProps = {
     /**
@@ -3162,6 +3439,13 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
+type ScrollAreaProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * ScrollArea is a simple scrollable container with shadow effects to indicate
+ * scrollability.
+ */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
 type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
     /**
      * `SegmentedControlItem`s that will be rendered in grouping
@@ -3695,455 +3979,178 @@ 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;
-    /**
-     * 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;
-};
-/**
- * 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;
-    /**
-     * 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;
-} & 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;
-};
-/**
- * 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, }: 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 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, "type" | "monospace" | "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 ContextMenuProps = {
-    children: ReactNode;
-    onRequestClose?: () => void;
-} & ({
-    position: {
-        x: number;
-        y: number;
-    };
-    triggerRef?: never;
-} | {
-    position?: never;
-    triggerRef: RefObject<HTMLElement>;
-});
-/**
- * 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, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
-
-declare const typographicVariantStyleMap: {
-    hero: styled_components.FlattenSimpleInterpolation;
-    heading1: styled_components.FlattenSimpleInterpolation;
-    heading2: styled_components.FlattenSimpleInterpolation;
-    heading3: styled_components.FlattenSimpleInterpolation;
-    heading4: styled_components.FlattenSimpleInterpolation;
-    heading5: styled_components.FlattenSimpleInterpolation;
-    heading6: styled_components.FlattenSimpleInterpolation;
-    body1: styled_components.FlattenSimpleInterpolation;
-    body2: styled_components.FlattenSimpleInterpolation;
-    body3: styled_components.FlattenSimpleInterpolation;
-    body4: styled_components.FlattenSimpleInterpolation;
-    body1Mono: styled_components.FlattenSimpleInterpolation;
-    body2Mono: styled_components.FlattenSimpleInterpolation;
-    body3Mono: styled_components.FlattenSimpleInterpolation;
-    body4Mono: styled_components.FlattenSimpleInterpolation;
-    label1: styled_components.FlattenSimpleInterpolation;
-    label2: styled_components.FlattenSimpleInterpolation;
-    label3: styled_components.FlattenSimpleInterpolation;
-    label4: styled_components.FlattenSimpleInterpolation;
+    frameHeight: number;
+    frameWidth: number;
+    height: number;
+    id?: string;
+    url: string;
+    width: number;
 };
-type TypographicVariant = keyof typeof typographicVariantStyleMap;
-
-type EditableTextRootProps = Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'> & {
+type ThumbnailProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     /**
-     * The children of the editable text root.
+     * The desired display of the thumbnail, either wide or square
      */
-    children: ReactNode;
+    thumbnailImageType?: 'square' | 'wide' | undefined;
     /**
-     * The initial value for the editable text
+     * The URL of the thumbnail image to display
      */
-    defaultValue?: string;
+    thumbnailUrl: string | null;
     /**
-     * The current value for the editable text
+     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
      */
-    value?: string;
+    children?: ReactNode;
     /**
-     * Callback fired when the value changes
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
      */
-    onValueChange?: (value: string) => void;
+    gradientBackground?: GradientNameType;
     /**
-     * Callback fired when editing is committed (e.g., save button clicked, Enter pressed)
+     * The storyboard data for "scrubbing" functionality
      */
-    onValueCommit?: (value: string) => void;
+    storyboard?: Storyboard;
     /**
-     * Callback fired when editing is cancelled (e.g., cancel button clicked, Escape pressed)
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     * Example: '320px'
      */
-    onValueRevert?: (originalValue: string) => void;
+    width?: string;
     /**
-     * Callback fired when the editing state changes (editing starts or stops)
+     * The height of the thumbnail container when using storyboard.
+     * Example: '180px'
      */
-    onEditingChange?: (isEditing: boolean) => void;
+    height?: string;
+};
+/**
+ * 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 typographic variant to use for the display component
+     * The desired display of the thumbnail, either wide or square
      */
-    typographicVariant?: TypographicVariant;
+    thumbnailImageType?: "square" | "wide" | undefined;
     /**
-     * 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
+     * The URL of the thumbnail image to display
      */
-    submitMode?: 'blur' | 'both' | 'enter' | 'none';
+    thumbnailUrl: string | null;
     /**
-     * Whether the editable text is read only. If true, the editable text will not be editable and the trigger will not be shown.
+     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
      */
-    readOnly?: boolean;
+    children?: ReactNode;
     /**
-     * The id of the editable text.
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
      */
-    id?: string;
+    gradientBackground?: GradientNameType;
     /**
-     * The label of the editable text.
+     * The storyboard data for "scrubbing" functionality
      */
-    label: string;
+    storyboard?: Storyboard;
     /**
-     * Placeholder text for the input field and display
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     * Example: '320px'
      */
-    placeholder?: string;
+    width?: string;
     /**
-     * Minimum number of lines to display.
+     * The height of the thumbnail container when using storyboard.
+     * Example: '180px'
      */
-    minLines?: number;
+    height?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type ThumbnailCollageProps = {
     /**
-     * Maximum number of lines to display. If not set, there is no maximum.
+     * An array of `Thumbnail` components to show in the collage. Supports up to 3 `Thumbnail`s.
      */
-    maxLines?: number | undefined;
+    children?: ReactElement<ThumbnailProps>[] | undefined;
     /**
-     * The element to receive focus when the editable is closed.
+     * The type of gradient to show if no `Thumbnail`s are provided
      */
-    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;
+    gradientBackground?: GradientNameType;
 };
-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;
+/**
+ * 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 EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
+type TooltipProps = {
     /**
-     * Whether to visually hide the label.
+     * The content of the tooltip
      */
-    hideLabel?: boolean;
+    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;
 };
 /**
- * Used for inline editing of text.
+ * 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 EditableText: {
-    ({ hideLabel, ...props }: EditableTextProps): JSX.Element;
+declare const Tooltip: {
+    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
     displayName: string;
 };
 
-type EditableTextDisplayProps = ComponentPropsWithoutRef<'div'> & {
+type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'height' | 'href'> & {
     /**
-     * When true, the user can click on the display to edit the text
+     * An optional accessible description for the logo
      */
-    asTrigger?: boolean;
-    renderAs?: ElementType;
-};
-declare const EditableTextDisplay: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, EditableTextDisplayProps>) => react.ReactElement | null) & UnknownRecord;
-
-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 = {
+    description?: string;
     /**
-     * A cancel button, typically a [Button]() that will revert the value when clicked.
+     * Height, in pixels, of the logo
      */
-    children: ReactElement;
-};
-declare const EditableTextCancelButton: ({ children, }: EditableTextCancelButtonProps) => React.JSX.Element | null;
-
-type EditableTextTriggerProps = {
+    height?: number;
     /**
-     * A trigger element, typically a [Button]() that will enter editing mode when clicked.
+     * If provided, will wrap the logo in a link
      */
-    children: ReactElement;
-};
-declare const EditableTextTrigger: ({ children, ...props }: EditableTextTriggerProps) => JSX.Element | null;
-
-type EditableTextInputProps = Pick<InputProps, 'autoSelect'>;
-declare const EditableTextInput: (props: EditableTextInputProps) => JSX.Element | null;
-
-type DataListProps = ComponentPropsWithoutRef<'dl'> & {
+    href?: string;
     /**
-     * Should only contain `DataListItem` components.
+     * @ignore
+     * Change the color when hovering over the logo
      */
-    children: ReactNode;
+    hoverColor?: string;
     /**
-     * Maximum width for the label.
+     * 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
      */
-    labelMaxWith?: string;
+    iconOnly?: boolean;
     /**
-     * Prominence of the label text. Default is `primary`.
+     * An accessible title for the logo (defaults to "Wistia Logo")
      */
-    labelProminence?: 'primary' | 'secondary';
+    title?: string;
     /**
-     * Alignment of the value text. Default is `start`.
+     * Style of the logo
      */
-    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'> & {
+    variant?: 'dark' | 'light' | 'standard';
     /**
-     * Should only contain `DataListItemLabel` and `DataListItemValue` components.
+     * If true, the logo will be optically centered within its container
      */
-    children: ReactNode;
-};
-/**
- * An item within a `DataList`. It should only contain `DataListItemLabel` and `DataListItemValue` components.
- */
-declare const DataListItem: {
-    ({ children }: DataListItemProps): ReactNode;
-    displayName: string;
-};
-
-/**
- * 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 MarkProps = ComponentPropsWithoutRef<'div'> & {
-    /** The content of the Mark component. */
-    children: ReactNode;
-    colorScheme?: ColorSchemeTypes;
+    opticallyCentered?: boolean;
 };
 /**
- * Defines text that should be marked or highlighted.
+ * Render the Wistia logo in various ways.
  */
-declare const Mark: {
-    ({ children, colorScheme, ...props }: MarkProps): JSX.Element;
+declare const WistiaLogo: {
+    ({ description, height, hoverColor, href, iconOnly, opticallyCentered, title, variant, ...props }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, 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, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, 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 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 };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, 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, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, 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, 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 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 };