@wistia/ui 0.9.5 → 0.9.6-beta.0bdb4e44.c8b94c3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.5
+ * @license @wistia/ui v0.9.6-beta.0bdb4e44.c8b94c3
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -103,7 +103,6 @@ __export(index_exports, {
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Switch: () => Switch,
-  Tab: () => Tab,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCell: () => TableCell,
@@ -111,6 +110,9 @@ __export(index_exports, {
   TableHead: () => TableHead,
   TableRow: () => TableRow,
   Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
   Tag: () => Tag,
   Text: () => Text,
   Thumbnail: () => Thumbnail,
@@ -8208,9 +8210,9 @@ var Center = (0, import_react28.forwardRef)(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react29 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
-var import_type_guards25 = require("@wistia/type-guards");
+var import_react33 = require("react");
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_type_guards26 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_styled_components35 = __toESM(require("styled-components"));
@@ -8328,9 +8330,230 @@ var FormControlLabel = ({
 };
 FormControlLabel.displayName = "FormControlLabel";
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_react32 = require("react");
+
+// src/components/FormGroup/FormGroup.tsx
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_react31 = require("react");
+
+// src/components/Stack/Stack.tsx
+var import_react29 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_jsx_runtime208 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+var DEFAULT_ELEMENT2 = "div";
+var StyledStack = import_styled_components36.default.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--wui-${$gap})`};
+  align-items: ${({ $alignItems }) => $alignItems};
+`;
+var StackComponent = (0, import_react29.forwardRef)(
+  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    const responsiveAlignItems = useResponsiveProp(alignItems);
+    return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      StyledStack,
+      {
+        ref,
+        $alignItems: responsiveAlignItems,
+        $direction: responsiveDirection,
+        $gap: responsiveGap,
+        as: renderAs ?? DEFAULT_ELEMENT2,
+        ...props
+      }
+    );
+  }
+);
+StackComponent.displayName = "Stack";
+var Stack = makePolymorphic(StackComponent);
+
+// src/components/Heading/Heading.tsx
+var import_react30 = require("react");
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_type_guards25 = require("@wistia/type-guards");
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var heroStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-hero-family);
+  --font-size: var(--wui-typography-heading-hero-size);
+  --font-weight: var(--wui-typography-heading-hero-weight);
+  --line-height: var(--wui-typography-heading-hero-line-height);
+`;
+var heading1TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-1-family);
+  --font-size: var(--wui-typography-heading-1-size);
+  --font-weight: var(--wui-typography-heading-1-weight);
+  --line-height: var(--wui-typography-heading-1-line-height);
+`;
+var heading2TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-2-family);
+  --font-size: var(--wui-typography-heading-2-size);
+  --font-weight: var(--wui-typography-heading-2-weight);
+  --line-height: var(--wui-typography-heading-2-line-height);
+`;
+var heading3TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-3-family);
+  --font-size: var(--wui-typography-heading-3-size);
+  --font-weight: var(--wui-typography-heading-3-weight);
+  --line-height: var(--wui-typography-heading-3-line-height);
+`;
+var heading4TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-4-family);
+  --font-size: var(--wui-typography-heading-4-size);
+  --font-weight: var(--wui-typography-heading-4-weight);
+  --line-height: var(--wui-typography-heading-4-line-height);
+`;
+var heading5TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-5-family);
+  --font-size: var(--wui-typography-heading-5-size);
+  --font-weight: var(--wui-typography-heading-5-weight);
+  --line-height: var(--wui-typography-heading-5-line-height);
+`;
+var heading6TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-6-family);
+  --font-size: var(--wui-typography-heading-6-size);
+  --font-weight: var(--wui-typography-heading-6-weight);
+  --line-height: var(--wui-typography-heading-6-line-height);
+`;
+var variantStyleMap = {
+  hero: heroStyle,
+  heading1: heading1TextStyle,
+  heading2: heading2TextStyle,
+  heading3: heading3TextStyle,
+  heading4: heading4TextStyle,
+  heading5: heading5TextStyle,
+  heading6: heading6TextStyle
+};
+var DEFAULT_ELEMENT3 = "h1";
+var StyledHeading = import_styled_components37.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  color: var(--wui-color-text);
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $truncate }) => {
+  if ((0, import_type_guards25.isNotNil)($truncate)) {
+    return import_styled_components37.css`
+        ${ellipsisStyle};
+        ${lineClampCss($truncate)};
+      `;
+  }
+  return void 0;
+}}
+  ${({ $inline }) => $inline && import_styled_components37.css`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && import_styled_components37.css`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
+      user-select: none;
+    `}
+  ${({ $align }) => import_styled_components37.css`
+    text-align: ${$align};
+  `}
+  margin: 0;
+`;
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT3,
+  heading1: DEFAULT_ELEMENT3,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
+var HeadingComponent = (0, import_react30.forwardRef)(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    inline = false,
+    preventUserSelect = false,
+    truncate,
+    variant = "heading1",
+    renderAs,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+    StyledHeading,
+    {
+      ref,
+      $align: align,
+      $colorScheme: colorScheme,
+      $disabled: disabled,
+      $inline: inline,
+      $preventUserSelect: preventUserSelect,
+      $truncate: truncate,
+      $variant: variant,
+      as: renderAs ?? variantElementMap[variant],
+      ...props
+    }
+  )
+);
+HeadingComponent.displayName = "Heading";
+var Heading = makePolymorphic(HeadingComponent);
+
+// src/components/FormGroup/FormGroup.tsx
+var import_jsx_runtime210 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components38.default.fieldset`
+  border: 0;
+`;
+var StyledLegend = import_styled_components38.default.legend`
+  margin-bottom: var(--space-01);
+`;
+var FormGroup = ({ children, label, ...props }) => {
+  const ref = (0, import_react31.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(
+    Stack,
+    {
+      ...props,
+      ref,
+      renderAs: StyledFieldset,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+          Heading,
+          {
+            renderAs: StyledLegend,
+            variant: "heading5",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+FormGroup.displayName = "FormGroup";
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react32.createContext)(null);
+var useCheckboxGroup = () => {
+  return (0, import_react32.useContext)(CheckboxGroupContext);
+};
+var CheckboxGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = (0, import_react32.useMemo)(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(FormGroup, { ...props, children }) });
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -8338,7 +8561,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -8347,7 +8570,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components36.css`
+var sizeSmall = import_styled_components39.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8358,7 +8581,7 @@ var sizeSmall = import_styled_components36.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components36.css`
+var sizeMedium = import_styled_components39.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8369,7 +8592,7 @@ var sizeMedium = import_styled_components36.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components36.css`
+var sizeLarge = import_styled_components39.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8385,14 +8608,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components36.default.div`
+var StyledCheckboxWrapper = import_styled_components39.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components36.default.div`
+var StyledCheckboxInput = import_styled_components39.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8414,7 +8637,7 @@ var StyledCheckboxInput = import_styled_components36.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components36.default.input`
+var StyledHiddenCheckboxInput = import_styled_components39.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8428,7 +8651,7 @@ var StyledHiddenCheckboxInput = import_styled_components36.default.input`
     display: block;
   }
 `;
-var Checkbox = (0, import_react29.forwardRef)(
+var Checkbox = (0, import_react33.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8443,10 +8666,15 @@ var Checkbox = (0, import_react29.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react29.useId)();
-    const computedId = (0, import_type_guards25.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    const generatedId = (0, import_react33.useId)();
+    const computedId = (0, import_type_guards26.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    const checkboxGroupContext = useCheckboxGroup();
+    const contextName = checkboxGroupContext?.name;
+    const contextOnChange = checkboxGroupContext?.onChange;
+    const checkboxName = name ?? contextName;
+    const handleOnChange = onChange ?? contextOnChange;
+    return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8454,23 +8682,23 @@ var Checkbox = (0, import_react29.forwardRef)(
           checked,
           disabled,
           id: computedId,
-          name,
-          onChange,
+          name: checkboxName,
+          onChange: handleOnChange,
           required,
           type: "checkbox",
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -8486,14 +8714,14 @@ var Checkbox = (0, import_react29.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react30 = require("react");
+var import_react34 = require("react");
 var isClickableElement = (element) => {
   if (!element) return false;
   const el = element;
   return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
 };
 var ClickRegion = ({ children, targetRef }) => {
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -8501,7 +8729,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react30.useCallback)(
+  const handleClick = (0, import_react34.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target === node) {
@@ -8521,7 +8749,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react30.cloneElement)(import_react30.Children.only(children), {
+  return (0, import_react34.cloneElement)(import_react34.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -8530,10 +8758,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards26 = require("@wistia/type-guards");
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components37.default)(import_react_collapsible.Root)`
+var import_type_guards27 = require("@wistia/type-guards");
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components40.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8547,32 +8775,32 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards26.isNotNil)(onOpenChange) && (0, import_type_guards26.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards27.isNotNil)(onOpenChange) && (0, import_type_guards27.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react31 = require("react");
+var import_react35 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime210 = require("react/jsx-runtime");
+var import_jsx_runtime214 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
-  import_react31.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  import_react35.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards27 = require("@wistia/type-guards");
-var import_jsx_runtime211 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components38.default.div`
+var import_type_guards28 = require("@wistia/type-guards");
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components41.default.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards27.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+  if ((0, import_type_guards28.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       ClampedContent,
       {
         $clamp: clamp,
@@ -8581,147 +8809,18 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(import_jsx_runtime215.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_react33 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_react36 = require("react");
+var import_styled_components42 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
-
-// src/components/Heading/Heading.tsx
-var import_react32 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var heroStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-hero-family);
-  --font-size: var(--wui-typography-heading-hero-size);
-  --font-weight: var(--wui-typography-heading-hero-weight);
-  --line-height: var(--wui-typography-heading-hero-line-height);
-`;
-var heading1TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-1-family);
-  --font-size: var(--wui-typography-heading-1-size);
-  --font-weight: var(--wui-typography-heading-1-weight);
-  --line-height: var(--wui-typography-heading-1-line-height);
-`;
-var heading2TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-2-family);
-  --font-size: var(--wui-typography-heading-2-size);
-  --font-weight: var(--wui-typography-heading-2-weight);
-  --line-height: var(--wui-typography-heading-2-line-height);
-`;
-var heading3TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-3-family);
-  --font-size: var(--wui-typography-heading-3-size);
-  --font-weight: var(--wui-typography-heading-3-weight);
-  --line-height: var(--wui-typography-heading-3-line-height);
-`;
-var heading4TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-4-family);
-  --font-size: var(--wui-typography-heading-4-size);
-  --font-weight: var(--wui-typography-heading-4-weight);
-  --line-height: var(--wui-typography-heading-4-line-height);
-`;
-var heading5TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-5-family);
-  --font-size: var(--wui-typography-heading-5-size);
-  --font-weight: var(--wui-typography-heading-5-weight);
-  --line-height: var(--wui-typography-heading-5-line-height);
-`;
-var heading6TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-6-family);
-  --font-size: var(--wui-typography-heading-6-size);
-  --font-weight: var(--wui-typography-heading-6-weight);
-  --line-height: var(--wui-typography-heading-6-line-height);
-`;
-var variantStyleMap = {
-  hero: heroStyle,
-  heading1: heading1TextStyle,
-  heading2: heading2TextStyle,
-  heading3: heading3TextStyle,
-  heading4: heading4TextStyle,
-  heading5: heading5TextStyle,
-  heading6: heading6TextStyle
-};
-var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components39.default.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  color: var(--wui-color-text);
-  ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $truncate }) => {
-  if ((0, import_type_guards28.isNotNil)($truncate)) {
-    return import_styled_components39.css`
-        ${ellipsisStyle};
-        ${lineClampCss($truncate)};
-      `;
-  }
-  return void 0;
-}}
-  ${({ $inline }) => $inline && import_styled_components39.css`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && import_styled_components39.css`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
-      user-select: none;
-    `}
-  ${({ $align }) => import_styled_components39.css`
-    text-align: ${$align};
-  `}
-  margin: 0;
-`;
-var variantElementMap = {
-  hero: DEFAULT_ELEMENT2,
-  heading1: DEFAULT_ELEMENT2,
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  heading5: "h5",
-  heading6: "h6"
-};
-var HeadingComponent = (0, import_react32.forwardRef)(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    inline = false,
-    preventUserSelect = false,
-    truncate,
-    variant = "heading1",
-    renderAs,
-    ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
-    StyledHeading,
-    {
-      ref,
-      $align: align,
-      $colorScheme: colorScheme,
-      $disabled: disabled,
-      $inline: inline,
-      $preventUserSelect: preventUserSelect,
-      $truncate: truncate,
-      $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
-      ...props
-    }
-  )
-);
-HeadingComponent.displayName = "Heading";
-var Heading = makePolymorphic(HeadingComponent);
-
-// src/components/DataCards/DataCard.tsx
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components40.default.div`
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components42.default.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -8776,7 +8875,7 @@ var StyledDataCard = import_styled_components40.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components40.keyframes`
+var shimmer = import_styled_components42.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8784,7 +8883,7 @@ var shimmer = import_styled_components40.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components40.default.div`
+var LoadingBackground = import_styled_components42.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8795,27 +8894,27 @@ var LoadingBackground = import_styled_components40.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components40.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components42.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components40.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components42.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components40.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components42.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components40.default)(Heading)`
+var StyledValue = (0, import_styled_components42.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components40.default.div`
+var StyledSlot = import_styled_components42.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components40.default.div`
+var StyledDataCardTrendContainer = import_styled_components42.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8828,34 +8927,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -8863,14 +8962,14 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
   }
 );
 var DataCard = (props) => {
-  const ref = (0, import_react33.useRef)(null);
+  const ref = (0, import_react36.useRef)(null);
   if ((0, import_type_guards29.isNotNil)(props.href) || (0, import_type_guards29.isNotNil)(props.onClick)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+        label: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
           Button,
           {
             ref,
@@ -8885,14 +8984,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(DataCardInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components41.default)(Box)`
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components43.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8906,7 +9005,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8924,26 +9023,26 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_styled_components45 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
-var import_react34 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_react37 = require("react");
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components42.css`
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components44.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components42.css`
+var labelBoldStyles = import_styled_components44.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components42.css`
+var body1TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8951,7 +9050,7 @@ var body1TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components42.css`
+var body2TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8959,7 +9058,7 @@ var body2TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components42.css`
+var body3TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8967,7 +9066,7 @@ var body3TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components42.css`
+var body4TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8975,47 +9074,47 @@ var body4TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components42.css`
+var label1TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components42.css`
+var label2TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components42.css`
+var label3TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components42.css`
+var label4TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components42.css`
+var body1MonoTextStyle = import_styled_components44.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components42.css`
+var body2MonoTextStyle = import_styled_components44.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components42.css`
+var body3MonoTextStyle = import_styled_components44.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components42.css`
+var body4MonoTextStyle = import_styled_components44.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -9035,22 +9134,22 @@ var variantStyleMap2 = {
 };
 var bodyElement = "p";
 var labelElement = "span";
-var DEFAULT_ELEMENT3 = bodyElement;
+var DEFAULT_ELEMENT4 = bodyElement;
 var variantElementMap2 = {
-  body1: DEFAULT_ELEMENT3,
-  body2: DEFAULT_ELEMENT3,
-  body3: DEFAULT_ELEMENT3,
-  body4: DEFAULT_ELEMENT3,
-  body1Mono: DEFAULT_ELEMENT3,
-  body2Mono: DEFAULT_ELEMENT3,
-  body3Mono: DEFAULT_ELEMENT3,
-  body4Mono: DEFAULT_ELEMENT3,
+  body1: DEFAULT_ELEMENT4,
+  body2: DEFAULT_ELEMENT4,
+  body3: DEFAULT_ELEMENT4,
+  body4: DEFAULT_ELEMENT4,
+  body1Mono: DEFAULT_ELEMENT4,
+  body2Mono: DEFAULT_ELEMENT4,
+  body3Mono: DEFAULT_ELEMENT4,
+  body4Mono: DEFAULT_ELEMENT4,
   label1: labelElement,
   label2: labelElement,
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components42.default.div`
+var StyledText = import_styled_components44.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9075,26 +9174,26 @@ var StyledText = import_styled_components42.default.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
   if ((0, import_type_guards30.isNotNil)($truncate)) {
-    return import_styled_components42.css`
+    return import_styled_components44.css`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components42.css`
+  ${({ $inline }) => $inline && import_styled_components44.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components42.css`
+  ${({ $disabled }) => $disabled && import_styled_components44.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components42.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components44.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components42.css`
+  ${({ $align }) => import_styled_components44.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components42.css`
+  ${({ as }) => as === "p" && import_styled_components44.css`
       display: block;
 
       + p {
@@ -9102,7 +9201,7 @@ var StyledText = import_styled_components42.default.div`
       }
     `}
 `;
-var TextComponent = (0, import_react34.forwardRef)(
+var TextComponent = (0, import_react37.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -9115,7 +9214,7 @@ var TextComponent = (0, import_react34.forwardRef)(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
       StyledText,
       {
         ref,
@@ -9137,8 +9236,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components43.default.div`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components45.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9153,8 +9252,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       Icon,
       {
         size: "md",
@@ -9162,7 +9261,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -9174,22 +9273,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components44.css`
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components46.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components44.css`
+var verticalBorderCss = import_styled_components46.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components44.default.div`
+var DividerComponent = import_styled_components46.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9201,7 +9300,7 @@ var DividerComponent = import_styled_components44.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9214,14 +9313,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_react36 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_react39 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var hide = import_styled_components45.keyframes`
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var hide = import_styled_components47.keyframes`
   from {
     opacity: 1;
   }
@@ -9229,7 +9328,7 @@ var hide = import_styled_components45.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components45.keyframes`
+var slideDownAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -9239,7 +9338,7 @@ var slideDownAndFade = import_styled_components45.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components45.keyframes`
+var slideLeftAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -9249,7 +9348,7 @@ var slideLeftAndFade = import_styled_components45.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components45.keyframes`
+var slideUpAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -9259,7 +9358,7 @@ var slideUpAndFade = import_styled_components45.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components45.keyframes`
+var slideRightAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -9269,7 +9368,7 @@ var slideRightAndFade = import_styled_components45.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components45.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components47.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9331,21 +9430,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9354,7 +9453,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -9367,13 +9466,13 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react35 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_react38 = require("react");
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_type_guards31 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
-var import_styled_components46 = require("styled-components");
-var inputCssVariables = import_styled_components46.css`
+var import_styled_components48 = require("styled-components");
+var inputCssVariables = import_styled_components48.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9399,8 +9498,8 @@ var inputCssVariables = import_styled_components46.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var inputStyles = import_styled_components47.css`
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var inputStyles = import_styled_components49.css`
   ${inputCssVariables}
   input,
   textarea {
@@ -9435,7 +9534,7 @@ var inputStyles = import_styled_components47.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components47.default.div`
+var StyledInputContainer = import_styled_components49.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9502,7 +9601,7 @@ var StyledInputContainer = import_styled_components47.default.div`
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react35.forwardRef)(
+var Input = (0, import_react38.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -9512,24 +9611,24 @@ var Input = (0, import_react35.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react35.useRef)();
+    const internalRef = (0, import_react38.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       (0, import_type_guards31.isNotNil)(externalRef) && (0, import_type_guards31.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards31.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards31.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react35.cloneElement)(leftIconToDisplay, {
+      leftIconToDisplay = (0, import_react38.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
     if ((0, import_type_guards31.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react35.cloneElement)(rightIconToDisplay, {
+      rightIconToDisplay = (0, import_react38.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
@@ -9544,21 +9643,21 @@ var Input = (0, import_react35.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
             "input",
             {
               ...props,
@@ -9576,8 +9675,8 @@ var Input = (0, import_react35.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components48.default)(Input)`
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components50.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9594,7 +9693,7 @@ var StyledInput = (0, import_styled_components48.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components48.css`
+var editableStyles = import_styled_components50.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9604,7 +9703,7 @@ var editableStyles = import_styled_components48.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components48.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components50.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9621,11 +9720,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react36.useState)(false);
-  const [value, setValue] = (0, import_react36.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react36.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react36.useState)("60");
-  const headingRef = (0, import_react36.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react39.useState)(false);
+  const [value, setValue] = (0, import_react39.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react39.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react39.useState)("60");
+  const headingRef = (0, import_react39.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -9658,7 +9757,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9672,7 +9771,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -9690,65 +9789,31 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(import_jsx_runtime223.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
         onClick: () => handleSetEditing(true),
-        type: "button"
-      }
-    ) })
-  ] });
-};
-
-// src/components/Form/Form.tsx
-var import_react38 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
-
-// src/components/Stack/Stack.tsx
-var import_react37 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components49.default.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--wui-${$gap})`};
-  align-items: ${({ $alignItems }) => $alignItems};
-`;
-var StackComponent = (0, import_react37.forwardRef)(
-  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-      StyledStack,
-      {
-        ref,
-        $alignItems: responsiveAlignItems,
-        $direction: responsiveDirection,
-        $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT4,
-        ...props
+        type: "button"
       }
-    );
-  }
-);
-StackComponent.displayName = "Stack";
-var Stack = makePolymorphic(StackComponent);
+    ) })
+  ] });
+};
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var StyledForm = import_styled_components50.default.form`
+var import_react40 = require("react");
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_type_guards32 = require("@wistia/type-guards");
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var StyledForm = import_styled_components51.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = (0, import_react38.createContext)({
+var FormContext = (0, import_react40.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9764,11 +9829,11 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react38.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react38.useState)(false);
-  const innerRef = (0, import_react38.useRef)();
+  const [errors, setErrors] = (0, import_react40.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react40.useState)(false);
+  const innerRef = (0, import_react40.useRef)();
   const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react38.useId)();
+  const autoId = (0, import_react40.useId)();
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
@@ -9810,7 +9875,7 @@ var FormComponent = ({
       void action(null);
     }
   };
-  const context = (0, import_react38.useMemo)(() => {
+  const context = (0, import_react40.useMemo)(() => {
     return {
       values,
       errors,
@@ -9821,7 +9886,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
       Stack,
       {
         ...props,
@@ -9839,15 +9904,15 @@ var FormComponent = ({
   );
 };
 FormComponent.displayName = "Form";
-var Form = (0, import_react38.forwardRef)(FormComponent);
+var Form = (0, import_react40.forwardRef)(FormComponent);
 
 // src/components/Form/useFormState.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = (0, import_react39.useState)(initialData);
-  const [isPending, setIsPending] = (0, import_react39.useState)(false);
-  const [error, setError] = (0, import_react39.useState)(null);
-  const formAction = (0, import_react39.useCallback)(
+  const [data, setData] = (0, import_react41.useState)(initialData);
+  const [isPending, setIsPending] = (0, import_react41.useState)(false);
+  const [error, setError] = (0, import_react41.useState)(null);
+  const formAction = (0, import_react41.useCallback)(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -9878,23 +9943,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_type_guards33 = require("@wistia/type-guards");
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_jsx_runtime225 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = (0, import_react40.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react40.useContext)(FormContext);
+  const ref = (0, import_react42.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react42.useContext)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9902,7 +9967,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9921,9 +9986,9 @@ var import_styled_components53 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components51.css`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components52.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9931,10 +9996,10 @@ var requiredStyle = import_styled_components51.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components51.css`
+var disabledStyle3 = import_styled_components52.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components51.default.label`
+var StyledLabel3 = import_styled_components52.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9966,7 +10031,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     StyledLabel3,
     {
       ...props,
@@ -9980,63 +10045,6 @@ var Label = ({
 };
 Label.displayName = "Label";
 
-// src/components/FormGroup/CheckboxGroup.tsx
-var import_react42 = require("react");
-
-// src/components/FormGroup/FormGroup.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_react41 = require("react");
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components52.default.fieldset`
-  border: 0;
-`;
-var StyledLegend = import_styled_components52.default.legend`
-  margin-bottom: var(--space-01);
-`;
-var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react41.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
-    Stack,
-    {
-      ...props,
-      ref,
-      renderAs: StyledFieldset,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
-          Heading,
-          {
-            renderAs: StyledLegend,
-            variant: "heading5",
-            children: label
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-FormGroup.displayName = "FormGroup";
-
-// src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react42.createContext)(null);
-var CheckboxGroup = ({
-  children,
-  name,
-  onChange,
-  value,
-  ...props
-}) => {
-  const context = (0, import_react42.useMemo)(() => {
-    return {
-      name,
-      onChange
-    };
-  }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormGroup, { ...props, children }) });
-};
-CheckboxGroup.displayName = "CheckboxGroup";
-
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime227 = require("react/jsx-runtime");
 var StyledFormField = import_styled_components53.default.div`
@@ -10181,6 +10189,9 @@ FormField.displayName = "FormField";
 var import_react44 = require("react");
 var import_jsx_runtime228 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react44.createContext)(null);
+var useRadioGroup = () => {
+  return (0, import_react44.useContext)(RadioGroupContext);
+};
 var RadioGroup = ({
   children,
   name,
@@ -11629,6 +11640,11 @@ var Radio = (0, import_react56.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
     const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const radioGroupContext = useRadioGroup();
+    const contextName = radioGroupContext?.name;
+    const contextOnChange = radioGroupContext?.onChange;
+    const radioName = name ?? contextName;
+    const handleOnChange = onChange ?? contextOnChange;
     return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
       StyledRadioWrapper,
       {
@@ -11643,8 +11659,8 @@ var Radio = (0, import_react56.forwardRef)(
               checked,
               disabled,
               id: computedId,
-              name,
-              onChange,
+              name: radioName,
+              onChange: handleOnChange,
               required,
               type: "radio",
               value
@@ -11842,7 +11858,7 @@ var segmentedControlItemStyles = import_styled_components73.css`
     outline: 2px solid var(--wui-color-focus-ring);
   }
 
-  &:hover:not([data-state='on'], [data-state='active']) {
+  &:hover:not([data-state='on'], [data-state='active'], [aria-selected='true']) {
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 
@@ -12401,64 +12417,8 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react69 = require("react");
-var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards51 = require("@wistia/type-guards");
-var import_styled_components88 = __toESM(require("styled-components"));
-
-// src/components/Tabs/TabPanel.tsx
-var import_styled_components84 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
-var import_jsx_runtime264 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components84.default)(import_react_tabs.Content)`
-  display: flex;
-  flex-direction: column;
-`;
-var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
-    StyledTabPanel,
-    {
-      value,
-      ...props,
-      children
-    }
-  );
-};
-TabPanel.displayName = "TabPanel";
-
-// src/components/Tabs/TabList.tsx
-var import_styled_components85 = __toESM(require("styled-components"));
-var import_react_tabs2 = require("@radix-ui/react-tabs");
-var import_jsx_runtime265 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components85.default)(import_react_tabs2.List)`
-  ${segmentedControlStyles}
-
-  margin-bottom: var(--wui-space-04);
-  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-  align-self: ${({ $fullWidth }) => $fullWidth ? "auto" : "flex-start"};
-`;
-var TabList = ({
-  children,
-  fullWidth,
-  ariaLabel,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
-    StyledTabList,
-    {
-      $fullWidth: fullWidth,
-      "aria-label": ariaLabel,
-      ...props,
-      children
-    }
-  );
-};
-TabList.displayName = "TabList";
-
-// src/components/Tabs/TabItem.tsx
 var import_react67 = require("react");
-var import_styled_components86 = __toESM(require("styled-components"));
-var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_type_guards50 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
@@ -12473,22 +12433,114 @@ var useTabsValue = () => {
   return context;
 };
 
-// src/components/Tabs/TabItem.tsx
+// src/components/Tabs/Tabs.tsx
+var import_jsx_runtime264 = require("react/jsx-runtime");
+var Tabs = ({
+  children,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  defaultValue,
+  ...props
+}) => {
+  const [value, setValue] = (0, import_react67.useState)(valueProp ?? defaultValue);
+  const onValueChange = (0, import_react67.useCallback)(
+    (newValue) => {
+      setValue(newValue);
+      if (onValueChangeProp) {
+        onValueChangeProp(newValue);
+      }
+    },
+    [onValueChangeProp]
+  );
+  const rootProps = {
+    ...props,
+    onValueChange
+  };
+  if ((0, import_type_guards50.isNotNil)(value)) {
+    rootProps.value = value;
+  }
+  if ((0, import_type_guards50.isNotNil)(defaultValue)) {
+    rootProps.defaultValue = defaultValue;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(SelectedItemStyleProvider, { children }) }) });
+};
+Tabs.displayName = "Tabs";
+
+// src/components/Tabs/TabsContent.tsx
+var import_react_tabs2 = require("@radix-ui/react-tabs");
+var import_jsx_runtime265 = require("react/jsx-runtime");
+var TabsContent = ({ children, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_tabs2.Content, { value, children });
+};
+TabsContent.displayName = "TabsContent";
+
+// src/components/Tabs/TabsList.tsx
+var import_react_tabs3 = require("@radix-ui/react-tabs");
+var import_styled_components85 = __toESM(require("styled-components"));
+
+// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
+var import_styled_components84 = __toESM(require("styled-components"));
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components84.default)(SelectedItemIndicatorDiv)`
+  &:has(~ button[role='tab']:focus-visible) {
+    outline: 2px solid var(--wui-color-focus-ring);
+  }
+`;
+
+// src/components/Tabs/SelectedTabIndicator.tsx
 var import_jsx_runtime266 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components86.default)(import_react_tabs3.Trigger)`
+var SelectedTabIndicator = () => {
+  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
+  const selectedValue = useTabsValue();
+  if (selectedValue == null) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
+};
+
+// src/components/Tabs/TabsList.tsx
+var import_jsx_runtime267 = require("react/jsx-runtime");
+var StyledRadixTabsList = (0, import_styled_components85.default)(import_react_tabs3.List)`
+  ${segmentedControlStyles}
+`;
+var TabsList = ({ children, fullWidth = true, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
+    StyledRadixTabsList,
+    {
+      $fullWidth: fullWidth,
+      "aria-label": props["aria-label"],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(SelectedTabIndicator, {}),
+        children
+      ]
+    }
+  );
+};
+TabsList.displayName = "TabsList";
+
+// src/components/Tabs/TabsTrigger.tsx
+var import_react68 = require("react");
+var import_type_guards51 = require("@wistia/type-guards");
+
+// src/components/Tabs/StyledRadixTabsTrigger.tsx
+var import_styled_components86 = __toESM(require("styled-components"));
+var import_react_tabs4 = require("@radix-ui/react-tabs");
+var StyledRadixTabsTrigger = (0, import_styled_components86.default)(import_react_tabs4.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
     outline: none;
   }
 `;
-var TabItem = (0, import_react67.forwardRef)(
-  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
+
+// src/components/Tabs/TabsTrigger.tsx
+var import_jsx_runtime268 = require("react/jsx-runtime");
+var TabsTrigger = (0, import_react68.forwardRef)(
+  ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
-    const buttonRef = (0, import_react67.useRef)(null);
+    const buttonRef = (0, import_react68.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    (0, import_react67.useEffect)(() => {
+    (0, import_react68.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -12513,12 +12565,13 @@ var TabItem = (0, import_react67.forwardRef)(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
-      StyledTabItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
+      StyledRadixTabsTrigger,
       {
+        ...otherProps,
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards50.isNotNil)(label),
-        "aria-label": (0, import_type_guards50.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards51.isNotNil)(label),
+        "aria-label": (0, import_type_guards51.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12529,176 +12582,14 @@ var TabItem = (0, import_react67.forwardRef)(
     );
   }
 );
-TabItem.displayName = "TabItem";
-
-// src/components/Tabs/extractTabItems.ts
-var import_react68 = require("react");
-var extractTabItems = (children) => {
-  const tabItems = [];
-  import_react68.Children.forEach(children, (child) => {
-    if (!(0, import_react68.isValidElement)(child)) {
-      return;
-    }
-    if (typeof child.type !== "string" && child.type.displayName === "Tab") {
-      tabItems.push(child);
-    } else if (child.type === import_react68.Fragment) {
-      const fragmentElement = child;
-      tabItems.push(...extractTabItems(fragmentElement.props.children));
-    } else if ((child.props.children ?? null) != null) {
-      const childChildren = child.props.children;
-      tabItems.push(...extractTabItems(childChildren));
-    } else {
-    }
-  });
-  return tabItems;
-};
-
-// src/components/Tabs/SelectedItemIndicator.tsx
-var import_styled_components87 = __toESM(require("styled-components"));
-var import_jsx_runtime267 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components87.default)(SelectedItemIndicatorDiv)`
-  &:has(~ ${StyledTabItem}:focus-visible) {
-    outline: 2px solid var(--wui-color-focus-ring);
-  }
-`;
-var SelectedItemIndicator2 = () => {
-  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
-  const selectedValue = useTabsValue();
-  if (selectedValue == null) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
-};
-
-// src/components/Tabs/Tabs.tsx
-var import_jsx_runtime268 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components88.default.div`
-  display: flex;
-  flex-direction: column;
-  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
-  overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
-`;
-var StickyTabContent = import_styled_components88.default.div`
-  flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
-  overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
-  overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
-`;
-var StyledTabsRoot = (0, import_styled_components88.default)(import_react_tabs4.Root)`
-  display: flex;
-  flex-direction: column;
-  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
-`;
-var Tabs = (0, import_react69.forwardRef)(
-  ({
-    children,
-    fullWidth = true,
-    "aria-label": ariaLabel,
-    defaultSelectedValue,
-    selectedValue,
-    onSelectedValueChange,
-    stickyHeaders = true,
-    ...props
-  }, ref) => {
-    const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react69.useState)(defaultSelectedValue);
-    const modeProps = defaultSelectedValue !== void 0 ? {
-      defaultValue: defaultSelectedValue,
-      onValueChange: setInternalSelectedValue
-    } : { value: selectedValue, onValueChange: onSelectedValueChange };
-    const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
-      StyledTabsRoot,
-      {
-        ref,
-        $stickyHeaders: stickyHeaders,
-        activationMode: "automatic",
-        ...props,
-        ...modeProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(SelectedItemStyleProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
-            TabList,
-            {
-              ariaLabel,
-              fullWidth,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(SelectedItemIndicator2, {}),
-                tabItems.map((tab) => {
-                  const {
-                    value,
-                    disabled = false,
-                    icon,
-                    label,
-                    "aria-label": ariaLabelForTab
-                  } = tab.props;
-                  if ((0, import_type_guards51.isNil)(icon)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
-                      TabItem,
-                      {
-                        disabled,
-                        label,
-                        value
-                      },
-                      value
-                    );
-                  }
-                  if ((0, import_type_guards51.isNotNil)(label)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
-                      TabItem,
-                      {
-                        disabled,
-                        icon,
-                        label,
-                        value
-                      },
-                      value
-                    );
-                  }
-                  if ((0, import_type_guards51.isNotNil)(ariaLabelForTab)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
-                      TabItem,
-                      {
-                        "aria-label": ariaLabelForTab,
-                        disabled,
-                        icon,
-                        value
-                      },
-                      value
-                    );
-                  }
-                  throw new Error("A `Tab` with an icon must have either label or aria-label");
-                })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
-            TabPanel,
-            {
-              value: tab.props.value,
-              children: tab.props.children
-            },
-            tab.props.value
-          )) })
-        ] }) })
-      }
-    ) });
-  }
-);
-Tabs.displayName = "Tabs";
-
-// src/components/Tabs/Tab.tsx
-var import_react70 = require("react");
-var import_jsx_runtime269 = require("react/jsx-runtime");
-var Tab = (0, import_react70.forwardRef)(({ children }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("div", { ref, children });
-});
-Tab.displayName = "Tab";
+TabsTrigger.displayName = "TabsTrigger";
 
 // src/components/Tag/Tag.tsx
-var import_react71 = require("react");
-var import_styled_components89 = __toESM(require("styled-components"));
+var import_react69 = require("react");
+var import_styled_components87 = __toESM(require("styled-components"));
 var import_type_guards52 = require("@wistia/type-guards");
-var import_jsx_runtime270 = require("react/jsx-runtime");
-var TagLabel = import_styled_components89.default.a`
+var import_jsx_runtime269 = require("react/jsx-runtime");
+var TagLabel = import_styled_components87.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12733,14 +12624,14 @@ var TagLabel = import_styled_components89.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components89.default.div`
+var TagDivider = import_styled_components87.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components89.default.button`
+var StyledRemoveButton = import_styled_components87.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12768,7 +12659,7 @@ var StyledRemoveButton = import_styled_components89.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components89.default.div`
+var StyledTag = import_styled_components87.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12789,40 +12680,40 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(import_jsx_runtime270.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(import_jsx_runtime269.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react71.forwardRef)(
+var Tag = (0, import_react69.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = (0, import_type_guards52.isNotNil)(icon);
     const labelProps = (0, import_type_guards52.isNotNil)(href) && (0, import_type_guards52.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
             TagLabel,
             {
               ...labelProps,
@@ -12833,7 +12724,7 @@ var Tag = (0, import_react71.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -12849,10 +12740,10 @@ var Tag = (0, import_react71.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-var import_styled_components90 = __toESM(require("styled-components"));
+var import_styled_components88 = __toESM(require("styled-components"));
 var import_type_guards53 = require("@wistia/type-guards");
-var import_jsx_runtime271 = require("react/jsx-runtime");
-var StyledThumbnailBadge = import_styled_components90.default.div`
+var import_jsx_runtime270 = require("react/jsx-runtime");
+var StyledThumbnailBadge = import_styled_components88.default.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -12877,23 +12768,23 @@ var StyledThumbnailBadge = import_styled_components90.default.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(StyledThumbnailBadge, { ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(StyledThumbnailBadge, { ...props, children: [
     (0, import_type_guards53.isNotNil)(icon) && icon,
-    /* @__PURE__ */ (0, import_jsx_runtime271.jsx)("span", { children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
-var import_react72 = require("react");
-var import_styled_components93 = __toESM(require("styled-components"));
+var import_react70 = require("react");
+var import_styled_components91 = __toESM(require("styled-components"));
 var import_type_guards56 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 var import_type_guards54 = require("@wistia/type-guards");
-var import_styled_components91 = require("styled-components");
+var import_styled_components89 = require("styled-components");
 var gradients = {
-  defaultDarkOne: import_styled_components91.css`
+  defaultDarkOne: import_styled_components89.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -12901,7 +12792,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: import_styled_components91.css`
+  defaultDarkTwo: import_styled_components89.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -12909,7 +12800,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: import_styled_components91.css`
+  defaultLightOne: import_styled_components89.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -12917,13 +12808,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: import_styled_components91.css`
+  defaultLightTwo: import_styled_components89.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: import_styled_components91.css`
+  defaultMidOne: import_styled_components89.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -12931,13 +12822,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: import_styled_components91.css`
+  defaultMidTwo: import_styled_components89.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: import_styled_components91.css`
+  green: import_styled_components89.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12945,7 +12836,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: import_styled_components91.css`
+  greenWithPop: import_styled_components89.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12953,7 +12844,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: import_styled_components91.css`
+  pink: import_styled_components89.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -12961,7 +12852,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: import_styled_components91.css`
+  pinkWithPop: import_styled_components89.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -12969,7 +12860,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: import_styled_components91.css`
+  playfulGradientOne: import_styled_components89.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -12977,7 +12868,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: import_styled_components91.css`
+  playfulGradientTwo: import_styled_components89.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -12985,13 +12876,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: import_styled_components91.css`
+  purple: import_styled_components89.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: import_styled_components91.css`
+  purpleWithPop: import_styled_components89.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -12999,7 +12890,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: import_styled_components91.css`
+  yellow: import_styled_components89.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -13007,7 +12898,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: import_styled_components91.css`
+  yellowWithPop: import_styled_components89.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -13022,10 +12913,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-var import_styled_components92 = __toESM(require("styled-components"));
+var import_styled_components90 = __toESM(require("styled-components"));
 var import_type_guards55 = require("@wistia/type-guards");
-var import_jsx_runtime272 = require("react/jsx-runtime");
-var ScrubLine = import_styled_components92.default.div`
+var import_jsx_runtime271 = require("react/jsx-runtime");
+var ScrubLine = import_styled_components90.default.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -13127,14 +13018,14 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
     "div",
     {
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime271.jsx)("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
           ScrubLine,
           {
             style: {
@@ -13148,20 +13039,20 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-var import_jsx_runtime273 = require("react/jsx-runtime");
-var WideThumbnailImage = import_styled_components93.default.img`
+var import_jsx_runtime272 = require("react/jsx-runtime");
+var WideThumbnailImage = import_styled_components91.default.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components93.default.img`
+var SquareThumbnailImage = import_styled_components91.default.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
       WideThumbnailImage,
       {
         alt: "",
@@ -13170,7 +13061,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
     SquareThumbnailImage,
     {
       alt: "",
@@ -13179,7 +13070,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = import_styled_components93.default.div`
+var StyledThumbnail = import_styled_components91.default.div`
   background-image: ${({ $backgroundUrl }) => (0, import_type_guards56.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
@@ -13208,7 +13099,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
     left: relativeLeft
   };
 };
-var Thumbnail = (0, import_react72.forwardRef)(
+var Thumbnail = (0, import_react70.forwardRef)(
   ({
     gradientBackground = "defaultMidOne",
     thumbnailImageType = "square",
@@ -13219,17 +13110,17 @@ var Thumbnail = (0, import_react72.forwardRef)(
     height,
     ...props
   }, ref) => {
-    const [percent, setPercent] = (0, import_react72.useState)(0);
-    const [isMouseOver, setIsMouseOver] = (0, import_react72.useState)(false);
-    const [isStoryboardReady, setIsStoryboardReady] = (0, import_react72.useState)(false);
-    const storyboardElementRef = (0, import_react72.useRef)(null);
-    const [cursorPosition, setCursorPosition] = (0, import_react72.useState)(null);
-    const backgroundUrl = (0, import_react72.useMemo)(
+    const [percent, setPercent] = (0, import_react70.useState)(0);
+    const [isMouseOver, setIsMouseOver] = (0, import_react70.useState)(false);
+    const [isStoryboardReady, setIsStoryboardReady] = (0, import_react70.useState)(false);
+    const storyboardElementRef = (0, import_react70.useRef)(null);
+    const [cursorPosition, setCursorPosition] = (0, import_react70.useState)(null);
+    const backgroundUrl = (0, import_react70.useMemo)(
       () => thumbnailImageType === "square" && (0, import_type_guards56.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
     const isScrubbable = (0, import_type_guards56.isNotNil)(storyboard);
-    const trackStoryboardLoadStatus = (0, import_react72.useCallback)(() => {
+    const trackStoryboardLoadStatus = (0, import_react70.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
       }
@@ -13239,7 +13130,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
       storyboardElementRef.current = asset;
       return storyboardElementRef.current;
     }, [storyboard]);
-    const handleMouseMove = (0, import_react72.useCallback)(
+    const handleMouseMove = (0, import_react70.useCallback)(
       (mouseEvent) => {
         if (!isScrubbable) return;
         const elem = mouseEvent.currentTarget;
@@ -13252,15 +13143,15 @@ var Thumbnail = (0, import_react72.forwardRef)(
       },
       [isScrubbable, trackStoryboardLoadStatus]
     );
-    const handleMouseOut = (0, import_react72.useCallback)(() => {
+    const handleMouseOut = (0, import_react70.useCallback)(() => {
       if (!isScrubbable) return;
       setIsMouseOver(false);
       setCursorPosition(null);
     }, [isScrubbable]);
-    const shouldRenderStoryboard = (0, import_react72.useMemo)(() => {
+    const shouldRenderStoryboard = (0, import_react70.useMemo)(() => {
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
-    const renderStoryboard = (0, import_react72.useCallback)(() => {
+    const renderStoryboard = (0, import_react70.useCallback)(() => {
       if (!storyboard || (0, import_type_guards56.isUndefined)(height) || (0, import_type_guards56.isEmptyString)(height)) return null;
       const {
         url,
@@ -13273,7 +13164,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
       } = storyboard;
       const targetWidth = (0, import_type_guards56.isString)(width) ? parseInt(width, 10) : Number(width);
       const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
         ThumbnailStoryboardViewer,
         {
           cursorPosition: effectiveCursorPosition,
@@ -13293,7 +13184,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
     } else if ((0, import_type_guards56.isNotNil)(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+      thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -13303,7 +13194,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
       StyledThumbnail,
       {
         ref,
@@ -13327,14 +13218,14 @@ var Thumbnail = (0, import_react72.forwardRef)(
 Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-var import_react73 = __toESM(require("react"));
-var import_styled_components94 = __toESM(require("styled-components"));
+var import_react71 = __toESM(require("react"));
+var import_styled_components92 = __toESM(require("styled-components"));
 var import_type_guards57 = require("@wistia/type-guards");
-var import_jsx_runtime274 = (
+var import_jsx_runtime273 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
 );
-var StyledThumbnailCollage = import_styled_components94.default.div`
+var StyledThumbnailCollage = import_styled_components92.default.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -13407,15 +13298,15 @@ var ThumbnailCollage = ({
   gradientBackground = "defaultMidOne",
   ...props
 }) => {
-  const thumbnailArray = import_react73.default.Children.toArray(children);
+  const thumbnailArray = import_react71.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = (0, import_type_guards57.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return import_react73.default.cloneElement(child, {
+    return import_react71.default.cloneElement(child, {
       ...child.props,
       children: void 0
     });
   }) : [
-    /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
       Thumbnail,
       {
         gradientBackground,
@@ -13424,7 +13315,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -13436,26 +13327,26 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components95 = __toESM(require("styled-components"));
+var import_styled_components93 = __toESM(require("styled-components"));
 var import_type_guards58 = require("@wistia/type-guards");
-var import_jsx_runtime275 = require("react/jsx-runtime");
+var import_jsx_runtime274 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("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__ */ (0, import_jsx_runtime274.jsx)("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__ */ (0, import_jsx_runtime275.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("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__ */ (0, import_jsx_runtime274.jsx)("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" })
     }
   );
 };
@@ -13463,12 +13354,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("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__ */ (0, import_jsx_runtime274.jsx)("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" })
     }
   );
 };
@@ -13478,7 +13369,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components95.default.svg`
+var WistiaLogoComponent = import_styled_components93.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -13494,12 +13385,12 @@ var WistiaLogoComponent = import_styled_components95.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components95.css`
+      return import_styled_components93.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components95.css`
+    return import_styled_components93.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -13536,7 +13427,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -13549,39 +13440,39 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("title", { children: title }),
-        (0, import_type_guards58.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("title", { children: title }),
+        (0, import_type_guards58.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/List/List.tsx
 var import_type_guards60 = require("@wistia/type-guards");
-var import_styled_components97 = __toESM(require("styled-components"));
+var import_styled_components95 = __toESM(require("styled-components"));
 
 // src/components/List/ListItem.tsx
-var import_styled_components96 = __toESM(require("styled-components"));
+var import_styled_components94 = __toESM(require("styled-components"));
 var import_type_guards59 = require("@wistia/type-guards");
-var import_jsx_runtime276 = require("react/jsx-runtime");
-var ListItemComponent = import_styled_components96.default.li`
+var import_jsx_runtime275 = require("react/jsx-runtime");
+var ListItemComponent = import_styled_components94.default.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
   if ((0, import_type_guards59.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(ListItemComponent, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem";
 
 // src/components/List/List.tsx
-var import_jsx_runtime277 = require("react/jsx-runtime");
-var spacesStyle = import_styled_components97.css`
+var import_jsx_runtime276 = require("react/jsx-runtime");
+var spacesStyle = import_styled_components95.css`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -13603,7 +13494,7 @@ var spacesStyle = import_styled_components97.css`
     }
   }
 `;
-var commasStyle = import_styled_components97.css`
+var commasStyle = import_styled_components95.css`
   ${spacesStyle};
 
   li {
@@ -13613,7 +13504,7 @@ var commasStyle = import_styled_components97.css`
     }
   }
 `;
-var slashesStyle = import_styled_components97.css`
+var slashesStyle = import_styled_components95.css`
   ${spacesStyle};
 
   li {
@@ -13624,7 +13515,7 @@ var slashesStyle = import_styled_components97.css`
     }
   }
 `;
-var breadcrumbsStyle = import_styled_components97.css`
+var breadcrumbsStyle = import_styled_components95.css`
   ${spacesStyle};
 
   li {
@@ -13635,11 +13526,11 @@ var breadcrumbsStyle = import_styled_components97.css`
     }
   }
 `;
-var unbulletedStyle = import_styled_components97.css`
+var unbulletedStyle = import_styled_components95.css`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = import_styled_components97.default.ul`
+var ListComponent = import_styled_components95.default.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -13666,7 +13557,7 @@ var ListComponent = import_styled_components97.default.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(
     ListComponent,
     {
       as: elementType,
@@ -13683,7 +13574,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     const nextItem = listItems[i + 1];
     const key = `item-${itemCount += 1}`;
     if (Array.isArray(nextItem)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime277.jsxs)(ListItem, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime276.jsxs)(ListItem, { children: [
         item,
         renderListFromArray(nextItem, variant, otherProps)
       ] }, key);
@@ -13691,7 +13582,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(ListItem, { children: item }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -13783,7 +13674,6 @@ List.displayName = "List";
   Stack,
   SubMenu,
   Switch,
-  Tab,
   Table,
   TableBody,
   TableCell,
@@ -13791,6 +13681,9 @@ List.displayName = "List";
   TableHead,
   TableRow,
   Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Tag,
   Text,
   Thumbnail,