@nualang/nualang-ui-components 0.1.1127 → 0.1.1129

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/Avatar/Avatar.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.Unselected = exports.Selected = exports.NotLoaded = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CreateBot = require("../../Forms/CreateBot/CreateBot.stories");
+var _Avatar = _interopRequireDefault(require("./Avatar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_Avatar.default, args);
+const props = exports.props = {
+  url: _CreateBot.avatars[0],
+  onSelect: url => console.log(url)
+};
+const story = {
+  title: "Cards/Avatar",
+  excludeStories: ["props"],
+  component: _Avatar.default
+};
+var _default = exports.default = story;
+const NotLoaded = exports.NotLoaded = Template.bind({});
+NotLoaded.args = {};
+NotLoaded.storyName = "not loaded";
+const Unselected = exports.Unselected = Template.bind({});
+Unselected.args = {
+  ...props
+};
+Unselected.storyName = "unselected";
+const Selected = exports.Selected = Template.bind({});
+Selected.args = {
+  ...props,
+  selected: true
+};
+Selected.storyName = "selected";

package/dist/Cards/Bot/Bot.js

@@ -0,0 +1,292 @@
+"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,
+  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.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
+};
+Bot.defaultProps = {
+  t: text => text,
+  selectText: "play",
+  subscription: {}
+};
+var _default = exports.default = Bot;

package/dist/Cards/Bot/Bot.stories.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.bot = exports.Verified = exports.NoPicture = exports.Loading = exports.IsCreator = exports.Default = exports.CommunityTemplate = exports.Award = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Bot = _interopRequireDefault(require("./Bot"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_Bot.default, args);
+const bot = exports.bot = {
+  botId: "12345",
+  botName: "Learn Greetings",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  plays: "12k",
+  userImage: "https://randomuser.me/api/portraits/women/31.jpg",
+  createdByName: "sam21",
+  difficulty: "A1",
+  learnLang: "spanish",
+  visibility: "public"
+};
+const props = exports.props = {
+  bot,
+  handleSelectBot: bot => console.log("selected(at Cards)", bot),
+  handlePlayBot: bot => console.log("play(at Cards)", bot),
+  handleEditBot: bot => console.log("edit(at Cards)", bot),
+  handleDeleteBot: bot => console.log("delete(at Cards)", bot),
+  handleShareBot: bot => console.log("share(at Cards)", bot),
+  handleViewUserProfile: username => {
+    alert(`User Selected ${username}`);
+  }
+};
+const story = {
+  title: "Cards/Bot",
+  excludeStories: ["props", "bot"],
+  component: _Bot.default
+};
+var _default = exports.default = story;
+const Loading = exports.Loading = Template.bind({});
+Loading.storyName = "loading";
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  ...props,
+  bot: {
+    ...bot,
+    picture: "https://api.imagecreator.fathominnovation.com/848/480/cccccc/757575/fa-handshake"
+  }
+};
+Default.storyName = "default";
+const Verified = exports.Verified = Template.bind({});
+Verified.args = {
+  ...props,
+  bot: {
+    ...bot,
+    verificationStatus: "approved",
+    picture: "https://api.imagecreator.fathominnovation.com/848/480/cccccc/757575/fa-handshake"
+  }
+};
+Verified.storyName = "verified";
+const Award = exports.Award = Template.bind({});
+Award.args = {
+  ...props,
+  bot: {
+    ...bot,
+    gameAward: "gold",
+    picture: "https://api.imagecreator.fathominnovation.com/848/480/cccccc/757575/fa-handshake"
+  }
+};
+Award.storyName = "awarded";
+const NoPicture = exports.NoPicture = Template.bind({});
+NoPicture.args = {
+  ...props,
+  bot
+};
+NoPicture.storyName = "no picture";
+const IsCreator = exports.IsCreator = Template.bind({});
+IsCreator.args = {
+  ...props,
+  isCreator: true
+};
+IsCreator.storyName = "is creator";
+const CommunityTemplate = exports.CommunityTemplate = Template.bind({});
+CommunityTemplate.args = {
+  ...props,
+  handleOpenPreview: () => {}
+};
+CommunityTemplate.storyName = "Community Template";

package/dist/Cards/Bot/Bot.test.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+require("intersection-observer");
+var _styles = require("@mui/material/styles");
+var _Bot = _interopRequireDefault(require("./Bot"));
+var _Bot2 = require("./Bot.stories");
+var _client = require("react-dom/client");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+it("renders without crashing", () => {
+  const div = (0, _client.createRoot)(document.createElement("div"));
+  const theme = (0, _styles.createTheme)();
+  div.render( /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Bot.default, _Bot2.props)));
+  div.unmount();
+});

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,40 @@
+"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
+}) {
+  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
+};
+CardTitle.defaultProps = {
+  title: "",
+  component: "h3"
+};
+var _default = exports.default = CardTitle;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CardTitle = _interopRequireDefault(require("./CardTitle"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 300
+  }
+}, /*#__PURE__*/_react.default.createElement(_CardTitle.default, args));
+const props = exports.props = {
+  t: t => t,
+  title: "This is a long string that is OK to truncate please and thank you"
+};
+const story = {
+  title: "Cards/CardTitle",
+  excludeStories: ["props"],
+  component: _CardTitle.default
+};
+var _default = exports.default = story;
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  ...props
+};
+Default.storyName = "default";

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,54 @@
+"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");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CardVisibility({
+  t,
+  visibility
+}) {
+  const isPublic = visibility === "public";
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    color: isPublic ? "success" : "info",
+    icon: isPublic ? /*#__PURE__*/_react.default.createElement(_Public.default, {
+      fontSize: "small"
+    }) : /*#__PURE__*/_react.default.createElement(_VpnLock.default, {
+      fontSize: "small"
+    }),
+    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
+};
+CardVisibility.defaultProps = {
+  t: t => t,
+  visibility: ""
+};
+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"
+}