@wistia/ui 0.26.6 → 0.26.7

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.6
+ * @license @wistia/ui v0.26.7
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -8,9 +8,9 @@
  */
 
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
-import { isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
+import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
 import { isValid } from "date-fns/isValid";
@@ -519,13 +519,6 @@ const buildTimeDuration = (numberOfMilliseconds) => {
 	};
 };
 //#endregion
-//#region src/helpers/dateTime/isDate.ts
-/**
-* @param {*} date - possible date value - unknown type
-* @returns {boolean} - whether it is a date object
-*/
-const isDate = (date) => date instanceof Date;
-//#endregion
 //#region src/helpers/dateTime/isInvalidDate.ts
 /**
 * @param {*} date - a Date object - could be unknown though
@@ -5596,7 +5589,7 @@ const StyledLink = styled.a`
 * This means in addition to its own props, `Link` can use props from `react-router`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
 * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
 */
-const Link = forwardRef(({ beforeAction, children, type, disabled = false, colorScheme = "inherit", underline = "none", inheritColor = false, leftIcon, rightIcon, "aria-disabled": ariaDisabled, role, ...props }, ref) => {
+const Link = ({ beforeAction, children, type, disabled = false, colorScheme = "inherit", underline = "none", inheritColor = false, leftIcon, rightIcon, "aria-disabled": ariaDisabled, role, ref, ...props }) => {
 	const inRouterContext = useInRouterContext();
 	const to = generateHref(props.href, type, disabled);
 	const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
@@ -5659,8 +5652,7 @@ const Link = forwardRef(({ beforeAction, children, type, disabled = false, color
 		});
 	}
 	return null;
-});
-Link.displayName = "Link_UI";
+};
 //#endregion
 //#region src/components/Button/Button.tsx
 const isLink = (props) => isNotUndefined(props.href);
@@ -5713,7 +5705,7 @@ const ButtonContent = ({ isLoading = false, leftIcon, rightIcon, children, fullW
 * action, or performing a delete operation. It replaces the HTML `<button>` element,
 * unless an `href` attribute is passed, in which it will render an `<a>` element.
 */
-const Button = forwardRef(({ children, forceState, className, leftIcon, rightIcon, colorScheme = "inherit", disabled = false, isLoading = false, unstyled = false, onClick, fullWidth = false, size = "md", variant = "solid", ...props }, ref) => {
+const Button = ({ children, forceState, className, leftIcon, rightIcon, colorScheme = "inherit", disabled = false, isLoading = false, unstyled = false, onClick, fullWidth = false, size = "md", variant = "solid", ref, ...props }) => {
 	const responsiveFullWidth = useResponsiveProp(fullWidth);
 	const responsiveSize = useResponsiveProp(size);
 	const isAriaDisabled = () => isLoading || disabled;
@@ -5763,8 +5755,7 @@ const Button = forwardRef(({ children, forceState, className, leftIcon, rightIco
 			children
 		})
 	});
-});
-Button.displayName = "Button_UI";
+};
 //#endregion
 //#region src/components/ActionButton/ActionButton.tsx
 const StyledActionButton = styled(Button)`
@@ -5876,7 +5867,7 @@ const StyledLabel$3 = styled.span`
 /**
 * Action Button component is used as one of a group of main actions on the page. It composes [Button](/components/Button).
 */
-const ActionButton = forwardRef(({ icon, colorScheme = "standard", disabled = false, forceState, hoverColorScheme, variant = "default", children, ...props }, ref) => {
+const ActionButton = ({ icon, colorScheme = "standard", disabled = false, forceState, hoverColorScheme, variant = "default", children, ref, ...props }) => {
 	const resolvedHoverColorScheme = hoverColorScheme ?? (variant === "gated" ? "purple" : "inherit");
 	const secondaryIconMap = {
 		default: "arrow-right",
@@ -5907,8 +5898,7 @@ const ActionButton = forwardRef(({ icon, colorScheme = "standard", disabled = fa
 			})
 		]
 	});
-});
-ActionButton.displayName = "ActionButton_UI";
+};
 //#endregion
 //#region src/components/Avatar/formatNameForDisplay.tsx
 const containsEmojiCharacter = (char) => {
@@ -6139,7 +6129,7 @@ const StyledBadge = styled.div`
 /**
 * A `Badge` is a compact label, with optional icon, to convey status or context.
 */
-const Badge = forwardRef(({ colorScheme = "inherit", label, icon, variant = "default", ...props }, ref) => {
+const Badge = ({ colorScheme = "inherit", label, icon, variant = "default", ref, ...props }) => {
 	const hasIcon = isNotNil(icon);
 	return /* @__PURE__ */ jsxs(StyledBadge, {
 		ref,
@@ -6149,12 +6139,11 @@ const Badge = forwardRef(({ colorScheme = "inherit", label, icon, variant = "def
 		$variant: variant,
 		children: [hasIcon ? icon : null, isNotNil(label) ? /* @__PURE__ */ jsx("span", { children: label }) : null]
 	});
-});
-Badge.displayName = "Badge_UI";
+};
 //#endregion
 //#region src/private/helpers/makePolymorphic/makePolymorphic.tsx
 /**
-* makePolymorphic takes a component (typically a forwardRef component) and returns a new version
+* makePolymorphic takes a component and returns a new version
 * that supports polymorphism via a `renderAs` prop. The returned component's types automatically
 * merge the intrinsic props of the rendered element with the custom props of the original
 * component, while including support for children and refs.
@@ -6236,7 +6225,7 @@ const StyledBoxComponent = styled.div`
   order: ${({ $order }) => isNotNil($order) ? $order : null};
 `;
 const DEFAULT_ELEMENT$4 = "div";
-const BoxComponent = forwardRef(({ alignContent = "stretch", alignItems = "flex-start", alignSelf, basis, children, direction = "row", fill = false, fillViewport = false, gap, grow, height, inline = false, justifyContent = "flex-start", order, renderAs, shrink, width, wrapItems = false, flexMode, ...props }, ref) => {
+const BoxComponent = ({ ref, alignContent = "stretch", alignItems = "flex-start", alignSelf, basis, children, direction = "row", fill = false, fillViewport = false, gap, grow, height, inline = false, justifyContent = "flex-start", order, renderAs, shrink, width, wrapItems = false, flexMode, ...props }) => {
 	const responsiveAlignContent = useResponsiveProp(alignContent);
 	const responsiveAlignItems = useResponsiveProp(alignItems);
 	const responsiveAlignSelf = useResponsiveProp(alignSelf);
@@ -6283,8 +6272,7 @@ const BoxComponent = forwardRef(({ alignContent = "stretch", alignItems = "flex-
 		...props,
 		children
 	});
-});
-BoxComponent.displayName = "Box_UI";
+};
 /**
 * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
 */
@@ -6403,7 +6391,7 @@ const variantElementMap$1 = {
 	heading5: "h5",
 	heading6: "h6"
 };
-const HeadingComponent = forwardRef(({ align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, variant = "heading1", renderAs, ...props }, ref) => {
+const HeadingComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, variant = "heading1", renderAs, ...props }) => {
 	const processedChildren = applyMaxCharsToChildren(children, maxChars);
 	return /* @__PURE__ */ jsx(StyledHeading$1, {
 		ref,
@@ -6419,8 +6407,7 @@ const HeadingComponent = forwardRef(({ align = "left", children, colorScheme = "
 		...props,
 		children: processedChildren
 	});
-});
-HeadingComponent.displayName = "Heading_UI";
+};
 /**
 * Displaying heading text, both visually and semantically
 */
@@ -6594,7 +6581,7 @@ const StyledText = styled.div`
       }
     `}
 `;
