@wistia/ui 0.18.2 → 0.18.3-beta.5cd29926.116130d

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.2
+ * @license @wistia/ui v0.18.3-beta.5cd29926.116130d
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9183,11 +9183,90 @@ var Banner = ({
 };
 Banner.displayName = "Banner_UI";
 
+// src/components/Banner/BannerImage.tsx
+import { styled as styled17 } from "styled-components";
+import { jsx as jsx212 } from "react/jsx-runtime";
+var StyledBannerImageContainer = styled17.div`
+  --wui-banner-image-border-radius: var(--wui-border-radius-02);
+  --wui-banner-image-height: auto;
+  --wui-banner-image-width: auto;
+
+  overflow: hidden;
+  padding: var(--wui-space-04);
+  height: var(--wui-banner-image-height);
+  width: var(--wui-banner-image-width);
+  justify-self: stretch;
+  align-self: stretch;
+  max-width: 300px;
+
+  /* Make image container stretch full width in vertical layout and remove bottom padding */
+  [data-wui-banner-orientation='vertical'] & {
+    max-width: none;
+    width: 100%;
+    padding-bottom: var(--wui-space-00);
+  }
+
+  /* In horizontal layout, make image height equal to the content height and apply aspect ratio */
+  [data-wui-banner-orientation='horizontal'] & {
+    --wui-banner-image-height: calc(
+      var(--wui-banner-content-height) + (var(--wui-banner-padding) * 2)
+    );
+
+    /* Handle image alignment and remove padding next to content */
+    &[data-wui-banner-image='right'] {
+      padding-left: var(--wui-space-00);
+      order: 2;
+    }
+
+    &[data-wui-banner-image='left'] {
+      padding-right: var(--wui-space-00);
+    }
+  }
+
+  /* Remove border radius and padding in small prominence horizontal layout */
+  [data-wui-banner-content-prominence='small'] & {
+    --wui-banner-image-border-radius: var(--wui-border-radius-00);
+
+    padding: var(--wui-space-00);
+  }
+
+  /* Remove border radius in secondary prominence vertical layout */
+  [data-wui-banner-orientation='vertical'] [data-wui-banner-content-prominence='secondary'] & {
+    --wui-banner-image-border-radius: var(--wui-border-radius-00);
+  }
+
+  [data-wui-banner-orientation='horizontal'][data-wui-banner-content-prominence='small'] & {
+    flex: 0 0 25%;
+  }
+
+  img {
+    border-radius: var(--wui-banner-image-border-radius);
+  }
+`;
+var BannerImage = ({ alignment = "left", alt, src, ...props }) => {
+  return /* @__PURE__ */ jsx212(
+    StyledBannerImageContainer,
+    {
+      "data-wui-banner-image": alignment,
+      ...props,
+      children: /* @__PURE__ */ jsx212(
+        Image,
+        {
+          alt: alt ?? "",
+          fill: true,
+          fit: "cover",
+          src
+        }
+      )
+    }
+  );
+};
+
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
-import { styled as styled17 } from "styled-components";
-import { Fragment as Fragment4, jsx as jsx212, jsxs as jsxs14 } from "react/jsx-runtime";
-var StyledBreadcrumbs = styled17.nav`
+import { styled as styled18 } from "styled-components";
+import { Fragment as Fragment4, jsx as jsx213, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled18.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -9206,7 +9285,7 @@ var Breadcrumbs = ({ children, ...props }) => {
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
   return /* @__PURE__ */ jsxs14(Fragment4, { children: [
-    /* @__PURE__ */ jsx212("style", { type: "text/css", children: `
+    /* @__PURE__ */ jsx213("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
           container-name: breadcrumbs;
@@ -9218,7 +9297,7 @@ var Breadcrumbs = ({ children, ...props }) => {
           }
         }
      ` }),
-    /* @__PURE__ */ jsx212(
+    /* @__PURE__ */ jsx213(
       StyledBreadcrumbs,
       {
         "aria-label": "Breadcrumbs",
@@ -9232,9 +9311,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import { styled as styled18 } from "styled-components";
-import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs15 } from "react/jsx-runtime";
-var BreadcrumbContent = styled18.span`
+import { styled as styled19 } from "styled-components";
+import { Fragment as Fragment5, jsx as jsx214, jsxs as jsxs15 } from "react/jsx-runtime";
+var BreadcrumbContent = styled19.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -9244,17 +9323,17 @@ var BreadcrumbContent = styled18.span`
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
   return /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    /* @__PURE__ */ jsx213(
+    /* @__PURE__ */ jsx214(
       Button,
       {
         ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
-        children: /* @__PURE__ */ jsx213(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
+        children: /* @__PURE__ */ jsx214(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
       }
     ),
-    /* @__PURE__ */ jsx213("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx213(
+    /* @__PURE__ */ jsx214("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx214(
       Icon,
       {
         size: "sm",
@@ -9266,9 +9345,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/Card/Card.tsx
-import { styled as styled19 } from "styled-components";
-import { jsx as jsx214 } from "react/jsx-runtime";
-var StyledCard = styled19(Box)`
+import { styled as styled20 } from "styled-components";
+import { jsx as jsx215 } from "react/jsx-runtime";
+var StyledCard = styled20(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -9306,7 +9385,7 @@ var Card = ({
   prominence = "secondary",
   width,
   ...props
-}) => /* @__PURE__ */ jsx214(
+}) => /* @__PURE__ */ jsx215(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -9326,9 +9405,9 @@ Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { styled as styled20 } from "styled-components";
-import { jsx as jsx215 } from "react/jsx-runtime";
-var StyledCenter = styled20.div`
+import { styled as styled21 } from "styled-components";
+import { jsx as jsx216 } from "react/jsx-runtime";
+var StyledCenter = styled21.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -9341,7 +9420,7 @@ var StyledCenter = styled20.div`
   `}
 `;
 var Center = forwardRef9(
-  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx215(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx216(
     StyledCenter,
     {
       ref,
@@ -9358,18 +9437,18 @@ Center.displayName = "Center_UI";
 // src/components/Checkbox/Checkbox.tsx
 import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
-import { styled as styled27, css as css26 } from "styled-components";
+import { styled as styled28, css as css26 } from "styled-components";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { isNil as isNil13, isNotNil as isNotNil15 } from "@wistia/type-guards";
-import { styled as styled23, css as css25 } from "styled-components";
+import { styled as styled24, css as css25 } from "styled-components";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import { styled as styled21 } from "styled-components";
+import { styled as styled22 } from "styled-components";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
-import { jsx as jsx216 } from "react/jsx-runtime";
-var VisuallyHidden = styled21.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled21.div({
+import { jsx as jsx217 } from "react/jsx-runtime";
+var VisuallyHidden = styled22.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled22.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -9380,20 +9459,20 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil14(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx216(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
+    return /* @__PURE__ */ jsx217(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx216(VisuallyHidden, { ...props, children: accessibleText });
+  return /* @__PURE__ */ jsx217(VisuallyHidden, { ...props, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import { styled as styled22, css as css24 } from "styled-components";
+import { styled as styled23, css as css24 } from "styled-components";
 import { isNil as isNil12 } from "@wistia/type-guards";
-import { jsx as jsx217 } from "react/jsx-runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
 var disabledStyle = css24`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = styled22.div`
+var StyledFormControlLabelDescription = styled23.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -9410,7 +9489,7 @@ var FormControlLabelDescription = ({
   if (isNil12(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsx218(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -9422,16 +9501,16 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import { jsx as jsx218, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs16 } from "react/jsx-runtime";
 var disabledStyle2 = css25`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = styled23.div`
+var StyledLabelWrapper = styled24.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = styled23.label`
+var StyledFormControlLabel = styled24.label`
   cursor: pointer;
   display: flex;
   align-items: flex-start;
@@ -9458,9 +9537,9 @@ var FormControlLabel = ({
   if (isNil13(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ jsx218(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs16(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ jsx219(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs16(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ jsx218(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ jsx219(FormControlLabelDescription, { children: description })
   ] });
   const slot = isNotNil15(controlSlot) ? controlSlot : null;
   return /* @__PURE__ */ jsxs16(
@@ -9484,16 +9563,16 @@ import { createContext as createContext4, useMemo as useMemo7, useContext as use
 import { isArray } from "@wistia/type-guards";
 
 // src/components/FormGroup/FormGroup.tsx
-import { styled as styled25 } from "styled-components";
+import { styled as styled26 } from "styled-components";
 import { useRef as useRef7 } from "react";
 import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { styled as styled24 } from "styled-components";
-import { jsx as jsx219 } from "react/jsx-runtime";
+import { styled as styled25 } from "styled-components";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = styled24.div`
+var StyledStack = styled25.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9504,7 +9583,7 @@ var StackComponent = forwardRef10(
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ jsx219(
+    return /* @__PURE__ */ jsx220(
       StyledStack,
       {
         ref,
@@ -9521,13 +9600,13 @@ StackComponent.displayName = "Stack_UI";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
-import { jsx as jsx220, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledFieldset = styled25.fieldset`
+import { jsx as jsx221, jsxs as jsxs17 } from "react/jsx-runtime";
+var StyledFieldset = styled26.fieldset`
   padding: 0;
   margin: 0;
   border: 0;
 `;
-var StyledLegend = styled25.legend`
+var StyledLegend = styled26.legend`
   padding-inline: 0;
   display: flex;
   flex-direction: column;
@@ -9557,7 +9636,7 @@ var FormGroup = ({
             variant: "heading5",
             children: [
               hasLabel ? label : null,
-              hasDescription ? /* @__PURE__ */ jsx220(
+              hasDescription ? /* @__PURE__ */ jsx221(
                 Text,
                 {
                   "data-wui-form-group-description": true,
@@ -9579,7 +9658,7 @@ FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState11, useId } from "react";
-import { styled as styled26 } from "styled-components";
+import { styled as styled27 } from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Form/serializeFormData.tsx
@@ -9598,8 +9677,8 @@ var serializeFormData = (formData) => {
 };
 
 // src/components/Form/Form.tsx
-import { jsx as jsx221 } from "react/jsx-runtime";
-var StyledForm = styled26.form`
+import { jsx as jsx222 } from "react/jsx-runtime";
+var StyledForm = styled27.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9678,7 +9757,7 @@ var Form = forwardRef11(
     }, [labelPosition, values, errors, id, hasSubmitted]);
     return (
       // @ts-expect-error - generic context providers are a giant pain
-      /* @__PURE__ */ jsx221(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx221(
+      /* @__PURE__ */ jsx222(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx222(
         Stack,
         {
           ...props,
@@ -9699,7 +9778,7 @@ var Form = forwardRef11(
 );
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx223 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext4(null);
 var useCheckboxGroup = () => {
   return useContext3(CheckboxGroupContext);
@@ -9720,13 +9799,13 @@ var CheckboxGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ jsx222(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx222(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx223(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx223(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup_UI";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx223, jsxs as jsxs18 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx223(
+import { jsx as jsx224, jsxs as jsxs18 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx224(
   "svg",
   {
     fill: "inherit",
@@ -9734,7 +9813,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx223(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx223(
+    children: /* @__PURE__ */ jsx224(
       "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",
@@ -9760,7 +9839,7 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled27.div`
+var StyledCheckboxWrapper = styled28.div`
   --wui-checkbox-background-color: var(--wui-color-bg-surface);
   --wui-checkbox-border-color: var(--wui-color-border-secondary);
   --wui-checkbox-icon-color: transparent;
@@ -9797,7 +9876,7 @@ var StyledCheckboxWrapper = styled27.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled27.div`
+var StyledCheckboxInput = styled28.div`
   ${({ $size }) => getSizeCss($size)}
   margin: 0;
   border-radius: var(--wui-border-radius-01);
@@ -9824,7 +9903,7 @@ var StyledCheckboxInput = styled27.div`
     height: var(--wui-checkbox-icon-size);
   }
 `;
-var StyledHiddenCheckboxInput = styled27.input`
+var StyledHiddenCheckboxInput = styled28.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
@@ -9858,7 +9937,7 @@ var Checkbox = forwardRef12(
         $hideLabel: hideLabel,
         disabled,
         children: [
-          /* @__PURE__ */ jsx223(
+          /* @__PURE__ */ jsx224(
             StyledHiddenCheckboxInput,
             {
               ...props,
@@ -9873,16 +9952,16 @@ var Checkbox = forwardRef12(
               value
             }
           ),
-          /* @__PURE__ */ jsx223(
+          /* @__PURE__ */ jsx224(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx223(
+              controlSlot: /* @__PURE__ */ jsx224(
                 StyledCheckboxInput,
                 {
                   $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx223(CheckIcon, {})
+                  children: /* @__PURE__ */ jsx224(CheckIcon, {})
                 }
               ),
               description,
@@ -9945,9 +10024,9 @@ ClickRegion.displayName = "ClickRegion_UI";
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil17 } from "@wistia/type-guards";
-import { styled as styled28 } from "styled-components";
-import { jsx as jsx224 } from "react/jsx-runtime";
-var StyledRoot = styled28(CollapsibleRoot)`
+import { styled as styled29 } from "styled-components";
+import { jsx as jsx225 } from "react/jsx-runtime";
+var StyledRoot = styled29(CollapsibleRoot)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -9963,16 +10042,16 @@ var Collapsible = ({
   const controlProps = {
     ...isNotNil17(onOpenChange) && isNotNil17(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx224(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx225(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible_UI";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { styled as styled29 } from "styled-components";
-import { jsx as jsx225 } from "react/jsx-runtime";
-var StyledTrigger = styled29(Trigger)`
+import { styled as styled30 } from "styled-components";
+import { jsx as jsx226 } from "react/jsx-runtime";
+var StyledTrigger = styled30(Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -9995,11 +10074,11 @@ var StyledTrigger = styled29(Trigger)`
 `;
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx225(StyledTrigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx226(StyledTrigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleTriggerIcon.tsx
-import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx227 } from "react/jsx-runtime";
 var iconRotationMap = {
   "caret-left-strong": "-90",
   "caret-left": "-90",
@@ -10008,7 +10087,7 @@ var iconRotationMap = {
   plus: "45"
 };
 var CollapsibleTriggerIcon = ({ type, ...props }) => {
-  return /* @__PURE__ */ jsx226(
+  return /* @__PURE__ */ jsx227(
     Icon,
     {
       ...props,
@@ -10021,16 +10100,16 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import { styled as styled30 } from "styled-components";
+import { styled as styled31 } from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx227, jsxs as jsxs19 } from "react/jsx-runtime";
-var ClampedContent = styled30.div`
+import { Fragment as Fragment6, jsx as jsx228, jsxs as jsxs19 } from "react/jsx-runtime";
+var ClampedContent = styled31.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined8(clamp)) {
-    return /* @__PURE__ */ jsx227(
+    return /* @__PURE__ */ jsx228(
       ClampedContent,
       {
         $clamp: clamp,
@@ -10039,7 +10118,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx227(Content, { children: /* @__PURE__ */ jsxs19(Fragment6, { children: [
+  return /* @__PURE__ */ jsx228(Content, { children: /* @__PURE__ */ jsxs19(Fragment6, { children: [
     children,
     " "
   ] }) });
@@ -10047,7 +10126,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 import { useCallback as useCallback10 } from "react";
-import { styled as styled32 } from "styled-components";
+import { styled as styled33 } from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
@@ -10440,7 +10519,7 @@ var hasAccessibleDerivatives = ({
 };
 
 // src/components/ColorPicker/ColorPickerContext.tsx
-import { jsx as jsx228 } from "react/jsx-runtime";
+import { jsx as jsx229 } from "react/jsx-runtime";
 var ColorPickerContext = createContext5(null);
 var ColorPickerProvider = ({
   children,
@@ -10581,7 +10660,7 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  return /* @__PURE__ */ jsx228(ColorPickerContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx229(ColorPickerContext.Provider, { value: contextValue, children });
 };
 var useColorPickerState = () => {
   const context = useContext4(ColorPickerContext);
@@ -10592,8 +10671,8 @@ var useColorPickerState = () => {
 };
 
 // src/components/Label/Label.tsx
-import { styled as styled31, css as css27 } from "styled-components";
-import { jsx as jsx229 } from "react/jsx-runtime";
+import { styled as styled32, css as css27 } from "styled-components";
+import { jsx as jsx230 } from "react/jsx-runtime";
 var requiredStyle = css27`
   &::after {
     color: var(--wui-color-text-error);
@@ -10605,7 +10684,7 @@ var requiredStyle = css27`
 var disabledStyle3 = css27`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled31.label`
+var StyledLabel2 = styled32.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -10637,7 +10716,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx229(
+  return /* @__PURE__ */ jsx230(
     StyledLabel2,
     {
       ...props,
@@ -10652,16 +10731,16 @@ var Label = ({
 Label.displayName = "Label_UI";
 
 // src/components/ColorPicker/ColorGrid.tsx
-import { jsx as jsx230, jsxs as jsxs20 } from "react/jsx-runtime";
-var Container = styled32.div`
+import { jsx as jsx231, jsxs as jsxs20 } from "react/jsx-runtime";
+var Container = styled33.div`
   display: grid;
   gap: var(--wui-space-01);
   grid-template-columns: minmax(0, 1fr);
 `;
-var LabelContainer = styled32.div`
+var LabelContainer = styled33.div`
   padding-top: var(--wui-space-01);
 `;
-var ItemsContainer = styled32(RadioGroupRoot)`
+var ItemsContainer = styled33(RadioGroupRoot)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -10679,8 +10758,8 @@ var ColorGrid = ({ children, label }) => {
     [onChangeNonDerivedValueAsHsv]
   );
   return /* @__PURE__ */ jsxs20(Container, { children: [
-    label != null && /* @__PURE__ */ jsx230(LabelContainer, { children: /* @__PURE__ */ jsx230(Label, { children: label }) }),
-    /* @__PURE__ */ jsx230(
+    label != null && /* @__PURE__ */ jsx231(LabelContainer, { children: /* @__PURE__ */ jsx231(Label, { children: label }) }),
+    /* @__PURE__ */ jsx231(
       ItemsContainer,
       {
         onValueChange,
@@ -10693,14 +10772,14 @@ var ColorGrid = ({ children, label }) => {
 ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import { styled as styled35 } from "styled-components";
+import { styled as styled36 } from "styled-components";
 import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
 import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
-import { styled as styled33 } from "styled-components";
-import { jsx as jsx231, jsxs as jsxs21 } from "react/jsx-runtime";
-var ColorSwatchDiv = styled33.div`
+import { styled as styled34 } from "styled-components";
+import { jsx as jsx232, jsxs as jsxs21 } from "react/jsx-runtime";
+var ColorSwatchDiv = styled34.div`
   aspect-ratio: 1;
   width: ${({ $diameterPx }) => `${$diameterPx}px`};
   border-radius: var(--wui-border-radius-rounded);
@@ -10719,7 +10798,7 @@ var ColorSwatchDiv = styled33.div`
   outline-offset: 2px;
   transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
 `;
-var DerivativeHalfCircle = styled33.div`
+var DerivativeHalfCircle = styled34.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -10747,7 +10826,7 @@ var ColorSwatch = ({
         backgroundColor: value
       },
       children: [
-        derivativeIsSelected ? /* @__PURE__ */ jsx231(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
+        derivativeIsSelected ? /* @__PURE__ */ jsx232(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
         children
       ]
     }
@@ -10762,8 +10841,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import { styled as styled34, keyframes } from "styled-components";
-import { jsx as jsx232, jsxs as jsxs22 } from "react/jsx-runtime";
+import { styled as styled35, keyframes } from "styled-components";
+import { jsx as jsx233, jsxs as jsxs22 } from "react/jsx-runtime";
 var hide = keyframes`
   from {
     opacity: 1;
@@ -10812,7 +10891,7 @@ var slideRightAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled34(TooltipContent)`
+var StyledContent = styled35(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -10881,15 +10960,15 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx232(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx232(TooltipPortal, { container, children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx233(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx233(TooltipPortal, { container, children: /* @__PURE__ */ jsxs22(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx232(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx232(
+              !hideArrow ? /* @__PURE__ */ jsx233(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx233(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -10898,7 +10977,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx232("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__ */ jsx233("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
             ]
@@ -10911,8 +10990,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import { jsx as jsx233 } from "react/jsx-runtime";
-var Container2 = styled35(RadioGroupItem)`
+import { jsx as jsx234 } from "react/jsx-runtime";
+var Container2 = styled36(RadioGroupItem)`
   border: none;
   appearance: none;
   outline: none;
@@ -10928,11 +11007,11 @@ var ColorGridOption = ({ value: rawValue, name }) => {
   const valueAsHex = formatHex3(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsx234(
     Tooltip,
     {
-      content: name ?? /* @__PURE__ */ jsx233("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
-      children: /* @__PURE__ */ jsx233(
+      content: name ?? /* @__PURE__ */ jsx234("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
+      children: /* @__PURE__ */ jsx234(
         Container2,
         {
           "aria-label": value,
@@ -10940,7 +11019,7 @@ var ColorGridOption = ({ value: rawValue, name }) => {
           role: "option",
           tabIndex: -1,
           value,
-          children: /* @__PURE__ */ jsx233(
+          children: /* @__PURE__ */ jsx234(
             ColorSwatch,
             {
               derivativeIsSelected,
@@ -10957,10 +11036,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 import { useCallback as useCallback11 } from "react";
-import { styled as styled36 } from "styled-components";
+import { styled as styled37 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
-import { jsx as jsx234 } from "react/jsx-runtime";
-var Container3 = styled36(ToggleGroupRoot)`
+import { jsx as jsx235 } from "react/jsx-runtime";
+var Container3 = styled37(ToggleGroupRoot)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `;
@@ -10976,7 +11055,7 @@ var ColorList = ({ children }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsx234(
+  return /* @__PURE__ */ jsx235(
     Container3,
     {
       onValueChange,
@@ -10989,18 +11068,18 @@ var ColorList = ({ children }) => {
 ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
-import { styled as styled37 } from "styled-components";
-import { jsx as jsx235, jsxs as jsxs23 } from "react/jsx-runtime";
-var Container4 = styled37.div`
+import { styled as styled38 } from "styled-components";
+import { jsx as jsx236, jsxs as jsxs23 } from "react/jsx-runtime";
+var Container4 = styled38.div`
   display: grid;
   gap: var(--wui-space-01);
   grid-template-columns: minmax(0, 1fr);
 `;
-var ItemsContainer2 = styled37.div`
+var ItemsContainer2 = styled38.div`
   display: flex;
   flex-direction: column;
 `;
-var LabelContainer2 = styled37.div`
+var LabelContainer2 = styled38.div`
   padding-top: var(--wui-space-01);
 `;
 var ColorListGroup = ({ label, children }) => {
@@ -11010,8 +11089,8 @@ var ColorListGroup = ({ label, children }) => {
       "aria-label": label,
       role: "group",
       children: [
-        /* @__PURE__ */ jsx235(LabelContainer2, { children: /* @__PURE__ */ jsx235(Label, { children: label }) }),
-        /* @__PURE__ */ jsx235(ItemsContainer2, { children })
+        /* @__PURE__ */ jsx236(LabelContainer2, { children: /* @__PURE__ */ jsx236(Label, { children: label }) }),
+        /* @__PURE__ */ jsx236(ItemsContainer2, { children })
       ]
     }
   );
@@ -11019,12 +11098,12 @@ var ColorListGroup = ({ label, children }) => {
 ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
-import { styled as styled38 } from "styled-components";
+import { styled as styled39 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { formatHex as formatHex4 } from "culori/fn";
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
-import { jsx as jsx236, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx237, jsxs as jsxs24 } from "react/jsx-runtime";
 var ColorNameOrHexCode = ({ name, hexCode }) => {
   return /* @__PURE__ */ jsxs24(
     Box,
@@ -11034,7 +11113,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
       grow: 1,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           Text,
           {
             renderAs: "span",
@@ -11042,7 +11121,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
             children: name ?? hexCode
           }
         ),
-        name != null && /* @__PURE__ */ jsx236(
+        name != null && /* @__PURE__ */ jsx237(
           Text,
           {
             prominence: "secondary",
@@ -11057,8 +11136,8 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 };
 
 // src/components/ColorPicker/ColorListOption.tsx
-import { jsx as jsx237, jsxs as jsxs25 } from "react/jsx-runtime";
-var Container5 = styled38(ToggleGroupItem)`
+import { jsx as jsx238, jsxs as jsxs25 } from "react/jsx-runtime";
+var Container5 = styled39(ToggleGroupItem)`
   border: none;
   appearance: none;
   outline: none;
@@ -11095,7 +11174,7 @@ var ColorListOption = ({ value: rawValue, name }) => {
       tabIndex: -1,
       value,
       children: [
-        /* @__PURE__ */ jsx237(
+        /* @__PURE__ */ jsx238(
           ColorSwatch,
           {
             derivativeIsSelected,
@@ -11103,7 +11182,7 @@ var ColorListOption = ({ value: rawValue, name }) => {
             value
           }
         ),
-        /* @__PURE__ */ jsx237(
+        /* @__PURE__ */ jsx238(
           ColorNameOrHexCode,
           {
             hexCode: value,
@@ -11118,7 +11197,7 @@ ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 import { Root as PopoverRoot } from "@radix-ui/react-popover";
-import { jsx as jsx238 } from "react/jsx-runtime";
+import { jsx as jsx239 } from "react/jsx-runtime";
 var ColorPicker = ({
   children,
   colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
@@ -11127,7 +11206,7 @@ var ColorPicker = ({
   onValueChange,
   value
 }) => {
-  return /* @__PURE__ */ jsx238(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx239(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx239(
     ColorPickerProvider,
     {
       colorForComparison,
@@ -11143,9 +11222,9 @@ ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
-import { styled as styled39 } from "styled-components";
-import { jsx as jsx239 } from "react/jsx-runtime";
-var StyledPopoverContent = styled39(PopoverContent)`
+import { styled as styled40 } from "styled-components";
+import { jsx as jsx240 } from "react/jsx-runtime";
+var StyledPopoverContent = styled40(PopoverContent)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -11160,7 +11239,7 @@ var StyledPopoverContent = styled39(PopoverContent)`
 var ColorPickerPopoverContent = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx239(PopoverPortal, { children: /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsx240(PopoverPortal, { children: /* @__PURE__ */ jsx240(
     StyledPopoverContent,
     {
       align: "start",
@@ -11172,28 +11251,28 @@ var ColorPickerPopoverContent = ({
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
-import { styled as styled40 } from "styled-components";
-import { jsx as jsx240 } from "react/jsx-runtime";
-var Container6 = styled40.div`
+import { styled as styled41 } from "styled-components";
+import { jsx as jsx241 } from "react/jsx-runtime";
+var Container6 = styled41.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
-  return /* @__PURE__ */ jsx240(Container6, { children: /* @__PURE__ */ jsx240(Stack, { children }) });
+  return /* @__PURE__ */ jsx241(Container6, { children: /* @__PURE__ */ jsx241(Stack, { children }) });
 };
 ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { Trigger as PopoverTrigger } from "@radix-ui/react-popover";
-import { styled as styled41 } from "styled-components";
+import { styled as styled42 } from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
-import { jsx as jsx241 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 var ValueSwatch = ({
   diameterPx = DEFAULT_SWATCH_DIAMETER_PX
 }) => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx241(
+  return /* @__PURE__ */ jsx242(
     ColorSwatch,
     {
       diameterPx,
@@ -11204,16 +11283,16 @@ var ValueSwatch = ({
 ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
-import { jsx as jsx242 } from "react/jsx-runtime";
+import { jsx as jsx243 } from "react/jsx-runtime";
 var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx242(ColorNameOrHexCode, { hexCode: valueAsHex });
+  return /* @__PURE__ */ jsx243(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
-import { jsx as jsx243, jsxs as jsxs26 } from "react/jsx-runtime";
-var StyledPopoverTrigger = styled41(PopoverTrigger)`
+import { jsx as jsx244, jsxs as jsxs26 } from "react/jsx-runtime";
+var StyledPopoverTrigger = styled42(PopoverTrigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
@@ -11224,7 +11303,7 @@ var StyledPopoverTrigger = styled41(PopoverTrigger)`
     background-color: var(--wui-color-bg-surface-hover);
   }
 `;
-var DefaultTriggerContentContainer = styled41.div`
+var DefaultTriggerContentContainer = styled42.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -11233,18 +11312,18 @@ var DefaultTriggerContentContainer = styled41.div`
 `;
 var DefaultTriggerContent = () => {
   return /* @__PURE__ */ jsxs26(DefaultTriggerContentContainer, { children: [
-    /* @__PURE__ */ jsx243(ValueSwatch, {}),
-    /* @__PURE__ */ jsx243(ValueNameOrHexCode, {})
+    /* @__PURE__ */ jsx244(ValueSwatch, {}),
+    /* @__PURE__ */ jsx244(ValueNameOrHexCode, {})
   ] });
 };
 var ColorPickerTrigger = forwardRef13(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx243(
+    return /* @__PURE__ */ jsx244(
       StyledPopoverTrigger,
       {
         ref: forwardedRef,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx243(DefaultTriggerContent, {})
+        children: children ?? /* @__PURE__ */ jsx244(DefaultTriggerContent, {})
       }
     );
   }
@@ -11252,9 +11331,9 @@ var ColorPickerTrigger = forwardRef13(
 ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
-import { styled as styled42 } from "styled-components";
-import { jsx as jsx244, jsxs as jsxs27 } from "react/jsx-runtime";
-var Container7 = styled42.div`
+import { styled as styled43 } from "styled-components";
+import { jsx as jsx245, jsxs as jsxs27 } from "react/jsx-runtime";
+var Container7 = styled43.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -11267,7 +11346,7 @@ var ContrastIndicator = () => {
   const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
   const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
   const label = /* @__PURE__ */ jsxs27("div", { children: [
-    /* @__PURE__ */ jsx244(
+    /* @__PURE__ */ jsx245(
       Text,
       {
         renderAs: "span",
@@ -11288,19 +11367,19 @@ var ContrastIndicator = () => {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx244(Container7, { children: isContrastSufficient ? /* @__PURE__ */ jsx244(
+  return /* @__PURE__ */ jsx245(Container7, { children: isContrastSufficient ? /* @__PURE__ */ jsx245(
     Badge,
     {
       colorScheme: "success",
-      icon: /* @__PURE__ */ jsx244(Icon, { type: "checkmark" }),
+      icon: /* @__PURE__ */ jsx245(Icon, { type: "checkmark" }),
       label,
       variant: "outline"
     }
-  ) : /* @__PURE__ */ jsx244(
+  ) : /* @__PURE__ */ jsx245(
     Badge,
     {
       colorScheme: "warning",
-      icon: /* @__PURE__ */ jsx244(Icon, { type: "error" }),
+      icon: /* @__PURE__ */ jsx245(Icon, { type: "error" }),
       label,
       variant: "outline"
     }
@@ -11312,9 +11391,9 @@ import { useCallback as useCallback12 } from "react";
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
-import { styled as styled43, css as css28 } from "styled-components";
+import { styled as styled44, css as css28 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx245, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs28 } from "react/jsx-runtime";
 var switchHeightMap = {
   sm: 16,
   md: 20,
@@ -11323,7 +11402,7 @@ var switchHeightMap = {
 var getSizeCss2 = (size) => css28`
   --wui-switch-height: ${switchHeightMap[size]}px;
 `;
-var StyledSwitchWrapper = styled43.div`
+var StyledSwitchWrapper = styled44.div`
   ${({ $size }) => getSizeCss2($size)}
   --wui-switch-border-offset: 2px;
   --wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
@@ -11357,7 +11436,7 @@ var StyledSwitchWrapper = styled43.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchTrack = styled43.div`
+var StyledSwitchTrack = styled44.div`
   width: var(--wui-switch-width);
   height: var(--wui-switch-height);
   min-width: var(--wui-switch-width);
@@ -11375,7 +11454,7 @@ var StyledSwitchTrack = styled43.div`
   background-color: var(--wui-switch-background-color);
   margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
 `;
-var StyledSwitchThumb = styled43.div`
+var StyledSwitchThumb = styled44.div`
   border-radius: var(--wui-border-radius-rounded);
   background-color: var(--wui-switch-thumb-color);
   transition:
@@ -11385,7 +11464,7 @@ var StyledSwitchThumb = styled43.div`
   height: var(--wui-switch-thumb-size);
   margin-left: var(--wui-switch-thumb-position);
 `;
-var StyledHiddenSwitchInput = styled43.input`
+var StyledHiddenSwitchInput = styled44.input`
   ${visuallyHiddenStyle}
 `;
 var Switch = forwardRef14(
@@ -11413,7 +11492,7 @@ var Switch = forwardRef14(
         $hideLabel: hideLabel,
         $size: size,
         children: [
-          /* @__PURE__ */ jsx245(
+          /* @__PURE__ */ jsx246(
             StyledHiddenSwitchInput,
             {
               ...props,
@@ -11428,16 +11507,16 @@ var Switch = forwardRef14(
               value
             }
           ),
-          /* @__PURE__ */ jsx245(
+          /* @__PURE__ */ jsx246(
             FormControlLabel,
             {
               align,
-              controlSlot: /* @__PURE__ */ jsx245(
+              controlSlot: /* @__PURE__ */ jsx246(
                 StyledSwitchTrack,
                 {
                   "data-testid": "wui-faux-input",
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx245(StyledSwitchThumb, {})
+                  children: /* @__PURE__ */ jsx246(StyledSwitchThumb, {})
                 }
               ),
               description,
@@ -11455,7 +11534,7 @@ var Switch = forwardRef14(
 Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
-import { jsx as jsx246 } from "react/jsx-runtime";
+import { jsx as jsx247 } from "react/jsx-runtime";
 var ContrastEnforcerSwitch = () => {
   const { setShouldEnforceMinContrast, shouldEnforceMinContrast, hasAccessibleDerivatives: hasAccessibleDerivatives2 } = useColorPickerState();
   const onChangeContrastLimitedSwitch = useCallback12(
@@ -11471,7 +11550,7 @@ var ContrastEnforcerSwitch = () => {
   if (!hasAccessibleDerivatives2) {
     return null;
   }
-  return /* @__PURE__ */ jsx246(
+  return /* @__PURE__ */ jsx247(
     Switch,
     {
       align: "right",
@@ -11483,21 +11562,21 @@ var ContrastEnforcerSwitch = () => {
 };
 
 // src/components/ColorPicker/ContrastPreview.tsx
-import { jsx as jsx247 } from "react/jsx-runtime";
+import { jsx as jsx248 } from "react/jsx-runtime";
 var ContrastPreview = () => {
   const { valueAsHex, colorForComparison } = useColorPickerState();
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx248(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ jsx247(Text, { style: { color: colorForComparison }, children: "Aa" })
+      children: /* @__PURE__ */ jsx248(Text, { style: { color: colorForComparison }, children: "Aa" })
     }
   );
 };
 
 // src/components/ColorPicker/ContrastControls.tsx
-import { jsx as jsx248, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs29 } from "react/jsx-runtime";
 var ContrastControls = () => {
   return /* @__PURE__ */ jsxs29(Stack, { children: [
     /* @__PURE__ */ jsxs29(
@@ -11507,12 +11586,12 @@ var ContrastControls = () => {
         direction: "row",
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ jsx248(ContrastPreview, {}),
-          /* @__PURE__ */ jsx248(ContrastIndicator, {})
+          /* @__PURE__ */ jsx249(ContrastPreview, {}),
+          /* @__PURE__ */ jsx249(ContrastIndicator, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx248(ContrastEnforcerSwitch, {})
+    /* @__PURE__ */ jsx249(ContrastEnforcerSwitch, {})
   ] });
 };
 ContrastControls.displayName = "ContrastControls_UI";
@@ -11523,7 +11602,7 @@ import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
 import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
-import { styled as styled44, css as css30 } from "styled-components";
+import { styled as styled45, css as css30 } from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/inputCss.ts
@@ -11554,7 +11633,7 @@ var inputCss = css29`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx249, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs30 } from "react/jsx-runtime";
 var inputStyles = css30`
   ${inputCss}
   input,
@@ -11596,7 +11675,7 @@ var inputStyles = css30`
   }
 `;
 var calculateTextareaHeight = (rows = 1) => `calc((var(--wui-input-line-height) * ${rows}) + (var(--wui-input-vertical-padding) * 2));`;
-var StyledInputContainer = styled44.div`
+var StyledInputContainer = styled45.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -11721,7 +11800,7 @@ var Input = forwardRef15(
     const ref = isNotNil18(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil14(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx249(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx250(Icon, { type: "search" });
     }
     if (isNotNil18(leftIconToDisplay) && isValidElement2(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
@@ -11756,14 +11835,14 @@ var Input = forwardRef15(
         "data-wui-input-container": true,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx249(
+          type === "multiline" ? /* @__PURE__ */ jsx250(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx249(
+          ) : /* @__PURE__ */ jsx250(
             "input",
             {
               ...props,
@@ -11781,7 +11860,7 @@ var Input = forwardRef15(
 Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { jsx as jsx250 } from "react/jsx-runtime";
+import { jsx as jsx251 } from "react/jsx-runtime";
 var SIX_DIGIT_HEX_CODE_LENGTH = 7;
 var isValidHexChar = (char) => {
   return /^[0-9a-fA-F]$/.test(char);
@@ -11921,7 +12000,7 @@ var HexColorInput = ({ autoFocus = true }) => {
   useEffect11(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
-  return /* @__PURE__ */ jsx250(
+  return /* @__PURE__ */ jsx251(
     Input,
     {
       ref: inputRef,
@@ -11950,15 +12029,15 @@ import {
   Track as SliderTrack,
   Thumb as SliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled46 } from "styled-components";
+import { styled as styled47 } from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 import { useEffect as useEffect12, useRef as useRef11 } from "react";
-import { styled as styled45 } from "styled-components";
+import { styled as styled46 } from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
-import { jsx as jsx251 } from "react/jsx-runtime";
-var Canvas = styled45.canvas`
+import { jsx as jsx252 } from "react/jsx-runtime";
+var Canvas = styled46.canvas`
   display: block;
   height: 100%;
   width: 100%;
@@ -11986,7 +12065,7 @@ var HSVHueCanvas = ({ hsv }) => {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, width, height);
   }, [hsv.s, hsv.v]);
-  return /* @__PURE__ */ jsx251(
+  return /* @__PURE__ */ jsx252(
     Canvas,
     {
       ref: canvasRef,
@@ -11996,9 +12075,9 @@ var HSVHueCanvas = ({ hsv }) => {
 };
 
 // src/components/ColorPicker/HueSlider.tsx
-import { jsx as jsx252, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs31 } from "react/jsx-runtime";
 var TWENTY_FOUR = 24;
-var Container8 = styled46.div`
+var Container8 = styled47.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
   height: ${TWENTY_FOUR}px;
@@ -12006,7 +12085,7 @@ var Container8 = styled46.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-var Root = styled46(SliderRoot)`
+var Root = styled47(SliderRoot)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -12015,11 +12094,11 @@ var Root = styled46(SliderRoot)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-var Track = styled46(SliderTrack)`
+var Track = styled47(SliderTrack)`
   width: 100%;
 `;
-var Thumb = styled46(SliderThumb)``;
-var ThumbInner = styled46.div`
+var Thumb = styled47(SliderThumb)``;
+var ThumbInner = styled47.div`
   cursor: pointer;
   display: block;
   border-radius: var(--wui-border-radius-rounded);
@@ -12074,23 +12153,23 @@ var HueSlider = () => {
         step: 1,
         value: [nonDerivedValueAsHsv.h ?? 0],
         children: [
-          /* @__PURE__ */ jsx252(Track, {}),
-          /* @__PURE__ */ jsx252(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx252(ThumbInner, { style: thumbInnerStyle }) })
+          /* @__PURE__ */ jsx253(Track, {}),
+          /* @__PURE__ */ jsx253(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx253(ThumbInner, { style: thumbInnerStyle }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx252(HSVHueCanvas, { hsv: valueAsHsv })
+    /* @__PURE__ */ jsx253(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
-import { styled as styled48 } from "styled-components";
+import { styled as styled49 } from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
-import { styled as styled47 } from "styled-components";
+import { styled as styled48 } from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -12119,8 +12198,8 @@ var drawSmoothCurve = (context, points) => {
 };
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
-import { jsx as jsx253 } from "react/jsx-runtime";
-var Canvas2 = styled47.canvas`
+import { jsx as jsx254 } from "react/jsx-runtime";
+var Canvas2 = styled48.canvas`
   display: block;
   width: 100%;
 `;
@@ -12227,7 +12306,7 @@ var HSVSaturationValueCanvas = ({
     colorForComparison,
     opacityForContrastCalculation
   ]);
-  return /* @__PURE__ */ jsx253(
+  return /* @__PURE__ */ jsx254(
     Canvas2,
     {
       ref: canvasRef,
@@ -12238,16 +12317,16 @@ var HSVSaturationValueCanvas = ({
 };
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { jsx as jsx254, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs32 } from "react/jsx-runtime";
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
-var Container9 = styled48.div`
+var Container9 = styled49.div`
   border-radius: var(--wui-border-radius-02);
   box-shadow: 0 0 0 1px var(--wui-color-border);
   overflow: hidden;
   position: relative;
 `;
-var Thumb2 = styled48.button.attrs({ type: "button" })`
+var Thumb2 = styled49.button.attrs({ type: "button" })`
   appearance: none;
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -12415,7 +12494,7 @@ var SaturationAndValuePicker = ({
         "data-testid": dataTestId,
         onMouseDown: onContainerMouseDown,
         children: [
-          /* @__PURE__ */ jsx254(
+          /* @__PURE__ */ jsx255(
             Thumb2,
             {
               ref: thumbRef,
@@ -12427,7 +12506,7 @@ var SaturationAndValuePicker = ({
               tabIndex: 0
             }
           ),
-          /* @__PURE__ */ jsx254(
+          /* @__PURE__ */ jsx255(
             HSVSaturationValueCanvas,
             {
               colorForComparison,
@@ -12437,7 +12516,7 @@ var SaturationAndValuePicker = ({
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),
-          /* @__PURE__ */ jsx254(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
+          /* @__PURE__ */ jsx255(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
           /* @__PURE__ */ jsxs32(ScreenReaderOnly, { "aria-live": "polite", children: [
             "Current color: ",
             valueAsHex,
@@ -12469,15 +12548,15 @@ import {
   isValidElement as isValidElement3
 } from "react";
 import { matchSorter } from "match-sorter";
-import { styled as styled50 } from "styled-components";
+import { styled as styled51 } from "styled-components";
 import { isArray as isArray2, isString as isString3 } from "@wistia/type-guards";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { styled as styled49 } from "styled-components";
+import { styled as styled50 } from "styled-components";
 import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment7, jsx as jsx255, jsxs as jsxs33 } from "react/jsx-runtime";
-var TagLabel = styled49.a`
+import { Fragment as Fragment7, jsx as jsx256, jsxs as jsxs33 } from "react/jsx-runtime";
+var TagLabel = styled50.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12513,14 +12592,14 @@ var TagLabel = styled49.a`
     background: var(--wui-color-bg-surface-secondary-active);
   }
 `;
-var TagDivider = styled49.div`
+var TagDivider = styled50.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled49.button`
+var StyledRemoveButton = styled50.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12548,7 +12627,7 @@ var StyledRemoveButton = styled49.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled49.div`
+var StyledTag = styled50.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12570,7 +12649,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs33(Fragment7, { children: [
-    /* @__PURE__ */ jsx255(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx256(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs33(
       StyledRemoveButton,
       {
@@ -12578,14 +12657,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx255(
+          /* @__PURE__ */ jsx256(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx255(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx256(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -12613,7 +12692,7 @@ var Tag = forwardRef16(
               ]
             }
           ),
-          /* @__PURE__ */ jsx255(
+          /* @__PURE__ */ jsx256(
             RemoveButton,
             {
               colorScheme,
@@ -12646,8 +12725,8 @@ var getDefaultTypographicElement = (variant) => {
 };
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx256, jsxs as jsxs34 } from "react/jsx-runtime";
-var ComboboxWrapper = styled50.div`
+import { jsx as jsx257, jsxs as jsxs34 } from "react/jsx-runtime";
+var ComboboxWrapper = styled51.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -12696,7 +12775,7 @@ var ComboboxWrapper = styled50.div`
     }
   }
 `;
-var ComboboxInput = styled50(Ariakit.Combobox)`
+var ComboboxInput = styled51(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -12711,7 +12790,7 @@ var ComboboxInput = styled50(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover2 = styled50(Ariakit.ComboboxPopover)`
+var ComboboxPopover2 = styled51(Ariakit.ComboboxPopover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -12737,7 +12816,7 @@ var ComboboxPopover2 = styled50(Ariakit.ComboboxPopover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = styled50(Ariakit.ComboboxItem)`
+var ComboboxItem2 = styled51(Ariakit.ComboboxItem)`
   ${getTypographicStyles("body3")};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -12765,12 +12844,12 @@ var ComboboxItem2 = styled50(Ariakit.ComboboxItem)`
     background-color: transparent;
   }
 `;
-var NoResults = styled50.div`
+var NoResults = styled51.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ jsx256(
+  return /* @__PURE__ */ jsx257(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -12791,7 +12870,7 @@ var extractOptions = (children) => {
 };
 var defaultDisplayValues = (values, onRemove) => {
   const valueArray = Array.isArray(values) ? values : [values];
-  return valueArray.map((selectedValue) => /* @__PURE__ */ jsx256(
+  return valueArray.map((selectedValue) => /* @__PURE__ */ jsx257(
     Tag,
     {
       label: selectedValue,
@@ -12864,7 +12943,7 @@ var Combobox2 = ({
             $fullWidth: fullWidth,
             children: [
               isMultiSelect ? displayValues(value, handleRemoveValue) : null,
-              /* @__PURE__ */ jsx256(
+              /* @__PURE__ */ jsx257(
                 ComboboxInput,
                 {
                   autoSelect: true,
@@ -12893,7 +12972,7 @@ var Combobox2 = ({
                   value: match,
                   children: [
                     options[match],
-                    /* @__PURE__ */ jsx256(
+                    /* @__PURE__ */ jsx257(
                       Icon,
                       {
                         size: "md",
@@ -12907,7 +12986,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ jsx256(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ jsx257(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -12930,7 +13009,7 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil20, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { forwardRef as forwardRef17, useMemo as useMemo12 } from "react";
-import { styled as styled51, css as css32, keyframes as keyframes2 } from "styled-components";
+import { styled as styled52, css as css32, keyframes as keyframes2 } from "styled-components";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext6, useContext as useContext5 } from "react";
@@ -12938,7 +13017,7 @@ var MenuContext = createContext6({ compact: false });
 var useMenuContext = () => useContext5(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx257, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx258, jsxs as jsxs35 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -13023,7 +13102,7 @@ var menuContentCss = css32`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled51(DropdownMenuContent)`
+var MenuContent = styled52(DropdownMenuContent)`
   ${menuContentCss}
   min-width: var(--radix-dropdown-menu-trigger-width);
 `;
@@ -13051,25 +13130,25 @@ var Menu = forwardRef17(
         onOpenChange: () => null
       };
     }
-    return /* @__PURE__ */ jsx257(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsx258(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs35(
       DropdownMenu,
       {
         modal: false,
         ...controlProps,
         children: [
-          /* @__PURE__ */ jsx257(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx257(
+          /* @__PURE__ */ jsx258(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx258(
             Button,
             {
               ref,
               "aria-expanded": isOpen,
               disabled,
               forceState: isOpen ? "active" : void 0,
-              rightIcon: /* @__PURE__ */ jsx257(Icon, { type: "caret-down" }),
+              rightIcon: /* @__PURE__ */ jsx258(Icon, { type: "caret-down" }),
               ...triggerProps,
               children: label
             }
           ) }),
-          /* @__PURE__ */ jsx257(DropdownMenuPortal, { children: /* @__PURE__ */ jsx257(
+          /* @__PURE__ */ jsx258(DropdownMenuPortal, { children: /* @__PURE__ */ jsx258(
             MenuContent,
             {
               ...props,
@@ -13093,19 +13172,19 @@ Menu.displayName = "Menu_UI";
 Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
-import { styled as styled52 } from "styled-components";
+import { styled as styled53 } from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx258 } from "react/jsx-runtime";
-var StyledMenuLabel = styled52(DropdownMenuLabel)`
+import { jsx as jsx259 } from "react/jsx-runtime";
+var StyledMenuLabel = styled53(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx258(
+  return /* @__PURE__ */ jsx259(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx258(
+      children: /* @__PURE__ */ jsx259(
         Heading,
         {
           renderAs: "span",
@@ -13121,7 +13200,7 @@ MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState16 } from "react";
-import { styled as styled55 } from "styled-components";
+import { styled as styled56 } from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -13134,10 +13213,10 @@ import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef18 } from "react";
-import { styled as styled53 } from "styled-components";
+import { styled as styled54 } from "styled-components";
 import { isNotNil as isNotNil21, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
-import { jsx as jsx259, jsxs as jsxs36 } from "react/jsx-runtime";
-var StyledButton3 = styled53(Button)`
+import { jsx as jsx260, jsxs as jsxs36 } from "react/jsx-runtime";
+var StyledButton3 = styled54(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -13176,7 +13255,7 @@ var StyledButton3 = styled53(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled53.div`
+var StyledLeftIconContainer = styled54.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -13188,7 +13267,7 @@ var StyledLeftIconContainer = styled53.div`
     }
   }
 `;
-var StyledRightIconContainer = styled53.div`
+var StyledRightIconContainer = styled54.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -13200,13 +13279,13 @@ var StyledRightIconContainer = styled53.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled53.div`
+var StyledLabelAndDescriptionContainer = styled54.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled53.div`
+var StyledBadgeContainer = styled54.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -13221,7 +13300,7 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx259(
+    badge = /* @__PURE__ */ jsx260(
       Icon,
       {
         colorScheme: "purple",
@@ -13243,10 +13322,10 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        isNotNil21(props.leftIcon) ? /* @__PURE__ */ jsx259(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx259(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil21(badge) || isNotNil21(command) ? /* @__PURE__ */ jsx259(StyledBadgeContainer, { children: badge ?? command }) : null,
-        isNotNil21(props.rightIcon) ? /* @__PURE__ */ jsx259(StyledRightIconContainer, { children: props.rightIcon }) : null
+        isNotNil21(props.leftIcon) ? /* @__PURE__ */ jsx260(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx260(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil21(badge) || isNotNil21(command) ? /* @__PURE__ */ jsx260(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil21(props.rightIcon) ? /* @__PURE__ */ jsx260(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -13254,15 +13333,15 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import { styled as styled54 } from "styled-components";
-import { jsx as jsx260 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled54.span``;
-var StyledMenuItemDescription = styled54(Text)``;
+import { styled as styled55 } from "styled-components";
+import { jsx as jsx261 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled55.span``;
+var StyledMenuItemDescription = styled55(Text)``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx260(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx261(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx260(
+  return /* @__PURE__ */ jsx261(
     StyledMenuItemDescription,
     {
       prominence: "secondary",
@@ -13273,18 +13352,18 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx261, jsxs as jsxs37 } from "react/jsx-runtime";
-var SubMenuContent = styled55(DropdownMenuSubContent)`
+import { jsx as jsx262, jsxs as jsxs37 } from "react/jsx-runtime";
+var SubMenuContent = styled56(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled55.div`
+var StyledMobileSubMenuItems = styled56.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled55(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled56(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -13295,12 +13374,12 @@ var StyledSubTrigger = styled55(DropdownMenuSubTrigger)`
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx261(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx262(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx262(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ jsx261(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx262(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -13316,10 +13395,10 @@ var SubMenu = ({
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs37(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs37(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx261(MenuItemLabel, { children: label }),
-      isNotNil22(description) ? /* @__PURE__ */ jsx261(MenuItemDescription, { children: description }) : null
+      /* @__PURE__ */ jsx262(MenuItemLabel, { children: label }),
+      isNotNil22(description) ? /* @__PURE__ */ jsx262(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx261(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx261(SubMenuContent, { $compact: compact, children }) })
+    /* @__PURE__ */ jsx262(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx262(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs37(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs37(
       SubMenuTrigger,
@@ -13330,12 +13409,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx261(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx261(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx262(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx262(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx261(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx262(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu_UI";
@@ -13343,15 +13422,15 @@ SubMenu.displayName = "SubMenu_UI";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef19 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx262 } from "react/jsx-runtime";
+import { jsx as jsx263 } from "react/jsx-runtime";
 var MenuItem = forwardRef19(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx262(
+    return /* @__PURE__ */ jsx263(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx262(
+        children: /* @__PURE__ */ jsx263(
           MenuItemButton,
           {
             ...props,
@@ -13367,19 +13446,19 @@ MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
 import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx263 } from "react/jsx-runtime";
+import { jsx as jsx264 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx263(DropdownMenuRadioGroup, { ...props, children });
+  return /* @__PURE__ */ jsx264(DropdownMenuRadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
 import { DropdownMenuItemIndicator, DropdownMenuRadioItem } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx264 } from "react/jsx-runtime";
+import { jsx as jsx265 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx264(
+  indicator = /* @__PURE__ */ jsx265(
     Icon,
     {
       size: "sm",
@@ -13389,17 +13468,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx264(
+  return /* @__PURE__ */ jsx265(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx264(
+      children: /* @__PURE__ */ jsx265(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx264(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx265(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -13410,7 +13489,7 @@ RadioMenuItem.displayName = "RadioMenuItem_UI";
 // src/components/Menu/CheckboxMenuItem.tsx
 import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator as DropdownMenuItemIndicator2 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
-import { jsx as jsx265, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs38 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs38(
     "svg",
@@ -13422,14 +13501,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx265(
+        /* @__PURE__ */ jsx266(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx265(
+        /* @__PURE__ */ jsx266(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -13448,14 +13527,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx265(
+        /* @__PURE__ */ jsx266(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx265(
+        /* @__PURE__ */ jsx266(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -13472,19 +13551,19 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx266(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx265(
+      children: /* @__PURE__ */ jsx266(
         MenuItemButton,
         {
           ...props,
-          leftIcon: isNotNil23(props.icon) ? props.icon : /* @__PURE__ */ jsx265(CheckboxIndicator, { checked }),
-          rightIcon: isNotNil23(props.icon) ? /* @__PURE__ */ jsx265(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx265(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: isNotNil23(props.icon) ? props.icon : /* @__PURE__ */ jsx266(CheckboxIndicator, { checked }),
+          rightIcon: isNotNil23(props.icon) ? /* @__PURE__ */ jsx266(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx266(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -13495,7 +13574,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 // src/components/Menu/FilterMenu.tsx
 import { Children as Children6, forwardRef as forwardRef20 } from "react";
 import { DropdownMenuItem as DropdownMenuItem3 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx266, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs39 } from "react/jsx-runtime";
 var FilterMenuItem = CheckboxMenuItem;
 var FilterMenu = forwardRef20(
   ({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
@@ -13505,7 +13584,7 @@ var FilterMenu = forwardRef20(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx266(
+          /* @__PURE__ */ jsx267(
             Card,
             {
               alignItems: "flex-end",
@@ -13520,7 +13599,7 @@ var FilterMenu = forwardRef20(
                 right: 0,
                 margin: "1px"
               },
-              children: /* @__PURE__ */ jsx266(
+              children: /* @__PURE__ */ jsx267(
                 Input,
                 {
                   autoFocus: true,
@@ -13546,7 +13625,7 @@ var FilterMenu = forwardRef20(
               )
             }
           ),
-          /* @__PURE__ */ jsx266(
+          /* @__PURE__ */ jsx267(
             MenuItem,
             {
               disabled: true,
@@ -13554,13 +13633,13 @@ var FilterMenu = forwardRef20(
               children: " "
             }
           ),
-          Children6.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx266(MenuItem, { disabled: true, children: "No results found" }),
-          value.length > 0 && /* @__PURE__ */ jsx266(
+          Children6.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx267(MenuItem, { disabled: true, children: "No results found" }),
+          value.length > 0 && /* @__PURE__ */ jsx267(
             DropdownMenuItem3,
             {
               disabled: true,
               style: { marginTop: "24px" },
-              children: /* @__PURE__ */ jsx266(
+              children: /* @__PURE__ */ jsx267(
                 Card,
                 {
                   alignItems: "flex-end",
@@ -13575,7 +13654,7 @@ var FilterMenu = forwardRef20(
                     right: 0,
                     margin: "1px"
                   },
-                  children: /* @__PURE__ */ jsx266(
+                  children: /* @__PURE__ */ jsx267(
                     Button,
                     {
                       onClick: () => onChange([]),
@@ -13595,7 +13674,7 @@ var FilterMenu = forwardRef20(
 FilterMenu.displayName = "FilterMenu_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
-import { jsx as jsx267 } from "react/jsx-runtime";
+import { jsx as jsx268 } from "react/jsx-runtime";
 var ContextMenu = ({
   position,
   triggerRef,
@@ -13625,7 +13704,7 @@ var ContextMenu = ({
   if (!isOpen) {
     return null;
   }
-  const menu = /* @__PURE__ */ jsx267(
+  const menu = /* @__PURE__ */ jsx268(
     Menu,
     {
       compact,
@@ -13637,7 +13716,7 @@ var ContextMenu = ({
         }
       },
       side,
-      trigger: /* @__PURE__ */ jsx267(
+      trigger: /* @__PURE__ */ jsx268(
         "button",
         {
           "aria-label": "context menu",
@@ -13663,10 +13742,10 @@ var ContextMenu = ({
 
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef15 } from "react";
-import { styled as styled56, keyframes as keyframes3 } from "styled-components";
+import { styled as styled57, keyframes as keyframes3 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
-import { jsx as jsx268, jsxs as jsxs40 } from "react/jsx-runtime";
-var StyledDataCard = styled56.div`
+import { jsx as jsx269, jsxs as jsxs40 } from "react/jsx-runtime";
+var StyledDataCard = styled57.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
@@ -13748,7 +13827,7 @@ var shimmer = keyframes3`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled56.div`
+var LoadingBackground = styled57.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -13759,32 +13838,32 @@ var LoadingBackground = styled56.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled56(LoadingBackground)`
+var StyledLoadingLabel = styled57(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled56(LoadingBackground)`
+var StyledLoadingValue = styled57(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = styled56(Heading)`
+var StyledLabel3 = styled57(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled56(Heading)`
+var StyledValue = styled57(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled56.div`
+var StyledSlot = styled57.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled56.div`
+var StyledDataCardTrendContainer = styled57.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = styled56(Text)`
+var StyledSubtitle = styled57(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -13802,24 +13881,24 @@ var DataCardInner = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx268(
+      /* @__PURE__ */ jsx269(
         StyledLabel3,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx268(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx269(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx268(
+      /* @__PURE__ */ jsx269(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx268(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx269(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx268(StyledSlot, { children: upperRightSlot }),
-      isNotNil25(subtitle) && !isLoading && /* @__PURE__ */ jsx268(
+      isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx269(StyledSlot, { children: upperRightSlot }),
+      isNotNil25(subtitle) && !isLoading && /* @__PURE__ */ jsx269(
         StyledSubtitle,
         {
           "data-wui-data-card-subtitle": true,
@@ -13827,7 +13906,7 @@ var DataCardInner = ({
           children: subtitle
         }
       ),
-      isNotNil25(trend) && !isLoading && /* @__PURE__ */ jsx268(StyledDataCardTrendContainer, { children: trend })
+      isNotNil25(trend) && !isLoading && /* @__PURE__ */ jsx269(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -13835,12 +13914,12 @@ var DataCard = (props) => {
   const ref = useRef15(null);
   if (isNotNil25(props.href) || isNotNil25(props.onClick)) {
     const { "aria-pressed": ariaPressed, ...dataCardProps } = props;
-    return /* @__PURE__ */ jsx268(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx268(
+    return /* @__PURE__ */ jsx269(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx269(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot,
         ...dataCardProps,
-        label: /* @__PURE__ */ jsx268(
+        label: /* @__PURE__ */ jsx269(
           Button,
           {
             ref,
@@ -13857,14 +13936,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx268(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx269(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-import { styled as styled57 } from "styled-components";
-import { jsx as jsx269 } from "react/jsx-runtime";
-var StyledDataCards = styled57(Box)`
+import { styled as styled58 } from "styled-components";
+import { jsx as jsx270 } from "react/jsx-runtime";
+var StyledDataCards = styled58(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 
   > * {
@@ -13878,7 +13957,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx269(
+  return /* @__PURE__ */ jsx270(
     StyledDataCards,
     {
       ...props,
@@ -13897,9 +13976,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-import { styled as styled58 } from "styled-components";
-import { jsx as jsx270, jsxs as jsxs41 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled58.div`
+import { styled as styled59 } from "styled-components";
+import { jsx as jsx271, jsxs as jsxs41 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled59.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -13915,7 +13994,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs41(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx270(
+    /* @__PURE__ */ jsx271(
       Icon,
       {
         size: "md",
@@ -13923,7 +14002,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx270(
+    /* @__PURE__ */ jsx271(
       Text,
       {
         prominence: "secondary",
@@ -13935,15 +14014,15 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-import { styled as styled59 } from "styled-components";
-import { jsx as jsx271 } from "react/jsx-runtime";
-var StyledIconContainer = styled59.div`
+import { styled as styled60 } from "styled-components";
+import { jsx as jsx272 } from "react/jsx-runtime";
+var StyledIconContainer = styled60.div`
   display: flex;
   align-items: center;
   align-self: center;
   height: 0;
 `;
-var DataCardHoverArrow = () => /* @__PURE__ */ jsx271(StyledIconContainer, { children: /* @__PURE__ */ jsx271(
+var DataCardHoverArrow = () => /* @__PURE__ */ jsx272(StyledIconContainer, { children: /* @__PURE__ */ jsx272(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -13953,9 +14032,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ jsx271(StyledIconContainer, { chi
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
-import { styled as styled60 } from "styled-components";
-import { jsx as jsx272 } from "react/jsx-runtime";
-var StyledDataList = styled60.dl`
+import { styled as styled61 } from "styled-components";
+import { jsx as jsx273 } from "react/jsx-runtime";
+var StyledDataList = styled61.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -13983,7 +14062,7 @@ var DataList = ({
   labelProminence = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx272(
+  return /* @__PURE__ */ jsx273(
     StyledDataList,
     {
       role: "list",
@@ -14006,9 +14085,9 @@ var DataListItem = ({ children }) => {
 DataListItem.displayName = "DataListItem_UI";
 
 // src/components/DataList/DataListItemLabel.tsx
-import { jsx as jsx273 } from "react/jsx-runtime";
+import { jsx as jsx274 } from "react/jsx-runtime";
 var DataListItemLabel = (props) => {
-  return /* @__PURE__ */ jsx273(
+  return /* @__PURE__ */ jsx274(
     Text,
     {
       variant: "label4",
@@ -14020,9 +14099,9 @@ var DataListItemLabel = (props) => {
 DataListItemLabel.displayName = "DataListItemLabel_UI";
 
 // src/components/DataList/DataListItemValue.tsx
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { jsx as jsx275 } from "react/jsx-runtime";
 var DataListItemValue = (props) => {
-  return /* @__PURE__ */ jsx274(
+  return /* @__PURE__ */ jsx275(
     Text,
     {
       variant: "body3",
@@ -14034,8 +14113,8 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-import { styled as styled61, css as css33 } from "styled-components";
-import { jsx as jsx275 } from "react/jsx-runtime";
+import { styled as styled62, css as css33 } from "styled-components";
+import { jsx as jsx276 } from "react/jsx-runtime";
 var horizontalBorderCss = css33`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -14049,7 +14128,7 @@ var verticalBorderCss = css33`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled61.div`
+var DividerComponent = styled62.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -14062,7 +14141,7 @@ var DividerComponent = styled61.div`
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
   const responsiveOrientation = useResponsiveProp(orientation);
-  return /* @__PURE__ */ jsx275(
+  return /* @__PURE__ */ jsx276(
     DividerComponent,
     {
       $orientation: responsiveOrientation,
@@ -14075,10 +14154,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { styled as styled62, css as css34 } from "styled-components";
+import { styled as styled63, css as css34 } from "styled-components";
 import { useState as useState18, useRef as useRef16 } from "react";
-import { Fragment as Fragment8, jsx as jsx276, jsxs as jsxs42 } from "react/jsx-runtime";
-var StyledInput = styled62(Input)`
+import { Fragment as Fragment8, jsx as jsx277, jsxs as jsxs42 } from "react/jsx-runtime";
+var StyledInput = styled63(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -14113,7 +14192,7 @@ var editableStyles = css34`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled62(Heading)`
+var StyledHeading2 = styled63(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -14168,7 +14247,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx276(
+  const HeadingComponent2 = /* @__PURE__ */ jsx277(
     StyledHeading2,
     {
       ref: headingRef,
@@ -14182,7 +14261,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx276(
+    return /* @__PURE__ */ jsx277(
       StyledInput,
       {
         $height: headingHeight,
@@ -14202,8 +14281,8 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs42(Fragment8, { children: [
-    /* @__PURE__ */ jsx276(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx276(ScreenReaderOnly, { children: /* @__PURE__ */ jsx276(
+    /* @__PURE__ */ jsx277(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx277(ScreenReaderOnly, { children: /* @__PURE__ */ jsx277(
       "button",
       {
         "aria-label": ariaLabel,
@@ -14216,14 +14295,14 @@ var EditableHeading = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 import { useContext as useContext6, useRef as useRef17, forwardRef as forwardRef21 } from "react";
-import { styled as styled64, css as css35 } from "styled-components";
+import { styled as styled65, css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
 import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
-import { styled as styled63 } from "styled-components";
-import { jsx as jsx277 } from "react/jsx-runtime";
+import { styled as styled64 } from "styled-components";
+import { jsx as jsx278 } from "react/jsx-runtime";
 var LARGE_PADDING = "var(--wui-space-02)";
 var SMALL_PADDING = "var(--wui-space-01)";
 var getPaddingForVariant = (variant) => {
@@ -14258,7 +14337,7 @@ var getPaddingForVariant = (variant) => {
   }
   return SMALL_PADDING;
 };
-var StyledEditableTextRoot = styled63.div`
+var StyledEditableTextRoot = styled64.div`
   display: contents;
 
   --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
@@ -14356,7 +14435,7 @@ var EditableTextRoot = ({
     }
     return "idle";
   };
-  return /* @__PURE__ */ jsx277(
+  return /* @__PURE__ */ jsx278(
     StyledEditableTextRoot,
     {
       $typographicVariant: typographicVariant,
@@ -14364,14 +14443,14 @@ var EditableTextRoot = ({
       "data-wui-editable-text-root": true,
       "data-wui-editable-text-state": getState(),
       ...props,
-      children: /* @__PURE__ */ jsx277(EditableTextContext.Provider, { value: context, children })
+      children: /* @__PURE__ */ jsx278(EditableTextContext.Provider, { value: context, children })
     }
   );
 };
 
 // src/components/EditableText/EditableTextDisplay.tsx
-import { jsx as jsx278, jsxs as jsxs43 } from "react/jsx-runtime";
-var StyledEditableTextDisplay = styled64.div`
+import { jsx as jsx279, jsxs as jsxs43 } from "react/jsx-runtime";
+var StyledEditableTextDisplay = styled65.div`
   ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
   padding: var(--wui-editable-text-padding);
   border-radius: var(--wui-editable-text-border-radius);
@@ -14423,7 +14502,7 @@ var EditableTextDisplayComponent = forwardRef21(
       return null;
     }
     if (asTrigger && !context.readOnly) {
-      return /* @__PURE__ */ jsx278(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs43(
+      return /* @__PURE__ */ jsx279(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs43(
         StyledEditableTextDisplay,
         {
           ref,
@@ -14435,7 +14514,7 @@ var EditableTextDisplayComponent = forwardRef21(
           ...props,
           children: [
             displayText,
-            /* @__PURE__ */ jsx278(
+            /* @__PURE__ */ jsx279(
               "button",
               {
                 ref: triggerButtonRef,
@@ -14449,7 +14528,7 @@ var EditableTextDisplayComponent = forwardRef21(
         }
       ) });
     }
-    return /* @__PURE__ */ jsx278(
+    return /* @__PURE__ */ jsx279(
       StyledEditableTextDisplay,
       {
         ref,
@@ -14472,10 +14551,10 @@ var EditableTextDisplay = makePolymorphic(
 
 // src/components/EditableText/EditableTextInput.tsx
 import { useContext as useContext7, useEffect as useEffect17, useRef as useRef18 } from "react";
-import { styled as styled65 } from "styled-components";
+import { styled as styled66 } from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsx as jsx279 } from "react/jsx-runtime";
-var StyledInput2 = styled65(Input)`
+import { jsx as jsx280 } from "react/jsx-runtime";
+var StyledInput2 = styled66(Input)`
   && {
     ${({ $minLines }) => isNotNil27($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
     ${({ $maxLines }) => isNotNil27($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
@@ -14563,7 +14642,7 @@ var EditableTextInput = (props) => {
     }
   };
   if (!isEditing) return null;
-  return /* @__PURE__ */ jsx279(
+  return /* @__PURE__ */ jsx280(
     StyledInput2,
     {
       ref: inputRef,
@@ -14589,14 +14668,14 @@ var EditableTextInput = (props) => {
 
 // src/components/EditableText/EditableTextLabel.tsx
 import { useContext as useContext8 } from "react";
-import { jsx as jsx280 } from "react/jsx-runtime";
+import { jsx as jsx281 } from "react/jsx-runtime";
 var EditableTextLabel = ({ ...props }) => {
   const context = useContext8(EditableTextContext);
   if (!context) {
     throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
   }
   const { id, label, isEditing } = context;
-  return /* @__PURE__ */ jsx280(
+  return /* @__PURE__ */ jsx281(
     Label,
     {
       ...isEditing && { htmlFor: id },
@@ -14607,11 +14686,11 @@ var EditableTextLabel = ({ ...props }) => {
 };
 
 // src/components/EditableText/EditableText.tsx
-import { jsx as jsx281, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx282, jsxs as jsxs44 } from "react/jsx-runtime";
 var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs44(EditableTextRoot, { ...props, children: [
-  /* @__PURE__ */ jsx281(EditableTextLabel, { screenReaderOnly: hideLabel }),
-  /* @__PURE__ */ jsx281(EditableTextInput, {}),
-  /* @__PURE__ */ jsx281(EditableTextDisplay, { asTrigger: true })
+  /* @__PURE__ */ jsx282(EditableTextLabel, { screenReaderOnly: hideLabel }),
+  /* @__PURE__ */ jsx282(EditableTextInput, {}),
+  /* @__PURE__ */ jsx282(EditableTextDisplay, { asTrigger: true })
 ] });
 EditableText.displayName = "EditableText_UI";
 
@@ -14740,9 +14819,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext12, useRef as useRef19 } from "react";
 import { isArray as isArray3, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
-import { jsx as jsx282, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs45 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx282("li", { children: /* @__PURE__ */ jsx282(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx283("li", { children: /* @__PURE__ */ jsx283(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef19(null);
@@ -14752,9 +14831,9 @@ var FormErrorSummary = ({ description }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs45("div", { ref, children: [
-    /* @__PURE__ */ jsx282("p", { children: description }),
-    /* @__PURE__ */ jsx282("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
-      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx282(
+    /* @__PURE__ */ jsx283("p", { children: description }),
+    /* @__PURE__ */ jsx283("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
+      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx283(
         ErrorItem,
         {
           error: err,
@@ -14762,7 +14841,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx282(
+      )) : /* @__PURE__ */ jsx283(
         ErrorItem,
         {
           error: error ?? "",
@@ -14777,10 +14856,10 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled66 } from "styled-components";
+import { styled as styled67 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { Fragment as Fragment9, jsx as jsx283, jsxs as jsxs46 } from "react/jsx-runtime";
-var StyledFormField = styled66.div`
+import { Fragment as Fragment9, jsx as jsx284, jsxs as jsxs46 } from "react/jsx-runtime";
+var StyledFormField = styled67.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);
@@ -14810,7 +14889,7 @@ var StyledFormField = styled66.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = styled66.ul`
+var StyledErrorList = styled67.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -14822,7 +14901,7 @@ var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = isArray4(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
-    return /* @__PURE__ */ jsx283(
+    return /* @__PURE__ */ jsx284(
       Text,
       {
         colorScheme: "error",
@@ -14835,7 +14914,7 @@ var ErrorMessages = ({ errors, id }) => {
     );
   }
   if (!isMultipleErrors) {
-    return /* @__PURE__ */ jsx283(
+    return /* @__PURE__ */ jsx284(
       Text,
       {
         colorScheme: "error",
@@ -14847,7 +14926,7 @@ var ErrorMessages = ({ errors, id }) => {
       id
     );
   }
-  return /* @__PURE__ */ jsx283(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx283(
+  return /* @__PURE__ */ jsx284(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx284(
     Text,
     {
       colorScheme: "error",
@@ -14918,7 +14997,7 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx283(
+        !isIntegratedLabel && /* @__PURE__ */ jsx284(
           Label,
           {
             htmlFor: computedId,
@@ -14926,11 +15005,11 @@ var FormField = ({
             children: label
           }
         ),
-        isNotNil28(description) ? /* @__PURE__ */ jsx283(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        isNotNil28(description) ? /* @__PURE__ */ jsx284(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
         isNotNil28(computedError) ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
-          /* @__PURE__ */ jsx283("div", {}),
-          /* @__PURE__ */ jsx283(
+          /* @__PURE__ */ jsx284("div", {}),
+          /* @__PURE__ */ jsx284(
             ErrorMessages,
             {
               errors: computedError,
@@ -14946,7 +15025,7 @@ FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext8, useMemo as useMemo14, useContext as useContext14 } from "react";
-import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx285 } from "react/jsx-runtime";
 var RadioGroupContext = createContext8(null);
 var useRadioGroup = () => {
   return useContext14(RadioGroupContext);
@@ -14967,15 +15046,15 @@ var RadioGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ jsx284(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx284(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx285(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx285(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled67, css as css36 } from "styled-components";
+import { styled as styled68, css as css36 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
-import { jsx as jsx285 } from "react/jsx-runtime";
+import { jsx as jsx286 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
@@ -15003,7 +15082,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
     );
   `;
 };
-var StyledGrid = styled67.div`
+var StyledGrid = styled68.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
 
@@ -15027,7 +15106,7 @@ var GridComponent = forwardRef22(
     const { column, row } = isRecord5(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
     const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
-    return /* @__PURE__ */ jsx285(
+    return /* @__PURE__ */ jsx286(
       StyledGrid,
       {
         ref,
@@ -15047,11 +15126,11 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-import { styled as styled68 } from "styled-components";
+import { styled as styled69 } from "styled-components";
 import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState21 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
-import { jsx as jsx286 } from "react/jsx-runtime";
-var StyledIconButton = styled68(IconButton)`
+import { jsx as jsx287 } from "react/jsx-runtime";
+var StyledIconButton = styled69(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15090,7 +15169,7 @@ var InputClickToCopy = forwardRef23(
         return value;
       });
     };
-    return /* @__PURE__ */ jsx286(
+    return /* @__PURE__ */ jsx287(
       Input,
       {
         "aria-label": "Click to Copy",
@@ -15098,7 +15177,7 @@ var InputClickToCopy = forwardRef23(
         ref,
         disabled,
         readOnly: true,
-        rightIcon: /* @__PURE__ */ jsx286(
+        rightIcon: /* @__PURE__ */ jsx287(
           StyledIconButton,
           {
             colorScheme: isCopied ? "success" : "inherit",
@@ -15106,7 +15185,7 @@ var InputClickToCopy = forwardRef23(
             label: "Copy to clipboard",
             onClick: handleClick,
             variant: "ghost",
-            children: isCopied ? /* @__PURE__ */ jsx286(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx286(Icon, { type: "save-as-copy" })
+            children: isCopied ? /* @__PURE__ */ jsx287(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx287(Icon, { type: "save-as-copy" })
           }
         ),
         value
@@ -15117,11 +15196,11 @@ var InputClickToCopy = forwardRef23(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-import { styled as styled69 } from "styled-components";
+import { styled as styled70 } from "styled-components";
 import { forwardRef as forwardRef24, useState as useState22 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
-import { jsx as jsx287 } from "react/jsx-runtime";
-var StyledIconButton2 = styled69(IconButton)`
+import { jsx as jsx288 } from "react/jsx-runtime";
+var StyledIconButton2 = styled70(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15139,13 +15218,13 @@ var InputPassword = forwardRef24(
         onVisibilityToggle(newVisibility);
       }
     };
-    return /* @__PURE__ */ jsx287(
+    return /* @__PURE__ */ jsx288(
       Input,
       {
         ...props,
         ref,
         disabled,
-        rightIcon: /* @__PURE__ */ jsx287(
+        rightIcon: /* @__PURE__ */ jsx288(
           StyledIconButton2,
           {
             disabled,
@@ -15153,7 +15232,7 @@ var InputPassword = forwardRef24(
             onClick: handleClick,
             tabIndex: disabled ? -1 : 0,
             variant: "ghost",
-            children: /* @__PURE__ */ jsx287(Icon, { type: isVisible ? "preview" : "hide" })
+            children: /* @__PURE__ */ jsx288(Icon, { type: isVisible ? "preview" : "hide" })
           }
         ),
         type: isVisible ? "text" : "password"
@@ -15164,16 +15243,16 @@ var InputPassword = forwardRef24(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import { styled as styled70 } from "styled-components";
+import { styled as styled71 } from "styled-components";
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { jsx as jsx288, jsxs as jsxs47 } from "react/jsx-runtime";
-var StyledKeyboardShortcut = styled70.div`
+import { jsx as jsx289, jsxs as jsxs47 } from "react/jsx-runtime";
+var StyledKeyboardShortcut = styled71.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = styled70.kbd`
+var StyledKey = styled71.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -15196,11 +15275,11 @@ var StyledKey = styled70.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = styled70.span`
+var Label2 = styled71.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = styled70.div`
+var KeysContainer = styled71.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -15259,8 +15338,8 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      isNotNil29(label) && /* @__PURE__ */ jsx288(Label2, { children: label }),
-      /* @__PURE__ */ jsx288(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx288(
+      isNotNil29(label) && /* @__PURE__ */ jsx289(Label2, { children: label }),
+      /* @__PURE__ */ jsx289(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx289(
         StyledKey,
         {
           children: keyToString(keyboardKey)
@@ -15274,25 +15353,25 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled72, css as css37 } from "styled-components";
+import { styled as styled73, css as css37 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import { styled as styled71 } from "styled-components";
+import { styled as styled72 } from "styled-components";
 import { isNil as isNil17 } from "@wistia/type-guards";
-import { jsx as jsx289 } from "react/jsx-runtime";
-var ListItemComponent = styled71.li`
+import { jsx as jsx290 } from "react/jsx-runtime";
+var ListItemComponent = styled72.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
   if (isNil17(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx289(ListItemComponent, { children });
+  return /* @__PURE__ */ jsx290(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx290, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx291, jsxs as jsxs48 } from "react/jsx-runtime";
 var spacesStyle = css37`
   overflow: hidden;
   padding-left: 0;
@@ -15351,7 +15430,7 @@ var unbulletedStyle = css37`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = styled72.ul`
+var ListComponent = styled73.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -15378,7 +15457,7 @@ var ListComponent = styled72.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx290(
+  return /* @__PURE__ */ jsx291(
     ListComponent,
     {
       as: elementType,
@@ -15403,7 +15482,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ jsx290(ListItem, { children: item }, key);
+    return /* @__PURE__ */ jsx291(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -15431,9 +15510,9 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-import { styled as styled73 } from "styled-components";
-import { jsx as jsx291 } from "react/jsx-runtime";
-var StyledMark = styled73.mark`
+import { styled as styled74 } from "styled-components";
+import { jsx as jsx292 } from "react/jsx-runtime";
+var StyledMark = styled74.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
   color: var(--wui-color-text);
@@ -15441,7 +15520,7 @@ var StyledMark = styled73.mark`
   padding-inline: 0.1em;
   margin-inline: -0.1em;
 `;
-var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx291(
+var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx292(
   StyledMark,
   {
     $colorScheme: colorScheme,
@@ -15453,36 +15532,36 @@ Mark.displayName = "Mark_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { styled as styled78 } from "styled-components";
+import { styled as styled79 } from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import { styled as styled75 } from "styled-components";
+import { styled as styled76 } from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import { styled as styled74 } from "styled-components";
+import { styled as styled75 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx292 } from "react/jsx-runtime";
-var CloseButton = styled74(DialogClose)`
+import { jsx as jsx293 } from "react/jsx-runtime";
+var CloseButton = styled75(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx292(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx292(
+  return /* @__PURE__ */ jsx293(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx293(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx292(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx293(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx293, jsxs as jsxs49 } from "react/jsx-runtime";
-var Header = styled75.header`
+import { jsx as jsx294, jsxs as jsxs49 } from "react/jsx-runtime";
+var Header = styled76.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -15502,7 +15581,7 @@ var Header = styled75.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = styled75(DialogTitle)`
+var Title = styled76(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -15513,7 +15592,7 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx293(ScreenReaderOnly, { children: /* @__PURE__ */ jsx293(Title, { children: title }) }) : /* @__PURE__ */ jsx293(Title, { children: title });
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx294(ScreenReaderOnly, { children: /* @__PURE__ */ jsx294(Title, { children: title }) }) : /* @__PURE__ */ jsx294(Title, { children: title });
   return /* @__PURE__ */ jsxs49(
     Header,
     {
@@ -15521,7 +15600,7 @@ var ModalHeader = ({
       $hideTitle: hideTitle,
       children: [
         TitleComponent,
-        hideCloseButton ? null : /* @__PURE__ */ jsx293(ModalCloseButton, {})
+        hideCloseButton ? null : /* @__PURE__ */ jsx294(ModalCloseButton, {})
       ]
     }
   );
@@ -15529,7 +15608,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled76, css as css38, keyframes as keyframes4 } from "styled-components";
+import { styled as styled77, css as css38, keyframes as keyframes4 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15552,7 +15631,7 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx294 } from "react/jsx-runtime";
+import { jsx as jsx295 } from "react/jsx-runtime";
 var modalEnter = keyframes4`
   from {
     opacity: 0;
@@ -15650,7 +15729,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = styled76(DialogContent)`
+var StyledModalContent = styled77(DialogContent)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -15680,7 +15759,7 @@ var StyledModalContent = styled76(DialogContent)`
 var ModalContent = forwardRef25(
   ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx294(
+    return /* @__PURE__ */ jsx295(
       StyledModalContent,
       {
         ref,
@@ -15696,7 +15775,7 @@ var ModalContent = forwardRef25(
 
 // src/components/Modal/ModalOverlay.tsx
 import { DialogOverlay } from "@radix-ui/react-dialog";
-import { styled as styled77, keyframes as keyframes5 } from "styled-components";
+import { styled as styled78, keyframes as keyframes5 } from "styled-components";
 var backdropShow = keyframes5`
   from {
     opacity: 0;
@@ -15715,7 +15794,7 @@ var backdropHide = keyframes5`
     opacity: 0;
   }
 `;
-var ModalOverlay = styled77(DialogOverlay)`
+var ModalOverlay = styled78(DialogOverlay)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
@@ -15728,20 +15807,20 @@ var ModalOverlay = styled77(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx295, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx296, jsxs as jsxs50 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled78.div`
+var ModalBody = styled79.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = styled78.div`
+var ModalScrollArea = styled79.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = styled78.footer`
+var ModalFooter = styled79.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -15759,7 +15838,7 @@ var Modal = forwardRef26(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx295(
+    return /* @__PURE__ */ jsx296(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -15769,7 +15848,7 @@ var Modal = forwardRef26(
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs50(DialogPortal, { children: [
-          /* @__PURE__ */ jsx295(ModalOverlay, {}),
+          /* @__PURE__ */ jsx296(ModalOverlay, {}),
           /* @__PURE__ */ jsxs50(
             ModalContent,
             {
@@ -15786,9 +15865,9 @@ var Modal = forwardRef26(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx295(ModalScrollArea, { children: /* @__PURE__ */ jsx295(ModalBody, { children }) }),
-                isNotNil32(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
-                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx295(
+                /* @__PURE__ */ jsx296(ModalScrollArea, { children: /* @__PURE__ */ jsx296(ModalBody, { children }) }),
+                isNotNil32(footer) ? /* @__PURE__ */ jsx296(ModalFooter, { children: footer }) : null,
+                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx296(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -15807,9 +15886,9 @@ var Modal = forwardRef26(
 Modal.displayName = "Modal_UI";
 
 // src/components/Modal/ModalCallouts.tsx
-import { jsx as jsx296, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx297, jsxs as jsxs51 } from "react/jsx-runtime";
 var ModalCallouts = ({ children }) => {
-  return /* @__PURE__ */ jsx296(
+  return /* @__PURE__ */ jsx297(
     Stack,
     {
       direction: "horizontal",
@@ -15822,7 +15901,7 @@ ModalCallouts.displayName = "ModalCallouts_UI";
 var ModalCallout = ({ title, image, children }) => {
   return /* @__PURE__ */ jsxs51(Stack, { direction: "vertical", children: [
     image,
-    /* @__PURE__ */ jsx296(Heading, { variant: "heading4", children: title }),
+    /* @__PURE__ */ jsx297(Heading, { variant: "heading4", children: title }),
     children
   ] });
 };
@@ -15830,7 +15909,7 @@ ModalCallout.displayName = "ModalCallout_UI";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import { styled as styled80, css as css40 } from "styled-components";
+import { styled as styled81, css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -15840,9 +15919,9 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled79, css as css39, keyframes as keyframes6 } from "styled-components";
-import { jsx as jsx297, jsxs as jsxs52 } from "react/jsx-runtime";
-var StyledPath = styled79.path`
+import { styled as styled80, css as css39, keyframes as keyframes6 } from "styled-components";
+import { jsx as jsx298, jsxs as jsxs52 } from "react/jsx-runtime";
+var StyledPath = styled80.path`
   fill: var(--wui-color-border-secondary);
 `;
 var circleAnimation = keyframes6`
@@ -15853,7 +15932,7 @@ var circleAnimation = keyframes6`
     opacity: 0;
   }
 `;
-var StyledCircle = styled79.circle`
+var StyledCircle = styled80.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -15880,7 +15959,7 @@ var StyledCircle = styled79.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx297(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsx298(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs52(
     "svg",
     {
       fill: "none",
@@ -15889,8 +15968,8 @@ var PopoverArrow = ({ isAnimated }) => {
       width: "48",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx297(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
-        /* @__PURE__ */ jsx297(
+        /* @__PURE__ */ jsx298(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
+        /* @__PURE__ */ jsx298(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -15901,7 +15980,7 @@ var PopoverArrow = ({ isAnimated }) => {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx297(
+        /* @__PURE__ */ jsx298(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -15919,8 +15998,8 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx298, jsxs as jsxs53 } from "react/jsx-runtime";
-var StyledContent2 = styled80(Content2)`
+import { jsx as jsx299, jsxs as jsxs53 } from "react/jsx-runtime";
+var StyledContent2 = styled81(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css40`
@@ -15960,8 +16039,8 @@ var Popover = ({
     "--wui-popover-max-height": maxHeight
   };
   return /* @__PURE__ */ jsxs53(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx298(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx298(Portal, { children: /* @__PURE__ */ jsxs53(
+    /* @__PURE__ */ jsx299(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx299(Portal, { children: /* @__PURE__ */ jsxs53(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -15970,17 +16049,17 @@ var Popover = ({
         $unstyled: unstyled,
         style,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx298(Close, { asChild: true, children: /* @__PURE__ */ jsx298(
+          !hideCloseButton && /* @__PURE__ */ jsx299(Close, { asChild: true, children: /* @__PURE__ */ jsx299(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx298(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx299(Icon, { type: "close" })
             }
           ) }),
-          withArrow ? /* @__PURE__ */ jsx298(PopoverArrow, { isAnimated }) : null,
-          /* @__PURE__ */ jsx298("div", { children })
+          withArrow ? /* @__PURE__ */ jsx299(PopoverArrow, { isAnimated }) : null,
+          /* @__PURE__ */ jsx299("div", { children })
         ]
       }
     ) })
@@ -15989,11 +16068,11 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled81 } from "styled-components";
+import { styled as styled82 } from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
-import { jsx as jsx299, jsxs as jsxs54 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled81.div`
+import { jsx as jsx300, jsxs as jsxs54 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled82.div`
   --progress-bar-height: 8px;
 
   display: flex;
@@ -16007,7 +16086,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled81.div`
+var ProgressBarLabel = styled82.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -16015,7 +16094,7 @@ var ProgressBarLabel = styled81.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled81(ProgressIndicator)`
+var StyledProgressIndicator = styled82(ProgressIndicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   width: 100%;
@@ -16025,7 +16104,7 @@ var StyledProgressIndicator = styled81(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled81(ProgressRoot)`
+var StyledProgressBar = styled82(ProgressRoot)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -16047,15 +16126,15 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs54(ProgressBarWrapper, { children: [
-    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx299(
+    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx300(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx300(
       StyledProgressBar,
       {
         $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx299(
+        children: /* @__PURE__ */ jsx300(
           StyledProgressIndicator,
           {
             $colorScheme: colorScheme,
@@ -16065,7 +16144,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil34(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil34(labelRight) ? /* @__PURE__ */ jsx300(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -16073,8 +16152,8 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
-import { styled as styled82, css as css41 } from "styled-components";
-import { jsx as jsx300, jsxs as jsxs55 } from "react/jsx-runtime";
+import { styled as styled83, css as css41 } from "styled-components";
+import { jsx as jsx301, jsxs as jsxs55 } from "react/jsx-runtime";
 var sizeSmall2 = css41`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
@@ -16092,7 +16171,7 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled82.div`
+var StyledRadioWrapper = styled83.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -16126,7 +16205,7 @@ var StyledRadioWrapper = styled82.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled82.div`
+var StyledRadioInput = styled83.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -16152,7 +16231,7 @@ var StyledRadioInput = styled82.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = styled82.input`
+var StyledHiddenRadioInput = styled83.input`
   ${visuallyHiddenStyle}
 `;
 var Radio = forwardRef27(
@@ -16186,7 +16265,7 @@ var Radio = forwardRef27(
         $hideLabel: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx300(
+          /* @__PURE__ */ jsx301(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -16201,10 +16280,10 @@ var Radio = forwardRef27(
               value
             }
           ),
-          /* @__PURE__ */ jsx300(
+          /* @__PURE__ */ jsx301(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx300(StyledRadioInput, { $size: size }),
+              controlSlot: /* @__PURE__ */ jsx301(StyledRadioInput, { $size: size }),
               description,
               disabled,
               hideLabel,
@@ -16224,9 +16303,9 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
-import { styled as styled83, css as css42 } from "styled-components";
+import { styled as styled84, css as css42 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
-import { jsx as jsx301, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx302, jsxs as jsxs56 } from "react/jsx-runtime";
 var checkedStyles = css42`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
@@ -16276,7 +16355,7 @@ var imageCoverStyles = css42`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled83.label`
+var StyledCard2 = styled84.label`
   --wui-radio-card-border-color: var(--wui-color-border-secondary);
   --wui-radio-card-background-color: var(--wui-color-bg-surface);
   --wui-radio-card-cursor: pointer;
@@ -16330,7 +16409,7 @@ var StyledCard2 = styled83.label`
     }
   }
 `;
-var StyledHiddenInput = styled83.input`
+var StyledHiddenInput = styled84.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = forwardRef28(
@@ -16362,7 +16441,7 @@ var RadioCardRoot = forwardRef28(
         $padding: padding,
         htmlFor: computedId,
         children: [
-          /* @__PURE__ */ jsx301(
+          /* @__PURE__ */ jsx302(
             StyledHiddenInput,
             {
               ...props,
@@ -16385,12 +16464,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled85 } from "styled-components";
+import { styled as styled86 } from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled84 } from "styled-components";
-var RadioCardIndicator = styled84.div`
+import { styled as styled85 } from "styled-components";
+var RadioCardIndicator = styled85.div`
   --wui-radio-card-indicator-size: 14px;
   --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
   --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
@@ -16439,16 +16518,16 @@ var RadioCardIndicator = styled84.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx302, jsxs as jsxs57 } from "react/jsx-runtime";
-var StyledCardContent = styled85.div`
+import { jsx as jsx303, jsxs as jsxs57 } from "react/jsx-runtime";
+var StyledCardContent = styled86.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled85.div`
+var StyledCardIcon = styled86.div`
   display: contents;
 `;
-var StyledIndicatorContainer = styled85.div`
+var StyledIndicatorContainer = styled86.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -16460,17 +16539,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ jsxs57(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx303(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx303(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ jsxs57(Stack, { gap: "space-02", children: [
-      isNotNil35(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil35(icon) && /* @__PURE__ */ jsx303(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs57(
         Stack,
         {
           gap: "space-01",
           style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil35(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
-            isNotNil35(description) && /* @__PURE__ */ jsx302(
+            isNotNil35(label) && /* @__PURE__ */ jsx303(Text, { variant: "label3", children: /* @__PURE__ */ jsx303("strong", { children: label }) }),
+            isNotNil35(description) && /* @__PURE__ */ jsx303(
               Text,
               {
                 prominence: "secondary",
@@ -16487,22 +16566,22 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import { styled as styled86 } from "styled-components";
-var RadioCardChildrenContainer = styled86.div`
+import { styled as styled87 } from "styled-components";
+var RadioCardChildrenContainer = styled87.div`
   flex: 1 1 auto;
 `;
 
 // src/components/RadioCard/RadioCard.tsx
-import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
 var RadioCard = forwardRef29(
   ({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx303(
+    return /* @__PURE__ */ jsx304(
       RadioCardRoot,
       {
         ref,
         padding: children != null ? "space-00" : "space-04",
         ...rootProps,
-        children: children != null ? /* @__PURE__ */ jsx303(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx303(
+        children: children != null ? /* @__PURE__ */ jsx304(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx304(
           RadioCardDefaultLayout,
           {
             description,
@@ -16519,17 +16598,17 @@ RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx304 } from "react/jsx-runtime";
+import { jsx as jsx305 } from "react/jsx-runtime";
 var RadioCardImage = forwardRef30(
   ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx304(
+    return /* @__PURE__ */ jsx305(
       RadioCardRoot,
       {
         ref,
         ...rootProps,
         aspectRatio,
         padding,
-        children: /* @__PURE__ */ jsx304(
+        children: /* @__PURE__ */ jsx305(
           Image,
           {
             alt: label,
@@ -16547,49 +16626,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
-import { styled as styled87 } from "styled-components";
+import { styled as styled88 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx305, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs58 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled87.div`
+var Container10 = styled88.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled87.div`
+var ScrollContainer = styled88.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled87.div`
+var Shadow = styled88.div`
   pointer-events: none;
   position: absolute;
   transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
   box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
   z-index: 1;
 `;
-var ShadowAtTop = styled87(Shadow)`
+var ShadowAtTop = styled88(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled87(Shadow)`
+var ShadowAtBottom = styled88(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled87(Shadow)`
+var ShadowAtLeft = styled88(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled87(Shadow)`
+var ShadowAtRight = styled88(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -16630,11 +16709,11 @@ var ScrollArea = forwardRef31(
       updateShadows();
     }, [updateShadows]);
     return /* @__PURE__ */ jsxs58(Container10, { style, children: [
-      /* @__PURE__ */ jsx305(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
-      /* @__PURE__ */ jsx305(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
-      /* @__PURE__ */ jsx305(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
-      /* @__PURE__ */ jsx305(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
-      /* @__PURE__ */ jsx305(
+      /* @__PURE__ */ jsx306(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
+      /* @__PURE__ */ jsx306(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
+      /* @__PURE__ */ jsx306(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
+      /* @__PURE__ */ jsx306(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
+      /* @__PURE__ */ jsx306(
         ScrollContainer,
         {
           ref: scrollContainerRef,
@@ -16651,13 +16730,13 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled89, css as css44 } from "styled-components";
+import { styled as styled90, css as css44 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState24 } from "react";
-import { jsx as jsx306 } from "react/jsx-runtime";
+import { jsx as jsx307 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
@@ -16678,7 +16757,7 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx306(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx307(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = useContext15(SelectedItemStyleContext);
@@ -16689,7 +16768,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled88, css as css43 } from "styled-components";
+import { styled as styled89, css as css43 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -16705,13 +16784,13 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx308 } from "react/jsx-runtime";
 var selectedItemIndicatorStyles = css43`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = styled88.div`
+var SelectedItemIndicatorDiv = styled89.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -16727,7 +16806,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx307(
+  return /* @__PURE__ */ jsx308(
     SelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -16737,7 +16816,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx308, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx309, jsxs as jsxs59 } from "react/jsx-runtime";
 var segmentedControlStyles = css44`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -16749,7 +16828,7 @@ var segmentedControlStyles = css44`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled89(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled90(ToggleGroupRoot2)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef32(
@@ -16764,7 +16843,7 @@ var SegmentedControl = forwardRef32(
     if (isNil18(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx308(
+    return /* @__PURE__ */ jsx309(
       StyledSegmentedControl,
       {
         ref,
@@ -16776,9 +16855,9 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx308(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs59(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx309(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs59(SelectedItemStyleProvider, { children: [
           children,
-          /* @__PURE__ */ jsx308(SelectedItemIndicator, {})
+          /* @__PURE__ */ jsx309(SelectedItemIndicator, {})
         ] }) })
       }
     );
@@ -16788,7 +16867,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
-import { styled as styled90, css as css45 } from "styled-components";
+import { styled as styled91, css as css45 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 import { jsxs as jsxs60 } from "react/jsx-runtime";
@@ -16860,7 +16939,7 @@ var segmentedControlItemStyles = css45`
     }
   }
 `;
-var StyledSegmentedControlItem = styled90(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled91(ToggleGroupItem2)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef33(
@@ -16933,9 +17012,9 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled91, css as css46 } from "styled-components";
-import { jsx as jsx309, jsxs as jsxs61 } from "react/jsx-runtime";
-var StyledTrigger2 = styled91(Trigger3)`
+import { styled as styled92, css as css46 } from "styled-components";
+import { jsx as jsx310, jsxs as jsxs61 } from "react/jsx-runtime";
+var StyledTrigger2 = styled92(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -16981,7 +17060,7 @@ var StyledTrigger2 = styled91(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled91(Content3)`
+var StyledContent3 = styled92(Content3)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -17009,10 +17088,10 @@ var scrollButtonStyles = css46`
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled91(ScrollDownButton)`
+var StyledScrollDownButton = styled92(ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled91(ScrollUpButton)`
+var StyledScrollUpButton = styled92(ScrollUpButton)`
   ${scrollButtonStyles}
 `;
 var Select = forwardRef34(
@@ -17044,8 +17123,8 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx309(Value, { placeholder }),
-            /* @__PURE__ */ jsx309(
+            /* @__PURE__ */ jsx310(Value, { placeholder }),
+            /* @__PURE__ */ jsx310(
               Icon,
               {
                 size: "md",
@@ -17055,16 +17134,16 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx309(Portal2, { children: /* @__PURE__ */ jsxs61(StyledContent3, { position: "popper", children: [
-        /* @__PURE__ */ jsx309(StyledScrollUpButton, { children: /* @__PURE__ */ jsx309(
+      /* @__PURE__ */ jsx310(Portal2, { children: /* @__PURE__ */ jsxs61(StyledContent3, { position: "popper", children: [
+        /* @__PURE__ */ jsx310(StyledScrollUpButton, { children: /* @__PURE__ */ jsx310(
           Icon,
           {
             size: "sm",
             type: "caret-up"
           }
         ) }),
-        /* @__PURE__ */ jsx309(Viewport, { children }),
-        /* @__PURE__ */ jsx309(StyledScrollDownButton, { children: /* @__PURE__ */ jsx309(
+        /* @__PURE__ */ jsx310(Viewport, { children }),
+        /* @__PURE__ */ jsx310(StyledScrollDownButton, { children: /* @__PURE__ */ jsx310(
           Icon,
           {
             size: "sm",
@@ -17080,10 +17159,10 @@ Select.displayName = "Select_UI";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
-import { styled as styled92 } from "styled-components";
+import { styled as styled93 } from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsx as jsx310, jsxs as jsxs62 } from "react/jsx-runtime";
-var StyledItem = styled92(Item)`
+import { jsx as jsx311, jsxs as jsxs62 } from "react/jsx-runtime";
+var StyledItem = styled93(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -17120,9 +17199,9 @@ var SelectOption = forwardRef35(
         children: [
           isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
             children,
-            /* @__PURE__ */ jsx310("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx310(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx310(ItemText, { children }),
-          /* @__PURE__ */ jsx310(ItemIndicator, { children: /* @__PURE__ */ jsx310(
+            /* @__PURE__ */ jsx311("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx311(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx311(ItemText, { children }),
+          /* @__PURE__ */ jsx311(ItemIndicator, { children: /* @__PURE__ */ jsx311(
             Icon,
             {
               size: "md",
@@ -17138,14 +17217,14 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
-import { styled as styled93 } from "styled-components";
-import { jsx as jsx311, jsxs as jsxs63 } from "react/jsx-runtime";
-var StyledLabel4 = styled93(Label3)`
+import { styled as styled94 } from "styled-components";
+import { jsx as jsx312, jsxs as jsxs63 } from "react/jsx-runtime";
+var StyledLabel4 = styled94(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs63(Group, { ...props, children: [
-    /* @__PURE__ */ jsx311(StyledLabel4, { children: /* @__PURE__ */ jsx311(
+    /* @__PURE__ */ jsx312(StyledLabel4, { children: /* @__PURE__ */ jsx312(
       Heading,
       {
         renderAs: "span",
@@ -17164,10 +17243,10 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled94 } from "styled-components";
+import { styled as styled95 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
-import { jsx as jsx312, jsxs as jsxs64 } from "react/jsx-runtime";
-var SliderContainer = styled94.div`
+import { jsx as jsx313, jsxs as jsxs64 } from "react/jsx-runtime";
+var SliderContainer = styled95.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
   --wui-slider-range-color: var(--wui-color-bg-fill);
@@ -17183,7 +17262,7 @@ var SliderContainer = styled94.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled94(RadixSliderRoot)`
+var StyledSliderRoot = styled95(RadixSliderRoot)`
   position: relative;
   display: flex;
   align-items: center;
@@ -17191,20 +17270,20 @@ var StyledSliderRoot = styled94(RadixSliderRoot)`
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled94(RadixSliderTrack)`
+var StyledSliderTrack = styled95(RadixSliderTrack)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
   flex-grow: 1;
   height: 6px;
   position: relative;
 `;
-var StyledSliderRange = styled94(RadixSliderRange)`
+var StyledSliderRange = styled95(RadixSliderRange)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = styled94(RadixSliderThumb)`
+var StyledSliderThumb = styled95(RadixSliderThumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -17255,7 +17334,7 @@ var Slider = ({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsx312(
+  return /* @__PURE__ */ jsx313(
     SliderContainer,
     {
       ...otherProps,
@@ -17273,8 +17352,8 @@ var Slider = ({
           step,
           ...value ? { value } : {},
           children: [
-            /* @__PURE__ */ jsx312(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx312(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
-            values.map((_, index) => /* @__PURE__ */ jsx312(
+            /* @__PURE__ */ jsx313(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx313(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+            values.map((_, index) => /* @__PURE__ */ jsx313(
               StyledSliderThumb,
               {
                 "data-testid": `${dataTestId}-thumb-${index}`
@@ -17290,9 +17369,9 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled95, css as css47 } from "styled-components";
-import { jsx as jsx313 } from "react/jsx-runtime";
-var StyledTable = styled95.table`
+import { styled as styled96, css as css47 } from "styled-components";
+import { jsx as jsx314 } from "react/jsx-runtime";
+var StyledTable = styled96.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -17321,7 +17400,7 @@ var Table = ({
   visuallyHiddenHeader = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx313(
+  return /* @__PURE__ */ jsx314(
     StyledTable,
     {
       $divided: divided,
@@ -17335,35 +17414,35 @@ var Table = ({
 
 // src/components/Table/TableBody.tsx
 import "react";
-import { styled as styled96 } from "styled-components";
+import { styled as styled97 } from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext11 } from "react";
 var TableSectionContext = createContext11(null);
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx314 } from "react/jsx-runtime";
-var StyledTableBody = styled96.tbody``;
+import { jsx as jsx315 } from "react/jsx-runtime";
+var StyledTableBody = styled97.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx314(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx314(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ jsx315(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx315(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled97, css as css48 } from "styled-components";
-import { jsx as jsx315 } from "react/jsx-runtime";
+import { styled as styled98, css as css48 } from "styled-components";
+import { jsx as jsx316 } from "react/jsx-runtime";
 var sharedStyles = css48`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled97.th`
+var StyledTh = styled98.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = styled97.td`
+var StyledTd = styled98.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -17372,35 +17451,35 @@ var StyledTd = styled97.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext17(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx315(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx316(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx315(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx316(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFoot.tsx
 import "react";
-import { styled as styled98 } from "styled-components";
-import { jsx as jsx316 } from "react/jsx-runtime";
-var StyledTableFoot = styled98.tfoot``;
+import { styled as styled99 } from "styled-components";
+import { jsx as jsx317 } from "react/jsx-runtime";
+var StyledTableFoot = styled99.tfoot``;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx316(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx316(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx317(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx317(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
 import "react";
-import { styled as styled99 } from "styled-components";
-import { jsx as jsx317 } from "react/jsx-runtime";
-var StyledThead = styled99.thead``;
+import { styled as styled100 } from "styled-components";
+import { jsx as jsx318 } from "react/jsx-runtime";
+var StyledThead = styled100.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx317(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx317(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx318(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx318(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import { styled as styled100 } from "styled-components";
-import { jsx as jsx318 } from "react/jsx-runtime";
-var StyledTableRow = styled100.tr``;
+import { styled as styled101 } from "styled-components";
+import { jsx as jsx319 } from "react/jsx-runtime";
+var StyledTableRow = styled101.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx318(StyledTableRow, { ...props, children });
+  return /* @__PURE__ */ jsx319(StyledTableRow, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
@@ -17421,7 +17500,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx319 } from "react/jsx-runtime";
+import { jsx as jsx320 } from "react/jsx-runtime";
 var Tabs = ({
   children,
   value: valueProp,
@@ -17449,42 +17528,42 @@ var Tabs = ({
   if (isNotNil38(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx319(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx319(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx319(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx320(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx320(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx320(SelectedItemStyleProvider, { children }) }) });
 };
 Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx320 } from "react/jsx-runtime";
+import { jsx as jsx321 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx320(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx321(RadixTabsContent, { value, children });
 };
 TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { styled as styled102 } from "styled-components";
+import { styled as styled103 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import { styled as styled101 } from "styled-components";
-var TabsSelectedItemIndicatorDiv = styled101(SelectedItemIndicatorDiv)`
+import { styled as styled102 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled102(SelectedItemIndicatorDiv)`
   &:has(~ button[role='tab']:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
 `;
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-import { jsx as jsx321 } from "react/jsx-runtime";
+import { jsx as jsx322 } from "react/jsx-runtime";
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
   if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx321(
+  return /* @__PURE__ */ jsx322(
     TabsSelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -17494,8 +17573,8 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx322, jsxs as jsxs65 } from "react/jsx-runtime";
-var StyledRadixTabsList = styled102(RadixTabList)`
+import { jsx as jsx323, jsxs as jsxs65 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled103(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -17506,7 +17585,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
       "aria-label": props["aria-label"],
       children: [
         children,
-        /* @__PURE__ */ jsx322(SelectedTabIndicator, {})
+        /* @__PURE__ */ jsx323(SelectedTabIndicator, {})
       ]
     }
   );
@@ -17518,9 +17597,9 @@ import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef2
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import { styled as styled103 } from "styled-components";
+import { styled as styled104 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledRadixTabsTrigger = styled103(RadixTabsTrigger)`
+var StyledRadixTabsTrigger = styled104(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -17581,14 +17660,14 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import { styled as styled104 } from "styled-components";
+import { styled as styled105 } from "styled-components";
 import { isNotNil as isNotNil40 } from "@wistia/type-guards";
-import { jsx as jsx323, jsxs as jsxs67 } from "react/jsx-runtime";
-var StyledThumbnailBadge = styled104.div`
+import { jsx as jsx324, jsxs as jsxs67 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled105.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
-  bottom: var(--wui-space-01);
+  bottom: var(--wui-thumbnail-badge-offset);
   color: var(--wui-color-text-on-fill);
   display: flex;
   font-size: var(--wui-typography-body-4-size);
@@ -17596,7 +17675,7 @@ var StyledThumbnailBadge = styled104.div`
   gap: var(--wui-space-01);
   padding: 0 var(--wui-space-01);
   position: absolute;
-  right: var(--wui-space-01);
+  right: var(--wui-thumbnail-badge-offset);
   z-index: 1;
 
   svg {
@@ -17612,15 +17691,22 @@ var StyledThumbnailBadge = styled104.div`
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs67(StyledThumbnailBadge, { ...props, children: [
     isNotNil40(icon) && icon,
-    /* @__PURE__ */ jsx323("span", { children: label })
+    /* @__PURE__ */ jsx324("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
-import { styled as styled106 } from "styled-components";
-import { isNil as isNil19, isNotNil as isNotNil43, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
+import { styled as styled107 } from "styled-components";
+import {
+  isNil as isNil19,
+  isNotNil as isNotNil43,
+  isUndefined as isUndefined7,
+  isEmptyString as isEmptyString2,
+  isString as isString4,
+  isNonEmptyString as isNonEmptyString10
+} from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil41 } from "@wistia/type-guards";
@@ -17755,10 +17841,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import { styled as styled105 } from "styled-components";
+import { styled as styled106 } from "styled-components";
 import { isNotNil as isNotNil42 } from "@wistia/type-guards";
-import { jsx as jsx324, jsxs as jsxs68 } from "react/jsx-runtime";
-var ScrubLine = styled105.div`
+import { jsx as jsx325, jsxs as jsxs68 } from "react/jsx-runtime";
+var ScrubLine = styled106.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -17875,8 +17961,8 @@ var ThumbnailStoryboardViewer = ({
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx324("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx324(
+        /* @__PURE__ */ jsx325("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx325(
           ScrubLine,
           {
             style: {
@@ -17890,7 +17976,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx325, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx326, jsxs as jsxs69 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -17899,19 +17985,19 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled106.img`
+var WideThumbnailImage = styled107.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled106.img`
+var SquareThumbnailImage = styled107.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx325(
+    return /* @__PURE__ */ jsx326(
       WideThumbnailImage,
       {
         alt: "",
@@ -17920,7 +18006,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx325(
+  return /* @__PURE__ */ jsx326(
     SquareThumbnailImage,
     {
       alt: "",
@@ -17929,7 +18015,17 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = styled106.div`
+var StyledThumbnailContainer = styled107.div`
+  container-type: size;
+  aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
+  width: ${({ $width }) => $width};
+  display: flex;
+  overflow: hidden;
+  ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
+`;
+var StyledThumbnail = styled107.div`
+  --wui-thumbnail-badge-offset: var(--wui-space-01);
+
   background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
@@ -17937,21 +18033,14 @@ var StyledThumbnail = styled106.div`
 )};
   background-position: center center;
   background-size: cover;
-  aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   display: flex;
+  width: 100%;
   overflow: hidden;
   position: relative;
-  width: ${({ $width }) => $width};
-  ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
+  border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
 
-  &,
-  img {
-    border-radius: ${({ $aspectRatio }) => {
-  if ($aspectRatio === "square") {
-    return "8%";
-  }
-  return `calc(8% * (9 / 16)) / 8%`;
-}};
+  @container (min-width: 200px) {
+    --wui-thumbnail-badge-offset: var(--wui-space-02);
   }
 `;
 var StoryboardRenderer = ({
@@ -17965,7 +18054,7 @@ var StoryboardRenderer = ({
   const { url, width: sbWidth, height: sbHeight, frameHeight, frameWidth, frameCount } = storyboard;
   const targetWidth = isString4(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
-  return /* @__PURE__ */ jsx325(
+  return /* @__PURE__ */ jsx326(
     ThumbnailStoryboardViewer,
     {
       cursorPosition: effectiveCursorPosition,
@@ -17990,6 +18079,9 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
     left: relativeLeft
   };
 };
+var hasValidThumbnailUrl = (thumbnailUrl) => {
+  return isNotNil43(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
+};
 var Thumbnail = forwardRef37(
   ({
     gradientBackground = "defaultMidOne",
@@ -18008,7 +18100,7 @@ var Thumbnail = forwardRef37(
     const storyboardElementRef = useRef24(null);
     const [cursorPosition, setCursorPosition] = useState26(null);
     const backgroundUrl = useMemo17(
-      () => thumbnailImageType === "square" && isNotNil43(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
     const isScrubbable = isNotNil43(storyboard);
@@ -18048,7 +18140,7 @@ var Thumbnail = forwardRef37(
     }, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
     let thumbnailContent = null;
     if (storyboard && shouldRenderStoryboard) {
-      thumbnailContent = /* @__PURE__ */ jsx325(
+      thumbnailContent = /* @__PURE__ */ jsx326(
         StoryboardRenderer,
         {
           aspectRatio,
@@ -18059,8 +18151,8 @@ var Thumbnail = forwardRef37(
           width
         }
       );
-    } else if (isNotNil43(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx325(
+    } else if (hasValidThumbnailUrl(thumbnailUrl)) {
+      thumbnailContent = /* @__PURE__ */ jsx326(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -18070,24 +18162,31 @@ var Thumbnail = forwardRef37(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsxs69(
-      StyledThumbnail,
+    return /* @__PURE__ */ jsx326(
+      StyledThumbnailContainer,
       {
         ref,
-        ...props,
         $aspectRatio: aspectRatio,
-        $backgroundUrl: backgroundUrl,
-        $gradientBackground: gradientBackground,
         $isScrubbable: isScrubbable,
         $width: width,
+        "data-wui-thumbnail-container": true,
         onBlur: handleMouseOut,
         onMouseMove: handleMouseMove,
         onMouseOut: handleMouseOut,
         role: "presentation",
-        children: [
-          isNotNil43(children) ? children : null,
-          thumbnailContent
-        ]
+        ...props,
+        children: /* @__PURE__ */ jsxs69(
+          StyledThumbnail,
+          {
+            $backgroundUrl: backgroundUrl,
+            $gradientBackground: gradientBackground,
+            "data-testid": "thumbnail-inner",
+            children: [
+              isNotNil43(children) ? children : null,
+              thumbnailContent
+            ]
+          }
+        )
       }
     );
   }
@@ -18096,75 +18195,57 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import React5 from "react";
-import { styled as styled107 } from "styled-components";
+import { styled as styled108 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx326 } from "react/jsx-runtime";
-var StyledThumbnailCollage = styled107.div`
+import { jsx as jsx327 } from "react/jsx-runtime";
+var ThumbnailCollageContainer = styled108.div`
+  container-type: size;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: flex;
+`;
+var StyledThumbnailCollage = styled108.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
-  aspect-ratio: 16 / 9;
 
   &:has(:nth-child(1)) {
-    --wui-collage-thumbnail-first-border-radius: calc(8% * (9 / 16)) / 8%;
-
     grid-template-areas:
       'a a'
       'a a';
   }
 
   &:has(:nth-child(2)) {
-    --wui-collage-thumbnail-first-border-radius: 7.5% / 8%;
-    --wui-collage-thumbnail-second-border-radius: 11.5% / 8%;
-
     grid-template-areas:
       'a b'
       'a b';
   }
 
   &:has(:nth-child(3)) {
-    --wui-collage-thumbnail-first-border-radius: 7.5% / 8%;
-    --wui-collage-thumbnail-second-border-radius: 11.5% / 16%;
-    --wui-collage-thumbnail-third-border-radius: 11.5% / 16%;
-
     grid-template-areas:
       'a b'
       'a c';
   }
 
   > :nth-child(1) {
-    --wui-collage-thumbnail-border-radius: var(--wui-collage-thumbnail-first-border-radius);
-
     grid-area: a;
   }
 
   > :nth-child(2) {
-    --wui-collage-thumbnail-border-radius: var(--wui-collage-thumbnail-second-border-radius);
-
     grid-area: b;
   }
 
   > :nth-child(3) {
-    --wui-collage-thumbnail-border-radius: var(--wui-collage-thumbnail-third-border-radius);
-
     grid-area: c;
   }
 
-  > * {
+  [data-wui-thumbnail-container] {
+    container-type: unset;
     aspect-ratio: unset;
     height: 100%;
     width: 100%;
-    border-radius: var(--wui-collage-thumbnail-border-radius);
-
-    img {
-      border-radius: var(--wui-collage-thumbnail-border-radius);
-    }
-
-    > :not(img) {
-      display: none;
-    }
   }
 `;
 var ThumbnailCollage = ({
@@ -18181,7 +18262,7 @@ var ThumbnailCollage = ({
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx326(
+    /* @__PURE__ */ jsx327(
       Thumbnail,
       {
         gradientBackground,
@@ -18190,7 +18271,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsx327(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx327(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -18198,30 +18279,30 @@ var ThumbnailCollage = ({
       ...props,
       children: thumbnails
     }
-  );
+  ) });
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled108, css as css50 } from "styled-components";
+import { styled as styled109, css as css50 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { jsx as jsx327, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx328, jsxs as jsxs70 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx327(
+    return /* @__PURE__ */ jsx328(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx327("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ jsx328("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ jsx327(
+  return /* @__PURE__ */ jsx328(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx327("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ jsx328("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -18229,12 +18310,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx327(
+  return /* @__PURE__ */ jsx328(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx327("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ jsx328("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -18244,7 +18325,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled108.svg`
+var WistiaLogoComponent = styled109.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -18315,23 +18396,23 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx327("title", { children: title }),
-        isNotNil44(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx328("title", { children: title }),
+        isNotNil44(description) ? /* @__PURE__ */ jsx328("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx327("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx328("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-import { styled as styled109 } from "styled-components";
+import { styled as styled110 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { cloneElement as cloneElement9 } from "react";
-import { jsx as jsx328, jsxs as jsxs71 } from "react/jsx-runtime";
-var StyledSplitButton = styled109.span`
+import { jsx as jsx329, jsxs as jsxs71 } from "react/jsx-runtime";
+var StyledSplitButton = styled110.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
 
@@ -18352,7 +18433,7 @@ var StyledSplitButton = styled109.span`
 var SplitButton = ({
   children,
   menuLabel = "Select an option",
-  menuIcon = /* @__PURE__ */ jsx328(Icon, { type: "caret-down" }),
+  menuIcon = /* @__PURE__ */ jsx329(Icon, { type: "caret-down" }),
   menuItems,
   disabled = false,
   colorScheme = "inherit",
@@ -18364,7 +18445,7 @@ var SplitButton = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs71(StyledSplitButton, { $colorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx328(
+    /* @__PURE__ */ jsx329(
       Button,
       {
         disabled,
@@ -18375,12 +18456,12 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil45(menuItems) && /* @__PURE__ */ jsx328(
+    isNotNil45(menuItems) && /* @__PURE__ */ jsx329(
       Menu,
       {
         ...menuProps,
         disabled,
-        trigger: /* @__PURE__ */ jsx328(
+        trigger: /* @__PURE__ */ jsx329(
           IconButton,
           {
             disabled,
@@ -18403,6 +18484,7 @@ export {
   Avatar,
   Badge,
   Banner,
+  BannerImage,
   Box,
   Breadcrumb,
   Breadcrumbs,