@nualang/nualang-ui-components 0.1.1412 → 0.1.1413

package/dist/Forms/VoiceSelector/VoiceSelector.js

@@ -1,350 +1,767 @@
-import { useState, useEffect, useRef, Fragment } from "react";
-import PropTypes from "prop-types";
-import { MenuItem, ListItemAvatar, Avatar, Grid, Box, Typography, Slider, Tooltip, TextField, Collapse, ListItemButton, ListItemText, IconButton, Chip } from "@mui/material";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { useState, useEffect, useRef, useCallback, useId } from "react";
+import { Avatar, Box, Button, ButtonBase, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tab, Tabs, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
+import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import awsIconPath from "../../img/aws.svg";
 import azureIconPath from "../../img/azure.svg";
+
+// Panel surfaces from the design spec, with dark-mode equivalents. Text, accent
+// and dividers come straight from the theme.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function VoicePitchSilder({
+const panelTokens = theme => {
+  const light = theme.palette.mode === "light";
+  const white = theme.palette.common.white;
+  return {
+    panelBorder: light ? "#e6e6e2" : theme.palette.divider,
+    tabRule: light ? "#eeeeea" : theme.palette.divider,
+    cardBorder: light ? "#eaeae5" : alpha(white, 0.16),
+    cardBorderHover: light ? "#c9c9c2" : alpha(white, 0.32),
+    cardSelectedBg: light ? "#fbfbf9" : alpha(white, 0.06),
+    footerBg: light ? "#fcfcfb" : alpha(white, 0.03),
+    footerRule: light ? "#f0f0ec" : theme.palette.divider,
+    mutedText: light ? "#8f8f87" : alpha(white, 0.7),
+    faintText: light ? "#b3b3ac" : alpha(white, 0.45),
+    panelShadow: light ? "0 1px 2px rgba(0,0,0,0.04), 0 18px 44px -22px rgba(0,0,0,0.22)" : "0 1px 2px rgba(0,0,0,0.3), 0 18px 44px -22px rgba(0,0,0,0.7)"
+  };
+};
+
+// MUI's own visuallyHidden lives in @mui/utils, which is only a transitive
+// dependency here — declaring an import on it would make it an implicit one.
+const visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap"
+};
+const actionButtonSx = {
+  fontSize: "13.5px",
+  fontWeight: 600,
+  textTransform: "none"
+};
+const badgeSx = {
+  height: 18,
+  "& .MuiChip-icon": {
+    fontSize: 11,
+    marginLeft: 0.25,
+    marginRight: -0.5
+  },
+  "& .MuiChip-label": {
+    px: 0.75,
+    fontSize: "0.625rem",
+    fontWeight: 600
+  }
+};
+
+// The speech API expresses medium as no pitch at all, and a ToggleButton can't
+// carry null, so the buttons are keyed by label and mapped to a pitch here.
+const PITCH_OPTIONS = [{
+  labelKey: "voice_pitch_x_low",
+  pitch: "x-low"
+}, {
+  labelKey: "voice_pitch_low",
+  pitch: "low"
+}, {
+  labelKey: "voice_pitch_medium",
+  pitch: null
+}, {
+  labelKey: "voice_pitch_high",
+  pitch: "high"
+}, {
+  labelKey: "voice_pitch_x_high",
+  pitch: "x-high"
+}];
+
+// Arrow keys move the selection around the voice grid.
+const ARROW_STEPS = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1
+};
+
+// "Spanish, US" -> "US". Accent labels are prefixed with the language name,
+// which the tab row doesn't need to repeat.
+const accentTabLabel = (label = "") => {
+  const separator = label.indexOf(", ");
+  return separator === -1 ? label : label.slice(separator + 2);
+};
+function ChildChip({
+  t
+}) {
+  return /*#__PURE__*/_jsx(Chip, {
+    label: t("child"),
+    size: "small",
+    variant: "outlined",
+    sx: {
+      ...badgeSx,
+      textTransform: "capitalize"
+    }
+  });
+}
+function LegacyChip({
+  t
+}) {
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: t("legacy_voice_tooltip_text"),
+    placement: "top",
+    children: /*#__PURE__*/_jsx(Chip, {
+      icon: /*#__PURE__*/_jsx(WarningAmberIcon, {}),
+      label: t("legacy"),
+      size: "small",
+      color: "warning",
+      variant: "outlined",
+      sx: badgeSx
+    })
+  });
+}
+function ProviderIcon({
+  provider
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    component: "img",
+    src: provider === "azure" ? azureIconPath : awsIconPath,
+    alt: `${provider || "aws"} Icon`,
+    sx: {
+      width: 16,
+      height: 16,
+      display: "block"
+    }
+  });
+}
+function VoicePitchToggle({
   t,
-  selectedVoice,
-  voicePitch,
-  onVoicePitchChange
+  value,
+  disabled,
+  onChange
 }) {
-  const voicePitchMarks = [{
-    value: 5,
-    label: t("voice_pitch_x_low"),
-    pitchValue: "x-low"
-  }, {
-    value: 25,
-    label: t("voice_pitch_low"),
-    pitchValue: "low"
-  }, {
-    value: 50,
-    label: t("voice_pitch_medium"),
-    pitchValue: null
-  }, {
-    value: 75,
-    label: t("voice_pitch_high"),
-    pitchValue: "high"
-  }, {
-    value: 95,
-    label: t("voice_pitch_x_high"),
-    pitchValue: "x-high"
-  }];
-  const sliderValue = voicePitchMarks.find(mark => mark.pitchValue === voicePitch)?.value || 50;
-  if (selectedVoice?.isNeuralOnly) {
-    return /*#__PURE__*/_jsx(Tooltip, {
-      title: t("voice_pitch_disabled"),
-      children: /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(Slider, {
-          disabled: true,
-          "aria-label": t("voice_pitch"),
-          defaultValue: 50,
-          step: null,
-          marks: voicePitchMarks,
-          value: sliderValue
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(Slider, {
+  const group = /*#__PURE__*/_jsx(ToggleButtonGroup, {
+    exclusive: true,
+    size: "small",
+    disabled: disabled,
+    value: PITCH_OPTIONS.find(option => option.pitch === (value || null))?.labelKey,
     "aria-label": t("voice_pitch"),
-    defaultValue: 50,
-    step: null,
-    marks: voicePitchMarks,
-    value: sliderValue,
-    onChange: (_, newValue) => {
-      const currentValue = sliderValue;
-      if (newValue !== currentValue) {
-        const newPitchValue = voicePitchMarks.find(mark => mark.value === newValue)?.pitchValue;
-        onVoicePitchChange({
-          target: {
-            name: "voicePitch",
-            value: newPitchValue
-          }
-        });
+    onChange: (_, labelKey) => {
+      // labelKey is null when the active button is clicked again — a no-op,
+      // since one pitch is always in effect.
+      const option = PITCH_OPTIONS.find(o => o.labelKey === labelKey);
+      if (option) onChange(option.pitch);
+    },
+    sx: theme => ({
+      borderRadius: "999px",
+      "& .MuiToggleButton-root": {
+        textTransform: "none",
+        fontSize: "12px",
+        fontWeight: 600,
+        px: "10px",
+        py: "4px",
+        lineHeight: 1.4,
+        color: "text.secondary",
+        borderColor: panelTokens(theme).cardBorderHover
+      },
+      "& .MuiToggleButtonGroup-firstButton": {
+        borderTopLeftRadius: "999px",
+        borderBottomLeftRadius: "999px",
+        pl: "14px"
+      },
+      "& .MuiToggleButtonGroup-lastButton": {
+        borderTopRightRadius: "999px",
+        borderBottomRightRadius: "999px",
+        pr: "14px"
+      },
+      "& .MuiToggleButton-root.Mui-selected": {
+        backgroundColor: "primary.main",
+        color: theme.palette.primary.contrastText,
+        "&:hover": {
+          backgroundColor: "primary.dark"
+        }
       }
-    }
+    }),
+    children: PITCH_OPTIONS.map(option => /*#__PURE__*/_jsx(ToggleButton, {
+      value: option.labelKey,
+      children: t(option.labelKey)
+    }, option.labelKey))
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      component: "span",
+      sx: theme => ({
+        fontSize: "10.5px",
+        fontWeight: 600,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: panelTokens(theme).mutedText
+      }),
+      children: t("voice_pitch")
+    }), disabled ? /*#__PURE__*/_jsx(Tooltip, {
+      title: t("voice_pitch_disabled"),
+      children: /*#__PURE__*/_jsx("span", {
+        children: group
+      })
+    }) : group]
   });
 }
+function VoiceCard({
+  t,
+  voiceOption,
+  languageCode,
+  selected,
+  tabbable,
+  playing,
+  showProviderIcons,
+  showPreview,
+  onSelect,
+  onPreview,
+  cardRef
+}) {
+  const previewLabel = playing ? t("playing") : t("preview");
+  return (
+    /*#__PURE__*/
+    // ButtonBase over a plain Box: it synthesises Enter/Space activation for
+    // non-native components and picks up the theme's focus-visible ring. A div
+    // rather than the default button, since the preview control nests inside.
+    _jsxs(ButtonBase, {
+      component: "div"
+      // The id and data-language-code are part of the component's contract:
+      // consumers read the accent off the DOM node when a voice is committed.
+      ,
+      id: `voice-${voiceOption.name}`,
+      "data-language-code": languageCode,
+      ref: cardRef,
+      role: "radio",
+      "aria-checked": selected
+      // One stop for the whole grid: the selected card, or the first one when
+      // the selection is empty or sits behind another tab.
+      ,
+      tabIndex: tabbable ? 0 : -1,
+      onClick: onSelect,
+      sx: theme => {
+        const tokens = panelTokens(theme);
+        return {
+          p: "12px 14px",
+          borderRadius: "12px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          textAlign: "left",
+          gap: "11px",
+          border: "1px solid",
+          borderColor: selected ? "primary.main" : tokens.cardBorder,
+          backgroundColor: selected ? tokens.cardSelectedBg : theme.palette.background.paper,
+          boxShadow: selected ? `inset 0 0 0 1px ${theme.palette.primary.main}` : "none",
+          "&:hover": {
+            borderColor: selected ? "primary.main" : tokens.cardBorderHover
+          }
+        };
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: voiceOption.userImage,
+        alt: "",
+        sx: {
+          width: 40,
+          height: 40,
+          flex: "0 0 auto"
+        }
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "4px",
+          minWidth: 0
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px"
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            sx: {
+              fontSize: "15.5px",
+              fontWeight: selected ? 600 : 500,
+              color: "text.primary",
+              minWidth: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: voiceOption.name
+          }), showProviderIcons && /*#__PURE__*/_jsx(ProviderIcon, {
+            provider: voiceOption.provider
+          })]
+        }), (voiceOption.legacy || voiceOption.isChild) && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            flexWrap: "wrap"
+          },
+          children: [voiceOption.legacy && /*#__PURE__*/_jsx(LegacyChip, {
+            t: t
+          }), voiceOption.isChild && /*#__PURE__*/_jsx(ChildChip, {
+            t: t
+          })]
+        })]
+      }), showPreview && /*#__PURE__*/_jsx(IconButton, {
+        "aria-pressed": playing,
+        "aria-label": `${previewLabel} ${voiceOption.name}`,
+        onClick: event => {
+          event.stopPropagation();
+          onPreview();
+        },
+        sx: {
+          ml: "auto",
+          flex: "0 0 auto",
+          width: 36,
+          height: 36,
+          border: "1px solid",
+          borderColor: "primary.main",
+          color: playing ? "primary.contrastText" : "primary.main",
+          backgroundColor: playing ? "primary.main" : "transparent",
+          "&:hover": {
+            borderColor: "primary.main",
+            backgroundColor: playing ? "primary.dark" : "action.hover"
+          },
+          "& .MuiSvgIcon-root": {
+            fontSize: 20
+          }
+        },
+        children: playing ? /*#__PURE__*/_jsx(PauseRoundedIcon, {}) : /*#__PURE__*/_jsx(PlayArrowRoundedIcon, {})
+      })]
+    })
+  );
+}
 function VoiceSelector(props) {
   const {
     t = text => text,
     voices,
     value = "",
+    name,
+    label,
     onChange,
     onVoicePitchChange,
     voicePitch,
     generateAudio = false,
     isUserInternal,
     hidePitch = false,
+    handleSpeak,
+    learnLang,
+    previewText,
     ...otherProps
   } = props;
-  const [openAccentIndex, setOpenAccentIndex] = useState(null);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const dropdownRef = useRef(null);
-  const handleToggleAccent = (event, index) => {
-    event.stopPropagation();
-    setOpenAccentIndex(prevIndex => prevIndex === index ? null : index);
-  };
-  const voiceAccents = Object.values(voices);
-  const voicesArray = voiceAccents.flatMap(voiceOption => voiceOption.voiceOptions);
-  const selectedVoice = (voicesArray || []).find(v => v.name === value);
+  const [open, setOpen] = useState(false);
+  const [activeAccentIndex, setActiveAccentIndex] = useState(0);
+  const [draftVoice, setDraftVoice] = useState(value);
+  const [draftPitch, setDraftPitch] = useState(voicePitch || null);
+  const [playingVoice, setPlayingVoice] = useState(null);
+  const audioRef = useRef(null);
+  const previewRequestRef = useRef(0);
+  const cardRefs = useRef({});
+  const titleId = useId();
+  const voiceAccents = Object.values(voices || {});
+  const selectedVoice = voiceAccents.flatMap(accent => accent.voiceOptions || []).find(option => option.name === value);
+  const activeAccent = voiceAccents[activeAccentIndex];
+  const activeVoices = activeAccent?.voiceOptions || [];
+  // The draft survives a tab change, so it is looked up across every accent
+  // rather than the active one — browsing accents must not move the selection.
+  // Nothing is highlighted while the drafted voice sits behind another tab.
+  const draftAccent = voiceAccents.find(accent => (accent.voiceOptions || []).some(option => option.name === draftVoice));
+  const draftVoiceOption = (draftAccent?.voiceOptions || []).find(option => option.name === draftVoice);
+  // A radiogroup keeps a single tab stop. With no selection on this tab that
+  // falls to the first card, so the grid stays reachable by keyboard.
+  const gridEntryName = activeVoices.some(option => option.name === draftVoiceOption?.name) ? draftVoiceOption.name : activeVoices[0]?.name;
   const showProviderIcons = generateAudio || window.location.host === "localhost:9009" || isUserInternal;
-  useEffect(() => {
-    setOpenAccentIndex(null);
-  }, [voices]);
-  useEffect(() => {
-    const handleClickOutside = event => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !event.target.closest("[data-accent-item]")) {
-        setIsDropdownOpen(false);
+  const showPreview = Boolean(handleSpeak);
+  const showPitch = !hidePitch && Boolean(onVoicePitchChange);
+  const panelTitle = label || t("voices");
+
+  // Neural-only voices don't accept a pitch, so the control is inert for them.
+  const pitchFor = voiceOption => voiceOption?.isNeuralOnly ? null : draftPitch;
+  const pitchDisabled = Boolean(draftVoiceOption?.isNeuralOnly);
+  const stopPlayback = useCallback(() => {
+    previewRequestRef.current += 1;
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setPlayingVoice(null);
+  }, []);
+  useEffect(() => () => stopPlayback(), [stopPlayback]);
+  const handleOpen = () => {
+    const accentIndex = voiceAccents.findIndex(accent => (accent.voiceOptions || []).some(option => option.name === value));
+    const nextIndex = accentIndex === -1 ? 0 : accentIndex;
+    setActiveAccentIndex(nextIndex);
+    // Only an already-selected voice starts out drafted — opening the panel is
+    // browsing, so nothing is picked on the user's behalf.
+    setDraftVoice(value);
+    setDraftPitch(voicePitch || null);
+    setOpen(true);
+  };
+  const handleClose = () => {
+    stopPlayback();
+    setOpen(false);
+  };
+  const handleAccentChange = (_, index) => {
+    stopPlayback();
+    setActiveAccentIndex(index);
+  };
+  const handlePreview = async voiceOption => {
+    if (playingVoice === voiceOption.name) {
+      stopPlayback();
+      return;
+    }
+    stopPlayback();
+    setDraftVoice(voiceOption.name);
+    const requestId = previewRequestRef.current += 1;
+    setPlayingVoice(voiceOption.name);
+    try {
+      const result = await handleSpeak({
+        text: previewText || voiceOption.name,
+        learnLanguage: learnLang,
+        voiceName: voiceOption.name,
+        languageCode: activeAccent?.languageCode,
+        pitch: pitchFor(voiceOption),
+        mute: true
+      });
+      // A newer preview (or a close/unmount) superseded this request.
+      if (previewRequestRef.current !== requestId) return;
+      const audioUrl = typeof result === "string" ? result : result?.audioUrl;
+      if (!audioUrl) {
+        setPlayingVoice(null);
+        return;
       }
-    };
-    if (isDropdownOpen) {
-      document.addEventListener("click", handleClickOutside);
-    } else {
-      document.removeEventListener("click", handleClickOutside);
+      const audio = new Audio(audioUrl);
+      audioRef.current = audio;
+      audio.addEventListener("ended", () => setPlayingVoice(null));
+      await audio.play();
+    } catch (error) {
+      console.error(error);
+      if (previewRequestRef.current === requestId) setPlayingVoice(null);
     }
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isDropdownOpen]);
-  useEffect(() => {
-    if (value && voices) {
-      const selectedAccentIndex = voiceAccents.findIndex(accent => accent.voiceOptions.some(voiceOption => voiceOption.name === value));
-      setOpenAccentIndex(selectedAccentIndex !== -1 ? selectedAccentIndex : null);
+  };
+
+  // Radiogroup keyboard support: selection follows focus across the grid.
+  const handleGridKeyDown = event => {
+    const step = ARROW_STEPS[event.key];
+    if (!step || activeVoices.length === 0) return;
+    event.preventDefault();
+    const currentIndex = activeVoices.findIndex(option => option.name === draftVoice);
+    // The draft may belong to another accent, in which case there is nothing to
+    // step from and arrowing into this grid enters at the first card.
+    const nextVoice = currentIndex === -1 ? activeVoices[0] : activeVoices[(currentIndex + step + activeVoices.length) % activeVoices.length];
+    setDraftVoice(nextVoice.name);
+    cardRefs.current[nextVoice.name]?.focus();
+  };
+  const handleCommit = () => {
+    if (!draftVoiceOption) {
+      handleClose();
+      return;
     }
-  }, [value, voices]);
+    onChange({
+      target: {
+        name,
+        value: draftVoiceOption.name,
+        // The accent that owns the draft, not the one on screen — they differ
+        // when the panel is closed from a tab the draft was not picked in.
+        languageCode: draftAccent?.languageCode,
+        picture: draftVoiceOption.userImage || ""
+      }
+    });
+    // After onChange, since consumers reset the pitch when the voice changes.
+    // Only when it actually moved, so an unchanged pitch doesn't trigger a
+    // second sample playback in the consumer.
+    const committedPitch = pitchFor(draftVoiceOption);
+    if (showPitch && (voicePitch || null) !== committedPitch) {
+      onVoicePitchChange({
+        target: {
+          name: "voicePitch",
+          value: committedPitch
+        }
+      });
+    }
+    handleClose();
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(TextField, {
-      ref: dropdownRef,
-      select: true,
-      value: value,
-      onClick: () => setIsDropdownOpen(true),
-      onChange: e => {
-        onChange(e);
-        setOpenAccentIndex(null);
-      },
       ...otherProps,
+      name: name,
+      label: label,
+      value: selectedVoice?.name || "",
+      onClick: handleOpen,
+      onKeyDown: event => {
+        if (["Enter", " ", "ArrowDown"].includes(event.key)) {
+          event.preventDefault();
+          handleOpen();
+        }
+      },
       slotProps: {
         inputLabel: {
           shrink: Boolean(value) || undefined
         },
         input: {
-          notched: Boolean(value) || undefined
-        },
-        select: {
-          open: isDropdownOpen,
-          MenuProps: {
-            PaperProps: {
-              sx: {
-                maxHeight: "80vh",
-                width: "60vw",
-                left: "10 !important",
-                right: "10 !important",
-                top: "50% !important",
-                transform: "translateY(-50%) !important",
-                overflowY: "auto"
-              }
-            },
-            anchorOrigin: {
-              vertical: "top",
-              horizontal: "center"
-            },
-            transformOrigin: {
-              vertical: "center",
-              horizontal: "center"
-            },
-            getContentAnchorEl: null
+          readOnly: true,
+          notched: Boolean(value) || undefined,
+          sx: {
+            cursor: "pointer"
           },
-          renderValue: selected => {
-            const selectedVoice = voicesArray.find(v => v.name === selected) || voicesArray[0];
-            return /*#__PURE__*/_jsxs(Grid, {
-              container: true,
+          startAdornment: selectedVoice ? /*#__PURE__*/_jsx(Avatar, {
+            src: selectedVoice.userImage,
+            alt: "",
+            sx: {
+              width: 32,
+              height: 32,
+              mr: 1
+            }
+          }) : null,
+          endAdornment: /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [selectedVoice?.legacy && /*#__PURE__*/_jsx(LegacyChip, {
+              t: t
+            }), selectedVoice?.isChild && /*#__PURE__*/_jsx(ChildChip, {
+              t: t
+            }), showProviderIcons && selectedVoice && /*#__PURE__*/_jsx(ProviderIcon, {
+              provider: selectedVoice.provider
+            }), /*#__PURE__*/_jsx(ArrowDropDownIcon, {
               sx: {
-                alignItems: "center",
-                width: "100%"
-              },
-              children: [/*#__PURE__*/_jsx(Grid, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  src: selectedVoice?.userImage,
-                  alt: selectedVoice?.name,
-                  sx: {
-                    mr: 1
-                  }
-                })
-              }), /*#__PURE__*/_jsx(Grid, {
-                children: /*#__PURE__*/_jsxs(Typography, {
-                  variant: "body1",
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1
-                  },
-                  children: [selectedVoice?.isChild ? `${selectedVoice?.name} (${t("child")})` : selectedVoice?.name, selectedVoice?.legacy && /*#__PURE__*/_jsx(Tooltip, {
-                    title: t("legacy_voice_tooltip_text"),
-                    placement: "right",
-                    children: /*#__PURE__*/_jsx(Chip, {
-                      icon: /*#__PURE__*/_jsx(WarningAmberIcon, {}),
-                      label: "Legacy",
-                      size: "small",
-                      color: "warning",
-                      variant: "outlined",
-                      sx: {
-                        height: 18,
-                        "& .MuiChip-icon": {
-                          fontSize: 11,
-                          marginLeft: 0.25,
-                          marginRight: -0.5
-                        },
-                        "& .MuiChip-label": {
-                          px: 0.75,
-                          fontSize: "0.625rem",
-                          fontWeight: 600
-                        }
-                      }
-                    })
-                  })]
-                })
-              }), showProviderIcons && /*#__PURE__*/_jsx(Grid, {
-                sx: {
-                  mt: 1,
-                  ml: "auto"
-                },
-                children: /*#__PURE__*/_jsx("img", {
-                  src: selectedVoice.provider === "azure" ? azureIconPath : awsIconPath,
-                  alt: `${selectedVoice.provider} Icon`
-                })
-              })]
-            });
+                color: "action.active"
+              }
+            })]
+          })
+        },
+        htmlInput: {
+          role: "combobox",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          sx: {
+            cursor: "pointer"
+          }
+        }
+      }
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      onClose: handleClose,
+      maxWidth: false,
+      "aria-labelledby": titleId,
+      slotProps: {
+        paper: {
+          elevation: 0,
+          sx: theme => {
+            const tokens = panelTokens(theme);
+            return {
+              width: "100%",
+              maxWidth: 720,
+              border: "1px solid",
+              borderColor: tokens.panelBorder,
+              borderRadius: "16px",
+              boxShadow: tokens.panelShadow
+            };
           }
         }
       },
