@local-civics/mgmt-ui 0.1.73 → 0.1.74

package/dist/index.js

@@ -11,6 +11,8 @@ var form = require('@mantine/form');
 var papa = require('papaparse');
 var modals = require('@mantine/modals');
 var reactCharts = require('react-charts');
+var AvatarInit = require('avatar-initials');
+var hooks = require('@mantine/hooks');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -32,7 +34,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
 
-const useStyles$m = core.createStyles((theme) => ({
+const useStyles$p = core.createStyles((theme) => ({
   link: {
     width: 50,
     height: 50,
@@ -60,7 +62,7 @@ const data$1 = [
   { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
 ];
 const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
-  const { classes, cx } = useStyles$m();
+  const { classes, cx } = useStyles$p();
   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 +93,35 @@ const Navbar = (props) => {
   ))));
 };
 
-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) => {
+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$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$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;
 };
-var __objRest$1 = (source, exclude) => {
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$l = core.createStyles((theme) => ({
+const useStyles$o = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -129,9 +131,9 @@ const useStyles$l = 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$l();
-  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)));
+  var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
+  const { classes } = useStyles$o();
+  return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$9({ 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 +143,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$k = core.createStyles((theme, _params, getRef) => {
+const useStyles$n = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -194,7 +196,7 @@ const useStyles$k = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$k();
+  const { classes, theme, cx } = useStyles$n();
   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 +241,26 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
   ), hasLinks ? /* @__PURE__ */ React__namespace.createElement(core.Collapse, { in: opened }, items) : null);
 }
 
-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) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+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$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$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 __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$j = core.createStyles((theme, _params, getRef) => {
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+const useStyles$m = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -289,7 +291,7 @@ const useStyles$j = 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$3(__spreadValues$5({}, theme.fn.focusStyles()), {
+    link: __spreadProps$5(__spreadValues$8({}, theme.fn.focusStyles()), {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
@@ -352,7 +354,7 @@ const data = [
   }
 ];
 function NestedNavbar(props) {
-  const { classes, cx } = useStyles$j();
+  const { classes, cx } = useStyles$m();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -362,12 +364,12 @@ function NestedNavbar(props) {
     }
     return /* @__PURE__ */ React__namespace.createElement(
       LinksGroup,
-      __spreadProps$3(__spreadValues$5(__spreadValues$5({
+      __spreadProps$5(__spreadValues$8(__spreadValues$8({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$5(__spreadValues$5({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$8(__spreadValues$8({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
@@ -389,7 +391,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$i = core.createStyles((theme) => ({
+const useStyles$l = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -430,7 +432,7 @@ const useStyles$i = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$i();
+  const { classes, theme } = useStyles$l();
   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 +449,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$h = core.createStyles((theme) => ({
+const useStyles$k = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -494,7 +496,7 @@ const useStyles$h = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data }) => {
-  const { classes } = useStyles$h();
+  const { classes } = useStyles$k();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -513,7 +515,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$g = core.createStyles((theme) => ({
+const useStyles$j = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -528,7 +530,7 @@ const useStyles$g = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$g();
+  const { classes, theme } = useStyles$j();
   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 +567,7 @@ const SplitButton$3 = (props) => {
   ))));
 };
 
-const useStyles$f = core.createStyles((theme) => ({
+const useStyles$i = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -616,7 +618,7 @@ const useStyles$f = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$i();
   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 }));
@@ -688,7 +690,7 @@ function Table$f(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$e = core.createStyles((theme) => ({
+const useStyles$h = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -701,7 +703,7 @@ const useStyles$e = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$h();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -798,7 +800,7 @@ function Table$e(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$d = core.createStyles((theme) => ({
+const useStyles$g = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -811,7 +813,7 @@ const useStyles$d = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$g();
   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,
     {
@@ -1066,26 +1068,26 @@ function Table$8(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$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$7 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = 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$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$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$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$c = core.createStyles((theme) => ({
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const useStyles$f = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1118,7 +1120,7 @@ const useStyles$c = core.createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$f();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1150,27 +1152,27 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__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(() => {
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton$1, __spreadProps$4(__spreadValues$7({}, 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$4({
+      __spreadValues$7({
         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$4({
+      __spreadValues$7({
         label: "Given name",
         placeholder: "Given name"
       }, form$1.getInputProps("givenName"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$4({
+      __spreadValues$7({
         label: "Family name",
         placeholder: "Family name"
       }, form$1.getInputProps("familyName"))
@@ -1218,7 +1220,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$c();
+  const { classes, theme } = useStyles$f();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -1288,23 +1290,23 @@ function Table$7(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$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) => {
+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$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$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;
 };
-const useStyles$b = core.createStyles((theme) => ({
+const useStyles$e = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1317,7 +1319,7 @@ const useStyles$b = core.createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$e();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1347,14 +1349,14 @@ const Classes = (props) => {
       props.onCreateClass && props.onCreateClass(values);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$3({
+      __spreadValues$6({
         withAsterisk: true,
         label: "Name",
         placeholder: "Class name"
       }, form$1.getInputProps("name"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$3({
+      __spreadValues$6({
         label: "Description",
         placeholder: "A class for my first period English students"
       }, form$1.getInputProps("description"))
@@ -1388,7 +1390,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$a = core.createStyles((theme) => ({
+const useStyles$d = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1402,7 +1404,7 @@ const useStyles$a = core.createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$d();
   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));
 };
 
@@ -1540,7 +1542,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$9 = core.createStyles((theme, props) => {
+const useStyles$c = core.createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1568,7 +1570,7 @@ const useStyles$9 = core.createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$9(props);
+  const { classes } = useStyles$c(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 });
@@ -1584,35 +1586,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$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$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$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$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 __objRest = (source, exclude) => {
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$8 = core.createStyles((theme) => ({
+const useStyles$b = core.createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1650,7 +1652,7 @@ const TenantBanner = (_a) => {
     action,
     style,
     className
-  } = _b, others = __objRest(_b, [
+  } = _b, others = __objRest$1(_b, [
     "title",
     "description",
     "image",
@@ -1658,12 +1660,12 @@ const TenantBanner = (_a) => {
     "style",
     "className"
   ]);
-  const { classes, cx, theme } = useStyles$8();
+  const { classes, cx, theme } = useStyles$b();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Card,
-    __spreadValues$2({
+    __spreadValues$5({
       radius: "md",
-      style: __spreadValues$2({ backgroundImage: `url(${image})` }, style),
+      style: __spreadValues$5({ backgroundImage: `url(${image})` }, style),
       className: cx(classes.card, className)
     }, others),
     /* @__PURE__ */ React__namespace.createElement(
@@ -1756,7 +1758,7 @@ function Table$3(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$7 = core.createStyles((theme) => ({
+const useStyles$a = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1771,7 +1773,7 @@ const useStyles$7 = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$7();
+  const { classes, theme } = useStyles$a();
   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,
@@ -1923,7 +1925,7 @@ function Stack(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$6 = core.createStyles((theme) => ({
+const useStyles$9 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1936,7 +1938,7 @@ const useStyles$6 = core.createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$6();
+  const { classes } = useStyles$9();
   const [tab, setTab] = React.useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -2040,7 +2042,7 @@ function Table$1(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$5 = core.createStyles((theme) => ({
+const useStyles$8 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2053,7 +2055,7 @@ const useStyles$5 = core.createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$5();
+  const { classes } = useStyles$8();
   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,
     {
@@ -2070,7 +2072,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$4 = core.createStyles((theme) => ({
+const useStyles$7 = core.createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2089,7 +2091,7 @@ const useStyles$4 = core.createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$4();
+  const { classes } = useStyles$7();
   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,
     {
@@ -2117,7 +2119,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$3 = core.createStyles((theme) => ({
+const useStyles$6 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2147,7 +2149,7 @@ const useStyles$3 = core.createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$3();
+  const { classes } = useStyles$6();
   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,
     {
@@ -2173,7 +2175,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$2 = core.createStyles((theme) => ({
+const useStyles$5 = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2188,7 +2190,7 @@ const useStyles$2 = core.createStyles((theme) => ({
   }
 }));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$2();
+  const { classes, theme } = useStyles$5();
   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(
@@ -2250,26 +2252,26 @@ function Table(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, "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) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = 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$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$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$1 = core.createStyles((theme) => ({
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const useStyles$4 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2299,7 +2301,7 @@ const useStyles$1 = core.createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$1();
+  const { classes } = useStyles$4();
   const form$1 = form.useForm({
     initialValues: {
       userId: "",
@@ -2330,27 +2332,27 @@ const People = (props) => {
       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(() => {
+    /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(DropzoneButton, __spreadProps$3(__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.onCreateUsers && props.onCreateUsers([values]);
     }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$1({
+      __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$1({
+      __spreadValues$4({
         label: "Given name",
         placeholder: "Given name"
       }, form$1.getInputProps("givenName"))
     ), /* @__PURE__ */ React__namespace.createElement(
       core.TextInput,
-      __spreadValues$1({
+      __spreadValues$4({
         label: "Family name",
         placeholder: "Family name"
       }, form$1.getInputProps("familyName"))
@@ -2403,7 +2405,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$1();
+  const { classes, theme } = useStyles$4();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2449,6 +2451,373 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
+const useStyles$3 = core.createStyles((theme) => ({
+  wrapper: {
+    minHeight: 400,
+    boxSizing: "border-box",
+    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
+    borderRadius: theme.radius.md,
+    padding: theme.spacing.xl * 2.5,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      padding: theme.spacing.xl * 1.5
+    }
+  },
+  title: {
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    color: theme.white,
+    lineHeight: 1
+  },
+  description: {
+    color: theme.colors[theme.primaryColor][0],
+    maxWidth: 300,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      maxWidth: "100%"
+    }
+  },
+  form: {
+    backgroundColor: theme.white,
+    padding: theme.spacing.xl,
+    borderRadius: theme.radius.md,
+    boxShadow: theme.shadows.lg
+  },
+  social: {
+    color: theme.white,
+    "&:hover": {
+      color: theme.colors[theme.primaryColor][1]
+    }
+  },
+  input: {
+    backgroundColor: theme.white,
+    borderColor: theme.colors.gray[4],
+    color: theme.black,
+    "&::placeholder": {
+      color: theme.colors.gray[5]
+    }
+  },
+  inputLabel: {
+    color: theme.black
+  },
+  control: {
+    backgroundColor: theme.colors[theme.primaryColor][6]
+  }
+}));
+const StartAnonymousLesson = (props) => {
+  const { classes } = useStyles$3();
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 2, spacing: 50, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: "bold", className: classes.description, mt: "sm", mb: 30 }, "Instructor: ", props.educatorName), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.description, mt: "sm", mb: 30 }, props.description)), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(
+    core.TextInput,
+    {
+      label: "Name",
+      placeholder: "John Doe",
+      defaultValue: props.studentName,
+      readOnly: !!props.studentName,
+      required: true,
+      classNames: { input: classes.input, label: classes.inputLabel }
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onStart, className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson")))));
+};
+
+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$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 BadgeGrid = (props) => {
+  const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$3({ key: b.title }, b)));
+  return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 3, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, badges);
+};
+function TaskCard(props) {
+  const avatars = props.users.slice(0, 3).map((u, i) => {
+    const fullName = u.name;
+    let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
+    const src = AvatarInit.initialAvatar({
+      background: "#f4f6f7",
+      color: "#888888",
+      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      fontSize: 10,
+      fontWeight: 250,
+      size: 30,
+      initials
+    });
+    return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
+  });
+  const remainingUsers = props.users.slice(3).length;
+  const isComplete = props.lessonsCompleted >= props.lessonsTotal;
+  return /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { size: "lg", variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, /* @__PURE__ */ React__namespace.createElement(icons.IconBadge, { size: 20 })), isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, "Complete"), !isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Incomplete")), /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { to: props.href, mt: "md", sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500 }, props.title)), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: 5 }, props.description), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm", mt: "md" }, "Lessons completed:", " ", /* @__PURE__ */ React__namespace.createElement(
+    core.Text,
+    {
+      span: true,
+      weight: 500,
+      sx: (theme) => ({ color: theme.colorScheme === "dark" ? theme.white : theme.black })
+    },
+    props.lessonsCompleted,
+    "/",
+    props.lessonsTotal
+  )), /* @__PURE__ */ React__namespace.createElement(core.Progress, { value: props.lessonsCompleted / props.lessonsTotal * 100, mt: 5 }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar.Group, { spacing: "sm" }, avatars, !!remainingUsers && /* @__PURE__ */ React__namespace.createElement(core.Avatar, { radius: "xl" }, "+", remainingUsers)), /* @__PURE__ */ React__namespace.createElement(core.ActionIcon, { onClick: props.onCopy, variant: "default" }, /* @__PURE__ */ React__namespace.createElement(icons.IconCopy, { size: 18 }))));
+}
+
+const TrialHome = (props) => {
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+    UserInfo,
+    {
+      variant: "compact",
+      name: props.name,
+      impactStatement: ""
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    TenantBanner,
+    {
+      title: "Trial Account",
+      description: "Welcome to Local Civics! You are currently interacting with our trial experience.",
+      image: "https://cdn.localcivics.io/hub/landing.jpg",
+      action: {
+        label: "UPGRADE NOW",
+        link: props.upgradeHref
+      }
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { badges: props.badges })));
+};
+
+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$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$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = 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$2 = core.createStyles((theme, { checked }) => ({
+  button: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    transition: "background-color 150ms ease, border-color 150ms ease",
+    border: `1px solid ${checked ? theme.fn.variant({ variant: "outline", color: theme.primaryColor }).border : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
+    borderRadius: theme.radius.sm,
+    padding: theme.spacing.lg,
+    backgroundColor: checked ? theme.fn.variant({ variant: "light", color: theme.primaryColor }).background : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white
+  },
+  body: {
+    flex: 1,
+    marginLeft: theme.spacing.md
+  }
+}));
+function ImageCheckbox(_a) {
+  var _b = _a, {
+    checked,
+    defaultChecked,
+    onChange,
+    title,
+    description,
+    className,
+    icon: Icon
+  } = _b, others = __objRest(_b, [
+    "checked",
+    "defaultChecked",
+    "onChange",
+    "title",
+    "description",
+    "className",
+    "icon"
+  ]);
+  const [value, handleChange] = hooks.useUncontrolled({
+    value: checked,
+    defaultValue: defaultChecked,
+    finalValue: false,
+    onChange
+  });
+  const { classes, cx } = useStyles$2({ checked: value });
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.UnstyledButton,
+    __spreadProps$2(__spreadValues$2({}, others), {
+      onClick: () => handleChange(!value),
+      className: cx(classes.button, className)
+    }),
+    /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { variant: "light", size: "lg", color: "blue" }, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 40 })),
+    /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs", sx: { lineHeight: 1 }, mb: 5 }, description), /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm", sx: { lineHeight: 1 } }, title)),
+    /* @__PURE__ */ React__namespace.createElement(
+      core.Checkbox,
+      {
+        checked: value,
+        onChange: () => {
+        },
+        tabIndex: -1,
+        styles: { input: { cursor: "pointer" } }
+      }
+    )
+  );
+}
+function SelectGrid(props) {
+  const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
+    ImageCheckbox,
+    __spreadProps$2(__spreadValues$2({}, item), {
+      key: item.title,
+      onChange: (checked) => props.onChange(item.title, checked)
+    })
+  ));
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.SimpleGrid,
+    {
+      cols: 3,
+      breakpoints: [
+        { maxWidth: "md", cols: 2 },
+        { maxWidth: "sm", cols: 1 }
+      ]
+    },
+    items
+  );
+}
+
+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) => ({
+  wrapper: {
+    minHeight: 400,
+    boxSizing: "border-box",
+    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
+    borderRadius: theme.radius.md,
+    padding: theme.spacing.xl * 2.5,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      padding: theme.spacing.xl * 1.5
+    }
+  },
+  title: {
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    color: theme.white,
+    lineHeight: 1
+  },
+  description: {
+    color: theme.colors[theme.primaryColor][0],
+    maxWidth: 500,
+    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+      maxWidth: "100%"
+    }
+  },
+  form: {
+    backgroundColor: theme.white,
+    padding: theme.spacing.xl,
+    borderRadius: theme.radius.md,
+    boxShadow: theme.shadows.lg
+  },
+  social: {
+    color: theme.white,
+    "&:hover": {
+      color: theme.colors[theme.primaryColor][1]
+    }
+  },
+  input: {
+    backgroundColor: theme.white,
+    borderColor: theme.colors.gray[4],
+    color: theme.black,
+    "&::placeholder": {
+      color: theme.colors.gray[5]
+    }
+  },
+  inputLabel: {
+    color: theme.black
+  },
+  control: {
+    backgroundColor: theme.colors[theme.primaryColor][6]
+  }
+}));
+const OPTIONS = [
+  { description: "high school", title: "High school", icon: icons.IconHistory },
+  { description: "k - 8th", title: "K - 8th", icon: icons.IconLego },
+  { description: "civics", title: "Civics", icon: icons.IconNews },
+  { description: "project-based learning", title: "Project-based learning", icon: icons.IconTools },
+  { description: "college", title: "College", icon: icons.IconPodium },
+  { description: "career", title: "Career", icon: icons.IconAffiliate },
+  { description: "student leadership", title: "Student leadership", icon: icons.IconGrowth }
+];
+const TrialRegistration = (props) => {
+  const { classes } = useStyles$1();
+  const [firstName, setFirstName] = React__namespace.useState("");
+  const [lastName, setLastName] = React__namespace.useState("");
+  const [interests, setInterests] = React__namespace.useState({});
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 1, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Trial Educator"), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.description, mt: "sm", mb: 30 }, "Try out a some of the features we can bring to your classroom. No commitment required.")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(core.Group, { mb: "md", spacing: "md", grow: true }, /* @__PURE__ */ React__namespace.createElement(
+    core.TextInput,
+    {
+      label: "First Name",
+      placeholder: "John",
+      required: true,
+      classNames: { input: classes.input, label: classes.inputLabel },
+      onChange: (e) => setFirstName(e.target.value)
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    core.TextInput,
+    {
+      label: "Last Name",
+      placeholder: "Doe",
+      required: true,
+      classNames: { input: classes.input, label: classes.inputLabel },
+      onChange: (e) => setLastName(e.target.value)
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14, weight: 500, mb: "md", mt: "xl" }, "What are you interested in teaching?"), /* @__PURE__ */ React__namespace.createElement(
+    SelectGrid,
+    {
+      items: OPTIONS,
+      onChange: (e, checked) => setInterests(__spreadProps$1(__spreadValues$1({}, interests), { [e]: checked }))
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      onClick: () => props.onBegin({ firstName, lastName, interests: Object.keys(interests) }),
+      className: classes.control
+    },
+    "Begin trial"
+  )))));
+};
+
 const mycCache = core.createEmotionCache({
   key: "mantine",
   prepend: false
@@ -2683,6 +3052,9 @@ exports.Navbar = Navbar;
 exports.NestedNavbar = NestedNavbar;
 exports.Organization = Organization;
 exports.People = People;
+exports.StartAnonymousLesson = StartAnonymousLesson;
 exports.Student = Student;
 exports.SwitchAccount = SwitchAccount;
+exports.TrialHome = TrialHome;
+exports.TrialRegistration = TrialRegistration;
 //# sourceMappingURL=index.js.map