npm - @wistia/ui - Versions diffs - 0.8.8 → 0.8.9-beta.8e513df6.87f52b0 - Mend

@wistia/ui 0.8.8 → 0.8.9-beta.8e513df6.87f52b0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 /*
- * @license @wistia/ui v0.8.8
+ * @license @wistia/ui v0.8.9-beta.8e513df6.87f52b0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10,6 +10,7 @@
 // src/providers/UIProvider/UIProvider.tsx
 import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
+import { createContext as createContext2, useContext } from "react";
 // src/css/GlobalStyle.tsx
 import { createGlobalStyle } from "styled-components";
@@ -1468,12 +1469,17 @@ var ToastProvider = () => /* @__PURE__ */ jsx2(Toaster, { ...toastConfig });
 // src/providers/UIProvider/UIProvider.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var UIProviderNestingContext = createContext2(false);
 var UIProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  const isNested = useContext(UIProviderNestingContext);
+  if (isNested) {
+    console.warn("UIProvider is nested. Only one instance of UIProvider.");
+  }
+  return /* @__PURE__ */ jsx3(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsx3(GlobalStyle, {}),
     children,
     process.env["NODE_ENV"] !== "test" && /* @__PURE__ */ jsx3(ToastProvider, {})
-  ] }) });
+  ] }) }) });
 };
 // src/helpers/copyToClipboard/copyToClipboard.ts
@@ -1941,10 +1947,10 @@ var mq = {
 };
 // src/hooks/useAriaLive/useAriaLive.tsx
-import { useContext } from "react";
+import { useContext as useContext2 } from "react";
 import { isNil as isNil4 } from "@wistia/type-guards";
 var useAriaLive = () => {
-  const context = useContext(AriaLiveContext);
+  const context = useContext2(AriaLiveContext);
   if (isNil4(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
@@ -2196,9 +2202,20 @@ import { isNotNil as isNotNil4 } from "@wistia/type-guards";
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil3 } from "@wistia/type-guards";
-import styled, { css as css12 } from "styled-components";
+import styled, { css as css13 } from "styled-components";
+// src/css/lineClampCss.tsx
+import { css as css12 } from "styled-components";
+var lineClampCss = ($lines = 1) => css12`
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: ${$lines};
+  display: -webkit-box !important;
+  white-space: initial;
+`;
+// src/components/Ellipsis/Ellipsis.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var ellipsisStyle = css12`
+var ellipsisStyle = css13`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2222,23 +2239,14 @@ var ellipsisStyle = css12`
     }
   }
 `;
-var lineClampStyle = css12`
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  display: -webkit-box !important;
-  white-space: initial;
-`;
-var ellipsisFlexParentStyle = css12`
+var ellipsisFlexParentStyle = css13`
   min-width: 0;
 `;
 var EllipsisComponent = styled.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if (isNotNil3($lines)) {
-    return css12`
-        ${lineClampStyle};
-        -webkit-line-clamp: ${$lines};
-      `;
+    return lineClampCss($lines);
   }
   return void 0;
 }}
