@wistia/ui 0.21.7 → 0.21.8-beta.7d0080e7.cf35bb3

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.21.7
+ * @license @wistia/ui v0.21.8-beta.7d0080e7.cf35bb3
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -9,7 +9,7 @@
 
 
 // src/providers/UIProvider/UIProvider.tsx
-import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "@base-ui/react/tooltip";
 import { createContext as createContext2, useContext } from "react";
 
 // src/css/GlobalStyle.tsx
@@ -499,7 +499,7 @@ var UIProvider = ({ children }) => {
   if (isNested) {
     return /* @__PURE__ */ jsx3(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx3(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx3(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(Tooltip.Provider, { children: [
     /* @__PURE__ */ jsx3(GlobalStyle, {}),
     children,
     /* @__PURE__ */ jsx3(ToastProvider, {})
@@ -8995,12 +8995,12 @@ var ClickRegion = ({ children, targetRef }) => {
 ClickRegion.displayName = "ClickRegion_UI";
 
 // src/components/Collapsible/Collapsible.tsx
-import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 import { styled as styled29 } from "styled-components";
 import { jsx as jsx247 } from "react/jsx-runtime";
-var StyledRoot = styled29(CollapsibleRoot)`
-  &[data-state='closed'] [data-wui-collapsible-content] {
+var StyledRoot = styled29(BaseCollapsible.Root)`
+  &[data-closed] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--wui-collapsible-content-clamp-lines);
@@ -9021,10 +9021,10 @@ Collapsible.displayName = "Collapsible_UI";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
-import { Trigger } from "@radix-ui/react-collapsible";
+import { Collapsible as BaseCollapsible2 } from "@base-ui/react/collapsible";
 import { styled as styled30 } from "styled-components";
 import { jsx as jsx248 } from "react/jsx-runtime";
-var StyledTrigger = styled30(Trigger)`
+var StyledTrigger = styled30(BaseCollapsible2.Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -9047,7 +9047,7 @@ var StyledTrigger = styled30(Trigger)`
 `;
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx248(StyledTrigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx248(StyledTrigger, { render: children });
 };
 
 // src/components/Collapsible/CollapsibleTriggerIcon.tsx
@@ -9074,7 +9074,7 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
 import { styled as styled31 } from "styled-components";
-import { Content } from "@radix-ui/react-collapsible";
+import { Collapsible as BaseCollapsible3 } from "@base-ui/react/collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { Fragment as Fragment5, jsx as jsx250, jsxs as jsxs20 } from "react/jsx-runtime";
 var ClampedContent = styled31.div`
@@ -9091,7 +9091,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx250(Content, { children: /* @__PURE__ */ jsxs20(Fragment5, { children: [
+  return /* @__PURE__ */ jsx250(BaseCollapsible3.Panel, { children: /* @__PURE__ */ jsxs20(Fragment5, { children: [
     children,
     " "
   ] }) });
@@ -9100,7 +9100,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 // src/components/ColorPicker/ColorGrid.tsx
 import { useCallback as useCallback10 } from "react";
 import { styled as styled33 } from "styled-components";
-import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
+import { RadioGroup } from "@base-ui/react/radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
 import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect10, useMemo as useMemo7, useState as useState12 } from "react";
@@ -9713,7 +9713,7 @@ var Container = styled33.div`
 var LabelContainer = styled33.div`
   padding-top: var(--wui-space-01);
 `;
-var ItemsContainer = styled33(RadioGroupRoot)`
+var ItemsContainer = styled33(RadioGroup)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -9725,8 +9725,10 @@ var ColorGrid = ({ children, label }) => {
   const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = useCallback10(
     (value) => {
-      const hsv = convertToHsv(value);
-      onChangeNonDerivedValueAsHsv(hsv);
+      if (typeof value === "string") {
+        const hsv = convertToHsv(value);
+        onChangeNonDerivedValueAsHsv(hsv);
+      }
     },
     [onChangeNonDerivedValueAsHsv]
   );
@@ -9746,7 +9748,7 @@ ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 import { styled as styled36 } from "styled-components";
-import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
+import { Radio } from "@base-ui/react/radio";
 import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
@@ -9807,14 +9809,9 @@ var ColorSwatch = ({
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import {
-  Root as TooltipRoot,
-  Content as TooltipContent,
-  Trigger as TooltipTrigger,
-  Portal as TooltipPortal,
-  Arrow as TooltipArrow
-} from "@radix-ui/react-tooltip";
-import { styled as styled35, keyframes as keyframes2 } from "styled-components";
+import { isValidElement as isValidElement2 } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { styled as styled35, css as css28, keyframes as keyframes2 } from "styled-components";
 import { jsx as jsx255, jsxs as jsxs23 } from "react/jsx-runtime";
 var hide = keyframes2`
   from {
@@ -9864,7 +9861,7 @@ var slideRightAndFade = keyframes2`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled35(TooltipContent)`
+var StyledPopup = styled35(BaseTooltip.Popup)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9890,28 +9887,55 @@ var StyledContent = styled35(TooltipContent)`
   max-width: 30em;
   z-index: var(--wui-zindex-tooltip);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation-name: ${hide};
   }
 
-  &[data-state='delayed-open'][data-side='top'] {
+  &[data-open][data-side='top'] {
     animation-name: ${slideUpAndFade};
   }
 
-  &[data-state='delayed-open'][data-side='right'] {
+  &[data-open][data-side='right'] {
     animation-name: ${slideRightAndFade};
   }
 
-  &[data-state='delayed-open'][data-side='bottom'] {
+  &[data-open][data-side='bottom'] {
     animation-name: ${slideDownAndFade};
   }
 
-  &[data-state='delayed-open'][data-side='left'] {
+  &[data-open][data-side='left'] {
     animation-name: ${slideLeftAndFade};
   }
+
+  overflow: visible;
+`;
+var arrowEdgeCss = css28`
+  &[data-side='top'] {
+    bottom: 0;
+    transform: translateY(calc(100% - 2px));
+  }
+
+  &[data-side='bottom'] {
+    top: 0;
+    transform: translateY(calc(-100% + 2px)) rotate(180deg);
+  }
+
+  &[data-side='left'] {
+    right: 0;
+    transform: translateX(calc(100% - 4px)) rotate(-90deg);
+  }
+
+  &[data-side='right'] {
+    left: 0;
+    transform: translateX(calc(-100% + 4px)) rotate(90deg);
+  }
+`;
+var StyledTooltipArrow = styled35.svg`
+  ${arrowEdgeCss}
 `;
 var VISUAL_OFFSET = 6;
-var Tooltip = ({
+var ARROW_EXTENSION = 6;
+var Tooltip2 = ({
   delay = 500,
   direction = "top",
   content,
@@ -9927,44 +9951,47 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs23(
-    TooltipRoot,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsx255(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx255(TooltipPortal, { container, children: /* @__PURE__ */ jsxs23(
-          StyledContent,
-          {
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ jsx255(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx255(
-                "svg",
+  return /* @__PURE__ */ jsxs23(BaseTooltip.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx255(
+      BaseTooltip.Trigger,
+      {
+        delay,
+        render: isValidElement2(children) ? children : /* @__PURE__ */ jsx255("span", { children })
+      }
+    ),
+    /* @__PURE__ */ jsx255(BaseTooltip.Portal, { ...container != null ? { container } : {}, children: /* @__PURE__ */ jsx255(
+      BaseTooltip.Positioner,
+      {
+        side: direction,
+        sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET + ARROW_EXTENSION,
+        children: /* @__PURE__ */ jsxs23(StyledPopup, { role: "tooltip", children: [
+          content,
+          !hideArrow ? /* @__PURE__ */ jsx255(
+            BaseTooltip.Arrow,
+            {
+              render: /* @__PURE__ */ jsx255(
+                StyledTooltipArrow,
                 {
                   fill: "var(--tooltip-bg)",
                   height: "8",
-                  style: { transform: "translateY(-2px)" },
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
                   children: /* @__PURE__ */ jsx255("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
-            ]
-          }
-        ) })
-      ]
-    }
-  );
+              )
+            }
+          ) : null
+        ] })
+      }
+    ) })
+  ] });
 };
-Tooltip.displayName = "Tooltip_UI";
+Tooltip2.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 import { jsx as jsx256 } from "react/jsx-runtime";
-var Container2 = styled36(RadioGroupItem)`
+var Container2 = styled36(Radio.Root)`
   border: none;
   appearance: none;
   outline: none;
@@ -9981,7 +10008,7 @@ var ColorGridOption = ({ value: rawValue, name }) => {
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ jsx256(
-    Tooltip,
+    Tooltip2,
     {
       content: name ?? /* @__PURE__ */ jsx256("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
       children: /* @__PURE__ */ jsx256(
@@ -10010,17 +10037,18 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 // src/components/ColorPicker/ColorList.tsx
 import { useCallback as useCallback11 } from "react";
 import { styled as styled37 } from "styled-components";
-import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
 import { jsx as jsx257 } from "react/jsx-runtime";
-var Container3 = styled37(ToggleGroupRoot)`
+var Container3 = styled37(ToggleGroup)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `;
 var ColorList = ({ children }) => {
   const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = useCallback11(
-    (value) => {
-      if (value === "") {
+    (newValue) => {
+      const value = newValue[0];
+      if (value === void 0 || value === "") {
         return;
       }
       const hsv = convertToHsv(value);
@@ -10032,8 +10060,7 @@ var ColorList = ({ children }) => {
     Container3,
     {
       onValueChange,
-      type: "single",
-      value: valueAsHex,
+      value: [valueAsHex],
       children
     }
   );
@@ -10072,7 +10099,7 @@ ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
 import { styled as styled39 } from "styled-components";
-import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
 import { formatHex as formatHex4 } from "culori/fn";
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
@@ -10110,7 +10137,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 
 // src/components/ColorPicker/ColorListOption.tsx
 import { jsx as jsx260, jsxs as jsxs26 } from "react/jsx-runtime";
-var Container5 = styled39(ToggleGroupItem)`
+var Container5 = styled39(Toggle)`
   border: none;
   appearance: none;
   outline: none;
@@ -10169,7 +10196,7 @@ var ColorListOption = ({ value: rawValue, name }) => {
 ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
-import { Root as PopoverRoot } from "@radix-ui/react-popover";
+import { Popover } from "@base-ui/react/popover";
 import { jsx as jsx261 } from "react/jsx-runtime";
 var ColorPicker = ({
   children,
@@ -10179,7 +10206,7 @@ var ColorPicker = ({
   onValueChange,
   value
 }) => {
-  return /* @__PURE__ */ jsx261(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx261(Popover.Root, { modal: false, children: /* @__PURE__ */ jsx261(
     ColorPickerProvider,
     {
       colorForComparison,
@@ -10194,10 +10221,10 @@ var ColorPicker = ({
 ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
-import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
+import { Popover as Popover2 } from "@base-ui/react/popover";
 import { styled as styled40 } from "styled-components";
 import { jsx as jsx262 } from "react/jsx-runtime";
-var StyledPopoverContent = styled40(PopoverContent)`
+var StyledPopup2 = styled40(Popover2.Popup)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -10212,12 +10239,12 @@ var StyledPopoverContent = styled40(PopoverContent)`
 var ColorPickerPopoverContent = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx262(PopoverPortal, { children: /* @__PURE__ */ jsx262(
-    StyledPopoverContent,
+  return /* @__PURE__ */ jsx262(Popover2.Portal, { children: /* @__PURE__ */ jsx262(
+    Popover2.Positioner,
     {
       align: "start",
       sideOffset: 4,
-      children
+      children: /* @__PURE__ */ jsx262(StyledPopup2, { children })
     }
   ) });
 };
@@ -10236,7 +10263,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { Trigger as PopoverTrigger } from "@radix-ui/react-popover";
+import { Popover as Popover3 } from "@base-ui/react/popover";
 import { styled as styled42 } from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
@@ -10271,7 +10298,7 @@ ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { jsx as jsx266, jsxs as jsxs27 } from "react/jsx-runtime";
-var StyledPopoverTrigger = styled42(PopoverTrigger)`
+var StyledPopoverTrigger = styled42(Popover3.Trigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
@@ -10370,7 +10397,7 @@ import { useCallback as useCallback12 } from "react";
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
-import { styled as styled44, css as css28 } from "styled-components";
+import { styled as styled44, css as css29 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx268, jsxs as jsxs29 } from "react/jsx-runtime";
 var switchHeightMap = {
@@ -10378,7 +10405,7 @@ var switchHeightMap = {
   md: 20,
   lg: 24
 };
-var getSizeCss2 = (size) => css28`
+var getSizeCss2 = (size) => css29`
   --wui-switch-height: ${switchHeightMap[size]}px;
 `;
 var StyledSwitchWrapper = styled44.div`
@@ -10581,13 +10608,13 @@ import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRe
 import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
-import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef10 } from "react";
-import { styled as styled45, css as css30 } from "styled-components";
+import { isValidElement as isValidElement3, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef10 } from "react";
+import { styled as styled45, css as css31 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/inputCss.ts
-import { css as css29 } from "styled-components";
-var inputCss = css29`
+import { css as css30 } from "styled-components";
+var inputCss = css30`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10614,7 +10641,7 @@ var inputCss = css29`
 
 // src/components/Input/Input.tsx
 import { jsx as jsx272, jsxs as jsxs31 } from "react/jsx-runtime";
-var inputStyles = css30`
+var inputStyles = css31`
   ${inputCss}
   input,
   textarea {
@@ -10782,14 +10809,14 @@ var Input = forwardRef15(
     if (isNil13(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx272(Icon, { type: "search" });
     }
-    if (isNotNil18(leftIconToDisplay) && isValidElement2(leftIconToDisplay)) {
+    if (isNotNil18(leftIconToDisplay) && isValidElement3(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil18(rightIconToDisplay) && isValidElement2(rightIconToDisplay)) {
+    if (isNotNil18(rightIconToDisplay) && isValidElement3(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement4(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
@@ -11004,11 +11031,7 @@ HexColorInput.displayName = "HexColorInput_UI";
 
 // src/components/ColorPicker/HueSlider.tsx
 import { useCallback as useCallback14, useMemo as useMemo8 } from "react";
-import {
-  Root as SliderRoot,
-  Track as SliderTrack,
-  Thumb as SliderThumb
-} from "@radix-ui/react-slider";
+import { Slider } from "@base-ui/react/slider";
 import { styled as styled47 } from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
@@ -11065,7 +11088,7 @@ var Container8 = styled47.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-var Root = styled47(SliderRoot)`
+var Root = styled47(Slider.Root)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -11074,10 +11097,10 @@ var Root = styled47(SliderRoot)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-var Track = styled47(SliderTrack)`
+var Track = styled47(Slider.Track)`
   width: 100%;
 `;
-var Thumb = styled47(SliderThumb)`
+var Thumb = styled47(Slider.Thumb)`
   position: relative;
 `;
 var ThumbInner = styled47.div`
@@ -11116,7 +11139,7 @@ var HueSlider = (props) => {
   }, [valueAsHsv]);
   const onHueChange = useCallback14(
     (values) => {
-      const newHue = values[0] ?? 0;
+      const newHue = typeof values === "number" ? values : values[0] ?? 0;
       onChangeNonDerivedValueAsHsv({
         ...nonDerivedValueAsHsv,
         h: newHue
@@ -11130,7 +11153,7 @@ var HueSlider = (props) => {
       ...props,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsx275(
           Root,
           {
             max: THREE_SIXTY,
@@ -11139,10 +11162,10 @@ var HueSlider = (props) => {
             orientation: "horizontal",
             step: 1,
             value: [nonDerivedValueAsHsv.h ?? 0],
-            children: [
+            children: /* @__PURE__ */ jsxs32(Slider.Control, { children: [
               /* @__PURE__ */ jsx275(Track, {}),
               /* @__PURE__ */ jsx275(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx275(ThumbInner, { style: thumbInnerStyle }) })
-            ]
+            ] })
           }
         ),
         /* @__PURE__ */ jsx275(HSVHueCanvas, { hsv: valueAsHsv })
@@ -11534,7 +11557,7 @@ import {
   useTransition,
   useEffect as useEffect15,
   Children as Children5,
-  isValidElement as isValidElement3
+  isValidElement as isValidElement4
 } from "react";
 import { matchSorter } from "match-sorter";
 import { styled as styled51 } from "styled-components";
@@ -11697,10 +11720,10 @@ var Tag = forwardRef16(
 Tag.displayName = "Tag_UI";
 
 // src/private/helpers/getTypographicStyles/getTypographicStyles.ts
-import { css as css31 } from "styled-components";
+import { css as css32 } from "styled-components";
 var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
 var getTypographicStyles = (variant) => {
-  return css31`
+  return css32`
     ${typographicVariantStyleMap[variant]}
     font-family: var(--font-family);
     font-size: var(--font-size);
@@ -11840,7 +11863,7 @@ var POPOVER_WIDTH_OFFSET = 20;
 var extractOptions = (children) => {
   const options = {};
   Children5.forEach(children, (child) => {
-    if (isValidElement3(child) && "value" in child.props && "children" in child.props) {
+    if (isValidElement4(child) && "value" in child.props && "children" in child.props) {
       options[child.props.value] = child.props.children ?? child.props.value;
     }
   });
@@ -11988,20 +12011,15 @@ var ComboboxOption = ({ value, children }) => {
 };
 
 // src/components/ContextMenu/ContextMenu.tsx
-import { isNil as isNil15, isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { isNil as isNil16, isNotNil as isNotNil24 } from "@wistia/type-guards";
 import { useEffect as useEffect16, useState as useState17 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Menu/Menu.tsx
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  DropdownMenuTrigger
-} from "@radix-ui/react-dropdown-menu";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { isNotNil as isNotNil20, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
-import { forwardRef as forwardRef17, useMemo as useMemo11 } from "react";
-import { styled as styled52, css as css32, keyframes as keyframes3 } from "styled-components";
+import { forwardRef as forwardRef17, useCallback as useCallback16, useMemo as useMemo11 } from "react";
+import { styled as styled52, css as css33, keyframes as keyframes3 } from "styled-components";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext6, useContext as useContext5 } from "react";
@@ -12030,7 +12048,7 @@ var close = keyframes3`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css32`
+var menuItemCss = css33`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -12041,7 +12059,7 @@ var menuItemCss = css32`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css32`
+var compactMenuItemCss = css33`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -12052,7 +12070,7 @@ var compactMenuItemCss = css32`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css32`
+var menuContentCss = css33`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -12068,18 +12086,18 @@ var menuContentCss = css32`
   font-family: var(--menu-font-family);
   background: var(--menu-bg);
   border-radius: var(--menu-border-radius);
-  box-shadow: var(--menu-shadow); /* TODO - Need a box-shadow token */
-  max-height: var(--radix-dropdown-menu-content-available-height);
+  box-shadow: var(--menu-shadow);
+  max-height: var(--available-height);
   min-width: var(--menu-min-width);
   max-width: var(--menu-max-width);
   overflow: auto;
   padding: var(--menu-padding);
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  transform-origin: var(--transform-origin);
   z-index: var(--wui-zindex-menu);
   border: 1px solid var(--wui-color-border);
 
-  &[data-state='closed'] {
-    animation: var(--menu-animation-duration) var(--wui-motion-ease-in) ${close}; /* TODO - need easing tokens */
+  &[data-closed] {
+    animation: var(--menu-animation-duration) var(--wui-motion-ease-in) ${close};
   }
 
   ${mq.smAndUp} {
@@ -12094,9 +12112,9 @@ var menuContentCss = css32`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled52(DropdownMenuContent)`
+var MenuPopup = styled52(BaseMenu.Popup)`
   ${menuContentCss}
-  min-width: var(--radix-dropdown-menu-trigger-width);
+  min-width: var(--anchor-width);
 `;
 var Menu = forwardRef17(
   ({
@@ -12113,8 +12131,16 @@ var Menu = forwardRef17(
     ...props
   }, ref) => {
     const contextValue = useMemo11(() => ({ compact }), [compact]);
+    const handleOpenChange = useCallback16(
+      (nextOpen) => {
+        if (nextOpen !== isOpen) {
+          onOpenChange?.(nextOpen);
+        }
+      },
+      [isOpen, onOpenChange]
+    );
     let controlProps = {
-      ...isNotNil20(onOpenChange) && isNotNil20(isOpen) ? { open: isOpen, onOpenChange } : {}
+      ...isNotNil20(onOpenChange) && isNotNil20(isOpen) ? { open: isOpen, onOpenChange: handleOpenChange } : {}
     };
     if (disabled) {
       controlProps = {
@@ -12123,36 +12149,43 @@ var Menu = forwardRef17(
       };
     }
     return /* @__PURE__ */ jsx281(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs36(
-      DropdownMenu,
+      BaseMenu.Root,
       {
         modal: false,
         ...controlProps,
         children: [
-          /* @__PURE__ */ jsx281(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx281(
-            Button,
+          /* @__PURE__ */ jsx281(
+            BaseMenu.Trigger,
             {
-              ref,
-              "aria-expanded": isOpen,
-              disabled,
-              forceState: isOpen ? "active" : void 0,
-              rightIcon: /* @__PURE__ */ jsx281(Icon, { type: "caret-down" }),
-              ...triggerProps,
-              children: label
+              render: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx281(
+                Button,
+                {
+                  ref,
+                  "aria-expanded": isOpen,
+                  disabled,
+                  forceState: isOpen ? "active" : void 0,
+                  rightIcon: /* @__PURE__ */ jsx281(Icon, { type: "caret-down" }),
+                  ...triggerProps,
+                  children: label
+                }
+              )
             }
-          ) }),
-          /* @__PURE__ */ jsx281(DropdownMenuPortal, { children: /* @__PURE__ */ jsx281(
-            MenuContent,
+          ),
+          /* @__PURE__ */ jsx281(BaseMenu.Portal, { children: /* @__PURE__ */ jsx281(
+            BaseMenu.Positioner,
             {
-              ...props,
-              $compact: compact,
               align,
               collisionPadding: 8,
-              onFocusOutside: (event) => {
-                event.preventDefault();
-              },
               side,
               sideOffset: 6,
-              children
+              children: /* @__PURE__ */ jsx281(
+                MenuPopup,
+                {
+                  ...props,
+                  $compact: compact,
+                  children
+                }
+              )
             }
           ) })
         ]
@@ -12161,27 +12194,24 @@ var Menu = forwardRef17(
   }
 );
 Menu.displayName = "Menu_UI";
-Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
 import { styled as styled53 } from "styled-components";
-import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx282 } from "react/jsx-runtime";
-var StyledMenuLabel = styled53(DropdownMenuLabel)`
+var StyledMenuLabel = styled53.div`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx282(
     StyledMenuLabel,
     {
-      asChild: true,
+      role: "group",
       ...props,
       children: /* @__PURE__ */ jsx282(
         Heading,
         {
           renderAs: "span",
           variant: "heading6",
-          ...props,
           children
         }
       )
@@ -12193,14 +12223,7 @@ MenuLabel.displayName = "MenuLabel_UI";
 // src/components/Menu/SubMenu.tsx
 import { useState as useState16 } from "react";
 import { styled as styled57 } from "styled-components";
-import {
-  DropdownMenuPortal as DropdownMenuPortal2,
-  DropdownMenuSub,
-  DropdownMenuGroup,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuItem
-} from "@radix-ui/react-dropdown-menu";
+import { Menu as Menu2 } from "@base-ui/react/menu";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
@@ -12353,7 +12376,7 @@ var MenuItemDescription = ({ children }) => {
 
 // src/components/Menu/SubMenu.tsx
 import { jsx as jsx286, jsxs as jsxs38 } from "react/jsx-runtime";
-var SubMenuContent = styled57(DropdownMenuSubContent)`
+var SubMenuPopup = styled57(Menu2.Popup)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
@@ -12363,25 +12386,31 @@ var SubMenuContent = styled57(DropdownMenuSubContent)`
 var StyledMobileSubMenuItems = styled57.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled57(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled57(Menu2.SubmenuTrigger)`
   outline: none;
 
-  &[data-state='open'],
+  &[data-popup-open],
   &[data-highlighted] {
     background-color: var(--wui-color-bg-surface-hover);
   }
 `;
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
-  const Trigger5 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx286(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx286(
-    MenuItemButton,
+  const Trigger = isSmAndUp ? StyledSubTrigger : Menu2.Item;
+  return /* @__PURE__ */ jsx286(
+    Trigger,
     {
-      ...props,
-      leftIcon: icon,
-      rightIcon: /* @__PURE__ */ jsx286(Icon, { type: "caret-right" })
+      nativeButton: true,
+      render: /* @__PURE__ */ jsx286(
+        MenuItemButton,
+        {
+          ...props,
+          leftIcon: icon,
+          rightIcon: /* @__PURE__ */ jsx286(Icon, { type: "caret-right" })
+        }
+      )
     }
-  ) });
+  );
 };
 var SubMenu = ({
   label,
@@ -12393,13 +12422,13 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState16(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs38(DropdownMenuSub, { onOpenChange, children: [
+  return isSmAndUp ? /* @__PURE__ */ jsxs38(Menu2.SubmenuRoot, { onOpenChange, children: [
     /* @__PURE__ */ jsxs38(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx286(MenuItemLabel, { children: label }),
       isNotNil22(description) ? /* @__PURE__ */ jsx286(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx286(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx286(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs38(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsx286(Menu2.Portal, { children: /* @__PURE__ */ jsx286(Menu2.Positioner, { children: /* @__PURE__ */ jsx286(SubMenuPopup, { $compact: compact, children }) }) })
+  ] }) : /* @__PURE__ */ jsxs38(Menu2.Group, { children: [
     /* @__PURE__ */ jsxs38(
       SubMenuTrigger,
       {
@@ -12421,16 +12450,18 @@ SubMenu.displayName = "SubMenu_UI";
 
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef19 } from "react";
-import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
+import { Menu as Menu3 } from "@base-ui/react/menu";
+import { isNil as isNil15 } from "@wistia/type-guards";
 import { jsx as jsx287 } from "react/jsx-runtime";
 var MenuItem = forwardRef19(
-  ({ onSelect = () => null, ...props }, ref) => {
+  ({ onSelect = () => null, closeOnClick = true, ...props }, ref) => {
     return /* @__PURE__ */ jsx287(
-      DropdownMenuItem2,
+      Menu3.Item,
       {
-        asChild: true,
-        onSelect,
-        children: /* @__PURE__ */ jsx287(
+        closeOnClick,
+        nativeButton: isNil15(props.href),
+        onClick: onSelect,
+        render: /* @__PURE__ */ jsx287(
           MenuItemButton,
           {
             ...props,
@@ -12445,15 +12476,15 @@ var MenuItem = forwardRef19(
 MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
-import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
+import { Menu as Menu4 } from "@base-ui/react/menu";
 import { jsx as jsx288 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx288(DropdownMenuRadioGroup, { ...props, children });
+  return /* @__PURE__ */ jsx288(Menu4.RadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
-import { DropdownMenuItemIndicator, DropdownMenuRadioItem } from "@radix-ui/react-dropdown-menu";
+import { Menu as Menu5 } from "@base-ui/react/menu";
 import { jsx as jsx289 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
@@ -12467,27 +12498,27 @@ var RadioMenuItem = ({
   ),
   ...props
 }) => {
-  const extraProps = onSelect ? { onSelect } : {};
+  const extraProps = onSelect ? { onClick: onSelect } : {};
   return /* @__PURE__ */ jsx289(
-    DropdownMenuRadioItem,
+    Menu5.RadioItem,
     {
+      nativeButton: true,
       ...extraProps,
-      asChild: true,
-      value,
-      children: /* @__PURE__ */ jsx289(
+      render: /* @__PURE__ */ jsx289(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx289(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx289(Menu5.RadioItemIndicator, { children: indicator })
         }
-      )
+      ),
+      value
     }
   );
 };
 RadioMenuItem.displayName = "RadioMenuItem_UI";
 
 // src/components/Menu/CheckboxMenuItem.tsx
-import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator as DropdownMenuItemIndicator2 } from "@radix-ui/react-dropdown-menu";
+import { Menu as Menu6 } from "@base-ui/react/menu";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 import { jsx as jsx290, jsxs as jsxs39 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
@@ -12552,18 +12583,19 @@ var CheckboxMenuItem = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx290(
-    DropdownMenuCheckboxItem,
+    Menu6.CheckboxItem,
     {
-      asChild: true,
       checked,
+      closeOnClick: false,
+      nativeButton: true,
       onCheckedChange,
-      onSelect,
-      children: /* @__PURE__ */ jsx290(
+      onClick: onSelect,
+      render: /* @__PURE__ */ jsx290(
         MenuItemButton,
         {
           ...props,
           leftIcon: isNotNil23(props.icon) ? props.icon : /* @__PURE__ */ jsx290(CheckboxIndicator, { checked }),
-          rightIcon: isNotNil23(props.icon) ? /* @__PURE__ */ jsx290(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx290(Icon, { type: "checkmark" }) }) : void 0
+          rightIcon: isNotNil23(props.icon) ? /* @__PURE__ */ jsx290(Menu6.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx290(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -12573,7 +12605,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 
 // src/components/Menu/FilterMenu.tsx
 import { Children as Children6, forwardRef as forwardRef20 } from "react";
-import { DropdownMenuItem as DropdownMenuItem3 } from "@radix-ui/react-dropdown-menu";
+import { Menu as BaseMenu2 } from "@base-ui/react/menu";
 import { jsx as jsx291, jsxs as jsxs40 } from "react/jsx-runtime";
 var FilterMenuItem = CheckboxMenuItem;
 var FilterMenu = forwardRef20(
@@ -12635,7 +12667,7 @@ var FilterMenu = forwardRef20(
           ),
           Children6.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx291(MenuItem, { disabled: true, children: "No results found" }),
           value.length > 0 && /* @__PURE__ */ jsx291(
-            DropdownMenuItem3,
+            BaseMenu2.Item,
             {
               disabled: true,
               style: { marginTop: "24px" },
@@ -12686,7 +12718,7 @@ var ContextMenu = ({
   const [isRightClicked, setIsRightClicked] = useState17(false);
   const [menuPosition, setMenuPosition] = useState17(position ?? { x: 0, y: 0 });
   useEffect16(() => {
-    if (isNil15(position)) {
+    if (isNil16(position)) {
       const onContextMenu = (event) => {
         event.preventDefault();
         setMenuPosition({ x: event.clientX, y: event.clientY });
@@ -13152,9 +13184,9 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-import { styled as styled64, css as css33 } from "styled-components";
+import { styled as styled64, css as css34 } from "styled-components";
 import { jsx as jsx301 } from "react/jsx-runtime";
-var horizontalBorderCss = css33`
+var horizontalBorderCss = css34`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
@@ -13163,7 +13195,7 @@ var horizontalBorderCss = css33`
   margin-left: var(--wui-divider-inset);
   margin-right: var(--wui-divider-inset);
 `;
-var verticalBorderCss = css33`
+var verticalBorderCss = css34`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
@@ -13206,7 +13238,7 @@ var Divider = ({
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { styled as styled65, css as css34 } from "styled-components";
+import { styled as styled65, css as css35 } from "styled-components";
 import { useState as useState18, useRef as useRef17 } from "react";
 import { Fragment as Fragment7, jsx as jsx302, jsxs as jsxs43 } from "react/jsx-runtime";
 var StyledInput = styled65(Input)`
@@ -13234,7 +13266,7 @@ var StyledInput = styled65(Input)`
     resize: none;
   }
 `;
-var editableStyles = css34`
+var editableStyles = css35`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -13335,7 +13367,7 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs43(Fragment7, { children: [
-    /* @__PURE__ */ jsx302(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx302(Tooltip2, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ jsx302(ScreenReaderOnly, { children: /* @__PURE__ */ jsx302(
       "button",
       {
@@ -13349,11 +13381,11 @@ var EditableHeading = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 import { useContext as useContext6, useRef as useRef18, forwardRef as forwardRef21 } from "react";
-import { styled as styled67, css as css35 } from "styled-components";
+import { styled as styled67, css as css36 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
-import { createContext as createContext7, useMemo as useMemo12, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
+import { createContext as createContext7, useMemo as useMemo12, useState as useState19, useCallback as useCallback17, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
 import { styled as styled66 } from "styled-components";
 import { jsx as jsx303 } from "react/jsx-runtime";
@@ -13424,7 +13456,7 @@ var EditableTextRoot = ({
   const value = isControlled ? controlledValue : internalValue;
   const generatedId = useId4();
   const computedId = isNonEmptyString6(id) ? id : `wistia-ui-editable-text-${generatedId}`;
-  const handleSetIsEditing = useCallback16(
+  const handleSetIsEditing = useCallback17(
     (editing) => {
       if (editing && !isEditing) {
         setOriginalValue(value);
@@ -13434,7 +13466,7 @@ var EditableTextRoot = ({
     },
     [isEditing, value, onEditingChange]
   );
-  const setValue = useCallback16(
+  const setValue = useCallback17(
     (newValue) => {
       if (!isControlled) {
         setInternalValue(newValue);
@@ -13512,14 +13544,14 @@ var StyledEditableTextDisplay = styled67.div`
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   ${({ $maxLines }) => {
   if (isNotNil26($maxLines)) {
-    return css35`
+    return css36`
         ${ellipsisStyle};
         ${lineClampCss($maxLines)};
       `;
   }
   return void 0;
 }}
-  ${({ $minLines }) => isNotNil26($minLines) && css35`
+  ${({ $minLines }) => isNotNil26($minLines) && css36`
       min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
     `}
   word-break: normal;
@@ -13847,7 +13879,7 @@ var EditableTextTrigger = ({
 // src/components/FeatureCard/FeatureCard.tsx
 import { useEffect as useEffect18, useState as useState20, useMemo as useMemo13 } from "react";
 import { styled as styled69 } from "styled-components";
-import { isNil as isNil16, isNotNil as isNotNil28 } from "@wistia/type-guards";
+import { isNil as isNil17, isNotNil as isNotNil28 } from "@wistia/type-guards";
 import { Fragment as Fragment8, jsx as jsx308, jsxs as jsxs46 } from "react/jsx-runtime";
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
@@ -13912,7 +13944,7 @@ var FeatureCard = ({
   const hasImage = isNotNil28(image);
   const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
   const iconPosition = useMemo13(() => {
-    if (isNil16(icon)) {
+    if (isNil17(icon)) {
       return "none";
     }
     if (isSmallContainer) {
@@ -14104,12 +14136,12 @@ var FeatureCardImage = ({
 };
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback17, useState as useState21 } from "react";
+import { useCallback as useCallback18, useState as useState21 } from "react";
 var useFormState = (action, initialData = {}) => {
   const [data, setData] = useState21(initialData);
   const [isPending, setIsPending] = useState21(false);
   const [error, setError] = useState21(null);
-  const formAction = useCallback17(
+  const formAction = useCallback18(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -14203,18 +14235,18 @@ var validateWithYup = (schema) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled71, css as css36 } from "styled-components";
+import { styled as styled71, css as css37 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil29, isNotUndefined as isNotUndefined13, isUndefined as isUndefined4 } from "@wistia/type-guards";
 import { jsx as jsx311, jsxs as jsxs48 } from "react/jsx-runtime";
-var inlineErrorStyles = css36`
+var inlineErrorStyles = css37`
   grid-template-rows: 1fr auto;
   grid-template-areas: 'label-description input' '. error';
 `;
-var inlineBaseGridAreaStyles = css36`
+var inlineBaseGridAreaStyles = css37`
   grid-template-rows: 1fr;
   grid-template-areas: 'label-description input';
 `;
-var blockGridErrorStyles = css36`
+var blockGridErrorStyles = css37`
   grid-template-rows: auto 1fr auto;
   grid-template-areas: 'label-description' 'input' 'error';
 `;
@@ -14411,7 +14443,7 @@ var RadioGroupContext = createContext8(null);
 var useRadioGroup = () => {
   return useContext14(RadioGroupContext);
 };
-var RadioGroup = ({
+var RadioGroup2 = ({
   children,
   name,
   onChange,
@@ -14429,28 +14461,28 @@ var RadioGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ jsx312(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx312(FormGroup, { ...props, children }) });
 };
-RadioGroup.displayName = "RadioGroup_UI";
+RadioGroup2.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled72, css as css37 } from "styled-components";
+import { styled as styled72, css as css38 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
 import { jsx as jsx313 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
-    return css37`
+    return css38`
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     `;
   }
   const gridMode = expandItems ? "auto-fit" : "auto-fill";
   const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
   if (maxColumns === "auto") {
-    return css37`
+    return css38`
       grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
     `;
   }
-  return css37`
+  return css38`
     /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
     --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
     --wui-grid-max-column-width: calc(
@@ -14507,8 +14539,8 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/PreviewCard/PreviewCard.tsx
-import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2 } from "@radix-ui/react-hover-card";
-import { styled as styled73, css as css38, keyframes as keyframes5 } from "styled-components";
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import { styled as styled73, css as css39, keyframes as keyframes5 } from "styled-components";
 import { jsx as jsx314, jsxs as jsxs49 } from "react/jsx-runtime";
 var previewCardOpen = keyframes5`
   from {
@@ -14530,26 +14562,26 @@ var previewCardClose = keyframes5`
     transform: scale(0.96);
   }
 `;
-var StyledContent2 = styled73(Content2)`
+var StyledPopup3 = styled73(BasePreviewCard.Popup)`
   --preview-card-animation-duration: var(--wui-motion-duration-03);
   --preview-card-animation-ease: var(--wui-motion-ease-out);
 
   z-index: var(--wui-zindex-popover);
-  transform-origin: var(--radix-hover-card-content-transform-origin);
+  transform-origin: var(--transform-origin);
   animation-duration: var(--preview-card-animation-duration);
   animation-timing-function: var(--preview-card-animation-ease);
   will-change: transform, opacity;
 
-  &[data-state='open'] {
+  &[data-open] {
     animation-name: ${previewCardOpen};
   }
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation-name: ${previewCardClose};
   }
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled, $paddingSize }) => !$unstyled && css38`
+  ${({ $unstyled, $paddingSize }) => !$unstyled && css39`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-${$paddingSize});
       max-width: var(--wui-preview-card-max-width, 320px);
@@ -14571,6 +14603,8 @@ var PreviewCard = ({
   closeDelay = 300,
   colorScheme = "inherit",
   forceOpen,
+  side,
+  align,
   ...props
 }) => {
   const style = {
@@ -14581,29 +14615,35 @@ var PreviewCard = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs49(
-    Root2,
-    {
-      closeDelay,
-      openDelay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsx314(Trigger2, { asChild: true, children: trigger }),
-        /* @__PURE__ */ jsx314(Portal, { children: /* @__PURE__ */ jsx314(
-          StyledContent2,
+  return /* @__PURE__ */ jsxs49(BasePreviewCard.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx314(
+      BasePreviewCard.Trigger,
+      {
+        closeDelay,
+        delay: openDelay,
+        render: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx314(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx314(
+      BasePreviewCard.Positioner,
+      {
+        align,
+        side,
+        sideOffset: 8,
+        children: /* @__PURE__ */ jsx314(
+          StyledPopup3,
           {
             $colorScheme: colorScheme,
             $paddingSize: paddingSize,
-            sideOffset: 8,
             ...props,
             $unstyled: unstyled,
             style,
             children: /* @__PURE__ */ jsx314("div", { children })
           }
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    ) })
+  ] });
 };
 PreviewCard.displayName = "PreviewCard_UI";
 
@@ -14835,17 +14875,17 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil31 } from "@wistia/type-guards";
-import { styled as styled78, css as css39 } from "styled-components";
+import { styled as styled78, css as css40 } from "styled-components";
 
 // src/components/List/ListItem.tsx
 import { styled as styled77 } from "styled-components";
-import { isNil as isNil17 } from "@wistia/type-guards";
+import { isNil as isNil18 } from "@wistia/type-guards";
 import { jsx as jsx318 } from "react/jsx-runtime";
 var ListItemComponent = styled77.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if (isNil17(children)) {
+  if (isNil18(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx318(ListItemComponent, { children });
@@ -14854,7 +14894,7 @@ ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 import { jsx as jsx319, jsxs as jsxs51 } from "react/jsx-runtime";
-var spacesStyle = css39`
+var spacesStyle = css40`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -14876,7 +14916,7 @@ var spacesStyle = css39`
     }
   }
 `;
-var commasStyle = css39`
+var commasStyle = css40`
   ${spacesStyle};
 
   li {
@@ -14886,7 +14926,7 @@ var commasStyle = css39`
     }
   }
 `;
-var slashesStyle = css39`
+var slashesStyle = css40`
   ${spacesStyle};
 
   li {
@@ -14897,7 +14937,7 @@ var slashesStyle = css39`
     }
   }
 `;
-var breadcrumbsStyle = css39`
+var breadcrumbsStyle = css40`
   ${spacesStyle};
 
   li {
@@ -14908,7 +14948,7 @@ var breadcrumbsStyle = css39`
     }
   }
 `;
-var unbulletedStyle = css39`
+var unbulletedStyle = css40`
   list-style: none;
   padding-left: 0;
 `;
@@ -15017,12 +15057,12 @@ import { styled as styled80 } from "styled-components";
 import ReactMarkdown from "react-markdown";
 
 // src/css/baseMarkdownCss.tsx
-import { css as css40 } from "styled-components";
+import { css as css41 } from "styled-components";
 var textSizeToTokenMap = {
   body2: "--wui-typography-body-2-size",
   body3: "--wui-typography-body-3-size"
 };
-var baseMarkdownCss = (textSize = "body2") => css40`
+var baseMarkdownCss = (textSize = "body2") => css41`
   --wui-markdown-base-unit: var(${textSizeToTokenMap[textSize]});
 
   font-size: var(--wui-markdown-base-unit);
@@ -15361,40 +15401,37 @@ Meter.displayName = "Meter_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { styled as styled86 } from "styled-components";
-import {
-  Root as DialogRoot,
-  Portal as DialogPortal,
-  Description as DialogDescription
-} from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { styled as styled85 } from "styled-components";
+import { Dialog as Dialog5 } from "@base-ui/react/dialog";
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import { styled as styled83 } from "styled-components";
-import { Title as DialogTitle } from "@radix-ui/react-dialog";
+import { styled as styled82 } from "styled-components";
+import { Dialog as Dialog2 } from "@base-ui/react/dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import { styled as styled82 } from "styled-components";
-import { Close as DialogClose } from "@radix-ui/react-dialog";
+import { Dialog } from "@base-ui/react/dialog";
 import { jsx as jsx323 } from "react/jsx-runtime";
-var CloseButton = styled82(DialogClose)`
-  align-self: start;
-`;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx323(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx323(
-    IconButton,
+  return /* @__PURE__ */ jsx323(
+    Dialog.Close,
     {
-      label: "Dismiss modal",
-      size: "sm",
-      variant: "ghost",
-      children: /* @__PURE__ */ jsx323(Icon, { type: "close" })
+      render: /* @__PURE__ */ jsx323(
+        IconButton,
+        {
+          label: "Dismiss modal",
+          size: "sm",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx323(Icon, { type: "close" })
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/components/Modal/ModalHeader.tsx
 import { jsx as jsx324, jsxs as jsxs53 } from "react/jsx-runtime";
-var Header = styled83.header`
+var Header = styled82.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
@@ -15402,7 +15439,7 @@ var Header = styled83.header`
   gap: var(--wui-space-01);
   justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
 
-  /* DialogTitle creates an h2 element which inherits some margin */
+  /* Dialog.Title creates an h2 element which inherits some margin */
   h2 {
     margin: 0;
     padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
@@ -15414,7 +15451,7 @@ var Header = styled83.header`
     top: var(--wui-space-03);
   }
 `;
-var Title = styled83(DialogTitle)`
+var Title = styled82(Dialog2.Title)`
   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);
@@ -15442,8 +15479,9 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled84, css as css41, keyframes as keyframes6 } from "styled-components";
-import { Content as DialogContent } from "@radix-ui/react-dialog";
+import { styled as styled83, css as css42, keyframes as keyframes6 } from "styled-components";
+import { Dialog as Dialog3 } from "@base-ui/react/dialog";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/components/Modal/constants.ts
 var DEFAULT_MODAL_WIDTH = "532px";
@@ -15491,7 +15529,7 @@ var modalExit = keyframes6`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-var centeredModalStyles = css41`
+var centeredModalStyles = css42`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -15503,11 +15541,11 @@ var centeredModalStyles = css41`
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var fixedTopModalStyles = css41`
+var fixedTopModalStyles = css42`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -15522,7 +15560,7 @@ var fixedTopModalStyles = css41`
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
@@ -15548,7 +15586,7 @@ var slideOutRight = keyframes6`
     transform: translateX(100%);
   }
 `;
-var rightSidePanelModalStyles = css41`
+var rightSidePanelModalStyles = css42`
   --wui-modal-screen-offset: var(--wui-space-05);
 
   height: calc(100vh - var(--wui-modal-screen-offset) * 2);
@@ -15557,7 +15595,7 @@ var rightSidePanelModalStyles = css41`
   animation: ${slideInRight} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
   transform-origin: right center;
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${slideOutRight} var(--wui-motion-duration-03) var(--wui-motion-ease-in);
   }
 `;
@@ -15566,7 +15604,7 @@ var positionStyleMap = {
   "fixed-top": fixedTopModalStyles,
   "right-side-panel": rightSidePanelModalStyles
 };
-var StyledModalContent = styled84(DialogContent)`
+var StyledModalContent = styled83(Dialog3.Popup)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -15594,7 +15632,7 @@ var StyledModalContent = styled84(DialogContent)`
   }
 `;
 var ModalContent = forwardRef25(
-  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", initialFocusRef, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ jsx325(
       StyledModalContent,
@@ -15602,6 +15640,7 @@ var ModalContent = forwardRef25(
         ref,
         $positionVariant: positionVariant,
         $width: width,
+        ...isNotNil34(initialFocusRef) ? { initialFocus: initialFocusRef } : {},
         ...props,
         children
       }
@@ -15610,8 +15649,8 @@ var ModalContent = forwardRef25(
 );
 
 // src/components/Modal/ModalOverlay.tsx
-import { DialogOverlay } from "@radix-ui/react-dialog";
-import { styled as styled85, keyframes as keyframes7 } from "styled-components";
+import { Dialog as Dialog4 } from "@base-ui/react/dialog";
+import { styled as styled84, keyframes as keyframes7 } from "styled-components";
 var backdropShow = keyframes7`
   from {
     opacity: 0;
@@ -15630,33 +15669,33 @@ var backdropHide = keyframes7`
     opacity: 0;
   }
 `;
-var ModalOverlay = styled85(DialogOverlay)`
+var ModalOverlay = styled84(Dialog4.Backdrop)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
   position: fixed;
   z-index: var(--wui-zindex-backdrop);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${backdropHide} var(--wui-motion-duration-02);
   }
 `;
 
 // src/components/Modal/Modal.tsx
 import { jsx as jsx326, jsxs as jsxs54 } from "react/jsx-runtime";
-var ModalHiddenDescription = styled86(DialogDescription)({ ...visuallyHiddenStyle });
-var ModalBody = styled86.div`
+var ModalHiddenDescription = styled85(Dialog5.Description)({ ...visuallyHiddenStyle });
+var ModalBody = styled85.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
   padding: 0 var(--wui-space-05);
 `;
-var ModalScrollArea = styled86.div`
+var ModalScrollArea = styled85.div`
   order: 2;
   max-height: 90vh;
   overflow-y: auto;
 `;
-var ModalFooter = styled86.footer`
+var ModalFooter = styled85.footer`
   padding: 0 var(--wui-space-05);
   order: 3;
 `;
@@ -15675,34 +15714,27 @@ var Modal = forwardRef26(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx326(
-      DialogRoot,
+      Dialog5.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil34(onRequestClose)) {
+          if (!open2 && isNotNil35(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs54(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs54(Dialog5.Portal, { children: [
           /* @__PURE__ */ jsx326(ModalOverlay, {}),
           /* @__PURE__ */ jsxs54(
             ModalContent,
             {
               ref,
-              onOpenAutoFocus: (event) => {
-                if (isNotNil34(initialFocusRef) && initialFocusRef.current) {
-                  event.preventDefault();
-                  requestAnimationFrame(() => {
-                    initialFocusRef.current?.focus();
-                  });
-                }
-              },
+              initialFocusRef,
               positionVariant,
               width,
               ...props,
               children: [
                 /* @__PURE__ */ jsx326(ModalScrollArea, { children: /* @__PURE__ */ jsx326(ModalBody, { children }) }),
-                isNotNil34(footer) ? /* @__PURE__ */ jsx326(ModalFooter, { children: footer }) : null,
+                isNotNil35(footer) ? /* @__PURE__ */ jsx326(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx326(
                   ModalHeader,
                   {
@@ -15745,20 +15777,28 @@ var ModalCallout = ({ title, image, children }) => {
 ModalCallout.displayName = "ModalCallout_UI";
 
 // src/components/Popover/Popover.tsx
-import { Root as Root3, Trigger as Trigger3, Portal as Portal2, Content as Content3, Close } from "@radix-ui/react-popover";
-import { styled as styled88, css as css43 } from "styled-components";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { styled as styled87, css as css44 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil35 } from "@wistia/type-guards";
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil35(onOpenChange) && isNotNil35(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil36(onOpenChange) && isNotNil36(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
-import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled87, css as css42, keyframes as keyframes8 } from "styled-components";
+import { Popover as Popover4 } from "@base-ui/react/popover";
+import { styled as styled86, css as css43, keyframes as keyframes8 } from "styled-components";
 import { jsx as jsx328, jsxs as jsxs56 } from "react/jsx-runtime";
-var StyledPath = styled87.path`
+var StyledArrowSvg = styled86.svg`
+  /* Override Base UI's inline top positioning and rotate the arrow to match Radix behavior.
+     Radix applied rotate(180deg) so the circle sits near the trigger and the stalk extends
+     down toward the popup. Base UI does not rotate the arrow automatically. */
+  top: 0 !important;
+  transform: rotate(180deg);
+  transform-origin: center 0;
+`;
+var StyledPath = styled86.path`
   fill: var(--wui-color-border-secondary);
 `;
 var circleAnimation = keyframes8`
@@ -15769,7 +15809,7 @@ var circleAnimation = keyframes8`
     opacity: 0;
   }
 `;
-var StyledCircle = styled87.circle`
+var StyledCircle = styled86.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -15790,56 +15830,61 @@ var StyledCircle = styled87.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css42`
+    ${({ $isAnimated }) => $isAnimated && css43`
         animation-name: ${circleAnimation};
       `}
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx328(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs56(
-    "svg",
+  return /* @__PURE__ */ jsx328(
+    Popover4.Arrow,
     {
-      fill: "none",
-      height: "56",
-      viewBox: "0 0 48 56",
-      width: "48",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx328(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
-        /* @__PURE__ */ jsx328(
-          StyledCircle,
-          {
-            $isAnimated: isAnimated,
-            cx: "24",
-            cy: "32",
-            "data-wui-popover-arrow-inner-circle": true,
-            r: "10",
-            strokeWidth: "4"
-          }
-        ),
-        /* @__PURE__ */ jsx328(
-          StyledCircle,
-          {
-            $isAnimated: isAnimated,
-            cx: "24",
-            cy: "32",
-            "data-wui-popover-arrow-outer-circle": true,
-            r: "20",
-            strokeWidth: "8"
-          }
-        )
-      ]
+      render: /* @__PURE__ */ jsxs56(
+        StyledArrowSvg,
+        {
+          fill: "none",
+          height: "56",
+          viewBox: "0 0 48 56",
+          width: "48",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx328(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
+            /* @__PURE__ */ jsx328(
+              StyledCircle,
+              {
+                $isAnimated: isAnimated,
+                cx: "24",
+                cy: "32",
+                "data-wui-popover-arrow-inner-circle": true,
+                r: "10",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsx328(
+              StyledCircle,
+              {
+                $isAnimated: isAnimated,
+                cx: "24",
+                cy: "32",
+                "data-wui-popover-arrow-outer-circle": true,
+                r: "20",
+                strokeWidth: "8"
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
 import { jsx as jsx329, jsxs as jsxs57 } from "react/jsx-runtime";
-var StyledContent3 = styled88(Content3)`
+var StyledPopup4 = styled87(BasePopover.Popup)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css43`
+  ${({ $unstyled }) => !$unstyled && css44`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -15850,13 +15895,17 @@ var StyledContent3 = styled88(Content3)`
       overflow: auto;
     `}
 
+  ${({ $withArrow }) => $withArrow && css44`
+      overflow: visible;
+    `}
+
   [data-wui-popover-close] {
     position: absolute;
     top: var(--wui-space-02);
     right: var(--wui-space-02);
   }
 `;
-var Popover = ({
+var Popover5 = ({
   children,
   trigger,
   isOpen = false,
@@ -15869,63 +15918,75 @@ var Popover = ({
   isAnimated = false,
   colorScheme = "inherit",
   style,
+  side,
+  align,
   ...props
 }) => {
-  const sideOffset = withArrow ? -24 : 8;
+  const sideOffset = withArrow ? 32 : 8;
   const mergedStyle = {
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight,
     ...style
   };
-  return /* @__PURE__ */ jsxs57(Root3, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx329(Trigger3, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx329(Portal2, { children: /* @__PURE__ */ jsxs57(
-      StyledContent3,
+  return /* @__PURE__ */ jsxs57(BasePopover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ jsx329(BasePopover.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx329(BasePopover.Portal, { children: /* @__PURE__ */ jsx329(
+      BasePopover.Positioner,
       {
-        $colorScheme: colorScheme,
+        align,
+        side,
         sideOffset,
-        ...props,
-        $unstyled: unstyled,
-        style: mergedStyle,
-        children: [
-          !hideCloseButton && /* @__PURE__ */ jsx329(Close, { asChild: true, children: /* @__PURE__ */ jsx329(
-            IconButton,
-            {
-              "data-wui-popover-close": true,
-              label: "Close",
-              variant: "ghost",
-              children: /* @__PURE__ */ jsx329(Icon, { type: "close" })
-            }
-          ) }),
-          withArrow ? /* @__PURE__ */ jsx329(PopoverArrow, { isAnimated }) : null,
-          /* @__PURE__ */ jsx329("div", { children })
-        ]
+        children: /* @__PURE__ */ jsxs57(
+          StyledPopup4,
+          {
+            $colorScheme: colorScheme,
+            ...props,
+            $unstyled: unstyled,
+            $withArrow: withArrow,
+            style: mergedStyle,
+            children: [
+              !hideCloseButton && /* @__PURE__ */ jsx329(
+                BasePopover.Close,
+                {
+                  render: /* @__PURE__ */ jsx329(
+                    IconButton,
+                    {
+                      "data-wui-popover-close": true,
+                      label: "Close",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsx329(Icon, { type: "close" })
+                    }
+                  )
+                }
+              ),
+              withArrow ? /* @__PURE__ */ jsx329(PopoverArrow, { isAnimated }) : null,
+              /* @__PURE__ */ jsx329("div", { children })
+            ]
+          }
+        )
       }
     ) })
   ] });
 };
-Popover.displayName = "Popover_UI";
+Popover5.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled89 } from "styled-components";
-import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { styled as styled88 } from "styled-components";
+import { Progress } from "@base-ui/react/progress";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 import { jsx as jsx330, jsxs as jsxs58 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled89.div`
+var ProgressBarWrapper = styled88.div`
   --progress-bar-height: 8px;
 
   display: flex;
   align-items: center;
   gap: var(--wui-space-02);
 `;
-var getTranslateValue = (progress, max) => {
-  if (progress === 0) {
-    return "translateX(-101%)";
-  }
-  const progressPercentage = progress / max * 100;
-  return `translateX(-${100 - progressPercentage}%)`;
-};
-var ProgressBarLabel = styled89.div`
+var StyledTrack = styled88(Progress.Track)`
+  height: 100%;
+  overflow: hidden;
+`;
+var ProgressBarLabel = styled88.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -15933,17 +15994,15 @@ var ProgressBarLabel = styled89.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled89(ProgressIndicator)`
+var StyledProgressIndicator = styled88(Progress.Indicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
-  width: 100%;
-  height: 100%;
+  display: block;
   border-top-right-radius: var(--wui-border-radius-rounded);
   border-bottom-right-radius: var(--wui-border-radius-rounded);
-  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
-  transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
+  transition: width 660ms cubic-bezier(0.65, 0, 0.35, 1);
 `;
-var StyledProgressBar = styled89(ProgressRoot)`
+var StyledProgressBar = styled88(Progress.Root)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -15965,25 +16024,19 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs58(ProgressBarWrapper, { children: [
-    isNotNil36(labelLeft) ? /* @__PURE__ */ jsx330(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil37(labelLeft) ? /* @__PURE__ */ jsx330(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx330(
       StyledProgressBar,
       {
         $colorScheme: colorScheme,
+        getAriaValueText: (_formattedValue, value) => value != null ? `${Math.round(value / max * 100)}%` : "indeterminate progress",
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx330(
-          StyledProgressIndicator,
-          {
-            $colorScheme: colorScheme,
-            $max: max,
-            $progress: progress
-          }
-        )
+        children: /* @__PURE__ */ jsx330(StyledTrack, { children: /* @__PURE__ */ jsx330(StyledProgressIndicator, { $colorScheme: colorScheme }) })
       }
     ),
-    isNotNil36(labelRight) ? /* @__PURE__ */ jsx330(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil37(labelRight) ? /* @__PURE__ */ jsx330(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -15991,17 +16044,17 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId6 } from "react";
-import { styled as styled90, css as css44 } from "styled-components";
+import { styled as styled89, css as css45 } from "styled-components";
 import { jsx as jsx331, jsxs as jsxs59 } from "react/jsx-runtime";
-var sizeSmall2 = css44`
+var sizeSmall2 = css45`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
 `;
-var sizeMedium2 = css44`
+var sizeMedium2 = css45`
   --wui-radio-size: 16px;
   --wui-radio-icon-size: 8px;
 `;
-var sizeLarge2 = css44`
+var sizeLarge2 = css45`
   --wui-radio-size: 20px;
   --wui-radio-icon-size: 10px;
 `;
@@ -16014,7 +16067,7 @@ var getSizeCss3 = (size) => {
   }
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled90.div`
+var StyledRadioWrapper = styled89.div`
   --wui-radio-background-color: var(--wui-color-bg-surface);
   --wui-radio-border-color: var(--wui-color-border-secondary);
   --wui-radio-icon-color: transparent;
@@ -16048,7 +16101,7 @@ var StyledRadioWrapper = styled90.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled90.div`
+var StyledRadioInput = styled89.div`
   ${({ $size }) => getSizeCss3($size)}
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
@@ -16074,10 +16127,10 @@ var StyledRadioInput = styled90.div`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledHiddenRadioInput = styled90.input`
+var StyledHiddenRadioInput = styled89.input`
   ${visuallyHiddenStyle}
 `;
-var Radio = forwardRef27(
+var Radio2 = forwardRef27(
   ({
     checked,
     disabled = false,
@@ -16139,24 +16192,24 @@ var Radio = forwardRef27(
     );
   }
 );
-Radio.displayName = "Radio_UI";
+Radio2.displayName = "Radio_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId7 } from "react";
-import { styled as styled91, css as css45 } from "styled-components";
+import { styled as styled90, css as css46 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
 import { jsx as jsx332, jsxs as jsxs60 } from "react/jsx-runtime";
-var checkedStyles = css45`
+var checkedStyles = css46`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-info);
   --wui-color-text: var(--wui-color-text-info);
   --wui-color-text-secondary: var(--wui-color-text-info);
 `;
-var disabledStyles = css45`
+var disabledStyles = css46`
   --wui-radio-card-border-color: var(--wui-color-border-disabled);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
   --wui-radio-card-cursor: not-allowed;
@@ -16164,10 +16217,10 @@ var disabledStyles = css45`
   --wui-color-text: var(--wui-color-text-disabled);
   --wui-color-text-secondary: var(--wui-color-text-disabled);
 `;
-var focusStyles = css45`
+var focusStyles = css46`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
-var imageCoverStyles = css45`
+var imageCoverStyles = css46`
   --wui-radio-card-image-inset: 0px;
   --wui-radio-card-border-width: 0px;
   --wui-inset-shadow-width: 1px;
@@ -16198,7 +16251,7 @@ var imageCoverStyles = css45`
     transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   }
 `;
-var StyledCard2 = styled91.label`
+var StyledCard2 = styled90.label`
   --wui-radio-card-border-color: var(--wui-color-border-secondary);
   --wui-radio-card-background-color: var(--wui-color-bg-surface);
   --wui-radio-card-cursor: pointer;
@@ -16252,7 +16305,7 @@ var StyledCard2 = styled91.label`
     }
   }
 `;
-var StyledHiddenInput = styled91.input`
+var StyledHiddenInput = styled90.input`
   ${visuallyHiddenStyle}
 `;
 var RadioCardRoot = forwardRef28(
@@ -16309,12 +16362,12 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { styled as styled93 } from "styled-components";
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+import { styled as styled92 } from "styled-components";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import { styled as styled92 } from "styled-components";
-var RadioCardIndicator = styled92.div`
+import { styled as styled91 } from "styled-components";
+var RadioCardIndicator = styled91.div`
   --wui-radio-card-indicator-size: 14px;
   --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
   --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
@@ -16364,21 +16417,21 @@ RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import { jsx as jsx333, jsxs as jsxs61 } from "react/jsx-runtime";
-var StyledCardContent = styled93.div`
+var StyledCardContent = styled92.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-var StyledCardIcon = styled93.div`
+var StyledCardIcon = styled92.div`
   display: contents;
 `;
-var StyledGatedIcon = styled93.div`
+var StyledGatedIcon = styled92.div`
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 1;
 `;
-var StyledIndicatorContainer = styled93.div`
+var StyledIndicatorContainer = styled92.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
@@ -16391,7 +16444,7 @@ var RadioCardDefaultLayout = ({
   isGated = false
 }) => {
   return /* @__PURE__ */ jsxs61(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx333(StyledIndicatorContainer, { $hasIcon: isNotNil37(icon), children: /* @__PURE__ */ jsx333(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx333(StyledIndicatorContainer, { $hasIcon: isNotNil38(icon), children: /* @__PURE__ */ jsx333(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     isGated ? /* @__PURE__ */ jsx333(StyledGatedIcon, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx333(
       Icon,
       {
@@ -16401,15 +16454,15 @@ var RadioCardDefaultLayout = ({
       }
     ) }) : null,
     /* @__PURE__ */ jsxs61(Stack, { gap: "space-02", children: [
-      isNotNil37(icon) && /* @__PURE__ */ jsx333(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil38(icon) && /* @__PURE__ */ jsx333(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs61(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil37(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil38(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil37(label) && /* @__PURE__ */ jsx333(Text, { variant: "label3", children: /* @__PURE__ */ jsx333("strong", { children: label }) }),
-            isNotNil37(description) && /* @__PURE__ */ jsx333(
+            isNotNil38(label) && /* @__PURE__ */ jsx333(Text, { variant: "label3", children: /* @__PURE__ */ jsx333("strong", { children: label }) }),
+            isNotNil38(description) && /* @__PURE__ */ jsx333(
               Text,
               {
                 prominence: "secondary",
@@ -16426,8 +16479,8 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import { styled as styled94 } from "styled-components";
-var RadioCardChildrenContainer = styled94.div`
+import { styled as styled93 } from "styled-components";
+var RadioCardChildrenContainer = styled93.div`
   flex: 1 1 auto;
 `;
 
@@ -16487,50 +16540,50 @@ var RadioCardImage = forwardRef30(
 RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef22, useState as useState24 } from "react";
-import { styled as styled95 } from "styled-components";
+import { forwardRef as forwardRef31, useCallback as useCallback19, useEffect as useEffect21, useMemo as useMemo15, useRef as useRef22, useState as useState24 } from "react";
+import { styled as styled94 } from "styled-components";
 import { throttle } from "throttle-debounce";
 import { jsx as jsx336, jsxs as jsxs62 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
-var Container10 = styled95.div`
+var Container10 = styled94.div`
   overflow: hidden;
   position: relative;
   flex: 1 1 auto;
 `;
-var ScrollContainer = styled95.div`
+var ScrollContainer = styled94.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
-var Shadow = styled95.div`
+var Shadow = styled94.div`
   pointer-events: none;
   position: absolute;
   transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
   box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
   z-index: 1;
 `;
-var ShadowAtTop = styled95(Shadow)`
+var ShadowAtTop = styled94(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
   height: 0;
   left: 0;
   right: 0;
   top: 0;
 `;
-var ShadowAtBottom = styled95(Shadow)`
+var ShadowAtBottom = styled94(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
   bottom: 0;
   height: 0;
   left: 0;
   right: 0;
 `;
-var ShadowAtLeft = styled95(Shadow)`
+var ShadowAtLeft = styled94(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
   bottom: 0;
   left: 0;
   top: 0;
   width: 0;
 `;
-var ShadowAtRight = styled95(Shadow)`
+var ShadowAtRight = styled94(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
   bottom: 0;
   right: 0;
@@ -16547,7 +16600,7 @@ var ScrollArea = forwardRef31(
       canScrollRight: false
     });
     const scrollContainerRef = mergeRefs([scrollContainerRefInternal, forwardedRef]);
-    const updateShadows = useCallback18(() => {
+    const updateShadows = useCallback19(() => {
       const scrollContainer = scrollContainerRefInternal.current;
       if (!scrollContainer) {
         return;
@@ -16560,7 +16613,7 @@ var ScrollArea = forwardRef31(
       });
     }, []);
     const throttledUpdateShadows = useMemo15(() => throttle(100, updateShadows), [updateShadows]);
-    const onScrollScrollContainer = useCallback18(
+    const onScrollScrollContainer = useCallback19(
       (event) => {
         onScroll?.(event);
         throttledUpdateShadows();
@@ -16592,9 +16645,9 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled97, css as css47 } from "styled-components";
-import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
-import { isNil as isNil18 } from "@wistia/type-guards";
+import { styled as styled96, css as css48 } from "styled-components";
+import { ToggleGroup as ToggleGroup2 } from "@base-ui/react/toggle-group";
+import { isNil as isNil19 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState25 } from "react";
@@ -16630,7 +16683,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled96, css as css46 } from "styled-components";
+import { styled as styled95, css as css47 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -16647,12 +16700,12 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { jsx as jsx338 } from "react/jsx-runtime";
-var selectedItemIndicatorStyles = css46`
+var selectedItemIndicatorStyles = css47`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = styled96.div`
+var SelectedItemIndicatorDiv = styled95.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -16679,7 +16732,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx339, jsxs as jsxs63 } from "react/jsx-runtime";
-var segmentedControlStyles = css47`
+var segmentedControlStyles = css48`
   ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
   ${({ $colorScheme }) => $colorScheme !== "nav" && `--wui-color-text-selected: var(--wui-color-text-link);`}
 
@@ -16693,7 +16746,7 @@ var segmentedControlStyles = css47`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled97(ToggleGroupRoot2)`
+var StyledSegmentedControl = styled96(ToggleGroup2)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef32(
@@ -16706,7 +16759,7 @@ var SegmentedControl = forwardRef32(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil18(children)) {
+    if (isNil19(children)) {
       return null;
     }
     return /* @__PURE__ */ jsx339(
@@ -16716,11 +16769,13 @@ var SegmentedControl = forwardRef32(
         $colorScheme: colorScheme,
         $fullWidth: fullWidth,
         disabled,
-        loop: true,
-        onValueChange: onSelectedValueChange,
-        rovingFocus: true,
-        type: "single",
-        value: selectedValue,
+        loopFocus: true,
+        onValueChange: (newValue) => {
+          if (newValue.length > 0 && newValue[0] !== void 0) {
+            onSelectedValueChange(newValue[0]);
+          }
+        },
+        value: [selectedValue],
         ...props,
         children: /* @__PURE__ */ jsx339(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs63(SelectedItemStyleProvider, { children: [
           children,
@@ -16734,12 +16789,12 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect22, useRef as useRef23 } from "react";
-import { styled as styled98, css as css48 } from "styled-components";
-import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { styled as styled97, css as css49 } from "styled-components";
+import { Toggle as Toggle2 } from "@base-ui/react/toggle";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 import { jsxs as jsxs64 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css48`
-  all: unset; /* ToggleGroupItem is a button element */
+var segmentedControlItemStyles = css49`
+  all: unset;
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
   color: var(--wui-color-text-secondary);
@@ -16773,10 +16828,11 @@ var segmentedControlItemStyles = css48`
   /* note: react-toggle-group uses 'aria-selected' and react-tabs uses "active" */
 
   /* we can't style off of 'data-state' since that gets overridden when wrapped in a Tooltip */
-  &:hover:not([aria-checked='true'], [aria-selected='true']) {
+  &:hover:not([aria-pressed='true'], [aria-checked='true'], [aria-selected='true']) {
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 
+  &[aria-pressed='true'],
   &[aria-checked='true'],
   &[aria-selected='true'] {
     color: var(--wui-color-segmented-color-text-override, var(--wui-color-text-selected));
@@ -16806,7 +16862,7 @@ var segmentedControlItemStyles = css48`
     }
   }
 `;
-var StyledSegmentedControlItem = styled98(ToggleGroupItem2)`
+var StyledSegmentedControlItem = styled97(Toggle2)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef33(
@@ -16817,8 +16873,8 @@ var SegmentedControlItem = forwardRef33(
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
       const target = event.target;
-      const { state } = target.dataset;
-      if (state === "on") {
+      const isPressed = target.getAttribute("aria-pressed") === "true";
+      if (isPressed) {
         event.preventDefault();
       }
     };
@@ -16852,8 +16908,8 @@ var SegmentedControlItem = forwardRef33(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil38(label),
-        "aria-label": isNotNil38(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil39(label),
+        "aria-label": isNotNil39(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -16868,20 +16924,11 @@ var SegmentedControlItem = forwardRef33(
 SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 
 // 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 forwardRef34 } from "react";
-import { styled as styled99, css as css49 } from "styled-components";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Children as Children11, forwardRef as forwardRef34, isValidElement as isValidElement5 } from "react";
+import { styled as styled98, css as css50 } from "styled-components";
 import { jsx as jsx340, jsxs as jsxs65 } from "react/jsx-runtime";
-var StyledTrigger2 = styled99(Trigger4)`
+var StyledTrigger2 = styled98(BaseSelect.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -16927,7 +16974,7 @@ var StyledTrigger2 = styled99(Trigger4)`
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent4 = styled99(Content4)`
+var StyledPopup5 = styled98(BaseSelect.Popup)`
   --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);
@@ -16941,25 +16988,47 @@ var StyledContent4 = styled99(Content4)`
   border-radius: var(--wui-select-content-border-radius);
   box-shadow: var(--wui-elevation-01);
   padding: var(--wui-select-option-padding);
-  min-width: var(--radix-select-trigger-width);
-  max-height: var(--radix-select-content-available-height);
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
   z-index: var(--wui-zindex-select);
 
   [role='separator'] {
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css49`
+var scrollButtonStyles = css50`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var StyledScrollDownButton = styled99(ScrollDownButton)`
+var StyledScrollDownArrow = styled98(BaseSelect.ScrollDownArrow)`
   ${scrollButtonStyles}
 `;
-var StyledScrollUpButton = styled99(ScrollUpButton)`
+var StyledScrollUpArrow = styled98(BaseSelect.ScrollUpArrow)`
   ${scrollButtonStyles}
 `;
+var collectItemLabels = (children) => {
+  const items = [];
+  Children11.forEach(children, (child) => {
+    if (!isValidElement5(child)) return;
+    const childProps = child.props;
+    const { value, selectedDisplayValue, children: childChildren, textValue } = childProps;
+    if (typeof value === "string") {
+      if (selectedDisplayValue !== void 0 && selectedDisplayValue !== null) {
+        items.push({ value, label: selectedDisplayValue });
+      } else if (typeof childChildren === "string") {
+        items.push({ value, label: childChildren });
+      } else if (typeof textValue === "string") {
+        items.push({ value, label: textValue });
+      }
+      return;
+    }
+    if (childChildren !== void 0 && childChildren !== null) {
+      items.push(...collectItemLabels(childChildren));
+    }
+  });
+  return items;
+};
 var Select = forwardRef34(
   ({
     colorScheme = "inherit",
@@ -16972,15 +17041,17 @@ var Select = forwardRef34(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
+    const items = collectItemLabels(children);
     const rootProps = {
       ...props,
+      items,
       onOpenChange,
       onValueChange: onChange
     };
     if (forceOpen) {
       rootProps["open"] = true;
     }
-    return /* @__PURE__ */ jsxs65(Root4, { ...rootProps, children: [
+    return /* @__PURE__ */ jsxs65(BaseSelect.Root, { ...rootProps, children: [
       /* @__PURE__ */ jsxs65(
         StyledTrigger2,
         {
@@ -16989,7 +17060,7 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx340(Value, { placeholder }),
+            /* @__PURE__ */ jsx340(BaseSelect.Value, { placeholder }),
             /* @__PURE__ */ jsx340(
               Icon,
               {
@@ -17000,28 +17071,29 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx340(Portal3, { children: /* @__PURE__ */ jsxs65(
-        StyledContent4,
+      /* @__PURE__ */ jsx340(BaseSelect.Portal, { children: /* @__PURE__ */ jsx340(
+        BaseSelect.Positioner,
         {
-          position: "popper",
+          align: "start",
+          alignItemWithTrigger: false,
           sideOffset: 8,
-          children: [
-            /* @__PURE__ */ jsx340(StyledScrollUpButton, { children: /* @__PURE__ */ jsx340(
+          children: /* @__PURE__ */ jsxs65(StyledPopup5, { children: [
+            /* @__PURE__ */ jsx340(StyledScrollUpArrow, { children: /* @__PURE__ */ jsx340(
               Icon,
               {
                 size: "sm",
                 type: "caret-up"
               }
             ) }),
-            /* @__PURE__ */ jsx340(Viewport, { children }),
-            /* @__PURE__ */ jsx340(StyledScrollDownButton, { children: /* @__PURE__ */ jsx340(
+            children,
+            /* @__PURE__ */ jsx340(StyledScrollDownArrow, { children: /* @__PURE__ */ jsx340(
               Icon,
               {
                 size: "sm",
                 type: "caret-down"
               }
             ) })
-          ]
+          ] })
         }
       ) })
     ] });
@@ -17030,12 +17102,12 @@ var Select = forwardRef34(
 Select.displayName = "Select_UI";
 
 // src/components/Select/SelectOption.tsx
-import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
+import { Select as Select2 } from "@base-ui/react/select";
 import { forwardRef as forwardRef35 } from "react";
-import { styled as styled100 } from "styled-components";
-import { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { styled as styled99 } from "styled-components";
+import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 import { jsx as jsx341, jsxs as jsxs66 } from "react/jsx-runtime";
-var StyledItem = styled100(Item)`
+var StyledItem = styled99(Select2.Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -17062,19 +17134,21 @@ var StyledItem = styled100(Item)`
   }
 `;
 var SelectOption = forwardRef35(
-  ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
+  ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", textValue, ...props }, forwardedRef) => {
+    const label = typeof children === "string" ? children : textValue;
     return /* @__PURE__ */ jsxs66(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
+        ...label != null ? { label } : {},
         children: [
-          isNotNil39(selectedDisplayValue) ? /* @__PURE__ */ jsxs66("div", { children: [
+          isNotNil40(selectedDisplayValue) ? /* @__PURE__ */ jsxs66("div", { children: [
             children,
-            /* @__PURE__ */ jsx341("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx341(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx341(ItemText, { children }),
-          /* @__PURE__ */ jsx341(ItemIndicator, { children: /* @__PURE__ */ jsx341(
+            /* @__PURE__ */ jsx341("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx341(Select2.ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx341(Select2.ItemText, { children }),
+          /* @__PURE__ */ jsx341(Select2.ItemIndicator, { children: /* @__PURE__ */ jsx341(
             Icon,
             {
               size: "md",
@@ -17089,14 +17163,14 @@ var SelectOption = forwardRef35(
 SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
-import { Group, Label as Label3 } from "@radix-ui/react-select";
-import { styled as styled101 } from "styled-components";
+import { Select as Select3 } from "@base-ui/react/select";
+import { styled as styled100 } from "styled-components";
 import { jsx as jsx342, jsxs as jsxs67 } from "react/jsx-runtime";
-var StyledLabel4 = styled101(Label3)`
+var StyledLabel4 = styled100(Select3.GroupLabel)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs67(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs67(Select3.Group, { ...props, children: [
     /* @__PURE__ */ jsx342(StyledLabel4, { children: /* @__PURE__ */ jsx342(
       Heading,
       {
@@ -17110,16 +17184,11 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Slider/Slider.tsx
-import {
-  Root as RadixSliderRoot,
-  Track as RadixSliderTrack,
-  Range as RadixSliderRange,
-  Thumb as RadixSliderThumb
-} from "@radix-ui/react-slider";
-import { styled as styled102 } from "styled-components";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { styled as styled101 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
 import { jsx as jsx343, jsxs as jsxs68 } from "react/jsx-runtime";
-var SliderContainer = styled102.div`
+var SliderContainer = styled101.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
   --wui-slider-range-color: var(--wui-color-bg-fill);
@@ -17135,28 +17204,28 @@ var SliderContainer = styled102.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = styled102(RadixSliderRoot)`
-  position: relative;
+var StyledSliderRoot = styled101(BaseSlider.Root)`
+  width: 100%;
+`;
+var StyledSliderControl = styled101(BaseSlider.Control)`
   display: flex;
   align-items: center;
   user-select: none;
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = styled102(RadixSliderTrack)`
+var StyledSliderTrack = styled101(BaseSlider.Track)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
-  flex-grow: 1;
+  width: 100%;
   height: 6px;
   position: relative;
 `;
-var StyledSliderRange = styled102(RadixSliderRange)`
+var StyledSliderIndicator = styled101(BaseSlider.Indicator)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
-  height: 100%;
-  position: absolute;
 `;
-var StyledSliderThumb = styled102(RadixSliderThumb)`
+var StyledSliderThumb = styled101(BaseSlider.Thumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -17183,7 +17252,7 @@ var StyledSliderThumb = styled102(RadixSliderThumb)`
     outline-width: 2px;
   }
 `;
-var Slider = ({
+var Slider2 = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
   disabled = false,
@@ -17191,7 +17260,7 @@ var Slider = ({
   max = 100,
   min = 0,
   onChange,
-  onValueCommit,
+  onValueCommitted,
   step = 1,
   value,
   "data-testid": dataTestId = "ui-slider",
@@ -17205,7 +17274,12 @@ var Slider = ({
   const values = value ?? initialValue;
   const handleValueChange = (newValue) => {
     if (onChange) {
-      onChange(newValue);
+      onChange(typeof newValue === "number" ? [newValue] : [...newValue]);
+    }
+  };
+  const handleValueCommitted = (newValue) => {
+    if (onValueCommitted) {
+      onValueCommitted(typeof newValue === "number" ? [newValue] : [...newValue]);
     }
   };
   return /* @__PURE__ */ jsx343(
@@ -17213,7 +17287,7 @@ var Slider = ({
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs68(
+      children: /* @__PURE__ */ jsx343(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -17223,11 +17297,11 @@ var Slider = ({
           max,
           min,
           onValueChange: handleValueChange,
+          onValueCommitted: handleValueCommitted,
           step,
-          ...onValueCommit ? { onValueCommit } : {},
           ...value ? { value } : {},
-          children: [
-            /* @__PURE__ */ jsx343(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx343(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+          children: /* @__PURE__ */ jsx343(StyledSliderControl, { children: /* @__PURE__ */ jsxs68(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: [
+            /* @__PURE__ */ jsx343(StyledSliderIndicator, { "data-testid": `${dataTestId}-range` }),
             values.map((_, index) => /* @__PURE__ */ jsx343(
               StyledSliderThumb,
               {
@@ -17235,20 +17309,20 @@ var Slider = ({
               },
               `thumb-${index}`
             ))
-          ]
+          ] }) })
         }
       )
     }
   );
 };
-Slider.displayName = "Slider_UI";
+Slider2.displayName = "Slider_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-import { styled as styled103 } from "styled-components";
-import { isNotNil as isNotNil40 } from "@wistia/type-guards";
+import { styled as styled102 } from "styled-components";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 import { cloneElement as cloneElement9 } from "react";
 import { jsx as jsx344, jsxs as jsxs69 } from "react/jsx-runtime";
-var StyledSplitButton = styled103.span`
+var StyledSplitButton = styled102.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
 
@@ -17259,7 +17333,7 @@ var StyledSplitButton = styled103.span`
       padding-right: 0;
     }
 
-    > [data-wui-button='true']:last-child {
+    > [data-wui-button='true']:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       display: inline-flex;
@@ -17292,7 +17366,7 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil40(menuItems) && /* @__PURE__ */ jsx344(
+    isNotNil41(menuItems) && /* @__PURE__ */ jsx344(
       Menu,
       {
         ...menuProps,
@@ -17311,31 +17385,31 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil40(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil41(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled104, css as css50 } from "styled-components";
+import { styled as styled103, css as css51 } from "styled-components";
 import { jsx as jsx345 } from "react/jsx-runtime";
-var StyledTable = styled104.table`
+var StyledTable = styled103.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && css50`
+  ${({ $divided }) => $divided && css51`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && css50`
+  ${({ $striped }) => $striped && css51`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css50`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css51`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -17361,7 +17435,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import { styled as styled105 } from "styled-components";
+import { styled as styled104 } from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext11 } from "react";
@@ -17369,7 +17443,7 @@ var TableSectionContext = createContext11(null);
 
 // src/components/Table/TableBody.tsx
 import { jsx as jsx346 } from "react/jsx-runtime";
-var StyledTableBody = styled105.tbody`
+var StyledTableBody = styled104.tbody`
   width: 100%;
 `;
 var TableBody = ({ children, ...props }) => {
@@ -17378,20 +17452,20 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled106, css as css51 } from "styled-components";
+import { styled as styled105, css as css52 } from "styled-components";
 import { jsx as jsx347 } from "react/jsx-runtime";
-var sharedStyles = css51`
+var sharedStyles = css52`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled106.th`
+var StyledTh = styled105.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = styled106.td`
+var StyledTd = styled105.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -17406,9 +17480,9 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-import { styled as styled107 } from "styled-components";
+import { styled as styled106 } from "styled-components";
 import { jsx as jsx348 } from "react/jsx-runtime";
-var StyledTableFoot = styled107.tfoot`
+var StyledTableFoot = styled106.tfoot`
   width: 100%;
 `;
 var TableFoot = ({ children, ...props }) => {
@@ -17416,9 +17490,9 @@ var TableFoot = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableHead.tsx
-import { styled as styled108 } from "styled-components";
+import { styled as styled107 } from "styled-components";
 import { jsx as jsx349 } from "react/jsx-runtime";
-var StyledThead = styled108.thead`
+var StyledThead = styled107.thead`
   width: 100%;
 `;
 var TableHead = ({ children, ...props }) => {
@@ -17426,9 +17500,9 @@ var TableHead = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableRow.tsx
-import { styled as styled109 } from "styled-components";
+import { styled as styled108 } from "styled-components";
 import { jsx as jsx350 } from "react/jsx-runtime";
-var StyledTableRow = styled109.tr`
+var StyledTableRow = styled108.tr`
   width: 100%;
 `;
 var TableRow = ({ children, ...props }) => {
@@ -17436,9 +17510,9 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
-import { useCallback as useCallback19, useState as useState26 } from "react";
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { useCallback as useCallback20, useState as useState26 } from "react";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -17462,11 +17536,13 @@ var Tabs = ({
   ...props
 }) => {
   const [value, setValue] = useState26(valueProp ?? defaultValue);
-  const onValueChange = useCallback19(
+  const onValueChange = useCallback20(
     (newValue) => {
-      setValue(newValue);
-      if (onValueChangeProp) {
-        onValueChangeProp(newValue);
+      if (newValue !== null) {
+        setValue(newValue);
+        if (onValueChangeProp) {
+          onValueChangeProp(newValue);
+        }
       }
     },
     [onValueChangeProp]
@@ -17475,34 +17551,34 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil41(value)) {
+  if (isNotNil42(value)) {
     rootProps.value = value;
   }
-  if (isNotNil41(defaultValue)) {
+  if (isNotNil42(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx351(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx351(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx351(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx351(BaseTabs.Root, { ...rootProps, children: /* @__PURE__ */ jsx351(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx351(SelectedItemStyleProvider, { children }) }) });
 };
 Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
-import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
+import { Tabs as Tabs2 } from "@base-ui/react/tabs";
 import { jsx as jsx352 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx352(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx352(Tabs2.Panel, { value, children });
 };
 TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
-import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { styled as styled111 } from "styled-components";
+import { Tabs as Tabs3 } from "@base-ui/react/tabs";
+import { styled as styled110 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import { styled as styled110 } from "styled-components";
-var TabsSelectedItemIndicatorDiv = styled110(SelectedItemIndicatorDiv)`
+import { styled as styled109 } from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled109(SelectedItemIndicatorDiv)`
   :has(button[role='tab']:focus-visible) > & {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -17527,7 +17603,7 @@ var SelectedTabIndicator = () => {
 
 // src/components/Tabs/TabsList.tsx
 import { jsx as jsx354, jsxs as jsxs70 } from "react/jsx-runtime";
-var StyledTabsList = styled111(RadixTabList)`
+var StyledTabsList = styled110(Tabs3.List)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -17547,12 +17623,12 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef36, useEffect as useEffect23, useRef as useRef24 } from "react";
-import { isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledTabsTrigger.tsx
-import { styled as styled112 } from "styled-components";
-import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
-var StyledTabsTrigger = styled112(RadixTabsTrigger)`
+import { styled as styled111 } from "styled-components";
+import { Tabs as Tabs4 } from "@base-ui/react/tabs";
+var StyledTabsTrigger = styled111(Tabs4.Tab)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -17598,8 +17674,8 @@ var TabsTrigger = forwardRef36(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil42(label),
-        "aria-label": isNotNil42(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil43(label),
+        "aria-label": isNotNil43(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17613,10 +17689,10 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import { styled as styled113 } from "styled-components";
-import { isNotNil as isNotNil43 } from "@wistia/type-guards";
+import { styled as styled112 } from "styled-components";
+import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx355, jsxs as jsxs72 } from "react/jsx-runtime";
-var StyledThumbnailBadge = styled113.div`
+var StyledThumbnailBadge = styled112.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -17643,18 +17719,18 @@ var StyledThumbnailBadge = styled113.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs72(StyledThumbnailBadge, { ...props, children: [
-    isNotNil43(icon) && icon,
+    isNotNil44(icon) && icon,
     /* @__PURE__ */ jsx355("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { forwardRef as forwardRef37, useState as useState27, useRef as useRef25, useCallback as useCallback20, useMemo as useMemo17 } from "react";
-import { styled as styled115 } from "styled-components";
+import { forwardRef as forwardRef37, useState as useState27, useRef as useRef25, useCallback as useCallback21, useMemo as useMemo17 } from "react";
+import { styled as styled114 } from "styled-components";
 import {
-  isNil as isNil19,
-  isNotNil as isNotNil46,
+  isNil as isNil20,
+  isNotNil as isNotNil47,
   isUndefined as isUndefined7,
   isEmptyString as isEmptyString2,
   isString as isString4,
@@ -17662,10 +17738,10 @@ import {
 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { css as css52 } from "styled-components";
+import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { css as css53 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css52`
+  defaultDarkOne: css53`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -17673,7 +17749,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css52`
+  defaultDarkTwo: css53`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -17681,7 +17757,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css52`
+  defaultLightOne: css53`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -17689,13 +17765,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css52`
+  defaultLightTwo: css53`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css52`
+  defaultMidOne: css53`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -17703,13 +17779,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css52`
+  defaultMidTwo: css53`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css52`
+  green: css53`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -17717,7 +17793,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css52`
+  greenWithPop: css53`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -17725,7 +17801,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css52`
+  pink: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -17733,7 +17809,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css52`
+  pinkWithPop: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -17741,7 +17817,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css52`
+  playfulGradientOne: css53`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -17749,7 +17825,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css52`
+  playfulGradientTwo: css53`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -17757,13 +17833,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css52`
+  purple: css53`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css52`
+  purpleWithPop: css53`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -17771,7 +17847,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css52`
+  yellow: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -17779,7 +17855,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css52`
+  yellowWithPop: css53`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -17790,14 +17866,14 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil44(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil45(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import { styled as styled114 } from "styled-components";
-import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { styled as styled113 } from "styled-components";
+import { isNotNil as isNotNil46 } from "@wistia/type-guards";
 import { jsx as jsx356, jsxs as jsxs73 } from "react/jsx-runtime";
-var ScrubLine = styled114.div`
+var ScrubLine = styled113.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -17889,8 +17965,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil45(cursorPosition);
-  const scrubLinePosition = isNotNil45(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil46(cursorPosition);
+  const scrubLinePosition = isNotNil46(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17938,12 +18014,12 @@ var getAspectRatioValue = (aspectRatio) => {
   }
   return WIDE_ASPECT_RATIO;
 };
-var WideThumbnailImage = styled115.img`
+var WideThumbnailImage = styled114.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled115.img`
+var SquareThumbnailImage = styled114.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -17968,7 +18044,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnailContainer = styled115.div`
+var StyledThumbnailContainer = styled114.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
   width: ${({ $width }) => $width};
@@ -17976,13 +18052,13 @@ var StyledThumbnailContainer = styled115.div`
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 `;
-var StyledThumbnail = styled115.div`
+var StyledThumbnail = styled114.div`
   --wui-thumbnail-badge-offset: var(--wui-space-01);
 
-  background-image: ${({ $backgroundUrl }) => isNotNil46($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil47($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  isNil20($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -18037,7 +18113,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
   };
 };
 var hasValidThumbnailUrl = (thumbnailUrl) => {
-  return isNotNil46(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
+  return isNotNil47(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
 };
 var Thumbnail = forwardRef37(
   ({
@@ -18060,8 +18136,8 @@ var Thumbnail = forwardRef37(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil46(storyboard);
-    const trackStoryboardLoadStatus = useCallback20(() => {
+    const isScrubbable = isNotNil47(storyboard);
+    const trackStoryboardLoadStatus = useCallback21(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
       }
@@ -18071,7 +18147,7 @@ var Thumbnail = forwardRef37(
       storyboardElementRef.current = asset;
       return storyboardElementRef.current;
     }, [storyboard]);
-    const handleMouseMove = useCallback20(
+    const handleMouseMove = useCallback21(
       (mouseEvent) => {
         if (!isScrubbable) {
           return;
@@ -18086,7 +18162,7 @@ var Thumbnail = forwardRef37(
       },
       [isScrubbable, trackStoryboardLoadStatus]
     );
-    const handleMouseOut = useCallback20(() => {
+    const handleMouseOut = useCallback21(() => {
       if (!isScrubbable) {
         return;
       }
@@ -18094,7 +18170,7 @@ var Thumbnail = forwardRef37(
       setCursorPosition(null);
     }, [isScrubbable]);
     const shouldRenderStoryboard = useMemo17(() => {
-      if (isNil19(storyboard) || isUndefined7(height) || isEmptyString2(height)) {
+      if (isNil20(storyboard) || isUndefined7(height) || isEmptyString2(height)) {
         return false;
       }
       return isScrubbable && isMouseOver && isStoryboardReady;
@@ -18143,7 +18219,7 @@ var Thumbnail = forwardRef37(
             $gradientBackground: gradientBackground,
             "data-testid": "thumbnail-inner",
             children: [
-              isNotNil46(children) ? children : null,
+              isNotNil47(children) ? children : null,
               thumbnailContent
             ]
           }
@@ -18155,17 +18231,17 @@ var Thumbnail = forwardRef37(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import { cloneElement as cloneElement10, Children as Children11 } from "react";
-import { styled as styled116 } from "styled-components";
+import { cloneElement as cloneElement10, Children as Children12 } from "react";
+import { styled as styled115 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx358 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled116.div`
+var ThumbnailCollageContainer = styled115.div`
   container-type: size;
   width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
-var StyledThumbnailCollage = styled116.div`
+var StyledThumbnailCollage = styled115.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -18214,7 +18290,7 @@ var ThumbnailCollage = ({
   gradientBackground = "defaultMidOne",
   ...props
 }) => {
-  const thumbnailArray = Children11.toArray(children);
+  const thumbnailArray = Children12.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return cloneElement10(child, {
@@ -18244,8 +18320,8 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled117, css as css53 } from "styled-components";
-import { isNotNil as isNotNil47 } from "@wistia/type-guards";
+import { styled as styled116, css as css54 } from "styled-components";
+import { isNotNil as isNotNil48 } from "@wistia/type-guards";
 import { jsx as jsx359, jsxs as jsxs75 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18286,7 +18362,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled117.svg`
+var WistiaLogoComponent = styled116.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -18302,12 +18378,12 @@ var WistiaLogoComponent = styled117.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css53`
+      return css54`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css53`
+    return css54`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -18358,7 +18434,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx359("title", { children: title }),
-        isNotNil47(description) ? /* @__PURE__ */ jsx359("desc", { children: description }) : null,
+        isNotNil48(description) ? /* @__PURE__ */ jsx359("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18462,13 +18538,13 @@ export {
   ModalCallout,
   ModalCallouts,
   PersistentFileAmountLimitValidator,
-  Popover,
+  Popover5 as Popover,
   PreviewCard,
   ProgressBar,
-  Radio,
+  Radio2 as Radio,
   RadioCard,
   RadioCardImage,
-  RadioGroup,
+  RadioGroup2 as RadioGroup,
   RadioMenuItem,
   SaturationAndValuePicker,
   ScreenReaderOnly,
@@ -18478,7 +18554,7 @@ export {
   Select,
   SelectOption,
   SelectOptionGroup,
-  Slider,
+  Slider2 as Slider,
   SplitButton,
   Stack,
   SubMenu,
@@ -18498,7 +18574,7 @@ export {
   Thumbnail,
   ThumbnailBadge,
   ThumbnailCollage,
-  Tooltip,
+  Tooltip2 as Tooltip,
   UIProvider,
   ValueNameOrHexCode,
   ValueSwatch,