@wistia/ui 0.6.43 → 0.6.45-beta.2edb41a9.b87a21e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.43
+ * @license @wistia/ui v0.6.45-beta.2edb41a9.b87a21e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2109,6 +2109,10 @@ var isValidRef = (value) => {
   return (0, import_type_guards7.isNotNil)(value) && (0, import_type_guards7.isRecord)(value) && "current" in value;
 };
 
+// src/private/helpers/noOpFn/noOpFn.ts
+var noOpFn = () => {
+};
+
 // src/private/hooks/useEvent/useEvent.ts
 var isEventTargetSupported = (eventTarget) => (
   // @ts-expect-error the compiler thinks that addEventListener may not exist on eventTarget, but we still need to check it.
@@ -2133,8 +2137,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
       if (savedEventHandler.current !== void 0) {
         return savedEventHandler.current(event);
       }
-      return () => {
-      };
+      return noOpFn;
     };
     target.addEventListener(eventName, eventListener, savedEventOptions.current);
     return () => {
@@ -2208,8 +2211,7 @@ var useLockBodyScroll = (locked) => {
         document.body.style.overflow = originalStyle;
       };
     }
-    return () => {
-    };
+    return noOpFn;
   }, [locked]);
 };
 
@@ -7384,30 +7386,101 @@ 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 = ({
@@ -7415,7 +7488,7 @@ var ColorSchemeWrapper = ({
   colorScheme = "inherit",
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
@@ -7426,86 +7499,91 @@ var ColorSchemeWrapper = ({
 );
 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;
+
+  > * {
+    grid-area: 1 / 1;
+  }
+
+  --wui-avatar-inset-opacity: 10%;
 
-  a:hover & {
-    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%);
+  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);
   }
 
-  a:active & {
-    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
+  &: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,
@@ -7529,29 +7607,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,
     {
+      $colorScheme: avatarColor,
+      $heightAndWidth: avatarSize,
       ...props,
-      $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
-        }
-      )
+      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
+          }
+        )
+      ]
     }
   );
 };
@@ -7559,10 +7634,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);
@@ -7584,8 +7659,8 @@ var StyledBadge = import_styled_components24.default.div`
 `;
 var Badge = (0, import_react19.forwardRef)(
   ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards18.isNotNil)(icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
+    const hasIcon = (0, import_type_guards19.isNotNil)(icon);
+    return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
       StyledBadge,
       {
         ref,
@@ -7594,7 +7669,7 @@ var Badge = (0, import_react19.forwardRef)(
         $hasIcon: hasIcon,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("span", { children: label })
         ]
       }
     );
@@ -7604,8 +7679,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) => {
@@ -7613,11 +7688,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("");
@@ -7626,7 +7701,7 @@ var getGapStyle = (gap) => {
   }
   return void 0;
 };
-var getFillStyle = (fill) => {
+var getFillStyle2 = (fill) => {
   if (fill === "horizontal") {
     return "width: 100%;";
   }
@@ -7661,41 +7736,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)};
@@ -7703,17 +7778,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;
@@ -7751,7 +7826,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
     flexMode,
     ...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}');
       }
@@ -7761,7 +7836,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}');
       }
@@ -7771,7 +7846,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         );
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
       StyledBoxComponent,
       {
         ref,
@@ -7804,9 +7879,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);
@@ -7824,8 +7899,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;
@@ -7837,7 +7912,7 @@ var Breadcrumbs = ({ children, ...props }) => {
           }
         }
      ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
       StyledBreadcrumbs,
       {
         "aria-label": "Breadcrumbs",
@@ -7851,9 +7926,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;
@@ -7862,18 +7937,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",
@@ -7885,9 +7960,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";
@@ -7900,7 +7975,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 */
@@ -7932,10 +8007,10 @@ var ButtonGroup = ({
   collapseOnSmallScreens = true,
   ...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,
@@ -7949,9 +8024,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})`};
@@ -7988,7 +8063,7 @@ var Card = ({
   height,
   width,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -8007,9 +8082,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;
@@ -8022,7 +8097,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,
@@ -8038,21 +8113,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);
@@ -8067,10 +8142,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,
@@ -8082,11 +8157,11 @@ 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 = ({
@@ -8095,25 +8170,25 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...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, { ...props, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHidden, { ...props, 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;
@@ -8135,21 +8210,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
       ]
     }
@@ -8158,8 +8233,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",
@@ -8167,7 +8242,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",
@@ -8176,7 +8251,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;
@@ -8187,7 +8262,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;
@@ -8198,7 +8273,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;
@@ -8214,14 +8289,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;
@@ -8243,7 +8318,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 */
@@ -8273,9 +8348,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,
@@ -8290,16 +8365,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,
@@ -8351,10 +8426,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;
@@ -8368,84 +8443,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);
@@ -8461,7 +8536,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);
@@ -8470,16 +8545,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;
@@ -8504,7 +8579,7 @@ var HeadingComponent = (0, import_react26.forwardRef)(
     variant = "heading1",
     renderAs,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
     StyledHeading,
     {
       ref,
@@ -8524,8 +8599,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';
@@ -8538,7 +8613,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;
   }
@@ -8546,7 +8621,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%,
@@ -8557,27 +8632,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);
@@ -8590,39 +8665,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 */
   > * {
@@ -8636,7 +8711,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8654,25 +8729,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);
@@ -8680,7 +8755,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);
@@ -8688,7 +8763,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);
@@ -8696,7 +8771,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);
@@ -8704,47 +8779,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);
 `;
@@ -8779,7 +8854,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) {
@@ -8803,19 +8878,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 {
@@ -8836,7 +8911,7 @@ var TextComponent = (0, import_react27.forwardRef)(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       StyledText,
       {
         ref,
@@ -8858,8 +8933,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);
@@ -8874,8 +8949,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",
@@ -8883,7 +8958,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -8895,22 +8970,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":
@@ -8922,7 +8997,7 @@ var DividerComponent = import_styled_components42.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8935,21 +9010,21 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components46 = __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);
@@ -9008,14 +9083,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,
@@ -9023,7 +9098,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)",
@@ -9032,7 +9107,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
             ]
