@nualang/nualang-ui-components 0.1.1193 → 0.1.1195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1193",
+  "version": "0.1.1195",
   "main": "dist/index.js",
   "files": [
     "dist",

package/dist/Cards/Avatar/Avatar.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _CardElements = require("../CardElements");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function AvatarCard({
-  url,
-  selected,
-  onSelect
-}) {
-  const handleSelect = () => selected ? onSelect(null) : onSelect(url);
-  const avatarStyling = {
-    width: 50,
-    height: 50,
-    cursor: "pointer",
-    margin: theme => theme.spacing()
-  };
-  if (!url) {
-    return /*#__PURE__*/_react.default.createElement(_material.Card, {
-      sx: {
-        display: "inline-block"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
-      animation: "wave",
-      variant: "circular",
-      sx: avatarStyling
-    }));
-  }
-  return /*#__PURE__*/_react.default.createElement(_material.Card, {
-    raised: selected,
-    sx: selected ? {
-      display: "inline-block"
-    } : {
-      display: "inline-block",
-      ..._CardElements.classes.hover
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
-    onClick: () => handleSelect()
-  }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
-    src: url,
-    sx: avatarStyling
-  })));
-}
-var _default = exports.default = AvatarCard;

package/dist/Cards/Bot/Bot.js

@@ -1,289 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactIntersectionObserver = require("react-intersection-observer");
-var _index = _interopRequireDefault(require("../../utils/placeholder-images/index"));
-var _material = require("@mui/material");
-var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
-var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
-var _Public = _interopRequireDefault(require("@mui/icons-material/Public"));
-var _School = _interopRequireDefault(require("@mui/icons-material/School"));
-var _index2 = require("../../utils/index");
-var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
-var _PlayArrow = _interopRequireDefault(require("@mui/icons-material/PlayArrow"));
-var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Share = _interopRequireDefault(require("@mui/icons-material/Share"));
-var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
-var _ProgressiveCardMedia = _interopRequireDefault(require("../../Misc/ProgressiveCardMedia"));
-var _CardElements = require("../CardElements");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function OverflowMenu({
-  t,
-  bot,
-  anchorEl,
-  handleClose,
-  handlePlay,
-  handleEdit,
-  handleShare,
-  handleDelete,
-  isCreator = false,
-  handleDuplicateBot,
-  subscription
-}) {
-  return /*#__PURE__*/_react.default.createElement(_material.Menu, {
-    id: `card-menu-${bot.botId}`,
-    anchorEl: anchorEl,
-    keepMounted: true,
-    open: Boolean(anchorEl),
-    onClose: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: handlePlay,
-    "data-cy": `${bot.botName}-play-bot`
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_PlayArrow.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("play"))), isCreator && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: handleEdit,
-    "data-cy": `${bot.botName}-edit-bot`
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Edit.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("edit"))), isCreator && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: handleDelete,
-    "data-cy": `${bot.botName}-delete-bot`
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Delete.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("delete"))), subscription.isPaidUser ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: handleShare
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Share.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("share"))) : /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("upgrade_plan"),
-    placement: "top"
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: handleShare,
-    disabled: true
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Share.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("share")))), handleDuplicateBot && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: () => handleDuplicateBot(bot)
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_FileCopy.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("create_duplicate"))));
-}
-function Bot({
-  t = text => text,
-  bot,
-  handleSelectBot,
-  selectText = "play",
-  isCreator = false,
-  disableActions = false,
-  handleDuplicateBot,
-  handleShareBot,
-  handleEditBot,
-  handlePlayBot,
-  handleDeleteBot,
-  handleViewUserProfile,
-  disableRaised,
-  subscription = {},
-  disablePlays,
-  handleOpenPreview,
-  disablePreview,
-  cardTitleComponent = "h3"
-}) {
-  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
-  const [placeholderRef, visible] = (0, _reactIntersectionObserver.useInView)({
-    rootMargin: "320px",
-    triggerOnce: true
-  });
-  if (!bot) {
-    return /*#__PURE__*/_react.default.createElement(_CardElements.CardContainer, null, /*#__PURE__*/_react.default.createElement(_CardElements.CardTop, null, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-      variant: "rectangular",
-      sx: _CardElements.classes.media
-    })), /*#__PURE__*/_react.default.createElement(_CardElements.CardHeader, {
-      action: /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-        disabled: true,
-        size: "large",
-        value: "More",
-        "aria-label": "More Options"
-      }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null)),
-      title: /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-        height: 12,
-        width: "80%"
-      }),
-      subheader: /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-        height: 10,
-        width: "40%"
-      })
-    }), /*#__PURE__*/_react.default.createElement(_CardElements.CardContent, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-      variant: "body1",
-      color: "textSecondary",
-      component: "div"
-    }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-      variant: "text",
-      height: 72
-    }))));
-  }
-  const {
-    botName,
-    description,
-    userImage,
-    verificationStatus,
-    gameAward,
-    createdByName,
-    picture,
-    cardPicture,
-    pictureXs,
-    learnLang,
-    createdBy,
-    exerciseStartTotal,
-    visibility
-  } = bot;
-  const selectBot = () => {
-    handleSelectBot(bot);
-  };
-  return /*#__PURE__*/_react.default.createElement(_CardElements.CardContainer, {
-    sx: disableRaised ? {} : _CardElements.classes.hover,
-    raised: disableRaised ? false : anchorEl,
-    "data-cy": "bot-card"
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardTop, null, /*#__PURE__*/_react.default.createElement(_material.CardActionArea, {
-    onClick: selectBot,
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_ProgressiveCardMedia.default, {
-    sx: _CardElements.classes.media,
-    highQualitySrc: visible || !pictureXs ? cardPicture || picture || _index.default.bot : null,
-    lowQualitySrc: pictureXs,
-    title: botName,
-    placeholderRef: placeholderRef,
-    accessibilityLabel: `${botName} image`
-  }), isCreator && /*#__PURE__*/_react.default.createElement(_CardElements.CardVisibility, {
-    t: t,
-    visibility: visibility
-  })), userImage ? /*#__PURE__*/_react.default.createElement(_CardElements.CardAvatar, {
-    "aria-label": `${t("go_to")} ${createdByName || `${botName} ${t("creator")}`} ${t("profile")}`,
-    title: createdByName || `${botName} creator`,
-    src: userImage,
-    onClick: () => handleViewUserProfile(createdBy),
-    alt: createdByName || `${botName} creator`,
-    onKeyDown: event => {
-      if (event.key === "Enter") {
-        handleViewUserProfile(createdBy);
-      }
-    },
-    role: "link",
-    tabIndex: 0,
-    verificationStatus: verificationStatus,
-    gameAward: gameAward,
-    badgeSize: "small"
-  }) : /*#__PURE__*/_react.default.createElement(_CardElements.CardAvatar, {
-    sx: theme => ({
-      backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-      color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
-    }),
-    "aria-label": `${t("go_to")} ${createdByName || `${botName} ${t("creator")}`} ${t("profile")}`,
-    title: createdByName || `${botName} creator`,
-    onClick: () => handleViewUserProfile(createdBy),
-    alt: createdByName || `${botName} creator`,
-    onKeyDown: event => {
-      if (event.key === "Enter") {
-        handleViewUserProfile(createdBy);
-      }
-    },
-    role: "link",
-    tabIndex: 0,
-    verificationStatus: verificationStatus,
-    gameAward: gameAward,
-    badgeSize: "small"
-  }, /*#__PURE__*/_react.default.createElement(_Person.default, {
-    fontSize: "large"
-  }))), /*#__PURE__*/_react.default.createElement(_CardElements.CardHeader, {
-    title: /*#__PURE__*/_react.default.createElement(_CardElements.CardTitle, {
-      title: botName,
-      component: cardTitleComponent
-    }),
-    action: /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-      title: t("more_options")
-    }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-      "aria-label": "More Options",
-      onClick: event => setAnchorEl(event.currentTarget),
-      "data-cy": `${botName}-more-options`,
-      disabled: disableActions,
-      size: "large",
-      "aria-expanded": Boolean(anchorEl)
-    }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))),
-    subheader: createdByName
-  }), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_CardElements.CardContent, null, /*#__PURE__*/_react.default.createElement(_CardElements.CardInfoSection, {
-    display: "flex",
-    alignItems: "center",
-    flexWrap: "wrap"
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mr: 2
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardInfoSectionItem, {
-    variant: "body2",
-    component: "span"
-  }, /*#__PURE__*/_react.default.createElement(_Public.default, {
-    sx: _CardElements.classes.infoIcon
-  }), learnLang && (0, _index2.capitalize)(t(learnLang)))), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mr: 2
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardInfoSectionItem, {
-    variant: "body2",
-    component: "span"
-  }, /*#__PURE__*/_react.default.createElement(_School.default, {
-    sx: _CardElements.classes.infoIcon
-  }), t(`card_${bot.difficulty}`))), !disablePlays && exerciseStartTotal > -1 && /*#__PURE__*/_react.default.createElement(_CardElements.CardInfoSectionItem, {
-    variant: "body2",
-    component: "span"
-  }, /*#__PURE__*/_react.default.createElement(_PlayArrow.default, {
-    sx: _CardElements.classes.infoIcon
-  }), t("plays", {
-    number: (0, _index2.formatNumberTotal)(exerciseStartTotal)
-  }))), /*#__PURE__*/_react.default.createElement(_CardElements.CardDescription, {
-    variant: "body1",
-    color: "textSecondary",
-    component: "p"
-  }, description)), /*#__PURE__*/_react.default.createElement(_material.CardActions, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: selectBot,
-    color: "primary",
-    variant: "outlined",
-    "data-cy": "bot_select_button",
-    disabled: disableActions,
-    "aria-label": `${t(selectText)}: ${botName}`
-  }, t(selectText)), handleOpenPreview && !disablePreview ? /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: () => {
-      handleOpenPreview(bot);
-    },
-    color: "primary",
-    "data-cy": "bot_preview_button",
-    disabled: disableActions,
-    "aria-label": `Preview bot:  ${botName}`
-  }, t("preview")) : null), /*#__PURE__*/_react.default.createElement(OverflowMenu, {
-    t: t,
-    bot: bot,
-    isCreator: isCreator,
-    anchorEl: anchorEl,
-    handleDuplicateBot: handleDuplicateBot,
-    handleClose: () => setAnchorEl(null),
-    handlePlay: () => handlePlayBot(bot),
-    handleDelete: () => handleDeleteBot(bot),
-    handleEdit: () => handleEditBot(bot),
-    handleShare: () => handleShareBot(bot),
-    subscription: subscription
-  }));
-}
-Bot.propTypes = {
-  bot: _propTypes.default.shape({
-    botId: _propTypes.default.string.isRequired,
-    botName: _propTypes.default.string.isRequired,
-    description: _propTypes.default.string.isRequired,
-    userImage: _propTypes.default.string,
-    picture: _propTypes.default.string
-  }),
-  selectText: _propTypes.default.string.isRequired
-};
-var _default = exports.default = Bot;

