npm - @wistia/ui - Versions diffs - 0.18.14 → 0.18.15-beta.db783a03.0fd487b - Mend

@wistia/ui 0.18.14 → 0.18.15-beta.db783a03.0fd487b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -99,7 +99,7 @@ type Rect = {
     x: number;
     y: number;
 };
-declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T | null>, Rect];
 /**
  * Hook that wraps `useFilePicker` from the use-file-picker library
@@ -116,7 +116,7 @@ declare const useImperativeFilePicker: <T extends useImperativeFilePickerConfig
 type UseFocusTrapOptions = {
     disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | string | null | undefined;
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
@@ -365,9 +365,7 @@ 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: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -398,9 +396,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Om
      * @ignore
      */
     type?: LinkTypes;
-}, "ref"> | Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -409,9 +405,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Om
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
     underline?: "always" | "hover" | "none";
-} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
+} & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
 } & {
@@ -1144,7 +1138,7 @@ type ClickRegionProps = {
     /**
      * The ref to the button or link that should be clicked when the ClickRegion is clicked.
      */
-    targetRef: MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+    targetRef: RefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 };
 /**
  * This allows larger elements to be interactive links or buttons while maintaining acessibility.
@@ -1674,7 +1668,7 @@ type ContextMenuProps = {
 } | {
     position?: never;
     side?: never;
-    triggerRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
 });
 /**
  * The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
@@ -1723,7 +1717,7 @@ declare const DataCard: {
     displayName: string;
 };
-type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
+type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Should be at least one `DataCard` component
      */
@@ -2865,9 +2859,7 @@ type MenuItemButtonProps = ButtonProps & {
     unstyled?: never;
 };
-declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -2908,9 +2900,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -2919,9 +2909,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
     underline?: "always" | "hover" | "none";
-} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
+} & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
 } & {
@@ -2947,9 +2935,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
     children: react.ReactNode;
@@ -3106,7 +3092,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Determines if the modal is currently open
      */
@@ -3154,7 +3140,7 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Determines if the modal is currently open
      */
@@ -4367,4 +4353,18 @@ declare const SplitButton: {
     displayName: string;
 };
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text';
+type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
+    children: ReactNode;
+    overrides: Partial<Record<CustomizableTokens, number | string>>;
+};
+/**
+ * Used for overriding the default theme tokens with custom values.
+ * This should only be used when the ui systems team has been consulted first.
+ */
+declare const CustomizableThemeWrapper: {
+    ({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
+    displayName: string;
+};
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts CHANGED Viewed

@@ -99,7 +99,7 @@ type Rect = {
     x: number;
     y: number;
 };
-declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T | null>, Rect];
 /**
  * Hook that wraps `useFilePicker` from the use-file-picker library
@@ -116,7 +116,7 @@ declare const useImperativeFilePicker: <T extends useImperativeFilePickerConfig
 type UseFocusTrapOptions = {
     disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | string | null | undefined;
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
@@ -365,9 +365,7 @@ 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: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -398,9 +396,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Om
      * @ignore
      */
     type?: LinkTypes;
-}, "ref"> | Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -409,9 +405,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Om
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
     underline?: "always" | "hover" | "none";
-} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
+} & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
 } & {
@@ -1144,7 +1138,7 @@ type ClickRegionProps = {
     /**
      * The ref to the button or link that should be clicked when the ClickRegion is clicked.
      */
-    targetRef: MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+    targetRef: RefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 };
 /**
  * This allows larger elements to be interactive links or buttons while maintaining acessibility.
@@ -1674,7 +1668,7 @@ type ContextMenuProps = {
 } | {
     position?: never;
     side?: never;
-    triggerRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
 });
 /**
  * The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
@@ -1723,7 +1717,7 @@ declare const DataCard: {
     displayName: string;
 };
-type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
+type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Should be at least one `DataCard` component
      */
@@ -2865,9 +2859,7 @@ type MenuItemButtonProps = ButtonProps & {
     unstyled?: never;
 };
-declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -2908,9 +2900,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -2919,9 +2909,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
     underline?: "always" | "hover" | "none";
-} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
+} & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
 } & {
@@ -2947,9 +2935,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
     children: react.ReactNode;
@@ -3106,7 +3092,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Determines if the modal is currently open
      */
@@ -3154,7 +3140,7 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Determines if the modal is currently open
      */
@@ -4367,4 +4353,18 @@ declare const SplitButton: {
     displayName: string;
 };
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text';
+type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
+    children: ReactNode;
+    overrides: Partial<Record<CustomizableTokens, number | string>>;
+};
+/**
+ * Used for overriding the default theme tokens with custom values.
+ * This should only be used when the ui systems team has been consulted first.
+ */
+declare const CustomizableThemeWrapper: {
+    ({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
+    displayName: string;
+};
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 /*
- * @license @wistia/ui v0.18.14
+ * @license @wistia/ui v0.18.15-beta.db783a03.0fd487b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -18,8 +18,6 @@ import { createGlobalStyle } from "styled-components";
 // src/css/globalStyleAdjustmentsCss.tsx
 import { css } from "styled-components";
 var globalStyleAdjustmentsCss = css`
-  /* stylelint-disable property-no-vendor-prefix */
   /**
   * 1. Change from 'content-box' so that 'width' calculations are unaffected by 'padding' or 'border'
        See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
@@ -2385,17 +2383,20 @@ var dateTime = {
 // src/helpers/mergeRefs/mergeRefs.ts
 import { isNotNil, isFunction } from "@wistia/type-guards";
-var mergeRefs = (refs) => (value) => {
-  refs.forEach((ref) => {
-    if (isFunction(ref)) {
-      ref(value);
-      return;
-    }
-    if (isNotNil(ref)) {
-      ref.current = value;
-    }
-  });
-};
+var mergeRefs = (
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  (refs) => (value) => {
+    refs.forEach((ref) => {
+      if (isFunction(ref)) {
+        ref(value);
+        return;
+      }
+      if (isNotNil(ref)) {
+        ref.current = value;
+      }
+    });
+  }
+);
 // src/helpers/mq/mq.ts
 import { getValueAndUnit } from "polished";
@@ -2471,7 +2472,7 @@ import { useCallback as useCallback3 } from "react";
 import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 var useTimedToggle = (initialValue) => {
   const [value, setValue] = useState3(false);
-  const timeoutRef = useRef2();
+  const timeoutRef = useRef2(void 0);
   const initialValueRef = useRef2(initialValue);
   const toggleValue = (timeout) => {
     clearTimeout(timeoutRef.current);
@@ -2846,8 +2847,8 @@ var isEventTargetSupported = (eventTarget) => (
   Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
 );
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
-  const savedEventHandler = useRef5();
-  const savedEventOptions = useRef5();
+  const savedEventHandler = useRef5(void 0);
+  const savedEventOptions = useRef5(void 0);
   useEffect4(() => {
     savedEventHandler.current = eventHandler;
   }, [eventHandler]);
@@ -3040,7 +3041,7 @@ var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) =
 // src/hooks/usePreviousValue/usePreviousValue.ts
 import { useEffect as useEffect6, useRef as useRef6 } from "react";
 var usePreviousValue = (value) => {
-  const ref = useRef6();
+  const ref = useRef6(void 0);
   useEffect6(() => {
     ref.current = value;
   });
@@ -8061,7 +8062,7 @@ var StyledActionButton = styled7(Button)`
   min-width: 96px;
   padding: var(--wui-space-03);
   background: var(--wui-color-bg-surface-secondary);
-  grid-row-gap: var(--wui-space-02);
+  row-gap: var(--wui-space-02);
   border-radius: var(--wui-border-radius-03);
   flex: 0 0 auto;
   transition: background-color var(--wui-motion-duration-02) var(--wui-motion-ease);
@@ -10184,9 +10185,9 @@ var isClickableElement = (element) => {
 };
 var ClickRegion = ({ children, targetRef }) => {
   useEffect9(() => {
-    if (targetRef.current && targetRef.current.tagName === "A") {
+    if (targetRef.current?.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
-    } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
+    } else if (targetRef.current?.tagName === "BUTTON") {
       targetRef.current.setAttribute("data-click-region-target-button", "");
     } else {
     }
@@ -11629,6 +11630,7 @@ var StyledSwitchWrapper = styled45.div`
   display: flex;
   margin: 0;
+  position: relative;
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
@@ -12294,7 +12296,9 @@ var Root = styled48(SliderRoot)`
 var Track = styled48(SliderTrack)`
   width: 100%;
 `;
-var Thumb = styled48(SliderThumb)``;
+var Thumb = styled48(SliderThumb)`
+  position: relative;
+`;
 var ThumbInner = styled48.div`
   cursor: pointer;
   display: block;
@@ -13532,8 +13536,12 @@ MenuItemButton.displayName = "MenuItemButton_UI";
 // src/components/Menu/MenuItemLabelDescription.tsx
 import { styled as styled56 } from "styled-components";
 import { jsx as jsx269 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled56.span``;
-var StyledMenuItemDescription = styled56(Text)``;
+var StyledMenuItemLabel = styled56.span`
+  /* avoid no-empty-source rule */
+`;
+var StyledMenuItemDescription = styled56(Text)`
+  /* avoid no-empty-source rule */
+`;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ jsx269(StyledMenuItemLabel, { children });
 };
@@ -14665,7 +14673,8 @@ var StyledEditableTextDisplay = styled66.div`
   ${({ $minLines }) => isNotNil26($minLines) && css35`
       min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
     `}
-  word-break: break-word;
+  word-break: normal;
+  overflow-wrap: anywhere;
   &[data-wui-editable-text-display='placeholder'] {
     color: var(--wui-color-text-secondary);
@@ -14743,6 +14752,7 @@ var EditableTextDisplayComponent = forwardRef21(
 );
 EditableTextDisplayComponent.displayName = "EditableTextDisplay_UI";
 var EditableTextDisplay = makePolymorphic(
+  // @ts-expect-error makePolymorphic is causing issues with types in R19
   EditableTextDisplayComponent
 );
@@ -17618,7 +17628,9 @@ var TableSectionContext = createContext11(null);
 // src/components/Table/TableBody.tsx
 import { jsx as jsx323 } from "react/jsx-runtime";
-var StyledTableBody = styled98.tbody``;
+var StyledTableBody = styled98.tbody`
+  width: 100%;
+`;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx323(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx323(StyledTableBody, { ...props, children }) });
 };
@@ -17655,7 +17667,9 @@ var TableCell = ({ children, ...props }) => {
 // src/components/Table/TableFoot.tsx
 import { styled as styled100 } from "styled-components";
 import { jsx as jsx325 } from "react/jsx-runtime";
-var StyledTableFoot = styled100.tfoot``;
+var StyledTableFoot = styled100.tfoot`
+  width: 100%;
+`;
 var TableFoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx325(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx325(StyledTableFoot, { ...props, children }) });
 };