-      children: voiceAccents.map((voiceAccent, index) => /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: event => handleToggleAccent(event, index),
-          "data-accent-item": true,
-          children: [/*#__PURE__*/_jsx(ListItemText, {
-            disableSticky: true,
-            children: voiceAccent.label
-          }), /*#__PURE__*/_jsx(IconButton, {
-            size: "small",
-            "data-accent-item": true,
-            children: openAccentIndex === index ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-          })]
-        }), /*#__PURE__*/_jsx(Collapse, {
-          in: openAccentIndex === index,
-          timeout: "auto",
-          unmountOnExit: true,
-          children: voiceAccent.voiceOptions.map(voiceOption => /*#__PURE__*/_jsx(MenuItem, {
-            value: voiceOption.name,
-            id: `voice-${voiceOption.name}`,
-            "data-language-code": voiceAccent.languageCode,
-            onClick: () => {
-              onChange({
-                target: {
-                  value: voiceOption.name
-                }
-              });
-            },
-            children: /*#__PURE__*/_jsxs(Grid, {
-              container: true,
-              direction: "row",
+      children: [/*#__PURE__*/_jsxs(DialogTitle, {
+        id: titleId,
+        sx: {
+          p: "18px 20px 0",
+          display: "flex",
+          alignItems: "baseline",
+          gap: "10px",
+          flexWrap: "wrap",
+          fontSize: "16px",
+          fontWeight: 600
+        },
+        children: [panelTitle, showProviderIcons && /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          sx: theme => ({
+            fontSize: "11.5px",
+            color: panelTokens(theme).mutedText
+          }),
+          children: t("internal_view_provider_marks")
+        })]
+      }), /*#__PURE__*/_jsx(Tabs, {
+        value: activeAccentIndex,
+        onChange: handleAccentChange,
+        variant: "scrollable",
+        scrollButtons: "auto",
+        allowScrollButtonsMobile: true,
+        "aria-label": t("accent"),
+        sx: theme => ({
+          px: "20px",
+          pt: "16px",
+          minHeight: 0,
+          flex: "0 0 auto",
+          borderBottom: "1px solid",
+          borderColor: panelTokens(theme).tabRule,
+          // v9 renamed the flex container slot from flexContainer to list.
+          "& .MuiTabs-list": {
+            gap: "26px"
+          }
+        }),
+        children: voiceAccents.map((accent, index) => {
+          const isActive = index === activeAccentIndex;
+          return /*#__PURE__*/_jsx(Tab, {
+            disableRipple: true,
+            label: /*#__PURE__*/_jsxs(Box, {
               sx: {
-                alignItems: "center",
-                width: "100%"
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: "3px"
               },
-              children: [/*#__PURE__*/_jsx(Grid, {
-                children: /*#__PURE__*/_jsx(ListItemAvatar, {
-                  children: /*#__PURE__*/_jsx(Avatar, {
-                    src: voiceOption.userImage,
-                    alt: ""
-                  })
-                })
-              }), /*#__PURE__*/_jsxs(Grid, {
+              children: [/*#__PURE__*/_jsx(Box, {
+                component: "span",
                 sx: {
-                  flexGrow: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1
+                  fontSize: "14.5px",
+                  fontWeight: isActive ? 600 : 500
                 },
-                children: [voiceOption.isChild ? `${voiceOption.name} (${t("child")})` : voiceOption.name, voiceOption.legacy && /*#__PURE__*/_jsx(Tooltip, {
-                  title: t("legacy_voice_tooltip_text"),
-                  placement: "right",
-                  children: /*#__PURE__*/_jsx(Chip, {
-                    icon: /*#__PURE__*/_jsx(WarningAmberIcon, {}),
-                    label: "Legacy",
-                    size: "small",
-                    color: "warning",
-                    variant: "outlined",
-                    sx: {
-                      height: 18,
-                      "& .MuiChip-icon": {
-                        fontSize: 11,
-                        marginLeft: 0.25,
-                        marginRight: -0.5
-                      },
-                      "& .MuiChip-label": {
-                        px: 0.75,
-                        fontSize: "0.625rem",
-                        fontWeight: 600
-                      }
-                    }
-                  })
-                })]
-              }), showProviderIcons && /*#__PURE__*/_jsx(Grid, {
-                sx: {
-                  mr: 2,
-                  mt: 1
-                },
-                children: /*#__PURE__*/_jsx("img", {
-                  src: voiceOption.provider === "azure" ? azureIconPath : awsIconPath,
-                  alt: `${voiceOption.provider} Icon`
-                })
+                children: accentTabLabel(accent.label)
+              }), /*#__PURE__*/_jsxs(Box, {
+                component: "span",
+                sx: theme => ({
+                  fontSize: "11.5px",
+                  letterSpacing: "0.04em",
+                  fontWeight: 400,
+                  color: isActive ? panelTokens(theme).mutedText : panelTokens(theme).faintText
+                }),
+                children: [(accent.voiceOptions || []).length, " ", t("voices")]
               })]
+            }),
+            sx: theme => ({
+              minWidth: 0,
+              minHeight: 0,
+              p: "0 2px 12px",
+              textTransform: "none",
+              alignItems: "flex-start",
+              "&:hover": {
+                backgroundColor: "transparent"
+              },
+              [theme.breakpoints.up("sm")]: {
+                minWidth: 0
+              }
             })
-          }, voiceOption.name))
-        })]
-      }, voiceAccent.languageCode))
-    }), value && !hidePitch && /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        width: "100%",
-        px: 1,
-        my: 2
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        id: "input-slider",
-        gutterBottom: true,
-        children: t("voice_pitch")
-      }), /*#__PURE__*/_jsx(Grid, {
-        container: true,
-        spacing: 2,
+          }, accent.languageCode);
+        })
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        role: "radiogroup",
+        "aria-label": panelTitle,
+        onKeyDown: handleGridKeyDown,
         sx: {
-          alignItems: "center",
-          width: "100%"
+          p: "16px 16px 18px",
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "repeat(2, 1fr)",
+            md: "repeat(3, 1fr)"
+          },
+          gap: "10px",
+          maxHeight: 420
+        },
+        children: activeVoices.map(voiceOption => /*#__PURE__*/_jsx(VoiceCard, {
+          t: t,
+          voiceOption: voiceOption,
+          languageCode: activeAccent?.languageCode,
+          selected: draftVoiceOption?.name === voiceOption.name,
+          tabbable: gridEntryName === voiceOption.name,
+          playing: playingVoice === voiceOption.name,
+          showProviderIcons: showProviderIcons,
+          showPreview: showPreview,
+          onSelect: () => setDraftVoice(voiceOption.name),
+          onPreview: () => handlePreview(voiceOption),
+          cardRef: node => {
+            cardRefs.current[voiceOption.name] = node;
+          }
+        }, voiceOption.name))
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        sx: theme => {
+          const tokens = panelTokens(theme);
+          return {
+            p: "13px 20px",
+            justifyContent: "space-between",
+            gap: "16px",
+            borderTop: "1px solid",
+            borderColor: tokens.footerRule,
+            backgroundColor: tokens.footerBg
+          };
         },
