@wistia/ui 0.20.17 → 0.20.18-beta.85ff93e1.aa02a44

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.17
+ * @license @wistia/ui v0.20.18-beta.85ff93e1.aa02a44
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -15391,12 +15391,271 @@ var EditableTextTrigger = ({
   return cloneElement7(onlyChild, triggerProps);
 };
 
+// src/components/FeatureCard/FeatureCard.tsx
+import { useEffect as useEffect19, useState as useState21, useMemo as useMemo14 } from "react";
+import { styled as styled69 } from "styled-components";
+import { isNil as isNil17, isNotNil as isNotNil28 } from "@wistia/type-guards";
+import { Fragment as Fragment9, jsx as jsx304, jsxs as jsxs46 } from "react/jsx-runtime";
+var BREAKPOINT_WIDTH2 = 600;
+var VERTICAL_BREAKPOINT_WIDTH2 = 284;
+var MIN_IMAGE_WIDTH2 = 400;
+var StyledFeatureCard = styled69.div`
+  --wui-feature-card-padding: var(--wui-space-04);
+  --wui-feature-card-content-height: ${({ $contentHeight }) => $contentHeight}px;
+
+  display: flex;
+  flex-direction: row;
+  background: var(--wui-color-bg-surface-secondary);
+  border-radius: var(--wui-border-radius-03);
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+
+  &[data-wui-feature-card-content-prominence='secondary'] {
+    --wui-feature-card-padding: var(--wui-space-05);
+
+    box-shadow: inset 0 0 0 2px var(--wui-color-border);
+  }
+
+  &:has([data-wui-feature-card-image]) {
+    --wui-feature-card-padding: var(--wui-space-05);
+  }
+
+  &[data-wui-feature-card-content-prominence='small'] {
+    --wui-feature-card-padding: var(--wui-space-04);
+  }
+
+  &[data-wui-feature-card-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var FeatureCard = ({
+  bodyText,
+  colorScheme = "inherit",
+  headingText,
+  icon,
+  image,
+  onClose,
+  orientation = "horizontal",
+  primaryAction,
+  prominence = "primary",
+  secondaryAction,
+  ...props
+}) => {
+  const [containerRef, { width }] = useElementObserver();
+  const [contentRef, { height: contentHeight }] = useElementObserver();
+  const [isSmallContainer, setIsSmallContainer] = useState21(false);
+  const [isVerticalLayout, setIsVerticalLayout] = useState21(orientation === "vertical");
+  useEffect19(() => {
+    const breakpoint = orientation === "vertical" ? VERTICAL_BREAKPOINT_WIDTH2 : BREAKPOINT_WIDTH2;
+    setIsSmallContainer(width <= breakpoint);
+    if (orientation === "auto") {
+      setIsVerticalLayout(width <= BREAKPOINT_WIDTH2);
+    }
+  }, [width, orientation]);
+  const hasImage = isNotNil28(image);
+  const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH2);
+  const iconPosition = useMemo14(() => {
+    if (isNil17(icon)) {
+      return "none";
+    }
+    if (isSmallContainer) {
+      return shouldShowImage ? "inline" : "above";
+    }
+    return prominence === "secondary" ? "inline" : "above";
+  }, [icon, isSmallContainer, shouldShowImage, prominence]);
+  const hasActions = isNotNil28(primaryAction) || isNotNil28(secondaryAction);
+  const contentDirection = useMemo14(() => {
+    if (orientation === "horizontal" && !hasActions) {
+      return "row";
+    }
+    return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
+  }, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
+  const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
+  const textVariant = prominence === "primary" || isSmallContainer ? "body3" : "body2";
+  const buttonSize = isSmallContainer ? "sm" : "md";
+  return /* @__PURE__ */ jsxs46(
+    StyledFeatureCard,
+    {
+      ...props,
+      ref: containerRef,
+      $colorScheme: colorScheme,
+      $contentHeight: contentHeight,
+      $width: !isSmallContainer && !isVerticalLayout ? width : void 0,
+      "data-wui-feature-card-content-prominence": isSmallContainer ? "small" : prominence,
+      "data-wui-feature-card-orientation": isVerticalLayout ? "vertical" : "horizontal",
+      children: [
+        shouldShowImage ? image : null,
+        /* @__PURE__ */ jsxs46(
+          Box,
+          {
+            ref: contentRef,
+            alignItems: "stretch",
+            direction: contentDirection,
+            flexMode: "grow",
+            gap: "space-04",
+            style: { padding: "var(--wui-feature-card-padding)" },
+            children: [
+              iconPosition === "above" && /* @__PURE__ */ jsx304(
+                Box,
+                {
+                  alignSelf: "stretch",
+                  direction: "column",
+                  justifyContent: "center",
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsxs46(
+                Box,
+                {
+                  direction: "column",
+                  flexMode: contentDirection === "row" ? "grow" : "initial",
+                  gap: iconPosition === "inline" ? "space-01" : "space-00",
+                  justifyContent: "center",
+                  children: [
+                    isNotNil28(headingText) ? /* @__PURE__ */ jsxs46(Heading, { variant: headingVariant, children: [
+                      iconPosition === "inline" && /* @__PURE__ */ jsxs46(Fragment9, { children: [
+                        icon,
+                        " "
+                      ] }),
+                      headingText
+                    ] }) : null,
+                    /* @__PURE__ */ jsx304(Text, { variant: textVariant, children: bodyText })
+                  ]
+                }
+              ),
+              hasActions ? /* @__PURE__ */ jsxs46(
+                ButtonGroup,
+                {
+                  buttonSize,
+                  collapseOnSmallScreens: false,
+                  style: { paddingRight: "var(--wui-space-02)" },
+                  children: [
+                    isNotNil28(primaryAction) && primaryAction,
+                    isNotNil28(secondaryAction) && secondaryAction
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        isNotNil28(onClose) && /* @__PURE__ */ jsx304(
+          IconButton,
+          {
+            label: "Close",
+            onClick: onClose,
+            size: "sm",
+            style: {
+              position: "absolute",
+              top: "var(--wui-space-01)",
+              right: "var(--wui-space-01)"
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ jsx304(Icon, { type: "close" })
+          }
+        )
+      ]
+    }
+  );
+};
+FeatureCard.displayName = "FeatureCard_UI";
+
+// src/components/FeatureCard/FeatureCardImage.tsx
+import { styled as styled70 } from "styled-components";
+import { jsx as jsx305 } from "react/jsx-runtime";
+var StyledFeatureCardImageContainer = styled70.div`
+  --wui-feature-card-image-border-radius: var(--wui-border-radius-02);
+  --wui-feature-card-image-height: auto;
+  --wui-feature-card-image-width: auto;
+
+  overflow: hidden;
+  padding: var(--wui-space-04);
+  height: var(--wui-feature-card-image-height);
+  width: var(--wui-feature-card-image-width);
+  justify-self: stretch;
+  align-self: stretch;
+  max-width: 300px;
+
+  /* Make image container stretch full width in vertical layout and remove bottom padding */
+  [data-wui-feature-card-orientation='vertical'] & {
+    max-width: none;
+    width: 100%;
+    padding-bottom: var(--wui-space-00);
+  }
+
+  /* In horizontal layout, make image height equal to the content height and apply aspect ratio */
+  [data-wui-feature-card-orientation='horizontal'] & {
+    --wui-feature-card-image-height: calc(
+      var(--wui-feature-card-content-height) + (var(--wui-feature-card-padding) * 2)
+    );
+
+    /* Handle image alignment and remove padding next to content */
+    &[data-wui-feature-card-image='right'] {
+      padding-left: var(--wui-space-00);
+      order: 2;
+    }
+
+    &[data-wui-feature-card-image='left'] {
+      padding-right: var(--wui-space-00);
+    }
+  }
+
+  /* Remove border radius and padding in small prominence horizontal layout */
+  [data-wui-feature-card-content-prominence='small'] & {
+    --wui-feature-card-image-border-radius: var(--wui-border-radius-00);
+
+    padding: var(--wui-space-00);
+  }
+
+  /* Remove border radius in secondary prominence vertical layout */
+  [data-wui-feature-card-orientation='vertical']
+    [data-wui-feature-card-content-prominence='secondary']
+    & {
+    --wui-feature-card-image-border-radius: var(--wui-border-radius-00);
+  }
+
+  [data-wui-feature-card-orientation='horizontal'][data-wui-feature-card-content-prominence='small']
+    & {
+    flex: 0 0 25%;
+  }
+
+  img {
+    border-radius: var(--wui-feature-card-image-border-radius);
+  }
+`;
+var FeatureCardImage = ({
+  alignment = "left",
+  alt,
+  src,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx305(
+    StyledFeatureCardImageContainer,
+    {
+      "data-wui-feature-card-image": alignment,
+      ...props,
+      children: /* @__PURE__ */ jsx305(
+        Image,
+        {
+          alt: alt ?? "",
+          fill: true,
+          fit: "cover",
+          src
+        }
+      )
+    }
+  );
+};
+
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback17, useState as useState21 } from "react";
+import { useCallback as useCallback17, useState as useState22 } from "react";
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = useState21(initialData);
-  const [isPending, setIsPending] = useState21(false);
-  const [error, setError] = useState21(null);
+  const [data, setData] = useState22(initialData);
+  const [isPending, setIsPending] = useState22(false);
+  const [error, setError] = useState22(null);
   const formAction = useCallback17(
     async (nextFormData) => {
       if (nextFormData === null) {
@@ -15430,9 +15689,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 jsx304, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs47 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx304("li", { children: /* @__PURE__ */ jsx304(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx306("li", { children: /* @__PURE__ */ jsx306(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef20(null);
@@ -15441,10 +15700,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs46("div", { ref, children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs47("div", { ref, children: [
+    /* @__PURE__ */ jsx306("p", { children: description }),
+    /* @__PURE__ */ jsx306("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
+      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx306(
         ErrorItem,
         {
           error: err,
@@ -15452,7 +15711,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx304(
+      )) : /* @__PURE__ */ jsx306(
         ErrorItem,
         {
           error: error ?? "",
@@ -15491,9 +15750,9 @@ var validateWithYup = (schema) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-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 jsx305, jsxs as jsxs47 } from "react/jsx-runtime";
+import { styled as styled71, css as css36 } from "styled-components";
+import { isArray as isArray4, isNotNil as isNotNil29, isNotUndefined as isNotUndefined13, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { jsx as jsx307, jsxs as jsxs48 } from "react/jsx-runtime";
 var inlineErrorStyles = css36`
   grid-template-rows: 1fr auto;
   grid-template-areas: 'label-description input' '. error';
@@ -15506,7 +15765,7 @@ var blockGridErrorStyles = css36`
   grid-template-rows: auto 1fr auto;
   grid-template-areas: 'label-description' 'input' 'error';
 `;
-var StyledFormField = styled69.div`
+var StyledFormField = styled71.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);
@@ -15540,10 +15799,10 @@ var StyledFormField = styled69.div`
     ${({ $hasError }) => $hasError && blockGridErrorStyles}
   }
 `;
-var ErrorText = styled69(Text)`
+var ErrorText = styled71(Text)`
   grid-area: error;
 `;
