@wistia/ui 0.18.12-beta.5f8d1be2.dba10ff → 0.18.12-beta.bcf77b16.00cf9a6

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.12-beta.5f8d1be2.dba10ff
+ * @license @wistia/ui v0.18.12-beta.bcf77b16.00cf9a6
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3443,11 +3443,11 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 var import_react24 = require("react");
-var import_styled_components23 = require("styled-components");
+var import_styled_components24 = require("styled-components");
 
 // src/components/Button/Button.tsx
 var import_react23 = require("react");
-var import_styled_components22 = require("styled-components");
+var import_styled_components23 = require("styled-components");
 var import_type_guards15 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
@@ -3653,7 +3653,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 var import_type_guards13 = require("@wistia/type-guards");
-var import_styled_components20 = require("styled-components");
+var import_styled_components21 = require("styled-components");
 
 // src/components/Icon/icons/AbTestIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -6987,35 +6987,35 @@ var SpeedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
 );
 
 // src/components/Icon/icons/SpinnerIcon.tsx
+var import_styled_components20 = require("styled-components");
 var import_jsx_runtime173 = require("react/jsx-runtime");
+var spin = import_styled_components20.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var SpinnerGroup = import_styled_components20.styled.g`
+  animation: ${spin} 1.5s linear infinite;
+  transform-origin: 50% 50%;
+`;
 var SpinnerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
-        "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__ */ (0, import_jsx_runtime173.jsx)(
-        "animateTransform",
-        {
-          attributeName: "transform",
-          dur: "1.5s",
-          keyTimes: "0;1",
-          repeatCount: "indefinite",
-          type: "rotate",
-          values: "0 12 12;360 12 12"
-        }
-      )
-    ] })
+    children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(SpinnerGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+      "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"
+      }
+    ) })
   }
 );
 
@@ -7798,7 +7798,7 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var iconInlineStyle = import_styled_components20.css`
+var iconInlineStyle = import_styled_components21.css`
   [data-wui-icon-inline] {
     --wui-icon-inline-size: 0.8em;
     --wui-icon-inline-offset: 0.05em;
@@ -7808,7 +7808,7 @@ var iconInlineStyle = import_styled_components20.css`
     position: relative;
   }
 `;
-var StyledIcon = import_styled_components20.styled.svg`
+var StyledIcon = import_styled_components21.styled.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
   --wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
   --wui-icon-vertical-align: middle;
@@ -7866,7 +7866,7 @@ Icon.displayName = "Icon_UI";
 
 // src/components/Link/Link.tsx
 var import_react22 = require("react");
-var import_styled_components21 = require("styled-components");
+var import_styled_components22 = require("styled-components");
 var import_react_router = require("react-router");
 var import_type_guards14 = require("@wistia/type-guards");
 var import_jsx_runtime203 = require("react/jsx-runtime");
@@ -7885,7 +7885,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => (0, import_type_guards14.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
-var StyledLink = import_styled_components21.styled.a`
+var StyledLink = import_styled_components22.styled.a`
   ${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
@@ -8014,7 +8014,7 @@ Link.displayName = "Link_UI";
 // src/components/Button/Button.tsx
 var import_jsx_runtime204 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards15.isNotUndefined)(props.href);
-var StyledButton = import_styled_components22.styled.button`
+var StyledButton = import_styled_components23.styled.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   ${({ $size }) => buttonSizeStyles[$size]}
@@ -8023,7 +8023,7 @@ var StyledButton = import_styled_components22.styled.button`
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   text-align: center;
 `;
-var StyledButtonContent = import_styled_components22.styled.div`
+var StyledButtonContent = import_styled_components23.styled.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -8035,10 +8035,10 @@ var StyledButtonContent = import_styled_components22.styled.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = import_styled_components22.styled.span`
+var StyledButtonContentLabel = import_styled_components23.styled.span`
   flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
 `;
-var StyledButtonLoading = import_styled_components22.styled.div`
+var StyledButtonLoading = import_styled_components23.styled.div`
   position: absolute;
   display: flex;
 `;
@@ -8156,7 +8156,7 @@ Button.displayName = "Button_UI";
 
 // src/components/ActionButton/ActionButton.tsx
 var import_jsx_runtime205 = require("react/jsx-runtime");
-var StyledActionButton = (0, import_styled_components23.styled)(Button)`
+var StyledActionButton = (0, import_styled_components24.styled)(Button)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: grid;
   grid-template-columns: 24px 1fr;
@@ -8201,7 +8201,7 @@ var StyledActionButton = (0, import_styled_components23.styled)(Button)`
     }
   }
 `;
-var StyledMainIcon = import_styled_components23.styled.div`
+var StyledMainIcon = import_styled_components24.styled.div`
   grid-column: 1;
   grid-row: 1;
   width: 24px;
@@ -8216,7 +8216,7 @@ var StyledMainIcon = import_styled_components23.styled.div`
     }
   }
 `;
-var StyledSecondaryIcon = import_styled_components23.styled.div`
+var StyledSecondaryIcon = import_styled_components24.styled.div`
   grid-column: 2;
   grid-row: 1;
   width: 100%;
@@ -8224,7 +8224,7 @@ var StyledSecondaryIcon = import_styled_components23.styled.div`
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
 
-  ${({ $hideUntilHover }) => $hideUntilHover && import_styled_components23.css`
+  ${({ $hideUntilHover }) => $hideUntilHover && import_styled_components24.css`
       will-change: transform;
       opacity: 0;
       transform: translateX(-16px);
@@ -8243,7 +8243,7 @@ var StyledSecondaryIcon = import_styled_components23.styled.div`
     }
   }
 `;
-var StyledLabel = import_styled_components23.styled.span`
+var StyledLabel = import_styled_components24.styled.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);
@@ -8299,7 +8299,7 @@ ActionButton.displayName = "ActionButton_UI";
 // src/components/Avatar/Avatar.tsx
 var import_react25 = require("react");
 var import_type_guards18 = require("@wistia/type-guards");
-var import_styled_components26 = require("styled-components");
+var import_styled_components27 = require("styled-components");
 
 // src/components/Avatar/formatNameForDisplay.tsx
 var import_type_guards16 = require("@wistia/type-guards");
@@ -8316,7 +8316,7 @@ var formatNameForDisplay = (name) => {
 };
 
 // src/components/Image/Image.tsx
