@wistia/ui 0.6.35 → 0.6.36-beta.1511ebd6.856ba13

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, MutableRefObject, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
 export * from 'use-file-picker/types';
 export { useFilePicker, useImperativeFilePicker } from 'use-file-picker';
 export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
@@ -56,6 +56,8 @@ declare const dateTime: {
     timeOnlyString: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
 };
 
+declare const mergeRefs: <T = unknown>(refs: (LegacyRef<T> | MutableRefObject<T> | null | undefined)[]) => RefCallback<T>;
+
 declare const mq: {
     xsAndUp: () => string;
     smAndUp: () => string;
@@ -100,6 +102,8 @@ declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName,
 type SetItemType = Storage['setItem'];
 declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
 
+declare const useLockBodyScroll: (locked: boolean) => void;
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -3024,4 +3028,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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useMq, 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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, MutableRefObject, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
 export * from 'use-file-picker/types';
 export { useFilePicker, useImperativeFilePicker } from 'use-file-picker';
 export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
@@ -56,6 +56,8 @@ declare const dateTime: {
     timeOnlyString: (date: unknown, { timeZone }?: DateOnlyStringOptions) => string;
 };
 
+declare const mergeRefs: <T = unknown>(refs: (LegacyRef<T> | MutableRefObject<T> | null | undefined)[]) => RefCallback<T>;
+
 declare const mq: {
     xsAndUp: () => string;
     smAndUp: () => string;
@@ -100,6 +102,8 @@ declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName,
 type SetItemType = Storage['setItem'];
 declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
 
+declare const useLockBodyScroll: (locked: boolean) => void;
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -3024,4 +3028,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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useMq, 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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.35
+ * @license @wistia/ui v0.6.36-beta.1511ebd6.856ba13
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1879,6 +1879,20 @@ var dateTime = {
   timeOnlyString
 };
 
+// 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;
+    }
+  });
+};
+
 // src/helpers/mq/mq.ts
 import { getValueAndUnit } from "polished";
 
@@ -1963,9 +1977,9 @@ import { useCallback as useCallback3 } from "react";
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/private/helpers/isValidRef/isValidRef.ts
-import { isNotNil, isRecord } from "@wistia/type-guards";
+import { isNotNil as isNotNil2, isRecord } from "@wistia/type-guards";
 var isValidRef = (value) => {
-  return isNotNil(value) && isRecord(value) && "current" in value;
+  return isNotNil2(value) && isRecord(value) && "current" in value;
 };
 
 // src/private/hooks/useEvent/useEvent.ts
@@ -2056,11 +2070,27 @@ var useLocalStorage = (key, initialValue, storage = window.localStorage) => {
   return [storedValue, setValue, removeValue];
 };
 
+// src/hooks/useLockBodyScroll/useLockBodyScroll.ts
+import { useLayoutEffect } from "react";
+var useLockBodyScroll = (locked) => {
+  useLayoutEffect(() => {
+    if (locked) {
+      const originalStyle = window.getComputedStyle(document.body).overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalStyle;
+      };
+    }
+    return () => {
+    };
+  }, [locked]);
+};
+
 // src/hooks/useMq/useMq.ts
 import { isBoolean } from "@wistia/type-guards";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState4, useLayoutEffect } from "react";
+import { useState as useState4, useLayoutEffect as useLayoutEffect2 } from "react";
 import { debounce } from "throttle-debounce";
 
 // src/private/helpers/isClient/isClient.ts
