@local-civics/mgmt-ui 0.1.73 → 0.1.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +75 -23
  2. package/dist/index.js +536 -221
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +536 -223
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -11,6 +11,8 @@ var form = require('@mantine/form');
11
11
  var papa = require('papaparse');
12
12
  var modals = require('@mantine/modals');
13
13
  var reactCharts = require('react-charts');
14
+ var AvatarInit = require('avatar-initials');
15
+ var hooks = require('@mantine/hooks');
14
16
 
15
17
  function _interopNamespaceDefault(e) {
16
18
  var n = Object.create(null);
@@ -32,94 +34,35 @@ function _interopNamespaceDefault(e) {
32
34
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
33
35
  var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
34
36
 
35
- const useStyles$m = core.createStyles((theme) => ({
36
- link: {
37
- width: 50,
38
- height: 50,
39
- borderRadius: theme.radius.md,
40
- display: "flex",
41
- alignItems: "center",
42
- justifyContent: "center",
43
- color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
44
- "&:hover": {
45
- backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[0]
46
- }
47
- },
48
- active: {
49
- "&, &:hover": {
50
- backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
51
- color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
52
- }
53
- }
54
- }));
55
- const data$1 = [
56
- { icon: icons.IconHome2, label: "Home", href: "/home" },
57
- { icon: icons.IconGauge, label: "Dashboard", href: "/dashboard" },
58
- { icon: icons.IconCategory2, label: "Classes", href: "/classes" },
59
- { icon: icons.IconAlbum, label: "Badges", href: "/badges" },
60
- { icon: icons.IconLambda, label: "Lessons", href: "/lessons" }
61
- ];
62
- const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
63
- const { classes, cx } = useStyles$m();
64
- 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 })));
65
- };
66
- const Navbar = (props) => {
67
- const links = data$1.map((link) => /* @__PURE__ */ React__namespace.createElement(
68
- NavbarLink,
69
- {
70
- key: link.label,
71
- label: link.label,
72
- icon: link.icon,
73
- active: link.label === props.active,
74
- onClick: () => props.navigate(link.href)
75
- }
76
- ));
77
- return /* @__PURE__ */ React__namespace.createElement(core.Navbar, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Center, null, /* @__PURE__ */ React__namespace.createElement(core.Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React__namespace.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React__namespace.createElement(core.Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { justify: "center", spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
78
- NavbarLink,
79
- {
80
- icon: icons.IconSwitchHorizontal,
81
- label: "Switch accounts",
82
- onClick: props.onSwitchAccounts
83
- }
84
- ), /* @__PURE__ */ React__namespace.createElement(
85
- NavbarLink,
86
- {
87
- icon: icons.IconLogout,
88
- label: "Logout",
89
- onClick: props.onLogout
90
- }
91
- ))));
92
- };
93
-
94
- var __defProp$6 = Object.defineProperty;
95
- var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
96
- var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
97
- var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
98
- var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
99
- var __spreadValues$6 = (a, b) => {
37
+ var __defProp$9 = Object.defineProperty;
38
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
39
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
40
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
41
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
42
+ var __spreadValues$9 = (a, b) => {
100
43
  for (var prop in b || (b = {}))
101
- if (__hasOwnProp$6.call(b, prop))
102
- __defNormalProp$6(a, prop, b[prop]);
103
- if (__getOwnPropSymbols$6)
104
- for (var prop of __getOwnPropSymbols$6(b)) {
105
- if (__propIsEnum$6.call(b, prop))
106
- __defNormalProp$6(a, prop, b[prop]);
44
+ if (__hasOwnProp$9.call(b, prop))
45
+ __defNormalProp$9(a, prop, b[prop]);
46
+ if (__getOwnPropSymbols$9)
47
+ for (var prop of __getOwnPropSymbols$9(b)) {
48
+ if (__propIsEnum$9.call(b, prop))
49
+ __defNormalProp$9(a, prop, b[prop]);
107
50
  }
108
51
  return a;
109
52
  };
110
- var __objRest$1 = (source, exclude) => {
53
+ var __objRest$2 = (source, exclude) => {
111
54
  var target = {};
112
55
  for (var prop in source)
113
- if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
56
+ if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
114
57
  target[prop] = source[prop];
115
- if (source != null && __getOwnPropSymbols$6)
116
- for (var prop of __getOwnPropSymbols$6(source)) {
117
- if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
58
+ if (source != null && __getOwnPropSymbols$9)
59
+ for (var prop of __getOwnPropSymbols$9(source)) {
60
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
118
61
  target[prop] = source[prop];
119
62
  }
120
63
  return target;
121
64
  };
122
- const useStyles$l = core.createStyles((theme) => ({
65
+ const useStyles$o = core.createStyles((theme) => ({
123
66
  user: {
124
67
  display: "block",
125
68
  width: "100%",
@@ -129,9 +72,9 @@ const useStyles$l = core.createStyles((theme) => ({
129
72
  }
130
73
  }));
131
74
  function UserButton(_a) {
132
- var _b = _a, { image, name, email, icon } = _b, others = __objRest$1(_b, ["image", "name", "email", "icon"]);
133
- const { classes } = useStyles$l();
134
- 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)));
75
+ var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
76
+ const { classes } = useStyles$o();
77
+ 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)));
135
78
  }
136
79
 
137
80
  const compact = (num) => {
@@ -141,7 +84,7 @@ const compact = (num) => {
141
84
  }).format(num || 0);
142
85
  };
143
86
 
144
- const useStyles$k = core.createStyles((theme, _params, getRef) => {
87
+ const useStyles$n = core.createStyles((theme, _params, getRef) => {
145
88
  const icon = getRef("icon");
146
89
  return {
147
90
  control: {
@@ -194,7 +137,7 @@ const useStyles$k = core.createStyles((theme, _params, getRef) => {
194
137
  };
195
138
  });
196
139
  function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
197
- const { classes, theme, cx } = useStyles$k();
140
+ const { classes, theme, cx } = useStyles$n();
198
141
  const hasLinks = Array.isArray(links) && links.length > 0;
199
142
  const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
200
143
  const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -239,26 +182,26 @@ function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, n
239
182
  ), hasLinks ? /* @__PURE__ */ React__namespace.createElement(core.Collapse, { in: opened }, items) : null);
240
183
  }
241
184
 
242
- var __defProp$5 = Object.defineProperty;
243
- var __defProps$3 = Object.defineProperties;
244
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
245
- var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
246
- var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
247
- var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
248
- var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
249
- var __spreadValues$5 = (a, b) => {
185
+ var __defProp$8 = Object.defineProperty;
186
+ var __defProps$5 = Object.defineProperties;
187
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
188
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
189
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
190
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
191
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
192
+ var __spreadValues$8 = (a, b) => {
250
193
  for (var prop in b || (b = {}))
251
- if (__hasOwnProp$5.call(b, prop))
252
- __defNormalProp$5(a, prop, b[prop]);
253
- if (__getOwnPropSymbols$5)
254
- for (var prop of __getOwnPropSymbols$5(b)) {
255
- if (__propIsEnum$5.call(b, prop))
256
- __defNormalProp$5(a, prop, b[prop]);
194
+ if (__hasOwnProp$8.call(b, prop))
195
+ __defNormalProp$8(a, prop, b[prop]);
196
+ if (__getOwnPropSymbols$8)
197
+ for (var prop of __getOwnPropSymbols$8(b)) {
198
+ if (__propIsEnum$8.call(b, prop))
199
+ __defNormalProp$8(a, prop, b[prop]);
257
200
  }
258
201
  return a;
259
202
  };
260
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
261
- const useStyles$j = core.createStyles((theme, _params, getRef) => {
203
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
204
+ const useStyles$m = core.createStyles((theme, _params, getRef) => {
262
205
  const icon = getRef("icon");
263
206
  return {
264
207
  navbar: {
@@ -289,7 +232,7 @@ const useStyles$j = core.createStyles((theme, _params, getRef) => {
289
232
  color: theme.colorScheme === "dark" ? theme.white : theme.black,
290
233
  borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
291
234
  },
292
- link: __spreadProps$3(__spreadValues$5({}, theme.fn.focusStyles()), {
235
+ link: __spreadProps$5(__spreadValues$8({}, theme.fn.focusStyles()), {
293
236
  display: "flex",
294
237
  alignItems: "center",
295
238
  textDecoration: "none",
@@ -351,8 +294,8 @@ const data = [
351
294
  ]
352
295
  }
353
296
  ];
354
- function NestedNavbar(props) {
355
- const { classes, cx } = useStyles$j();
297
+ function Navbar(props) {
298
+ const { classes, cx } = useStyles$m();
356
299
  const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
357
300
  const toggle = () => setBurgerOpen(!burgerOpen);
358
301
  const links = data.map((item) => {
@@ -362,12 +305,12 @@ function NestedNavbar(props) {
362
305
  }
363
306
  return /* @__PURE__ */ React__namespace.createElement(
364
307
  LinksGroup,
365
- __spreadProps$3(__spreadValues$5(__spreadValues$5({
308
+ __spreadProps$5(__spreadValues$8(__spreadValues$8({
366
309
  key: item.label,
367
310
  active: props.active
368
311
  }, item), context), {
369
312
  links: (item.links || []).map((link) => {
370
- return __spreadValues$5(__spreadValues$5({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
313
+ return __spreadValues$8(__spreadValues$8({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
371
314
  })
372
315
  })
373
316
  );
@@ -389,7 +332,7 @@ function NestedNavbar(props) {
389
332
  } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
390
333
  }
391
334
 
392
- const useStyles$i = core.createStyles((theme) => ({
335
+ const useStyles$l = core.createStyles((theme) => ({
393
336
  title: {
394
337
  fontSize: 34,
395
338
  fontWeight: 900,
@@ -430,7 +373,7 @@ const useStyles$i = core.createStyles((theme) => ({
430
373
  }
431
374
  }));
432
375
  const SwitchAccount = (props) => {
433
- const { classes, theme } = useStyles$i();
376
+ const { classes, theme } = useStyles$l();
434
377
  const options = props.accounts.map((a) => {
435
378
  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")));
436
379
  });
@@ -447,7 +390,7 @@ const SwitchAccount = (props) => {
447
390
  );
448
391
  };
449
392
 
450
- const useStyles$h = core.createStyles((theme) => ({
393
+ const useStyles$k = core.createStyles((theme) => ({
451
394
  root: {
452
395
  display: "flex",
453
396
  backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -494,7 +437,7 @@ const useStyles$h = core.createStyles((theme) => ({
494
437
  }
495
438
  }));
496
439
  const StatsGroup = ({ data }) => {
497
- const { classes } = useStyles$h();
440
+ const { classes } = useStyles$k();
498
441
  const stats = data.map((stat) => {
499
442
  const value = (() => {
500
443
  if (stat.unit === "%") {
@@ -513,7 +456,7 @@ const Tabs = (props) => {
513
456
  return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
514
457
  };
515
458
 
516
- const useStyles$g = core.createStyles((theme) => ({
459
+ const useStyles$j = core.createStyles((theme) => ({
517
460
  button: {
518
461
  borderTopRightRadius: 0,
519
462
  borderBottomRightRadius: 0,
@@ -528,7 +471,7 @@ const useStyles$g = core.createStyles((theme) => ({
528
471
  }
529
472
  }));
530
473
  const SplitButton$3 = (props) => {
531
- const { classes, theme } = useStyles$g();
474
+ const { classes, theme } = useStyles$j();
532
475
  const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
533
476
  return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
534
477
  core.Button,
@@ -565,7 +508,7 @@ const SplitButton$3 = (props) => {
565
508
  ))));
566
509
  };
567
510
 
568
- const useStyles$f = core.createStyles((theme) => ({
511
+ const useStyles$i = core.createStyles((theme) => ({
569
512
  wrapper: {
570
513
  display: "flex",
571
514
  alignItems: "center",
@@ -616,7 +559,7 @@ const useStyles$f = core.createStyles((theme) => ({
616
559
  }
617
560
  }));
618
561
  const PlaceholderBanner = (props) => {
619
- const { classes } = useStyles$f();
562
+ const { classes } = useStyles$i();
620
563
  const title = props.title || "Nothing to display";
621
564
  const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
622
565
  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 +631,7 @@ function Table$f(props) {
688
631
  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)));
689
632
  }
690
633
 
691
- const useStyles$e = core.createStyles((theme) => ({
634
+ const useStyles$h = core.createStyles((theme) => ({
692
635
  title: {
693
636
  fontSize: 34,
694
637
  fontWeight: 900,
@@ -701,7 +644,7 @@ const useStyles$e = core.createStyles((theme) => ({
701
644
  }
702
645
  }));
703
646
  const Badge = (props) => {
704
- const { classes } = useStyles$e();
647
+ const { classes } = useStyles$h();
705
648
  const [tab, setTab] = React.useState("lessons");
706
649
  const numberOfStudents = props.students.length;
707
650
  const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -798,7 +741,7 @@ function Table$e(props) {
798
741
  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)));
799
742
  }
800
743
 
801
- const useStyles$d = core.createStyles((theme) => ({
744
+ const useStyles$g = core.createStyles((theme) => ({
802
745
  title: {
803
746
  fontSize: 34,
804
747
  fontWeight: 900,
@@ -811,7 +754,7 @@ const useStyles$d = core.createStyles((theme) => ({
811
754
  }
812
755
  }));
813
756
  const Badges = (props) => {
814
- const { classes } = useStyles$d();
757
+ const { classes } = useStyles$g();
815
758
  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(
816
759
  core.Autocomplete,
817
760
  {
@@ -1066,26 +1009,26 @@ function Table$8(props) {
1066
1009
  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)));
1067
1010
  }
1068
1011
 
1069
- var __defProp$4 = Object.defineProperty;
1070
- var __defProps$2 = Object.defineProperties;
1071
- var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
1072
- var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
1073
- var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
1074
- var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
1075
- var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1076
- var __spreadValues$4 = (a, b) => {
1012
+ var __defProp$7 = Object.defineProperty;
1013
+ var __defProps$4 = Object.defineProperties;
1014
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
1015
+ var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1016
+ var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1017
+ var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1018
+ var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1019
+ var __spreadValues$7 = (a, b) => {
1077
1020
  for (var prop in b || (b = {}))
1078
- if (__hasOwnProp$4.call(b, prop))
1079
- __defNormalProp$4(a, prop, b[prop]);
1080
- if (__getOwnPropSymbols$4)
1081
- for (var prop of __getOwnPropSymbols$4(b)) {
1082
- if (__propIsEnum$4.call(b, prop))
1083
- __defNormalProp$4(a, prop, b[prop]);
1021
+ if (__hasOwnProp$7.call(b, prop))
1022
+ __defNormalProp$7(a, prop, b[prop]);
1023
+ if (__getOwnPropSymbols$7)
1024
+ for (var prop of __getOwnPropSymbols$7(b)) {
1025
+ if (__propIsEnum$7.call(b, prop))
1026
+ __defNormalProp$7(a, prop, b[prop]);
1084
1027
  }
1085
1028
  return a;
1086
1029
  };
1087
- var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
1088
- const useStyles$c = core.createStyles((theme) => ({
1030
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
1031
+ const useStyles$f = core.createStyles((theme) => ({
1089
1032
  title: {
1090
1033
  fontSize: 34,
1091
1034
  fontWeight: 900,
@@ -1118,7 +1061,7 @@ const useStyles$c = core.createStyles((theme) => ({
1118
1061
  }
1119
1062
  }));
1120
1063
  const Class = (props) => {
1121
- const { classes } = useStyles$c();
1064
+ const { classes } = useStyles$f();
1122
1065
  const form$1 = form.useForm({
1123
1066
  initialValues: {
1124
1067
  classId: "",
@@ -1150,27 +1093,27 @@ const Class = (props) => {
1150
1093
  padding: "xl",
1151
1094
  size: "xl"
1152
1095
  },
1153
- /* @__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(() => {
1096
+ /* @__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(() => {
1154
1097
  const values = form$1.values;
1155
1098
  form$1.reset();
1156
1099
  setOpened(false);
1157
1100
  props.onCreateMembers && props.onCreateMembers([values]);
1158
1101
  }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1159
1102
  core.TextInput,
1160
- __spreadValues$4({
1103
+ __spreadValues$7({
1161
1104
  withAsterisk: true,
1162
1105
  label: "Email",
1163
1106
  placeholder: "Email"
1164
1107
  }, form$1.getInputProps("email"))
1165
1108
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
1166
1109
  core.TextInput,
1167
- __spreadValues$4({
1110
+ __spreadValues$7({
1168
1111
  label: "Given name",
1169
1112
  placeholder: "Given name"
1170
1113
  }, form$1.getInputProps("givenName"))
1171
1114
  ), /* @__PURE__ */ React__namespace.createElement(
1172
1115
  core.TextInput,
1173
- __spreadValues$4({
1116
+ __spreadValues$7({
1174
1117
  label: "Family name",
1175
1118
  placeholder: "Family name"
1176
1119
  }, form$1.getInputProps("familyName"))
@@ -1218,7 +1161,7 @@ const Class = (props) => {
1218
1161
  ))))));
1219
1162
  };
1220
1163
  const DropzoneButton$1 = (props) => {
1221
- const { classes, theme } = useStyles$c();
1164
+ const { classes, theme } = useStyles$f();
1222
1165
  const openRef = React__namespace.useRef(null);
1223
1166
  const [loading, setLoading] = React__namespace.useState(false);
1224
1167
  const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -1288,23 +1231,23 @@ function Table$7(props) {
1288
1231
  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)));
1289
1232
  }
1290
1233
 
1291
- var __defProp$3 = Object.defineProperty;
1292
- var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
1293
- var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
1294
- var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
1295
- var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1296
- var __spreadValues$3 = (a, b) => {
1234
+ var __defProp$6 = Object.defineProperty;
1235
+ var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
1236
+ var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
1237
+ var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
1238
+ var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1239
+ var __spreadValues$6 = (a, b) => {
1297
1240
  for (var prop in b || (b = {}))
1298
- if (__hasOwnProp$3.call(b, prop))
1299
- __defNormalProp$3(a, prop, b[prop]);
1300
- if (__getOwnPropSymbols$3)
1301
- for (var prop of __getOwnPropSymbols$3(b)) {
1302
- if (__propIsEnum$3.call(b, prop))
1303
- __defNormalProp$3(a, prop, b[prop]);
1241
+ if (__hasOwnProp$6.call(b, prop))
1242
+ __defNormalProp$6(a, prop, b[prop]);
1243
+ if (__getOwnPropSymbols$6)
1244
+ for (var prop of __getOwnPropSymbols$6(b)) {
1245
+ if (__propIsEnum$6.call(b, prop))
1246
+ __defNormalProp$6(a, prop, b[prop]);
1304
1247
  }
1305
1248
  return a;
1306
1249
  };
1307
- const useStyles$b = core.createStyles((theme) => ({
1250
+ const useStyles$e = core.createStyles((theme) => ({
1308
1251
  title: {
1309
1252
  fontSize: 34,
1310
1253
  fontWeight: 900,
@@ -1317,7 +1260,7 @@ const useStyles$b = core.createStyles((theme) => ({
1317
1260
  }
1318
1261
  }));
1319
1262
  const Classes = (props) => {
1320
- const { classes } = useStyles$b();
1263
+ const { classes } = useStyles$e();
1321
1264
  const form$1 = form.useForm({
1322
1265
  initialValues: {
1323
1266
  classId: "",
@@ -1347,14 +1290,14 @@ const Classes = (props) => {
1347
1290
  props.onCreateClass && props.onCreateClass(values);
1348
1291
  }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
1349
1292
  core.TextInput,
1350
- __spreadValues$3({
1293
+ __spreadValues$6({
1351
1294
  withAsterisk: true,
1352
1295
  label: "Name",
1353
1296
  placeholder: "Class name"
1354
1297
  }, form$1.getInputProps("name"))
1355
1298
  ), /* @__PURE__ */ React__namespace.createElement(
1356
1299
  core.TextInput,
1357
- __spreadValues$3({
1300
+ __spreadValues$6({
1358
1301
  label: "Description",
1359
1302
  placeholder: "A class for my first period English students"
1360
1303
  }, form$1.getInputProps("description"))
@@ -1388,7 +1331,7 @@ const Classes = (props) => {
1388
1331
  ))))));
1389
1332
  };
1390
1333
 
1391
- const useStyles$a = core.createStyles((theme) => ({
1334
+ const useStyles$d = core.createStyles((theme) => ({
1392
1335
  title: {
1393
1336
  fontSize: 34,
1394
1337
  fontWeight: 900,
@@ -1402,7 +1345,7 @@ const useStyles$a = core.createStyles((theme) => ({
1402
1345
  }
1403
1346
  }));
1404
1347
  const UserInfo = (props) => {
1405
- const { classes } = useStyles$a();
1348
+ const { classes } = useStyles$d();
1406
1349
  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));
1407
1350
  };
1408
1351
 
@@ -1540,7 +1483,7 @@ const Student = (props) => {
1540
1483
  ))))));
1541
1484
  };
1542
1485
 
1543
- const useStyles$9 = core.createStyles((theme, props) => {
1486
+ const useStyles$c = core.createStyles((theme, props) => {
1544
1487
  const from = props.from || "blue";
1545
1488
  const to = props.to || "green";
1546
1489
  return {
@@ -1568,7 +1511,7 @@ const useStyles$9 = core.createStyles((theme, props) => {
1568
1511
  };
1569
1512
  });
1570
1513
  function CardGradient(props) {
1571
- const { classes } = useStyles$9(props);
1514
+ const { classes } = useStyles$c(props);
1572
1515
  const from = props.from || "blue";
1573
1516
  const to = props.to || "green";
1574
1517
  const icon = props.icon || /* @__PURE__ */ React__namespace.createElement(icons.IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1584,35 +1527,35 @@ function CardGradient(props) {
1584
1527
  ), /* @__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));
1585
1528
  }
1586
1529
 
1587
- var __defProp$2 = Object.defineProperty;
1588
- var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
1589
- var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
1590
- var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
1591
- var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1592
- var __spreadValues$2 = (a, b) => {
1530
+ var __defProp$5 = Object.defineProperty;
1531
+ var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
1532
+ var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
1533
+ var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
1534
+ var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1535
+ var __spreadValues$5 = (a, b) => {
1593
1536
  for (var prop in b || (b = {}))
1594
- if (__hasOwnProp$2.call(b, prop))
1595
- __defNormalProp$2(a, prop, b[prop]);
1596
- if (__getOwnPropSymbols$2)
1597
- for (var prop of __getOwnPropSymbols$2(b)) {
1598
- if (__propIsEnum$2.call(b, prop))
1599
- __defNormalProp$2(a, prop, b[prop]);
1537
+ if (__hasOwnProp$5.call(b, prop))
1538
+ __defNormalProp$5(a, prop, b[prop]);
1539
+ if (__getOwnPropSymbols$5)
1540
+ for (var prop of __getOwnPropSymbols$5(b)) {
1541
+ if (__propIsEnum$5.call(b, prop))
1542
+ __defNormalProp$5(a, prop, b[prop]);
1600
1543
  }
1601
1544
  return a;
1602
1545
  };
1603
- var __objRest = (source, exclude) => {
1546
+ var __objRest$1 = (source, exclude) => {
1604
1547
  var target = {};
1605
1548
  for (var prop in source)
1606
- if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
1549
+ if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
1607
1550
  target[prop] = source[prop];
1608
- if (source != null && __getOwnPropSymbols$2)
1609
- for (var prop of __getOwnPropSymbols$2(source)) {
1610
- if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
1551
+ if (source != null && __getOwnPropSymbols$5)
1552
+ for (var prop of __getOwnPropSymbols$5(source)) {
1553
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
1611
1554
  target[prop] = source[prop];
1612
1555
  }
1613
1556
  return target;
1614
1557
  };
1615
- const useStyles$8 = core.createStyles((theme) => ({
1558
+ const useStyles$b = core.createStyles((theme) => ({
1616
1559
  card: {
1617
1560
  height: 240,
1618
1561
  backgroundSize: "cover",
@@ -1650,7 +1593,7 @@ const TenantBanner = (_a) => {
1650
1593
  action,
1651
1594
  style,
1652
1595
  className
1653
- } = _b, others = __objRest(_b, [
1596
+ } = _b, others = __objRest$1(_b, [
1654
1597
  "title",
1655
1598
  "description",
1656
1599
  "image",
@@ -1658,12 +1601,12 @@ const TenantBanner = (_a) => {
1658
1601
  "style",
1659
1602
  "className"
1660
1603
  ]);
1661
- const { classes, cx, theme } = useStyles$8();
1604
+ const { classes, cx, theme } = useStyles$b();
1662
1605
  return /* @__PURE__ */ React__namespace.createElement(
1663
1606
  core.Card,
1664
- __spreadValues$2({
1607
+ __spreadValues$5({
1665
1608
  radius: "md",
1666
- style: __spreadValues$2({ backgroundImage: `url(${image})` }, style),
1609
+ style: __spreadValues$5({ backgroundImage: `url(${image})` }, style),
1667
1610
  className: cx(classes.card, className)
1668
1611
  }, others),
1669
1612
  /* @__PURE__ */ React__namespace.createElement(
@@ -1756,7 +1699,7 @@ function Table$3(props) {
1756
1699
  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)));
1757
1700
  }
1758
1701
 
1759
- const useStyles$7 = core.createStyles((theme) => ({
1702
+ const useStyles$a = core.createStyles((theme) => ({
1760
1703
  button: {
1761
1704
  borderTopRightRadius: 0,
1762
1705
  borderBottomRightRadius: 0,
@@ -1771,7 +1714,7 @@ const useStyles$7 = core.createStyles((theme) => ({
1771
1714
  }
1772
1715
  }));
1773
1716
  const SplitButton$1 = (props) => {
1774
- const { classes, theme } = useStyles$7();
1717
+ const { classes, theme } = useStyles$a();
1775
1718
  const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1776
1719
  return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
1777
1720
  core.Button,
@@ -1923,7 +1866,7 @@ function Stack(props) {
1923
1866
  }
1924
1867
  const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
1925
1868
 
1926
- const useStyles$6 = core.createStyles((theme) => ({
1869
+ const useStyles$9 = core.createStyles((theme) => ({
1927
1870
  title: {
1928
1871
  fontSize: 34,
1929
1872
  fontWeight: 900,
@@ -1936,7 +1879,7 @@ const useStyles$6 = core.createStyles((theme) => ({
1936
1879
  }
1937
1880
  }));
1938
1881
  const Lesson = (props) => {
1939
- const { classes } = useStyles$6();
1882
+ const { classes } = useStyles$9();
1940
1883
  const [tab, setTab] = React.useState("question");
1941
1884
  const numberOfStudents = props.students.length;
1942
1885
  const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -2040,7 +1983,7 @@ function Table$1(props) {
2040
1983
  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)));
2041
1984
  }
2042
1985
 
2043
- const useStyles$5 = core.createStyles((theme) => ({
1986
+ const useStyles$8 = core.createStyles((theme) => ({
2044
1987
  title: {
2045
1988
  fontSize: 34,
2046
1989
  fontWeight: 900,
@@ -2053,7 +1996,7 @@ const useStyles$5 = core.createStyles((theme) => ({
2053
1996
  }
2054
1997
  }));
2055
1998
  const Lessons = (props) => {
2056
- const { classes } = useStyles$5();
1999
+ const { classes } = useStyles$8();
2057
2000
  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(
2058
2001
  core.Autocomplete,
2059
2002
  {
@@ -2070,7 +2013,7 @@ const Lessons = (props) => {
2070
2013
  ))));
2071
2014
  };
2072
2015
 
2073
- const useStyles$4 = core.createStyles((theme) => ({
2016
+ const useStyles$7 = core.createStyles((theme) => ({
2074
2017
  title: {
2075
2018
  fontSize: 22,
2076
2019
  fontWeight: 900,
@@ -2089,7 +2032,7 @@ const useStyles$4 = core.createStyles((theme) => ({
2089
2032
  }
2090
2033
  }));
2091
2034
  function AccessCode(props) {
2092
- const { classes } = useStyles$4();
2035
+ const { classes } = useStyles$7();
2093
2036
  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(
2094
2037
  core.Anchor,
2095
2038
  {
@@ -2117,7 +2060,7 @@ const monthNames = [
2117
2060
  "November",
2118
2061
  "December"
2119
2062
  ];
2120
- const useStyles$3 = core.createStyles((theme) => ({
2063
+ const useStyles$6 = core.createStyles((theme) => ({
2121
2064
  title: {
2122
2065
  fontSize: 34,
2123
2066
  fontWeight: 900,
@@ -2147,7 +2090,7 @@ const useStyles$3 = core.createStyles((theme) => ({
2147
2090
  }
2148
2091
  }));
2149
2092
  const Organization = (props) => {
2150
- const { classes } = useStyles$3();
2093
+ const { classes } = useStyles$6();
2151
2094
  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(
2152
2095
  core.Badge,
2153
2096
  {
@@ -2173,7 +2116,7 @@ const Organization = (props) => {
2173
2116
  ] }))))));
2174
2117
  };
2175
2118
 
2176
- const useStyles$2 = core.createStyles((theme) => ({
2119
+ const useStyles$5 = core.createStyles((theme) => ({
2177
2120
  button: {
2178
2121
  borderTopRightRadius: 0,
2179
2122
  borderBottomRightRadius: 0,
@@ -2188,7 +2131,7 @@ const useStyles$2 = core.createStyles((theme) => ({
2188
2131
  }
2189
2132
  }));
2190
2133
  const SplitButton = (props) => {
2191
- const { classes, theme } = useStyles$2();
2134
+ const { classes, theme } = useStyles$5();
2192
2135
  const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
2193
2136
  const hasMenu = !!props.withOrganizationLink;
2194
2137
  return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
@@ -2250,26 +2193,26 @@ function Table(props) {
2250
2193
  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)));
2251
2194
  }
2252
2195
 
2253
- var __defProp$1 = Object.defineProperty;
2254
- var __defProps$1 = Object.defineProperties;
2255
- var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
2256
- var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
2257
- var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
2258
- var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
2259
- var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2260
- var __spreadValues$1 = (a, b) => {
2196
+ var __defProp$4 = Object.defineProperty;
2197
+ var __defProps$3 = Object.defineProperties;
2198
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2199
+ var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2200
+ var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2201
+ var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
2202
+ var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2203
+ var __spreadValues$4 = (a, b) => {
2261
2204
  for (var prop in b || (b = {}))
2262
- if (__hasOwnProp$1.call(b, prop))
2263
- __defNormalProp$1(a, prop, b[prop]);
2264
- if (__getOwnPropSymbols$1)
2265
- for (var prop of __getOwnPropSymbols$1(b)) {
2266
- if (__propIsEnum$1.call(b, prop))
2267
- __defNormalProp$1(a, prop, b[prop]);
2205
+ if (__hasOwnProp$4.call(b, prop))
2206
+ __defNormalProp$4(a, prop, b[prop]);
2207
+ if (__getOwnPropSymbols$4)
2208
+ for (var prop of __getOwnPropSymbols$4(b)) {
2209
+ if (__propIsEnum$4.call(b, prop))
2210
+ __defNormalProp$4(a, prop, b[prop]);
2268
2211
  }
2269
2212
  return a;
2270
2213
  };
2271
- var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
2272
- const useStyles$1 = core.createStyles((theme) => ({
2214
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2215
+ const useStyles$4 = core.createStyles((theme) => ({
2273
2216
  title: {
2274
2217
  fontSize: 34,
2275
2218
  fontWeight: 900,
@@ -2299,7 +2242,7 @@ const useStyles$1 = core.createStyles((theme) => ({
2299
2242
  }
2300
2243
  }));
2301
2244
  const People = (props) => {
2302
- const { classes } = useStyles$1();
2245
+ const { classes } = useStyles$4();
2303
2246
  const form$1 = form.useForm({
2304
2247
  initialValues: {
2305
2248
  userId: "",
@@ -2330,27 +2273,27 @@ const People = (props) => {
2330
2273
  padding: "xl",
2331
2274
  size: "xl"
2332
2275
  },
2333
- /* @__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(() => {
2276
+ /* @__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(() => {
2334
2277
  const values = form$1.values;
2335
2278
  form$1.reset();
2336
2279
  setOpened(false);
2337
2280
  props.onCreateUsers && props.onCreateUsers([values]);
2338
2281
  }) }, /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
2339
2282
  core.TextInput,
2340
- __spreadValues$1({
2283
+ __spreadValues$4({
2341
2284
  withAsterisk: true,
2342
2285
  label: "Email",
2343
2286
  placeholder: "Email"
2344
2287
  }, form$1.getInputProps("email"))
2345
2288
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { grow: true }, /* @__PURE__ */ React__namespace.createElement(
2346
2289
  core.TextInput,
2347
- __spreadValues$1({
2290
+ __spreadValues$4({
2348
2291
  label: "Given name",
2349
2292
  placeholder: "Given name"
2350
2293
  }, form$1.getInputProps("givenName"))
2351
2294
  ), /* @__PURE__ */ React__namespace.createElement(
2352
2295
  core.TextInput,
2353
- __spreadValues$1({
2296
+ __spreadValues$4({
2354
2297
  label: "Family name",
2355
2298
  placeholder: "Family name"
2356
2299
  }, form$1.getInputProps("familyName"))
@@ -2403,7 +2346,7 @@ const People = (props) => {
2403
2346
  ))))));
2404
2347
  };
2405
2348
  const DropzoneButton = (props) => {
2406
- const { classes, theme } = useStyles$1();
2349
+ const { classes, theme } = useStyles$4();
2407
2350
  const openRef = React__namespace.useRef(null);
2408
2351
  const [loading, setLoading] = React__namespace.useState(false);
2409
2352
  const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2449,6 +2392,373 @@ const DropzoneButton = (props) => {
2449
2392
  } }, "Select file"));
2450
2393
  };
2451
2394
 
2395
+ const useStyles$3 = core.createStyles((theme) => ({
2396
+ wrapper: {
2397
+ minHeight: 400,
2398
+ boxSizing: "border-box",
2399
+ backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
2400
+ borderRadius: theme.radius.md,
2401
+ padding: theme.spacing.xl * 2.5,
2402
+ [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
2403
+ padding: theme.spacing.xl * 1.5
2404
+ }
2405
+ },
2406
+ title: {
2407
+ fontFamily: `Greycliff CF, ${theme.fontFamily}`,
2408
+ color: theme.white,
2409
+ lineHeight: 1
2410
+ },
2411
+ description: {
2412
+ color: theme.colors[theme.primaryColor][0],
2413
+ maxWidth: 300,
2414
+ [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
2415
+ maxWidth: "100%"
2416
+ }
2417
+ },
2418
+ form: {
2419
+ backgroundColor: theme.white,
2420
+ padding: theme.spacing.xl,
2421
+ borderRadius: theme.radius.md,
2422
+ boxShadow: theme.shadows.lg
2423
+ },
2424
+ social: {
2425
+ color: theme.white,
2426
+ "&:hover": {
2427
+ color: theme.colors[theme.primaryColor][1]
2428
+ }
2429
+ },
2430
+ input: {
2431
+ backgroundColor: theme.white,
2432
+ borderColor: theme.colors.gray[4],
2433
+ color: theme.black,
2434
+ "&::placeholder": {
2435
+ color: theme.colors.gray[5]
2436
+ }
2437
+ },
2438
+ inputLabel: {
2439
+ color: theme.black
2440
+ },
2441
+ control: {
2442
+ backgroundColor: theme.colors[theme.primaryColor][6]
2443
+ }
2444
+ }));
2445
+ const StartAnonymousLesson = (props) => {
2446
+ const { classes } = useStyles$3();
2447
+ 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(
2448
+ core.TextInput,
2449
+ {
2450
+ label: "Name",
2451
+ placeholder: "John Doe",
2452
+ defaultValue: props.studentName,
2453
+ readOnly: !!props.studentName,
2454
+ required: true,
2455
+ classNames: { input: classes.input, label: classes.inputLabel }
2456
+ }
2457
+ ), /* @__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")))));
2458
+ };
2459
+
2460
+ var __defProp$3 = Object.defineProperty;
2461
+ var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
2462
+ var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
2463
+ var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
2464
+ var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2465
+ var __spreadValues$3 = (a, b) => {
2466
+ for (var prop in b || (b = {}))
2467
+ if (__hasOwnProp$3.call(b, prop))
2468
+ __defNormalProp$3(a, prop, b[prop]);
2469
+ if (__getOwnPropSymbols$3)
2470
+ for (var prop of __getOwnPropSymbols$3(b)) {
2471
+ if (__propIsEnum$3.call(b, prop))
2472
+ __defNormalProp$3(a, prop, b[prop]);
2473
+ }
2474
+ return a;
2475
+ };
2476
+ const BadgeGrid = (props) => {
2477
+ const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$3({ key: b.title }, b)));
2478
+ return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 3, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, badges);
2479
+ };
2480
+ function TaskCard(props) {
2481
+ const avatars = props.users.slice(0, 3).map((u, i) => {
2482
+ const fullName = u.name;
2483
+ let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
2484
+ const src = AvatarInit.initialAvatar({
2485
+ background: "#f4f6f7",
2486
+ color: "#888888",
2487
+ fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
2488
+ fontSize: 10,
2489
+ fontWeight: 250,
2490
+ size: 30,
2491
+ initials
2492
+ });
2493
+ return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
2494
+ });
2495
+ const remainingUsers = props.users.slice(3).length;
2496
+ const isComplete = props.lessonsCompleted >= props.lessonsTotal;
2497
+ 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(
2498
+ core.Text,
2499
+ {
2500
+ span: true,
2501
+ weight: 500,
2502
+ sx: (theme) => ({ color: theme.colorScheme === "dark" ? theme.white : theme.black })
2503
+ },
2504
+ props.lessonsCompleted,
2505
+ "/",
2506
+ props.lessonsTotal
2507
+ )), /* @__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 }))));
2508
+ }
2509
+
2510
+ const TrialHome = (props) => {
2511
+ 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(
2512
+ UserInfo,
2513
+ {
2514
+ variant: "compact",
2515
+ name: props.name,
2516
+ impactStatement: ""
2517
+ }
2518
+ ), /* @__PURE__ */ React__namespace.createElement(
2519
+ TenantBanner,
2520
+ {
2521
+ title: "Trial Account",
2522
+ description: "Welcome to Local Civics! You are currently interacting with our trial experience.",
2523
+ image: "https://cdn.localcivics.io/hub/landing.jpg",
2524
+ action: {
2525
+ label: "UPGRADE NOW",
2526
+ link: props.upgradeHref
2527
+ }
2528
+ }
2529
+ )), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { badges: props.badges })));
2530
+ };
2531
+
2532
+ var __defProp$2 = Object.defineProperty;
2533
+ var __defProps$2 = Object.defineProperties;
2534
+ var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
2535
+ var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
2536
+ var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
2537
+ var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
2538
+ var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2539
+ var __spreadValues$2 = (a, b) => {
2540
+ for (var prop in b || (b = {}))
2541
+ if (__hasOwnProp$2.call(b, prop))
2542
+ __defNormalProp$2(a, prop, b[prop]);
2543
+ if (__getOwnPropSymbols$2)
2544
+ for (var prop of __getOwnPropSymbols$2(b)) {
2545
+ if (__propIsEnum$2.call(b, prop))
2546
+ __defNormalProp$2(a, prop, b[prop]);
2547
+ }
2548
+ return a;
2549
+ };
2550
+ var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
2551
+ var __objRest = (source, exclude) => {
2552
+ var target = {};
2553
+ for (var prop in source)
2554
+ if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
2555
+ target[prop] = source[prop];
2556
+ if (source != null && __getOwnPropSymbols$2)
2557
+ for (var prop of __getOwnPropSymbols$2(source)) {
2558
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
2559
+ target[prop] = source[prop];
2560
+ }
2561
+ return target;
2562
+ };
2563
+ const useStyles$2 = core.createStyles((theme, { checked }) => ({
2564
+ button: {
2565
+ display: "flex",
2566
+ alignItems: "center",
2567
+ width: "100%",
2568
+ transition: "background-color 150ms ease, border-color 150ms ease",
2569
+ border: `1px solid ${checked ? theme.fn.variant({ variant: "outline", color: theme.primaryColor }).border : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
2570
+ borderRadius: theme.radius.sm,
2571
+ padding: theme.spacing.lg,
2572
+ backgroundColor: checked ? theme.fn.variant({ variant: "light", color: theme.primaryColor }).background : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white
2573
+ },
2574
+ body: {
2575
+ flex: 1,
2576
+ marginLeft: theme.spacing.md
2577
+ }
2578
+ }));
2579
+ function ImageCheckbox(_a) {
2580
+ var _b = _a, {
2581
+ checked,
2582
+ defaultChecked,
2583
+ onChange,
2584
+ title,
2585
+ description,
2586
+ className,
2587
+ icon: Icon
2588
+ } = _b, others = __objRest(_b, [
2589
+ "checked",
2590
+ "defaultChecked",
2591
+ "onChange",
2592
+ "title",
2593
+ "description",
2594
+ "className",
2595
+ "icon"
2596
+ ]);
2597
+ const [value, handleChange] = hooks.useUncontrolled({
2598
+ value: checked,
2599
+ defaultValue: defaultChecked,
2600
+ finalValue: false,
2601
+ onChange
2602
+ });
2603
+ const { classes, cx } = useStyles$2({ checked: value });
2604
+ return /* @__PURE__ */ React__namespace.createElement(
2605
+ core.UnstyledButton,
2606
+ __spreadProps$2(__spreadValues$2({}, others), {
2607
+ onClick: () => handleChange(!value),
2608
+ className: cx(classes.button, className)
2609
+ }),
2610
+ /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { variant: "light", size: "lg", color: "blue" }, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 40 })),
2611
+ /* @__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)),
2612
+ /* @__PURE__ */ React__namespace.createElement(
2613
+ core.Checkbox,
2614
+ {
2615
+ checked: value,
2616
+ onChange: () => {
2617
+ },
2618
+ tabIndex: -1,
2619
+ styles: { input: { cursor: "pointer" } }
2620
+ }
2621
+ )
2622
+ );
2623
+ }
2624
+ function SelectGrid(props) {
2625
+ const items = props.items.map((item) => /* @__PURE__ */ React__namespace.createElement(
2626
+ ImageCheckbox,
2627
+ __spreadProps$2(__spreadValues$2({}, item), {
2628
+ key: item.title,
2629
+ onChange: (checked) => props.onChange(item.title, checked)
2630
+ })
2631
+ ));
2632
+ return /* @__PURE__ */ React__namespace.createElement(
2633
+ core.SimpleGrid,
2634
+ {
2635
+ cols: 3,
2636
+ breakpoints: [
2637
+ { maxWidth: "md", cols: 2 },
2638
+ { maxWidth: "sm", cols: 1 }
2639
+ ]
2640
+ },
2641
+ items
2642
+ );
2643
+ }
2644
+
2645
+ var __defProp$1 = Object.defineProperty;
2646
+ var __defProps$1 = Object.defineProperties;
2647
+ var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
2648
+ var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
2649
+ var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
2650
+ var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
2651
+ var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2652
+ var __spreadValues$1 = (a, b) => {
2653
+ for (var prop in b || (b = {}))
2654
+ if (__hasOwnProp$1.call(b, prop))
2655
+ __defNormalProp$1(a, prop, b[prop]);
2656
+ if (__getOwnPropSymbols$1)
2657
+ for (var prop of __getOwnPropSymbols$1(b)) {
2658
+ if (__propIsEnum$1.call(b, prop))
2659
+ __defNormalProp$1(a, prop, b[prop]);
2660
+ }
2661
+ return a;
2662
+ };
2663
+ var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
2664
+ const useStyles$1 = core.createStyles((theme) => ({
2665
+ wrapper: {
2666
+ minHeight: 400,
2667
+ boxSizing: "border-box",
2668
+ backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
2669
+ borderRadius: theme.radius.md,
2670
+ padding: theme.spacing.xl * 2.5,
2671
+ [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
2672
+ padding: theme.spacing.xl * 1.5
2673
+ }
2674
+ },
2675
+ title: {
2676
+ fontFamily: `Greycliff CF, ${theme.fontFamily}`,
2677
+ color: theme.white,
2678
+ lineHeight: 1
2679
+ },
2680
+ description: {
2681
+ color: theme.colors[theme.primaryColor][0],
2682
+ maxWidth: 500,
2683
+ [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
2684
+ maxWidth: "100%"
2685
+ }
2686
+ },
2687
+ form: {
2688
+ backgroundColor: theme.white,
2689
+ padding: theme.spacing.xl,
2690
+ borderRadius: theme.radius.md,
2691
+ boxShadow: theme.shadows.lg
2692
+ },
2693
+ social: {
2694
+ color: theme.white,
2695
+ "&:hover": {
2696
+ color: theme.colors[theme.primaryColor][1]
2697
+ }
2698
+ },
2699
+ input: {
2700
+ backgroundColor: theme.white,
2701
+ borderColor: theme.colors.gray[4],
2702
+ color: theme.black,
2703
+ "&::placeholder": {
2704
+ color: theme.colors.gray[5]
2705
+ }
2706
+ },
2707
+ inputLabel: {
2708
+ color: theme.black
2709
+ },
2710
+ control: {
2711
+ backgroundColor: theme.colors[theme.primaryColor][6]
2712
+ }
2713
+ }));
2714
+ const OPTIONS = [
2715
+ { description: "high school", title: "High school", icon: icons.IconHistory },
2716
+ { description: "k - 8th", title: "K - 8th", icon: icons.IconLego },
2717
+ { description: "civics", title: "Civics", icon: icons.IconNews },
2718
+ { description: "project-based learning", title: "Project-based learning", icon: icons.IconTools },
2719
+ { description: "college", title: "College", icon: icons.IconPodium },
2720
+ { description: "career", title: "Career", icon: icons.IconAffiliate },
2721
+ { description: "student leadership", title: "Student leadership", icon: icons.IconGrowth }
2722
+ ];
2723
+ const TrialRegistration = (props) => {
2724
+ const { classes } = useStyles$1();
2725
+ const [firstName, setFirstName] = React__namespace.useState("");
2726
+ const [lastName, setLastName] = React__namespace.useState("");
2727
+ const [interests, setInterests] = React__namespace.useState({});
2728
+ 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(
2729
+ core.TextInput,
2730
+ {
2731
+ label: "First Name",
2732
+ placeholder: "John",
2733
+ required: true,
2734
+ classNames: { input: classes.input, label: classes.inputLabel },
2735
+ onChange: (e) => setFirstName(e.target.value)
2736
+ }
2737
+ ), /* @__PURE__ */ React__namespace.createElement(
2738
+ core.TextInput,
2739
+ {
2740
+ label: "Last Name",
2741
+ placeholder: "Doe",
2742
+ required: true,
2743
+ classNames: { input: classes.input, label: classes.inputLabel },
2744
+ onChange: (e) => setLastName(e.target.value)
2745
+ }
2746
+ )), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14, weight: 500, mb: "md", mt: "xl" }, "What are you interested in teaching?"), /* @__PURE__ */ React__namespace.createElement(
2747
+ SelectGrid,
2748
+ {
2749
+ items: OPTIONS,
2750
+ onChange: (e, checked) => setInterests(__spreadProps$1(__spreadValues$1({}, interests), { [e]: checked }))
2751
+ }
2752
+ ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
2753
+ core.Button,
2754
+ {
2755
+ onClick: () => props.onBegin({ firstName, lastName, interests: Object.keys(interests) }),
2756
+ className: classes.control
2757
+ },
2758
+ "Begin trial"
2759
+ )))));
2760
+ };
2761
+
2452
2762
  const mycCache = core.createEmotionCache({
2453
2763
  key: "mantine",
2454
2764
  prepend: false
@@ -2487,17 +2797,17 @@ var __spreadValues = (a, b) => {
2487
2797
  return a;
2488
2798
  };
2489
2799
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
2490
- const useStyles = core.createStyles((theme) => ({
2800
+ const useStyles = core.createStyles((theme, props) => ({
2491
2801
  footer: {
2492
2802
  paddingTop: theme.spacing.md,
2493
2803
  paddingBottom: theme.spacing.md,
2494
- paddingLeft: theme.spacing.md,
2804
+ paddingLeft: props.navbar ? theme.spacing.md : 0,
2495
2805
  backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
2496
2806
  borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]}`,
2497
2807
  [theme.fn.largerThan("sm")]: {
2498
2808
  paddingTop: theme.spacing.xl * 2,
2499
2809
  paddingBottom: theme.spacing.xl * 2,
2500
- paddingLeft: theme.spacing.xl * 13
2810
+ paddingLeft: props.navbar ? theme.spacing.xl * 13 : 0
2501
2811
  }
2502
2812
  },
2503
2813
  logo: {
@@ -2569,14 +2879,14 @@ const useStyles = core.createStyles((theme) => ({
2569
2879
  }
2570
2880
  }));
2571
2881
  const App = (props) => {
2572
- const { classes } = useStyles();
2882
+ const { classes } = useStyles(props);
2573
2883
  const account = useAccount(props.account, props.accounts, props.onAccountChange);
2574
2884
  return /* @__PURE__ */ React__namespace.createElement(
2575
2885
  core.AppShell,
2576
2886
  {
2577
2887
  padding: "xs",
2578
- navbar: /* @__PURE__ */ React__namespace.createElement(
2579
- NestedNavbar,
2888
+ navbar: props.navbar && /* @__PURE__ */ React__namespace.createElement(
2889
+ Navbar,
2580
2890
  __spreadProps(__spreadValues({}, props.navbar.props), {
2581
2891
  onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
2582
2892
  })
@@ -2623,7 +2933,7 @@ const App = (props) => {
2623
2933
  })
2624
2934
  },
2625
2935
  /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, (props.loading || account.opened) && /* @__PURE__ */ React__namespace.createElement(core.Center, { style: { height: 400 } }, /* @__PURE__ */ React__namespace.createElement(core.Loader, null)), !props.loading && !account.opened && props.page),
2626
- /* @__PURE__ */ React__namespace.createElement(
2936
+ !!account.accounts && !!account.account && /* @__PURE__ */ React__namespace.createElement(
2627
2937
  SwitchAccount,
2628
2938
  {
2629
2939
  opened: account.opened,
@@ -2652,6 +2962,9 @@ const useAccount = (account, accounts, onAccountChange) => {
2652
2962
  setChangeModalOpen,
2653
2963
  onAccountChange: (account2) => {
2654
2964
  setLoading(true);
2965
+ if (!onAccountChange) {
2966
+ return;
2967
+ }
2655
2968
  onAccountChange(account2).then(() => {
2656
2969
  setActive(account2);
2657
2970
  setLoading(false);
@@ -2680,9 +2993,11 @@ exports.Home = Home;
2680
2993
  exports.Lesson = Lesson;
2681
2994
  exports.Lessons = Lessons;
2682
2995
  exports.Navbar = Navbar;
2683
- exports.NestedNavbar = NestedNavbar;
2684
2996
  exports.Organization = Organization;
2685
2997
  exports.People = People;
2998
+ exports.StartAnonymousLesson = StartAnonymousLesson;
2686
2999
  exports.Student = Student;
2687
3000
  exports.SwitchAccount = SwitchAccount;
3001
+ exports.TrialHome = TrialHome;
3002
+ exports.TrialRegistration = TrialRegistration;
2688
3003
  //# sourceMappingURL=index.js.map