@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/PhraseGroup/PhraseGroup.js

@@ -1,269 +0,0 @@
-import { useEffect, useState, memo } from "react";
-import { useLocation, useNavigate, useParams } from "react-router";
-import { useTheme } from "@mui/material/styles";
-import { Slide, Dialog, Box, Divider, Tooltip, IconButton } from "@mui/material";
-import Create from "@mui/icons-material/Create";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import TopBar from "../../Chat/TopBar/TopBar";
-import PhraseGroupInfo from "./PhraseGroupInfo/PhraseGroupInfo";
-import PhraseGroupGames from "./PhraseGroupGameOptions/PhraseGroupGames";
-import { searchStringToObj, objToSearchString } from "../../utils";
-import { TranslationGame, ListeningGame, PronunciationGame, MeaningGame, ListenAndSpeakGame, MeaningReadWriteGame } from "./Games";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const phraseGroupGames = [TranslationGame, ListeningGame, PronunciationGame, MeaningGame, ListenAndSpeakGame, MeaningReadWriteGame];
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function PhraseGroup({
-  t = text => text,
-  open,
-  handleClose,
-  phraseGroup = {},
-  phraseGroupCompletions,
-  learnLang,
-  forLang,
-  phrases = [],
-  voices = [],
-  topicInfo = {},
-  handleSpeak,
-  clearQueue,
-  stopAudio,
-  handleTranslate,
-  openSnackbar,
-  handleComplete,
-  courseId,
-  sectionId,
-  topicId,
-  handleSaveProgress,
-  handleDeleteProgress,
-  forLangCharacters,
-  learnLangCharacters,
-  correctSound,
-  incorrectSound,
-  disableShuffle,
-  toggleMuteSound,
-  handleReportProblem,
-  languageInformation,
-  uploadAudioAttempt,
-  languageTag,
-  siteLanguage,
-  courseSettings,
-  isKeyboardHiddenTranslation,
-  parentClassroom,
-  isReadWriteModeStudent,
-  trackRecommendedEvent,
-  hiddenWordBankExercises,
-  hiddenImageExercises,
-  isCreator,
-  handleEditPhraseGroup,
-  handleTogglePhraseGroupGameVisibility,
-  handleTogglePhraseGroupKeyboard,
-  handleTogglePhraseGroupWordBank,
-  handleTogglePhraseGroupImageVisibility,
-  topicProgress,
-  getPhraseListGameProgress
-}) {
-  const hiddenPhraseGroupGames = phraseGroup?.hiddenPhraseGroupGames || {};
-  const isKeyboardHiddenPhraseGroupGames = phraseGroup?.isKeyboardHiddenPhraseGroupGames || {};
-  const hiddenWordBankPhraseGroupGames = phraseGroup?.hiddenWordBankPhraseGroupGames || {};
-  const hiddenImagePhraseGroupGames = phraseGroup?.hiddenImagePhraseGroupGames || {};
-  const theme = useTheme();
-  const isLgScreen = useMediaQuery(theme.breakpoints.up("md"));
-  const navigate = useNavigate();
-  const location = useLocation();
-  const searchParams = searchStringToObj(location.search);
-  const game = searchParams.game;
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const assignment = new URLSearchParams(location.search).get("assignmentId");
-  const [gameId, setGameId] = useState(null);
-  useEffect(() => {
-    setGameId(game);
-  }, [game]);
-  useEffect(() => {
-    if (!open) setGameId(null);
-  }, [open]);
-  const addSearchParams = newParams => {
-    navigate({
-      ...location,
-      search: objToSearchString({
-        ...searchParams,
-        ...newParams
-      })
-    });
-  };
-  const removeSearchParams = (keys = []) => {
-    for (const key of keys) {
-      key in searchParams && delete searchParams[key];
-    }
-    navigate({
-      ...location,
-      search: objToSearchString(searchParams)
-    });
-  };
-  const handleStartGame = selectedGameId => {
-    addSearchParams({
-      game: selectedGameId
-    });
-  };
-  const handleCloseGame = () => {
-    removeSearchParams(["game"]);
-  };
-  const handleKeyDown = event => {
-    if (event.key === "Escape") {
-      handleClose();
-    }
-  };
-  const activePhrases = phraseGroup?.phrases || phrases;
-  const isPhrasesEmpty = !activePhrases.length;
-  const isListeningDisabled = isPhrasesEmpty || learnLang === "irish" && activePhrases.filter(p => p?.voices?.length > 0).length === 0;
-  const isDefinitionsEmpty = activePhrases.every(p => !p.definitions || p.definitions.length === 0);
-  const gamesHidden = {
-    translation: hiddenPhraseGroupGames["translation"] || false,
-    listening: isListeningDisabled || hiddenPhraseGroupGames["listening"] || false,
-    pronunciation: hiddenPhraseGroupGames["pronunciation"] || false,
-    meaning: hiddenPhraseGroupGames["meaning"] || false
-  };
-  const gameOptions = phraseGroupGames.map(g => ({
-    gameId: g.gameId,
-    gameName: g.gameName,
-    gameDescription: g.gameDescription,
-    gameIcon: g.gameIcon
-  }));
-  const sharedGameProps = {
-    t,
-    phraseGroup,
-    phrases: activePhrases,
-    learnLang,
-    forLang,
-    voices,
-    topicInfo,
-    handleSpeak,
-    clearQueue,
-    stopAudio,
-    handleTranslate,
-    openSnackbar,
-    handleComplete,
-    courseId,
-    sectionId,
-    topicId,
-    handleSaveProgress,
-    handleDeleteProgress,
-    forLangCharacters,
-    learnLangCharacters,
-    correctSound,
-    incorrectSound,
-    disableShuffle,
-    toggleMuteSound,
-    handleReportProblem,
-    languageInformation,
-    uploadAudioAttempt,
-    languageTag,
-    siteLanguage,
-    courseSettings,
-    isKeyboardHiddenTranslation: isKeyboardHiddenPhraseGroupGames["translation"] || isKeyboardHiddenTranslation,
-    parentClassroom,
-    isReadWriteModeStudent,
-    trackRecommendedEvent,
-    hiddenWordBankExercises: [...Object.entries(hiddenWordBankPhraseGroupGames).filter(([, hidden]) => hidden).map(([gameId]) => gameId), ...(hiddenWordBankExercises || [])],
-    hiddenImageExercises: [...Object.entries(hiddenImagePhraseGroupGames).filter(([, hidden]) => hidden).map(([gameId]) => gameId), ...(hiddenImageExercises || [])],
-    classroomId,
-    assignment,
-    phraseListId: phraseGroup?.phraseGroupId
-  };
-  const topBarActions = isCreator && handleEditPhraseGroup ? /*#__PURE__*/_jsx(Tooltip, {
-    title: t("edit"),
-    children: /*#__PURE__*/_jsx(IconButton, {
-      color: "inherit",
-      onClick: () => handleEditPhraseGroup(phraseGroup),
-      size: "large",
-      children: /*#__PURE__*/_jsx(Create, {})
-    })
-  }) : null;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Dialog, {
-      fullScreen: true,
-      open: open,
-      onClose: handleClose,
-      "aria-labelledby": "phrase-group-name",
-      "aria-modal": "true",
-      onKeyDown: handleKeyDown,
-      slots: {
-        transition: Transition
-      },
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          flexGrow: 1,
-          flexDirection: "column",
-          height: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(TopBar, {
-          t: t,
-          title: "",
-          handleClose: handleClose,
-          isPrimaryColor: true,
-          topBarActions: topBarActions
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "center"
-          },
-          component: "main",
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              margin: 2,
-              width: isLgScreen ? "100%" : "auto",
-              maxWidth: "800px"
-            },
-            children: [/*#__PURE__*/_jsx(PhraseGroupInfo, {
-              ...phraseGroup,
-              t: t,
-              phrases: activePhrases
-            }), /*#__PURE__*/_jsx(Divider, {
-              sx: {
-                borderBottomWidth: 5
-              }
-            }), !gameId && /*#__PURE__*/_jsx(PhraseGroupGames, {
-              t: t,
-              handleSelectPhraseGroupGame: handleStartGame,
-              gameList: gameOptions,
-              gamesHidden: gamesHidden,
-              phraseGroupCompletions: phraseGroupCompletions,
-              isCreator: isCreator,
-              isPhrasesEmpty: isPhrasesEmpty,
-              isDefinitionsEmpty: isDefinitionsEmpty,
-              hiddenWordBankGames: hiddenWordBankPhraseGroupGames,
-              hiddenImageGames: hiddenImagePhraseGroupGames,
-              isKeyboardHiddenGames: isKeyboardHiddenPhraseGroupGames,
-              onToggleGameVisibility: gameId => handleTogglePhraseGroupGameVisibility && handleTogglePhraseGroupGameVisibility(phraseGroup, gameId),
-              onToggleGameKeyboard: gameId => handleTogglePhraseGroupKeyboard && handleTogglePhraseGroupKeyboard(phraseGroup, gameId),
-              onToggleGameWordBank: gameId => handleTogglePhraseGroupWordBank && handleTogglePhraseGroupWordBank(phraseGroup, gameId),
-              onToggleImageVisibility: gameId => handleTogglePhraseGroupImageVisibility && handleTogglePhraseGroupImageVisibility(phraseGroup, gameId),
-              getPhraseListGameProgress: getPhraseListGameProgress,
-              totalPhrases: activePhrases.length,
-              uploadAudioAttempt: uploadAudioAttempt
-            })]
-          })
-        })]
-      })
-    }), phraseGroupGames.map(PhraseGroupGame => {
-      const gameProgress = getPhraseListGameProgress ? getPhraseListGameProgress(PhraseGroupGame.gameId) : {};
-      return /*#__PURE__*/_jsx(PhraseGroupGame, {
-        ...sharedGameProps,
-        open: gameId === PhraseGroupGame.gameId,
-        handleClose: handleCloseGame,
-        remainingQuestions: gameProgress.remainingQuestions || [],
-        existingAnswerAttempts: gameProgress.existingAnswerAttempts || [],
-        exerciseStartTime: gameProgress.exerciseStartTime || null
-      }, `phrase-group-game-${PhraseGroupGame.gameId}`);
-    })]
-  });
-}
-PhraseGroup.propTypes = {};
-export default /*#__PURE__*/memo(PhraseGroup);

