@wistia/ui 0.21.0 → 0.21.1-beta.1269b8f2.dbd75dd

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.21.0
+ * @license @wistia/ui v0.21.1-beta.1269b8f2.dbd75dd
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -13867,8 +13867,8 @@ var StyledSubTrigger = styled57(DropdownMenuSubTrigger)`
 `;
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
-  const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx285(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx285(
+  const Trigger5 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
+  return /* @__PURE__ */ jsx285(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx285(
     MenuItemButton,
     {
       ...props,
@@ -16000,12 +16000,113 @@ var GridComponent = forwardRef22(
 GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
+// src/components/PreviewCard/PreviewCard.tsx
+import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2 } from "@radix-ui/react-hover-card";
+import { styled as styled73, css as css38, keyframes as keyframes5 } from "styled-components";
+import { jsx as jsx313, jsxs as jsxs49 } from "react/jsx-runtime";
+var previewCardOpen = keyframes5`
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var previewCardClose = keyframes5`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+`;
+var StyledContent2 = styled73(Content2)`
+  --preview-card-animation-duration: var(--wui-motion-duration-03);
+  --preview-card-animation-ease: var(--wui-motion-ease-out);
+
+  z-index: var(--wui-zindex-popover);
+  transform-origin: var(--radix-hover-card-content-transform-origin);
+  animation-duration: var(--preview-card-animation-duration);
+  animation-timing-function: var(--preview-card-animation-ease);
+  will-change: transform, opacity;
+
+  &[data-state='open'] {
+    animation-name: ${previewCardOpen};
+  }
+
+  &[data-state='closed'] {
+    animation-name: ${previewCardClose};
+  }
+
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $unstyled, $paddingSize }) => !$unstyled && css38`
+      border-radius: var(--wui-border-radius-02);
+      padding: var(--wui-${$paddingSize});
+      max-width: var(--wui-preview-card-max-width, 320px);
+      max-height: var(--wui-preview-card-max-height, auto);
+      background-color: var(--wui-color-bg-surface);
+      box-shadow: var(--wui-elevation-01);
+      border: 1px solid var(--wui-color-border);
+      overflow: auto;
+    `}
+`;
+var PreviewCard = ({
+  children,
+  trigger,
+  maxWidth = "320px",
+  maxHeight = "auto",
+  unstyled = false,
+  paddingSize = "space-04",
+  openDelay = 700,
+  closeDelay = 300,
+  colorScheme = "inherit",
+  forceOpen,
+  ...props
+}) => {
+  const style = {
+    "--wui-preview-card-max-width": maxWidth,
+    "--wui-preview-card-max-height": maxHeight
+  };
+  const rootProps = {};
+  if (forceOpen === true) {
+    rootProps.open = true;
+  }
+  return /* @__PURE__ */ jsxs49(
+    Root2,
+    {
+      closeDelay,
+      openDelay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ jsx313(Trigger2, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsx313(Portal, { children: /* @__PURE__ */ jsx313(
+          StyledContent2,
+          {
+            $colorScheme: colorScheme,
+            $paddingSize: paddingSize,
+            sideOffset: 8,
+            ...props,
+            $unstyled: unstyled,
+            style,
+            children: /* @__PURE__ */ jsx313("div", { children })
+          }
+        ) })
+      ]
+    }
+  );
+};
+PreviewCard.displayName = "PreviewCard_UI";
+
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-import { styled as styled73 } from "styled-components";
+import { styled as styled74 } from "styled-components";
 import { forwardRef as forwardRef23, useEffect as useEffect19, useState as useState22 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
-import { jsx as jsx313 } from "react/jsx-runtime";
-var StyledIconButton = styled73(IconButton)`
+import { jsx as jsx314 } from "react/jsx-runtime";
+var StyledIconButton = styled74(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -16044,7 +16145,7 @@ var InputClickToCopy = forwardRef23(
         return value;
       });
     };
-    return /* @__PURE__ */ jsx313(
+    return /* @__PURE__ */ jsx314(
       Input,
       {
         "aria-label": "Click to Copy",
@@ -16052,7 +16153,7 @@ var InputClickToCopy = forwardRef23(
         ref,
         disabled,
         readOnly: true,
-        rightIcon: /* @__PURE__ */ jsx313(
+        rightIcon: /* @__PURE__ */ jsx314(
           StyledIconButton,
           {
             colorScheme: isCopied ? "success" : "inherit",
@@ -16060,7 +16161,7 @@ var InputClickToCopy = forwardRef23(
             label: "Copy to clipboard",
             onClick: handleClick,
             variant: "ghost",
-            children: isCopied ? /* @__PURE__ */ jsx313(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx313(Icon, { type: "save-as-copy" })
+            children: isCopied ? /* @__PURE__ */ jsx314(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx314(Icon, { type: "save-as-copy" })
           }
         ),
         value
@@ -16071,11 +16172,11 @@ var InputClickToCopy = forwardRef23(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-import { styled as styled74 } from "styled-components";
+import { styled as styled75 } from "styled-components";
 import { forwardRef as forwardRef24, useState as useState23 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
-import { jsx as jsx314 } from "react/jsx-runtime";
-var StyledIconButton2 = styled74(IconButton)`
+import { jsx as jsx315 } from "react/jsx-runtime";
+var StyledIconButton2 = styled75(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -16093,13 +16194,13 @@ var InputPassword = forwardRef24(
         onVisibilityToggle(newVisibility);
       }
     };
-    return /* @__PURE__ */ jsx314(
+    return /* @__PURE__ */ jsx315(
       Input,
       {
         ...props,
         ref,
         disabled,
-        rightIcon: /* @__PURE__ */ jsx314(
+        rightIcon: /* @__PURE__ */ jsx315(
           StyledIconButton2,
           {
             disabled,
@@ -16107,7 +16208,7 @@ var InputPassword = forwardRef24(
             onClick: handleClick,
             tabIndex: disabled ? -1 : 0,
             variant: "ghost",
-            children: /* @__PURE__ */ jsx314(Icon, { type: isVisible ? "preview" : "hide" })
+            children: /* @__PURE__ */ jsx315(Icon, { type: isVisible ? "preview" : "hide" })
           }
         ),
         type: isVisible ? "text" : "password"
@@ -16118,16 +16219,16 @@ var InputPassword = forwardRef24(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import { styled as styled75 } from "styled-components";
+import { styled as styled76 } from "styled-components";
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { jsx as jsx315, jsxs as jsxs49 } from "react/jsx-runtime";
-var StyledKeyboardShortcut = styled75.div`
+import { jsx as jsx316, jsxs as jsxs50 } from "react/jsx-runtime";
+var StyledKeyboardShortcut = styled76.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = styled75.kbd`
+var StyledKey = styled76.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -16150,11 +16251,11 @@ var StyledKey = styled75.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = styled75.span`
+var Label2 = styled76.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = styled75.div`
+var KeysContainer = styled76.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -16207,14 +16308,14 @@ var KeyboardShortcut = ({
   keyboardKeys,
   fullWidth = false,
   ...otherProps
-}) => /* @__PURE__ */ jsxs49(
+}) => /* @__PURE__ */ jsxs50(
   StyledKeyboardShortcut,
   {
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      isNotNil30(label) && /* @__PURE__ */ jsx315(Label2, { children: label }),
-      /* @__PURE__ */ jsx315(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx315(
+      isNotNil30(label) && /* @__PURE__ */ jsx316(Label2, { children: label }),
+      /* @__PURE__ */ jsx316(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx316(
         StyledKey,
         {
           children: keyToString(keyboardKey)
@@ -16228,26 +16329,26 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil31 } from "@wistia/type-guards";
-import { styled as styled77, css as css38 } from "styled-components";
+import { styled as styled78, css as css39 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import { styled as styled76 } from "styled-components";
+import { styled as styled77 } from "styled-components";
 import { isNil as isNil17 } from "@wistia/type-guards";
-import { jsx as jsx316 } from "react/jsx-runtime";
-var ListItemComponent = styled76.li`
+import { jsx as jsx317 } from "react/jsx-runtime";
+var ListItemComponent = styled77.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
   if (isNil17(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx316(ListItemComponent, { children });
+  return /* @__PURE__ */ jsx317(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx317, jsxs as jsxs50 } from "react/jsx-runtime";
-var spacesStyle = css38`
+import { jsx as jsx318, jsxs as jsxs51 } from "react/jsx-runtime";
+var spacesStyle = css39`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -16269,7 +16370,7 @@ var spacesStyle = css38`
     }
   }
 `;
-var commasStyle = css38`
+var commasStyle = css39`
   ${spacesStyle};
 
   li {
@@ -16279,7 +16380,7 @@ var commasStyle = css38`
     }
   }
 `;
-var slashesStyle = css38`
+var slashesStyle = css39`
   ${spacesStyle};
 
   li {
@@ -16290,7 +16391,7 @@ var slashesStyle = css38`
     }
   }
 `;
-var breadcrumbsStyle = css38`
+var breadcrumbsStyle = css39`
   ${spacesStyle};
 
   li {
@@ -16301,11 +16402,11 @@ var breadcrumbsStyle = css38`
     }
   }
 `;
-var unbulletedStyle = css38`
+var unbulletedStyle = css39`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = styled77.ul`
+var ListComponent = styled78.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -16332,7 +16433,7 @@ var ListComponent = styled77.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx317(
+  return /* @__PURE__ */ jsx318(
     ListComponent,
     {
       as: elementType,
@@ -16349,7 +16450,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     const nextItem = listItems[i + 1];
     const key = `item-${itemCount += 1}`;
     if (Array.isArray(nextItem)) {
-      return /* @__PURE__ */ jsxs50(ListItem, { children: [
+      return /* @__PURE__ */ jsxs51(ListItem, { children: [
         item,
         renderListFromArray(nextItem, variant, otherProps)
       ] }, key);
@@ -16357,7 +16458,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ jsx317(ListItem, { children: item }, key);
+    return /* @__PURE__ */ jsx318(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -16385,9 +16486,9 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-import { styled as styled78 } from "styled-components";
-import { jsx as jsx318 } from "react/jsx-runtime";
-var StyledMark = styled78.mark`
+import { styled as styled79 } from "styled-components";
+import { jsx as jsx319 } from "react/jsx-runtime";
+var StyledMark = styled79.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
   color: var(--wui-color-text);
@@ -16395,7 +16496,7 @@ var StyledMark = styled78.mark`
   padding-inline: 0.1em;
   margin-inline: -0.1em;
 `;
-var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx318(
+var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx319(
   StyledMark,
   {
     $colorScheme: colorScheme,
@@ -16406,16 +16507,16 @@ var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */
 Mark.displayName = "Mark_UI";
 
 // src/components/Markdown/Markdown.tsx
-import { styled as styled79 } from "styled-components";
+import { styled as styled80 } from "styled-components";
 import ReactMarkdown from "react-markdown";
 
 // src/css/baseMarkdownCss.tsx
-import { css as css39 } from "styled-components";
+import { css as css40 } from "styled-components";
 var textSizeToTokenMap = {
   body2: "--wui-typography-body-2-size",
   body3: "--wui-typography-body-3-size"
 };
-var baseMarkdownCss = (textSize = "body2") => css39`
+var baseMarkdownCss = (textSize = "body2") => css40`
   --wui-markdown-base-unit: var(${textSizeToTokenMap[textSize]});
 
   font-size: var(--wui-markdown-base-unit);
@@ -16534,8 +16635,8 @@ var baseMarkdownCss = (textSize = "body2") => css39`
 `;
 
 // src/components/Markdown/Markdown.tsx
-import { jsx as jsx319 } from "react/jsx-runtime";
-var StyledMarkdownWrapper = styled79.div`
+import { jsx as jsx320 } from "react/jsx-runtime";
+var StyledMarkdownWrapper = styled80.div`
   ${({ $textSize }) => baseMarkdownCss($textSize)}
 `;
 var Markdown = ({
@@ -16544,47 +16645,47 @@ var Markdown = ({
   ...otherProps
 }) => {
   const responsiveTextSize = useResponsiveProp(textSize);
-  return /* @__PURE__ */ jsx319(
+  return /* @__PURE__ */ jsx320(
     StyledMarkdownWrapper,
     {
       $textSize: responsiveTextSize,
       ...otherProps,
-      children: /* @__PURE__ */ jsx319(ReactMarkdown, { children })
+      children: /* @__PURE__ */ jsx320(ReactMarkdown, { children })
     }
   );
 };
 Markdown.displayName = "Markdown_UI";
 
 // src/components/Meter/Meter.tsx
-import { styled as styled80 } from "styled-components";
+import { styled as styled81 } from "styled-components";
 import { useId as useId5 } from "react";
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
-import { jsx as jsx320, jsxs as jsxs51 } from "react/jsx-runtime";
-var MeterWrapper = styled80.div`
+import { jsx as jsx321, jsxs as jsxs52 } from "react/jsx-runtime";
+var MeterWrapper = styled81.div`
   --meter-height: 16px;
 
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-02);
 `;
-var MeterLabelContainer = styled80.div`
+var MeterLabelContainer = styled81.div`
   display: flex;
   justify-content: space-between;
   align-items: baseline;
 `;
-var MeterLabel = styled80.div`
+var MeterLabel = styled81.div`
   font-family: var(--wui-typography-heading-5-family);
   line-height: var(--wui-typography-heading-5-line-height);
   font-size: var(--wui-typography-heading-5-size);
   font-weight: var(--wui-typography-heading-5-weight);
 `;
-var MeterLabelMeta = styled80.div`
+var MeterLabelMeta = styled81.div`
   font-family: var(--wui-typography-heading-5-family);
   line-height: var(--wui-typography-heading-5-line-height);
   font-size: var(--wui-typography-heading-5-size);
   font-weight: var(--wui-typography-heading-5-weight);
 `;
-var MeterBarContainer = styled80.div`
+var MeterBarContainer = styled81.div`
   position: relative;
   overflow: hidden;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -16593,7 +16694,7 @@ var MeterBarContainer = styled80.div`
   height: var(--meter-height);
   transform: translateZ(0);
 `;
-var MeterSegmentBar = styled80.div`
+var MeterSegmentBar = styled81.div`
   position: absolute;
   top: 0;
   left: ${({ $offset }) => $offset}%;
@@ -16611,30 +16712,30 @@ var MeterSegmentBar = styled80.div`
     border-bottom-right-radius: var(--wui-border-radius-rounded);
   }
 `;
-var MeterDescription = styled80.div`
+var MeterDescription = styled81.div`
   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);
   color: var(--wui-color-text-secondary);
 `;
-var MeterKey = styled80.div`
+var MeterKey = styled81.div`
   display: flex;
   flex-wrap: wrap;
   gap: var(--wui-space-03);
 `;
-var MeterKeyItem = styled80.div`
+var MeterKeyItem = styled81.div`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
 `;
-var MeterKeyColorIndicator = styled80.div`
+var MeterKeyColorIndicator = styled81.div`
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: ${({ $color }) => `var(--wui-${$color})`};
   flex-shrink: 0;
 `;
-var MeterKeyLabel = styled80.span`
+var MeterKeyLabel = styled81.span`
   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);
@@ -16689,19 +16790,19 @@ var Meter = ({
     return segmentDescriptions ? `${segmentDescriptions}. ${totalDescription}` : totalDescription;
   };
   const effectiveAriaLabel = ariaLabel ?? (isNotNil32(label) ? nodeToString(label) : "Data meter");
-  return /* @__PURE__ */ jsxs51(MeterWrapper, { ...props, children: [
-    /* @__PURE__ */ jsx320(
+  return /* @__PURE__ */ jsxs52(MeterWrapper, { ...props, children: [
+    /* @__PURE__ */ jsx321(
       ScreenReaderOnly,
       {
         id: descriptionId,
         text: generateAriaDescription()
       }
     ),
-    isNotNil32(label) || isNotNil32(labelMeta) ? /* @__PURE__ */ jsxs51(MeterLabelContainer, { id: labelId, children: [
-      isNotNil32(label) ? /* @__PURE__ */ jsx320(MeterLabel, { children: label }) : null,
-      isNotNil32(labelMeta) ? /* @__PURE__ */ jsx320(MeterLabelMeta, { children: labelMeta }) : null
+    isNotNil32(label) || isNotNil32(labelMeta) ? /* @__PURE__ */ jsxs52(MeterLabelContainer, { id: labelId, children: [
+      isNotNil32(label) ? /* @__PURE__ */ jsx321(MeterLabel, { children: label }) : null,
+      isNotNil32(labelMeta) ? /* @__PURE__ */ jsx321(MeterLabelMeta, { children: labelMeta }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx320(
+    /* @__PURE__ */ jsx321(
       MeterBarContainer,
       {
         "aria-describedby": descriptionId,
@@ -16711,7 +16812,7 @@ var Meter = ({
         "aria-valuemin": 0,
         "aria-valuenow": totalValue,
         role: "meter",
-        children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx320(
+        children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx321(
           MeterSegmentBar,
           {
             $color: segment.color,
@@ -16723,25 +16824,25 @@ var Meter = ({
         ))
       }
     ),
-    isNotNil32(description) ? /* @__PURE__ */ jsx320(MeterDescription, { children: description }) : null,
-    !hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx320(
+    isNotNil32(description) ? /* @__PURE__ */ jsx321(MeterDescription, { children: description }) : null,
+    !hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx321(
       MeterKey,
       {
         "aria-label": "Meter legend",
         role: "list",
-        children: keySegments.map((segment) => /* @__PURE__ */ jsxs51(
+        children: keySegments.map((segment) => /* @__PURE__ */ jsxs52(
           MeterKeyItem,
           {
             role: "listitem",
             children: [
-              /* @__PURE__ */ jsx320(
+              /* @__PURE__ */ jsx321(
                 MeterKeyColorIndicator,
                 {
                   $color: segment.color,
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsx320(MeterKeyLabel, { children: segment.label })
+              /* @__PURE__ */ jsx321(MeterKeyLabel, { children: segment.label })
             ]
           },
           `${segment.color}-${segment.value}-${segment.offset}-${nodeToString(segment.label)}`
@@ -16754,7 +16855,7 @@ Meter.displayName = "Meter_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { styled as styled85 } from "styled-components";
+import { styled as styled86 } from "styled-components";
 import {
   Root as DialogRoot,
   Portal as DialogPortal,
@@ -16763,31 +16864,31 @@ import {
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import { styled as styled82 } from "styled-components";
+import { styled as styled83 } from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import { styled as styled81 } from "styled-components";
+import { styled as styled82 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx321 } from "react/jsx-runtime";
-var CloseButton = styled81(DialogClose)`
+import { jsx as jsx322 } from "react/jsx-runtime";
+var CloseButton = styled82(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx321(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx321(
+  return /* @__PURE__ */ jsx322(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx322(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx321(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx322(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx322, jsxs as jsxs52 } from "react/jsx-runtime";
-var Header = styled82.header`
+import { jsx as jsx323, jsxs as jsxs53 } from "react/jsx-runtime";
+var Header = styled83.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -16807,7 +16908,7 @@ var Header = styled82.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = styled82(DialogTitle)`
+var Title = styled83(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);
@@ -16818,15 +16919,15 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx322(ScreenReaderOnly, { children: /* @__PURE__ */ jsx322(Title, { children: title }) }) : /* @__PURE__ */ jsx322(Title, { children: title });
-  return /* @__PURE__ */ jsxs52(
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx323(ScreenReaderOnly, { children: /* @__PURE__ */ jsx323(Title, { children: title }) }) : /* @__PURE__ */ jsx323(Title, { children: title });
+  return /* @__PURE__ */ jsxs53(
     Header,
     {
       $hideCloseButon: hideCloseButton,
       $hideTitle: hideTitle,
       children: [
         TitleComponent,
-        hideCloseButton ? null : /* @__PURE__ */ jsx322(ModalCloseButton, {})
+        hideCloseButton ? null : /* @__PURE__ */ jsx323(ModalCloseButton, {})
       ]
     }
   );
@@ -16834,7 +16935,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled83, css as css40, keyframes as keyframes5 } from "styled-components";
+import { styled as styled84, css as css41, keyframes as keyframes6 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/components/Modal/constants.ts
@@ -16860,8 +16961,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx323 } from "react/jsx-runtime";
-var modalEnter = keyframes5`
+import { jsx as jsx324 } from "react/jsx-runtime";
+var modalEnter = keyframes6`
   from {
     opacity: 0;
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
@@ -16872,7 +16973,7 @@ var modalEnter = keyframes5`
     transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
   }
 `;
-var modalExit = keyframes5`
+var modalExit = keyframes6`
   from {
     opacity: 1;
     transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
@@ -16883,7 +16984,7 @@ var modalExit = keyframes5`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-var centeredModalStyles = css40`
+var centeredModalStyles = css41`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -16899,7 +17000,7 @@ var centeredModalStyles = css40`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var fixedTopModalStyles = css40`
+var fixedTopModalStyles = css41`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -16918,7 +17019,7 @@ var fixedTopModalStyles = css40`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var slideInRight = keyframes5`
+var slideInRight = keyframes6`
   from {
     opacity: 0;
     transform: translateX(100%);
@@ -16929,7 +17030,7 @@ var slideInRight = keyframes5`
     transform: translateX(0);
   }
 `;
-var slideOutRight = keyframes5`
+var slideOutRight = keyframes6`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -16940,7 +17041,7 @@ var slideOutRight = keyframes5`
     transform: translateX(100%);
   }
 `;
-var rightSidePanelModalStyles = css40`
+var rightSidePanelModalStyles = css41`
   --wui-modal-screen-offset: var(--wui-space-05);
 
   height: calc(100vh - var(--wui-modal-screen-offset) * 2);
@@ -16958,7 +17059,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = styled83(DialogContent)`
+var StyledModalContent = styled84(DialogContent)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -16988,7 +17089,7 @@ var StyledModalContent = styled83(DialogContent)`
 var ModalContent = forwardRef25(
   ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx323(
+    return /* @__PURE__ */ jsx324(
       StyledModalContent,
       {
         ref,
@@ -17003,8 +17104,8 @@ var ModalContent = forwardRef25(
 
 // src/components/Modal/ModalOverlay.tsx
 import { DialogOverlay } from "@radix-ui/react-dialog";
-import { styled as styled84, keyframes as keyframes6 } from "styled-components";
-var backdropShow = keyframes6`
+import { styled as styled85, keyframes as keyframes7 } from "styled-components";
+var backdropShow = keyframes7`
   from {
     opacity: 0;
   }
@@ -17013,7 +17114,7 @@ var backdropShow = keyframes6`
     opacity: 1;
   }
 `;
-var backdropHide = keyframes6`
+var backdropHide = keyframes7`
   from {
     opacity: 1;
   }
@@ -17022,7 +17123,7 @@ var backdropHide = keyframes6`
     opacity: 0;
   }
 `;
-var ModalOverlay = styled84(DialogOverlay)`
+var ModalOverlay = styled85(DialogOverlay)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
@@ -17035,20 +17136,20 @@ var ModalOverlay = styled84(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx324, jsxs as jsxs53 } from "react/jsx-runtime";
-var ModalHiddenDescription = styled85(DialogDescription)({ ...visuallyHiddenStyle });
-var ModalBody = styled85.div`
+import { jsx as jsx325, jsxs as jsxs54 } from "react/jsx-runtime";
+var ModalHiddenDescription = styled86(DialogDescription)({ ...visuallyHiddenStyle });
+var ModalBody = styled86.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = styled85.div`
+var ModalScrollArea = styled86.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = styled85.footer`
+var ModalFooter = styled86.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -17066,7 +17167,7 @@ var Modal = forwardRef26(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx324(
+    return /* @__PURE__ */ jsx325(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -17075,9 +17176,9 @@ var Modal = forwardRef26(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs53(DialogPortal, { children: [
-          /* @__PURE__ */ jsx324(ModalOverlay, {}),
-          /* @__PURE__ */ jsxs53(
+        children: /* @__PURE__ */ jsxs54(DialogPortal, { children: [
+          /* @__PURE__ */ jsx325(ModalOverlay, {}),
+          /* @__PURE__ */ jsxs54(
             ModalContent,
             {
               ref,
@@ -17093,9 +17194,9 @@ var Modal = forwardRef26(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx324(ModalScrollArea, { children: /* @__PURE__ */ jsx324(ModalBody, { children }) }),
-                isNotNil34(footer) ? /* @__PURE__ */ jsx324(ModalFooter, { children: footer }) : null,
-                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx324(
+                /* @__PURE__ */ jsx325(ModalScrollArea, { children: /* @__PURE__ */ jsx325(ModalBody, { children }) }),
+                isNotNil34(footer) ? /* @__PURE__ */ jsx325(ModalFooter, { children: footer }) : null,
+                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx325(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -17103,7 +17204,7 @@ var Modal = forwardRef26(
                     title
                   }
                 ),
-                /* @__PURE__ */ jsx324(ModalHiddenDescription, {})
+                /* @__PURE__ */ jsx325(ModalHiddenDescription, {})
               ]
             }
           )
@@ -17115,9 +17216,9 @@ var Modal = forwardRef26(
 Modal.displayName = "Modal_UI";
 
 // src/components/Modal/ModalCallouts.tsx
-import { jsx as jsx325, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx326, jsxs as jsxs55 } from "react/jsx-runtime";
 var ModalCallouts = ({ children }) => {
-  return /* @__PURE__ */ jsx325(
+  return /* @__PURE__ */ jsx326(
     Stack,
     {
       direction: "horizontal",
@@ -17128,17 +17229,17 @@ var ModalCallouts = ({ children }) => {
 };
 ModalCallouts.displayName = "ModalCallouts_UI";
 var ModalCallout = ({ title, image, children }) => {
-  return /* @__PURE__ */ jsxs54(Stack, { direction: "vertical", children: [
+  return /* @__PURE__ */ jsxs55(Stack, { direction: "vertical", children: [
     image,
-    /* @__PURE__ */ jsx325(Heading, { variant: "heading4", children: title }),
+    /* @__PURE__ */ jsx326(Heading, { variant: "heading4", children: title }),
     children
   ] });
 };
 ModalCallout.displayName = "ModalCallout_UI";
 
 // src/components/Popover/Popover.tsx
-import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import { styled as styled87, css as css42 } from "styled-components";
+import { Root as Root3, Trigger as Trigger3, Portal as Portal2, Content as Content3, Close } from "@radix-ui/react-popover";
+import { styled as styled88, css as css43 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
@@ -17148,12 +17249,12 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled86, css as css41, keyframes as keyframes7 } from "styled-components";
-import { jsx as jsx326, jsxs as jsxs55 } from "react/jsx-runtime";
-var StyledPath = styled86.path`
+import { styled as styled87, css as css42, keyframes as keyframes8 } from "styled-components";
+import { jsx as jsx327, jsxs as jsxs56 } from "react/jsx-runtime";
+var StyledPath = styled87.path`
   fill: var(--wui-color-border-secondary);
 `;
-var circleAnimation = keyframes7`
+var circleAnimation = keyframes8`
   0% {
     opacity: var(--wui-popover-arrow-circle-starting-opacity);
   }
@@ -17161,7 +17262,7 @@ var circleAnimation = keyframes7`
     opacity: 0;
   }
 `;
-var StyledCircle = styled86.circle`
+var StyledCircle = styled87.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -17182,13 +17283,13 @@ var StyledCircle = styled86.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css41`
+    ${({ $isAnimated }) => $isAnimated && css42`
         animation-name: ${circleAnimation};
       `}
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx326(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsx327(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs56(
     "svg",
     {
       fill: "none",
@@ -17197,8 +17298,8 @@ var PopoverArrow = ({ isAnimated }) => {
       width: "48",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx326(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
-        /* @__PURE__ */ jsx326(
+        /* @__PURE__ */ jsx327(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
+        /* @__PURE__ */ jsx327(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -17209,7 +17310,7 @@ var PopoverArrow = ({ isAnimated }) => {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx326(
+        /* @__PURE__ */ jsx327(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -17227,11 +17328,11 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx327, jsxs as jsxs56 } from "react/jsx-runtime";
-var StyledContent2 = styled87(Content2)`
+import { jsx as jsx328, jsxs as jsxs57 } from "react/jsx-runtime";
+var StyledContent3 = styled88(Content3)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css42`
+  ${({ $unstyled }) => !$unstyled && css43`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -17267,10 +17368,10 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs56(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx327(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx327(Portal, { children: /* @__PURE__ */ jsxs56(
-      StyledContent2,
+  return /* @__PURE__ */ jsxs57(Root3, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ jsx328(Trigger3, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx328(Portal2, { children: /* @__PURE__ */ jsxs57(
+      StyledContent3,
       {
         $colorScheme: colorScheme,
         sideOffset,
@@ -17278,17 +17379,17 @@ var Popover = ({
         $unstyled: unstyled,
         style,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx327(Close, { asChild: true, children: /* @__PURE__ */ jsx327(
+          !hideCloseButton && /* @__PURE__ */ jsx328(Close, { asChild: true, children: /* @__PURE__ */ jsx328(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx327(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx328(Icon, { type: "close" })
             }
           ) }),
-          withArrow ? /* @__PURE__ */ jsx327(PopoverArrow, { isAnimated }) : null,
-          /* @__PURE__ */ jsx327("div", { children })
+          withArrow ? /* @__PURE__ */ jsx328(PopoverArrow, { isAnimated }) : null,
+          /* @__PURE__ */ jsx328("div", { children })
         ]
       }
     ) })
@@ -17297,11 +17398,11 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled88 } from "styled-components";
+import { styled as styled89 } from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
-import { jsx as jsx328, jsxs as jsxs57 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled88.div`
+import { jsx as jsx329, jsxs as jsxs58 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled89.div`
   --progress-bar-height: 8px;
 
   display: flex;
@@ -17315,7 +17416,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled88.div`
+var ProgressBarLabel = styled89.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -17323,7 +17424,7 @@ var ProgressBarLabel = styled88.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled88(ProgressIndicator)`
+var StyledProgressIndicator = styled89(ProgressIndicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   width: 100%;
@@ -17333,7 +17434,7 @@ var StyledProgressIndicator = styled88(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled88(ProgressRoot)`
+var StyledProgressBar = styled89(ProgressRoot)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -17354,16 +17455,16 @@ var ProgressBar = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs57(ProgressBarWrapper, { children: [
-    isNotNil36(labelLeft) ? /* @__PURE__ */ jsx328(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsxs58(ProgressBarWrapper, { children: [
+    isNotNil36(labelLeft) ? /* @__PURE__ */ jsx329(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx329(
       StyledProgressBar,
       {
         $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx328(
+        children: /* @__PURE__ */ jsx329(
           StyledProgressIndicator,
           {
             $colorScheme: colorScheme,
@@ -17373,7 +17474,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil36(labelRight) ? /* @__PURE__ */ jsx328(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil36(labelRight) ? /* @__PURE__ */ jsx329(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -17381,17 +17482,17 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId6 } from "react";
-import { styled as styled89, css as css43 } from "styled-components";
-import { jsx as jsx329, jsxs as jsxs58 } from "react/jsx-runtime";
-var sizeSmall2 = css43`
+import { styled as styled90, css as css44 } from "styled-components";
+import { jsx as jsx330, jsxs as jsxs59 } from "react/jsx-runtime";
+var sizeSmall2 = css44`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
 `;
-var sizeMedium2 = css43`
+var sizeMedium2 = css44`
   --wui-radio-size: 16px;
   --wui-radio-icon-size: 8px;
 `;
-var sizeLarge2 = css43`
+var sizeLarge2 = css44`
   --wui-radio-size: 20px;
   --wui-radio-icon-size: 10px;
 `;
@@ -17404,7 +17505,7 @@ var getSizeCss3 = (size) => {
   }
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled89.div`
+var StyledRadioWrapper = styled90.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -17438,7 +17539,7 @@ var StyledRadioWrapper = styled89.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled89.div`
+var StyledRadioInput = styled90.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -17464,7 +17565,7 @@ var StyledRadioInput = styled89.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = styled89.input`
+var StyledHiddenRadioInput = styled90.input`
   ${visuallyHiddenStyle}
 `;
 var Radio = forwardRef27(
@@ -17491,14 +17592,14 @@ var Radio = forwardRef27(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs59(
       StyledRadioWrapper,
       {
         $disabled: disabled,
         $hideLabel: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx329(
+          /* @__PURE__ */ jsx330(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -17513,10 +17614,10 @@ var Radio = forwardRef27(
               value
             }
           ),
-          /* @__PURE__ */ jsx329(
+          /* @__PURE__ */ jsx330(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx329(StyledRadioInput, { $size: size }),
+              controlSlot: /* @__PURE__ */ jsx330(StyledRadioInput, { $size: size }),
               description,
               disabled,
               hideLabel,
@@ -17536,17 +17637,17 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId7 } from "react";
-import { styled as styled90, css as css44 } from "styled-components";
+import { styled as styled91, css as css45 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
-import { jsx as jsx330, jsxs as jsxs59 } from "react/jsx-runtime";
-var checkedStyles = css44`
+import { jsx as jsx331, jsxs as jsxs60 } from "react/jsx-runtime";
+var checkedStyles = css45`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-info);
   --wui-color-text: var(--wui-color-text-info);
   --wui-color-text-secondary: var(--wui-color-text-info);
 `;
-var disabledStyles = css44`
+var disabledStyles = css45`
   --wui-radio-card-border-color: var(--wui-color-border-disabled);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
   --wui-radio-card-cursor: not-allowed;
@@ -17554,10 +17655,10 @@ var disabledStyles = css44`
   --wui-color-text: var(--wui-color-text-disabled);
   --wui-color-text-secondary: var(--wui-color-text-disabled);
 `;
-var focusStyles = css44`
+var focusStyles = css45`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
-var imageCoverStyles = css44`
+var imageCoverStyles = css45`
   --wui-radio-card-image-inset: 0px;
   --wui-radio-card-border-width: 0px;
   --wui-inset-shadow-width: 1px;
@@ -17588,7 +17689,7 @@ var imageCoverStyles = css44`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled90.label`
+var StyledCard2 = styled91.label`
   --wui-radio-card-border-color: var(--wui-color-border-secondary);
   --wui-radio-card-background-color: var(--wui-color-bg-surface);
   --wui-radio-card-cursor: pointer;
@@ -17642,7 +17743,7 @@ var StyledCard2 = styled90.label`
     }
   }
 `;
-var StyledHiddenInput = styled90.input`
+var StyledHiddenInput = styled91.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = forwardRef28(
@@ -17668,7 +17769,7 @@ var RadioCardRoot = forwardRef28(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined15(value) && isNotUndefined15(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs59(
+    return /* @__PURE__ */ jsxs60(
       StyledCard2,
       {
         $aspectRatio: aspectRatio,
@@ -17676,7 +17777,7 @@ var RadioCardRoot = forwardRef28(
         $padding: padding,
         htmlFor: computedId,
         children: [
-          /* @__PURE__ */ jsx330(
+          /* @__PURE__ */ jsx331(
             StyledHiddenInput,
             {
               ...props,
@@ -17699,12 +17800,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled92 } from "styled-components";
+import { styled as styled93 } from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled91 } from "styled-components";
-var RadioCardIndicator = styled91.div`
+import { styled as styled92 } from "styled-components";
+var RadioCardIndicator = styled92.div`
   --wui-radio-card-indicator-size: 14px;
   --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
   --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
@@ -17753,22 +17854,22 @@ var RadioCardIndicator = styled91.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx331, jsxs as jsxs60 } from "react/jsx-runtime";
-var StyledCardContent = styled92.div`
+import { jsx as jsx332, jsxs as jsxs61 } from "react/jsx-runtime";
+var StyledCardContent = styled93.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled92.div`
+var StyledCardIcon = styled93.div`
   display: contents;
 `;
-var StyledGatedIcon = styled92.div`
+var StyledGatedIcon = styled93.div`
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 1;
 `;
-var StyledIndicatorContainer = styled92.div`
+var StyledIndicatorContainer = styled93.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -17780,9 +17881,9 @@ var RadioCardDefaultLayout = ({
   showIndicator = true,
   isGated = false
 }) => {
-  return /* @__PURE__ */ jsxs60(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx331(StyledIndicatorContainer, { $hasIcon: isNotNil37(icon), children: /* @__PURE__ */ jsx331(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
-    isGated ? /* @__PURE__ */ jsx331(StyledGatedIcon, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsxs61(StyledCardContent, { children: [
+    showIndicator ? /* @__PURE__ */ jsx332(StyledIndicatorContainer, { $hasIcon: isNotNil37(icon), children: /* @__PURE__ */ jsx332(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    isGated ? /* @__PURE__ */ jsx332(StyledGatedIcon, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx332(
       Icon,
       {
         colorScheme: "purple",
@@ -17790,16 +17891,16 @@ var RadioCardDefaultLayout = ({
         type: "sparkle"
       }
     ) }) : null,
-    /* @__PURE__ */ jsxs60(Stack, { gap: "space-02", children: [
-      isNotNil37(icon) && /* @__PURE__ */ jsx331(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
-      /* @__PURE__ */ jsxs60(
+    /* @__PURE__ */ jsxs61(Stack, { gap: "space-02", children: [
+      isNotNil37(icon) && /* @__PURE__ */ jsx332(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      /* @__PURE__ */ jsxs61(
         Stack,
         {
           gap: "space-01",
           style: isNotNil37(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil37(label) && /* @__PURE__ */ jsx331(Text, { variant: "label3", children: /* @__PURE__ */ jsx331("strong", { children: label }) }),
-            isNotNil37(description) && /* @__PURE__ */ jsx331(
+            isNotNil37(label) && /* @__PURE__ */ jsx332(Text, { variant: "label3", children: /* @__PURE__ */ jsx332("strong", { children: label }) }),
+            isNotNil37(description) && /* @__PURE__ */ jsx332(
               Text,
               {
                 prominence: "secondary",
@@ -17816,23 +17917,23 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import { styled as styled93 } from "styled-components";
-var RadioCardChildrenContainer = styled93.div`
+import { styled as styled94 } from "styled-components";
+var RadioCardChildrenContainer = styled94.div`
   flex: 1 1 auto;
 `;
 
 // src/components/RadioCard/RadioCard.tsx
-import { jsx as jsx332 } from "react/jsx-runtime";
+import { jsx as jsx333 } from "react/jsx-runtime";
 var RadioCard = forwardRef29(
   ({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx332(
+    return /* @__PURE__ */ jsx333(
       RadioCardRoot,
       {
         ref,
         isGated,
         padding: children != null ? "space-00" : "space-04",
         ...rootProps,
-        children: children != null ? /* @__PURE__ */ jsx332(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx332(
+        children: children != null ? /* @__PURE__ */ jsx333(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx333(
           RadioCardDefaultLayout,
           {
             description,
@@ -17850,17 +17951,17 @@ RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx334 } from "react/jsx-runtime";
 var RadioCardImage = forwardRef30(
   ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx333(
+    return /* @__PURE__ */ jsx334(
       RadioCardRoot,
       {
         ref,
         ...rootProps,
         aspectRatio,
         padding,
-        children: /* @__PURE__ */ jsx333(
+        children: /* @__PURE__ */ jsx334(
           Image,
           {
             alt: label,
@@ -17878,49 +17979,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef22, useState as useState24 } from "react";
-import { styled as styled94 } from "styled-components";
+import { styled as styled95 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx334, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx335, jsxs as jsxs62 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled94.div`
+var Container10 = styled95.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled94.div`
+var ScrollContainer = styled95.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled94.div`
+var Shadow = styled95.div`
   pointer-events: none;
   position: absolute;
   transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
   box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
   z-index: 1;
 `;
-var ShadowAtTop = styled94(Shadow)`
+var ShadowAtTop = styled95(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled94(Shadow)`
+var ShadowAtBottom = styled95(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled94(Shadow)`
+var ShadowAtLeft = styled95(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled94(Shadow)`
+var ShadowAtRight = styled95(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -17960,12 +18061,12 @@ var ScrollArea = forwardRef31(
     useEffect21(() => {
       updateShadows();
     }, [updateShadows]);
-    return /* @__PURE__ */ jsxs61(Container10, { style, children: [
-      /* @__PURE__ */ jsx334(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
-      /* @__PURE__ */ jsx334(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
-      /* @__PURE__ */ jsx334(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
-      /* @__PURE__ */ jsx334(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
-      /* @__PURE__ */ jsx334(
+    return /* @__PURE__ */ jsxs62(Container10, { style, children: [
+      /* @__PURE__ */ jsx335(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
+      /* @__PURE__ */ jsx335(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
+      /* @__PURE__ */ jsx335(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
+      /* @__PURE__ */ jsx335(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
+      /* @__PURE__ */ jsx335(
         ScrollContainer,
         {
           ref: scrollContainerRef,
@@ -17982,13 +18083,13 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled96, css as css46 } from "styled-components";
+import { styled as styled97, css as css47 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState25 } from "react";
-import { jsx as jsx335 } from "react/jsx-runtime";
+import { jsx as jsx336 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
@@ -18009,7 +18110,7 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx335(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx336(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = useContext15(SelectedItemStyleContext);
@@ -18020,7 +18121,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled95, css as css45 } from "styled-components";
+import { styled as styled96, css as css46 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -18036,13 +18137,13 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx336 } from "react/jsx-runtime";
-var selectedItemIndicatorStyles = css45`
+import { jsx as jsx337 } from "react/jsx-runtime";
+var selectedItemIndicatorStyles = css46`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = styled95.div`
+var SelectedItemIndicatorDiv = styled96.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -18058,7 +18159,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsx337(
     SelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -18068,8 +18169,8 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx337, jsxs as jsxs62 } from "react/jsx-runtime";
-var segmentedControlStyles = css46`
+import { jsx as jsx338, jsxs as jsxs63 } from "react/jsx-runtime";
+var segmentedControlStyles = css47`
   ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
   ${({ $colorScheme }) => $colorScheme !== "nav" && `--wui-color-text-selected: var(--wui-color-text-link);`}
 
@@ -18083,7 +18184,7 @@ var segmentedControlStyles = css46`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled96(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled97(ToggleGroupRoot2)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef32(
@@ -18099,7 +18200,7 @@ var SegmentedControl = forwardRef32(
     if (isNil18(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx337(
+    return /* @__PURE__ */ jsx338(
       StyledSegmentedControl,
       {
         ref,
@@ -18112,9 +18213,9 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx337(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs62(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx338(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs63(SelectedItemStyleProvider, { children: [
           children,
-          /* @__PURE__ */ jsx337(SelectedItemIndicator, {})
+          /* @__PURE__ */ jsx338(SelectedItemIndicator, {})
         ] }) })
       }
     );
@@ -18124,11 +18225,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect22, useRef as useRef23 } from "react";
-import { styled as styled97, css as css47 } from "styled-components";
+import { styled as styled98, css as css48 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil38 } from "@wistia/type-guards";
-import { jsxs as jsxs63 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css47`
+import { jsxs as jsxs64 } from "react/jsx-runtime";
+var segmentedControlItemStyles = css48`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -18196,7 +18297,7 @@ var segmentedControlItemStyles = css47`
     }
   }
 `;
-var StyledSegmentedControlItem = styled97(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled98(ToggleGroupItem2)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef33(
@@ -18237,7 +18338,7 @@ var SegmentedControlItem = forwardRef33(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs64(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
@@ -18259,19 +18360,19 @@ SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 
 // src/components/Select/Select.tsx
 import {
-  Root as Root3,
-  Trigger as Trigger3,
-  Portal as Portal2,
-  Content as Content3,
+  Root as Root4,
+  Trigger as Trigger4,
+  Portal as Portal3,
+  Content as Content4,
   ScrollUpButton,
   Viewport,
   Value,
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled98, css as css48 } from "styled-components";
-import { jsx as jsx338, jsxs as jsxs64 } from "react/jsx-runtime";
-var StyledTrigger2 = styled98(Trigger3)`
+import { styled as styled99, css as css49 } from "styled-components";
+import { jsx as jsx339, jsxs as jsxs65 } from "react/jsx-runtime";
+var StyledTrigger2 = styled99(Trigger4)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -18317,7 +18418,7 @@ var StyledTrigger2 = styled98(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled98(Content3)`
+var StyledContent4 = styled99(Content4)`
   --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);
@@ -18339,15 +18440,15 @@ var StyledContent3 = styled98(Content3)`
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css48`
+var scrollButtonStyles = css49`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled98(ScrollDownButton)`
+var StyledScrollDownButton = styled99(ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled98(ScrollUpButton)`
+var StyledScrollUpButton = styled99(ScrollUpButton)`
   ${scrollButtonStyles}
 `;
 var Select = forwardRef34(
@@ -18370,8 +18471,8 @@ var Select = forwardRef34(
     if (forceOpen) {
       rootProps["open"] = true;
     }
-    return /* @__PURE__ */ jsxs64(Root3, { ...rootProps, children: [
-      /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs65(Root4, { ...rootProps, children: [
+      /* @__PURE__ */ jsxs65(
         StyledTrigger2,
         {
           ref: forwardedRef,
@@ -18379,8 +18480,8 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx338(Value, { placeholder }),
-            /* @__PURE__ */ jsx338(
+            /* @__PURE__ */ jsx339(Value, { placeholder }),
+            /* @__PURE__ */ jsx339(
               Icon,
               {
                 size: "md",
@@ -18390,21 +18491,21 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx338(Portal2, { children: /* @__PURE__ */ jsxs64(
-        StyledContent3,
+      /* @__PURE__ */ jsx339(Portal3, { children: /* @__PURE__ */ jsxs65(
+        StyledContent4,
         {
           position: "popper",
           sideOffset: 8,
           children: [
-            /* @__PURE__ */ jsx338(StyledScrollUpButton, { children: /* @__PURE__ */ jsx338(
+            /* @__PURE__ */ jsx339(StyledScrollUpButton, { children: /* @__PURE__ */ jsx339(
               Icon,
               {
                 size: "sm",
                 type: "caret-up"
               }
             ) }),
-            /* @__PURE__ */ jsx338(Viewport, { children }),
-            /* @__PURE__ */ jsx338(StyledScrollDownButton, { children: /* @__PURE__ */ jsx338(
+            /* @__PURE__ */ jsx339(Viewport, { children }),
+            /* @__PURE__ */ jsx339(StyledScrollDownButton, { children: /* @__PURE__ */ jsx339(
               Icon,
               {
                 size: "sm",
@@ -18422,10 +18523,10 @@ Select.displayName = "Select_UI";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
-import { styled as styled99 } from "styled-components";
+import { styled as styled100 } from "styled-components";
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
-import { jsx as jsx339, jsxs as jsxs65 } from "react/jsx-runtime";
-var StyledItem = styled99(Item)`
+import { jsx as jsx340, jsxs as jsxs66 } from "react/jsx-runtime";
+var StyledItem = styled100(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -18453,18 +18554,18 @@ var StyledItem = styled99(Item)`
 `;
 var SelectOption = forwardRef35(
   ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs66(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil39(selectedDisplayValue) ? /* @__PURE__ */ jsxs65("div", { children: [
+          isNotNil39(selectedDisplayValue) ? /* @__PURE__ */ jsxs66("div", { children: [
             children,
-            /* @__PURE__ */ jsx339("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx339(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx339(ItemText, { children }),
-          /* @__PURE__ */ jsx339(ItemIndicator, { children: /* @__PURE__ */ jsx339(
+            /* @__PURE__ */ jsx340("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx340(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx340(ItemText, { children }),
+          /* @__PURE__ */ jsx340(ItemIndicator, { children: /* @__PURE__ */ jsx340(
             Icon,
             {
               size: "md",
@@ -18480,14 +18581,14 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
-import { styled as styled100 } from "styled-components";
-import { jsx as jsx340, jsxs as jsxs66 } from "react/jsx-runtime";
-var StyledLabel4 = styled100(Label3)`
+import { styled as styled101 } from "styled-components";
+import { jsx as jsx341, jsxs as jsxs67 } from "react/jsx-runtime";
+var StyledLabel4 = styled101(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs66(Group, { ...props, children: [
-    /* @__PURE__ */ jsx340(StyledLabel4, { children: /* @__PURE__ */ jsx340(
+  return /* @__PURE__ */ jsxs67(Group, { ...props, children: [
+    /* @__PURE__ */ jsx341(StyledLabel4, { children: /* @__PURE__ */ jsx341(
       Heading,
       {
         renderAs: "span",
@@ -18506,10 +18607,10 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled101 } from "styled-components";
+import { styled as styled102 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
-import { jsx as jsx341, jsxs as jsxs67 } from "react/jsx-runtime";
-var SliderContainer = styled101.div`
+import { jsx as jsx342, jsxs as jsxs68 } from "react/jsx-runtime";
+var SliderContainer = styled102.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
   --wui-slider-range-color: var(--wui-color-bg-fill);
@@ -18525,7 +18626,7 @@ var SliderContainer = styled101.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled101(RadixSliderRoot)`
+var StyledSliderRoot = styled102(RadixSliderRoot)`
   position: relative;
   display: flex;
   align-items: center;
@@ -18533,20 +18634,20 @@ var StyledSliderRoot = styled101(RadixSliderRoot)`
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled101(RadixSliderTrack)`
+var StyledSliderTrack = styled102(RadixSliderTrack)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
   flex-grow: 1;
   height: 6px;
   position: relative;
 `;
-var StyledSliderRange = styled101(RadixSliderRange)`
+var StyledSliderRange = styled102(RadixSliderRange)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = styled101(RadixSliderThumb)`
+var StyledSliderThumb = styled102(RadixSliderThumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -18597,12 +18698,12 @@ var Slider = ({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx342(
     SliderContainer,
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs67(
+      children: /* @__PURE__ */ jsxs68(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -18615,8 +18716,8 @@ var Slider = ({
           step,
           ...value ? { value } : {},
           children: [
-            /* @__PURE__ */ jsx341(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx341(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
-            values.map((_, index) => /* @__PURE__ */ jsx341(
+            /* @__PURE__ */ jsx342(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx342(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+            values.map((_, index) => /* @__PURE__ */ jsx342(
               StyledSliderThumb,
               {
                 "data-testid": `${dataTestId}-thumb-${index}`
@@ -18632,11 +18733,11 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-import { styled as styled102 } from "styled-components";
+import { styled as styled103 } from "styled-components";
 import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 import { cloneElement as cloneElement9 } from "react";
-import { jsx as jsx342, jsxs as jsxs68 } from "react/jsx-runtime";
-var StyledSplitButton = styled102.span`
+import { jsx as jsx343, jsxs as jsxs69 } from "react/jsx-runtime";
+var StyledSplitButton = styled103.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
 
@@ -18657,7 +18758,7 @@ var StyledSplitButton = styled102.span`
 var SplitButton = ({
   children,
   menuLabel = "Select an option",
-  menuIcon = /* @__PURE__ */ jsx342(Icon, { type: "caret-down" }),
+  menuIcon = /* @__PURE__ */ jsx343(Icon, { type: "caret-down" }),
   menuItems,
   disabled = false,
   colorScheme = "inherit",
@@ -18668,8 +18769,8 @@ var SplitButton = ({
   menuProps = {},
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs68(StyledSplitButton, { $colorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsxs69(StyledSplitButton, { $colorScheme: colorScheme, children: [
+    /* @__PURE__ */ jsx343(
       Button,
       {
         disabled,
@@ -18680,12 +18781,12 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil40(menuItems) && /* @__PURE__ */ jsx342(
+    isNotNil40(menuItems) && /* @__PURE__ */ jsx343(
       Menu,
       {
         ...menuProps,
         disabled,
-        trigger: /* @__PURE__ */ jsx342(
+        trigger: /* @__PURE__ */ jsx343(
           IconButton,
           {
             disabled,
@@ -18705,25 +18806,25 @@ var SplitButton = ({
 SplitButton.displayName = "SplitButton_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled103, css as css49 } from "styled-components";
-import { jsx as jsx343 } from "react/jsx-runtime";
-var StyledTable = styled103.table`
+import { styled as styled104, css as css50 } from "styled-components";
+import { jsx as jsx344 } from "react/jsx-runtime";
+var StyledTable = styled104.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && css49`
+  ${({ $divided }) => $divided && css50`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && css49`
+  ${({ $striped }) => $striped && css50`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css49`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css50`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -18736,7 +18837,7 @@ var Table = ({
   visuallyHiddenHeader = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx343(
+  return /* @__PURE__ */ jsx344(
     StyledTable,
     {
       $divided: divided,
@@ -18749,37 +18850,37 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import { styled as styled104 } from "styled-components";
+import { styled as styled105 } from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext11 } from "react";
 var TableSectionContext = createContext11(null);
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx344 } from "react/jsx-runtime";
-var StyledTableBody = styled104.tbody`
+import { jsx as jsx345 } from "react/jsx-runtime";
+var StyledTableBody = styled105.tbody`
   width: 100%;
 `;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx344(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx344(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ jsx345(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx345(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled105, css as css50 } from "styled-components";
-import { jsx as jsx345 } from "react/jsx-runtime";
-var sharedStyles = css50`
+import { styled as styled106, css as css51 } from "styled-components";
+import { jsx as jsx346 } from "react/jsx-runtime";
+var sharedStyles = css51`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled105.th`
+var StyledTh = styled106.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 = styled105.td`
+var StyledTd = styled106.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -18788,39 +18889,39 @@ var StyledTd = styled105.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext17(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx345(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx346(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx345(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx346(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFoot.tsx
-import { styled as styled106 } from "styled-components";
-import { jsx as jsx346 } from "react/jsx-runtime";
-var StyledTableFoot = styled106.tfoot`
+import { styled as styled107 } from "styled-components";
+import { jsx as jsx347 } from "react/jsx-runtime";
+var StyledTableFoot = styled107.tfoot`
   width: 100%;
 `;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx346(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx346(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx347(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx347(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-import { styled as styled107 } from "styled-components";
-import { jsx as jsx347 } from "react/jsx-runtime";
-var StyledThead = styled107.thead`
+import { styled as styled108 } from "styled-components";
+import { jsx as jsx348 } from "react/jsx-runtime";
+var StyledThead = styled108.thead`
   width: 100%;
 `;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx347(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx347(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx348(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx348(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import { styled as styled108 } from "styled-components";
-import { jsx as jsx348 } from "react/jsx-runtime";
-var StyledTableRow = styled108.tr`
+import { styled as styled109 } from "styled-components";
+import { jsx as jsx349 } from "react/jsx-runtime";
+var StyledTableRow = styled109.tr`
   width: 100%;
 `;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx348(StyledTableRow, { ...props, children });
+  return /* @__PURE__ */ jsx349(StyledTableRow, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
@@ -18841,7 +18942,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx349 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
 var Tabs = ({
   children,
   value: valueProp,
@@ -18869,42 +18970,42 @@ var Tabs = ({
   if (isNotNil41(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx349(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx349(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx349(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx350(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx350(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx350(SelectedItemStyleProvider, { children }) }) });
 };
 Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx350 } from "react/jsx-runtime";
+import { jsx as jsx351 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx350(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx351(RadixTabsContent, { value, children });
 };
 TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { styled as styled110 } from "styled-components";
+import { styled as styled111 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import { styled as styled109 } from "styled-components";
-var TabsSelectedItemIndicatorDiv = styled109(SelectedItemIndicatorDiv)`
+import { styled as styled110 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled110(SelectedItemIndicatorDiv)`
   :has(button[role='tab']:focus-visible) > & {
     outline: 2px solid var(--wui-color-focus-ring);
   }
 `;
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-import { jsx as jsx351 } from "react/jsx-runtime";
+import { jsx as jsx352 } from "react/jsx-runtime";
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
   if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx351(
+  return /* @__PURE__ */ jsx352(
     TabsSelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -18914,19 +19015,19 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx352, jsxs as jsxs69 } from "react/jsx-runtime";
-var StyledRadixTabsList = styled110(RadixTabList)`
+import { jsx as jsx353, jsxs as jsxs70 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled111(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
-  return /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs70(
     StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
       "aria-label": props["aria-label"],
       children: [
         children,
-        /* @__PURE__ */ jsx352(SelectedTabIndicator, {})
+        /* @__PURE__ */ jsx353(SelectedTabIndicator, {})
       ]
     }
   );
@@ -18938,9 +19039,9 @@ import { forwardRef as forwardRef36, useEffect as useEffect23, useRef as useRef2
 import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import { styled as styled111 } from "styled-components";
+import { styled as styled112 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledRadixTabsTrigger = styled111(RadixTabsTrigger)`
+var StyledRadixTabsTrigger = styled112(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -18949,7 +19050,7 @@ var StyledRadixTabsTrigger = styled111(RadixTabsTrigger)`
 `;
 
 // src/components/Tabs/TabsTrigger.tsx
-import { jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsxs as jsxs71 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef36(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
@@ -18981,7 +19082,7 @@ var TabsTrigger = forwardRef36(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs70(
+    return /* @__PURE__ */ jsxs71(
       StyledRadixTabsTrigger,
       {
         ...otherProps,
@@ -19001,10 +19102,10 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import { styled as styled112 } from "styled-components";
+import { styled as styled113 } from "styled-components";
 import { isNotNil as isNotNil43 } from "@wistia/type-guards";
-import { jsx as jsx353, jsxs as jsxs71 } from "react/jsx-runtime";
-var StyledThumbnailBadge = styled112.div`
+import { jsx as jsx354, jsxs as jsxs72 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled113.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -19030,16 +19131,16 @@ var StyledThumbnailBadge = styled112.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs71(StyledThumbnailBadge, { ...props, children: [
+  return /* @__PURE__ */ jsxs72(StyledThumbnailBadge, { ...props, children: [
     isNotNil43(icon) && icon,
-    /* @__PURE__ */ jsx353("span", { children: label })
+    /* @__PURE__ */ jsx354("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState27, useRef as useRef25, useCallback as useCallback20, useMemo as useMemo17 } from "react";
-import { styled as styled114 } from "styled-components";
+import { styled as styled115 } from "styled-components";
 import {
   isNil as isNil19,
   isNotNil as isNotNil46,
@@ -19051,9 +19152,9 @@ import {
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { css as css51 } from "styled-components";
+import { css as css52 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css51`
+  defaultDarkOne: css52`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -19061,7 +19162,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css51`
+  defaultDarkTwo: css52`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -19069,7 +19170,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css51`
+  defaultLightOne: css52`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -19077,13 +19178,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css51`
+  defaultLightTwo: css52`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css51`
+  defaultMidOne: css52`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -19091,13 +19192,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css51`
+  defaultMidTwo: css52`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css51`
+  green: css52`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -19105,7 +19206,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css51`
+  greenWithPop: css52`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -19113,7 +19214,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css51`
+  pink: css52`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -19121,7 +19222,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css51`
+  pinkWithPop: css52`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -19129,7 +19230,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css51`
+  playfulGradientOne: css52`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -19137,7 +19238,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css51`
+  playfulGradientTwo: css52`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -19145,13 +19246,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css51`
+  purple: css52`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css51`
+  purpleWithPop: css52`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -19159,7 +19260,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css51`
+  yellow: css52`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -19167,7 +19268,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css51`
+  yellowWithPop: css52`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -19182,10 +19283,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import { styled as styled113 } from "styled-components";
+import { styled as styled114 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
-import { jsx as jsx354, jsxs as jsxs72 } from "react/jsx-runtime";
-var ScrubLine = styled113.div`
+import { jsx as jsx355, jsxs as jsxs73 } from "react/jsx-runtime";
+var ScrubLine = styled114.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -19296,14 +19397,14 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs73(
     "div",
     {
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx354("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx354(
+        /* @__PURE__ */ jsx355("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx355(
           ScrubLine,
           {
             style: {
@@ -19317,7 +19418,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx355, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx356, jsxs as jsxs74 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -19326,19 +19427,19 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled114.img`
+var WideThumbnailImage = styled115.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled114.img`
+var SquareThumbnailImage = styled115.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx355(
+    return /* @__PURE__ */ jsx356(
       WideThumbnailImage,
       {
         alt: "",
@@ -19347,7 +19448,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx355(
+  return /* @__PURE__ */ jsx356(
     SquareThumbnailImage,
     {
       alt: "",
@@ -19356,7 +19457,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = styled114.div`
+var StyledThumbnailContainer = styled115.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -19364,7 +19465,7 @@ var StyledThumbnailContainer = styled114.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = styled114.div`
+var StyledThumbnail = styled115.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
   background-image: ${({ $backgroundUrl }) => isNotNil46($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
@@ -19399,7 +19500,7 @@ var StoryboardRenderer = ({
   const { url, width: sbWidth, height: sbHeight, frameHeight, frameWidth, frameCount } = storyboard;
   const targetWidth = isString4(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
-  return /* @__PURE__ */ jsx355(
+  return /* @__PURE__ */ jsx356(
     ThumbnailStoryboardViewer,
     {
       cursorPosition: effectiveCursorPosition,
@@ -19489,7 +19590,7 @@ var Thumbnail = forwardRef37(
     }, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
     let thumbnailContent = null;
     if (storyboard && shouldRenderStoryboard) {
-      thumbnailContent = /* @__PURE__ */ jsx355(
+      thumbnailContent = /* @__PURE__ */ jsx356(
         StoryboardRenderer,
         {
           aspectRatio,
@@ -19501,7 +19602,7 @@ var Thumbnail = forwardRef37(
         }
       );
     } else if (hasValidThumbnailUrl(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx355(
+      thumbnailContent = /* @__PURE__ */ jsx356(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -19511,7 +19612,7 @@ var Thumbnail = forwardRef37(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsx355(
+    return /* @__PURE__ */ jsx356(
       StyledThumbnailContainer,
       {
         ref,
@@ -19524,7 +19625,7 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         ...props,
-        children: /* @__PURE__ */ jsxs73(
+        children: /* @__PURE__ */ jsxs74(
           StyledThumbnail,
           {
             $backgroundUrl: backgroundUrl,
@@ -19544,16 +19645,16 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import { cloneElement as cloneElement10, Children as Children11 } from "react";
-import { styled as styled115 } from "styled-components";
+import { styled as styled116 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx356 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled115.div`
+import { jsx as jsx357 } from "react/jsx-runtime";
+var ThumbnailCollageContainer = styled116.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = styled115.div`
+var StyledThumbnailCollage = styled116.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -19611,7 +19712,7 @@ var ThumbnailCollage = ({
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx356(
+    /* @__PURE__ */ jsx357(
       Thumbnail,
       {
         gradientBackground,
@@ -19620,7 +19721,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx356(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx356(
+  return /* @__PURE__ */ jsx357(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx357(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -19632,26 +19733,26 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled116, css as css52 } from "styled-components";
+import { styled as styled117, css as css53 } from "styled-components";
 import { isNotNil as isNotNil47 } from "@wistia/type-guards";
-import { jsx as jsx357, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx358, jsxs as jsxs75 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx357(
+    return /* @__PURE__ */ jsx358(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx357("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" })
+        children: /* @__PURE__ */ jsx358("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__ */ jsx357(
+  return /* @__PURE__ */ jsx358(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx357("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" })
+      children: /* @__PURE__ */ jsx358("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" })
     }
   );
 };
@@ -19659,12 +19760,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx357(
+  return /* @__PURE__ */ jsx358(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx357("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" })
+      children: /* @__PURE__ */ jsx358("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" })
     }
   );
 };
@@ -19674,7 +19775,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled116.svg`
+var WistiaLogoComponent = styled117.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -19690,12 +19791,12 @@ var WistiaLogoComponent = styled116.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css52`
+      return css53`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css52`
+    return css53`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -19732,7 +19833,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs74(
+  const Logo = /* @__PURE__ */ jsxs75(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -19745,14 +19846,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx357("title", { children: title }),
-        isNotNil47(description) ? /* @__PURE__ */ jsx357("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx358("title", { children: title }),
+        isNotNil47(description) ? /* @__PURE__ */ jsx358("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx357("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx358("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 export {
@@ -19851,6 +19952,7 @@ export {
   ModalCallouts,
   PersistentFileAmountLimitValidator,
   Popover,
+  PreviewCard,
   ProgressBar,
   Radio,
   RadioCard,