@wistia/ui 0.6.39 → 0.6.40-beta.d3a0b63e.a55d26a

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.39
+ * @license @wistia/ui v0.6.40-beta.d3a0b63e.a55d26a
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2475,6 +2475,238 @@ var useToast = () => {
   );
 };
 
+// src/hooks/useFocusTrap/useFocusTrap.ts
+import { useRef as useRef3, useCallback as useCallback5, useEffect as useEffect4 } from "react";
+import { isNotUndefined } from "@wistia/type-guards";
+
+// src/hooks/useFocusTrap/helpers.ts
+var FOCUSABLE_ELEMENT_SELECTORS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, [tabindex="0"], [contenteditable]';
+var coerceToString = (value) => value === null || value === void 0 ? "" : String(value);
+var isHiddenElement = (element) => {
+  const { display, visibility } = window.getComputedStyle(element);
+  const isHidden = display === "none" || element.style.display === "none" || visibility === "none" || element.style.visibility === "hidden";
+  return element.offsetWidth <= 0 && element.offsetHeight <= 0 || isHidden;
+};
+var isVisibleElement = (element) => {
+  let parentElement = element;
+  while (parentElement) {
+    if (parentElement === document.body) {
+      break;
+    }
+    if (isHiddenElement(parentElement)) {
+      return false;
+    }
+    parentElement = parentElement.parentNode;
+  }
+  return true;
+};
+var getElementTabIndex = (element) => {
+  const tabIndex = element.getAttribute("tabindex");
+  return Number.parseInt(tabIndex ?? void 0, 10);
+};
+var isTabIndexNaN = (element) => {
+  const tabIndex = getElementTabIndex(element);
+  return Number.isNaN(tabIndex);
+};
+var isFocusableElement = (element) => {
+  const tabbableNodeRegEx = /input|select|textarea|button|object/;
+  const nodeName = element.nodeName.toLowerCase();
+  const isTabIndexNotNaN = !isTabIndexNaN(element);
+  const isFocusable = (
+    // @ts-expect-error - Disabled is specific to buttons and inputs, but we could be dealing with any number of types here.  Disabled would be undefined for those, so ignoring.
+    tabbableNodeRegEx.test(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)
+  );
+  return Boolean(isFocusable) && isVisibleElement(element);
+};
+var isTabbableElement = (element) => {
+  const tabIndex = getElementTabIndex(element);
+  return (isTabIndexNaN(element) || tabIndex >= 0) && isFocusableElement(element);
+};
+var findTabbableDescendants = (element) => Array.from(element.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)).filter(
+  isTabbableElement
+);
+var focusLaterElements = [];
+var focusElement = null;
+var needToFocus = false;
+var handleBlur = () => {
+  needToFocus = true;
+};
+var handleFocus = () => {
+  if (needToFocus) {
+    needToFocus = false;
+    if (!focusElement) {
+      return;
+    }
+    if (focusElement.contains(document.activeElement)) {
+      return;
+    }
+    const element = findTabbableDescendants(focusElement)[0] ?? focusElement;
+    element.focus();
+  }
+};
+var markForFocusLater = () => {
+  const element = document.activeElement;
+  if (element !== null) {
+    focusLaterElements.push(element);
+  }
+};
+var returnFocus = () => {
+  let toFocus = null;
+  try {
+    toFocus = focusLaterElements.pop();
+    if (toFocus) {
+      toFocus.focus();
+    }
+  } catch {
+    console.warn(
+      `You tried to return focus to ${coerceToString(toFocus)} but it is not in the DOM anymore`
+    );
+  }
+};
+var setupScopedFocus = (element) => {
+  focusElement = element;
+  document.addEventListener("focusout", handleBlur, false);
+  document.addEventListener("focusin", handleFocus, true);
+};
+var teardownScopedFocus = () => {
+  focusElement = null;
+  document.removeEventListener("focusout", handleBlur);
+  document.removeEventListener("focusin", handleFocus);
+};
+var scopeTab = (node, event) => {
+  const tabbable = findTabbableDescendants(node);
+  if (!tabbable.length) {
+    event.preventDefault();
+    return;
+  }
+  const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
+  const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
+  if (!leavingFinalTabbable) {
+    return;
+  }
+  event.preventDefault();
+  const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];
+  if (target) {
+    target.focus();
+  }
+};
+var createAriaHider = (containerNode, selector) => {
+  if (selector === void 0) {
+    selector = "body > :not(script)";
+  }
+  const rootNodes = Array.from(document.querySelectorAll(selector)).map((node) => {
+    if (node.contains(containerNode)) {
+      return void 0;
+    }
+    const ariaHidden = node.getAttribute("aria-hidden");
+    if (ariaHidden === null || ariaHidden === "false") {
+      node.setAttribute("aria-hidden", "true");
+    }
+    return {
+      node,
+      ariaHidden
+    };
+  });
+  return () => {
+    rootNodes.forEach((item) => {
+      if (!item) {
+        return;
+      }
+      if (item.ariaHidden === null) {
+        item.node.removeAttribute("aria-hidden");
+      } else {
+        item.node.setAttribute("aria-hidden", item.ariaHidden);
+      }
+    });
+  };
+};
+
+// src/hooks/useFocusTrap/useFocusTrap.ts
+var isRef = (val) => {
+  return val !== null && typeof val === "object" && "current" in val;
+};
+var useFocusTrap = (active = true, options = {}) => {
+  const ref = useRef3(null);
+  const restoreAriaRef = useRef3(null);
+  const setRef = useCallback5(
+    (node) => {
+      if (restoreAriaRef.current !== null) {
+        restoreAriaRef.current();
+      }
+      if (ref.current) {
+        returnFocus();
+        teardownScopedFocus();
+      }
+      if (active && node !== null && node !== void 0) {
+        setupScopedFocus(node);
+        markForFocusLater();
+        const processNode = (node2) => {
+          restoreAriaRef.current = !(options.disableAriaHider ?? false) ? createAriaHider(node2) : null;
+          let focusElement2 = null;
+          if (isNotUndefined(options.focusSelector)) {
+            if (isRef(options.focusSelector)) {
+              focusElement2 = options.focusSelector.current;
+            } else {
+              focusElement2 = typeof options.focusSelector === "string" ? node2.querySelector(options.focusSelector) : options.focusSelector;
+            }
+          }
+          if (!focusElement2) {
+            const children = Array.from(
+              node2.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)
+            );
+            focusElement2 = // Prefer tabbable elements, But fallback to any focusable element
+            children.find(isTabbableElement) ?? // But fallback to any focusable element
+            children.find(isFocusableElement) ?? // Nothing found
+            null;
+            if (!focusElement2 && isFocusableElement(node2)) {
+              focusElement2 = node2;
+            }
+          }
+          if (focusElement2) {
+            focusElement2.focus();
+          }
+          if (!focusElement2 && process.env["NODE_ENV"] === "development") {
+            console.warn(
+              '[useFocusTrap]: Failed to find a focusable element after activating the focus trap. Make sure to include at an element that can recieve focus. As a fallback, you can also set "tabIndex={-1}" on the focus trap node.',
+              node2
+            );
+          }
+        };
+        setTimeout(() => {
+          if (node.ownerDocument) {
+            processNode(node);
+          }
+          if (!node.ownerDocument && process.env["NODE_ENV"] === "development") {
+            console.warn(
+              "[useFocusTrap]: The focus trap is not part of the DOM yet, so it is unable to correctly set focus. Make sure to render the ref node.",
+              node
+            );
+          }
+        });
+        ref.current = node;
+      } else {
+        ref.current = null;
+      }
+    },
+    [active, options.focusSelector, options.disableAriaHider]
+  );
+  useEffect4(() => {
+    if (!active) {
+      return void 0;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Tab" && ref.current) {
+        scopeTab(ref.current, event);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [active]);
+  return setRef;
+};
+
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
 import styled6, { css as css16 } from "styled-components";
@@ -2482,7 +2714,7 @@ import styled6, { css as css16 } from "styled-components";
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
 import styled5 from "styled-components";
-import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
+import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
 import { css as css14 } from "styled-components";
@@ -6541,7 +6773,7 @@ var iconMap = {
 };
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
-import { isNotUndefined, isRecord as isRecord2, isUndefined } from "@wistia/type-guards";
+import { isNotUndefined as isNotUndefined2, isRecord as isRecord2, isUndefined } from "@wistia/type-guards";
 import { useMemo as useMemo2 } from "react";
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
@@ -6551,7 +6783,7 @@ var useResponsiveProp = (values) => {
   return useMemo2(() => {
     if (isRecord2(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
-      return isNotUndefined(mq2) && isNotUndefined(values[mq2]) ? values[mq2] : values.base;
+      return isNotUndefined2(mq2) && isNotUndefined2(values[mq2]) ? values[mq2] : values.base;
     }
     return values;
   }, [activeMediaQueries, values]);
@@ -6616,7 +6848,7 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
+import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import styled4 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
 import { jsx as jsx192, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -6634,7 +6866,7 @@ var generateHref = (href, type, disabled) => {
   return to;
 };
 var isButton = (props) => isUndefined2(props.href);
-var isLink = (props) => isNotUndefined2(props.href);
+var isLink = (props) => isNotUndefined3(props.href);
 var StyledLink = styled4.a`
   --link-icon-size: 14px;
 
@@ -6749,7 +6981,7 @@ Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
 import { Fragment, jsx as jsx193, jsxs as jsxs8 } from "react/jsx-runtime";
-var isLink2 = (props) => isNotUndefined3(props.href);
+var isLink2 = (props) => isNotUndefined4(props.href);
 var StyledButton = styled5.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
@@ -7024,7 +7256,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState5, useMemo as useMemo3, useEffect as useEffect4 } from "react";
+import { useState as useState5, useMemo as useMemo3, useEffect as useEffect5 } from "react";
 import { isNil as isNil8 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
@@ -7157,7 +7389,7 @@ var Avatar = ({
   ...otherProps
 }) => {
   const [imageLoadState, setImageLoadState] = useState5("loading");
-  useEffect4(() => {
+  useEffect5(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
   const handleImageLoad = () => {
@@ -7246,7 +7478,7 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
 import styled10, { css as css17 } from "styled-components";
-import { isNotNil as isNotNil8, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
+import { isNotNil as isNotNil8, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7392,7 +7624,7 @@ var BoxComponent = forwardRef5(
     flexMode,
     ...otherProps
   }, ref) => {
-    if (isNotUndefined4(height)) {
+    if (isNotUndefined5(height)) {
       if (fill === true || fill === "vertical") {
         throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
       }
@@ -7402,7 +7634,7 @@ var BoxComponent = forwardRef5(
         );
       }
     }
-    if (isNotUndefined4(width)) {
+    if (isNotUndefined5(width)) {
       if (fill === true || fill === "horizontal") {
         throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
       }
@@ -7956,9 +8188,9 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback6, useEffect as useEffect6 } from "react";
 var ClickRegion = ({ children, targetRef }) => {
-  useEffect5(() => {
+  useEffect6(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -7966,7 +8198,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = useCallback5(
+  const handleClick = useCallback6(
     (event) => {
       const node = targetRef.current;
       if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
@@ -8027,13 +8259,13 @@ var CollapsibleTrigger = ({ children }) => {
 // src/components/Collapsible/CollapsibleContent.tsx
 import styled21 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
-import { isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
+import { isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
 import { Fragment as Fragment4, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
 var ClampedContent = styled21.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if (isNotUndefined5(clamp)) {
+  if (isNotUndefined6(clamp)) {
     return /* @__PURE__ */ jsx210(ClampedContent, { $clamp: clamp, children });
   }
   return /* @__PURE__ */ jsx210(Content, { children: /* @__PURE__ */ jsxs15(Fragment4, { children: [
@@ -8580,7 +8812,7 @@ Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import styled30, { css as css26 } from "styled-components";
-import { useState as useState6, useRef as useRef4 } from "react";
+import { useState as useState6, useRef as useRef5 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -8695,7 +8927,7 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef4 } from "react";
 import styled29, { css as css25 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil12, isRecord as isRecord4 } from "@wistia/type-guards";
 import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -8794,7 +9026,7 @@ var Input = forwardRef10(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef3();
+    const internalRef = useRef4();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       isNotNil12(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
@@ -8816,7 +9048,7 @@ var Input = forwardRef10(
         className: "wui-input-right-icon"
       });
     }
-    const handleFocus = (event) => {
+    const handleFocus2 = (event) => {
       if (isNotNil12(props.onFocus)) {
         props.onFocus(event);
       }
@@ -8838,14 +9070,14 @@ var Input = forwardRef10(
             {
               ...props,
               ref,
-              onFocus: handleFocus
+              onFocus: handleFocus2
             }
           ) : /* @__PURE__ */ jsx218(
             "input",
             {
               ...props,
               ref,
-              onFocus: handleFocus,
+              onFocus: handleFocus2,
               type
             }
           ),
@@ -8910,7 +9142,7 @@ var EditableHeading = ({
   const [value, setValue] = useState6(children);
   const [previousValue, setPreviousValue] = useState6(children);
   const [headingHeight, setHeadingHeight] = useState6("60");
-  const headingRef = useRef4(null);
+  const headingRef = useRef5(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -8996,9 +9228,9 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
+import { forwardRef as forwardRef12, useRef as useRef6, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
 import styled32 from "styled-components";
-import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
+import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef11 } from "react";
@@ -9058,7 +9290,7 @@ var FormComponent = ({
 }, forwardedRef) => {
   const [errors, setErrors] = useState7({});
   const [hasSubmitted, setHasSubmitted] = useState7(false);
-  const innerRef = useRef5();
+  const innerRef = useRef6();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
   const id = props.id ?? autoId;
@@ -9069,12 +9301,12 @@ var FormComponent = ({
     }
     return validate(nextData);
   };
-  const handleBlur = (event) => {
+  const handleBlur2 = (event) => {
     if (props.onBlur) {
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if (isNotUndefined6(validate)) {
+    if (isNotUndefined7(validate)) {
       handleValidate(formData);
     }
   };
@@ -9122,7 +9354,7 @@ var FormComponent = ({
         as: StyledForm,
         gap: "space-05",
         id,
-        onBlur: handleBlur,
+        onBlur: handleBlur2,
         onReset: handleReset,
         onSubmit: handleSubmit,
         children
@@ -9134,12 +9366,12 @@ FormComponent.displayName = "Form";
 var Form = forwardRef12(FormComponent);
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback6, useState as useState8 } from "react";
+import { useCallback as useCallback7, useState as useState8 } from "react";
 var useFormState = (action, initialData = {}) => {
   const [data, setData] = useState8(initialData);
   const [isPending, setIsPending] = useState8(false);
   const [error, setError] = useState8(null);
-  const formAction = useCallback6(
+  const formAction = useCallback7(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -9170,14 +9402,14 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext2, useRef as useRef6 } from "react";
-import { isArray, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { useContext as useContext2, useRef as useRef7 } from "react";
+import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx222, jsxs as jsxs21 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx222("li", { children: /* @__PURE__ */ jsx222(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   const { formId, errors, hasSubmitted } = useContext2(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
@@ -9185,7 +9417,7 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ jsxs21("div", { ref, children: [
     /* @__PURE__ */ jsx222("p", { children: description }),
-    /* @__PURE__ */ jsx222("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined7(error)).map(
+    /* @__PURE__ */ jsx222("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined8(error)).map(
       ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx222(
         ErrorItem,
         {
@@ -9210,7 +9442,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
 import styled35 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil13, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray2, isNotNil as isNotNil13, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
 import styled33, { css as css27 } from "styled-components";
@@ -9277,7 +9509,7 @@ import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
 import styled34 from "styled-components";
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { jsx as jsx224, jsxs as jsxs22 } from "react/jsx-runtime";
 var StyledFieldset = styled34.fieldset`
   border: 0;
@@ -9286,7 +9518,7 @@ var StyledLegend = styled34.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = useRef7();
+  const ref = useRef8();
   return /* @__PURE__ */ jsxs22(
     Stack,
     {
@@ -9420,7 +9652,7 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if (isUndefined4(value) && isNotUndefined8(defaultValue)) {
+  if (isUndefined4(value) && isNotUndefined9(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
@@ -9429,10 +9661,10 @@ var FormField = ({
   if (isNotNil13(checkboxGroup)) {
     const computedName = isNotNil13(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if (isNotUndefined8(props.onChange)) {
+      if (isNotUndefined9(props.onChange)) {
         props.onChange(event);
       }
-      if (isNotUndefined8(checkboxGroup.onChange)) {
+      if (isNotUndefined9(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9585,7 +9817,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -9711,7 +9943,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx230(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx230(
+        /* @__PURE__ */ jsx230(DropdownMenuTrigger, { asChild: true, children: isNotUndefined10(trigger) ? trigger : /* @__PURE__ */ jsx230(
           Button,
           {
             "aria-expanded": isOpen,
@@ -9784,7 +10016,7 @@ import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef14 } from "react";
 import styled40 from "styled-components";
-import { isNotNil as isNotNil16, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
 import { jsx as jsx232, jsxs as jsxs25 } from "react/jsx-runtime";
 var StyledButton3 = styled40(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -9862,7 +10094,7 @@ var StyledBadgeContainer = styled40.div`
 var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if (isNotUndefined10(colorScheme)) {
+    if (isNotUndefined11(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -10209,14 +10441,14 @@ import styled45 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef8, useEffect as useEffect6 } from "react";
+import { useRef as useRef9, useEffect as useEffect7 } from "react";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 var useFocusRestore = () => {
-  const previouslyFocusedRef = useRef8(null);
-  useEffect6(() => {
+  const previouslyFocusedRef = useRef9(null);
+  useEffect7(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       if (isNotNil18(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -10858,7 +11090,7 @@ var SegmentedControl = forwardRef20(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect7, useRef as useRef9 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect8, useRef as useRef10 } from "react";
 import styled53, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
@@ -10930,7 +11162,7 @@ var SegmentedControlItem = forwardRef21(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = useRef9(null);
+    const buttonRef = useRef10(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
       const target = event.target;
@@ -10939,7 +11171,7 @@ var SegmentedControlItem = forwardRef21(
         event.preventDefault();
       }
     };
-    useEffect7(() => {
+    useEffect8(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11507,7 +11739,7 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect8, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect9, useRef as useRef11 } from "react";
 import styled66 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
@@ -11537,9 +11769,9 @@ var TabItem = forwardRef25(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = useRef10(null);
+    const buttonRef = useRef11(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect8(() => {
+    useEffect9(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -12049,6 +12281,257 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx266("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Thumbnail/Thumbnail.tsx
+import { forwardRef as forwardRef29 } from "react";
+import styled71 from "styled-components";
+import { isNotNil as isNotNil28 } from "@wistia/type-guards";
+
+// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
+import { isNotNil as isNotNil27 } from "@wistia/type-guards";
+import { css as css37 } from "styled-components";
+var gradients = {
+  defaultDarkOne: css37`
+    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: css37`
+    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: css37`
+    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: css37`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(ellipse at top, #ccd5ff, transparent),
+      radial-gradient(ellipse at bottom, #6b84ff, transparent);
+  `,
+  defaultMidOne: css37`
+    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: css37`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(ellipse at top, #2949e5, transparent),
+      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
+  `,
+  green: css37`
+    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: css37`
+    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: css37`
+    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: css37`
+    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: css37`
+    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: css37`
+    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: css37`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
+      radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
+  `,
+  purpleWithPop: css37`
+    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: css37`
+    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: css37`
+    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%);
+  `
+};
+var gradientMap = Object.keys(gradients);
+var getBackgroundGradient = (gradientName = void 0) => {
+  return isNotNil27(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+};
+
+// src/components/Thumbnail/Thumbnail.tsx
+import { jsx as jsx267, jsxs as jsxs44 } from "react/jsx-runtime";
+var WideThumbnailImage = styled71.img`
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
+var SquareThumbnailImage = styled71.img`
+  backdrop-filter: blur(8px);
+  object-fit: contain;
+  width: 100%;
+`;
+var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
+  if (thumbnailImageType === "wide") {
+    return /* @__PURE__ */ jsx267(
+      WideThumbnailImage,
+      {
+        alt: "",
+        src: thumbnailUrl
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx267(
+    SquareThumbnailImage,
+    {
+      alt: "",
+      src: thumbnailUrl
+    }
+  );
+};
+var StyledThumbnail = styled71.div`
+  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
+  aspect-ratio: 16 / 9;
+  background: ${({ $backgroundUrl }) => isNotNil28($backgroundUrl) ? `url('${$backgroundUrl}') center / cover` : void 0};
+  border-radius: 4px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: ${({ $width }) => $width};
+`;
+var Thumbnail = forwardRef29(
+  ({
+    gradientBackground = "defaultMidOne",
+    thumbnailImageType = "square",
+    thumbnailUrl,
+    width = "100%",
+    children,
+    ...otherProps
+  }, ref) => {
+    const backgroundUrl = thumbnailImageType === "square" && isNotNil28(thumbnailUrl) ? thumbnailUrl : void 0;
+    return /* @__PURE__ */ jsxs44(
+      StyledThumbnail,
+      {
+        ref,
+        $backgroundUrl: backgroundUrl,
+        $gradientBackground: gradientBackground,
+        $width: width,
+        ...otherProps,
+        children: [
+          isNotNil28(children) && children,
+          isNotNil28(thumbnailUrl) && /* @__PURE__ */ jsx267(
+            ThumbnailImage,
+            {
+              thumbnailImageType,
+              thumbnailUrl
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Thumbnail.displayName = "Thumbnail";
+
+// src/components/Thumbnail/ThumbnailOverlay.tsx
+import styled72 from "styled-components";
+import { isNotNil as isNotNil29 } from "@wistia/type-guards";
+import { jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
+var StyledThumbnailOverlay = styled72.div`
+  align-items: center;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: var(--wui-border-radius-01);
+  bottom: var(--wui-space-01);
+  color: var(--wui-color-text-on-fill);
+  display: flex;
+  font-size: var(--wui-typography-body-4-size);
+  font-weight: var(--wui-typography-weight-body-bold);
+  gap: var(--wui-space-01);
+  padding: 0 var(--wui-space-01);
+  position: absolute;
+  right: var(--wui-space-01);
+  z-index: 1;
+
+  svg {
+    height: 12px;
+    width: 12px;
+
+    path {
+      color: var(--wui-color-icon-on-fill);
+    }
+  }
+`;
+var ThumbnailOverlay = ({
+  icon,
+  label,
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ jsxs45(StyledThumbnailOverlay, { ...otherProps, children: [
+    isNotNil29(icon) && icon,
+    /* @__PURE__ */ jsx268("span", { children: label })
+  ] });
+};
+ThumbnailOverlay.displayName = "ThumbnailOverlay";
 export {
   ActionButton,
   Avatar,
@@ -12121,6 +12604,8 @@ export {
   Tabs,
   Tag,
   Text,
+  Thumbnail,
+  ThumbnailOverlay,
   Tooltip,
   UIProvider,
   WistiaLogo,
@@ -12136,6 +12621,7 @@ export {
   useAriaLive,
   useBoolean,
   useFilePicker,
+  useFocusTrap,
   useFormState,
   useImperativeFilePicker,
   useKey,