package/dist/Exercises/PhraseGroup/PhraseGroup.test.js

@@ -1,28 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import PhraseGroup from "./PhraseGroup";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("PhraseGroup", () => {
-  it("renders without crashing", () => {
-    let props = {
-      phraseGroup: {
-        name: "Test Phrase Group",
-        phrases: []
-      }
-    };
-    const theme = createTheme();
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(MemoryRouter, {
-        children: /*#__PURE__*/_jsx(PhraseGroup, {
-          ...props
-        })
-      })
-    }));
-    unmount();
-  });
-});

package/dist/Exercises/PhraseGroup/PhraseGroupGameOptions/PhraseGroupGame/PhraseGroupGame.js

@@ -1,296 +0,0 @@
-import Typography from "@mui/material/Typography";
-import Avatar from "@mui/material/Avatar";
-import { Card, ListItemAvatar, ListItemText, ListItemButton, Badge, IconButton, Tooltip } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import Person from "@mui/icons-material/Person";
-import Done from "@mui/icons-material/Done";
-import Timelapse from "@mui/icons-material/Timelapse";
-import Visibility from "@mui/icons-material/Visibility";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import AccountBalance from "@mui/icons-material/AccountBalance";
-import ImageIcon from '@mui/icons-material/Image';
-import ImageNotSupportedIcon from '@mui/icons-material/ImageNotSupported';
-import KeyboardIcon from "@mui/icons-material/Keyboard";
-import { useTheme } from "@mui/material/styles";
-import AccountBalanceOffIcon from "../../../../icons/AccountBalanceOff";
-import KeyBoardOffLight from "../../../../icons/KeyBoardOffLight";
-import KeyBoardOffDark from "../../../../icons/KeyBoardOffDark";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  listItemSelected: {
-    boxShadow: `inset 4px 0px 0px ${theme.palette.primary.main}`
-  },
-  avatar: {
-    backgroundColor: theme.palette.primary.main,
-    display: "flex",
-    flexDirection: "space-between",
-    borderRadius: theme.spacing()
-  },
-  greenColor: {
-    color: theme.palette.success ? theme.palette.success.dark : ""
-  },
-  infoColor: {
-    color: theme.palette.info ? theme.palette.info.main : ""
-  },
-  margin: {
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  }
-}));
-function ProgressBadge({
-  classes,
-  completions,
-  gameId,
-  t,
-  gameName
-}) {
-  let completionCounter = 0;
-  if (completions && completions.length > 0) {
-    for (let i = 0; i < completions.length; i++) {
-      if (completions[i].exercise === gameId) {
-        completionCounter += 1;
-      }
-    }
-  }
-  return completionCounter > 0 ? /*#__PURE__*/_jsx(Badge, {
-    className: `${classes.greenColor} ${classes.margin}`,
-    badgeContent: completionCounter,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Done, {
-      titleAccess: completionCounter === 1 ? t("exercise_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      }) : t("exercises_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      }),
-      "aria-label": completionCounter === 1 ? t("exercise_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      }) : t("exercises_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      })
-    })
-  }) : null;
-}
-function InProgressBadge({
-  classes,
-  remainingQuestions,
-  totalPhrases,
-  t,
-  gameName
-}) {
-  const isInProgress = remainingQuestions !== null && remainingQuestions.length > 0 && remainingQuestions.length < totalPhrases;
-  return isInProgress ? /*#__PURE__*/_jsx(Badge, {
-    className: `${classes.infoColor} ${classes.margin}`,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Timelapse, {
-      titleAccess: t("phrase_group_game_in_progress_icon", {
-        name: gameName
-      }),
-      "aria-label": t("phrase_group_game_in_progress_icon", {
-        name: gameName
-      })
-    })
-  }) : null;
-}
-function CreatorActions({
-  t,
-  gameId,
-  hasKeyboard,
-  hasWordBank,
-  isGameHidden,
-  isKeyboardHidden,
-  isWordBankHidden,
-  isImageHidden,
-  onToggleVisibility,
-  onToggleKeyboard,
-  onToggleWordBank,
-  onToggleImageVisibility
-}) {
-  const theme = useTheme();
-  const KeyboardOffIcon = theme.palette.mode === "dark" ? KeyBoardOffDark : KeyBoardOffLight;
-  return /*#__PURE__*/_jsxs("div", {
-    onClick: e => e.stopPropagation(),
-    style: {
-      display: "flex",
-      alignItems: "center",
-      flexShrink: 0
-    },
-    children: [hasKeyboard && /*#__PURE__*/_jsx(Tooltip, {
-      title: isKeyboardHidden ? t("show_keyboard") || "Show keyboard" : t("hide_keyboard") || "Hide keyboard",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: () => onToggleKeyboard && onToggleKeyboard(gameId),
-        "aria-label": "Toggle keyboard",
-        children: isKeyboardHidden ? /*#__PURE__*/_jsx(KeyboardOffIcon, {}) : /*#__PURE__*/_jsx(KeyboardIcon, {})
-      })
-    }), hasWordBank && /*#__PURE__*/_jsx(Tooltip, {
-      title: isWordBankHidden ? t("show_word_bank") || "Show word bank" : t("hide_word_bank") || "Hide word bank",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: () => onToggleWordBank && onToggleWordBank(gameId),
-        "aria-label": "Toggle word bank",
-        children: isWordBankHidden ? /*#__PURE__*/_jsx(AccountBalanceOffIcon, {}) : /*#__PURE__*/_jsx(AccountBalance, {})
-      })
-    }), (gameId === "meaning-listen-and-speak" || gameId === "meaning" || gameId === "meaning-read-and-write") && /*#__PURE__*/_jsx(Tooltip, {
-      title: isImageHidden ? t("show_phrase_image") || "Show Phrase Image" : t("hide_phrase_image") || "Hide Phrase Image",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: () => onToggleImageVisibility && onToggleImageVisibility(gameId),
-        "aria-label": "Toggle Phrase Image Visibility",
-        children: isImageHidden ? /*#__PURE__*/_jsx(ImageNotSupportedIcon, {}) : /*#__PURE__*/_jsx(ImageIcon, {})
-      })
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: isGameHidden ? t("show_exercise") || "Show exercise" : t("hide_exercise") || "Hide exercise",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: () => onToggleVisibility && onToggleVisibility(gameId),
-        "aria-label": "Toggle exercise visibility",
-        children: isGameHidden ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-      })
-    })]
-  });
-}
-function PhraseGroupGame({
-  t = text => text,
-  gameId,
-  gameIcon: GameIcon,
-  gameName,
-  gameDescription,
-  handleSelectPhraseGroupGame,
-  phraseGroupCompletions,
-  remainingQuestions,
-  totalPhrases,
-  isGameHidden,
-  isPhrasesEmpty,
-  isDefinitionsEmpty,
-  isCreator,
-  isKeyboardHidden,
-  isWordBankHidden,
-  isImageHidden,
-  onToggleVisibility,
-  onToggleKeyboard,
-  onToggleWordBank,
-  onToggleImageVisibility
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const hasKeyboard = gameId === "translation";
-  const hasWordBank = gameId === "translation" || gameId === "listening";
-  const isDefinitionsDisabled = gameId.includes("meaning") && isDefinitionsEmpty && !isPhrasesEmpty;
-  const isDefinitionsHidden = gameId.includes("meaning") && isDefinitionsEmpty && !isPhrasesEmpty && !isCreator;
-  const isDisabled = isPhrasesEmpty || isDefinitionsDisabled || isGameHidden && !isCreator;
-  const disabledTooltip = isPhrasesEmpty ? t("topic_no_phrases") : isDefinitionsDisabled ? t("meaning_no_definitions") : "";
-  return /*#__PURE__*/_jsx(Tooltip, {
-    title: disabledTooltip,
-    placement: "top",
-    children: /*#__PURE__*/_jsx("span", {
-      children: /*#__PURE__*/_jsxs(ListItemButton, {
-        alignItems: "center",
-        disabled: isDisabled,
-        onClick: () => {
-          const canPlay = !isPhrasesEmpty && !isDefinitionsDisabled && (!isGameHidden || isCreator);
-          if (canPlay) {
-            handleSelectPhraseGroupGame(gameId);
-          }
-        },
-        divider: true,
-        classes: {
-          selected: classes.listItemSelected
-        },
-        id: `phrase-group-game-${gameId}`,
-        component: Card,
-        sx: {
-          mb: 2,
-          ml: 2,
-          mr: 2,
-          borderRadius: "1.5em",
-          border: "2px solid transparent",
-          "&:hover": {
-            border: `2px solid ${theme.palette.primary.main}`,
-            backgroundColor: "transparent"
-          },
-          "&:focus": {
-            backgroundColor: "transparent"
-          },
-          "&.Mui-disabled": {
-            opacity: 0.6,
-            cursor: "not-allowed",
-            pointerEvents: "auto",
-            backgroundColor: theme.palette.action.disabledBackground,
-            filter: "grayscale(30%)",
-            border: `2px solid ${theme.palette.action.disabledBackground}`,
-            "&:hover": {
-              border: `2px solid ${theme.palette.action.disabledBackground}`
-            }
-          }
-        },
-        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-          children: GameIcon ? /*#__PURE__*/_jsx(Avatar, {
-            variant: "square",
-            className: classes.avatar,
-            alt: "",
-            children: /*#__PURE__*/_jsx(GameIcon, {})
-          }) : /*#__PURE__*/_jsx(Avatar, {
-            sx: theme => ({
-              backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-              color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-            }),
-            alt: "",
-            children: /*#__PURE__*/_jsx(Person, {
-              fontSize: "large"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: /*#__PURE__*/_jsx(Typography, {
-            sx: {
-              fontWeight: "bold"
-            },
-            component: "h3",
-            children: gameName
-          }),
-          secondary: /*#__PURE__*/_jsx(Typography, {
-            component: "p",
-            variant: "body2",
-            color: "textSecondary",
-            children: gameDescription
-          })
-        }), !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(InProgressBadge, {
-            classes: classes,
-            remainingQuestions: remainingQuestions,
-            totalPhrases: totalPhrases,
-            t: t,
-            gameName: gameName
-          }), /*#__PURE__*/_jsx(ProgressBadge, {
-            classes: classes,
-            gameId: gameId,
-            completions: phraseGroupCompletions,
-            t: t,
-            gameName: gameName
-          })]
-        }), isCreator && /*#__PURE__*/_jsx(CreatorActions, {
-          t: t,
-          gameId: gameId,
-          hasKeyboard: hasKeyboard,
-          hasWordBank: hasWordBank,
-          isGameHidden: isGameHidden,
-          isKeyboardHidden: isKeyboardHidden,
-          isWordBankHidden: isWordBankHidden,
-          isImageHidden: isImageHidden,
-          onToggleVisibility: onToggleVisibility,
-          onToggleKeyboard: onToggleKeyboard,
-          onToggleWordBank: onToggleWordBank,
-          onToggleImageVisibility: onToggleImageVisibility
-        })]
-      })
-    })
-  });
-}
-PhraseGroupGame.propTypes = {};
-export default PhraseGroupGame;

