@wistia/ui 0.8.18 → 0.8.19

package/dist/index.d.mts

@@ -94,6 +94,8 @@ type UseFocusTrapOptions = {
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
+declare const useForceUpdate: () => (() => void);
+
 type HoverProps = {
     onFocus: () => void;
     onMouseEnter: () => void;
@@ -3221,4 +3223,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -94,6 +94,8 @@ type UseFocusTrapOptions = {
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
+declare const useForceUpdate: () => (() => void);
+
 type HoverProps = {
     onFocus: () => void;
     onMouseEnter: () => void;
@@ -3221,4 +3223,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.18
+ * @license @wistia/ui v0.8.19
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2245,10 +2245,19 @@ var useFocusTrap = (active = true, options = {}) => {
   return setRef;
 };
 
+// src/hooks/useForceUpdate/useForceUpdate.ts
+import { useCallback as useCallback5, useState as useState4 } from "react";
+var useForceUpdate = () => {
+  const [, dispatch] = useState4(/* @__PURE__ */ Object.create(null));
+  return useCallback5(() => {
+    dispatch(/* @__PURE__ */ Object.create(null));
+  }, [dispatch]);
+};
+
 // src/hooks/useIsHovered/useIsHovered.ts
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 var useIsHovered = () => {
-  const [isHovered, setIsHovered] = useState4(false);
+  const [isHovered, setIsHovered] = useState5(false);
   const onFocus = () => setIsHovered(true);
   const onMouseEnter = () => setIsHovered(true);
   const onMouseMove = () => setIsHovered(true);
@@ -2267,7 +2276,7 @@ var useIsHovered = () => {
 };
 
 // src/hooks/useKey/useKey.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 
 // src/private/hooks/useEvent/useEvent.ts
 import { useEffect as useEffect4, useRef as useRef4 } from "react";
@@ -2317,7 +2326,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
 
 // src/hooks/useKey/useKey.ts
 var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOptions } = {}) => {
-  const memoizedEventHandler = useCallback5(
+  const memoizedEventHandler = useCallback6(
     (handlerEvent) => {
       if (["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.isContentEditable) {
         return;
@@ -2342,9 +2351,9 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
 };
 
 // src/hooks/useLocalStorage/useLocalStorage.ts
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 var useLocalStorage = (key, initialValue, storage = window.localStorage) => {
-  const [storedValue, setStoredValue] = useState5(() => {
+  const [storedValue, setStoredValue] = useState6(() => {
     try {
       const item = storage.getItem(key);
       return item !== null && !!item ? JSON.parse(item) : initialValue;
@@ -2388,7 +2397,7 @@ var useLockBodyScroll = (locked) => {
 import { isBoolean } from "@wistia/type-guards";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState6, useLayoutEffect as useLayoutEffect2 } from "react";
+import { useState as useState7, useLayoutEffect as useLayoutEffect2 } from "react";
 import { debounce } from "throttle-debounce";
 
 // src/private/helpers/isClient/isClient.ts
@@ -2396,7 +2405,7 @@ var isClient = () => typeof window !== "undefined" && typeof document !== "undef
 
 // src/hooks/useWindowSize/useWindowSize.ts
 var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = useState6({
+  const [dimensions, setDimensions] = useState7({
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
@@ -2491,7 +2500,7 @@ var usePreviousValue = (value) => {
 };
 
 // src/hooks/useToast/useToast.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 import { toast as sonnerToast } from "sonner";
 
 // src/private/components/Toast/Toast.tsx
@@ -2770,7 +2779,7 @@ Toast.displayName = "Toast";
 // src/hooks/useToast/useToast.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var useToast = () => {
-  return useCallback6(
+  return useCallback7(
     ({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
       sonnerToast.custom(
         () => {
@@ -7333,7 +7342,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState7, useMemo as useMemo3, useEffect as useEffect7 } from "react";
+import { useState as useState8, useMemo as useMemo3, useEffect as useEffect7 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
 import styled9 from "styled-components";
 
@@ -7541,7 +7550,7 @@ var Avatar = ({
   onImageLoad,
   ...props
 }) => {
-  const [imageLoadState, setImageLoadState] = useState7("loading");
+  const [imageLoadState, setImageLoadState] = useState8("loading");
   useEffect7(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
@@ -8346,7 +8355,7 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback7, useEffect as useEffect8 } from "react";
+import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback8, useEffect as useEffect8 } from "react";
 var ClickRegion = ({ children, targetRef }) => {
   useEffect8(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
@@ -8356,7 +8365,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = useCallback7(
+  const handleClick = useCallback8(
     (event) => {
       const node = targetRef.current;
       if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
@@ -8985,7 +8994,7 @@ Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import styled31, { css as css27 } from "styled-components";
-import { useState as useState8, useRef as useRef7 } from "react";
+import { useState as useState9, useRef as useRef7 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -9343,10 +9352,10 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = useState8(false);
-  const [value, setValue] = useState8(children);
-  const [previousValue, setPreviousValue] = useState8(children);
-  const [headingHeight, setHeadingHeight] = useState8("60");
+  const [isEditing, setIsEditing] = useState9(false);
+  const [value, setValue] = useState9(children);
+  const [previousValue, setPreviousValue] = useState9(children);
+  const [headingHeight, setHeadingHeight] = useState9("60");
   const headingRef = useRef7(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
@@ -9426,7 +9435,7 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef8, useMemo as useMemo4, createContext as createContext3, useState as useState9, useId as useId2 } from "react";
+import { forwardRef as forwardRef12, useRef as useRef8, useMemo as useMemo4, createContext as createContext3, useState as useState10, useId as useId2 } from "react";
 import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -9486,8 +9495,8 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = useState9({});
-  const [hasSubmitted, setHasSubmitted] = useState9(false);
+  const [errors, setErrors] = useState10({});
+  const [hasSubmitted, setHasSubmitted] = useState10(false);
   const innerRef = useRef8();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
@@ -9564,12 +9573,12 @@ FormComponent.displayName = "Form";
 var Form = forwardRef12(FormComponent);
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback8, useState as useState10 } from "react";
+import { useCallback as useCallback9, useState as useState11 } from "react";
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = useState10(initialData);
-  const [isPending, setIsPending] = useState10(false);
-  const [error, setError] = useState10(null);
-  const formAction = useCallback8(
+  const [data, setData] = useState11(initialData);
+  const [isPending, setIsPending] = useState11(false);
+  const [error, setError] = useState11(null);
+  const formAction = useCallback9(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -9960,7 +9969,7 @@ IconButton.displayName = "IconButton";
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import styled38 from "styled-components";
-import { forwardRef as forwardRef14, useEffect as useEffect9, useState as useState11 } from "react";
+import { forwardRef as forwardRef14, useEffect as useEffect9, useState as useState12 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx230 } from "react/jsx-runtime";
 var StyledInput2 = styled38(Input)`
@@ -9975,7 +9984,7 @@ var StyledInput2 = styled38(Input)`
 var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef14(
   ({ value, onCopy, ...props }, ref) => {
-    const [isCopied, setIsCopied] = useState11(false);
+    const [isCopied, setIsCopied] = useState12(false);
     useEffect9(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
@@ -10214,7 +10223,7 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import styled43 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
@@ -10400,7 +10409,7 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState12(false);
+  const [isExpanded, setIsExpanded] = useState13(false);
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs27(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs27(SubMenuTrigger, { ...props, children: [
@@ -11189,13 +11198,13 @@ import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState13 } from "react";
+import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState14 } from "react";
 import { jsx as jsx248 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState13(null);
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState14(null);
   const selectedItemIndicatorStyle = useMemo8(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
@@ -11915,7 +11924,7 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef27, useState as useState14 } from "react";
+import { forwardRef as forwardRef27, useState as useState15 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil29, isNil as isNil15 } from "@wistia/type-guards";
 import styled69 from "styled-components";
@@ -12114,7 +12123,7 @@ var Tabs = forwardRef27(
     ...props
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = useState14(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = useState15(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
@@ -12943,6 +12952,7 @@ export {
   useClipboard,
   useFilePicker,
   useFocusTrap,
+  useForceUpdate,
   useFormState,
   useImperativeFilePicker,
   useIsHovered,