@@ -17663,7 +17677,9 @@ var TableFoot = ({ children, ...props }) => {
 // src/components/Table/TableHead.tsx
 import { styled as styled101 } from "styled-components";
 import { jsx as jsx326 } from "react/jsx-runtime";
-var StyledThead = styled101.thead``;
+var StyledThead = styled101.thead`
+  width: 100%;
+`;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx326(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx326(StyledThead, { ...props, children }) });
 };
@@ -17671,7 +17687,9 @@ var TableHead = ({ children, ...props }) => {
 // src/components/Table/TableRow.tsx
 import { styled as styled102 } from "styled-components";
 import { jsx as jsx327 } from "react/jsx-runtime";
-var StyledTableRow = styled102.tr``;
+var StyledTableRow = styled102.tr`
+  width: 100%;
+`;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx327(StyledTableRow, { ...props, children });
 };
@@ -18677,6 +18695,26 @@ var SplitButton = ({
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";
+// src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
+import { styled as styled112 } from "styled-components";
+import { jsx as jsx338 } from "react/jsx-runtime";
+var StyledCustomizableThemeWrapper = styled112.div(
+  (props) => props.$overrides
+);
+var CustomizableThemeWrapper = ({
+  children,
+  overrides,
+  ...props
+}) => /* @__PURE__ */ jsx338(
+  StyledCustomizableThemeWrapper,
+  {
+    ...props,
+    $overrides: overrides,
+    children
+  }
+);
+CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
 export {
   ActionButton,
   Avatar,
@@ -18712,6 +18750,7 @@ export {
   ComboboxOption,
   ContextMenu,
   ContrastControls,
+  CustomizableThemeWrapper,
   DataCard,
   DataCardHoverArrow,
   DataCardTrend,