-var StyledErrorList = styled69.ul`
+var StyledErrorList = styled71.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -15556,7 +15815,7 @@ var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = isArray4(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
-    return /* @__PURE__ */ jsx305(
+    return /* @__PURE__ */ jsx307(
       ErrorText,
       {
         colorScheme: "error",
@@ -15569,7 +15828,7 @@ var ErrorMessages = ({ errors, id }) => {
     );
   }
   if (!isMultipleErrors) {
-    return /* @__PURE__ */ jsx305(
+    return /* @__PURE__ */ jsx307(
       ErrorText,
       {
         colorScheme: "error",
@@ -15581,7 +15840,7 @@ var ErrorMessages = ({ errors, id }) => {
       id
     );
   }
-  return /* @__PURE__ */ jsx305(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx307(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx307(
     Text,
     {
       colorScheme: "error",
@@ -15615,8 +15874,8 @@ var FormField = ({
   const descriptionId = `${computedId}-description`;
   const errorId = `${computedId}-error`;
   const ariaDescribedby = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
-  const hasDescription = isNotNil28(description);
-  const hasError = isNotNil28(computedError);
+  const hasDescription = isNotNil29(description);
+  const hasError = isNotNil29(computedError);
   const shouldRenderLabelDescriptionWrapper = !isIntegratedLabel || hasDescription;
   let childProps = {
     name,
@@ -15633,8 +15892,8 @@ var FormField = ({
       defaultValue
     };
   }
-  if (isNotNil28(checkboxGroup)) {
-    const computedName = isNotNil28(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil29(checkboxGroup)) {
+    const computedName = isNotNil29(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
       if (isNotUndefined13(props.onChange)) {
         props.onChange(event);
@@ -15650,14 +15909,14 @@ var FormField = ({
     };
   }
   Children10.only(children);
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48(
     StyledFormField,
     {
       ...props,
       $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ jsxs47(
+        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ jsxs48(
           Stack,
           {
             direction: "vertical",
@@ -15666,7 +15925,7 @@ var FormField = ({
               gridArea: "label-description"
             },
             children: [
-              !isIntegratedLabel && /* @__PURE__ */ jsx305(
+              !isIntegratedLabel && /* @__PURE__ */ jsx307(
                 Label,
                 {
                   htmlFor: computedId,
@@ -15674,12 +15933,12 @@ var FormField = ({
                   children: label
                 }
               ),
-              hasDescription ? /* @__PURE__ */ jsx305(FormControlLabelDescription, { id: descriptionId, children: description }) : null
+              hasDescription ? /* @__PURE__ */ jsx307(FormControlLabelDescription, { id: descriptionId, children: description }) : null
             ]
           }
         ) : null,
         cloneElement8(children, childProps),
-        hasError ? /* @__PURE__ */ jsx305(
+        hasError ? /* @__PURE__ */ jsx307(
           ErrorMessages,
           {
             errors: computedError,
@@ -15693,8 +15952,8 @@ var FormField = ({
 FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext8, useMemo as useMemo14, useContext as useContext14 } from "react";
-import { jsx as jsx306 } from "react/jsx-runtime";
+import { createContext as createContext8, useMemo as useMemo15, useContext as useContext14 } from "react";
+import { jsx as jsx308 } from "react/jsx-runtime";
 var RadioGroupContext = createContext8(null);
 var useRadioGroup = () => {
   return useContext14(RadioGroupContext);
@@ -15708,22 +15967,22 @@ var RadioGroup = ({
 }) => {
   const formState = useContext14(FormContext);
   const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
-  const context = useMemo14(() => {
+  const context = useMemo15(() => {
     return {
       name,
       onChange,
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ jsx306(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx306(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx308(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx308(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled70, css as css37 } from "styled-components";
+import { styled as styled72, css as css37 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
-import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx309 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
@@ -15751,7 +16010,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
     );
   `;
 };
