@baseline-ui/core 0.12.0 → 0.14.0

package/dist/index.d.mts

@@ -51,7 +51,7 @@ interface StylingProps extends BlockProps {
   style?: React.CSSProperties;
 }
 
-type ListOption = {
+interface ListOption {
     id: string;
     label: string;
     description?: string;
@@ -63,13 +63,13 @@ type ListOption = {
      * @default item
      */
     type?: "option";
-};
-type ListSection = {
+}
+interface ListSection {
     id: string;
     title?: string;
     type: "section";
     children: ListOption[];
-};
+}
 type ListItem = ListOption | ListSection;
 interface ListBoxProps extends StylingProps, Omit<AriaListBoxProps<ListItem> & AriaListBoxOptions<ListItem>, "children" | "linkBehavior" | "isVirtualized" | "keyboardDelegate">, Omit<DragAndDropProps, "preview" | "enableReorder" | "orientation" | "layout">, Partial<Pick<DragAndDropProps, "enableReorder" | "orientation" | "layout">> {
     /**
@@ -633,12 +633,12 @@ type DateFormatProps = Parameters<typeof useDateFormatter>[0] & {
 
 declare const DateFormat: React.FC<DateFormatProps>;
 
-type Item = {
+interface Item {
     id: string;
     label: string;
     variant?: "neutral" | "red" | "green" | "blue" | "high-contrast";
     icon?: React.FC<SVGRProps>;
-};
+}
 interface TagGroupProps extends StylingProps, Omit<AriaTagGroupProps<Item>, "children" | "errorMessage" | "description">, Omit<ListProps<Item>, "children" | "collection" | "filter"> {
     /**
      * The items to display in the tag group.
@@ -1210,7 +1210,7 @@ type TextProps<T extends keyof React.JSX.IntrinsicElements = "span"> = StylingPr
 
 declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, "children" | "autoFocus" | "onFocus" | "onBlur" | "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onDrop" | "onDragStart" | "onDragEnd" | "className" | "style" | "data-block-id" | "type" | "color" | "size" | "content" | "translate" | "hidden" | "elementType" | "role" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
 
-type TransformProps = {
+interface TransformProps {
     /** The `className` property assigned to the root element of the component. */
     className?: string;
     /** The `style` property assigned to the root element of the component. */
@@ -1309,8 +1309,8 @@ type TransformProps = {
      *
      * @default ""
      */
-    transformOrigin?: Array<string | number> | string | "";
-};
+    transformOrigin?: (string | number)[] | string;
+}
 
 declare const Transform: React.ForwardRefExoticComponent<TransformProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -1396,6 +1396,18 @@ interface PreviewProps extends StylingProps, AriaLabelingProps {
     deleteAriaLabel?: string;
     /** The callback to be called when the preview is clicked. */
     addAriaLabel?: string;
+    /**
+     * The accent variable represents the type of accent color used in the
+     * application. It can have one of the following values:
+     *
+     * - "theme": Represents the accent color defined by the current application
+     *   theme.
+     * - "positive": Represents a positive accent color that doesn't change with
+     *   theme.
+     *
+     * @default "theme"
+     */
+    accent?: "theme" | "positive";
 }
 
 declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
@@ -1598,22 +1610,29 @@ interface ToggleIconButtonProps extends StylingProps, Omit<ToggleProps, "childre
     size?: "xxs" | "xs" | "sm" | "md" | "lg";
     /** Represents the variant of a component. */
     variant?: "primary" | "secondary" | "tertiary" | "toolbar";
-    /** The icon to be displayed on the button. */
-    icon: React.FC<IconProps>;
+    /**
+     * The icon to be displayed on the button. You can pass an object with
+     * `selected` and `unselected` keys to display different icons based on the
+     * state of the button.
+     */
+    icon: React.FC<IconProps> | {
+        selected: React.FC<IconProps>;
+        unselected: React.FC<IconProps>;
+    };
 }
 
 declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-type MentionableUser = {
+interface MentionableUser {
     id: string;
     name: string;
     displayName: string;
     avatar?: AvatarProps;
     description?: string;
-};
-type EditorHandle = {
+}
+interface EditorHandle {
     setCaretPosition: (index: number) => void;
-};
+}
 interface EditorProps extends StylingProps, AriaLabelingProps {
     /**
      * The function to be called when `Enter` key is pressed or Save button is
@@ -1823,6 +1842,34 @@ interface DrawerProps extends StylingProps, AriaDialogProps {
 
 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 
+interface AudioPlayerProps extends StylingProps, AriaLabelingProps {
+    /**
+     * The sources of the audio file. The `url` is the URL of the audio file, and
+     * the `type` is the MIME type of the audio file.
+     *
+     * ```tsx
+     * <AudioPlayer
+     *  sources={[
+     *    { url: "/sound.mp3", type: "audio/mpeg" },
+     *    { url: "/sound.ogg", type: "audio/ogg" },
+     *  ]}
+     * />
+     * ```
+     */
+    sources: {
+        url: string;
+        type: string;
+    }[];
+    /**
+     * The size of the audio player.
+     *
+     * @default "lg"
+     */
+    size?: "sm" | "lg";
+}
+
+declare const AudioPlayer: React.ForwardRefExoticComponent<AudioPlayerProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * A hook that creates an IntersectionObserver and observes a target element.
  *
