@wistia/ui 0.18.12-beta.d715aa44.cf4d63b → 0.18.12-beta.e4686a50.87e9da0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.12-beta.d715aa44.cf4d63b
+ * @license @wistia/ui v0.18.12-beta.e4686a50.87e9da0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3262,11 +3262,11 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { styled as styled6, css as css19 } from "styled-components";
+import { styled as styled7, css as css19 } from "styled-components";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { styled as styled5 } from "styled-components";
+import { styled as styled6 } from "styled-components";
 import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
@@ -3472,7 +3472,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 import { isNil as isNil5 } from "@wistia/type-guards";
-import { styled as styled3, css as css18 } from "styled-components";
+import { styled as styled4, css as css18 } from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -6806,35 +6806,35 @@ var SpeedIcon = (props) => /* @__PURE__ */ jsx172(
 );
 
 // src/components/Icon/icons/SpinnerIcon.tsx
-import { jsx as jsx173, jsxs as jsxs10 } from "react/jsx-runtime";
+import styled3, { keyframes } from "styled-components";
+import { jsx as jsx173 } from "react/jsx-runtime";
+var spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var SpinnerGroup = styled3.g`
+  animation: ${spin} 1.5s linear infinite;
+  transform-origin: 50% 50%;
+`;
 var SpinnerIcon = (props) => /* @__PURE__ */ jsx173(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxs10("g", { children: [
-      /* @__PURE__ */ jsx173(
-        "path",
-        {
-          clipRule: "evenodd",
-          d: "M11.9999 5.33314C8.31802 5.33314 5.33326 8.31788 5.33326 11.9998C5.33326 15.6817 8.31802 18.6664 11.9999 18.6664C15.6818 18.6664 18.6666 15.6817 18.6666 11.9998C18.6666 11.0793 19.4127 10.3331 20.3332 10.3331C21.2537 10.3331 21.9999 11.0793 21.9999 11.9998C21.9999 17.5226 17.5227 21.9998 11.9999 21.9998C6.47708 21.9998 1.99994 17.5226 1.99994 11.9998C1.99994 6.47697 6.47708 1.99981 11.9999 1.99981C12.9204 1.99981 13.6666 2.74598 13.6666 3.66647C13.6666 4.58697 12.9204 5.33314 11.9999 5.33314Z",
-          fill: "currentColor",
-          fillRule: "evenodd"
-        }
-      ),
-      /* @__PURE__ */ jsx173(
-        "animateTransform",
-        {
-          attributeName: "transform",
-          dur: "1.5s",
-          keyTimes: "0;1",
-          repeatCount: "indefinite",
-          type: "rotate",
-          values: "0 12 12;360 12 12"
-        }
-      )
-    ] })
+    children: /* @__PURE__ */ jsx173(SpinnerGroup, { children: /* @__PURE__ */ jsx173(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M11.9999 5.33314C8.31802 5.33314 5.33326 8.31788 5.33326 11.9998C5.33326 15.6817 8.31802 18.6664 11.9999 18.6664C15.6818 18.6664 18.6666 15.6817 18.6666 11.9998C18.6666 11.0793 19.4127 10.3331 20.3332 10.3331C21.2537 10.3331 21.9999 11.0793 21.9999 11.9998C21.9999 17.5226 17.5227 21.9998 11.9999 21.9998C6.47708 21.9998 1.99994 17.5226 1.99994 11.9998C1.99994 6.47697 6.47708 1.99981 11.9999 1.99981C12.9204 1.99981 13.6666 2.74598 13.6666 3.66647C13.6666 4.58697 12.9204 5.33314 11.9999 5.33314Z",
+        fill: "currentColor",
+        fillRule: "evenodd"
+      }
+    ) })
   }
 );
 
@@ -7627,7 +7627,7 @@ var iconInlineStyle = css18`
     position: relative;
   }
 `;
-var StyledIcon = styled3.svg`
+var StyledIcon = styled4.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
   --wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
   --wui-icon-vertical-align: middle;
@@ -7685,10 +7685,10 @@ Icon.displayName = "Icon_UI";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import { styled as styled4 } from "styled-components";
+import { styled as styled5 } from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router";
 import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
-import { jsx as jsx203, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs10 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
   if (disabled || isNil6(href)) {
     return void 0;
@@ -7704,7 +7704,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined3(props.href);
-var StyledLink = styled4.a`
+var StyledLink = styled5.a`
   ${({ href }) => isNil6(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
@@ -7812,7 +7812,7 @@ var Link = forwardRef(
         ...externalLinkProps,
         ...routerSpecificProps
       };
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs10(
         StyledLink,
         {
           ...combinedProps,
@@ -7831,9 +7831,9 @@ var Link = forwardRef(
 Link.displayName = "Link_UI";
 
 // src/components/Button/Button.tsx
-import { Fragment as Fragment2, jsx as jsx204, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx204, jsxs as jsxs11 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined4(props.href);
-var StyledButton = styled5.button`
+var StyledButton = styled6.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   ${({ $size }) => buttonSizeStyles[$size]}
@@ -7842,7 +7842,7 @@ var StyledButton = styled5.button`
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   text-align: center;
 `;
-var StyledButtonContent = styled5.div`
+var StyledButtonContent = styled6.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -7854,10 +7854,10 @@ var StyledButtonContent = styled5.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = styled5.span`
+var StyledButtonContentLabel = styled6.span`
   flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
 `;
