@wistia/ui 0.6.7 → 0.6.8-beta.3374cdd2.9bbd4c2

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.7
+ * @license @wistia/ui v0.6.8-beta.3374cdd2.9bbd4c2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8471,15 +8471,64 @@ var IconButton = forwardRef12(
 );
 IconButton.displayName = "IconButton";
 
+// src/components/Image/Image.tsx
+import styled35 from "styled-components";
+import { isNotNil as isNotNil12 } from "@wistia/type-guards";
+import { jsx as jsx196 } from "react/jsx-runtime";
+var getFillStyle2 = (fillContainer) => {
+  if (fillContainer === "horizontal") {
+    return "width: 100%;";
+  }
+  if (fillContainer === "vertical") {
+    return "height: 100%;";
+  }
+  if (fillContainer === true) {
+    return `
+      width: 100%;
+      height: 100%;
+    `;
+  }
+  return void 0;
+};
+var StyledImage = styled35.img`
+  border-radius: ${({ $borderRadius }) => isNotNil12($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+  ${({ $fillContainer }) => getFillStyle2($fillContainer)};
+  object-fit: ${({ $objFit }) => $objFit};
+  object-position: ${({ $objPosition }) => $objPosition};
+`;
+var Image = ({
+  src,
+  alt,
+  borderRadius,
+  fill: fillContainer = false,
+  fit: objFit,
+  loading = "lazy",
+  position: objPosition,
+  ...otherProps
+}) => /* @__PURE__ */ jsx196(
+  StyledImage,
+  {
+    $borderRadius: borderRadius,
+    $fillContainer: fillContainer,
+    $objFit: objFit,
+    $objPosition: objPosition,
+    alt,
+    loading,
+    src,
+    ...otherProps
+  }
+);
+Image.displayName = "Image";
+
 // src/components/Menu/Menu.tsx