package/dist/Cards/Bot/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Bot",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Bot.js"
-}

package/dist/Cards/CardElements/CardTitle/CardTitle.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _system = require("@mui/system");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledCardTitle = (0, _system.styled)(_Typography.default, {
-  shouldForwardProp: props => !["noWrap"].includes(props)
-})(({
-  theme
-}) => ({
-  fontSize: "1.125rem",
-  fontWeight: "bold",
-  marginTop: theme.spacing(2)
-}));
-function CardTitle({
-  title = "",
-  component = "h3"
-}) {
-  return /*#__PURE__*/_react.default.createElement(StyledCardTitle, {
-    variant: "h6",
-    component: component,
-    noWrap: true,
-    "aria-label": title
-  }, title.length > 25 ? title.substring(0, 25) + "..." : title);
-}
-CardTitle.propTypes = {
-  title: _propTypes.default.string.isRequired,
-  component: _propTypes.default.string
-};
-var _default = exports.default = CardTitle;

package/dist/Cards/CardElements/CardTitle/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "CardTitle",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./CardTitle.js"
-}

package/dist/Cards/CardElements/CardVisibility/CardVisibility.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
-var _Public = _interopRequireDefault(require("@mui/icons-material/Public"));
-var _VpnLock = _interopRequireDefault(require("@mui/icons-material/VpnLock"));
-var _colors = require("@mui/material/colors");
-var _Archive = _interopRequireDefault(require("@mui/icons-material/Archive"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function CardVisibility({
-  t = text => text,
-  visibility = ""
-}) {
-  const isPublic = visibility === "public";
-  let icon;
-  let color;
-  if (visibility === "public") {
-    icon = /*#__PURE__*/_react.default.createElement(_Public.default, {
-      fontSize: "small"
-    });
-    color = "success";
-  } else if (visibility === "private") {
-    icon = /*#__PURE__*/_react.default.createElement(_VpnLock.default, {
-      fontSize: "small"
-    });
-    color = "info";
-  } else if (visibility === "archived") {
-    icon = /*#__PURE__*/_react.default.createElement(_Archive.default, {
-      fontSize: "small"
-    });
-    color = "secondary";
-  }
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    sx: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Chip.default, {
-    color: color,
-    icon: icon,
-    label: t(visibility),
-    sx: theme => ({
-      position: "absolute",
-      bottom: "16px",
-      right: "16px",
-      fontWeight: "bold",
-      textTransform: "capitalize",
-      pointerEvents: "none",
-      boxShadow: theme.shadows[1],
-      backgroundColor: isPublic ? theme.palette.success.dark : theme.palette.mode === "light" ? _colors.blue[700] : _colors.blue[500],
-      ...(theme.palette.mode === "light" && {
-        color: "white"
-      })
-    })
-  }));
-}
-CardVisibility.propTypes = {
-  visibility: _propTypes.default.string.isRequired
-};
-var _default = exports.default = CardVisibility;

