@wistia/ui 0.6.41 → 0.6.42-beta.0cb1d3c7.d9a0804

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.41
+ * @license @wistia/ui v0.6.42-beta.0cb1d3c7.d9a0804
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1242,6 +1242,7 @@ var colorAliasTokens = import_styled_components3.css`
   /* --- Misc --- */
   --wui-color-bg-fill-white: #ffffff;
   --wui-color-focus-color: var(--wui-blue-9);
+  --wui-color-invalid-indicator: var(--wui-error-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
   --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
@@ -1253,7 +1254,7 @@ var colorAliasTokens = import_styled_components3.css`
 
   /* Disabled */
   --wui-color-bg-surface-disabled: var(--wui-gray-3);
-  --wui-color-bg-border-disabled: var(--wui-gray-4);
+  --wui-color-border-disabled: var(--wui-gray-4);
   --wui-color-icon-disabled: var(--wui-gray-8);
   --wui-color-text-disabled: var(--wui-gray-10);
   --wui-color-focus-ring-disabled: var(--wui-gray-6);
@@ -2362,11 +2363,11 @@ var EllipsisComponent = import_styled_components13.default.span`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   EllipsisComponent,
   {
     $lines: lines,
-    ...otherProps,
+    ...props,
     children
   }
 );
@@ -6933,7 +6934,7 @@ var Icon = ({
   size = "lg",
   style,
   type,
-  ...otherProps
+  ...props
 }) => {
   const responsiveSize = useResponsiveProp(size);
   if ((0, import_type_guards13.isNil)(type)) {
@@ -6965,7 +6966,7 @@ var Icon = ({
       viewBox: "0 0 24 24",
       width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
-      ...otherProps,
+      ...props,
       color: iconColor
     }
   );
@@ -7383,128 +7384,204 @@ ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
 var import_react18 = require("react");
-var import_type_guards17 = require("@wistia/type-guards");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_type_guards18 = require("@wistia/type-guards");
+var import_styled_components24 = __toESM(require("styled-components"));
 
-// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
+// src/components/Avatar/formatNameForDisplay.tsx
+var import_type_guards16 = require("@wistia/type-guards");
+var containsEmojiCharacter = (char) => {
+  const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
+  return emojiRegex.test(char);
+};
+var formatNameForDisplay = (name) => {
+  if ((0, import_type_guards16.isNil)(name) || !(0, import_type_guards16.isString)(name) || (0, import_type_guards16.isEmptyString)(name) || containsEmojiCharacter(name)) {
+    return "U";
+  }
+  const firstChar = name.trim().substring(0, 1);
+  return firstChar.toUpperCase();
+};
+
+// src/components/Image/Image.tsx
 var import_styled_components22 = __toESM(require("styled-components"));
+var import_type_guards17 = require("@wistia/type-guards");
 var import_jsx_runtime195 = require("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 = import_styled_components22.default.img`
+  border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($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__ */ (0, import_jsx_runtime195.jsx)(
+  StyledImage,
+  {
+    $borderRadius: borderRadius,
+    $fillContainer: fillContainer,
+    $objFit: objFit,
+    $objPosition: objPosition,
+    alt,
+    loading,
+    onError,
+    onLoad,
+    src,
+    ...props
+  }
+);
+Image.displayName = "Image";
+
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_jsx_runtime196 = require("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 = import_styled_components22.default.div`
+var colorSchemeOptions = [
+  ...defaultColorSchemeOptions,
+  ...semanticColorSchemeOptions,
+  ...brandColorSchemeOptions,
+  ...vendorColorSchemeOptions
+];
+var StyledColorSchemeWrapper = import_styled_components23.default.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
   __nav = false,
   colorScheme = "inherit",
   children,
-  ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
     $nav: __nav,
-    ...otherProps,
+    ...props,
     children
   }
 );
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 
-// src/components/Avatar/formatNameForDisplay.tsx
-var import_type_guards16 = require("@wistia/type-guards");
-var containsEmojiCharacter = (char) => {
-  const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
-  return emojiRegex.test(char);
-};
-var formatNameForDisplay = (name) => {
-  if ((0, import_type_guards16.isNil)(name) || !(0, import_type_guards16.isString)(name) || (0, import_type_guards16.isEmptyString)(name) || containsEmojiCharacter(name)) {
-    return "U";
-  }
-  const firstChar = name.trim().substring(0, 1);
-  return firstChar.toUpperCase();
-};
-
 // src/components/Avatar/Avatar.tsx
-var import_jsx_runtime196 = require("react/jsx-runtime");
-var AvatarImage = import_styled_components23.default.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%);
-  }
-`;
+var import_jsx_runtime197 = require("react/jsx-runtime");
 var avatarSizeMap = {
   sm: 16,
   md: 24,
   lg: 32
 };
-var fontSizeScaleMultiplier = 0.55;
-var InitialsContainer = import_styled_components23.default.div`
+var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
+  "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__ */ (0, import_jsx_runtime197.jsx)(
+        "path",
+        {
+          d: "M0 13.5h24",
+          id: "P"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("text", { children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+        "textPath",
+        {
+          dominantBaseline: "middle",
+          fill: "currentColor",
+          fontSize: "16px",
+          href: "#P",
+          startOffset: "50%",
+          textAnchor: "middle",
+          children: initial
+        }
+      ) })
+    ]
+  }
+);
+var AvatarWrapper = import_styled_components24.default.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 = import_styled_components23.default.div`
-  max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
-  if ((0, import_type_guards17.isNil)(name) || name === "Anonymous") {
-    return "default";
+  if ((0, import_type_guards18.isNil)(name) || name === "Anonymous") {
+    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,
@@ -7512,7 +7589,7 @@ var Avatar = ({
   name,
   size = "md",
   onImageLoad,
-  ...otherProps
+  ...props
 }) => {
   const [imageLoadState, setImageLoadState] = (0, import_react18.useState)("loading");
   (0, import_react18.useEffect)(() => {
@@ -7528,29 +7605,26 @@ var Avatar = ({
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = (0, import_react18.useMemo)(() => chooseColorScheme(name), [name]);
-  const showInitials = (0, import_type_guards17.isNil)(imageUrl) || imageLoadState === "error";
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
     AvatarWrapper,
     {
-      ...otherProps,
-      $maxHeight: avatarSize,
-      children: showInitials ? /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-        InitialsContainer,
-        {
-          $colorScheme: avatarColor,
-          $heightAndWidth: avatarSize,
-          children: formatNameForDisplay(name)
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-        AvatarImage,
-        {
-          $heightAndWidth: avatarSize,
-          alt: name ?? "Unavailable",
-          onError: handleImageLoadError,
-          onLoad: handleImageLoad,
-          src: imageUrl
-        }
-      )
+      $colorScheme: avatarColor,
+      $heightAndWidth: avatarSize,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Initial, { initial: formatNameForDisplay(name) }),
+        (0, import_type_guards18.isNotNil)(imageUrl) && imageLoadState !== "error" && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+          Image,
+          {
+            alt: (0, import_type_guards18.isNotNil)(name) ? name : "",
+            "data-state": imageLoadState,
+            fit: "cover",
+            onError: handleImageLoadError,
+            onLoad: handleImageLoad,
+            src: imageUrl
+          }
+        )
+      ]
     }
   );
 };
@@ -7558,10 +7632,10 @@ Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
 var import_react19 = require("react");
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_type_guards18 = require("@wistia/type-guards");
-var import_jsx_runtime197 = require("react/jsx-runtime");
-var StyledBadge = import_styled_components24.default.div`
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_type_guards19 = require("@wistia/type-guards");
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var StyledBadge = import_styled_components25.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7582,18 +7656,18 @@ var StyledBadge = import_styled_components24.default.div`
   }
 `;
 var Badge = (0, import_react19.forwardRef)(
-  ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
-    const hasIcon = (0, import_type_guards18.isNotNil)(icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
+  ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
+    const hasIcon = (0, import_type_guards19.isNotNil)(icon);
+    return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
       StyledBadge,
       {
         ref,
-        ...otherProps,
+        ...props,
         $colorScheme: colorScheme,
         $hasIcon: hasIcon,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("span", { children: label })
         ]
       }
     );