-const TextComponent = forwardRef(({ align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, variant = "body2", renderAs, ...props }, ref) => {
+const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, variant = "body2", renderAs, ...props }) => {
 	const processedChildren = applyMaxCharsToChildren(children, maxChars);
 	return /* @__PURE__ */ jsx(StyledText, {
 		ref,
@@ -6610,8 +6597,7 @@ const TextComponent = forwardRef(({ align = "left", children, colorScheme = "inh
 		...props,
 		children: processedChildren
 	});
-});
-TextComponent.displayName = "Text_UI";
+};
 /**
 * Used for rending paragraphs and inline text.
 */
@@ -6696,7 +6682,7 @@ const StyledButton$1 = styled(Button)`
 * IconButton behaves like a [Button](/components/Button),
 * but only accepts an [Icon](/components/Icon) as a child.
 */
-const IconButton = forwardRef(({ children, label, size = "md", ...props }, ref) => {
+const IconButton = ({ children, label, size = "md", ref, ...props }) => {
 	const responsiveSize = useResponsiveProp(size);
 	return /* @__PURE__ */ jsx(StyledButton$1, {
 		...props,
@@ -6706,8 +6692,7 @@ const IconButton = forwardRef(({ children, label, size = "md", ...props }, ref)
 		size: responsiveSize,
 		children: cloneElement(Children.only(children), { size: responsiveSize })
 	});
-});
-IconButton.displayName = "IconButton_UI";
+};
 //#endregion
 //#region src/components/Banner/Banner.tsx
 const StyledBanner = styled.div`
@@ -6933,15 +6918,14 @@ const StyledCenter = styled.div`
 * Center component provides various ways to center content horizontally within a container.
 * It supports max-width constraints, text alignment, gutters, and intrinsic content centering.
 */
-const Center = forwardRef(({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx(StyledCenter, {
+const Center = ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ref, ...props }) => /* @__PURE__ */ jsx(StyledCenter, {
 	ref,
 	$gutterWidth: gutterWidth,
 	$intrinsic: intrinsic,
 	$maxWidth: maxWidth,
 	...props,
 	children
-}));
-Center.displayName = "Center_UI";
+});
 //#endregion
 //#region src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 const VisuallyHidden = styled.div({ ...visuallyHiddenStyle });
@@ -7038,7 +7022,7 @@ const StyledStack = styled.div`
   ${({ $paddingX }) => $paddingX && `padding-left: var(--wui-${$paddingX}); padding-right: var(--wui-${$paddingX});`}
   ${({ $paddingY }) => $paddingY && `padding-top: var(--wui-${$paddingY}); padding-bottom: var(--wui-${$paddingY});`}
 `;
-const StackComponent = forwardRef(({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", padding, ...props }, ref) => {
+const StackComponent = ({ ref, renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", padding, ...props }) => {
 	const responsiveGap = useResponsiveProp(gap);
 	const responsiveDirection = useResponsiveProp(direction);
 	return /* @__PURE__ */ jsx(StyledStack, {
@@ -7051,8 +7035,7 @@ const StackComponent = forwardRef(({ renderAs, direction = "vertical", gap = "sp
 		as: renderAs ?? DEFAULT_ELEMENT$1,
 		...props
 	});
-});
-StackComponent.displayName = "Stack_UI";
+};
 /**
 * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
 * This allows for layouting children in a consistent way without needing to manually add margins or padding.
@@ -7128,7 +7111,7 @@ const FormContext = createContext({
 * For creating forms. It provides a context for the form fields to access the form state and validation.
 * It also provides a way to handle form submission and validation. It is built around [React 19's form APIs](https://react.dev/reference/react-dom/components/form).
 */
-const Form = forwardRef(({ children, action, values = {}, labelPosition = "block", validate, fullWidth = false, ...props }, forwardedRef) => {
+const Form = ({ children, action, values = {}, labelPosition = "block", validate, fullWidth = false, ref: forwardedRef, ...props }) => {
 	const [errors, setErrors] = useState({});
 	const [hasSubmitted, setHasSubmitted] = useState(false);
 	const innerRef = useRef(null);
@@ -7192,7 +7175,7 @@ const Form = forwardRef(({ children, action, values = {}, labelPosition = "block
 			children
 		})
 	});
-});
+};
 //#endregion
 //#region src/components/FormGroup/CheckboxGroup.tsx
 const CheckboxGroupContext = createContext(null);
@@ -7326,7 +7309,7 @@ const StyledHiddenCheckboxInput = styled.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
-const Checkbox = forwardRef(({ checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ...props }, ref) => {
+const Checkbox = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-checkbox-${generatedId}`;
 	const checkboxGroupContext = useCheckboxGroup();
@@ -7364,8 +7347,7 @@ const Checkbox = forwardRef(({ checked, disabled = false, id, label, description
 			label
 		})]
 	});
