@wistia/ui 0.6.42-beta.d7be0ff8.11657cc → 0.6.42

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.42-beta.d7be0ff8.11657cc
+ * @license @wistia/ui v0.6.42
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2363,11 +2363,11 @@ var EllipsisComponent = import_styled_components13.default.span`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   EllipsisComponent,
   {
     $lines: lines,
-    ...props,
+    ...otherProps,
     children
   }
 );
@@ -6934,7 +6934,7 @@ var Icon = ({
   size = "lg",
   style,
   type,
-  ...props
+  ...otherProps
 }) => {
   const responsiveSize = useResponsiveProp(size);
   if ((0, import_type_guards13.isNil)(type)) {
@@ -6966,7 +6966,7 @@ var Icon = ({
       viewBox: "0 0 24 24",
       width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
-      ...props,
+      ...otherProps,
       color: iconColor
     }
   );
@@ -7384,204 +7384,128 @@ ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
 var import_react18 = require("react");
-var import_type_guards18 = require("@wistia/type-guards");
-var import_styled_components24 = __toESM(require("styled-components"));
-
-// 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 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";
+var import_styled_components23 = __toESM(require("styled-components"));
 
 // 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 = [
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_jsx_runtime195 = require("react/jsx-runtime");
+var colorSchemeOptions = [
+  "inherit",
+  "default",
+  "info",
+  "success",
+  "warning",
+  "error",
   "blue",
   "green",
   "orange",
   "pink",
   "purple",
-  "yellow"
-];
-var vendorColorSchemeOptions = [
+  "yellow",
   "vendor-hubspot",
   "vendor-marketo",
   "vendor-pardot"
 ];
-var colorSchemeOptions = [
-  ...defaultColorSchemeOptions,
-  ...semanticColorSchemeOptions,
-  ...brandColorSchemeOptions,
-  ...vendorColorSchemeOptions
-];
-var StyledColorSchemeWrapper = import_styled_components23.default.div`
+var StyledColorSchemeWrapper = import_styled_components22.default.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
   __nav = false,
   colorScheme = "inherit",
   children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
     $nav: __nav,
-    ...props,
+    ...otherProps,
     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_runtime197 = require("react/jsx-runtime");
+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 avatarSizeMap = {
   sm: 16,
   md: 24,
   lg: 32
 };
-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`
+var fontSizeScaleMultiplier = 0.55;
+var InitialsContainer = import_styled_components23.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
+  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;
   height: ${({ $heightAndWidth }) => $heightAndWidth}px;
-  place-content: center;
+  justify-content: center;
   overflow: hidden;
-  background-color: var(--wui-color-bg-fill);
-  border-radius: var(--wui-border-radius-rounded);
-  display: grid;
-  user-select: none;
+  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
 
-  > * {
-    grid-area: 1 / 1;
+  a:hover & {
+    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%);
   }
 
-  --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);
-    }
+  a:active & {
+    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
   }
 `;
+var AvatarWrapper = import_styled_components23.default.div`
+  max-height: ${({ $maxHeight }) => $maxHeight}px;
+`;
 var chooseColorScheme = (name) => {
-  if ((0, import_type_guards18.isNil)(name) || name === "Anonymous") {
-    return "blue";
+  if ((0, import_type_guards17.isNil)(name) || name === "Anonymous") {
+    return "default";
   }
+  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)) % brandColorSchemeOptions.length;
-  return brandColorSchemeOptions[index] ?? "blue";
+  const index = Math.abs(hashCode(name)) % filteredColors.length;
+  return filteredColors[index] ?? "default";
 };
 var Avatar = ({
   imageUrl,
@@ -7589,7 +7513,7 @@ var Avatar = ({
   name,
   size = "md",
   onImageLoad,
-  ...props
+  ...otherProps
 }) => {
   const [imageLoadState, setImageLoadState] = (0, import_react18.useState)("loading");
   (0, import_react18.useEffect)(() => {
@@ -7605,26 +7529,29 @@ var Avatar = ({
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = (0, import_react18.useMemo)(() => chooseColorScheme(name), [name]);
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
+  const showInitials = (0, import_type_guards17.isNil)(imageUrl) || imageLoadState === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     AvatarWrapper,
     {
-      $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
-          }
-        )
-      ]
+      ...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
+        }
+      )
     }
   );
 };
@@ -7632,10 +7559,10 @@ Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
 var import_react19 = require("react");
-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`
+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`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7656,18 +7583,18 @@ var StyledBadge = import_styled_components25.default.div`
   }
 `;
 var Badge = (0, import_react19.forwardRef)(
-  ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards19.isNotNil)(icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
+  ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
+    const hasIcon = (0, import_type_guards18.isNotNil)(icon);
+    return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
       StyledBadge,
       {
         ref,
-        ...props,
+        ...otherProps,
         $colorScheme: colorScheme,
         $hasIcon: hasIcon,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("span", { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { children: label })
         ]
       }
     );
@@ -7677,8 +7604,8 @@ Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
 var import_react20 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_type_guards19 = require("@wistia/type-guards");
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7686,11 +7613,11 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Box/Box.tsx
-var import_jsx_runtime199 = require("react/jsx-runtime");
+var import_jsx_runtime198 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if ((0, import_type_guards20.isNotNil)(gap)) {
-    if ((0, import_type_guards20.isRecord)(gap)) {
+  if ((0, import_type_guards19.isNotNil)(gap)) {
+    if ((0, import_type_guards19.isRecord)(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
       }).join("");
@@ -7699,7 +7626,7 @@ var getGapStyle = (gap) => {
   }
   return void 0;
 };
-var getFillStyle2 = (fill) => {
+var getFillStyle = (fill) => {
   if (fill === "horizontal") {
     return "width: 100%;";
   }
@@ -7734,41 +7661,41 @@ var getFlexStyle = (flexMode) => {
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
-      return import_styled_components26.css`
+      return import_styled_components25.css`
         flex: 1 0 0;
       `;
     // default behavior, can shrink but won't grow
     case "initial":
-      return import_styled_components26.css`
+      return import_styled_components25.css`
         flex: 0 1 auto;
       `;
     // equal distribution of space
     case "equal":
-      return import_styled_components26.css`
+      return import_styled_components25.css`
         flex: 1;
       `;
     // won't grow or shrink
     case "rigid":
-      return import_styled_components26.css`
+      return import_styled_components25.css`
         flex: 0 0 auto;
       `;
     // can grow and shrink from content size
     case "fluid":
-      return import_styled_components26.css`
+      return import_styled_components25.css`
         flex: 1 1 auto;
       `;
     default:
       return null;
   }
 };
-var StyledBoxComponent = import_styled_components26.default.div`
+var StyledBoxComponent = import_styled_components25.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => (0, import_type_guards20.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
+  display: ${({ $inline }) => (0, import_type_guards19.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => (0, import_type_guards19.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
-  ${({ $fillBox: fill }) => getFillStyle2(fill)};
+  ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
   ${({ $gap }) => getGapStyle($gap)};
@@ -7776,17 +7703,17 @@ var StyledBoxComponent = import_styled_components26.default.div`
   width: ${({ $width }) => $width ?? null};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => (0, import_type_guards20.isNotNil)($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => (0, import_type_guards20.isNotNil)($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => (0, import_type_guards19.isNotNil)($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => (0, import_type_guards19.isNotNil)($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => (0, import_type_guards20.isNotNil)($order) ? $order : null};
+  order: ${({ $order }) => (0, import_type_guards19.isNotNil)($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if ((0, import_type_guards20.isNotNil)(children)) {
+  if ((0, import_type_guards19.isNotNil)(children)) {
     if (typeof children === "object" && isDev) {
       return import_react20.Children.map(children, (child) => {
-        if ((0, import_type_guards20.isNil)(child)) return null;
+        if ((0, import_type_guards19.isNil)(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
@@ -7822,9 +7749,9 @@ var BoxComponent = (0, import_react20.forwardRef)(
     width,
     wrapItems = false,
     flexMode,
-    ...props
+    ...otherProps
   }, ref) => {
-    if ((0, import_type_guards20.isNotUndefined)(height)) {
+    if ((0, import_type_guards19.isNotUndefined)(height)) {
       if (fill === true || fill === "vertical") {
         throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
       }
@@ -7834,7 +7761,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         );
       }
     }
-    if ((0, import_type_guards20.isNotUndefined)(width)) {
+    if ((0, import_type_guards19.isNotUndefined)(width)) {
       if (fill === true || fill === "horizontal") {
         throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
       }
@@ -7844,7 +7771,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         );
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
       StyledBoxComponent,
       {
         ref,
@@ -7866,7 +7793,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         $width: width,
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
-        ...props,
+        ...otherProps,
         children: wrapChildren(children)
       }
     );
@@ -7877,9 +7804,9 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react21 = require("react");
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_jsx_runtime200 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components27.default.nav`
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime199 = require("react/jsx-runtime");
+var StyledBreadcrumbs = import_styled_components26.default.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -7897,8 +7824,8 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("style", { type: "text/css", children: `
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_jsx_runtime199.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
           container-name: breadcrumbs;
@@ -7910,7 +7837,7 @@ var Breadcrumbs = ({ children, ...props }) => {
           }
         }
      ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
       StyledBreadcrumbs,
       {
         "aria-label": "Breadcrumbs",
@@ -7924,9 +7851,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime201 = require("react/jsx-runtime");
-var BreadcrumbContent = import_styled_components28.default.span`
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_jsx_runtime200 = require("react/jsx-runtime");
+var BreadcrumbContent = import_styled_components27.default.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -7935,18 +7862,18 @@ var BreadcrumbContent = import_styled_components28.default.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_jsx_runtime201.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
       Button,
       {
         ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
       Icon,
       {
         size: "sm",
@@ -7958,9 +7885,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-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 import_styled_components28 = __toESM(require("styled-components"));
+var import_type_guards20 = require("@wistia/type-guards");
+var import_jsx_runtime201 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -7973,7 +7900,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components29.default.div`
+var ButtonGroupComponent = import_styled_components28.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -8003,18 +7930,18 @@ var ButtonGroup = ({
   align = "left",
   fullWidth = false,
   collapseOnSmallScreens = true,
-  ...props
+  ...otherProps
 }) => {
-  if ((0, import_type_guards21.isNil)(children)) {
+  if ((0, import_type_guards20.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     ButtonGroupComponent,
     {
       $align: align,
       $collapse: collapseOnSmallScreens,
       $fullWidth: fullWidth,
-      ...props,
+      ...otherProps,
       children
     }
   );
@@ -8022,9 +7949,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
-var import_jsx_runtime203 = require("react/jsx-runtime");
-var StyledCard = (0, import_styled_components30.default)(Box)`
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_jsx_runtime202 = require("react/jsx-runtime");
+var StyledCard = (0, import_styled_components29.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -8061,7 +7988,7 @@ var Card = ({
   height,
   width,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -8080,9 +8007,9 @@ Card.displayName = "Card";
 
 // src/components/Center/Center.tsx
 var import_react22 = require("react");
-var import_styled_components31 = __toESM(require("styled-components"));
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var StyledCenter = import_styled_components31.default.div`
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var StyledCenter = import_styled_components30.default.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -8095,7 +8022,7 @@ var StyledCenter = import_styled_components31.default.div`
   `}
 `;
 var Center = (0, import_react22.forwardRef)(
-  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
     StyledCenter,
     {
       ref,
@@ -8111,21 +8038,21 @@ Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react23 = require("react");
-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_components34 = __toESM(require("styled-components"));
 var import_type_guards24 = 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");
+
 // src/private/components/FormControlLabel/FormControlLabelDescription.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 disabledStyle = import_styled_components32.css`
+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`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components32.default.div`
+var StyledFormControlLabelDescription = import_styled_components31.default.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -8140,10 +8067,10 @@ var FormControlLabelDescription = ({
   disabled = false,
   ...props
 }) => {
-  if ((0, import_type_guards22.isNil)(children)) {
+  if ((0, import_type_guards21.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -8155,38 +8082,38 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-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({
+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({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
   text,
   children,
   focusable = false,
-  ...props
+  ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards23.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards22.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(VisuallyHidden, { ...props, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var disabledStyle2 = import_styled_components34.css`
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var disabledStyle2 = import_styled_components33.css`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = import_styled_components34.default.div`
+var StyledLabelWrapper = import_styled_components33.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components34.default.label`
+var StyledFormControlLabel = import_styled_components33.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -8208,21 +8135,21 @@ var FormControlLabel = ({
   hideLabel = false,
   ...props
 }) => {
-  if ((0, import_type_guards24.isNil)(label)) {
+  if ((0, import_type_guards23.isNil)(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(FormControlLabelDescription, { children: description })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
     StyledFormControlLabel,
     {
       $disabled: disabled,
       htmlFor,
       ...props,
       children: [
-        (0, import_type_guards24.isNotNil)(controlSlot) ? controlSlot : null,
+        (0, import_type_guards23.isNotNil)(controlSlot) ? controlSlot : null,
         labelContent
       ]
     }
@@ -8231,8 +8158,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -8240,7 +8167,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime207.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",
@@ -8249,7 +8176,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components35.css`
+var sizeSmall = import_styled_components34.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8260,7 +8187,7 @@ var sizeSmall = import_styled_components35.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components35.css`
+var sizeMedium = import_styled_components34.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8271,7 +8198,7 @@ var sizeMedium = import_styled_components35.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components35.css`
+var sizeLarge = import_styled_components34.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8287,14 +8214,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components35.default.div`
+var StyledCheckboxWrapper = import_styled_components34.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components35.default.div`
+var StyledCheckboxInput = import_styled_components34.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8316,7 +8243,7 @@ var StyledCheckboxInput = import_styled_components35.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components35.default.input`
+var StyledHiddenCheckboxInput = import_styled_components34.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8346,9 +8273,9 @@ var Checkbox = (0, import_react23.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react23.useId)();
-    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)(
+    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)(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8363,16 +8290,16 @@ var Checkbox = (0, import_react23.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -8424,10 +8351,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-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)`
+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)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8441,84 +8368,84 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards26.isNotNil)(onOpenChange) && (0, import_type_guards26.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards25.isNotNil)(onOpenChange) && (0, import_type_guards25.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime208.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_runtime210 = require("react/jsx-runtime");
+var import_jsx_runtime209 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
   import_react25.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-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 })`
+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 })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards27.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(ClampedContent, { $clamp: clamp, children });
+  if ((0, import_type_guards26.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_type_guards27 = require("@wistia/type-guards");
 
 // src/components/Heading/Heading.tsx
 var import_react26 = require("react");
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var heroStyle = import_styled_components38.css`
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var heroStyle = import_styled_components37.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_components38.css`
+var heading1TextStyle = import_styled_components37.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_components38.css`
+var heading2TextStyle = import_styled_components37.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_components38.css`
+var heading3TextStyle = import_styled_components37.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_components38.css`
+var heading4TextStyle = import_styled_components37.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_components38.css`
+var heading5TextStyle = import_styled_components37.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_components38.css`
+var heading6TextStyle = import_styled_components37.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);
@@ -8534,7 +8461,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components38.default.div`
+var StyledHeading = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8543,16 +8470,16 @@ var StyledHeading = import_styled_components38.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components38.css`
+  ${({ $inline }) => $inline && import_styled_components37.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components38.css`
+  ${({ $disabled }) => $disabled && import_styled_components37.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components38.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components38.css`
+  ${({ $align }) => import_styled_components37.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8576,8 +8503,8 @@ var HeadingComponent = (0, import_react26.forwardRef)(
     preventUserSelect = false,
     variant = "heading1",
     renderAs,
-    ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+    ...otherProps
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
     StyledHeading,
     {
       ref,
@@ -8589,7 +8516,7 @@ var HeadingComponent = (0, import_react26.forwardRef)(
       $preventUserSelect: preventUserSelect,
       $variant: variant,
       as: renderAs ?? variantElementMap[variant],
-      ...props
+      ...otherProps
     }
   )
 );
@@ -8597,8 +8524,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components39.default.div`
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components38.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -8611,7 +8538,7 @@ var StyledDataCard = import_styled_components39.default.div`
   border-radius: var(--wui-border-radius-02);
   position: relative;
 `;
-var shimmer = import_styled_components39.keyframes`
+var shimmer = import_styled_components38.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8619,7 +8546,7 @@ var shimmer = import_styled_components39.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components39.default.div`
+var LoadingBackground = import_styled_components38.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8630,27 +8557,27 @@ var LoadingBackground = import_styled_components39.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components39.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components38.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components39.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components38.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components39.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components38.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components39.default)(Heading)`
+var StyledValue = (0, import_styled_components38.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components39.default.div`
+var StyledSlot = import_styled_components38.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components39.default.div`
+var StyledDataCardTrendContainer = import_styled_components38.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8663,39 +8590,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (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 })
+      (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 })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components40 = __toESM(require("styled-components"));
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components40.default)(Box)`
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components39.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8709,7 +8636,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8727,25 +8654,25 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
 var import_react27 = require("react");
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components41.css`
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime214 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components40.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components41.css`
+var labelBoldStyles = import_styled_components40.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components41.css`
+var body1TextStyle = import_styled_components40.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);
@@ -8753,7 +8680,7 @@ var body1TextStyle = import_styled_components41.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components41.css`
+var body2TextStyle = import_styled_components40.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);
@@ -8761,7 +8688,7 @@ var body2TextStyle = import_styled_components41.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components41.css`
+var body3TextStyle = import_styled_components40.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);
@@ -8769,7 +8696,7 @@ var body3TextStyle = import_styled_components41.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components41.css`
+var body4TextStyle = import_styled_components40.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);
@@ -8777,47 +8704,47 @@ var body4TextStyle = import_styled_components41.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components41.css`
+var label1TextStyle = import_styled_components40.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_components41.css`
+var label2TextStyle = import_styled_components40.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_components41.css`
+var label3TextStyle = import_styled_components40.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_components41.css`
+var label4TextStyle = import_styled_components40.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_components41.css`
+var body1MonoTextStyle = import_styled_components40.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components41.css`
+var body2MonoTextStyle = import_styled_components40.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components41.css`
+var body3MonoTextStyle = import_styled_components40.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components41.css`
+var body4MonoTextStyle = import_styled_components40.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8852,7 +8779,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components41.default.div`
+var StyledText = import_styled_components40.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8876,19 +8803,19 @@ var StyledText = import_styled_components41.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components41.css`
+  ${({ $inline }) => $inline && import_styled_components40.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components41.css`
+  ${({ $disabled }) => $disabled && import_styled_components40.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components41.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components40.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components41.css`
+  ${({ $align }) => import_styled_components40.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components41.css`
+  ${({ as }) => as === "p" && import_styled_components40.css`
       display: block;
 
       + p {
@@ -8907,9 +8834,9 @@ var TextComponent = (0, import_react27.forwardRef)(
     prominence = "primary",
     variant = "body2",
     renderAs,
-    ...props
+    ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       StyledText,
       {
         ref,
@@ -8922,7 +8849,7 @@ var TextComponent = (0, import_react27.forwardRef)(
         $prominence: prominence,
         $variant: variant,
         as: renderAs ?? variantElementMap2[variant],
-        ...props
+        ...otherProps
       }
     );
   }
@@ -8931,8 +8858,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components42.default.div`
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components41.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8947,8 +8874,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       Icon,
       {
         size: "md",
@@ -8956,7 +8883,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -8968,22 +8895,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components43.css`
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components42.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_components43.css`
+var verticalBorderCss = import_styled_components42.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components43.default.div`
+var DividerComponent = import_styled_components42.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8994,35 +8921,38 @@ var DividerComponent = import_styled_components43.default.div`
   }
 }}
 `;
-var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+var Divider = ({
+  orientation = "horizontal",
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
       "aria-orientation": orientation,
       role: "separator",
-      ...props
+      ...otherProps
     }
   );
 };
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_styled_components46 = __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_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components44.css`
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components43.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_components44.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components43.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);
@@ -9081,14 +9011,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__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)(
+        /* @__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)(
           StyledContent,
           {
             $compact: compact,
@@ -9096,7 +9026,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9105,7 +9035,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  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" })
+                  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" })
                 }
               ) }) : null
             ]
@@ -9119,12 +9049,12 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 var import_react28 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_type_guards28 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
-var import_styled_components45 = require("styled-components");
-var inputCssVariables = import_styled_components45.css`
+var import_styled_components44 = require("styled-components");
+var inputCssVariables = import_styled_components44.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);
@@ -9141,8 +9071,8 @@ var inputCssVariables = import_styled_components45.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var inputStyles = import_styled_components46.css`
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var inputStyles = import_styled_components45.css`
   ${inputCssVariables}
   input,
   textarea {
@@ -9177,7 +9107,7 @@ var inputStyles = import_styled_components46.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components46.default.div`
+var StyledInputContainer = import_styled_components45.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9257,27 +9187,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_guards29.isNotNil)(externalRef) && (0, import_type_guards29.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards28.isNotNil)(externalRef) && (0, import_type_guards28.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards29.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
+    if ((0, import_type_guards28.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards29.isNotNil)(leftIconToDisplay)) {
+    if ((0, import_type_guards28.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react28.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards29.isNotNil)(rightIconToDisplay)) {
+    if ((0, import_type_guards28.isNotNil)(rightIconToDisplay)) {
       rightIconToDisplay = (0, import_react28.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards29.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards28.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9286,21 +9216,21 @@ var Input = (0, import_react28.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             "input",
             {
               ...props,
@@ -9318,8 +9248,8 @@ var Input = (0, import_react28.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components47.default)(Input)`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components46.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9339,7 +9269,7 @@ var StyledInput = (0, import_styled_components47.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components47.css`
+var editableStyles = import_styled_components46.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9349,7 +9279,7 @@ var editableStyles = import_styled_components47.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components47.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components46.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9403,7 +9333,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9417,7 +9347,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -9435,8 +9365,8 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_jsx_runtime219.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       Tooltip,
       {
         compact: true,
@@ -9444,7 +9374,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9457,15 +9387,15 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 var import_react31 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards30 = require("@wistia/type-guards");
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react30 = require("react");
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_jsx_runtime221 = require("react/jsx-runtime");
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components48.default.div`
+var StyledStack = import_styled_components47.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9476,7 +9406,7 @@ var StackComponent = (0, import_react30.forwardRef)(
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       StyledStack,
       {
         ref,
@@ -9493,8 +9423,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var StyledForm = import_styled_components49.default.form`
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var StyledForm = import_styled_components48.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9524,7 +9454,7 @@ var FormComponent = ({
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards30.isUndefined)(validate)) {
+    if ((0, import_type_guards29.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -9534,7 +9464,7 @@ var FormComponent = ({
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards30.isNotUndefined)(validate)) {
+    if ((0, import_type_guards29.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -9573,7 +9503,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       Stack,
       {
         ...props,
@@ -9631,10 +9561,10 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react33 = require("react");
-var import_type_guards31 = require("@wistia/type-guards");
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_type_guards30 = require("@wistia/type-guards");
+var import_jsx_runtime222 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react33.useRef)(null);
@@ -9643,10 +9573,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  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)(
+  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)(
         ErrorItem,
         {
           error: err,
@@ -9654,7 +9584,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9669,13 +9599,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react36 = require("react");
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_type_guards31 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components50.css`
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components49.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9683,10 +9613,10 @@ var requiredStyle = import_styled_components50.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components50.css`
+var disabledStyle3 = import_styled_components49.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components50.default.label`
+var StyledLabel3 = import_styled_components49.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9716,12 +9646,12 @@ var Label = ({
   htmlFor,
   required = false,
   screenReaderOnly = false,
-  ...props
+  ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     StyledLabel3,
     {
-      ...props,
+      ...otherProps,
       $disabled: disabled,
       $required: required,
       $screenReaderOnly: screenReaderOnly,
@@ -9736,25 +9666,25 @@ Label.displayName = "Label";
 var import_react35 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_react34 = require("react");
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components51.default.fieldset`
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components50.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components51.default.legend`
+var StyledLegend = import_styled_components50.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = (0, import_react34.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9770,7 +9700,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime226 = require("react/jsx-runtime");
+var import_jsx_runtime225 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react35.createContext)(null);
 var CheckboxGroup = ({
   children,
@@ -9785,13 +9715,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components52.default.div`
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components51.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);
@@ -9821,7 +9751,7 @@ var StyledFormField = import_styled_components52.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components52.default.ul`
+var StyledErrorList = import_styled_components51.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9830,8 +9760,8 @@ var StyledErrorList = import_styled_components52.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  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)(
+  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)(
     Text,
     {
       colorScheme: "error",
@@ -9841,7 +9771,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9880,19 +9810,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards32.isUndefined)(value) && (0, import_type_guards32.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards31.isUndefined)(value) && (0, import_type_guards31.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards32.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards32.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards31.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards31.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards32.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards31.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards32.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards31.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9900,22 +9830,22 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards32.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards31.isNotNil)(error)
     };
   }
   import_react36.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !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,
+        !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,
         (0, import_react36.cloneElement)(children, childProps),
-        (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)(
+        (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)(
             ErrorMessages,
             {
               errors: computedError,
@@ -9931,7 +9861,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react37 = require("react");
-var import_jsx_runtime228 = require("react/jsx-runtime");
+var import_jsx_runtime227 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react37.createContext)(null);
 var RadioGroup = ({
   children,
@@ -9946,15 +9876,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react38 = require("react");
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_jsx_runtime229 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components53.default)(Button)`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components52.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9971,7 +9901,7 @@ var StyledButton2 = (0, import_styled_components53.default)(Button)`
 var IconButton = (0, import_react38.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
       StyledButton2,
       {
         ...props,
@@ -9988,6 +9918,55 @@ 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,
+  ...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_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
@@ -10663,7 +10642,7 @@ var StyledModalContent = (0, import_styled_components61.default)(import_react_di
   }
 `;
 var ModalContent = (0, import_react45.forwardRef)(
-  ({ fullHeight, width, children, ...props }, ref) => {
+  ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
       StyledModalContent,
@@ -10672,7 +10651,7 @@ var ModalContent = (0, import_react45.forwardRef)(
         $fullHeight: fullHeight,
         $width: width,
         "aria-describedby": void 0,
-        ...props,
+        ...otherProps,
         children
       }
     );
@@ -11508,7 +11487,6 @@ Select.displayName = "Select";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react55 = require("react");
 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_components71.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -11538,24 +11516,21 @@ var StyledIconContainer = import_styled_components71.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react55.forwardRef)(
-  ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
+  ({ children, ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__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)(
+          /* @__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)(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          (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 })
+          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
         ]
       }
     );
@@ -11587,7 +11562,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Switch/Switch.tsx
 var import_react56 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
-var import_type_guards44 = require("@wistia/type-guards");
+var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components73.css`
   --wui-size-small-width: 24px;
@@ -11706,7 +11681,7 @@ var Switch = (0, import_react56.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
-    const computedId = (0, import_type_guards44.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards43.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,
@@ -11853,7 +11828,7 @@ 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_guards46 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 var import_styled_components84 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
@@ -11909,7 +11884,7 @@ TabList.displayName = "TabList";
 var import_react60 = require("react");
 var import_styled_components82 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react59 = require("react");
@@ -11967,8 +11942,8 @@ var TabItem = (0, import_react60.forwardRef)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards45.isNotNil)(label),
-        "aria-label": (0, import_type_guards45.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards44.isNotNil)(label),
+        "aria-label": (0, import_type_guards44.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12065,7 +12040,7 @@ var Tabs = (0, import_react63.forwardRef)(
     selectedValue,
     onSelectedValueChange,
     stickyHeaders = true,
-    ...props
+    ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
     const [internalSelectedValue, setInternalSelectedValue] = (0, import_react63.useState)(defaultSelectedValue);
@@ -12080,7 +12055,7 @@ var Tabs = (0, import_react63.forwardRef)(
         ref,
         $stickyHeaders: stickyHeaders,
         activationMode: "automatic",
-        ...props,
+        ...otherProps,
         ...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)(
@@ -12098,7 +12073,7 @@ var Tabs = (0, import_react63.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards46.isNil)(icon)) {
+                  if ((0, import_type_guards45.isNil)(icon)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12109,7 +12084,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards46.isNotNil)(label)) {
+                  if ((0, import_type_guards45.isNotNil)(label)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12121,7 +12096,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards46.isNotNil)(ariaLabelForTab)) {
+                  if ((0, import_type_guards45.isNotNil)(ariaLabelForTab)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12164,7 +12139,7 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 var import_react65 = require("react");
 var import_styled_components85 = __toESM(require("styled-components"));
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var import_jsx_runtime267 = require("react/jsx-runtime");
 var TagLabel = import_styled_components85.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12249,10 +12224,10 @@ var StyledTag = import_styled_components85.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards47.isNil)(onClickRemove)) {
+  if ((0, import_type_guards46.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards47.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards46.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12280,15 +12255,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
   ] });
 };
 var Tag = (0, import_react65.forwardRef)(
-  ({ 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" };
+  ({
+    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" };
     return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
-        ...props,
+        ...otherProps,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
             TagLabel,
@@ -12318,7 +12301,7 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components86 = __toESM(require("styled-components"));
-var import_type_guards48 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -12396,7 +12379,7 @@ var WistiaLogo = ({
   opticallyCentered = false,
   title = "Wistia Logo",
   variant = "standard",
-  ...props
+  ...otherProps
 }) => {
   const primaryColor = "#2949e5";
   const darkColor = "#000934";
@@ -12428,10 +12411,10 @@ var WistiaLogo = ({
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
-      ...props,
+      ...otherProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("title", { children: title }),
-        (0, import_type_guards48.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards47.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12443,7 +12426,7 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components87 = __toESM(require("styled-components"));
-var import_type_guards49 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var import_jsx_runtime269 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components87.default.div`
   align-items: center;
@@ -12469,9 +12452,13 @@ var StyledThumbnailBadge = import_styled_components87.default.div`
     }
   }
 `;
-var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards49.isNotNil)(icon) && icon,
+var ThumbnailBadge = ({
+  icon,
+  label,
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...otherProps, children: [
+    (0, import_type_guards48.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { children: label })
   ] });
 };
@@ -12480,10 +12467,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react66 = require("react");
 var import_styled_components89 = __toESM(require("styled-components"));
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards49 = require("@wistia/type-guards");
 var import_styled_components88 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components88.css`
@@ -12611,7 +12598,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards50.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards49.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12645,15 +12632,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 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;
+  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
   aspect-ratio: 16 / 9;
-  border-radius: var(--wui-border-radius-01);
+  background: ${({ $backgroundUrl }) => (0, import_type_guards50.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}') center / cover` : void 0};
+  border-radius: 4px;
   display: flex;
   overflow: hidden;
   position: relative;
@@ -12666,9 +12648,9 @@ var Thumbnail = (0, import_react66.forwardRef)(
     thumbnailUrl,
     width = "100%",
     children,
-    ...props
+    ...otherProps
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards51.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards50.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
       StyledThumbnail,
       {
@@ -12676,16 +12658,16 @@ var Thumbnail = (0, import_react66.forwardRef)(
         $backgroundUrl: backgroundUrl,
         $gradientBackground: gradientBackground,
         $width: width,
-        ...props,
+        ...otherProps,
         children: [
-          (0, import_type_guards51.isNotNil)(children) ? children : null,
-          (0, import_type_guards51.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          (0, import_type_guards50.isNotNil)(children) && children,
+          (0, import_type_guards50.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
             ThumbnailImage,
             {
               thumbnailImageType,
               thumbnailUrl
             }
-          ) : null
+          )
         ]
       }
     );