@nualang/nualang-ui-components 0.1.1195 → 0.1.1197

package/dist/Cards/Avatar/Avatar.js

@@ -0,0 +1,49 @@
+"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

@@ -0,0 +1,289 @@
+"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

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

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

@@ -0,0 +1,36 @@
+"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

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

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

@@ -0,0 +1,65 @@
+"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

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

package/dist/Cards/CardElements/index.js

@@ -0,0 +1,185 @@
+"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)"
+    }
+  }
+};