-});
-Checkbox.displayName = "Checkbox_UI";
+};
 //#endregion
 //#region src/components/ClickRegion/ClickRegion.tsx
 const isClickableElement = (element) => {
@@ -8507,14 +8489,13 @@ const DefaultTriggerContent = () => {
 * it renders a swatch and hex label for the current color; pass custom children
 * to replace that content.
 */
-const ColorPickerTrigger = forwardRef(({ children, ...props }, forwardedRef) => {
+const ColorPickerTrigger = ({ children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledPopoverTrigger, {
-		ref: forwardedRef,
+		ref,
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(DefaultTriggerContent, {})
 	});
-});
-ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
+};
 //#endregion
 //#region src/components/ColorPicker/ContrastIndicator.tsx
 const Container$3 = styled.div`
@@ -8630,7 +8611,7 @@ const StyledSwitchThumb = styled.div`
 const StyledHiddenSwitchInput = styled.input`
   ${visuallyHiddenStyle}
 `;
-const Switch = forwardRef(({ align = "left", checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ...props }, ref) => {
+const Switch = ({ align = "left", checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-switch-${generatedId}`;
 	return /* @__PURE__ */ jsxs(StyledSwitchWrapper, {
@@ -8662,8 +8643,7 @@ const Switch = forwardRef(({ align = "left", checked, disabled = false, id, labe
 			label
 		})]
 	});
-});
-Switch.displayName = "Switch_UI";
+};
 //#endregion
 //#region src/components/ColorPicker/ContrastEnforcerSwitch.tsx
 /**
@@ -8909,7 +8889,7 @@ const StyledInputContainer = styled.div`
 /**
 * Capture user input with a text field. Should be used within a [Form](/components/Form) and [FormField](/components/FormField).
 */
-const Input = forwardRef(({ fullWidth = true, fullHeight = false, monospace = false, type = "text", autoSelect = false, leftIcon, rightIcon, ...props }, externalRef) => {
+const Input = ({ fullWidth = true, fullHeight = false, monospace = false, type = "text", autoSelect = false, leftIcon, rightIcon, ref: externalRef, ...props }) => {
 	const internalRef = useRef(null);
 	const ref = isNotNil(externalRef) && isRecord(externalRef) && "current" in externalRef ? externalRef : internalRef;
 	let leftIconToDisplay = leftIcon;
@@ -8950,8 +8930,7 @@ const Input = forwardRef(({ fullWidth = true, fullHeight = false, monospace = fa
 			rightIconToDisplay ?? null
 		]
 	});
-});
-Input.displayName = "Input_UI";
+};
 //#endregion
 //#region src/components/ColorPicker/HexColorInput.tsx
 const SIX_DIGIT_HEX_CODE_LENGTH = 7;
@@ -9598,7 +9577,7 @@ const RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 /**
 * A `Tag` is an optionally linked label, with an optional action button, to categorize content.
 */
-const Tag = forwardRef(({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
+const Tag = ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ref, ...props }) => {
 	const hasIcon = isNotNil(icon);
 	const labelProps = isNotNil(href) && isNonEmptyString(href) ? {
 		href,
@@ -9618,8 +9597,7 @@ const Tag = forwardRef(({ onClickRemove, colorScheme = "inherit", href, icon, la
 			onClickRemoveLabel
 		})]
 	});
-});
-Tag.displayName = "Tag_UI";
+};
 //#endregion
 //#region src/private/helpers/getTypographicStyles/getTypographicStyles.ts
 const typographicVariantStyleMap = {
@@ -9955,7 +9933,7 @@ const MenuPopup = styled(Menu$1.Popup)`
 /**
 * Displays a menu to the users with a set of actions.
 */
-const Menu = forwardRef(({ align = "start", children, disabled = false, compact = false, trigger, label, isOpen, side = "bottom", triggerProps = {}, onOpenChange, ...props }, ref) => {
+const Menu = ({ align = "start", children, disabled = false, compact = false, trigger, label, isOpen, side = "bottom", triggerProps = {}, onOpenChange, ref, ...props }) => {
 	const contextValue = useMemo(() => ({ compact }), [compact]);
 	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
 		if (nextOpen !== isOpen) {
@@ -9997,8 +9975,7 @@ const Menu = forwardRef(({ align = "start", children, disabled = false, compact
 			}) })]
 		})
 	});
-});
-Menu.displayName = "Menu_UI";
+};
 //#endregion
 //#region src/components/ContextMenu/ContextMenu.tsx
 const ContextMenuPopup = styled(Menu$1.Popup)`
@@ -10725,7 +10702,7 @@ const StyledEditableTextDisplay = styled.div`
     }
   }
 `;
-const EditableTextDisplayComponent = forwardRef(({ asTrigger, renderAs, ...props }, ref) => {
+const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) => {
 	const context = useContext(EditableTextContext);
 	if (!context) throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
 	const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
@@ -10767,8 +10744,7 @@ const EditableTextDisplayComponent = forwardRef(({ asTrigger, renderAs, ...props
 		...props,
 		children: displayText
 	});
-});
-EditableTextDisplayComponent.displayName = "EditableTextDisplay_UI";
+};
 const EditableTextDisplay = makePolymorphic(EditableTextDisplayComponent);
 //#endregion
 //#region src/components/EditableText/EditableTextInput.tsx
@@ -11464,7 +11440,7 @@ const StyledGrid = styled.div`
 * A flexible grid component that can either create a fixed number of columns
 * or an auto-filling grid based on the minimum child width.
 */
-const GridComponent = forwardRef(({ children, columns = "auto", minChildWidth = "auto", gap = "space-02", expandItems = false, renderAs, ...props }, ref) => {
+const GridComponent = ({ ref, children, columns = "auto", minChildWidth = "auto", gap = "space-02", expandItems = false, renderAs, ...props }) => {
 	const responsiveGap = useResponsiveProp(gap);
 	const { column, row } = isRecord(responsiveGap) ? responsiveGap : {
 		column: responsiveGap,
@@ -11481,8 +11457,7 @@ const GridComponent = forwardRef(({ children, columns = "auto", minChildWidth =
 		...props,
 		children
 	});
-});
-GridComponent.displayName = "Grid_UI";
+};
 const Grid = makePolymorphic(GridComponent);
 //#endregion
 //#region src/components/PreviewCard/PreviewCard.tsx
@@ -11582,7 +11557,7 @@ const COPY_SUCCESS_DURATION = 2e3;
 /**
 * Provides a readonly input that copies the text to the clipboard when clicked.
 */
-const InputClickToCopy = forwardRef(({ value, onCopy, disabled = false, ...props }, ref) => {
+const InputClickToCopy = ({ value, onCopy, disabled = false, ref, ...props }) => {
 	const [isCopied, setIsCopied] = useState(false);
 	useEffect(() => {
 		if (isCopied) {
@@ -11621,8 +11596,7 @@ const InputClickToCopy = forwardRef(({ value, onCopy, disabled = false, ...props
 		}),
 		value
 	});
-});
-InputClickToCopy.displayName = "InputClickToCopy_UI";
+};
 //#endregion
 //#region src/components/InputDuration/constants.ts
 const SECONDS_PER_MINUTE = 60;
@@ -12291,7 +12265,7 @@ const getInputWidth = (inputValue) => {
 /**
 * InputDuration lets users edit a duration value using a keyboard-friendly time input.
 */
-const InputDuration = forwardRef(({ decimalUnitLength = 2, disabled = false, fullWidth = false, maxSeconds = MAX_TIME, minSeconds = 0, onChangeValueInSeconds, valueInSeconds, onFocus, style, ...props }, externalRef) => {
+const InputDuration = ({ decimalUnitLength = 2, disabled = false, fullWidth = false, maxSeconds = MAX_TIME, minSeconds = 0, onChangeValueInSeconds, valueInSeconds, onFocus, style, ref: externalRef, ...props }) => {
 	const { inputRef, inputValue, onFocus: onInputFocus, onInputSelect, onKeyDown, onKeyUp } = useInputDuration({
 		decimalUnitLength,
 		maxSeconds,
@@ -12326,8 +12300,7 @@ const InputDuration = forwardRef(({ decimalUnitLength = 2, disabled = false, ful
 		type: "text",
 		value: inputValue
 	});
-});
-InputDuration.displayName = "InputDuration_UI";
+};
 //#endregion
 //#region src/components/InputPassword/InputPassword.tsx
 const StyledIconButton = styled(IconButton)`
@@ -12341,7 +12314,7 @@ const StyledIconButton = styled(IconButton)`
 /**
 * A password input component with a toggle button to show or hide the password text.
 */
-const InputPassword = forwardRef(({ onVisibilityToggle, disabled = false, ...props }, ref) => {
+const InputPassword = ({ onVisibilityToggle, disabled = false, ref, ...props }) => {
 	const [isVisible, setIsVisible] = useState(false);
 	const handleClick = () => {
 		const newVisibility = !isVisible;
@@ -12362,8 +12335,7 @@ const InputPassword = forwardRef(({ onVisibilityToggle, disabled = false, ...pro
 		}),
 		type: isVisible ? "text" : "password"
 	});
-});
-InputPassword.displayName = "InputPassword_UI";
+};
 //#endregion
 //#region src/components/KeyboardShortcut/isKeyboardKey.ts
 const KEYBOARD_KEY_MAP = {
@@ -12875,7 +12847,7 @@ const StyledBadgeContainer = styled.div`
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-const MenuItemButton = forwardRef(({ children, appearance, command, icon, ...props }, ref) => {
+const MenuItemButton = ({ children, appearance, command, icon, ref, ...props }) => {
 	let { colorScheme, badge } = props;
 	if (appearance === "dangerous") {
 		if (isNotUndefined(colorScheme)) console.warn("colorScheme prop is ignored when appearance is dangerous");
@@ -12903,8 +12875,7 @@ const MenuItemButton = forwardRef(({ children, appearance, command, icon, ...pro
 			isNotNil(props.rightIcon) ? /* @__PURE__ */ jsx(StyledRightIconContainer, { children: props.rightIcon }) : null
 		]
 	});
-});
-MenuItemButton.displayName = "MenuItemButton_UI";
+};
 //#endregion
 //#region src/components/Menu/MenuItemLabel.tsx
 const StyledMenuItemLabel = styled.span`
@@ -12983,7 +12954,7 @@ const SubMenu = ({ label, description, children, onOpenChange = () => null, ...p
 SubMenu.displayName = "SubMenu_UI";
 //#endregion
 //#region src/components/Menu/MenuItem.tsx
-const MenuItem = forwardRef(({ onSelect = () => null, closeOnClick = true, ...props }, ref) => {
+const MenuItem = ({ onSelect = () => null, closeOnClick = true, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(Menu$1.Item, {
 		closeOnClick,
 		nativeButton: isNil(props.href),
@@ -12994,8 +12965,7 @@ const MenuItem = forwardRef(({ onSelect = () => null, closeOnClick = true, ...pr
 			leftIcon: props.icon
 		})
 	});
-});
-MenuItem.displayName = "MenuItem_UI";
+};
 //#endregion
 //#region src/components/Menu/MenuRadioGroup.tsx
 const MenuRadioGroup = ({ children, ...props }) => {
@@ -13075,7 +13045,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 //#endregion
 //#region src/components/Menu/FilterMenu.tsx
 const FilterMenuItem = CheckboxMenuItem;
-const FilterMenu = forwardRef(({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
+const FilterMenu = ({ value, onChange, searchValue, onSearchValueChange, children, ref, ...props }) => {
 	return /* @__PURE__ */ jsxs(Menu, {
 		...props,
 		ref,
@@ -13146,8 +13116,7 @@ const FilterMenu = forwardRef(({ value, onChange, searchValue, onSearchValueChan
 			})
 		]
 	});
-});
-FilterMenu.displayName = "FilterMenu_UI";
+};
 //#endregion
 //#region src/components/Meter/Meter.tsx
 const MeterWrapper = styled.div`
@@ -13250,11 +13219,12 @@ const Meter = ({ segments, label, labelMeta, description, hideKey = false, max =
 	const segmentsWithOffsets = segments.reduce((acc, segment) => {
 		const offset = acc.reduce((sum, prev) => sum + prev.widthPercent, 0);
 		const widthPercent = segment.value / max * 100;
-		return [...acc, {
+		acc.push({
 			...segment,
 			offset,
 			widthPercent
-		}];
+		});
+		return acc;
 	}, []);
 	const keySegments = segmentsWithOffsets.filter((segment) => isNotNil(segment.label));
 	const totalValue = segments.reduce((sum, segment) => sum + segment.value, 0);
@@ -13477,7 +13447,7 @@ const StyledModalContent = styled(Dialog.Popup)`
     ${({ $positionVariant }) => positionStyleMap[$positionVariant]}
   }
 `;
-const ModalContent = forwardRef(({ width, positionVariant, initialFocusRef, children, ...props }, ref) => {
+const ModalContent = ({ width, positionVariant, initialFocusRef, children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledModalContent, {
 		ref,
 		$positionVariant: positionVariant,
@@ -13486,8 +13456,7 @@ const ModalContent = forwardRef(({ width, positionVariant, initialFocusRef, chil
 		...props,
 		children
 	});
-});
-ModalContent.displayName = "ModalContent_UI";
+};
 //#endregion
 //#region src/components/Modal/ModalOverlay.tsx
 const backdropShow = keyframes`
@@ -13542,7 +13511,7 @@ const ModalFooter = styled.footer`
 * A Modal is a focused UI element that appears atop the main interface, requiring
 * user interaction or dismissal before returning to the underlying content.
 */
-const Modal = forwardRef(({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ...props }, ref) => {
+const Modal = ({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		onOpenChange: (open) => {
 			if (!open && isNotNil(onRequestClose)) onRequestClose();
@@ -13566,8 +13535,7 @@ const Modal = forwardRef(({ children, footer, hideCloseButton = false, hideTitle
 			]
 		})] })
 	});
-});
-Modal.displayName = "Modal_UI";
+};
 //#endregion
 //#region src/components/Modal/ModalCallouts.tsx
 const ModalCallouts = ({ children }) => {
@@ -13804,11 +13772,10 @@ PopoverAnchor.displayName = "PopoverAnchor_UI";
 * pass `render` to merge the close behavior onto a single child element. For
 * a pre-styled icon close button, use `PopoverCloseButton`.
 */
-const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Popover$1.Close, {
-	ref: forwardedRef,
+const PopoverClose = ({ ref, ...props }) => /* @__PURE__ */ jsx(Popover$1.Close, {
+	ref,
 	...props
-}));
-PopoverClose.displayName = "PopoverClose_UI";
+});
 //#endregion
 //#region src/components/Popover/PopoverCloseButton.tsx
 /**
@@ -13850,7 +13817,7 @@ const DEFAULT_MAX_HEIGHT = "auto";
 * The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
 * in a `PopoverPortal`). Wraps a `Positioner` and `Popup` internally.
 */
-const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, style, role = "dialog", children, ...props }, forwardedRef) => {
+const PopoverContent = ({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, style, role = "dialog", children, ref, ...props }) => {
 	const sharedAnchorRef = usePopoverAnchor();
 	const hasAnchor = sharedAnchorRef?.current != null;
 	const mergedStyle = {
@@ -13870,7 +13837,7 @@ const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false,
 		style: { zIndex: "var(--wui-zindex-popover)" },
 		...hasAnchor ? { anchor: sharedAnchorRef } : {},
 		children: /* @__PURE__ */ jsx(StyledPopup$1, {
-			ref: forwardedRef,
+			ref,
 			$colorScheme: colorScheme,
 			$unstyled: unstyled,
 			role,
@@ -13879,8 +13846,7 @@ const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false,
 			children
 		})
 	});
-});
-PopoverContent.displayName = "PopoverContent_UI";
+};
 //#endregion
 //#region src/components/Popover/PopoverPortal.tsx
 /**
@@ -13915,12 +13881,11 @@ PopoverRoot.displayName = "PopoverRoot_UI";
 * `<button>` wrapping its children; pass `render` to merge the trigger
 * behavior onto a single child element (e.g. a `Button` or `IconButton`).
 */
-const PopoverTrigger = forwardRef(({ nativeButton = true, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Popover$1.Trigger, {
-	ref: forwardedRef,
+const PopoverTrigger = ({ nativeButton = true, ref, ...props }) => /* @__PURE__ */ jsx(Popover$1.Trigger, {
+	ref,
 	nativeButton,
 	...props
-}));
-PopoverTrigger.displayName = "PopoverTrigger_UI";
+});
 //#endregion
 //#region src/components/ProgressBar/ProgressBar.tsx
 const ProgressBarWrapper = styled.div`
@@ -14062,7 +14027,7 @@ const StyledRadioInput = styled.div`
 const StyledHiddenRadioInput = styled.input`
   ${visuallyHiddenStyle}
 `;
-const Radio = forwardRef(({ checked, disabled = false, id, label, description, name, onChange, size = "md", value = "false", required = false, hideLabel = false, ...props }, ref) => {
+const Radio = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value = "false", required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-radio-${generatedId}`;
 	const radioGroupContext = useRadioGroup();
@@ -14096,8 +14061,7 @@ const Radio = forwardRef(({ checked, disabled = false, id, label, description, n
 			label
 		})]
 	});
-});
-Radio.displayName = "Radio_UI";
+};
 //#endregion
 //#region src/components/RadioCard/RadioCardRoot.tsx
 const checkedStyles = css`
@@ -14206,7 +14170,7 @@ const StyledCard = styled.label`
 const StyledHiddenInput = styled.input`
   ${visuallyHiddenStyle}
 `;
-const RadioCardRoot = forwardRef(({ children, disabled = false, id, isGated = false, name, onChange, value, aspectRatio = "initial", padding = "space-04", checked, ...props }, ref) => {
+const RadioCardRoot = ({ children, disabled = false, id, isGated = false, name, onChange, value, aspectRatio = "initial", padding = "space-04", checked, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-radio-${generatedId}`;
 	const radioGroupContext = useRadioGroup();
@@ -14233,8 +14197,7 @@ const RadioCardRoot = forwardRef(({ children, disabled = false, id, isGated = fa
 			value
 		}), children]
 	});
-});
-RadioCardRoot.displayName = "RadioCardRoot_UI";
+};
 //#endregion
 //#region src/components/RadioCard/RadioCardIndicator.tsx
 const RadioCardIndicator = styled.div`
@@ -14347,7 +14310,7 @@ const RadioCardChildrenContainer = styled.div`
 `;
 //#endregion
 //#region src/components/RadioCard/RadioCard.tsx
-const RadioCard = forwardRef(({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
+const RadioCard = ({ icon, label, description, showIndicator, isGated, children, ref, ...rootProps }) => {
 	return /* @__PURE__ */ jsx(RadioCardRoot, {
 		ref,
 		isGated,
@@ -14364,11 +14327,10 @@ const RadioCard = forwardRef(({ icon, label, description, showIndicator, isGated
 			showIndicator
 		})
 	});
-});
-RadioCard.displayName = "RadioCard_UI";
+};
 //#endregion
 //#region src/components/RadioCard/RadioCardImage.tsx
-const RadioCardImage = forwardRef(({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
+const RadioCardImage = ({ label, imageSrc, aspectRatio, padding = "space-04", ref, ...rootProps }) => {
 	return /* @__PURE__ */ jsx(RadioCardRoot, {
 		ref,
 		...rootProps,
@@ -14382,8 +14344,7 @@ const RadioCardImage = forwardRef(({ label, imageSrc, aspectRatio, padding = "sp
 			src: imageSrc
 		})
 	});
-});
-RadioCardImage.displayName = "RadioCardImage_UI";
+};
 //#endregion
 //#region src/components/ScrollArea/ScrollArea.tsx
 const SHADOW_SIZE_PX = 8;
@@ -14436,7 +14397,7 @@ const ShadowAtRight = styled(Shadow)`
 * ScrollArea is a simple scrollable container with shadow effects to indicate
 * scrollability.
 */
-const ScrollArea = forwardRef(({ children, onScroll, style, locked = false, ...props }, forwardedRef) => {
+const ScrollArea = ({ children, onScroll, style, locked = false, ref: forwardedRef, ...props }) => {
 	const scrollContainerRefInternal = useRef(null);
 	const [shadowState, setShadowState] = useState({
 		canScrollUp: false,
@@ -14479,8 +14440,7 @@ const ScrollArea = forwardRef(({ children, onScroll, style, locked = false, ...p
 			})
 		]
 	});
-});
-ScrollArea.displayName = "ScrollArea_UI";
+};
 //#endregion
 //#region src/components/SegmentedControl/useSelectedItemStyle.tsx
 const SelectedItemStyleContext = createContext(null);
@@ -14562,7 +14522,7 @@ const StyledSegmentedControl = styled(ToggleGroup)`
 /**
 * Provides a horizontal set of segments for switching between different values
 */
-const SegmentedControl = forwardRef(({ children, colorScheme = "inherit", disabled = false, fullWidth = false, selectedValue, onSelectedValueChange, ...props }, ref) => {
+const SegmentedControl = ({ children, colorScheme = "inherit", disabled = false, fullWidth = false, selectedValue, onSelectedValueChange, ref, ...props }) => {
 	if (isNil(children)) return null;
 	return /* @__PURE__ */ jsx(StyledSegmentedControl, {
 		ref,
@@ -14580,8 +14540,7 @@ const SegmentedControl = forwardRef(({ children, colorScheme = "inherit", disabl
 			children: /* @__PURE__ */ jsxs(SelectedItemStyleProvider, { children: [children, /* @__PURE__ */ jsx(SelectedItemIndicator, {})] })
 		})
 	});
-});
-SegmentedControl.displayName = "SegmentedControl_UI";
+};
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControlItem.tsx
 const segmentedControlItemStyles = css`
@@ -14656,7 +14615,7 @@ const segmentedControlItemStyles = css`
 const StyledSegmentedControlItem = styled(Toggle)`
   ${segmentedControlItemStyles}
 `;
-const SegmentedControlItem = forwardRef(({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
+const SegmentedControlItem = ({ disabled, icon, label, "aria-label": ariaLabel, value, ref: forwardedRef, ...otherProps }) => {
 	const selectedValue = useSegmentedControlValue();
 	const { setSelectedItemMeasurements } = useSelectedItemStyle();
 	const buttonRef = useRef(null);
@@ -14699,8 +14658,7 @@ const SegmentedControlItem = forwardRef(({ disabled, icon, label, "aria-label":
 		value,
 		children: [icon, label]
 	});
-});
-SegmentedControlItem.displayName = "SegmentedControlItem_UI";
+};
 //#endregion
 //#region src/components/Select/Select.tsx
 const StyledTrigger = styled(Select$1.Trigger)`
@@ -14841,7 +14799,7 @@ const collectItemLabels = (children) => Children.toArray(children).flatMap((chil
 /**
 * Display a list of options and choose one of them. Replacement for the native Select HTML element.
 */
-const Select = forwardRef(({ colorScheme = "inherit", children, onOpenChange = () => null, onChange = () => null, placeholder = "Select...", fullWidth = false, forceOpen = false, showScrollArrows = false, disabled, name, value, "aria-invalid": ariaInvalid, ...props }, forwardedRef) => {
+const Select = ({ colorScheme = "inherit", children, onOpenChange = () => null, onChange = () => null, placeholder = "Select...", fullWidth = false, forceOpen = false, showScrollArrows = false, disabled, name, value, "aria-invalid": ariaInvalid, ref: forwardedRef, ...props }) => {
 	const responsiveFullWidth = useResponsiveProp(fullWidth);
 	const rootProps = {
 		disabled,
@@ -14882,8 +14840,7 @@ const Select = forwardRef(({ colorScheme = "inherit", children, onOpenChange = (
 			] })
 		}) })]
 	});
-});
-Select.displayName = "Select_UI";
+};
 //#endregion
 //#region src/components/Select/SelectOption.tsx
 const StyledItem = styled(Select$1.Item)`
@@ -14912,7 +14869,7 @@ const StyledItem = styled(Select$1.Item)`
     background-color: transparent;
   }
 `;
-const SelectOption = forwardRef(({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", textValue, ...props }, forwardedRef) => {
+const SelectOption = ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", textValue, ref: forwardedRef, ...props }) => {
 	const label = typeof children === "string" ? children : textValue;
 	return /* @__PURE__ */ jsxs(StyledItem, {
 		...props,
@@ -14927,8 +14884,7 @@ const SelectOption = forwardRef(({ children, selectedDisplayValue, checkmarkVert
 			type: "checkmark"
 		}) })]
 	});
-});
-SelectOption.displayName = "SelectOption_UI";
+};
 //#endregion
 //#region src/components/Select/SelectOptionGroup.tsx
 const StyledLabel = styled(Select$1.GroupLabel)`