@@ -2043,22 +2090,15 @@ declare function useIsFirstRender(): boolean;
  * @returns {I18nResult<T>} An object containing a function to format messages
  *   and the current locale.
  */
-declare function useI18n<T extends Record<string, string>>(messages?: {
-    [lang: string]: T;
-}): I18nResult<T>;
+declare function useI18n<T extends Record<string, string>>(messages?: Record<string, T>): I18nResult<T>;
 interface I18nResult<T extends LocalizedStrings[keyof LocalizedStrings]> {
-    formatMessage: (id: keyof T | MessageDescriptor<T>, values?: {
-        [p: string]: any;
-    }) => string;
+    formatMessage: (id: keyof T | MessageDescriptor<T>, values?: Record<string, any>) => string;
     locale: Locale;
 }
 interface MessageDescriptor<T extends LocalizedStrings[keyof LocalizedStrings]> {
     id: keyof T;
     defaultMessage?: string;
 }
-type Message<T extends object> = {
-    [U in keyof T]: U;
-};
 /**
  * Defines a set of messages for use with the `useI18n` hook.
  *
@@ -2066,11 +2106,9 @@ type Message<T extends object> = {
  * @returns An object containing the message descriptors with their keys as
  *   property names.
  */
-declare function defineMessages<T extends {
-    [p: string]: {
-        id: string;
-    };
-}>(messages: T): Message<T>;
+declare const defineMessages: <const T extends Record<string, {
+    id: string;
+}>>(messages: T) => T;
 
 /**
  * A hook that uses a MutationObserver to watch for changes to the DOM.
@@ -2160,6 +2198,6 @@ interface TextSelectionProps {
  * @param element - The element to use to get the owner window. Defaults to
  *   `document.body`.
  */