package/dist/Cards/CardElements/CardVisibility/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "CardVisibility",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./CardVisibility.js"
-}

package/dist/Cards/CardElements/index.js

@@ -1,185 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardMenuIcon = exports.CardInfoSectionItem = exports.CardInfoSection = exports.CardHeader = exports.CardDescription = exports.CardContent = exports.CardContainer = exports.CardAvatar = void 0;
-Object.defineProperty(exports, "CardTitle", {
-  enumerable: true,
-  get: function () {
-    return _CardTitle.default;
-  }
-});
-exports.CardTop = void 0;
-Object.defineProperty(exports, "CardVisibility", {
-  enumerable: true,
-  get: function () {
-    return _CardVisibility.default;
-  }
-});
-exports.classes = exports.LoadingCardContainer = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _system = require("@mui/system");
-var _CardTitle = _interopRequireDefault(require("./CardTitle"));
-var _CardVisibility = _interopRequireDefault(require("./CardVisibility"));
-var _NualangVerifiedIcon = _interopRequireDefault(require("../../Misc/NualangVerifiedIcon/NualangVerifiedIcon"));
-var _MedalSelector = _interopRequireDefault(require("../../Misc/MedalSelector/MedalSelector"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CardContainer = exports.CardContainer = (0, _system.styled)(_material.Card)(({
-  theme
-}) => ({
-  textAlign: "left",
-  color: theme.palette.text.secondary,
-  maxWidth: 600,
-  minWidth: 320,
-  display: "flex",
-  flexDirection: "column",
-  borderRadius: theme.spacing(2),
-  height: "100%"
-}));
-const CardAvatarImg = (0, _system.styled)(_material.Avatar)(({
-  theme
-}) => ({
-  position: "relative",
-  width: "54px",
-  height: "54px",
-  border: `3px solid ${theme.palette.background.paper}`,
-  backgroundColor: `${theme.palette.background.paper}`,
-  color: theme.palette.text.secondary,
-  cursor: "pointer",
-  transition: `transform 0.2s ease 0s`,
-  "&:hover": {
-    transform: `scale(1.08)`
-  }
-}));
-const CardAvatar = props => {
-  const {
-    badgeSize = "default"
-  } = props;
-  const passDownProps = {
-    ...props
-  };
-  delete passDownProps.badgeSize;
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: theme => ({
-      position: "absolute",
-      bottom: theme.spacing(-3),
-      left: theme.spacing(2)
-    })
-  }, /*#__PURE__*/_react.default.createElement(CardAvatarImg, passDownProps), props.verificationStatus === "approved" && /*#__PURE__*/_react.default.createElement(_NualangVerifiedIcon.default, {
-    sx: {
-      bottom: "0px",
-      right: "-5px",
-      fontSize: badgeSize === "small" ? 20 : 25
-    }
-  }), props.gameAward === "gold" && props.verificationStatus !== "approved" && /*#__PURE__*/_react.default.createElement(_MedalSelector.default, {
-    color: "gold",
-    width: badgeSize === "small" ? 20 : 25,
-    fade: false,
-    backgroundColor: true,
-    sx: {
-      position: "absolute",
-      padding: "1px",
-      bottom: "0px",
-      right: "-5px",
-      borderRadius: "50%"
-    }
-  }), props.gameAward === "silver" && props.verificationStatus !== "approved" && /*#__PURE__*/_react.default.createElement(_MedalSelector.default, {
-    color: "silver",
-    width: badgeSize === "small" ? 20 : 25,
-    fade: false,
-    backgroundColor: true,
-    sx: {
-      position: "absolute",
-      padding: "1px",
-      bottom: "0px",
-      right: "-5px",
-      borderRadius: "50%"
-    }
-  }), props.gameAward === "bronze" && props.verificationStatus !== "approved" && /*#__PURE__*/_react.default.createElement(_MedalSelector.default, {
-    color: "bronze",
-    width: badgeSize === "small" ? 20 : 25,
-    fade: false,
-    backgroundColor: true,
-    sx: {
-      position: "absolute",
-      padding: "1px",
-      bottom: "0px",
-      right: "-5px",
-      borderRadius: "50%"
-    }
-  }));
-};
-exports.CardAvatar = CardAvatar;
-const CardHeader = exports.CardHeader = (0, _system.styled)(_material.CardHeader)(() => ({
-  "& .MuiCardHeader-root": {
-    overflow: "hidden"
-  },
-  "& .MuiCardHeader-content": {
-    overflow: "hidden"
-  }
-}));
-const CardInfoSection = exports.CardInfoSection = (0, _system.styled)(_material.Box)(({
-  theme
-}) => ({
-  [theme.breakpoints.down("sm")]: {
-    marginBottom: 0
-  },
-  marginBottom: theme.spacing(2)
-}));
-const CardInfoSectionItem = exports.CardInfoSectionItem = (0, _system.styled)(_material.Typography)(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-const CardDescription = exports.CardDescription = (0, _system.styled)(_material.Typography)(({
-  theme
-}) => ({
-  [theme.breakpoints.down("sm")]: {
-    display: "none"
-  },
-  height: "80px",
-  overflow: "auto"
-}));
-const CardTop = exports.CardTop = (0, _system.styled)("div")(() => ({
-  position: "relative"
-}));
-const CardContent = exports.CardContent = (0, _system.styled)(_material.CardContent)(() => ({
-  flexGrow: 1,
-  overflow: "auto"
-}));
-const CardMenuIcon = exports.CardMenuIcon = (0, _system.styled)("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: theme.spacing(2)
-}));
-const LoadingCardContainer = exports.LoadingCardContainer = (0, _system.styled)(_material.Card)(({
-  theme
-}) => ({
-  textAlign: "left",
-  color: theme.palette.text.secondary,
-  display: "flex",
-  flexDirection: "column",
-  borderRadius: theme.spacing(2)
-}));
-const classes = exports.classes = {
-  media: {
-    height: 0,
-    paddingTop: "56.25%" // 16:9
-  },
-  cursorPointer: {
-    cursor: "pointer"
-  },
-  infoIcon: {
-    mr: 1
-  },
-  hover: {
-    transition: "box-shadow 0.3s",
-    "&:hover": {
-      boxShadow: "0 5px 15px rgba(0, 0, 0, 0.3)"
-    }
-  }
-};