@nualang/nualang-ui-components 0.1.1198 → 0.1.1200

package/dist/Cards/Avatar/Avatar.js

@@ -4,10 +4,9 @@ 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 }; }
+var _jsxRuntime = require("react/jsx-runtime");
 function AvatarCard({
   url,
   selected,
@@ -21,29 +20,32 @@ function AvatarCard({
     margin: theme => theme.spacing()
   };
   if (!url) {
-    return /*#__PURE__*/_react.default.createElement(_material.Card, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
       sx: {
         display: "inline-block"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
-      animation: "wave",
-      variant: "circular",
-      sx: avatarStyling
-    }));
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        animation: "wave",
+        variant: "circular",
+        sx: avatarStyling
+      })
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_material.Card, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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
-  })));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+      onClick: () => handleSelect(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+        src: url,
+        sx: avatarStyling
+      })
+    })
+  });
 }
 var _default = exports.default = AvatarCard;

package/dist/Cards/Bot/Bot.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIntersectionObserver = require("react-intersection-observer");
 var _index = _interopRequireDefault(require("../../utils/placeholder-images/index"));
@@ -22,9 +22,8 @@ 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");
+var _jsxRuntime = require("react/jsx-runtime");
 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,
@@ -38,44 +37,76 @@ function OverflowMenu({
   handleDuplicateBot,
   subscription
 }) {
-  return /*#__PURE__*/_react.default.createElement(_material.Menu, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_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"))));
+    onClose: handleClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: handlePlay,
+      "data-cy": `${bot.botName}-play-bot`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayArrow.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("play")
+      })]
+    }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: handleEdit,
+      "data-cy": `${bot.botName}-edit-bot`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("edit")
+      })]
+    }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: handleDelete,
+      "data-cy": `${bot.botName}-delete-bot`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("delete")
+      })]
+    }), subscription.isPaidUser ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: handleShare,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Share.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("share")
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: t("upgrade_plan"),
+      placement: "top",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        onClick: handleShare,
+        disabled: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Share.default, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: t("share")
+        })]
+      })
+    }), handleDuplicateBot && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: () => handleDuplicateBot(bot),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("create_duplicate")
+      })]
+    })]
+  });
 }
 function Bot({
   t = text => text,
@@ -103,32 +134,40 @@ function Bot({
     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
-    }))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardTop, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+          variant: "rectangular",
+          sx: _CardElements.classes.media
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardHeader, {
+        action: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          disabled: true,
+          size: "large",
+          value: "More",
+          "aria-label": "More Options",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+        }),
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+          height: 12,
+          width: "80%"
+        }),
+        subheader: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+          height: 10,
+          width: "40%"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardContent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body1",
+          color: "textSecondary",
+          component: "div",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+            variant: "text",
+            height: 72
+          })
+        })
+      })]
+    });
   }
   const {
     botName,
@@ -148,133 +187,153 @@ function Bot({
   const selectBot = () => {
     handleSelectBot(bot);
   };
-  return /*#__PURE__*/_react.default.createElement(_CardElements.CardContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_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
-  }));
+    "data-cy": "bot-card",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardTop, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardActionArea, {
+        onClick: selectBot,
+        role: "link",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_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__*/(0, _jsxRuntime.jsx)(_CardElements.CardVisibility, {
+          t: t,
+          visibility: visibility
+        })]
+      }), userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_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__*/(0, _jsxRuntime.jsx)(_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",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Person.default, {
+          fontSize: "large"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardHeader, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardTitle, {
+        title: botName,
+        component: cardTitleComponent
+      }),
+      action: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: t("more_options"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "More Options",
+          onClick: event => setAnchorEl(event.currentTarget),
+          "data-cy": `${botName}-more-options`,
+          disabled: disableActions,
+          size: "large",
+          "aria-expanded": Boolean(anchorEl),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+        })
+      }),
+      subheader: createdByName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardContent, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardInfoSection, {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          mr: 2,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardInfoSectionItem, {
+            variant: "body2",
+            component: "span",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Public.default, {
+              sx: _CardElements.classes.infoIcon
+            }), learnLang && (0, _index2.capitalize)(t(learnLang))]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          mr: 2,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardInfoSectionItem, {
+            variant: "body2",
+            component: "span",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_School.default, {
+              sx: _CardElements.classes.infoIcon
+            }), t(`card_${bot.difficulty}`)]
+          })
+        }), !disablePlays && exerciseStartTotal > -1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardInfoSectionItem, {
+          variant: "body2",
+          component: "span",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayArrow.default, {
+            sx: _CardElements.classes.infoIcon
+          }), t("plays", {
+            number: (0, _index2.formatNumberTotal)(exerciseStartTotal)
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardDescription, {
+        variant: "body1",
+        color: "textSecondary",
+        component: "p",
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardActions, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: selectBot,
+        color: "primary",
+        variant: "outlined",
+        "data-cy": "bot_select_button",
+        disabled: disableActions,
+        "aria-label": `${t(selectText)}: ${botName}`,
+        children: t(selectText)
+      }), handleOpenPreview && !disablePreview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: () => {
+          handleOpenPreview(bot);
+        },
+        color: "primary",
+        "data-cy": "bot_preview_button",
+        disabled: disableActions,
+        "aria-label": `Preview bot:  ${botName}`,
+        children: t("preview")
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(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({

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

@@ -4,10 +4,10 @@ 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");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledCardTitle = (0, _system.styled)(_Typography.default, {
   shouldForwardProp: props => !["noWrap"].includes(props)
@@ -22,12 +22,13 @@ function CardTitle({
   title = "",
   component = "h3"
 }) {
-  return /*#__PURE__*/_react.default.createElement(StyledCardTitle, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardTitle, {
     variant: "h6",
     component: component,
     noWrap: true,
-    "aria-label": title
-  }, title.length > 25 ? title.substring(0, 25) + "..." : title);
+    "aria-label": title,
+    children: title.length > 25 ? title.substring(0, 25) + "..." : title
+  });
 }
 CardTitle.propTypes = {
   title: _propTypes.default.string.isRequired,