@wistia/ui 0.18.0-beta.d6f1661d.d5ef03f → 0.18.1-beta.341b7714.c1c1bd7

package/dist/{index.d.cts → index.d.mts}

@@ -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 as JSX$1, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, PropsWithChildren, ReactElement, InputHTMLAttributes, Ref, SyntheticEvent, HTMLAttributes, ForwardRefExoticComponent, RefAttributes, ComponentProps } 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, ComponentProps } from 'react';
 import { UseFilePickerConfig, FilePickerReturnTypes, ExtractContentTypeFromConfig, useImperativeFilePickerConfig, ImperativeFilePickerReturnTypes } from 'use-file-picker/types';
 export * from 'use-file-picker/types';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
@@ -191,7 +191,7 @@ type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
  * A wrapper to apply a color scheme to its children.
  */
 declare const ColorSchemeWrapper: {
-    ({ __nav, colorScheme, children, ...props }: ColorSchemeWrapperProps): JSX$1.Element;
+    ({ __nav, colorScheme, children, ...props }: ColorSchemeWrapperProps): JSX.Element;
     displayName: string;
 };
 
@@ -440,7 +440,7 @@ type ToastProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Optional `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
      */
-    icon?: JSX$1.Element | undefined;
+    icon?: JSX.Element | undefined;
     /**
      * The message displayed in the toast
      */
@@ -469,7 +469,7 @@ type ActionButtonProps = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon: JSX$1.Element;
+    icon: JSX.Element;
     /**
      * @override
      * Disables the button
@@ -497,7 +497,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon: JSX$1.Element;
+    icon: JSX.Element;
     /**
      * @override
      * Disables the button
@@ -521,7 +521,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon: JSX$1.Element;
+    icon: JSX.Element;
     /**
      * @override
      * Disables the button
@@ -572,7 +572,7 @@ type AvatarProps = ComponentPropsWithoutRef<'div'> & {
  * An avatar uses a photo or initials to represent an identity.
  */
 declare const Avatar: {
-    ({ imageUrl, heightAndWidth, name, size, onImageLoad, ...props }: AvatarProps): JSX$1.Element;
+    ({ imageUrl, heightAndWidth, name, size, onImageLoad, ...props }: AvatarProps): JSX.Element;
     displayName: string;
 };
 
@@ -585,7 +585,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * The text to display in the `Badge`
      */
@@ -606,7 +606,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * The text to display in the `Badge`
      */
@@ -629,7 +629,7 @@ type BannerProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * Controls the visual prominence of the banner
      */
@@ -638,7 +638,7 @@ type BannerProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Optional image element to display in the banner
      */
-    image?: JSX$1.Element | undefined;
+    image?: JSX.Element | undefined;
     /**
      * Controls the layout direction. If set to 'auto', the banner will switch between horizontal and vertical based on the container width.
      */
@@ -660,7 +660,7 @@ type BannerProps = ComponentPropsWithoutRef<'div'> & {
  * The `Banner` component is for displaying contextual information to the user such as alerts or feature announcements.
  */
 declare const Banner: {
-    ({ bodyText, colorScheme, headingText, icon, image, onClose, orientation, primaryAction, prominence, secondaryAction, ...props }: BannerProps): JSX$1.Element;
+    ({ bodyText, colorScheme, headingText, icon, image, onClose, orientation, primaryAction, prominence, secondaryAction, ...props }: BannerProps): JSX.Element;
     displayName: string;
 };
 
@@ -887,7 +887,7 @@ type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
  * [Button](?path=/docs/components-button--docs). See it's documentation for additional functionality.
  */
 declare const Breadcrumbs: {
-    ({ children, ...props }: BreadcrumbsProps): JSX$1.Element;
+    ({ children, ...props }: BreadcrumbsProps): JSX.Element;
     displayName: string;
 };
 
@@ -936,7 +936,7 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
  * with a standardized gap between them.
  */
 declare const ButtonGroup: {
-    ({ children, align, fullWidth, collapseOnSmallScreens, buttonSize, ...props }: ButtonGroupProps): JSX$1.Element | null;
+    ({ children, align, fullWidth, collapseOnSmallScreens, buttonSize, ...props }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -1041,7 +1041,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX$1.Element;
+    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 
@@ -1138,7 +1138,7 @@ type ClickRegionProps = {
     /**
      * The content that should be clickable.
      */
-    children: JSX$1.Element;
+    children: JSX.Element;
     /**
      * The ref to the button or link that should be clicked when the ClickRegion is clicked.
      */
@@ -1155,7 +1155,7 @@ type ClickRegionProps = {
  * In either case, a link or button must be present, but can be hidden by using `ScreenReaderOnly`.
  */
 declare const ClickRegion: {
-    ({ children, targetRef }: ClickRegionProps): JSX$1.Element;
+    ({ children, targetRef }: ClickRegionProps): JSX.Element;
     displayName: string;
 };
 
@@ -1177,7 +1177,7 @@ type CollapsibleProps = {
  * Toggle the visibility of content with a trigger.
  */
 declare const Collapsible: {
-    ({ children, isOpen, onOpenChange, }: CollapsibleProps): JSX$1.Element;
+    ({ children, isOpen, onOpenChange, }: CollapsibleProps): JSX.Element;
     displayName: string;
 };
 
@@ -1430,7 +1430,7 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
  * If you need an interactive element, use IconButton.
  */
 declare const Icon: {
-    ({ useInlineStyles, invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX$1.Element;
+    ({ useInlineStyles, invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX.Element;
     displayName: string;
 };
 
@@ -1458,7 +1458,7 @@ type ColorGridProps = PropsWithChildren & {
     label?: string;
 };
 declare const ColorGrid: {
-    ({ children, label }: ColorGridProps): JSX$1.Element;
+    ({ children, label }: ColorGridProps): JSX.Element;
     displayName: string;
 };
 
@@ -1475,13 +1475,13 @@ type ColorPickerOption = {
 
 type ColorGridOptionProps = ColorPickerOption;
 declare const ColorGridOption: {
-    ({ value: rawValue, name }: ColorGridOptionProps): JSX$1.Element;
+    ({ value: rawValue, name }: ColorGridOptionProps): JSX.Element;
     displayName: string;
 };
 
 type ColorListProps = PropsWithChildren;
 declare const ColorList: {
-    ({ children }: ColorListProps): JSX$1.Element;
+    ({ children }: ColorListProps): JSX.Element;
     displayName: string;
 };
 
@@ -1489,13 +1489,13 @@ type ColorListGroupProps = PropsWithChildren<{
     label: string;
 }>;
 declare const ColorListGroup: {
-    ({ label, children }: ColorListGroupProps): JSX$1.Element;
+    ({ label, children }: ColorListGroupProps): JSX.Element;
     displayName: string;
 };
 
 type ColorListOptionProps = ColorPickerOption;
 declare const ColorListOption: {
-    ({ value: rawValue, name }: ColorListOptionProps): JSX$1.Element;
+    ({ value: rawValue, name }: ColorListOptionProps): JSX.Element;
     displayName: string;
 };
 
@@ -1528,19 +1528,19 @@ type ColorPickerProps = PropsWithChildren<{
  * subcomponents.
  */
 declare const ColorPicker: {
-    ({ children, colorForComparison, minimumContrastRatio, opacityForContrastCalculation, onValueChange, value, }: ColorPickerProps): JSX$1.Element;
+    ({ children, colorForComparison, minimumContrastRatio, opacityForContrastCalculation, onValueChange, value, }: ColorPickerProps): JSX.Element;
     displayName: string;
 };
 
 type ColorPickerPopoverContentProps = PropsWithChildren;
 declare const ColorPickerPopoverContent: {
-    ({ children, }: ColorPickerPopoverContentProps): JSX$1.Element;
+    ({ children, }: ColorPickerPopoverContentProps): JSX.Element;
     displayName: string;
 };
 
 type ColorPickerSectionProps = PropsWithChildren;
 declare const ColorPickerSection: {
-    ({ children }: ColorPickerSectionProps): JSX$1.Element;
+    ({ children }: ColorPickerSectionProps): JSX.Element;
     displayName: string;
 };
 
@@ -1550,7 +1550,7 @@ declare const ColorPickerTrigger: react.ForwardRefExoticComponent<{
 } & react.RefAttributes<HTMLButtonElement>>;
 
 declare const ContrastControls: {
-    (): JSX$1.Element;
+    (): JSX.Element;
     displayName: string;
 };
 
@@ -1561,12 +1561,12 @@ type HexColorInputProps = {
     autoFocus?: boolean;
 };
 declare const HexColorInput: {
-    ({ autoFocus }: HexColorInputProps): JSX$1.Element;
+    ({ autoFocus }: HexColorInputProps): JSX.Element;
     displayName: string;
 };
 
 declare const HueSlider: {
-    (): JSX$1.Element;
+    (): JSX.Element;
     displayName: string;
 };
 
@@ -1574,12 +1574,12 @@ type SaturationAndValuePickerProps = {
     dataTestId?: string;
 };
 declare const SaturationAndValuePicker: {
-    ({ dataTestId, }: SaturationAndValuePickerProps): JSX$1.Element;
+    ({ dataTestId, }: SaturationAndValuePickerProps): JSX.Element;
     displayName: string;
 };
 
 declare const ValueNameOrHexCode: {
-    (): JSX$1.Element;
+    (): JSX.Element;
     displayName: string;
 };
 
@@ -1592,7 +1592,7 @@ type ColorSwatchProps = PropsWithChildren<{
 
 type ValueSwatchProps = Pick<ColorSwatchProps, 'diameterPx'>;
 declare const ValueSwatch: {
-    ({ diameterPx, }: ValueSwatchProps): JSX$1.Element;
+    ({ diameterPx, }: ValueSwatchProps): JSX.Element;
     displayName: string;
 };
 
@@ -1731,7 +1731,7 @@ type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX$1.Element;
+    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 
@@ -1747,9 +1747,9 @@ type DataCardTrendProps = {
     /**
      * Content to display next to the trend arrow
      */
-    children: JSX$1.Element | string;
+    children: JSX.Element | string;
 };
-declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX$1.Element;
+declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
 declare const DataCardHoverArrow: {
     (): react_jsx_runtime.JSX.Element;
@@ -1778,7 +1778,7 @@ type DataListProps = ComponentPropsWithoutRef<'dl'> & {
  * 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$1.Element;
+    ({ children, valueAlignment, labelMaxWith, labelProminence, ...props }: DataListProps): JSX.Element;
     displayName: string;
 };
 
@@ -1872,7 +1872,7 @@ declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentPr
  * The label of the `DataListItem`. Extends the [Text]() component.
  */
 declare const DataListItemLabel: {
-    (props: TextProps): JSX$1.Element;
+    (props: TextProps): JSX.Element;
     displayName: string;
 };
 
@@ -1880,7 +1880,7 @@ declare const DataListItemLabel: {
  * The value of the `DataListItem`. Extends the [Text]() component.
  */
 declare const DataListItemValue: {
-    (props: TextProps): JSX$1.Element;
+    (props: TextProps): JSX.Element;
     displayName: string;
 };
 
@@ -1894,7 +1894,7 @@ type DividerProps = ComponentPropsWithoutRef<'div'> & {
  * A line used to visually separate content; note that dividers have no margin/spacing on their own.
  */
 declare const Divider: {
-    ({ orientation, ...props }: DividerProps): JSX$1.Element;
+    ({ orientation, ...props }: DividerProps): JSX.Element;
     displayName: string;
 };
 
@@ -2008,7 +2008,7 @@ type EditableHeadingProps = {
  * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX$1.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 declare const typographicVariantStyleMap: {
     hero: styled_components.RuleSet<object>;
@@ -2122,7 +2122,7 @@ type EditableTextContextValues = {
     finalFocusEl: (() => HTMLElement | null) | undefined;
 };
 declare const EditableTextContext: react.Context<EditableTextContextValues | null>;
-declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX$1.Element;
+declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX.Element;
 
 type EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
     /**
@@ -2134,7 +2134,7 @@ type EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
  * Used for inline editing of text.
  */
 declare const EditableText: {
-    ({ hideLabel, ...props }: EditableTextProps): JSX$1.Element;
+    ({ hideLabel, ...props }: EditableTextProps): JSX.Element;
     displayName: string;
 };
 
@@ -2174,7 +2174,7 @@ type LabelProps = ComponentPropsWithoutRef<'label'> & {
  * 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$1.Element;
+    ({ children, disabled, htmlFor, required, screenReaderOnly, ...props }: LabelProps): JSX.Element;
     displayName: string;
 };
 
@@ -2183,7 +2183,7 @@ declare const EditableTextLabel: ({ ...props }: EditableTextLabelProps) => react
 
 declare const EditableTextSubmitButton: ({ children, }: {
     children: ReactElement;
-}) => JSX$1.Element | null;
+}) => JSX.Element | null;
 
 type EditableTextCancelButtonProps = {
     /**
@@ -2199,7 +2199,7 @@ type EditableTextTriggerProps = {
      */
     children: ReactElement;
 };
-declare const EditableTextTrigger: ({ children, ...props }: EditableTextTriggerProps) => JSX$1.Element | null;
+declare const EditableTextTrigger: ({ children, ...props }: EditableTextTriggerProps) => JSX.Element | null;
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
     /**
@@ -2214,6 +2214,11 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
      * Set the disabled state of the input
      */
     disabled?: boolean;
+    /**
+     * If true, the input will fill the height of its parent container
+     * _note: only applicable when `type="multiline"`_
+     */
+    fullHeight?: boolean;
     /**
      * If true, the input will fill the width of its parent
      */
@@ -2251,6 +2256,11 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
      * Set the disabled state of the input
      */
     disabled?: boolean;
+    /**
+     * If true, the input will fill the height of its parent container
+     * _note: only applicable when `type="multiline"`_
+     */
+    fullHeight?: boolean;
     /**
      * If true, the input will fill the width of its parent
      */
@@ -2274,7 +2284,7 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
 } & react.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 
 type EditableTextInputProps = Pick<InputProps, 'autoSelect'>;
-declare const EditableTextInput: (props: EditableTextInputProps) => JSX$1.Element | null;
+declare const EditableTextInput: (props: EditableTextInputProps) => JSX.Element | null;
 
 type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
@@ -2290,7 +2300,7 @@ type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
  * Truncate text with an ellispsis visble at the end
  */
 declare const Ellipsis: {
-    ({ children, lines, ...props }: EllipsisProps): JSX$1.Element;
+    ({ children, lines, ...props }: EllipsisProps): JSX.Element;
     displayName: string;
 };
 
@@ -2357,7 +2367,7 @@ type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-labe
  */
 declare const Form: <T>(props: FormProps<T> & {
     ref?: Ref<HTMLFormElement>;
-}) => JSX$1.Element;
+}) => JSX.Element;
 
 type FormErrorSummaryProps = {
     description: string;
@@ -2368,7 +2378,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * This should be a single child that is a valid form field (or can pretend to be one).
      */
-    children: JSX$1.Element;
+    children: JSX.Element;
     /**
      * Additional descriptive text to display below the form field
      */
@@ -2406,7 +2416,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 
@@ -2425,7 +2435,7 @@ type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
  * For grouping like form elements together.
  */
 declare const FormGroup: {
-    ({ children, label, description, ...props }: FormGroupProps): JSX$1.Element;
+    ({ children, label, description, ...props }: FormGroupProps): JSX.Element;
     displayName: string;
 };
 
@@ -2438,7 +2448,7 @@ type RadioGroupProps = FormGroupProps & {
  * For grouping like form elements together. Can serve as a checkbox
  */
 declare const RadioGroup: {
-    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX$1.Element;
+    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
     displayName: string;
 };
 
@@ -2451,7 +2461,7 @@ type CheckboxGroupProps = FormGroupProps & {
  * For grouping like form elements together. Can serve as a checkbox
  */
 declare const CheckboxGroup: {
-    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX$1.Element;
+    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
     displayName: string;
 };
 
@@ -2494,7 +2504,7 @@ type IconButtonProps = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    children: JSX$1.Element;
+    children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
 /**
  * IconButton behaves like a [Button](?path=/docs/components-button--docs),
@@ -2508,7 +2518,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    children: JSX$1.Element;
+    children: JSX.Element;
 } & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
     /**
      * Accessible text for screen readers.
@@ -2517,7 +2527,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    children: JSX$1.Element;
+    children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
@@ -2564,7 +2574,7 @@ type ImageProps = ComponentPropsWithoutRef<'img'> & {
     onError?: (event?: SyntheticEvent<HTMLImageElement>) => void;
 };
 declare const Image: {
-    ({ src, alt, borderRadius, fill: fillContainer, fit: objFit, loading, position: objPosition, onLoad, onError, ...props }: ImageProps): JSX$1.Element;
+    ({ src, alt, borderRadius, fill: fillContainer, fit: objFit, loading, position: objPosition, onLoad, onError, ...props }: ImageProps): JSX.Element;
     displayName: string;
 };
 
@@ -2645,7 +2655,7 @@ type KeyboardShortcutProps = ComponentPropsWithoutRef<'div'> & {
     label?: string;
 };
 declare const KeyboardShortcut: {
-    ({ label, keyboardKeys, fullWidth, ...otherProps }: KeyboardShortcutProps): JSX$1.Element;
+    ({ label, keyboardKeys, fullWidth, ...otherProps }: KeyboardShortcutProps): JSX.Element;
     displayName: string;
 };
 
@@ -2667,7 +2677,7 @@ type ListProps = ComponentPropsWithoutRef<'ul'> & {
     variant?: VariantType;
 };
 declare const List: {
-    ({ children, items, variant, ...otherProps }: ListProps): JSX$1.Element | null;
+    ({ children, items, variant, ...otherProps }: ListProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -2678,7 +2688,7 @@ type ListItemProps = {
     children?: ReactNode;
 };
 declare const ListItem: {
-    ({ children }: ListItemProps): JSX$1.Element | null;
+    ({ children }: ListItemProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -2691,7 +2701,7 @@ type MarkProps = ComponentPropsWithoutRef<'div'> & {
  * Defines text that should be marked or highlighted.
  */
 declare const Mark: {
-    ({ children, colorScheme, ...props }: MarkProps): JSX$1.Element;
+    ({ children, colorScheme, ...props }: MarkProps): JSX.Element;
     displayName: string;
 };
 
@@ -2786,7 +2796,7 @@ type SubMenuProps = {
     /**
      * Icon to display on the left side of the SubMenu. Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
-    icon?: JSX$1.Element | undefined;
+    icon?: JSX.Element | undefined;
 };
 declare const SubMenu: {
     ({ label, description, children, onOpenChange, ...props }: SubMenuProps): react_jsx_runtime.JSX.Element;
@@ -2872,7 +2882,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     type?: LinkTypes;
 } & {
     appearance?: "dangerous" | "default" | "gated";
-    badge?: JSX.Element;
+    badge?: react.JSX.Element;
     children?: react.ReactNode;
     command?: react.ReactNode;
     icon?: ButtonProps["leftIcon"];
@@ -2911,7 +2921,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     type?: LinkTypes;
 } & {
     appearance?: "dangerous" | "default" | "gated";
-    badge?: JSX.Element;
+    badge?: react.JSX.Element;
     children?: react.ReactNode;
     command?: react.ReactNode;
     icon?: ButtonProps["leftIcon"];
@@ -2935,7 +2945,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
 } & {
     appearance?: "dangerous" | "default" | "gated";
-    badge?: JSX.Element;
+    badge?: react.JSX.Element;
     children?: react.ReactNode;
     command?: react.ReactNode;
     icon?: ButtonProps["leftIcon"];
@@ -3175,7 +3185,7 @@ declare const ModalCallouts: {
 };
 type ModalCalloutProps = {
     title: string;
-    image: JSX$1.Element;
+    image: JSX.Element;
     /**
      * The content to be displayed in the modal callout.
      */
@@ -3223,7 +3233,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
     /**
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
      */
-    trigger: JSX$1.Element;
+    trigger: JSX.Element;
     /**
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
@@ -3242,7 +3252,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, ...props }: PopoverProps): JSX$1.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3272,7 +3282,7 @@ type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
  * A progress component that visually represents the completion status of a task
  */
 declare const ProgressBar: {
-    ({ progress, max, children, labelLeft, labelRight, colorScheme, ...props }: ProgressBarProps): JSX$1.Element;
+    ({ progress, max, children, labelLeft, labelRight, colorScheme, ...props }: ProgressBarProps): JSX.Element;
     displayName: string;
 };
 
@@ -3384,7 +3394,7 @@ type RadioCardDefaultLayoutProps = {
     /**
      * The icon to display
      */
-    icon?: JSX$1.Element | undefined;
+    icon?: JSX.Element | undefined;
     /**
      * The main label text for the card.
      *
@@ -3607,7 +3617,7 @@ type IconWithLabel$1 = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * The label of the item
      */
@@ -3618,7 +3628,7 @@ type IconWithAriaLabel$1 = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * Use this when displaying an icon without a label
      */
@@ -3775,7 +3785,7 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
     value?: number[];
 };
 declare const Slider: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX$1.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX.Element;
     displayName: string;
 };
 
@@ -3915,23 +3925,23 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHT
 type TableBodyProps = react__default.HTMLAttributes<HTMLTableSectionElement> & {
     children?: ReactNode;
 };
-declare const TableBody: ({ children, ...props }: TableBodyProps) => JSX$1.Element;
+declare const TableBody: ({ children, ...props }: TableBodyProps) => JSX.Element;
 
 type CellAttrs = Omit<react__default.TdHTMLAttributes<HTMLTableCellElement>, 'ref'> & Omit<react__default.ThHTMLAttributes<HTMLTableCellElement>, 'ref'>;
 type TableCellProps = CellAttrs & {
     children?: ReactNode;
 };
-declare const TableCell: ({ children, ...props }: TableCellProps) => JSX$1.Element;
+declare const TableCell: ({ children, ...props }: TableCellProps) => JSX.Element;
 
 type TableFootProps = react__default.HTMLAttributes<HTMLTableSectionElement> & {
     children?: ReactNode;
 };
-declare const TableFoot: ({ children, ...props }: TableFootProps) => JSX$1.Element;
+declare const TableFoot: ({ children, ...props }: TableFootProps) => JSX.Element;
 
 type TableHeadProps = react__default.HTMLAttributes<HTMLTableSectionElement> & {
     children?: ReactNode;
 };
-declare const TableHead: ({ children, ...props }: TableHeadProps) => JSX$1.Element;
+declare const TableHead: ({ children, ...props }: TableHeadProps) => JSX.Element;
 
 type TableProps = ComponentPropsWithoutRef<'table'> & {
     /**
@@ -3956,22 +3966,22 @@ type TableProps = ComponentPropsWithoutRef<'table'> & {
 /**
  * Semantic table element for presenting data
  */
-declare const Table: ({ children, divided, striped, visuallyHiddenHeader, ...props }: TableProps) => JSX$1.Element;
+declare const Table: ({ children, divided, striped, visuallyHiddenHeader, ...props }: TableProps) => JSX.Element;
 
 type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
     children?: ReactNode;
 };
-declare const TableRow: ({ children, ...props }: TableRowProps) => JSX$1.Element;
+declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;
 
 type TabsProps = Pick<TabsProps$1, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
 declare const Tabs: {
-    ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX$1.Element;
+    ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX.Element;
     displayName: string;
 };
 
 type TabsContentProps = Pick<TabsContentProps$1, 'children' | 'value'>;
 declare const TabsContent: {
-    ({ children, value }: TabsContentProps): JSX$1.Element;
+    ({ children, value }: TabsContentProps): JSX.Element;
     displayName: string;
 };
 
@@ -3979,7 +3989,7 @@ type TabsListProps = Pick<TabsListProps$1, 'aria-label'> & PropsWithChildren<{
     fullWidth?: boolean;
 }>;
 declare const TabsList: {
-    ({ children, fullWidth, ...props }: TabsListProps): JSX$1.Element;
+    ({ children, fullWidth, ...props }: TabsListProps): JSX.Element;
     displayName: string;
 };
 
@@ -3988,7 +3998,7 @@ type IconWithLabel = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * The label of the item
      */
@@ -3999,7 +4009,7 @@ type IconWithAriaLabel = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
-    icon?: JSX$1.Element;
+    icon?: JSX.Element;
     /**
      * Use this when displaying an icon without a label
      */
@@ -4029,7 +4039,7 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Optional icon to display before the label
      */
-    icon?: JSX$1.Element | undefined;
+    icon?: JSX.Element | undefined;
     /**
      * Text label for the `Tag`
      */
@@ -4058,7 +4068,7 @@ declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<
     /**
      * Optional icon to display before the label
      */
-    icon?: JSX$1.Element | undefined;
+    icon?: JSX.Element | undefined;
     /**
      * Text label for the `Tag`
      */
@@ -4077,14 +4087,14 @@ type ThumbnailBadgeProps = {
     /**
      * Icon to display on the left side of the badge
      */
-    icon?: JSX$1.Element | undefined;
+    icon?: JSX.Element | undefined;
     /**
      * Text content to display in the badge
      */
     label: string;
 };
 declare const ThumbnailBadge: {
-    ({ icon, label, ...props }: ThumbnailBadgeProps): JSX$1.Element;
+    ({ icon, label, ...props }: ThumbnailBadgeProps): JSX.Element;
     displayName: string;
 };
 
@@ -4108,6 +4118,7 @@ declare const gradients: {
 };
 type GradientNameType = keyof typeof gradients;
 
+type AspectRatioType = 'square' | 'wide';
 type Storyboard = {
     __typename?: string;
     aspectRatio: number;
@@ -4150,6 +4161,11 @@ type ThumbnailProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
      * Example: '180px'
      */
     height?: string;
+    /**
+     * The aspect ratio of the thumbnail container.
+     * 'wide' maps to 16:9 ratio, 'square' maps to 1:1 ratio.
+     */
+    aspectRatio?: AspectRatioType;
 };
 /**
  * A `Thumbnail` is a small, reduced-size version of an image or video used as a preview or representative image.
@@ -4185,6 +4201,11 @@ declare const Thumbnail: react.ForwardRefExoticComponent<Omit<Omit<react.Detaile
      * Example: '180px'
      */
     height?: string;
+    /**
+     * The aspect ratio of the thumbnail container.
+     * 'wide' maps to 16:9 ratio, 'square' maps to 1:1 ratio.
+     */
+    aspectRatio?: AspectRatioType;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type ThumbnailCollageProps = {
@@ -4202,7 +4223,7 @@ type ThumbnailCollageProps = {
  * 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$1.Element;
+declare const ThumbnailCollage: ({ children, gradientBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
 
 type TooltipProps = {
     /**
@@ -4243,7 +4264,7 @@ type TooltipProps = {
  *
  */
 declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, hideArrow, container, }: TooltipProps): JSX$1.Element;
+    ({ delay, direction, content, children, forceOpen, hideArrow, container, }: TooltipProps): JSX.Element;
     displayName: string;
 };
 
@@ -4302,7 +4323,7 @@ type SplitButtonProps = {
      * The icon to use for the menu toggle, defaults to a down caret
      * @default <Icon type="caret-down" />
      */
-    menuIcon?: JSX$1.Element;
+    menuIcon?: JSX.Element;
     /**
      * The menu items to render within the menu. If the secondary behavior of `SplitButton` should be a button, rather than a menu, omit `menuItems` and use `secondaryAction` instead.
      */
@@ -4318,7 +4339,7 @@ type SplitButtonProps = {
     /**
      * Secondary action should not be used when menuItems is set
      */
-    secondaryAction?: JSX$1.Element;
+    secondaryAction?: JSX.Element;
     /**
      * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
      */
@@ -4332,7 +4353,7 @@ type SplitButtonProps = {
  * A SplitButton is an extension of [Button]() that adds a menu to the right hand side of the button.
  */
 declare const SplitButton: {
-    ({ children, menuLabel, menuIcon, menuItems, disabled, colorScheme, variant, secondaryAction, size, unstyled, menuProps, ...props }: SplitButtonProps): JSX$1.Element;
+    ({ children, menuLabel, menuIcon, menuItems, disabled, colorScheme, variant, secondaryAction, size, unstyled, menuProps, ...props }: SplitButtonProps): JSX.Element;
     displayName: string;
 };