@wistia/ui 0.26.5 → 0.26.6-beta.07d5e63e.7bb2fc5

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.5
+ * @license @wistia/ui v0.26.6-beta.07d5e63e.7bb2fc5
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -10,7 +10,7 @@
 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 { 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
@@ -1093,17 +1086,6 @@ const dateTime = {
 	timeOnlyString
 };
 //#endregion
-//#region src/helpers/mergeRefs/mergeRefs.ts
-const mergeRefs = (refs) => (value) => {
-	refs.forEach((ref) => {
-		if (isFunction(ref)) {
-			ref(value);
-			return;
-		}
-		if (isNotNil(ref)) ref.current = value;
-	});
-};
-//#endregion
 //#region src/helpers/isUrl/isUrl.ts
 /**
 * Loosely validates a URL string
@@ -1123,6 +1105,167 @@ const isUrl = (str) => {
 	return localhostDomain.test(remaining) || nonLocalhostDomain.test(remaining);
 };
 //#endregion
+//#region src/helpers/getBackgroundGradient/getBackgroundGradient.ts
+const gradients = {
+	defaultDarkOne: css`
+    background-color: #222d66;
+    background-image:
+      radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
+      radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
+  `,
+	defaultDarkTwo: css`
+    background-color: #222d66;
+    background-image:
+      radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
+      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+	defaultLightOne: css`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
+      radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
+      radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
+  `,
+	defaultLightTwo: css`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(ellipse at top, #ccd5ff, transparent),
+      radial-gradient(ellipse at bottom, #6b84ff, transparent);
+  `,
+	defaultMidOne: css`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
+      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
+  `,
+	defaultMidTwo: css`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(ellipse at top, #2949e5, transparent),
+      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
+  `,
+	green: css`
+    background-color: #fafffa;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #268713, transparent 50%),
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
+  `,
+	greenWithPop: css`
+    background-color: #fafffa;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
+  `,
+	pink: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
+      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
+      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
+  `,
+	pinkWithPop: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
+      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
+      radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
+  `,
+	playfulGradientOne: css`
+    background-color: #f7f8ff;
+    background-image:
+      radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
+      radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
+  `,
+	playfulGradientTwo: css`
+    background-color: #f7f8ff;
+    background-image:
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
+      radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+	purple: css`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
+      radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
+  `,
+	purpleWithPop: css`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
+      radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+	yellow: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
+      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
+  `,
+	yellowWithPop: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
+      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
+  `
+};
+const gradientMap = Object.keys(gradients);
+/**
+* Retrieves the CSS background gradient corresponding to the given gradient name.
+* If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
+* @param {GradientName} gradientName - The name of the gradient to retrieve.
+* @returns {CssStyleType} The CSS string representing the specified gradient.
+*/
+const getBackgroundGradient = (gradientName) => {
+	return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+};
+//#endregion
+//#region src/helpers/getBackgroundGradient/getSemiRandomBackgroundGradient.ts
+const MULTIPLIER = 31;
+/**
+* Retrieves a semi-random background gradient based on the given id.
+*
+* @param {string} id - The id to use to generate the semi-random background gradient.
+* @returns {GradientName} gradientName
+*/
+const getSemiRandomBackgroundGradient = (id) => {
+	if (!(typeof id === "string" && id)) return gradientMap[0];
+	const hashCode = Array.from(id).reduce((num, char) => Math.imul(MULTIPLIER, num) + char.charCodeAt(0) || 0, 0);
+	return gradientMap[Math.abs(hashCode) % gradientMap.length];
+};
+//#endregion
+//#region src/helpers/mergeRefs/mergeRefs.ts
+const mergeRefs = (refs) => (value) => {
+	refs.forEach((ref) => {
+		if (isFunction(ref)) {
+			ref(value);
+			return;
+		}
+		if (isNotNil(ref)) ref.current = value;
+	});
+};
+//#endregion
 //#region src/css/breakpoints.ts
 const breakpoints = {
 	xs: "0em",
@@ -5446,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");
@@ -5509,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);
@@ -5563,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;
@@ -5613,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)`
@@ -5726,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",
@@ -5757,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) => {
@@ -5989,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,
@@ -5999,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.
@@ -6086,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);
@@ -6133,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).
 */
@@ -6253,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,
@@ -6269,8 +6407,7 @@ const HeadingComponent = forwardRef(({ align = "left", children, colorScheme = "
 		...props,
 		children: processedChildren
 	});
-});
-HeadingComponent.displayName = "Heading_UI";
+};
 /**
 * Displaying heading text, both visually and semantically
 */
@@ -6444,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,
@@ -6460,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.
 */
@@ -6546,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,
@@ -6556,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`
@@ -6783,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 });
@@ -6888,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, {
@@ -6901,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.
@@ -6978,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);
@@ -7042,7 +7175,7 @@ const Form = forwardRef(({ children, action, values = {}, labelPosition = "block
 			children
 		})
 	});