@@ -9046,18 +9121,19 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 var import_react28 = require("react");
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_type_guards29 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
-var import_styled_components44 = require("styled-components");
-var inputCssVariables = import_styled_components44.css`
+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-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-color-text: var(--wui-color-text);
   --wui-input-border-radius: var(--wui-border-radius-03);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
   --wui-input-vertical-padding: var(--wui-space-02);
@@ -9068,8 +9144,8 @@ var inputCssVariables = import_styled_components44.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var inputStyles = import_styled_components45.css`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var inputStyles = import_styled_components46.css`
   ${inputCssVariables}
   input,
   textarea {
@@ -9082,7 +9158,7 @@ var inputStyles = import_styled_components45.css`
     font-size: var(--wui-input-font-size);
     line-height: var(--wui-input-line-height);
     font-weight: var(--wui-typography-weight-body);
-    color: var(--wui-color-text-primary);
+    color: var(--wui-input-color-text);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -9104,7 +9180,7 @@ var inputStyles = import_styled_components45.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components45.default.div`
+var StyledInputContainer = import_styled_components46.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9184,27 +9260,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) {
@@ -9213,21 +9289,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,
@@ -9245,8 +9321,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_components46.default)(Input)`
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components47.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9266,7 +9342,7 @@ var StyledInput = (0, import_styled_components46.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components46.css`
+var editableStyles = import_styled_components47.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9276,7 +9352,7 @@ var editableStyles = import_styled_components46.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components46.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components47.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9330,7 +9406,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9344,7 +9420,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,
@@ -9362,8 +9438,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,
@@ -9371,7 +9447,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,
@@ -9384,15 +9460,15 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 var import_react31 = require("react");
-var import_styled_components48 = __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_components47 = __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_components47.default.div`
+var StyledStack = import_styled_components48.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9403,7 +9479,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,
@@ -9420,8 +9496,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_components48.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)"};
@@ -9451,7 +9527,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);
@@ -9461,7 +9537,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);
     }
   };
@@ -9500,7 +9576,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,
@@ -9558,10 +9634,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);
@@ -9570,10 +9646,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,
@@ -9581,7 +9657,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9596,13 +9672,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react36 = require("react");
-var import_styled_components51 = __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_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components49.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;
@@ -9610,10 +9686,10 @@ var requiredStyle = import_styled_components49.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components49.css`
+var disabledStyle3 = import_styled_components50.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components49.default.label`
+var StyledLabel3 = import_styled_components50.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9645,7 +9721,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
     StyledLabel3,
     {
       ...props,
@@ -9663,25 +9739,25 @@ Label.displayName = "Label";
 var import_react35 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components50 = __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_components50.default.fieldset`
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components51.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components50.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,
@@ -9697,7 +9773,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,
@@ -9712,13 +9788,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_components51.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);
@@ -9748,7 +9824,7 @@ var StyledFormField = import_styled_components51.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components51.default.ul`
+var StyledErrorList = import_styled_components52.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9757,8 +9833,8 @@ var StyledErrorList = import_styled_components51.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",
@@ -9768,7 +9844,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9807,19 +9883,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);
       }
     };
@@ -9827,22 +9903,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,
@@ -9858,7 +9934,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,
@@ -9873,15 +9949,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_components52 = __toESM(require("styled-components"));
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components52.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;
@@ -9898,7 +9974,7 @@ var StyledButton2 = (0, import_styled_components52.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,
@@ -9915,55 +9991,6 @@ var IconButton = (0, import_react38.forwardRef)(
 );
 IconButton.displayName = "IconButton";
 
-// src/components/Image/Image.tsx
-var import_styled_components53 = __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_components53.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,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
-  StyledImage,
-  {
-    $borderRadius: borderRadius,
-    $fillContainer: fillContainer,
-    $objFit: objFit,
-    $objPosition: objPosition,
-    alt,
-    loading,
-    src,
-    ...props
-  }
-);
-Image.displayName = "Image";
-
 // src/components/Menu/Menu.tsx
 var import_styled_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
@@ -11381,9 +11408,9 @@ var StyledTrigger = (0, import_styled_components70.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);
+  color: var(--wui-input-color-text);
 
   > span {
     white-space: nowrap;
@@ -11405,7 +11432,7 @@ var StyledTrigger = (0, import_styled_components70.default)(import_react_select.
     background-color: var(--wui-color-bg-surface-disabled);
   }
 
-  [data-placeholder] {
+  &[data-placeholder] {
     color: var(--wui-input-placeholder);
   }
 `;
@@ -11451,13 +11478,7 @@ var Select = (0, import_react54.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
-                  import_react_select.Value,
-                  {
-                    "data-placeholder": placeholder,
-                    placeholder
-                  }
-                ),
+                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
                 /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
                   Icon,
                   {