-import styled35, { css as css24, keyframes as keyframes2 } from "styled-components";
+import styled36, { css as css24, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil12, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { isNotNil as isNotNil13, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -8488,7 +8537,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx196, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx197, jsxs as jsxs21 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -8573,7 +8622,7 @@ var menuContentCss = css24`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled35(DropdownMenuContent)`
+var MenuContent = styled36(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -8591,7 +8640,7 @@ var Menu = ({
 }) => {
   const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
-    ...isNotNil12(onOpenChange) && isNotNil12(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil13(onOpenChange) && isNotNil13(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -8599,24 +8648,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx196(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx197(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs21(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx196(DropdownMenuTrigger, { asChild: true, children: isNotUndefined8(trigger) ? trigger : /* @__PURE__ */ jsx196(
+        /* @__PURE__ */ jsx197(DropdownMenuTrigger, { asChild: true, children: isNotUndefined8(trigger) ? trigger : /* @__PURE__ */ jsx197(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx196(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx197(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx196(DropdownMenuPortal, { children: /* @__PURE__ */ jsx196(
+        /* @__PURE__ */ jsx197(DropdownMenuPortal, { children: /* @__PURE__ */ jsx197(
           MenuContent,
           {
             ...props,
@@ -8636,19 +8685,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled36 from "styled-components";
+import styled37 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx197 } from "react/jsx-runtime";
-var StyledMenuLabel = styled36(DropdownMenuLabel)`
+import { jsx as jsx198 } from "react/jsx-runtime";
+var StyledMenuLabel = styled37(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx197(
+  return /* @__PURE__ */ jsx198(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx197(
+      children: /* @__PURE__ */ jsx198(
         Heading,
         {
           renderAs: "span",
@@ -8664,7 +8713,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState8 } from "react";
-import styled39 from "styled-components";
+import styled40 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -8673,14 +8722,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef13 } from "react";
-import styled37 from "styled-components";
-import { isNotNil as isNotNil13, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
-import { jsx as jsx198, jsxs as jsxs22 } from "react/jsx-runtime";
-var StyledButton3 = styled37(Button)`
+import styled38 from "styled-components";
+import { isNotNil as isNotNil14, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { jsx as jsx199, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledButton3 = styled38(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -8719,7 +8768,7 @@ var StyledButton3 = styled37(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled37.div`
+var StyledLeftIconContainer = styled38.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -8730,7 +8779,7 @@ var StyledLeftIconContainer = styled37.div`
     }
   }
 `;
-var StyledRightIconContainer = styled37.div`
+var StyledRightIconContainer = styled38.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -8741,13 +8790,13 @@ var StyledRightIconContainer = styled37.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled37.div`
+var StyledLabelAndDescriptionContainer = styled38.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled37.div`
+var StyledBadgeContainer = styled38.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -8762,7 +8811,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx198(
+    badge = /* @__PURE__ */ jsx199(
       Icon,
       {
         colorScheme: "purple",
@@ -8784,10 +8833,10 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx198(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx198(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil13(badge) || isNotNil13(command) ? /* @__PURE__ */ jsx198(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx198(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx199(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx199(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil14(badge) || isNotNil14(command) ? /* @__PURE__ */ jsx199(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx199(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -8795,33 +8844,33 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled38 from "styled-components";
-import { jsx as jsx199 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled38.span``;
-var StyledMenuItemDescription = styled38(Text).attrs({
+import styled39 from "styled-components";
+import { jsx as jsx200 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled39.span``;
+var StyledMenuItemDescription = styled39(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx199(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx200(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx199(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx200(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx200, jsxs as jsxs23 } from "react/jsx-runtime";
-var SubMenuContent = styled39(DropdownMenuSubContent)`
+import { jsx as jsx201, jsxs as jsxs23 } from "react/jsx-runtime";
+var SubMenuContent = styled40(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled39.div`
+var StyledMobileSubMenuItems = styled40.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled39(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled40(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -8832,11 +8881,11 @@ var StyledSubTrigger = styled39(DropdownMenuSubTrigger)`
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger5 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx200(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx200(
+  return /* @__PURE__ */ jsx201(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx201(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx200(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx201(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -8852,10 +8901,10 @@ var SubMenu = ({
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs23(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs23(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx200(MenuItemLabel, { children: label }),
-      isNotNil14(description) ? /* @__PURE__ */ jsx200(MenuItemDescription, { children: description }) : null
+      /* @__PURE__ */ jsx201(MenuItemLabel, { children: label }),
+      isNotNil15(description) ? /* @__PURE__ */ jsx201(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx200(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx200(SubMenuContent, { $compact: compact, children }) })
+    /* @__PURE__ */ jsx201(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx201(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs23(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs23(
       SubMenuTrigger,
@@ -8866,12 +8915,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx200(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx200(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx201(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx201(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx200(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx201(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -8879,15 +8928,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 var MenuItem = forwardRef14(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx201(
+    return /* @__PURE__ */ jsx202(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx201(
+        children: /* @__PURE__ */ jsx202(
           MenuItemButton,
           {
             ...props,
@@ -8905,10 +8954,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx202, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs24 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs24(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx202(MenuLabel, { children: label }),
+    /* @__PURE__ */ jsx203(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -8919,11 +8968,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx203(
+  indicator = /* @__PURE__ */ jsx204(
     Icon,
     {
       size: "sm",
@@ -8933,17 +8982,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx204(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx203(
+      children: /* @__PURE__ */ jsx204(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx203(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx204(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -8955,7 +9004,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx204, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx205, jsxs as jsxs25 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs25(
     "svg",
@@ -8967,14 +9016,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx204(
+        /* @__PURE__ */ jsx205(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx204(
+        /* @__PURE__ */ jsx205(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -8993,14 +9042,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx204(
+        /* @__PURE__ */ jsx205(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx204(
+        /* @__PURE__ */ jsx205(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -9017,18 +9066,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx204(
+  return /* @__PURE__ */ jsx205(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx204(
+      children: /* @__PURE__ */ jsx205(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx204(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx205(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -9038,36 +9087,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef17 } from "react";
-import styled44 from "styled-components";
+import styled45 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled41 from "styled-components";
+import styled42 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled40 from "styled-components";
+import styled41 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx205 } from "react/jsx-runtime";
-var CloseButton = styled40(DialogClose)`
+import { jsx as jsx206 } from "react/jsx-runtime";
+var CloseButton = styled41(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx205(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx205(
+  return /* @__PURE__ */ jsx206(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx206(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx205(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx206(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
-var Header = styled41.header`
+import { jsx as jsx207, jsxs as jsxs26 } from "react/jsx-runtime";
+var Header = styled42.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -9079,7 +9128,7 @@ var Header = styled41.header`
     margin-top: 0;
   }
 `;
-var Title = styled41(DialogTitle)`
+var Title = styled42(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -9092,19 +9141,19 @@ var ModalHeader = ({
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
   return /* @__PURE__ */ jsxs26(Header, { children: [
-    /* @__PURE__ */ jsx206(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ jsx206(ModalCloseButton, {})
+    /* @__PURE__ */ jsx207(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ jsx207(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled42 from "styled-components";
+import styled43 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef8, useEffect as useEffect4 } from "react";
-import { isNotNil as isNotNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef8(null);
   useEffect4(() => {
@@ -9112,7 +9161,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect4(() => {
     return () => {
-      if (isNotNil15(previouslyFocusedRef.current)) {
+      if (isNotNil16(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -9122,8 +9171,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx207 } from "react/jsx-runtime";
-var StyledModalContent = styled42(DialogContent)`
+import { jsx as jsx208 } from "react/jsx-runtime";
+var StyledModalContent = styled43(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -9167,7 +9216,7 @@ var StyledModalContent = styled42(DialogContent)`
 var ModalContent = forwardRef15(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx207(
+    return /* @__PURE__ */ jsx208(
       StyledModalContent,
       {
         ref,
@@ -9183,8 +9232,8 @@ var ModalContent = forwardRef15(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled43 from "styled-components";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import styled44 from "styled-components";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -9197,7 +9246,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled43.div`
+var BackdropComponent = styled44.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -9221,7 +9270,7 @@ var BackdropComponent = styled43.div`
   }
 `;
 var Backdrop = forwardRef16(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx208(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx209(
     BackdropComponent,
     {
       ref,
@@ -9235,9 +9284,9 @@ var Backdrop = forwardRef16(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx209, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx210, jsxs as jsxs27 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled44.div`
+var ModalBody = styled45.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -9255,24 +9304,24 @@ var Modal = forwardRef17(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx209(
+    return /* @__PURE__ */ jsx210(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil16(onRequestClose)) {
+          if (!open2 && isNotNil17(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs27(DialogPortal, { children: [
-          /* @__PURE__ */ jsx209(Backdrop, {}),
+          /* @__PURE__ */ jsx210(Backdrop, {}),
           /* @__PURE__ */ jsxs27(
             ModalContent,
             {
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil16(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil17(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -9282,8 +9331,8 @@ var Modal = forwardRef17(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx209(ModalBody, { children }),
-                /* @__PURE__ */ jsx209(
+                /* @__PURE__ */ jsx210(ModalBody, { children }),
+                /* @__PURE__ */ jsx210(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -9303,17 +9352,17 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root3, Trigger as Trigger3, Portal as Portal2, Content as Content3, Close, Arrow as Arrow2 } from "@radix-ui/react-popover";
-import styled45 from "styled-components";
+import styled46 from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil17 } from "@wistia/type-guards";
+import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil17(onOpenChange) && isNotNil17(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil18(onOpenChange) && isNotNil18(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx210, jsxs as jsxs28 } from "react/jsx-runtime";
-var StyledContent2 = styled45(Content3)`
+import { jsx as jsx211, jsxs as jsxs28 } from "react/jsx-runtime";
+var StyledContent2 = styled46(Content3)`
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-04);
   max-width: 320px;
@@ -9327,7 +9376,7 @@ var StyledContent2 = styled45(Content3)`
     right: var(--wui-space-02);
   }
 `;
-var StyledArrow = styled45(Arrow2)`
+var StyledArrow = styled46(Arrow2)`
   fill: white;
   display: none;
 `;
@@ -9340,24 +9389,24 @@ var Popover = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs28(Root3, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx210(Trigger3, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx210(Portal2, { children: /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsx211(Trigger3, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx211(Portal2, { children: /* @__PURE__ */ jsxs28(
       StyledContent2,
       {
         sideOffset: 5,
         ...props,
         children: [
-          /* @__PURE__ */ jsx210(StyledArrow, {}),
-          !hideCloseButton && /* @__PURE__ */ jsx210(Close, { asChild: true, children: /* @__PURE__ */ jsx210(
+          /* @__PURE__ */ jsx211(StyledArrow, {}),
+          !hideCloseButton && /* @__PURE__ */ jsx211(Close, { asChild: true, children: /* @__PURE__ */ jsx211(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx210(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx211(Icon, { type: "close" })
             }
           ) }),
-          /* @__PURE__ */ jsx210("div", { children })
+          /* @__PURE__ */ jsx211("div", { children })
         ]
       }
     ) })
@@ -9367,15 +9416,15 @@ Popover.displayName = "Popover";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled46, { css as css25 } from "styled-components";
+import styled47, { css as css25 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx211, jsxs as jsxs29 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled46.div`
+import { jsx as jsx212, jsxs as jsxs29 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled47.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled46.input`
+var StyledRadio = styled47.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -9417,7 +9466,7 @@ var defaultHoverStyle = css25`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled46.div`
+var StyledRadioWrapper = styled47.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -9461,7 +9510,7 @@ var Radio = forwardRef18(
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx211(
+          /* @__PURE__ */ jsx212(
             StyledRadio,
             {
               ref,
@@ -9477,7 +9526,7 @@ var Radio = forwardRef18(
             }
           ),
           /* @__PURE__ */ jsxs29(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx211(
+            /* @__PURE__ */ jsx212(
               Label,
               {
                 disabled,
@@ -9486,7 +9535,7 @@ var Radio = forwardRef18(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx211(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx212(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -9497,13 +9546,13 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled48, { css as css26 } from "styled-components";
+import styled49, { css as css26 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil13 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState9 } from "react";
-import { jsx as jsx212 } from "react/jsx-runtime";
+import { jsx as jsx213 } from "react/jsx-runtime";
 var SelectedItemMeasurementsContext = createContext6(
   null
 );
@@ -9518,7 +9567,7 @@ var SelectedItemMeasurementsProvider = ({
     }),
     [selectedItemMeasurements]
   );
-  return /* @__PURE__ */ jsx212(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx213(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemMeasurements = () => {
   const context = useContext5(SelectedItemMeasurementsContext);
@@ -9532,7 +9581,7 @@ var useSelectedItemMeasurements = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { useMemo as useMemo9 } from "react";
-import styled47 from "styled-components";
+import styled48 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 import { createContext as createContext7, useContext as useContext6 } from "react";
@@ -9547,9 +9596,9 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx213 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
 var Z_INDEX_TO_SIT_BEHIND_SIBLINGS = -1;
-var SelectedItemIndicatorDiv = styled47.div`
+var SelectedItemIndicatorDiv = styled48.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -9575,7 +9624,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx213(
+  return /* @__PURE__ */ jsx214(
     SelectedItemIndicatorDiv,
     {
       style: {
@@ -9588,7 +9637,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx214, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs30 } from "react/jsx-runtime";
 var segmentedControlStyles = css26`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -9599,7 +9648,7 @@ var segmentedControlStyles = css26`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled48(ToggleGroupRoot)`
+var StyledSegmentedControl = styled49(ToggleGroupRoot)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef19(
@@ -9614,7 +9663,7 @@ var SegmentedControl = forwardRef19(
     if (isNil13(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx214(
+    return /* @__PURE__ */ jsx215(
       StyledSegmentedControl,
       {
         ref,
@@ -9626,8 +9675,8 @@ var SegmentedControl = forwardRef19(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx214(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs30(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ jsx214(SelectedItemIndicator, {}),
+        children: /* @__PURE__ */ jsx215(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs30(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ jsx215(SelectedItemIndicator, {}),
           children
         ] }) })
       }
@@ -9638,19 +9687,19 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef20, useEffect as useEffect5, useRef as useRef9 } from "react";
-import styled49, { css as css27 } from "styled-components";
+import styled50, { css as css27 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil19 } from "@wistia/type-guards";
+import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 
 // src/private/helpers/mergeRefs/mergeRefs.ts
-import { isNotNil as isNotNil18, isFunction as isFunction2 } from "@wistia/type-guards";
+import { isNotNil as isNotNil19, isFunction as isFunction2 } from "@wistia/type-guards";
 var mergeRefs = (refs) => (value) => {
   refs.forEach((ref) => {
     if (isFunction2(ref)) {
       ref(value);
       return;
     }
-    if (isNotNil18(ref)) {
+    if (isNotNil19(ref)) {
       ref.current = value;
     }
   });
@@ -9717,7 +9766,7 @@ var segmentedControlItemStyles = css27`
     }
   }
 `;
-var StyledSegmentedControlItem = styled49(ToggleGroupItem)`
+var StyledSegmentedControlItem = styled50(ToggleGroupItem)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef20(
@@ -9762,8 +9811,8 @@ var SegmentedControlItem = forwardRef20(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil19(label),
-        "aria-label": isNotNil19(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil20(label),
+        "aria-label": isNotNil20(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -9777,138 +9826,423 @@ var SegmentedControlItem = forwardRef20(
 );
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
-// src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef22, useState as useState10 } from "react";
-import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil21, isNil as isNil14 } from "@wistia/type-guards";
-
-// src/components/Tabs/TabPanel.tsx
-import styled50 from "styled-components";
-import { Content as TabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx215 } from "react/jsx-runtime";
-var StyledTabPanel = styled50(TabsContent)`
-  display: flex;
-  flex-direction: column;
-`;
-var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ jsx215(
-    StyledTabPanel,
-    {
-      value,
-      ...props,
-      children
-    }
-  );
-};
-TabPanel.displayName = "TabPanel";
-
-// src/components/Tabs/TabList.tsx
+// src/components/Select/Select.tsx
+import {
+  Root as Root4,
+  Trigger as Trigger4,
+  Portal as Portal3,
+  Content as Content4,
+  ScrollUpButton,
+  Viewport,
+  Value,
+  ScrollDownButton
+} from "@radix-ui/react-select";
+import { forwardRef as forwardRef21 } from "react";
 import styled51 from "styled-components";
-import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { jsx as jsx216 } from "react/jsx-runtime";
-var StyledTabList = styled51(RadixTabList)`
-  ${segmentedControlStyles}
+import { jsx as jsx216, jsxs as jsxs32 } from "react/jsx-runtime";
+var StyledTrigger = styled51(Trigger4)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-select-color-bg: var(--wui-color-bg-surface);
+  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
+  --wui-select-color-border: var(--wui-color-border);
+  --wui-select-color-border-focus: var(--wui-color-border-active);
+  --wui-select-color-border-error: var(--wui-color-border-error);
+  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-select-border-radius: var(--wui-border-radius-rounded);
+  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
+  --wui-select-vertical-padding: var(--wui-space-02);
+  --wui-select-horizontal-padding: var(--wui-space-03);
+  --wui-select-placeholder: var(--wui-gray-10);
+  --wui-select-color-text-error: var(--wui-color-text-error);
 
-  margin-bottom: var(--wui-space-04);
-`;
-var TabList = ({
-  children,
-  fullWidth,
-  ariaLabel,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx216(
-    StyledTabList,
-    {
-      $fullWidth: fullWidth,
-      "aria-label": ariaLabel,
-      ...props,
-      children
-    }
-  );
-};
-TabList.displayName = "TabList";
+  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
+  background-color: var(--wui-select-color-bg);
+  border: 1px solid var(--wui-select-color-border);
+  border-radius: var(--wui-select-border-radius);
+  min-width: 200px;
+  text-align: left;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+  width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
 
-// src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect6, useRef as useRef10 } from "react";
-import styled52 from "styled-components";
-import { Trigger as RadixTab } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil20 } from "@wistia/type-guards";
+  > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
-// src/components/Tabs/useTabsValue.tsx
-import { createContext as createContext8, useContext as useContext7 } from "react";
-var TabsValueContext = createContext8(null);
-var TabsValueProvider = TabsValueContext.Provider;
-var useTabsValue = () => {
-  const context = useContext7(TabsValueContext);
-  if (context === null) {
-    throw new Error("useTabsValue must be used within a TabsValueProvider");
+  &[aria-expanded='true'],
+  &:focus {
+    outline: 2px solid var(--wui-color-focus-ring);
   }
-  return context;
-};
 
-// src/components/Tabs/TabItem.tsx
-import { jsxs as jsxs32 } from "react/jsx-runtime";
-var StyledTabItem = styled52(RadixTab)`
-  ${segmentedControlItemStyles}
+  &[aria-invalid='true'] {
+    outline: 2px solid var(--wui-select-color-border-error);
+    color: var(--wui-select-color-text-error);
+  }
 
-  &:focus-visible {
-    outline: none;
+  &:disabled {
+    border-color: var(--wui-color-bg-surface-disabled);
+    background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var TabItem = forwardRef21(
-  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
-    const selectedValue = useTabsValue();
-    const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = useRef10(null);
-    const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect6(() => {
-      const buttonElem = buttonRef.current;
-      if (!buttonElem) {
-        return void 0;
-      }
-      if (selectedValue !== value) {
-        return void 0;
-      }
-      setSelectedItemMeasurements({
-        offsetLeft: buttonElem.offsetLeft,
-        offsetWidth: buttonElem.offsetWidth,
-        offsetHeight: buttonElem.offsetHeight
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        setSelectedItemMeasurements({
-          offsetLeft: buttonElem.offsetLeft,
-          offsetWidth: buttonElem.offsetWidth,
-          offsetHeight: buttonElem.offsetHeight
-        });
-      });
-      resizeObserver.observe(buttonElem);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }, [selectedValue, setSelectedItemMeasurements, value]);
+var StyledContent3 = styled51(Content4)`
+  --wui-select-content-border: var(--wui-color-border);
+  --wui-select-content-bg: var(--wui-color-bg-surface);
+  --wui-select-content-border-radius: var(--wui-border-radius-02);
+  --wui-select-option-padding: var(--wui-space-02);
+  --wui-select-option-inner-gap: var(--wui-space-03);
+  --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
+
+  overflow: hidden;
+  transform: translateY(8px);
+  background-color: var(--wui-select-content-bg);
+  border: 1px solid var(--wui-select-content-border);
+  border-radius: var(--wui-select-content-border-radius);
+  padding: var(--wui-select-option-padding);
+  min-width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+  z-index: var(--wui-zindex-menu);
+`;
+var Select = forwardRef21(
+  ({
+    colorScheme = "inherit",
+    children,
+    onChange = () => null,
+    placeholder = "Select...",
+    fullWidth = false,
+    ...props
+  }, forwardedRef) => {
+    const responsiveFullWidth = useResponsiveProp(fullWidth);
     return /* @__PURE__ */ jsxs32(
-      StyledTabItem,
+      Root4,
       {
-        ref: combinedRef,
-        $hasLabel: isNotNil20(label),
-        "aria-label": isNotNil20(label) ? void 0 : ariaLabel,
-        disabled,
-        value,
+        ...props,
+        onValueChange: onChange,
         children: [
-          icon,
-          label
-        ]
-      }
-    );
-  }
-);
-TabItem.displayName = "TabItem";
-
-// src/components/Tabs/extractTabItems.ts
-import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement2 } from "react";
-var extractTabItems = (children) => {
-  const tabItems = [];
+          /* @__PURE__ */ jsxs32(
+            StyledTrigger,
+            {
+              ref: forwardedRef,
+              $colorScheme: colorScheme,
+              $fullWidth: responsiveFullWidth,
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx216(Value, { placeholder }),
+                /* @__PURE__ */ jsx216(
+                  Icon,
+                  {
+                    size: "md",
+                    type: "caret-down"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx216(Portal3, { children: /* @__PURE__ */ jsxs32(StyledContent3, { position: "popper", children: [
+            /* @__PURE__ */ jsx216(ScrollUpButton, { children: /* @__PURE__ */ jsx216(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ jsx216(Viewport, { children }),
+            /* @__PURE__ */ jsx216(ScrollDownButton, { children: /* @__PURE__ */ jsx216(Icon, { type: "caret-down" }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Select/SelectOption.tsx
+import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
+import { forwardRef as forwardRef22 } from "react";
+import styled52 from "styled-components";
+import { jsx as jsx217, jsxs as jsxs33 } from "react/jsx-runtime";
+var StyledItem = styled52(Item)`
+  ${variantStyleMap2.body3};
+  display: flex;
+  padding: var(--wui-select-option-padding);
+  gap: var(--wui-select-option-inner-gap);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  border-radius: var(--wui-border-radius-01);
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--wui-select-option-bg-hover);
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--wui-color-text-disabled);
+  }
+
+  &[aria-disabled='true']:hover {
+    background-color: transparent;
+  }
+`;
+var StyledIconContainer = styled52.span`
+  width: 12px;
+`;
+var SelectOption = forwardRef22(
+  ({ children, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs33(
+      StyledItem,
+      {
+        ...props,
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx217(StyledIconContainer, { children: /* @__PURE__ */ jsx217(ItemIndicator, { children: /* @__PURE__ */ jsx217(
+            Icon,
+            {
+              size: "sm",
+              type: "checkmark"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx217(ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectOption.displayName = "Option";
+
+// src/components/Select/SelectOptionGroup.tsx
+import { Group, Label as Label2 } from "@radix-ui/react-select";
+import styled53 from "styled-components";
+import { jsx as jsx218, jsxs as jsxs34 } from "react/jsx-runtime";
+var StyledLabel4 = styled53(Label2)`
+  padding: var(--wui-select-option-padding);
+`;
+var SelectOptionGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ jsxs34(Group, { ...props, children: [
+    /* @__PURE__ */ jsx218(StyledLabel4, { children: /* @__PURE__ */ jsx218(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "body3",
+        children: label
+      }
+    ) }),
+    children
+  ] });
+};
+
+// src/components/Table/Table.tsx
+import styled54, { css as css28 } from "styled-components";
+import { jsx as jsx219 } from "react/jsx-runtime";
+var StyledTable = styled54.table`
+  width: 100%;
+  border-collapse: collapse;
+
+  ${({ $striped }) => $striped && css28`
+      tbody tr:nth-child(even) {
+        background-color: #f2f2f2;
+      }
+    `}
+`;
+var Table = ({ children, striped = false, ...props }) => {
+  return /* @__PURE__ */ jsx219(
+    StyledTable,
+    {
+      $striped: striped,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/Table/TableBody.tsx
+import styled55 from "styled-components";
+
+// src/components/Table/TableSectionContext.ts
+import { createContext as createContext8 } from "react";
+var TableSectionContext = createContext8(null);
+
+// src/components/Table/TableBody.tsx
+import { jsx as jsx220 } from "react/jsx-runtime";
+var StyledTbody = styled55.tbody``;
+var TableBody = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx220(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx220(StyledTbody, { ...props, children }) });
+};
+
+// src/components/Table/TableCell.tsx
+import { useContext as useContext7 } from "react";
+import styled56 from "styled-components";
+import { jsx as jsx221 } from "react/jsx-runtime";
+var StyledTh = styled56.th`
+  text-align: left;
+  padding: 8px;
+`;
+var StyledTd = styled56.td`
+  padding: 8px;
+`;
+var TableCell = ({ children, ...props }) => {
+  const section = useContext7(TableSectionContext);
+  if (section === "head") {
+    return /* @__PURE__ */ jsx221(StyledTh, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx221(StyledTd, { ...props, children });
+};
+
+// src/components/Table/TableFooter.tsx
+import styled57 from "styled-components";
+import { jsx as jsx222 } from "react/jsx-runtime";
+var StyledTfoot = styled57.tfoot``;
+var TableFooter = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx222(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx222(StyledTfoot, { ...props, children }) });
+};
+
+// src/components/Table/TableHead.tsx
+import styled58 from "styled-components";
+import { jsx as jsx223 } from "react/jsx-runtime";
+var StyledThead = styled58.thead``;
+var TableHead = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx223(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx223(StyledThead, { ...props, children }) });
+};
+
+// src/components/Table/TableRow.tsx
+import styled59 from "styled-components";
+import { jsx as jsx224 } from "react/jsx-runtime";
+var StyledTr = styled59.tr`
+  border-bottom: 1px solid #ddd;
+`;
+var TableRow = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx224(StyledTr, { ...props, children });
+};
+
+// src/components/Tabs/Tabs.tsx
+import { forwardRef as forwardRef24, useState as useState10 } from "react";
+import { Root as TabsRoot } from "@radix-ui/react-tabs";
+import { isNotNil as isNotNil22, isNil as isNil14 } from "@wistia/type-guards";
+
+// src/components/Tabs/TabPanel.tsx
+import styled60 from "styled-components";
+import { Content as TabsContent } from "@radix-ui/react-tabs";
+import { jsx as jsx225 } from "react/jsx-runtime";
+var StyledTabPanel = styled60(TabsContent)`
+  display: flex;
+  flex-direction: column;
+`;
+var TabPanel = ({ children, value, ...props }) => {
+  return /* @__PURE__ */ jsx225(
+    StyledTabPanel,
+    {
+      value,
+      ...props,
+      children
+    }
+  );
+};
+TabPanel.displayName = "TabPanel";
+
+// src/components/Tabs/TabList.tsx
+import styled61 from "styled-components";
+import { List as RadixTabList } from "@radix-ui/react-tabs";
+import { jsx as jsx226 } from "react/jsx-runtime";
+var StyledTabList = styled61(RadixTabList)`
+  ${segmentedControlStyles}
+
+  margin-bottom: var(--wui-space-04);
+`;
+var TabList = ({
+  children,
+  fullWidth,
+  ariaLabel,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx226(
+    StyledTabList,
+    {
+      $fullWidth: fullWidth,
+      "aria-label": ariaLabel,
+      ...props,
+      children
+    }
+  );
+};
+TabList.displayName = "TabList";
+
+// src/components/Tabs/TabItem.tsx
+import { forwardRef as forwardRef23, useEffect as useEffect6, useRef as useRef10 } from "react";
+import styled62 from "styled-components";
+import { Trigger as RadixTab } from "@radix-ui/react-tabs";
+import { isNotNil as isNotNil21 } from "@wistia/type-guards";
+
+// src/components/Tabs/useTabsValue.tsx
+import { createContext as createContext9, useContext as useContext8 } from "react";
+var TabsValueContext = createContext9(null);
+var TabsValueProvider = TabsValueContext.Provider;
+var useTabsValue = () => {
+  const context = useContext8(TabsValueContext);
+  if (context === null) {
+    throw new Error("useTabsValue must be used within a TabsValueProvider");
+  }
+  return context;
+};
+
+// src/components/Tabs/TabItem.tsx
+import { jsxs as jsxs35 } from "react/jsx-runtime";
+var StyledTabItem = styled62(RadixTab)`
+  ${segmentedControlItemStyles}
+
+  &:focus-visible {
+    outline: none;
+  }
+`;
+var TabItem = forwardRef23(
+  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
+    const selectedValue = useTabsValue();
+    const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
+    const buttonRef = useRef10(null);
+    const combinedRef = mergeRefs([buttonRef, forwardedRef]);
+    useEffect6(() => {
+      const buttonElem = buttonRef.current;
+      if (!buttonElem) {
+        return void 0;
+      }
+      if (selectedValue !== value) {
+        return void 0;
+      }
+      setSelectedItemMeasurements({
+        offsetLeft: buttonElem.offsetLeft,
+        offsetWidth: buttonElem.offsetWidth,
+        offsetHeight: buttonElem.offsetHeight
+      });
+      const resizeObserver = new ResizeObserver(() => {
+        setSelectedItemMeasurements({
+          offsetLeft: buttonElem.offsetLeft,
+          offsetWidth: buttonElem.offsetWidth,
+          offsetHeight: buttonElem.offsetHeight
+        });
+      });
+      resizeObserver.observe(buttonElem);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [selectedValue, setSelectedItemMeasurements, value]);
+    return /* @__PURE__ */ jsxs35(
+      StyledTabItem,
+      {
+        ref: combinedRef,
+        $hasLabel: isNotNil21(label),
+        "aria-label": isNotNil21(label) ? void 0 : ariaLabel,
+        disabled,
+        value,
+        children: [
+          icon,
+          label
+        ]
+      }
+    );
+  }
+);
+TabItem.displayName = "TabItem";
+
+// src/components/Tabs/extractTabItems.ts
+import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement2 } from "react";
+var extractTabItems = (children) => {
+  const tabItems = [];
   Children6.forEach(children, (child) => {
     if (!isValidElement2(child)) {
       return;
@@ -9929,9 +10263,9 @@ var extractTabItems = (children) => {
 
 // src/components/Tabs/SelectedItemIndicator.tsx
 import { useMemo as useMemo10 } from "react";
-import styled53 from "styled-components";
-import { jsx as jsx217 } from "react/jsx-runtime";
-var TabsSelectedItemIndicatorDiv = styled53(SelectedItemIndicatorDiv)`
+import styled63 from "styled-components";
+import { jsx as jsx227 } from "react/jsx-runtime";
+var TabsSelectedItemIndicatorDiv = styled63(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -9950,7 +10284,7 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsx227(
     TabsSelectedItemIndicatorDiv,
     {
       style: {
@@ -9963,8 +10297,8 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx218, jsxs as jsxs33 } from "react/jsx-runtime";
-var Tabs = forwardRef22(
+import { jsx as jsx228, jsxs as jsxs36 } from "react/jsx-runtime";
+var Tabs = forwardRef24(
   ({
     children,
     fullWidth = true,
@@ -9980,25 +10314,25 @@ var Tabs = forwardRef22(
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
-    return /* @__PURE__ */ jsx218(
+    return /* @__PURE__ */ jsx228(
       TabsRoot,
       {
         ref,
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ jsx218(
+        children: /* @__PURE__ */ jsx228(
           TabsValueProvider,
           {
             value: defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue,
-            children: /* @__PURE__ */ jsxs33(SelectedItemMeasurementsProvider, { children: [
-              /* @__PURE__ */ jsxs33(
+            children: /* @__PURE__ */ jsxs36(SelectedItemMeasurementsProvider, { children: [
+              /* @__PURE__ */ jsxs36(
                 TabList,
                 {
                   ariaLabel,
                   fullWidth,
                   children: [
-                    /* @__PURE__ */ jsx218(SelectedItemIndicator2, {}),
+                    /* @__PURE__ */ jsx228(SelectedItemIndicator2, {}),
                     tabItems.map((tab) => {
                       const {
                         value,
@@ -10008,7 +10342,7 @@ var Tabs = forwardRef22(
                         "aria-label": ariaLabelForTab
                       } = tab.props;
                       if (isNil14(icon)) {
-                        return /* @__PURE__ */ jsx218(
+                        return /* @__PURE__ */ jsx228(
                           TabItem,
                           {
                             disabled,
@@ -10018,8 +10352,8 @@ var Tabs = forwardRef22(
                           value
                         );
                       }
-                      if (isNotNil21(label)) {
-                        return /* @__PURE__ */ jsx218(
+                      if (isNotNil22(label)) {
+                        return /* @__PURE__ */ jsx228(
                           TabItem,
                           {
                             disabled,
@@ -10030,8 +10364,8 @@ var Tabs = forwardRef22(
                           value
                         );
                       }
-                      if (isNotNil21(ariaLabelForTab)) {
-                        return /* @__PURE__ */ jsx218(
+                      if (isNotNil22(ariaLabelForTab)) {
+                        return /* @__PURE__ */ jsx228(
                           TabItem,
                           {
                             "aria-label": ariaLabelForTab,
@@ -10047,7 +10381,7 @@ var Tabs = forwardRef22(
                   ]
                 }
               ),
-              tabItems.map((tab) => /* @__PURE__ */ jsx218(
+              tabItems.map((tab) => /* @__PURE__ */ jsx228(
                 TabPanel,
                 {
                   value: tab.props.value,
@@ -10065,19 +10399,19 @@ var Tabs = forwardRef22(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx219 } from "react/jsx-runtime";
-var Tab = forwardRef23(({ children }, ref) => {
-  return /* @__PURE__ */ jsx219("div", { ref, children });
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx229 } from "react/jsx-runtime";
+var Tab = forwardRef25(({ children }, ref) => {
+  return /* @__PURE__ */ jsx229("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef24 } from "react";
-import styled54 from "styled-components";
-import { isNil as isNil15, isNotNil as isNotNil22, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx220, jsxs as jsxs34 } from "react/jsx-runtime";
-var TagLabel = styled54.a`
+import { forwardRef as forwardRef26 } from "react";
+import styled64 from "styled-components";
+import { isNil as isNil15, isNotNil as isNotNil23, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { Fragment as Fragment8, jsx as jsx230, jsxs as jsxs37 } from "react/jsx-runtime";
+var TagLabel = styled64.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -10105,14 +10439,14 @@ var TagLabel = styled54.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled54.div`
+var TagDivider = styled64.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled54.button`
+var StyledRemoveButton = styled64.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -10140,7 +10474,7 @@ var StyledRemoveButton = styled54.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled54.div`
+var StyledTag = styled64.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -10161,39 +10495,39 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs34(Fragment8, { children: [
-    /* @__PURE__ */ jsx220(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs37(Fragment8, { children: [
+    /* @__PURE__ */ jsx230(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs37(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx230(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx220(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx230(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef24(
+var Tag = forwardRef26(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil22(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs34(
+    const labelProps = isNotNil23(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs37(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx230(
             TagLabel,
             {
               ...labelProps,
@@ -10201,7 +10535,7 @@ var Tag = forwardRef24(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx230(
             RemoveButton,
             {
               colorScheme,
@@ -10217,26 +10551,26 @@ var Tag = forwardRef24(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled55, { css as css28 } from "styled-components";
-import { isNotNil as isNotNil23 } from "@wistia/type-guards";
-import { jsx as jsx221, jsxs as jsxs35 } from "react/jsx-runtime";
+import styled65, { css as css29 } from "styled-components";
+import { isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { jsx as jsx231, jsxs as jsxs38 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx221(
+    return /* @__PURE__ */ jsx231(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx221("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__ */ jsx231("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__ */ jsx221(
+  return /* @__PURE__ */ jsx231(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx221("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__ */ jsx231("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" })
     }
   );
 };
@@ -10244,12 +10578,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsx231(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx221("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__ */ jsx231("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" })
     }
   );
 };
@@ -10259,7 +10593,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled55.svg`
+var WistiaLogoComponent = styled65.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -10275,12 +10609,12 @@ var WistiaLogoComponent = styled55.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css28`
+      return css29`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css28`
+    return css29`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -10317,7 +10651,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs35(
+  const Logo = /* @__PURE__ */ jsxs38(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -10330,259 +10664,16 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx221("title", { children: title }),
-        isNotNil23(description) ? /* @__PURE__ */ jsx221("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx231("title", { children: title }),
+        isNotNil24(description) ? /* @__PURE__ */ jsx231("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx221("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx231("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/Select/Select.tsx
-import {
-  Root as Root4,
-  Trigger as Trigger4,
-  Portal as Portal3,
-  Content as Content4,
-  ScrollUpButton,
-  Viewport,
-  Value,
-  ScrollDownButton
-} from "@radix-ui/react-select";
-import { forwardRef as forwardRef25 } from "react";
-import styled56 from "styled-components";
-import { jsx as jsx222, jsxs as jsxs36 } from "react/jsx-runtime";
-var StyledTrigger = styled56(Trigger4)`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  --wui-select-color-bg: var(--wui-color-bg-surface);
-  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-select-color-border: var(--wui-color-border);
-  --wui-select-color-border-focus: var(--wui-color-border-active);
-  --wui-select-color-border-error: var(--wui-color-border-error);
-  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-select-border-radius: var(--wui-border-radius-rounded);
-  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
-  --wui-select-vertical-padding: var(--wui-space-02);
-  --wui-select-horizontal-padding: var(--wui-space-03);
-  --wui-select-placeholder: var(--wui-gray-10);
-  --wui-select-color-text-error: var(--wui-color-text-error);
-
-  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
-  background-color: var(--wui-select-color-bg);
-  border: 1px solid var(--wui-select-color-border);
-  border-radius: var(--wui-select-border-radius);
-  min-width: 200px;
-  text-align: left;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
-
-  &[aria-expanded='true'],
-  &:focus {
-    outline: 2px solid var(--wui-color-focus-ring);
-  }
-
-  &[aria-invalid='true'] {
-    outline: 2px solid var(--wui-select-color-border-error);
-    color: var(--wui-select-color-text-error);
-  }
-
-  &:disabled {
-    border-color: var(--wui-color-bg-surface-disabled);
-    background-color: var(--wui-color-bg-surface-disabled);
-  }
-`;
-var StyledContent3 = styled56(Content4)`
-  --wui-select-content-border: var(--wui-color-border);
-  --wui-select-content-bg: var(--wui-color-bg-surface);
-  --wui-select-content-border-radius: var(--wui-border-radius-02);
-  --wui-select-option-padding: var(--wui-space-02);
-  --wui-select-option-inner-gap: var(--wui-space-03);
-  --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
-
-  overflow: hidden;
-  transform: translateY(8px);
-  background-color: var(--wui-select-content-bg);
-  border: 1px solid var(--wui-select-content-border);
-  border-radius: var(--wui-select-content-border-radius);
-  padding: var(--wui-select-option-padding);
-  min-width: 200px;
-  z-index: var(--wui-zindex-menu);
-`;
-var Select = forwardRef25(
-  ({
-    colorScheme = "inherit",
-    children,
-    onChange = () => null,
-    placeholder = "Select...",
-    fullWidth = false,
-    ...props
-  }, forwardedRef) => {
-    const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs36(
-      Root4,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ jsxs36(
-            StyledTrigger,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ jsx222(Value, { placeholder }),
-                /* @__PURE__ */ jsx222(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx222(Portal3, { children: /* @__PURE__ */ jsxs36(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ jsx222(ScrollUpButton, { children: /* @__PURE__ */ jsx222(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ jsx222(Viewport, { children }),
-            /* @__PURE__ */ jsx222(ScrollDownButton, { children: /* @__PURE__ */ jsx222(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-
-// src/components/Select/SelectOption.tsx
-import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
-import { forwardRef as forwardRef26 } from "react";
-import styled57 from "styled-components";
-import { jsx as jsx223, jsxs as jsxs37 } from "react/jsx-runtime";
-var StyledItem = styled57(Item)`
-  ${variantStyleMap2.body3};
-  display: flex;
-  padding: var(--wui-select-option-padding);
-  gap: var(--wui-select-option-inner-gap);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  border-radius: var(--wui-border-radius-01);
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--wui-select-option-bg-hover);
-    outline: none;
-  }
-
-  &[aria-disabled='true'] {
-    color: var(--wui-color-text-disabled);
-  }
-
-  &[aria-disabled='true']:hover {
-    background-color: transparent;
-  }
-`;
-var StyledIconContainer = styled57.span`
-  width: 12px;
-`;
-var SelectOption = forwardRef26(
-  ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs37(
-      StyledItem,
-      {
-        ...props,
-        ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ jsx223(StyledIconContainer, { children: /* @__PURE__ */ jsx223(ItemIndicator, { children: /* @__PURE__ */ jsx223(
-            Icon,
-            {
-              size: "sm",
-              type: "checkmark"
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx223(ItemText, { children })
-        ]
-      }
-    );
-  }
-);
-SelectOption.displayName = "Option";
-
-// src/components/Select/SelectOptionGroup.tsx
-import { Group, Label as Label2 } from "@radix-ui/react-select";
-import styled58 from "styled-components";
-import { jsx as jsx224, jsxs as jsxs38 } from "react/jsx-runtime";
-var StyledLabel4 = styled58(Label2)`
-  padding: var(--wui-select-option-padding);
-`;
-var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs38(Group, { ...props, children: [
-    /* @__PURE__ */ jsx224(StyledLabel4, { children: /* @__PURE__ */ jsx224(
-      Text,
-      {
-        prominence: "secondary",
-        variant: "body3",
-        children: label
-      }
-    ) }),
-    children
-  ] });
-};
-
-// src/components/Image/Image.tsx
-import styled59 from "styled-components";
-import { isNotNil as isNotNil24 } from "@wistia/type-guards";
-import { jsx as jsx225 } from "react/jsx-runtime";
-var getFillStyle2 = (fillContainer) => {
-  if (fillContainer === "horizontal") {
-    return "width: 100%;";
-  }
-  if (fillContainer === "vertical") {
-    return "height: 100%;";
-  }
-  if (fillContainer === true) {
-    return `
-      width: 100%;
-      height: 100%;
-    `;
-  }
-  return void 0;
-};
-var StyledImage = styled59.img`
-  border-radius: ${({ $borderRadius }) => isNotNil24($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
-  ${({ $fillContainer }) => getFillStyle2($fillContainer)};
-  object-fit: ${({ $objFit }) => $objFit};
-  object-position: ${({ $objPosition }) => $objPosition};
-`;
-var Image = ({
-  src,
-  alt,
-  borderRadius,
-  fill: fillContainer = false,
-  fit: objFit,
-  loading = "lazy",
-  position: objPosition,
-  ...otherProps
-}) => /* @__PURE__ */ jsx225(
-  StyledImage,
-  {
-    $borderRadius: borderRadius,
-    $fillContainer: fillContainer,
-    $objFit: objFit,
-    $objPosition: objPosition,
-    alt,
-    loading,
-    src,
-    ...otherProps
-  }
-);
-Image.displayName = "Image";
 export {
   ActionButton,
   Avatar,
@@ -10642,6 +10733,12 @@ export {
   Stack,
   SubMenu,
   Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableRow,
   Tabs,
   Tag,
   Text,