@@ -2254,7 +2262,7 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx4(
 Ellipsis.displayName = "Ellipsis";
 // src/private/helpers/getColorScheme/getColorScheme.ts
-import { css as css13 } from "styled-components";
+import { css as css14 } from "styled-components";
 var colorSchemeSchema = [
   { token: "bg-surface", step: "2" },
   { token: "bg-surface-hover", step: "3" },
@@ -2281,7 +2289,7 @@ var colorSchemeSchema = [
   { token: "icon-on-fill", step: "contrast" },
   { token: "focus-ring", step: "9" }
 ];
-var defaultScheme = css13`
+var defaultScheme = css14`
   --wui-color-bg-surface: var(--wui-gray-1);
   --wui-color-bg-surface-hover: var(--wui-gray-3);
   --wui-color-bg-surface-active: var(--wui-gray-4);
@@ -2307,7 +2315,7 @@ var defaultScheme = css13`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
-var navScheme = css13`
+var navScheme = css14`
   --wui-color-bg-app: #1e3399;
   --wui-color-bg-fill: var(--wui-blue-1);
@@ -2368,7 +2376,7 @@ var getColorScheme = (colorScheme) => {
   if (colorScheme === "default") {
     return defaultScheme;
   }
-  return css13`
+  return css14`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
   }).join("")}
@@ -2381,6 +2389,8 @@ var Message = styled2(Ellipsis)`
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
+  ${lineClampCss(3)}
 `;
 var MessageWrapper = styled2.div`
   display: flex;
@@ -2716,7 +2726,7 @@ var useFocusTrap = (active = true, options = {}) => {
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled6, { css as css16 } from "styled-components";
+import styled6, { css as css17 } from "styled-components";
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -2724,8 +2734,8 @@ import styled5 from "styled-components";
 import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 // src/css/buttonResetCss.tsx
-import { css as css14 } from "styled-components";
-var buttonResetCss = css14`
+import { css as css15 } from "styled-components";
+var buttonResetCss = css15`
   align-items: center;
   background-color: transparent;
   background-image: none;
@@ -2770,8 +2780,8 @@ var buttonResetCss = css14`
 `;
 // src/components/Button/buttonStyles.tsx
-import { css as css15 } from "styled-components";
-var buttonSmallStyles = css15`
+import { css as css16 } from "styled-components";
+var buttonSmallStyles = css16`
   --button-padding-vertical: var(--wui-space-01);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-01);
@@ -2782,7 +2792,7 @@ var buttonSmallStyles = css15`
   --button-icon-size: 12px;
   --button-label-gap: 4px;
 `;
-var buttonMediumStyles = css15`
+var buttonMediumStyles = css16`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: 6px;
@@ -2793,7 +2803,7 @@ var buttonMediumStyles = css15`
   --button-icon-size: 16px;
   --button-label-gap: 6px;
 `;
-var buttonLargeStyles = css15`
+var buttonLargeStyles = css16`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2804,7 +2814,7 @@ var buttonLargeStyles = css15`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonExtraLargeStyles = css15`
+var buttonExtraLargeStyles = css16`
   --button-padding-vertical: var(--wui-space-03);
   --button-padding-horizontal: var(--wui-space-03);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2815,34 +2825,34 @@ var buttonExtraLargeStyles = css15`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var ghostButtonVariant = css15`
+var ghostButtonVariant = css16`
   --button-color-bg: transparent;
   --button-color-bg-hover: var(--wui-color-bg-surface-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
-var outlineButtonVariant = css15`
+var outlineButtonVariant = css16`
   ${ghostButtonVariant};
   --button-color-border: var(--wui-color-border);
   box-shadow: 0 0 0 2px var(--button-color-border) inset;
 `;
-var softButtonVariant = css15`
+var softButtonVariant = css16`
   --button-color-bg: var(--wui-color-bg-surface-secondary);
   --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
-var solidButtonVariant = css15`
+var solidButtonVariant = css16`
   --button-color-bg: var(--wui-color-bg-fill);
   --button-color-bg-hover: var(--wui-color-bg-fill-hover);
   --button-color-bg-active: var(--wui-color-bg-fill-active);
   --button-color-text: var(--wui-color-text-on-fill);
   --button-color-icon: var(--wui-color-icon-on-fill);
 `;
-var disabledButtonVariant = css15`
+var disabledButtonVariant = css16`
   --button-color-bg: var(--wui-color-bg-surface-disabled);
   --button-color-bg-hover: var(--wui-color-bg-surface-disabled);
   --button-color-bg-active: var(--wui-color-bg-surface-disabled);
@@ -2850,7 +2860,7 @@ var disabledButtonVariant = css15`
   --button-color-icon: var(--wui-color-icon-disabled);
   --button-color-border: var(--wui-color-border-disabled);
 `;
-var pressedButtonVariant = css15`
+var pressedButtonVariant = css16`
   --button-color-bg: var(--wui-color-bg-surface-selected);
   --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
@@ -2858,7 +2868,7 @@ var pressedButtonVariant = css15`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
-var buttonBaseStyles = css15`
+var buttonBaseStyles = css16`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
   font-size: var(--button-typography-size);
@@ -6855,31 +6865,29 @@ Icon.displayName = "Icon";
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-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 { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import { jsx as jsx192, jsxs as jsxs7 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
   if (disabled || isNil6(href)) {
     return void 0;
   }
-  let to = href;
+  let modifiedHref = href;
   if (type === "phone") {
-    to = `tel:${href}`;
+    modifiedHref = `tel:${href}`;
   }
   if (type === "email") {
-    to = `mailto:${href}`;
+    modifiedHref = `mailto:${href}`;
   }
-  return to;
+  return modifiedHref;
 };
 var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined3(props.href);
 var StyledLink = styled4.a`
-  --link-icon-size: 14px;
   ${({ href }) => isNil6(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
-  cursor: pointer;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: var(--wui-typography-family-default);
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
@@ -6889,8 +6897,8 @@ var StyledLink = styled4.a`
   && {
     svg {
-      width: var(--link-icon-size);
-      height: var(--link-icon-size);
+      width: 14px;
+      height: 14px;
     }
   }
 `;
@@ -6935,6 +6943,7 @@ var Link = forwardRef(
     };
     const commonProps = {
       $colorScheme: colorScheme,
+      $disabled: disabled,
       $underline: underline,
       onClick: handleClick
     };
@@ -6953,33 +6962,27 @@ var Link = forwardRef(
     }
     if (isLink(props)) {
       const externalLinkProps = type === "external" ? { target: "_blank", rel: "noopener noreferrer" } : null;
+      const routerSpecificProps = shouldUseReactRouterLink ? {
+        // TODO: Using 'any' here due to styled-components typing limitations with RouterLink
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+        as: RouterLink,
+        to: to ?? ""
+      } : {
+        as: "a",
+        href: to
+      };
       const combinedProps = {
         ref,
         ...props,
         ...commonProps,
-        ...externalLinkProps
+        ...externalLinkProps,
+        ...routerSpecificProps
       };
-      return shouldUseReactRouterLink ? /* @__PURE__ */ jsx192(
-        StyledLink,
-        {
-          as: RouterLink,
-          ...combinedProps,
-          to: to ?? "",
-          children
-        }
-      ) : /* @__PURE__ */ jsxs7(
-        StyledLink,
-        {
-          as: "a",
-          ...combinedProps,
-          href: to,
-          children: [
-            leftIcon ?? null,
-            children,
-            rightIcon ?? null
-          ]
-        }
-      );
+      return /* @__PURE__ */ jsxs7(StyledLink, { ...combinedProps, children: [
+        leftIcon ?? null,
+        children,
+        rightIcon ?? null
+      ] });
     }
     return null;
   }
@@ -7191,7 +7194,7 @@ var StyledSecondaryIcon = styled6.div`
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-in);
-  ${({ $hideUntilHover }) => $hideUntilHover && css16`
+  ${({ $hideUntilHover }) => $hideUntilHover && css17`
       will-change: transform;
       opacity: 0;
       transform: translateX(-16px);
@@ -7557,7 +7560,7 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
-import styled11, { css as css17 } from "styled-components";
+import styled11, { css as css18 } from "styled-components";
 import { isNotNil as isNotNil10, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -7614,27 +7617,27 @@ var getFlexStyle = (flexMode) => {
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
-      return css17`
+      return css18`
         flex: 1 0 0;
       `;
     // default behavior, can shrink but won't grow
     case "initial":
-      return css17`
+      return css18`
         flex: 0 1 auto;
       `;
     // equal distribution of space
     case "equal":
-      return css17`
+      return css18`
         flex: 1;
       `;
     // won't grow or shrink
     case "rigid":
-      return css17`
+      return css18`
         flex: 0 0 auto;
       `;
     // can grow and shrink from content size
     case "fluid":
-      return css17`
+      return css18`
         flex: 1 1 auto;
       `;
     default:
@@ -7991,18 +7994,18 @@ Center.displayName = "Center";
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef7, useId } from "react";
-import styled20, { css as css20 } from "styled-components";
+import styled20, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled19, { css as css19 } from "styled-components";
+import styled19, { css as css20 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil12 } from "@wistia/type-guards";
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled17, { css as css18 } from "styled-components";
+import styled17, { css as css19 } from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
 import { jsx as jsx205 } from "react/jsx-runtime";
-var disabledStyle = css18`
+var disabledStyle = css19`
   color: var(--wui-color-text-disabled);
 `;
 var StyledFormControlLabelDescription = styled17.div`
@@ -8058,7 +8061,7 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { jsx as jsx207, jsxs as jsxs14 } from "react/jsx-runtime";
-var disabledStyle2 = css19`
+var disabledStyle2 = css20`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
@@ -8129,7 +8132,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx208(
     )
   }
 );
-var sizeSmall = css20`
+var sizeSmall = css21`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8140,7 +8143,7 @@ var sizeSmall = css20`
     height: 7px;
   }
 `;
-var sizeMedium = css20`
+var sizeMedium = css21`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8151,7 +8154,7 @@ var sizeMedium = css20`
     height: 9px;
   }
 `;
-var sizeLarge = css20`
+var sizeLarge = css21`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8360,46 +8363,46 @@ import { isNotNull } from "@wistia/type-guards";
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled23, { css as css21 } from "styled-components";
+import styled23, { css as css22 } from "styled-components";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 import { jsx as jsx212 } from "react/jsx-runtime";
-var heroStyle = css21`
+var heroStyle = css22`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = css21`
+var heading1TextStyle = css22`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = css21`
+var heading2TextStyle = css22`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = css21`
+var heading3TextStyle = css22`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = css21`
+var heading4TextStyle = css22`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = css21`
+var heading5TextStyle = css22`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = css21`
+var heading6TextStyle = css22`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8425,26 +8428,23 @@ var StyledHeading = styled23.div`
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $truncate }) => {
   if (isNotNil14($truncate)) {
-    return css21`
+    return css22`
         ${ellipsisStyle};
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: ${$truncate};
-        display: -webkit-box;
-        white-space: initial;
+        ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && css21`
+  ${({ $inline }) => $inline && css22`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css21`
+  ${({ $disabled }) => $disabled && css22`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css21`
+  ${({ $preventUserSelect }) => $preventUserSelect && css22`
       user-select: none;
     `}
-  ${({ $align }) => css21`
+  ${({ $align }) => css22`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8623,22 +8623,22 @@ import styled27 from "styled-components";
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled26, { css as css22 } from "styled-components";
+import styled26, { css as css23 } from "styled-components";
 import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 import { jsx as jsx215 } from "react/jsx-runtime";
-var bodyBoldStyles = css22`
+var bodyBoldStyles = css23`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css22`
+var labelBoldStyles = css23`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css22`
+var body1TextStyle = css23`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8646,7 +8646,7 @@ var body1TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css22`
+var body2TextStyle = css23`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8654,7 +8654,7 @@ var body2TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css22`
+var body3TextStyle = css23`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8662,7 +8662,7 @@ var body3TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css22`
+var body4TextStyle = css23`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8670,47 +8670,47 @@ var body4TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css22`
+var label1TextStyle = css23`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css22`
+var label2TextStyle = css23`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css22`
+var label3TextStyle = css23`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css22`
+var label4TextStyle = css23`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css22`
+var body1MonoTextStyle = css23`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css22`
+var body2MonoTextStyle = css23`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css22`
+var body3MonoTextStyle = css23`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css22`
+var body4MonoTextStyle = css23`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8770,27 +8770,26 @@ var StyledText = styled26.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
   if (isNotNil15($truncate)) {
-    return css22`
+    return css23`
         ${ellipsisStyle};
-        ${lineClampStyle};
-        -webkit-line-clamp: ${$truncate};
+        ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && css22`
+  ${({ $inline }) => $inline && css23`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css22`
+  ${({ $disabled }) => $disabled && css23`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css22`
+  ${({ $preventUserSelect }) => $preventUserSelect && css23`
       user-select: none;
     `}
-  ${({ $align }) => css22`
+  ${({ $align }) => css23`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css22`
+  ${({ as }) => as === "p" && css23`
       display: block;
       + p {
@@ -8870,16 +8869,16 @@ var DataCardTrend = ({
 };
 // src/components/Divider/Divider.tsx
-import styled28, { css as css23 } from "styled-components";
+import styled28, { css as css24 } from "styled-components";
 import { jsx as jsx217 } from "react/jsx-runtime";
-var horizontalBorderCss = css23`
+var horizontalBorderCss = css24`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = css23`
+var verticalBorderCss = css24`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
@@ -8910,7 +8909,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 // src/components/EditableHeading/EditableHeading.tsx
-import styled31, { css as css26 } from "styled-components";
+import styled31, { css as css27 } from "styled-components";
 import { useState as useState6, useRef as useRef5 } from "react";
 // src/components/Tooltip/Tooltip.tsx
@@ -9016,12 +9015,12 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef4 } from "react";
-import styled30, { css as css25 } from "styled-components";
+import styled30, { css as css26 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil16, isRecord as isRecord4 } from "@wistia/type-guards";
 // src/css/sharedStyles/inputCssVariables.ts
-import { css as css24 } from "styled-components";
-var inputCssVariables = css24`
+import { css as css25 } from "styled-components";
+var inputCssVariables = css25`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9048,7 +9047,7 @@ var inputCssVariables = css24`
 // src/components/Input/Input.tsx
 import { jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
-var inputStyles = css25`
+var inputStyles = css26`
   ${inputCssVariables}
   input,
   textarea {
@@ -9242,7 +9241,7 @@ var StyledInput = styled31(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css26`
+var editableStyles = css27`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9352,7 +9351,7 @@ var EditableHeading = ({
 };
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef6, 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 createContext3, useState as useState7, useId as useId2 } from "react";
 import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
@@ -9396,7 +9395,7 @@ var StyledForm = styled33.form`
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = createContext2({
+var FormContext = createContext3({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9508,7 +9507,7 @@ var useFormState = (action, initialData = {}) => {
         const result = await action(data, nextData);
         setData(result);
       } catch (err) {
-        setError(err);
+        setError(err instanceof Error ? err : new Error(String(err)));
       } finally {
         setIsPending(false);
       }
@@ -9526,7 +9525,7 @@ var useFormState = (action, initialData = {}) => {
 };
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext2, useRef as useRef7 } from "react";
+import { useContext as useContext3, useRef as useRef7 } from "react";
 import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
@@ -9534,7 +9533,7 @@ var ErrorItem = ({ name, error, formId }) => {
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef7(null);
-  const { formId, errors, hasSubmitted } = useContext2(FormContext);
+  const { formId, errors, hasSubmitted } = useContext3(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
@@ -9564,14 +9563,14 @@ var FormErrorSummary = ({ description }) => {
 };
 // src/components/FormField/FormField.tsx
-import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
+import { Children as Children5, cloneElement as cloneElement5, useContext as useContext4 } from "react";
 import styled36 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil17, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 // src/components/Label/Label.tsx
-import styled34, { css as css27 } from "styled-components";
+import styled34, { css as css28 } from "styled-components";
 import { jsx as jsx224 } from "react/jsx-runtime";
-var requiredStyle = css27`
+var requiredStyle = css28`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9579,7 +9578,7 @@ var requiredStyle = css27`
     content: '*';
   }
 `;
-var disabledStyle3 = css27`
+var disabledStyle3 = css28`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled34.label`
@@ -9629,7 +9628,7 @@ var Label = ({
 Label.displayName = "Label";
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo5 } from "react";
+import { createContext as createContext4, useMemo as useMemo5 } from "react";
 // src/components/FormGroup/FormGroup.tsx
 import styled35 from "styled-components";
@@ -9667,7 +9666,7 @@ FormGroup.displayName = "FormGroup";
 // src/components/FormGroup/CheckboxGroup.tsx
 import { jsx as jsx226 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext3(null);
+var CheckboxGroupContext = createContext4(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -9760,8 +9759,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = useContext3(FormContext);
-  const checkboxGroup = useContext3(CheckboxGroupContext);
+  const formState = useContext4(FormContext);
+  const checkboxGroup = useContext4(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -9826,9 +9825,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext4, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useMemo as useMemo6 } from "react";
 import { jsx as jsx228 } from "react/jsx-runtime";
-var RadioGroupContext = createContext4(null);
+var RadioGroupContext = createContext5(null);
 var RadioGroup = ({
   children,
   name,
@@ -9884,8 +9883,72 @@ var IconButton = forwardRef13(
 );
 IconButton.displayName = "IconButton";
+// src/components/InputClickToCopy/InputClickToCopy.tsx
+import styled38 from "styled-components";
+import { forwardRef as forwardRef14, useEffect as useEffect7, useState as useState9 } from "react";
+import { isFunction as isFunction3 } from "@wistia/type-guards";
+import { jsx as jsx230 } from "react/jsx-runtime";
+var StyledInput2 = styled38(Input)`
+  &:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+  &::selection {
+    background-color: transparent;
+  }
+`;
+var COPY_SUCCESS_DURATION = 2e3;
+var InputClickToCopy = forwardRef14(
+  ({ value, onCopy, ...props }, ref) => {
+    const [isCopied, setIsCopied] = useState9(false);
+    useEffect7(() => {
+      if (isCopied) {
+        const timeout = setTimeout(() => {
+          setIsCopied(false);
+        }, COPY_SUCCESS_DURATION);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+      return () => null;
+    }, [isCopied]);
+    const handleClick = (event) => {
+      event.preventDefault();
+      if (isFunction3(props.onClick)) {
+        props.onClick(event);
+      }
+      void copyToClipboard(value).then(() => {
+        setIsCopied(true);
+        if (isFunction3(onCopy)) {
+          onCopy(value);
+        }
+        return value;
+      });
+    };
+    return /* @__PURE__ */ jsx230(
+      StyledInput2,
+      {
+        "aria-label": "Click to Copy",
+        ...props,
+        ref,
+        onClick: handleClick,
+        readOnly: true,
+        rightIcon: isCopied ? /* @__PURE__ */ jsx230(
+          Icon,
+          {
+            colorScheme: "success",
+            type: "checkmark-circle"
+          }
+        ) : /* @__PURE__ */ jsx230(Icon, { type: "save-as-copy" }),
+        value
+      }
+    );
+  }
+);
+InputClickToCopy.displayName = "InputClickToCopy";
 // src/components/Menu/Menu.tsx
-import styled38, { css as css28, keyframes as keyframes2 } from "styled-components";
+import styled39, { css as css29, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9896,12 +9959,12 @@ import { isNotNil as isNotNil18, isNotUndefined as isNotUndefined10 } from "@wis
 import { useMemo as useMemo7 } from "react";
 // src/components/Menu/MenuContext.tsx
-import { createContext as createContext5, useContext as useContext4 } from "react";
-var MenuContext = createContext5({ compact: false });
-var useMenuContext = () => useContext4(MenuContext);
+import { createContext as createContext6, useContext as useContext5 } from "react";
+var MenuContext = createContext6({ compact: false });
+var useMenuContext = () => useContext5(MenuContext);
 // src/components/Menu/Menu.tsx
-import { jsx as jsx230, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs25 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -9922,7 +9985,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css28`
+var menuItemCss = css29`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9933,7 +9996,7 @@ var menuItemCss = css28`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css28`
+var compactMenuItemCss = css29`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9944,7 +10007,7 @@ var compactMenuItemCss = css28`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css28`
+var menuContentCss = css29`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -9986,7 +10049,7 @@ var menuContentCss = css28`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled38(DropdownMenuContent)`
+var MenuContent = styled39(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -10012,24 +10075,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx230(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx231(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs25(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx230(DropdownMenuTrigger, { asChild: true, children: isNotUndefined10(trigger) ? trigger : /* @__PURE__ */ jsx230(
+        /* @__PURE__ */ jsx231(DropdownMenuTrigger, { asChild: true, children: isNotUndefined10(trigger) ? trigger : /* @__PURE__ */ jsx231(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx230(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx231(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx230(DropdownMenuPortal, { children: /* @__PURE__ */ jsx230(
+        /* @__PURE__ */ jsx231(DropdownMenuPortal, { children: /* @__PURE__ */ jsx231(
           MenuContent,
           {
             ...props,
@@ -10049,19 +10112,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 // src/components/Menu/MenuLabel.tsx
-import styled39 from "styled-components";
+import styled40 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx231 } from "react/jsx-runtime";
-var StyledMenuLabel = styled39(DropdownMenuLabel)`
+import { jsx as jsx232 } from "react/jsx-runtime";
+var StyledMenuLabel = styled40(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx231(
+  return /* @__PURE__ */ jsx232(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx231(
+      children: /* @__PURE__ */ jsx232(
         Heading,
         {
           renderAs: "span",
@@ -10076,8 +10139,8 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 // src/components/Menu/SubMenu.tsx
-import { useState as useState9 } from "react";
-import styled42 from "styled-components";
+import { useState as useState10 } from "react";
+import styled43 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -10089,11 +10152,11 @@ import {
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 // src/components/Menu/MenuItemButton.tsx
-import { forwardRef as forwardRef14 } from "react";
-import styled40 from "styled-components";
+import { forwardRef as forwardRef15 } from "react";
+import styled41 from "styled-components";
 import { isNotNil as isNotNil19, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
-import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
-var StyledButton3 = styled40(Button)`
+import { jsx as jsx233, jsxs as jsxs26 } from "react/jsx-runtime";
+var StyledButton3 = styled41(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   display: flex;
@@ -10132,7 +10195,7 @@ var StyledButton3 = styled40(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled40.div`
+var StyledLeftIconContainer = styled41.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
@@ -10143,7 +10206,7 @@ var StyledLeftIconContainer = styled40.div`
     }
   }
 `;
-var StyledRightIconContainer = styled40.div`
+var StyledRightIconContainer = styled41.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
@@ -10154,19 +10217,19 @@ var StyledRightIconContainer = styled40.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled40.div`
+var StyledLabelAndDescriptionContainer = styled41.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled40.div`
+var StyledBadgeContainer = styled41.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = forwardRef15(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if (isNotUndefined11(colorScheme)) {
@@ -10175,7 +10238,7 @@ var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx232(
+    badge = /* @__PURE__ */ jsx233(
       Icon,
       {
         colorScheme: "purple",
@@ -10197,10 +10260,10 @@ var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx232(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx232(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil19(badge) || isNotNil19(command) ? /* @__PURE__ */ jsx232(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx232(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx233(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx233(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil19(badge) || isNotNil19(command) ? /* @__PURE__ */ jsx233(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx233(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -10208,33 +10271,33 @@ var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled41 from "styled-components";
-import { jsx as jsx233 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled41.span``;
-var StyledMenuItemDescription = styled41(Text).attrs({
+import styled42 from "styled-components";
+import { jsx as jsx234 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled42.span``;
+var StyledMenuItemDescription = styled42(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx233(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx234(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx233(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx234(StyledMenuItemDescription, { children });
 };
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx234, jsxs as jsxs27 } from "react/jsx-runtime";
-var SubMenuContent = styled42(DropdownMenuSubContent)`
+import { jsx as jsx235, jsxs as jsxs27 } from "react/jsx-runtime";
+var SubMenuContent = styled43(DropdownMenuSubContent)`
   ${menuContentCss}
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled42.div`
+var StyledMobileSubMenuItems = styled43.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled42(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled43(DropdownMenuSubTrigger)`
   outline: none;
   &[data-state='open'],
@@ -10245,12 +10308,12 @@ var StyledSubTrigger = styled42(DropdownMenuSubTrigger)`
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx234(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx234(
+  return /* @__PURE__ */ jsx235(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx235(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ jsx234(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx235(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -10262,14 +10325,14 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState9(false);
+  const [isExpanded, setIsExpanded] = useState10(false);
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs27(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs27(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx234(MenuItemLabel, { children: label }),
-      isNotNil20(description) ? /* @__PURE__ */ jsx234(MenuItemDescription, { children: description }) : null
+      /* @__PURE__ */ jsx235(MenuItemLabel, { children: label }),
+      isNotNil20(description) ? /* @__PURE__ */ jsx235(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx234(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx234(SubMenuContent, { $compact: compact, children }) })
+    /* @__PURE__ */ jsx235(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx235(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs27(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs27(
       SubMenuTrigger,
@@ -10280,28 +10343,28 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx234(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx234(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx235(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx235(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx234(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx235(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx235 } from "react/jsx-runtime";
-var MenuItem = forwardRef15(
+import { jsx as jsx236 } from "react/jsx-runtime";
+var MenuItem = forwardRef16(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx235(
+    return /* @__PURE__ */ jsx236(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx235(
+        children: /* @__PURE__ */ jsx236(
           MenuItemButton,
           {
             ...props,
@@ -10319,10 +10382,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx236, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx237, jsxs as jsxs28 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs28(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx236(MenuLabel, { children: label }),
+    /* @__PURE__ */ jsx237(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -10333,11 +10396,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx237 } from "react/jsx-runtime";
+import { jsx as jsx238 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx237(
+  indicator = /* @__PURE__ */ jsx238(
     Icon,
     {
       size: "sm",
@@ -10347,17 +10410,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsx238(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx237(
+      children: /* @__PURE__ */ jsx238(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx237(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx238(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -10371,7 +10434,7 @@ import {
   DropdownMenuItemIndicator as DropdownMenuItemIndicator2
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil21 } from "@wistia/type-guards";
-import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs29 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs29(
     "svg",
@@ -10383,14 +10446,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx238(
+        /* @__PURE__ */ jsx239(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx238(
+        /* @__PURE__ */ jsx239(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -10409,14 +10472,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx238(
+        /* @__PURE__ */ jsx239(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx238(
+        /* @__PURE__ */ jsx239(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -10433,19 +10496,19 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx239(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx238(
+      children: /* @__PURE__ */ jsx239(
         MenuItemButton,
         {
           ...props,
-          leftIcon: isNotNil21(props.icon) ? props.icon : /* @__PURE__ */ jsx238(CheckboxIndicator, { checked }),
-          rightIcon: isNotNil21(props.icon) ? /* @__PURE__ */ jsx238(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx238(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: isNotNil21(props.icon) ? props.icon : /* @__PURE__ */ jsx239(CheckboxIndicator, { checked }),
+          rightIcon: isNotNil21(props.icon) ? /* @__PURE__ */ jsx239(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx239(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -10454,37 +10517,37 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 // src/components/Modal/Modal.tsx
-import { forwardRef as forwardRef18 } from "react";
-import styled47 from "styled-components";
+import { forwardRef as forwardRef19 } from "react";
+import styled48 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 // src/components/Modal/ModalHeader.tsx
-import styled44 from "styled-components";
+import styled45 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 // src/components/Modal/ModalCloseButton.tsx
-import styled43 from "styled-components";
+import styled44 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx239 } from "react/jsx-runtime";
-var CloseButton = styled43(DialogClose)`
+import { jsx as jsx240 } from "react/jsx-runtime";
+var CloseButton = styled44(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx239(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsx240(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx240(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx239(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx240(Icon, { type: "close" })
     }
   ) });
 };
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx240, jsxs as jsxs30 } from "react/jsx-runtime";
-var Header = styled44.header`
+import { jsx as jsx241, jsxs as jsxs30 } from "react/jsx-runtime";
+var Header = styled45.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -10495,7 +10558,7 @@ var Header = styled44.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = styled44(DialogTitle)`
+var Title = styled45(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -10506,27 +10569,27 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx240(ScreenReaderOnly, { children: /* @__PURE__ */ jsx240(Title, { children: title }) }) : /* @__PURE__ */ jsx240(Title, { children: title });
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx241(ScreenReaderOnly, { children: /* @__PURE__ */ jsx241(Title, { children: title }) }) : /* @__PURE__ */ jsx241(Title, { children: title });
   return /* @__PURE__ */ jsxs30(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
-    hideCloseButton ? null : /* @__PURE__ */ jsx240(ModalCloseButton, {})
+    hideCloseButton ? null : /* @__PURE__ */ jsx241(ModalCloseButton, {})
   ] });
 };
 // src/components/Modal/ModalContent.tsx
-import { forwardRef as forwardRef16 } from "react";
-import styled45 from "styled-components";
+import { forwardRef as forwardRef17 } from "react";
+import styled46 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef9, useEffect as useEffect7 } from "react";
+import { useRef as useRef9, useEffect as useEffect8 } from "react";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef9(null);
-  useEffect7(() => {
+  useEffect8(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     return () => {
       if (isNotNil22(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -10538,8 +10601,8 @@ var useFocusRestore = () => {
 };
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx241 } from "react/jsx-runtime";
-var StyledModalContent = styled45(DialogContent)`
+import { jsx as jsx242 } from "react/jsx-runtime";
+var StyledModalContent = styled46(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -10580,10 +10643,10 @@ var StyledModalContent = styled45(DialogContent)`
     }
   }
 `;
-var ModalContent = forwardRef16(
+var ModalContent = forwardRef17(
   ({ fullHeight, width, children, ...props }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx241(
+    return /* @__PURE__ */ jsx242(
       StyledModalContent,
       {
         ref,
@@ -10598,9 +10661,9 @@ var ModalContent = forwardRef16(
 );
 // src/private/components/Backdrop/Backdrop.tsx
-import { forwardRef as forwardRef17 } from "react";
-import styled46 from "styled-components";
-import { jsx as jsx242 } from "react/jsx-runtime";
+import { forwardRef as forwardRef18 } from "react";
+import styled47 from "styled-components";
+import { jsx as jsx243 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -10613,7 +10676,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled46.div`
+var BackdropComponent = styled47.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10636,8 +10699,8 @@ var BackdropComponent = styled46.div`
     }
   }
 `;
-var Backdrop = forwardRef17(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx242(
+var Backdrop = forwardRef18(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx243(
     BackdropComponent,
     {
       ref,
@@ -10651,14 +10714,14 @@ var Backdrop = forwardRef17(
 Backdrop.displayName = "Backdrop";
 // src/components/Modal/Modal.tsx
-import { jsx as jsx243, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx244, jsxs as jsxs31 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled47.div`
+var ModalBody = styled48.div`
   flex-direction: column;
   display: flex;
   order: 2;
 `;
-var Modal = forwardRef18(
+var Modal = forwardRef19(
   ({
     children,
     fullHeight = false,
@@ -10671,7 +10734,7 @@ var Modal = forwardRef18(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx243(
+    return /* @__PURE__ */ jsx244(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -10681,7 +10744,7 @@ var Modal = forwardRef18(
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs31(DialogPortal, { children: [
-          /* @__PURE__ */ jsx243(Backdrop, {}),
+          /* @__PURE__ */ jsx244(Backdrop, {}),
           /* @__PURE__ */ jsxs31(
             ModalContent,
             {
@@ -10698,8 +10761,8 @@ var Modal = forwardRef18(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx243(ModalBody, { children }),
-                /* @__PURE__ */ jsx243(
+                /* @__PURE__ */ jsx244(ModalBody, { children }),
+                /* @__PURE__ */ jsx244(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -10719,7 +10782,7 @@ Modal.displayName = "Modal";
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled48, { css as css29 } from "styled-components";
+import styled49, { css as css30 } from "styled-components";
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil24 } from "@wistia/type-guards";
@@ -10728,10 +10791,10 @@ var getControlProps = (isOpen, onOpenChange) => {
 };
 // src/components/Popover/Popover.tsx
-import { jsx as jsx244, jsxs as jsxs32 } from "react/jsx-runtime";
-var StyledContent2 = styled48(Content2)`
+import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
+var StyledContent2 = styled49(Content2)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css29`
+  ${({ $unstyled }) => !$unstyled && css30`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -10765,8 +10828,8 @@ var Popover = ({
     "--wui-popover-max-height": maxHeight
   };
   return /* @__PURE__ */ jsxs32(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx244(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsx245(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx245(Portal, { children: /* @__PURE__ */ jsxs32(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -10775,16 +10838,16 @@ var Popover = ({
         $unstyled: unstyled,
         style,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx244(Close, { asChild: true, children: /* @__PURE__ */ jsx244(
+          !hideCloseButton && /* @__PURE__ */ jsx245(Close, { asChild: true, children: /* @__PURE__ */ jsx245(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx244(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx245(Icon, { type: "close" })
             }
           ) }),
-          /* @__PURE__ */ jsx244("div", { children })
+          /* @__PURE__ */ jsx245("div", { children })
         ]
       }
     ) })
@@ -10793,11 +10856,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
-import styled49 from "styled-components";
+import styled50 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
-import { jsx as jsx245, jsxs as jsxs33 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled49.div`
+import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled50.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10813,7 +10876,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled49.div`
+var ProgressBarLabel = styled50.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10821,7 +10884,7 @@ var ProgressBarLabel = styled49.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled49(ProgressIndicator)`
+var StyledProgressIndicator = styled50(ProgressIndicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10830,7 +10893,7 @@ var StyledProgressIndicator = styled49(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled49(ProgressRoot)`
+var StyledProgressBar = styled50(ProgressRoot)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10850,14 +10913,14 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs33(ProgressBarWrapper, { children: [
-    isNotNil25(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx245(
+    isNotNil25(labelLeft) ? /* @__PURE__ */ jsx246(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx246(
       StyledProgressBar,
       {
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx245(
+        children: /* @__PURE__ */ jsx246(
           StyledProgressIndicator,
           {
             $max: max,
@@ -10866,17 +10929,17 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil25(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil25(labelRight) ? /* @__PURE__ */ jsx246(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
-import { forwardRef as forwardRef19, useId as useId3 } from "react";
-import styled50, { css as css30 } from "styled-components";
+import { forwardRef as forwardRef20, useId as useId3 } from "react";
+import styled51, { css as css31 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx246, jsxs as jsxs34 } from "react/jsx-runtime";
-var RadioIcon = () => /* @__PURE__ */ jsx246(
+import { jsx as jsx247, jsxs as jsxs34 } from "react/jsx-runtime";
+var RadioIcon = () => /* @__PURE__ */ jsx247(
   "svg",
   {
     fill: "inherit",
@@ -10884,7 +10947,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx246(
     viewBox: "0 0 1 1",
     width: "1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx246(
+    children: /* @__PURE__ */ jsx247(
       "circle",
       {
         cx: "0.5",
@@ -10895,7 +10958,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx246(
     )
   }
 );
-var sizeSmall2 = css30`
+var sizeSmall2 = css31`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10906,7 +10969,7 @@ var sizeSmall2 = css30`
     height: 7px;
   }
 `;
-var sizeMedium2 = css30`
+var sizeMedium2 = css31`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10917,7 +10980,7 @@ var sizeMedium2 = css30`
     height: 8px;
   }
 `;
-var sizeLarge2 = css30`
+var sizeLarge2 = css31`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10933,14 +10996,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled50.div`
+var StyledRadioWrapper = styled51.div`
   display: flex;
   margin: 0;
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled50.div`
+var StyledRadioInput = styled51.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10962,7 +11025,7 @@ var StyledRadioInput = styled50.div`
     }
   }
 `;
-var StyledHiddenRadioInput = styled50.input`
+var StyledHiddenRadioInput = styled51.input`
   ${visuallyHiddenStyle}
   /* toggles display of faux-input border-color */
@@ -10975,7 +11038,7 @@ var StyledHiddenRadioInput = styled50.input`
     display: block;
   }
 `;
-var Radio = forwardRef19(
+var Radio = forwardRef20(
   ({
     checked,
     disabled = false,
@@ -10998,7 +11061,7 @@ var Radio = forwardRef19(
         $disabled: disabled,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx246(
+          /* @__PURE__ */ jsx247(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -11013,16 +11076,16 @@ var Radio = forwardRef19(
               value
             }
           ),
-          /* @__PURE__ */ jsx246(
+          /* @__PURE__ */ jsx247(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx246(
+              controlSlot: /* @__PURE__ */ jsx247(
                 StyledRadioInput,
                 {
                   $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx246(RadioIcon, {})
+                  children: /* @__PURE__ */ jsx247(RadioIcon, {})
                 }
               ),
               description,
@@ -11040,19 +11103,19 @@ var Radio = forwardRef19(
 Radio.displayName = "Radio";
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef20 } from "react";
-import styled52, { css as css31 } from "styled-components";
+import { forwardRef as forwardRef21 } from "react";
+import styled53, { css as css32 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState10 } from "react";
-import { jsx as jsx247 } from "react/jsx-runtime";
-var SelectedItemStyleContext = createContext6(null);
+import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState11 } from "react";
+import { jsx as jsx248 } from "react/jsx-runtime";
+var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState10(null);
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState11(null);
   const selectedItemIndicatorStyle = useMemo8(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
@@ -11070,10 +11133,10 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx247(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx248(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
-  const context = useContext5(SelectedItemStyleContext);
+  const context = useContext6(SelectedItemStyleContext);
   if (context === null) {
     throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
@@ -11081,14 +11144,14 @@ var useSelectedItemStyle = () => {
 };
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import styled51 from "styled-components";
+import styled52 from "styled-components";
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-import { createContext as createContext7, useContext as useContext6 } from "react";
-var SegmentedControlValueContext = createContext7(null);
+import { createContext as createContext8, useContext as useContext7 } from "react";
+var SegmentedControlValueContext = createContext8(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = useContext6(SegmentedControlValueContext);
+  const context = useContext7(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -11096,8 +11159,8 @@ var useSegmentedControlValue = () => {
 };
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx248 } from "react/jsx-runtime";
-var SelectedItemIndicatorDiv = styled51.div`
+import { jsx as jsx249 } from "react/jsx-runtime";
+var SelectedItemIndicatorDiv = styled52.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -11115,12 +11178,12 @@ var SelectedItemIndicator = () => {
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx248(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
+  return /* @__PURE__ */ jsx249(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
 };
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx249, jsxs as jsxs35 } from "react/jsx-runtime";
-var segmentedControlStyles = css31`
+import { jsx as jsx250, jsxs as jsxs35 } from "react/jsx-runtime";
+var segmentedControlStyles = css32`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11131,10 +11194,10 @@ var segmentedControlStyles = css31`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled52(ToggleGroupRoot)`
+var StyledSegmentedControl = styled53(ToggleGroupRoot)`
   ${segmentedControlStyles}
 `;
-var SegmentedControl = forwardRef20(
+var SegmentedControl = forwardRef21(
   ({
     children,
     disabled = false,
@@ -11146,7 +11209,7 @@ var SegmentedControl = forwardRef20(
     if (isNil14(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx249(
+    return /* @__PURE__ */ jsx250(
       StyledSegmentedControl,
       {
         ref,
@@ -11158,8 +11221,8 @@ var SegmentedControl = forwardRef20(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemStyleProvider, { children: [
-          /* @__PURE__ */ jsx249(SelectedItemIndicator, {}),
+        children: /* @__PURE__ */ jsx250(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemStyleProvider, { children: [
+          /* @__PURE__ */ jsx250(SelectedItemIndicator, {}),
           children
         ] }) })
       }
@@ -11169,12 +11232,12 @@ var SegmentedControl = forwardRef20(
 SegmentedControl.displayName = "SegmentedControl";
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect8, useRef as useRef10 } from "react";
-import styled53, { css as css32 } from "styled-components";
+import { forwardRef as forwardRef22, useEffect as useEffect9, useRef as useRef10 } from "react";
+import styled54, { css as css33 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { jsxs as jsxs36 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css32`
+var segmentedControlItemStyles = css33`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11234,10 +11297,10 @@ var segmentedControlItemStyles = css32`
     }
   }
 `;
-var StyledSegmentedControlItem = styled53(ToggleGroupItem)`
+var StyledSegmentedControlItem = styled54(ToggleGroupItem)`
   ${segmentedControlItemStyles}
 `;
-var SegmentedControlItem = forwardRef21(
+var SegmentedControlItem = forwardRef22(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
@@ -11250,7 +11313,7 @@ var SegmentedControlItem = forwardRef21(
         event.preventDefault();
       }
     };
-    useEffect8(() => {
+    useEffect9(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11305,10 +11368,10 @@ import {
   Value,
   ScrollDownButton
 } from "@radix-ui/react-select";
-import { forwardRef as forwardRef22 } from "react";
-import styled54 from "styled-components";
-import { jsx as jsx250, jsxs as jsxs37 } from "react/jsx-runtime";
-var StyledTrigger = styled54(Trigger3)`
+import { forwardRef as forwardRef23 } from "react";
+import styled55 from "styled-components";
+import { jsx as jsx251, jsxs as jsxs37 } from "react/jsx-runtime";
+var StyledTrigger = styled55(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCssVariables};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -11352,7 +11415,7 @@ var StyledTrigger = styled54(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled54(Content3)`
+var StyledContent3 = styled55(Content3)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -11370,7 +11433,7 @@ var StyledContent3 = styled54(Content3)`
   max-height: var(--radix-select-content-available-height);
   z-index: var(--wui-zindex-select);
 `;
-var Select = forwardRef22(
+var Select = forwardRef23(
   ({
     colorScheme = "inherit",
     children,
@@ -11394,8 +11457,8 @@ var Select = forwardRef22(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ jsx250(Value, { placeholder }),
-                /* @__PURE__ */ jsx250(
+                /* @__PURE__ */ jsx251(Value, { placeholder }),
+                /* @__PURE__ */ jsx251(
                   Icon,
                   {
                     size: "md",
@@ -11405,10 +11468,10 @@ var Select = forwardRef22(
               ]
             }
           ),
-          /* @__PURE__ */ jsx250(Portal2, { children: /* @__PURE__ */ jsxs37(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ jsx250(ScrollUpButton, { children: /* @__PURE__ */ jsx250(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ jsx250(Viewport, { children }),
-            /* @__PURE__ */ jsx250(ScrollDownButton, { children: /* @__PURE__ */ jsx250(Icon, { type: "caret-down" }) })
+          /* @__PURE__ */ jsx251(Portal2, { children: /* @__PURE__ */ jsxs37(StyledContent3, { position: "popper", children: [
+            /* @__PURE__ */ jsx251(ScrollUpButton, { children: /* @__PURE__ */ jsx251(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ jsx251(Viewport, { children }),
+            /* @__PURE__ */ jsx251(ScrollDownButton, { children: /* @__PURE__ */ jsx251(Icon, { type: "caret-down" }) })
           ] }) })
         ]
       }
@@ -11419,11 +11482,11 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
-import { forwardRef as forwardRef23 } from "react";
-import styled55 from "styled-components";
+import { forwardRef as forwardRef24 } from "react";
+import styled56 from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsx as jsx251, jsxs as jsxs38 } from "react/jsx-runtime";
-var StyledItem = styled55(Item)`
+import { jsx as jsx252, jsxs as jsxs38 } from "react/jsx-runtime";
+var StyledItem = styled56(Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -11447,10 +11510,10 @@ var StyledItem = styled55(Item)`
     background-color: transparent;
   }
 `;
-var StyledIconContainer = styled55.span`
+var StyledIconContainer = styled56.span`
   width: 12px;
 `;
-var SelectOption = forwardRef23(
+var SelectOption = forwardRef24(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsxs38(
       StyledItem,
@@ -11458,7 +11521,7 @@ var SelectOption = forwardRef23(
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx251(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ jsx251(ItemIndicator, { children: /* @__PURE__ */ jsx251(
+          /* @__PURE__ */ jsx252(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ jsx252(ItemIndicator, { children: /* @__PURE__ */ jsx252(
             Icon,
             {
               size: "sm",
@@ -11467,8 +11530,8 @@ var SelectOption = forwardRef23(
           ) }) }),
           isNotNil27(selectedDisplayValue) ? /* @__PURE__ */ jsxs38("div", { children: [
             children,
-            /* @__PURE__ */ jsx251("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx251(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx251(ItemText, { children })
+            /* @__PURE__ */ jsx252("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx252(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx252(ItemText, { children })
         ]
       }
     );
@@ -11478,14 +11541,14 @@ SelectOption.displayName = "Option";
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label2 } from "@radix-ui/react-select";
-import styled56 from "styled-components";
-import { jsx as jsx252, jsxs as jsxs39 } from "react/jsx-runtime";
-var StyledLabel4 = styled56(Label2)`
+import styled57 from "styled-components";
+import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
+var StyledLabel4 = styled57(Label2)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs39(Group, { ...props, children: [
-    /* @__PURE__ */ jsx252(StyledLabel4, { children: /* @__PURE__ */ jsx252(
+    /* @__PURE__ */ jsx253(StyledLabel4, { children: /* @__PURE__ */ jsx253(
       Text,
       {
         prominence: "secondary",
@@ -11498,11 +11561,11 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef24, useId as useId4 } from "react";
-import styled57, { css as css33 } from "styled-components";
+import { forwardRef as forwardRef25, useId as useId4 } from "react";
+import styled58, { css as css34 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx253, jsxs as jsxs40 } from "react/jsx-runtime";
-var sizeSmall3 = css33`
+import { jsx as jsx254, jsxs as jsxs40 } from "react/jsx-runtime";
+var sizeSmall3 = css34`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
@@ -11517,7 +11580,7 @@ var sizeSmall3 = css33`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = css33`
+var sizeMedium3 = css34`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
@@ -11532,7 +11595,7 @@ var sizeMedium3 = css33`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = css33`
+var sizeLarge3 = css34`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
@@ -11552,14 +11615,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = styled57.div`
+var StyledSwitchWrapper = styled58.div`
   display: flex;
   margin: 0;
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = styled57.div`
+var StyledSwitchInput = styled58.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -11587,7 +11650,7 @@ var StyledSwitchInput = styled57.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = styled57.input`
+var StyledHiddenSwitchInput = styled58.input`
   ${visuallyHiddenStyle}
   /* toggles display of faux-input background-color and toggle position */
@@ -11603,7 +11666,7 @@ var StyledHiddenSwitchInput = styled57.input`
     }
   }
 `;
-var Switch = forwardRef24(
+var Switch = forwardRef25(
   ({
     checked,
     disabled = false,
@@ -11621,7 +11684,7 @@ var Switch = forwardRef24(
     const generatedId = useId4();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ jsxs40(StyledSwitchWrapper, { $disabled: disabled, children: [
-      /* @__PURE__ */ jsx253(
+      /* @__PURE__ */ jsx254(
         StyledHiddenSwitchInput,
         {
           ...props,
@@ -11636,10 +11699,10 @@ var Switch = forwardRef24(
           value
         }
       ),
-      /* @__PURE__ */ jsx253(
+      /* @__PURE__ */ jsx254(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx253(
+          controlSlot: /* @__PURE__ */ jsx254(
             StyledSwitchInput,
             {
               $disabled: disabled,
@@ -11661,19 +11724,19 @@ var Switch = forwardRef24(
 Switch.displayName = "Switch";
 // src/components/Table/Table.tsx
-import styled58, { css as css34 } from "styled-components";
-import { jsx as jsx254 } from "react/jsx-runtime";
-var StyledTable = styled58.table`
+import styled59, { css as css35 } from "styled-components";
+import { jsx as jsx255 } from "react/jsx-runtime";
+var StyledTable = styled59.table`
   width: 100%;
   border-collapse: collapse;
-  ${({ $striped }) => $striped && css34`
+  ${({ $striped }) => $striped && css35`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
-  ${({ $divided }) => $divided && css34`
+  ${({ $divided }) => $divided && css35`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11685,7 +11748,7 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx254(
+  return /* @__PURE__ */ jsx255(
     StyledTable,
     {
       $divided: divided,
@@ -11697,88 +11760,88 @@ var Table = ({
 };
 // src/components/Table/TableBody.tsx
-import styled59 from "styled-components";
+import styled60 from "styled-components";
 // src/components/Table/TableSectionContext.ts
-import { createContext as createContext8 } from "react";
-var TableSectionContext = createContext8(null);
+import { createContext as createContext9 } from "react";
+var TableSectionContext = createContext9(null);
 // src/components/Table/TableBody.tsx
-import { jsx as jsx255 } from "react/jsx-runtime";
-var StyledTbody = styled59.tbody``;
+import { jsx as jsx256 } from "react/jsx-runtime";
+var StyledTbody = styled60.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx255(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx255(StyledTbody, { ...props, children }) });
+  return /* @__PURE__ */ jsx256(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx256(StyledTbody, { ...props, children }) });
 };
 // src/components/Table/TableCell.tsx
-import { useContext as useContext7 } from "react";
-import styled60, { css as css35 } from "styled-components";
-import { jsx as jsx256 } from "react/jsx-runtime";
-var sharedStyles = css35`
+import { useContext as useContext8 } from "react";
+import styled61, { css as css36 } from "styled-components";
+import { jsx as jsx257 } from "react/jsx-runtime";
+var sharedStyles = css36`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled60.th`
+var StyledTh = styled61.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = styled60.td`
+var StyledTd = styled61.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = useContext7(TableSectionContext);
+  const section = useContext8(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx256(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx257(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx256(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx257(StyledTd, { ...props, children });
 };
 // src/components/Table/TableFooter.tsx
-import styled61 from "styled-components";
-import { jsx as jsx257 } from "react/jsx-runtime";
-var StyledTfoot = styled61.tfoot``;
+import styled62 from "styled-components";
+import { jsx as jsx258 } from "react/jsx-runtime";
+var StyledTfoot = styled62.tfoot``;
 var TableFooter = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx257(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx257(StyledTfoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx258(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx258(StyledTfoot, { ...props, children }) });
 };
 // src/components/Table/TableHead.tsx
-import styled62 from "styled-components";
-import { jsx as jsx258 } from "react/jsx-runtime";
-var StyledThead = styled62.thead``;
+import styled63 from "styled-components";
+import { jsx as jsx259 } from "react/jsx-runtime";
+var StyledThead = styled63.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx258(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx258(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx259(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx259(StyledThead, { ...props, children }) });
 };
 // src/components/Table/TableRow.tsx
-import styled63 from "styled-components";
-import { jsx as jsx259 } from "react/jsx-runtime";
-var StyledTr = styled63.tr``;
+import styled64 from "styled-components";
+import { jsx as jsx260 } from "react/jsx-runtime";
+var StyledTr = styled64.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx259(StyledTr, { ...props, children });
+  return /* @__PURE__ */ jsx260(StyledTr, { ...props, children });
 };
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef26, useState as useState11 } from "react";
+import { forwardRef as forwardRef27, useState as useState12 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil29, isNil as isNil15 } from "@wistia/type-guards";
-import styled68 from "styled-components";
+import styled69 from "styled-components";
 // src/components/Tabs/TabPanel.tsx
-import styled64 from "styled-components";
+import styled65 from "styled-components";
 import { Content as TabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx260 } from "react/jsx-runtime";
-var StyledTabPanel = styled64(TabsContent)`
+import { jsx as jsx261 } from "react/jsx-runtime";
+var StyledTabPanel = styled65(TabsContent)`
   display: flex;
   flex-direction: column;
 `;
 var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ jsx260(
+  return /* @__PURE__ */ jsx261(
     StyledTabPanel,
     {
       value,
@@ -11790,10 +11853,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 // src/components/Tabs/TabList.tsx
-import styled65 from "styled-components";
+import styled66 from "styled-components";
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { jsx as jsx261 } from "react/jsx-runtime";
-var StyledTabList = styled65(RadixTabList)`
+import { jsx as jsx262 } from "react/jsx-runtime";
+var StyledTabList = styled66(RadixTabList)`
   ${segmentedControlStyles}
   margin-bottom: var(--wui-space-04);
@@ -11806,7 +11869,7 @@ var TabList = ({
   ariaLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx262(
     StyledTabList,
     {
       $fullWidth: fullWidth,
@@ -11819,17 +11882,17 @@ var TabList = ({
 TabList.displayName = "TabList";
 // src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect9, useRef as useRef11 } from "react";
-import styled66 from "styled-components";
+import { forwardRef as forwardRef26, useEffect as useEffect10, useRef as useRef11 } from "react";
+import styled67 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil28 } from "@wistia/type-guards";
 // src/components/Tabs/useTabsValue.tsx
-import { createContext as createContext9, useContext as useContext8 } from "react";
-var TabsValueContext = createContext9(null);
+import { createContext as createContext10, useContext as useContext9 } from "react";
+var TabsValueContext = createContext10(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = useContext8(TabsValueContext);
+  const context = useContext9(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }
@@ -11838,20 +11901,20 @@ var useTabsValue = () => {
 // src/components/Tabs/TabItem.tsx
 import { jsxs as jsxs41 } from "react/jsx-runtime";
-var StyledTabItem = styled66(RadixTab)`
+var StyledTabItem = styled67(RadixTab)`
   ${segmentedControlItemStyles}
   &:focus-visible {
     outline: none;
   }
 `;
-var TabItem = forwardRef25(
+var TabItem = forwardRef26(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef11(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect9(() => {
+    useEffect10(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11917,9 +11980,9 @@ var extractTabItems = (children) => {
 };
 // src/components/Tabs/SelectedItemIndicator.tsx
-import styled67 from "styled-components";
-import { jsx as jsx262 } from "react/jsx-runtime";
-var TabsSelectedItemIndicatorDiv = styled67(SelectedItemIndicatorDiv)`
+import styled68 from "styled-components";
+import { jsx as jsx263 } from "react/jsx-runtime";
+var TabsSelectedItemIndicatorDiv = styled68(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11930,28 +11993,28 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx262(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
+  return /* @__PURE__ */ jsx263(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
 };
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx263, jsxs as jsxs42 } from "react/jsx-runtime";
-var TabsContainer = styled68.div`
+import { jsx as jsx264, jsxs as jsxs42 } from "react/jsx-runtime";
+var TabsContainer = styled69.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = styled68.div`
+var StickyTabContent = styled69.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = styled68(TabsRoot)`
+var StyledTabsRoot = styled69(TabsRoot)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
 `;
-var Tabs = forwardRef26(
+var Tabs = forwardRef27(
   ({
     children,
     fullWidth = true,
@@ -11963,13 +12026,13 @@ var Tabs = forwardRef26(
     ...props
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = useState11(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = useState12(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
     const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ jsx263(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx263(
+    return /* @__PURE__ */ jsx264(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx264(
       StyledTabsRoot,
       {
         ref,
@@ -11977,14 +12040,14 @@ var Tabs = forwardRef26(
         activationMode: "automatic",
         ...props,
         ...modeProps,
-        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx264(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemStyleProvider, { children: [
           /* @__PURE__ */ jsxs42(
             TabList,
             {
               ariaLabel,
               fullWidth,
               children: [
-                /* @__PURE__ */ jsx263(SelectedItemIndicator2, {}),
+                /* @__PURE__ */ jsx264(SelectedItemIndicator2, {}),
                 tabItems.map((tab) => {
                   const {
                     value,
@@ -11994,7 +12057,7 @@ var Tabs = forwardRef26(
                     "aria-label": ariaLabelForTab
                   } = tab.props;
                   if (isNil15(icon)) {
-                    return /* @__PURE__ */ jsx263(
+                    return /* @__PURE__ */ jsx264(
                       TabItem,
                       {
                         disabled,
@@ -12005,7 +12068,7 @@ var Tabs = forwardRef26(
                     );
                   }
                   if (isNotNil29(label)) {
-                    return /* @__PURE__ */ jsx263(
+                    return /* @__PURE__ */ jsx264(
                       TabItem,
                       {
                         disabled,
@@ -12017,7 +12080,7 @@ var Tabs = forwardRef26(
                     );
                   }
                   if (isNotNil29(ariaLabelForTab)) {
-                    return /* @__PURE__ */ jsx263(
+                    return /* @__PURE__ */ jsx264(
                       TabItem,
                       {
                         "aria-label": ariaLabelForTab,
@@ -12033,7 +12096,7 @@ var Tabs = forwardRef26(
               ]
             }
           ),
-          /* @__PURE__ */ jsx263(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx263(
+          /* @__PURE__ */ jsx264(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx264(
             TabPanel,
             {
               value: tab.props.value,
@@ -12049,19 +12112,19 @@ var Tabs = forwardRef26(
 Tabs.displayName = "Tabs";
 // src/components/Tabs/Tab.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx264 } from "react/jsx-runtime";
-var Tab = forwardRef27(({ children }, ref) => {
-  return /* @__PURE__ */ jsx264("div", { ref, children });
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx265 } from "react/jsx-runtime";
+var Tab = forwardRef28(({ children }, ref) => {
+  return /* @__PURE__ */ jsx265("div", { ref, children });
 });
 Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef28 } from "react";
-import styled69 from "styled-components";
+import { forwardRef as forwardRef29 } from "react";
+import styled70 from "styled-components";
 import { isNil as isNil16, isNotNil as isNotNil30, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx265, jsxs as jsxs43 } from "react/jsx-runtime";
-var TagLabel = styled69.a`
+import { Fragment as Fragment8, jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
+var TagLabel = styled70.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12096,14 +12159,14 @@ var TagLabel = styled69.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled69.div`
+var TagDivider = styled70.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled69.button`
+var StyledRemoveButton = styled70.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12131,7 +12194,7 @@ var StyledRemoveButton = styled69.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled69.div`
+var StyledTag = styled70.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12153,7 +12216,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs43(Fragment8, { children: [
-    /* @__PURE__ */ jsx265(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx266(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs43(
       StyledRemoveButton,
       {
@@ -12161,20 +12224,20 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx265(
+          /* @__PURE__ */ jsx266(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx265(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx266(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef28(
+var Tag = forwardRef29(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil30(icon);
     const labelProps = isNotNil30(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
@@ -12196,7 +12259,7 @@ var Tag = forwardRef28(
               ]
             }
           ),
-          /* @__PURE__ */ jsx265(
+          /* @__PURE__ */ jsx266(
             RemoveButton,
             {
               colorScheme,
@@ -12211,135 +12274,10 @@ var Tag = forwardRef28(
 );
 Tag.displayName = "Tag";
-// src/components/WistiaLogo/WistiaLogo.tsx
-import styled70, { css as css36 } from "styled-components";
-import { isNotNil as isNotNil31 } from "@wistia/type-guards";
-import { jsx as jsx266, jsxs as jsxs44 } from "react/jsx-runtime";
-var renderBrandmark = (brandmarkColor, iconOnly) => {
-  if (iconOnly) {
-    return /* @__PURE__ */ jsx266(
-      "g",
-      {
-        "data-testid": "ui-wistia-logo-brandmark",
-        fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx266("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx266(
-    "g",
-    {
-      "data-testid": "ui-wistia-logo-brandmark",
-      fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx266("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
-    }
-  );
-};
-var renderLogotype = (logotypeColor, iconOnly) => {
-  if (iconOnly) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx266(
-    "g",
-    {
-      "data-testid": "ui-wistia-logo-logotype",
-      fill: logotypeColor,
-      children: /* @__PURE__ */ jsx266("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
-    }
-  );
-};
-var computedViewBox = (iconOnly) => {
-  if (iconOnly) {
-    return "0 0 34.4 26.78";
-  }
-  return "0 0 144 31.47";
-};
-var WistiaLogoComponent = styled70.svg`
-  height: ${({ height }) => `${height}px`};
-  /* ensure it will always fit on mobile */
-  max-height: 22vw;
-  max-width: 100%;
-  &:hover {
-    path {
-      ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
-    }
-  }
-  ${({ $opticallyCentered, $iconOnly }) => {
-  if ($opticallyCentered) {
-    if ($iconOnly) {
-      return css36`
-          aspect-ratio: 1;
-          padding: 11.85% 3.12% 13.91%;
-        `;
-    }
-    return css36`
-        aspect-ratio: 127 / 32;
-      `;
-  }
-  return null;
-}}
-`;
-var WistiaLogo = ({
-  description = void 0,
-  height = 100,
-  hoverColor = void 0,
-  href = void 0,
-  iconOnly = false,
-  opticallyCentered = false,
-  title = "Wistia Logo",
-  variant = "standard",
-  ...props
-}) => {
-  const primaryColor = "#2949e5";
-  const darkColor = "#000934";
-  const lightColor = "#ffffff";
-  const VARIANT_COLORS = {
-    standard: {
-      brandmark: primaryColor,
-      logotype: darkColor
-    },
-    dark: {
-      brandmark: darkColor,
-      logotype: darkColor
-    },
-    light: {
-      brandmark: lightColor,
-      logotype: lightColor
-    }
-  };
-  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
-  const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs44(
-    WistiaLogoComponent,
-    {
-      $hoverColor: hoverColor,
-      $iconOnly: iconOnly,
-      $opticallyCentered: opticallyCentered,
-      height,
-      preserveAspectRatio: opticallyCentered ? "xMidYMin" : void 0,
-      role: "img",
-      viewBox: computedViewBox(iconOnly),
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx266("title", { children: title }),
-        isNotNil31(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
-        renderBrandmark(brandmarkColor, iconOnly),
-        renderLogotype(logotypeColor, iconOnly)
-      ]
-    }
-  );
-  return href !== void 0 ? /* @__PURE__ */ jsx266("a", { href, children: Logo }) : Logo;
-};
-WistiaLogo.displayName = "WistiaLogo";
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled71 from "styled-components";
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
-import { jsx as jsx267, jsxs as jsxs45 } from "react/jsx-runtime";
+import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { jsx as jsx267, jsxs as jsxs44 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled71.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
@@ -12365,20 +12303,20 @@ var StyledThumbnailBadge = styled71.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
-    isNotNil32(icon) && icon,
+  return /* @__PURE__ */ jsxs44(StyledThumbnailBadge, { ...props, children: [
+    isNotNil31(icon) && icon,
     /* @__PURE__ */ jsx267("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 import styled72 from "styled-components";
-import { isNil as isNil17, isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { isNil as isNil17, isNotNil as isNotNil33 } from "@wistia/type-guards";
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 import { css as css37 } from "styled-components";
 var gradients = {
   defaultDarkOne: css37`
@@ -12506,11 +12444,11 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil33(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil32(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx268, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
 var WideThumbnailImage = styled72.img`
   height: 100%;
   object-fit: cover;
@@ -12527,6 +12465,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       WideThumbnailImage,
       {
         alt: "",
+        role: "img",
         src: thumbnailUrl
       }
     );
@@ -12535,12 +12474,13 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     SquareThumbnailImage,
     {
       alt: "",
+      role: "img",
       src: thumbnailUrl
     }
   );
 };
 var StyledThumbnail = styled72.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil34($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil33($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -12558,7 +12498,7 @@ var StyledThumbnail = styled72.div`
     border-radius: calc(8% * (9 / 16)) / 8%;
   }
 `;
-var Thumbnail = forwardRef29(
+var Thumbnail = forwardRef30(
   ({
     gradientBackground = "defaultMidOne",
     thumbnailImageType = "square",
@@ -12567,18 +12507,19 @@ var Thumbnail = forwardRef29(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && isNotNil34(thumbnailUrl) ? thumbnailUrl : void 0;
-    return /* @__PURE__ */ jsxs46(
+    const backgroundUrl = thumbnailImageType === "square" && isNotNil33(thumbnailUrl) ? thumbnailUrl : void 0;
+    return /* @__PURE__ */ jsxs45(
       StyledThumbnail,
       {
         ref,
+        ...props,
         $backgroundUrl: backgroundUrl,
         $gradientBackground: gradientBackground,
         $width: width,
-        ...props,
+        role: "presentation",
         children: [
-          isNotNil34(children) ? children : null,
-          isNotNil34(thumbnailUrl) ? /* @__PURE__ */ jsx268(
+          isNotNil33(children) ? children : null,
+          isNotNil33(thumbnailUrl) ? /* @__PURE__ */ jsx268(
             ThumbnailImage,
             {
               thumbnailImageType,
@@ -12592,69 +12533,237 @@ var Thumbnail = forwardRef29(
 );
 Thumbnail.displayName = "Thumbnail";
-// src/components/InputClickToCopy/InputClickToCopy.tsx
+// src/components/ThumbnailCollage/ThumbnailCollage.tsx
+import React2 from "react";
 import styled73 from "styled-components";
-import { forwardRef as forwardRef30, useEffect as useEffect10, useState as useState12 } from "react";
-import { isFunction as isFunction3 } from "@wistia/type-guards";
+import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx269 } from "react/jsx-runtime";
-var StyledInput2 = styled73(Input)`
-  &:not([aria-disabled='true']) {
-    cursor: pointer;
+var StyledThumbnailCollage = styled73.div`
+  display: grid;
+  gap: var(--wui-space-01);
+  width: 100%;
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: 1fr 1fr;
+  aspect-ratio: 16 / 9;
+  &:has(:nth-child(1)) {
+    --wui-collage-thumbnail-first-border-radius: calc(8% * (9 / 16)) / 8%;
+    grid-template-areas:
+      'a a'
+      'a a';
   }
-  &::selection {
-    background-color: transparent;
+  &:has(:nth-child(2)) {
+    --wui-collage-thumbnail-first-border-radius: 7.5% / 8%;
+    --wui-collage-thumbnail-second-border-radius: 11.5% / 8%;
+    grid-template-areas:
+      'a b'
+      'a b';
+  }
+  &:has(:nth-child(3)) {
+    --wui-collage-thumbnail-first-border-radius: 7.5% / 8%;
+    --wui-collage-thumbnail-second-border-radius: 11.5% / 16%;
+    --wui-collage-thumbnail-third-border-radius: 11.5% / 16%;
+    grid-template-areas:
+      'a b'
+      'a c';
+  }
+  > :nth-child(1) {
+    --wui-collage-thumbnail-border-radius: var(--wui-collage-thumbnail-first-border-radius);
+    grid-area: a;
+  }
+  > :nth-child(2) {
+    --wui-collage-thumbnail-border-radius: var(--wui-collage-thumbnail-second-border-radius);
+    grid-area: b;
+  }
+  > :nth-child(3) {
+    --wui-collage-thumbnail-border-radius: var(--wui-collage-thumbnail-third-border-radius);
+    grid-area: c;
+  }
+  > * {
+    aspect-ratio: unset;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--wui-collage-thumbnail-border-radius);
+    img {
+      border-radius: var(--wui-collage-thumbnail-border-radius);
+    }
+    > :not(img) {
+      display: none;
+    }
   }
 `;
-var COPY_SUCCESS_DURATION = 2e3;
-var InputClickToCopy = forwardRef30(
-  ({ value, onCopy, ...props }, ref) => {
-    const [isCopied, setIsCopied] = useState12(false);
-    useEffect10(() => {
-      if (isCopied) {
-        const timeout = setTimeout(() => {
-          setIsCopied(false);
-        }, COPY_SUCCESS_DURATION);
-        return () => {
-          clearTimeout(timeout);
-        };
-      }
-      return () => null;
-    }, [isCopied]);
-    const handleClick = (event) => {
-      event.preventDefault();
-      if (isFunction3(props.onClick)) {
-        props.onClick(event);
-      }
-      void copyToClipboard(value).then(() => {
-        setIsCopied(true);
-        if (isFunction3(onCopy)) {
-          onCopy(value);
-        }
-        return value;
-      });
-    };
-    return /* @__PURE__ */ jsx269(
-      StyledInput2,
+var ThumbnailCollage = ({
+  children = [],
+  gradientBackground = "defaultMidOne",
+  ...props
+}) => {
+  const thumbnailArray = React2.Children.toArray(children);
+  const truncatedThumbnails = thumbnailArray.slice(0, 3);
+  const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
+    return React2.cloneElement(child, {
+      ...child.props,
+      children: void 0
+    });
+  }) : [
+    // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
+    /* @__PURE__ */ jsx269(
+      Thumbnail,
       {
-        "aria-label": "Click to Copy",
-        ...props,
-        ref,
-        onClick: handleClick,
-        readOnly: true,
-        rightIcon: isCopied ? /* @__PURE__ */ jsx269(
-          Icon,
-          {
-            colorScheme: "success",
-            type: "checkmark-circle"
-          }
-        ) : /* @__PURE__ */ jsx269(Icon, { type: "save-as-copy" }),
-        value
+        gradientBackground,
+        thumbnailUrl: null
+      },
+      "fallback"
+    )
+  ];
+  return /* @__PURE__ */ jsx269(
+    StyledThumbnailCollage,
+    {
+      $gradientBackground: gradientBackground,
+      "data-wui-thumbnail-collage": true,
+      ...props,
+      children: thumbnails
+    }
+  );
+};
+// src/components/WistiaLogo/WistiaLogo.tsx
+import styled74, { css as css38 } from "styled-components";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { jsx as jsx270, jsxs as jsxs46 } from "react/jsx-runtime";
+var renderBrandmark = (brandmarkColor, iconOnly) => {
+  if (iconOnly) {
+    return /* @__PURE__ */ jsx270(
+      "g",
+      {
+        "data-testid": "ui-wistia-logo-brandmark",
+        fill: brandmarkColor,
+        children: /* @__PURE__ */ jsx270("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-);
-InputClickToCopy.displayName = "InputClickToCopy";
+  return /* @__PURE__ */ jsx270(
+    "g",
+    {
+      "data-testid": "ui-wistia-logo-brandmark",
+      fill: brandmarkColor,
+      children: /* @__PURE__ */ jsx270("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+    }
+  );
+};
+var renderLogotype = (logotypeColor, iconOnly) => {
+  if (iconOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx270(
+    "g",
+    {
+      "data-testid": "ui-wistia-logo-logotype",
+      fill: logotypeColor,
+      children: /* @__PURE__ */ jsx270("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+    }
+  );
+};
+var computedViewBox = (iconOnly) => {
+  if (iconOnly) {
+    return "0 0 34.4 26.78";
+  }
+  return "0 0 144 31.47";
+};
+var WistiaLogoComponent = styled74.svg`
+  height: ${({ height }) => `${height}px`};
+  /* ensure it will always fit on mobile */
+  max-height: 22vw;
+  max-width: 100%;
+  &:hover {
+    path {
+      ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
+    }
+  }
+  ${({ $opticallyCentered, $iconOnly }) => {
+  if ($opticallyCentered) {
+    if ($iconOnly) {
+      return css38`
+          aspect-ratio: 1;
+          padding: 11.85% 3.12% 13.91%;
+        `;
+    }
+    return css38`
+        aspect-ratio: 127 / 32;
+      `;
+  }
+  return null;
+}}
+`;
+var WistiaLogo = ({
+  description = void 0,
+  height = 100,
+  hoverColor = void 0,
+  href = void 0,
+  iconOnly = false,
+  opticallyCentered = false,
+  title = "Wistia Logo",
+  variant = "standard",
+  ...props
+}) => {
+  const primaryColor = "#2949e5";
+  const darkColor = "#000934";
+  const lightColor = "#ffffff";
+  const VARIANT_COLORS = {
+    standard: {
+      brandmark: primaryColor,
+      logotype: darkColor
+    },
+    dark: {
+      brandmark: darkColor,
+      logotype: darkColor
+    },
+    light: {
+      brandmark: lightColor,
+      logotype: lightColor
+    }
+  };
+  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
+  const logotypeColor = VARIANT_COLORS[variant].logotype;
+  const Logo = /* @__PURE__ */ jsxs46(
+    WistiaLogoComponent,
+    {
+      $hoverColor: hoverColor,
+      $iconOnly: iconOnly,
+      $opticallyCentered: opticallyCentered,
+      height,
+      preserveAspectRatio: opticallyCentered ? "xMidYMin" : void 0,
+      role: "img",
+      viewBox: computedViewBox(iconOnly),
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx270("title", { children: title }),
+        isNotNil34(description) ? /* @__PURE__ */ jsx270("desc", { children: description }) : null,
+        renderBrandmark(brandmarkColor, iconOnly),
+        renderLogotype(logotypeColor, iconOnly)
+      ]
+    }
+  );
+  return href !== void 0 ? /* @__PURE__ */ jsx270("a", { href, children: Logo }) : Logo;
+};
+WistiaLogo.displayName = "WistiaLogo";
 export {
   ActionButton,
   Avatar,
@@ -12730,6 +12839,7 @@ export {
   Text,
   Thumbnail,
   ThumbnailBadge,
+  ThumbnailCollage,
   Tooltip,
   UIProvider,
   WistiaLogo,