-declare function useDevice(element?: HTMLElement | null): "mobile" | "tablet" | "desktop";
+declare function useDevice(element?: Element | null | undefined): "tablet" | "desktop" | "mobile";
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorPresetInlineInput, type ColorPresetInlineInputProps, ColorSwatch, type ColorSwatchProps, DateFormat, type DateFormatProps, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInputButton, ImageDropZone, type ImageDropZoneProps, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListOption, Markdown, type MarkdownProps, Menu, type MenuItem, type MenuProps, type MessageDescriptor, MessageFormat, type MessageFormatProps, Modal, ModalClose, ModalContent, type ModalContentProps, type ModalProps, ModalTrigger, NumberFormat, type NumberFormatProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Preview, type PreviewProps, ProgressBar, type ProgressBarProps, ProgressSpinner, type ProgressSpinnerProps, RadioGroup, type RadioGroupProps, Reaction, type ReactionProps, ScrollControlButton, type ScrollControlButtonProps, SearchInput, type SearchInputProps, Select, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type StylingProps, Switch, type SwitchProps, TabItem, type TabItemProps, Tabs, type TabsProps, TagGroup, type TagGroupProps, Text, TextInput, type TextInputProps, type TextProps, ThemeProvider, type ThemeProviderProps, ToggleButton, type ToggleButtonProps, ToggleIconButton, type ToggleIconButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Transform, type TransformProps, defineMessages, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorPresetInlineInput, type ColorPresetInlineInputProps, ColorSwatch, type ColorSwatchProps, DateFormat, type DateFormatProps, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInputButton, ImageDropZone, type ImageDropZoneProps, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListOption, Markdown, type MarkdownProps, Menu, type MenuItem, type MenuProps, type MessageDescriptor, MessageFormat, type MessageFormatProps, Modal, ModalClose, ModalContent, type ModalContentProps, type ModalProps, ModalTrigger, NumberFormat, type NumberFormatProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Preview, type PreviewProps, ProgressBar, type ProgressBarProps, ProgressSpinner, type ProgressSpinnerProps, RadioGroup, type RadioGroupProps, Reaction, type ReactionProps, ScrollControlButton, type ScrollControlButtonProps, SearchInput, type SearchInputProps, Select, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type StylingProps, Switch, type SwitchProps, TabItem, type TabItemProps, Tabs, type TabsProps, TagGroup, type TagGroupProps, Text, TextInput, type TextInputProps, type TextProps, ThemeProvider, type ThemeProviderProps, ToggleButton, type ToggleButtonProps, ToggleIconButton, type ToggleIconButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Transform, type TransformProps, defineMessages, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };

package/dist/index.d.ts

@@ -51,7 +51,7 @@ interface StylingProps extends BlockProps {
   style?: React.CSSProperties;
 }
 