-var import_styled_components24 = require("styled-components");
+var import_styled_components25 = require("styled-components");
 var import_type_guards17 = require("@wistia/type-guards");
 var import_jsx_runtime206 = require("react/jsx-runtime");
 var getFillStyle = (fillContainer) => {
@@ -8334,7 +8334,7 @@ var getFillStyle = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = import_styled_components24.styled.img`
+var StyledImage = import_styled_components25.styled.img`
   border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -8369,7 +8369,7 @@ var Image = ({
 Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-var import_styled_components25 = require("styled-components");
+var import_styled_components26 = require("styled-components");
 var import_jsx_runtime207 = require("react/jsx-runtime");
 var defaultColorSchemeOptions = ["standard", "inherit"];
 var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
@@ -8393,7 +8393,7 @@ var colorSchemeOptions = [
   ...brandColorSchemeOptions,
   ...vendorColorSchemeOptions
 ];
-var StyledColorSchemeWrapper = import_styled_components25.styled.div`
+var StyledColorSchemeWrapper = import_styled_components26.styled.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
@@ -8449,7 +8449,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
     ]
   }
 );
-var AvatarWrapper = import_styled_components26.styled.div`
+var AvatarWrapper = import_styled_components27.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   width: ${({ $heightAndWidth }) => $heightAndWidth}px;
   height: ${({ $heightAndWidth }) => $heightAndWidth}px;
@@ -8551,10 +8551,10 @@ Avatar.displayName = "Avatar_UI";
 
 // src/components/Badge/Badge.tsx
 var import_react26 = require("react");
-var import_styled_components27 = require("styled-components");
+var import_styled_components28 = require("styled-components");
 var import_type_guards19 = require("@wistia/type-guards");
 var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledBadge = import_styled_components27.styled.div`
+var StyledBadge = import_styled_components28.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8603,12 +8603,12 @@ Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 var import_react31 = require("react");
-var import_styled_components33 = require("styled-components");
+var import_styled_components34 = require("styled-components");
 var import_type_guards25 = require("@wistia/type-guards");
 
 // src/components/Box/Box.tsx
 var import_react27 = require("react");
-var import_styled_components28 = require("styled-components");
+var import_styled_components29 = require("styled-components");
 var import_type_guards20 = require("@wistia/type-guards");
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -8664,34 +8664,34 @@ var getFlexStyle = (flexMode) => {
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
-      return import_styled_components28.css`
+      return import_styled_components29.css`
         flex: 1 0 0;
       `;
     // default behavior, can shrink but won't grow
     case "initial":
-      return import_styled_components28.css`
+      return import_styled_components29.css`
         flex: 0 1 auto;
       `;
     // equal distribution of space
     case "equal":
-      return import_styled_components28.css`
+      return import_styled_components29.css`
         flex: 1;
       `;
     // won't grow or shrink
     case "rigid":
-      return import_styled_components28.css`
+      return import_styled_components29.css`
         flex: 0 0 auto;
       `;
     // can grow and shrink from content size
     case "fluid":
-      return import_styled_components28.css`
+      return import_styled_components29.css`
         flex: 1 1 auto;
       `;
     default:
       return null;
   }
 };
-var StyledBoxComponent = import_styled_components28.styled.div`
+var StyledBoxComponent = import_styled_components29.styled.div`
   /* properties meant for Box parent (flex container) */
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
@@ -8805,7 +8805,7 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
 var import_react28 = require("react");
-var import_styled_components29 = require("styled-components");
+var import_styled_components30 = require("styled-components");
 var import_type_guards22 = require("@wistia/type-guards");
 
 // src/private/helpers/applyMaxCharsToChildren/applyMaxCharsToChildren.ts
@@ -8840,43 +8840,43 @@ var applyMaxCharsToChildren = (children, maxChars) => {
 
 // src/components/Heading/Heading.tsx
 var import_jsx_runtime211 = require("react/jsx-runtime");
-var heroStyle = import_styled_components29.css`
+var heroStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components29.css`
+var heading1TextStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components29.css`
+var heading2TextStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components29.css`
+var heading3TextStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components29.css`
+var heading4TextStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components29.css`
+var heading5TextStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components29.css`
+var heading6TextStyle = import_styled_components30.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8892,7 +8892,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components29.styled.div`
+var StyledHeading = import_styled_components30.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8915,20 +8915,20 @@ var StyledHeading = import_styled_components29.styled.div`
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $maxLines }) => {
   if ((0, import_type_guards22.isNotNil)($maxLines)) {
-    return import_styled_components29.css`
+    return import_styled_components30.css`
         ${ellipsisStyle};
         ${lineClampCss($maxLines)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components29.css`
+  ${({ $inline }) => $inline && import_styled_components30.css`
       display: inline-block;
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components29.css`
+  ${({ $align }) => import_styled_components30.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8984,10 +8984,10 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
 var import_react29 = require("react");
-var import_styled_components30 = require("styled-components");
+var import_styled_components31 = require("styled-components");
 var import_type_guards23 = require("@wistia/type-guards");
 var import_jsx_runtime212 = require("react/jsx-runtime");
-var sharedBodyStyle = import_styled_components30.css`
+var sharedBodyStyle = import_styled_components31.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
@@ -8997,7 +8997,7 @@ var sharedBodyStyle = import_styled_components30.css`
     font-weight: var(--wui-typography-weight-body-mark);
   }
 `;
-var labelBoldStyles = import_styled_components30.css`
+var labelBoldStyles = import_styled_components31.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
@@ -9007,7 +9007,7 @@ var labelBoldStyles = import_styled_components30.css`
     font-weight: var(--wui-typography-weight-label-mark);
   }
 `;
-var body1TextStyle = import_styled_components30.css`
+var body1TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -9015,7 +9015,7 @@ var body1TextStyle = import_styled_components30.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${sharedBodyStyle}
 `;
-var body2TextStyle = import_styled_components30.css`
+var body2TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -9023,7 +9023,7 @@ var body2TextStyle = import_styled_components30.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${sharedBodyStyle}
 `;
-var body3TextStyle = import_styled_components30.css`
+var body3TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -9031,7 +9031,7 @@ var body3TextStyle = import_styled_components30.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${sharedBodyStyle}
 `;
-var body4TextStyle = import_styled_components30.css`
+var body4TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -9039,47 +9039,47 @@ var body4TextStyle = import_styled_components30.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${sharedBodyStyle}
 `;
-var label1TextStyle = import_styled_components30.css`
+var label1TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components30.css`
+var label2TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components30.css`
+var label3TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components30.css`
+var label4TextStyle = import_styled_components31.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components30.css`
+var body1MonoTextStyle = import_styled_components31.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components30.css`
+var body2MonoTextStyle = import_styled_components31.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components30.css`
+var body3MonoTextStyle = import_styled_components31.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components30.css`
+var body4MonoTextStyle = import_styled_components31.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -9114,7 +9114,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components30.styled.div`
+var StyledText = import_styled_components31.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9140,26 +9140,26 @@ var StyledText = import_styled_components30.styled.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $maxLines }) => {
   if ((0, import_type_guards23.isNotNil)($maxLines)) {
-    return import_styled_components30.css`
+    return import_styled_components31.css`
         ${ellipsisStyle};
         ${lineClampCss($maxLines)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components30.css`
+  ${({ $inline }) => $inline && import_styled_components31.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components30.css`
+  ${({ $disabled }) => $disabled && import_styled_components31.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components31.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components30.css`
+  ${({ $align }) => import_styled_components31.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components30.css`
+  ${({ as }) => as === "p" && import_styled_components31.css`
       display: block;
 
       + p {
@@ -9206,7 +9206,7 @@ TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components31 = require("styled-components");
+var import_styled_components32 = require("styled-components");
 var import_type_guards24 = require("@wistia/type-guards");
 var import_jsx_runtime213 = require("react/jsx-runtime");
 var getAlignment = (align) => {
@@ -9221,7 +9221,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components31.styled.div`
+var ButtonGroupComponent = import_styled_components32.styled.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -9246,7 +9246,7 @@ var ButtonGroupComponent = import_styled_components31.styled.div`
     }
   }
 
-  ${({ $buttonSize }) => $buttonSize !== "natural" && import_styled_components31.css`
+  ${({ $buttonSize }) => $buttonSize !== "natural" && import_styled_components32.css`
       button,
       a {
         ${buttonSizeStyles[$buttonSize]}
@@ -9286,9 +9286,9 @@ ButtonGroup.displayName = "ButtonGroup_UI";
 
 // src/components/IconButton/IconButton.tsx
 var import_react30 = require("react");
-var import_styled_components32 = require("styled-components");
+var import_styled_components33 = require("styled-components");
 var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components32.styled)(Button)`
+var StyledButton2 = (0, import_styled_components33.styled)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9327,7 +9327,7 @@ var import_jsx_runtime215 = require("react/jsx-runtime");
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
-var StyledBanner = import_styled_components33.styled.div`
+var StyledBanner = import_styled_components34.styled.div`
   --wui-banner-padding: var(--wui-space-04);
   --wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
 
@@ -9486,9 +9486,9 @@ var Banner = ({
 Banner.displayName = "Banner_UI";
 
 // src/components/Banner/BannerImage.tsx
-var import_styled_components34 = require("styled-components");
+var import_styled_components35 = require("styled-components");
 var import_jsx_runtime216 = require("react/jsx-runtime");
-var StyledBannerImageContainer = import_styled_components34.styled.div`
+var StyledBannerImageContainer = import_styled_components35.styled.div`
   --wui-banner-image-border-radius: var(--wui-border-radius-02);
   --wui-banner-image-height: auto;
   --wui-banner-image-width: auto;
@@ -9566,9 +9566,9 @@ var BannerImage = ({ alignment = "left", alt, src, ...props }) => {
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react32 = require("react");
-var import_styled_components35 = require("styled-components");
+var import_styled_components36 = require("styled-components");
 var import_jsx_runtime217 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components35.styled.nav`
+var StyledBreadcrumbs = import_styled_components36.styled.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -9613,9 +9613,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-var import_styled_components36 = require("styled-components");
+var import_styled_components37 = require("styled-components");
 var import_jsx_runtime218 = require("react/jsx-runtime");
-var BreadcrumbContent = import_styled_components36.styled.span`
+var BreadcrumbContent = import_styled_components37.styled.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -9647,9 +9647,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/Card/Card.tsx
-var import_styled_components37 = require("styled-components");
+var import_styled_components38 = require("styled-components");
 var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledCard = (0, import_styled_components37.styled)(Box)`
+var StyledCard = (0, import_styled_components38.styled)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -9707,9 +9707,9 @@ Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 var import_react33 = require("react");
-var import_styled_components38 = require("styled-components");
+var import_styled_components39 = require("styled-components");
 var import_jsx_runtime220 = require("react/jsx-runtime");
-var StyledCenter = import_styled_components38.styled.div`
+var StyledCenter = import_styled_components39.styled.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -9739,18 +9739,18 @@ Center.displayName = "Center_UI";
 // src/components/Checkbox/Checkbox.tsx
 var import_type_guards32 = require("@wistia/type-guards");
 var import_react38 = require("react");
-var import_styled_components45 = require("styled-components");
+var import_styled_components46 = require("styled-components");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_type_guards28 = require("@wistia/type-guards");
-var import_styled_components41 = require("styled-components");
+var import_styled_components42 = require("styled-components");
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components39 = require("styled-components");
+var import_styled_components40 = require("styled-components");
 var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime221 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components39.styled.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components39.styled.div({
+var VisuallyHidden = import_styled_components40.styled.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components40.styled.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -9768,13 +9768,13 @@ var ScreenReaderOnly = ({
 ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-var import_styled_components40 = require("styled-components");
+var import_styled_components41 = require("styled-components");
 var import_type_guards27 = require("@wistia/type-guards");
 var import_jsx_runtime222 = require("react/jsx-runtime");
-var disabledStyle = import_styled_components40.css`
+var disabledStyle = import_styled_components41.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components40.styled.div`
+var StyledFormControlLabelDescription = import_styled_components41.styled.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -9804,15 +9804,15 @@ FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime223 = require("react/jsx-runtime");
-var disabledStyle2 = import_styled_components41.css`
+var disabledStyle2 = import_styled_components42.css`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = import_styled_components41.styled.div`
+var StyledLabelWrapper = import_styled_components42.styled.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components41.styled.label`
+var StyledFormControlLabel = import_styled_components42.styled.label`
   cursor: pointer;
   display: flex;
   align-items: flex-start;
@@ -9865,16 +9865,16 @@ var import_react37 = require("react");
 var import_type_guards31 = require("@wistia/type-guards");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components43 = require("styled-components");
+var import_styled_components44 = require("styled-components");
 var import_react35 = require("react");
 var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react34 = require("react");
-var import_styled_components42 = require("styled-components");
+var import_styled_components43 = require("styled-components");
 var import_jsx_runtime224 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components42.styled.div`
+var StyledStack = import_styled_components43.styled.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9903,12 +9903,12 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
 var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components43.styled.fieldset`
+var StyledFieldset = import_styled_components44.styled.fieldset`
   padding: 0;
   margin: 0;
   border: 0;
 `;
-var StyledLegend = import_styled_components43.styled.legend`
+var StyledLegend = import_styled_components44.styled.legend`
   padding-inline: 0;
   display: flex;
   flex-direction: column;
@@ -9960,7 +9960,7 @@ FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 var import_react36 = require("react");
-var import_styled_components44 = require("styled-components");
+var import_styled_components45 = require("styled-components");
 var import_type_guards30 = require("@wistia/type-guards");
 
 // src/components/Form/serializeFormData.tsx
@@ -9980,7 +9980,7 @@ var serializeFormData = (formData) => {
 
 // src/components/Form/Form.tsx
 var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledForm = import_styled_components44.styled.form`
+var StyledForm = import_styled_components45.styled.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -10124,15 +10124,15 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components45.css`
+var sizeSmall = import_styled_components46.css`
   --wui-checkbox-size: 14px;
   --wui-checkbox-icon-size: 7px;
 `;
-var sizeMedium = import_styled_components45.css`
+var sizeMedium = import_styled_components46.css`
   --wui-checkbox-size: 16px;
   --wui-checkbox-icon-size: 9px;
 `;
-var sizeLarge = import_styled_components45.css`
+var sizeLarge = import_styled_components46.css`
   --wui-checkbox-size: 20px;
   --wui-checkbox-icon-size: 11px;
 `;
@@ -10141,7 +10141,7 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components45.styled.div`
+var StyledCheckboxWrapper = import_styled_components46.styled.div`
   --wui-checkbox-background-color: var(--wui-color-bg-surface);
   --wui-checkbox-border-color: var(--wui-color-border-secondary);
   --wui-checkbox-icon-color: transparent;
@@ -10178,7 +10178,7 @@ var StyledCheckboxWrapper = import_styled_components45.styled.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components45.styled.div`
+var StyledCheckboxInput = import_styled_components46.styled.div`
   ${({ $size }) => getSizeCss($size)}
   margin: 0;
   border-radius: var(--wui-border-radius-01);
@@ -10205,7 +10205,7 @@ var StyledCheckboxInput = import_styled_components45.styled.div`
     height: var(--wui-checkbox-icon-size);
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components45.styled.input`
+var StyledHiddenCheckboxInput = import_styled_components46.styled.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
@@ -10326,9 +10326,9 @@ ClickRegion.displayName = "ClickRegion_UI";
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
 var import_type_guards33 = require("@wistia/type-guards");
-var import_styled_components46 = require("styled-components");
+var import_styled_components47 = require("styled-components");
 var import_jsx_runtime229 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components46.styled)(import_react_collapsible.Root)`
+var StyledRoot = (0, import_styled_components47.styled)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -10351,9 +10351,9 @@ Collapsible.displayName = "Collapsible_UI";
 // src/components/Collapsible/CollapsibleTrigger.tsx
 var import_react40 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_styled_components47 = require("styled-components");
+var import_styled_components48 = require("styled-components");
 var import_jsx_runtime230 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components47.styled)(import_react_collapsible2.Trigger)`
+var StyledTrigger = (0, import_styled_components48.styled)(import_react_collapsible2.Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -10402,11 +10402,11 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components48 = require("styled-components");
+var import_styled_components49 = require("styled-components");
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
 var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components48.styled.div`
+var ClampedContent = import_styled_components49.styled.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
@@ -10428,7 +10428,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 var import_react42 = require("react");
-var import_styled_components50 = require("styled-components");
+var import_styled_components51 = require("styled-components");
 var import_react_radio_group = require("@radix-ui/react-radio-group");
 
 // src/components/ColorPicker/ColorPickerContext.tsx
@@ -10973,9 +10973,9 @@ var useColorPickerState = () => {
 };
 
 // src/components/Label/Label.tsx
-var import_styled_components49 = require("styled-components");
+var import_styled_components50 = require("styled-components");
 var import_jsx_runtime234 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components49.css`
+var requiredStyle = import_styled_components50.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -10983,10 +10983,10 @@ var requiredStyle = import_styled_components49.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components49.css`
+var disabledStyle3 = import_styled_components50.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = import_styled_components49.styled.label`
+var StyledLabel2 = import_styled_components50.styled.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -11034,15 +11034,15 @@ Label.displayName = "Label_UI";
 
 // src/components/ColorPicker/ColorGrid.tsx
 var import_jsx_runtime235 = require("react/jsx-runtime");
-var Container = import_styled_components50.styled.div`
+var Container = import_styled_components51.styled.div`
   display: grid;
   gap: var(--wui-space-01);
   grid-template-columns: minmax(0, 1fr);
 `;
-var LabelContainer = import_styled_components50.styled.div`
+var LabelContainer = import_styled_components51.styled.div`
   padding-top: var(--wui-space-01);
 `;
-var ItemsContainer = (0, import_styled_components50.styled)(import_react_radio_group.Root)`
+var ItemsContainer = (0, import_styled_components51.styled)(import_react_radio_group.Root)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -11074,14 +11074,14 @@ var ColorGrid = ({ children, label }) => {
 ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-var import_styled_components53 = require("styled-components");
+var import_styled_components54 = require("styled-components");
 var import_react_radio_group2 = require("@radix-ui/react-radio-group");
 var import_fn5 = require("culori/fn");
 
 // src/components/ColorPicker/ColorSwatch.tsx
-var import_styled_components51 = require("styled-components");
+var import_styled_components52 = require("styled-components");
 var import_jsx_runtime236 = require("react/jsx-runtime");
-var ColorSwatchDiv = import_styled_components51.styled.div`
+var ColorSwatchDiv = import_styled_components52.styled.div`
   aspect-ratio: 1;
   width: ${({ $diameterPx }) => `${$diameterPx}px`};
   border-radius: var(--wui-border-radius-rounded);
@@ -11100,7 +11100,7 @@ var ColorSwatchDiv = import_styled_components51.styled.div`
   outline-offset: 2px;
   transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
 `;
-var DerivativeHalfCircle = import_styled_components51.styled.div`
+var DerivativeHalfCircle = import_styled_components52.styled.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -11137,9 +11137,9 @@ var ColorSwatch = ({
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components52 = require("styled-components");
+var import_styled_components53 = require("styled-components");
 var import_jsx_runtime237 = require("react/jsx-runtime");
-var hide = import_styled_components52.keyframes`
+var hide = import_styled_components53.keyframes`
   from {
     opacity: 1;
   }
@@ -11147,7 +11147,7 @@ var hide = import_styled_components52.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components52.keyframes`
+var slideDownAndFade = import_styled_components53.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -11157,7 +11157,7 @@ var slideDownAndFade = import_styled_components52.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components52.keyframes`
+var slideLeftAndFade = import_styled_components53.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -11167,7 +11167,7 @@ var slideLeftAndFade = import_styled_components52.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components52.keyframes`
+var slideUpAndFade = import_styled_components53.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -11177,7 +11177,7 @@ var slideUpAndFade = import_styled_components52.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components52.keyframes`
+var slideRightAndFade = import_styled_components53.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -11187,7 +11187,7 @@ var slideRightAndFade = import_styled_components52.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components52.styled)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components53.styled)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -11287,7 +11287,7 @@ Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
-var Container2 = (0, import_styled_components53.styled)(import_react_radio_group2.Item)`
+var Container2 = (0, import_styled_components54.styled)(import_react_radio_group2.Item)`
   border: none;
   appearance: none;
   outline: none;
@@ -11332,10 +11332,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
-var import_styled_components54 = require("styled-components");
+var import_styled_components55 = require("styled-components");
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var Container3 = (0, import_styled_components54.styled)(import_react_toggle_group.Root)`
+var Container3 = (0, import_styled_components55.styled)(import_react_toggle_group.Root)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `;
@@ -11364,18 +11364,18 @@ var ColorList = ({ children }) => {
 ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
-var import_styled_components55 = require("styled-components");
+var import_styled_components56 = require("styled-components");
 var import_jsx_runtime240 = require("react/jsx-runtime");
-var Container4 = import_styled_components55.styled.div`
+var Container4 = import_styled_components56.styled.div`
   display: grid;
   gap: var(--wui-space-01);
   grid-template-columns: minmax(0, 1fr);
 `;
-var ItemsContainer2 = import_styled_components55.styled.div`
+var ItemsContainer2 = import_styled_components56.styled.div`
   display: flex;
   flex-direction: column;
 `;
-var LabelContainer2 = import_styled_components55.styled.div`
+var LabelContainer2 = import_styled_components56.styled.div`
   padding-top: var(--wui-space-01);
 `;
 var ColorListGroup = ({ label, children }) => {
@@ -11394,7 +11394,7 @@ var ColorListGroup = ({ label, children }) => {
 ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
-var import_styled_components56 = require("styled-components");
+var import_styled_components57 = require("styled-components");
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_fn6 = require("culori/fn");
 
@@ -11433,7 +11433,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_jsx_runtime242 = require("react/jsx-runtime");
-var Container5 = (0, import_styled_components56.styled)(import_react_toggle_group2.Item)`
+var Container5 = (0, import_styled_components57.styled)(import_react_toggle_group2.Item)`
   border: none;
   appearance: none;
   outline: none;
@@ -11518,9 +11518,9 @@ ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
-var import_styled_components57 = require("styled-components");
+var import_styled_components58 = require("styled-components");
 var import_jsx_runtime244 = require("react/jsx-runtime");
-var StyledPopoverContent = (0, import_styled_components57.styled)(import_react_popover2.Content)`
+var StyledPopoverContent = (0, import_styled_components58.styled)(import_react_popover2.Content)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -11547,9 +11547,9 @@ var ColorPickerPopoverContent = ({
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
-var import_styled_components58 = require("styled-components");
+var import_styled_components59 = require("styled-components");
 var import_jsx_runtime245 = require("react/jsx-runtime");
-var Container6 = import_styled_components58.styled.div`
+var Container6 = import_styled_components59.styled.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
@@ -11560,7 +11560,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
 var import_react_popover3 = require("@radix-ui/react-popover");
-var import_styled_components59 = require("styled-components");
+var import_styled_components60 = require("styled-components");
 
 // src/components/ColorPicker/ValueSwatch.tsx
 var import_jsx_runtime246 = require("react/jsx-runtime");
@@ -11588,7 +11588,7 @@ ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
-var StyledPopoverTrigger = (0, import_styled_components59.styled)(import_react_popover3.Trigger)`
+var StyledPopoverTrigger = (0, import_styled_components60.styled)(import_react_popover3.Trigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
@@ -11599,7 +11599,7 @@ var StyledPopoverTrigger = (0, import_styled_components59.styled)(import_react_p
     background-color: var(--wui-color-bg-surface-hover);
   }
 `;
-var DefaultTriggerContentContainer = import_styled_components59.styled.div`
+var DefaultTriggerContentContainer = import_styled_components60.styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -11627,9 +11627,9 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
 ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
-var import_styled_components60 = require("styled-components");
+var import_styled_components61 = require("styled-components");
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var Container7 = import_styled_components60.styled.div`
+var Container7 = import_styled_components61.styled.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -11687,7 +11687,7 @@ var import_react46 = require("react");
 
 // src/components/Switch/Switch.tsx
 var import_react45 = require("react");
-var import_styled_components61 = require("styled-components");
+var import_styled_components62 = require("styled-components");
 var import_type_guards35 = require("@wistia/type-guards");
 var import_jsx_runtime250 = require("react/jsx-runtime");
 var switchHeightMap = {
@@ -11695,10 +11695,10 @@ var switchHeightMap = {
   md: 20,
   lg: 24
 };
-var getSizeCss2 = (size) => import_styled_components61.css`
+var getSizeCss2 = (size) => import_styled_components62.css`
   --wui-switch-height: ${switchHeightMap[size]}px;
 `;
-var StyledSwitchWrapper = import_styled_components61.styled.div`
+var StyledSwitchWrapper = import_styled_components62.styled.div`
   ${({ $size }) => getSizeCss2($size)}
   --wui-switch-border-offset: 2px;
   --wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
@@ -11732,7 +11732,7 @@ var StyledSwitchWrapper = import_styled_components61.styled.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchTrack = import_styled_components61.styled.div`
+var StyledSwitchTrack = import_styled_components62.styled.div`
   width: var(--wui-switch-width);
   height: var(--wui-switch-height);
   min-width: var(--wui-switch-width);
@@ -11750,7 +11750,7 @@ var StyledSwitchTrack = import_styled_components61.styled.div`
   background-color: var(--wui-switch-background-color);
   margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
 `;
-var StyledSwitchThumb = import_styled_components61.styled.div`
+var StyledSwitchThumb = import_styled_components62.styled.div`
   border-radius: var(--wui-border-radius-rounded);
   background-color: var(--wui-switch-thumb-color);
   transition:
@@ -11760,7 +11760,7 @@ var StyledSwitchThumb = import_styled_components61.styled.div`
   height: var(--wui-switch-thumb-size);
   margin-left: var(--wui-switch-thumb-position);
 `;
-var StyledHiddenSwitchInput = import_styled_components61.styled.input`
+var StyledHiddenSwitchInput = import_styled_components62.styled.input`
   ${visuallyHiddenStyle}
 `;
 var Switch = (0, import_react45.forwardRef)(
@@ -11898,12 +11898,12 @@ var import_fn7 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
-var import_styled_components63 = require("styled-components");
+var import_styled_components64 = require("styled-components");
 var import_type_guards36 = require("@wistia/type-guards");
 
 // src/css/inputCss.ts
-var import_styled_components62 = require("styled-components");
-var inputCss = import_styled_components62.css`
+var import_styled_components63 = require("styled-components");
+var inputCss = import_styled_components63.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -11930,7 +11930,7 @@ var inputCss = import_styled_components62.css`
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime254 = require("react/jsx-runtime");
-var inputStyles = import_styled_components63.css`
+var inputStyles = import_styled_components64.css`
   ${inputCss}
   input,
   textarea {
@@ -11971,7 +11971,7 @@ var inputStyles = import_styled_components63.css`
   }
 `;
 var calculateTextareaHeight = (rows = 1) => `calc((var(--wui-input-line-height) * ${rows}) + (var(--wui-input-vertical-padding) * 2));`;
-var StyledInputContainer = import_styled_components63.styled.div`
+var StyledInputContainer = import_styled_components64.styled.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -12321,15 +12321,15 @@ HexColorInput.displayName = "HexColorInput_UI";
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
 var import_react_slider = require("@radix-ui/react-slider");
-var import_styled_components65 = require("styled-components");
+var import_styled_components66 = require("styled-components");
 var import_fn9 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
-var import_styled_components64 = require("styled-components");
+var import_styled_components65 = require("styled-components");
 var import_fn8 = require("culori/fn");
 var import_jsx_runtime256 = require("react/jsx-runtime");
-var Canvas = import_styled_components64.styled.canvas`
+var Canvas = import_styled_components65.styled.canvas`
   display: block;
   height: 100%;
   width: 100%;
@@ -12369,7 +12369,7 @@ var HSVHueCanvas = ({ hsv }) => {
 // src/components/ColorPicker/HueSlider.tsx
 var import_jsx_runtime257 = require("react/jsx-runtime");
 var TWENTY_FOUR = 24;
-var Container8 = import_styled_components65.styled.div`
+var Container8 = import_styled_components66.styled.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
   height: ${TWENTY_FOUR}px;
@@ -12377,7 +12377,7 @@ var Container8 = import_styled_components65.styled.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-var Root = (0, import_styled_components65.styled)(import_react_slider.Root)`
+var Root = (0, import_styled_components66.styled)(import_react_slider.Root)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -12386,11 +12386,11 @@ var Root = (0, import_styled_components65.styled)(import_react_slider.Root)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-var Track = (0, import_styled_components65.styled)(import_react_slider.Track)`
+var Track = (0, import_styled_components66.styled)(import_react_slider.Track)`
   width: 100%;
 `;
-var Thumb = (0, import_styled_components65.styled)(import_react_slider.Thumb)``;
-var ThumbInner = import_styled_components65.styled.div`
+var Thumb = (0, import_styled_components66.styled)(import_react_slider.Thumb)``;
+var ThumbInner = import_styled_components66.styled.div`
   cursor: pointer;
   display: block;
   border-radius: var(--wui-border-radius-rounded);
@@ -12457,11 +12457,11 @@ HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
-var import_styled_components67 = require("styled-components");
+var import_styled_components68 = require("styled-components");
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 var import_react51 = require("react");
-var import_styled_components66 = require("styled-components");
+var import_styled_components67 = require("styled-components");
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -12491,7 +12491,7 @@ var drawSmoothCurve = (context, points) => {
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 var import_jsx_runtime258 = require("react/jsx-runtime");
-var Canvas2 = import_styled_components66.styled.canvas`
+var Canvas2 = import_styled_components67.styled.canvas`
   display: block;
   width: 100%;
 `;
@@ -12612,13 +12612,13 @@ var HSVSaturationValueCanvas = ({
 var import_jsx_runtime259 = require("react/jsx-runtime");
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
-var Container9 = import_styled_components67.styled.div`
+var Container9 = import_styled_components68.styled.div`
   border-radius: var(--wui-border-radius-02);
   box-shadow: 0 0 0 1px var(--wui-color-border);
   overflow: hidden;
   position: relative;
 `;
-var Thumb2 = import_styled_components67.styled.button.attrs({ type: "button" })`
+var Thumb2 = import_styled_components68.styled.button.attrs({ type: "button" })`
   appearance: none;
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -12832,15 +12832,15 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 var Ariakit = __toESM(require("@ariakit/react"));
 var import_react54 = require("react");
 var import_match_sorter = require("match-sorter");
-var import_styled_components70 = require("styled-components");
+var import_styled_components71 = require("styled-components");
 var import_type_guards38 = require("@wistia/type-guards");
 
 // src/components/Tag/Tag.tsx
 var import_react53 = require("react");
-var import_styled_components68 = require("styled-components");
+var import_styled_components69 = require("styled-components");
 var import_type_guards37 = require("@wistia/type-guards");
 var import_jsx_runtime260 = require("react/jsx-runtime");
-var TagLabel = import_styled_components68.styled.a`
+var TagLabel = import_styled_components69.styled.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12876,14 +12876,14 @@ var TagLabel = import_styled_components68.styled.a`
     background: var(--wui-color-bg-surface-secondary-active);
   }
 `;
-var TagDivider = import_styled_components68.styled.div`
+var TagDivider = import_styled_components69.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components68.styled.button`
+var StyledRemoveButton = import_styled_components69.styled.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12911,7 +12911,7 @@ var StyledRemoveButton = import_styled_components68.styled.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components68.styled.div`
+var StyledTag = import_styled_components69.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12992,10 +12992,10 @@ var Tag = (0, import_react53.forwardRef)(
 Tag.displayName = "Tag_UI";
 
 // src/private/helpers/getTypographicStyles/getTypographicStyles.ts
-var import_styled_components69 = require("styled-components");
+var import_styled_components70 = require("styled-components");
 var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
 var getTypographicStyles = (variant) => {
-  return import_styled_components69.css`
+  return import_styled_components70.css`
     ${typographicVariantStyleMap[variant]}
     font-family: var(--font-family);
     font-size: var(--font-size);
@@ -13010,7 +13010,7 @@ var getDefaultTypographicElement = (variant) => {
 
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime261 = require("react/jsx-runtime");
-var ComboboxWrapper = import_styled_components70.styled.div`
+var ComboboxWrapper = import_styled_components71.styled.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -13059,7 +13059,7 @@ var ComboboxWrapper = import_styled_components70.styled.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components70.styled)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components71.styled)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -13074,7 +13074,7 @@ var ComboboxInput = (0, import_styled_components70.styled)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover2 = (0, import_styled_components70.styled)(Ariakit.ComboboxPopover)`
+var ComboboxPopover2 = (0, import_styled_components71.styled)(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);
@@ -13100,7 +13100,7 @@ var ComboboxPopover2 = (0, import_styled_components70.styled)(Ariakit.ComboboxPo
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components70.styled)(Ariakit.ComboboxItem)`
+var ComboboxItem2 = (0, import_styled_components71.styled)(Ariakit.ComboboxItem)`
   ${getTypographicStyles("body3")};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -13128,7 +13128,7 @@ var ComboboxItem2 = (0, import_styled_components70.styled)(Ariakit.ComboboxItem)
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components70.styled.div`
+var NoResults = import_styled_components71.styled.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
@@ -13288,7 +13288,7 @@ var import_react_dom = require("react-dom");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards39 = require("@wistia/type-guards");
 var import_react56 = require("react");
-var import_styled_components71 = require("styled-components");
+var import_styled_components72 = require("styled-components");
 
 // src/components/Menu/MenuContext.tsx
 var import_react55 = require("react");
@@ -13297,7 +13297,7 @@ var useMenuContext = () => (0, import_react55.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime262 = require("react/jsx-runtime");
-var open = import_styled_components71.keyframes`
+var open = import_styled_components72.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -13307,7 +13307,7 @@ var open = import_styled_components71.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components71.keyframes`
+var close = import_styled_components72.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -13317,7 +13317,7 @@ var close = import_styled_components71.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components71.css`
+var menuItemCss = import_styled_components72.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -13328,7 +13328,7 @@ var menuItemCss = import_styled_components71.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components71.css`
+var compactMenuItemCss = import_styled_components72.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -13339,7 +13339,7 @@ var compactMenuItemCss = import_styled_components71.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components71.css`
+var menuContentCss = import_styled_components72.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -13381,7 +13381,7 @@ var menuContentCss = import_styled_components71.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components71.styled)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components72.styled)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
   min-width: var(--radix-dropdown-menu-trigger-width);
 `;
@@ -13451,10 +13451,10 @@ Menu.displayName = "Menu_UI";
 Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components72 = require("styled-components");
+var import_styled_components73 = require("styled-components");
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime263 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components72.styled)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var StyledMenuLabel = (0, import_styled_components73.styled)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -13479,16 +13479,16 @@ MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 var import_react58 = require("react");
-var import_styled_components75 = require("styled-components");
+var import_styled_components76 = require("styled-components");
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards41 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react57 = require("react");
-var import_styled_components73 = require("styled-components");
+var import_styled_components74 = require("styled-components");
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime264 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components73.styled)(Button)`
+var StyledButton3 = (0, import_styled_components74.styled)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -13527,7 +13527,7 @@ var StyledButton3 = (0, import_styled_components73.styled)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components73.styled.div`
+var StyledLeftIconContainer = import_styled_components74.styled.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -13539,7 +13539,7 @@ var StyledLeftIconContainer = import_styled_components73.styled.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components73.styled.div`
+var StyledRightIconContainer = import_styled_components74.styled.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -13551,13 +13551,13 @@ var StyledRightIconContainer = import_styled_components73.styled.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components73.styled.div`
+var StyledLabelAndDescriptionContainer = import_styled_components74.styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components73.styled.div`
+var StyledBadgeContainer = import_styled_components74.styled.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -13605,10 +13605,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components74 = require("styled-components");
+var import_styled_components75 = require("styled-components");
 var import_jsx_runtime265 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components74.styled.span``;
-var StyledMenuItemDescription = (0, import_styled_components74.styled)(Text)``;
+var StyledMenuItemLabel = import_styled_components75.styled.span``;
+var StyledMenuItemDescription = (0, import_styled_components75.styled)(Text)``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(StyledMenuItemLabel, { children });
 };
@@ -13625,17 +13625,17 @@ var MenuItemDescription = ({ children }) => {
 
 // src/components/Menu/SubMenu.tsx
 var import_jsx_runtime266 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components75.styled)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var SubMenuContent = (0, import_styled_components76.styled)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components75.styled.div`
+var StyledMobileSubMenuItems = import_styled_components76.styled.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components75.styled)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components76.styled)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -14014,10 +14014,10 @@ var ContextMenu = ({
 
 // src/components/DataCards/DataCard.tsx
 var import_react62 = require("react");
-var import_styled_components76 = require("styled-components");
+var import_styled_components77 = require("styled-components");
 var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime273 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components76.styled.div`
+var StyledDataCard = import_styled_components77.styled.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);
@@ -14091,7 +14091,7 @@ var StyledDataCard = import_styled_components76.styled.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components76.keyframes`
+var shimmer = import_styled_components77.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -14099,7 +14099,7 @@ var shimmer = import_styled_components76.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components76.styled.div`
+var LoadingBackground = import_styled_components77.styled.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -14110,32 +14110,32 @@ var LoadingBackground = import_styled_components76.styled.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components76.styled)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components77.styled)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components76.styled)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components77.styled)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = (0, import_styled_components76.styled)(Heading)`
+var StyledLabel3 = (0, import_styled_components77.styled)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components76.styled)(Heading)`
+var StyledValue = (0, import_styled_components77.styled)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components76.styled.div`
+var StyledSlot = import_styled_components77.styled.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components76.styled.div`
+var StyledDataCardTrendContainer = import_styled_components77.styled.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = (0, import_styled_components76.styled)(Text)`
+var StyledSubtitle = (0, import_styled_components77.styled)(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -14213,9 +14213,9 @@ var DataCard = (props) => {
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components77 = require("styled-components");
+var import_styled_components78 = require("styled-components");
 var import_jsx_runtime274 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components77.styled)(Box)`
+var StyledDataCards = (0, import_styled_components78.styled)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 
   > * {
@@ -14248,9 +14248,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components78 = require("styled-components");
+var import_styled_components79 = require("styled-components");
 var import_jsx_runtime275 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components78.styled.div`
+var StyledDataCardTrend = import_styled_components79.styled.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -14286,9 +14286,9 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-var import_styled_components79 = require("styled-components");
+var import_styled_components80 = require("styled-components");
 var import_jsx_runtime276 = require("react/jsx-runtime");
-var StyledIconContainer = import_styled_components79.styled.div`
+var StyledIconContainer = import_styled_components80.styled.div`
   display: flex;
   align-items: center;
   align-self: center;
@@ -14304,9 +14304,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(St
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
-var import_styled_components80 = require("styled-components");
+var import_styled_components81 = require("styled-components");
 var import_jsx_runtime277 = require("react/jsx-runtime");
-var StyledDataList = import_styled_components80.styled.dl`
+var StyledDataList = import_styled_components81.styled.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -14385,22 +14385,22 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components81 = require("styled-components");
+var import_styled_components82 = require("styled-components");
 var import_jsx_runtime280 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components81.css`
+var horizontalBorderCss = import_styled_components82.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components81.css`
+var verticalBorderCss = import_styled_components82.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components81.styled.div`
+var DividerComponent = import_styled_components82.styled.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -14426,10 +14426,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components82 = require("styled-components");
+var import_styled_components83 = require("styled-components");
 var import_react63 = require("react");
 var import_jsx_runtime281 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components82.styled)(Input)`
+var StyledInput = (0, import_styled_components83.styled)(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -14454,7 +14454,7 @@ var StyledInput = (0, import_styled_components82.styled)(Input)`
     resize: none;
   }
 `;
-var editableStyles = import_styled_components82.css`
+var editableStyles = import_styled_components83.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -14464,7 +14464,7 @@ var editableStyles = import_styled_components82.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components82.styled)(Heading)`
+var StyledHeading2 = (0, import_styled_components83.styled)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -14567,13 +14567,13 @@ var EditableHeading = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 var import_react65 = require("react");
-var import_styled_components84 = require("styled-components");
+var import_styled_components85 = require("styled-components");
 var import_type_guards46 = require("@wistia/type-guards");
 
 // src/components/EditableText/EditableTextRoot.tsx
 var import_react64 = require("react");
 var import_type_guards45 = require("@wistia/type-guards");
-var import_styled_components83 = require("styled-components");
+var import_styled_components84 = require("styled-components");
 var import_jsx_runtime282 = require("react/jsx-runtime");
 var LARGE_PADDING = "var(--wui-space-02)";
 var SMALL_PADDING = "var(--wui-space-01)";
@@ -14609,7 +14609,7 @@ var getPaddingForVariant = (variant) => {
   }
   return SMALL_PADDING;
 };
-var StyledEditableTextRoot = import_styled_components83.styled.div`
+var StyledEditableTextRoot = import_styled_components84.styled.div`
   display: contents;
 
   --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
@@ -14722,7 +14722,7 @@ var EditableTextRoot = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 var import_jsx_runtime283 = require("react/jsx-runtime");
-var StyledEditableTextDisplay = import_styled_components84.styled.div`
+var StyledEditableTextDisplay = import_styled_components85.styled.div`
   ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
   padding: var(--wui-editable-text-padding);
   border-radius: var(--wui-editable-text-border-radius);
@@ -14730,14 +14730,14 @@ var StyledEditableTextDisplay = import_styled_components84.styled.div`
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   ${({ $maxLines }) => {
   if ((0, import_type_guards46.isNotNil)($maxLines)) {
-    return import_styled_components84.css`
+    return import_styled_components85.css`
         ${ellipsisStyle};
         ${lineClampCss($maxLines)};
       `;
   }
   return void 0;
 }}
-  ${({ $minLines }) => (0, import_type_guards46.isNotNil)($minLines) && import_styled_components84.css`
+  ${({ $minLines }) => (0, import_type_guards46.isNotNil)($minLines) && import_styled_components85.css`
       min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
     `}
   word-break: break-word;
@@ -14823,10 +14823,10 @@ var EditableTextDisplay = makePolymorphic(
 
 // src/components/EditableText/EditableTextInput.tsx
 var import_react66 = require("react");
-var import_styled_components85 = require("styled-components");
+var import_styled_components86 = require("styled-components");
 var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime284 = require("react/jsx-runtime");
-var StyledInput2 = (0, import_styled_components85.styled)(Input)`
+var StyledInput2 = (0, import_styled_components86.styled)(Input)`
   && {
     ${({ $minLines }) => (0, import_type_guards47.isNotNil)($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
     ${({ $maxLines }) => (0, import_type_guards47.isNotNil)($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
@@ -15128,10 +15128,10 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react73 = require("react");
-var import_styled_components86 = require("styled-components");
+var import_styled_components87 = require("styled-components");
 var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime288 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components86.styled.div`
+var StyledFormField = import_styled_components87.styled.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);
@@ -15161,7 +15161,7 @@ var StyledFormField = import_styled_components86.styled.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components86.styled.ul`
+var StyledErrorList = import_styled_components87.styled.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -15324,24 +15324,24 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 var import_react75 = require("react");
-var import_styled_components87 = require("styled-components");
+var import_styled_components88 = require("styled-components");
 var import_type_guards50 = require("@wistia/type-guards");
 var import_jsx_runtime290 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
-    return import_styled_components87.css`
+    return import_styled_components88.css`
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     `;
   }
   const gridMode = expandItems ? "auto-fit" : "auto-fill";
   const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
   if (maxColumns === "auto") {
-    return import_styled_components87.css`
+    return import_styled_components88.css`
       grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
     `;
   }
-  return import_styled_components87.css`
+  return import_styled_components88.css`
     /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
     --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
     --wui-grid-max-column-width: calc(
@@ -15354,7 +15354,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
     );
   `;
 };
-var StyledGrid = import_styled_components87.styled.div`
+var StyledGrid = import_styled_components88.styled.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
 
@@ -15398,11 +15398,11 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-var import_styled_components88 = require("styled-components");
+var import_styled_components89 = require("styled-components");
 var import_react76 = require("react");
 var import_type_guards51 = require("@wistia/type-guards");
 var import_jsx_runtime291 = require("react/jsx-runtime");
-var StyledIconButton = (0, import_styled_components88.styled)(IconButton)`
+var StyledIconButton = (0, import_styled_components89.styled)(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15468,11 +15468,11 @@ var InputClickToCopy = (0, import_react76.forwardRef)(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-var import_styled_components89 = require("styled-components");
+var import_styled_components90 = require("styled-components");
 var import_react77 = require("react");
 var import_type_guards52 = require("@wistia/type-guards");
 var import_jsx_runtime292 = require("react/jsx-runtime");
-var StyledIconButton2 = (0, import_styled_components89.styled)(IconButton)`
+var StyledIconButton2 = (0, import_styled_components90.styled)(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15515,16 +15515,16 @@ var InputPassword = (0, import_react77.forwardRef)(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-var import_styled_components90 = require("styled-components");
+var import_styled_components91 = require("styled-components");
 var import_type_guards53 = require("@wistia/type-guards");
 var import_jsx_runtime293 = require("react/jsx-runtime");
-var StyledKeyboardShortcut = import_styled_components90.styled.div`
+var StyledKeyboardShortcut = import_styled_components91.styled.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = import_styled_components90.styled.kbd`
+var StyledKey = import_styled_components91.styled.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -15547,11 +15547,11 @@ var StyledKey = import_styled_components90.styled.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = import_styled_components90.styled.span`
+var Label2 = import_styled_components91.styled.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = import_styled_components90.styled.div`
+var KeysContainer = import_styled_components91.styled.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -15625,13 +15625,13 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 var import_type_guards55 = require("@wistia/type-guards");
-var import_styled_components92 = require("styled-components");
+var import_styled_components93 = require("styled-components");
 
 // src/components/List/ListItem.tsx
-var import_styled_components91 = require("styled-components");
+var import_styled_components92 = require("styled-components");
 var import_type_guards54 = require("@wistia/type-guards");
 var import_jsx_runtime294 = require("react/jsx-runtime");
-var ListItemComponent = import_styled_components91.styled.li`
+var ListItemComponent = import_styled_components92.styled.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
@@ -15644,7 +15644,7 @@ ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 var import_jsx_runtime295 = require("react/jsx-runtime");
-var spacesStyle = import_styled_components92.css`
+var spacesStyle = import_styled_components93.css`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -15666,7 +15666,7 @@ var spacesStyle = import_styled_components92.css`
     }
   }
 `;
-var commasStyle = import_styled_components92.css`
+var commasStyle = import_styled_components93.css`
   ${spacesStyle};
 
   li {
@@ -15676,7 +15676,7 @@ var commasStyle = import_styled_components92.css`
     }
   }
 `;
-var slashesStyle = import_styled_components92.css`
+var slashesStyle = import_styled_components93.css`
   ${spacesStyle};
 
   li {
@@ -15687,7 +15687,7 @@ var slashesStyle = import_styled_components92.css`
     }
   }
 `;
-var breadcrumbsStyle = import_styled_components92.css`
+var breadcrumbsStyle = import_styled_components93.css`
   ${spacesStyle};
 
   li {
@@ -15698,11 +15698,11 @@ var breadcrumbsStyle = import_styled_components92.css`
     }
   }
 `;
-var unbulletedStyle = import_styled_components92.css`
+var unbulletedStyle = import_styled_components93.css`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = import_styled_components92.styled.ul`
+var ListComponent = import_styled_components93.styled.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -15782,9 +15782,9 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-var import_styled_components93 = require("styled-components");
+var import_styled_components94 = require("styled-components");
 var import_jsx_runtime296 = require("react/jsx-runtime");
-var StyledMark = import_styled_components93.styled.mark`
+var StyledMark = import_styled_components94.styled.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
   color: var(--wui-color-text);
@@ -15804,19 +15804,19 @@ Mark.displayName = "Mark_UI";
 
 // src/components/Modal/Modal.tsx
 var import_react80 = require("react");
-var import_styled_components98 = require("styled-components");
+var import_styled_components99 = require("styled-components");
 var import_react_dialog5 = require("@radix-ui/react-dialog");
 var import_type_guards57 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components95 = require("styled-components");
+var import_styled_components96 = require("styled-components");
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components94 = require("styled-components");
+var import_styled_components95 = require("styled-components");
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_jsx_runtime297 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components94.styled)(import_react_dialog.Close)`
+var CloseButton = (0, import_styled_components95.styled)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -15833,7 +15833,7 @@ var ModalCloseButton = () => {
 
 // src/components/Modal/ModalHeader.tsx
 var import_jsx_runtime298 = require("react/jsx-runtime");
-var Header = import_styled_components95.styled.header`
+var Header = import_styled_components96.styled.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -15853,7 +15853,7 @@ var Header = import_styled_components95.styled.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components95.styled)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components96.styled)(import_react_dialog2.Title)`
   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);
@@ -15880,7 +15880,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 var import_react79 = require("react");
-var import_styled_components96 = require("styled-components");
+var import_styled_components97 = require("styled-components");
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15904,7 +15904,7 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 var import_jsx_runtime299 = require("react/jsx-runtime");
-var modalEnter = import_styled_components96.keyframes`
+var modalEnter = import_styled_components97.keyframes`
   from {
     opacity: 0;
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
@@ -15915,7 +15915,7 @@ var modalEnter = import_styled_components96.keyframes`
     transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
   }
 `;
-var modalExit = import_styled_components96.keyframes`
+var modalExit = import_styled_components97.keyframes`
   from {
     opacity: 1;
     transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
@@ -15926,7 +15926,7 @@ var modalExit = import_styled_components96.keyframes`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-var centeredModalStyles = import_styled_components96.css`
+var centeredModalStyles = import_styled_components97.css`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -15942,7 +15942,7 @@ var centeredModalStyles = import_styled_components96.css`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var fixedTopModalStyles = import_styled_components96.css`
+var fixedTopModalStyles = import_styled_components97.css`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -15961,7 +15961,7 @@ var fixedTopModalStyles = import_styled_components96.css`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var slideInRight = import_styled_components96.keyframes`
+var slideInRight = import_styled_components97.keyframes`
   from {
     opacity: 0;
     transform: translateX(100%);
@@ -15972,7 +15972,7 @@ var slideInRight = import_styled_components96.keyframes`
     transform: translateX(0);
   }
 `;
-var slideOutRight = import_styled_components96.keyframes`
+var slideOutRight = import_styled_components97.keyframes`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -15983,7 +15983,7 @@ var slideOutRight = import_styled_components96.keyframes`
     transform: translateX(100%);
   }
 `;
-var rightSidePanelModalStyles = import_styled_components96.css`
+var rightSidePanelModalStyles = import_styled_components97.css`
   --wui-modal-screen-offset: var(--wui-space-05);
 
   height: calc(100vh - var(--wui-modal-screen-offset) * 2);
@@ -16001,7 +16001,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = (0, import_styled_components96.styled)(import_react_dialog3.Content)`
+var StyledModalContent = (0, import_styled_components97.styled)(import_react_dialog3.Content)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -16047,8 +16047,8 @@ var ModalContent = (0, import_react79.forwardRef)(
 
 // src/components/Modal/ModalOverlay.tsx
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_styled_components97 = require("styled-components");
-var backdropShow = import_styled_components97.keyframes`
+var import_styled_components98 = require("styled-components");
+var backdropShow = import_styled_components98.keyframes`
   from {
     opacity: 0;
   }
@@ -16057,7 +16057,7 @@ var backdropShow = import_styled_components97.keyframes`
     opacity: 1;
   }
 `;
-var backdropHide = import_styled_components97.keyframes`
+var backdropHide = import_styled_components98.keyframes`
   from {
     opacity: 1;
   }
@@ -16066,7 +16066,7 @@ var backdropHide = import_styled_components97.keyframes`
     opacity: 0;
   }
 `;
-var ModalOverlay = (0, import_styled_components97.styled)(import_react_dialog4.DialogOverlay)`
+var ModalOverlay = (0, import_styled_components98.styled)(import_react_dialog4.DialogOverlay)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
@@ -16081,18 +16081,18 @@ var ModalOverlay = (0, import_styled_components97.styled)(import_react_dialog4.D
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components98.styled.div`
+var ModalBody = import_styled_components99.styled.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = import_styled_components98.styled.div`
+var ModalScrollArea = import_styled_components99.styled.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = import_styled_components98.styled.footer`
+var ModalFooter = import_styled_components99.styled.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -16181,7 +16181,7 @@ ModalCallout.displayName = "ModalCallout_UI";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover5 = require("@radix-ui/react-popover");
-var import_styled_components100 = require("styled-components");
+var import_styled_components101 = require("styled-components");
 
 // src/private/helpers/getControls/getControlProps.tsx
 var import_type_guards58 = require("@wistia/type-guards");
@@ -16191,12 +16191,12 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 var import_react_popover4 = require("@radix-ui/react-popover");
-var import_styled_components99 = require("styled-components");
+var import_styled_components100 = require("styled-components");
 var import_jsx_runtime302 = require("react/jsx-runtime");
-var StyledPath = import_styled_components99.styled.path`
+var StyledPath = import_styled_components100.styled.path`
   fill: var(--wui-color-border-secondary);
 `;
-var circleAnimation = import_styled_components99.keyframes`
+var circleAnimation = import_styled_components100.keyframes`
   0% {
     opacity: var(--wui-popover-arrow-circle-starting-opacity);
   }
@@ -16204,7 +16204,7 @@ var circleAnimation = import_styled_components99.keyframes`
     opacity: 0;
   }
 `;
-var StyledCircle = import_styled_components99.styled.circle`
+var StyledCircle = import_styled_components100.styled.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -16225,7 +16225,7 @@ var StyledCircle = import_styled_components99.styled.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && import_styled_components99.css`
+    ${({ $isAnimated }) => $isAnimated && import_styled_components100.css`
         animation-name: ${circleAnimation};
       `}
   }
@@ -16271,10 +16271,10 @@ PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime303 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components100.styled)(import_react_popover5.Content)`
+var StyledContent2 = (0, import_styled_components101.styled)(import_react_popover5.Content)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && import_styled_components100.css`
+  ${({ $unstyled }) => !$unstyled && import_styled_components101.css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -16340,11 +16340,11 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components101 = require("styled-components");
+var import_styled_components102 = require("styled-components");
 var import_react_progress = require("@radix-ui/react-progress");
 var import_type_guards59 = require("@wistia/type-guards");
 var import_jsx_runtime304 = require("react/jsx-runtime");
-var ProgressBarWrapper = import_styled_components101.styled.div`
+var ProgressBarWrapper = import_styled_components102.styled.div`
   --progress-bar-height: 8px;
 
   display: flex;
@@ -16358,7 +16358,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components101.styled.div`
+var ProgressBarLabel = import_styled_components102.styled.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -16366,7 +16366,7 @@ var ProgressBarLabel = import_styled_components101.styled.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components101.styled)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components102.styled)(import_react_progress.Indicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   width: 100%;
@@ -16376,7 +16376,7 @@ var StyledProgressIndicator = (0, import_styled_components101.styled)(import_rea
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = (0, import_styled_components101.styled)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components102.styled)(import_react_progress.Root)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -16424,17 +16424,17 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 var import_type_guards60 = require("@wistia/type-guards");
 var import_react81 = require("react");
-var import_styled_components102 = require("styled-components");
+var import_styled_components103 = require("styled-components");
 var import_jsx_runtime305 = require("react/jsx-runtime");
-var sizeSmall2 = import_styled_components102.css`
+var sizeSmall2 = import_styled_components103.css`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
 `;
-var sizeMedium2 = import_styled_components102.css`
+var sizeMedium2 = import_styled_components103.css`
   --wui-radio-size: 16px;
   --wui-radio-icon-size: 8px;
 `;
-var sizeLarge2 = import_styled_components102.css`
+var sizeLarge2 = import_styled_components103.css`
   --wui-radio-size: 20px;
   --wui-radio-icon-size: 10px;
 `;
@@ -16443,7 +16443,7 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components102.styled.div`
+var StyledRadioWrapper = import_styled_components103.styled.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -16477,7 +16477,7 @@ var StyledRadioWrapper = import_styled_components102.styled.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = import_styled_components102.styled.div`
+var StyledRadioInput = import_styled_components103.styled.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -16503,7 +16503,7 @@ var StyledRadioInput = import_styled_components102.styled.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = import_styled_components102.styled.input`
+var StyledHiddenRadioInput = import_styled_components103.styled.input`
   ${visuallyHiddenStyle}
 `;
 var Radio = (0, import_react81.forwardRef)(
@@ -16575,17 +16575,17 @@ var import_react83 = require("react");
 
 // src/components/RadioCard/RadioCardRoot.tsx
 var import_react82 = require("react");
-var import_styled_components103 = require("styled-components");
+var import_styled_components104 = require("styled-components");
 var import_type_guards61 = require("@wistia/type-guards");
 var import_jsx_runtime306 = require("react/jsx-runtime");
-var checkedStyles = import_styled_components103.css`
+var checkedStyles = import_styled_components104.css`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-info);
   --wui-color-text: var(--wui-color-text-info);
   --wui-color-text-secondary: var(--wui-color-text-info);
 `;
-var disabledStyles = import_styled_components103.css`
+var disabledStyles = import_styled_components104.css`
   --wui-radio-card-border-color: var(--wui-color-border-disabled);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
   --wui-radio-card-cursor: not-allowed;
@@ -16593,10 +16593,10 @@ var disabledStyles = import_styled_components103.css`
   --wui-color-text: var(--wui-color-text-disabled);
   --wui-color-text-secondary: var(--wui-color-text-disabled);
 `;
-var focusStyles = import_styled_components103.css`
+var focusStyles = import_styled_components104.css`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
-var imageCoverStyles = import_styled_components103.css`
+var imageCoverStyles = import_styled_components104.css`
   --wui-radio-card-image-inset: 0px;
   --wui-radio-card-border-width: 0px;
   --wui-inset-shadow-width: 1px;
@@ -16627,7 +16627,7 @@ var imageCoverStyles = import_styled_components103.css`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = import_styled_components103.styled.label`
+var StyledCard2 = import_styled_components104.styled.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;
@@ -16681,7 +16681,7 @@ var StyledCard2 = import_styled_components103.styled.label`
     }
   }
 `;
-var StyledHiddenInput = import_styled_components103.styled.input`
+var StyledHiddenInput = import_styled_components104.styled.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = (0, import_react82.forwardRef)(
@@ -16736,12 +16736,12 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-var import_styled_components105 = require("styled-components");
+var import_styled_components106 = require("styled-components");
 var import_type_guards62 = require("@wistia/type-guards");
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-var import_styled_components104 = require("styled-components");
-var RadioCardIndicator = import_styled_components104.styled.div`
+var import_styled_components105 = require("styled-components");
+var RadioCardIndicator = import_styled_components105.styled.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);
@@ -16791,15 +16791,15 @@ RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_jsx_runtime307 = require("react/jsx-runtime");
-var StyledCardContent = import_styled_components105.styled.div`
+var StyledCardContent = import_styled_components106.styled.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = import_styled_components105.styled.div`
+var StyledCardIcon = import_styled_components106.styled.div`
   display: contents;
 `;
-var StyledIndicatorContainer = import_styled_components105.styled.div`
+var StyledIndicatorContainer = import_styled_components106.styled.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -16838,8 +16838,8 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-var import_styled_components106 = require("styled-components");
-var RadioCardChildrenContainer = import_styled_components106.styled.div`
+var import_styled_components107 = require("styled-components");
+var RadioCardChildrenContainer = import_styled_components107.styled.div`
   flex: 1 1 auto;
 `;
 
@@ -16898,49 +16898,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
 var import_react85 = require("react");
-var import_styled_components107 = require("styled-components");
+var import_styled_components108 = require("styled-components");
 var import_throttle_debounce2 = require("throttle-debounce");
 var import_jsx_runtime310 = require("react/jsx-runtime");
 var SHADOW_SIZE_PX = 8;
-var Container10 = import_styled_components107.styled.div`
+var Container10 = import_styled_components108.styled.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = import_styled_components107.styled.div`
+var ScrollContainer = import_styled_components108.styled.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = import_styled_components107.styled.div`
+var Shadow = import_styled_components108.styled.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 = (0, import_styled_components107.styled)(Shadow)`
+var ShadowAtTop = (0, import_styled_components108.styled)(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = (0, import_styled_components107.styled)(Shadow)`
+var ShadowAtBottom = (0, import_styled_components108.styled)(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = (0, import_styled_components107.styled)(Shadow)`
+var ShadowAtLeft = (0, import_styled_components108.styled)(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = (0, import_styled_components107.styled)(Shadow)`
+var ShadowAtRight = (0, import_styled_components108.styled)(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -17002,7 +17002,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react88 = require("react");
-var import_styled_components109 = require("styled-components");
+var import_styled_components110 = require("styled-components");
 var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
 var import_type_guards64 = require("@wistia/type-guards");
 
@@ -17040,7 +17040,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-var import_styled_components108 = require("styled-components");
+var import_styled_components109 = require("styled-components");
 var import_type_guards63 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -17057,12 +17057,12 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_jsx_runtime312 = require("react/jsx-runtime");
-var selectedItemIndicatorStyles = import_styled_components108.css`
+var selectedItemIndicatorStyles = import_styled_components109.css`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = import_styled_components108.styled.div`
+var SelectedItemIndicatorDiv = import_styled_components109.styled.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -17089,7 +17089,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime313 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components109.css`
+var segmentedControlStyles = import_styled_components110.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -17100,7 +17100,7 @@ var segmentedControlStyles = import_styled_components109.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components109.styled)(import_react_toggle_group3.Root)`
+var StyledSegmentedControl = (0, import_styled_components110.styled)(import_react_toggle_group3.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react88.forwardRef)(
@@ -17139,11 +17139,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react89 = require("react");
-var import_styled_components110 = require("styled-components");
+var import_styled_components111 = require("styled-components");
 var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
 var import_type_guards65 = require("@wistia/type-guards");
 var import_jsx_runtime314 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components110.css`
+var segmentedControlItemStyles = import_styled_components111.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -17211,7 +17211,7 @@ var segmentedControlItemStyles = import_styled_components110.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components110.styled)(import_react_toggle_group4.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components111.styled)(import_react_toggle_group4.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react89.forwardRef)(
@@ -17275,9 +17275,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react90 = require("react");
-var import_styled_components111 = require("styled-components");
+var import_styled_components112 = require("styled-components");
 var import_jsx_runtime315 = require("react/jsx-runtime");
-var StyledTrigger2 = (0, import_styled_components111.styled)(import_react_select.Trigger)`
+var StyledTrigger2 = (0, import_styled_components112.styled)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -17323,7 +17323,7 @@ var StyledTrigger2 = (0, import_styled_components111.styled)(import_react_select
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = (0, import_styled_components111.styled)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components112.styled)(import_react_select.Content)`
   --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);
@@ -17346,15 +17346,15 @@ var StyledContent3 = (0, import_styled_components111.styled)(import_react_select
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = import_styled_components111.css`
+var scrollButtonStyles = import_styled_components112.css`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = (0, import_styled_components111.styled)(import_react_select.ScrollDownButton)`
+var StyledScrollDownButton = (0, import_styled_components112.styled)(import_react_select.ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = (0, import_styled_components111.styled)(import_react_select.ScrollUpButton)`
+var StyledScrollUpButton = (0, import_styled_components112.styled)(import_react_select.ScrollUpButton)`
   ${scrollButtonStyles}
 `;
 var Select = (0, import_react90.forwardRef)(
@@ -17422,10 +17422,10 @@ Select.displayName = "Select_UI";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react91 = require("react");
-var import_styled_components112 = require("styled-components");
+var import_styled_components113 = require("styled-components");
 var import_type_guards66 = require("@wistia/type-guards");
 var import_jsx_runtime316 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components112.styled)(import_react_select2.Item)`
+var StyledItem = (0, import_styled_components113.styled)(import_react_select2.Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -17480,9 +17480,9 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components113 = require("styled-components");
+var import_styled_components114 = require("styled-components");
 var import_jsx_runtime317 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components113.styled)(import_react_select3.Label)`
+var StyledLabel4 = (0, import_styled_components114.styled)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
@@ -17501,10 +17501,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Slider/Slider.tsx
 var import_react_slider2 = require("@radix-ui/react-slider");
-var import_styled_components114 = require("styled-components");
+var import_styled_components115 = require("styled-components");
 var import_type_guards67 = require("@wistia/type-guards");
 var import_jsx_runtime318 = require("react/jsx-runtime");
-var SliderContainer = import_styled_components114.styled.div`
+var SliderContainer = import_styled_components115.styled.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);
@@ -17520,7 +17520,7 @@ var SliderContainer = import_styled_components114.styled.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = (0, import_styled_components114.styled)(import_react_slider2.Root)`
+var StyledSliderRoot = (0, import_styled_components115.styled)(import_react_slider2.Root)`
   position: relative;
   display: flex;
   align-items: center;
@@ -17528,20 +17528,20 @@ var StyledSliderRoot = (0, import_styled_components114.styled)(import_react_slid
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = (0, import_styled_components114.styled)(import_react_slider2.Track)`
+var StyledSliderTrack = (0, import_styled_components115.styled)(import_react_slider2.Track)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
   flex-grow: 1;
   height: 6px;
   position: relative;
 `;
-var StyledSliderRange = (0, import_styled_components114.styled)(import_react_slider2.Range)`
+var StyledSliderRange = (0, import_styled_components115.styled)(import_react_slider2.Range)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = (0, import_styled_components114.styled)(import_react_slider2.Thumb)`
+var StyledSliderThumb = (0, import_styled_components115.styled)(import_react_slider2.Thumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -17627,25 +17627,25 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-var import_styled_components115 = require("styled-components");
+var import_styled_components116 = require("styled-components");
 var import_jsx_runtime319 = require("react/jsx-runtime");
-var StyledTable = import_styled_components115.styled.table`
+var StyledTable = import_styled_components116.styled.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && import_styled_components115.css`
+  ${({ $divided }) => $divided && import_styled_components116.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && import_styled_components115.css`
+  ${({ $striped }) => $striped && import_styled_components116.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components115.css`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components116.css`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -17671,7 +17671,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components116 = require("styled-components");
+var import_styled_components117 = require("styled-components");
 
 // src/components/Table/TableSectionContext.ts
 var import_react92 = require("react");
@@ -17679,27 +17679,27 @@ var TableSectionContext = (0, import_react92.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime320 = require("react/jsx-runtime");
-var StyledTableBody = import_styled_components116.styled.tbody``;
+var StyledTableBody = import_styled_components117.styled.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 var import_react93 = require("react");
-var import_styled_components117 = require("styled-components");
+var import_styled_components118 = require("styled-components");
 var import_jsx_runtime321 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components117.css`
+var sharedStyles = import_styled_components118.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components117.styled.th`
+var StyledTh = import_styled_components118.styled.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 = import_styled_components117.styled.td`
+var StyledTd = import_styled_components118.styled.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -17714,25 +17714,25 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-var import_styled_components118 = require("styled-components");
+var import_styled_components119 = require("styled-components");
 var import_jsx_runtime322 = require("react/jsx-runtime");
-var StyledTableFoot = import_styled_components118.styled.tfoot``;
+var StyledTableFoot = import_styled_components119.styled.tfoot``;
 var TableFoot = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components119 = require("styled-components");
+var import_styled_components120 = require("styled-components");
 var import_jsx_runtime323 = require("react/jsx-runtime");
-var StyledThead = import_styled_components119.styled.thead``;
+var StyledThead = import_styled_components120.styled.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components120 = require("styled-components");
+var import_styled_components121 = require("styled-components");
 var import_jsx_runtime324 = require("react/jsx-runtime");
-var StyledTableRow = import_styled_components120.styled.tr``;
+var StyledTableRow = import_styled_components121.styled.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(StyledTableRow, { ...props, children });
 };
@@ -17797,14 +17797,14 @@ TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_styled_components122 = require("styled-components");
+var import_styled_components123 = require("styled-components");
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 var import_type_guards69 = require("@wistia/type-guards");
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-var import_styled_components121 = require("styled-components");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components121.styled)(SelectedItemIndicatorDiv)`
+var import_styled_components122 = require("styled-components");
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components122.styled)(SelectedItemIndicatorDiv)`
   &:has(~ button[role='tab']:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -17829,7 +17829,7 @@ var SelectedTabIndicator = () => {
 
 // src/components/Tabs/TabsList.tsx
 var import_jsx_runtime328 = require("react/jsx-runtime");
-var StyledRadixTabsList = (0, import_styled_components122.styled)(import_react_tabs3.List)`
+var StyledRadixTabsList = (0, import_styled_components123.styled)(import_react_tabs3.List)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -17852,9 +17852,9 @@ var import_react96 = require("react");
 var import_type_guards70 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-var import_styled_components123 = require("styled-components");
+var import_styled_components124 = require("styled-components");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var StyledRadixTabsTrigger = (0, import_styled_components123.styled)(import_react_tabs4.Trigger)`
+var StyledRadixTabsTrigger = (0, import_styled_components124.styled)(import_react_tabs4.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -17915,10 +17915,10 @@ var TabsTrigger = (0, import_react96.forwardRef)(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-var import_styled_components124 = require("styled-components");
+var import_styled_components125 = require("styled-components");
 var import_type_guards71 = require("@wistia/type-guards");
 var import_jsx_runtime330 = require("react/jsx-runtime");
-var StyledThumbnailBadge = import_styled_components124.styled.div`
+var StyledThumbnailBadge = import_styled_components125.styled.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -17953,14 +17953,14 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react97 = require("react");
-var import_styled_components127 = require("styled-components");
+var import_styled_components128 = require("styled-components");
 var import_type_guards74 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 var import_type_guards72 = require("@wistia/type-guards");
-var import_styled_components125 = require("styled-components");
+var import_styled_components126 = require("styled-components");
 var gradients = {
-  defaultDarkOne: import_styled_components125.css`
+  defaultDarkOne: import_styled_components126.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -17968,7 +17968,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: import_styled_components125.css`
+  defaultDarkTwo: import_styled_components126.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -17976,7 +17976,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: import_styled_components125.css`
+  defaultLightOne: import_styled_components126.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -17984,13 +17984,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: import_styled_components125.css`
+  defaultLightTwo: import_styled_components126.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: import_styled_components125.css`
+  defaultMidOne: import_styled_components126.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -17998,13 +17998,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: import_styled_components125.css`
+  defaultMidTwo: import_styled_components126.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: import_styled_components125.css`
+  green: import_styled_components126.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -18012,7 +18012,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: import_styled_components125.css`
+  greenWithPop: import_styled_components126.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -18020,7 +18020,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: import_styled_components125.css`
+  pink: import_styled_components126.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -18028,7 +18028,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: import_styled_components125.css`
+  pinkWithPop: import_styled_components126.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -18036,7 +18036,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: import_styled_components125.css`
+  playfulGradientOne: import_styled_components126.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -18044,7 +18044,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: import_styled_components125.css`
+  playfulGradientTwo: import_styled_components126.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -18052,13 +18052,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: import_styled_components125.css`
+  purple: import_styled_components126.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: import_styled_components125.css`
+  purpleWithPop: import_styled_components126.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -18066,7 +18066,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: import_styled_components125.css`
+  yellow: import_styled_components126.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -18074,7 +18074,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: import_styled_components125.css`
+  yellowWithPop: import_styled_components126.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -18089,10 +18089,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-var import_styled_components126 = require("styled-components");
+var import_styled_components127 = require("styled-components");
 var import_type_guards73 = require("@wistia/type-guards");
 var import_jsx_runtime331 = require("react/jsx-runtime");
-var ScrubLine = import_styled_components126.styled.div`
+var ScrubLine = import_styled_components127.styled.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -18233,12 +18233,12 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = import_styled_components127.styled.img`
+var WideThumbnailImage = import_styled_components128.styled.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components127.styled.img`
+var SquareThumbnailImage = import_styled_components128.styled.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -18263,7 +18263,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = import_styled_components127.styled.div`
+var StyledThumbnailContainer = import_styled_components128.styled.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -18271,7 +18271,7 @@ var StyledThumbnailContainer = import_styled_components127.styled.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = import_styled_components127.styled.div`
+var StyledThumbnail = import_styled_components128.styled.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
   background-image: ${({ $backgroundUrl }) => (0, import_type_guards74.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
@@ -18447,19 +18447,19 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react98 = require("react");
-var import_styled_components128 = require("styled-components");
+var import_styled_components129 = require("styled-components");
 var import_type_guards75 = require("@wistia/type-guards");
 var import_jsx_runtime333 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
 );
-var ThumbnailCollageContainer = import_styled_components128.styled.div`
+var ThumbnailCollageContainer = import_styled_components129.styled.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = import_styled_components128.styled.div`
+var StyledThumbnailCollage = import_styled_components129.styled.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -18537,7 +18537,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components129 = require("styled-components");
+var import_styled_components130 = require("styled-components");
 var import_type_guards76 = require("@wistia/type-guards");
 var import_jsx_runtime334 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -18579,7 +18579,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components129.styled.svg`
+var WistiaLogoComponent = import_styled_components130.styled.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -18595,12 +18595,12 @@ var WistiaLogoComponent = import_styled_components129.styled.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components129.css`
+      return import_styled_components130.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components129.css`
+    return import_styled_components130.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -18662,11 +18662,11 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_styled_components130 = require("styled-components");
+var import_styled_components131 = require("styled-components");
 var import_type_guards77 = require("@wistia/type-guards");
 var import_react99 = require("react");
 var import_jsx_runtime335 = require("react/jsx-runtime");
-var StyledSplitButton = import_styled_components130.styled.span`
+var StyledSplitButton = import_styled_components131.styled.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;