-var StyledGrid = styled70.div`
+var StyledGrid = styled72.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
 
@@ -15775,7 +16034,7 @@ var GridComponent = forwardRef22(
     const { column, row } = isRecord5(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
     const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
-    return /* @__PURE__ */ jsx307(
+    return /* @__PURE__ */ jsx309(
       StyledGrid,
       {
         ref,
@@ -15795,11 +16054,11 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-import { styled as styled71 } from "styled-components";
-import { forwardRef as forwardRef23, useEffect as useEffect19, useState as useState22 } from "react";
+import { styled as styled73 } from "styled-components";
+import { forwardRef as forwardRef23, useEffect as useEffect20, useState as useState23 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
-import { jsx as jsx308 } from "react/jsx-runtime";
-var StyledIconButton = styled71(IconButton)`
+import { jsx as jsx310 } from "react/jsx-runtime";
+var StyledIconButton = styled73(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15810,8 +16069,8 @@ var StyledIconButton = styled71(IconButton)`
 var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef23(
   ({ value, onCopy, disabled = false, ...props }, ref) => {
-    const [isCopied, setIsCopied] = useState22(false);
-    useEffect19(() => {
+    const [isCopied, setIsCopied] = useState23(false);
+    useEffect20(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
           setIsCopied(false);
@@ -15838,7 +16097,7 @@ var InputClickToCopy = forwardRef23(
         return value;
       });
     };
-    return /* @__PURE__ */ jsx308(
+    return /* @__PURE__ */ jsx310(
       Input,
       {
         "aria-label": "Click to Copy",
@@ -15846,7 +16105,7 @@ var InputClickToCopy = forwardRef23(
         ref,
         disabled,
         readOnly: true,
-        rightIcon: /* @__PURE__ */ jsx308(
+        rightIcon: /* @__PURE__ */ jsx310(
           StyledIconButton,
           {
             colorScheme: isCopied ? "success" : "inherit",
@@ -15854,7 +16113,7 @@ var InputClickToCopy = forwardRef23(
             label: "Copy to clipboard",
             onClick: handleClick,
             variant: "ghost",
-            children: isCopied ? /* @__PURE__ */ jsx308(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx308(Icon, { type: "save-as-copy" })
+            children: isCopied ? /* @__PURE__ */ jsx310(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx310(Icon, { type: "save-as-copy" })
           }
         ),
         value
@@ -15865,11 +16124,11 @@ var InputClickToCopy = forwardRef23(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-import { styled as styled72 } from "styled-components";
-import { forwardRef as forwardRef24, useState as useState23 } from "react";
+import { styled as styled74 } from "styled-components";
+import { forwardRef as forwardRef24, useState as useState24 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
-import { jsx as jsx309 } from "react/jsx-runtime";
-var StyledIconButton2 = styled72(IconButton)`
+import { jsx as jsx311 } from "react/jsx-runtime";
+var StyledIconButton2 = styled74(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -15879,7 +16138,7 @@ var StyledIconButton2 = styled72(IconButton)`
 `;
 var InputPassword = forwardRef24(
   ({ onVisibilityToggle, disabled = false, ...props }, ref) => {
-    const [isVisible, setIsVisible] = useState23(false);
+    const [isVisible, setIsVisible] = useState24(false);
     const handleClick = () => {
       const newVisibility = !isVisible;
       setIsVisible(newVisibility);
@@ -15887,13 +16146,13 @@ var InputPassword = forwardRef24(
         onVisibilityToggle(newVisibility);
       }
     };
-    return /* @__PURE__ */ jsx309(
+    return /* @__PURE__ */ jsx311(
       Input,
       {
         ...props,
         ref,
         disabled,
-        rightIcon: /* @__PURE__ */ jsx309(
+        rightIcon: /* @__PURE__ */ jsx311(
           StyledIconButton2,
           {
             disabled,
@@ -15901,7 +16160,7 @@ var InputPassword = forwardRef24(
             onClick: handleClick,
             tabIndex: disabled ? -1 : 0,
             variant: "ghost",
-            children: /* @__PURE__ */ jsx309(Icon, { type: isVisible ? "preview" : "hide" })
+            children: /* @__PURE__ */ jsx311(Icon, { type: isVisible ? "preview" : "hide" })
           }
         ),
         type: isVisible ? "text" : "password"
@@ -15912,16 +16171,16 @@ var InputPassword = forwardRef24(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import { styled as styled73 } from "styled-components";
-import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { jsx as jsx310, jsxs as jsxs48 } from "react/jsx-runtime";
-var StyledKeyboardShortcut = styled73.div`
+import { styled as styled75 } from "styled-components";
+import { isNotNil as isNotNil30 } from "@wistia/type-guards";
+import { jsx as jsx312, jsxs as jsxs49 } from "react/jsx-runtime";
+var StyledKeyboardShortcut = styled75.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = styled73.kbd`
+var StyledKey = styled75.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -15944,11 +16203,11 @@ var StyledKey = styled73.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = styled73.span`
+var Label2 = styled75.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = styled73.div`
+var KeysContainer = styled75.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -16001,14 +16260,14 @@ var KeyboardShortcut = ({
   keyboardKeys,
   fullWidth = false,
   ...otherProps
-}) => /* @__PURE__ */ jsxs48(
+}) => /* @__PURE__ */ jsxs49(
   StyledKeyboardShortcut,
   {
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      isNotNil29(label) && /* @__PURE__ */ jsx310(Label2, { children: label }),
-      /* @__PURE__ */ jsx310(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx310(
+      isNotNil30(label) && /* @__PURE__ */ jsx312(Label2, { children: label }),
+      /* @__PURE__ */ jsx312(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx312(
         StyledKey,
         {
           children: keyToString(keyboardKey)
@@ -16021,26 +16280,26 @@ var KeyboardShortcut = ({
 KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
-import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled75, css as css38 } from "styled-components";
+import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { styled as styled77, css as css38 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import { styled as styled74 } from "styled-components";
-import { isNil as isNil17 } from "@wistia/type-guards";
-import { jsx as jsx311 } from "react/jsx-runtime";
-var ListItemComponent = styled74.li`
+import { styled as styled76 } from "styled-components";
+import { isNil as isNil18 } from "@wistia/type-guards";
+import { jsx as jsx313 } from "react/jsx-runtime";
+var ListItemComponent = styled76.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if (isNil17(children)) {
+  if (isNil18(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx311(ListItemComponent, { children });
+  return /* @__PURE__ */ jsx313(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx312, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx314, jsxs as jsxs50 } from "react/jsx-runtime";
 var spacesStyle = css38`
   overflow: hidden;
   padding-left: 0;
@@ -16099,7 +16358,7 @@ var unbulletedStyle = css38`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = styled75.ul`
+var ListComponent = styled77.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -16126,7 +16385,7 @@ var ListComponent = styled75.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx312(
+  return /* @__PURE__ */ jsx314(
     ListComponent,
     {
       as: elementType,
@@ -16143,7 +16402,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     const nextItem = listItems[i + 1];
     const key = `item-${itemCount += 1}`;
     if (Array.isArray(nextItem)) {
-      return /* @__PURE__ */ jsxs49(ListItem, { children: [
+      return /* @__PURE__ */ jsxs50(ListItem, { children: [
         item,
         renderListFromArray(nextItem, variant, otherProps)
       ] }, key);
@@ -16151,7 +16410,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ jsx312(ListItem, { children: item }, key);
+    return /* @__PURE__ */ jsx314(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -16162,13 +16421,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if (isNotNil30(children)) {
+  if (isNotNil31(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if (isNotNil30(items)) {
+  if (isNotNil31(items)) {
     if (!items.length) {
       return null;
     }
@@ -16179,9 +16438,9 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-import { styled as styled76 } from "styled-components";
-import { jsx as jsx313 } from "react/jsx-runtime";
-var StyledMark = styled76.mark`
+import { styled as styled78 } from "styled-components";
+import { jsx as jsx315 } from "react/jsx-runtime";
+var StyledMark = styled78.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
   color: var(--wui-color-text);
@@ -16189,7 +16448,7 @@ var StyledMark = styled76.mark`
   padding-inline: 0.1em;
   margin-inline: -0.1em;
 `;
-var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx313(
+var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx315(
   StyledMark,
   {
     $colorScheme: colorScheme,
@@ -16200,7 +16459,7 @@ var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */
 Mark.displayName = "Mark_UI";
 
 // src/components/Markdown/Markdown.tsx
-import { styled as styled77 } from "styled-components";
+import { styled as styled79 } from "styled-components";
 import ReactMarkdown from "react-markdown";
 
 // src/css/baseMarkdownCss.tsx
@@ -16328,8 +16587,8 @@ var baseMarkdownCss = (textSize = "body2") => css39`
 `;
 
 // src/components/Markdown/Markdown.tsx
-import { jsx as jsx314 } from "react/jsx-runtime";
-var StyledMarkdownWrapper = styled77.div`
+import { jsx as jsx316 } from "react/jsx-runtime";
+var StyledMarkdownWrapper = styled79.div`
   ${({ $textSize }) => baseMarkdownCss($textSize)}
 `;
 var Markdown = ({
@@ -16338,47 +16597,47 @@ var Markdown = ({
   ...otherProps
 }) => {
   const responsiveTextSize = useResponsiveProp(textSize);
-  return /* @__PURE__ */ jsx314(
+  return /* @__PURE__ */ jsx316(
     StyledMarkdownWrapper,
     {
       $textSize: responsiveTextSize,
       ...otherProps,
-      children: /* @__PURE__ */ jsx314(ReactMarkdown, { children })
+      children: /* @__PURE__ */ jsx316(ReactMarkdown, { children })
     }
   );
 };
 Markdown.displayName = "Markdown_UI";
 
 // src/components/Meter/Meter.tsx
-import { styled as styled78 } from "styled-components";
+import { styled as styled80 } 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`
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { jsx as jsx317, jsxs as jsxs51 } from "react/jsx-runtime";
+var MeterWrapper = styled80.div`
   --meter-height: 16px;
 
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-02);
 `;
-var MeterLabelContainer = styled78.div`
+var MeterLabelContainer = styled80.div`
   display: flex;
   justify-content: space-between;
   align-items: baseline;
 `;
-var MeterLabel = styled78.div`
+var MeterLabel = styled80.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`
+var MeterLabelMeta = styled80.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`
+var MeterBarContainer = styled80.div`
   position: relative;
   overflow: hidden;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -16387,7 +16646,7 @@ var MeterBarContainer = styled78.div`
   height: var(--meter-height);
   transform: translateZ(0);
 `;
-var MeterSegmentBar = styled78.div`
+var MeterSegmentBar = styled80.div`
   position: absolute;
   top: 0;
   left: ${({ $offset }) => $offset}%;
@@ -16405,30 +16664,30 @@ var MeterSegmentBar = styled78.div`
     border-bottom-right-radius: var(--wui-border-radius-rounded);
   }
 `;
-var MeterDescription = styled78.div`
+var MeterDescription = styled80.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`
+var MeterKey = styled80.div`
   display: flex;
   flex-wrap: wrap;
   gap: var(--wui-space-03);
 `;
-var MeterKeyItem = styled78.div`
+var MeterKeyItem = styled80.div`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
 `;
-var MeterKeyColorIndicator = styled78.div`
+var MeterKeyColorIndicator = styled80.div`
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: ${({ $color }) => `var(--wui-${$color})`};
   flex-shrink: 0;
 `;
-var MeterKeyLabel = styled78.span`
+var MeterKeyLabel = styled80.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);
@@ -16474,38 +16733,38 @@ var Meter = ({
     return acc;
   }, []);
   const keySegments = segmentsWithOffsets.filter(
-    (segment) => isNotNil31(segment.label)
+    (segment) => isNotNil32(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 segmentDescriptions = segments.filter((segment) => isNotNil32(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(
+  const effectiveAriaLabel = ariaLabel ?? (isNotNil32(label) ? nodeToString(label) : "Data meter");
+  return /* @__PURE__ */ jsxs51(MeterWrapper, { ...props, children: [
+    /* @__PURE__ */ jsx317(
       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
+    isNotNil32(label) || isNotNil32(labelMeta) ? /* @__PURE__ */ jsxs51(MeterLabelContainer, { id: labelId, children: [
+      isNotNil32(label) ? /* @__PURE__ */ jsx317(MeterLabel, { children: label }) : null,
+      isNotNil32(labelMeta) ? /* @__PURE__ */ jsx317(MeterLabelMeta, { children: labelMeta }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx315(
+    /* @__PURE__ */ jsx317(
       MeterBarContainer,
       {
         "aria-describedby": descriptionId,
         "aria-label": effectiveAriaLabel,
-        "aria-labelledby": isNotNil31(label) || isNotNil31(labelMeta) ? labelId : void 0,
+        "aria-labelledby": isNotNil32(label) || isNotNil32(labelMeta) ? labelId : void 0,
         "aria-valuemax": max,
         "aria-valuemin": 0,
         "aria-valuenow": totalValue,
         role: "meter",
-        children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx315(
+        children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx317(
           MeterSegmentBar,
           {
             $color: segment.color,
@@ -16517,25 +16776,25 @@ var Meter = ({
         ))
       }
     ),
-    isNotNil31(description) ? /* @__PURE__ */ jsx315(MeterDescription, { children: description }) : null,
-    !hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx315(
+    isNotNil32(description) ? /* @__PURE__ */ jsx317(MeterDescription, { children: description }) : null,
+    !hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx317(
       MeterKey,
       {
         "aria-label": "Meter legend",
         role: "list",
-        children: keySegments.map((segment) => /* @__PURE__ */ jsxs50(
+        children: keySegments.map((segment) => /* @__PURE__ */ jsxs51(
           MeterKeyItem,
           {
             role: "listitem",
             children: [
-              /* @__PURE__ */ jsx315(
+              /* @__PURE__ */ jsx317(
                 MeterKeyColorIndicator,
                 {
                   $color: segment.color,
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsx315(MeterKeyLabel, { children: segment.label })
+              /* @__PURE__ */ jsx317(MeterKeyLabel, { children: segment.label })
             ]
           },
           `${segment.color}-${segment.value}-${segment.offset}-${nodeToString(segment.label)}`
@@ -16548,40 +16807,40 @@ Meter.displayName = "Meter_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { styled as styled83 } from "styled-components";
+import { styled as styled85 } 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";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import { styled as styled80 } from "styled-components";
+import { styled as styled82 } from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import { styled as styled79 } from "styled-components";
+import { styled as styled81 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx316 } from "react/jsx-runtime";
-var CloseButton = styled79(DialogClose)`
+import { jsx as jsx318 } from "react/jsx-runtime";
+var CloseButton = styled81(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx316(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx316(
+  return /* @__PURE__ */ jsx318(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx318(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx316(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx318(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx317, jsxs as jsxs51 } from "react/jsx-runtime";
-var Header = styled80.header`
+import { jsx as jsx319, jsxs as jsxs52 } from "react/jsx-runtime";
+var Header = styled82.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -16601,7 +16860,7 @@ var Header = styled80.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = styled80(DialogTitle)`
+var Title = styled82(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);
@@ -16612,15 +16871,15 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx317(ScreenReaderOnly, { children: /* @__PURE__ */ jsx317(Title, { children: title }) }) : /* @__PURE__ */ jsx317(Title, { children: title });
-  return /* @__PURE__ */ jsxs51(
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx319(ScreenReaderOnly, { children: /* @__PURE__ */ jsx319(Title, { children: title }) }) : /* @__PURE__ */ jsx319(Title, { children: title });
+  return /* @__PURE__ */ jsxs52(
     Header,
     {
       $hideCloseButon: hideCloseButton,
       $hideTitle: hideTitle,
       children: [
         TitleComponent,
-        hideCloseButton ? null : /* @__PURE__ */ jsx317(ModalCloseButton, {})
+        hideCloseButton ? null : /* @__PURE__ */ jsx319(ModalCloseButton, {})
       ]
     }
   );
@@ -16628,23 +16887,23 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled81, css as css40, keyframes as keyframes5 } from "styled-components";
+import { styled as styled83, css as css40, keyframes as keyframes5 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/components/Modal/constants.ts
 var DEFAULT_MODAL_WIDTH = "532px";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef21, useEffect as useEffect20 } from "react";
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { useRef as useRef21, useEffect as useEffect21 } from "react";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef21(null);
-  useEffect20(() => {
+  useEffect21(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     return () => {
-      if (isNotNil32(previouslyFocusedRef.current)) {
+      if (isNotNil33(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -16654,7 +16913,7 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx318 } from "react/jsx-runtime";
+import { jsx as jsx320 } from "react/jsx-runtime";
 var modalEnter = keyframes5`
   from {
     opacity: 0;
@@ -16752,7 +17011,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = styled81(DialogContent)`
+var StyledModalContent = styled83(DialogContent)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -16782,7 +17041,7 @@ var StyledModalContent = styled81(DialogContent)`
 var ModalContent = forwardRef25(
   ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx318(
+    return /* @__PURE__ */ jsx320(
       StyledModalContent,
       {
         ref,
@@ -16797,7 +17056,7 @@ var ModalContent = forwardRef25(
 
 // src/components/Modal/ModalOverlay.tsx
 import { DialogOverlay } from "@radix-ui/react-dialog";
-import { styled as styled82, keyframes as keyframes6 } from "styled-components";
+import { styled as styled84, keyframes as keyframes6 } from "styled-components";
 var backdropShow = keyframes6`
   from {
     opacity: 0;
@@ -16816,7 +17075,7 @@ var backdropHide = keyframes6`
     opacity: 0;
   }
 `;
-var ModalOverlay = styled82(DialogOverlay)`
+var ModalOverlay = styled84(DialogOverlay)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
@@ -16829,20 +17088,20 @@ var ModalOverlay = styled82(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx319, jsxs as jsxs52 } from "react/jsx-runtime";
-var ModalHiddenDescription = styled83(DialogDescription)({ ...visuallyHiddenStyle });
-var ModalBody = styled83.div`
+import { jsx as jsx321, jsxs as jsxs53 } from "react/jsx-runtime";
+var ModalHiddenDescription = styled85(DialogDescription)({ ...visuallyHiddenStyle });
+var ModalBody = styled85.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = styled83.div`
+var ModalScrollArea = styled85.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = styled83.footer`
+var ModalFooter = styled85.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -16860,23 +17119,23 @@ var Modal = forwardRef26(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx319(
+    return /* @__PURE__ */ jsx321(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil33(onRequestClose)) {
+          if (!open2 && isNotNil34(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs52(DialogPortal, { children: [
-          /* @__PURE__ */ jsx319(ModalOverlay, {}),
-          /* @__PURE__ */ jsxs52(
+        children: /* @__PURE__ */ jsxs53(DialogPortal, { children: [
+          /* @__PURE__ */ jsx321(ModalOverlay, {}),
+          /* @__PURE__ */ jsxs53(
             ModalContent,
             {
               ref,
               onOpenAutoFocus: (event) => {
-                if (isNotNil33(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil34(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -16887,9 +17146,9 @@ var Modal = forwardRef26(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx319(ModalScrollArea, { children: /* @__PURE__ */ jsx319(ModalBody, { children }) }),
-                isNotNil33(footer) ? /* @__PURE__ */ jsx319(ModalFooter, { children: footer }) : null,
-                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx319(
+                /* @__PURE__ */ jsx321(ModalScrollArea, { children: /* @__PURE__ */ jsx321(ModalBody, { children }) }),
+                isNotNil34(footer) ? /* @__PURE__ */ jsx321(ModalFooter, { children: footer }) : null,
+                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx321(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -16897,7 +17156,7 @@ var Modal = forwardRef26(
                     title
                   }
                 ),
-                /* @__PURE__ */ jsx319(ModalHiddenDescription, {})
+                /* @__PURE__ */ jsx321(ModalHiddenDescription, {})
               ]
             }
           )
@@ -16909,9 +17168,9 @@ var Modal = forwardRef26(
 Modal.displayName = "Modal_UI";
 
 // src/components/Modal/ModalCallouts.tsx
-import { jsx as jsx320, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs54 } from "react/jsx-runtime";
 var ModalCallouts = ({ children }) => {
-  return /* @__PURE__ */ jsx320(
+  return /* @__PURE__ */ jsx322(
     Stack,
     {
       direction: "horizontal",
@@ -16922,9 +17181,9 @@ var ModalCallouts = ({ children }) => {
 };
 ModalCallouts.displayName = "ModalCallouts_UI";
 var ModalCallout = ({ title, image, children }) => {
-  return /* @__PURE__ */ jsxs53(Stack, { direction: "vertical", children: [
+  return /* @__PURE__ */ jsxs54(Stack, { direction: "vertical", children: [
     image,
-    /* @__PURE__ */ jsx320(Heading, { variant: "heading4", children: title }),
+    /* @__PURE__ */ jsx322(Heading, { variant: "heading4", children: title }),
     children
   ] });
 };
@@ -16932,19 +17191,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 styled85, css as css42 } from "styled-components";
+import { styled as styled87, css as css42 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil34(onOpenChange) && isNotNil34(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil35(onOpenChange) && isNotNil35(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-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`
+import { styled as styled86, css as css41, keyframes as keyframes7 } from "styled-components";
+import { jsx as jsx323, jsxs as jsxs55 } from "react/jsx-runtime";
+var StyledPath = styled86.path`
   fill: var(--wui-color-border-secondary);
 `;
 var circleAnimation = keyframes7`
@@ -16955,7 +17214,7 @@ var circleAnimation = keyframes7`
     opacity: 0;
   }
 `;
-var StyledCircle = styled84.circle`
+var StyledCircle = styled86.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -16982,7 +17241,7 @@ var StyledCircle = styled84.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx321(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsx323(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs55(
     "svg",
     {
       fill: "none",
@@ -16991,8 +17250,8 @@ var PopoverArrow = ({ isAnimated }) => {
       width: "48",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__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(
+        /* @__PURE__ */ jsx323(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__ */ jsx323(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -17003,7 +17262,7 @@ var PopoverArrow = ({ isAnimated }) => {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx321(
+        /* @__PURE__ */ jsx323(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -17021,8 +17280,8 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx322, jsxs as jsxs55 } from "react/jsx-runtime";
-var StyledContent2 = styled85(Content2)`
+import { jsx as jsx324, jsxs as jsxs56 } from "react/jsx-runtime";
+var StyledContent2 = styled87(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css42`
@@ -17061,9 +17320,9 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs55(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx322(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx322(Portal, { children: /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ jsx324(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx324(Portal, { children: /* @__PURE__ */ jsxs56(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -17072,17 +17331,17 @@ var Popover = ({
         $unstyled: unstyled,
         style,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx322(Close, { asChild: true, children: /* @__PURE__ */ jsx322(
+          !hideCloseButton && /* @__PURE__ */ jsx324(Close, { asChild: true, children: /* @__PURE__ */ jsx324(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx322(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx324(Icon, { type: "close" })
             }
           ) }),
-          withArrow ? /* @__PURE__ */ jsx322(PopoverArrow, { isAnimated }) : null,
-          /* @__PURE__ */ jsx322("div", { children })
+          withArrow ? /* @__PURE__ */ jsx324(PopoverArrow, { isAnimated }) : null,
+          /* @__PURE__ */ jsx324("div", { children })
         ]
       }
     ) })
@@ -17091,11 +17350,11 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled86 } from "styled-components";
+import { styled as styled88 } from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil35 } from "@wistia/type-guards";
-import { jsx as jsx323, jsxs as jsxs56 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled86.div`
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { jsx as jsx325, jsxs as jsxs57 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled88.div`
   --progress-bar-height: 8px;
 
   display: flex;
@@ -17109,7 +17368,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled86.div`
+var ProgressBarLabel = styled88.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -17117,7 +17376,7 @@ var ProgressBarLabel = styled86.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled86(ProgressIndicator)`
+var StyledProgressIndicator = styled88(ProgressIndicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   width: 100%;
@@ -17127,7 +17386,7 @@ var StyledProgressIndicator = styled86(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled86(ProgressRoot)`
+var StyledProgressBar = styled88(ProgressRoot)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -17148,16 +17407,16 @@ var ProgressBar = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs56(ProgressBarWrapper, { children: [
-    isNotNil35(labelLeft) ? /* @__PURE__ */ jsx323(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx323(
+  return /* @__PURE__ */ jsxs57(ProgressBarWrapper, { children: [
+    isNotNil36(labelLeft) ? /* @__PURE__ */ jsx325(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx325(
       StyledProgressBar,
       {
         $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx323(
+        children: /* @__PURE__ */ jsx325(
           StyledProgressIndicator,
           {
             $colorScheme: colorScheme,
@@ -17167,7 +17426,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil35(labelRight) ? /* @__PURE__ */ jsx323(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil36(labelRight) ? /* @__PURE__ */ jsx325(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -17175,8 +17434,8 @@ 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 useId6 } from "react";
-import { styled as styled87, css as css43 } from "styled-components";
-import { jsx as jsx324, jsxs as jsxs57 } from "react/jsx-runtime";
+import { styled as styled89, css as css43 } from "styled-components";
+import { jsx as jsx326, jsxs as jsxs58 } from "react/jsx-runtime";
 var sizeSmall2 = css43`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
@@ -17198,7 +17457,7 @@ var getSizeCss3 = (size) => {
   }
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled87.div`
+var StyledRadioWrapper = styled89.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -17232,7 +17491,7 @@ var StyledRadioWrapper = styled87.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled87.div`
+var StyledRadioInput = styled89.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -17258,7 +17517,7 @@ var StyledRadioInput = styled87.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = styled87.input`
+var StyledHiddenRadioInput = styled89.input`
   ${visuallyHiddenStyle}
 `;
 var Radio = forwardRef27(
@@ -17285,14 +17544,14 @@ var Radio = forwardRef27(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs57(
+    return /* @__PURE__ */ jsxs58(
       StyledRadioWrapper,
       {
         $disabled: disabled,
         $hideLabel: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx324(
+          /* @__PURE__ */ jsx326(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -17307,10 +17566,10 @@ var Radio = forwardRef27(
               value
             }
           ),
-          /* @__PURE__ */ jsx324(
+          /* @__PURE__ */ jsx326(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx324(StyledRadioInput, { $size: size }),
+              controlSlot: /* @__PURE__ */ jsx326(StyledRadioInput, { $size: size }),
               description,
               disabled,
               hideLabel,
@@ -17330,9 +17589,9 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId7 } from "react";
-import { styled as styled88, css as css44 } from "styled-components";
+import { styled as styled90, css as css44 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
-import { jsx as jsx325, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx327, jsxs as jsxs59 } 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);
@@ -17382,7 +17641,7 @@ var imageCoverStyles = css44`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled88.label`
+var StyledCard2 = styled90.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;
@@ -17413,7 +17672,7 @@ var StyledCard2 = styled88.label`
   }
 
   &:has(input:checked) {
-    ${checkedStyles}
+    ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles}
   }
 
   &:has(input:disabled) {
@@ -17436,7 +17695,7 @@ var StyledCard2 = styled88.label`
     }
   }
 `;
-var StyledHiddenInput = styled88.input`
+var StyledHiddenInput = styled90.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = forwardRef28(
@@ -17444,6 +17703,7 @@ var RadioCardRoot = forwardRef28(
     children,
     disabled = false,
     id,
+    isGated = false,
     name,
     onChange,
     value,
@@ -17461,14 +17721,15 @@ var RadioCardRoot = forwardRef28(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = isNotUndefined15(value) && isNotUndefined15(contextValue) ? contextValue === value : checked;
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs59(
       StyledCard2,
       {
         $aspectRatio: aspectRatio,
+        $isGated: isGated,
         $padding: padding,
         htmlFor: computedId,
         children: [
-          /* @__PURE__ */ jsx325(
+          /* @__PURE__ */ jsx327(
             StyledHiddenInput,
             {
               ...props,
@@ -17491,12 +17752,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled90 } from "styled-components";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { styled as styled92 } from "styled-components";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled89 } from "styled-components";
-var RadioCardIndicator = styled89.div`
+import { styled as styled91 } from "styled-components";
+var RadioCardIndicator = styled91.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);
@@ -17545,16 +17806,22 @@ var RadioCardIndicator = styled89.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx326, jsxs as jsxs59 } from "react/jsx-runtime";
-var StyledCardContent = styled90.div`
+import { jsx as jsx328, jsxs as jsxs60 } from "react/jsx-runtime";
+var StyledCardContent = styled92.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled90.div`
+var StyledCardIcon = styled92.div`
   display: contents;
 `;
-var StyledIndicatorContainer = styled90.div`
+var StyledGatedIcon = styled92.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+`;
+var StyledIndicatorContainer = styled92.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -17563,20 +17830,29 @@ var RadioCardDefaultLayout = ({
   icon,
   label,
   description,
-  showIndicator = true
+  showIndicator = true,
+  isGated = false
 }) => {
-  return /* @__PURE__ */ jsxs59(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx326(StyledIndicatorContainer, { $hasIcon: isNotNil36(icon), children: /* @__PURE__ */ jsx326(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
-    /* @__PURE__ */ jsxs59(Stack, { gap: "space-02", children: [
-      isNotNil36(icon) && /* @__PURE__ */ jsx326(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
-      /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs60(StyledCardContent, { children: [
+    showIndicator ? /* @__PURE__ */ jsx328(StyledIndicatorContainer, { $hasIcon: isNotNil37(icon), children: /* @__PURE__ */ jsx328(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    isGated ? /* @__PURE__ */ jsx328(StyledGatedIcon, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx328(
+      Icon,
+      {
+        colorScheme: "purple",
+        "data-testid": "wui-icon-sparkle",
+        type: "sparkle"
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs60(Stack, { gap: "space-02", children: [
+      isNotNil37(icon) && /* @__PURE__ */ jsx328(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      /* @__PURE__ */ jsxs60(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil36(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil37(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil36(label) && /* @__PURE__ */ jsx326(Text, { variant: "label3", children: /* @__PURE__ */ jsx326("strong", { children: label }) }),
-            isNotNil36(description) && /* @__PURE__ */ jsx326(
+            isNotNil37(label) && /* @__PURE__ */ jsx328(Text, { variant: "label3", children: /* @__PURE__ */ jsx328("strong", { children: label }) }),
+            isNotNil37(description) && /* @__PURE__ */ jsx328(
               Text,
               {
                 prominence: "secondary",
@@ -17593,26 +17869,28 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import { styled as styled91 } from "styled-components";
-var RadioCardChildrenContainer = styled91.div`
+import { styled as styled93 } from "styled-components";
+var RadioCardChildrenContainer = styled93.div`
   flex: 1 1 auto;
 `;
 
 // src/components/RadioCard/RadioCard.tsx
-import { jsx as jsx327 } from "react/jsx-runtime";
+import { jsx as jsx329 } from "react/jsx-runtime";
 var RadioCard = forwardRef29(
-  ({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx327(
+  ({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx329(
       RadioCardRoot,
       {
         ref,
+        isGated,
         padding: children != null ? "space-00" : "space-04",
         ...rootProps,
-        children: children != null ? /* @__PURE__ */ jsx327(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx327(
+        children: children != null ? /* @__PURE__ */ jsx329(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx329(
           RadioCardDefaultLayout,
           {
             description,
             icon,
+            isGated,
             label,
             showIndicator
           }
@@ -17625,17 +17903,17 @@ RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx328 } from "react/jsx-runtime";
+import { jsx as jsx330 } from "react/jsx-runtime";
 var RadioCardImage = forwardRef30(
   ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx328(
+    return /* @__PURE__ */ jsx330(
       RadioCardRoot,
       {
         ref,
         ...rootProps,
         aspectRatio,
         padding,
-        children: /* @__PURE__ */ jsx328(
+        children: /* @__PURE__ */ jsx330(
           Image,
           {
             alt: label,
@@ -17652,50 +17930,50 @@ var RadioCardImage = forwardRef30(
 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 styled92 } from "styled-components";
+import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef22, useState as useState25 } from "react";
+import { styled as styled94 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx329, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs61 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled92.div`
+var Container10 = styled94.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled92.div`
+var ScrollContainer = styled94.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled92.div`
+var Shadow = styled94.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 = styled92(Shadow)`
+var ShadowAtTop = styled94(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled92(Shadow)`
+var ShadowAtBottom = styled94(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled92(Shadow)`
+var ShadowAtLeft = styled94(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled92(Shadow)`
+var ShadowAtRight = styled94(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -17705,7 +17983,7 @@ var ShadowAtRight = styled92(Shadow)`
 var ScrollArea = forwardRef31(
   ({ children, onScroll, style, locked = false, ...props }, forwardedRef) => {
     const scrollContainerRefInternal = useRef22(null);
-    const [shadowState, setShadowState] = useState24({
+    const [shadowState, setShadowState] = useState25({
       canScrollUp: false,
       canScrollLeft: false,
       canScrollDown: false,
@@ -17724,7 +18002,7 @@ var ScrollArea = forwardRef31(
         canScrollRight: scrollContainer.scrollLeft + scrollContainer.clientWidth < scrollContainer.scrollWidth
       });
     }, []);
-    const throttledUpdateShadows = useMemo15(() => throttle(100, updateShadows), [updateShadows]);
+    const throttledUpdateShadows = useMemo16(() => throttle(100, updateShadows), [updateShadows]);
     const onScrollScrollContainer = useCallback18(
       (event) => {
         onScroll?.(event);
@@ -17732,15 +18010,15 @@ var ScrollArea = forwardRef31(
       },
       [onScroll, throttledUpdateShadows]
     );
-    useEffect21(() => {
+    useEffect22(() => {
       updateShadows();
     }, [updateShadows]);
-    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(
+    return /* @__PURE__ */ jsxs61(Container10, { style, children: [
+      /* @__PURE__ */ jsx331(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
+      /* @__PURE__ */ jsx331(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
+      /* @__PURE__ */ jsx331(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
+      /* @__PURE__ */ jsx331(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
+      /* @__PURE__ */ jsx331(
         ScrollContainer,
         {
           ref: scrollContainerRef,
@@ -17757,19 +18035,19 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled94, css as css46 } from "styled-components";
+import { styled as styled96, css as css46 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
-import { isNil as isNil18 } from "@wistia/type-guards";
+import { isNil as isNil19 } 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 jsx330 } from "react/jsx-runtime";
+import { createContext as createContext9, useContext as useContext15, useMemo as useMemo17, useState as useState26 } from "react";
+import { jsx as jsx332 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState25(null);
-  const selectedItemIndicatorStyle = useMemo16(
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState26(null);
+  const selectedItemIndicatorStyle = useMemo17(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
       transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
@@ -17777,14 +18055,14 @@ var SelectedItemStyleProvider = ({
     } : void 0,
     [selectedItemMeasurements]
   );
-  const contextValue = useMemo16(
+  const contextValue = useMemo17(
     () => ({
       setSelectedItemMeasurements,
       selectedItemIndicatorStyle
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx330(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx332(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = useContext15(SelectedItemStyleContext);
@@ -17795,7 +18073,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled93, css as css45 } from "styled-components";
+import { styled as styled95, css as css45 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -17811,13 +18089,13 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx331 } from "react/jsx-runtime";
+import { jsx as jsx333 } 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 = styled93.div`
+var SelectedItemIndicatorDiv = styled95.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -17833,7 +18111,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx333(
     SelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -17843,7 +18121,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx332, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs62 } from "react/jsx-runtime";
 var segmentedControlStyles = css46`
   ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
   ${({ $colorScheme }) => $colorScheme !== "nav" && `--wui-color-text-selected: var(--wui-color-text-link);`}
@@ -17858,7 +18136,7 @@ var segmentedControlStyles = css46`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled94(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled96(ToggleGroupRoot2)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef32(
@@ -17871,10 +18149,10 @@ var SegmentedControl = forwardRef32(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil18(children)) {
+    if (isNil19(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx332(
+    return /* @__PURE__ */ jsx334(
       StyledSegmentedControl,
       {
         ref,
@@ -17887,9 +18165,9 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx332(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs61(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx334(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs62(SelectedItemStyleProvider, { children: [
           children,
-          /* @__PURE__ */ jsx332(SelectedItemIndicator, {})
+          /* @__PURE__ */ jsx334(SelectedItemIndicator, {})
         ] }) })
       }
     );
@@ -17898,11 +18176,11 @@ var SegmentedControl = forwardRef32(
 SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef33, useEffect as useEffect22, useRef as useRef23 } from "react";
-import { styled as styled95, css as css47 } from "styled-components";
+import { forwardRef as forwardRef33, useEffect as useEffect23, useRef as useRef23 } from "react";
+import { styled as styled97, css as css47 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsxs as jsxs62 } from "react/jsx-runtime";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { jsxs as jsxs63 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css47`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -17971,7 +18249,7 @@ var segmentedControlItemStyles = css47`
     }
   }
 `;
-var StyledSegmentedControlItem = styled95(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled97(ToggleGroupItem2)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef33(
@@ -17987,7 +18265,7 @@ var SegmentedControlItem = forwardRef33(
         event.preventDefault();
       }
     };
-    useEffect22(() => {
+    useEffect23(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -18012,13 +18290,13 @@ var SegmentedControlItem = forwardRef33(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs62(
+    return /* @__PURE__ */ jsxs63(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil37(label),
-        "aria-label": isNotNil37(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil38(label),
+        "aria-label": isNotNil38(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -18044,9 +18322,9 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-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)`
+import { styled as styled98, css as css48 } from "styled-components";
+import { jsx as jsx335, jsxs as jsxs64 } from "react/jsx-runtime";
+var StyledTrigger2 = styled98(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -18092,7 +18370,7 @@ var StyledTrigger2 = styled96(Trigger3)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = styled96(Content3)`
+var StyledContent3 = styled98(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);
@@ -18119,10 +18397,10 @@ var scrollButtonStyles = css48`
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled96(ScrollDownButton)`
+var StyledScrollDownButton = styled98(ScrollDownButton)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled96(ScrollUpButton)`
+var StyledScrollUpButton = styled98(ScrollUpButton)`
   ${scrollButtonStyles}
 `;
 var Select = forwardRef34(
@@ -18145,8 +18423,8 @@ var Select = forwardRef34(
     if (forceOpen) {
       rootProps["open"] = true;
     }
-    return /* @__PURE__ */ jsxs63(Root3, { ...rootProps, children: [
-      /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs64(Root3, { ...rootProps, children: [
+      /* @__PURE__ */ jsxs64(
         StyledTrigger2,
         {
           ref: forwardedRef,
@@ -18154,8 +18432,8 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx333(Value, { placeholder }),
-            /* @__PURE__ */ jsx333(
+            /* @__PURE__ */ jsx335(Value, { placeholder }),
+            /* @__PURE__ */ jsx335(
               Icon,
               {
                 size: "md",
@@ -18165,21 +18443,21 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx333(Portal2, { children: /* @__PURE__ */ jsxs63(
+      /* @__PURE__ */ jsx335(Portal2, { children: /* @__PURE__ */ jsxs64(
         StyledContent3,
         {
           position: "popper",
           sideOffset: 8,
           children: [
-            /* @__PURE__ */ jsx333(StyledScrollUpButton, { children: /* @__PURE__ */ jsx333(
+            /* @__PURE__ */ jsx335(StyledScrollUpButton, { children: /* @__PURE__ */ jsx335(
               Icon,
               {
                 size: "sm",
                 type: "caret-up"
               }
             ) }),
-            /* @__PURE__ */ jsx333(Viewport, { children }),
-            /* @__PURE__ */ jsx333(StyledScrollDownButton, { children: /* @__PURE__ */ jsx333(
+            /* @__PURE__ */ jsx335(Viewport, { children }),
+            /* @__PURE__ */ jsx335(StyledScrollDownButton, { children: /* @__PURE__ */ jsx335(
               Icon,
               {
                 size: "sm",
@@ -18197,10 +18475,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 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)`
+import { styled as styled99 } from "styled-components";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { jsx as jsx336, jsxs as jsxs65 } from "react/jsx-runtime";
+var StyledItem = styled99(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -18228,18 +18506,18 @@ var StyledItem = styled97(Item)`
 `;
 var SelectOption = forwardRef35(
   ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs65(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil38(selectedDisplayValue) ? /* @__PURE__ */ jsxs64("div", { children: [
+          isNotNil39(selectedDisplayValue) ? /* @__PURE__ */ jsxs65("div", { children: [
             children,
-            /* @__PURE__ */ jsx334("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx334(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx334(ItemText, { children }),
-          /* @__PURE__ */ jsx334(ItemIndicator, { children: /* @__PURE__ */ jsx334(
+            /* @__PURE__ */ jsx336("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx336(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx336(ItemText, { children }),
+          /* @__PURE__ */ jsx336(ItemIndicator, { children: /* @__PURE__ */ jsx336(
             Icon,
             {
               size: "md",
@@ -18255,14 +18533,14 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
-import { styled as styled98 } from "styled-components";
-import { jsx as jsx335, jsxs as jsxs65 } from "react/jsx-runtime";
-var StyledLabel4 = styled98(Label3)`
+import { styled as styled100 } from "styled-components";
+import { jsx as jsx337, jsxs as jsxs66 } from "react/jsx-runtime";
+var StyledLabel4 = styled100(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs65(Group, { ...props, children: [
-    /* @__PURE__ */ jsx335(StyledLabel4, { children: /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsxs66(Group, { ...props, children: [
+    /* @__PURE__ */ jsx337(StyledLabel4, { children: /* @__PURE__ */ jsx337(
       Heading,
       {
         renderAs: "span",
@@ -18281,10 +18559,10 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import { styled as styled99 } from "styled-components";
+import { styled as styled101 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
-import { jsx as jsx336, jsxs as jsxs66 } from "react/jsx-runtime";
-var SliderContainer = styled99.div`
+import { jsx as jsx338, jsxs as jsxs67 } from "react/jsx-runtime";
+var SliderContainer = styled101.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);
@@ -18300,7 +18578,7 @@ var SliderContainer = styled99.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled99(RadixSliderRoot)`
+var StyledSliderRoot = styled101(RadixSliderRoot)`
   position: relative;
   display: flex;
   align-items: center;
@@ -18308,20 +18586,20 @@ var StyledSliderRoot = styled99(RadixSliderRoot)`
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled99(RadixSliderTrack)`
+var StyledSliderTrack = styled101(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 = styled99(RadixSliderRange)`
+var StyledSliderRange = styled101(RadixSliderRange)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = styled99(RadixSliderThumb)`
+var StyledSliderThumb = styled101(RadixSliderThumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -18372,12 +18650,12 @@ var Slider = ({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsx338(
     SliderContainer,
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs66(
+      children: /* @__PURE__ */ jsxs67(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -18390,8 +18668,8 @@ var Slider = ({
           step,
           ...value ? { value } : {},
           children: [
-            /* @__PURE__ */ jsx336(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx336(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
-            values.map((_, index) => /* @__PURE__ */ jsx336(
+            /* @__PURE__ */ jsx338(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx338(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+            values.map((_, index) => /* @__PURE__ */ jsx338(
               StyledSliderThumb,
               {
                 "data-testid": `${dataTestId}-thumb-${index}`
@@ -18407,11 +18685,11 @@ 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 { styled as styled102 } from "styled-components";
+import { isNotNil as isNotNil40 } 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`
+import { jsx as jsx339, jsxs as jsxs68 } from "react/jsx-runtime";
+var StyledSplitButton = styled102.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
 
@@ -18432,7 +18710,7 @@ var StyledSplitButton = styled100.span`
 var SplitButton = ({
   children,
   menuLabel = "Select an option",
-  menuIcon = /* @__PURE__ */ jsx337(Icon, { type: "caret-down" }),
+  menuIcon = /* @__PURE__ */ jsx339(Icon, { type: "caret-down" }),
   menuItems,
   disabled = false,
   colorScheme = "inherit",
@@ -18443,8 +18721,8 @@ var SplitButton = ({
   menuProps = {},
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs67(StyledSplitButton, { $colorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsxs68(StyledSplitButton, { $colorScheme: colorScheme, children: [
+    /* @__PURE__ */ jsx339(
       Button,
       {
         disabled,
@@ -18455,12 +18733,12 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil39(menuItems) && /* @__PURE__ */ jsx337(
+    isNotNil40(menuItems) && /* @__PURE__ */ jsx339(
       Menu,
       {
         ...menuProps,
         disabled,
-        trigger: /* @__PURE__ */ jsx337(
+        trigger: /* @__PURE__ */ jsx339(
           IconButton,
           {
             disabled,
@@ -18474,15 +18752,15 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil39(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil40(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled101, css as css49 } from "styled-components";
-import { jsx as jsx338 } from "react/jsx-runtime";
-var StyledTable = styled101.table`
+import { styled as styled103, css as css49 } from "styled-components";
+import { jsx as jsx340 } from "react/jsx-runtime";
+var StyledTable = styled103.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -18511,7 +18789,7 @@ var Table = ({
   visuallyHiddenHeader = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx338(
+  return /* @__PURE__ */ jsx340(
     StyledTable,
     {
       $divided: divided,
@@ -18524,37 +18802,37 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import { styled as styled102 } from "styled-components";
+import { styled as styled104 } 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 jsx339 } from "react/jsx-runtime";
-var StyledTableBody = styled102.tbody`
+import { jsx as jsx341 } from "react/jsx-runtime";
+var StyledTableBody = styled104.tbody`
   width: 100%;
 `;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx339(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx339(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ jsx341(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx341(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled103, css as css50 } from "styled-components";
-import { jsx as jsx340 } from "react/jsx-runtime";
+import { styled as styled105, css as css50 } from "styled-components";
+import { jsx as jsx342 } from "react/jsx-runtime";
 var sharedStyles = css50`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled103.th`
+var StyledTh = styled105.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 = styled103.td`
+var StyledTd = styled105.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -18563,45 +18841,45 @@ var StyledTd = styled103.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext17(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx340(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx342(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx340(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx342(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFoot.tsx
-import { styled as styled104 } from "styled-components";
-import { jsx as jsx341 } from "react/jsx-runtime";
-var StyledTableFoot = styled104.tfoot`
+import { styled as styled106 } from "styled-components";
+import { jsx as jsx343 } from "react/jsx-runtime";
+var StyledTableFoot = styled106.tfoot`
   width: 100%;
 `;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx341(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx341(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx343(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx343(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-import { styled as styled105 } from "styled-components";
-import { jsx as jsx342 } from "react/jsx-runtime";
-var StyledThead = styled105.thead`
+import { styled as styled107 } from "styled-components";
+import { jsx as jsx344 } from "react/jsx-runtime";
+var StyledThead = styled107.thead`
   width: 100%;
 `;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx342(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx342(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx344(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx344(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import { styled as styled106 } from "styled-components";
-import { jsx as jsx343 } from "react/jsx-runtime";
-var StyledTableRow = styled106.tr`
+import { styled as styled108 } from "styled-components";
+import { jsx as jsx345 } from "react/jsx-runtime";
+var StyledTableRow = styled108.tr`
   width: 100%;
 `;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx343(StyledTableRow, { ...props, children });
+  return /* @__PURE__ */ jsx345(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 isNotNil40 } from "@wistia/type-guards";
+import { useCallback as useCallback19, useState as useState27 } from "react";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -18616,7 +18894,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx344 } from "react/jsx-runtime";
+import { jsx as jsx346 } from "react/jsx-runtime";
 var Tabs = ({
   children,
   value: valueProp,
@@ -18624,7 +18902,7 @@ var Tabs = ({
   defaultValue,
   ...props
 }) => {
-  const [value, setValue] = useState26(valueProp ?? defaultValue);
+  const [value, setValue] = useState27(valueProp ?? defaultValue);
   const onValueChange = useCallback19(
     (newValue) => {
       setValue(newValue);
@@ -18638,48 +18916,48 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil40(value)) {
+  if (isNotNil41(value)) {
     rootProps.value = value;
   }
-  if (isNotNil40(defaultValue)) {
+  if (isNotNil41(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx344(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx344(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx344(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx346(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx346(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx346(SelectedItemStyleProvider, { children }) }) });
 };
 Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx345 } from "react/jsx-runtime";
+import { jsx as jsx347 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx345(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx347(RadixTabsContent, { value, children });
 };
 TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { styled as styled108 } from "styled-components";
+import { styled as styled110 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import { styled as styled107 } from "styled-components";
-var TabsSelectedItemIndicatorDiv = styled107(SelectedItemIndicatorDiv)`
+import { styled as styled109 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled109(SelectedItemIndicatorDiv)`
   :has(button[role='tab']:focus-visible) > & {
     outline: 2px solid var(--wui-color-focus-ring);
   }
 `;
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-import { jsx as jsx346 } from "react/jsx-runtime";
+import { jsx as jsx348 } from "react/jsx-runtime";
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
   if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx346(
+  return /* @__PURE__ */ jsx348(
     TabsSelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -18689,19 +18967,19 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx347, jsxs as jsxs68 } from "react/jsx-runtime";
-var StyledRadixTabsList = styled108(RadixTabList)`
+import { jsx as jsx349, jsxs as jsxs69 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled110(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
-  return /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs69(
     StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
       "aria-label": props["aria-label"],
       children: [
         children,
-        /* @__PURE__ */ jsx347(SelectedTabIndicator, {})
+        /* @__PURE__ */ jsx349(SelectedTabIndicator, {})
       ]
     }
   );
@@ -18709,13 +18987,13 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
-import { forwardRef as forwardRef36, useEffect as useEffect23, useRef as useRef24 } from "react";
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { forwardRef as forwardRef36, useEffect as useEffect24, useRef as useRef24 } from "react";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import { styled as styled109 } from "styled-components";
+import { styled as styled111 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledRadixTabsTrigger = styled109(RadixTabsTrigger)`
+var StyledRadixTabsTrigger = styled111(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -18724,14 +19002,14 @@ var StyledRadixTabsTrigger = styled109(RadixTabsTrigger)`
 `;
 
 // src/components/Tabs/TabsTrigger.tsx
-import { jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsxs as jsxs70 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef36(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef24(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect23(() => {
+    useEffect24(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -18756,13 +19034,13 @@ var TabsTrigger = forwardRef36(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs69(
+    return /* @__PURE__ */ jsxs70(
       StyledRadixTabsTrigger,
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil41(label),
-        "aria-label": isNotNil41(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil42(label),
+        "aria-label": isNotNil42(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -18776,10 +19054,10 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-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`
+import { styled as styled112 } from "styled-components";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
+import { jsx as jsx350, jsxs as jsxs71 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled112.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -18805,19 +19083,19 @@ var StyledThumbnailBadge = styled110.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs70(StyledThumbnailBadge, { ...props, children: [
-    isNotNil42(icon) && icon,
-    /* @__PURE__ */ jsx348("span", { children: label })
+  return /* @__PURE__ */ jsxs71(StyledThumbnailBadge, { ...props, children: [
+    isNotNil43(icon) && icon,
+    /* @__PURE__ */ jsx350("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 styled112 } from "styled-components";
+import { forwardRef as forwardRef37, useState as useState28, useRef as useRef25, useCallback as useCallback20, useMemo as useMemo18 } from "react";
+import { styled as styled114 } from "styled-components";
 import {
-  isNil as isNil19,
-  isNotNil as isNotNil45,
+  isNil as isNil20,
+  isNotNil as isNotNil46,
   isUndefined as isUndefined7,
   isEmptyString as isEmptyString2,
   isString as isString4,
@@ -18825,7 +19103,7 @@ import {
 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil43 } from "@wistia/type-guards";
+import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { css as css51 } from "styled-components";
 var gradients = {
   defaultDarkOne: css51`
@@ -18953,14 +19231,14 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil43(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil44(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-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`
+import { styled as styled113 } from "styled-components";
+import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { jsx as jsx351, jsxs as jsxs72 } from "react/jsx-runtime";
+var ScrubLine = styled113.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -19052,8 +19330,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil44(cursorPosition);
-  const scrubLinePosition = isNotNil44(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil45(cursorPosition);
+  const scrubLinePosition = isNotNil45(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -19071,14 +19349,14 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs72(
     "div",
     {
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx349("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx349(
+        /* @__PURE__ */ jsx351("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx351(
           ScrubLine,
           {
             style: {
@@ -19092,7 +19370,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx350, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx352, jsxs as jsxs73 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -19101,19 +19379,19 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled112.img`
+var WideThumbnailImage = styled114.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled112.img`
+var SquareThumbnailImage = styled114.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx350(
+    return /* @__PURE__ */ jsx352(
       WideThumbnailImage,
       {
         alt: "",
@@ -19122,7 +19400,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx350(
+  return /* @__PURE__ */ jsx352(
     SquareThumbnailImage,
     {
       alt: "",
@@ -19131,7 +19409,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = styled112.div`
+var StyledThumbnailContainer = styled114.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -19139,13 +19417,13 @@ var StyledThumbnailContainer = styled112.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = styled112.div`
+var StyledThumbnail = styled114.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
-  background-image: ${({ $backgroundUrl }) => isNotNil45($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil46($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  isNil20($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -19174,7 +19452,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__ */ jsx350(
+  return /* @__PURE__ */ jsx352(
     ThumbnailStoryboardViewer,
     {
       cursorPosition: effectiveCursorPosition,
@@ -19200,7 +19478,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
   };
 };
 var hasValidThumbnailUrl = (thumbnailUrl) => {
-  return isNotNil45(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
+  return isNotNil46(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
 };
 var Thumbnail = forwardRef37(
   ({
@@ -19214,16 +19492,16 @@ var Thumbnail = forwardRef37(
     aspectRatio = "wide",
     ...props
   }, ref) => {
-    const [percent, setPercent] = useState27(0);
-    const [isMouseOver, setIsMouseOver] = useState27(false);
-    const [isStoryboardReady, setIsStoryboardReady] = useState27(false);
+    const [percent, setPercent] = useState28(0);
+    const [isMouseOver, setIsMouseOver] = useState28(false);
+    const [isStoryboardReady, setIsStoryboardReady] = useState28(false);
     const storyboardElementRef = useRef25(null);
-    const [cursorPosition, setCursorPosition] = useState27(null);
-    const backgroundUrl = useMemo17(
+    const [cursorPosition, setCursorPosition] = useState28(null);
+    const backgroundUrl = useMemo18(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil45(storyboard);
+    const isScrubbable = isNotNil46(storyboard);
     const trackStoryboardLoadStatus = useCallback20(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -19256,15 +19534,15 @@ var Thumbnail = forwardRef37(
       setIsMouseOver(false);
       setCursorPosition(null);
     }, [isScrubbable]);
-    const shouldRenderStoryboard = useMemo17(() => {
-      if (isNil19(storyboard) || isUndefined7(height) || isEmptyString2(height)) {
+    const shouldRenderStoryboard = useMemo18(() => {
+      if (isNil20(storyboard) || isUndefined7(height) || isEmptyString2(height)) {
         return false;
       }
       return isScrubbable && isMouseOver && isStoryboardReady;
     }, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
     let thumbnailContent = null;
     if (storyboard && shouldRenderStoryboard) {
-      thumbnailContent = /* @__PURE__ */ jsx350(
+      thumbnailContent = /* @__PURE__ */ jsx352(
         StoryboardRenderer,
         {
           aspectRatio,
@@ -19276,7 +19554,7 @@ var Thumbnail = forwardRef37(
         }
       );
     } else if (hasValidThumbnailUrl(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx350(
+      thumbnailContent = /* @__PURE__ */ jsx352(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -19286,7 +19564,7 @@ var Thumbnail = forwardRef37(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsx350(
+    return /* @__PURE__ */ jsx352(
       StyledThumbnailContainer,
       {
         ref,
@@ -19299,14 +19577,14 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         ...props,
-        children: /* @__PURE__ */ jsxs72(
+        children: /* @__PURE__ */ jsxs73(
           StyledThumbnail,
           {
             $backgroundUrl: backgroundUrl,
             $gradientBackground: gradientBackground,
             "data-testid": "thumbnail-inner",
             children: [
-              isNotNil45(children) ? children : null,
+              isNotNil46(children) ? children : null,
               thumbnailContent
             ]
           }
@@ -19319,16 +19597,16 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import { cloneElement as cloneElement10, Children as Children11 } from "react";
-import { styled as styled113 } from "styled-components";
+import { styled as styled115 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx351 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled113.div`
+import { jsx as jsx353 } from "react/jsx-runtime";
+var ThumbnailCollageContainer = styled115.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = styled113.div`
+var StyledThumbnailCollage = styled115.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -19386,7 +19664,7 @@ var ThumbnailCollage = ({
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx351(
+    /* @__PURE__ */ jsx353(
       Thumbnail,
       {
         gradientBackground,
@@ -19395,7 +19673,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx351(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx351(
+  return /* @__PURE__ */ jsx353(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx353(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -19407,26 +19685,26 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-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";
+import { styled as styled116, css as css52 } from "styled-components";
+import { isNotNil as isNotNil47 } from "@wistia/type-guards";
+import { jsx as jsx354, jsxs as jsxs74 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx352(
+    return /* @__PURE__ */ jsx354(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        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" })
+        children: /* @__PURE__ */ jsx354("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__ */ jsx352(
+  return /* @__PURE__ */ jsx354(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      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" })
+      children: /* @__PURE__ */ jsx354("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" })
     }
   );
 };
@@ -19434,12 +19712,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx352(
+  return /* @__PURE__ */ jsx354(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      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" })
+      children: /* @__PURE__ */ jsx354("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" })
     }
   );
 };
@@ -19449,7 +19727,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled114.svg`
+var WistiaLogoComponent = styled116.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -19507,7 +19785,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs73(
+  const Logo = /* @__PURE__ */ jsxs74(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -19520,14 +19798,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx352("title", { children: title }),
-        isNotNil46(description) ? /* @__PURE__ */ jsx352("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx354("title", { children: title }),
+        isNotNil47(description) ? /* @__PURE__ */ jsx354("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx352("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx354("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 export {
@@ -19586,6 +19864,8 @@ export {
   EditableTextSubmitButton,
   EditableTextTrigger,
   Ellipsis,
+  FeatureCard,
+  FeatureCardImage,
   FileAmountLimitValidator,
   FileSizeValidator,
   FileTypeValidator,