-type ListOption = {
+interface ListOption {
     id: string;
     label: string;
     description?: string;
@@ -63,13 +63,13 @@ type ListOption = {
      * @default item
      */
     type?: "option";
-};
-type ListSection = {
+}
+interface ListSection {
     id: string;
     title?: string;
     type: "section";
     children: ListOption[];
-};
+}
 type ListItem = ListOption | ListSection;
 interface ListBoxProps extends StylingProps, Omit<AriaListBoxProps<ListItem> & AriaListBoxOptions<ListItem>, "children" | "linkBehavior" | "isVirtualized" | "keyboardDelegate">, Omit<DragAndDropProps, "preview" | "enableReorder" | "orientation" | "layout">, Partial<Pick<DragAndDropProps, "enableReorder" | "orientation" | "layout">> {
     /**
@@ -633,12 +633,12 @@ type DateFormatProps = Parameters<typeof useDateFormatter>[0] & {
 
 declare const DateFormat: React.FC<DateFormatProps>;
 
-type Item = {
+interface Item {
     id: string;
     label: string;
     variant?: "neutral" | "red" | "green" | "blue" | "high-contrast";
     icon?: React.FC<SVGRProps>;
-};
+}
 interface TagGroupProps extends StylingProps, Omit<AriaTagGroupProps<Item>, "children" | "errorMessage" | "description">, Omit<ListProps<Item>, "children" | "collection" | "filter"> {
     /**
      * The items to display in the tag group.
@@ -1210,7 +1210,7 @@ type TextProps<T extends keyof React.JSX.IntrinsicElements = "span"> = StylingPr
 
 declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, "children" | "autoFocus" | "onFocus" | "onBlur" | "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onDrop" | "onDragStart" | "onDragEnd" | "className" | "style" | "data-block-id" | "type" | "color" | "size" | "content" | "translate" | "hidden" | "elementType" | "role" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
 
-type TransformProps = {
+interface TransformProps {
     /** The `className` property assigned to the root element of the component. */
     className?: string;
     /** The `style` property assigned to the root element of the component. */
@@ -1309,8 +1309,8 @@ type TransformProps = {
      *
      * @default ""
      */
-    transformOrigin?: Array<string | number> | string | "";
-};
+    transformOrigin?: (string | number)[] | string;
+}
 
 declare const Transform: React.ForwardRefExoticComponent<TransformProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -1396,6 +1396,18 @@ interface PreviewProps extends StylingProps, AriaLabelingProps {
     deleteAriaLabel?: string;
     /** The callback to be called when the preview is clicked. */
     addAriaLabel?: string;
+    /**
+     * The accent variable represents the type of accent color used in the
+     * application. It can have one of the following values:
+     *
+     * - "theme": Represents the accent color defined by the current application
+     *   theme.
+     * - "positive": Represents a positive accent color that doesn't change with
+     *   theme.
+     *
+     * @default "theme"
+     */
+    accent?: "theme" | "positive";
 }
 
 declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
@@ -1598,22 +1610,29 @@ interface ToggleIconButtonProps extends StylingProps, Omit<ToggleProps, "childre
     size?: "xxs" | "xs" | "sm" | "md" | "lg";
     /** Represents the variant of a component. */
     variant?: "primary" | "secondary" | "tertiary" | "toolbar";
-    /** The icon to be displayed on the button. */
-    icon: React.FC<IconProps>;
+    /**
+     * The icon to be displayed on the button. You can pass an object with
+     * `selected` and `unselected` keys to display different icons based on the
+     * state of the button.
+     */
+    icon: React.FC<IconProps> | {
+        selected: React.FC<IconProps>;
+        unselected: React.FC<IconProps>;
+    };
 }
 
 declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-type MentionableUser = {
+interface MentionableUser {
     id: string;
     name: string;
     displayName: string;
     avatar?: AvatarProps;
     description?: string;
-};
-type EditorHandle = {
+}
+interface EditorHandle {
     setCaretPosition: (index: number) => void;
-};
+}
 interface EditorProps extends StylingProps, AriaLabelingProps {
     /**
      * The function to be called when `Enter` key is pressed or Save button is
@@ -1823,6 +1842,34 @@ interface DrawerProps extends StylingProps, AriaDialogProps {
 
 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 
+interface AudioPlayerProps extends StylingProps, AriaLabelingProps {
+    /**
+     * The sources of the audio file. The `url` is the URL of the audio file, and
+     * the `type` is the MIME type of the audio file.
+     *
+     * ```tsx
+     * <AudioPlayer
+     *  sources={[
+     *    { url: "/sound.mp3", type: "audio/mpeg" },
+     *    { url: "/sound.ogg", type: "audio/ogg" },
+     *  ]}
+     * />
+     * ```
+     */
+    sources: {
+        url: string;
+        type: string;
+    }[];
+    /**
+     * The size of the audio player.
+     *
+     * @default "lg"
+     */
+    size?: "sm" | "lg";
+}
+
+declare const AudioPlayer: React.ForwardRefExoticComponent<AudioPlayerProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * A hook that creates an IntersectionObserver and observes a target element.
  *
@@ -2043,22 +2090,15 @@ declare function useIsFirstRender(): boolean;
  * @returns {I18nResult<T>} An object containing a function to format messages
  *   and the current locale.
  */