-var StyledButtonLoading = styled5.div`
+var StyledButtonLoading = styled6.div`
   position: absolute;
   display: flex;
 `;
@@ -7868,9 +7868,9 @@ var ButtonContent = ({
   children,
   fullWidth = false
 }) => {
-  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
     isLoading ? /* @__PURE__ */ jsx204(StyledButtonLoading, { children: /* @__PURE__ */ jsx204(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs11(
       StyledButtonContent,
       {
         $hasLeftIcon: isNotNil6(leftIcon),
@@ -7974,8 +7974,8 @@ var Button = forwardRef2(
 Button.displayName = "Button_UI";
 
 // src/components/ActionButton/ActionButton.tsx
-import { jsx as jsx205, jsxs as jsxs13 } from "react/jsx-runtime";
-var StyledActionButton = styled6(Button)`
+import { jsx as jsx205, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledActionButton = styled7(Button)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: grid;
   grid-template-columns: 24px 1fr;
@@ -8020,7 +8020,7 @@ var StyledActionButton = styled6(Button)`
     }
   }
 `;
-var StyledMainIcon = styled6.div`
+var StyledMainIcon = styled7.div`
   grid-column: 1;
   grid-row: 1;
   width: 24px;
@@ -8035,7 +8035,7 @@ var StyledMainIcon = styled6.div`
     }
   }
 `;
-var StyledSecondaryIcon = styled6.div`
+var StyledSecondaryIcon = styled7.div`
   grid-column: 2;
   grid-row: 1;
   width: 100%;
@@ -8062,7 +8062,7 @@ var StyledSecondaryIcon = styled6.div`
     }
   }
 `;
-var StyledLabel = styled6.span`
+var StyledLabel = styled7.span`
   font-family: var(--wui-typography-heading-4-family);
   font-size: var(--wui-typography-heading-4-size);
   font-weight: var(--wui-typography-heading-4-weight);
@@ -8089,7 +8089,7 @@ var ActionButton = forwardRef3(
       "menu-up": "caret-up",
       "menu-down": "caret-down"
     };
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs12(
       StyledActionButton,
       {
         ...props,
@@ -8118,7 +8118,7 @@ ActionButton.displayName = "ActionButton_UI";
 // src/components/Avatar/Avatar.tsx
 import { useState as useState9, useMemo as useMemo4, useEffect as useEffect7 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { styled as styled9 } from "styled-components";
+import { styled as styled10 } from "styled-components";
 
 // src/components/Avatar/formatNameForDisplay.tsx
 import { isNil as isNil7, isString, isEmptyString } from "@wistia/type-guards";
@@ -8135,7 +8135,7 @@ var formatNameForDisplay = (name) => {
 };
 
 // src/components/Image/Image.tsx
-import { styled as styled7 } from "styled-components";
+import { styled as styled8 } from "styled-components";
 import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx206 } from "react/jsx-runtime";
 var getFillStyle = (fillContainer) => {
@@ -8153,7 +8153,7 @@ var getFillStyle = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = styled7.img`
+var StyledImage = styled8.img`
   border-radius: ${({ $borderRadius }) => isNotNil7($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -8188,7 +8188,7 @@ var Image = ({
 Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-import { styled as styled8 } from "styled-components";
+import { styled as styled9 } from "styled-components";
 import { jsx as jsx207 } from "react/jsx-runtime";
 var defaultColorSchemeOptions = ["standard", "inherit"];
 var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
@@ -8212,7 +8212,7 @@ var colorSchemeOptions = [
   ...brandColorSchemeOptions,
   ...vendorColorSchemeOptions
 ];
-var StyledColorSchemeWrapper = styled8.div`
+var StyledColorSchemeWrapper = styled9.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
@@ -8232,13 +8232,13 @@ var ColorSchemeWrapper = ({
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx208, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx208, jsxs as jsxs13 } from "react/jsx-runtime";
 var avatarSizeMap = {
   sm: 16,
   md: 24,
   lg: 32
 };
-var Initial = ({ initial }) => /* @__PURE__ */ jsxs14(
+var Initial = ({ initial }) => /* @__PURE__ */ jsxs13(
   "svg",
   {
     "data-wui-avatar-initial": true,
@@ -8268,7 +8268,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ jsxs14(
     ]
   }
 );
-var AvatarWrapper = styled9.div`
+var AvatarWrapper = styled10.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   width: ${({ $heightAndWidth }) => $heightAndWidth}px;
   height: ${({ $heightAndWidth }) => $heightAndWidth}px;
@@ -8343,7 +8343,7 @@ var Avatar = ({
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = useMemo4(() => chooseColorScheme(name), [name]);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(
     AvatarWrapper,
     {
       $colorScheme: avatarColor,
@@ -8370,10 +8370,10 @@ Avatar.displayName = "Avatar_UI";
 
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { styled as styled10 } from "styled-components";
+import { styled as styled11 } from "styled-components";
 import { isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx209, jsxs as jsxs15 } from "react/jsx-runtime";
-var StyledBadge = styled10.div`
+import { jsx as jsx209, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledBadge = styled11.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8402,7 +8402,7 @@ var StyledBadge = styled10.div`
 var Badge = forwardRef4(
   ({ colorScheme = "inherit", label, icon, variant = "default", ...props }, ref) => {
     const hasIcon = isNotNil9(icon);
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs14(
       StyledBadge,
       {
         ref,
@@ -8422,12 +8422,12 @@ Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 import { useEffect as useEffect8, useState as useState10, useMemo as useMemo5 } from "react";
-import { styled as styled16 } from "styled-components";
+import { styled as styled17 } from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/components/Box/Box.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { styled as styled11, css as css20 } from "styled-components";
+import { styled as styled12, css as css20 } from "styled-components";
 import { isNotNil as isNotNil10, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -8510,7 +8510,7 @@ var getFlexStyle = (flexMode) => {
       return null;
   }
 };
-var StyledBoxComponent = styled11.div`
+var StyledBoxComponent = styled12.div`
   /* properties meant for Box parent (flex container) */
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
@@ -8624,7 +8624,7 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { styled as styled12, css as css21 } from "styled-components";
+import { styled as styled13, css as css21 } from "styled-components";
 import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/private/helpers/applyMaxCharsToChildren/applyMaxCharsToChildren.ts
@@ -8711,7 +8711,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = styled12.div`
+var StyledHeading = styled13.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8803,7 +8803,7 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { styled as styled13, css as css22 } from "styled-components";
+import { styled as styled14, css as css22 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 import { jsx as jsx212 } from "react/jsx-runtime";
 var sharedBodyStyle = css22`
@@ -8933,7 +8933,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = styled13.div`
+var StyledText = styled14.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9025,7 +9025,7 @@ TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import { styled as styled14, css as css23 } from "styled-components";
+import { styled as styled15, css as css23 } from "styled-components";
 import { isNil as isNil10 } from "@wistia/type-guards";
 import { jsx as jsx213 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -9040,7 +9040,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = styled14.div`
+var ButtonGroupComponent = styled15.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -9105,9 +9105,9 @@ ButtonGroup.displayName = "ButtonGroup_UI";
 
 // src/components/IconButton/IconButton.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef8 } from "react";
-import { styled as styled15 } from "styled-components";
+import { styled as styled16 } from "styled-components";
 import { jsx as jsx214 } from "react/jsx-runtime";
-var StyledButton2 = styled15(Button)`
+var StyledButton2 = styled16(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9142,11 +9142,11 @@ var IconButton = forwardRef8(
 IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
-import { Fragment as Fragment3, jsx as jsx215, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx215, jsxs as jsxs15 } from "react/jsx-runtime";
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
-var StyledBanner = styled16.div`
+var StyledBanner = styled17.div`
   --wui-banner-padding: var(--wui-space-04);
   --wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
 
@@ -9218,7 +9218,7 @@ var Banner = ({
   const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
   const textVariant = prominence === "primary" || isSmallContainer ? "body3" : "body2";
   const buttonSize = isSmallContainer ? "sm" : "md";
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(
     StyledBanner,
     {
       ...props,
@@ -9230,7 +9230,7 @@ var Banner = ({
       "data-wui-banner-orientation": isVerticalLayout ? "vertical" : "horizontal",
       children: [
         shouldShowImage ? image : null,
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs15(
           Box,
           {
             ref: contentRef,
@@ -9249,7 +9249,7 @@ var Banner = ({
                   children: icon
                 }
               ),
-              /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsxs15(
                 Box,
                 {
                   direction: "column",
@@ -9257,8 +9257,8 @@ var Banner = ({
                   gap: iconPosition === "inline" ? "space-01" : "space-00",
                   justifyContent: "center",
                   children: [
-                    isNotNil13(headingText) ? /* @__PURE__ */ jsxs16(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ jsxs16(Fragment3, { children: [
+                    isNotNil13(headingText) ? /* @__PURE__ */ jsxs15(Heading, { variant: headingVariant, children: [
+                      iconPosition === "inline" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
                         icon,
                         " "
                       ] }),
@@ -9268,7 +9268,7 @@ var Banner = ({
                   ]
                 }
               ),
-              hasActions ? /* @__PURE__ */ jsxs16(
+              hasActions ? /* @__PURE__ */ jsxs15(
                 ButtonGroup,
                 {
                   buttonSize,
@@ -9305,9 +9305,9 @@ var Banner = ({
 Banner.displayName = "Banner_UI";
 
 // src/components/Banner/BannerImage.tsx
-import { styled as styled17 } from "styled-components";
+import { styled as styled18 } from "styled-components";
 import { jsx as jsx216 } from "react/jsx-runtime";
-var StyledBannerImageContainer = styled17.div`
+var StyledBannerImageContainer = styled18.div`
   --wui-banner-image-border-radius: var(--wui-border-radius-02);
   --wui-banner-image-height: auto;
   --wui-banner-image-width: auto;
@@ -9385,9 +9385,9 @@ var BannerImage = ({ alignment = "left", alt, src, ...props }) => {
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
-import { styled as styled18 } from "styled-components";
-import { Fragment as Fragment4, jsx as jsx217, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledBreadcrumbs = styled18.nav`
+import { styled as styled19 } from "styled-components";
+import { Fragment as Fragment4, jsx as jsx217, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled19.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -9405,7 +9405,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
     /* @__PURE__ */ jsx217("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
@@ -9432,9 +9432,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import { styled as styled19 } from "styled-components";
-import { Fragment as Fragment5, jsx as jsx218, jsxs as jsxs18 } from "react/jsx-runtime";
-var BreadcrumbContent = styled19.span`
+import { styled as styled20 } from "styled-components";
+import { Fragment as Fragment5, jsx as jsx218, jsxs as jsxs17 } from "react/jsx-runtime";
+var BreadcrumbContent = styled20.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -9443,7 +9443,7 @@ var BreadcrumbContent = styled19.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
     /* @__PURE__ */ jsx218(
       Button,
       {
@@ -9466,9 +9466,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/Card/Card.tsx
-import { styled as styled20 } from "styled-components";
+import { styled as styled21 } from "styled-components";
 import { jsx as jsx219 } from "react/jsx-runtime";
-var StyledCard = styled20(Box)`
+var StyledCard = styled21(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -9526,9 +9526,9 @@ Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { styled as styled21 } from "styled-components";
+import { styled as styled22 } from "styled-components";
 import { jsx as jsx220 } from "react/jsx-runtime";
-var StyledCenter = styled21.div`
+var StyledCenter = styled22.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -9558,18 +9558,18 @@ Center.displayName = "Center_UI";
 // src/components/Checkbox/Checkbox.tsx
 import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
-import { styled as styled28, css as css26 } from "styled-components";
+import { styled as styled29, css as css26 } from "styled-components";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { isNil as isNil13, isNotNil as isNotNil15 } from "@wistia/type-guards";
-import { styled as styled24, css as css25 } from "styled-components";
+import { styled as styled25, css as css25 } from "styled-components";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import { styled as styled22 } from "styled-components";
+import { styled as styled23 } from "styled-components";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 import { jsx as jsx221 } from "react/jsx-runtime";
-var VisuallyHidden = styled22.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled22.div({
+var VisuallyHidden = styled23.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled23.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -9587,13 +9587,13 @@ var ScreenReaderOnly = ({
 ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import { styled as styled23, css as css24 } from "styled-components";
+import { styled as styled24, css as css24 } from "styled-components";
 import { isNil as isNil12 } from "@wistia/type-guards";
 import { jsx as jsx222 } from "react/jsx-runtime";
 var disabledStyle = css24`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = styled23.div`
+var StyledFormControlLabelDescription = styled24.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -9622,16 +9622,16 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import { jsx as jsx223, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs18 } from "react/jsx-runtime";
 var disabledStyle2 = css25`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = styled24.div`
+var StyledLabelWrapper = styled25.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = styled24.label`
+var StyledFormControlLabel = styled25.label`
   cursor: pointer;
   display: flex;
   align-items: flex-start;
@@ -9658,12 +9658,12 @@ var FormControlLabel = ({
   if (isNil13(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ jsx223(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs19(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ jsx223(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs18(StyledLabelWrapper, { children: [
     label,
     /* @__PURE__ */ jsx223(FormControlLabelDescription, { children: description })
   ] });
   const slot = isNotNil15(controlSlot) ? controlSlot : null;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     StyledFormControlLabel,
     {
       $align: align,
@@ -9684,16 +9684,16 @@ import { createContext as createContext4, useMemo as useMemo7, useContext as use
 import { isArray } from "@wistia/type-guards";
 
 // src/components/FormGroup/FormGroup.tsx
-import { styled as styled26 } from "styled-components";
+import { styled as styled27 } from "styled-components";
 import { useRef as useRef7 } from "react";
 import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { styled as styled25 } from "styled-components";
+import { styled as styled26 } from "styled-components";
 import { jsx as jsx224 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = styled25.div`
+var StyledStack = styled26.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9721,13 +9721,13 @@ StackComponent.displayName = "Stack_UI";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
-import { jsx as jsx225, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledFieldset = styled26.fieldset`
+import { jsx as jsx225, jsxs as jsxs19 } from "react/jsx-runtime";
+var StyledFieldset = styled27.fieldset`
   padding: 0;
   margin: 0;
   border: 0;
 `;
-var StyledLegend = styled26.legend`
+var StyledLegend = styled27.legend`
   padding-inline: 0;
   display: flex;
   flex-direction: column;
@@ -9743,14 +9743,14 @@ var FormGroup = ({
   const ref = useRef7(null);
   const hasLabel = isNotNil16(label) && isNonEmptyString2(label);
   const hasDescription = isNotNil16(description) && isNonEmptyString2(description);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs19(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        hasLabel || hasDescription ? /* @__PURE__ */ jsxs20(
+        hasLabel || hasDescription ? /* @__PURE__ */ jsxs19(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9779,7 +9779,7 @@ FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState11, useId } from "react";
-import { styled as styled27 } from "styled-components";
+import { styled as styled28 } from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Form/serializeFormData.tsx
@@ -9799,7 +9799,7 @@ var serializeFormData = (formData) => {
 
 // src/components/Form/Form.tsx
 import { jsx as jsx226 } from "react/jsx-runtime";
-var StyledForm = styled27.form`
+var StyledForm = styled28.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9925,7 +9925,7 @@ var CheckboxGroup = ({
 CheckboxGroup.displayName = "CheckboxGroup_UI";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx228, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx228, jsxs as jsxs20 } from "react/jsx-runtime";
 var CheckIcon = () => /* @__PURE__ */ jsx228(
   "svg",
   {
@@ -9960,7 +9960,7 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled28.div`
+var StyledCheckboxWrapper = styled29.div`
   --wui-checkbox-background-color: var(--wui-color-bg-surface);
   --wui-checkbox-border-color: var(--wui-color-border-secondary);
   --wui-checkbox-icon-color: transparent;
@@ -9997,7 +9997,7 @@ var StyledCheckboxWrapper = styled28.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled28.div`
+var StyledCheckboxInput = styled29.div`
   ${({ $size }) => getSizeCss($size)}
   margin: 0;
   border-radius: var(--wui-border-radius-01);
@@ -10024,7 +10024,7 @@ var StyledCheckboxInput = styled28.div`
     height: var(--wui-checkbox-icon-size);
   }
 `;
-var StyledHiddenCheckboxInput = styled28.input`
+var StyledHiddenCheckboxInput = styled29.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
@@ -10052,7 +10052,7 @@ var Checkbox = forwardRef12(
     const checkboxName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined7(value) && contextValue ? contextValue.includes(value) : checked;
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs20(
       StyledCheckboxWrapper,
       {
         $hideLabel: hideLabel,
@@ -10145,9 +10145,9 @@ ClickRegion.displayName = "ClickRegion_UI";
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil17 } from "@wistia/type-guards";
-import { styled as styled29 } from "styled-components";
+import { styled as styled30 } from "styled-components";
 import { jsx as jsx229 } from "react/jsx-runtime";
-var StyledRoot = styled29(CollapsibleRoot)`
+var StyledRoot = styled30(CollapsibleRoot)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -10170,9 +10170,9 @@ Collapsible.displayName = "Collapsible_UI";
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { styled as styled30 } from "styled-components";
+import { styled as styled31 } from "styled-components";
 import { jsx as jsx230 } from "react/jsx-runtime";
-var StyledTrigger = styled30(Trigger)`
+var StyledTrigger = styled31(Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -10221,11 +10221,11 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import { styled as styled31 } from "styled-components";
+import { styled as styled32 } from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx232, jsxs as jsxs22 } from "react/jsx-runtime";
-var ClampedContent = styled31.div`
+import { Fragment as Fragment6, jsx as jsx232, jsxs as jsxs21 } from "react/jsx-runtime";
+var ClampedContent = styled32.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
@@ -10239,7 +10239,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx232(Content, { children: /* @__PURE__ */ jsxs22(Fragment6, { children: [
+  return /* @__PURE__ */ jsx232(Content, { children: /* @__PURE__ */ jsxs21(Fragment6, { children: [
     children,
     " "
   ] }) });
@@ -10247,7 +10247,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 import { useCallback as useCallback10 } from "react";
-import { styled as styled33 } from "styled-components";
+import { styled as styled34 } from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
@@ -10792,7 +10792,7 @@ var useColorPickerState = () => {
 };
 
 // src/components/Label/Label.tsx
-import { styled as styled32, css as css27 } from "styled-components";
+import { styled as styled33, css as css27 } from "styled-components";
 import { jsx as jsx234 } from "react/jsx-runtime";
 var requiredStyle = css27`
   &::after {
@@ -10805,7 +10805,7 @@ var requiredStyle = css27`
 var disabledStyle3 = css27`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled32.label`
+var StyledLabel2 = styled33.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -10852,16 +10852,16 @@ var Label = ({
 Label.displayName = "Label_UI";
 
 // src/components/ColorPicker/ColorGrid.tsx
-import { jsx as jsx235, jsxs as jsxs23 } from "react/jsx-runtime";
-var Container = styled33.div`
+import { jsx as jsx235, jsxs as jsxs22 } from "react/jsx-runtime";
+var Container = styled34.div`
   display: grid;
   gap: var(--wui-space-01);
   grid-template-columns: minmax(0, 1fr);
 `;
-var LabelContainer = styled33.div`
+var LabelContainer = styled34.div`
   padding-top: var(--wui-space-01);
 `;
-var ItemsContainer = styled33(RadioGroupRoot)`
+var ItemsContainer = styled34(RadioGroupRoot)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -10878,7 +10878,7 @@ var ColorGrid = ({ children, label }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsxs23(Container, { children: [
+  return /* @__PURE__ */ jsxs22(Container, { children: [
     label != null && /* @__PURE__ */ jsx235(LabelContainer, { children: /* @__PURE__ */ jsx235(Label, { children: label }) }),
     /* @__PURE__ */ jsx235(
       ItemsContainer,
@@ -10893,14 +10893,14 @@ var ColorGrid = ({ children, label }) => {
 ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import { styled as styled36 } from "styled-components";
+import { styled as styled37 } from "styled-components";
 import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
 import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
-import { styled as styled34 } from "styled-components";
-import { jsx as jsx236, jsxs as jsxs24 } from "react/jsx-runtime";
-var ColorSwatchDiv = styled34.div`
+import { styled as styled35 } from "styled-components";
+import { jsx as jsx236, jsxs as jsxs23 } from "react/jsx-runtime";
+var ColorSwatchDiv = styled35.div`
   aspect-ratio: 1;
   width: ${({ $diameterPx }) => `${$diameterPx}px`};
   border-radius: var(--wui-border-radius-rounded);
@@ -10919,7 +10919,7 @@ var ColorSwatchDiv = styled34.div`
   outline-offset: 2px;
   transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
 `;
-var DerivativeHalfCircle = styled34.div`
+var DerivativeHalfCircle = styled35.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -10936,7 +10936,7 @@ var ColorSwatch = ({
   value
 }) => {
   const { valueAsHex: colorPickerValueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     ColorSwatchDiv,
     {
       $diameterPx: diameterPx,
@@ -10962,9 +10962,9 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import { styled as styled35, keyframes } from "styled-components";
-import { jsx as jsx237, jsxs as jsxs25 } from "react/jsx-runtime";
-var hide = keyframes`
+import { styled as styled36, keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx237, jsxs as jsxs24 } from "react/jsx-runtime";
+var hide = keyframes2`
   from {
     opacity: 1;
   }
@@ -10972,7 +10972,7 @@ var hide = keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = keyframes`
+var slideDownAndFade = keyframes2`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -10982,7 +10982,7 @@ var slideDownAndFade = keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = keyframes`
+var slideLeftAndFade = keyframes2`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -10992,7 +10992,7 @@ var slideLeftAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = keyframes`
+var slideUpAndFade = keyframes2`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -11002,7 +11002,7 @@ var slideUpAndFade = keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = keyframes`
+var slideRightAndFade = keyframes2`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -11012,7 +11012,7 @@ var slideRightAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled35(TooltipContent)`
+var StyledContent = styled36(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -11075,14 +11075,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx237(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx237(TooltipPortal, { container, children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx237(TooltipPortal, { container, children: /* @__PURE__ */ jsxs24(
           StyledContent,
           {
             side: direction,
@@ -11112,7 +11112,7 @@ Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 import { jsx as jsx238 } from "react/jsx-runtime";
-var Container2 = styled36(RadioGroupItem)`
+var Container2 = styled37(RadioGroupItem)`
   border: none;
   appearance: none;
   outline: none;
@@ -11157,10 +11157,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 import { useCallback as useCallback11 } from "react";
-import { styled as styled37 } from "styled-components";
+import { styled as styled38 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { jsx as jsx239 } from "react/jsx-runtime";
-var Container3 = styled37(ToggleGroupRoot)`
+var Container3 = styled38(ToggleGroupRoot)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `;
@@ -11189,22 +11189,22 @@ var ColorList = ({ children }) => {
 ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
-import { styled as styled38 } from "styled-components";
-import { jsx as jsx240, jsxs as jsxs26 } from "react/jsx-runtime";
-var Container4 = styled38.div`
+import { styled as styled39 } from "styled-components";
+import { jsx as jsx240, jsxs as jsxs25 } from "react/jsx-runtime";
+var Container4 = styled39.div`
   display: grid;
   gap: var(--wui-space-01);
   grid-template-columns: minmax(0, 1fr);
 `;
-var ItemsContainer2 = styled38.div`
+var ItemsContainer2 = styled39.div`
   display: flex;
   flex-direction: column;
 `;
-var LabelContainer2 = styled38.div`
+var LabelContainer2 = styled39.div`
   padding-top: var(--wui-space-01);
 `;
 var ColorListGroup = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     Container4,
     {
       "aria-label": label,
@@ -11219,14 +11219,14 @@ var ColorListGroup = ({ label, children }) => {
 ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
-import { styled as styled39 } from "styled-components";
+import { styled as styled40 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { formatHex as formatHex4 } from "culori/fn";
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
-import { jsx as jsx241, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx241, jsxs as jsxs26 } from "react/jsx-runtime";
 var ColorNameOrHexCode = ({ name, hexCode }) => {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     Box,
     {
       alignItems: "center",
@@ -11257,8 +11257,8 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 };
 
 // src/components/ColorPicker/ColorListOption.tsx
-import { jsx as jsx242, jsxs as jsxs28 } from "react/jsx-runtime";
-var Container5 = styled39(ToggleGroupItem)`
+import { jsx as jsx242, jsxs as jsxs27 } from "react/jsx-runtime";
+var Container5 = styled40(ToggleGroupItem)`
   border: none;
   appearance: none;
   outline: none;
@@ -11286,7 +11286,7 @@ var ColorListOption = ({ value: rawValue, name }) => {
   const valueAsHex = formatHex4(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(
     Container5,
     {
       "aria-label": value,
@@ -11343,9 +11343,9 @@ ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
-import { styled as styled40 } from "styled-components";
+import { styled as styled41 } from "styled-components";
 import { jsx as jsx244 } from "react/jsx-runtime";
-var StyledPopoverContent = styled40(PopoverContent)`
+var StyledPopoverContent = styled41(PopoverContent)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -11372,9 +11372,9 @@ var ColorPickerPopoverContent = ({
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
-import { styled as styled41 } from "styled-components";
+import { styled as styled42 } from "styled-components";
 import { jsx as jsx245 } from "react/jsx-runtime";
-var Container6 = styled41.div`
+var Container6 = styled42.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
@@ -11385,7 +11385,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { Trigger as PopoverTrigger } from "@radix-ui/react-popover";
-import { styled as styled42 } from "styled-components";
+import { styled as styled43 } from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
 import { jsx as jsx246 } from "react/jsx-runtime";
@@ -11412,8 +11412,8 @@ var ValueNameOrHexCode = () => {
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
-import { jsx as jsx248, jsxs as jsxs29 } from "react/jsx-runtime";
-var StyledPopoverTrigger = styled42(PopoverTrigger)`
+import { jsx as jsx248, jsxs as jsxs28 } from "react/jsx-runtime";
+var StyledPopoverTrigger = styled43(PopoverTrigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
@@ -11424,7 +11424,7 @@ var StyledPopoverTrigger = styled42(PopoverTrigger)`
     background-color: var(--wui-color-bg-surface-hover);
   }
 `;
-var DefaultTriggerContentContainer = styled42.div`
+var DefaultTriggerContentContainer = styled43.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -11432,7 +11432,7 @@ var DefaultTriggerContentContainer = styled42.div`
   padding-right: var(--wui-space-02);
 `;
 var DefaultTriggerContent = () => {
-  return /* @__PURE__ */ jsxs29(DefaultTriggerContentContainer, { children: [
+  return /* @__PURE__ */ jsxs28(DefaultTriggerContentContainer, { children: [
     /* @__PURE__ */ jsx248(ValueSwatch, {}),
     /* @__PURE__ */ jsx248(ValueNameOrHexCode, {})
   ] });
@@ -11452,9 +11452,9 @@ var ColorPickerTrigger = forwardRef13(
 ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
-import { styled as styled43 } from "styled-components";
-import { jsx as jsx249, jsxs as jsxs30 } from "react/jsx-runtime";
-var Container7 = styled43.div`
+import { styled as styled44 } from "styled-components";
+import { jsx as jsx249, jsxs as jsxs29 } from "react/jsx-runtime";
+var Container7 = styled44.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -11466,7 +11466,7 @@ var floorToTenth = (value) => {
 var ContrastIndicator = () => {
   const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
   const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
-  const label = /* @__PURE__ */ jsxs30("div", { children: [
+  const label = /* @__PURE__ */ jsxs29("div", { children: [
     /* @__PURE__ */ jsx249(
       Text,
       {
@@ -11476,7 +11476,7 @@ var ContrastIndicator = () => {
       }
     ),
     " ",
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs29(
       Text,
       {
         renderAs: "span",
@@ -11512,9 +11512,9 @@ import { useCallback as useCallback12 } from "react";
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
-import { styled as styled44, css as css28 } from "styled-components";
+import { styled as styled45, css as css28 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx250, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs30 } from "react/jsx-runtime";
 var switchHeightMap = {
   sm: 16,
   md: 20,
@@ -11523,7 +11523,7 @@ var switchHeightMap = {
 var getSizeCss2 = (size) => css28`
   --wui-switch-height: ${switchHeightMap[size]}px;
 `;
-var StyledSwitchWrapper = styled44.div`
+var StyledSwitchWrapper = styled45.div`
   ${({ $size }) => getSizeCss2($size)}
   --wui-switch-border-offset: 2px;
   --wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
@@ -11557,7 +11557,7 @@ var StyledSwitchWrapper = styled44.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchTrack = styled44.div`
+var StyledSwitchTrack = styled45.div`
   width: var(--wui-switch-width);
   height: var(--wui-switch-height);
   min-width: var(--wui-switch-width);
@@ -11575,7 +11575,7 @@ var StyledSwitchTrack = styled44.div`
   background-color: var(--wui-switch-background-color);
   margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
 `;
-var StyledSwitchThumb = styled44.div`
+var StyledSwitchThumb = styled45.div`
   border-radius: var(--wui-border-radius-rounded);
   background-color: var(--wui-switch-thumb-color);
   transition:
@@ -11585,7 +11585,7 @@ var StyledSwitchThumb = styled44.div`
   height: var(--wui-switch-thumb-size);
   margin-left: var(--wui-switch-thumb-position);
 `;
-var StyledHiddenSwitchInput = styled44.input`
+var StyledHiddenSwitchInput = styled45.input`
   ${visuallyHiddenStyle}
 `;
 var Switch = forwardRef14(
@@ -11606,7 +11606,7 @@ var Switch = forwardRef14(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs30(
       StyledSwitchWrapper,
       {
         $disabled: disabled,
@@ -11697,10 +11697,10 @@ var ContrastPreview = () => {
 };
 
 // src/components/ColorPicker/ContrastControls.tsx
-import { jsx as jsx253, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs31 } from "react/jsx-runtime";
 var ContrastControls = () => {
-  return /* @__PURE__ */ jsxs32(Stack, { children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(Stack, { children: [
+    /* @__PURE__ */ jsxs31(
       Box,
       {
         alignItems: "center",
@@ -11723,7 +11723,7 @@ import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
 import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
-import { styled as styled45, css as css30 } from "styled-components";
+import { styled as styled46, css as css30 } from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/inputCss.ts
@@ -11754,7 +11754,7 @@ var inputCss = css29`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx254, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs32 } from "react/jsx-runtime";
 var inputStyles = css30`
   ${inputCss}
   input,
@@ -11796,7 +11796,7 @@ var inputStyles = css30`
   }
 `;
 var calculateTextareaHeight = (rows = 1) => `calc((var(--wui-input-line-height) * ${rows}) + (var(--wui-input-vertical-padding) * 2));`;
-var StyledInputContainer = styled45.div`
+var StyledInputContainer = styled46.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -11946,7 +11946,7 @@ var Input = forwardRef15(
         });
       }
     };
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs32(
       StyledInputContainer,
       {
         $fullHeight: fullHeight,
@@ -12150,15 +12150,15 @@ import {
   Track as SliderTrack,
   Thumb as SliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled47 } from "styled-components";
+import { styled as styled48 } from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 import { useEffect as useEffect12, useRef as useRef11 } from "react";
-import { styled as styled46 } from "styled-components";
+import { styled as styled47 } from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
 import { jsx as jsx256 } from "react/jsx-runtime";
-var Canvas = styled46.canvas`
+var Canvas = styled47.canvas`
   display: block;
   height: 100%;
   width: 100%;
@@ -12196,9 +12196,9 @@ var HSVHueCanvas = ({ hsv }) => {
 };
 
 // src/components/ColorPicker/HueSlider.tsx
-import { jsx as jsx257, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx257, jsxs as jsxs33 } from "react/jsx-runtime";
 var TWENTY_FOUR = 24;
-var Container8 = styled47.div`
+var Container8 = styled48.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
   height: ${TWENTY_FOUR}px;
@@ -12206,7 +12206,7 @@ var Container8 = styled47.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-var Root = styled47(SliderRoot)`
+var Root = styled48(SliderRoot)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -12215,11 +12215,11 @@ var Root = styled47(SliderRoot)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-var Track = styled47(SliderTrack)`
+var Track = styled48(SliderTrack)`
   width: 100%;
 `;
-var Thumb = styled47(SliderThumb)``;
-var ThumbInner = styled47.div`
+var Thumb = styled48(SliderThumb)``;
+var ThumbInner = styled48.div`
   cursor: pointer;
   display: block;
   border-radius: var(--wui-border-radius-rounded);
@@ -12263,8 +12263,8 @@ var HueSlider = () => {
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsxs34(Container8, { style: containerStyle, children: [
-    /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs33(Container8, { style: containerStyle, children: [
+    /* @__PURE__ */ jsxs33(
       Root,
       {
         max: THREE_SIXTY,
@@ -12286,11 +12286,11 @@ HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
-import { styled as styled49 } from "styled-components";
+import { styled as styled50 } from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
-import { styled as styled48 } from "styled-components";
+import { styled as styled49 } from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -12320,7 +12320,7 @@ var drawSmoothCurve = (context, points) => {
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 import { jsx as jsx258 } from "react/jsx-runtime";
-var Canvas2 = styled48.canvas`
+var Canvas2 = styled49.canvas`
   display: block;
   width: 100%;
 `;
@@ -12438,16 +12438,16 @@ var HSVSaturationValueCanvas = ({
 };
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { jsx as jsx259, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx259, jsxs as jsxs34 } from "react/jsx-runtime";
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
-var Container9 = styled49.div`
+var Container9 = styled50.div`
   border-radius: var(--wui-border-radius-02);
   box-shadow: 0 0 0 1px var(--wui-color-border);
   overflow: hidden;
   position: relative;
 `;
-var Thumb2 = styled49.button.attrs({ type: "button" })`
+var Thumb2 = styled50.button.attrs({ type: "button" })`
   appearance: none;
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -12608,7 +12608,7 @@ var SaturationAndValuePicker = ({
   }, [onWindowMouseMove, onWindowMouseUp]);
   return (
     // eslint-disable-next-line styled-components-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxs35(
+    /* @__PURE__ */ jsxs34(
       Container9,
       {
         ref: containerRef,
@@ -12638,7 +12638,7 @@ var SaturationAndValuePicker = ({
             }
           ),
           /* @__PURE__ */ jsx259(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
-          /* @__PURE__ */ jsxs35(ScreenReaderOnly, { "aria-live": "polite", children: [
+          /* @__PURE__ */ jsxs34(ScreenReaderOnly, { "aria-live": "polite", children: [
             "Current color: ",
             valueAsHex,
             ". Hue: ",
@@ -12669,15 +12669,15 @@ import {
   isValidElement as isValidElement3
 } from "react";
 import { matchSorter } from "match-sorter";
-import { styled as styled51 } from "styled-components";
+import { styled as styled52 } from "styled-components";
 import { isArray as isArray2, isString as isString3 } from "@wistia/type-guards";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { styled as styled50 } from "styled-components";
+import { styled as styled51 } from "styled-components";
 import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment7, jsx as jsx260, jsxs as jsxs36 } from "react/jsx-runtime";
-var TagLabel = styled50.a`
+import { Fragment as Fragment7, jsx as jsx260, jsxs as jsxs35 } from "react/jsx-runtime";
+var TagLabel = styled51.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12713,14 +12713,14 @@ var TagLabel = styled50.a`
     background: var(--wui-color-bg-surface-secondary-active);
   }
 `;
-var TagDivider = styled50.div`
+var TagDivider = styled51.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled50.button`
+var StyledRemoveButton = styled51.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12748,7 +12748,7 @@ var StyledRemoveButton = styled50.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled50.div`
+var StyledTag = styled51.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12769,9 +12769,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment7, { children: [
     /* @__PURE__ */ jsx260(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsxs35(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -12795,14 +12795,14 @@ var Tag = forwardRef16(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil19(icon);
     const labelProps = isNotNil19(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs35(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsxs35(
             TagLabel,
             {
               ...labelProps,
@@ -12846,8 +12846,8 @@ var getDefaultTypographicElement = (variant) => {
 };
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx261, jsxs as jsxs37 } from "react/jsx-runtime";
-var ComboboxWrapper = styled51.div`
+import { jsx as jsx261, jsxs as jsxs36 } from "react/jsx-runtime";
+var ComboboxWrapper = styled52.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -12896,7 +12896,7 @@ var ComboboxWrapper = styled51.div`
     }
   }
 `;
-var ComboboxInput = styled51(Ariakit.Combobox)`
+var ComboboxInput = styled52(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -12911,7 +12911,7 @@ var ComboboxInput = styled51(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover2 = styled51(Ariakit.ComboboxPopover)`
+var ComboboxPopover2 = styled52(Ariakit.ComboboxPopover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -12937,7 +12937,7 @@ var ComboboxPopover2 = styled51(Ariakit.ComboboxPopover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = styled51(Ariakit.ComboboxItem)`
+var ComboboxItem2 = styled52(Ariakit.ComboboxItem)`
   ${getTypographicStyles("body3")};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -12965,7 +12965,7 @@ var ComboboxItem2 = styled51(Ariakit.ComboboxItem)`
     background-color: transparent;
   }
 `;
-var NoResults = styled51.div`
+var NoResults = styled52.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
@@ -13043,7 +13043,7 @@ var Combobox2 = ({
   const matches = useMemo11(() => {
     return matchSorter(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs36(
     Ariakit.ComboboxProvider,
     {
       open: isOpen,
@@ -13057,7 +13057,7 @@ var Combobox2 = ({
       },
       value: !isOpen && !isMultiSelect ? value : searchValue,
       children: [
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs36(
           ComboboxWrapper,
           {
             ref: comboboxWrapperRef,
@@ -13074,7 +13074,7 @@ var Combobox2 = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs36(
           ComboboxPopover2,
           {
             "aria-busy": isPending,
@@ -13086,7 +13086,7 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ jsxs37(
+              matches.map((match) => /* @__PURE__ */ jsxs36(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
@@ -13130,7 +13130,7 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil20, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { forwardRef as forwardRef17, useMemo as useMemo12 } from "react";
-import { styled as styled52, css as css32, keyframes as keyframes2 } from "styled-components";
+import { styled as styled53, css as css32, keyframes as keyframes3 } from "styled-components";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext6, useContext as useContext5 } from "react";
@@ -13138,8 +13138,8 @@ var MenuContext = createContext6({ compact: false });
 var useMenuContext = () => useContext5(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx262, jsxs as jsxs38 } from "react/jsx-runtime";
-var open = keyframes2`
+import { jsx as jsx262, jsxs as jsxs37 } from "react/jsx-runtime";
+var open = keyframes3`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -13149,7 +13149,7 @@ var open = keyframes2`
     transform: scale(1);
   }
 `;
-var close = keyframes2`
+var close = keyframes3`
   from {
     opacity: 1;
     transform: scale(1);
@@ -13223,7 +13223,7 @@ var menuContentCss = css32`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled52(DropdownMenuContent)`
+var MenuContent = styled53(DropdownMenuContent)`
   ${menuContentCss}
   min-width: var(--radix-dropdown-menu-trigger-width);
 `;
@@ -13251,7 +13251,7 @@ var Menu = forwardRef17(
         onOpenChange: () => null
       };
     }
-    return /* @__PURE__ */ jsx262(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsx262(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs37(
       DropdownMenu,
       {
         modal: false,
@@ -13293,10 +13293,10 @@ Menu.displayName = "Menu_UI";
 Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
-import { styled as styled53 } from "styled-components";
+import { styled as styled54 } from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx263 } from "react/jsx-runtime";
-var StyledMenuLabel = styled53(DropdownMenuLabel)`
+var StyledMenuLabel = styled54(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -13321,7 +13321,7 @@ MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState16 } from "react";
-import { styled as styled56 } from "styled-components";
+import { styled as styled57 } from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -13334,10 +13334,10 @@ import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef18 } from "react";
-import { styled as styled54 } from "styled-components";
+import { styled as styled55 } from "styled-components";
 import { isNotNil as isNotNil21, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
-import { jsx as jsx264, jsxs as jsxs39 } from "react/jsx-runtime";
-var StyledButton3 = styled54(Button)`
+import { jsx as jsx264, jsxs as jsxs38 } from "react/jsx-runtime";
+var StyledButton3 = styled55(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -13376,7 +13376,7 @@ var StyledButton3 = styled54(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled54.div`
+var StyledLeftIconContainer = styled55.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -13388,7 +13388,7 @@ var StyledLeftIconContainer = styled54.div`
     }
   }
 `;
-var StyledRightIconContainer = styled54.div`
+var StyledRightIconContainer = styled55.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -13400,13 +13400,13 @@ var StyledRightIconContainer = styled54.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled54.div`
+var StyledLabelAndDescriptionContainer = styled55.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled54.div`
+var StyledBadgeContainer = styled55.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -13433,7 +13433,7 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     StyledButton3,
     {
       ...props,
@@ -13454,10 +13454,10 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import { styled as styled55 } from "styled-components";
+import { styled as styled56 } from "styled-components";
 import { jsx as jsx265 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled55.span``;
-var StyledMenuItemDescription = styled55(Text)``;
+var StyledMenuItemLabel = styled56.span``;
+var StyledMenuItemDescription = styled56(Text)``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ jsx265(StyledMenuItemLabel, { children });
 };
@@ -13473,18 +13473,18 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx266, jsxs as jsxs40 } from "react/jsx-runtime";
-var SubMenuContent = styled56(DropdownMenuSubContent)`
+import { jsx as jsx266, jsxs as jsxs39 } from "react/jsx-runtime";
+var SubMenuContent = styled57(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled56.div`
+var StyledMobileSubMenuItems = styled57.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled56(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled57(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -13514,14 +13514,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState16(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs40(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs40(SubMenuTrigger, { ...props, children: [
+  return isSmAndUp ? /* @__PURE__ */ jsxs39(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs39(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx266(MenuItemLabel, { children: label }),
       isNotNil22(description) ? /* @__PURE__ */ jsx266(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx266(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx266(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs40(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs40(
+  ] }) : /* @__PURE__ */ jsxs39(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs39(
       SubMenuTrigger,
       {
         ...props,
@@ -13610,9 +13610,9 @@ RadioMenuItem.displayName = "RadioMenuItem_UI";
 // src/components/Menu/CheckboxMenuItem.tsx
 import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator as DropdownMenuItemIndicator2 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
-import { jsx as jsx270, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs40 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs41(
+  return checked ? /* @__PURE__ */ jsxs40(
     "svg",
     {
       ...props,
@@ -13638,7 +13638,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs41(
+  ) : /* @__PURE__ */ jsxs40(
     "svg",
     {
       ...props,
@@ -13695,11 +13695,11 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 // src/components/Menu/FilterMenu.tsx
 import { Children as Children6, forwardRef as forwardRef20 } from "react";
 import { DropdownMenuItem as DropdownMenuItem3 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx271, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx271, jsxs as jsxs41 } from "react/jsx-runtime";
 var FilterMenuItem = CheckboxMenuItem;
 var FilterMenu = forwardRef20(
   ({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs41(
       Menu,
       {
         ...props,
@@ -13863,10 +13863,10 @@ var ContextMenu = ({
 
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef15 } from "react";
-import { styled as styled57, keyframes as keyframes3 } from "styled-components";
+import { styled as styled58, keyframes as keyframes4 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
-import { jsx as jsx273, jsxs as jsxs43 } from "react/jsx-runtime";
-var StyledDataCard = styled57.div`
+import { jsx as jsx273, jsxs as jsxs42 } from "react/jsx-runtime";
+var StyledDataCard = styled58.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
@@ -13940,7 +13940,7 @@ var StyledDataCard = styled57.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = keyframes3`
+var shimmer = keyframes4`
   0% {
     background-position: 200% 0;
   }
@@ -13948,7 +13948,7 @@ var shimmer = keyframes3`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled57.div`
+var LoadingBackground = styled58.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -13959,32 +13959,32 @@ var LoadingBackground = styled57.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled57(LoadingBackground)`
+var StyledLoadingLabel = styled58(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled57(LoadingBackground)`
+var StyledLoadingValue = styled58(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = styled57(Heading)`
+var StyledLabel3 = styled58(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled57(Heading)`
+var StyledValue = styled58(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled57.div`
+var StyledSlot = styled58.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled57.div`
+var StyledDataCardTrendContainer = styled58.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = styled57(Text)`
+var StyledSubtitle = styled58(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -13996,7 +13996,7 @@ var DataCardInner = ({
   trend,
   subtitle,
   ...props
-}) => /* @__PURE__ */ jsxs43(
+}) => /* @__PURE__ */ jsxs42(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
@@ -14062,9 +14062,9 @@ var DataCard = (props) => {
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-import { styled as styled58 } from "styled-components";
+import { styled as styled59 } from "styled-components";
 import { jsx as jsx274 } from "react/jsx-runtime";
-var StyledDataCards = styled58(Box)`
+var StyledDataCards = styled59(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 
   > * {
@@ -14097,9 +14097,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-import { styled as styled59 } from "styled-components";
-import { jsx as jsx275, jsxs as jsxs44 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled59.div`
+import { styled as styled60 } from "styled-components";
+import { jsx as jsx275, jsxs as jsxs43 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled60.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -14114,7 +14114,7 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs44(StyledDataCardTrend, { $outlook: outlook, children: [
+  return /* @__PURE__ */ jsxs43(StyledDataCardTrend, { $outlook: outlook, children: [
     /* @__PURE__ */ jsx275(
       Icon,
       {
@@ -14135,9 +14135,9 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-import { styled as styled60 } from "styled-components";
+import { styled as styled61 } from "styled-components";
 import { jsx as jsx276 } from "react/jsx-runtime";
-var StyledIconContainer = styled60.div`
+var StyledIconContainer = styled61.div`
   display: flex;
   align-items: center;
   align-self: center;
@@ -14153,9 +14153,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ jsx276(StyledIconContainer, { chi
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
-import { styled as styled61 } from "styled-components";
+import { styled as styled62 } from "styled-components";
 import { jsx as jsx277 } from "react/jsx-runtime";
-var StyledDataList = styled61.dl`
+var StyledDataList = styled62.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -14234,7 +14234,7 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-import { styled as styled62, css as css33 } from "styled-components";
+import { styled as styled63, css as css33 } from "styled-components";
 import { jsx as jsx280 } from "react/jsx-runtime";
 var horizontalBorderCss = css33`
   border-top-color: var(--wui-color-border);
@@ -14249,7 +14249,7 @@ var verticalBorderCss = css33`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled62.div`
+var DividerComponent = styled63.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -14275,10 +14275,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { styled as styled63, css as css34 } from "styled-components";
+import { styled as styled64, css as css34 } from "styled-components";
 import { useState as useState18, useRef as useRef16 } from "react";
-import { Fragment as Fragment8, jsx as jsx281, jsxs as jsxs45 } from "react/jsx-runtime";
-var StyledInput = styled63(Input)`
+import { Fragment as Fragment8, jsx as jsx281, jsxs as jsxs44 } from "react/jsx-runtime";
+var StyledInput = styled64(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -14313,7 +14313,7 @@ var editableStyles = css34`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled63(Heading)`
+var StyledHeading2 = styled64(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -14401,7 +14401,7 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs45(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment8, { children: [
     /* @__PURE__ */ jsx281(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ jsx281(ScreenReaderOnly, { children: /* @__PURE__ */ jsx281(
       "button",
@@ -14416,13 +14416,13 @@ var EditableHeading = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 import { useContext as useContext6, useRef as useRef17, forwardRef as forwardRef21 } from "react";
-import { styled as styled65, css as css35 } from "styled-components";
+import { styled as styled66, css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
 import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
-import { styled as styled64 } from "styled-components";
+import { styled as styled65 } from "styled-components";
 import { jsx as jsx282 } from "react/jsx-runtime";
 var LARGE_PADDING = "var(--wui-space-02)";
 var SMALL_PADDING = "var(--wui-space-01)";
@@ -14458,7 +14458,7 @@ var getPaddingForVariant = (variant) => {
   }
   return SMALL_PADDING;
 };
-var StyledEditableTextRoot = styled64.div`
+var StyledEditableTextRoot = styled65.div`
   display: contents;
 
   --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
@@ -14570,8 +14570,8 @@ var EditableTextRoot = ({
 };
 
 // src/components/EditableText/EditableTextDisplay.tsx
-import { jsx as jsx283, jsxs as jsxs46 } from "react/jsx-runtime";
-var StyledEditableTextDisplay = styled65.div`
+import { jsx as jsx283, jsxs as jsxs45 } from "react/jsx-runtime";
+var StyledEditableTextDisplay = styled66.div`
   ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
   padding: var(--wui-editable-text-padding);
   border-radius: var(--wui-editable-text-border-radius);
@@ -14623,7 +14623,7 @@ var EditableTextDisplayComponent = forwardRef21(
       return null;
     }
     if (asTrigger && !context.readOnly) {
-      return /* @__PURE__ */ jsx283(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs46(
+      return /* @__PURE__ */ jsx283(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs45(
         StyledEditableTextDisplay,
         {
           ref,
@@ -14672,10 +14672,10 @@ var EditableTextDisplay = makePolymorphic(
 
 // src/components/EditableText/EditableTextInput.tsx
 import { useContext as useContext7, useEffect as useEffect17, useRef as useRef18 } from "react";
-import { styled as styled66 } from "styled-components";
+import { styled as styled67 } from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsx as jsx284 } from "react/jsx-runtime";
-var StyledInput2 = styled66(Input)`
+var StyledInput2 = styled67(Input)`
   && {
     ${({ $minLines }) => isNotNil27($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
     ${({ $maxLines }) => isNotNil27($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
@@ -14807,8 +14807,8 @@ var EditableTextLabel = ({ ...props }) => {
 };
 
 // src/components/EditableText/EditableText.tsx
-import { jsx as jsx286, jsxs as jsxs47 } from "react/jsx-runtime";
-var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs47(EditableTextRoot, { ...props, children: [
+import { jsx as jsx286, jsxs as jsxs46 } from "react/jsx-runtime";
+var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs46(EditableTextRoot, { ...props, children: [
   /* @__PURE__ */ jsx286(EditableTextLabel, { screenReaderOnly: hideLabel }),
   /* @__PURE__ */ jsx286(EditableTextInput, {}),
   /* @__PURE__ */ jsx286(EditableTextDisplay, { asTrigger: true })
@@ -14940,7 +14940,7 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext12, useRef as useRef19 } from "react";
 import { isArray as isArray3, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
-import { jsx as jsx287, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx287, jsxs as jsxs47 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx287("li", { children: /* @__PURE__ */ jsx287(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
@@ -14951,7 +14951,7 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs48("div", { ref, children: [
+  return /* @__PURE__ */ jsxs47("div", { ref, children: [
     /* @__PURE__ */ jsx287("p", { children: description }),
     /* @__PURE__ */ jsx287("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
       ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx287(
@@ -14977,10 +14977,10 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled67 } from "styled-components";
+import { styled as styled68 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { Fragment as Fragment9, jsx as jsx288, jsxs as jsxs49 } from "react/jsx-runtime";
-var StyledFormField = styled67.div`
+import { Fragment as Fragment9, jsx as jsx288, jsxs as jsxs48 } from "react/jsx-runtime";
+var StyledFormField = styled68.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -15010,7 +15010,7 @@ var StyledFormField = styled67.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = styled67.ul`
+var StyledErrorList = styled68.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -15112,7 +15112,7 @@ var FormField = ({
     };
   }
   Children10.only(children);
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs48(
     StyledFormField,
     {
       ...props,
@@ -15128,7 +15128,7 @@ var FormField = ({
         ),
         isNotNil28(description) ? /* @__PURE__ */ jsx288(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
-        isNotNil28(computedError) ? /* @__PURE__ */ jsxs49(Fragment9, { children: [
+        isNotNil28(computedError) ? /* @__PURE__ */ jsxs48(Fragment9, { children: [
           /* @__PURE__ */ jsx288("div", {}),
           /* @__PURE__ */ jsx288(
             ErrorMessages,
@@ -15173,7 +15173,7 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled68, css as css36 } from "styled-components";
+import { styled as styled69, css as css36 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
 import { jsx as jsx290 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
@@ -15203,7 +15203,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
     );
   `;
 };
-var StyledGrid = styled68.div`
+var StyledGrid = styled69.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
 
@@ -15247,11 +15247,11 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-import { styled as styled69 } from "styled-components";
+import { styled as styled70 } from "styled-components";
 import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState21 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx291 } from "react/jsx-runtime";
-var StyledIconButton = styled69(IconButton)`
+var StyledIconButton = styled70(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15317,11 +15317,11 @@ var InputClickToCopy = forwardRef23(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-import { styled as styled70 } from "styled-components";
+import { styled as styled71 } from "styled-components";
 import { forwardRef as forwardRef24, useState as useState22 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
 import { jsx as jsx292 } from "react/jsx-runtime";
-var StyledIconButton2 = styled70(IconButton)`
+var StyledIconButton2 = styled71(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15364,16 +15364,16 @@ var InputPassword = forwardRef24(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import { styled as styled71 } from "styled-components";
+import { styled as styled72 } from "styled-components";
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { jsx as jsx293, jsxs as jsxs50 } from "react/jsx-runtime";
-var StyledKeyboardShortcut = styled71.div`
+import { jsx as jsx293, jsxs as jsxs49 } from "react/jsx-runtime";
+var StyledKeyboardShortcut = styled72.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = styled71.kbd`
+var StyledKey = styled72.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -15396,11 +15396,11 @@ var StyledKey = styled71.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = styled71.span`
+var Label2 = styled72.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = styled71.div`
+var KeysContainer = styled72.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -15453,7 +15453,7 @@ var KeyboardShortcut = ({
   keyboardKeys,
   fullWidth = false,
   ...otherProps
-}) => /* @__PURE__ */ jsxs50(
+}) => /* @__PURE__ */ jsxs49(
   StyledKeyboardShortcut,
   {
     $fullWidth: fullWidth,
@@ -15474,13 +15474,13 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled73, css as css37 } from "styled-components";
+import { styled as styled74, css as css37 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import { styled as styled72 } from "styled-components";
+import { styled as styled73 } from "styled-components";
 import { isNil as isNil17 } from "@wistia/type-guards";
 import { jsx as jsx294 } from "react/jsx-runtime";
-var ListItemComponent = styled72.li`
+var ListItemComponent = styled73.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
@@ -15492,7 +15492,7 @@ var ListItem = ({ children }) => {
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx295, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx295, jsxs as jsxs50 } from "react/jsx-runtime";
 var spacesStyle = css37`
   overflow: hidden;
   padding-left: 0;
@@ -15551,7 +15551,7 @@ var unbulletedStyle = css37`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = styled73.ul`
+var ListComponent = styled74.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -15595,7 +15595,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     const nextItem = listItems[i + 1];
     const key = `item-${itemCount += 1}`;
     if (Array.isArray(nextItem)) {
-      return /* @__PURE__ */ jsxs51(ListItem, { children: [
+      return /* @__PURE__ */ jsxs50(ListItem, { children: [
         item,
         renderListFromArray(nextItem, variant, otherProps)
       ] }, key);
@@ -15631,9 +15631,9 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-import { styled as styled74 } from "styled-components";
+import { styled as styled75 } from "styled-components";
 import { jsx as jsx296 } from "react/jsx-runtime";
-var StyledMark = styled74.mark`
+var StyledMark = styled75.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
   color: var(--wui-color-text);
@@ -15653,19 +15653,19 @@ Mark.displayName = "Mark_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { styled as styled79 } from "styled-components";
+import { styled as styled80 } from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import { styled as styled76 } from "styled-components";
+import { styled as styled77 } from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import { styled as styled75 } from "styled-components";
+import { styled as styled76 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
 import { jsx as jsx297 } from "react/jsx-runtime";
-var CloseButton = styled75(DialogClose)`
+var CloseButton = styled76(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -15681,8 +15681,8 @@ var ModalCloseButton = () => {
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx298, jsxs as jsxs52 } from "react/jsx-runtime";
-var Header = styled76.header`
+import { jsx as jsx298, jsxs as jsxs51 } from "react/jsx-runtime";
+var Header = styled77.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -15702,7 +15702,7 @@ var Header = styled76.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = styled76(DialogTitle)`
+var Title = styled77(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);
@@ -15714,7 +15714,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ jsx298(ScreenReaderOnly, { children: /* @__PURE__ */ jsx298(Title, { children: title }) }) : /* @__PURE__ */ jsx298(Title, { children: title });
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs51(
     Header,
     {
       $hideCloseButon: hideCloseButton,
@@ -15729,7 +15729,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled77, css as css38, keyframes as keyframes4 } from "styled-components";
+import { styled as styled78, css as css38, keyframes as keyframes5 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15753,7 +15753,7 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 import { jsx as jsx299 } from "react/jsx-runtime";
-var modalEnter = keyframes4`
+var modalEnter = keyframes5`
   from {
     opacity: 0;
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
@@ -15764,7 +15764,7 @@ var modalEnter = keyframes4`
     transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
   }
 `;
-var modalExit = keyframes4`
+var modalExit = keyframes5`
   from {
     opacity: 1;
     transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
@@ -15810,7 +15810,7 @@ var fixedTopModalStyles = css38`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var slideInRight = keyframes4`
+var slideInRight = keyframes5`
   from {
     opacity: 0;
     transform: translateX(100%);
@@ -15821,7 +15821,7 @@ var slideInRight = keyframes4`
     transform: translateX(0);
   }
 `;
-var slideOutRight = keyframes4`
+var slideOutRight = keyframes5`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -15850,7 +15850,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = styled77(DialogContent)`
+var StyledModalContent = styled78(DialogContent)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -15896,8 +15896,8 @@ var ModalContent = forwardRef25(
 
 // src/components/Modal/ModalOverlay.tsx
 import { DialogOverlay } from "@radix-ui/react-dialog";
-import { styled as styled78, keyframes as keyframes5 } from "styled-components";
-var backdropShow = keyframes5`
+import { styled as styled79, keyframes as keyframes6 } from "styled-components";
+var backdropShow = keyframes6`
   from {
     opacity: 0;
   }
@@ -15906,7 +15906,7 @@ var backdropShow = keyframes5`
     opacity: 1;
   }
 `;
-var backdropHide = keyframes5`
+var backdropHide = keyframes6`
   from {
     opacity: 1;
   }
@@ -15915,7 +15915,7 @@ var backdropHide = keyframes5`
     opacity: 0;
   }
 `;
-var ModalOverlay = styled78(DialogOverlay)`
+var ModalOverlay = styled79(DialogOverlay)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
@@ -15928,20 +15928,20 @@ var ModalOverlay = styled78(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx300, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx300, jsxs as jsxs52 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled79.div`
+var ModalBody = styled80.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = styled79.div`
+var ModalScrollArea = styled80.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = styled79.footer`
+var ModalFooter = styled80.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -15968,9 +15968,9 @@ var Modal = forwardRef26(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs53(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs52(DialogPortal, { children: [
           /* @__PURE__ */ jsx300(ModalOverlay, {}),
-          /* @__PURE__ */ jsxs53(
+          /* @__PURE__ */ jsxs52(
             ModalContent,
             {
               ref,
@@ -16007,7 +16007,7 @@ var Modal = forwardRef26(
 Modal.displayName = "Modal_UI";
 
 // src/components/Modal/ModalCallouts.tsx
-import { jsx as jsx301, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx301, jsxs as jsxs53 } from "react/jsx-runtime";
 var ModalCallouts = ({ children }) => {
   return /* @__PURE__ */ jsx301(
     Stack,
@@ -16020,7 +16020,7 @@ var ModalCallouts = ({ children }) => {
 };
 ModalCallouts.displayName = "ModalCallouts_UI";
 var ModalCallout = ({ title, image, children }) => {
-  return /* @__PURE__ */ jsxs54(Stack, { direction: "vertical", children: [
+  return /* @__PURE__ */ jsxs53(Stack, { direction: "vertical", children: [
     image,
     /* @__PURE__ */ jsx301(Heading, { variant: "heading4", children: title }),
     children
@@ -16030,7 +16030,7 @@ 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 styled81, css as css40 } from "styled-components";
+import { styled as styled82, css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -16040,12 +16040,12 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled80, css as css39, keyframes as keyframes6 } from "styled-components";
-import { jsx as jsx302, jsxs as jsxs55 } from "react/jsx-runtime";
-var StyledPath = styled80.path`
+import { styled as styled81, css as css39, keyframes as keyframes7 } from "styled-components";
+import { jsx as jsx302, jsxs as jsxs54 } from "react/jsx-runtime";
+var StyledPath = styled81.path`
   fill: var(--wui-color-border-secondary);
 `;
-var circleAnimation = keyframes6`
+var circleAnimation = keyframes7`
   0% {
     opacity: var(--wui-popover-arrow-circle-starting-opacity);
   }
@@ -16053,7 +16053,7 @@ var circleAnimation = keyframes6`
     opacity: 0;
   }
 `;
-var StyledCircle = styled80.circle`
+var StyledCircle = styled81.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -16080,7 +16080,7 @@ var StyledCircle = styled80.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx302(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsx302(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs54(
     "svg",
     {
       fill: "none",
@@ -16119,8 +16119,8 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx303, jsxs as jsxs56 } from "react/jsx-runtime";
-var StyledContent2 = styled81(Content2)`
+import { jsx as jsx303, jsxs as jsxs55 } from "react/jsx-runtime";
+var StyledContent2 = styled82(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css40`
@@ -16159,9 +16159,9 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs56(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+  return /* @__PURE__ */ jsxs55(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ jsx303(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx303(Portal, { children: /* @__PURE__ */ jsxs56(
+    /* @__PURE__ */ jsx303(Portal, { children: /* @__PURE__ */ jsxs55(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -16189,11 +16189,11 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled82 } from "styled-components";
+import { styled as styled83 } from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
-import { jsx as jsx304, jsxs as jsxs57 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled82.div`
+import { jsx as jsx304, jsxs as jsxs56 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled83.div`
   --progress-bar-height: 8px;
 
   display: flex;
@@ -16207,7 +16207,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled82.div`
+var ProgressBarLabel = styled83.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -16215,7 +16215,7 @@ var ProgressBarLabel = styled82.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled82(ProgressIndicator)`
+var StyledProgressIndicator = styled83(ProgressIndicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   width: 100%;
@@ -16225,7 +16225,7 @@ var StyledProgressIndicator = styled82(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled82(ProgressRoot)`
+var StyledProgressBar = styled83(ProgressRoot)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -16246,7 +16246,7 @@ var ProgressBar = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs57(ProgressBarWrapper, { children: [
+  return /* @__PURE__ */ jsxs56(ProgressBarWrapper, { children: [
     isNotNil34(labelLeft) ? /* @__PURE__ */ jsx304(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx304(
       StyledProgressBar,
@@ -16273,8 +16273,8 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
-import { styled as styled83, css as css41 } from "styled-components";
-import { jsx as jsx305, jsxs as jsxs58 } from "react/jsx-runtime";
+import { styled as styled84, css as css41 } from "styled-components";
+import { jsx as jsx305, jsxs as jsxs57 } from "react/jsx-runtime";
 var sizeSmall2 = css41`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
@@ -16292,7 +16292,7 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled83.div`
+var StyledRadioWrapper = styled84.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -16326,7 +16326,7 @@ var StyledRadioWrapper = styled83.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled83.div`
+var StyledRadioInput = styled84.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -16352,7 +16352,7 @@ var StyledRadioInput = styled83.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = styled83.input`
+var StyledHiddenRadioInput = styled84.input`
   ${visuallyHiddenStyle}
 `;
 var Radio = forwardRef27(
@@ -16379,7 +16379,7 @@ var Radio = forwardRef27(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined13(value) && isNotUndefined13(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs57(
       StyledRadioWrapper,
       {
         $disabled: disabled,
@@ -16424,9 +16424,9 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
-import { styled as styled84, css as css42 } from "styled-components";
+import { styled as styled85, css as css42 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
-import { jsx as jsx306, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs58 } from "react/jsx-runtime";
 var checkedStyles = css42`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
@@ -16476,7 +16476,7 @@ var imageCoverStyles = css42`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled84.label`
+var StyledCard2 = styled85.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;
@@ -16530,7 +16530,7 @@ var StyledCard2 = styled84.label`
     }
   }
 `;
-var StyledHiddenInput = styled84.input`
+var StyledHiddenInput = styled85.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = forwardRef28(
@@ -16555,7 +16555,7 @@ var RadioCardRoot = forwardRef28(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs59(
+    return /* @__PURE__ */ jsxs58(
       StyledCard2,
       {
         $aspectRatio: aspectRatio,
@@ -16585,12 +16585,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled86 } from "styled-components";
+import { styled as styled87 } from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled85 } from "styled-components";
-var RadioCardIndicator = styled85.div`
+import { styled as styled86 } from "styled-components";
+var RadioCardIndicator = styled86.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);
@@ -16639,16 +16639,16 @@ var RadioCardIndicator = styled85.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx307, jsxs as jsxs60 } from "react/jsx-runtime";
-var StyledCardContent = styled86.div`
+import { jsx as jsx307, jsxs as jsxs59 } from "react/jsx-runtime";
+var StyledCardContent = styled87.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled86.div`
+var StyledCardIcon = styled87.div`
   display: contents;
 `;
-var StyledIndicatorContainer = styled86.div`
+var StyledIndicatorContainer = styled87.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -16659,11 +16659,11 @@ var RadioCardDefaultLayout = ({
   description,
   showIndicator = true
 }) => {
-  return /* @__PURE__ */ jsxs60(StyledCardContent, { children: [
+  return /* @__PURE__ */ jsxs59(StyledCardContent, { children: [
     showIndicator ? /* @__PURE__ */ jsx307(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx307(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
-    /* @__PURE__ */ jsxs60(Stack, { gap: "space-02", children: [
+    /* @__PURE__ */ jsxs59(Stack, { gap: "space-02", children: [
       isNotNil35(icon) && /* @__PURE__ */ jsx307(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
-      /* @__PURE__ */ jsxs60(
+      /* @__PURE__ */ jsxs59(
         Stack,
         {
           gap: "space-01",
@@ -16687,8 +16687,8 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import { styled as styled87 } from "styled-components";
-var RadioCardChildrenContainer = styled87.div`
+import { styled as styled88 } from "styled-components";
+var RadioCardChildrenContainer = styled88.div`
   flex: 1 1 auto;
 `;
 
@@ -16747,49 +16747,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
-import { styled as styled88 } from "styled-components";
+import { styled as styled89 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx310, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs60 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled88.div`
+var Container10 = styled89.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled88.div`
+var ScrollContainer = styled89.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled88.div`
+var Shadow = styled89.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 = styled88(Shadow)`
+var ShadowAtTop = styled89(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled88(Shadow)`
+var ShadowAtBottom = styled89(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled88(Shadow)`
+var ShadowAtLeft = styled89(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled88(Shadow)`
+var ShadowAtRight = styled89(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -16829,7 +16829,7 @@ var ScrollArea = forwardRef31(
     useEffect20(() => {
       updateShadows();
     }, [updateShadows]);
-    return /* @__PURE__ */ jsxs61(Container10, { style, children: [
+    return /* @__PURE__ */ jsxs60(Container10, { style, children: [
       /* @__PURE__ */ jsx310(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
       /* @__PURE__ */ jsx310(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
       /* @__PURE__ */ jsx310(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
@@ -16851,7 +16851,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled90, css as css44 } from "styled-components";
+import { styled as styled91, css as css44 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
@@ -16889,7 +16889,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled89, css as css43 } from "styled-components";
+import { styled as styled90, css as css43 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -16911,7 +16911,7 @@ var selectedItemIndicatorStyles = css43`
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = styled89.div`
+var SelectedItemIndicatorDiv = styled90.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -16937,7 +16937,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx313, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx313, jsxs as jsxs61 } from "react/jsx-runtime";
 var segmentedControlStyles = css44`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -16949,7 +16949,7 @@ var segmentedControlStyles = css44`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled90(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled91(ToggleGroupRoot2)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef32(
@@ -16976,7 +16976,7 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx313(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs62(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx313(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs61(SelectedItemStyleProvider, { children: [
           children,
           /* @__PURE__ */ jsx313(SelectedItemIndicator, {})
         ] }) })
@@ -16988,10 +16988,10 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
-import { styled as styled91, css as css45 } from "styled-components";
+import { styled as styled92, css as css45 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
-import { jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsxs as jsxs62 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css45`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -17060,7 +17060,7 @@ var segmentedControlItemStyles = css45`
     }
   }
 `;
-var StyledSegmentedControlItem = styled91(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled92(ToggleGroupItem2)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef33(
@@ -17101,7 +17101,7 @@ var SegmentedControlItem = forwardRef33(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs62(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
@@ -17133,9 +17133,9 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled92, css as css46 } from "styled-components";
-import { jsx as jsx314, jsxs as jsxs64 } from "react/jsx-runtime";
-var StyledTrigger2 = styled92(Trigger3)`
+import { styled as styled93, css as css46 } from "styled-components";
+import { jsx as jsx314, jsxs as jsxs63 } from "react/jsx-runtime";
+var StyledTrigger2 = styled93(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -17181,7 +17181,7 @@ var StyledTrigger2 = styled92(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled92(Content3)`
+var StyledContent3 = styled93(Content3)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -17209,10 +17209,10 @@ var scrollButtonStyles = css46`
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled92(ScrollDownButton)`
+var StyledScrollDownButton = styled93(ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled92(ScrollUpButton)`
+var StyledScrollUpButton = styled93(ScrollUpButton)`
   ${scrollButtonStyles}
 `;
 var Select = forwardRef34(
@@ -17235,8 +17235,8 @@ var Select = forwardRef34(
     if (forceOpen) {
       rootProps["open"] = true;
     }
-    return /* @__PURE__ */ jsxs64(Root3, { ...rootProps, children: [
-      /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs63(Root3, { ...rootProps, children: [
+      /* @__PURE__ */ jsxs63(
         StyledTrigger2,
         {
           ref: forwardedRef,
@@ -17255,7 +17255,7 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx314(Portal2, { children: /* @__PURE__ */ jsxs64(StyledContent3, { position: "popper", children: [
+      /* @__PURE__ */ jsx314(Portal2, { children: /* @__PURE__ */ jsxs63(StyledContent3, { position: "popper", children: [
         /* @__PURE__ */ jsx314(StyledScrollUpButton, { children: /* @__PURE__ */ jsx314(
           Icon,
           {
@@ -17280,10 +17280,10 @@ Select.displayName = "Select_UI";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
-import { styled as styled93 } from "styled-components";
+import { styled as styled94 } from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsx as jsx315, jsxs as jsxs65 } from "react/jsx-runtime";
-var StyledItem = styled93(Item)`
+import { jsx as jsx315, jsxs as jsxs64 } from "react/jsx-runtime";
+var StyledItem = styled94(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -17311,14 +17311,14 @@ var StyledItem = styled93(Item)`
 `;
 var SelectOption = forwardRef35(
   ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs64(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs65("div", { children: [
+          isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs64("div", { children: [
             children,
             /* @__PURE__ */ jsx315("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx315(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx315(ItemText, { children }),
@@ -17338,13 +17338,13 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
-import { styled as styled94 } from "styled-components";
-import { jsx as jsx316, jsxs as jsxs66 } from "react/jsx-runtime";
-var StyledLabel4 = styled94(Label3)`
+import { styled as styled95 } from "styled-components";
+import { jsx as jsx316, jsxs as jsxs65 } from "react/jsx-runtime";
+var StyledLabel4 = styled95(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs66(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs65(Group, { ...props, children: [
     /* @__PURE__ */ jsx316(StyledLabel4, { children: /* @__PURE__ */ jsx316(
       Heading,
       {
@@ -17364,10 +17364,10 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled95 } from "styled-components";
+import { styled as styled96 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
-import { jsx as jsx317, jsxs as jsxs67 } from "react/jsx-runtime";
-var SliderContainer = styled95.div`
+import { jsx as jsx317, jsxs as jsxs66 } from "react/jsx-runtime";
+var SliderContainer = styled96.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);
@@ -17383,7 +17383,7 @@ var SliderContainer = styled95.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled95(RadixSliderRoot)`
+var StyledSliderRoot = styled96(RadixSliderRoot)`
   position: relative;
   display: flex;
   align-items: center;
@@ -17391,20 +17391,20 @@ var StyledSliderRoot = styled95(RadixSliderRoot)`
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled95(RadixSliderTrack)`
+var StyledSliderTrack = styled96(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 = styled95(RadixSliderRange)`
+var StyledSliderRange = styled96(RadixSliderRange)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = styled95(RadixSliderThumb)`
+var StyledSliderThumb = styled96(RadixSliderThumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -17460,7 +17460,7 @@ var Slider = ({
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs67(
+      children: /* @__PURE__ */ jsxs66(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -17490,9 +17490,9 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled96, css as css47 } from "styled-components";
+import { styled as styled97, css as css47 } from "styled-components";
 import { jsx as jsx318 } from "react/jsx-runtime";
-var StyledTable = styled96.table`
+var StyledTable = styled97.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -17534,7 +17534,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import { styled as styled97 } from "styled-components";
+import { styled as styled98 } from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext11 } from "react";
@@ -17542,27 +17542,27 @@ var TableSectionContext = createContext11(null);
 
 // src/components/Table/TableBody.tsx
 import { jsx as jsx319 } from "react/jsx-runtime";
-var StyledTableBody = styled97.tbody``;
+var StyledTableBody = styled98.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx319(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx319(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled98, css as css48 } from "styled-components";
+import { styled as styled99, css as css48 } from "styled-components";
 import { jsx as jsx320 } from "react/jsx-runtime";
 var sharedStyles = css48`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled98.th`
+var StyledTh = styled99.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 = styled98.td`
+var StyledTd = styled99.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -17577,25 +17577,25 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-import { styled as styled99 } from "styled-components";
+import { styled as styled100 } from "styled-components";
 import { jsx as jsx321 } from "react/jsx-runtime";
-var StyledTableFoot = styled99.tfoot``;
+var StyledTableFoot = styled100.tfoot``;
 var TableFoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx321(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx321(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-import { styled as styled100 } from "styled-components";
+import { styled as styled101 } from "styled-components";
 import { jsx as jsx322 } from "react/jsx-runtime";
-var StyledThead = styled100.thead``;
+var StyledThead = styled101.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx322(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx322(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import { styled as styled101 } from "styled-components";
+import { styled as styled102 } from "styled-components";
 import { jsx as jsx323 } from "react/jsx-runtime";
-var StyledTableRow = styled101.tr``;
+var StyledTableRow = styled102.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx323(StyledTableRow, { ...props, children });
 };
@@ -17660,14 +17660,14 @@ TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { styled as styled103 } from "styled-components";
+import { styled as styled104 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import { styled as styled102 } from "styled-components";
-var TabsSelectedItemIndicatorDiv = styled102(SelectedItemIndicatorDiv)`
+import { styled as styled103 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled103(SelectedItemIndicatorDiv)`
   &:has(~ button[role='tab']:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -17691,12 +17691,12 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx327, jsxs as jsxs68 } from "react/jsx-runtime";
-var StyledRadixTabsList = styled103(RadixTabList)`
+import { jsx as jsx327, jsxs as jsxs67 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled104(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
-  return /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs67(
     StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
@@ -17715,9 +17715,9 @@ import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef2
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import { styled as styled104 } from "styled-components";
+import { styled as styled105 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledRadixTabsTrigger = styled104(RadixTabsTrigger)`
+var StyledRadixTabsTrigger = styled105(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -17726,7 +17726,7 @@ var StyledRadixTabsTrigger = styled104(RadixTabsTrigger)`
 `;
 
 // src/components/Tabs/TabsTrigger.tsx
-import { jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsxs as jsxs68 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef36(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
@@ -17758,7 +17758,7 @@ var TabsTrigger = forwardRef36(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs69(
+    return /* @__PURE__ */ jsxs68(
       StyledRadixTabsTrigger,
       {
         ...otherProps,
@@ -17778,10 +17778,10 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import { styled as styled105 } from "styled-components";
+import { styled as styled106 } from "styled-components";
 import { isNotNil as isNotNil40 } from "@wistia/type-guards";
-import { jsx as jsx328, jsxs as jsxs70 } from "react/jsx-runtime";
-var StyledThumbnailBadge = styled105.div`
+import { jsx as jsx328, jsxs as jsxs69 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled106.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -17807,7 +17807,7 @@ var StyledThumbnailBadge = styled105.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs70(StyledThumbnailBadge, { ...props, children: [
+  return /* @__PURE__ */ jsxs69(StyledThumbnailBadge, { ...props, children: [
     isNotNil40(icon) && icon,
     /* @__PURE__ */ jsx328("span", { children: label })
   ] });
@@ -17816,7 +17816,7 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
-import { styled as styled107 } from "styled-components";
+import { styled as styled108 } from "styled-components";
 import {
   isNil as isNil19,
   isNotNil as isNotNil43,
@@ -17959,10 +17959,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import { styled as styled106 } from "styled-components";
+import { styled as styled107 } from "styled-components";
 import { isNotNil as isNotNil42 } from "@wistia/type-guards";
-import { jsx as jsx329, jsxs as jsxs71 } from "react/jsx-runtime";
-var ScrubLine = styled106.div`
+import { jsx as jsx329, jsxs as jsxs70 } from "react/jsx-runtime";
+var ScrubLine = styled107.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -18073,7 +18073,7 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs70(
     "div",
     {
       ...props,
@@ -18094,7 +18094,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx330, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx330, jsxs as jsxs71 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -18103,12 +18103,12 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled107.img`
+var WideThumbnailImage = styled108.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled107.img`
+var SquareThumbnailImage = styled108.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -18133,7 +18133,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = styled107.div`
+var StyledThumbnailContainer = styled108.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -18141,7 +18141,7 @@ var StyledThumbnailContainer = styled107.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = styled107.div`
+var StyledThumbnail = styled108.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
   background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
@@ -18297,7 +18297,7 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         ...props,
-        children: /* @__PURE__ */ jsxs72(
+        children: /* @__PURE__ */ jsxs71(
           StyledThumbnail,
           {
             $backgroundUrl: backgroundUrl,
@@ -18317,16 +18317,16 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import { cloneElement as cloneElement9, Children as Children11 } from "react";
-import { styled as styled108 } from "styled-components";
+import { styled as styled109 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx331 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled108.div`
+var ThumbnailCollageContainer = styled109.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = styled108.div`
+var StyledThumbnailCollage = styled109.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -18405,9 +18405,9 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled109, css as css50 } from "styled-components";
+import { styled as styled110, css as css50 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { jsx as jsx332, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx332, jsxs as jsxs72 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx332(
@@ -18447,7 +18447,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled109.svg`
+var WistiaLogoComponent = styled110.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -18505,7 +18505,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs73(
+  const Logo = /* @__PURE__ */ jsxs72(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -18530,11 +18530,11 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-import { styled as styled110 } from "styled-components";
+import { styled as styled111 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { cloneElement as cloneElement10 } from "react";
-import { jsx as jsx333, jsxs as jsxs74 } from "react/jsx-runtime";
-var StyledSplitButton = styled110.span`
+import { jsx as jsx333, jsxs as jsxs73 } from "react/jsx-runtime";
+var StyledSplitButton = styled111.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
 
@@ -18566,7 +18566,7 @@ var SplitButton = ({
   menuProps = {},
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs74(StyledSplitButton, { $colorScheme: colorScheme, children: [
+  return /* @__PURE__ */ jsxs73(StyledSplitButton, { $colorScheme: colorScheme, children: [
     /* @__PURE__ */ jsx333(
       Button,
       {