@local-civics/mgmt-ui 0.1.190 → 0.1.192

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useMemo } 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, Stack as Stack$4, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$k, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
-import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconChevronUp, IconChevronDown, IconSelector, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+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, Stack as Stack$5, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$l, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
+import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconChevronUp, IconChevronDown, IconSelector, 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 { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -14,35 +14,35 @@ import AvatarInit from 'avatar-initials';
 import { Chart } from 'react-charts';
 import { useUncontrolled } from '@mantine/hooks';
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$w = createStyles((theme) => ({
+const useStyles$y = createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -53,8 +53,8 @@ const useStyles$w = createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$w();
-  return /* @__PURE__ */ React.createElement(Group, __spreadValues$c({ 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)));
+  const { classes } = useStyles$y();
+  return /* @__PURE__ */ React.createElement(Group, __spreadValues$d({ 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)));
 }
 
 const compact = (num) => {
@@ -64,7 +64,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$v = createStyles((theme, _params, getRef) => {
+const useStyles$x = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -117,7 +117,7 @@ const useStyles$v = createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$v();
+  const { classes, theme, cx } = useStyles$x();
   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);
@@ -162,26 +162,26 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
   ), hasLinks ? /* @__PURE__ */ React.createElement(Collapse, { in: opened }, items) : null);
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const useStyles$u = createStyles((theme, _params, getRef) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+const useStyles$w = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -212,7 +212,7 @@ const useStyles$u = createStyles((theme, _params, getRef) => {
       color: theme.colorScheme === "dark" ? theme.white : theme.black,
       borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
     },
-    link: __spreadProps$8(__spreadValues$b({}, theme.fn.focusStyles()), {
+    link: __spreadProps$9(__spreadValues$c({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -266,6 +266,7 @@ const data = [
   { label: "Pathways", icon: IconRoute },
   { label: "Badges", icon: IconAlbum },
   { label: "Lessons", icon: IconLambda },
+  { label: "File Locker", icon: IconClipboard },
   {
     label: "Organization",
     icon: IconBuilding,
@@ -281,7 +282,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$u();
+  const { classes, cx } = useStyles$w();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -294,12 +295,12 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React.createElement(
       LinksGroup,
-      __spreadProps$8(__spreadValues$b(__spreadValues$b({
+      __spreadProps$9(__spreadValues$c(__spreadValues$c({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$b(__spreadValues$b({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$c(__spreadValues$c({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
@@ -324,7 +325,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$t = createStyles((theme) => ({
+const useStyles$v = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -360,7 +361,7 @@ const useStyles$t = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$t();
+  const { classes } = useStyles$v();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -374,7 +375,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$s = createStyles((theme) => ({
+const useStyles$u = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -415,7 +416,7 @@ const useStyles$s = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$s();
+  const { classes, theme } = useStyles$u();
   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 +433,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$r = createStyles((theme) => ({
+const useStyles$t = createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -476,7 +477,7 @@ const useStyles$r = createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$r();
+  const { classes } = useStyles$t();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -496,7 +497,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$q = createStyles((theme) => ({
+const useStyles$s = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -510,10 +511,10 @@ const useStyles$q = createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$4 = (props) => {
-  const { classes, theme } = useStyles$q();
+const SplitButton$5 = (props) => {
+  const { classes, theme } = useStyles$s();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  return /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
     {
       component: Link,
@@ -539,7 +540,7 @@ const SplitButton$4 = (props) => {
   ));
 };
 
-const useStyles$p = createStyles((theme) => ({
+const useStyles$r = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -590,13 +591,13 @@ const useStyles$p = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$r();
   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 }));
 };
 
-function Stack$3(props) {
+function Stack$4(props) {
   if (props.items.length === 0) {
     return null;
   }
@@ -644,28 +645,28 @@ function useSortableData(items, config = { key: "", direction: null }) {
   return { items: sortedItems, requestSort, sortConfig };
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-function Table$j(props) {
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+function Table$k(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
+    return props.items.map((item) => __spreadProps$8(__spreadValues$b({}, item), {
       status: item.isComplete ? 1 : 0
     }));
   }, [props.items]);
@@ -711,13 +712,13 @@ function Table$j(props) {
         render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Incomplete"))
       }],
       rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$3, { items: record.lessons })
+        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$4, { items: record.lessons })
       }
     }
   ));
 }
 
-function Table$i(props) {
+function Table$j(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
@@ -762,7 +763,7 @@ function Table$i(props) {
   ));
 }
 
-const useStyles$o = createStyles((theme) => ({
+const useStyles$q = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -775,12 +776,12 @@ const useStyles$o = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$q();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
   numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
     {
       variant: "filled",
@@ -788,14 +789,14 @@ const Badge = (props) => {
       size: "lg"
     },
     "Back"
-  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$4, { ml: "auto" }, /* @__PURE__ */ React.createElement(
-    SplitButton$4,
+  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+    SplitButton$5,
     {
       href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
-  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: props.trial ? "LESSONS SUBMITTED" : "BADGE COMPLETION",
       value: props.trial ? props.lessonsCompleted || 0 : numberOfBadges,
@@ -816,7 +817,7 @@ const Badge = (props) => {
         return { value: g.classId, label: g.name };
       })
     }
-  ), /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
     Tabs,
     {
       value: tab,
@@ -827,13 +828,13 @@ const Badge = (props) => {
       onChange: setTab
     }
   ), (!!props.trial || tab === "lessons") && /* @__PURE__ */ React.createElement(
-    Table$i,
+    Table$j,
     {
       loading: props.loading,
       items: props.lessons
     }
   ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$j,
+    Table$k,
     {
       loading: props.loading,
       items: props.students
@@ -841,7 +842,7 @@ const Badge = (props) => {
   )))))));
 };
 
-function Table$h(props) {
+function Table$i(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -870,10 +871,10 @@ function Table$h(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$k, { 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$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$n = createStyles((theme) => ({
+const useStyles$p = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -886,8 +887,8 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$n();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { 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" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React.createElement(
+  const { classes } = useStyles$p();
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
       placeholder: "Search for a badge that fits your needs",
@@ -895,7 +896,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$h,
+    Table$i,
     {
       loading: props.loading,
       items: props.badges
@@ -903,7 +904,7 @@ const Badges = (props) => {
   ))));
 };
 
-function Table$g(props) {
+function Table$h(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -916,7 +917,7 @@ function Table$g(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$k, { 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$l, { 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 = [
@@ -943,7 +944,7 @@ function relativeTimeFromElapsed(elapsed) {
   return "";
 }
 
-function Table$f(props) {
+function Table$g(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -956,10 +957,10 @@ function Table$f(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$k, { 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$l, { 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$e(props) {
+function Table$f(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -972,10 +973,10 @@ function Table$e(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$k, { 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$l, { 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$d(props) {
+function Table$e(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -988,10 +989,10 @@ function Table$d(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$k, { 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$l, { 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$c(props) {
+function Table$d(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1004,12 +1005,12 @@ function Table$c(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$k, { 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$l, { 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) => {
   const [tab, setTab] = useState("students");
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Track your students\u2019 pathway progress")), /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { size: "h3" }, "Dashboard"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Track your students\u2019 pathway progress")), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
       value: props.students.length
@@ -1042,7 +1043,7 @@ const Dashboard = (props) => {
         return { value: g.classId, label: g.name };
       })
     }
-  ), /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
     Tabs,
     {
       value: tab,
@@ -1056,33 +1057,33 @@ const Dashboard = (props) => {
       onChange: setTab
     }
   ), tab === "impact" && /* @__PURE__ */ React.createElement(
-    Table$e,
+    Table$f,
     {
       loading: props.loading,
       items: props.impacts
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
-    Table$f,
+    Table$g,
     {
       loading: props.loading,
       items: props.reflections
     }
   ), tab === "badges" && /* @__PURE__ */ React.createElement(
-    Table$d,
+    Table$e,
     {
       loading: props.loading,
       items: props.badges,
       onClick: props.onBadgeClick
     }
   ), tab === "lessons" && /* @__PURE__ */ React.createElement(
-    Table$c,
+    Table$d,
     {
       loading: props.loading,
       items: props.lessons,
       onClick: props.onLessonClick
     }
   ), tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$g,
+    Table$h,
     {
       loading: props.loading,
       items: props.students,
@@ -1091,8 +1092,8 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const SplitButton$3 = (props) => {
-  return /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+const SplitButton$4 = (props) => {
+  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
     {
       leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 }),
@@ -1116,7 +1117,7 @@ const SplitButton$3 = (props) => {
   ));
 };
 
-const useStyles$m = createStyles((theme) => ({
+const useStyles$o = createStyles((theme) => ({
   th: { padding: "0 !important" },
   control: {
     width: "100%",
@@ -1127,11 +1128,11 @@ const useStyles$m = createStyles((theme) => ({
   }
 }));
 function Th$2({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$m();
+  const { classes } = useStyles$o();
   const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
   return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
 }
-function Table$b(props) {
+function Table$c(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
@@ -1161,7 +1162,7 @@ function Table$b(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$k, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
     Th$2,
     {
       sorted: sortConfig.key === "givenName",
@@ -1212,26 +1213,26 @@ function Table$b(props) {
   ), /* @__PURE__ */ React.createElement("th", null), " ")), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const useStyles$l = createStyles((theme) => ({
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+const useStyles$n = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1264,7 +1265,7 @@ const useStyles$l = createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$l();
+  const { classes } = useStyles$n();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1296,32 +1297,32 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$a({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
       const values = form.values;
       form.reset();
       setOpened(false);
       props.onCreateMembers && props.onCreateMembers([values]);
-    }) }, /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(
+    }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$9({
+      __spreadValues$a({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form.getInputProps("email"))
     ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$9({
+      __spreadValues$a({
         label: "Given name",
         placeholder: "Given name"
       }, form.getInputProps("givenName"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$9({
+      __spreadValues$a({
         label: "Family name",
         placeholder: "Family name"
       }, form.getInputProps("familyName"))
     )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
     {
       variant: "filled",
@@ -1330,13 +1331,13 @@ const Class = (props) => {
     },
     "Back"
   )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
-    SplitButton$3,
+    SplitButton$4,
     {
       onAddMembersClick: () => setOpened(true),
       onCopyClassLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
-  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
       value: props.members.filter((a) => !a.isAdmin).length
@@ -1355,7 +1356,7 @@ const Class = (props) => {
       value: props.numberOfLessonsCompleted
     }
   ] }), /* @__PURE__ */ React.createElement(
-    Table$b,
+    Table$c,
     {
       loading: props.loading,
       items: props.members,
@@ -1365,7 +1366,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$l();
+  const { classes, theme } = useStyles$n();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -1411,7 +1412,7 @@ const DropzoneButton$1 = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$k = createStyles((theme) => ({
+const useStyles$m = createStyles((theme) => ({
   th: { padding: "0 !important" },
   control: {
     width: "100%",
@@ -1422,11 +1423,11 @@ const useStyles$k = createStyles((theme) => ({
   }
 }));
 function Th$1({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$m();
   const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
   return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
 }
-function Table$a(props) {
+function Table$b(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
@@ -1448,7 +1449,7 @@ function Table$a(props) {
     onConfirm: () => props.onDeleteClass(group)
   });
   const rows = sortedItems.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$k, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
     Th$1,
     {
       sorted: sortConfig.key === "name",
@@ -1467,23 +1468,23 @@ function Table$a(props) {
   ), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-const useStyles$j = createStyles((theme) => ({
+const useStyles$l = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1496,7 +1497,7 @@ const useStyles$j = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$j();
+  const { classes } = useStyles$l();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1524,28 +1525,28 @@ const Classes = (props) => {
       form.reset();
       setOpened(false);
       props.onCreateClass && props.onCreateClass(values);
-    }) }, /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(
+    }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$8({
+      __spreadValues$9({
         withAsterisk: true,
         label: "Name",
         placeholder: "Class name"
       }, form.getInputProps("name"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$8({
+      __spreadValues$9({
         label: "Description",
         placeholder: "A class for my first period English students"
       }, form.getInputProps("description"))
     )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Create classes, cohorts, or custom subgroups")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Classes"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Organize people into classes"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Create classes, cohorts, or custom subgroups")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
     Button,
     {
       onClick: () => setOpened(true),
       leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 })
     },
     "Create class"
-  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF CLASSES",
       value: props.classes.length
@@ -1558,7 +1559,7 @@ const Classes = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React.createElement(
-    Table$a,
+    Table$b,
     {
       loading: props.loading,
       items: props.classes,
@@ -1567,7 +1568,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$i = createStyles((theme) => ({
+const useStyles$k = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1581,11 +1582,11 @@ const useStyles$i = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$i();
+  const { classes } = useStyles$k();
   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$9(props) {
+function Table$a(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1621,7 +1622,7 @@ function Table$9(props) {
   ));
 }
 
-function Table$8(props) {
+function Table$9(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1634,10 +1635,10 @@ function Table$8(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$k, { 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$l, { 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$7(props) {
+function Table$8(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -1650,14 +1651,14 @@ function Table$7(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$k, { 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$l, { 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) => {
   const [tab, setTab] = useState("badges");
   const numberOfBadgesCompleted = props.badges.length > 0 ? props.badges.filter((b) => b.isComplete).length : 0;
   const TEMPORARY_numberOfLessonsCompleted = props.lessons.filter((l) => l.isComplete).length;
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
       variant: "filled",
@@ -1672,7 +1673,7 @@ const Student = (props) => {
       name: props.name,
       impactStatement: props.impactStatement
     }
-  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "lg" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "lg" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "PROBLEMS SOLVED",
       value: props.numberOfProblemsSolved
@@ -1687,7 +1688,7 @@ const Student = (props) => {
       value: numberOfBadgesCompleted,
       unit: ""
     }
-  ] }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+  ] }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
     Tabs,
     {
       value: tab,
@@ -1699,19 +1700,19 @@ const Student = (props) => {
       onChange: setTab
     }
   ), tab === "badges" && /* @__PURE__ */ React.createElement(
-    Table$9,
+    Table$a,
     {
       loading: props.loading,
       items: props.badges
     }
   ), tab === "answers" && /* @__PURE__ */ React.createElement(
-    Table$8,
+    Table$9,
     {
       loading: props.loading,
       items: props.answers
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
-    Table$7,
+    Table$8,
     {
       loading: props.loading,
       items: props.reflections
@@ -1719,7 +1720,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$h = createStyles((theme, props) => {
+const useStyles$j = createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1747,7 +1748,7 @@ const useStyles$h = createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$h(props);
+  const { classes } = useStyles$j(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React.createElement(IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1763,35 +1764,35 @@ function CardGradient(props) {
   ), /* @__PURE__ */ React.createElement(Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React.createElement(Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
 }
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+  if (source != null && __getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$g = createStyles((theme) => ({
+const useStyles$i = createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1836,7 +1837,7 @@ const TenantBanner = (_a) => {
     "className",
     "code"
   ]);
-  const { classes, cx, theme } = useStyles$g();
+  const { classes, cx, theme } = useStyles$i();
   const handleCopy = async () => {
     if (!code)
       return;
@@ -1853,9 +1854,9 @@ const TenantBanner = (_a) => {
   };
   return /* @__PURE__ */ React.createElement(
     Card,
-    __spreadValues$7({
+    __spreadValues$8({
       radius: "md",
-      style: __spreadValues$7({ backgroundImage: `url(${image})` }, style),
+      style: __spreadValues$8({ backgroundImage: `url(${image})` }, style),
       className: cx(classes.card, className)
     }, others),
     /* @__PURE__ */ React.createElement(
@@ -1884,7 +1885,7 @@ const TenantBanner = (_a) => {
 };
 
 const Home = (props) => {
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "lg" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "lg" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
     UserInfo,
     {
       variant: "compact",
@@ -1934,10 +1935,17 @@ const Home = (props) => {
       description: "Bite-sized activities and learning experiences accelerating students achievement",
       onClick: props.onLessonsClick
     }
+  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+    CardGradient,
+    {
+      title: "File Locker",
+      description: "A secure space to view student-submitted work and provide feedback",
+      onClick: props.onFileLockerClick
+    }
   )))));
 };
 
-function Table$6(props) {
+function Table$7(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
@@ -1969,7 +1977,7 @@ function Table$6(props) {
   ));
 }
 
-const useStyles$f = createStyles((theme) => ({
+const useStyles$h = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1983,10 +1991,10 @@ const useStyles$f = createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$f();
+const SplitButton$3 = (props) => {
+  const { classes, theme } = useStyles$h();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  return /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
     {
       component: Link,
@@ -2013,36 +2021,36 @@ const SplitButton$2 = (props) => {
   ));
 };
 
-function Stack$2(props) {
+function Stack$3(props) {
   if (props.items.length === 0) {
     return null;
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React.createElement(Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React.createElement(Text, null, row.answer.join(",") || "No answer.")));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
+  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0, key: row.questionName }, /* @__PURE__ */ React.createElement(Title, { color: "dark.4", size: "lg" }, row.questionName), /* @__PURE__ */ React.createElement(Text, null, row.answer.join(",") || "No answer.")));
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-function Table$5(props) {
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+function Table$6(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$5(__spreadValues$6({}, item), {
+    return props.items.map((item) => __spreadProps$6(__spreadValues$7({}, item), {
       status: item.isComplete ? 2 : item.isStarted ? 1 : 0
     }));
   }, [props.items]);
@@ -2088,13 +2096,13 @@ function Table$5(props) {
         render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, !!row.isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", variant: "filled" }, "In progress"))
       }],
       rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$2, { href: record.href, items: record.answers })
+        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$3, { href: record.href, items: record.answers })
       }
     }
   ));
 }
 
-function Stack$1(props) {
+function Stack$2(props) {
   const primaryAxis = React.useMemo(
     () => ({
       position: "left",
@@ -2134,7 +2142,7 @@ function Stack$1(props) {
           labelMap[r] = labelMap[r] ? labelMap[r] + 1 : 1;
         }
       }));
-      return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement("div", { style: { background: "white", height: "300px", width: "100%", position: "relative" } }, /* @__PURE__ */ React.createElement(
         Chart,
         {
           options: {
@@ -2153,16 +2161,16 @@ function Stack$1(props) {
         }
       ))));
     }
-    return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 4 }, row.answers.map((a) => {
+    return /* @__PURE__ */ React.createElement(Card, { key: row.question, withBorder: true, p: "xl", radius: "md" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 4 }, /* @__PURE__ */ React.createElement(Title, { size: "lg" }, row.question), /* @__PURE__ */ React.createElement(Text, { size: "sm" }, row.answers.length, " answers"), /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 4 }, row.answers.map((a) => {
       const answerText = a.join("\n");
       return /* @__PURE__ */ React.createElement(Card, { key: answerText, p: 5, radius: 0, bg: "gray.0" }, /* @__PURE__ */ React.createElement(Text, null, answerText));
     })))));
   });
-  return /* @__PURE__ */ React.createElement(Stack$4, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
+  return /* @__PURE__ */ React.createElement(Stack$5, { py: 4, spacing: 10, sx: { minWidth: 700 } }, rows);
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$e = createStyles((theme) => ({
+const useStyles$g = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2175,7 +2183,7 @@ const useStyles$e = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$g();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -2217,7 +2225,7 @@ const Lesson = (props) => {
     { label: "By student", value: "students" },
     { label: "By reflection", value: "reflections" }
   ];
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
     {
       variant: "filled",
@@ -2225,15 +2233,15 @@ const Lesson = (props) => {
       size: "lg"
     },
     "Back"
-  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$4, { ml: "auto" }, /* @__PURE__ */ React.createElement(
-    SplitButton$2,
+  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+    SplitButton$3,
     {
       href: props.href,
       noExport: props.trial,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
-  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
     StatsGroup,
     {
       data: [
@@ -2259,7 +2267,7 @@ const Lesson = (props) => {
         return { value: g.classId, label: g.name };
       })
     }
-  ), /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
     Tabs,
     {
       value: tab,
@@ -2267,19 +2275,19 @@ const Lesson = (props) => {
       onChange: setTab
     }
   ), tab === "question" && /* @__PURE__ */ React.createElement(
-    Stack$1,
+    Stack$2,
     {
       loading: props.loading,
       items: props.questions
     }
   ), tab === "reflections" && /* @__PURE__ */ React.createElement(
-    Table$6,
+    Table$7,
     {
       loading: props.loading,
       items: props.reflections
     }
   ), tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$5,
+    Table$6,
     {
       loading: props.loading,
       items: props.students
@@ -2287,7 +2295,7 @@ const Lesson = (props) => {
   )))))));
 };
 
-function Table$4(props) {
+function Table$5(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -2316,10 +2324,10 @@ function Table$4(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$k, { 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$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$d = createStyles((theme) => ({
+const useStyles$f = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2332,8 +2340,8 @@ const useStyles$d = createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$d();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { 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" }, "Bite-sized activities and learning experiences accelerating students achievement"))), /* @__PURE__ */ React.createElement(
+  const { classes } = useStyles$f();
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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" }, "Bite-sized activities and learning experiences accelerating students achievement"))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
       placeholder: "Search for a lesson that fits your needs",
@@ -2341,7 +2349,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$4,
+    Table$5,
     {
       loading: props.loading,
       items: props.lessons
@@ -2349,7 +2357,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$c = createStyles((theme) => ({
+const useStyles$e = createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2368,7 +2376,7 @@ const useStyles$c = createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$e();
   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,
     {
@@ -2396,7 +2404,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$b = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2426,8 +2434,8 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$b();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  const { classes } = useStyles$d();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
     {
       variant: "filled",
@@ -2435,7 +2443,7 @@ const Organization = (props) => {
       size: "lg"
     },
     "Back"
-  )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Overview"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description"))), /* @__PURE__ */ React.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Overview"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description"))), /* @__PURE__ */ React.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
       value: props.numberOfStudents || 0
@@ -2452,7 +2460,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$a = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2466,8 +2474,8 @@ const useStyles$a = createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$a();
+const SplitButton$2 = (props) => {
+  const { classes, theme } = useStyles$c();
   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(
@@ -2497,7 +2505,7 @@ const SplitButton$1 = (props) => {
   ))));
 };
 
-function Table$3(props) {
+function Table$4(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -2526,29 +2534,29 @@ function Table$3(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$k, { 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$l, { 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$5 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const useStyles$9 = createStyles((theme) => ({
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+const useStyles$b = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2578,7 +2586,7 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$b();
   const form = useForm({
     initialValues: {
       userId: "",
@@ -2609,32 +2617,32 @@ const People = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$4(__spreadValues$5({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$5(__spreadValues$6({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
       const values = form.values;
       form.reset();
       setOpened(false);
       props.onCreateUsers && props.onCreateUsers([values]);
-    }) }, /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(
+    }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$5({
+      __spreadValues$6({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form.getInputProps("email"))
     ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$5({
+      __spreadValues$6({
         label: "Given name",
         placeholder: "Given name"
       }, form.getInputProps("givenName"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$5({
+      __spreadValues$6({
         label: "Family name",
         placeholder: "Family name"
       }, form.getInputProps("familyName"))
     )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
     {
       variant: "filled",
@@ -2643,13 +2651,13 @@ const People = (props) => {
     },
     "Back"
   )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "People"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Manage members of your organization")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
-    SplitButton$1,
+    SplitButton$2,
     {
       withOrganizationLink: props.withOrganizationLink,
       onAddUsersClick: () => setOpened(true),
       onCopyOrganizationLinkClick: props.onCopyLinkClick
     }
-  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF PEOPLE",
       value: props.users.length
@@ -2672,7 +2680,7 @@ const People = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React.createElement(
-    Table$3,
+    Table$4,
     {
       loading: props.loading,
       items: props.users,
@@ -2682,7 +2690,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$9();
+  const { classes, theme } = useStyles$b();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -2728,7 +2736,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$8 = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2791,7 +2799,7 @@ const useStyles$8 = createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$a();
   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,
@@ -2815,24 +2823,24 @@ const StartAnonymousLesson = (props) => {
   ))))));
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
 const BadgeGrid = (props) => {
-  const badges = props.badges.map((b) => /* @__PURE__ */ React.createElement(TaskCard, __spreadValues$4({ key: b.title }, b)));
+  const badges = props.badges.map((b) => /* @__PURE__ */ React.createElement(TaskCard, __spreadValues$5({ key: b.title }, b)));
   return /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
@@ -2848,7 +2856,7 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$7 = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   action: {
     backgroundColor: "inherit",
     ":hover": {
@@ -2867,7 +2875,7 @@ const useStyles$7 = createStyles((theme) => ({
   }
 }));
 const TrialHome = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$9();
   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,
     {
@@ -2879,7 +2887,7 @@ const TrialHome = (props) => {
       target: "_blank"
     },
     "UPGRADE NOW"
-  ), /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
     UserInfo,
     {
       variant: "compact",
@@ -2896,38 +2904,38 @@ const TrialHome = (props) => {
   )), /* @__PURE__ */ React.createElement(Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
 };
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$6 = createStyles((theme, { checked }) => ({
+const useStyles$8 = createStyles((theme, { checked }) => ({
   button: {
     display: "flex",
     alignItems: "center",
@@ -2969,10 +2977,10 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$6({ checked: value });
+  const { classes, cx } = useStyles$8({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
-    __spreadProps$3(__spreadValues$3({}, others), {
+    __spreadProps$4(__spreadValues$4({}, others), {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
@@ -2993,7 +3001,7 @@ function ImageCheckbox(_a) {
 function SelectGrid(props) {
   const items = props.items.map((item) => /* @__PURE__ */ React.createElement(
     ImageCheckbox,
-    __spreadProps$3(__spreadValues$3({}, item), {
+    __spreadProps$4(__spreadValues$4({}, item), {
       key: item.title,
       onChange: (checked) => props.onChange(item.title, checked)
     })
@@ -3011,26 +3019,26 @@ function SelectGrid(props) {
   );
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$5 = createStyles((theme) => ({
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const useStyles$7 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -3093,7 +3101,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$5();
+  const { classes } = useStyles$7();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -3139,7 +3147,7 @@ const TrialRegistration = (props) => {
       label: "School/Organization Name",
       placeholder: "What's the name of your school?",
       data: props.organizations.map((o) => {
-        return __spreadProps$2(__spreadValues$2({}, o), { value: o.displayName });
+        return __spreadProps$3(__spreadValues$3({}, o), { value: o.displayName });
       }),
       onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
       onChange: (next) => {
@@ -3151,7 +3159,7 @@ const TrialRegistration = (props) => {
     SelectGrid,
     {
       items: OPTIONS,
-      onChange: (e, checked) => setInterests(__spreadProps$2(__spreadValues$2({}, interests), { [e]: checked }))
+      onChange: (e, checked) => setInterests(__spreadProps$3(__spreadValues$3({}, interests), { [e]: checked }))
     }
   ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -3189,26 +3197,26 @@ const AdminProvider = (props) => {
   );
 };
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const useStyles$4 = createStyles((theme, props) => ({
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const useStyles$6 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3295,7 +3303,7 @@ const useStyles$4 = createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles$4(props);
+  const { classes } = useStyles$6(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
@@ -3303,7 +3311,7 @@ const App = (props) => {
       padding: "xs",
       navbar: props.navbar && /* @__PURE__ */ React.createElement(
         Navbar,
-        __spreadProps$1(__spreadValues$1({}, props.navbar.props), {
+        __spreadProps$2(__spreadValues$2({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
       ),
@@ -3390,7 +3398,7 @@ const useAccount = (account, accounts, onAccountChange) => {
   };
 };
 
-function Table$2(props) {
+function Table$3(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
       PlaceholderBanner,
@@ -3419,10 +3427,10 @@ function Table$2(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$k, { 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$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$3 = createStyles((theme) => ({
+const useStyles$5 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -3435,9 +3443,9 @@ const useStyles$3 = createStyles((theme) => ({
   }
 }));
 const Pathways = (props) => {
-  const { classes } = useStyles$3();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { 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" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$2,
+  const { classes } = useStyles$5();
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
+    Table$3,
     {
       loading: props.loading,
       items: props.pathways
@@ -3445,7 +3453,7 @@ const Pathways = (props) => {
   ))));
 };
 
-const useStyles$2 = createStyles((theme) => ({
+const useStyles$4 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -3459,10 +3467,10 @@ const useStyles$2 = createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton = (props) => {
-  const { classes, theme } = useStyles$2();
+const SplitButton$1 = (props) => {
+  const { classes, theme } = useStyles$4();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  return /* @__PURE__ */ React.createElement(Stack$4, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
     {
       component: Link,
@@ -3488,7 +3496,7 @@ const SplitButton = (props) => {
   ));
 };
 
-function Stack(props) {
+function Stack$1(props) {
   if (props.items.length === 0) {
     return null;
   }
@@ -3496,29 +3504,29 @@ function Stack(props) {
   return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function Table$1(props) {
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+function Table$2(props) {
   const preparedItems = React.useMemo(() => {
     return props.items.map((item) => {
-      const flatItem = __spreadProps(__spreadValues({}, item), {
+      const flatItem = __spreadProps$1(__spreadValues$1({}, item), {
         status: item.isComplete ? 1 : 0
       });
       if (item.categoryPoints) {
@@ -3586,13 +3594,13 @@ function Table$1(props) {
         }))
       ],
       rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack, { items: record.badges })
+        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack$1, { items: record.badges })
       }
     }
   ));
 }
 
-const useStyles$1 = createStyles((theme) => ({
+const useStyles$3 = createStyles((theme) => ({
   th: { padding: "0 !important" },
   control: {
     width: "100%",
@@ -3603,11 +3611,11 @@ const useStyles$1 = createStyles((theme) => ({
   }
 }));
 function Th({ children, reversed, sorted, onSort }) {
-  const { classes } = useStyles$1();
+  const { classes } = useStyles$3();
   const Icon = sorted ? reversed ? IconChevronUp : IconChevronDown : IconSelector;
   return /* @__PURE__ */ React.createElement("th", { className: classes.th }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: onSort, className: classes.control }, /* @__PURE__ */ React.createElement(Group, { position: "apart", noWrap: true, spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { whiteSpace: "nowrap" } }, children), /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: 1.5 })))));
 }
-function Table(props) {
+function Table$1(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
     return /* @__PURE__ */ React.createElement(
@@ -3624,7 +3632,7 @@ function Table(props) {
     const percentageCompletion = Math.round((row.percentageCompletion + Number.EPSILON) * 100);
     return /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(Text, { component: Link, to: row.href }, row.badgeName)), /* @__PURE__ */ React.createElement("td", null, percentageCompletion, "%"));
   });
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$k, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
     Th,
     {
       sorted: sortConfig.key === "badgeName",
@@ -3643,7 +3651,7 @@ function Table(props) {
   ))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles = createStyles((theme) => ({
+const useStyles$2 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -3656,12 +3664,12 @@ const useStyles = createStyles((theme) => ({
   }
 }));
 const Pathway = (props) => {
-  const { classes } = useStyles();
+  const { classes } = useStyles$2();
   const [tab, setTab] = useState("badges");
   const numberOfStudents = props.students.length;
   numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
   const numberOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$4, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
     {
       variant: "filled",
@@ -3669,14 +3677,14 @@ const Pathway = (props) => {
       size: "lg"
     },
     "Back"
-  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.title || "Pathway"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$4, { ml: "auto" }, /* @__PURE__ */ React.createElement(
-    SplitButton,
+  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.title || "Pathway"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+    SplitButton$1,
     {
       href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
-  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$4, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: props.trial ? "BADGES SUBMITTED" : "PATHWAY COMPLETION",
       value: props.trial ? 0 : numberOfBadgesEarned,
@@ -3697,7 +3705,7 @@ const Pathway = (props) => {
         return { value: g.classId, label: g.name };
       })
     }
-  ), /* @__PURE__ */ React.createElement(Stack$4, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
     Tabs,
     {
       value: tab,
@@ -3708,13 +3716,13 @@ const Pathway = (props) => {
       onChange: setTab
     }
   ), (!!props.trial || tab === "badges") && /* @__PURE__ */ React.createElement(
-    Table,
+    Table$1,
     {
       loading: props.loading,
       items: props.badges
     }
   ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
-    Table$1,
+    Table$2,
     {
       loading: props.loading,
       items: props.students,
@@ -3723,5 +3731,210 @@ const Pathway = (props) => {
   )))))));
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathway, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+const useStyles$1 = createStyles((theme) => ({
+  button: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    marginLeft: 0,
+    marginRight: 0
+  },
+  menuControl: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    border: 0,
+    borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
+  }
+}));
+const SplitButton = (props) => {
+  const { classes, theme } = useStyles$1();
+  theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
+  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      component: Link,
+      to: props.href,
+      className: classes.button,
+      variant: "gradient"
+    },
+    "Preview"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
+      onClick: props.onCopyLinkClick
+    },
+    "Copy link"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
+      onClick: props.onExportDataClick
+    },
+    "Export data (.csv)"
+  ));
+};
+
+function Stack(props) {
+  if (!props.items.length)
+    return null;
+  return /* @__PURE__ */ React.createElement(Grid, { gutter: "md", sx: { padding: 20, minWidth: 700 } }, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By link")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By badge")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By Lesson")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, { color: "dark.4", weight: "bold", size: "md" }, "By Question")), props.items.map((row, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement("a", { href: row.link, target: "_blank", rel: "noopener noreferrer" }, "View File")), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, null, row.badgeName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, null, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React.createElement(Text, null, row.question)))));
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function Table(props) {
+  const preparedItems = React.useMemo(() => {
+    return props.items.map((item) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, item), {
+        submissionCount: ((_a = item.submissions) == null ? void 0 : _a.length) || 0
+      });
+    });
+  }, [props.items]);
+  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      PlaceholderBanner,
+      {
+        title: "No files to display",
+        description: "There are no submitted files to display yet.",
+        loading: props.loading,
+        icon: "badges"
+      }
+    );
+  }
+  const sortStatus = {
+    columnAccessor: sortConfig.key,
+    direction: sortConfig.direction === "desc" ? "desc" : "asc"
+  };
+  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
+    DataTable,
+    {
+      verticalSpacing: "sm",
+      sx: { minWidth: 700 },
+      withBorder: false,
+      borderRadius: "sm",
+      withColumnBorders: true,
+      striped: true,
+      highlightOnHover: true,
+      records: sortedItems,
+      sortStatus,
+      onSortStatusChange: (status) => requestSort(status.columnAccessor),
+      idAccessor: "userId",
+      columns: [{
+        accessor: "name",
+        title: "Student Name",
+        sortable: true,
+        render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email)))
+      }, {
+        accessor: "submissionCount",
+        title: "Files",
+        sortable: true,
+        render: (row) => row.submissions.length
+      }],
+      rowExpansion: {
+        content: ({ record }) => /* @__PURE__ */ React.createElement(Stack, { items: record.submissions })
+      }
+    }
+  ));
+}
+
+const useStyles = createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  }
+}));
+const FileLocker = (props) => {
+  const { classes } = useStyles();
+  const [tab, setTab] = useState("students");
+  props.students.length;
+  const numberOfFiles = props.students.reduce(
+    (acc, s) => {
+      var _a;
+      return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
+    },
+    0
+  );
+  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { 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,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Back"
+  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "File"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
+    SplitButton,
+    {
+      href: props.href,
+      onCopyLinkClick: props.onCopyLinkClick,
+      onExportDataClick: props.onExportDataClick
+    }
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+    {
+      title: props.trial ? "LESSONS SUBMITTED" : "FILES",
+      value: props.trial ? props.lessonsCompleted || 0 : numberOfFiles,
+      unit: props.trial ? "" : ""
+    }
+  ] }), !props.trial && /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      clearable: true,
+      clearButtonLabel: "Clear class selection",
+      size: "sm",
+      placeholder: "Select a class",
+      nothingFound: "No options",
+      value: props.classId,
+      onChange: props.onClassChange,
+      icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
+      data: props.classes.map((g) => {
+        return { value: g.classId, label: g.name };
+      })
+    }
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      value: tab,
+      data: [
+        { label: "By student", value: "students" },
+        { label: "By pathway", value: "pathways" },
+        { label: "By badge", value: "badges" },
+        { label: "By lesson", value: "lessons" }
+      ],
+      onChange: setTab
+    }
+  ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      loading: props.loading,
+      items: props.students
+    }
+  )))))));
+};
+
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, FileLocker, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathway, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map