@@ -7603,8 +7677,8 @@ Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
 var import_react20 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"));
-var import_type_guards19 = require("@wistia/type-guards");
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_type_guards20 = require("@wistia/type-guards");
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7612,11 +7686,11 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Box/Box.tsx
-var import_jsx_runtime198 = require("react/jsx-runtime");
+var import_jsx_runtime199 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if ((0, import_type_guards19.isNotNil)(gap)) {
-    if ((0, import_type_guards19.isRecord)(gap)) {
+  if ((0, import_type_guards20.isNotNil)(gap)) {
+    if ((0, import_type_guards20.isRecord)(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
       }).join("");
@@ -7625,7 +7699,7 @@ var getGapStyle = (gap) => {
   }
   return void 0;
 };
-var getFillStyle = (fill) => {
+var getFillStyle2 = (fill) => {
   if (fill === "horizontal") {
     return "width: 100%;";
   }
@@ -7660,41 +7734,41 @@ var getFlexStyle = (flexMode) => {
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
-      return import_styled_components25.css`
+      return import_styled_components26.css`
         flex: 1 0 0;
       `;
     // default behavior, can shrink but won't grow
     case "initial":
-      return import_styled_components25.css`
+      return import_styled_components26.css`
         flex: 0 1 auto;
       `;
     // equal distribution of space
     case "equal":
-      return import_styled_components25.css`
+      return import_styled_components26.css`
         flex: 1;
       `;
     // won't grow or shrink
     case "rigid":
-      return import_styled_components25.css`
+      return import_styled_components26.css`
         flex: 0 0 auto;
       `;
     // can grow and shrink from content size
     case "fluid":
-      return import_styled_components25.css`
+      return import_styled_components26.css`
         flex: 1 1 auto;
       `;
     default:
       return null;
   }
 };
-var StyledBoxComponent = import_styled_components25.default.div`
+var StyledBoxComponent = import_styled_components26.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => (0, import_type_guards19.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards19.isNotNil)($basis) ? $basis : null};
+  display: ${({ $inline }) => (0, import_type_guards20.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
-  ${({ $fillBox: fill }) => getFillStyle(fill)};
+  ${({ $fillBox: fill }) => getFillStyle2(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
   ${({ $gap }) => getGapStyle($gap)};
@@ -7702,17 +7776,17 @@ var StyledBoxComponent = import_styled_components25.default.div`
   width: ${({ $width }) => $width ?? null};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => (0, import_type_guards19.isNotNil)($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => (0, import_type_guards19.isNotNil)($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => (0, import_type_guards20.isNotNil)($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => (0, import_type_guards20.isNotNil)($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => (0, import_type_guards19.isNotNil)($order) ? $order : null};
+  order: ${({ $order }) => (0, import_type_guards20.isNotNil)($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if ((0, import_type_guards19.isNotNil)(children)) {
+  if ((0, import_type_guards20.isNotNil)(children)) {
     if (typeof children === "object" && isDev) {
       return import_react20.Children.map(children, (child) => {
-        if ((0, import_type_guards19.isNil)(child)) return null;
+        if ((0, import_type_guards20.isNil)(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
@@ -7748,9 +7822,9 @@ var BoxComponent = (0, import_react20.forwardRef)(
     width,
     wrapItems = false,
     flexMode,
-    ...otherProps
+    ...props
   }, ref) => {
-    if ((0, import_type_guards19.isNotUndefined)(height)) {
+    if ((0, import_type_guards20.isNotUndefined)(height)) {
       if (fill === true || fill === "vertical") {
         throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
       }
@@ -7760,7 +7834,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         );
       }
     }
-    if ((0, import_type_guards19.isNotUndefined)(width)) {
+    if ((0, import_type_guards20.isNotUndefined)(width)) {
       if (fill === true || fill === "horizontal") {
         throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
       }
@@ -7770,7 +7844,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         );
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
       StyledBoxComponent,
       {
         ref,
@@ -7792,7 +7866,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         $width: width,
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
-        ...otherProps,
+        ...props,
         children: wrapChildren(children)
       }
     );
@@ -7803,9 +7877,9 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react21 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
-var import_jsx_runtime199 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components26.default.nav`
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_jsx_runtime200 = require("react/jsx-runtime");
+var StyledBreadcrumbs = import_styled_components27.default.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -7823,8 +7897,8 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_jsx_runtime199.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("style", { type: "text/css", children: `
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
           container-name: breadcrumbs;
@@ -7836,7 +7910,7 @@ var Breadcrumbs = ({ children, ...props }) => {
           }
         }
      ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
       StyledBreadcrumbs,
       {
         "aria-label": "Breadcrumbs",
@@ -7850,9 +7924,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_jsx_runtime200 = require("react/jsx-runtime");
-var BreadcrumbContent = import_styled_components27.default.span`
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var BreadcrumbContent = import_styled_components28.default.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -7861,18 +7935,18 @@ var BreadcrumbContent = import_styled_components27.default.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_jsx_runtime201.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
       Button,
       {
         ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
       Icon,
       {
         size: "sm",
@@ -7884,9 +7958,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_type_guards21 = require("@wistia/type-guards");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -7899,7 +7973,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components28.default.div`
+var ButtonGroupComponent = import_styled_components29.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -7929,18 +8003,18 @@ var ButtonGroup = ({
   align = "left",
   fullWidth = false,
   collapseOnSmallScreens = true,
-  ...otherProps
+  ...props
 }) => {
-  if ((0, import_type_guards20.isNil)(children)) {
+  if ((0, import_type_guards21.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     ButtonGroupComponent,
     {
       $align: align,
       $collapse: collapseOnSmallScreens,
       $fullWidth: fullWidth,
-      ...otherProps,
+      ...props,
       children
     }
   );
@@ -7948,9 +8022,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_jsx_runtime202 = require("react/jsx-runtime");
-var StyledCard = (0, import_styled_components29.default)(Box)`
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var StyledCard = (0, import_styled_components30.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -7987,7 +8061,7 @@ var Card = ({
   height,
   width,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -8006,9 +8080,9 @@ Card.displayName = "Card";
 
 // src/components/Center/Center.tsx
 var import_react22 = require("react");
-var import_styled_components30 = __toESM(require("styled-components"));
-var import_jsx_runtime203 = require("react/jsx-runtime");
-var StyledCenter = import_styled_components30.default.div`
+var import_styled_components31 = __toESM(require("styled-components"));
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var StyledCenter = import_styled_components31.default.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -8021,7 +8095,7 @@ var StyledCenter = import_styled_components30.default.div`
   `}
 `;
 var Center = (0, import_react22.forwardRef)(
-  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
     StyledCenter,
     {
       ref,
@@ -8037,21 +8111,21 @@ Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react23 = require("react");
-var import_styled_components34 = __toESM(require("styled-components"));
-var import_type_guards24 = require("@wistia/type-guards");
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_type_guards25 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_type_guards23 = require("@wistia/type-guards");
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_type_guards24 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
-var import_type_guards21 = require("@wistia/type-guards");
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var disabledStyle = import_styled_components31.css`
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_type_guards22 = require("@wistia/type-guards");
+var import_jsx_runtime205 = require("react/jsx-runtime");
+var disabledStyle = import_styled_components32.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components31.default.div`
+var StyledFormControlLabelDescription = import_styled_components32.default.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -8066,10 +8140,10 @@ var FormControlLabelDescription = ({
   disabled = false,
   ...props
 }) => {
-  if ((0, import_type_guards21.isNil)(children)) {
+  if ((0, import_type_guards22.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -8081,38 +8155,38 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_type_guards22 = require("@wistia/type-guards");
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components32.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components32.default.div({
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_type_guards23 = require("@wistia/type-guards");
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components33.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components33.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
   text,
   children,
   focusable = false,
-  ...otherProps
+  ...props
 }) => {
-  const accessibleText = (0, import_type_guards22.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards23.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(VisuallyHidden, { ...props, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_jsx_runtime206 = require("react/jsx-runtime");
-var disabledStyle2 = import_styled_components33.css`
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var disabledStyle2 = import_styled_components34.css`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = import_styled_components33.default.div`
+var StyledLabelWrapper = import_styled_components34.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components33.default.label`
+var StyledFormControlLabel = import_styled_components34.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -8134,21 +8208,21 @@ var FormControlLabel = ({
   hideLabel = false,
   ...props
 }) => {
-  if ((0, import_type_guards23.isNil)(label)) {
+  if ((0, import_type_guards24.isNil)(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(FormControlLabelDescription, { children: description })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
     StyledFormControlLabel,
     {
       $disabled: disabled,
       htmlFor,
       ...props,
       children: [
-        (0, import_type_guards23.isNotNil)(controlSlot) ? controlSlot : null,
+        (0, import_type_guards24.isNotNil)(controlSlot) ? controlSlot : null,
         labelContent
       ]
     }
@@ -8157,8 +8231,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -8166,7 +8240,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
       "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",
@@ -8175,7 +8249,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components34.css`
+var sizeSmall = import_styled_components35.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8186,7 +8260,7 @@ var sizeSmall = import_styled_components34.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components34.css`
+var sizeMedium = import_styled_components35.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8197,7 +8271,7 @@ var sizeMedium = import_styled_components34.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components34.css`
+var sizeLarge = import_styled_components35.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8213,14 +8287,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components34.default.div`
+var StyledCheckboxWrapper = import_styled_components35.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components34.default.div`
+var StyledCheckboxInput = import_styled_components35.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8230,7 +8304,7 @@ var StyledCheckboxInput = import_styled_components34.default.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
 
   /* checkmark icon */
@@ -8242,7 +8316,7 @@ var StyledCheckboxInput = import_styled_components34.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components34.default.input`
+var StyledHiddenCheckboxInput = import_styled_components35.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8272,9 +8346,9 @@ var Checkbox = (0, import_react23.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react23.useId)();
-    const computedId = (0, import_type_guards24.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+    const computedId = (0, import_type_guards25.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8289,16 +8363,16 @@ var Checkbox = (0, import_react23.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -8350,10 +8424,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards25 = require("@wistia/type-guards");
-var import_styled_components35 = __toESM(require("styled-components"));
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components35.default)(import_react_collapsible.Root)`
+var import_type_guards26 = require("@wistia/type-guards");
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components36.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8367,84 +8441,84 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards25.isNotNil)(onOpenChange) && (0, import_type_guards25.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards26.isNotNil)(onOpenChange) && (0, import_type_guards26.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 var import_react25 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime209 = require("react/jsx-runtime");
+var import_jsx_runtime210 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
   import_react25.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_styled_components37 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards26 = require("@wistia/type-guards");
-var import_jsx_runtime210 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components36.default.div.attrs({ "data-wui-collapsible-content": true })`
+var import_type_guards27 = require("@wistia/type-guards");
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components37.default.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards26.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(ClampedContent, { $clamp: clamp, children });
+  if ((0, import_type_guards27.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_type_guards27 = require("@wistia/type-guards");
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_type_guards28 = require("@wistia/type-guards");
 
 // src/components/Heading/Heading.tsx
 var import_react26 = require("react");
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_jsx_runtime211 = require("react/jsx-runtime");
-var heroStyle = import_styled_components37.css`
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var heroStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components37.css`
+var heading1TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components37.css`
+var heading2TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components37.css`
+var heading3TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components37.css`
+var heading4TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components37.css`
+var heading5TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components37.css`
+var heading6TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8460,7 +8534,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components37.default.div`
+var StyledHeading = import_styled_components38.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8469,16 +8543,16 @@ var StyledHeading = import_styled_components37.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components37.css`
+  ${({ $inline }) => $inline && import_styled_components38.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components37.css`
+  ${({ $disabled }) => $disabled && import_styled_components38.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components38.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components37.css`
+  ${({ $align }) => import_styled_components38.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8502,8 +8576,8 @@ var HeadingComponent = (0, import_react26.forwardRef)(
     preventUserSelect = false,
     variant = "heading1",
     renderAs,
-    ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
     StyledHeading,
     {
       ref,
@@ -8515,7 +8589,7 @@ var HeadingComponent = (0, import_react26.forwardRef)(
       $preventUserSelect: preventUserSelect,
       $variant: variant,
       as: renderAs ?? variantElementMap[variant],
-      ...otherProps
+      ...props
     }
   )
 );
@@ -8523,8 +8597,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components38.default.div`
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components39.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -8537,7 +8611,7 @@ var StyledDataCard = import_styled_components38.default.div`
   border-radius: var(--wui-border-radius-02);
   position: relative;
 `;
-var shimmer = import_styled_components38.keyframes`
+var shimmer = import_styled_components39.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8545,7 +8619,7 @@ var shimmer = import_styled_components38.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components38.default.div`
+var LoadingBackground = import_styled_components39.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8556,27 +8630,27 @@ var LoadingBackground = import_styled_components38.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components38.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components39.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components38.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components39.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components38.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components39.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components38.default)(Heading)`
+var StyledValue = (0, import_styled_components39.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components38.default.div`
+var StyledSlot = import_styled_components39.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components38.default.div`
+var StyledDataCardTrendContainer = import_styled_components39.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8589,39 +8663,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards27.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards27.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards28.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards28.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components39.default)(Box)`
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime214 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components40.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8635,7 +8709,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8653,25 +8727,25 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
+var import_styled_components42 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
 var import_react27 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components40.css`
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components41.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components40.css`
+var labelBoldStyles = import_styled_components41.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components40.css`
+var body1TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8679,7 +8753,7 @@ var body1TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components40.css`
+var body2TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8687,7 +8761,7 @@ var body2TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components40.css`
+var body3TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8695,7 +8769,7 @@ var body3TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components40.css`
+var body4TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8703,47 +8777,47 @@ var body4TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components40.css`
+var label1TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components40.css`
+var label2TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components40.css`
+var label3TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components40.css`
+var label4TextStyle = import_styled_components41.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components40.css`
+var body1MonoTextStyle = import_styled_components41.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components40.css`
+var body2MonoTextStyle = import_styled_components41.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components40.css`
+var body3MonoTextStyle = import_styled_components41.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components40.css`
+var body4MonoTextStyle = import_styled_components41.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8778,7 +8852,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components40.default.div`
+var StyledText = import_styled_components41.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8802,19 +8876,19 @@ var StyledText = import_styled_components40.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components40.css`
+  ${({ $inline }) => $inline && import_styled_components41.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components40.css`
+  ${({ $disabled }) => $disabled && import_styled_components41.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components40.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components41.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components40.css`
+  ${({ $align }) => import_styled_components41.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components40.css`
+  ${({ as }) => as === "p" && import_styled_components41.css`
       display: block;
 
       + p {
@@ -8833,9 +8907,9 @@ var TextComponent = (0, import_react27.forwardRef)(
     prominence = "primary",
     variant = "body2",
     renderAs,
-    ...otherProps
+    ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       StyledText,
       {
         ref,
@@ -8848,7 +8922,7 @@ var TextComponent = (0, import_react27.forwardRef)(
         $prominence: prominence,
         $variant: variant,
         as: renderAs ?? variantElementMap2[variant],
-        ...otherProps
+        ...props
       }
     );
   }
@@ -8857,8 +8931,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components41.default.div`
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components42.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8873,8 +8947,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       Icon,
       {
         size: "md",
@@ -8882,7 +8956,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -8894,22 +8968,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components42.css`
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components43.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components42.css`
+var verticalBorderCss = import_styled_components43.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components42.default.div`
+var DividerComponent = import_styled_components43.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8920,38 +8994,35 @@ var DividerComponent = import_styled_components42.default.div`
   }
 }}
 `;
-var Divider = ({
-  orientation = "horizontal",
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+var Divider = ({ orientation = "horizontal", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
       "aria-orientation": orientation,
       role: "separator",
-      ...otherProps
+      ...props
     }
   );
 };
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components47 = __toESM(require("styled-components"));
 var import_react29 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components43.css`
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components44.css`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = (0, import_styled_components43.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components44.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9010,14 +9081,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -9025,7 +9096,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9034,7 +9105,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("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__ */ (0, import_jsx_runtime218.jsx)("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
             ]
@@ -9048,29 +9119,43 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 var import_react28 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var inputStyles = import_styled_components44.css`
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_type_guards29 = require("@wistia/type-guards");
+
+// src/css/sharedStyles/inputCssVariables.ts
+var import_styled_components45 = require("styled-components");
+var inputCssVariables = import_styled_components45.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-input-color-border: var(--wui-color-border);
-  --wui-input-color-border-focus: var(--wui-color-border-active);
-  --wui-input-color-border-error: var(--wui-color-border-error);
+  --wui-input-color-border: var(--wui-color-border-secondary);
+  --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-border-radius: var(--wui-border-radius-rounded);
+  --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);
   --wui-input-horizontal-padding: var(--wui-space-03);
   --wui-input-placeholder: var(--wui-gray-10);
-  --wui-input-color-text-error: var(--wui-color-text-error);
+  --wui-input-font-size: var(--wui-typography-body-3-size);
+  --wui-input-line-height: 16px;
+`;
 
+// src/components/Input/Input.tsx
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var inputStyles = import_styled_components46.css`
+  ${inputCssVariables}
   input,
   textarea {
     padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
     background-color: var(--wui-input-color-bg);
-    border: 1px solid var(--wui-input-color-border);
+    border: none;
+    outline: 1px solid var(--wui-input-color-border);
+    outline-offset: -1px;
     border-radius: var(--wui-input-border-radius);
+    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);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -9078,21 +9163,21 @@ var inputStyles = import_styled_components44.css`
     }
 
     &:focus {
-      border-color: var(--wui-input-color-border-focus);
+      outline: 2px solid var(--wui-input-color-border-focus);
+      outline-offset: -2px;
     }
 
     &[aria-invalid='true'] {
-      border-color: var(--wui-input-color-border-error);
-      color: var(--wui-input-color-text-error);
+      outline-color: var(--wui-input-color-border-error);
     }
 
     &:disabled {
-      border-color: var(--wui-color-bg-surface-disabled);
+      outline-color: var(--wui-color-border-disabled);
       background-color: var(--wui-color-bg-surface-disabled);
     }
   }
 `;
-var StyledInputContainer = import_styled_components44.default.div`
+var StyledInputContainer = import_styled_components46.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9106,6 +9191,29 @@ var StyledInputContainer = import_styled_components44.default.div`
 
   textarea {
     border-radius: var(--wui-input-multiline-border-radius);
+
+    --wui-input-line-height: var(--wui-typography-body-3-line-height);
+  }
+
+  [type='search'] {
+    &::-webkit-search-cancel-button {
+      appearance: none;
+      height: 16px;
+      width: 16px;
+      margin-right: -4px;
+
+      /* css vars don't work in data URLs, so the stroke color value is hardcoded. if we support dark mode, we'll need to swap the background image based on the users preferred color scheme */
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='%2364646a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-position: center;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      background-color: var(--wui-color-bg-surface-secondary);
+      border-radius: var(--wui-border-radius-rounded);
+
+      &:hover {
+        background-color: var(--wui-color-bg-surface-secondary-hover);
+      }
+    }
   }
 
   .wui-input-left-icon {
@@ -9149,27 +9257,27 @@ var Input = (0, import_react28.forwardRef)(
     const internalRef = (0, import_react28.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards28.isNotNil)(externalRef) && (0, import_type_guards28.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards29.isNotNil)(externalRef) && (0, import_type_guards29.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards28.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Icon, { type: "search" });
+    if ((0, import_type_guards29.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards28.isNotNil)(leftIconToDisplay)) {
+    if ((0, import_type_guards29.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react28.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards28.isNotNil)(rightIconToDisplay)) {
+    if ((0, import_type_guards29.isNotNil)(rightIconToDisplay)) {
       rightIconToDisplay = (0, import_react28.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards28.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards29.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9178,21 +9286,21 @@ var Input = (0, import_react28.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
             "input",
             {
               ...props,
@@ -9210,8 +9318,8 @@ var Input = (0, import_react28.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components45.default)(Input)`
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components47.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9231,7 +9339,7 @@ var StyledInput = (0, import_styled_components45.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components45.css`
+var editableStyles = import_styled_components47.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9241,7 +9349,7 @@ var editableStyles = import_styled_components45.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components45.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components47.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9295,7 +9403,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9309,7 +9417,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -9327,8 +9435,8 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_jsx_runtime219.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       Tooltip,
       {
         compact: true,
@@ -9336,7 +9444,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9349,15 +9457,15 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 var import_react31 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_type_guards30 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react30 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime220 = require("react/jsx-runtime");
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime221 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components46.default.div`
+var StyledStack = import_styled_components48.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9368,7 +9476,7 @@ var StackComponent = (0, import_react30.forwardRef)(
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       StyledStack,
       {
         ref,
@@ -9385,8 +9493,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var StyledForm = import_styled_components47.default.form`
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var StyledForm = import_styled_components49.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9416,7 +9524,7 @@ var FormComponent = ({
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards29.isUndefined)(validate)) {
+    if ((0, import_type_guards30.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -9426,7 +9534,7 @@ var FormComponent = ({
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards29.isNotUndefined)(validate)) {
+    if ((0, import_type_guards30.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -9465,7 +9573,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
       Stack,
       {
         ...props,
@@ -9523,10 +9631,10 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react33 = require("react");
-var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime222 = require("react/jsx-runtime");
+var import_type_guards31 = require("@wistia/type-guards");
+var import_jsx_runtime223 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react33.useRef)(null);
@@ -9535,10 +9643,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards30.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards30.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards31.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards31.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9546,7 +9654,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9561,13 +9669,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react36 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_type_guards31 = require("@wistia/type-guards");
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_type_guards32 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components48.css`
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components50.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9575,10 +9683,10 @@ var requiredStyle = import_styled_components48.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components48.css`
+var disabledStyle3 = import_styled_components50.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components48.default.label`
+var StyledLabel3 = import_styled_components50.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9608,12 +9716,12 @@ var Label = ({
   htmlFor,
   required = false,
   screenReaderOnly = false,
-  ...otherProps
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
     StyledLabel3,
     {
-      ...otherProps,
+      ...props,
       $disabled: disabled,
       $required: required,
       $screenReaderOnly: screenReaderOnly,
@@ -9628,25 +9736,25 @@ Label.displayName = "Label";
 var import_react35 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
+var import_styled_components51 = __toESM(require("styled-components"));
 var import_react34 = require("react");
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components49.default.fieldset`
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components51.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components49.default.legend`
+var StyledLegend = import_styled_components51.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = (0, import_react34.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9662,7 +9770,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime225 = require("react/jsx-runtime");
+var import_jsx_runtime226 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react35.createContext)(null);
 var CheckboxGroup = ({
   children,
@@ -9677,13 +9785,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components50.default.div`
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components52.default.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);
@@ -9713,7 +9821,7 @@ var StyledFormField = import_styled_components50.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components50.default.ul`
+var StyledErrorList = import_styled_components52.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9722,8 +9830,8 @@ var StyledErrorList = import_styled_components50.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards31.isArray)(errors);
-  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+  const isMultipleErrors = (0, import_type_guards32.isArray)(errors);
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9733,7 +9841,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9772,19 +9880,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards31.isUndefined)(value) && (0, import_type_guards31.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards32.isUndefined)(value) && (0, import_type_guards32.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards31.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards31.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards32.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards32.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards31.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards32.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards31.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards32.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9792,22 +9900,22 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards31.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards32.isNotNil)(error)
     };
   }
   import_react36.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Label, { htmlFor: computedId, children: label }),
+        (0, import_type_guards32.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react36.cloneElement)(children, childProps),
-        (0, import_type_guards31.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(import_jsx_runtime226.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+        (0, import_type_guards32.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_jsx_runtime227.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
             ErrorMessages,
             {
               errors: computedError,
@@ -9823,7 +9931,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react37 = require("react");
-var import_jsx_runtime227 = require("react/jsx-runtime");
+var import_jsx_runtime228 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react37.createContext)(null);
 var RadioGroup = ({
   children,
@@ -9838,15 +9946,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react38 = require("react");
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components51.default)(Button)`
+var import_styled_components53 = __toESM(require("styled-components"));
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components53.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9863,7 +9971,7 @@ var StyledButton2 = (0, import_styled_components51.default)(Button)`
 var IconButton = (0, import_react38.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
       StyledButton2,
       {
         ...props,
@@ -9880,57 +9988,8 @@ var IconButton = (0, import_react38.forwardRef)(
 );
 IconButton.displayName = "IconButton";
 
-// src/components/Image/Image.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
-var import_jsx_runtime229 = require("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 = import_styled_components52.default.img`
-  border-radius: ${({ $borderRadius }) => (0, import_type_guards32.isNotNil)($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,
-  ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
-  StyledImage,
-  {
-    $borderRadius: borderRadius,
-    $fillContainer: fillContainer,
-    $objFit: objFit,
-    $objPosition: objPosition,
-    alt,
-    loading,
-    src,
-    ...otherProps
-  }
-);
-Image.displayName = "Image";
-
 // src/components/Menu/Menu.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
+var import_styled_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards33 = require("@wistia/type-guards");
 var import_react40 = require("react");
@@ -9942,7 +10001,7 @@ var useMenuContext = () => (0, import_react39.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime230 = require("react/jsx-runtime");
-var open = import_styled_components53.keyframes`
+var open = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -9952,7 +10011,7 @@ var open = import_styled_components53.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components53.keyframes`
+var close = import_styled_components54.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -9962,7 +10021,7 @@ var close = import_styled_components53.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components53.css`
+var menuItemCss = import_styled_components54.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9973,7 +10032,7 @@ var menuItemCss = import_styled_components53.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components53.css`
+var compactMenuItemCss = import_styled_components54.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9984,7 +10043,7 @@ var compactMenuItemCss = import_styled_components53.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components53.css`
+var menuContentCss = import_styled_components54.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -10026,7 +10085,7 @@ var menuContentCss = import_styled_components53.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components53.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components54.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -10089,10 +10148,10 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components54 = __toESM(require("styled-components"));
+var import_styled_components55 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime231 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components54.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var StyledMenuLabel = (0, import_styled_components55.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -10117,16 +10176,16 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 var import_react42 = require("react");
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components58 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards35 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react41 = require("react");
-var import_styled_components55 = __toESM(require("styled-components"));
+var import_styled_components56 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components55.default)(Button)`
+var StyledButton3 = (0, import_styled_components56.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -10165,7 +10224,7 @@ var StyledButton3 = (0, import_styled_components55.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components55.default.div`
+var StyledLeftIconContainer = import_styled_components56.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -10176,7 +10235,7 @@ var StyledLeftIconContainer = import_styled_components55.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components55.default.div`
+var StyledRightIconContainer = import_styled_components56.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -10187,13 +10246,13 @@ var StyledRightIconContainer = import_styled_components55.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components55.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components56.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components55.default.div`
+var StyledBadgeContainer = import_styled_components56.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -10241,10 +10300,10 @@ var MenuItemButton = (0, import_react41.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components56 = __toESM(require("styled-components"));
+var import_styled_components57 = __toESM(require("styled-components"));
 var import_jsx_runtime233 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components56.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components56.default)(Text).attrs({
+var StyledMenuItemLabel = import_styled_components57.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components57.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
@@ -10257,17 +10316,17 @@ var MenuItemDescription = ({ children }) => {
 
 // src/components/Menu/SubMenu.tsx
 var import_jsx_runtime234 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var SubMenuContent = (0, import_styled_components58.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components57.default.div`
+var StyledMobileSubMenuItems = import_styled_components58.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components58.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -10478,19 +10537,19 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 var import_react47 = require("react");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_styled_components63 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards37 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_styled_components60 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components58 = __toESM(require("styled-components"));
+var import_styled_components59 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components58.default)(import_react_dialog.Close)`
+var CloseButton = (0, import_styled_components59.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -10507,7 +10566,7 @@ var ModalCloseButton = () => {
 
 // src/components/Modal/ModalHeader.tsx
 var import_jsx_runtime240 = require("react/jsx-runtime");
-var Header = import_styled_components59.default.header`
+var Header = import_styled_components60.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -10518,7 +10577,7 @@ var Header = import_styled_components59.default.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components59.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components60.default)(import_react_dialog2.Title)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -10538,7 +10597,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 var import_react45 = require("react");
-var import_styled_components60 = __toESM(require("styled-components"));
+var import_styled_components61 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -10562,7 +10621,7 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 var import_jsx_runtime241 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components60.default)(import_react_dialog3.Content)`
+var StyledModalContent = (0, import_styled_components61.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -10604,7 +10663,7 @@ var StyledModalContent = (0, import_styled_components60.default)(import_react_di
   }
 `;
 var ModalContent = (0, import_react45.forwardRef)(
-  ({ fullHeight, width, children, ...otherProps }, ref) => {
+  ({ fullHeight, width, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
       StyledModalContent,
@@ -10613,7 +10672,7 @@ var ModalContent = (0, import_react45.forwardRef)(
         $fullHeight: fullHeight,
         $width: width,
         "aria-describedby": void 0,
-        ...otherProps,
+        ...props,
         children
       }
     );
@@ -10622,7 +10681,7 @@ var ModalContent = (0, import_react45.forwardRef)(
 
 // src/private/components/Backdrop/Backdrop.tsx
 var import_react46 = require("react");
-var import_styled_components61 = __toESM(require("styled-components"));
+var import_styled_components62 = __toESM(require("styled-components"));
 var import_jsx_runtime242 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
@@ -10636,7 +10695,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components61.default.div`
+var BackdropComponent = import_styled_components62.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10676,7 +10735,7 @@ Backdrop.displayName = "Backdrop";
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components62.default.div`
+var ModalBody = import_styled_components63.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -10742,7 +10801,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components64 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
 var import_type_guards38 = require("@wistia/type-guards");
@@ -10752,8 +10811,8 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime244 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components63.default)(import_react_popover.Content)`
-  ${({ $unstyled }) => !$unstyled && import_styled_components63.css`
+var StyledContent2 = (0, import_styled_components64.default)(import_react_popover.Content)`
+  ${({ $unstyled }) => !$unstyled && import_styled_components64.css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -10813,11 +10872,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components64 = __toESM(require("styled-components"));
+var import_styled_components65 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
 var import_type_guards39 = require("@wistia/type-guards");
 var import_jsx_runtime245 = require("react/jsx-runtime");
-var ProgressBarWrapper = import_styled_components64.default.div`
+var ProgressBarWrapper = import_styled_components65.default.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10833,7 +10892,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components64.default.div`
+var ProgressBarLabel = import_styled_components65.default.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10841,7 +10900,7 @@ var ProgressBarLabel = import_styled_components64.default.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components64.default)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components65.default)(import_react_progress.Indicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10850,7 +10909,7 @@ var StyledProgressIndicator = (0, import_styled_components64.default)(import_rea
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = (0, import_styled_components64.default)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components65.default)(import_react_progress.Root)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10893,7 +10952,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 var import_react48 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
+var import_styled_components66 = __toESM(require("styled-components"));
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime246 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
@@ -10915,7 +10974,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
     )
   }
 );
-var sizeSmall2 = import_styled_components65.css`
+var sizeSmall2 = import_styled_components66.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10926,7 +10985,7 @@ var sizeSmall2 = import_styled_components65.css`
     height: 7px;
   }
 `;
-var sizeMedium2 = import_styled_components65.css`
+var sizeMedium2 = import_styled_components66.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10937,7 +10996,7 @@ var sizeMedium2 = import_styled_components65.css`
     height: 8px;
   }
 `;
-var sizeLarge2 = import_styled_components65.css`
+var sizeLarge2 = import_styled_components66.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10953,14 +11012,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components65.default.div`
+var StyledRadioWrapper = import_styled_components66.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = import_styled_components65.default.div`
+var StyledRadioInput = import_styled_components66.default.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10970,7 +11029,7 @@ var StyledRadioInput = import_styled_components65.default.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
 
   /* radio button circle icon */
@@ -10982,12 +11041,12 @@ var StyledRadioInput = import_styled_components65.default.div`
     }
   }
 `;
-var StyledHiddenRadioInput = import_styled_components65.default.input`
+var StyledHiddenRadioInput = import_styled_components66.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input border-color */
   &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of RadioIcon */
@@ -11061,7 +11120,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react52 = require("react");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components68 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_type_guards41 = require("@wistia/type-guards");
 
@@ -11096,7 +11155,7 @@ var useSelectedItemMeasurements = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_react51 = require("react");
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_styled_components67 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react50 = require("react");
@@ -11112,7 +11171,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
-var SelectedItemIndicatorDiv = import_styled_components66.default.div`
+var SelectedItemIndicatorDiv = import_styled_components67.default.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -11152,7 +11211,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components67.css`
+var segmentedControlStyles = import_styled_components68.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11162,7 +11221,7 @@ var segmentedControlStyles = import_styled_components67.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components67.default)(import_react_toggle_group.Root)`
+var StyledSegmentedControl = (0, import_styled_components68.default)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react52.forwardRef)(
@@ -11201,11 +11260,11 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react53 = require("react");
-var import_styled_components68 = __toESM(require("styled-components"));
+var import_styled_components69 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime250 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components68.css`
+var segmentedControlItemStyles = import_styled_components69.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11265,7 +11324,7 @@ var segmentedControlItemStyles = import_styled_components68.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components68.default)(import_react_toggle_group2.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components69.default)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react53.forwardRef)(
@@ -11328,27 +11387,17 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react54 = require("react");
-var import_styled_components69 = __toESM(require("styled-components"));
+var import_styled_components70 = __toESM(require("styled-components"));
 var import_jsx_runtime251 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components69.default)(import_react_select.Trigger)`
+var StyledTrigger = (0, import_styled_components70.default)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  --wui-select-color-bg: var(--wui-color-bg-surface);
-  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-select-color-border: var(--wui-color-border);
-  --wui-select-color-border-focus: var(--wui-color-border-active);
-  --wui-select-color-border-error: var(--wui-color-border-error);
-  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-select-border-radius: var(--wui-border-radius-rounded);
-  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
-  --wui-select-vertical-padding: var(--wui-space-02);
-  --wui-select-horizontal-padding: var(--wui-space-03);
-  --wui-select-placeholder: var(--wui-gray-10);
-  --wui-select-color-text-error: var(--wui-color-text-error);
-
-  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
-  background-color: var(--wui-select-color-bg);
-  border: 1px solid var(--wui-select-color-border);
-  border-radius: var(--wui-select-border-radius);
+  ${inputCssVariables};
+  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+  background-color: var(--wui-input-color-bg);
+  border: none;
+  outline: 1px solid var(--wui-input-color-border);
+  outline-offset: -2px;
+  border-radius: var(--wui-input-border-radius);
   min-width: 200px;
   text-align: left;
   display: inline-flex;
@@ -11356,6 +11405,9 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   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);
 
   > span {
     white-space: nowrap;
@@ -11369,16 +11421,19 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   }
 
   &[aria-invalid='true'] {
-    outline: 2px solid var(--wui-select-color-border-error);
-    color: var(--wui-select-color-text-error);
+    outline: 2px solid var(--wui-input-color-border-error);
   }
 
   &:disabled {
-    border-color: var(--wui-color-bg-surface-disabled);
+    outline-color: var(--wui-color-border-disabled);
     background-color: var(--wui-color-bg-surface-disabled);
   }
+
+  [data-placeholder] {
+    color: var(--wui-input-placeholder);
+  }
 `;
-var StyledContent3 = (0, import_styled_components69.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components70.default)(import_react_select.Content)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -11420,7 +11475,13 @@ var Select = (0, import_react54.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+                  import_react_select.Value,
+                  {
+                    "data-placeholder": placeholder,
+                    placeholder
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
                   Icon,
                   {
@@ -11446,9 +11507,10 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react55 = require("react");
-var import_styled_components70 = __toESM(require("styled-components"));
+var import_styled_components71 = __toESM(require("styled-components"));
+var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime252 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components70.default)(import_react_select2.Item)`
+var StyledItem = (0, import_styled_components71.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -11456,6 +11518,7 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   border-radius: var(--wui-border-radius-01);
+  cursor: pointer;
 
   &:hover,
   &:focus-visible {
@@ -11471,25 +11534,28 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
     background-color: transparent;
   }
 `;
-var StyledIconContainer = import_styled_components70.default.span`
+var StyledIconContainer = import_styled_components71.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react55.forwardRef)(
-  ({ children, ...props }, forwardedRef) => {
+  ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
+          (0, import_type_guards43.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)("div", { children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
         ]
       }
     );
@@ -11499,9 +11565,9 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components71 = __toESM(require("styled-components"));
+var import_styled_components72 = __toESM(require("styled-components"));
 var import_jsx_runtime253 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components71.default)(import_react_select3.Label)`
+var StyledLabel4 = (0, import_styled_components72.default)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
@@ -11520,10 +11586,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 var import_react56 = require("react");
-var import_styled_components72 = __toESM(require("styled-components"));
-var import_type_guards43 = require("@wistia/type-guards");
+var import_styled_components73 = __toESM(require("styled-components"));
+var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
-var sizeSmall3 = import_styled_components72.css`
+var sizeSmall3 = import_styled_components73.css`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11538,7 +11604,7 @@ var sizeSmall3 = import_styled_components72.css`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = import_styled_components72.css`
+var sizeMedium3 = import_styled_components73.css`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11553,7 +11619,7 @@ var sizeMedium3 = import_styled_components72.css`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = import_styled_components72.css`
+var sizeLarge3 = import_styled_components73.css`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11573,14 +11639,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = import_styled_components72.default.div`
+var StyledSwitchWrapper = import_styled_components73.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components72.default.div`
+var StyledSwitchInput = import_styled_components73.default.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -11591,7 +11657,7 @@ var StyledSwitchInput = import_styled_components72.default.div`
   transition: all 0.2s ease-in-out;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"}; /* "off state" border */
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"}; /* "off state" border */
 
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface-secondary)"}; /* "off state" background */
 
@@ -11608,7 +11674,7 @@ var StyledSwitchInput = import_styled_components72.default.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = import_styled_components72.default.input`
+var StyledHiddenSwitchInput = import_styled_components73.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -11640,7 +11706,7 @@ var Switch = (0, import_react56.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
-    const computedId = (0, import_type_guards43.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards44.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         StyledHiddenSwitchInput,
@@ -11682,19 +11748,19 @@ var Switch = (0, import_react56.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components74 = __toESM(require("styled-components"));
 var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledTable = import_styled_components73.default.table`
+var StyledTable = import_styled_components74.default.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && import_styled_components73.css`
+  ${({ $striped }) => $striped && import_styled_components74.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && import_styled_components73.css`
+  ${({ $divided }) => $divided && import_styled_components74.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11718,7 +11784,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components74 = __toESM(require("styled-components"));
+var import_styled_components75 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
 var import_react57 = require("react");
@@ -11726,27 +11792,27 @@ var TableSectionContext = (0, import_react57.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledTbody = import_styled_components74.default.tbody``;
+var StyledTbody = import_styled_components75.default.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 var import_react58 = require("react");
-var import_styled_components75 = __toESM(require("styled-components"));
+var import_styled_components76 = __toESM(require("styled-components"));
 var import_jsx_runtime257 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components75.css`
+var sharedStyles = import_styled_components76.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components75.default.th`
+var StyledTh = import_styled_components76.default.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = import_styled_components75.default.td`
+var StyledTd = import_styled_components76.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -11761,25 +11827,25 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFooter.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
+var import_styled_components77 = __toESM(require("styled-components"));
 var import_jsx_runtime258 = require("react/jsx-runtime");
-var StyledTfoot = import_styled_components76.default.tfoot``;
+var StyledTfoot = import_styled_components77.default.tfoot``;
 var TableFooter = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
+var import_styled_components78 = __toESM(require("styled-components"));
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var StyledThead = import_styled_components77.default.thead``;
+var StyledThead = import_styled_components78.default.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_jsx_runtime260 = require("react/jsx-runtime");
-var StyledTr = import_styled_components78.default.tr``;
+var StyledTr = import_styled_components79.default.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTr, { ...props, children });
 };
@@ -11787,14 +11853,14 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react63 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards45 = require("@wistia/type-guards");
-var import_styled_components83 = __toESM(require("styled-components"));
+var import_type_guards46 = require("@wistia/type-guards");
+var import_styled_components84 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_jsx_runtime261 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components79.default)(import_react_tabs.Content)`
+var StyledTabPanel = (0, import_styled_components80.default)(import_react_tabs.Content)`
   display: flex;
   flex-direction: column;
 `;
@@ -11811,10 +11877,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_react_tabs2 = require("@radix-ui/react-tabs");
 var import_jsx_runtime262 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components80.default)(import_react_tabs2.List)`
+var StyledTabList = (0, import_styled_components81.default)(import_react_tabs2.List)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -11841,9 +11907,9 @@ TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
 var import_react60 = require("react");
-var import_styled_components81 = __toESM(require("styled-components"));
+var import_styled_components82 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_type_guards44 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react59 = require("react");
@@ -11859,7 +11925,7 @@ var useTabsValue = () => {
 
 // src/components/Tabs/TabItem.tsx
 var import_jsx_runtime263 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components81.default)(import_react_tabs3.Trigger)`
+var StyledTabItem = (0, import_styled_components82.default)(import_react_tabs3.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -11901,8 +11967,8 @@ var TabItem = (0, import_react60.forwardRef)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards44.isNotNil)(label),
-        "aria-label": (0, import_type_guards44.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards45.isNotNil)(label),
+        "aria-label": (0, import_type_guards45.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -11939,9 +12005,9 @@ var extractTabItems = (children) => {
 
 // src/components/Tabs/SelectedItemIndicator.tsx
 var import_react62 = require("react");
-var import_styled_components82 = __toESM(require("styled-components"));
+var import_styled_components83 = __toESM(require("styled-components"));
 var import_jsx_runtime264 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components82.default)(SelectedItemIndicatorDiv)`
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components83.default)(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11974,18 +12040,18 @@ var SelectedItemIndicator2 = () => {
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime265 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components83.default.div`
+var TabsContainer = import_styled_components84.default.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = import_styled_components83.default.div`
+var StickyTabContent = import_styled_components84.default.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = (0, import_styled_components83.default)(import_react_tabs4.Root)`
+var StyledTabsRoot = (0, import_styled_components84.default)(import_react_tabs4.Root)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
@@ -11999,7 +12065,7 @@ var Tabs = (0, import_react63.forwardRef)(
     selectedValue,
     onSelectedValueChange,
     stickyHeaders = true,
-    ...otherProps
+    ...props
   }, ref) => {
     const tabItems = extractTabItems(children);
     const [internalSelectedValue, setInternalSelectedValue] = (0, import_react63.useState)(defaultSelectedValue);
@@ -12014,7 +12080,7 @@ var Tabs = (0, import_react63.forwardRef)(
         ref,
         $stickyHeaders: stickyHeaders,
         activationMode: "automatic",
-        ...otherProps,
+        ...props,
         ...modeProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(SelectedItemMeasurementsProvider, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
@@ -12032,7 +12098,7 @@ var Tabs = (0, import_react63.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards45.isNil)(icon)) {
+                  if ((0, import_type_guards46.isNil)(icon)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12043,7 +12109,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards45.isNotNil)(label)) {
+                  if ((0, import_type_guards46.isNotNil)(label)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12055,7 +12121,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards45.isNotNil)(ariaLabelForTab)) {
+                  if ((0, import_type_guards46.isNotNil)(ariaLabelForTab)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12097,10 +12163,10 @@ Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
 var import_react65 = require("react");
-var import_styled_components84 = __toESM(require("styled-components"));
-var import_type_guards46 = require("@wistia/type-guards");
+var import_styled_components85 = __toESM(require("styled-components"));
+var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime267 = require("react/jsx-runtime");
-var TagLabel = import_styled_components84.default.a`
+var TagLabel = import_styled_components85.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12135,14 +12201,14 @@ var TagLabel = import_styled_components84.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components84.default.div`
+var TagDivider = import_styled_components85.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components84.default.button`
+var StyledRemoveButton = import_styled_components85.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12170,7 +12236,7 @@ var StyledRemoveButton = import_styled_components84.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components84.default.div`
+var StyledTag = import_styled_components85.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12183,10 +12249,10 @@ var StyledTag = import_styled_components84.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards46.isNil)(onClickRemove)) {
+  if ((0, import_type_guards47.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards46.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards47.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12214,23 +12280,15 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
   ] });
 };
 var Tag = (0, import_react65.forwardRef)(
-  ({
-    onClickRemove,
-    colorScheme = "inherit",
-    href,
-    icon,
-    label,
-    onClickRemoveLabel,
-    ...otherProps
-  }, ref) => {
-    const hasIcon = (0, import_type_guards46.isNotNil)(icon);
-    const labelProps = (0, import_type_guards46.isNotNil)(href) && (0, import_type_guards46.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+  ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
+    const hasIcon = (0, import_type_guards47.isNotNil)(icon);
+    const labelProps = (0, import_type_guards47.isNotNil)(href) && (0, import_type_guards47.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
-        ...otherProps,
+        ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
             TagLabel,
@@ -12259,8 +12317,8 @@ var Tag = (0, import_react65.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components85 = __toESM(require("styled-components"));
-var import_type_guards47 = require("@wistia/type-guards");
+var import_styled_components86 = __toESM(require("styled-components"));
+var import_type_guards48 = require("@wistia/type-guards");
 var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -12301,7 +12359,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components85.default.svg`
+var WistiaLogoComponent = import_styled_components86.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -12317,12 +12375,12 @@ var WistiaLogoComponent = import_styled_components85.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components85.css`
+      return import_styled_components86.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components85.css`
+    return import_styled_components86.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -12338,7 +12396,7 @@ var WistiaLogo = ({
   opticallyCentered = false,
   title = "Wistia Logo",
   variant = "standard",
-  ...otherProps
+  ...props
 }) => {
   const primaryColor = "#2949e5";
   const darkColor = "#000934";
@@ -12370,10 +12428,10 @@ var WistiaLogo = ({
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
-      ...otherProps,
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("title", { children: title }),
-        (0, import_type_guards47.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards48.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12384,10 +12442,10 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-var import_styled_components86 = __toESM(require("styled-components"));
-var import_type_guards48 = require("@wistia/type-guards");
+var import_styled_components87 = __toESM(require("styled-components"));
+var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime269 = require("react/jsx-runtime");
-var StyledThumbnailBadge = import_styled_components86.default.div`
+var StyledThumbnailBadge = import_styled_components87.default.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -12411,13 +12469,9 @@ var StyledThumbnailBadge = import_styled_components86.default.div`
     }
   }
 `;
-var ThumbnailBadge = ({
-  icon,
-  label,
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...otherProps, children: [
-    (0, import_type_guards48.isNotNil)(icon) && icon,
+var ThumbnailBadge = ({ icon, label, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...props, children: [
+    (0, import_type_guards49.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { children: label })
   ] });
 };
@@ -12425,14 +12479,14 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react66 = require("react");
-var import_styled_components88 = __toESM(require("styled-components"));
-var import_type_guards50 = require("@wistia/type-guards");
+var import_styled_components89 = __toESM(require("styled-components"));
+var import_type_guards51 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards49 = require("@wistia/type-guards");
-var import_styled_components87 = require("styled-components");
+var import_type_guards50 = require("@wistia/type-guards");
+var import_styled_components88 = require("styled-components");
 var gradients = {
-  defaultDarkOne: import_styled_components87.css`
+  defaultDarkOne: import_styled_components88.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -12440,7 +12494,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: import_styled_components87.css`
+  defaultDarkTwo: import_styled_components88.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -12448,7 +12502,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: import_styled_components87.css`
+  defaultLightOne: import_styled_components88.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -12456,13 +12510,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: import_styled_components87.css`
+  defaultLightTwo: import_styled_components88.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: import_styled_components87.css`
+  defaultMidOne: import_styled_components88.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -12470,13 +12524,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: import_styled_components87.css`
+  defaultMidTwo: import_styled_components88.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: import_styled_components87.css`
+  green: import_styled_components88.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12484,7 +12538,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: import_styled_components87.css`
+  greenWithPop: import_styled_components88.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12492,7 +12546,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: import_styled_components87.css`
+  pink: import_styled_components88.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -12500,7 +12554,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: import_styled_components87.css`
+  pinkWithPop: import_styled_components88.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -12508,7 +12562,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: import_styled_components87.css`
+  playfulGradientOne: import_styled_components88.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -12516,7 +12570,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: import_styled_components87.css`
+  playfulGradientTwo: import_styled_components88.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -12524,13 +12578,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: import_styled_components87.css`
+  purple: import_styled_components88.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: import_styled_components87.css`
+  purpleWithPop: import_styled_components88.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -12538,7 +12592,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: import_styled_components87.css`
+  yellow: import_styled_components88.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -12546,7 +12600,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: import_styled_components87.css`
+  yellowWithPop: import_styled_components88.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -12557,17 +12611,17 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards49.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards50.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_jsx_runtime270 = require("react/jsx-runtime");
-var WideThumbnailImage = import_styled_components88.default.img`
+var WideThumbnailImage = import_styled_components89.default.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components88.default.img`
+var SquareThumbnailImage = import_styled_components89.default.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -12590,11 +12644,16 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = import_styled_components88.default.div`
-  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
+var StyledThumbnail = import_styled_components89.default.div`
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards51.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  ${({ $backgroundUrl, $gradientBackground }) => (
+  // if we don't have $backgroundUrl show a gradient
+  (0, import_type_guards51.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+)};
+  background-position: center center;
+  background-size: cover;
   aspect-ratio: 16 / 9;
-  background: ${({ $backgroundUrl }) => (0, import_type_guards50.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}') center / cover` : void 0};
-  border-radius: 4px;
+  border-radius: var(--wui-border-radius-01);
   display: flex;
   overflow: hidden;
   position: relative;
@@ -12607,9 +12666,9 @@ var Thumbnail = (0, import_react66.forwardRef)(
     thumbnailUrl,
     width = "100%",
     children,
-    ...otherProps
+    ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards50.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards51.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
       StyledThumbnail,
       {
@@ -12617,16 +12676,16 @@ var Thumbnail = (0, import_react66.forwardRef)(
         $backgroundUrl: backgroundUrl,
         $gradientBackground: gradientBackground,
         $width: width,
-        ...otherProps,
+        ...props,
         children: [
-          (0, import_type_guards50.isNotNil)(children) && children,
-          (0, import_type_guards50.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          (0, import_type_guards51.isNotNil)(children) ? children : null,
+          (0, import_type_guards51.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
             ThumbnailImage,
             {
               thumbnailImageType,
               thumbnailUrl
             }
-          )
+          ) : null
         ]
       }
     );