@@ -14974,14 +14930,13 @@ const StyledSidebar = styled.nav`
   overflow: hidden;
   border-right: 1px solid var(--wui-color-border);
 `;
-const Sidebar = forwardRef(({ children, ...props }, ref) => {
+const Sidebar = ({ children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledSidebar, {
 		ref,
 		...props,
 		children
 	});
-});
-Sidebar.displayName = "Sidebar_UI";
+};
 //#endregion
 //#region src/components/Sidebar/SidebarHeader.tsx
 const StyledSidebarHeader = styled.div`
@@ -15121,7 +15076,7 @@ const StyledSidebarButton = styled(Button)`
     ${pressedButtonVariant};
   }
 `;
-const SidebarButton = forwardRef(({ selected = false, ...props }, ref) => {
+const SidebarButton = ({ selected = false, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledSidebarButton, {
 		ref,
 		"aria-current": selected ? "page" : void 0,
@@ -15129,14 +15084,13 @@ const SidebarButton = forwardRef(({ selected = false, ...props }, ref) => {
 		"data-wui-sidebar-button": true,
 		...props
 	});
-});
-SidebarButton.displayName = "SidebarButton_UI";
+};
 //#endregion
 //#region src/components/Sidebar/SidebarSearchInput.tsx
 const StyledSidebarSearchInputContainer = styled.div`
   padding-inline: var(--wui-space-01);
 `;
-const SidebarSearchInput = forwardRef(({ id, label = "Search navigation", ...props }, ref) => {
+const SidebarSearchInput = ({ id, label = "Search navigation", ref, ...props }) => {
 	const generatedId = useId();
 	const inputId = id ?? generatedId;
 	return /* @__PURE__ */ jsxs(StyledSidebarSearchInputContainer, { children: [/* @__PURE__ */ jsx(Label, {
@@ -15149,8 +15103,7 @@ const SidebarSearchInput = forwardRef(({ id, label = "Search navigation", ...pro
 		type: "search",
 		...props
 	})] });
-});
-SidebarSearchInput.displayName = "SidebarSearchInput_UI";
+};
 //#endregion
 //#region src/components/Slider/Slider.tsx
 const SliderContainer = styled.div`
