@local-civics/mgmt-ui 0.1.122 → 0.1.124

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Menu, ActionIcon, Grid, Table as Table$h, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
+import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Menu, ActionIcon, Grid, Table as Table$i, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
 import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconRoute, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { NotificationsProvider } from '@mantine/notifications';
@@ -42,7 +42,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$q = createStyles((theme) => ({
+const useStyles$r = createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -53,7 +53,7 @@ const useStyles$q = createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$q();
+  const { classes } = useStyles$r();
   return /* @__PURE__ */ React.createElement(Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -64,7 +64,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$p = createStyles((theme, _params, getRef) => {
+const useStyles$q = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -117,7 +117,7 @@ const useStyles$p = createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$p();
+  const { classes, theme, cx } = useStyles$q();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = useState(initiallyOpened || hasActiveLinks || false);
@@ -181,7 +181,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$o = createStyles((theme, _params, getRef) => {
+const useStyles$p = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -281,7 +281,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$o();
+  const { classes, cx } = useStyles$p();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -324,7 +324,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$n = createStyles((theme) => ({
+const useStyles$o = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -360,7 +360,7 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$o();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -374,7 +374,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$m = createStyles((theme) => ({
+const useStyles$n = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -415,7 +415,7 @@ const useStyles$m = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$m();
+  const { classes, theme } = useStyles$n();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React.createElement(Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -432,7 +432,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$l = createStyles((theme) => ({
+const useStyles$m = createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -476,7 +476,7 @@ const useStyles$l = createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$l();
+  const { classes } = useStyles$m();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -495,7 +495,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
 };
 
-const useStyles$k = createStyles((theme) => ({
+const useStyles$l = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -510,7 +510,7 @@ const useStyles$k = createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$k();
+  const { classes, theme } = useStyles$l();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
     Button,
@@ -547,7 +547,7 @@ const SplitButton$3 = (props) => {
   ))));
 };
 
-const useStyles$j = createStyles((theme) => ({
+const useStyles$k = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -598,7 +598,7 @@ const useStyles$j = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$j();
+  const { classes } = useStyles$k();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React.createElement(Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -612,7 +612,7 @@ function Stack$2(props) {
   return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
-function Table$g(props) {
+function Table$h(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -651,7 +651,7 @@ function Table$g(props) {
   ));
 }
 
-function Table$f(props) {
+function Table$g(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -667,10 +667,10 @@ function Table$f(props) {
     const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
     return /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, percentageCompletion, "%"));
   });
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$i = createStyles((theme) => ({
+const useStyles$j = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -683,7 +683,7 @@ const useStyles$i = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$i();
+  const { classes } = useStyles$j();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -734,13 +734,13 @@ const Badge = (props) => {
       onChange: setTab
     }
   ), (!!props.trial || tab === "lessons") && /* @__PURE__ */ React.createElement(
-    Table$f,
+    Table$g,
     {
       loading: props.loading,
       items: props.lessons
     }
   ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$g,
+    Table$h,
     {
       loading: props.loading,
       items: props.students
@@ -748,7 +748,7 @@ const Badge = (props) => {
   )))))));
 };
 
-function Table$e(props) {
+function Table$f(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -777,10 +777,10 @@ function Table$e(props) {
     },
     /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
   ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$h = createStyles((theme) => ({
+const useStyles$i = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -793,7 +793,7 @@ const useStyles$h = createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$h();
+  const { classes } = useStyles$i();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -802,7 +802,7 @@ const Badges = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$e,
+    Table$f,
     {
       loading: props.loading,
       items: props.badges
@@ -810,7 +810,7 @@ const Badges = (props) => {
   ))));
 };
 
-function Table$d(props) {
+function Table$e(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -823,7 +823,7 @@ function Table$d(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onViewProfile(row) }, row.studentName)), /* @__PURE__ */ React.createElement("td", null, row.className)));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Class Name"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Class Name"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 const units = [
@@ -850,7 +850,7 @@ function relativeTimeFromElapsed(elapsed) {
   return "";
 }
 
-function Table$c(props) {
+function Table$d(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -863,10 +863,10 @@ function Table$c(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName + row.lessonName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.lessonName), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, relativeTimeFromDates(new Date(row.updatedAt)))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Updated At"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Updated At"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-function Table$b(props) {
+function Table$c(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -879,10 +879,10 @@ function Table$b(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.impactStatement)));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-function Table$a(props) {
+function Table$b(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -895,10 +895,10 @@ function Table$a(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React.createElement("td", null, row.description), /* @__PURE__ */ React.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Badge Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Badge Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-function Table$9(props) {
+function Table$a(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -911,7 +911,7 @@ function Table$9(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(row) }, row.name)), /* @__PURE__ */ React.createElement("td", null, row.description), /* @__PURE__ */ React.createElement("td", null, Math.round((row.percentageCompletion + Number.EPSILON) * 100), "%")));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "Completion"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 const Dashboard = (props) => {
@@ -963,33 +963,33 @@ const Dashboard = (props) => {
       onChange: setTab
     }
   ), tab === "impact" && /* @__PURE__ */ React.createElement(
-    Table$b,
+    Table$c,
     {
       loading: props.loading,
       items: props.impacts
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
-    Table$c,
+    Table$d,
     {
       loading: props.loading,
       items: props.reflections
     }
   ), tab === "badges" && /* @__PURE__ */ React.createElement(
-    Table$a,
+    Table$b,
     {
       loading: props.loading,
       items: props.badges,
       onClick: props.onBadgeClick
     }
   ), tab === "lessons" && /* @__PURE__ */ React.createElement(
-    Table$9,
+    Table$a,
     {
       loading: props.loading,
       items: props.lessons,
       onClick: props.onLessonClick
     }
   ), tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$d,
+    Table$e,
     {
       loading: props.loading,
       items: props.students,
@@ -1016,7 +1016,7 @@ const SplitButton$2 = (props) => {
   ));
 };
 
-function Table$8(props) {
+function Table$9(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1045,7 +1045,7 @@ function Table$8(props) {
       data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }]
     }
   ))), /* @__PURE__ */ React.createElement("td", null, row.badgesEarned), /* @__PURE__ */ React.createElement("td", null, row.lessonsCompleted), /* @__PURE__ */ React.createElement("td", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { color: "green" })), /* @__PURE__ */ React.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "Last Active"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "Last Active"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 var __defProp$7 = Object.defineProperty;
@@ -1067,7 +1067,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const useStyles$g = createStyles((theme) => ({
+const useStyles$h = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1100,7 +1100,7 @@ const useStyles$g = createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$g();
+  const { classes } = useStyles$h();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1190,7 +1190,7 @@ const Class = (props) => {
       value: props.numberOfLessonsCompleted
     }
   ] }), /* @__PURE__ */ React.createElement(
-    Table$8,
+    Table$9,
     {
       loading: props.loading,
       items: props.members,
@@ -1200,7 +1200,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$g();
+  const { classes, theme } = useStyles$h();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -1246,7 +1246,7 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-function Table$7(props) {
+function Table$8(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1267,7 +1267,7 @@ function Table$7(props) {
     onConfirm: () => props.onDeleteClass(group)
   });
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.classId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.name))), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.description)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { size: 14 }, row.numberOfStudents || 0)), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Class Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "# of Students"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Class Name"), /* @__PURE__ */ React.createElement("th", null, "Description"), /* @__PURE__ */ React.createElement("th", null, "# of Students"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 var __defProp$6 = Object.defineProperty;
@@ -1286,7 +1286,7 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-const useStyles$f = createStyles((theme) => ({
+const useStyles$g = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1299,7 +1299,7 @@ const useStyles$f = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$g();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1361,7 +1361,7 @@ const Classes = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React.createElement(
-    Table$7,
+    Table$8,
     {
       loading: props.loading,
       items: props.classes,
@@ -1370,7 +1370,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$e = createStyles((theme) => ({
+const useStyles$f = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1384,11 +1384,11 @@ const useStyles$e = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$f();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
-function Table$6(props) {
+function Table$7(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1424,7 +1424,7 @@ function Table$6(props) {
   ));
 }
 
-function Table$5(props) {
+function Table$6(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1437,10 +1437,10 @@ function Table$5(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.questionName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.questionName), /* @__PURE__ */ React.createElement("td", null, row.answer.join(","))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Question"), /* @__PURE__ */ React.createElement("th", null, "Answer"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Question"), /* @__PURE__ */ React.createElement("th", null, "Answer"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-function Table$4(props) {
+function Table$5(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1453,7 +1453,7 @@ function Table$4(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonName }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.lessonName)), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 const Student = (props) => {
@@ -1502,19 +1502,19 @@ const Student = (props) => {
       onChange: setTab
     }
   ), tab === "badges" && /* @__PURE__ */ React.createElement(
-    Table$6,
+    Table$7,
     {
       loading: props.loading,
       items: props.badges
     }
   ), tab === "answers" && /* @__PURE__ */ React.createElement(
-    Table$5,
+    Table$6,
     {
       loading: props.loading,
       items: props.answers
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
-    Table$4,
+    Table$5,
     {
       loading: props.loading,
       items: props.reflections
@@ -1522,7 +1522,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$d = createStyles((theme, props) => {
+const useStyles$e = createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1550,7 +1550,7 @@ const useStyles$d = createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$d(props);
+  const { classes } = useStyles$e(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React.createElement(IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1594,7 +1594,7 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$c = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1633,7 +1633,7 @@ const TenantBanner = (_a) => {
     "style",
     "className"
   ]);
-  const { classes, cx, theme } = useStyles$c();
+  const { classes, cx, theme } = useStyles$d();
   return /* @__PURE__ */ React.createElement(
     Card,
     __spreadValues$5({
@@ -1699,7 +1699,7 @@ const Home = (props) => {
   )))));
 };
 
-function Table$3(props) {
+function Table$4(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1712,10 +1712,10 @@ function Table$3(props) {
     );
   }
   const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.studentName }, /* @__PURE__ */ React.createElement("td", null, row.studentName), /* @__PURE__ */ React.createElement("td", null, row.reflection), /* @__PURE__ */ React.createElement("td", null, row.rating.toLocaleString())));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Student Name"), /* @__PURE__ */ React.createElement("th", null, "Reflection"), /* @__PURE__ */ React.createElement("th", null, "Rating"))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$b = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1730,7 +1730,7 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$b();
+  const { classes, theme } = useStyles$c();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$3, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -1776,7 +1776,7 @@ function Stack$1(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
 }
 
-function Table$2(props) {
+function Table$3(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1883,7 +1883,7 @@ function Stack(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "…" : "");
 
-const useStyles$a = createStyles((theme) => ({
+const useStyles$b = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1896,7 +1896,7 @@ const useStyles$a = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$b();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -1993,13 +1993,13 @@ const Lesson = (props) => {
       items: props.questions
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
-    Table$3,
+    Table$4,
     {
       loading: props.loading,
       items: props.reflections
     }
   ), tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$2,
+    Table$3,
     {
       loading: props.loading,
       items: props.students
@@ -2007,7 +2007,7 @@ const Lesson = (props) => {
   )))))));
 };
 
-function Table$1(props) {
+function Table$2(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -2036,10 +2036,10 @@ function Table$1(props) {
     },
     /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
   ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$h, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$9 = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2052,7 +2052,7 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$a();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore units of instruction and/or see corresponding class progress."))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -2061,7 +2061,7 @@ const Lessons = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$1,
+    Table$2,
     {
       loading: props.loading,
       items: props.lessons
@@ -2069,7 +2069,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$8 = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2088,7 +2088,7 @@ const useStyles$8 = createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$9();
   return /* @__PURE__ */ React.createElement(Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React.createElement(Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React.createElement(TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React.createElement(Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React.createElement(
     Anchor,
     {
@@ -2116,7 +2116,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$7 = createStyles((theme) => ({
+const useStyles$8 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2146,7 +2146,7 @@ const useStyles$7 = createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$8();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
@@ -2172,7 +2172,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$6 = createStyles((theme) => ({
+const useStyles$7 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2187,7 +2187,7 @@ const useStyles$6 = createStyles((theme) => ({
   }
 }));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$6();
+  const { classes, theme } = useStyles$7();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withOrganizationLink;
   return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
@@ -2217,7 +2217,7 @@ const SplitButton = (props) => {
   ))));
 };
 
-function Table(props) {
+function Table$1(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -2246,7 +2246,7 @@ function Table(props) {
       data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
     }
   ))), /* @__PURE__ */ React.createElement("td", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { color: "green" })), /* @__PURE__ */ React.createElement("td", null, row.numberOfClasses), /* @__PURE__ */ React.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red" }, /* @__PURE__ */ React.createElement(IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
-  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$h, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "# of Classes"), /* @__PURE__ */ React.createElement("th", null, "Last Active"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
+  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$i, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "# of Classes"), /* @__PURE__ */ React.createElement("th", null, "Last Active"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
 var __defProp$4 = Object.defineProperty;
@@ -2268,7 +2268,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$5 = createStyles((theme) => ({
+const useStyles$6 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2298,7 +2298,7 @@ const useStyles$5 = createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$5();
+  const { classes } = useStyles$6();
   const form = useForm({
     initialValues: {
       userId: "",
@@ -2392,7 +2392,7 @@ const People = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React.createElement(
-    Table,
+    Table$1,
     {
       loading: props.loading,
       items: props.users,
@@ -2402,7 +2402,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$5();
+  const { classes, theme } = useStyles$6();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -2448,7 +2448,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$4 = createStyles((theme) => ({
+const useStyles$5 = createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2511,7 +2511,7 @@ const useStyles$4 = createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$4();
+  const { classes } = useStyles$5();
   const [name, setName] = React.useState("");
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Badge$1, { color: "violet" }, "Community"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.title), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(
     TextInput,
@@ -2568,7 +2568,7 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$3 = createStyles((theme) => ({
+const useStyles$4 = createStyles((theme) => ({
   action: {
     backgroundColor: "inherit",
     ":hover": {
@@ -2587,7 +2587,7 @@ const useStyles$3 = createStyles((theme) => ({
   }
 }));
 const TrialHome = (props) => {
-  const { classes } = useStyles$3();
+  const { classes } = useStyles$4();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Badge$1, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -2647,7 +2647,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const useStyles$2 = createStyles((theme, { checked }) => ({
+const useStyles$3 = createStyles((theme, { checked }) => ({
   button: {
     display: "flex",
     alignItems: "center",
@@ -2689,7 +2689,7 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$2({ checked: value });
+  const { classes, cx } = useStyles$3({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
     __spreadProps$2(__spreadValues$2({}, others), {
@@ -2750,7 +2750,7 @@ var __spreadValues$1 = (a, b) => {
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const useStyles$1 = createStyles((theme) => ({
+const useStyles$2 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -2813,7 +2813,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$1();
+  const { classes } = useStyles$2();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -2928,7 +2928,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const useStyles = createStyles((theme, props) => ({
+const useStyles$1 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3015,7 +3015,7 @@ const useStyles = createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles(props);
+  const { classes } = useStyles$1(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
@@ -3110,5 +3110,60 @@ const useAccount = (account, accounts, onAccountChange) => {
   };
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+function Table(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No pathway items to display",
+        description: "We don't have any pathway items to show you just yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
+    UnstyledButton,
+    {
+      component: Link,
+      to: row.href,
+      sx: (theme) => ({
+        display: "block",
+        width: "100%",
+        padding: theme.spacing.md,
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+        "&:hover": {
+          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
+        }
+      })
+    },
+    /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
+  ))));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$i, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+}
+
+const useStyles = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const Pathways = (props) => {
+  const { classes } = useStyles();
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Pathways"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Pathways"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Curated learning experiences for skill-building"))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      loading: props.loading,
+      items: props.pathways
+    }
+  ))));
+};
+
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map