@wistia/ui 0.20.12 → 0.20.13-beta.9f5bed57.0b3f624

package/dist/index.d.ts

@@ -157,6 +157,9 @@ type UseKeyOptions = {
 };
 declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName, eventTarget, eventOptions }?: UseKeyOptions) => void;
 
+type KeyPressState = [boolean, KeyboardEvent | null];
+declare const useKeyPress: (keyFilter: Parameters<typeof useKey>[0]) => KeyPressState;
+
 type SetItemType = Storage['setItem'];
 declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
 
@@ -237,6 +240,10 @@ type BaseProps$2 = {
      * Disables the link
      */
     disabled?: boolean;
+    /**
+     * When true, the link will inherit its color from the parent element instead of using the default link color
+     */
+    inheritColor?: boolean;
     /**
      * Icon to display on the left side of the link. Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
@@ -381,6 +388,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -412,6 +420,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2933,6 +2942,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2974,6 +2984,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -3646,6 +3657,10 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
      * `SegmentedControlItem`s that will be rendered in grouping
      */
     children?: ReactNode;
+    /**
+     * Determines the color scheme for the SegmentedControl and its children.
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Set the entire `SegmentedControl` to be disabled
      */
@@ -4444,4 +4459,4 @@ declare const CustomizableThemeWrapper: {
     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, Markdown, type MarkdownProps, 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, coerceToBoolean, 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, validateWithYup };
+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, Markdown, type MarkdownProps, 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, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.12
+ * @license @wistia/ui v0.20.13-beta.9f5bed57.0b3f624
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -2932,10 +2932,19 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
   useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 
-// src/hooks/useLocalStorage/useLocalStorage.ts
+// src/hooks/useKeyPress/useKeyPress.ts
 import { useState as useState7 } from "react";
+var useKeyPress = (keyFilter) => {
+  const [state, setState] = useState7([false, null]);
+  useKey(keyFilter, (event) => setState([true, event]), { eventName: "keydown" });
+  useKey(keyFilter, (event) => setState([false, event]), { eventName: "keyup" });
+  return state;
+};
+
+// src/hooks/useLocalStorage/useLocalStorage.ts
+import { useState as useState8 } from "react";
 var useLocalStorage = (key, initialValue, storage = window.localStorage) => {
-  const [storedValue, setStoredValue] = useState7(() => {
+  const [storedValue, setStoredValue] = useState8(() => {
     try {
       const item = storage.getItem(key);
       return item !== null && Boolean(item) ? JSON.parse(item) : initialValue;
@@ -2979,7 +2988,7 @@ var useLockBodyScroll = (locked) => {
 import { isBoolean } from "@wistia/type-guards";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState8, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useState as useState9, useLayoutEffect as useLayoutEffect3 } from "react";
 import { debounce } from "throttle-debounce";
 
 // src/private/helpers/isClient/isClient.ts
@@ -2987,7 +2996,7 @@ var isClient = () => typeof window !== "undefined" && typeof document !== "undef
 
 // src/hooks/useWindowSize/useWindowSize.ts
 var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = useState8({
+  const [dimensions, setDimensions] = useState9({
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
@@ -8042,7 +8051,11 @@ var StyledLink = styled5.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: inherit;
-  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
+  color: ${({ $disabled, $inheritColor }) => {
+  if ($disabled) return "var(--wui-color-text-disabled)";
+  if ($inheritColor) return "inherit";
+  return "var(--wui-color-text-link)";
+}};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
   display: inline-flex;
   align-items: baseline;
@@ -8074,6 +8087,7 @@ var Link = forwardRef(
     disabled = false,
     colorScheme = "inherit",
     underline = "none",
+    inheritColor = false,
     leftIcon,
     rightIcon,
     "aria-disabled": ariaDisabled,
@@ -8083,6 +8097,7 @@ var Link = forwardRef(
     const inRouterContext = useInRouterContext();
     const to = generateHref(props.href, type, disabled);
     const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
+    const hasIcons = isNotNil5(leftIcon) || isNotNil5(rightIcon);
     const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
@@ -8111,6 +8126,8 @@ var Link = forwardRef(
       $colorScheme: colorScheme,
       $disabled: disabled,
       $underline: underline,
+      $inheritColor: inheritColor,
+      $hasIcons: hasIcons,
       onClick: handleClick,
       "aria-disabled": ariaDisabled ?? (disabled ? "true" : void 0)
     };
@@ -8460,7 +8477,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton_UI";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState9, useMemo as useMemo4, useEffect as useEffect7 } from "react";
+import { useState as useState10, useMemo as useMemo4, useEffect as useEffect7 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
 import { styled as styled10 } from "styled-components";
 
@@ -8673,7 +8690,7 @@ var Avatar = ({
   onImageLoad,
   ...props
 }) => {
-  const [imageLoadState, setImageLoadState] = useState9("loading");
+  const [imageLoadState, setImageLoadState] = useState10("loading");
   useEffect7(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
@@ -8765,7 +8782,7 @@ var Badge = forwardRef4(
 Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
-import { useEffect as useEffect8, useState as useState10, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect8, useState as useState11, useMemo as useMemo5 } from "react";
 import { styled as styled17 } from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
 
@@ -9540,8 +9557,8 @@ var Banner = ({
 }) => {
   const [containerRef, { width }] = useElementObserver();
   const [contentRef, { height: contentHeight }] = useElementObserver();
-  const [isSmallContainer, setIsSmallContainer] = useState10(false);
-  const [isVerticalLayout, setIsVerticalLayout] = useState10(orientation === "vertical");
+  const [isSmallContainer, setIsSmallContainer] = useState11(false);
+  const [isVerticalLayout, setIsVerticalLayout] = useState11(orientation === "vertical");
   useEffect8(() => {
     const breakpoint = orientation === "vertical" ? VERTICAL_BREAKPOINT_WIDTH : BREAKPOINT_WIDTH;
     setIsSmallContainer(width <= breakpoint);
@@ -10143,7 +10160,7 @@ var FormGroup = ({
 FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState11, useId } from "react";
+import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState12, useId } from "react";
 import { styled as styled28 } from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -10186,8 +10203,8 @@ var Form = forwardRef11(
     fullWidth = false,
     ...props
   }, forwardedRef) => {
-    const [errors, setErrors] = useState11({});
-    const [hasSubmitted, setHasSubmitted] = useState11(false);
+    const [errors, setErrors] = useState12({});
+    const [hasSubmitted, setHasSubmitted] = useState12(false);
     const innerRef = useRef8(null);
     const ref = forwardedRef ?? innerRef;
     const autoId = useId();
@@ -10622,7 +10639,7 @@ import { styled as styled34 } from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
-import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect10, useMemo as useMemo8, useState as useState12 } from "react";
+import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect10, useMemo as useMemo8, useState as useState13 } from "react";
 import { formatHex as formatHex2 } from "culori/fn";
 
 // src/components/ColorPicker/color-conversion-utils.ts
@@ -11021,11 +11038,11 @@ var ColorPickerProvider = ({
   opacityForContrastCalculation,
   value: valueAsHex
 }) => {
-  const [isTransitioning, setIsTransitioning] = useState12(false);
-  const [isDragging, setIsDragging] = useState12(false);
-  const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = useState12(convertToHsv(valueAsHex));
-  const [valueAsHsv, setValueAsHsv] = useState12(convertToHsv(valueAsHex));
-  const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = useState12(false);
+  const [isTransitioning, setIsTransitioning] = useState13(false);
+  const [isDragging, setIsDragging] = useState13(false);
+  const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = useState13(convertToHsv(valueAsHex));
+  const [valueAsHsv, setValueAsHsv] = useState13(convertToHsv(valueAsHex));
+  const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = useState13(false);
   const getAccessibleDerivativeColor = useCallback9(
     (originalColor) => getAccessibleColor({
       originalColor,
@@ -12090,7 +12107,7 @@ var ContrastControls = () => {
 ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef10, useState as useState13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef10, useState as useState14 } from "react";
 import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
@@ -12369,7 +12386,7 @@ var normalizeHexInput = (input) => {
 var HexColorInput = ({ autoFocus = true }) => {
   const { valueAsHex, nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const inputRef = useRef10(null);
-  const [textInputValue, setTextInputValue] = useState13(valueAsHex);
+  const [textInputValue, setTextInputValue] = useState14(valueAsHex);
   const onChangeInputValue = useCallback13(
     (event) => {
       const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
@@ -12659,7 +12676,7 @@ var HueSlider = () => {
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState15 } from "react";
 import { styled as styled50 } from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
@@ -12868,7 +12885,7 @@ var SaturationAndValuePicker = ({
     }
     return valueAsHexConvertedToHsv;
   }, [isTransitioning, valueAsHexConvertedToHsv, valueAsHsv]);
-  const [thumbStyle, setThumbStyle] = useState14({
+  const [thumbStyle, setThumbStyle] = useState15({
     backgroundColor: valueAsHex
   });
   useLayoutEffect4(() => {
@@ -13036,7 +13053,7 @@ import * as Ariakit from "@ariakit/react";
 import {
   useMemo as useMemo11,
   useRef as useRef14,
-  useState as useState15,
+  useState as useState16,
   useTransition,
   useEffect as useEffect15,
   Children as Children5,
@@ -13386,9 +13403,9 @@ var Combobox2 = ({
   flipPopover = true,
   fullWidth = true
 }) => {
-  const [isOpen, setIsOpen] = useState15(false);
+  const [isOpen, setIsOpen] = useState16(false);
   const [isPending, startTransition] = useTransition();
-  const [wrapperWidth, setWrapperWidth] = useState15("auto");
+  const [wrapperWidth, setWrapperWidth] = useState16("auto");
   const comboboxWrapperRef = useRef14(null);
   const options = useMemo11(() => extractOptions(children), [children]);
   const isMultiSelect = isArray2(value);
@@ -13492,7 +13509,7 @@ var Combobox2 = ({
 
 // src/components/ContextMenu/ContextMenu.tsx
 import { isNil as isNil16, isNotNil as isNotNil24 } from "@wistia/type-guards";
-import { useEffect as useEffect16, useState as useState17 } from "react";
+import { useEffect as useEffect16, useState as useState18 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Menu/Menu.tsx
@@ -13694,7 +13711,7 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { styled as styled57 } from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
@@ -13890,7 +13907,7 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState16(false);
+  const [isExpanded, setIsExpanded] = useState17(false);
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs38(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs38(SubMenuTrigger, { ...props, children: [
@@ -14182,8 +14199,8 @@ var ContextMenu = ({
   onRequestClose = () => null,
   compact = false
 }) => {
-  const [isRightClicked, setIsRightClicked] = useState17(false);
-  const [menuPosition, setMenuPosition] = useState17(position ?? { x: 0, y: 0 });
+  const [isRightClicked, setIsRightClicked] = useState18(false);
+  const [menuPosition, setMenuPosition] = useState18(position ?? { x: 0, y: 0 });
   useEffect16(() => {
     if (isNil16(position)) {
       const onContextMenu = (event) => {
@@ -14685,7 +14702,7 @@ Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import { styled as styled64, css as css34 } from "styled-components";
-import { useState as useState18, useRef as useRef16 } from "react";
+import { useState as useState19, useRef as useRef16 } from "react";
 import { Fragment as Fragment8, jsx as jsx297, jsxs as jsxs43 } from "react/jsx-runtime";
 var StyledInput = styled64(Input)`
   &:not([rows]) {
@@ -14740,10 +14757,10 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = useState18(false);
-  const [value, setValue] = useState18(children);
-  const [previousValue, setPreviousValue] = useState18(children);
-  const [headingHeight, setHeadingHeight] = useState18("60");
+  const [isEditing, setIsEditing] = useState19(false);
+  const [value, setValue] = useState19(children);
+  const [previousValue, setPreviousValue] = useState19(children);
+  const [headingHeight, setHeadingHeight] = useState19("60");
   const headingRef = useRef16(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) {
@@ -14831,7 +14848,7 @@ import { styled as styled66, css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
-import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
+import { createContext as createContext7, useMemo as useMemo13, useState as useState20, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
 import { styled as styled65 } from "styled-components";
 import { jsx as jsx298 } from "react/jsx-runtime";
@@ -14896,9 +14913,9 @@ var EditableTextRoot = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = useState19(defaultValue);
-  const [originalValue, setOriginalValue] = useState19(defaultValue);
-  const [isEditing, setIsEditing] = useState19(false);
+  const [internalValue, setInternalValue] = useState20(defaultValue);
+  const [originalValue, setOriginalValue] = useState20(defaultValue);
+  const [isEditing, setIsEditing] = useState20(false);
   const value = isControlled ? controlledValue : internalValue;
   const generatedId = useId4();
   const computedId = isNonEmptyString6(id) ? id : `wistia-ui-editable-text-${generatedId}`;
@@ -15323,11 +15340,11 @@ var EditableTextTrigger = ({
 };
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback17, useState as useState20 } from "react";
+import { useCallback as useCallback17, useState as useState21 } from "react";
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = useState20(initialData);
-  const [isPending, setIsPending] = useState20(false);
-  const [error, setError] = useState20(null);
+  const [data, setData] = useState21(initialData);
+  const [isPending, setIsPending] = useState21(false);
+  const [error, setError] = useState21(null);
   const formAction = useCallback17(
     async (nextFormData) => {
       if (nextFormData === null) {
@@ -15727,7 +15744,7 @@ var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import { styled as styled70 } from "styled-components";
-import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState21 } from "react";
+import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState22 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx307 } from "react/jsx-runtime";
 var StyledIconButton = styled70(IconButton)`
@@ -15741,7 +15758,7 @@ var StyledIconButton = styled70(IconButton)`
 var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef23(
   ({ value, onCopy, disabled = false, ...props }, ref) => {
-    const [isCopied, setIsCopied] = useState21(false);
+    const [isCopied, setIsCopied] = useState22(false);
     useEffect18(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
@@ -15797,7 +15814,7 @@ InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
 import { styled as styled71 } from "styled-components";
-import { forwardRef as forwardRef24, useState as useState22 } from "react";
+import { forwardRef as forwardRef24, useState as useState23 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
 import { jsx as jsx308 } from "react/jsx-runtime";
 var StyledIconButton2 = styled71(IconButton)`
@@ -15810,7 +15827,7 @@ var StyledIconButton2 = styled71(IconButton)`
 `;
 var InputPassword = forwardRef24(
   ({ onVisibilityToggle, disabled = false, ...props }, ref) => {
-    const [isVisible, setIsVisible] = useState22(false);
+    const [isVisible, setIsVisible] = useState23(false);
     const handleClick = () => {
       const newVisibility = !isVisible;
       setIsVisible(newVisibility);
@@ -17381,7 +17398,7 @@ var RadioCardImage = forwardRef30(
 RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
+import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState24 } from "react";
 import { styled as styled90 } from "styled-components";
 import { throttle } from "throttle-debounce";
 import { jsx as jsx327, jsxs as jsxs59 } from "react/jsx-runtime";
@@ -17434,7 +17451,7 @@ var ShadowAtRight = styled90(Shadow)`
 var ScrollArea = forwardRef31(
   ({ children, onScroll, style, locked = false, ...props }, forwardedRef) => {
     const scrollContainerRefInternal = useRef21(null);
-    const [shadowState, setShadowState] = useState23({
+    const [shadowState, setShadowState] = useState24({
       canScrollUp: false,
       canScrollLeft: false,
       canScrollDown: false,
@@ -17491,13 +17508,13 @@ import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState24 } from "react";
+import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState25 } from "react";
 import { jsx as jsx328 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState24(null);
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState25(null);
   const selectedItemIndicatorStyle = useMemo16(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
@@ -17574,6 +17591,9 @@ var SelectedItemIndicator = () => {
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx330, jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlStyles = css46`
+  ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
+  --wui-color-text-selected: var(--wui-color-text-link);
+
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -17590,6 +17610,7 @@ var StyledSegmentedControl = styled92(ToggleGroupRoot2)`
 var SegmentedControl = forwardRef32(
   ({
     children,
+    colorScheme = "inherit",
     disabled = false,
     fullWidth = false,
     selectedValue,
@@ -17603,6 +17624,7 @@ var SegmentedControl = forwardRef32(
       StyledSegmentedControl,
       {
         ref,
+        $colorScheme: colorScheme,
         $fullWidth: fullWidth,
         disabled,
         loop: true,
@@ -18251,7 +18273,7 @@ var TableRow = ({ children, ...props }) => {
 
 // src/components/Tabs/Tabs.tsx
 import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
-import { useCallback as useCallback19, useState as useState25 } from "react";
+import { useCallback as useCallback19, useState as useState26 } from "react";
 import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
@@ -18275,7 +18297,7 @@ var Tabs = ({
   defaultValue,
   ...props
 }) => {
-  const [value, setValue] = useState25(valueProp ?? defaultValue);
+  const [value, setValue] = useState26(valueProp ?? defaultValue);
   const onValueChange = useCallback19(
     (newValue) => {
       setValue(newValue);
@@ -18464,7 +18486,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
+import { forwardRef as forwardRef37, useState as useState27, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
 import { styled as styled109 } from "styled-components";
 import {
   isNil as isNil19,
@@ -18865,11 +18887,11 @@ var Thumbnail = forwardRef37(
     aspectRatio = "wide",
     ...props
   }, ref) => {
-    const [percent, setPercent] = useState26(0);
-    const [isMouseOver, setIsMouseOver] = useState26(false);
-    const [isStoryboardReady, setIsStoryboardReady] = useState26(false);
+    const [percent, setPercent] = useState27(0);
+    const [isMouseOver, setIsMouseOver] = useState27(false);
+    const [isStoryboardReady, setIsStoryboardReady] = useState27(false);
     const storyboardElementRef = useRef24(null);
-    const [cursorPosition, setCursorPosition] = useState26(null);
+    const [cursorPosition, setCursorPosition] = useState27(null);
     const backgroundUrl = useMemo17(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
@@ -19428,6 +19450,7 @@ export {
   useImperativeFilePicker,
   useIsHovered,
   useKey,
+  useKeyPress,
   useLocalStorage,
   useLockBodyScroll,
   useMq,