@local-civics/mgmt-ui 0.1.66 → 0.1.68

package/dist/index.js

@@ -32,7 +32,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
 
-const useStyles$j = core.createStyles((theme) => ({
+const useStyles$n = core.createStyles((theme) => ({
   link: {
     width: 50,
     height: 50,
@@ -60,7 +60,7 @@ const data$1 = [
   { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
 ];
 const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
-  const { classes, cx } = useStyles$j();
+  const { classes, cx } = useStyles$n();
   return /* @__PURE__ */ React__namespace.createElement(core.Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React__namespace.createElement(Icon, { stroke: 1.5 })));
 };
 const Navbar = (props) => {
@@ -91,35 +91,35 @@ const Navbar = (props) => {
   ))));
 };
 
-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) => {
+var __defProp$6 = Object.defineProperty;
+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 __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$i = core.createStyles((theme) => ({
+const useStyles$m = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -130,8 +130,8 @@ const useStyles$i = core.createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$1(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$i();
-  return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$5({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
+  const { classes } = useStyles$m();
+  return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$6({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
 }
 
 const compact = (num) => {
@@ -141,7 +141,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$h = core.createStyles((theme, _params, getRef) => {
+const useStyles$l = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -194,7 +194,7 @@ const useStyles$h = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$h();
+  const { classes, theme, cx } = useStyles$l();
   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] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -239,26 +239,26 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
   ), hasLinks ? /* @__PURE__ */ React__namespace.createElement(core.Collapse, { in: opened }, items) : null);
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = 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) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = 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) => {
   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;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$g = core.createStyles((theme, _params, getRef) => {
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const useStyles$k = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -289,7 +289,7 @@ const useStyles$g = core.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$2(__spreadValues$4({}, theme.fn.focusStyles()), {
+    link: __spreadProps$3(__spreadValues$5({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -352,7 +352,7 @@ const data = [
   }
 ];
 function NestedNavbar(props) {
-  const { classes, cx } = useStyles$g();
+  const { classes, cx } = useStyles$k();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -362,12 +362,12 @@ function NestedNavbar(props) {
     }
     return /* @__PURE__ */ React__namespace.createElement(
       LinksGroup,
-      __spreadProps$2(__spreadValues$4(__spreadValues$4({
+      __spreadProps$3(__spreadValues$5(__spreadValues$5({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$4(__spreadValues$4({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$5(__spreadValues$5({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
@@ -389,7 +389,7 @@ function NestedNavbar(props) {
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$f = core.createStyles((theme) => ({
+const useStyles$j = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -430,7 +430,7 @@ const useStyles$f = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$f();
+  const { classes, theme } = useStyles$j();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -447,7 +447,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$e = core.createStyles((theme) => ({
+const useStyles$i = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -494,7 +494,7 @@ const useStyles$e = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data }) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$i();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -513,7 +513,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
 };
 
-const useStyles$d = core.createStyles((theme) => ({
+const useStyles$h = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -527,8 +527,8 @@ const useStyles$d = core.createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$d();
+const SplitButton$3 = (props) => {
+  const { classes, theme } = useStyles$h();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -565,7 +565,7 @@ const SplitButton$2 = (props) => {
   ))));
 };
 
-const useStyles$c = core.createStyles((theme) => ({
+const useStyles$g = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -616,7 +616,7 @@ const useStyles$c = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$g();
   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__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -630,7 +630,7 @@ function Stack$2(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
-function Table$f(props) {
+function Table$g(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -669,7 +669,7 @@ function Table$f(props) {
   ));
 }
 
-function Table$e(props) {
+function Table$f(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -688,7 +688,7 @@ function Table$e(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$b = core.createStyles((theme) => ({
+const useStyles$f = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -701,7 +701,7 @@ const useStyles$b = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$f();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -714,7 +714,7 @@ const Badge = (props) => {
     },
     "Badges"
   )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
-    SplitButton$2,
+    SplitButton$3,
     {
       href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
@@ -752,13 +752,13 @@ const Badge = (props) => {
       onChange: setTab
     }
   ), tab === "lessons" && /* @__PURE__ */ React__namespace.createElement(
-    Table$e,
+    Table$f,
     {
       loading: props.loading,
       items: props.lessons
     }
   ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
-    Table$f,
+    Table$g,
     {
       loading: props.loading,
       items: props.students
@@ -766,7 +766,7 @@ const Badge = (props) => {
   )))))));
 };
 
-function Table$d(props) {
+function Table$e(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -798,7 +798,7 @@ function Table$d(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$a = core.createStyles((theme) => ({
+const useStyles$e = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -811,7 +811,7 @@ const useStyles$a = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$e();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -820,7 +820,7 @@ const Badges = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
-    Table$d,
+    Table$e,
     {
       loading: props.loading,
       items: props.badges
@@ -828,7 +828,7 @@ const Badges = (props) => {
   ))));
 };
 
-function Table$c(props) {
+function Table$d(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -868,7 +868,7 @@ function relativeTimeFromElapsed(elapsed) {
   return "";
 }
 
-function Table$b(props) {
+function Table$c(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -884,7 +884,7 @@ function Table$b(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Updated At"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-function Table$a(props) {
+function Table$b(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -900,7 +900,7 @@ function Table$a(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Impact Statement"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-function Table$9(props) {
+function Table$a(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -916,7 +916,7 @@ function Table$9(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Badge Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-function Table$8(props) {
+function Table$9(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -983,33 +983,33 @@ const Dashboard = (props) => {
       onChange: setTab
     }
   ), tab === "impact" && /* @__PURE__ */ React__namespace.createElement(
-    Table$a,
+    Table$b,
     {
       loading: props.loading,
       items: props.impacts
     }
   ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
-    Table$b,
+    Table$c,
     {
       loading: props.loading,
       items: props.reflections
     }
   ), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(
-    Table$9,
+    Table$a,
     {
       loading: props.loading,
       items: props.badges,
       onClick: props.onBadgeClick
     }
   ), tab === "lessons" && /* @__PURE__ */ React__namespace.createElement(
-    Table$8,
+    Table$9,
     {
       loading: props.loading,
       items: props.lessons,
       onClick: props.onLessonClick
     }
   ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
-    Table$c,
+    Table$d,
     {
       loading: props.loading,
       items: props.students,
@@ -1018,7 +1018,7 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const useStyles$9 = core.createStyles((theme) => ({
+const useStyles$d = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1032,8 +1032,8 @@ const useStyles$9 = core.createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$9();
+const SplitButton$2 = (props) => {
+  const { classes, theme } = useStyles$d();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withClassLink;
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
@@ -1063,7 +1063,7 @@ const SplitButton$1 = (props) => {
   ))));
 };
 
-function Table$7(props) {
+function Table$8(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1095,26 +1095,26 @@ function Table$7(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Badges Earned"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lessons Completed"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "Last Active"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = 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$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = 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$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const useStyles$8 = core.createStyles((theme) => ({
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const useStyles$c = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1147,7 +1147,7 @@ const useStyles$8 = core.createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$c();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1179,27 +1179,27 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$1(__spreadValues$3({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$2(__spreadValues$4({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
       const values = form$1.values;
       form$1.reset();
       setOpened(false);
       props.onCreateMembers && props.onCreateMembers([values]);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$3({
+      __spreadValues$4({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form$1.getInputProps("email"))
     ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$3({
+      __spreadValues$4({
         label: "Given name",
         placeholder: "Given name"
       }, form$1.getInputProps("givenName"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$3({
+      __spreadValues$4({
         label: "Family name",
         placeholder: "Family name"
       }, form$1.getInputProps("familyName"))
@@ -1213,7 +1213,7 @@ const Class = (props) => {
     },
     "Classes"
   )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
-    SplitButton$1,
+    SplitButton$2,
     {
       withClassLink: props.withClassLink,
       onAddMembersClick: () => setOpened(true),
@@ -1222,7 +1222,7 @@ const Class = (props) => {
   ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
-      value: props.members.length
+      value: props.members.filter((a) => !a.isAdmin).length
     },
     {
       title: "ACCOUNT CREATION",
@@ -1238,7 +1238,7 @@ const Class = (props) => {
       value: props.numberOfLessonsCompleted
     }
   ] }), /* @__PURE__ */ React__namespace.createElement(
-    Table$7,
+    Table$8,
     {
       loading: props.loading,
       items: props.members,
@@ -1247,8 +1247,8 @@ const Class = (props) => {
     }
   ))))));
 };
-const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$8();
+const DropzoneButton$1 = (props) => {
+  const { classes, theme } = useStyles$c();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -1294,7 +1294,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-function Table$6(props) {
+function Table$7(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1318,23 +1318,23 @@ function Table$6(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Class Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Description"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Students"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-var __defProp$2 = Object.defineProperty;
-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 __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;
 };
-const useStyles$7 = core.createStyles((theme) => ({
+const useStyles$b = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1347,7 +1347,7 @@ const useStyles$7 = core.createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$b();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1377,14 +1377,14 @@ const Classes = (props) => {
       props.onCreateClass && props.onCreateClass(values);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$2({
+      __spreadValues$3({
         withAsterisk: true,
         label: "Name",
         placeholder: "Class name"
       }, form$1.getInputProps("name"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$2({
+      __spreadValues$3({
         label: "Description",
         placeholder: "A class for my first period English students"
       }, form$1.getInputProps("description"))
@@ -1409,7 +1409,7 @@ const Classes = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React__namespace.createElement(
-    Table$6,
+    Table$7,
     {
       loading: props.loading,
       items: props.classes,
@@ -1418,7 +1418,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$6 = core.createStyles((theme) => ({
+const useStyles$a = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1432,11 +1432,11 @@ const useStyles$6 = core.createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$6();
+  const { classes } = useStyles$a();
   return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
-function Table$5(props) {
+function Table$6(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1467,15 +1467,12 @@ function Table$5(props) {
       }, {
         accessor: "status",
         render: (row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Incomplete"))
-      }],
-      rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React__namespace.createElement(Stack$2, { items: record.lessons })
-      }
+      }]
     }
   ));
 }
 
-function Table$4(props) {
+function Table$5(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1491,7 +1488,7 @@ function Table$4(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Question"), /* @__PURE__ */ React__namespace.createElement("th", null, "Answer"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-function Table$3(props) {
+function Table$4(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1553,19 +1550,19 @@ const Student = (props) => {
       onChange: setTab
     }
   ), tab === "badges" && /* @__PURE__ */ React__namespace.createElement(
-    Table$5,
+    Table$6,
     {
       loading: props.loading,
       items: props.badges
     }
   ), tab === "answers" && /* @__PURE__ */ React__namespace.createElement(
-    Table$4,
+    Table$5,
     {
       loading: props.loading,
       items: props.answers
     }
   ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
-    Table$3,
+    Table$4,
     {
       loading: props.loading,
       items: props.reflections
@@ -1573,7 +1570,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$5 = core.createStyles((theme, props) => {
+const useStyles$9 = core.createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1601,7 +1598,7 @@ const useStyles$5 = core.createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$5(props);
+  const { classes } = useStyles$9(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React__namespace.createElement(icons.IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1617,35 +1614,35 @@ function CardGradient(props) {
   ), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
 }
 
-var __defProp$1 = Object.defineProperty;
-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 __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 __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$4 = core.createStyles((theme) => ({
+const useStyles$8 = core.createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1690,12 +1687,12 @@ const TenantBanner = (_a) => {
     "style",
     "className"
   ]);
-  const { classes, cx, theme } = useStyles$4();
+  const { classes, cx, theme } = useStyles$8();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Card,
-    __spreadValues$1({
+    __spreadValues$2({
       radius: "md",
-      style: __spreadValues$1({ backgroundImage: `url(${image})` }, style),
+      style: __spreadValues$2({ backgroundImage: `url(${image})` }, style),
       className: cx(classes.card, className)
     }, others),
     /* @__PURE__ */ React__namespace.createElement(
@@ -1772,7 +1769,7 @@ const Home = (props) => {
   )))));
 };
 
-function Table$2(props) {
+function Table$3(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1788,7 +1785,7 @@ function Table$2(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$3 = core.createStyles((theme) => ({
+const useStyles$7 = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1802,8 +1799,8 @@ const useStyles$3 = core.createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton = (props) => {
-  const { classes, theme } = useStyles$3();
+const SplitButton$1 = (props) => {
+  const { classes, theme } = useStyles$7();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -1848,7 +1845,7 @@ function Stack$1(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
 }
 
-function Table$1(props) {
+function Table$2(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -1955,7 +1952,7 @@ function Stack(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$2 = core.createStyles((theme) => ({
+const useStyles$6 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1968,7 +1965,7 @@ const useStyles$2 = core.createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$2();
+  const { classes } = useStyles$6();
   const [tab, setTab] = React.useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -1981,7 +1978,7 @@ const Lesson = (props) => {
     },
     "Lessons"
   )), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
-    SplitButton,
+    SplitButton$1,
     {
       href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
@@ -2026,13 +2023,13 @@ const Lesson = (props) => {
       items: props.questions
     }
   ), tab === "reflections" && /* @__PURE__ */ React__namespace.createElement(
-    Table$2,
+    Table$3,
     {
       loading: props.loading,
       items: props.reflections
     }
   ), tab === "students" && /* @__PURE__ */ React__namespace.createElement(
-    Table$1,
+    Table$2,
     {
       loading: props.loading,
       items: props.students
@@ -2040,7 +2037,7 @@ const Lesson = (props) => {
   )))))));
 };
 
-function Table(props) {
+function Table$1(props) {
   if (props.items.length === 0) {
     return /* @__PURE__ */ React__namespace.createElement(
       PlaceholderBanner,
@@ -2072,7 +2069,7 @@ function Table(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$1 = core.createStyles((theme) => ({
+const useStyles$5 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2085,7 +2082,7 @@ const useStyles$1 = core.createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$1();
+  const { classes } = useStyles$5();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore units of instruction and/or see corresponding class progress."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -2094,7 +2091,7 @@ const Lessons = (props) => {
       onChange: props.onAutocompleteChange
     }
   ), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(
-    Table,
+    Table$1,
     {
       loading: props.loading,
       items: props.lessons
@@ -2102,6 +2099,385 @@ const Lessons = (props) => {
   ))));
 };
 
+const useStyles$4 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 22,
+    fontWeight: 900,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`
+  },
+  controls: {
+    [theme.fn.smallerThan("xs")]: {
+      flexDirection: "column-reverse"
+    }
+  },
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      width: "100%",
+      textAlign: "center"
+    }
+  }
+}));
+function AccessCode(props) {
+  const { classes } = useStyles$4();
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React__namespace.createElement(
+    core.Anchor,
+    {
+      component: reactRouterDom.Link,
+      to: props.peopleLink,
+      color: "dimmed",
+      size: "sm",
+      className: classes.control
+    },
+    /* @__PURE__ */ React__namespace.createElement(core.Center, { inline: true }, /* @__PURE__ */ React__namespace.createElement(icons.IconPointer, { size: 12, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement(core.Box, { ml: 5 }, "See people in my organization"))
+  ), /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onCopyCode, className: classes.control }, "Copy code"))));
+}
+
+const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+const useStyles$3 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  },
+  wrapper: {
+    position: "relative",
+    marginBottom: 30
+  },
+  dropzone: {
+    borderWidth: 1,
+    paddingBottom: 50
+  },
+  icon: {
+    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
+  },
+  control: {
+    position: "absolute",
+    width: 250,
+    left: "calc(50% - 125px)",
+    bottom: -20
+  }
+}));
+const Organization = (props) => {
+  const { classes } = useStyles$3();
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
+    core.Badge,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Organization"
+  )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Overview"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description"))), /* @__PURE__ */ React__namespace.createElement(AccessCode, { value: props.accessCode, onCopyCode: props.onCopyAccessCode, peopleLink: props.peopleLink }), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "# OF STUDENTS",
+      value: props.numberOfStudents || 0
+    },
+    {
+      title: "# OF EDUCATORS",
+      value: props.numberOfEducators || 0
+    },
+    {
+      title: `ACTIVE USERS (${monthNames[new Date().getMonth()]})`,
+      value: props.percentageOfAccountsActive,
+      unit: "%"
+    }
+  ] }))))));
+};
+
+const useStyles$2 = core.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$2();
+  const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
+  const hasMenu = !!props.withOrganizationLink;
+  return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      className: hasMenu ? classes.button : "",
+      leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
+      onClick: props.onAddUsersClick
+    },
+    "Add members"
+  ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
+    core.ActionIcon,
+    {
+      variant: "filled",
+      color: theme.primaryColor,
+      size: 36,
+      className: classes.menuControl
+    },
+    /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
+  )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, !!props.withOrganizationLink && /* @__PURE__ */ React__namespace.createElement(
+    core.Menu.Item,
+    {
+      icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
+      onClick: props.onCopyOrganizationLinkClick
+    },
+    "Copy organization link"
+  ))));
+};
+
+function Table(props) {
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      PlaceholderBanner,
+      {
+        title: "No people to display",
+        description: "You have not rostered any people yet.",
+        loading: props.loading,
+        icon: "groups"
+      }
+    );
+  }
+  const openDeleteModal = (student) => modals.openConfirmModal({
+    title: `Delete "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}"?`,
+    centered: true,
+    children: /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm" }, "Are you sure you want to delete this person? This action is destructive and you will have to contact support to restore your data."),
+    labels: { confirm: "Delete", cancel: "No don't delete them" },
+    confirmProps: { color: "red" },
+    onConfirm: () => props.onDelete && props.onDelete(student)
+  });
+  const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement("tr", { key: row.email }, /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: row.href }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "xs", color: "dimmed" }, row.email))))), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Box, { maw: 150 }, /* @__PURE__ */ React__namespace.createElement(
+    core.Select,
+    {
+      size: "sm",
+      value: row.isAdmin ? "admin" : row.isGroupAdmin ? "educator" : "student",
+      onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
+      data: [{ value: "student", label: "Student" }, { value: "educator", label: "Educator" }, { value: "admin", label: "Admin" }]
+    }
+  ))), /* @__PURE__ */ React__namespace.createElement("td", null, row.hasAccount && /* @__PURE__ */ React__namespace.createElement(icons.IconCheck, { color: "green" })), /* @__PURE__ */ React__namespace.createElement("td", null, row.numberOfClasses), /* @__PURE__ */ React__namespace.createElement("td", null, row.lastActivity ? relativeTimeFromDates(row.lastActivity) : ""), /* @__PURE__ */ React__namespace.createElement("td", null, /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "red" }, /* @__PURE__ */ React__namespace.createElement(icons.IconTrash, { onClick: () => openDeleteModal(row), size: 16, stroke: 1.5 }))))));
+  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea, null, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Role"), /* @__PURE__ */ React__namespace.createElement("th", null, "Account Created?"), /* @__PURE__ */ React__namespace.createElement("th", null, "# of Classes"), /* @__PURE__ */ React__namespace.createElement("th", null, "Last Active"), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
+}
+
+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$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$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const useStyles$1 = core.createStyles((theme) => ({
+  title: {
+    fontSize: 34,
+    fontWeight: 900,
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: 24
+    }
+  },
+  description: {
+    maxWidth: 600
+  },
+  wrapper: {
+    position: "relative",
+    marginBottom: 30
+  },
+  dropzone: {
+    borderWidth: 1,
+    paddingBottom: 50
+  },
+  icon: {
+    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
+  },
+  control: {
+    position: "absolute",
+    width: 250,
+    left: "calc(50% - 125px)",
+    bottom: -20
+  }
+}));
+const People = (props) => {
+  const { classes } = useStyles$1();
+  const form$1 = form.useForm({
+    initialValues: {
+      userId: "",
+      email: "",
+      givenName: "",
+      familyName: "",
+      avatar: "",
+      role: "",
+      readonly: false,
+      lastActivity: null,
+      hasAccount: false,
+      numberOfClasses: 0,
+      href: "",
+      isAdmin: false,
+      isGroupAdmin: false
+    },
+    validate: {
+      email: (value) => /^\S+@\S+$/.test(value) && props.users.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
+    }
+  });
+  const [opened, setOpened] = React.useState(false);
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+    core.Drawer,
+    {
+      opened,
+      onClose: () => setOpened(false),
+      title: /* @__PURE__ */ React__namespace.createElement(core.Title, { size: "h5" }, "Add members"),
+      padding: "xl",
+      size: "xl"
+    },
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$1(__spreadValues$1({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React__namespace.createElement(core.Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React__namespace.createElement("form", { onSubmit: form$1.onSubmit(() => {
+      const values = form$1.values;
+      form$1.reset();
+      setOpened(false);
+      props.onCreateUsers && props.onCreateUsers([values]);
+    }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$1({
+        withAsterisk: true,
+        label: "Email",
+        placeholder: "Email"
+      }, form$1.getInputProps("email"))
+    ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$1({
+        label: "Given name",
+        placeholder: "Given name"
+      }, form$1.getInputProps("givenName"))
+    ), /* @__PURE__ */ React__namespace.createElement(
+      core.TextInput,
+      __spreadValues$1({
+        label: "Family name",
+        placeholder: "Family name"
+      }, form$1.getInputProps("familyName"))
+    )), /* @__PURE__ */ React__namespace.createElement(core.Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
+  ), /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
+    core.Badge,
+    {
+      variant: "filled",
+      leftSection: /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React__namespace.createElement(icons.IconArrowLeft, { size: 14 })),
+      size: "lg"
+    },
+    "Organization"
+  )), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "People"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Manage members of your organization")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
+    SplitButton,
+    {
+      withOrganizationLink: props.withOrganizationLink,
+      onAddUsersClick: () => setOpened(true),
+      onCopyOrganizationLinkClick: props.onCopyLinkClick
+    }
+  ))), /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+    {
+      title: "# OF PEOPLE",
+      value: props.users.length
+    },
+    {
+      title: "ACCOUNT CREATION",
+      value: props.percentageOfAccountsCreated,
+      unit: "%"
+    },
+    {
+      title: "PERCENTAGE ROSTERED",
+      unit: "%",
+      value: props.percentageRostered
+    }
+  ] }), /* @__PURE__ */ React__namespace.createElement(
+    core.Autocomplete,
+    {
+      placeholder: "Search for a people in your organization",
+      data: props.users.map((item) => item.email),
+      onChange: props.onAutocompleteChange
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    Table,
+    {
+      loading: props.loading,
+      items: props.users,
+      onDelete: props.onDeleteUser,
+      onRoleChange: props.onChangeUserRole
+    }
+  ))))));
+};
+const DropzoneButton = (props) => {
+  const { classes, theme } = useStyles$1();
+  const openRef = React__namespace.useRef(null);
+  const [loading, setLoading] = React__namespace.useState(false);
+  const onDrop = React__namespace.useCallback((acceptedFiles) => {
+    setLoading(true);
+    acceptedFiles.forEach((file) => {
+      papa__namespace.parse(file, {
+        download: true,
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: true,
+        worker: true,
+        complete: function(results) {
+          const data = results.data.filter((v) => /^\S+@\S+$/.test(v.email) && props.users.filter((u) => u.email === v.email).length === 0);
+          data.length > 0 && props.onCreateUsers && props.onCreateUsers(data);
+          setLoading(false);
+          props.close();
+        }
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(
+    dropzone.Dropzone,
+    {
+      loading,
+      openRef,
+      onDrop,
+      className: classes.dropzone,
+      radius: "md",
+      accept: [dropzone.MIME_TYPES.csv],
+      maxSize: 5 * 1024 ** 2
+    },
+    /* @__PURE__ */ React__namespace.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, /* @__PURE__ */ React__namespace.createElement(icons.IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, /* @__PURE__ */ React__namespace.createElement(icons.IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, /* @__PURE__ */ React__namespace.createElement(
+      icons.IconCloudUpload,
+      {
+        size: 50,
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+        stroke: 1.5
+      }
+    ))), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React__namespace.createElement(dropzone.Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React__namespace.createElement(core.Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React__namespace.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
+  ), /* @__PURE__ */ React__namespace.createElement(core.Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
+    var _a;
+    return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
+  } }, "Select file"));
+};
+
 const mycCache = core.createEmotionCache({
   key: "mantine",
   prepend: false
@@ -2334,6 +2710,8 @@ exports.Lesson = Lesson;
 exports.Lessons = Lessons;
 exports.Navbar = Navbar;
 exports.NestedNavbar = NestedNavbar;
+exports.Organization = Organization;
+exports.People = People;
 exports.Student = Student;
 exports.SwitchAccount = SwitchAccount;
 //# sourceMappingURL=index.js.map