@@ -15519,11 +15472,11 @@ const StyledTabsTrigger = styled(Tabs$1.Tab)`
 `;
 //#endregion
 //#region src/components/Tabs/TabsTrigger.tsx
-const TabsTrigger = forwardRef(({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
+const TabsTrigger = ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ref, ...otherProps }) => {
 	const selectedValue = useTabsValue();
 	const { setSelectedItemMeasurements } = useSelectedItemStyle();
 	const buttonRef = useRef(null);
-	const combinedRef = mergeRefs([buttonRef, forwardedRef]);
+	const combinedRef = mergeRefs([buttonRef, ref]);
 	useEffect(() => {
 		const buttonElem = buttonRef.current;
 		if (!buttonElem) return;
@@ -15558,8 +15511,7 @@ const TabsTrigger = forwardRef(({ disabled = false, icon, label, "aria-label": a
 		value,
 		children: [icon, label]
 	});
-});
-TabsTrigger.displayName = "TabsTrigger_UI";
+};
 //#endregion
 //#region src/components/Thumbnail/ThumbnailBadge.tsx
 const StyledThumbnailBadge = styled.div`
@@ -15758,7 +15710,7 @@ const hasValidThumbnailUrl = (thumbnailUrl) => {
 /**
 * A `Thumbnail` is a small, reduced-size version of an image or video used as a preview or representative image.
 */
-const Thumbnail = forwardRef(({ gradientBackground = "defaultMidOne", thumbnailImageType = "wide", thumbnailUrl, width = "100%", children, storyboard, height, aspectRatio = "wide", ...props }, ref) => {
+const Thumbnail = ({ gradientBackground = "defaultMidOne", thumbnailImageType = "wide", thumbnailUrl, width = "100%", children, storyboard, height, aspectRatio = "wide", ref, ...props }) => {
 	const [percent, setPercent] = useState(0);
 	const [isMouseOver, setIsMouseOver] = useState(false);
 	const [isStoryboardReady, setIsStoryboardReady] = useState(false);
@@ -15831,8 +15783,7 @@ const Thumbnail = forwardRef(({ gradientBackground = "defaultMidOne", thumbnailI
 			children: [isNotNil(children) ? children : null, thumbnailContent]
 		})
 	});
-});
-Thumbnail.displayName = "Thumbnail_UI";
+};
 //#endregion
 //#region src/components/ThumbnailCollage/ThumbnailCollage.tsx
 const ThumbnailCollageContainer = styled.div`