-});
+};
 //#endregion
 //#region src/components/FormGroup/CheckboxGroup.tsx
 const CheckboxGroupContext = createContext(null);
@@ -7176,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();
@@ -7214,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) => {
@@ -8357,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`
@@ -8480,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, {
@@ -8512,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
 /**
@@ -8759,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;
@@ -8800,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;
@@ -9448,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,
@@ -9468,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 = {
@@ -9805,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) {
@@ -9847,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)`
@@ -10575,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;
@@ -10617,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
@@ -11314,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,
@@ -11331,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
@@ -11432,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) {
@@ -11471,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;
@@ -12141,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,
@@ -12176,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)`
@@ -12191,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;
@@ -12212,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 = {
@@ -12725,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");
@@ -12753,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`
@@ -12833,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),
@@ -12844,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 }) => {
@@ -12925,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,
@@ -12996,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`
@@ -13100,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);
@@ -13327,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,
@@ -13336,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`
@@ -13392,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();
@@ -13416,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 }) => {
@@ -13654,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
 /**
@@ -13700,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 = {
@@ -13720,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,
@@ -13729,8 +13846,7 @@ const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false,
 			children
 		})
 	});
-});
-PopoverContent.displayName = "PopoverContent_UI";
+};
 //#endregion
 //#region src/components/Popover/PopoverPortal.tsx
 /**
@@ -13765,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`
@@ -13912,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();
@@ -13946,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`
@@ -14056,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();
@@ -14083,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`
@@ -14197,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,
@@ -14214,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,
@@ -14232,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;
@@ -14286,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,
@@ -14329,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);
@@ -14506,7 +14616,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);
@@ -14549,8 +14659,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)`
@@ -14691,7 +14800,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,
@@ -14732,8 +14841,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)`
@@ -14762,7 +14870,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,
@@ -14777,8 +14885,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)`
@@ -14824,14 +14931,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`
@@ -14971,7 +15077,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,
@@ -14979,14 +15085,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, {
@@ -14999,8 +15104,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`
@@ -15369,11 +15473,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;
@@ -15408,8 +15512,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`
@@ -15445,141 +15548,6 @@ const ThumbnailBadge = ({ icon, label, ...props }) => {
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 //#endregion
-//#region src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-const gradients = {
-	defaultDarkOne: css`
-    background-color: #222d66;
-    background-image:
-      radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
-      radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
-  `,
-	defaultDarkTwo: css`
-    background-color: #222d66;
-    background-image:
-      radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
-      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
-  `,
-	defaultLightOne: css`
-    background-color: #ccd5ff;
-    background-image:
-      radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
-      radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
-      radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
-  `,
-	defaultLightTwo: css`
-    background-color: #ccd5ff;
-    background-image:
-      radial-gradient(ellipse at top, #ccd5ff, transparent),
-      radial-gradient(ellipse at bottom, #6b84ff, transparent);
-  `,
-	defaultMidOne: css`
-    background-color: #6b84ff;
-    background-image:
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
-      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
-  `,
-	defaultMidTwo: css`
-    background-color: #6b84ff;
-    background-image:
-      radial-gradient(ellipse at top, #2949e5, transparent),
-      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
-  `,
-	green: css`
-    background-color: #fafffa;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
-      radial-gradient(farthest-corner at top right, #268713, transparent 50%),
-      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
-  `,
-	greenWithPop: css`
-    background-color: #fafffa;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
-  `,
-	pink: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
-      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
-      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
-  `,
-	pinkWithPop: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
-      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
-      radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
-  `,
-	playfulGradientOne: css`
-    background-color: #f7f8ff;
-    background-image:
-      radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
-      radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
-  `,
-	playfulGradientTwo: css`
-    background-color: #f7f8ff;
-    background-image:
-      radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
-      radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
-  `,
-	purple: css`
-    background-color: #f2caff;
-    background-image:
-      radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
-      radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
-  `,
-	purpleWithPop: css`
-    background-color: #f2caff;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
-      radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
-  `,
-	yellow: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
-      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
-      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
-  `,
-	yellowWithPop: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
-      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
-      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
-  `
-};
-/**
-* Retrieves the CSS background gradient corresponding to the given gradient name.
-* If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
-* @param {GradientName} gradientName - The name of the gradient to retrieve.
-* @returns {CssStyleType} The CSS string representing the specified gradient.
-*/
-const getBackgroundGradient = (gradientName) => {
-	return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
-};
-//#endregion
 //#region src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 const ScrubLine = styled.div`
   position: absolute;
@@ -15743,7 +15711,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);
@@ -15816,8 +15784,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`
@@ -15993,6 +15960,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map