-declare function useI18n<T extends Record<string, string>>(messages?: {
-    [lang: string]: T;
-}): I18nResult<T>;
+declare function useI18n<T extends Record<string, string>>(messages?: Record<string, T>): I18nResult<T>;
 interface I18nResult<T extends LocalizedStrings[keyof LocalizedStrings]> {
-    formatMessage: (id: keyof T | MessageDescriptor<T>, values?: {
-        [p: string]: any;
-    }) => string;
+    formatMessage: (id: keyof T | MessageDescriptor<T>, values?: Record<string, any>) => string;
     locale: Locale;
 }
 interface MessageDescriptor<T extends LocalizedStrings[keyof LocalizedStrings]> {
     id: keyof T;
     defaultMessage?: string;
 }
-type Message<T extends object> = {
-    [U in keyof T]: U;
-};
 /**
  * Defines a set of messages for use with the `useI18n` hook.
  *
@@ -2066,11 +2106,9 @@ type Message<T extends object> = {
  * @returns An object containing the message descriptors with their keys as
  *   property names.
  */
-declare function defineMessages<T extends {
-    [p: string]: {
-        id: string;
-    };
-}>(messages: T): Message<T>;
+declare const defineMessages: <const T extends Record<string, {
+    id: string;
+}>>(messages: T) => T;
 
 /**
  * A hook that uses a MutationObserver to watch for changes to the DOM.
@@ -2160,6 +2198,6 @@ interface TextSelectionProps {
  * @param element - The element to use to get the owner window. Defaults to
  *   `document.body`.
  */
-declare function useDevice(element?: HTMLElement | null): "mobile" | "tablet" | "desktop";
+declare function useDevice(element?: Element | null | undefined): "tablet" | "desktop" | "mobile";
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorPresetInlineInput, type ColorPresetInlineInputProps, ColorSwatch, type ColorSwatchProps, DateFormat, type DateFormatProps, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInputButton, ImageDropZone, type ImageDropZoneProps, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListOption, Markdown, type MarkdownProps, Menu, type MenuItem, type MenuProps, type MessageDescriptor, MessageFormat, type MessageFormatProps, Modal, ModalClose, ModalContent, type ModalContentProps, type ModalProps, ModalTrigger, NumberFormat, type NumberFormatProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Preview, type PreviewProps, ProgressBar, type ProgressBarProps, ProgressSpinner, type ProgressSpinnerProps, RadioGroup, type RadioGroupProps, Reaction, type ReactionProps, ScrollControlButton, type ScrollControlButtonProps, SearchInput, type SearchInputProps, Select, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type StylingProps, Switch, type SwitchProps, TabItem, type TabItemProps, Tabs, type TabsProps, TagGroup, type TagGroupProps, Text, TextInput, type TextInputProps, type TextProps, ThemeProvider, type ThemeProviderProps, ToggleButton, type ToggleButtonProps, ToggleIconButton, type ToggleIconButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Transform, type TransformProps, defineMessages, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorPresetInlineInput, type ColorPresetInlineInputProps, ColorSwatch, type ColorSwatchProps, DateFormat, type DateFormatProps, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInputButton, ImageDropZone, type ImageDropZoneProps, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListOption, Markdown, type MarkdownProps, Menu, type MenuItem, type MenuProps, type MessageDescriptor, MessageFormat, type MessageFormatProps, Modal, ModalClose, ModalContent, type ModalContentProps, type ModalProps, ModalTrigger, NumberFormat, type NumberFormatProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Preview, type PreviewProps, ProgressBar, type ProgressBarProps, ProgressSpinner, type ProgressSpinnerProps, RadioGroup, type RadioGroupProps, Reaction, type ReactionProps, ScrollControlButton, type ScrollControlButtonProps, SearchInput, type SearchInputProps, Select, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type StylingProps, Switch, type SwitchProps, TabItem, type TabItemProps, Tabs, type TabsProps, TagGroup, type TagGroupProps, Text, TextInput, type TextInputProps, type TextProps, ThemeProvider, type ThemeProviderProps, ToggleButton, type ToggleButtonProps, ToggleIconButton, type ToggleIconButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Transform, type TransformProps, defineMessages, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };