@wistia/ui 0.20.16 → 0.20.17-beta.db84371d.0109ccc

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.16
+ * @license @wistia/ui v0.20.17-beta.db84371d.0109ccc
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -14287,11 +14287,32 @@ var ContextMenu = ({
   return menu;
 };
 
+// src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
+import { styled as styled58 } from "styled-components";
+import { jsx as jsx289 } from "react/jsx-runtime";
+var StyledCustomizableThemeWrapper = styled58.div(
+  (props) => props.$overrides
+);
+var CustomizableThemeWrapper = ({
+  children,
+  overrides,
+  ...props
+}) => /* @__PURE__ */ jsx289(
+  StyledCustomizableThemeWrapper,
+  {
+    ...props,
+    $overrides: overrides,
+    "data-wui-theme": "true",
+    children
+  }
+);
+CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
+
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef16 } from "react";
-import { styled as styled58, keyframes as keyframes4 } from "styled-components";
+import { styled as styled59, keyframes as keyframes4 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
-import { jsx as jsx289, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx290, jsxs as jsxs41 } from "react/jsx-runtime";
 var pulse = keyframes4`
   0%,
       100% {
@@ -14301,7 +14322,7 @@ var pulse = keyframes4`
         opacity: 0.5;
       }
 `;
-var StyledDataCard = styled58.div`
+var StyledDataCard = styled59.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);
@@ -14387,7 +14408,7 @@ var StyledDataCard = styled58.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var StyledLabel3 = styled58(Heading)`
+var StyledLabel3 = styled59(Heading)`
   grid-area: label;
 
   &[data-wui-data-card-skeleton='true'] {
@@ -14398,25 +14419,25 @@ var StyledLabel3 = styled58(Heading)`
     text-align: left;
   }
 `;
-var StyledValue = styled58(Heading)`
+var StyledValue = styled59(Heading)`
   grid-area: value;
 
   &[data-wui-data-card-skeleton='true'] {
     width: min(90%, 156px);
   }
 `;
-var StyledSlot = styled58.div`
+var StyledSlot = styled59.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled58.div`
+var StyledDataCardTrendContainer = styled59.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = styled58(Text)`
+var StyledSubtitle = styled59(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -14434,7 +14455,7 @@ var DataCardInner = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx289(
+      /* @__PURE__ */ jsx290(
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
@@ -14443,7 +14464,7 @@ var DataCardInner = ({
           children: label
         }
       ),
-      /* @__PURE__ */ jsx289(
+      /* @__PURE__ */ jsx290(
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
@@ -14452,8 +14473,8 @@ var DataCardInner = ({
           children: value
         }
       ),
-      isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx289(StyledSlot, { children: upperRightSlot }),
-      isNotNil25(subtitle) && !isLoading && /* @__PURE__ */ jsx289(
+      isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx290(StyledSlot, { children: upperRightSlot }),
+      isNotNil25(subtitle) && !isLoading && /* @__PURE__ */ jsx290(
         StyledSubtitle,
         {
           "data-wui-data-card-subtitle": true,
@@ -14461,7 +14482,7 @@ var DataCardInner = ({
           children: subtitle
         }
       ),
-      isNotNil25(trend) && !isLoading && /* @__PURE__ */ jsx289(StyledDataCardTrendContainer, { children: trend })
+      isNotNil25(trend) && !isLoading && /* @__PURE__ */ jsx290(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -14469,12 +14490,12 @@ var DataCard = (props) => {
   const ref = useRef16(null);
   if (isNotNil25(props.href) || isNotNil25(props.onClick)) {
     const { "aria-pressed": ariaPressed, ...dataCardProps } = props;
-    return /* @__PURE__ */ jsx289(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx289(
+    return /* @__PURE__ */ jsx290(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx290(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot,
         ...dataCardProps,
-        label: /* @__PURE__ */ jsx289(
+        label: /* @__PURE__ */ jsx290(
           Button,
           {
             ref,
@@ -14491,14 +14512,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx289(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx290(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-import { styled as styled59 } from "styled-components";
-import { jsx as jsx290 } from "react/jsx-runtime";
-var StyledDataCards = styled59(Box)`
+import { styled as styled60 } from "styled-components";
+import { jsx as jsx291 } from "react/jsx-runtime";
+var StyledDataCards = styled60(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-data-cards-column-count: ${({ $columns }) => $columns === "auto" ? void 0 : $columns};
   --wui-data-cards-total-column-gap-width: calc(var(--wui-data-cards-column-count) - 1) *
@@ -14522,7 +14543,7 @@ var DataCards = ({
 }) => {
   const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
   const responsiveColumns = useResponsiveProp(columns);
-  return /* @__PURE__ */ jsx290(
+  return /* @__PURE__ */ jsx291(
     StyledDataCards,
     {
       ...props,
@@ -14541,9 +14562,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-import { styled as styled60 } from "styled-components";
-import { jsx as jsx291, jsxs as jsxs42 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled60.div`
+import { styled as styled61 } from "styled-components";
+import { jsx as jsx292, jsxs as jsxs42 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled61.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -14559,7 +14580,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs42(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx291(
+    /* @__PURE__ */ jsx292(
       Icon,
       {
         size: "md",
@@ -14567,7 +14588,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx291(
+    /* @__PURE__ */ jsx292(
       Text,
       {
         prominence: "secondary",
@@ -14579,15 +14600,15 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-import { styled as styled61 } from "styled-components";
-import { jsx as jsx292 } from "react/jsx-runtime";
-var StyledIconContainer = styled61.div`
+import { styled as styled62 } from "styled-components";
+import { jsx as jsx293 } from "react/jsx-runtime";
+var StyledIconContainer = styled62.div`
   display: flex;
   align-items: center;
   align-self: center;
   height: 0;
 `;
-var DataCardHoverArrow = () => /* @__PURE__ */ jsx292(StyledIconContainer, { children: /* @__PURE__ */ jsx292(
+var DataCardHoverArrow = () => /* @__PURE__ */ jsx293(StyledIconContainer, { children: /* @__PURE__ */ jsx293(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -14597,9 +14618,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ jsx292(StyledIconContainer, { chi
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
-import { styled as styled62 } from "styled-components";
-import { jsx as jsx293 } from "react/jsx-runtime";
-var StyledDataList = styled62.dl`
+import { styled as styled63 } from "styled-components";
+import { jsx as jsx294 } from "react/jsx-runtime";
+var StyledDataList = styled63.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -14627,7 +14648,7 @@ var DataList = ({
   labelProminence = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx293(
+  return /* @__PURE__ */ jsx294(
     StyledDataList,
     {
       role: "list",
@@ -14650,9 +14671,9 @@ var DataListItem = ({ children }) => {
 DataListItem.displayName = "DataListItem_UI";
 
 // src/components/DataList/DataListItemLabel.tsx
-import { jsx as jsx294 } from "react/jsx-runtime";
+import { jsx as jsx295 } from "react/jsx-runtime";
 var DataListItemLabel = (props) => {
-  return /* @__PURE__ */ jsx294(
+  return /* @__PURE__ */ jsx295(
     Text,
     {
       variant: "label4",
@@ -14664,9 +14685,9 @@ var DataListItemLabel = (props) => {
 DataListItemLabel.displayName = "DataListItemLabel_UI";
 
 // src/components/DataList/DataListItemValue.tsx
-import { jsx as jsx295 } from "react/jsx-runtime";
+import { jsx as jsx296 } from "react/jsx-runtime";
 var DataListItemValue = (props) => {
-  return /* @__PURE__ */ jsx295(
+  return /* @__PURE__ */ jsx296(
     Text,
     {
       variant: "body3",
@@ -14678,8 +14699,8 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-import { styled as styled63, css as css33 } from "styled-components";
-import { jsx as jsx296 } from "react/jsx-runtime";
+import { styled as styled64, css as css33 } from "styled-components";
+import { jsx as jsx297 } from "react/jsx-runtime";
 var horizontalBorderCss = css33`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -14697,7 +14718,7 @@ var verticalBorderCss = css33`
   margin-top: var(--wui-divider-inset);
   margin-bottom: var(--wui-divider-inset);
 `;
-var DividerComponent = styled63.div`
+var DividerComponent = styled64.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -14718,7 +14739,7 @@ var Divider = ({
 }) => {
   const responsiveOrientation = useResponsiveProp(orientation);
   const responsiveInset = useResponsiveProp(inset);
-  return /* @__PURE__ */ jsx296(
+  return /* @__PURE__ */ jsx297(
     DividerComponent,
     {
       $inset: responsiveInset,
@@ -14732,10 +14753,10 @@ var Divider = ({
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { styled as styled64, css as css34 } from "styled-components";
+import { styled as styled65, css as css34 } from "styled-components";
 import { useState as useState19, useRef as useRef17 } from "react";
-import { Fragment as Fragment8, jsx as jsx297, jsxs as jsxs43 } from "react/jsx-runtime";
-var StyledInput = styled64(Input)`
+import { Fragment as Fragment8, jsx as jsx298, jsxs as jsxs43 } from "react/jsx-runtime";
+var StyledInput = styled65(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -14770,7 +14791,7 @@ var editableStyles = css34`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled64(Heading)`
+var StyledHeading2 = styled65(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -14827,7 +14848,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx297(
+  const HeadingComponent2 = /* @__PURE__ */ jsx298(
     StyledHeading2,
     {
       ref: headingRef,
@@ -14841,7 +14862,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx297(
+    return /* @__PURE__ */ jsx298(
       StyledInput,
       {
         $height: headingHeight,
@@ -14861,8 +14882,8 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs43(Fragment8, { children: [
-    /* @__PURE__ */ jsx297(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx297(ScreenReaderOnly, { children: /* @__PURE__ */ jsx297(
+    /* @__PURE__ */ jsx298(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx298(ScreenReaderOnly, { children: /* @__PURE__ */ jsx298(
       "button",
       {
         "aria-label": ariaLabel,
@@ -14875,14 +14896,14 @@ var EditableHeading = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 import { useContext as useContext6, useRef as useRef18, forwardRef as forwardRef21 } from "react";
-import { styled as styled66, css as css35 } from "styled-components";
+import { styled as styled67, 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 useState20, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
-import { styled as styled65 } from "styled-components";
-import { jsx as jsx298 } from "react/jsx-runtime";
+import { styled as styled66 } from "styled-components";
+import { jsx as jsx299 } from "react/jsx-runtime";
 var LARGE_PADDING = "var(--wui-space-02)";
 var SMALL_PADDING = "var(--wui-space-01)";
 var getPaddingForVariant = (variant) => {
@@ -14917,7 +14938,7 @@ var getPaddingForVariant = (variant) => {
   }
   return SMALL_PADDING;
 };
-var StyledEditableTextRoot = styled65.div`
+var StyledEditableTextRoot = styled66.div`
   display: contents;
 
   --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
@@ -15015,7 +15036,7 @@ var EditableTextRoot = ({
     }
     return "idle";
   };
-  return /* @__PURE__ */ jsx298(
+  return /* @__PURE__ */ jsx299(
     StyledEditableTextRoot,
     {
       $typographicVariant: typographicVariant,
@@ -15023,14 +15044,14 @@ var EditableTextRoot = ({
       "data-wui-editable-text-root": true,
       "data-wui-editable-text-state": getState(),
       ...props,
-      children: /* @__PURE__ */ jsx298(EditableTextContext.Provider, { value: context, children })
+      children: /* @__PURE__ */ jsx299(EditableTextContext.Provider, { value: context, children })
     }
   );
 };
 
 // src/components/EditableText/EditableTextDisplay.tsx
-import { jsx as jsx299, jsxs as jsxs44 } from "react/jsx-runtime";
-var StyledEditableTextDisplay = styled66.div`
+import { jsx as jsx300, jsxs as jsxs44 } from "react/jsx-runtime";
+var StyledEditableTextDisplay = styled67.div`
   ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
   padding: var(--wui-editable-text-padding);
   border-radius: var(--wui-editable-text-border-radius);
@@ -15083,7 +15104,7 @@ var EditableTextDisplayComponent = forwardRef21(
       return null;
     }
     if (asTrigger && !context.readOnly) {
-      return /* @__PURE__ */ jsx299(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs44(
+      return /* @__PURE__ */ jsx300(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs44(
         StyledEditableTextDisplay,
         {
           ref,
@@ -15095,7 +15116,7 @@ var EditableTextDisplayComponent = forwardRef21(
           ...props,
           children: [
             displayText,
-            /* @__PURE__ */ jsx299(
+            /* @__PURE__ */ jsx300(
               "button",
               {
                 ref: triggerButtonRef,
@@ -15109,7 +15130,7 @@ var EditableTextDisplayComponent = forwardRef21(
         }
       ) });
     }
-    return /* @__PURE__ */ jsx299(
+    return /* @__PURE__ */ jsx300(
       StyledEditableTextDisplay,
       {
         ref,
@@ -15133,10 +15154,10 @@ var EditableTextDisplay = makePolymorphic(
 
 // src/components/EditableText/EditableTextInput.tsx
 import { useContext as useContext7, useEffect as useEffect18, useRef as useRef19 } from "react";
-import { styled as styled67 } from "styled-components";
+import { styled as styled68 } from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsx as jsx300 } from "react/jsx-runtime";
-var StyledInput2 = styled67(Input)`
+import { jsx as jsx301 } from "react/jsx-runtime";
+var StyledInput2 = styled68(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));`}
@@ -15226,7 +15247,7 @@ var EditableTextInput = (props) => {
   if (!isEditing) {
     return null;
   }
-  return /* @__PURE__ */ jsx300(
+  return /* @__PURE__ */ jsx301(
     StyledInput2,
     {
       ref: inputRef,
@@ -15252,14 +15273,14 @@ var EditableTextInput = (props) => {
 
 // src/components/EditableText/EditableTextLabel.tsx
 import { useContext as useContext8 } from "react";
-import { jsx as jsx301 } from "react/jsx-runtime";
+import { jsx as jsx302 } 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__ */ jsx301(
+  return /* @__PURE__ */ jsx302(
     Label,
     {
       ...isEditing && { htmlFor: id },
@@ -15270,11 +15291,11 @@ var EditableTextLabel = ({ ...props }) => {
 };
 
 // src/components/EditableText/EditableText.tsx
-import { jsx as jsx302, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx303, jsxs as jsxs45 } from "react/jsx-runtime";
 var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs45(EditableTextRoot, { ...props, children: [
-  /* @__PURE__ */ jsx302(EditableTextLabel, { screenReaderOnly: hideLabel }),
-  /* @__PURE__ */ jsx302(EditableTextInput, {}),
-  /* @__PURE__ */ jsx302(EditableTextDisplay, { asTrigger: true })
+  /* @__PURE__ */ jsx303(EditableTextLabel, { screenReaderOnly: hideLabel }),
+  /* @__PURE__ */ jsx303(EditableTextInput, {}),
+  /* @__PURE__ */ jsx303(EditableTextDisplay, { asTrigger: true })
 ] });
 EditableText.displayName = "EditableText_UI";
 
@@ -15409,9 +15430,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext12, useRef as useRef20 } from "react";
 import { isArray as isArray3, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
-import { jsx as jsx303, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx304, jsxs as jsxs46 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx303("li", { children: /* @__PURE__ */ jsx303(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx304("li", { children: /* @__PURE__ */ jsx304(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef20(null);
@@ -15421,9 +15442,9 @@ var FormErrorSummary = ({ description }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs46("div", { ref, children: [
-    /* @__PURE__ */ jsx303("p", { children: description }),
-    /* @__PURE__ */ jsx303("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
-      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx303(
+    /* @__PURE__ */ jsx304("p", { children: description }),
+    /* @__PURE__ */ jsx304("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
+      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx304(
         ErrorItem,
         {
           error: err,
@@ -15431,7 +15452,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx303(
+      )) : /* @__PURE__ */ jsx304(
         ErrorItem,
         {
           error: error ?? "",
@@ -15470,9 +15491,9 @@ var validateWithYup = (schema) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled68, css as css36 } from "styled-components";
+import { styled as styled69, css as css36 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined13, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { jsx as jsx304, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs47 } from "react/jsx-runtime";
 var inlineErrorStyles = css36`
   grid-template-rows: 1fr auto;
   grid-template-areas: 'label-description input' '. error';
@@ -15485,7 +15506,7 @@ var blockGridErrorStyles = css36`
   grid-template-rows: auto 1fr auto;
   grid-template-areas: 'label-description' 'input' 'error';
 `;
-var StyledFormField = styled68.div`
+var StyledFormField = styled69.div`
   --form-field-spacing: var(--wui-space-02);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -15519,10 +15540,10 @@ var StyledFormField = styled68.div`
     ${({ $hasError }) => $hasError && blockGridErrorStyles}
   }
 `;
-var ErrorText = styled68(Text)`
+var ErrorText = styled69(Text)`
   grid-area: error;
 `;
-var StyledErrorList = styled68.ul`
+var StyledErrorList = styled69.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -15535,7 +15556,7 @@ var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = isArray4(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
-    return /* @__PURE__ */ jsx304(
+    return /* @__PURE__ */ jsx305(
       ErrorText,
       {
         colorScheme: "error",
@@ -15548,7 +15569,7 @@ var ErrorMessages = ({ errors, id }) => {
     );
   }
   if (!isMultipleErrors) {
-    return /* @__PURE__ */ jsx304(
+    return /* @__PURE__ */ jsx305(
       ErrorText,
       {
         colorScheme: "error",
@@ -15560,7 +15581,7 @@ var ErrorMessages = ({ errors, id }) => {
       id
     );
   }
-  return /* @__PURE__ */ jsx304(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx304(
+  return /* @__PURE__ */ jsx305(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx305(
     Text,
     {
       colorScheme: "error",
@@ -15645,7 +15666,7 @@ var FormField = ({
               gridArea: "label-description"
             },
             children: [
-              !isIntegratedLabel && /* @__PURE__ */ jsx304(
+              !isIntegratedLabel && /* @__PURE__ */ jsx305(
                 Label,
                 {
                   htmlFor: computedId,
@@ -15653,12 +15674,12 @@ var FormField = ({
                   children: label
                 }
               ),
-              hasDescription ? /* @__PURE__ */ jsx304(FormControlLabelDescription, { id: descriptionId, children: description }) : null
+              hasDescription ? /* @__PURE__ */ jsx305(FormControlLabelDescription, { id: descriptionId, children: description }) : null
             ]
           }
         ) : null,
         cloneElement8(children, childProps),
-        hasError ? /* @__PURE__ */ jsx304(
+        hasError ? /* @__PURE__ */ jsx305(
           ErrorMessages,
           {
             errors: computedError,
@@ -15673,7 +15694,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 jsx305 } from "react/jsx-runtime";
+import { jsx as jsx306 } from "react/jsx-runtime";
 var RadioGroupContext = createContext8(null);
 var useRadioGroup = () => {
   return useContext14(RadioGroupContext);
@@ -15694,15 +15715,15 @@ var RadioGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ jsx305(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx305(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx306(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx306(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled69, css as css37 } from "styled-components";
+import { styled as styled70, css as css37 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
-import { jsx as jsx306 } from "react/jsx-runtime";
+import { jsx as jsx307 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
@@ -15730,7 +15751,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
     );
   `;
 };
-var StyledGrid = styled69.div`
+var StyledGrid = styled70.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
 
@@ -15754,7 +15775,7 @@ var GridComponent = forwardRef22(
     const { column, row } = isRecord5(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
     const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
-    return /* @__PURE__ */ jsx306(
+    return /* @__PURE__ */ jsx307(
       StyledGrid,
       {
         ref,
@@ -15774,11 +15795,11 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-import { styled as styled70 } from "styled-components";
+import { styled as styled71 } from "styled-components";
 import { forwardRef as forwardRef23, useEffect as useEffect19, useState as useState22 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
-import { jsx as jsx307 } from "react/jsx-runtime";
-var StyledIconButton = styled70(IconButton)`
+import { jsx as jsx308 } from "react/jsx-runtime";
+var StyledIconButton = styled71(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15817,7 +15838,7 @@ var InputClickToCopy = forwardRef23(
         return value;
       });
     };
-    return /* @__PURE__ */ jsx307(
+    return /* @__PURE__ */ jsx308(
       Input,
       {
         "aria-label": "Click to Copy",
@@ -15825,7 +15846,7 @@ var InputClickToCopy = forwardRef23(
         ref,
         disabled,
         readOnly: true,
-        rightIcon: /* @__PURE__ */ jsx307(
+        rightIcon: /* @__PURE__ */ jsx308(
           StyledIconButton,
           {
             colorScheme: isCopied ? "success" : "inherit",
@@ -15833,7 +15854,7 @@ var InputClickToCopy = forwardRef23(
             label: "Copy to clipboard",
             onClick: handleClick,
             variant: "ghost",
-            children: isCopied ? /* @__PURE__ */ jsx307(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx307(Icon, { type: "save-as-copy" })
+            children: isCopied ? /* @__PURE__ */ jsx308(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx308(Icon, { type: "save-as-copy" })
           }
         ),
         value
@@ -15844,11 +15865,11 @@ var InputClickToCopy = forwardRef23(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-import { styled as styled71 } from "styled-components";
+import { styled as styled72 } from "styled-components";
 import { forwardRef as forwardRef24, useState as useState23 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
-import { jsx as jsx308 } from "react/jsx-runtime";
-var StyledIconButton2 = styled71(IconButton)`
+import { jsx as jsx309 } from "react/jsx-runtime";
+var StyledIconButton2 = styled72(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15866,13 +15887,13 @@ var InputPassword = forwardRef24(
         onVisibilityToggle(newVisibility);
       }
     };
-    return /* @__PURE__ */ jsx308(
+    return /* @__PURE__ */ jsx309(
       Input,
       {
         ...props,
         ref,
         disabled,
-        rightIcon: /* @__PURE__ */ jsx308(
+        rightIcon: /* @__PURE__ */ jsx309(
           StyledIconButton2,
           {
             disabled,
@@ -15880,7 +15901,7 @@ var InputPassword = forwardRef24(
             onClick: handleClick,
             tabIndex: disabled ? -1 : 0,
             variant: "ghost",
-            children: /* @__PURE__ */ jsx308(Icon, { type: isVisible ? "preview" : "hide" })
+            children: /* @__PURE__ */ jsx309(Icon, { type: isVisible ? "preview" : "hide" })
           }
         ),
         type: isVisible ? "text" : "password"
@@ -15891,16 +15912,16 @@ var InputPassword = forwardRef24(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import { styled as styled72 } from "styled-components";
+import { styled as styled73 } from "styled-components";
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { jsx as jsx309, jsxs as jsxs48 } from "react/jsx-runtime";
-var StyledKeyboardShortcut = styled72.div`
+import { jsx as jsx310, jsxs as jsxs48 } from "react/jsx-runtime";
+var StyledKeyboardShortcut = styled73.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = styled72.kbd`
+var StyledKey = styled73.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -15923,11 +15944,11 @@ var StyledKey = styled72.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = styled72.span`
+var Label2 = styled73.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = styled72.div`
+var KeysContainer = styled73.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -15986,8 +16007,8 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      isNotNil29(label) && /* @__PURE__ */ jsx309(Label2, { children: label }),
-      /* @__PURE__ */ jsx309(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx309(
+      isNotNil29(label) && /* @__PURE__ */ jsx310(Label2, { children: label }),
+      /* @__PURE__ */ jsx310(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx310(
         StyledKey,
         {
           children: keyToString(keyboardKey)
@@ -16001,25 +16022,25 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled74, css as css38 } from "styled-components";
+import { styled as styled75, css as css38 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import { styled as styled73 } from "styled-components";
+import { styled as styled74 } from "styled-components";
 import { isNil as isNil17 } from "@wistia/type-guards";
-import { jsx as jsx310 } from "react/jsx-runtime";
-var ListItemComponent = styled73.li`
+import { jsx as jsx311 } from "react/jsx-runtime";
+var ListItemComponent = styled74.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
   if (isNil17(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx310(ListItemComponent, { children });
+  return /* @__PURE__ */ jsx311(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx311, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs49 } from "react/jsx-runtime";
 var spacesStyle = css38`
   overflow: hidden;
   padding-left: 0;
@@ -16078,7 +16099,7 @@ var unbulletedStyle = css38`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = styled74.ul`
+var ListComponent = styled75.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -16105,7 +16126,7 @@ var ListComponent = styled74.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsx312(
     ListComponent,
     {
       as: elementType,
@@ -16130,7 +16151,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ jsx311(ListItem, { children: item }, key);
+    return /* @__PURE__ */ jsx312(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -16158,9 +16179,9 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-import { styled as styled75 } from "styled-components";
-import { jsx as jsx312 } from "react/jsx-runtime";
-var StyledMark = styled75.mark`
+import { styled as styled76 } from "styled-components";
+import { jsx as jsx313 } from "react/jsx-runtime";
+var StyledMark = styled76.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
   color: var(--wui-color-text);
@@ -16168,7 +16189,7 @@ var StyledMark = styled75.mark`
   padding-inline: 0.1em;
   margin-inline: -0.1em;
 `;
-var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx312(
+var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx313(
   StyledMark,
   {
     $colorScheme: colorScheme,
@@ -16179,7 +16200,7 @@ var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */
 Mark.displayName = "Mark_UI";
 
 // src/components/Markdown/Markdown.tsx
-import { styled as styled76 } from "styled-components";
+import { styled as styled77 } from "styled-components";
 import ReactMarkdown from "react-markdown";
 
 // src/css/baseMarkdownCss.tsx
@@ -16307,8 +16328,8 @@ var baseMarkdownCss = (textSize = "body2") => css39`
 `;
 
 // src/components/Markdown/Markdown.tsx
-import { jsx as jsx313 } from "react/jsx-runtime";
-var StyledMarkdownWrapper = styled76.div`
+import { jsx as jsx314 } from "react/jsx-runtime";
+var StyledMarkdownWrapper = styled77.div`
   ${({ $textSize }) => baseMarkdownCss($textSize)}
 `;
 var Markdown = ({
@@ -16317,49 +16338,250 @@ var Markdown = ({
   ...otherProps
 }) => {
   const responsiveTextSize = useResponsiveProp(textSize);
-  return /* @__PURE__ */ jsx313(
+  return /* @__PURE__ */ jsx314(
     StyledMarkdownWrapper,
     {
       $textSize: responsiveTextSize,
       ...otherProps,
-      children: /* @__PURE__ */ jsx313(ReactMarkdown, { children })
+      children: /* @__PURE__ */ jsx314(ReactMarkdown, { children })
     }
   );
 };
 Markdown.displayName = "Markdown_UI";
 
+// src/components/Meter/Meter.tsx
+import { styled as styled78 } from "styled-components";
+import { useId as useId5 } from "react";
+import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { jsx as jsx315, jsxs as jsxs50 } from "react/jsx-runtime";
+var MeterWrapper = styled78.div`
+  --meter-height: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-space-02);
+`;
+var MeterLabelContainer = styled78.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+var MeterLabel = styled78.div`
+  font-family: var(--wui-typography-heading-5-family);
+  line-height: var(--wui-typography-heading-5-line-height);
+  font-size: var(--wui-typography-heading-5-size);
+  font-weight: var(--wui-typography-heading-5-weight);
+`;
+var MeterLabelMeta = styled78.div`
+  font-family: var(--wui-typography-heading-5-family);
+  line-height: var(--wui-typography-heading-5-line-height);
+  font-size: var(--wui-typography-heading-5-size);
+  font-weight: var(--wui-typography-heading-5-weight);
+`;
+var MeterBarContainer = styled78.div`
+  position: relative;
+  overflow: hidden;
+  background-color: var(--wui-color-bg-surface-secondary);
+  border-radius: var(--wui-border-radius-rounded);
+  width: 100%;
+  height: var(--meter-height);
+  transform: translateZ(0);
+`;
+var MeterSegmentBar = styled78.div`
+  position: absolute;
+  top: 0;
+  left: ${({ $offset }) => $offset}%;
+  width: ${({ $width }) => $width}%;
+  height: 100%;
+  background-color: ${({ $color }) => `var(--wui-${$color})`};
+
+  &:first-child {
+    border-top-left-radius: var(--wui-border-radius-rounded);
+    border-bottom-left-radius: var(--wui-border-radius-rounded);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--wui-border-radius-rounded);
+    border-bottom-right-radius: var(--wui-border-radius-rounded);
+  }
+`;
+var MeterDescription = styled78.div`
+  line-height: var(--wui-typography-label-3-line-height);
+  font-size: var(--wui-typography-label-3-size);
+  font-weight: var(--wui-typography-label-3-weight);
+  color: var(--wui-color-text-secondary);
+`;
+var MeterKey = styled78.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wui-space-03);
+`;
+var MeterKeyItem = styled78.div`
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+`;
+var MeterKeyColorIndicator = styled78.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $color }) => `var(--wui-${$color})`};
+  flex-shrink: 0;
+`;
+var MeterKeyLabel = styled78.span`
+  line-height: var(--wui-typography-label-3-line-height);
+  font-size: var(--wui-typography-label-3-size);
+  font-weight: var(--wui-typography-label-3-weight);
+  color: var(--wui-color-text-secondary);
+`;
+var nodeToString = (node) => {
+  if (typeof node === "string") {
+    return node;
+  }
+  if (typeof node === "number") {
+    return String(node);
+  }
+  if (node == null || typeof node === "boolean") {
+    return "";
+  }
+  if (Array.isArray(node)) {
+    return node.map(nodeToString).join("");
+  }
+  if (typeof node === "object" && "props" in node) {
+    const element = node;
+    if (element.props?.children != null) {
+      return nodeToString(element.props.children);
+    }
+  }
+  return "";
+};
+var Meter = ({
+  segments,
+  label,
+  labelMeta,
+  description,
+  hideKey = false,
+  max = 100,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const labelId = useId5();
+  const descriptionId = useId5();
+  const segmentsWithOffsets = segments.reduce((acc, segment) => {
+    const offset = acc.reduce((sum, prev) => sum + prev.widthPercent, 0);
+    const widthPercent = segment.value / max * 100;
+    acc.push({ ...segment, offset, widthPercent });
+    return acc;
+  }, []);
+  const keySegments = segmentsWithOffsets.filter(
+    (segment) => isNotNil31(segment.label)
+  );
+  const totalValue = segments.reduce((sum, segment) => sum + segment.value, 0);
+  const generateAriaDescription = () => {
+    const segmentDescriptions = segments.filter((segment) => isNotNil31(segment.label)).map((segment) => `${nodeToString(segment.label)}: ${segment.value}%`).join(", ");
+    const totalDescription = `Total: ${totalValue} out of ${max}`;
+    return segmentDescriptions ? `${segmentDescriptions}. ${totalDescription}` : totalDescription;
+  };
+  const effectiveAriaLabel = ariaLabel ?? (isNotNil31(label) ? nodeToString(label) : "Data meter");
+  return /* @__PURE__ */ jsxs50(MeterWrapper, { ...props, children: [
+    /* @__PURE__ */ jsx315(
+      ScreenReaderOnly,
+      {
+        id: descriptionId,
+        text: generateAriaDescription()
+      }
+    ),
+    isNotNil31(label) || isNotNil31(labelMeta) ? /* @__PURE__ */ jsxs50(MeterLabelContainer, { id: labelId, children: [
+      isNotNil31(label) ? /* @__PURE__ */ jsx315(MeterLabel, { children: label }) : null,
+      isNotNil31(labelMeta) ? /* @__PURE__ */ jsx315(MeterLabelMeta, { children: labelMeta }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx315(
+      MeterBarContainer,
+      {
+        "aria-describedby": descriptionId,
+        "aria-label": effectiveAriaLabel,
+        "aria-labelledby": isNotNil31(label) || isNotNil31(labelMeta) ? labelId : void 0,
+        "aria-valuemax": max,
+        "aria-valuemin": 0,
+        "aria-valuenow": totalValue,
+        role: "meter",
+        children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx315(
+          MeterSegmentBar,
+          {
+            $color: segment.color,
+            $offset: segment.offset,
+            $width: segment.widthPercent,
+            "aria-hidden": "true"
+          },
+          `${segment.color}-${segment.value}-${segment.offset}`
+        ))
+      }
+    ),
+    isNotNil31(description) ? /* @__PURE__ */ jsx315(MeterDescription, { children: description }) : null,
+    !hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx315(
+      MeterKey,
+      {
+        "aria-label": "Meter legend",
+        role: "list",
+        children: keySegments.map((segment) => /* @__PURE__ */ jsxs50(
+          MeterKeyItem,
+          {
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsx315(
+                MeterKeyColorIndicator,
+                {
+                  $color: segment.color,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx315(MeterKeyLabel, { children: segment.label })
+            ]
+          },
+          `${segment.color}-${segment.value}-${segment.offset}-${nodeToString(segment.label)}`
+        ))
+      }
+    ) : null
+  ] });
+};
+Meter.displayName = "Meter_UI";
+
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { styled as styled81 } from "styled-components";
-import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { styled as styled83 } from "styled-components";
+import {
+  Root as DialogRoot,
+  Portal as DialogPortal,
+  Description as DialogDescription
+} from "@radix-ui/react-dialog";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import { styled as styled78 } from "styled-components";
+import { styled as styled80 } from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import { styled as styled77 } from "styled-components";
+import { styled as styled79 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx314 } from "react/jsx-runtime";
-var CloseButton = styled77(DialogClose)`
+import { jsx as jsx316 } from "react/jsx-runtime";
+var CloseButton = styled79(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx314(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx314(
+  return /* @__PURE__ */ jsx316(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx316(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx314(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx316(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx315, jsxs as jsxs50 } from "react/jsx-runtime";
-var Header = styled78.header`
+import { jsx as jsx317, jsxs as jsxs51 } from "react/jsx-runtime";
+var Header = styled80.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -16379,7 +16601,7 @@ var Header = styled78.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = styled78(DialogTitle)`
+var Title = styled80(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);
@@ -16390,15 +16612,15 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx315(ScreenReaderOnly, { children: /* @__PURE__ */ jsx315(Title, { children: title }) }) : /* @__PURE__ */ jsx315(Title, { children: title });
-  return /* @__PURE__ */ jsxs50(
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx317(ScreenReaderOnly, { children: /* @__PURE__ */ jsx317(Title, { children: title }) }) : /* @__PURE__ */ jsx317(Title, { children: title });
+  return /* @__PURE__ */ jsxs51(
     Header,
     {
       $hideCloseButon: hideCloseButton,
       $hideTitle: hideTitle,
       children: [
         TitleComponent,
-        hideCloseButton ? null : /* @__PURE__ */ jsx315(ModalCloseButton, {})
+        hideCloseButton ? null : /* @__PURE__ */ jsx317(ModalCloseButton, {})
       ]
     }
   );
@@ -16406,7 +16628,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled79, css as css40, keyframes as keyframes5 } from "styled-components";
+import { styled as styled81, css as css40, keyframes as keyframes5 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/components/Modal/constants.ts
@@ -16414,7 +16636,7 @@ var DEFAULT_MODAL_WIDTH = "532px";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef21, useEffect as useEffect20 } from "react";
-import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef21(null);
   useEffect20(() => {
@@ -16422,7 +16644,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect20(() => {
     return () => {
-      if (isNotNil31(previouslyFocusedRef.current)) {
+      if (isNotNil32(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -16432,7 +16654,7 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx316 } from "react/jsx-runtime";
+import { jsx as jsx318 } from "react/jsx-runtime";
 var modalEnter = keyframes5`
   from {
     opacity: 0;
@@ -16530,7 +16752,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = styled79(DialogContent)`
+var StyledModalContent = styled81(DialogContent)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -16560,13 +16782,12 @@ var StyledModalContent = styled79(DialogContent)`
 var ModalContent = forwardRef25(
   ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx316(
+    return /* @__PURE__ */ jsx318(
       StyledModalContent,
       {
         ref,
         $positionVariant: positionVariant,
         $width: width,
-        "aria-describedby": void 0,
         ...props,
         children
       }
@@ -16576,7 +16797,7 @@ var ModalContent = forwardRef25(
 
 // src/components/Modal/ModalOverlay.tsx
 import { DialogOverlay } from "@radix-ui/react-dialog";
-import { styled as styled80, keyframes as keyframes6 } from "styled-components";
+import { styled as styled82, keyframes as keyframes6 } from "styled-components";
 var backdropShow = keyframes6`
   from {
     opacity: 0;
@@ -16595,7 +16816,7 @@ var backdropHide = keyframes6`
     opacity: 0;
   }
 `;
-var ModalOverlay = styled80(DialogOverlay)`
+var ModalOverlay = styled82(DialogOverlay)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
@@ -16608,19 +16829,20 @@ var ModalOverlay = styled80(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx317, jsxs as jsxs51 } from "react/jsx-runtime";
-var ModalBody = styled81.div`
+import { jsx as jsx319, jsxs as jsxs52 } from "react/jsx-runtime";
+var ModalHiddenDescription = styled83(DialogDescription)({ ...visuallyHiddenStyle });
+var ModalBody = styled83.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = styled81.div`
+var ModalScrollArea = styled83.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = styled81.footer`
+var ModalFooter = styled83.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -16638,23 +16860,23 @@ var Modal = forwardRef26(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx317(
+    return /* @__PURE__ */ jsx319(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil32(onRequestClose)) {
+          if (!open2 && isNotNil33(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs51(DialogPortal, { children: [
-          /* @__PURE__ */ jsx317(ModalOverlay, {}),
-          /* @__PURE__ */ jsxs51(
+        children: /* @__PURE__ */ jsxs52(DialogPortal, { children: [
+          /* @__PURE__ */ jsx319(ModalOverlay, {}),
+          /* @__PURE__ */ jsxs52(
             ModalContent,
             {
               ref,
               onOpenAutoFocus: (event) => {
-                if (isNotNil32(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil33(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -16665,16 +16887,17 @@ var Modal = forwardRef26(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx317(ModalScrollArea, { children: /* @__PURE__ */ jsx317(ModalBody, { children }) }),
-                isNotNil32(footer) ? /* @__PURE__ */ jsx317(ModalFooter, { children: footer }) : null,
-                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx317(
+                /* @__PURE__ */ jsx319(ModalScrollArea, { children: /* @__PURE__ */ jsx319(ModalBody, { children }) }),
+                isNotNil33(footer) ? /* @__PURE__ */ jsx319(ModalFooter, { children: footer }) : null,
+                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx319(
                   ModalHeader,
                   {
                     hideCloseButton,
                     hideTitle,
                     title
                   }
-                )
+                ),
+                /* @__PURE__ */ jsx319(ModalHiddenDescription, {})
               ]
             }
           )
@@ -16686,9 +16909,9 @@ var Modal = forwardRef26(
 Modal.displayName = "Modal_UI";
 
 // src/components/Modal/ModalCallouts.tsx
-import { jsx as jsx318, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs53 } from "react/jsx-runtime";
 var ModalCallouts = ({ children }) => {
-  return /* @__PURE__ */ jsx318(
+  return /* @__PURE__ */ jsx320(
     Stack,
     {
       direction: "horizontal",
@@ -16699,9 +16922,9 @@ var ModalCallouts = ({ children }) => {
 };
 ModalCallouts.displayName = "ModalCallouts_UI";
 var ModalCallout = ({ title, image, children }) => {
-  return /* @__PURE__ */ jsxs52(Stack, { direction: "vertical", children: [
+  return /* @__PURE__ */ jsxs53(Stack, { direction: "vertical", children: [
     image,
-    /* @__PURE__ */ jsx318(Heading, { variant: "heading4", children: title }),
+    /* @__PURE__ */ jsx320(Heading, { variant: "heading4", children: title }),
     children
   ] });
 };
@@ -16709,19 +16932,19 @@ 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 styled83, css as css42 } from "styled-components";
+import { styled as styled85, css as css42 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil33(onOpenChange) && isNotNil33(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil34(onOpenChange) && isNotNil34(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled82, css as css41, keyframes as keyframes7 } from "styled-components";
-import { jsx as jsx319, jsxs as jsxs53 } from "react/jsx-runtime";
-var StyledPath = styled82.path`
+import { styled as styled84, css as css41, keyframes as keyframes7 } from "styled-components";
+import { jsx as jsx321, jsxs as jsxs54 } from "react/jsx-runtime";
+var StyledPath = styled84.path`
   fill: var(--wui-color-border-secondary);
 `;
 var circleAnimation = keyframes7`
@@ -16732,7 +16955,7 @@ var circleAnimation = keyframes7`
     opacity: 0;
   }
 `;
-var StyledCircle = styled82.circle`
+var StyledCircle = styled84.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -16759,7 +16982,7 @@ var StyledCircle = styled82.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx319(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsx321(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs54(
     "svg",
     {
       fill: "none",
@@ -16768,8 +16991,8 @@ var PopoverArrow = ({ isAnimated }) => {
       width: "48",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx319(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__ */ jsx319(
+        /* @__PURE__ */ jsx321(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__ */ jsx321(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -16780,7 +17003,7 @@ var PopoverArrow = ({ isAnimated }) => {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx319(
+        /* @__PURE__ */ jsx321(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -16798,8 +17021,8 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx320, jsxs as jsxs54 } from "react/jsx-runtime";
-var StyledContent2 = styled83(Content2)`
+import { jsx as jsx322, jsxs as jsxs55 } from "react/jsx-runtime";
+var StyledContent2 = styled85(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css42`
@@ -16838,9 +17061,9 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs54(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx320(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx320(Portal, { children: /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ jsx322(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx322(Portal, { children: /* @__PURE__ */ jsxs55(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -16849,17 +17072,17 @@ var Popover = ({
         $unstyled: unstyled,
         style,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx320(Close, { asChild: true, children: /* @__PURE__ */ jsx320(
+          !hideCloseButton && /* @__PURE__ */ jsx322(Close, { asChild: true, children: /* @__PURE__ */ jsx322(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx320(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx322(Icon, { type: "close" })
             }
           ) }),
-          withArrow ? /* @__PURE__ */ jsx320(PopoverArrow, { isAnimated }) : null,
-          /* @__PURE__ */ jsx320("div", { children })
+          withArrow ? /* @__PURE__ */ jsx322(PopoverArrow, { isAnimated }) : null,
+          /* @__PURE__ */ jsx322("div", { children })
         ]
       }
     ) })
@@ -16868,11 +17091,11 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled84 } from "styled-components";
+import { styled as styled86 } 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 jsx321, jsxs as jsxs55 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled84.div`
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
+import { jsx as jsx323, jsxs as jsxs56 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled86.div`
   --progress-bar-height: 8px;
 
   display: flex;
@@ -16886,7 +17109,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled84.div`
+var ProgressBarLabel = styled86.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -16894,7 +17117,7 @@ var ProgressBarLabel = styled84.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled84(ProgressIndicator)`
+var StyledProgressIndicator = styled86(ProgressIndicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   width: 100%;
@@ -16904,7 +17127,7 @@ var StyledProgressIndicator = styled84(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled84(ProgressRoot)`
+var StyledProgressBar = styled86(ProgressRoot)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -16925,16 +17148,16 @@ var ProgressBar = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs55(ProgressBarWrapper, { children: [
-    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx321(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx321(
+  return /* @__PURE__ */ jsxs56(ProgressBarWrapper, { children: [
+    isNotNil35(labelLeft) ? /* @__PURE__ */ jsx323(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx323(
       StyledProgressBar,
       {
         $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx321(
+        children: /* @__PURE__ */ jsx323(
           StyledProgressIndicator,
           {
             $colorScheme: colorScheme,
@@ -16944,16 +17167,16 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil34(labelRight) ? /* @__PURE__ */ jsx321(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil35(labelRight) ? /* @__PURE__ */ jsx323(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
-import { forwardRef as forwardRef27, useId as useId5 } from "react";
-import { styled as styled85, css as css43 } from "styled-components";
-import { jsx as jsx322, jsxs as jsxs56 } from "react/jsx-runtime";
+import { forwardRef as forwardRef27, useId as useId6 } from "react";
+import { styled as styled87, css as css43 } from "styled-components";
+import { jsx as jsx324, jsxs as jsxs57 } from "react/jsx-runtime";
 var sizeSmall2 = css43`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
@@ -16975,7 +17198,7 @@ var getSizeCss3 = (size) => {
   }
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled85.div`
+var StyledRadioWrapper = styled87.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -17009,7 +17232,7 @@ var StyledRadioWrapper = styled85.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled85.div`
+var StyledRadioInput = styled87.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -17035,7 +17258,7 @@ var StyledRadioInput = styled85.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = styled85.input`
+var StyledHiddenRadioInput = styled87.input`
   ${visuallyHiddenStyle}
 `;
 var Radio = forwardRef27(
@@ -17053,7 +17276,7 @@ var Radio = forwardRef27(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = useId5();
+    const generatedId = useId6();
     const computedId = isNonEmptyString7(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
@@ -17062,14 +17285,14 @@ var Radio = forwardRef27(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsxs57(
       StyledRadioWrapper,
       {
         $disabled: disabled,
         $hideLabel: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx322(
+          /* @__PURE__ */ jsx324(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -17084,10 +17307,10 @@ var Radio = forwardRef27(
               value
             }
           ),
-          /* @__PURE__ */ jsx322(
+          /* @__PURE__ */ jsx324(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx322(StyledRadioInput, { $size: size }),
+              controlSlot: /* @__PURE__ */ jsx324(StyledRadioInput, { $size: size }),
               description,
               disabled,
               hideLabel,
@@ -17106,10 +17329,10 @@ Radio.displayName = "Radio_UI";
 import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
-import { forwardRef as forwardRef28, useId as useId6 } from "react";
-import { styled as styled86, css as css44 } from "styled-components";
+import { forwardRef as forwardRef28, useId as useId7 } from "react";
+import { styled as styled88, css as css44 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
-import { jsx as jsx323, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx325, jsxs as jsxs58 } from "react/jsx-runtime";
 var checkedStyles = css44`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
@@ -17125,6 +17348,17 @@ var disabledStyles = css44`
   --wui-color-text: var(--wui-color-text-disabled);
   --wui-color-text-secondary: var(--wui-color-text-disabled);
 `;
+var gatedStyles = css44`
+  --wui-radio-card-background-color: var(--wui-color-bg-surface-purple);
+  --wui-radio-card-border-color: var(--wui-color-border-purple);
+`;
+var gatedCheckedStyles = css44`
+  --wui-radio-card-background-color: var(--wui-color-bg-surface-purple);
+  --wui-radio-card-border-color: var(--wui-color-focus-ring);
+  --wui-color-icon: var(--wui-color-icon-selected);
+  --wui-color-text: var(--wui-color-text-info);
+  --wui-color-text-secondary: var(--wui-color-text-info);
+`;
 var focusStyles = css44`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
@@ -17159,7 +17393,7 @@ var imageCoverStyles = css44`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled86.label`
+var StyledCard2 = styled88.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;
@@ -17189,7 +17423,15 @@ var StyledCard2 = styled86.label`
     --wui-radio-card-border-color: var(--wui-color-border-secondary-active);
   }
 
-  &:has(input:checked) {
+  &:has([data-wui-radio-card-gated]) {
+    ${gatedStyles}
+  }
+
+  &:has([data-wui-radio-card-gated]):has(input:checked) {
+    ${gatedCheckedStyles}
+  }
+
+  &:has(input:checked):not(:has([data-wui-radio-card-gated])) {
     ${checkedStyles}
   }
 
@@ -17213,7 +17455,7 @@ var StyledCard2 = styled86.label`
     }
   }
 `;
-var StyledHiddenInput = styled86.input`
+var StyledHiddenInput = styled88.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = forwardRef28(
@@ -17221,6 +17463,7 @@ var RadioCardRoot = forwardRef28(
     children,
     disabled = false,
     id,
+    isGated = false,
     name,
     onChange,
     value,
@@ -17229,7 +17472,7 @@ var RadioCardRoot = forwardRef28(
     checked,
     ...props
   }, ref) => {
-    const generatedId = useId6();
+    const generatedId = useId7();
     const computedId = isNonEmptyString8(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
@@ -17238,14 +17481,14 @@ var RadioCardRoot = forwardRef28(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined15(value) && isNotUndefined15(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs57(
+    return /* @__PURE__ */ jsxs58(
       StyledCard2,
       {
         $aspectRatio: aspectRatio,
         $padding: padding,
         htmlFor: computedId,
         children: [
-          /* @__PURE__ */ jsx323(
+          /* @__PURE__ */ jsx325(
             StyledHiddenInput,
             {
               ...props,
@@ -17259,6 +17502,7 @@ var RadioCardRoot = forwardRef28(
               value
             }
           ),
+          isGated && /* @__PURE__ */ jsx325("div", { "data-wui-radio-card-gated": true, style: { display: "none" } }),
           children
         ]
       }
@@ -17268,12 +17512,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled88 } from "styled-components";
-import { isNotNil as isNotNil35 } from "@wistia/type-guards";
+import { styled as styled90 } from "styled-components";
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled87 } from "styled-components";
-var RadioCardIndicator = styled87.div`
+import { styled as styled89 } from "styled-components";
+var RadioCardIndicator = styled89.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);
@@ -17322,16 +17566,22 @@ var RadioCardIndicator = styled87.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx324, jsxs as jsxs58 } from "react/jsx-runtime";
-var StyledCardContent = styled88.div`
+import { jsx as jsx326, jsxs as jsxs59 } from "react/jsx-runtime";
+var StyledCardContent = styled90.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled88.div`
+var StyledCardIcon = styled90.div`
   display: contents;
 `;
-var StyledIndicatorContainer = styled88.div`
+var StyledGatedIcon = styled90.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+`;
+var StyledIndicatorContainer = styled90.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -17340,20 +17590,28 @@ var RadioCardDefaultLayout = ({
   icon,
   label,
   description,
-  showIndicator = true
+  showIndicator = true,
+  isGated = false
 }) => {
-  return /* @__PURE__ */ jsxs58(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx324(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx324(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
-    /* @__PURE__ */ jsxs58(Stack, { gap: "space-02", children: [
-      isNotNil35(icon) && /* @__PURE__ */ jsx324(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
-      /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(StyledCardContent, { children: [
+    showIndicator ? /* @__PURE__ */ jsx326(StyledIndicatorContainer, { $hasIcon: isNotNil36(icon), children: /* @__PURE__ */ jsx326(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    isGated && /* @__PURE__ */ jsx326(StyledGatedIcon, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx326(
+      Icon,
+      {
+        colorScheme: "purple",
+        type: "sparkle"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs59(Stack, { gap: "space-02", children: [
+      isNotNil36(icon) && /* @__PURE__ */ jsx326(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      /* @__PURE__ */ jsxs59(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil36(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil35(label) && /* @__PURE__ */ jsx324(Text, { variant: "label3", children: /* @__PURE__ */ jsx324("strong", { children: label }) }),
-            isNotNil35(description) && /* @__PURE__ */ jsx324(
+            isNotNil36(label) && /* @__PURE__ */ jsx326(Text, { variant: "label3", children: /* @__PURE__ */ jsx326("strong", { children: label }) }),
+            isNotNil36(description) && /* @__PURE__ */ jsx326(
               Text,
               {
                 prominence: "secondary",
@@ -17370,28 +17628,30 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import { styled as styled89 } from "styled-components";
-var RadioCardChildrenContainer = styled89.div`
+import { styled as styled91 } from "styled-components";
+var RadioCardChildrenContainer = styled91.div`
   flex: 1 1 auto;
 `;
 
 // src/components/RadioCard/RadioCard.tsx
-import { jsx as jsx325 } from "react/jsx-runtime";
+import { jsx as jsx327 } from "react/jsx-runtime";
 var RadioCard = forwardRef29(
-  ({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx325(
+  ({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx327(
       RadioCardRoot,
       {
         ref,
+        isGated,
         padding: children != null ? "space-00" : "space-04",
         ...rootProps,
-        children: children != null ? /* @__PURE__ */ jsx325(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx325(
+        children: children != null ? /* @__PURE__ */ jsx327(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx327(
           RadioCardDefaultLayout,
           {
             description,
             icon,
             label,
-            showIndicator
+            showIndicator,
+            isGated
           }
         )
       }
@@ -17402,17 +17662,17 @@ RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx326 } from "react/jsx-runtime";
+import { jsx as jsx328 } from "react/jsx-runtime";
 var RadioCardImage = forwardRef30(
   ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx326(
+    return /* @__PURE__ */ jsx328(
       RadioCardRoot,
       {
         ref,
         ...rootProps,
         aspectRatio,
         padding,
-        children: /* @__PURE__ */ jsx326(
+        children: /* @__PURE__ */ jsx328(
           Image,
           {
             alt: label,
@@ -17430,49 +17690,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef22, useState as useState24 } from "react";
-import { styled as styled90 } from "styled-components";
+import { styled as styled92 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx327, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx329, jsxs as jsxs60 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled90.div`
+var Container10 = styled92.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled90.div`
+var ScrollContainer = styled92.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled90.div`
+var Shadow = styled92.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 = styled90(Shadow)`
+var ShadowAtTop = styled92(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled90(Shadow)`
+var ShadowAtBottom = styled92(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled90(Shadow)`
+var ShadowAtLeft = styled92(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled90(Shadow)`
+var ShadowAtRight = styled92(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -17512,12 +17772,12 @@ var ScrollArea = forwardRef31(
     useEffect21(() => {
       updateShadows();
     }, [updateShadows]);
-    return /* @__PURE__ */ jsxs59(Container10, { style, children: [
-      /* @__PURE__ */ jsx327(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
-      /* @__PURE__ */ jsx327(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
-      /* @__PURE__ */ jsx327(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
-      /* @__PURE__ */ jsx327(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
-      /* @__PURE__ */ jsx327(
+    return /* @__PURE__ */ jsxs60(Container10, { style, children: [
+      /* @__PURE__ */ jsx329(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
+      /* @__PURE__ */ jsx329(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
+      /* @__PURE__ */ jsx329(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
+      /* @__PURE__ */ jsx329(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
+      /* @__PURE__ */ jsx329(
         ScrollContainer,
         {
           ref: scrollContainerRef,
@@ -17534,13 +17794,13 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled92, css as css46 } from "styled-components";
+import { styled as styled94, css as css46 } 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 useState25 } from "react";
-import { jsx as jsx328 } from "react/jsx-runtime";
+import { jsx as jsx330 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
@@ -17561,7 +17821,7 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx328(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx330(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = useContext15(SelectedItemStyleContext);
@@ -17572,7 +17832,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled91, css as css45 } from "styled-components";
+import { styled as styled93, css as css45 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -17588,13 +17848,13 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx329 } from "react/jsx-runtime";
+import { jsx as jsx331 } from "react/jsx-runtime";
 var selectedItemIndicatorStyles = css45`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = styled91.div`
+var SelectedItemIndicatorDiv = styled93.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -17610,7 +17870,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx329(
+  return /* @__PURE__ */ jsx331(
     SelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -17620,7 +17880,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx330, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx332, jsxs as jsxs61 } from "react/jsx-runtime";
 var segmentedControlStyles = css46`
   ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
   ${({ $colorScheme }) => $colorScheme !== "nav" && `--wui-color-text-selected: var(--wui-color-text-link);`}
@@ -17635,7 +17895,7 @@ var segmentedControlStyles = css46`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled92(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled94(ToggleGroupRoot2)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef32(
@@ -17651,7 +17911,7 @@ var SegmentedControl = forwardRef32(
     if (isNil18(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx330(
+    return /* @__PURE__ */ jsx332(
       StyledSegmentedControl,
       {
         ref,
@@ -17664,9 +17924,9 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx330(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs60(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx332(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs61(SelectedItemStyleProvider, { children: [
           children,
-          /* @__PURE__ */ jsx330(SelectedItemIndicator, {})
+          /* @__PURE__ */ jsx332(SelectedItemIndicator, {})
         ] }) })
       }
     );
@@ -17676,10 +17936,10 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect22, useRef as useRef23 } from "react";
-import { styled as styled93, css as css47 } from "styled-components";
+import { styled as styled95, css as css47 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
-import { jsxs as jsxs61 } from "react/jsx-runtime";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+import { jsxs as jsxs62 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css47`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -17748,7 +18008,7 @@ var segmentedControlItemStyles = css47`
     }
   }
 `;
-var StyledSegmentedControlItem = styled93(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled95(ToggleGroupItem2)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef33(
@@ -17789,13 +18049,13 @@ var SegmentedControlItem = forwardRef33(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs61(
+    return /* @__PURE__ */ jsxs62(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil36(label),
-        "aria-label": isNotNil36(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil37(label),
+        "aria-label": isNotNil37(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -17821,9 +18081,9 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled94, css as css48 } from "styled-components";
-import { jsx as jsx331, jsxs as jsxs62 } from "react/jsx-runtime";
-var StyledTrigger2 = styled94(Trigger3)`
+import { styled as styled96, css as css48 } from "styled-components";
+import { jsx as jsx333, jsxs as jsxs63 } from "react/jsx-runtime";
+var StyledTrigger2 = styled96(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -17869,7 +18129,7 @@ var StyledTrigger2 = styled94(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled94(Content3)`
+var StyledContent3 = styled96(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);
@@ -17896,10 +18156,10 @@ var scrollButtonStyles = css48`
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled94(ScrollDownButton)`
+var StyledScrollDownButton = styled96(ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled94(ScrollUpButton)`
+var StyledScrollUpButton = styled96(ScrollUpButton)`
   ${scrollButtonStyles}
 `;
 var Select = forwardRef34(
@@ -17922,8 +18182,8 @@ var Select = forwardRef34(
     if (forceOpen) {
       rootProps["open"] = true;
     }
-    return /* @__PURE__ */ jsxs62(Root3, { ...rootProps, children: [
-      /* @__PURE__ */ jsxs62(
+    return /* @__PURE__ */ jsxs63(Root3, { ...rootProps, children: [
+      /* @__PURE__ */ jsxs63(
         StyledTrigger2,
         {
           ref: forwardedRef,
@@ -17931,8 +18191,8 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx331(Value, { placeholder }),
-            /* @__PURE__ */ jsx331(
+            /* @__PURE__ */ jsx333(Value, { placeholder }),
+            /* @__PURE__ */ jsx333(
               Icon,
               {
                 size: "md",
@@ -17942,21 +18202,21 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx331(Portal2, { children: /* @__PURE__ */ jsxs62(
+      /* @__PURE__ */ jsx333(Portal2, { children: /* @__PURE__ */ jsxs63(
         StyledContent3,
         {
           position: "popper",
           sideOffset: 8,
           children: [
-            /* @__PURE__ */ jsx331(StyledScrollUpButton, { children: /* @__PURE__ */ jsx331(
+            /* @__PURE__ */ jsx333(StyledScrollUpButton, { children: /* @__PURE__ */ jsx333(
               Icon,
               {
                 size: "sm",
                 type: "caret-up"
               }
             ) }),
-            /* @__PURE__ */ jsx331(Viewport, { children }),
-            /* @__PURE__ */ jsx331(StyledScrollDownButton, { children: /* @__PURE__ */ jsx331(
+            /* @__PURE__ */ jsx333(Viewport, { children }),
+            /* @__PURE__ */ jsx333(StyledScrollDownButton, { children: /* @__PURE__ */ jsx333(
               Icon,
               {
                 size: "sm",
@@ -17974,10 +18234,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 styled95 } from "styled-components";
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsx as jsx332, jsxs as jsxs63 } from "react/jsx-runtime";
-var StyledItem = styled95(Item)`
+import { styled as styled97 } from "styled-components";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { jsx as jsx334, jsxs as jsxs64 } from "react/jsx-runtime";
+var StyledItem = styled97(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -18005,18 +18265,18 @@ var StyledItem = styled95(Item)`
 `;
 var SelectOption = forwardRef35(
   ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs64(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs63("div", { children: [
+          isNotNil38(selectedDisplayValue) ? /* @__PURE__ */ jsxs64("div", { children: [
             children,
-            /* @__PURE__ */ jsx332("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx332(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx332(ItemText, { children }),
-          /* @__PURE__ */ jsx332(ItemIndicator, { children: /* @__PURE__ */ jsx332(
+            /* @__PURE__ */ jsx334("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx334(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx334(ItemText, { children }),
+          /* @__PURE__ */ jsx334(ItemIndicator, { children: /* @__PURE__ */ jsx334(
             Icon,
             {
               size: "md",
@@ -18032,14 +18292,14 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
-import { styled as styled96 } from "styled-components";
-import { jsx as jsx333, jsxs as jsxs64 } from "react/jsx-runtime";
-var StyledLabel4 = styled96(Label3)`
+import { styled as styled98 } from "styled-components";
+import { jsx as jsx335, jsxs as jsxs65 } from "react/jsx-runtime";
+var StyledLabel4 = styled98(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs64(Group, { ...props, children: [
-    /* @__PURE__ */ jsx333(StyledLabel4, { children: /* @__PURE__ */ jsx333(
+  return /* @__PURE__ */ jsxs65(Group, { ...props, children: [
+    /* @__PURE__ */ jsx335(StyledLabel4, { children: /* @__PURE__ */ jsx335(
       Heading,
       {
         renderAs: "span",
@@ -18058,10 +18318,10 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled97 } from "styled-components";
+import { styled as styled99 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
-import { jsx as jsx334, jsxs as jsxs65 } from "react/jsx-runtime";
-var SliderContainer = styled97.div`
+import { jsx as jsx336, jsxs as jsxs66 } from "react/jsx-runtime";
+var SliderContainer = styled99.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);
@@ -18077,7 +18337,7 @@ var SliderContainer = styled97.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled97(RadixSliderRoot)`
+var StyledSliderRoot = styled99(RadixSliderRoot)`
   position: relative;
   display: flex;
   align-items: center;
@@ -18085,20 +18345,20 @@ var StyledSliderRoot = styled97(RadixSliderRoot)`
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled97(RadixSliderTrack)`
+var StyledSliderTrack = styled99(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 = styled97(RadixSliderRange)`
+var StyledSliderRange = styled99(RadixSliderRange)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = styled97(RadixSliderThumb)`
+var StyledSliderThumb = styled99(RadixSliderThumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -18149,12 +18409,12 @@ var Slider = ({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsx334(
+  return /* @__PURE__ */ jsx336(
     SliderContainer,
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs65(
+      children: /* @__PURE__ */ jsxs66(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -18167,8 +18427,8 @@ var Slider = ({
           step,
           ...value ? { value } : {},
           children: [
-            /* @__PURE__ */ jsx334(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx334(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
-            values.map((_, index) => /* @__PURE__ */ jsx334(
+            /* @__PURE__ */ jsx336(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx336(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+            values.map((_, index) => /* @__PURE__ */ jsx336(
               StyledSliderThumb,
               {
                 "data-testid": `${dataTestId}-thumb-${index}`
@@ -18183,10 +18443,83 @@ var Slider = ({
 };
 Slider.displayName = "Slider_UI";
 
+// src/components/SplitButton/SplitButton.tsx
+import { styled as styled100 } from "styled-components";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { cloneElement as cloneElement9 } from "react";
+import { jsx as jsx337, jsxs as jsxs67 } from "react/jsx-runtime";
+var StyledSplitButton = styled100.span`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  white-space: nowrap;
+
+  &:has(:nth-child(2)) {
+    > [data-wui-button='true']:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      padding-right: 0;
+    }
+
+    > [data-wui-button='true']:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      display: inline-flex;
+    }
+  }
+`;
+var SplitButton = ({
+  children,
+  menuLabel = "Select an option",
+  menuIcon = /* @__PURE__ */ jsx337(Icon, { type: "caret-down" }),
+  menuItems,
+  disabled = false,
+  colorScheme = "inherit",
+  variant = "solid",
+  secondaryAction,
+  size = "md",
+  unstyled = false,
+  menuProps = {},
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs67(StyledSplitButton, { $colorScheme: colorScheme, children: [
+    /* @__PURE__ */ jsx337(
+      Button,
+      {
+        disabled,
+        size,
+        unstyled,
+        variant,
+        ...props,
+        children
+      }
+    ),
+    isNotNil39(menuItems) && /* @__PURE__ */ jsx337(
+      Menu,
+      {
+        ...menuProps,
+        disabled,
+        trigger: /* @__PURE__ */ jsx337(
+          IconButton,
+          {
+            disabled,
+            label: menuLabel,
+            size,
+            unstyled,
+            variant,
+            children: menuIcon
+          }
+        ),
+        children: menuItems
+      }
+    ),
+    isNotNil39(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+  ] });
+};
+SplitButton.displayName = "SplitButton_UI";
+
 // src/components/Table/Table.tsx
-import { styled as styled98, css as css49 } from "styled-components";
-import { jsx as jsx335 } from "react/jsx-runtime";
-var StyledTable = styled98.table`
+import { styled as styled101, css as css49 } from "styled-components";
+import { jsx as jsx338 } from "react/jsx-runtime";
+var StyledTable = styled101.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -18215,7 +18548,7 @@ var Table = ({
   visuallyHiddenHeader = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx338(
     StyledTable,
     {
       $divided: divided,
@@ -18228,37 +18561,37 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import { styled as styled99 } from "styled-components";
+import { styled as styled102 } 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 jsx336 } from "react/jsx-runtime";
-var StyledTableBody = styled99.tbody`
+import { jsx as jsx339 } from "react/jsx-runtime";
+var StyledTableBody = styled102.tbody`
   width: 100%;
 `;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx336(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx336(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ jsx339(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx339(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled100, css as css50 } from "styled-components";
-import { jsx as jsx337 } from "react/jsx-runtime";
+import { styled as styled103, css as css50 } from "styled-components";
+import { jsx as jsx340 } from "react/jsx-runtime";
 var sharedStyles = css50`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled100.th`
+var StyledTh = styled103.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 = styled100.td`
+var StyledTd = styled103.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -18267,45 +18600,45 @@ var StyledTd = styled100.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext17(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx337(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx340(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx337(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx340(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFoot.tsx
-import { styled as styled101 } from "styled-components";
-import { jsx as jsx338 } from "react/jsx-runtime";
-var StyledTableFoot = styled101.tfoot`
+import { styled as styled104 } from "styled-components";
+import { jsx as jsx341 } from "react/jsx-runtime";
+var StyledTableFoot = styled104.tfoot`
   width: 100%;
 `;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx338(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx338(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx341(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx341(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-import { styled as styled102 } from "styled-components";
-import { jsx as jsx339 } from "react/jsx-runtime";
-var StyledThead = styled102.thead`
+import { styled as styled105 } from "styled-components";
+import { jsx as jsx342 } from "react/jsx-runtime";
+var StyledThead = styled105.thead`
   width: 100%;
 `;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx339(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx339(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx342(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx342(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import { styled as styled103 } from "styled-components";
-import { jsx as jsx340 } from "react/jsx-runtime";
-var StyledTableRow = styled103.tr`
+import { styled as styled106 } from "styled-components";
+import { jsx as jsx343 } from "react/jsx-runtime";
+var StyledTableRow = styled106.tr`
   width: 100%;
 `;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx340(StyledTableRow, { ...props, children });
+  return /* @__PURE__ */ jsx343(StyledTableRow, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
 import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
 import { useCallback as useCallback19, useState as useState26 } from "react";
-import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -18320,7 +18653,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx341 } from "react/jsx-runtime";
+import { jsx as jsx344 } from "react/jsx-runtime";
 var Tabs = ({
   children,
   value: valueProp,
@@ -18342,48 +18675,48 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil38(value)) {
+  if (isNotNil40(value)) {
     rootProps.value = value;
   }
-  if (isNotNil38(defaultValue)) {
+  if (isNotNil40(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx341(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx341(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx341(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx344(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx344(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx344(SelectedItemStyleProvider, { children }) }) });
 };
 Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx342 } from "react/jsx-runtime";
+import { jsx as jsx345 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx342(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx345(RadixTabsContent, { value, children });
 };
 TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { styled as styled105 } from "styled-components";
+import { styled as styled108 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import { styled as styled104 } from "styled-components";
-var TabsSelectedItemIndicatorDiv = styled104(SelectedItemIndicatorDiv)`
+import { styled as styled107 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled107(SelectedItemIndicatorDiv)`
   :has(button[role='tab']:focus-visible) > & {
     outline: 2px solid var(--wui-color-focus-ring);
   }
 `;
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-import { jsx as jsx343 } from "react/jsx-runtime";
+import { jsx as jsx346 } from "react/jsx-runtime";
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
   if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx343(
+  return /* @__PURE__ */ jsx346(
     TabsSelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -18393,19 +18726,19 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx344, jsxs as jsxs66 } from "react/jsx-runtime";
-var StyledRadixTabsList = styled105(RadixTabList)`
+import { jsx as jsx347, jsxs as jsxs68 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled108(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
-  return /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs68(
     StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
       "aria-label": props["aria-label"],
       children: [
         children,
-        /* @__PURE__ */ jsx344(SelectedTabIndicator, {})
+        /* @__PURE__ */ jsx347(SelectedTabIndicator, {})
       ]
     }
   );
@@ -18414,12 +18747,12 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef36, useEffect as useEffect23, useRef as useRef24 } from "react";
-import { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import { styled as styled106 } from "styled-components";
+import { styled as styled109 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledRadixTabsTrigger = styled106(RadixTabsTrigger)`
+var StyledRadixTabsTrigger = styled109(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -18428,7 +18761,7 @@ var StyledRadixTabsTrigger = styled106(RadixTabsTrigger)`
 `;
 
 // src/components/Tabs/TabsTrigger.tsx
-import { jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsxs as jsxs69 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef36(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
@@ -18460,13 +18793,13 @@ var TabsTrigger = forwardRef36(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs67(
+    return /* @__PURE__ */ jsxs69(
       StyledRadixTabsTrigger,
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil39(label),
-        "aria-label": isNotNil39(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil41(label),
+        "aria-label": isNotNil41(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -18480,10 +18813,10 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import { styled as styled107 } from "styled-components";
-import { isNotNil as isNotNil40 } from "@wistia/type-guards";
-import { jsx as jsx345, jsxs as jsxs68 } from "react/jsx-runtime";
-var StyledThumbnailBadge = styled107.div`
+import { styled as styled110 } from "styled-components";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { jsx as jsx348, jsxs as jsxs70 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled110.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -18509,19 +18842,19 @@ var StyledThumbnailBadge = styled107.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs68(StyledThumbnailBadge, { ...props, children: [
-    isNotNil40(icon) && icon,
-    /* @__PURE__ */ jsx345("span", { children: label })
+  return /* @__PURE__ */ jsxs70(StyledThumbnailBadge, { ...props, children: [
+    isNotNil42(icon) && icon,
+    /* @__PURE__ */ jsx348("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState27, useRef as useRef25, useCallback as useCallback20, useMemo as useMemo17 } from "react";
-import { styled as styled109 } from "styled-components";
+import { styled as styled112 } from "styled-components";
 import {
   isNil as isNil19,
-  isNotNil as isNotNil43,
+  isNotNil as isNotNil45,
   isUndefined as isUndefined7,
   isEmptyString as isEmptyString2,
   isString as isString4,
@@ -18529,7 +18862,7 @@ import {
 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
 import { css as css51 } from "styled-components";
 var gradients = {
   defaultDarkOne: css51`
@@ -18657,14 +18990,14 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil41(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil43(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import { styled as styled108 } from "styled-components";
-import { isNotNil as isNotNil42 } from "@wistia/type-guards";
-import { jsx as jsx346, jsxs as jsxs69 } from "react/jsx-runtime";
-var ScrubLine = styled108.div`
+import { styled as styled111 } from "styled-components";
+import { isNotNil as isNotNil44 } from "@wistia/type-guards";
+import { jsx as jsx349, jsxs as jsxs71 } from "react/jsx-runtime";
+var ScrubLine = styled111.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -18756,8 +19089,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil42(cursorPosition);
-  const scrubLinePosition = isNotNil42(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil44(cursorPosition);
+  const scrubLinePosition = isNotNil44(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -18775,14 +19108,14 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs71(
     "div",
     {
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx346("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx346(
+        /* @__PURE__ */ jsx349("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx349(
           ScrubLine,
           {
             style: {
@@ -18796,7 +19129,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx347, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx350, jsxs as jsxs72 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -18805,19 +19138,19 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled109.img`
+var WideThumbnailImage = styled112.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled109.img`
+var SquareThumbnailImage = styled112.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx347(
+    return /* @__PURE__ */ jsx350(
       WideThumbnailImage,
       {
         alt: "",
@@ -18826,7 +19159,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx347(
+  return /* @__PURE__ */ jsx350(
     SquareThumbnailImage,
     {
       alt: "",
@@ -18835,7 +19168,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = styled109.div`
+var StyledThumbnailContainer = styled112.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -18843,10 +19176,10 @@ var StyledThumbnailContainer = styled109.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = styled109.div`
+var StyledThumbnail = styled112.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
-  background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil45($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -18878,7 +19211,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__ */ jsx347(
+  return /* @__PURE__ */ jsx350(
     ThumbnailStoryboardViewer,
     {
       cursorPosition: effectiveCursorPosition,
@@ -18904,7 +19237,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
   };
 };
 var hasValidThumbnailUrl = (thumbnailUrl) => {
-  return isNotNil43(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
+  return isNotNil45(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
 };
 var Thumbnail = forwardRef37(
   ({
@@ -18927,7 +19260,7 @@ var Thumbnail = forwardRef37(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil43(storyboard);
+    const isScrubbable = isNotNil45(storyboard);
     const trackStoryboardLoadStatus = useCallback20(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -18968,7 +19301,7 @@ var Thumbnail = forwardRef37(
     }, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
     let thumbnailContent = null;
     if (storyboard && shouldRenderStoryboard) {
-      thumbnailContent = /* @__PURE__ */ jsx347(
+      thumbnailContent = /* @__PURE__ */ jsx350(
         StoryboardRenderer,
         {
           aspectRatio,
@@ -18980,7 +19313,7 @@ var Thumbnail = forwardRef37(
         }
       );
     } else if (hasValidThumbnailUrl(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx347(
+      thumbnailContent = /* @__PURE__ */ jsx350(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -18990,7 +19323,7 @@ var Thumbnail = forwardRef37(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsx347(
+    return /* @__PURE__ */ jsx350(
       StyledThumbnailContainer,
       {
         ref,
@@ -19003,14 +19336,14 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         ...props,
-        children: /* @__PURE__ */ jsxs70(
+        children: /* @__PURE__ */ jsxs72(
           StyledThumbnail,
           {
             $backgroundUrl: backgroundUrl,
             $gradientBackground: gradientBackground,
             "data-testid": "thumbnail-inner",
             children: [
-              isNotNil43(children) ? children : null,
+              isNotNil45(children) ? children : null,
               thumbnailContent
             ]
           }
@@ -19022,17 +19355,17 @@ var Thumbnail = forwardRef37(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import { cloneElement as cloneElement9, Children as Children11 } from "react";
-import { styled as styled110 } from "styled-components";
+import { cloneElement as cloneElement10, Children as Children11 } from "react";
+import { styled as styled113 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx348 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled110.div`
+import { jsx as jsx351 } from "react/jsx-runtime";
+var ThumbnailCollageContainer = styled113.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = styled110.div`
+var StyledThumbnailCollage = styled113.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -19084,13 +19417,13 @@ var ThumbnailCollage = ({
   const thumbnailArray = Children11.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return cloneElement9(child, {
+    return cloneElement10(child, {
       ...child.props,
       children: void 0
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx348(
+    /* @__PURE__ */ jsx351(
       Thumbnail,
       {
         gradientBackground,
@@ -19099,7 +19432,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx348(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx348(
+  return /* @__PURE__ */ jsx351(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx351(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -19111,26 +19444,26 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled111, css as css52 } from "styled-components";
-import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { jsx as jsx349, jsxs as jsxs71 } from "react/jsx-runtime";
+import { styled as styled114, css as css52 } from "styled-components";
+import { isNotNil as isNotNil46 } from "@wistia/type-guards";
+import { jsx as jsx352, jsxs as jsxs73 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx349(
+    return /* @__PURE__ */ jsx352(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx349("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__ */ jsx352("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__ */ jsx349(
+  return /* @__PURE__ */ jsx352(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx349("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__ */ jsx352("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" })
     }
   );
 };
@@ -19138,12 +19471,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx349(
+  return /* @__PURE__ */ jsx352(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx349("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__ */ jsx352("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" })
     }
   );
 };
@@ -19153,7 +19486,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled111.svg`
+var WistiaLogoComponent = styled114.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -19211,7 +19544,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs71(
+  const Logo = /* @__PURE__ */ jsxs73(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -19224,110 +19557,16 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx349("title", { children: title }),
-        isNotNil44(description) ? /* @__PURE__ */ jsx349("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx352("title", { children: title }),
+        isNotNil46(description) ? /* @__PURE__ */ jsx352("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx349("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx352("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
-
-// src/components/SplitButton/SplitButton.tsx
-import { styled as styled112 } from "styled-components";
-import { isNotNil as isNotNil45 } from "@wistia/type-guards";
-import { cloneElement as cloneElement10 } from "react";
-import { jsx as jsx350, jsxs as jsxs72 } from "react/jsx-runtime";
-var StyledSplitButton = styled112.span`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  white-space: nowrap;
-
-  &:has(:nth-child(2)) {
-    > [data-wui-button='true']:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      padding-right: 0;
-    }
-
-    > [data-wui-button='true']:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      display: inline-flex;
-    }
-  }
-`;
-var SplitButton = ({
-  children,
-  menuLabel = "Select an option",
-  menuIcon = /* @__PURE__ */ jsx350(Icon, { type: "caret-down" }),
-  menuItems,
-  disabled = false,
-  colorScheme = "inherit",
-  variant = "solid",
-  secondaryAction,
-  size = "md",
-  unstyled = false,
-  menuProps = {},
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs72(StyledSplitButton, { $colorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx350(
-      Button,
-      {
-        disabled,
-        size,
-        unstyled,
-        variant,
-        ...props,
-        children
-      }
-    ),
-    isNotNil45(menuItems) && /* @__PURE__ */ jsx350(
-      Menu,
-      {
-        ...menuProps,
-        disabled,
-        trigger: /* @__PURE__ */ jsx350(
-          IconButton,
-          {
-            disabled,
-            label: menuLabel,
-            size,
-            unstyled,
-            variant,
-            children: menuIcon
-          }
-        ),
-        children: menuItems
-      }
-    ),
-    isNotNil45(secondaryAction) && cloneElement10(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
-  ] });
-};
-SplitButton.displayName = "SplitButton_UI";
-
-// src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
-import { styled as styled113 } from "styled-components";
-import { jsx as jsx351 } from "react/jsx-runtime";
-var StyledCustomizableThemeWrapper = styled113.div(
-  (props) => props.$overrides
-);
-var CustomizableThemeWrapper = ({
-  children,
-  overrides,
-  ...props
-}) => /* @__PURE__ */ jsx351(
-  StyledCustomizableThemeWrapper,
-  {
-    ...props,
-    $overrides: overrides,
-    "data-wui-theme": "true",
-    children
-  }
-);
-CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
 export {
   ActionButton,
   Avatar,
@@ -19417,6 +19656,7 @@ export {
   MenuItemLabel,
   MenuLabel,
   MenuRadioGroup,
+  Meter,
   Modal,
   ModalCallout,
   ModalCallouts,