@wistia/ui 0.21.0 → 0.21.1-beta.166dc17a.14f0804

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.21.0
+ * @license @wistia/ui v0.21.1-beta.166dc17a.14f0804
  *
  * 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,
@@ -17531,22 +17632,382 @@ var Radio = forwardRef27(
 );
 Radio.displayName = "Radio_UI";
 
-// src/components/RadioCard/RadioCard.tsx
+// src/components/CheckboxCard/CheckboxCard.tsx
 import { forwardRef as forwardRef29 } from "react";
 
-// src/components/RadioCard/RadioCardRoot.tsx
+// src/components/CheckboxCard/CheckboxCardRoot.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-checkbox-card-border-color: var(--wui-color-focus-ring);
+  --wui-color-icon: var(--wui-color-icon-selected);
+  --wui-checkbox-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 = css45`
+  --wui-checkbox-card-border-color: var(--wui-color-border-disabled);
+  --wui-checkbox-card-background-color: var(--wui-color-bg-surface-disabled);
+  --wui-checkbox-card-cursor: not-allowed;
+  --wui-color-icon: var(--wui-color-icon-disabled);
+  --wui-color-text: var(--wui-color-text-disabled);
+  --wui-color-text-secondary: var(--wui-color-text-disabled);
+`;
+var focusStyles = css45`
+  outline: 2px solid var(--wui-color-focus-ring);
+`;
+var imageCoverStyles = css45`
+  --wui-checkbox-card-image-inset: 0px;
+  --wui-checkbox-card-border-width: 0px;
+  --wui-inset-shadow-width: 1px;
+  --wui-checkbox-card-border-color: rgb(0 0 0 / 25%);
+
+  overflow: hidden;
+
+  &:has(input:checked) {
+    --wui-checkbox-card-border-color: var(--wui-color-focus-ring);
+    --wui-checkbox-card-image-inset: 2px;
+    --wui-inset-shadow-width: 2px;
+  }
+
+  &:hover:not(:has(input:disabled, input:checked)) {
+    --wui-checkbox-card-border-color: rgb(0 0 0 / 50%);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--wui-checkbox-card-border-radius);
+    box-shadow:
+      inset 0 0 0 var(--wui-inset-shadow-width) var(--wui-checkbox-card-border-color),
+      inset 0 0 0 calc(var(--wui-checkbox-card-image-inset) * 2)
+        var(--wui-checkbox-card-background-color);
+    transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
+  }
+`;
+var StyledCard2 = styled91.label`
+  --wui-checkbox-card-border-color: var(--wui-color-border-secondary);
+  --wui-checkbox-card-background-color: var(--wui-color-bg-surface);
+  --wui-checkbox-card-cursor: pointer;
+  --wui-checkbox-card-border-width: 1px;
+  --wui-checkbox-card-border-radius: var(--wui-border-radius-02);
+
+  position: relative;
+  display: inline-flex;
+  padding: ${({ $padding }) => `var(--wui-${$padding})`};
+  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
+  border: var(--wui-checkbox-card-border-width) solid var(--wui-checkbox-card-border-color);
+  border-radius: var(--wui-checkbox-card-border-radius);
+  background-color: var(--wui-checkbox-card-background-color);
+  cursor: var(--wui-checkbox-card-cursor);
+  overflow: hidden;
+  transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
+
+  svg {
+    transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
+  }
+
+  &:hover {
+    --wui-checkbox-card-border-color: var(--wui-color-border-secondary-hover);
+  }
+
+  &:active {
+    --wui-checkbox-card-border-color: var(--wui-color-border-secondary-active);
+  }
+
+  &:has(input:checked) {
+    ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles}
+  }
+
+  &:has(input:disabled) {
+    ${disabledStyles}
+  }
+
+  &:has(input:focus-visible) {
+    ${focusStyles}
+  }
+
+  &:has([data-wui-checkbox-card-image]) {
+    &:has(input:disabled) {
+      [data-wui-checkbox-card-image] {
+        filter: grayscale(100%);
+      }
+    }
+
+    &:has([data-wui-checkbox-card-image='cover']) {
+      ${imageCoverStyles}
+    }
+  }
+`;
+var StyledHiddenInput = styled91.input`
+  ${visuallyHiddenStyle}
+`;
+var CheckboxCardRoot = forwardRef28(
+  ({
+    children,
+    disabled = false,
+    id,
+    isGated = false,
+    name,
+    onChange,
+    value,
+    aspectRatio = "initial",
+    padding = "space-04",
+    checked,
+    ...props
+  }, ref) => {
+    const generatedId = useId7();
+    const computedId = isNonEmptyString8(id) ? id : `wistia-ui-checkbox-card-${generatedId}`;
+    const checkboxGroupContext = useCheckboxGroup();
+    const contextName = checkboxGroupContext?.name;
+    const contextOnChange = checkboxGroupContext?.onChange;
+    const contextValue = checkboxGroupContext?.value;
+    const checkboxName = name ?? contextName;
+    const handleOnChange = onChange ?? contextOnChange;
+    const isChecked = isNotUndefined15(value) && isNotUndefined15(contextValue) ? contextValue.includes(value) : checked;
+    return /* @__PURE__ */ jsxs60(
+      StyledCard2,
+      {
+        $aspectRatio: aspectRatio,
+        $isGated: isGated,
+        $padding: padding,
+        htmlFor: computedId,
+        children: [
+          /* @__PURE__ */ jsx331(
+            StyledHiddenInput,
+            {
+              ...props,
+              ref,
+              checked: isChecked,
+              disabled,
+              id: computedId,
+              name: checkboxName,
+              onChange: handleOnChange,
+              type: "checkbox",
+              value
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+CheckboxCardRoot.displayName = "CheckboxCardRoot_UI";
+
+// src/components/CheckboxCard/CheckboxCardDefaultLayout.tsx
+import { styled as styled93 } from "styled-components";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+
+// src/components/CheckboxCard/CheckboxCardIndicator.tsx
+import { styled as styled92 } from "styled-components";
+import { jsx as jsx332 } from "react/jsx-runtime";
+var StyledIndicatorBox = styled92.div`
+  --wui-checkbox-card-indicator-size: 14px;
+  --wui-checkbox-card-indicator-background-color: var(--wui-color-bg-surface);
+  --wui-checkbox-card-indicator-border-color: var(--wui-color-border-secondary);
+  --wui-checkbox-card-indicator-icon-color: transparent;
+
+  width: var(--wui-checkbox-card-indicator-size);
+  height: var(--wui-checkbox-card-indicator-size);
+  min-width: var(--wui-checkbox-card-indicator-size);
+  min-height: var(--wui-checkbox-card-indicator-size);
+  background-color: var(--wui-checkbox-card-indicator-background-color);
+  border: 1px solid var(--wui-checkbox-card-indicator-border-color);
+  border-radius: var(--wui-border-radius-01);
+  display: grid;
+  place-content: center;
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
+
+  ${StyledCard2}:hover & {
+    --wui-checkbox-card-indicator-border-color: var(--wui-color-border-secondary-hover);
+  }
+
+  ${StyledCard2}:has(input:checked) & {
+    --wui-checkbox-card-indicator-background-color: var(--wui-color-bg-fill);
+    --wui-checkbox-card-indicator-border-color: transparent;
+    --wui-checkbox-card-indicator-icon-color: var(--wui-color-bg-fill-white);
+  }
+
+  ${StyledCard2}:has(input:disabled) & {
+    --wui-checkbox-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
+    --wui-checkbox-card-indicator-border-color: var(--wui-color-border-secondary);
+  }
+
+  ${StyledCard2}:has(input:disabled):has(input:checked) & {
+    --wui-checkbox-card-indicator-icon-color: var(--wui-color-icon-disabled);
+  }
+`;
+var CheckIcon2 = () => /* @__PURE__ */ jsx332(
+  "svg",
+  {
+    fill: "inherit",
+    height: "8",
+    viewBox: "0 0 10 8",
+    width: "10",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx332(
+      "path",
+      {
+        d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
+        fill: "var(--wui-checkbox-card-indicator-icon-color)"
+      }
+    )
+  }
+);
+var CheckboxCardIndicator = ({ "data-testid": testId }) => /* @__PURE__ */ jsx332(StyledIndicatorBox, { "data-testid": testId, children: /* @__PURE__ */ jsx332(CheckIcon2, {}) });
+CheckboxCardIndicator.displayName = "CheckboxCardIndicator_UI";
+
+// src/components/CheckboxCard/CheckboxCardDefaultLayout.tsx
+import { jsx as jsx333, jsxs as jsxs61 } from "react/jsx-runtime";
+var StyledCardContent = styled93.div`
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--wui-space-02);
+`;
+var StyledCardIcon = styled93.div`
+  display: contents;
+`;
+var StyledGatedIcon = styled93.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+`;
+var StyledIndicatorContainer = styled93.div`
+  height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
+  display: flex;
+  align-items: center;
+`;
+var CheckboxCardDefaultLayout = ({
+  icon,
+  label,
+  description,
+  showIndicator = true,
+  isGated = false
+}) => {
+  return /* @__PURE__ */ jsxs61(StyledCardContent, { children: [
+    showIndicator ? /* @__PURE__ */ jsx333(StyledIndicatorContainer, { $hasIcon: isNotNil37(icon), children: /* @__PURE__ */ jsx333(CheckboxCardIndicator, { "data-testid": "wui-checkbox-card-indicator" }) }) : null,
+    isGated ? /* @__PURE__ */ jsx333(StyledGatedIcon, { "data-testid": "wui-checkbox-gated-icon", children: /* @__PURE__ */ jsx333(
+      Icon,
+      {
+        colorScheme: "purple",
+        "data-testid": "wui-icon-sparkle",
+        type: "sparkle"
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs61(Stack, { gap: "space-02", children: [
+      isNotNil37(icon) && /* @__PURE__ */ jsx333(StyledCardIcon, { "data-wui-checkbox-card-icon": true, children: icon }),
+      /* @__PURE__ */ jsxs61(
+        Stack,
+        {
+          gap: "space-01",
+          style: isNotNil37(icon) ? { paddingLeft: 2 } : void 0,
+          children: [
+            isNotNil37(label) && /* @__PURE__ */ jsx333(Text, { variant: "label3", children: /* @__PURE__ */ jsx333("strong", { children: label }) }),
+            isNotNil37(description) && /* @__PURE__ */ jsx333(
+              Text,
+              {
+                prominence: "secondary",
+                variant: "body3",
+                children: description
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+CheckboxCardDefaultLayout.displayName = "CheckboxCardDefaultLayout_UI";
+
+// src/components/CheckboxCard/CheckboxCardChildrenContainer.tsx
+import { styled as styled94 } from "styled-components";
+var CheckboxCardChildrenContainer = styled94.div`
+  flex: 1 1 auto;
+`;
+
+// src/components/CheckboxCard/CheckboxCard.tsx
+import { jsx as jsx334 } from "react/jsx-runtime";
+var CheckboxCard = forwardRef29(
+  ({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx334(
+      CheckboxCardRoot,
+      {
+        ref,
+        isGated,
+        padding: children != null ? "space-00" : "space-04",
+        ...rootProps,
+        children: children != null ? /* @__PURE__ */ jsx334(CheckboxCardChildrenContainer, { "data-wui-checkbox-card-image": "cover", children }) : /* @__PURE__ */ jsx334(
+          CheckboxCardDefaultLayout,
+          {
+            description,
+            icon,
+            isGated,
+            label,
+            showIndicator
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxCard.displayName = "CheckboxCard_UI";
+
+// src/components/CheckboxCard/CheckboxCardImage.tsx
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx335 } from "react/jsx-runtime";
+var CheckboxCardImage = forwardRef30(
+  ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx335(
+      CheckboxCardRoot,
+      {
+        ref,
+        ...rootProps,
+        aspectRatio,
+        padding,
+        children: /* @__PURE__ */ jsx335(
+          Image,
+          {
+            alt: label,
+            "data-wui-checkbox-card-image": padding === "space-00" ? "cover" : "contain",
+            fill: true,
+            fit: padding === "space-00" ? "cover" : "contain",
+            src: imageSrc
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxCardImage.displayName = "CheckboxCardImage_UI";
+
+// src/components/RadioCard/RadioCard.tsx
+import { forwardRef as forwardRef32 } from "react";
+
+// src/components/RadioCard/RadioCardRoot.tsx
+import { forwardRef as forwardRef31, useId as useId8 } from "react";
+import { styled as styled95, css as css46 } from "styled-components";
+import { isNonEmptyString as isNonEmptyString9, isNotUndefined as isNotUndefined16 } from "@wistia/type-guards";
+import { jsx as jsx336, jsxs as jsxs62 } from "react/jsx-runtime";
+var checkedStyles2 = css46`
   --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 disabledStyles2 = css46`
   --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 +18015,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 focusStyles2 = css46`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
-var imageCoverStyles = css44`
+var imageCoverStyles2 = css46`
   --wui-radio-card-image-inset: 0px;
   --wui-radio-card-border-width: 0px;
   --wui-inset-shadow-width: 1px;
@@ -17588,7 +18049,7 @@ var imageCoverStyles = css44`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled90.label`
+var StyledCard3 = styled95.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;
@@ -17619,15 +18080,15 @@ var StyledCard2 = styled90.label`
   }
 
   &:has(input:checked) {
-    ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles}
+    ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles2}
   }
 
   &:has(input:disabled) {
-    ${disabledStyles}
+    ${disabledStyles2}
   }
 
   &:has(input:focus-visible) {
-    ${focusStyles}
+    ${focusStyles2}
   }
 
   &:has([data-wui-radio-card-image]) {
@@ -17638,14 +18099,14 @@ var StyledCard2 = styled90.label`
     }
 
     &:has([data-wui-radio-card-image='cover']) {
-      ${imageCoverStyles}
+      ${imageCoverStyles2}
     }
   }
 `;
-var StyledHiddenInput = styled90.input`
+var StyledHiddenInput2 = styled95.input`
   ${visuallyHiddenStyle}
 `;
-var RadioCardRoot = forwardRef28(
+var RadioCardRoot = forwardRef31(
   ({
     children,
     disabled = false,
@@ -17659,25 +18120,25 @@ var RadioCardRoot = forwardRef28(
     checked,
     ...props
   }, ref) => {
-    const generatedId = useId7();
-    const computedId = isNonEmptyString8(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const generatedId = useId8();
+    const computedId = isNonEmptyString9(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = isNotUndefined15(value) && isNotUndefined15(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs59(
-      StyledCard2,
+    const isChecked = isNotUndefined16(value) && isNotUndefined16(contextValue) ? contextValue === value : checked;
+    return /* @__PURE__ */ jsxs62(
+      StyledCard3,
       {
         $aspectRatio: aspectRatio,
         $isGated: isGated,
         $padding: padding,
         htmlFor: computedId,
         children: [
-          /* @__PURE__ */ jsx330(
-            StyledHiddenInput,
+          /* @__PURE__ */ jsx336(
+            StyledHiddenInput2,
             {
               ...props,
               ref,
@@ -17699,12 +18160,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled92 } from "styled-components";
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+import { styled as styled97 } from "styled-components";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled91 } from "styled-components";
-var RadioCardIndicator = styled91.div`
+import { styled as styled96 } from "styled-components";
+var RadioCardIndicator = styled96.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);
@@ -17735,7 +18196,7 @@ var RadioCardIndicator = styled91.div`
     transform: translate(-50%, -50%);
   }
 
-  ${StyledCard2}:has(input:checked) & {
+  ${StyledCard3}:has(input:checked) & {
     --wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
     --wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
 
@@ -17745,7 +18206,7 @@ var RadioCardIndicator = styled91.div`
     }
   }
 
-  ${StyledCard2}:has(input:disabled) & {
+  ${StyledCard3}:has(input:disabled) & {
     --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
     --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
   }
@@ -17753,22 +18214,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 jsx337, jsxs as jsxs63 } from "react/jsx-runtime";
+var StyledCardContent2 = styled97.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled92.div`
+var StyledCardIcon2 = styled97.div`
   display: contents;
 `;
-var StyledGatedIcon = styled92.div`
+var StyledGatedIcon2 = styled97.div`
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 1;
 `;
-var StyledIndicatorContainer = styled92.div`
+var StyledIndicatorContainer2 = styled97.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -17780,9 +18241,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__ */ jsxs63(StyledCardContent2, { children: [
+    showIndicator ? /* @__PURE__ */ jsx337(StyledIndicatorContainer2, { $hasIcon: isNotNil38(icon), children: /* @__PURE__ */ jsx337(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    isGated ? /* @__PURE__ */ jsx337(StyledGatedIcon2, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx337(
       Icon,
       {
         colorScheme: "purple",
@@ -17790,16 +18251,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__ */ jsxs63(Stack, { gap: "space-02", children: [
+      isNotNil38(icon) && /* @__PURE__ */ jsx337(StyledCardIcon2, { "data-wui-radio-card-icon": true, children: icon }),
+      /* @__PURE__ */ jsxs63(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil37(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil38(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil37(label) && /* @__PURE__ */ jsx331(Text, { variant: "label3", children: /* @__PURE__ */ jsx331("strong", { children: label }) }),
-            isNotNil37(description) && /* @__PURE__ */ jsx331(
+            isNotNil38(label) && /* @__PURE__ */ jsx337(Text, { variant: "label3", children: /* @__PURE__ */ jsx337("strong", { children: label }) }),
+            isNotNil38(description) && /* @__PURE__ */ jsx337(
               Text,
               {
                 prominence: "secondary",
@@ -17816,23 +18277,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 styled98 } from "styled-components";
+var RadioCardChildrenContainer = styled98.div`
   flex: 1 1 auto;
 `;
 
 // src/components/RadioCard/RadioCard.tsx
-import { jsx as jsx332 } from "react/jsx-runtime";
-var RadioCard = forwardRef29(
+import { jsx as jsx338 } from "react/jsx-runtime";
+var RadioCard = forwardRef32(
   ({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx332(
+    return /* @__PURE__ */ jsx338(
       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__ */ jsx338(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx338(
           RadioCardDefaultLayout,
           {
             description,
@@ -17849,18 +18310,18 @@ var RadioCard = forwardRef29(
 RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx333 } from "react/jsx-runtime";
-var RadioCardImage = forwardRef30(
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx339 } from "react/jsx-runtime";
+var RadioCardImage = forwardRef33(
   ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx333(
+    return /* @__PURE__ */ jsx339(
       RadioCardRoot,
       {
         ref,
         ...rootProps,
         aspectRatio,
         padding,
-        children: /* @__PURE__ */ jsx333(
+        children: /* @__PURE__ */ jsx339(
           Image,
           {
             alt: label,
@@ -17877,57 +18338,57 @@ var RadioCardImage = forwardRef30(
 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 { forwardRef as forwardRef34, useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef22, useState as useState24 } from "react";
+import { styled as styled99 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx334, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx340, jsxs as jsxs64 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled94.div`
+var Container10 = styled99.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled94.div`
+var ScrollContainer = styled99.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled94.div`
+var Shadow = styled99.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 = styled99(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled94(Shadow)`
+var ShadowAtBottom = styled99(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled94(Shadow)`
+var ShadowAtLeft = styled99(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled94(Shadow)`
+var ShadowAtRight = styled99(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
   top: 0;
   width: 0;
 `;
-var ScrollArea = forwardRef31(
+var ScrollArea = forwardRef34(
   ({ children, onScroll, style, locked = false, ...props }, forwardedRef) => {
     const scrollContainerRefInternal = useRef22(null);
     const [shadowState, setShadowState] = useState24({
@@ -17960,12 +18421,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__ */ jsxs64(Container10, { style, children: [
+      /* @__PURE__ */ jsx340(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
+      /* @__PURE__ */ jsx340(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
+      /* @__PURE__ */ jsx340(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
+      /* @__PURE__ */ jsx340(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
+      /* @__PURE__ */ jsx340(
         ScrollContainer,
         {
           ref: scrollContainerRef,
@@ -17981,14 +18442,14 @@ var ScrollArea = forwardRef31(
 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 { forwardRef as forwardRef35 } from "react";
+import { styled as styled101, css as css48 } 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 jsx341 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
@@ -18009,7 +18470,7 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx335(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx341(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = useContext15(SelectedItemStyleContext);
@@ -18020,7 +18481,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled95, css as css45 } from "styled-components";
+import { styled as styled100, css as css47 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -18036,13 +18497,13 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx336 } from "react/jsx-runtime";
-var selectedItemIndicatorStyles = css45`
+import { jsx as jsx342 } from "react/jsx-runtime";
+var selectedItemIndicatorStyles = css47`
   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 = styled100.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -18058,7 +18519,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsx342(
     SelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -18068,8 +18529,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 jsx343, jsxs as jsxs65 } from "react/jsx-runtime";
+var segmentedControlStyles = css48`
   ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
   ${({ $colorScheme }) => $colorScheme !== "nav" && `--wui-color-text-selected: var(--wui-color-text-link);`}
 
@@ -18083,10 +18544,10 @@ var segmentedControlStyles = css46`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled96(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled101(ToggleGroupRoot2)`
   ${segmentedControlStyles}
 `;
-var SegmentedControl = forwardRef32(
+var SegmentedControl = forwardRef35(
   ({
     children,
     colorScheme = "inherit",
@@ -18099,7 +18560,7 @@ var SegmentedControl = forwardRef32(
     if (isNil18(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx337(
+    return /* @__PURE__ */ jsx343(
       StyledSegmentedControl,
       {
         ref,
@@ -18112,9 +18573,9 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx337(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs62(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx343(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs65(SelectedItemStyleProvider, { children: [
           children,
-          /* @__PURE__ */ jsx337(SelectedItemIndicator, {})
+          /* @__PURE__ */ jsx343(SelectedItemIndicator, {})
         ] }) })
       }
     );
@@ -18123,12 +18584,12 @@ var SegmentedControl = forwardRef32(
 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 { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef23 } from "react";
+import { styled as styled102, css as css49 } 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 { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { jsxs as jsxs66 } from "react/jsx-runtime";
+var segmentedControlItemStyles = css49`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -18196,10 +18657,10 @@ var segmentedControlItemStyles = css47`
     }
   }
 `;
-var StyledSegmentedControlItem = styled97(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled102(ToggleGroupItem2)`
   ${segmentedControlItemStyles}
 `;
-var SegmentedControlItem = forwardRef33(
+var SegmentedControlItem = forwardRef36(
   ({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
@@ -18237,13 +18698,13 @@ var SegmentedControlItem = forwardRef33(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs66(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil38(label),
-        "aria-label": isNotNil38(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil39(label),
+        "aria-label": isNotNil39(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -18259,19 +18720,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 { forwardRef as forwardRef37 } from "react";
+import { styled as styled103, css as css50 } from "styled-components";
+import { jsx as jsx344, jsxs as jsxs67 } from "react/jsx-runtime";
+var StyledTrigger2 = styled103(Trigger4)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -18317,7 +18778,7 @@ var StyledTrigger2 = styled98(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled98(Content3)`
+var StyledContent4 = styled103(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,18 +18800,18 @@ var StyledContent3 = styled98(Content3)`
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css48`
+var scrollButtonStyles = css50`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled98(ScrollDownButton)`
+var StyledScrollDownButton = styled103(ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled98(ScrollUpButton)`
+var StyledScrollUpButton = styled103(ScrollUpButton)`
   ${scrollButtonStyles}
 `;
-var Select = forwardRef34(
+var Select = forwardRef37(
   ({
     colorScheme = "inherit",
     children,
@@ -18370,8 +18831,8 @@ var Select = forwardRef34(
     if (forceOpen) {
       rootProps["open"] = true;
     }
-    return /* @__PURE__ */ jsxs64(Root3, { ...rootProps, children: [
-      /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs67(Root4, { ...rootProps, children: [
+      /* @__PURE__ */ jsxs67(
         StyledTrigger2,
         {
           ref: forwardedRef,
@@ -18379,8 +18840,8 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx338(Value, { placeholder }),
-            /* @__PURE__ */ jsx338(
+            /* @__PURE__ */ jsx344(Value, { placeholder }),
+            /* @__PURE__ */ jsx344(
               Icon,
               {
                 size: "md",
@@ -18390,21 +18851,21 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx338(Portal2, { children: /* @__PURE__ */ jsxs64(
-        StyledContent3,
+      /* @__PURE__ */ jsx344(Portal3, { children: /* @__PURE__ */ jsxs67(
+        StyledContent4,
         {
           position: "popper",
           sideOffset: 8,
           children: [
-            /* @__PURE__ */ jsx338(StyledScrollUpButton, { children: /* @__PURE__ */ jsx338(
+            /* @__PURE__ */ jsx344(StyledScrollUpButton, { children: /* @__PURE__ */ jsx344(
               Icon,
               {
                 size: "sm",
                 type: "caret-up"
               }
             ) }),
-            /* @__PURE__ */ jsx338(Viewport, { children }),
-            /* @__PURE__ */ jsx338(StyledScrollDownButton, { children: /* @__PURE__ */ jsx338(
+            /* @__PURE__ */ jsx344(Viewport, { children }),
+            /* @__PURE__ */ jsx344(StyledScrollDownButton, { children: /* @__PURE__ */ jsx344(
               Icon,
               {
                 size: "sm",
@@ -18421,11 +18882,11 @@ 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 { isNotNil as isNotNil39 } from "@wistia/type-guards";
-import { jsx as jsx339, jsxs as jsxs65 } from "react/jsx-runtime";
-var StyledItem = styled99(Item)`
+import { forwardRef as forwardRef38 } from "react";
+import { styled as styled104 } from "styled-components";
+import { isNotNil as isNotNil40 } from "@wistia/type-guards";
+import { jsx as jsx345, jsxs as jsxs68 } from "react/jsx-runtime";
+var StyledItem = styled104(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -18451,20 +18912,20 @@ var StyledItem = styled99(Item)`
     background-color: transparent;
   }
 `;
-var SelectOption = forwardRef35(
+var SelectOption = forwardRef38(
   ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs68(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil39(selectedDisplayValue) ? /* @__PURE__ */ jsxs65("div", { children: [
+          isNotNil40(selectedDisplayValue) ? /* @__PURE__ */ jsxs68("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__ */ jsx345("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx345(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx345(ItemText, { children }),
+          /* @__PURE__ */ jsx345(ItemIndicator, { children: /* @__PURE__ */ jsx345(
             Icon,
             {
               size: "md",
@@ -18480,14 +18941,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 styled105 } from "styled-components";
+import { jsx as jsx346, jsxs as jsxs69 } from "react/jsx-runtime";
+var StyledLabel4 = styled105(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__ */ jsxs69(Group, { ...props, children: [
+    /* @__PURE__ */ jsx346(StyledLabel4, { children: /* @__PURE__ */ jsx346(
       Heading,
       {
         renderAs: "span",
@@ -18506,10 +18967,10 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled101 } 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 { styled as styled106 } from "styled-components";
+import { isNonEmptyString as isNonEmptyString10 } from "@wistia/type-guards";
+import { jsx as jsx347, jsxs as jsxs70 } from "react/jsx-runtime";
+var SliderContainer = styled106.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 +18986,7 @@ var SliderContainer = styled101.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled101(RadixSliderRoot)`
+var StyledSliderRoot = styled106(RadixSliderRoot)`
   position: relative;
   display: flex;
   align-items: center;
@@ -18533,20 +18994,20 @@ var StyledSliderRoot = styled101(RadixSliderRoot)`
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled101(RadixSliderTrack)`
+var StyledSliderTrack = styled106(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 = styled106(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 = styled106(RadixSliderThumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -18586,7 +19047,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!(isNonEmptyString9(ariaLabel) || isNonEmptyString9(ariaLabelledby))) {
+  if (!(isNonEmptyString10(ariaLabel) || isNonEmptyString10(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -18597,12 +19058,12 @@ var Slider = ({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx347(
     SliderContainer,
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs67(
+      children: /* @__PURE__ */ jsxs70(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -18615,8 +19076,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__ */ jsx347(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx347(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+            values.map((_, index) => /* @__PURE__ */ jsx347(
               StyledSliderThumb,
               {
                 "data-testid": `${dataTestId}-thumb-${index}`
@@ -18632,11 +19093,11 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-import { styled as styled102 } from "styled-components";
-import { isNotNil as isNotNil40 } from "@wistia/type-guards";
+import { styled as styled107 } from "styled-components";
+import { isNotNil as isNotNil41 } 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 jsx348, jsxs as jsxs71 } from "react/jsx-runtime";
+var StyledSplitButton = styled107.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
 
@@ -18657,7 +19118,7 @@ var StyledSplitButton = styled102.span`
 var SplitButton = ({
   children,
   menuLabel = "Select an option",
-  menuIcon = /* @__PURE__ */ jsx342(Icon, { type: "caret-down" }),
+  menuIcon = /* @__PURE__ */ jsx348(Icon, { type: "caret-down" }),
   menuItems,
   disabled = false,
   colorScheme = "inherit",
@@ -18668,8 +19129,8 @@ var SplitButton = ({
   menuProps = {},
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs68(StyledSplitButton, { $colorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsxs71(StyledSplitButton, { $colorScheme: colorScheme, children: [
+    /* @__PURE__ */ jsx348(
       Button,
       {
         disabled,
@@ -18680,12 +19141,12 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil40(menuItems) && /* @__PURE__ */ jsx342(
+    isNotNil41(menuItems) && /* @__PURE__ */ jsx348(
       Menu,
       {
         ...menuProps,
         disabled,
-        trigger: /* @__PURE__ */ jsx342(
+        trigger: /* @__PURE__ */ jsx348(
           IconButton,
           {
             disabled,
@@ -18699,31 +19160,31 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil40(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil41(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 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 styled108, css as css51 } from "styled-components";
+import { jsx as jsx349 } from "react/jsx-runtime";
+var StyledTable = styled108.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && css49`
+  ${({ $divided }) => $divided && css51`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && css49`
+  ${({ $striped }) => $striped && css51`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css49`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css51`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -18736,7 +19197,7 @@ var Table = ({
   visuallyHiddenHeader = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx343(
+  return /* @__PURE__ */ jsx349(
     StyledTable,
     {
       $divided: divided,
@@ -18749,37 +19210,37 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import { styled as styled104 } from "styled-components";
+import { styled as styled109 } 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 jsx350 } from "react/jsx-runtime";
+var StyledTableBody = styled109.tbody`
   width: 100%;
 `;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx344(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx344(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ jsx350(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx350(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 styled110, css as css52 } from "styled-components";
+import { jsx as jsx351 } from "react/jsx-runtime";
+var sharedStyles = css52`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled105.th`
+var StyledTh = styled110.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 = styled110.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -18788,45 +19249,45 @@ var StyledTd = styled105.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext17(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx345(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx351(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx345(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx351(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 styled111 } from "styled-components";
+import { jsx as jsx352 } from "react/jsx-runtime";
+var StyledTableFoot = styled111.tfoot`
   width: 100%;
 `;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx346(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx346(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx352(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx352(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 styled112 } from "styled-components";
+import { jsx as jsx353 } from "react/jsx-runtime";
+var StyledThead = styled112.thead`
   width: 100%;
 `;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx347(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx347(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx353(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx353(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 styled113 } from "styled-components";
+import { jsx as jsx354 } from "react/jsx-runtime";
+var StyledTableRow = styled113.tr`
   width: 100%;
 `;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx348(StyledTableRow, { ...props, children });
+  return /* @__PURE__ */ jsx354(StyledTableRow, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
 import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
 import { useCallback as useCallback19, useState as useState26 } from "react";
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -18841,7 +19302,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx349 } from "react/jsx-runtime";
+import { jsx as jsx355 } from "react/jsx-runtime";
 var Tabs = ({
   children,
   value: valueProp,
@@ -18863,48 +19324,48 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil41(value)) {
+  if (isNotNil42(value)) {
     rootProps.value = value;
   }
-  if (isNotNil41(defaultValue)) {
+  if (isNotNil42(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx349(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx349(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx349(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx355(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx355(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx355(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 jsx356 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx350(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx356(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 styled115 } 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 styled114 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled114(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 jsx357 } from "react/jsx-runtime";
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
   if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx351(
+  return /* @__PURE__ */ jsx357(
     TabsSelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -18914,19 +19375,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 jsx358, jsxs as jsxs72 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled115(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
-  return /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs72(
     StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
       "aria-label": props["aria-label"],
       children: [
         children,
-        /* @__PURE__ */ jsx352(SelectedTabIndicator, {})
+        /* @__PURE__ */ jsx358(SelectedTabIndicator, {})
       ]
     }
   );
@@ -18934,13 +19395,13 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
-import { forwardRef as forwardRef36, useEffect as useEffect23, useRef as useRef24 } from "react";
-import { isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { forwardRef as forwardRef39, useEffect as useEffect23, useRef as useRef24 } from "react";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import { styled as styled111 } from "styled-components";
+import { styled as styled116 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledRadixTabsTrigger = styled111(RadixTabsTrigger)`
+var StyledRadixTabsTrigger = styled116(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -18949,8 +19410,8 @@ var StyledRadixTabsTrigger = styled111(RadixTabsTrigger)`
 `;
 
 // src/components/Tabs/TabsTrigger.tsx
-import { jsxs as jsxs70 } from "react/jsx-runtime";
-var TabsTrigger = forwardRef36(
+import { jsxs as jsxs73 } from "react/jsx-runtime";
+var TabsTrigger = forwardRef39(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
@@ -18981,13 +19442,13 @@ var TabsTrigger = forwardRef36(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs70(
+    return /* @__PURE__ */ jsxs73(
       StyledRadixTabsTrigger,
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil42(label),
-        "aria-label": isNotNil42(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil43(label),
+        "aria-label": isNotNil43(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -19001,10 +19462,10 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import { styled as styled112 } 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 { styled as styled117 } from "styled-components";
+import { isNotNil as isNotNil44 } from "@wistia/type-guards";
+import { jsx as jsx359, jsxs as jsxs74 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled117.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -19030,30 +19491,30 @@ var StyledThumbnailBadge = styled112.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs71(StyledThumbnailBadge, { ...props, children: [
-    isNotNil43(icon) && icon,
-    /* @__PURE__ */ jsx353("span", { children: label })
+  return /* @__PURE__ */ jsxs74(StyledThumbnailBadge, { ...props, children: [
+    isNotNil44(icon) && icon,
+    /* @__PURE__ */ jsx359("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 { forwardRef as forwardRef40, useState as useState27, useRef as useRef25, useCallback as useCallback20, useMemo as useMemo17 } from "react";
+import { styled as styled119 } from "styled-components";
 import {
   isNil as isNil19,
-  isNotNil as isNotNil46,
+  isNotNil as isNotNil47,
   isUndefined as isUndefined7,
   isEmptyString as isEmptyString2,
   isString as isString4,
-  isNonEmptyString as isNonEmptyString10
+  isNonEmptyString as isNonEmptyString11
 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { css as css51 } from "styled-components";
+import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { css as css53 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css51`
+  defaultDarkOne: css53`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -19061,7 +19522,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: css53`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -19069,7 +19530,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: css53`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -19077,13 +19538,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: css53`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css51`
+  defaultMidOne: css53`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -19091,13 +19552,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: css53`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css51`
+  green: css53`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -19105,7 +19566,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: css53`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -19113,7 +19574,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: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -19121,7 +19582,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: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -19129,7 +19590,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: css53`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -19137,7 +19598,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: css53`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -19145,13 +19606,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: css53`
     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: css53`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -19159,7 +19620,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: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -19167,7 +19628,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: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -19178,14 +19639,14 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil44(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil45(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import { styled as styled113 } 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 { styled as styled118 } from "styled-components";
+import { isNotNil as isNotNil46 } from "@wistia/type-guards";
+import { jsx as jsx360, jsxs as jsxs75 } from "react/jsx-runtime";
+var ScrubLine = styled118.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -19277,8 +19738,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil45(cursorPosition);
-  const scrubLinePosition = isNotNil45(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil46(cursorPosition);
+  const scrubLinePosition = isNotNil46(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -19296,14 +19757,14 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs75(
     "div",
     {
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx354("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx354(
+        /* @__PURE__ */ jsx360("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx360(
           ScrubLine,
           {
             style: {
@@ -19317,7 +19778,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx355, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx361, jsxs as jsxs76 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -19326,19 +19787,19 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled114.img`
+var WideThumbnailImage = styled119.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled114.img`
+var SquareThumbnailImage = styled119.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx355(
+    return /* @__PURE__ */ jsx361(
       WideThumbnailImage,
       {
         alt: "",
@@ -19347,7 +19808,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx355(
+  return /* @__PURE__ */ jsx361(
     SquareThumbnailImage,
     {
       alt: "",
@@ -19356,7 +19817,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = styled114.div`
+var StyledThumbnailContainer = styled119.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -19364,10 +19825,10 @@ var StyledThumbnailContainer = styled114.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = styled114.div`
+var StyledThumbnail = styled119.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
-  background-image: ${({ $backgroundUrl }) => isNotNil46($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil47($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -19399,7 +19860,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__ */ jsx361(
     ThumbnailStoryboardViewer,
     {
       cursorPosition: effectiveCursorPosition,
@@ -19425,9 +19886,9 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
   };
 };
 var hasValidThumbnailUrl = (thumbnailUrl) => {
-  return isNotNil46(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
+  return isNotNil47(thumbnailUrl) && isNonEmptyString11(thumbnailUrl);
 };
-var Thumbnail = forwardRef37(
+var Thumbnail = forwardRef40(
   ({
     gradientBackground = "defaultMidOne",
     thumbnailImageType = "wide",
@@ -19448,7 +19909,7 @@ var Thumbnail = forwardRef37(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil46(storyboard);
+    const isScrubbable = isNotNil47(storyboard);
     const trackStoryboardLoadStatus = useCallback20(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -19489,7 +19950,7 @@ var Thumbnail = forwardRef37(
     }, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
     let thumbnailContent = null;
     if (storyboard && shouldRenderStoryboard) {
-      thumbnailContent = /* @__PURE__ */ jsx355(
+      thumbnailContent = /* @__PURE__ */ jsx361(
         StoryboardRenderer,
         {
           aspectRatio,
@@ -19501,7 +19962,7 @@ var Thumbnail = forwardRef37(
         }
       );
     } else if (hasValidThumbnailUrl(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx355(
+      thumbnailContent = /* @__PURE__ */ jsx361(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -19511,7 +19972,7 @@ var Thumbnail = forwardRef37(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsx355(
+    return /* @__PURE__ */ jsx361(
       StyledThumbnailContainer,
       {
         ref,
@@ -19524,14 +19985,14 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         ...props,
-        children: /* @__PURE__ */ jsxs73(
+        children: /* @__PURE__ */ jsxs76(
           StyledThumbnail,
           {
             $backgroundUrl: backgroundUrl,
             $gradientBackground: gradientBackground,
             "data-testid": "thumbnail-inner",
             children: [
-              isNotNil46(children) ? children : null,
+              isNotNil47(children) ? children : null,
               thumbnailContent
             ]
           }
@@ -19544,16 +20005,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 styled120 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx356 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled115.div`
+import { jsx as jsx362 } from "react/jsx-runtime";
+var ThumbnailCollageContainer = styled120.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = styled115.div`
+var StyledThumbnailCollage = styled120.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -19611,7 +20072,7 @@ var ThumbnailCollage = ({
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx356(
+    /* @__PURE__ */ jsx362(
       Thumbnail,
       {
         gradientBackground,
@@ -19620,7 +20081,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx356(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx356(
+  return /* @__PURE__ */ jsx362(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx362(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -19632,26 +20093,26 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled116, css as css52 } from "styled-components";
-import { isNotNil as isNotNil47 } from "@wistia/type-guards";
-import { jsx as jsx357, jsxs as jsxs74 } from "react/jsx-runtime";
+import { styled as styled121, css as css54 } from "styled-components";
+import { isNotNil as isNotNil48 } from "@wistia/type-guards";
+import { jsx as jsx363, jsxs as jsxs77 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx357(
+    return /* @__PURE__ */ jsx363(
       "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__ */ jsx363("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__ */ jsx363(
     "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__ */ jsx363("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 +20120,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx357(
+  return /* @__PURE__ */ jsx363(
     "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__ */ jsx363("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 +20135,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled116.svg`
+var WistiaLogoComponent = styled121.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -19690,12 +20151,12 @@ var WistiaLogoComponent = styled116.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css52`
+      return css54`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css52`
+    return css54`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -19732,7 +20193,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs74(
+  const Logo = /* @__PURE__ */ jsxs77(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -19745,14 +20206,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__ */ jsx363("title", { children: title }),
+        isNotNil48(description) ? /* @__PURE__ */ jsx363("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__ */ jsx363("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 export {
@@ -19768,6 +20229,8 @@ export {
   Card,
   Center,
   Checkbox,
+  CheckboxCard,
+  CheckboxCardImage,
   CheckboxGroup,
   CheckboxMenuItem,
   ClickRegion,
@@ -19851,6 +20314,7 @@ export {
   ModalCallouts,
   PersistentFileAmountLimitValidator,
   Popover,
+  PreviewCard,
   ProgressBar,
   Radio,
   RadioCard,