@wistia/ui 0.26.6 → 0.26.7

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 
-import { AnchorHTMLAttributes, CSSProperties, ChangeEvent, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, Context, Dispatch, ElementType, FC, ForwardRefExoticComponent, HTMLAttributes, InputHTMLAttributes, JSX, LegacyRef, MouseEvent, MutableRefObject, PropsWithChildren, ReactElement, ReactNode, Ref, RefAttributes, RefCallback, RefObject, SetStateAction, SyntheticEvent, TdHTMLAttributes, ThHTMLAttributes } from "react";
+import { AnchorHTMLAttributes, CSSProperties, ChangeEvent, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, Context, Dispatch, ElementType, FC, HTMLAttributes, InputHTMLAttributes, JSX, LegacyRef, MouseEvent, MutableRefObject, PropsWithChildren, ReactElement, ReactNode, Ref, RefCallback, RefObject, SetStateAction, SyntheticEvent, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { RuleSet, css } from "styled-components";
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
 import { Color } from "culori/fn";
@@ -632,7 +632,23 @@ type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
 * This means in addition to its own props, `Link` can use props from `react-router`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
 * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
 */
-declare const Link: ForwardRefExoticComponent<LinkProps>;
+declare const Link: ({
+  beforeAction,
+  children,
+  type,
+  disabled,
+  colorScheme,
+  underline,
+  inheritColor,
+  leftIcon,
+  rightIcon,
+  "aria-disabled": ariaDisabled,
+  role,
+  ref,
+  ...props
+}: LinkProps & {
+  ref?: Ref<HTMLAnchorElement | HTMLButtonElement> | undefined;
+}) => JSX.Element | null;
 //#endregion
 //#region src/private/hooks/useResponsiveProp/useResponsiveProp.d.ts
 type Breakpoints = "isLgAndDown" | "isLgAndUp" | "isMdAndDown" | "isMdAndUp" | "isSmAndDown" | "isSmAndUp" | "isXlAndDown" | "isXlAndUp" | "isXsAndDown" | "isXsAndUp";
@@ -731,14 +747,32 @@ type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
 * action, or performing a delete operation. It replaces the HTML `<button>` element,
 * unless an `href` attribute is passed, in which it will render an `<a>` element.
 */
-declare const Button: ForwardRefExoticComponent<ButtonProps>;
+declare const Button: ({
+  children,
+  forceState,
+  className,
+  leftIcon,
+  rightIcon,
+  colorScheme,
+  disabled,
+  isLoading,
+  unstyled,
+  onClick,
+  fullWidth,
+  size,
+  variant,
+  ref,
+  ...props
+}: ButtonProps & {
+  ref?: Ref<HTMLAnchorElement | HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/private/components/Toast/Toast.d.ts
 type ToastProps = ComponentPropsWithoutRef<"div"> & {
   /**
-  * Action can be undefined (default dismiss button), a Button component or false to hide the dismiss button
+  * Optional `Button` component to render as the toast action
   */
-  action?: ReactElement<typeof Button> | undefined;
+  action?: ReactElement<ButtonProps> | undefined;
   /**
   * Sets the [color scheme](/foundations/color/color-schemes)
   */
@@ -809,7 +843,19 @@ type ActionButtonProps = {
 /**
 * Action Button component is used as one of a group of main actions on the page. It composes [Button](/components/Button).
 */
-declare const ActionButton: ForwardRefExoticComponent<ActionButtonProps>;
+declare const ActionButton: ({
+  icon,
+  colorScheme,
+  disabled,
+  forceState,
+  hoverColorScheme,
+  variant,
+  children,
+  ref,
+  ...props
+}: ActionButtonProps & {
+  ref?: Ref<HTMLAnchorElement | HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Avatar/Avatar.d.ts
 type AvatarInstanceType = "image" | "initials";
@@ -871,7 +917,16 @@ type BadgeProps = ComponentPropsWithoutRef<"div"> & {
 /**
 * A `Badge` is a compact label, with optional icon, to convey status or context.
 */
-declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLDivElement>>;
+declare const Badge: ({
+  colorScheme,
+  label,
+  icon,
+  variant,
+  ref,
+  ...props
+}: BadgeProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Banner/Banner.d.ts
 type BannerProps = ComponentPropsWithoutRef<"div"> & {
@@ -1306,7 +1361,16 @@ type CenterProps = ComponentPropsWithoutRef<"div"> & {
 * Center component provides various ways to center content horizontally within a container.
 * It supports max-width constraints, text alignment, gutters, and intrinsic content centering.
 */
-declare const Center: ForwardRefExoticComponent<CenterProps & RefAttributes<HTMLDivElement>>;
+declare const Center: ({
+  maxWidth,
+  gutterWidth,
+  intrinsic,
+  children,
+  ref,
+  ...props
+}: CenterProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Checkbox/Checkbox.d.ts
 type CheckboxSizeType = "lg" | "md" | "sm";
@@ -1356,7 +1420,23 @@ type CheckboxProps = Omit<ComponentPropsWithoutRef<"input">, "hideLabel" | "labe
   */
   hideLabel?: boolean;
 };
-declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+declare const Checkbox: ({
+  checked,
+  disabled,
+  id,
+  label,
+  description,
+  name,
+  onChange,
+  size,
+  value,
+  required,
+  hideLabel,
+  ref,
+  ...props
+}: CheckboxProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/ClickRegion/ClickRegion.d.ts
 type ClickRegionProps = {
@@ -1594,7 +1674,13 @@ type ColorPickerTriggerProps = ComponentPropsWithoutRef<"button">;
 * it renders a swatch and hex label for the current color; pass custom children
 * to replace that content.
 */
-declare const ColorPickerTrigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare const ColorPickerTrigger: ({
+  children,
+  ref,
+  ...props
+}: ColorPickerTriggerProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/ColorPicker/ContrastControls.d.ts
 type ContrastControlsProps = object;
@@ -2366,7 +2452,19 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
 /**
 * Capture user input with a text field. Should be used within a [Form](/components/Form) and [FormField](/components/FormField).
 */
-declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+declare const Input: ({
+  fullWidth,
+  fullHeight,
+  monospace,
+  type,
+  autoSelect,
+  leftIcon,
+  rightIcon,
+  ref: externalRef,
+  ...props
+}: InputProps & {
+  ref?: Ref<HTMLInputElement | HTMLTextAreaElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/EditableText/EditableTextInput.d.ts
 type EditableTextInputProps = Pick<InputProps, "autoSelect">;
@@ -2516,8 +2614,17 @@ type FormProps<T> = Omit<ComponentPropsWithoutRef<"form">, "action" | "aria-labe
 * 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>;
+declare const Form: <T = Record<string, unknown>>({
+  children,
+  action,
+  values,
+  labelPosition,
+  validate,
+  fullWidth,
+  ref: forwardedRef,
+  ...props
+}: FormProps<T> & {
+  ref?: Ref<HTMLFormElement> | undefined;
 }) => JSX.Element;
 //#endregion
 //#region src/components/Form/FormErrorSummary.d.ts
@@ -2717,7 +2824,15 @@ type IconButtonProps = {
 * IconButton behaves like a [Button](/components/Button),
 * but only accepts an [Icon](/components/Icon) as a child.
 */
-declare const IconButton: ForwardRefExoticComponent<IconButtonProps>;
+declare const IconButton: ({
+  children,
+  label,
+  size,
+  ref,
+  ...props
+}: IconButtonProps & {
+  ref?: Ref<HTMLAnchorElement | HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Image/Image.d.ts
 type ImageProps = ComponentPropsWithoutRef<"img"> & {
@@ -2783,7 +2898,15 @@ type InputClickToCopyProps = Omit<InputProps, "autoSelect" | "disabled" | "right
 /**
 * Provides a readonly input that copies the text to the clipboard when clicked.
 */
-declare const InputClickToCopy: ForwardRefExoticComponent<InputClickToCopyProps & RefAttributes<HTMLInputElement>>;
+declare const InputClickToCopy: ({
+  value,
+  onCopy,
+  disabled,
+  ref,
+  ...props
+}: InputClickToCopyProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/InputDuration/types.d.ts
 type DecimalUnitLength = 0 | 2;
@@ -2815,7 +2938,21 @@ type InputDurationProps = InputDurationBaseProps & {
 /**
 * InputDuration lets users edit a duration value using a keyboard-friendly time input.
 */
-declare const InputDuration: ForwardRefExoticComponent<InputDurationProps & RefAttributes<HTMLInputElement>>;
+declare const InputDuration: ({
+  decimalUnitLength,
+  disabled,
+  fullWidth,
+  maxSeconds,
+  minSeconds,
+  onChangeValueInSeconds,
+  valueInSeconds,
+  onFocus,
+  style,
+  ref: externalRef,
+  ...props
+}: InputDurationProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/InputPassword/InputPassword.d.ts
 type InputPasswordProps = Omit<InputProps, "leftIcon" | "monospace" | "rightIcon" | "type"> & {
@@ -2831,7 +2968,14 @@ type InputPasswordProps = Omit<InputProps, "leftIcon" | "monospace" | "rightIcon
 /**
 * A password input component with a toggle button to show or hide the password text.
 */
-declare const InputPassword: ForwardRefExoticComponent<InputPasswordProps & RefAttributes<HTMLInputElement>>;
+declare const InputPassword: ({
+  onVisibilityToggle,
+  disabled,
+  ref,
+  ...props
+}: InputPasswordProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/KeyboardShortcut/KeyboardKeyTypes.d.ts
 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";
@@ -2984,7 +3128,22 @@ type MenuProps = MenuControlProps & {
 /**
 * Displays a menu to the users with a set of actions.
 */
-declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<HTMLButtonElement>>;
+declare const Menu: ({
+  align,
+  children,
+  disabled,
+  compact,
+  trigger,
+  label,
+  isOpen,
+  side,
+  triggerProps,
+  onOpenChange,
+  ref,
+  ...props
+}: MenuProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Menu/MenuLabel.d.ts
 type MenuLabelProps = {
@@ -3089,7 +3248,14 @@ type MenuItemProps = MenuItemButtonProps & {
   */
   onSelect?: (event: SyntheticEvent) => void;
 };
-declare const MenuItem: ForwardRefExoticComponent<MenuItemProps>;
+declare const MenuItem: ({
+  onSelect,
+  closeOnClick,
+  ref,
+  ...props
+}: MenuItemProps & {
+  ref?: Ref<HTMLAnchorElement | HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Menu/MenuItemLabel.d.ts
 type MenuItemLabelProps = {
@@ -3209,7 +3375,17 @@ type FilterMenuProps = MenuProps & {
   onSearchValueChange: (value: string) => void;
 };
 declare const FilterMenuItem: typeof CheckboxMenuItem;
-declare const FilterMenu: ForwardRefExoticComponent<FilterMenuProps & RefAttributes<HTMLButtonElement>>;
+declare const FilterMenu: ({
+  value,
+  onChange,
+  searchValue,
+  onSearchValueChange,
+  children,
+  ref,
+  ...props
+}: FilterMenuProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Meter/Meter.d.ts
 type MeterSegment = {
@@ -3310,7 +3486,22 @@ type ModalProps = ComponentPropsWithoutRef<"div"> & {
 * A Modal is a focused UI element that appears atop the main interface, requiring
 * user interaction or dismissal before returning to the underlying content.
 */
-declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>;
+declare const Modal: ({
+  children,
+  footer,
+  hideCloseButton,
+  hideTitle,
+  initialFocusRef,
+  isOpen,
+  onRequestClose,
+  positionVariant,
+  title,
+  width,
+  ref,
+  ...props
+}: ModalProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Modal/ModalCallouts.d.ts
 type ModalCalloutsProps = {
@@ -3446,7 +3637,12 @@ type PopoverCloseProps = Omit<ComponentPropsWithoutRef<"button">, "render"> & {
 * pass `render` to merge the close behavior onto a single child element. For
 * a pre-styled icon close button, use `PopoverCloseButton`.
 */
-declare const PopoverClose: ForwardRefExoticComponent<PopoverCloseProps & RefAttributes<HTMLButtonElement>>;
+declare const PopoverClose: ({
+  ref,
+  ...props
+}: PopoverCloseProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Popover/PopoverCloseButton.d.ts
 type PopoverCloseButtonProps = {
@@ -3475,7 +3671,22 @@ type PopoverContentProps = {
 * The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
 * in a `PopoverPortal`). Wraps a `Positioner` and `Popup` internally.
 */
-declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: ({
+  colorScheme,
+  unstyled,
+  maxWidth,
+  maxHeight,
+  sideOffset,
+  side,
+  align,
+  style,
+  role,
+  children,
+  ref,
+  ...props
+}: PopoverContentProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Popover/PopoverPortal.d.ts
 type PopoverPortalProps = {
@@ -3524,7 +3735,13 @@ type PopoverTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "render"> &
 * `<button>` wrapping its children; pass `render` to merge the trigger
 * behavior onto a single child element (e.g. a `Button` or `IconButton`).
 */
-declare const PopoverTrigger: ForwardRefExoticComponent<PopoverTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare const PopoverTrigger: ({
+  nativeButton,
+  ref,
+  ...props
+}: PopoverTriggerProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/ProgressBar/ProgressBar.d.ts
 type ProgressBarProps = ComponentPropsWithoutRef<"div"> & {
@@ -3607,7 +3824,23 @@ type RadioProps = Omit<ComponentPropsWithoutRef<"input">, "hideLabel" | "label"
   */
   hideLabel?: boolean;
 };
-declare const Radio: ForwardRefExoticComponent<RadioProps & RefAttributes<HTMLInputElement>>;
+declare const Radio: ({
+  checked,
+  disabled,
+  id,
+  label,
+  description,
+  name,
+  onChange,
+  size,
+  value,
+  required,
+  hideLabel,
+  ref,
+  ...props
+}: RadioProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/RadioCard/RadioCardDefaultLayout.d.ts
 type RadioCardDefaultLayoutProps = {
@@ -3679,7 +3912,18 @@ type RadioCardWithDefaultLayout = BaseRadioCardProps & RadioCardDefaultLayoutPro
   children?: never;
 };
 type RadioCardProps = RadioCardWithChildren | RadioCardWithDefaultLayout;
-declare const RadioCard: ForwardRefExoticComponent<RadioCardProps & RefAttributes<HTMLInputElement>>;
+declare const RadioCard: ({
+  icon,
+  label,
+  description,
+  showIndicator,
+  isGated,
+  children,
+  ref,
+  ...rootProps
+}: RadioCardProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/RadioCard/RadioCardImage.d.ts
 type RadioCardImageProps = Omit<ComponentPropsWithoutRef<"input">, "onChange"> & {
@@ -3724,7 +3968,16 @@ type RadioCardImageProps = Omit<ComponentPropsWithoutRef<"input">, "onChange"> &
   */
   padding?: Spacings;
 };
-declare const RadioCardImage: ForwardRefExoticComponent<RadioCardImageProps & RefAttributes<HTMLInputElement>>;
+declare const RadioCardImage: ({
+  label,
+  imageSrc,
+  aspectRatio,
+  padding,
+  ref,
+  ...rootProps
+}: RadioCardImageProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/ScreenReaderOnly/ScreenReaderOnly.d.ts
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<"div"> & {
@@ -3760,7 +4013,16 @@ type ScrollAreaProps = HTMLAttributes<HTMLDivElement> & {
 * ScrollArea is a simple scrollable container with shadow effects to indicate
 * scrollability.
 */
-declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & RefAttributes<HTMLDivElement>>;
+declare const ScrollArea: ({
+  children,
+  onScroll,
+  style,
+  locked,
+  ref: forwardedRef,
+  ...props
+}: ScrollAreaProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControl.d.ts
 type SegmentedControlProps = {
@@ -3792,7 +4054,18 @@ type SegmentedControlProps = {
 /**
 * Provides a horizontal set of segments for switching between different values
 */
-declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps & HTMLAttributes<HTMLDivElement>>;
+declare const SegmentedControl: ({
+  children,
+  colorScheme,
+  disabled,
+  fullWidth,
+  selectedValue,
+  onSelectedValueChange,
+  ref,
+  ...props
+}: SegmentedControlProps & Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "defaultValue"> & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element | null;
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControlItem.d.ts
 type BaseProps$1 = {
@@ -3836,7 +4109,17 @@ type NoIcon$1 = {
   "aria-label"?: never;
 };
 type SegmentedControlItemProps = BaseProps$1 & (IconWithAriaLabel$1 | IconWithLabel$1 | NoIcon$1);
-declare const SegmentedControlItem: ForwardRefExoticComponent<SegmentedControlItemProps & RefAttributes<HTMLButtonElement>>;
+declare const SegmentedControlItem: ({
+  disabled,
+  icon,
+  label,
+  "aria-label": ariaLabel,
+  value,
+  ref: forwardedRef,
+  ...otherProps
+}: SegmentedControlItemProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Select/Select.d.ts
 type SelectProps = {
@@ -3902,7 +4185,24 @@ type SelectProps = {
 /**
 * Display a list of options and choose one of them. Replacement for the native Select HTML element.
 */
-declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLButtonElement>>;
+declare const Select: ({
+  colorScheme,
+  children,
+  onOpenChange,
+  onChange,
+  placeholder,
+  fullWidth,
+  forceOpen,
+  showScrollArrows,
+  disabled,
+  name,
+  value,
+  "aria-invalid": ariaInvalid,
+  ref: forwardedRef,
+  ...props
+}: SelectProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Select/SelectOption.d.ts
 type SelectOptionProps = {
@@ -3935,7 +4235,16 @@ type SelectOptionProps = {
   */
   checkmarkVerticalAlign?: "center" | "top";
 };
-declare const SelectOption: ForwardRefExoticComponent<SelectOptionProps & RefAttributes<HTMLDivElement>>;
+declare const SelectOption: ({
+  children,
+  selectedDisplayValue,
+  checkmarkVerticalAlign,
+  textValue,
+  ref: forwardedRef,
+  ...props
+}: SelectOptionProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Select/SelectOptionGroup.d.ts
 type SelectOptionGroupProps = {
@@ -3956,7 +4265,13 @@ type SidebarProps = HTMLAttributes<HTMLElement> & {
   */
   children: ReactNode;
 };
-declare const Sidebar: ForwardRefExoticComponent<SidebarProps & RefAttributes<HTMLElement>>;
+declare const Sidebar: ({
+  children,
+  ref,
+  ...props
+}: SidebarProps & {
+  ref?: Ref<HTMLElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Sidebar/SidebarHeader.d.ts
 type SidebarHeaderProps = {
@@ -4034,7 +4349,13 @@ type SidebarButtonProps = (Omit<ButtonAsButtonProps, "fullWidth" | "size" | "uns
   */
   selected?: boolean;
 };
-declare const SidebarButton: ForwardRefExoticComponent<SidebarButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const SidebarButton: ({
+  selected,
+  ref,
+  ...props
+}: SidebarButtonProps & {
+  ref?: Ref<HTMLAnchorElement | HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Sidebar/SidebarSearchInput.d.ts
 type SidebarSearchInputProps = Omit<InputProps, "type"> & {
@@ -4045,7 +4366,14 @@ type SidebarSearchInputProps = Omit<InputProps, "type"> & {
   */
   label?: string;
 };
-declare const SidebarSearchInput: ForwardRefExoticComponent<SidebarSearchInputProps & RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+declare const SidebarSearchInput: ({
+  id,
+  label,
+  ref,
+  ...props
+}: SidebarSearchInputProps & {
+  ref?: Ref<HTMLInputElement | HTMLTextAreaElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Slider/Slider.d.ts
 type SliderProps = Omit<ComponentPropsWithoutRef<"div">, "onChange"> & {
@@ -4233,7 +4561,24 @@ type SwitchProps = Omit<ComponentPropsWithoutRef<"input">, "hideLabel" | "label"
   */
   hideLabel?: boolean;
 };
-declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLInputElement>>;
+declare const Switch: ({
+  align,
+  checked,
+  disabled,
+  id,
+  label,
+  description,
+  name,
+  onChange,
+  size,
+  value,
+  required,
+  hideLabel,
+  ref,
+  ...props
+}: SwitchProps & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Table/TableBody.d.ts
 type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
@@ -4373,7 +4718,17 @@ type NoIcon = {
   "aria-label"?: never;
 };
 type TabsTriggerProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
-declare const TabsTrigger: ForwardRefExoticComponent<TabsTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare const TabsTrigger: ({
+  disabled,
+  icon,
+  label,
+  "aria-label": ariaLabel,
+  value,
+  ref,
+  ...otherProps
+}: TabsTriggerProps & {
+  ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Tag/Tag.d.ts
 type TagProps = ComponentPropsWithoutRef<"div"> & {
@@ -4405,7 +4760,18 @@ type TagProps = ComponentPropsWithoutRef<"div"> & {
 /**
 * A `Tag` is an optionally linked label, with an optional action button, to categorize content.
 */
-declare const Tag: ForwardRefExoticComponent<TagProps & RefAttributes<HTMLDivElement>>;
+declare const Tag: ({
+  onClickRemove,
+  colorScheme,
+  href,
+  icon,
+  label,
+  onClickRemoveLabel,
+  ref,
+  ...props
+}: TagProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/Thumbnail/ThumbnailBadge.d.ts
 type ThumbnailBadgeProps = {
@@ -4473,7 +4839,20 @@ type ThumbnailProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
 /**
 * A `Thumbnail` is a small, reduced-size version of an image or video used as a preview or representative image.
 */
-declare const Thumbnail: ForwardRefExoticComponent<ThumbnailProps & RefAttributes<HTMLDivElement>>;
+declare const Thumbnail: ({
+  gradientBackground,
+  thumbnailImageType,
+  thumbnailUrl,
+  width,
+  children,
+  storyboard,
+  height,
+  aspectRatio,
+  ref,
+  ...props
+}: ThumbnailProps & {
+  ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;
 //#endregion
 //#region src/components/ThumbnailCollage/ThumbnailCollage.d.ts
 type ThumbnailCollageProps = {