@@ -2072,7 +2102,7 @@ var useWindowSize = (interval = 0) => {
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const handleResize = debounce(
       interval,
       () => setDimensions({
@@ -2130,10 +2160,10 @@ import { toast as sonnerToast } from "sonner";
 // src/private/components/Toast/Toast.tsx
 import { cloneElement, isValidElement } from "react";
 import styled2 from "styled-components";
-import { isNotNil as isNotNil3 } from "@wistia/type-guards";
+import { isNotNil as isNotNil4 } from "@wistia/type-guards";
 
 // src/components/Ellipsis/Ellipsis.tsx
-import { isNotNil as isNotNil2 } from "@wistia/type-guards";
+import { isNotNil as isNotNil3 } from "@wistia/type-guards";
 import styled, { css as css12 } from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ellipsisStyle = css12`
@@ -2166,7 +2196,7 @@ var ellipsisFlexParentStyle = css12`
 var EllipsisComponent = styled.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
-  if (isNotNil2($lines)) {
+  if (isNotNil3($lines)) {
     return css12`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
@@ -2358,7 +2388,7 @@ var StyledToast = styled2.div`
   }
 `;
 var Action = ({ actionButton }) => {
-  if (isNotNil3(actionButton) && isValidElement(actionButton)) {
+  if (isNotNil4(actionButton) && isValidElement(actionButton)) {
     return /* @__PURE__ */ jsx5(ActionWrapper, { children: cloneElement(actionButton, {
       variant: "soft",
       // force Button variant
@@ -2382,7 +2412,7 @@ var Toast = ({
       $colorScheme: colorScheme,
       children: [
         /* @__PURE__ */ jsxs2(MessageWrapper, { children: [
-          isNotNil3(icon) ? icon : null,
+          isNotNil4(icon) ? icon : null,
           /* @__PURE__ */ jsx5(Message, { lines: 3, children: message })
         ] }),
         /* @__PURE__ */ jsx5(Action, { actionButton: action })
@@ -2423,7 +2453,7 @@ import styled6, { css as css16 } from "styled-components";
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
 import styled5 from "styled-components";
-import { isNotNil as isNotNil5, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
+import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
 import { css as css14 } from "styled-components";
@@ -6557,7 +6587,7 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import { isFunction, isNil as isNil6, isNotNil as isNotNil4, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
+import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import styled4 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
 import { jsx as jsx192, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -6620,16 +6650,16 @@ var Link = forwardRef(
         } catch (error) {
           console.error(error);
         } finally {
-          if (isFunction(props.onClick)) {
+          if (isFunction2(props.onClick)) {
             props.onClick(event);
           } else if (routingCallback !== null) {
             routingCallback();
-          } else if (isNotNil4(to)) {
+          } else if (isNotNil5(to)) {
             window.location.assign(to);
           } else {
           }
         }
-      } else if (isFunction(props.onClick)) {
+      } else if (isFunction2(props.onClick)) {
         props.onClick(event);
       } else {
       }
@@ -6730,8 +6760,8 @@ var ButtonContent = ({
     /* @__PURE__ */ jsxs8(
       StyledButtonContent,
       {
-        $hasLeftIcon: isNotNil5(leftIcon),
-        $hasRightIcon: isNotNil5(rightIcon),
+        $hasLeftIcon: isNotNil6(leftIcon),
+        $hasRightIcon: isNotNil6(rightIcon),
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
@@ -6799,7 +6829,7 @@ var Button = forwardRef2(
         event.preventDefault();
         return;
       }
-      if (isNotNil5(onClick)) {
+      if (isNotNil6(onClick)) {
         onClick(event);
       }
     };
@@ -7142,7 +7172,7 @@ Avatar.displayName = "Avatar";
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
 import styled9 from "styled-components";
-import { isNotNil as isNotNil6 } from "@wistia/type-guards";
+import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx197, jsxs as jsxs10 } from "react/jsx-runtime";
 var StyledBadge = styled9.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -7166,7 +7196,7 @@ var StyledBadge = styled9.div`
 `;
 var Badge = forwardRef4(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
-    const hasIcon = isNotNil6(icon);
+    const hasIcon = isNotNil7(icon);
     return /* @__PURE__ */ jsxs10(
       StyledBadge,
       {
@@ -7187,7 +7217,7 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
 import styled10, { css as css17 } from "styled-components";
-import { isNotNil as isNotNil7, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
+import { isNotNil as isNotNil8, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7198,7 +7228,7 @@ var makePolymorphic = (component) => {
 import { jsx as jsx198 } from "react/jsx-runtime";
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if (isNotNil7(gap)) {
+  if (isNotNil8(gap)) {
     if (isRecord3(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
@@ -7274,8 +7304,8 @@ var StyledBoxComponent = styled10.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => isNotNil7($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => isNotNil7($basis) ? $basis : null};
+  display: ${({ $inline }) => isNotNil8($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => isNotNil8($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
@@ -7285,14 +7315,14 @@ var StyledBoxComponent = styled10.div`
   width: ${({ $width }) => $width ?? null};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => isNotNil7($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => isNotNil7($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => isNotNil8($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => isNotNil8($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => isNotNil7($order) ? $order : null};
+  order: ${({ $order }) => isNotNil8($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if (isNotNil7(children)) {
+  if (isNotNil8(children)) {
     if (typeof children === "object" && isDev) {
       return Children.map(children, (child) => {
         if (isNil9(child)) return null;
@@ -7625,7 +7655,7 @@ import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import styled18, { css as css19 } from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { isNil as isNil12, isNotNil as isNotNil10 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 import styled16, { css as css18 } from "styled-components";
@@ -7665,7 +7695,7 @@ FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import styled17 from "styled-components";
-import { isNotNil as isNotNil8 } from "@wistia/type-guards";
+import { isNotNil as isNotNil9 } from "@wistia/type-guards";
 import { jsx as jsx205 } from "react/jsx-runtime";
 var VisuallyHidden = styled17.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = styled17.div({
@@ -7677,7 +7707,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil8(text) ? text : children;
+  const accessibleText = isNotNil9(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx205(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -7731,7 +7761,7 @@ var FormControlLabel = ({
       htmlFor,
       ...props,
       children: [
-        isNotNil9(controlSlot) ? controlSlot : null,
+        isNotNil10(controlSlot) ? controlSlot : null,
         labelContent
       ]
     }
@@ -7933,7 +7963,7 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root } from "@radix-ui/react-collapsible";
-import { isNotNil as isNotNil10 } from "@wistia/type-guards";
+import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 import styled20 from "styled-components";
 import { jsx as jsx208 } from "react/jsx-runtime";
 var StyledRoot = styled20(Root)`
@@ -7950,7 +7980,7 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil11(onOpenChange) && isNotNil11(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   return /* @__PURE__ */ jsx208(StyledRoot, { ...controlProps, children });
 };
@@ -8638,7 +8668,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef3 } from "react";
 import styled29, { css as css25 } from "styled-components";
-import { isNil as isNil13, isNotNil as isNotNil11, isRecord as isRecord4 } from "@wistia/type-guards";
+import { isNil as isNil13, isNotNil as isNotNil12, isRecord as isRecord4 } from "@wistia/type-guards";
 import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
 var inputStyles = css25`
   --wui-input-color-bg: var(--wui-color-bg-surface);
@@ -8738,27 +8768,27 @@ var Input = forwardRef10(
     const internalRef = useRef3();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      isNotNil11(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
+      isNotNil12(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if (isNil13(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx218(Icon, { type: "search" });
     }
-    if (isNotNil11(leftIconToDisplay)) {
+    if (isNotNil12(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil11(rightIconToDisplay)) {
+    if (isNotNil12(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement4(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if (isNotNil11(props.onFocus)) {
+      if (isNotNil12(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9151,7 +9181,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
 import styled35 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil12, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray2, isNotNil as isNotNil13, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
 import styled33, { css as css27 } from "styled-components";
@@ -9367,8 +9397,8 @@ var FormField = ({
       defaultValue
     };
   }
-  if (isNotNil12(checkboxGroup)) {
-    const computedName = isNotNil12(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil13(checkboxGroup)) {
+    const computedName = isNotNil13(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
       if (isNotUndefined8(props.onChange)) {
         props.onChange(event);
@@ -9381,7 +9411,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil12(error)
+      "aria-invalid": isNotNil13(error)
     };
   }
   Children5.only(children);
@@ -9392,9 +9422,9 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ jsx226(Label, { htmlFor: computedId, children: label }),
-        isNotNil12(description) ? /* @__PURE__ */ jsx226(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        isNotNil13(description) ? /* @__PURE__ */ jsx226(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
-        isNotNil12(computedError) ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
+        isNotNil13(computedError) ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
           /* @__PURE__ */ jsx226("div", {}),
           /* @__PURE__ */ jsx226(
             ErrorMessages,
@@ -9471,7 +9501,7 @@ IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
 import styled37 from "styled-components";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 import { jsx as jsx229 } from "react/jsx-runtime";
 var getFillStyle2 = (fillContainer) => {
   if (fillContainer === "horizontal") {
@@ -9489,7 +9519,7 @@ var getFillStyle2 = (fillContainer) => {
   return void 0;
 };
 var StyledImage = styled37.img`
-  border-radius: ${({ $borderRadius }) => isNotNil13($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+  border-radius: ${({ $borderRadius }) => isNotNil14($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
   object-position: ${({ $objPosition }) => $objPosition};
@@ -9526,7 +9556,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil14, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -9638,7 +9668,7 @@ var Menu = ({
 }) => {
   const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
-    ...isNotNil14(onOpenChange) && isNotNil14(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil15(onOpenChange) && isNotNil15(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -9720,12 +9750,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef14 } from "react";
 import styled40 from "styled-components";
-import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
 import { jsx as jsx232, jsxs as jsxs25 } from "react/jsx-runtime";
 var StyledButton3 = styled40(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -9833,7 +9863,7 @@ var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...pro
       children: [
         props.leftIcon ? /* @__PURE__ */ jsx232(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ jsx232(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil15(badge) || isNotNil15(command) ? /* @__PURE__ */ jsx232(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil16(badge) || isNotNil16(command) ? /* @__PURE__ */ jsx232(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ jsx232(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -9901,7 +9931,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ jsxs26(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs26(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx234(MenuItemLabel, { children: label }),
-      isNotNil16(description) ? /* @__PURE__ */ jsx234(MenuItemDescription, { children: description }) : null
+      isNotNil17(description) ? /* @__PURE__ */ jsx234(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx234(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx234(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs26(DropdownMenuGroup, { children: [
@@ -10088,7 +10118,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef18 } from "react";
 import styled47 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil18 } from "@wistia/type-guards";
+import { isNotNil as isNotNil19 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled44 from "styled-components";
@@ -10151,7 +10181,7 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef8, useEffect as useEffect5 } from "react";
-import { isNotNil as isNotNil17 } from "@wistia/type-guards";
+import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef8(null);
   useEffect5(() => {
@@ -10159,7 +10189,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect5(() => {
     return () => {
-      if (isNotNil17(previouslyFocusedRef.current)) {
+      if (isNotNil18(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10306,7 +10336,7 @@ var Modal = forwardRef18(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil18(onRequestClose)) {
+          if (!open2 && isNotNil19(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -10319,7 +10349,7 @@ var Modal = forwardRef18(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil18(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil19(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10353,9 +10383,9 @@ import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close
 import styled48, { css as css29 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil19 } from "@wistia/type-guards";
+import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil19(onOpenChange) && isNotNil19(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil20(onOpenChange) && isNotNil20(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
@@ -10414,7 +10444,7 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled49 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil20 } from "@wistia/type-guards";
+import { isNotNil as isNotNil21 } from "@wistia/type-guards";
 import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled49.div`
   --progress-bar-height: 8px;
@@ -10469,7 +10499,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs32(ProgressBarWrapper, { children: [
-    isNotNil20(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil21(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx245(
       StyledProgressBar,
       {
@@ -10485,7 +10515,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil20(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil21(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -10803,22 +10833,6 @@ import { forwardRef as forwardRef21, useEffect as useEffect6, useRef as useRef9
 import styled53, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
-
-// src/private/helpers/mergeRefs/mergeRefs.ts
-import { isNotNil as isNotNil21, isFunction as isFunction2 } from "@wistia/type-guards";
-var mergeRefs = (refs) => (value) => {
-  refs.forEach((ref) => {
-    if (isFunction2(ref)) {
-      ref(value);
-      return;
-    }
-    if (isNotNil21(ref)) {
-      ref.current = value;
-    }
-  });
-};
-
-// src/components/SegmentedControl/SegmentedControlItem.tsx
 import { jsxs as jsxs35 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css32`
   all: unset; /* ToggleGroupItem is a button element */
@@ -12086,6 +12100,7 @@ export {
   ellipsisFlexParentStyle,
   ellipsisStyle,
   iconSizeMap,
+  mergeRefs,
   mq,
   useActiveMq,
   useAriaLive,
@@ -12095,6 +12110,7 @@ export {
   useImperativeFilePicker,
   useKey,
   useLocalStorage,
+  useLockBodyScroll,
   useMq,
   useToast,
   useWindowSize