@wistia/ui 0.6.43 → 0.6.45-beta.cdb67e81.9dbf4c3

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.43
+ * @license @wistia/ui v0.6.45-beta.cdb67e81.9dbf4c3
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -6902,7 +6902,7 @@ var Link = forwardRef(
   }, ref) => {
     const inRouterContext = useInRouterContext();
     const to = generateHref(props.href, type, disabled);
-    const handleClick = async (event, routingCallback = null) => {
+    const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
       } else if (beforeAction) {
@@ -6914,11 +6914,9 @@ var Link = forwardRef(
         } finally {
           if (isFunction2(props.onClick)) {
             props.onClick(event);
-          } else if (routingCallback !== null) {
-            routingCallback();
-          } else if (isNotNil5(to)) {
+          }
+          if (!inRouterContext && isNotNil5(to)) {
             window.location.assign(to);
-          } else {
           }
         }
       } else if (isFunction2(props.onClick)) {
@@ -7258,30 +7256,101 @@ ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
 import { useState as useState5, useMemo as useMemo3, useEffect as useEffect5 } from "react";
-import { isNil as isNil8 } from "@wistia/type-guards";
-import styled8 from "styled-components";
+import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
+import styled9 from "styled-components";
 
-// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
+// src/components/Avatar/formatNameForDisplay.tsx
+import { isNil as isNil7, isString, isEmptyString } from "@wistia/type-guards";
+var containsEmojiCharacter = (char) => {
+  const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
+  return emojiRegex.test(char);
+};
+var formatNameForDisplay = (name) => {
+  if (isNil7(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) {
+    return "U";
+  }
+  const firstChar = name.trim().substring(0, 1);
+  return firstChar.toUpperCase();
+};
+
+// src/components/Image/Image.tsx
 import styled7 from "styled-components";
+import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx195 } from "react/jsx-runtime";
-var colorSchemeOptions = [
-  "inherit",
-  "default",
-  "info",
-  "success",
-  "warning",
-  "error",
+var getFillStyle = (fillContainer) => {
+  if (fillContainer === "horizontal") {
+    return "width: 100%;";
+  }
+  if (fillContainer === "vertical") {
+    return "height: 100%;";
+  }
+  if (fillContainer === true) {
+    return `
+      width: 100%;
+      height: 100%;
+    `;
+  }
+  return void 0;
+};
+var StyledImage = styled7.img`
+  border-radius: ${({ $borderRadius }) => isNotNil7($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+  ${({ $fillContainer }) => getFillStyle($fillContainer)};
+  object-fit: ${({ $objFit }) => $objFit};
+  object-position: ${({ $objPosition }) => $objPosition};
+`;
+var Image = ({
+  src,
+  alt,
+  borderRadius,
+  fill: fillContainer = false,
+  fit: objFit,
+  loading = "lazy",
+  position: objPosition,
+  onLoad,
+  onError,
+  ...props
+}) => /* @__PURE__ */ jsx195(
+  StyledImage,
+  {
+    $borderRadius: borderRadius,
+    $fillContainer: fillContainer,
+    $objFit: objFit,
+    $objPosition: objPosition,
+    alt,
+    loading,
+    onError,
+    onLoad,
+    src,
+    ...props
+  }
+);
+Image.displayName = "Image";
+
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
+import styled8 from "styled-components";
+import { jsx as jsx196 } from "react/jsx-runtime";
+var defaultColorSchemeOptions = ["default", "inherit"];
+var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
+var brandColorSchemeOptions = [
   "blue",
   "green",
   "orange",
   "pink",
   "purple",
-  "yellow",
+  "yellow"
+];
+var vendorColorSchemeOptions = [
   "vendor-hubspot",
   "vendor-marketo",
   "vendor-pardot"
 ];
-var StyledColorSchemeWrapper = styled7.div`
+var colorSchemeOptions = [
+  ...defaultColorSchemeOptions,
+  ...semanticColorSchemeOptions,
+  ...brandColorSchemeOptions,
+  ...vendorColorSchemeOptions
+];
+var StyledColorSchemeWrapper = styled8.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
@@ -7289,7 +7358,7 @@ var ColorSchemeWrapper = ({
   colorScheme = "inherit",
   children,
   ...props
-}) => /* @__PURE__ */ jsx195(
+}) => /* @__PURE__ */ jsx196(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
@@ -7300,86 +7369,91 @@ var ColorSchemeWrapper = ({
 );
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 
-// src/components/Avatar/formatNameForDisplay.tsx
-import { isNil as isNil7, isString, isEmptyString } from "@wistia/type-guards";
-var containsEmojiCharacter = (char) => {
-  const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
-  return emojiRegex.test(char);
-};
-var formatNameForDisplay = (name) => {
-  if (isNil7(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) {
-    return "U";
-  }
-  const firstChar = name.trim().substring(0, 1);
-  return firstChar.toUpperCase();
-};
-
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx196 } from "react/jsx-runtime";
-var AvatarImage = styled8.img`
-  align-items: center;
-  background-color: white;
-  border-radius: 50%;
-  display: flex;
-  height: ${({ $heightAndWidth }) => $heightAndWidth}px;
-  justify-content: center;
-  object-fit: cover;
-  overflow: hidden;
-  pointer-events: none;
-  user-select: none;
-  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
-  transition: box-shadow var(--wui-duration-01) var(--wui-motion-ease);
-
-  a:hover & {
-    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%);
-  }
-
-  a:active & {
-    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
-  }
-`;
+import { jsx as jsx197, jsxs as jsxs10 } from "react/jsx-runtime";
 var avatarSizeMap = {
   sm: 16,
   md: 24,
   lg: 32
 };
-var fontSizeScaleMultiplier = 0.55;
-var InitialsContainer = styled8.div`
+var Initial = ({ initial }) => /* @__PURE__ */ jsxs10(
+  "svg",
+  {
+    "data-wui-avatar-initial": true,
+    style: { width: "100%", height: "100%", color: "var(--wui-color-text-on-fill)" },
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx197(
+        "path",
+        {
+          d: "M0 13.5h24",
+          id: "P"
+        }
+      ),
+      /* @__PURE__ */ jsx197("text", { children: /* @__PURE__ */ jsx197(
+        "textPath",
+        {
+          dominantBaseline: "middle",
+          fill: "currentColor",
+          fontSize: "16px",
+          href: "#P",
+          startOffset: "50%",
+          textAnchor: "middle",
+          children: initial
+        }
+      ) })
+    ]
+  }
+);
+var AvatarWrapper = styled9.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  align-items: center;
-  background-color: var(--wui-color-bg-fill);
-  border: 1px solid var(--wui-color-border);
-  border-radius: 50%;
-  color: var(--wui-color-text-on-fill);
-  display: flex;
-  font-size: ${({ $heightAndWidth }) => $heightAndWidth * fontSizeScaleMultiplier}px;
+  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
   height: ${({ $heightAndWidth }) => $heightAndWidth}px;
-  justify-content: center;
+  place-content: center;
   overflow: hidden;
-  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
+  background-color: var(--wui-color-bg-fill);
+  border-radius: var(--wui-border-radius-rounded);
+  display: grid;
+  user-select: none;
 
-  a:hover & {
-    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%);
+  > * {
+    grid-area: 1 / 1;
   }
 
-  a:active & {
-    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
+  --wui-avatar-inset-opacity: 10%;
+
+  outline: 2px solid rgb(0 0 0 / var(--wui-avatar-inset-opacity));
+  outline-offset: -2px;
+
+  [data-wui-avatar-initial] {
+    font-family: var(--wui-typography-family-default);
+    font-weight: var(--wui-typography-weight-label-bold);
+    padding: min(12.5%, 4px);
+  }
+
+  &:only-child {
+    a:hover & {
+      --wui-avatar-inset-opacity: 20%;
+
+      background-color: var(--wui-color-bg-fill-hover);
+    }
+
+    a:active & {
+      --wui-avatar-inset-opacity: 30%;
+
+      background-color: var(--wui-color-bg-fill-active);
+    }
   }
-`;
-var AvatarWrapper = styled8.div`
-  max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
   if (isNil8(name) || name === "Anonymous") {
-    return "default";
+    return "blue";
   }
-  const filteredColors = colorSchemeOptions.filter(
-    (color) => color !== "inherit" && color !== "default"
-  );
   const multiplier = 31;
   const hashCode = (str) => Array.from(str).reduce((sum, char) => Math.imul(multiplier, sum) + char.charCodeAt(0) | 0, 0);
-  const index = Math.abs(hashCode(name)) % filteredColors.length;
-  return filteredColors[index] ?? "default";
+  const index = Math.abs(hashCode(name)) % brandColorSchemeOptions.length;
+  return brandColorSchemeOptions[index] ?? "blue";
 };
 var Avatar = ({
   imageUrl,
@@ -7403,29 +7477,26 @@ var Avatar = ({
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = useMemo3(() => chooseColorScheme(name), [name]);
-  const showInitials = isNil8(imageUrl) || imageLoadState === "error";
-  return /* @__PURE__ */ jsx196(
+  return /* @__PURE__ */ jsxs10(
     AvatarWrapper,
     {
+      $colorScheme: avatarColor,
+      $heightAndWidth: avatarSize,
       ...props,
-      $maxHeight: avatarSize,
-      children: showInitials ? /* @__PURE__ */ jsx196(
-        InitialsContainer,
-        {
-          $colorScheme: avatarColor,
-          $heightAndWidth: avatarSize,
-          children: formatNameForDisplay(name)
-        }
-      ) : /* @__PURE__ */ jsx196(
-        AvatarImage,
-        {
-          $heightAndWidth: avatarSize,
-          alt: name ?? "Unavailable",
-          onError: handleImageLoadError,
-          onLoad: handleImageLoad,
-          src: imageUrl
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx197(Initial, { initial: formatNameForDisplay(name) }),
+        isNotNil8(imageUrl) && imageLoadState !== "error" && /* @__PURE__ */ jsx197(
+          Image,
+          {
+            alt: isNotNil8(name) ? name : "",
+            "data-state": imageLoadState,
+            fit: "cover",
+            onError: handleImageLoadError,
+            onLoad: handleImageLoad,
+            src: imageUrl
+          }
+        )
+      ]
     }
   );
 };
@@ -7433,10 +7504,10 @@ Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled9 from "styled-components";
-import { isNotNil as isNotNil7 } from "@wistia/type-guards";
-import { jsx as jsx197, jsxs as jsxs10 } from "react/jsx-runtime";
-var StyledBadge = styled9.div`
+import styled10 from "styled-components";
+import { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { jsx as jsx198, jsxs as jsxs11 } from "react/jsx-runtime";
+var StyledBadge = styled10.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7458,8 +7529,8 @@ var StyledBadge = styled9.div`
 `;
 var Badge = forwardRef4(
   ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
-    const hasIcon = isNotNil7(icon);
-    return /* @__PURE__ */ jsxs10(
+    const hasIcon = isNotNil9(icon);
+    return /* @__PURE__ */ jsxs11(
       StyledBadge,
       {
         ref,
@@ -7468,7 +7539,7 @@ var Badge = forwardRef4(
         $hasIcon: hasIcon,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ jsx197("span", { children: label })
+          /* @__PURE__ */ jsx198("span", { children: label })
         ]
       }
     );
@@ -7478,8 +7549,8 @@ Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
-import styled10, { css as css17 } from "styled-components";
-import { isNotNil as isNotNil8, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
+import styled11, { css as css17 } from "styled-components";
+import { isNotNil as isNotNil10, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7487,10 +7558,10 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Box/Box.tsx
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx199 } from "react/jsx-runtime";
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if (isNotNil8(gap)) {
+  if (isNotNil10(gap)) {
     if (isRecord3(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
@@ -7500,7 +7571,7 @@ var getGapStyle = (gap) => {
   }
   return void 0;
 };
-var getFillStyle = (fill) => {
+var getFillStyle2 = (fill) => {
   if (fill === "horizontal") {
     return "width: 100%;";
   }
@@ -7562,14 +7633,14 @@ var getFlexStyle = (flexMode) => {
       return null;
   }
 };
-var StyledBoxComponent = styled10.div`
+var StyledBoxComponent = styled11.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => isNotNil8($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => isNotNil8($basis) ? $basis : null};
+  display: ${({ $inline }) => isNotNil10($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => isNotNil10($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
-  ${({ $fillBox: fill }) => getFillStyle(fill)};
+  ${({ $fillBox: fill }) => getFillStyle2(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
   ${({ $gap }) => getGapStyle($gap)};
@@ -7577,14 +7648,14 @@ var StyledBoxComponent = styled10.div`
   width: ${({ $width }) => $width ?? null};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => isNotNil8($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => isNotNil8($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => isNotNil10($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => isNotNil10($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => isNotNil8($order) ? $order : null};
+  order: ${({ $order }) => isNotNil10($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if (isNotNil8(children)) {
+  if (isNotNil10(children)) {
     if (typeof children === "object" && isDev) {
       return Children.map(children, (child) => {
         if (isNil9(child)) return null;
@@ -7645,7 +7716,7 @@ var BoxComponent = forwardRef5(
         );
       }
     }
-    return /* @__PURE__ */ jsx198(
+    return /* @__PURE__ */ jsx199(
       StyledBoxComponent,
       {
         ref,
@@ -7678,9 +7749,9 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
-import styled11 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx199, jsxs as jsxs11 } from "react/jsx-runtime";
-var StyledBreadcrumbs = styled11.nav`
+import styled12 from "styled-components";
+import { Fragment as Fragment2, jsx as jsx200, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled12.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -7698,8 +7769,8 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx199("style", { type: "text/css", children: `
+  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    /* @__PURE__ */ jsx200("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
           container-name: breadcrumbs;
@@ -7711,7 +7782,7 @@ var Breadcrumbs = ({ children, ...props }) => {
           }
         }
      ` }),
-    /* @__PURE__ */ jsx199(
+    /* @__PURE__ */ jsx200(
       StyledBreadcrumbs,
       {
         "aria-label": "Breadcrumbs",
@@ -7725,9 +7796,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import styled12 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx200, jsxs as jsxs12 } from "react/jsx-runtime";
-var BreadcrumbContent = styled12.span`
+import styled13 from "styled-components";
+import { Fragment as Fragment3, jsx as jsx201, jsxs as jsxs13 } from "react/jsx-runtime";
+var BreadcrumbContent = styled13.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -7736,18 +7807,18 @@ var BreadcrumbContent = styled12.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    /* @__PURE__ */ jsx200(
+  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+    /* @__PURE__ */ jsx201(
       Button,
       {
         ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
-        children: /* @__PURE__ */ jsx200(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
+        children: /* @__PURE__ */ jsx201(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
       }
     ),
-    /* @__PURE__ */ jsx200("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx200(
+    /* @__PURE__ */ jsx201("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx201(
       Icon,
       {
         size: "sm",
@@ -7759,9 +7830,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled13 from "styled-components";
+import styled14 from "styled-components";
 import { isNil as isNil10 } from "@wistia/type-guards";
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -7774,7 +7845,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = styled13.div`
+var ButtonGroupComponent = styled14.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -7809,7 +7880,7 @@ var ButtonGroup = ({
   if (isNil10(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx202(
     ButtonGroupComponent,
     {
       $align: align,
@@ -7823,9 +7894,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-import styled14 from "styled-components";
-import { jsx as jsx202 } from "react/jsx-runtime";
-var StyledCard = styled14(Box)`
+import styled15 from "styled-components";
+import { jsx as jsx203 } from "react/jsx-runtime";
+var StyledCard = styled15(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -7862,7 +7933,7 @@ var Card = ({
   height,
   width,
   ...props
-}) => /* @__PURE__ */ jsx202(
+}) => /* @__PURE__ */ jsx203(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -7881,9 +7952,9 @@ Card.displayName = "Card";
 
 // src/components/Center/Center.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled15 from "styled-components";
-import { jsx as jsx203 } from "react/jsx-runtime";
-var StyledCenter = styled15.div`
+import styled16 from "styled-components";
+import { jsx as jsx204 } from "react/jsx-runtime";
+var StyledCenter = styled16.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -7896,7 +7967,7 @@ var StyledCenter = styled15.div`
   `}
 `;
 var Center = forwardRef6(
-  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx203(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx204(
     StyledCenter,
     {
       ref,
@@ -7912,21 +7983,21 @@ Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef7, useId } from "react";
-import styled19, { css as css20 } from "styled-components";
+import styled20, { css as css20 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled18, { css as css19 } from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil10 } from "@wistia/type-guards";
+import styled19, { css as css19 } from "styled-components";
+import { isNil as isNil12, isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled16, { css as css18 } from "styled-components";
+import styled17, { css as css18 } from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
-import { jsx as jsx204 } from "react/jsx-runtime";
+import { jsx as jsx205 } from "react/jsx-runtime";
 var disabledStyle = css18`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = styled16.div`
+var StyledFormControlLabelDescription = styled17.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -7944,7 +8015,7 @@ var FormControlLabelDescription = ({
   if (isNil11(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx204(
+  return /* @__PURE__ */ jsx205(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -7956,11 +8027,11 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled17 from "styled-components";
-import { isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx205 } from "react/jsx-runtime";
-var VisuallyHidden = styled17.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled17.div({
+import styled18 from "styled-components";
+import { isNotNil as isNotNil11 } from "@wistia/type-guards";
+import { jsx as jsx206 } from "react/jsx-runtime";
+var VisuallyHidden = styled18.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled18.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7969,25 +8040,25 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...props
 }) => {
-  const accessibleText = isNotNil9(text) ? text : children;
+  const accessibleText = isNotNil11(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx205(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
+    return /* @__PURE__ */ jsx206(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx205(VisuallyHidden, { ...props, children: accessibleText });
+  return /* @__PURE__ */ jsx206(VisuallyHidden, { ...props, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import { jsx as jsx206, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx207, jsxs as jsxs14 } from "react/jsx-runtime";
 var disabledStyle2 = css19`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = styled18.div`
+var StyledLabelWrapper = styled19.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = styled18.label`
+var StyledFormControlLabel = styled19.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -8012,18 +8083,18 @@ var FormControlLabel = ({
   if (isNil12(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ jsx206(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs13(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ jsx207(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs14(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ jsx206(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ jsx207(FormControlLabelDescription, { children: description })
   ] });
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     StyledFormControlLabel,
     {
       $disabled: disabled,
       htmlFor,
       ...props,
       children: [
-        isNotNil10(controlSlot) ? controlSlot : null,
+        isNotNil12(controlSlot) ? controlSlot : null,
         labelContent
       ]
     }
@@ -8032,8 +8103,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx207, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx207(
+import { jsx as jsx208, jsxs as jsxs15 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx208(
   "svg",
   {
     fill: "inherit",
@@ -8041,7 +8112,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx207(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx207(
+    children: /* @__PURE__ */ jsx208(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -8088,14 +8159,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled19.div`
+var StyledCheckboxWrapper = styled20.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled19.div`
+var StyledCheckboxInput = styled20.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8117,7 +8188,7 @@ var StyledCheckboxInput = styled19.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = styled19.input`
+var StyledHiddenCheckboxInput = styled20.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8148,8 +8219,8 @@ var Checkbox = forwardRef7(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ jsxs14(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ jsx207(
+    return /* @__PURE__ */ jsxs15(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ jsx208(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8164,16 +8235,16 @@ var Checkbox = forwardRef7(
           value
         }
       ),
-      /* @__PURE__ */ jsx207(
+      /* @__PURE__ */ jsx208(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx207(
+          controlSlot: /* @__PURE__ */ jsx208(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ jsx207(CheckIcon, {})
+              children: /* @__PURE__ */ jsx208(CheckIcon, {})
             }
           ),
           description,
@@ -8225,10 +8296,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root } from "@radix-ui/react-collapsible";
-import { isNotNil as isNotNil11 } from "@wistia/type-guards";
-import styled20 from "styled-components";
-import { jsx as jsx208 } from "react/jsx-runtime";
-var StyledRoot = styled20(Root)`
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import styled21 from "styled-components";
+import { jsx as jsx209 } from "react/jsx-runtime";
+var StyledRoot = styled21(Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8242,47 +8313,47 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil11(onOpenChange) && isNotNil11(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil13(onOpenChange) && isNotNil13(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx208(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx209(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { jsx as jsx209 } from "react/jsx-runtime";
+import { jsx as jsx210 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx209(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx210(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled21 from "styled-components";
+import styled22 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
-var ClampedContent = styled21.div.attrs({ "data-wui-collapsible-content": true })`
+import { Fragment as Fragment4, jsx as jsx211, jsxs as jsxs16 } from "react/jsx-runtime";
+var ClampedContent = styled22.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined6(clamp)) {
-    return /* @__PURE__ */ jsx210(ClampedContent, { $clamp: clamp, children });
+    return /* @__PURE__ */ jsx211(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ jsx210(Content, { children: /* @__PURE__ */ jsxs15(Fragment4, { children: [
+  return /* @__PURE__ */ jsx211(Content, { children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-import styled23, { keyframes } from "styled-components";
+import styled24, { keyframes } from "styled-components";
 import { isNotNull } from "@wistia/type-guards";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled22, { css as css21 } from "styled-components";
-import { jsx as jsx211 } from "react/jsx-runtime";
+import styled23, { css as css21 } from "styled-components";
+import { jsx as jsx212 } from "react/jsx-runtime";
 var heroStyle = css21`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -8335,7 +8406,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = styled22.div`
+var StyledHeading = styled23.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8378,7 +8449,7 @@ var HeadingComponent = forwardRef8(
     variant = "heading1",
     renderAs,
     ...props
-  }, ref) => /* @__PURE__ */ jsx211(
+  }, ref) => /* @__PURE__ */ jsx212(
     StyledHeading,
     {
       ref,
@@ -8398,8 +8469,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-import { jsx as jsx212, jsxs as jsxs16 } from "react/jsx-runtime";
-var StyledDataCard = styled23.div`
+import { jsx as jsx213, jsxs as jsxs17 } from "react/jsx-runtime";
+var StyledDataCard = styled24.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -8420,7 +8491,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled23.div`
+var LoadingBackground = styled24.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8431,27 +8502,27 @@ var LoadingBackground = styled23.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled23(LoadingBackground)`
+var StyledLoadingLabel = styled24(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled23(LoadingBackground)`
+var StyledLoadingValue = styled24(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled23(Heading)`
+var StyledLabel2 = styled24(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled23(Heading)`
+var StyledValue = styled24(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled23.div`
+var StyledSlot = styled24.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled23.div`
+var StyledDataCardTrendContainer = styled24.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8464,39 +8535,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ jsxs16(
+}) => /* @__PURE__ */ jsxs17(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx212(
+      /* @__PURE__ */ jsx213(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx212(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx213(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx212(
+      /* @__PURE__ */ jsx213(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx212(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx213(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx212(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx212(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx213(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx213(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled24 from "styled-components";
-import { jsx as jsx213 } from "react/jsx-runtime";
-var StyledDataCards = styled24(Box)`
+import styled25 from "styled-components";
+import { jsx as jsx214 } from "react/jsx-runtime";
+var StyledDataCards = styled25(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8510,7 +8581,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx213(
+  return /* @__PURE__ */ jsx214(
     StyledDataCards,
     {
       ...props,
@@ -8528,12 +8599,12 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled26 from "styled-components";
+import styled27 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled25, { css as css22 } from "styled-components";
-import { jsx as jsx214 } from "react/jsx-runtime";
+import styled26, { css as css22 } from "styled-components";
+import { jsx as jsx215 } from "react/jsx-runtime";
 var bodyBoldStyles = css22`
   > strong,
   b {
@@ -8653,7 +8724,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = styled25.div`
+var StyledText = styled26.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8710,7 +8781,7 @@ var TextComponent = forwardRef9(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx214(
+    return /* @__PURE__ */ jsx215(
       StyledText,
       {
         ref,
@@ -8732,8 +8803,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx215, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled26.div`
+import { jsx as jsx216, jsxs as jsxs18 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled27.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8748,8 +8819,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs17(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx215(
+  return /* @__PURE__ */ jsxs18(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ jsx216(
       Icon,
       {
         size: "md",
@@ -8757,7 +8828,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx215(
+    /* @__PURE__ */ jsx216(
       Text,
       {
         prominence: "secondary",
@@ -8769,8 +8840,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled27, { css as css23 } from "styled-components";
-import { jsx as jsx216 } from "react/jsx-runtime";
+import styled28, { css as css23 } from "styled-components";
+import { jsx as jsx217 } from "react/jsx-runtime";
 var horizontalBorderCss = css23`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -8784,7 +8855,7 @@ var verticalBorderCss = css23`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled27.div`
+var DividerComponent = styled28.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8796,7 +8867,7 @@ var DividerComponent = styled27.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ jsx216(
+  return /* @__PURE__ */ jsx217(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8809,7 +8880,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled30, { css as css27 } from "styled-components";
+import styled31, { css as css27 } from "styled-components";
 import { useState as useState6, useRef as useRef5 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
@@ -8820,8 +8891,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled28, { css as css24 } from "styled-components";
-import { jsx as jsx217, jsxs as jsxs18 } from "react/jsx-runtime";
+import styled29, { css as css24 } from "styled-components";
+import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
 var CompactTooltipStyles = css24`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8829,7 +8900,7 @@ var CompactTooltipStyles = css24`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled28(TooltipContent)`
+var StyledContent = styled29(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8888,14 +8959,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx217(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx217(TooltipPortal, { children: /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx218(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx218(TooltipPortal, { children: /* @__PURE__ */ jsxs19(
           StyledContent,
           {
             $compact: compact,
@@ -8903,7 +8974,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx217(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx217(
+              !hideArrow ? /* @__PURE__ */ jsx218(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx218(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8912,7 +8983,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx217("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ jsx218("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -8926,8 +8997,8 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef4 } from "react";
-import styled29, { css as css26 } from "styled-components";
-import { isNil as isNil13, isNotNil as isNotNil12, isRecord as isRecord4 } from "@wistia/type-guards";
+import styled30, { css as css26 } from "styled-components";
+import { isNil as isNil13, isNotNil as isNotNil14, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/sharedStyles/inputCssVariables.ts
 import { css as css25 } from "styled-components";
@@ -8938,6 +9009,7 @@ var inputCssVariables = css25`
   --wui-input-color-border-focus: var(--wui-color-focus-ring);
   --wui-input-color-border-error: var(--wui-color-invalid-indicator);
   --wui-input-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-input-color-text: var(--wui-color-text);
   --wui-input-border-radius: var(--wui-border-radius-03);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
   --wui-input-vertical-padding: var(--wui-space-02);
@@ -8948,7 +9020,7 @@ var inputCssVariables = css25`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
 var inputStyles = css26`
   ${inputCssVariables}
   input,
@@ -8962,7 +9034,7 @@ var inputStyles = css26`
     font-size: var(--wui-input-font-size);
     line-height: var(--wui-input-line-height);
     font-weight: var(--wui-typography-weight-body);
-    color: var(--wui-color-text-primary);
+    color: var(--wui-input-color-text);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -8984,7 +9056,7 @@ var inputStyles = css26`
     }
   }
 `;
-var StyledInputContainer = styled29.div`
+var StyledInputContainer = styled30.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9064,27 +9136,27 @@ var Input = forwardRef10(
     const internalRef = useRef4();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      isNotNil12(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
+      isNotNil14(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if (isNil13(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx218(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx219(Icon, { type: "search" });
     }
-    if (isNotNil12(leftIconToDisplay)) {
+    if (isNotNil14(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil12(rightIconToDisplay)) {
+    if (isNotNil14(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement4(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if (isNotNil12(props.onFocus)) {
+      if (isNotNil14(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9093,21 +9165,21 @@ var Input = forwardRef10(
         });
       }
     };
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx218(
+          type === "multiline" ? /* @__PURE__ */ jsx219(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx218(
+          ) : /* @__PURE__ */ jsx219(
             "input",
             {
               ...props,
@@ -9125,8 +9197,8 @@ var Input = forwardRef10(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment5, jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledInput = styled30(Input)`
+import { Fragment as Fragment5, jsx as jsx220, jsxs as jsxs21 } from "react/jsx-runtime";
+var StyledInput = styled31(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9156,7 +9228,7 @@ var editableStyles = css27`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled30(Heading)`
+var StyledHeading2 = styled31(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9210,7 +9282,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx219(
+  const HeadingComponent2 = /* @__PURE__ */ jsx220(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9224,7 +9296,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ jsx219(
+    return /* @__PURE__ */ jsx220(
       StyledInput,
       {
         $height: headingHeight,
@@ -9242,8 +9314,8 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx219(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsx220(
       Tooltip,
       {
         compact: true,
@@ -9251,7 +9323,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ jsx219(ScreenReaderOnly, { children: /* @__PURE__ */ jsx219(
+    /* @__PURE__ */ jsx220(ScreenReaderOnly, { children: /* @__PURE__ */ jsx220(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9264,15 +9336,15 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef12, useRef as useRef6, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
-import styled32 from "styled-components";
+import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef11 } from "react";
-import styled31 from "styled-components";
-import { jsx as jsx220 } from "react/jsx-runtime";
+import styled32 from "styled-components";
+import { jsx as jsx221 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = styled31.div`
+var StyledStack = styled32.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9283,7 +9355,7 @@ var StackComponent = forwardRef11(
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ jsx220(
+    return /* @__PURE__ */ jsx221(
       StyledStack,
       {
         ref,
@@ -9300,8 +9372,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx221 } from "react/jsx-runtime";
-var StyledForm = styled32.form`
+import { jsx as jsx222 } from "react/jsx-runtime";
+var StyledForm = styled33.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9380,7 +9452,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx221(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx221(
+    /* @__PURE__ */ jsx222(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx222(
       Stack,
       {
         ...props,
@@ -9439,9 +9511,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef7 } from "react";
 import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx222, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx222("li", { children: /* @__PURE__ */ jsx222(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx223("li", { children: /* @__PURE__ */ jsx223(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef7(null);
@@ -9450,10 +9522,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs21("div", { ref, children: [
-    /* @__PURE__ */ jsx222("p", { children: description }),
-    /* @__PURE__ */ jsx222("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined8(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx222(
+  return /* @__PURE__ */ jsxs22("div", { ref, children: [
+    /* @__PURE__ */ jsx223("p", { children: description }),
+    /* @__PURE__ */ jsx223("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined8(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx223(
         ErrorItem,
         {
           error: err,
@@ -9461,7 +9533,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx222(
+      )) : /* @__PURE__ */ jsx223(
         ErrorItem,
         {
           error: error ?? "",
@@ -9476,12 +9548,12 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
-import styled35 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil13, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import styled36 from "styled-components";
+import { isArray as isArray2, isNotNil as isNotNil15, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled33, { css as css28 } from "styled-components";
-import { jsx as jsx223 } from "react/jsx-runtime";
+import styled34, { css as css28 } from "styled-components";
+import { jsx as jsx224 } from "react/jsx-runtime";
 var requiredStyle = css28`
   &::after {
     color: var(--wui-color-text-error);
@@ -9493,7 +9565,7 @@ var requiredStyle = css28`
 var disabledStyle3 = css28`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = styled33.label`
+var StyledLabel3 = styled34.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9525,7 +9597,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsx224(
     StyledLabel3,
     {
       ...props,
@@ -9543,25 +9615,25 @@ Label.displayName = "Label";
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled34 from "styled-components";
+import styled35 from "styled-components";
 import { useRef as useRef8 } from "react";
-import { jsx as jsx224, jsxs as jsxs22 } from "react/jsx-runtime";
-var StyledFieldset = styled34.fieldset`
+import { jsx as jsx225, jsxs as jsxs23 } from "react/jsx-runtime";
+var StyledFieldset = styled35.fieldset`
   border: 0;
 `;
-var StyledLegend = styled34.legend`
+var StyledLegend = styled35.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = useRef8();
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx224(
+        /* @__PURE__ */ jsx225(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9577,7 +9649,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx225 } from "react/jsx-runtime";
+import { jsx as jsx226 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -9592,13 +9664,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx225(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx225(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx226(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx226(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { Fragment as Fragment6, jsx as jsx226, jsxs as jsxs23 } from "react/jsx-runtime";
-var StyledFormField = styled35.div`
+import { Fragment as Fragment6, jsx as jsx227, jsxs as jsxs24 } from "react/jsx-runtime";
+var StyledFormField = styled36.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);
@@ -9628,7 +9700,7 @@ var StyledFormField = styled35.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = styled35.ul`
+var StyledErrorList = styled36.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9638,7 +9710,7 @@ var StyledErrorList = styled35.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx226(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx226(
+  return isMultipleErrors ? /* @__PURE__ */ jsx227(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx227(
     Text,
     {
       colorScheme: "error",
@@ -9648,7 +9720,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx226(
+  )) }) : /* @__PURE__ */ jsx227(
     Text,
     {
       colorScheme: "error",
@@ -9693,8 +9765,8 @@ var FormField = ({
       defaultValue
     };
   }
-  if (isNotNil13(checkboxGroup)) {
-    const computedName = isNotNil13(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil15(checkboxGroup)) {
+    const computedName = isNotNil15(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
       if (isNotUndefined9(props.onChange)) {
         props.onChange(event);
@@ -9707,22 +9779,22 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil13(error)
+      "aria-invalid": isNotNil15(error)
     };
   }
   Children5.only(children);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx226(Label, { htmlFor: computedId, children: label }),
-        isNotNil13(description) ? /* @__PURE__ */ jsx226(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        !isIntegratedLabel && /* @__PURE__ */ jsx227(Label, { htmlFor: computedId, children: label }),
+        isNotNil15(description) ? /* @__PURE__ */ jsx227(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
-        isNotNil13(computedError) ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
-          /* @__PURE__ */ jsx226("div", {}),
-          /* @__PURE__ */ jsx226(
+        isNotNil15(computedError) ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
+          /* @__PURE__ */ jsx227("div", {}),
+          /* @__PURE__ */ jsx227(
             ErrorMessages,
             {
               errors: computedError,
@@ -9738,7 +9810,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext4, useMemo as useMemo6 } from "react";
-import { jsx as jsx227 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -9753,15 +9825,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx227(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx227(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx228(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx228(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children6, cloneElement as cloneElement6, forwardRef as forwardRef13 } from "react";
-import styled36 from "styled-components";
-import { jsx as jsx228 } from "react/jsx-runtime";
-var StyledButton2 = styled36(Button)`
+import styled37 from "styled-components";
+import { jsx as jsx229 } from "react/jsx-runtime";
+var StyledButton2 = styled37(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9778,7 +9850,7 @@ var StyledButton2 = styled36(Button)`
 var IconButton = forwardRef13(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx228(
+    return /* @__PURE__ */ jsx229(
       StyledButton2,
       {
         ...props,
@@ -9795,55 +9867,6 @@ var IconButton = forwardRef13(
 );
 IconButton.displayName = "IconButton";
 
-// src/components/Image/Image.tsx
-import styled37 from "styled-components";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
-import { jsx as jsx229 } from "react/jsx-runtime";
-var getFillStyle2 = (fillContainer) => {
-  if (fillContainer === "horizontal") {
-    return "width: 100%;";
-  }
-  if (fillContainer === "vertical") {
-    return "height: 100%;";
-  }
-  if (fillContainer === true) {
-    return `
-      width: 100%;
-      height: 100%;
-    `;
-  }
-  return void 0;
-};
-var StyledImage = styled37.img`
-  border-radius: ${({ $borderRadius }) => isNotNil14($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
-  ${({ $fillContainer }) => getFillStyle2($fillContainer)};
-  object-fit: ${({ $objFit }) => $objFit};
-  object-position: ${({ $objPosition }) => $objPosition};
-`;
-var Image = ({
-  src,
-  alt,
-  borderRadius,
-  fill: fillContainer = false,
-  fit: objFit,
-  loading = "lazy",
-  position: objPosition,
-  ...props
-}) => /* @__PURE__ */ jsx229(
-  StyledImage,
-  {
-    $borderRadius: borderRadius,
-    $fillContainer: fillContainer,
-    $objFit: objFit,
-    $objPosition: objPosition,
-    alt,
-    loading,
-    src,
-    ...props
-  }
-);
-Image.displayName = "Image";
-
 // src/components/Menu/Menu.tsx
 import styled38, { css as css29, keyframes as keyframes2 } from "styled-components";
 import {
@@ -9852,7 +9875,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -9861,7 +9884,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx230, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx230, jsxs as jsxs25 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -9964,7 +9987,7 @@ var Menu = ({
 }) => {
   const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
-    ...isNotNil15(onOpenChange) && isNotNil15(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil16(onOpenChange) && isNotNil16(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -9972,7 +9995,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx230(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx230(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs25(
     DropdownMenu,
     {
       modal: false,
@@ -10046,13 +10069,13 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil17 } from "@wistia/type-guards";
+import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef14 } from "react";
 import styled40 from "styled-components";
-import { isNotNil as isNotNil16, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
-import { jsx as jsx232, jsxs as jsxs25 } from "react/jsx-runtime";
+import { isNotNil as isNotNil17, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
+import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
 var StyledButton3 = styled40(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
@@ -10147,7 +10170,7 @@ var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     StyledButton3,
     {
       ...props,
@@ -10159,7 +10182,7 @@ var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...pro
       children: [
         props.leftIcon ? /* @__PURE__ */ jsx232(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ jsx232(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil16(badge) || isNotNil16(command) ? /* @__PURE__ */ jsx232(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil17(badge) || isNotNil17(command) ? /* @__PURE__ */ jsx232(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ jsx232(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -10183,7 +10206,7 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx234, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx234, jsxs as jsxs27 } from "react/jsx-runtime";
 var SubMenuContent = styled42(DropdownMenuSubContent)`
   ${menuContentCss}
 
@@ -10224,14 +10247,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState9(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs26(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs26(SubMenuTrigger, { ...props, children: [
+  return isSmAndUp ? /* @__PURE__ */ jsxs27(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs27(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx234(MenuItemLabel, { children: label }),
-      isNotNil17(description) ? /* @__PURE__ */ jsx234(MenuItemDescription, { children: description }) : null
+      isNotNil18(description) ? /* @__PURE__ */ jsx234(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx234(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx234(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs26(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs26(
+  ] }) : /* @__PURE__ */ jsxs27(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs27(
       SubMenuTrigger,
       {
         ...props,
@@ -10279,9 +10302,9 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx236, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs28 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs27(DropdownMenuRadioGroup, { ...props, children: [
+  return /* @__PURE__ */ jsxs28(DropdownMenuRadioGroup, { ...props, children: [
     /* @__PURE__ */ jsx236(MenuLabel, { children: label }),
     children
   ] });
@@ -10329,9 +10352,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx238, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs28(
+  return checked ? /* @__PURE__ */ jsxs29(
     "svg",
     {
       ...props,
@@ -10357,7 +10380,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs28(
+  ) : /* @__PURE__ */ jsxs29(
     "svg",
     {
       ...props,
@@ -10414,7 +10437,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef18 } from "react";
 import styled47 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil19 } from "@wistia/type-guards";
+import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled44 from "styled-components";
@@ -10440,7 +10463,7 @@ var ModalCloseButton = () => {
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx240, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs30 } from "react/jsx-runtime";
 var Header = styled44.header`
   display: flex;
   order: 1;
@@ -10464,7 +10487,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ jsx240(ScreenReaderOnly, { children: /* @__PURE__ */ jsx240(Title, { children: title }) }) : /* @__PURE__ */ jsx240(Title, { children: title });
-  return /* @__PURE__ */ jsxs29(Header, { $hideTitle: hideTitle, children: [
+  return /* @__PURE__ */ jsxs30(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
     hideCloseButton ? null : /* @__PURE__ */ jsx240(ModalCloseButton, {})
   ] });
@@ -10477,7 +10500,7 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef9, useEffect as useEffect7 } from "react";
-import { isNotNil as isNotNil18 } from "@wistia/type-guards";
+import { isNotNil as isNotNil19 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef9(null);
   useEffect7(() => {
@@ -10485,7 +10508,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect7(() => {
     return () => {
-      if (isNotNil18(previouslyFocusedRef.current)) {
+      if (isNotNil19(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10608,7 +10631,7 @@ var Backdrop = forwardRef17(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx243, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs31 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = styled47.div`
   flex-direction: column;
@@ -10632,20 +10655,20 @@ var Modal = forwardRef18(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil19(onRequestClose)) {
+          if (!open2 && isNotNil20(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs30(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs31(DialogPortal, { children: [
           /* @__PURE__ */ jsx243(Backdrop, {}),
-          /* @__PURE__ */ jsxs30(
+          /* @__PURE__ */ jsxs31(
             ModalContent,
             {
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil19(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil20(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10679,13 +10702,13 @@ import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close
 import styled48, { css as css30 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil20 } from "@wistia/type-guards";
+import { isNotNil as isNotNil21 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil20(onOpenChange) && isNotNil20(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil21(onOpenChange) && isNotNil21(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx244, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx244, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledContent2 = styled48(Content2)`
   ${({ $unstyled }) => !$unstyled && css30`
       border-radius: var(--wui-border-radius-02);
@@ -10719,9 +10742,9 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs31(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+  return /* @__PURE__ */ jsxs32(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ jsx244(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs31(
+    /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs32(
       StyledContent2,
       {
         sideOffset: 8,
@@ -10749,8 +10772,8 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled49 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil21 } from "@wistia/type-guards";
-import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
+import { isNotNil as isNotNil22 } from "@wistia/type-guards";
+import { jsx as jsx245, jsxs as jsxs33 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled49.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
@@ -10803,8 +10826,8 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs32(ProgressBarWrapper, { children: [
-    isNotNil21(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
+  return /* @__PURE__ */ jsxs33(ProgressBarWrapper, { children: [
+    isNotNil22(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx245(
       StyledProgressBar,
       {
@@ -10820,7 +10843,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil21(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil22(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -10829,7 +10852,7 @@ ProgressBar.displayName = "ProgressBar";
 import { forwardRef as forwardRef19, useId as useId3 } from "react";
 import styled50, { css as css31 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs34 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx246(
   "svg",
   {
@@ -10946,7 +10969,7 @@ var Radio = forwardRef19(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `wistia-ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       StyledRadioWrapper,
       {
         $disabled: disabled,
@@ -11085,7 +11108,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx249, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs35 } from "react/jsx-runtime";
 var segmentedControlStyles = css32`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11123,7 +11146,7 @@ var SegmentedControl = forwardRef20(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs34(SelectedItemMeasurementsProvider, { children: [
+        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemMeasurementsProvider, { children: [
           /* @__PURE__ */ jsx249(SelectedItemIndicator, {}),
           children
         ] }) })
@@ -11137,8 +11160,8 @@ SegmentedControl.displayName = "SegmentedControl";
 import { forwardRef as forwardRef21, useEffect as useEffect8, useRef as useRef10 } from "react";
 import styled53, { css as css33 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil22 } from "@wistia/type-guards";
-import { jsxs as jsxs35 } from "react/jsx-runtime";
+import { isNotNil as isNotNil23 } from "@wistia/type-guards";
+import { jsxs as jsxs36 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css33`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -11240,12 +11263,12 @@ var SegmentedControlItem = forwardRef21(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil22(label),
-        "aria-label": isNotNil22(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil23(label),
+        "aria-label": isNotNil23(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -11272,7 +11295,7 @@ import {
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef22 } from "react";
 import styled54 from "styled-components";
-import { jsx as jsx250, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs37 } from "react/jsx-runtime";
 var StyledTrigger = styled54(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCssVariables};
@@ -11289,9 +11312,9 @@ var StyledTrigger = styled54(Trigger3)`
   justify-content: space-between;
   max-width: 100%;
   width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
-  color: var(--wui-input-color-text);
   font-size: var(--wui-input-font-size);
   line-height: var(--wui-input-line-height);
+  color: var(--wui-input-color-text);
 
   > span {
     white-space: nowrap;
@@ -11313,7 +11336,7 @@ var StyledTrigger = styled54(Trigger3)`
     background-color: var(--wui-color-bg-surface-disabled);
   }
 
-  [data-placeholder] {
+  &[data-placeholder] {
     color: var(--wui-input-placeholder);
   }
 `;
@@ -11345,13 +11368,13 @@ var Select = forwardRef22(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       Root3,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsxs37(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -11359,13 +11382,7 @@ var Select = forwardRef22(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ jsx250(
-                  Value,
-                  {
-                    "data-placeholder": placeholder,
-                    placeholder
-                  }
-                ),
+                /* @__PURE__ */ jsx250(Value, { placeholder }),
                 /* @__PURE__ */ jsx250(
                   Icon,
                   {
@@ -11376,7 +11393,7 @@ var Select = forwardRef22(
               ]
             }
           ),
-          /* @__PURE__ */ jsx250(Portal2, { children: /* @__PURE__ */ jsxs36(StyledContent3, { position: "popper", children: [
+          /* @__PURE__ */ jsx250(Portal2, { children: /* @__PURE__ */ jsxs37(StyledContent3, { position: "popper", children: [
             /* @__PURE__ */ jsx250(ScrollUpButton, { children: /* @__PURE__ */ jsx250(Icon, { type: "caret-up" }) }),
             /* @__PURE__ */ jsx250(Viewport, { children }),
             /* @__PURE__ */ jsx250(ScrollDownButton, { children: /* @__PURE__ */ jsx250(Icon, { type: "caret-down" }) })
@@ -11392,8 +11409,8 @@ Select.displayName = "Select";
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef23 } from "react";
 import styled55 from "styled-components";
-import { isNotNil as isNotNil23 } from "@wistia/type-guards";
-import { jsx as jsx251, jsxs as jsxs37 } from "react/jsx-runtime";
+import { isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { jsx as jsx251, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledItem = styled55(Item)`
   ${variantStyleMap2.body3};
   display: flex;
@@ -11423,7 +11440,7 @@ var StyledIconContainer = styled55.span`
 `;
 var SelectOption = forwardRef23(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs38(
       StyledItem,
       {
         ...props,
@@ -11436,7 +11453,7 @@ var SelectOption = forwardRef23(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil23(selectedDisplayValue) ? /* @__PURE__ */ jsxs37("div", { children: [
+          isNotNil24(selectedDisplayValue) ? /* @__PURE__ */ jsxs38("div", { children: [
             children,
             /* @__PURE__ */ jsx251("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx251(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx251(ItemText, { children })
@@ -11450,12 +11467,12 @@ SelectOption.displayName = "Option";
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label2 } from "@radix-ui/react-select";
 import styled56 from "styled-components";
-import { jsx as jsx252, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs39 } from "react/jsx-runtime";
 var StyledLabel4 = styled56(Label2)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs38(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs39(Group, { ...props, children: [
     /* @__PURE__ */ jsx252(StyledLabel4, { children: /* @__PURE__ */ jsx252(
       Text,
       {
@@ -11472,7 +11489,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 import { forwardRef as forwardRef24, useId as useId4 } from "react";
 import styled57, { css as css34 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs40 } from "react/jsx-runtime";
 var sizeSmall3 = css34`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
@@ -11591,7 +11608,7 @@ var Switch = forwardRef24(
   }, ref) => {
     const generatedId = useId4();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ jsxs39(StyledSwitchWrapper, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxs40(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ jsx253(
         StyledHiddenSwitchInput,
         {
@@ -11737,7 +11754,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { forwardRef as forwardRef26, useState as useState11 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil25, isNil as isNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil26, isNil as isNil15 } from "@wistia/type-guards";
 import styled68 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
@@ -11793,7 +11810,7 @@ TabList.displayName = "TabList";
 import { forwardRef as forwardRef25, useEffect as useEffect9, useRef as useRef11 } from "react";
 import styled66 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext9, useContext as useContext8 } from "react";
@@ -11808,7 +11825,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-import { jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsxs as jsxs41 } from "react/jsx-runtime";
 var StyledTabItem = styled66(RadixTab)`
   ${segmentedControlItemStyles}
 
@@ -11847,12 +11864,12 @@ var TabItem = forwardRef25(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs41(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil24(label),
-        "aria-label": isNotNil24(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil25(label),
+        "aria-label": isNotNil25(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -11923,7 +11940,7 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx263, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx263, jsxs as jsxs42 } from "react/jsx-runtime";
 var TabsContainer = styled68.div`
   display: flex;
   flex-direction: column;
@@ -11966,8 +11983,8 @@ var Tabs = forwardRef26(
         activationMode: "automatic",
         ...props,
         ...modeProps,
-        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs41(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ jsxs41(
+        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ jsxs42(
             TabList,
             {
               ariaLabel,
@@ -11993,7 +12010,7 @@ var Tabs = forwardRef26(
                       value
                     );
                   }
-                  if (isNotNil25(label)) {
+                  if (isNotNil26(label)) {
                     return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
@@ -12005,7 +12022,7 @@ var Tabs = forwardRef26(
                       value
                     );
                   }
-                  if (isNotNil25(ariaLabelForTab)) {
+                  if (isNotNil26(ariaLabelForTab)) {
                     return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
@@ -12048,8 +12065,8 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef28 } from "react";
 import styled69 from "styled-components";
-import { isNil as isNil16, isNotNil as isNotNil26, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx265, jsxs as jsxs42 } from "react/jsx-runtime";
+import { isNil as isNil16, isNotNil as isNotNil27, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
+import { Fragment as Fragment8, jsx as jsx265, jsxs as jsxs43 } from "react/jsx-runtime";
 var TagLabel = styled69.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -12141,9 +12158,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs43(Fragment8, { children: [
     /* @__PURE__ */ jsx265(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs42(
+    /* @__PURE__ */ jsxs43(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -12165,16 +12182,16 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef28(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = isNotNil26(icon);
-    const labelProps = isNotNil26(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs42(
+    const hasIcon = isNotNil27(icon);
+    const labelProps = isNotNil27(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs43(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs42(
+          /* @__PURE__ */ jsxs43(
             TagLabel,
             {
               ...labelProps,
@@ -12202,8 +12219,8 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled70, { css as css37 } from "styled-components";
-import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
+import { isNotNil as isNotNil28 } from "@wistia/type-guards";
+import { jsx as jsx266, jsxs as jsxs44 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx266(
@@ -12301,7 +12318,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs43(
+  const Logo = /* @__PURE__ */ jsxs44(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -12315,7 +12332,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx266("title", { children: title }),
-        isNotNil27(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
+        isNotNil28(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12327,8 +12344,8 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled71 from "styled-components";
-import { isNotNil as isNotNil28 } from "@wistia/type-guards";
-import { jsx as jsx267, jsxs as jsxs44 } from "react/jsx-runtime";
+import { isNotNil as isNotNil29 } from "@wistia/type-guards";
+import { jsx as jsx267, jsxs as jsxs45 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled71.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
@@ -12354,8 +12371,8 @@ var StyledThumbnailBadge = styled71.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs44(StyledThumbnailBadge, { ...props, children: [
-    isNotNil28(icon) && icon,
+  return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
+    isNotNil29(icon) && icon,
     /* @__PURE__ */ jsx267("span", { children: label })
   ] });
 };
@@ -12364,10 +12381,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef29 } from "react";
 import styled72 from "styled-components";
-import { isNil as isNil17, isNotNil as isNotNil30 } from "@wistia/type-guards";
+import { isNil as isNil17, isNotNil as isNotNil31 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil29 } from "@wistia/type-guards";
+import { isNotNil as isNotNil30 } from "@wistia/type-guards";
 import { css as css38 } from "styled-components";
 var gradients = {
   defaultDarkOne: css38`
@@ -12495,11 +12512,11 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil29(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil30(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs46 } from "react/jsx-runtime";
 var WideThumbnailImage = styled72.img`
   height: 100%;
   object-fit: cover;
@@ -12529,7 +12546,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled72.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil30($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil31($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -12552,8 +12569,8 @@ var Thumbnail = forwardRef29(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && isNotNil30(thumbnailUrl) ? thumbnailUrl : void 0;
-    return /* @__PURE__ */ jsxs45(
+    const backgroundUrl = thumbnailImageType === "square" && isNotNil31(thumbnailUrl) ? thumbnailUrl : void 0;
+    return /* @__PURE__ */ jsxs46(
       StyledThumbnail,
       {
         ref,
@@ -12562,8 +12579,8 @@ var Thumbnail = forwardRef29(
         $width: width,
         ...props,
         children: [
-          isNotNil30(children) ? children : null,
-          isNotNil30(thumbnailUrl) ? /* @__PURE__ */ jsx268(
+          isNotNil31(children) ? children : null,
+          isNotNil31(thumbnailUrl) ? /* @__PURE__ */ jsx268(
             ThumbnailImage,
             {
               thumbnailImageType,