-        children: /*#__PURE__*/_jsx(Grid, {
-          size: "grow",
-          children: /*#__PURE__*/_jsx(VoicePitchSilder, {
-            t: t,
-            selectedVoice: selectedVoice,
-            voicePitch: voicePitch,
-            onVoicePitchChange: onVoicePitchChange
+        children: [showPitch ? /*#__PURE__*/_jsx(VoicePitchToggle, {
+          t: t,
+          value: pitchFor(draftVoiceOption),
+          disabled: pitchDisabled,
+          onChange: setDraftPitch
+        }) :
+        /*#__PURE__*/
+        // Nothing to tune, so the footer states what's about to be
+        // committed — the draft's own accent, which may not be the tab on
+        // screen. Blank until something is drafted.
+        _jsx(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            minWidth: 0
+          },
+          children: draftVoiceOption && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Avatar, {
+              src: draftVoiceOption.userImage,
+              alt: "",
+              sx: {
+                width: 30,
+                height: 30
+              }
+            }), /*#__PURE__*/_jsxs(Typography, {
+              sx: {
+                fontSize: "13.5px",
+                fontWeight: 600,
+                color: "text.primary",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: [draftVoiceOption.name, draftAccent?.label ? ` · ${draftAccent.label}` : ""]
+            })]
           })
-        })
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            flex: "0 0 auto"
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            onClick: handleClose,
+            sx: actionButtonSx,
+            "data-cy": "close-voice-selector",
+            children: t("close")
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "primary",
+            disabled: !draftVoiceOption,
+            onClick: handleCommit,
+            sx: actionButtonSx,
+            children: t("use_voice")
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        "aria-live": "polite",
+        sx: visuallyHidden,
+        children: playingVoice ? `${t("playing")} ${playingVoice}` : ""
       })]
     })]
   });
 }
-VoiceSelector.propTypes = {
-  t: PropTypes.func.isRequired,
-  languages: PropTypes.object.isRequired,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  error: PropTypes.bool
-};
 export default VoiceSelector;