package/dist/Exercises/PhraseGroup/PhraseGroupGameOptions/PhraseGroupGames.js

@@ -1,70 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import PhraseGroupGame from "./PhraseGroupGame/PhraseGroupGame";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function PhraseGroupGames({
-  t = text => text,
-  gameList = [],
-  gamesHidden = {},
-  handleSelectPhraseGroupGame,
-  phraseGroupCompletions,
-  isCreator,
-  isPhrasesEmpty,
-  isDefinitionsEmpty,
-  hiddenWordBankGames = {},
-  hiddenImageGames = {},
-  isKeyboardHiddenGames = {},
-  onToggleGameVisibility,
-  onToggleGameKeyboard,
-  onToggleGameWordBank,
-  onToggleImageVisibility,
-  getPhraseListGameProgress,
-  totalPhrases,
-  uploadAudioAttempt
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        component: "h2",
-        sx: {
-          m: 2
-        },
-        children: t("choose_game_mode")
-      })
-    }), gameList.map((game, index) => !gamesHidden[game.gameId] || isCreator ? /*#__PURE__*/_jsx(Grid, {
-      id: `phrase_group_${game.gameName}`,
-      size: 12,
-      children: /*#__PURE__*/_jsx(PhraseGroupGame, {
-        t: t,
-        gameId: game.gameId,
-        gameIcon: game.gameIcon,
-        gameName: t(game.gameName),
-        gameDescription: t(game.gameDescription),
-        handleSelectPhraseGroupGame: handleSelectPhraseGroupGame,
-        phraseGroupCompletions: phraseGroupCompletions,
-        isGameHidden: gamesHidden[game.gameId],
-        isPhrasesEmpty: isPhrasesEmpty,
-        isDefinitionsEmpty: isDefinitionsEmpty,
-        isCreator: isCreator,
-        isKeyboardHidden: isKeyboardHiddenGames[game.gameId],
-        isWordBankHidden: hiddenWordBankGames[game.gameId],
-        isImageHidden: hiddenImageGames[game.gameId] ?? true,
-        onToggleVisibility: onToggleGameVisibility,
-        onToggleKeyboard: onToggleGameKeyboard,
-        onToggleWordBank: onToggleGameWordBank,
-        onToggleImageVisibility: onToggleImageVisibility,
-        remainingQuestions: getPhraseListGameProgress ? getPhraseListGameProgress(game.gameId)?.remainingQuestions ?? null : null,
-        totalPhrases: totalPhrases,
-        uploadAudioAttempt: uploadAudioAttempt
-      })
-    }, index) : null)]
-  });
-}
-PhraseGroupGames.propTypes = {};
-export default PhraseGroupGames;