@wistia/ui 0.20.13 → 0.20.14-beta.205376ec.54074ac

package/dist/index.d.ts

@@ -158,7 +158,11 @@ type UseKeyOptions = {
 declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName, eventTarget, eventOptions }?: UseKeyOptions) => void;
 
 type KeyPressState = [boolean, KeyboardEvent | null];
-declare const useKeyPress: (keyFilter: Parameters<typeof useKey>[0]) => KeyPressState;
+type UseKeyPressOptions = {
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+};
+declare const useKeyPress: (keyFilter: Parameters<typeof useKey>[0], options?: UseKeyPressOptions) => KeyPressState;
 
 type SetItemType = Storage['setItem'];
 declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
@@ -240,6 +244,10 @@ type BaseProps$2 = {
      * Disables the link
      */
     disabled?: boolean;
+    /**
+     * When true, the link will inherit its color from the parent element instead of using the default link color
+     */
+    inheritColor?: boolean;
     /**
      * Icon to display on the left side of the link. Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
@@ -384,6 +392,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -415,6 +424,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2936,6 +2946,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2977,6 +2988,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.13
+ * @license @wistia/ui v0.20.14-beta.205376ec.54074ac
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -2934,11 +2934,42 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
 
 // src/hooks/useKeyPress/useKeyPress.ts
 import { useState as useState7 } from "react";
-var useKeyPress = (keyFilter) => {
-  const [state, setState] = useState7([false, null]);
-  useKey(keyFilter, (event) => setState([true, event]), { eventName: "keydown" });
-  useKey(keyFilter, (event) => setState([false, event]), { eventName: "keyup" });
-  return state;
+
+// src/private/hooks/useUpdateEffect/useUpdateEffect.ts
+import { useEffect as useEffect5, useRef as useRef6 } from "react";
+var useUpdateEffect = (effect, dependencies) => {
+  const isFirstMount = useRef6(true);
+  useEffect5(() => {
+    if (isFirstMount.current) {
+      isFirstMount.current = false;
+      return () => {
+      };
+    }
+    return effect();
+  }, dependencies);
+};
+
+// src/hooks/useKeyPress/useKeyPress.ts
+var useKeyPress = (keyFilter, options) => {
+  const [keyPressState, setKeyPressState] = useState7([false, null]);
+  const { onKeyDown, onKeyUp } = options ?? {};
+  useKey(keyFilter, (event) => setKeyPressState([true, event]), {
+    eventName: "keydown"
+  });
+  useKey(keyFilter, (event) => setKeyPressState([false, event]), {
+    eventName: "keyup"
+  });
+  useUpdateEffect(() => {
+    const [pressed, event] = keyPressState;
+    if (!pressed && onKeyUp && event !== null) {
+      onKeyUp(event);
+    } else if (pressed && onKeyDown && event !== null) {
+      onKeyDown(event);
+    }
+    return () => {
+    };
+  }, [keyPressState[0]]);
+  return keyPressState;
 };
 
 // src/hooks/useLocalStorage/useLocalStorage.ts
@@ -3052,9 +3083,9 @@ var useActiveMq = () => {
 };
 
 // src/hooks/useOnClickOutside/useOnClickOutside.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) => {
-  useEffect5(() => {
+  useEffect6(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -3081,10 +3112,10 @@ var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) =
 };
 
 // src/hooks/usePreviousValue/usePreviousValue.ts
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 var usePreviousValue = (value) => {
-  const ref = useRef6(void 0);
-  useEffect6(() => {
+  const ref = useRef7(void 0);
+  useEffect7(() => {
     ref.current = value;
   });
   return ref.current;
@@ -8051,7 +8082,11 @@ var StyledLink = styled5.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: inherit;
-  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
+  color: ${({ $disabled, $inheritColor }) => {
+  if ($disabled) return "var(--wui-color-text-disabled)";
+  if ($inheritColor) return "inherit";
+  return "var(--wui-color-text-link)";
+}};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
   display: inline-flex;
   align-items: baseline;
@@ -8083,6 +8118,7 @@ var Link = forwardRef(
     disabled = false,
     colorScheme = "inherit",
     underline = "none",
+    inheritColor = false,
     leftIcon,
     rightIcon,
     "aria-disabled": ariaDisabled,
@@ -8092,6 +8128,7 @@ var Link = forwardRef(
     const inRouterContext = useInRouterContext();
     const to = generateHref(props.href, type, disabled);
     const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
+    const hasIcons = isNotNil5(leftIcon) || isNotNil5(rightIcon);
     const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
@@ -8120,6 +8157,8 @@ var Link = forwardRef(
       $colorScheme: colorScheme,
       $disabled: disabled,
       $underline: underline,
+      $inheritColor: inheritColor,
+      $hasIcons: hasIcons,
       onClick: handleClick,
       "aria-disabled": ariaDisabled ?? (disabled ? "true" : void 0)
     };
@@ -8469,7 +8508,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton_UI";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState10, useMemo as useMemo4, useEffect as useEffect7 } from "react";
+import { useState as useState10, useMemo as useMemo4, useEffect as useEffect8 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
 import { styled as styled10 } from "styled-components";
 
@@ -8683,7 +8722,7 @@ var Avatar = ({
   ...props
 }) => {
   const [imageLoadState, setImageLoadState] = useState10("loading");
-  useEffect7(() => {
+  useEffect8(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
   const handleImageLoad = () => {
@@ -8774,7 +8813,7 @@ var Badge = forwardRef4(
 Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
-import { useEffect as useEffect8, useState as useState11, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect9, useState as useState11, useMemo as useMemo5 } from "react";
 import { styled as styled17 } from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
 
@@ -9551,7 +9590,7 @@ var Banner = ({
   const [contentRef, { height: contentHeight }] = useElementObserver();
   const [isSmallContainer, setIsSmallContainer] = useState11(false);
   const [isVerticalLayout, setIsVerticalLayout] = useState11(orientation === "vertical");
-  useEffect8(() => {
+  useEffect9(() => {
     const breakpoint = orientation === "vertical" ? VERTICAL_BREAKPOINT_WIDTH : BREAKPOINT_WIDTH;
     setIsSmallContainer(width <= breakpoint);
     if (orientation === "auto") {
@@ -10046,7 +10085,7 @@ import { isArray } from "@wistia/type-guards";
 
 // src/components/FormGroup/FormGroup.tsx
 import { styled as styled27 } from "styled-components";
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
@@ -10114,7 +10153,7 @@ var FormGroup = ({
   description,
   ...props
 }) => {
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const hasLabel = isNotNil16(label) && isNonEmptyString2(label);
   const hasDescription = isNotNil16(description) && isNonEmptyString2(description);
   return /* @__PURE__ */ jsxs18(
@@ -10152,7 +10191,7 @@ var FormGroup = ({
 FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState12, useId } from "react";
+import { forwardRef as forwardRef11, useRef as useRef9, useMemo as useMemo6, createContext as createContext3, useState as useState12, useId } from "react";
 import { styled as styled28 } from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -10197,7 +10236,7 @@ var Form = forwardRef11(
   }, forwardedRef) => {
     const [errors, setErrors] = useState12({});
     const [hasSubmitted, setHasSubmitted] = useState12(false);
-    const innerRef = useRef8(null);
+    const innerRef = useRef9(null);
     const ref = forwardedRef ?? innerRef;
     const autoId = useId();
     const id = props.id ?? autoId;
@@ -10478,7 +10517,7 @@ var Checkbox = forwardRef12(
 Checkbox.displayName = "Checkbox_UI";
 
 // src/components/ClickRegion/ClickRegion.tsx
-import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback8, useEffect as useEffect9 } from "react";
+import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback8, useEffect as useEffect10 } from "react";
 var isClickableElement = (element) => {
   if (!element) {
     return false;
@@ -10487,7 +10526,7 @@ var isClickableElement = (element) => {
   return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
 };
 var ClickRegion = ({ children, targetRef }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (targetRef.current?.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current?.tagName === "BUTTON") {
@@ -10631,7 +10670,7 @@ import { styled as styled34 } from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
-import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect10, useMemo as useMemo8, useState as useState13 } from "react";
+import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect11, useMemo as useMemo8, useState as useState13 } from "react";
 import { formatHex as formatHex2 } from "culori/fn";
 
 // src/components/ColorPicker/color-conversion-utils.ts
@@ -11113,7 +11152,7 @@ var ColorPickerProvider = ({
     );
     setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
   }
-  useEffect10(() => {
+  useEffect11(() => {
     if (valueAsHex !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
       onValueChange(whatValueAsHexShouldBe);
     }
@@ -12099,11 +12138,11 @@ var ContrastControls = () => {
 ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef10, useState as useState14 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect12, useRef as useRef11, useState as useState14 } from "react";
 import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
-import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
+import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef10 } from "react";
 import { styled as styled46, css as css30 } from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
@@ -12298,7 +12337,7 @@ var Input = forwardRef15(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef9(null);
+    const internalRef = useRef10(null);
     const ref = isNotNil18(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil14(leftIcon) && type === "search") {
@@ -12377,7 +12416,7 @@ var normalizeHexInput = (input) => {
 };
 var HexColorInput = ({ autoFocus = true }) => {
   const { valueAsHex, nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv } = useColorPickerState();
-  const inputRef = useRef10(null);
+  const inputRef = useRef11(null);
   const [textInputValue, setTextInputValue] = useState14(valueAsHex);
   const onChangeInputValue = useCallback13(
     (event) => {
@@ -12488,7 +12527,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
     selectAllButTheHash();
   }, [selectAllButTheHash]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!autoFocus) {
       return;
     }
@@ -12499,7 +12538,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     inputElem.focus();
     selectAllButTheHash();
   }, [autoFocus, selectAllButTheHash]);
-  useEffect11(() => {
+  useEffect12(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
   return /* @__PURE__ */ jsx271(
@@ -12535,7 +12574,7 @@ import { styled as styled48 } from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
-import { useEffect as useEffect12, useRef as useRef11 } from "react";
+import { useEffect as useEffect13, useRef as useRef12 } from "react";
 import { styled as styled47 } from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
 import { jsx as jsx272 } from "react/jsx-runtime";
@@ -12545,8 +12584,8 @@ var Canvas = styled47.canvas`
   width: 100%;
 `;
 var HSVHueCanvas = ({ hsv }) => {
-  const canvasRef = useRef11(null);
-  useEffect12(() => {
+  const canvasRef = useRef12(null);
+  useEffect13(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -12668,11 +12707,11 @@ var HueSlider = () => {
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState15 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect15, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef14, useState as useState15 } from "react";
 import { styled as styled50 } from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
-import { useEffect as useEffect13, useRef as useRef12 } from "react";
+import { useEffect as useEffect14, useRef as useRef13 } from "react";
 import { styled as styled49 } from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
@@ -12762,8 +12801,8 @@ var HSVSaturationValueCanvas = ({
   colorForComparison,
   opacityForContrastCalculation
 }) => {
-  const canvasRef = useRef12(null);
-  useEffect13(() => {
+  const canvasRef = useRef13(null);
+  useEffect14(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -12866,8 +12905,8 @@ var SaturationAndValuePicker = ({
     valueAsHex,
     valueAsHsv
   } = useColorPickerState();
-  const containerRef = useRef13(null);
-  const thumbRef = useRef13(null);
+  const containerRef = useRef14(null);
+  const thumbRef = useRef14(null);
   const uuid = useMemo10(() => crypto.randomUUID(), []);
   const instructionsId = `sv-instructions-${uuid}`;
   const valueAsHexConvertedToHsv = convertToHsv(valueAsHex);
@@ -12981,7 +13020,7 @@ var SaturationAndValuePicker = ({
     [isDragging, updateSaturationAndValueFromCoordinates]
   );
   const onWindowMouseUp = useCallback15(() => setIsDragging(false), [setIsDragging]);
-  useEffect14(() => {
+  useEffect15(() => {
     window.addEventListener("mousemove", onWindowMouseMove);
     window.addEventListener("mouseup", onWindowMouseUp);
     return () => {
@@ -13044,10 +13083,10 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 import * as Ariakit from "@ariakit/react";
 import {
   useMemo as useMemo11,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState16,
   useTransition,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   Children as Children5,
   isValidElement as isValidElement3
 } from "react";
@@ -13398,10 +13437,10 @@ var Combobox2 = ({
   const [isOpen, setIsOpen] = useState16(false);
   const [isPending, startTransition] = useTransition();
   const [wrapperWidth, setWrapperWidth] = useState16("auto");
-  const comboboxWrapperRef = useRef14(null);
+  const comboboxWrapperRef = useRef15(null);
   const options = useMemo11(() => extractOptions(children), [children]);
   const isMultiSelect = isArray2(value);
-  useEffect15(() => {
+  useEffect16(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -13501,7 +13540,7 @@ var Combobox2 = ({
 
 // src/components/ContextMenu/ContextMenu.tsx
 import { isNil as isNil16, isNotNil as isNotNil24 } from "@wistia/type-guards";
-import { useEffect as useEffect16, useState as useState18 } from "react";
+import { useEffect as useEffect17, useState as useState18 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Menu/Menu.tsx
@@ -14193,7 +14232,7 @@ var ContextMenu = ({
 }) => {
   const [isRightClicked, setIsRightClicked] = useState18(false);
   const [menuPosition, setMenuPosition] = useState18(position ?? { x: 0, y: 0 });
-  useEffect16(() => {
+  useEffect17(() => {
     if (isNil16(position)) {
       const onContextMenu = (event) => {
         event.preventDefault();
@@ -14249,7 +14288,7 @@ var ContextMenu = ({
 };
 
 // src/components/DataCards/DataCard.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { styled as styled58, keyframes as keyframes4 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx289, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -14427,7 +14466,7 @@ var DataCardInner = ({
   }
 );
 var DataCard = (props) => {
-  const ref = useRef15(null);
+  const ref = useRef16(null);
   if (isNotNil25(props.href) || isNotNil25(props.onClick)) {
     const { "aria-pressed": ariaPressed, ...dataCardProps } = props;
     return /* @__PURE__ */ jsx289(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx289(
@@ -14694,7 +14733,7 @@ Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import { styled as styled64, css as css34 } from "styled-components";
-import { useState as useState19, useRef as useRef16 } from "react";
+import { useState as useState19, useRef as useRef17 } from "react";
 import { Fragment as Fragment8, jsx as jsx297, jsxs as jsxs43 } from "react/jsx-runtime";
 var StyledInput = styled64(Input)`
   &:not([rows]) {
@@ -14753,7 +14792,7 @@ var EditableHeading = ({
   const [value, setValue] = useState19(children);
   const [previousValue, setPreviousValue] = useState19(children);
   const [headingHeight, setHeadingHeight] = useState19("60");
-  const headingRef = useRef16(null);
+  const headingRef = useRef17(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) {
       return;
@@ -14835,7 +14874,7 @@ var EditableHeading = ({
 };
 
 // src/components/EditableText/EditableTextDisplay.tsx
-import { useContext as useContext6, useRef as useRef17, forwardRef as forwardRef21 } from "react";
+import { useContext as useContext6, useRef as useRef18, forwardRef as forwardRef21 } from "react";
 import { styled as styled66, css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
@@ -15033,7 +15072,7 @@ var EditableTextDisplayComponent = forwardRef21(
       throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
     }
     const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
-    const triggerButtonRef = useRef17(null);
+    const triggerButtonRef = useRef18(null);
     const handleTriggerClick = () => {
       setIsEditing(true);
     };
@@ -15093,7 +15132,7 @@ var EditableTextDisplay = makePolymorphic(
 );
 
 // src/components/EditableText/EditableTextInput.tsx
-import { useContext as useContext7, useEffect as useEffect17, useRef as useRef18 } from "react";
+import { useContext as useContext7, useEffect as useEffect18, useRef as useRef19 } from "react";
 import { styled as styled67 } from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsx as jsx300 } from "react/jsx-runtime";
@@ -15129,8 +15168,8 @@ var EditableTextInput = (props) => {
     maxLines,
     finalFocusEl
   } = context;
-  const inputRef = useRef18(null);
-  useEffect17(() => {
+  const inputRef = useRef19(null);
+  useEffect18(() => {
     if (inputRef.current) {
       if (isEditing) {
         const element = inputRef.current;
@@ -15368,14 +15407,14 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext12, useRef as useRef19 } from "react";
+import { useContext as useContext12, useRef as useRef20 } from "react";
 import { isArray as isArray3, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
 import { jsx as jsx303, jsxs as jsxs46 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx303("li", { children: /* @__PURE__ */ jsx303(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = useRef19(null);
+  const ref = useRef20(null);
   const { formId, errors, hasSubmitted } = useContext12(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
@@ -15736,7 +15775,7 @@ var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import { styled as styled70 } from "styled-components";
-import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState22 } from "react";
+import { forwardRef as forwardRef23, useEffect as useEffect19, useState as useState22 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx307 } from "react/jsx-runtime";
 var StyledIconButton = styled70(IconButton)`
@@ -15751,7 +15790,7 @@ var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef23(
   ({ value, onCopy, disabled = false, ...props }, ref) => {
     const [isCopied, setIsCopied] = useState22(false);
-    useEffect18(() => {
+    useEffect19(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
           setIsCopied(false);
@@ -16374,14 +16413,14 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 var DEFAULT_MODAL_WIDTH = "532px";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef20, useEffect as useEffect19 } from "react";
+import { useRef as useRef21, useEffect as useEffect20 } from "react";
 import { isNotNil as isNotNil31 } from "@wistia/type-guards";
 var useFocusRestore = () => {
-  const previouslyFocusedRef = useRef20(null);
-  useEffect19(() => {
+  const previouslyFocusedRef = useRef21(null);
+  useEffect20(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       if (isNotNil31(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -17390,7 +17429,7 @@ var RadioCardImage = forwardRef30(
 RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState24 } from "react";
+import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef22, useState as useState24 } from "react";
 import { styled as styled90 } from "styled-components";
 import { throttle } from "throttle-debounce";
 import { jsx as jsx327, jsxs as jsxs59 } from "react/jsx-runtime";
@@ -17442,7 +17481,7 @@ var ShadowAtRight = styled90(Shadow)`
 `;
 var ScrollArea = forwardRef31(
   ({ children, onScroll, style, locked = false, ...props }, forwardedRef) => {
-    const scrollContainerRefInternal = useRef21(null);
+    const scrollContainerRefInternal = useRef22(null);
     const [shadowState, setShadowState] = useState24({
       canScrollUp: false,
       canScrollLeft: false,
@@ -17470,7 +17509,7 @@ var ScrollArea = forwardRef31(
       },
       [onScroll, throttledUpdateShadows]
     );
-    useEffect20(() => {
+    useEffect21(() => {
       updateShadows();
     }, [updateShadows]);
     return /* @__PURE__ */ jsxs59(Container10, { style, children: [
@@ -17636,7 +17675,7 @@ var SegmentedControl = forwardRef32(
 SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
+import { forwardRef as forwardRef33, useEffect as useEffect22, useRef as useRef23 } from "react";
 import { styled as styled93, css as css47 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
@@ -17716,7 +17755,7 @@ var SegmentedControlItem = forwardRef33(
   ({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
-    const buttonRef = useRef22(null);
+    const buttonRef = useRef23(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
       const target = event.target;
@@ -17725,7 +17764,7 @@ var SegmentedControlItem = forwardRef33(
         event.preventDefault();
       }
     };
-    useEffect21(() => {
+    useEffect22(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -18374,7 +18413,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
-import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef23 } from "react";
+import { forwardRef as forwardRef36, useEffect as useEffect23, useRef as useRef24 } from "react";
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
@@ -18394,9 +18433,9 @@ var TabsTrigger = forwardRef36(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
-    const buttonRef = useRef23(null);
+    const buttonRef = useRef24(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect22(() => {
+    useEffect23(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -18478,7 +18517,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { forwardRef as forwardRef37, useState as useState27, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
+import { forwardRef as forwardRef37, useState as useState27, useRef as useRef25, useCallback as useCallback20, useMemo as useMemo17 } from "react";
 import { styled as styled109 } from "styled-components";
 import {
   isNil as isNil19,
@@ -18882,7 +18921,7 @@ var Thumbnail = forwardRef37(
     const [percent, setPercent] = useState27(0);
     const [isMouseOver, setIsMouseOver] = useState27(false);
     const [isStoryboardReady, setIsStoryboardReady] = useState27(false);
-    const storyboardElementRef = useRef24(null);
+    const storyboardElementRef = useRef25(null);
     const [cursorPosition, setCursorPosition] = useState27(null);
     const backgroundUrl = useMemo17(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,