@wistia/ui 0.8.7 → 0.8.8-beta.2b404aae.0ab25b9

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.7
+ * @license @wistia/ui v0.8.8-beta.2b404aae.0ab25b9
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9,6 +9,7 @@
 
 
 // src/providers/UIProvider/UIProvider.tsx
+import { createContext as createContext2, useContext, useEffect as useEffect2 } from "react";
 import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
 
 // src/css/GlobalStyle.tsx
@@ -1468,12 +1469,21 @@ var ToastProvider = () => /* @__PURE__ */ jsx2(Toaster, { ...toastConfig });
 
 // src/providers/UIProvider/UIProvider.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var UIProviderContext = createContext2(false);
 var UIProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  const hasUIProviderParent = useContext(UIProviderContext);
+  useEffect2(() => {
+    if (hasUIProviderParent) {
+      throw new Error(
+        "UIProvider cannot be nested inside another UIProvider. This can lead to unexpected behavior."
+      );
+    }
+  }, [hasUIProviderParent]);
+  return /* @__PURE__ */ jsx3(UIProviderContext.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 +1951,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");
   }
@@ -1975,7 +1985,7 @@ import {
 import { useCallback as useCallback3 } from "react";
 
 // src/private/hooks/useEvent/useEvent.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // src/private/helpers/isValidRef/isValidRef.ts
 import { isNotNil as isNotNil2, isRecord } from "@wistia/type-guards";
@@ -1996,13 +2006,13 @@ var isEventTargetSupported = (eventTarget) => (
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
   const savedEventHandler = useRef2();
   const savedEventOptions = useRef2();
-  useEffect2(() => {
+  useEffect3(() => {
     savedEventHandler.current = eventHandler;
   }, [eventHandler]);
-  useEffect2(() => {
+  useEffect3(() => {
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
-  useEffect2(() => {
+  useEffect3(() => {
     const target = isValidRef(eventTarget) ? eventTarget.current : eventTarget;
     if (!eventName || !isEventTargetSupported(target)) {
       return;
@@ -2090,9 +2100,9 @@ var useLockBodyScroll = (locked) => {
 };
 
 // src/hooks/useOnClickOutside/useOnClickOutside.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) => {
-  useEffect3(() => {
+  useEffect4(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -2196,9 +2206,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 +2243,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 +2266,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 +2293,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 +2319,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 +2380,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 +2393,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;
@@ -2483,7 +2497,7 @@ var useToast = () => {
 };
 
 // src/hooks/useFocusTrap/useFocusTrap.ts
-import { useRef as useRef3, useCallback as useCallback5, useEffect as useEffect4 } from "react";
+import { useRef as useRef3, useCallback as useCallback5, useEffect as useEffect5 } from "react";
 import { isNotUndefined } from "@wistia/type-guards";
 
 // src/hooks/useFocusTrap/helpers.ts
@@ -2697,7 +2711,7 @@ var useFocusTrap = (active = true, options = {}) => {
     },
     [active, options.focusSelector, options.disableAriaHider]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!active) {
       return void 0;
     }
@@ -2716,7 +2730,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 +2738,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 +2784,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 +2796,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 +2807,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 +2818,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 +2829,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 +2864,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 +2872,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);
@@ -6924,7 +6938,7 @@ var Link = forwardRef(
           if (isFunction2(props.onClick)) {
             props.onClick(event);
           }
-          if (!inRouterContext && isNotNil5(to)) {
+          if (!shouldUseReactRouterLink && isNotNil5(to)) {
             window.location.assign(to);
           }
         }
@@ -7191,7 +7205,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);
@@ -7263,7 +7277,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState5, useMemo as useMemo3, useEffect as useEffect5 } from "react";
+import { useState as useState5, useMemo as useMemo3, useEffect as useEffect6 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
 import styled9 from "styled-components";
 
@@ -7472,7 +7486,7 @@ var Avatar = ({
   ...props
 }) => {
   const [imageLoadState, setImageLoadState] = useState5("loading");
-  useEffect5(() => {
+  useEffect6(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
   const handleImageLoad = () => {
@@ -7557,7 +7571,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 +7628,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 +8005,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 +8072,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 +8143,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx208(
     )
   }
 );
-var sizeSmall = css20`
+var sizeSmall = css21`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8140,7 +8154,7 @@ var sizeSmall = css20`
     height: 7px;
   }
 `;
-var sizeMedium = css20`
+var sizeMedium = css21`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8151,7 +8165,7 @@ var sizeMedium = css20`
     height: 9px;
   }
 `;
-var sizeLarge = css20`
+var sizeLarge = css21`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8268,9 +8282,9 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback6, useEffect as useEffect6 } from "react";
+import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback6, useEffect as useEffect7 } from "react";
 var ClickRegion = ({ children, targetRef }) => {
-  useEffect6(() => {
+  useEffect7(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -8360,46 +8374,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 +8439,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 +8634,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 +8657,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 +8665,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 +8673,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 +8681,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 +8781,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 +8880,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 +8920,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 +9026,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 +9058,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 +9252,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 +9362,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 +9406,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,
@@ -9526,7 +9536,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 +9544,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 +9574,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 +9589,7 @@ var requiredStyle = css27`
     content: '*';
   }
 `;
-var disabledStyle3 = css27`
+var disabledStyle3 = css28`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled34.label`
@@ -9629,7 +9639,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 +9677,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 +9770,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 +9836,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,
@@ -9885,7 +9895,7 @@ var IconButton = forwardRef13(
 IconButton.displayName = "IconButton";
 
 // src/components/Menu/Menu.tsx
-import styled38, { css as css28, keyframes as keyframes2 } from "styled-components";
+import styled38, { css as css29, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9896,9 +9906,9 @@ 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";
@@ -9922,7 +9932,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 +9943,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 +9954,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);
@@ -10367,8 +10377,10 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 import {
-  DropdownMenuCheckboxItem
+  DropdownMenuCheckboxItem,
+  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";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs29(
@@ -10442,7 +10454,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx238(CheckboxIndicator, { checked })
+          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
         }
       )
     }
@@ -10454,7 +10467,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef18 } from "react";
 import styled47 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil22 } from "@wistia/type-guards";
+import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled44 from "styled-components";
@@ -10516,16 +10529,16 @@ import styled45 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 { isNotNil as isNotNil21 } from "@wistia/type-guards";
+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 (isNotNil21(previouslyFocusedRef.current)) {
+      if (isNotNil22(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10672,7 +10685,7 @@ var Modal = forwardRef18(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil22(onRequestClose)) {
+          if (!open2 && isNotNil23(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -10685,7 +10698,7 @@ var Modal = forwardRef18(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil22(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil23(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10716,19 +10729,19 @@ 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 styled48, { css as css30 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil23 } from "@wistia/type-guards";
+import { isNotNil as isNotNil24 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil23(onOpenChange) && isNotNil23(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil24(onOpenChange) && isNotNil24(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
 import { jsx as jsx244, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledContent2 = styled48(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);
@@ -10792,7 +10805,7 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled49 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx245, jsxs as jsxs33 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled49.div`
   --progress-bar-height: 8px;
@@ -10847,7 +10860,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs33(ProgressBarWrapper, { children: [
-    isNotNil24(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil25(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx245(
       StyledProgressBar,
       {
@@ -10863,14 +10876,14 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil24(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil25(labelRight) ? /* @__PURE__ */ jsx245(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 styled50, { 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(
@@ -10892,7 +10905,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx246(
     )
   }
 );
-var sizeSmall2 = css30`
+var sizeSmall2 = css31`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10903,7 +10916,7 @@ var sizeSmall2 = css30`
     height: 7px;
   }
 `;
-var sizeMedium2 = css30`
+var sizeMedium2 = css31`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10914,7 +10927,7 @@ var sizeMedium2 = css30`
     height: 8px;
   }
 `;
-var sizeLarge2 = css30`
+var sizeLarge2 = css31`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -11038,14 +11051,14 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef20 } from "react";
-import styled52, { css as css31 } from "styled-components";
+import styled52, { 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 { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState10 } from "react";
 import { jsx as jsx247 } from "react/jsx-runtime";
-var SelectedItemStyleContext = createContext6(null);
+var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
@@ -11070,7 +11083,7 @@ var SelectedItemStyleProvider = ({
   return /* @__PURE__ */ jsx247(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,11 +11094,11 @@ var useSelectedItemStyle = () => {
 import styled51 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");
   }
@@ -11117,7 +11130,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx249, jsxs as jsxs35 } from "react/jsx-runtime";
-var segmentedControlStyles = css31`
+var segmentedControlStyles = css32`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11166,12 +11179,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 forwardRef21, useEffect as useEffect9, useRef as useRef10 } from "react";
+import styled53, { css as css33 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil25 } from "@wistia/type-guards";
+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);
@@ -11247,7 +11260,7 @@ var SegmentedControlItem = forwardRef21(
         event.preventDefault();
       }
     };
-    useEffect8(() => {
+    useEffect9(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11276,8 +11289,8 @@ var SegmentedControlItem = forwardRef21(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil25(label),
-        "aria-label": isNotNil25(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil26(label),
+        "aria-label": isNotNil26(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -11418,7 +11431,7 @@ Select.displayName = "Select";
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef23 } from "react";
 import styled55 from "styled-components";
-import { isNotNil as isNotNil26 } from "@wistia/type-guards";
+import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsx as jsx251, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledItem = styled55(Item)`
   ${variantStyleMap2.body3};
@@ -11462,7 +11475,7 @@ var SelectOption = forwardRef23(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil26(selectedDisplayValue) ? /* @__PURE__ */ jsxs38("div", { children: [
+          isNotNil27(selectedDisplayValue) ? /* @__PURE__ */ jsxs38("div", { children: [
             children,
             /* @__PURE__ */ jsx251("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx251(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx251(ItemText, { children })
@@ -11496,10 +11509,10 @@ 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 styled57, { 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`
+var sizeSmall3 = css34`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11514,7 +11527,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;
 
@@ -11529,7 +11542,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;
 
@@ -11658,19 +11671,19 @@ var Switch = forwardRef24(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled58, { css as css34 } from "styled-components";
+import styled58, { css as css35 } from "styled-components";
 import { jsx as jsx254 } from "react/jsx-runtime";
 var StyledTable = styled58.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);
       }
@@ -11697,8 +11710,8 @@ var Table = ({
 import styled59 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";
@@ -11708,10 +11721,10 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-import { useContext as useContext7 } from "react";
-import styled60, { css as css35 } from "styled-components";
+import { useContext as useContext8 } from "react";
+import styled60, { css as css36 } from "styled-components";
 import { jsx as jsx256 } from "react/jsx-runtime";
-var sharedStyles = css35`
+var sharedStyles = css36`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -11729,7 +11742,7 @@ var StyledTd = styled60.td`
   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 });
   }
@@ -11763,7 +11776,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { forwardRef as forwardRef26, useState as useState11 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil28, isNil as isNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil29, isNil as isNil15 } from "@wistia/type-guards";
 import styled68 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
@@ -11816,17 +11829,17 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect9, useRef as useRef11 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect10, useRef as useRef11 } from "react";
 import styled66 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil27 } from "@wistia/type-guards";
+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");
   }
@@ -11848,7 +11861,7 @@ var TabItem = forwardRef25(
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef11(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect9(() => {
+    useEffect10(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11877,8 +11890,8 @@ var TabItem = forwardRef25(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil27(label),
-        "aria-label": isNotNil27(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil28(label),
+        "aria-label": isNotNil28(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12001,7 +12014,7 @@ var Tabs = forwardRef26(
                       value
                     );
                   }
-                  if (isNotNil28(label)) {
+                  if (isNotNil29(label)) {
                     return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
@@ -12013,7 +12026,7 @@ var Tabs = forwardRef26(
                       value
                     );
                   }
-                  if (isNotNil28(ariaLabelForTab)) {
+                  if (isNotNil29(ariaLabelForTab)) {
                     return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
@@ -12056,7 +12069,7 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef28 } from "react";
 import styled69 from "styled-components";
-import { isNil as isNil16, isNotNil as isNotNil29, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
+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`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12173,8 +12186,8 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef28(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = isNotNil29(icon);
-    const labelProps = isNotNil29(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
+    const hasIcon = isNotNil30(icon);
+    const labelProps = isNotNil30(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs43(
       StyledTag,
       {
@@ -12209,8 +12222,8 @@ var Tag = forwardRef28(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled70, { css as css36 } from "styled-components";
-import { isNotNil as isNotNil30 } from "@wistia/type-guards";
+import styled70, { css as css37 } 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) {
@@ -12267,12 +12280,12 @@ var WistiaLogoComponent = styled70.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css36`
+      return css37`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css36`
+    return css37`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -12323,7 +12336,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx266("title", { children: title }),
-        isNotNil30(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
+        isNotNil31(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12335,7 +12348,7 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled71 from "styled-components";
-import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 import { jsx as jsx267, jsxs as jsxs45 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled71.div`
   align-items: center;
@@ -12363,7 +12376,7 @@ var StyledThumbnailBadge = styled71.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
-    isNotNil31(icon) && icon,
+    isNotNil32(icon) && icon,
     /* @__PURE__ */ jsx267("span", { children: label })
   ] });
 };
@@ -12372,13 +12385,13 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef29 } from "react";
 import styled72 from "styled-components";
-import { isNil as isNil17, isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNil as isNil17, isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
-import { css as css37 } from "styled-components";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { css as css38 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css37`
+  defaultDarkOne: css38`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -12386,7 +12399,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css37`
+  defaultDarkTwo: css38`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -12394,7 +12407,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css37`
+  defaultLightOne: css38`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -12402,13 +12415,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css37`
+  defaultLightTwo: css38`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css37`
+  defaultMidOne: css38`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -12416,13 +12429,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css37`
+  defaultMidTwo: css38`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css37`
+  green: css38`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12430,7 +12443,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css37`
+  greenWithPop: css38`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12438,7 +12451,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css37`
+  pink: css38`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -12446,7 +12459,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css37`
+  pinkWithPop: css38`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -12454,7 +12467,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css37`
+  playfulGradientOne: css38`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -12462,7 +12475,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css37`
+  playfulGradientTwo: css38`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -12470,13 +12483,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css37`
+  purple: css38`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css37`
+  purpleWithPop: css38`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -12484,7 +12497,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css37`
+  yellow: css38`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -12492,7 +12505,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css37`
+  yellowWithPop: css38`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -12503,7 +12516,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil32(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil33(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12537,7 +12550,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled72.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil33($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil34($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -12564,7 +12577,7 @@ var Thumbnail = forwardRef29(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && isNotNil33(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && isNotNil34(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ jsxs46(
       StyledThumbnail,
       {
@@ -12574,8 +12587,8 @@ var Thumbnail = forwardRef29(
         $width: width,
         ...props,
         children: [
-          isNotNil33(children) ? children : null,
-          isNotNil33(thumbnailUrl) ? /* @__PURE__ */ jsx268(
+          isNotNil34(children) ? children : null,
+          isNotNil34(thumbnailUrl) ? /* @__PURE__ */ jsx268(
             ThumbnailImage,
             {
               thumbnailImageType,
@@ -12591,7 +12604,7 @@ Thumbnail.displayName = "Thumbnail";
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import styled73 from "styled-components";
-import { forwardRef as forwardRef30, useEffect as useEffect10, useState as useState12 } from "react";
+import { forwardRef as forwardRef30, useEffect as useEffect11, useState as useState12 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx269 } from "react/jsx-runtime";
 var StyledInput2 = styled73(Input)`
@@ -12607,7 +12620,7 @@ var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef30(
   ({ value, onCopy, ...props }, ref) => {
     const [isCopied, setIsCopied] = useState12(false);
-    useEffect10(() => {
+    useEffect11(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
           setIsCopied(false);