@local-civics/mgmt-ui 0.1.212 → 0.1.213

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
-import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Stack as Stack$5, Grid, ActionIcon, LoadingOverlay, Select, Table as Table$l, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell, Accordion } from '@mantine/core';
-import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconChevronDown, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { IconChevronRight, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconClipboardCopy, IconTableExport, IconArrowLeft, IconSearch, IconCheck, IconTrash, IconPlus, IconLink, IconDownload, IconCloudUpload, IconInfoCircle, IconPlaylistAdd, IconColorSwatch, IconPointer, IconChevronDown, IconX, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { Avatar, createStyles, Modal, Center, Loader, Container, Group, Button, Title, Text, UnstyledButton, Card, ScrollArea, SimpleGrid, Tabs as Tabs$1, Stack as Stack$5, Image, Grid, Badge as Badge$1, ActionIcon, LoadingOverlay, Select, Table as Table$l, Drawer, Divider, TextInput, Tooltip, Autocomplete, Paper, ThemeIcon, Overlay, Anchor, Box, Menu, Checkbox, createEmotionCache, MantineProvider, AppShell, Accordion } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -14,47 +14,46 @@ import AvatarInit from 'avatar-initials';
 import { Chart } from 'react-charts';
 import { useUncontrolled } from '@mantine/hooks';
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
-        target[prop] = source[prop];
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
     }
-  return target;
-};
-const useStyles$v = createStyles((theme) => ({
-  user: {
-    display: "block",
-    width: "100%",
-    padding: theme.spacing.md,
-    cursor: "default",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+  } else {
+    head.appendChild(style);
   }
-}));
-function UserButton(_a) {
-  var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$v();
-  return /* @__PURE__ */ React.createElement(Group, __spreadValues$f({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "@font-face{font-family:ProximaNova;src:url(https://cdn.localcivics.io/fonts/ProximaNova.otf) format(\"opentype\")}@font-face{font-family:ProximaNova;font-weight:700;src:url(https://cdn.localcivics.io/fonts/ProximaNovaBold.otf) format(\"opentype\")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-1\\.5{margin-top:.375rem}.ml-\\[29px\\]{margin-left:29px}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-7{width:1.75rem}.w-screen{width:100vw}.w-\\[230px\\]{width:230px}.w-24{width:6rem}.w-\\[30px\\]{width:30px}.min-w-0{min-width:0}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-\\[2\\.2fr_1\\.2fr_1fr_1\\.2fr_1fr_0\\.6fr\\]{grid-template-columns:2.2fr 1.2fr 1fr 1.2fr 1fr .6fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-5{gap:1.25rem}.gap-2\\.5{gap:.625rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-sky-blue-400\\/30{border-color:rgba(59,208,242,.3)}.border-mint-400\\/30{border-color:rgba(30,226,175,.3)}.border-gold-400\\/30{border-color:rgba(255,212,77,.3)}.border-transparent{border-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-dark-blue-400{--tw-bg-opacity:1;background-color:rgb(35 42 58/var(--tw-bg-opacity))}.bg-mint-400\\/20{background-color:rgba(30,226,175,.2)}.bg-gold-400\\/15{background-color:rgba(255,212,77,.15)}.bg-sky-blue-400\\/15{background-color:rgba(59,208,242,.15)}.bg-sky-blue-400\\/25{background-color:rgba(59,208,242,.25)}.bg-mint-400\\/15{background-color:rgba(30,226,175,.15)}.bg-mint-400\\/25{background-color:rgba(30,226,175,.25)}.bg-gold-400\\/25{background-color:rgba(255,212,77,.25)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-gold-400{--tw-gradient-from:#ffd44d;--tw-gradient-to:rgba(255,212,77,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-dark-blue-600{--tw-gradient-from:#0a0f2e;--tw-gradient-to:rgba(10,15,46,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-blue-400\\/15{--tw-gradient-from:rgba(59,208,242,.15);--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-dark-blue-400{--tw-gradient-to:rgba(35,42,58,0);--tw-gradient-stops:var(--tw-gradient-from),#232a3a,var(--tw-gradient-to)}.to-\\[\\#f5c300\\]{--tw-gradient-to:#f5c300}.to-sky-blue-400{--tw-gradient-to:#3bd0f2}.to-mint-400\\/15{--tw-gradient-to:rgba(30,226,175,.15)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-4{padding:1rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\\[11px\\]{font-size:11px}.text-\\[11\\.5px\\]{font-size:11.5px}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-dark-blue-400{--tw-text-opacity:1;color:rgb(35 42 58/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-sky-blue-400{--tw-text-opacity:1;color:rgb(59 208 242/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-mint-400{--tw-text-opacity:1;color:rgb(30 226 175/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-white\\/70{color:hsla(0,0%,100%,.7)}.text-gold-400{--tw-text-opacity:1;color:rgb(255 212 77/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_3px_12px_rgba\\(255\\2c 212\\2c 77\\2c 0\\.35\\)\\]{--tw-shadow:0 3px 12px rgba(255,212,77,.35);--tw-shadow-colored:0 3px 12px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_2px_10px_rgba\\(30\\2c 226\\2c 175\\2c 0\\.15\\)\\]{--tw-shadow:0 2px 10px rgba(30,226,175,.15);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{border-style:solid;border-width:0}.placeholder\\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.disabled\\:opacity-50:disabled{opacity:.5}";
+styleInject(css_248z);
+
+function UserButton({ image, name, email }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "m-3 flex items-center gap-2.5 rounded-xl border border-mint-400/30 bg-gradient-to-r from-sky-blue-400/15 to-mint-400/15 p-2.5 shadow-[0_2px_10px_rgba(30,226,175,0.15)]" }, /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      src: image,
+      radius: "xl",
+      size: 32,
+      styles: { placeholder: { color: "#232A3A", backgroundColor: "rgba(30,226,175,0.2)" } }
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10px] text-slate-500" }, email)));
 }
 
 const compact = (num) => {
@@ -64,217 +63,96 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$u = createStyles((theme, _params, getRef) => {
-  const icon = getRef("icon");
-  return {
-    control: {
-      fontWeight: 500,
-      width: "100%",
-      padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-      fontSize: theme.fontSizes.sm,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
-        color: theme.colorScheme === "dark" ? theme.white : theme.black
-      }
-    },
-    controlButton: {
-      cursor: "pointer"
-    },
-    badge: {
-      pointerEvents: "none"
-    },
-    link: {
-      fontWeight: 500,
-      display: "block",
-      textDecoration: "none",
-      padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
-      paddingLeft: 31,
-      marginLeft: 30,
-      fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-      borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
-        color: theme.colorScheme === "dark" ? theme.white : theme.black
-      }
-    },
-    linkActive: {
-      "&, &:hover": {
-        backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
-        [`& .${icon}`]: {
-          color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
-        }
-      }
-    },
-    chevron: {
-      transition: "transform 200ms ease"
-    },
-    linkIcon: {
-      ref: icon
-    }
-  };
-});
-function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$u();
+const ACCENT_CLASSNAMES = {
+  cyan: {
+    row: "bg-sky-blue-400/15 border-sky-blue-400/30",
+    chip: "bg-sky-blue-400/25",
+    icon: "text-sky-blue-400",
+    pill: "bg-sky-blue-400/15 text-dark-blue-400"
+  },
+  mint: {
+    row: "bg-mint-400/15 border-mint-400/30",
+    chip: "bg-mint-400/25",
+    icon: "text-mint-400",
+    pill: "bg-mint-400/15 text-dark-blue-400"
+  },
+  gold: {
+    row: "bg-gold-400/15 border-gold-400/30",
+    chip: "bg-gold-400/25",
+    icon: "text-gold-400",
+    pill: "bg-gold-400/15 text-dark-blue-400"
+  }
+};
+function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened, links, active, notifications }) {
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = useState(initiallyOpened || hasActiveLinks || false);
   React.useEffect(() => {
     setOpened(hasActiveLinks);
   }, [hasActiveLinks]);
-  const ChevronIcon = theme.dir === "ltr" ? IconChevronRight : IconChevronLeft;
+  const isActive = !!active && !hasLinks && label === active;
+  const accentClasses = ACCENT_CLASSNAMES[accent];
   const items = (hasLinks ? links : []).map((link) => {
+    const linkActive = !!active && active === `${label}/${link.label}`;
     return /* @__PURE__ */ React.createElement(
-      Box,
+      Link,
       {
-        className: cx(classes.link, { [classes.linkActive]: !!active && active === `${label}/${link.label}` }),
-        key: link.label
+        key: link.label,
+        to: link.href,
+        className: `flex items-center justify-between gap-2 rounded-[8px] border px-3 py-2 text-xs no-underline transition-colors ${linkActive ? `${accentClasses.row} font-bold text-dark-blue-400` : "border-transparent font-medium text-slate-500 hover:bg-slate-50"}`
       },
-      /* @__PURE__ */ React.createElement(Group, { position: "apart", spacing: 0 }, /* @__PURE__ */ React.createElement(Text, { component: Link, to: link.href }, link.label), !!link.notifications && /* @__PURE__ */ React.createElement(Badge$1, { size: "sm", variant: "filled", className: classes.badge }, compact(link.notifications)))
+      link.label,
+      !!link.notifications && /* @__PURE__ */ React.createElement("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${accentClasses.pill}` }, compact(link.notifications))
     );
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Group,
+  const rowInner = /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center gap-2.5" }, /* @__PURE__ */ React.createElement("div", { className: `flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg ${isActive ? accentClasses.chip : "bg-slate-50"}` }, /* @__PURE__ */ React.createElement(Icon, { size: 14, stroke: isActive ? 2.2 : 1.75, className: isActive ? accentClasses.icon : "text-slate-400" })), /* @__PURE__ */ React.createElement("span", { className: `flex-1 text-xs ${isActive ? "font-bold text-dark-blue-400" : "font-medium text-slate-500"}` }, label));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
     {
-      className: cx(classes.control, {
-        [classes.linkActive]: !!active && !hasLinks && label === active,
-        [classes.controlButton]: hasLinks
-      }),
-      onClick: () => setOpened((o) => !o),
-      position: "apart",
-      spacing: 0
+      onClick: () => hasLinks && setOpened((o) => !o),
+      className: `flex items-center gap-2.5 rounded-[10px] border px-3.5 py-2.5 transition-colors ${isActive ? accentClasses.row : "border-transparent hover:bg-slate-50"} ${hasLinks ? "cursor-pointer" : ""}`
     },
-    /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(ThemeIcon, { variant: "light", size: 30 }, /* @__PURE__ */ React.createElement(Icon, { className: classes.linkIcon, size: 18 })), /* @__PURE__ */ React.createElement(Box, { ml: "md" }, /* @__PURE__ */ React.createElement(Text, { component: Link, to: href }, label))),
-    !!notifications && /* @__PURE__ */ React.createElement(Badge$1, { size: "sm", variant: "filled", className: classes.badge }, compact(notifications)),
+    hasLinks ? rowInner : /* @__PURE__ */ React.createElement(Link, { to: href, className: "flex flex-1 items-center gap-2.5 no-underline" }, rowInner),
+    !!notifications && /* @__PURE__ */ React.createElement("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${accentClasses.pill}` }, compact(notifications)),
     hasLinks && /* @__PURE__ */ React.createElement(
-      ChevronIcon,
+      IconChevronRight,
       {
-        className: classes.chevron,
-        size: 14,
-        stroke: 1.5,
-        style: {
-          transform: opened ? `rotate(${theme.dir === "rtl" ? -90 : 90}deg)` : "none"
-        }
+        size: 13,
+        stroke: 2.2,
+        className: `shrink-0 text-slate-300 transition-transform ${opened ? "rotate-90" : ""}`
       }
     )
-  ), hasLinks ? /* @__PURE__ */ React.createElement(Collapse, { in: opened }, items) : null);
+  ), hasLinks && opened && /* @__PURE__ */ React.createElement("div", { className: "ml-[29px] mt-0.5 flex flex-col gap-0.5 border-l border-slate-100 pl-2.5" }, items));
 }
 
-var __defProp$e = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-const useStyles$t = createStyles((theme, _params, getRef) => {
-  const icon = getRef("icon");
-  return {
-    navbar: {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
-    },
-    navHeader: {
-      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
-        height: 71,
-        position: "absolute",
-        top: 0
-      }
-    },
-    navBody: {
-      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
-        display: "none"
-      }
-    },
-    burger: {
-      [theme.fn.largerThan("sm")]: {
-        display: "none"
-      }
-    },
-    header: {
-      padding: theme.spacing.md,
-      paddingTop: 0,
-      marginLeft: -theme.spacing.md,
-      marginRight: -theme.spacing.md,
-      color: theme.colorScheme === "dark" ? theme.white : theme.black,
-      borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
-    },
-    link: __spreadProps$a(__spreadValues$e({}, theme.fn.focusStyles()), {
-      display: "flex",
-      alignItems: "center",
-      textDecoration: "none",
-      fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
-      padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-      borderRadius: theme.radius.sm,
-      fontWeight: 500,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-        color: theme.colorScheme === "dark" ? theme.white : theme.black,
-        [`& .${icon}`]: {
-          color: theme.colorScheme === "dark" ? theme.white : theme.black
-        }
-      }
-    }),
-    linkIcon: {
-      ref: icon,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
-      marginRight: theme.spacing.sm
-    },
-    links: {
-      marginLeft: -theme.spacing.md,
-      marginRight: -theme.spacing.md
-    },
-    user: {
-      margin: theme.spacing.md,
-      marginLeft: 0,
-      marginRight: 0
-    },
-    linksInner: {
-      paddingBottom: theme.spacing.xl
-    },
-    footer: {
-      paddingTop: theme.spacing.md,
-      paddingBottom: theme.spacing.md,
-      borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`
-    },
-    active: {
-      "&, &:hover": {
-        backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
-      }
-    }
-  };
-});
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 const data = [
-  { label: "Home", icon: IconHome2 },
-  { label: "Dashboard", icon: IconGauge },
-  { label: "Classes", icon: IconCategory2 },
-  { label: "Pathways", icon: IconRoute },
-  { label: "Badges", icon: IconAlbum },
-  { label: "Lessons", icon: IconLambda },
-  { label: "File Locker", icon: IconClipboard },
-  {
-    label: "Organization",
-    icon: IconBuilding,
-    links: [
-      { label: "Overview" },
-      { label: "People" }
-    ]
-  }
+  { label: "Home", icon: IconHome2, accent: "cyan" },
+  { label: "Dashboard", icon: IconGauge, accent: "mint" },
+  { label: "Classes", icon: IconCategory2, accent: "gold" },
+  { label: "Pathways", icon: IconRoute, accent: "cyan" },
+  { label: "Badges", icon: IconAlbum, accent: "mint" },
+  { label: "Lessons", icon: IconLambda, accent: "gold" },
+  { label: "File Locker", icon: IconClipboard, accent: "cyan" },
+  { label: "Organization", icon: IconBuilding, accent: "gold", links: [{ label: "Overview" }, { label: "People" }] }
 ];
 const TRIAL_PAGES = [
   "Home",
@@ -282,9 +160,6 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$t();
-  const [burgerOpen, setBurgerOpen] = React.useState(false);
-  const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
     const context = props.links[item.label] || { notifications: 0, href: "" };
     if (context.hidden || props.trial && TRIAL_PAGES.indexOf(item.label) === -1) {
@@ -295,37 +170,32 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React.createElement(
       LinksGroup,
-      __spreadProps$a(__spreadValues$e(__spreadValues$e({
+      __spreadProps$9(__spreadValues$d(__spreadValues$d({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$e(__spreadValues$e({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$d(__spreadValues$d({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Navbar$1, { width: { sm: 300 }, p: "md", className: cx(classes.navbar, { [classes.navHeader]: !burgerOpen }) }, /* @__PURE__ */ React.createElement(Navbar$1.Section, { className: classes.header }, /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Code, { sx: { fontWeight: 700 } }, props.version), !!props.trial && /* @__PURE__ */ React.createElement(Badge$1, { color: "violet", radius: "xs" }, "Trial"), /* @__PURE__ */ React.createElement(Burger, { opened: burgerOpen, onClick: toggle, className: classes.burger, size: "sm" })))), /* @__PURE__ */ React.createElement("div", { className: cx({ [classes.navBody]: !burgerOpen }) }, !props.loading && /* @__PURE__ */ React.createElement(
-    UserButton,
-    {
-      className: classes.user,
-      image: props.image,
-      name: props.name,
-      email: props.email
-    }
-  ), /* @__PURE__ */ React.createElement(Navbar$1.Section, { grow: true, className: classes.links, component: ScrollArea }, /* @__PURE__ */ React.createElement("div", { className: classes.linksInner }, links)), !props.loading && /* @__PURE__ */ React.createElement(Navbar$1.Section, { className: classes.footer }, props.trial && /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
-    event.preventDefault();
-    props.onGettingStarted();
-  } }, /* @__PURE__ */ React.createElement(IconVideo, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Getting started")), !!props.onSwitchAccounts && /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
-    event.preventDefault();
-    props.onSwitchAccounts && props.onSwitchAccounts();
-  } }, /* @__PURE__ */ React.createElement(IconSwitchHorizontal, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Change account")), /* @__PURE__ */ React.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
-    event.preventDefault();
-    props.onLogout();
-  } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
+  return /* @__PURE__ */ React.createElement("nav", { className: "flex h-full w-[230px] shrink-0 flex-col border-r border-slate-200 bg-white" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between border-b border-slate-100 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "w-24" }, /* @__PURE__ */ React.createElement("img", { className: "w-full object-contain", src: "https://cdn.localcivics.io/brand/localcivics.png", alt: "Logo" })), !!props.trial && /* @__PURE__ */ React.createElement("span", { className: "rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Trial")), !props.loading && /* @__PURE__ */ React.createElement(UserButton, { image: props.image, name: props.name, email: props.email }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 flex-col gap-0.5 overflow-y-auto p-2.5" }, links), !props.loading && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 border-t border-slate-200 p-2.5" }, props.trial && /* @__PURE__ */ React.createElement(UtilLink, { label: "Getting started", icon: IconVideo, onClick: props.onGettingStarted }), !!props.onSwitchAccounts && /* @__PURE__ */ React.createElement(UtilLink, { label: "Change account", icon: IconSwitchHorizontal, onClick: props.onSwitchAccounts }), /* @__PURE__ */ React.createElement(UtilLink, { label: "Logout", icon: IconLogout, onClick: props.onLogout })));
 }
+const UtilLink = (props) => {
+  const Icon = props.icon;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: props.onClick,
+      className: "flex cursor-pointer items-center gap-2.5 rounded-[10px] px-3.5 py-2 text-slate-400 hover:bg-slate-50 hover:text-slate-500"
+    },
+    /* @__PURE__ */ React.createElement(Icon, { size: 13, stroke: 1.75 }),
+    /* @__PURE__ */ React.createElement("span", { className: "text-[11.5px]" }, props.label)
+  );
+};
 
-const useStyles$s = createStyles((theme) => ({
+const useStyles$o = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -361,7 +231,7 @@ const useStyles$s = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$s();
+  const { classes } = useStyles$o();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -375,7 +245,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$r = createStyles((theme) => ({
+const useStyles$n = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -416,7 +286,7 @@ const useStyles$r = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$r();
+  const { classes, theme } = useStyles$n();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React.createElement(Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -433,51 +303,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$q = createStyles((theme) => ({
-  root: {
-    display: "flex",
-    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
-    padding: theme.spacing.xl * 1.5,
-    borderRadius: theme.radius.md
-  },
-  title: {
-    color: theme.white,
-    textTransform: "uppercase",
-    fontWeight: 700,
-    fontSize: theme.fontSizes.sm
-  },
-  count: {
-    color: theme.white,
-    fontSize: 32,
-    lineHeight: 1,
-    fontWeight: 700,
-    marginBottom: theme.spacing.md,
-    fontFamily: `Greycliff CF, ${theme.fontFamily}`
-  },
-  description: {
-    color: theme.colors[theme.primaryColor][0],
-    fontSize: theme.fontSizes.sm,
-    marginTop: 5
-  },
-  stat: {
-    flex: 1,
-    "& + &": {
-      paddingLeft: theme.spacing.xl,
-      marginLeft: theme.spacing.xl,
-      borderLeft: `1px solid ${theme.colors[theme.primaryColor][3]}`,
-      [theme.fn.smallerThan("sm")]: {
-        paddingLeft: 0,
-        marginLeft: 0,
-        borderLeft: 0,
-        paddingTop: theme.spacing.xl,
-        marginTop: theme.spacing.xl,
-        borderTop: `1px solid ${theme.colors[theme.primaryColor][3]}`
-      }
-    }
-  }
-}));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$q();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -486,9 +312,9 @@ const StatsGroup = ({ data, footer }) => {
       return stat.value;
     })();
     const safeValue = Number.isFinite(value) ? value : 0;
-    return /* @__PURE__ */ React.createElement("div", { key: stat.title, className: classes.stat }, /* @__PURE__ */ React.createElement(Text, { className: classes.count }, safeValue.toLocaleString(), stat.unit), /* @__PURE__ */ React.createElement(Text, { className: classes.title }, stat.title));
+    return /* @__PURE__ */ React.createElement("div", { key: stat.title }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-black text-white" }, safeValue.toLocaleString(), stat.unit), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[11px] font-bold uppercase tracking-wide text-white/70" }, stat.title));
   });
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, stats, footer);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-x-10 gap-y-4 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 px-8 py-6" }, stats, footer);
 };
 
 const Tabs = (props) => {
@@ -497,7 +323,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React.createElement(Tabs$1, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React.createElement(Tabs$1.List, null, tabs));
 };
 
-const useStyles$p = createStyles((theme) => ({
+const useStyles$m = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -511,8 +337,8 @@ const useStyles$p = createStyles((theme) => ({
     borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
   }
 }));
-const SplitButton$5 = (props) => {
-  const { classes, theme } = useStyles$p();
+const SplitButton$4 = (props) => {
+  const { classes, theme } = useStyles$m();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -540,7 +366,7 @@ const SplitButton$5 = (props) => {
   ));
 };
 
-const useStyles$o = createStyles((theme) => ({
+const useStyles$l = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -591,7 +417,7 @@ const useStyles$o = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$l();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React.createElement(Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -643,28 +469,28 @@ function useSortableData(items, config = { key: "", direction: null }) {
   return { items: sortedItems, requestSort, sortConfig };
 }
 
-var __defProp$d = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function Table$k(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$9(__spreadValues$d({}, item), {
+    return props.items.map((item) => __spreadProps$8(__spreadValues$c({}, item), {
       status: item.isComplete ? 1 : 0
     }));
   }, [props.items]);
@@ -761,7 +587,7 @@ function Table$j(props) {
   ));
 }
 
-const useStyles$n = createStyles((theme) => ({
+const useStyles$k = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -774,7 +600,7 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$n();
+  const { classes } = useStyles$k();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -788,7 +614,7 @@ const Badge = (props) => {
     },
     "Back"
   )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
-    SplitButton$5,
+    SplitButton$4,
     {
       href: props.href,
       onCopyLinkClick: props.onCopyLinkClick,
@@ -841,65 +667,34 @@ const Badge = (props) => {
 };
 
 function Table$i(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
   if (props.items.length === 0) {
-    return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
-      {
-        title: "No badges to display",
-        description: "We don't have any badges to show you just yet.",
-        loading: props.loading,
-        icon: "badges"
-      }
-    );
+    return /* @__PURE__ */ React.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No badges to display.");
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
-    UnstyledButton,
+  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, props.items.map((row, i) => /* @__PURE__ */ React.createElement(
+    Link,
     {
-      component: Link,
+      key: row.badgeId,
       to: row.href,
-      sx: (theme) => ({
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.md,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        "&:hover": {
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
-        }
-      })
+      className: `block px-5 py-4 no-underline hover:bg-slate-50 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
     },
-    /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
-  ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+    /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name),
+    row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)
+  )));
 }
 
-const useStyles$m = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
 const Badges = (props) => {
-  const { classes } = useStyles$m();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Key milestones that reflect skill development, micro-credentials, or academic progress"))), /* @__PURE__ */ React.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Badges and micro-credentials"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Project-sized skills acquisition and standards alignment.")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm" }, /* @__PURE__ */ React.createElement(IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React.createElement(
+    "input",
     {
+      type: "text",
       placeholder: "Search for a badge that fits your needs",
-      data: props.badges.map((item) => item.name),
-      onChange: props.onAutocompleteChange
-    }
-  ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$i,
-    {
-      loading: props.loading,
-      items: props.badges
+      onChange: (e) => props.onAutocompleteChange(e.target.value),
+      className: "flex-1 border-none bg-transparent text-sm text-dark-blue-400 outline-none placeholder:text-slate-400"
     }
-  ))));
+  )), /* @__PURE__ */ React.createElement(Table$i, { loading: props.loading, items: props.badges }));
 };
 
 function Table$h(props) {
@@ -1090,142 +885,57 @@ const Dashboard = (props) => {
   )))))));
 };
 
-const SplitButton$4 = (props) => {
-  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React.createElement(IconPlaylistAdd, { size: 14 }),
-      onClick: props.onAddMembersClick
-    },
-    "Add students"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
-      onClick: props.onCopyClassLinkClick
-    },
-    "Copy link"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
-      onClick: props.onExportDataClick
-    },
-    "Export data (.csv)"
-  ));
-};
-
-var __defProp$c = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+const openDeleteModal = (student, onDelete) => openConfirmModal({
+  title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
+  centered: true,
+  children: /* @__PURE__ */ React.createElement(Text, { size: "sm" }, "Click confirm if you want to remove the student from this specific class. This will NOT remove the student from the Tech Platform."),
+  labels: { confirm: "Remove Student", cancel: "Cancel" },
+  confirmProps: { color: "red" },
+  onConfirm: () => onDelete(student)
+});
 function Table$c(props) {
-  const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$8(__spreadValues$c({}, item), {
-      fullName: item.givenName && item.familyName ? `${item.givenName} ${item.familyName}`.toLowerCase() : item.email.toLowerCase()
-    }));
-  }, [props.items]);
-  console.groupEnd();
-  const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
   if (props.items.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "You have not rostered any students yet.");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] gap-3 border-b border-slate-100 px-5 py-3 text-[10px] font-bold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", null, "Name"), /* @__PURE__ */ React.createElement("div", null, "Role"), /* @__PURE__ */ React.createElement("div", null, "Badges Earned"), /* @__PURE__ */ React.createElement("div", null, "Lessons Completed"), /* @__PURE__ */ React.createElement("div", null, "Account Created?"), /* @__PURE__ */ React.createElement("div", null)), props.items.map((row, i) => {
+    var _a, _b;
+    const name = row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email;
+    const initials = (((_a = row.givenName) == null ? void 0 : _a[0]) || row.email[0] || "?") + (((_b = row.familyName) == null ? void 0 : _b[0]) || "");
     return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
+      "div",
       {
-        title: "No members to display",
-        description: "You have not rostered any students yet.",
-        loading: props.loading,
-        icon: "groups"
-      }
-    );
-  }
-  const sortStatus = {
-    columnAccessor: sortConfig.key,
-    direction: sortConfig.direction === "desc" ? "desc" : "asc"
-  };
-  const openDeleteModal = (student) => openConfirmModal({
-    title: `Remove "${student.givenName && student.familyName ? `${student.givenName} ${student.familyName}` : student.email}" from this class?`,
-    centered: true,
-    children: /* @__PURE__ */ React.createElement(Text, { size: "sm" }, "Click confirm if you want to remove the student from this specific class. This will NOT remove the student from the Tech Platform."),
-    labels: { confirm: "Remove Student", cancel: "Cancel" },
-    confirmProps: { color: "red" },
-    onConfirm: () => props.onDelete && props.onDelete(student)
-  });
-  return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(
-    DataTable,
-    {
-      verticalSpacing: 20,
-      sx: { minWidth: 700 },
-      highlightOnHover: true,
-      striped: true,
-      records: sortedItems,
-      idAccessor: "email",
-      sortStatus,
-      onSortStatusChange: (status) => requestSort(status.columnAccessor),
-      columns: [
-        {
-          accessor: "fullName",
-          title: "Name",
-          sortable: true,
-          render: (row) => /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: row.href }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.givenName && row.familyName ? `${row.givenName} ${row.familyName}` : row.email), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email))))
-        },
-        {
-          accessor: "isAdmin",
-          title: "Role",
-          sortable: true,
-          render: (row) => /* @__PURE__ */ React.createElement(Box, { maw: 150 }, /* @__PURE__ */ React.createElement(
-            Select,
-            {
-              size: "sm",
-              disabled: row.readonly,
-              value: row.isAdmin ? "educator" : "student",
-              onChange: (value) => props.onRoleChange && props.onRoleChange(row, value),
-              data: [
-                { label: "Student", value: "student" },
-                { label: "Educator", value: "educator" }
-              ]
-            }
-          ))
-        },
-        {
-          accessor: "badgesEarned",
-          title: "Badges Earned",
-          sortable: true
-        },
+        key: row.email,
+        className: `grid grid-cols-[2.2fr_1.2fr_1fr_1.2fr_1fr_0.6fr] items-center gap-3 px-5 py-3.5 ${i < props.items.length - 1 ? "border-b border-slate-100" : ""}`
+      },
+      /* @__PURE__ */ React.createElement(Link, { to: row.href, className: "flex min-w-0 items-center gap-2.5 no-underline" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { className: "h-8 w-8 shrink-0 rounded-full object-cover", src: row.avatar, alt: name }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-mint-400/20 text-[10px] font-bold text-dark-blue-400" }, initials.toUpperCase()), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs font-bold text-dark-blue-400" }, name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-[10.5px] text-slate-400" }, row.email))),
+      /* @__PURE__ */ React.createElement(
+        "select",
         {
-          accessor: "lessonsCompleted",
-          title: "Lessons Completed",
-          sortable: true
+          disabled: row.readonly,
+          value: row.isAdmin ? "educator" : "student",
+          onChange: (e) => props.onRoleChange && props.onRoleChange(row, e.target.value),
+          className: "w-fit rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-600 disabled:opacity-50"
         },
+        /* @__PURE__ */ React.createElement("option", { value: "student" }, "Student"),
+        /* @__PURE__ */ React.createElement("option", { value: "educator" }, "Educator")
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.badgesEarned),
+      /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400" }, row.lessonsCompleted),
+      /* @__PURE__ */ React.createElement("div", null, row.hasAccount && /* @__PURE__ */ React.createElement(IconCheck, { size: 16, stroke: 3, className: "text-mint-400" })),
+      /* @__PURE__ */ React.createElement("div", null, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(
+        "button",
         {
-          accessor: "hasAccount",
-          title: "Account Created?",
-          sortable: true,
-          render: (row) => row.hasAccount ? /* @__PURE__ */ React.createElement(IconCheck, { color: "green" }) : null
+          type: "button",
+          onClick: () => openDeleteModal(row, props.onDelete),
+          className: "flex h-7 w-7 items-center justify-center rounded-md text-slate-300 hover:bg-red-50 hover:text-red-500"
         },
-        {
-          accessor: "actions",
-          title: "",
-          textAlignment: "right",
-          render: (row) => /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0, position: "right" }, !row.readonly && !!props.onDelete && /* @__PURE__ */ React.createElement(ActionIcon, { color: "red", onClick: () => openDeleteModal(row) }, /* @__PURE__ */ React.createElement(IconTrash, { size: 16, stroke: 1.5 })))
-        }
-      ]
-    }
-  ));
+        /* @__PURE__ */ React.createElement(IconTrash, { size: 14, stroke: 1.75 })
+      ))
+    );
+  }));
 }
 
 var __defProp$b = Object.defineProperty;
@@ -1247,112 +957,46 @@ var __spreadValues$b = (a, b) => {
   return a;
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-const useStyles$l = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  },
-  autocomplete: {
-    maxWidth: 400
-  },
-  wrapper: {
-    position: "relative",
-    marginBottom: 30
-  },
-  dropzone: {
-    borderWidth: 1,
-    paddingBottom: 50
-  },
-  icon: {
-    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
-  },
-  control: {
-    position: "absolute",
-    width: 250,
-    left: "calc(50% - 125px)",
-    bottom: -20
-  }
-}));
 const Class = (props) => {
-  const { classes } = useStyles$l();
-  const form = useForm({
-    initialValues: {
-      classId: "",
-      userId: "",
-      email: "",
-      givenName: "",
-      familyName: "",
-      avatar: "",
-      role: "",
-      readonly: false,
-      lastActivity: null,
-      hasAccount: false,
-      lessonsCompleted: 0,
-      badgesEarned: 0,
-      href: "",
-      isAdmin: false
-    },
-    validate: {
-      email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
-    }
-  });
   const [opened, setOpened] = useState(false);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Drawer,
     {
       opened,
       onClose: () => setOpened(false),
-      title: /* @__PURE__ */ React.createElement(Title, { size: "h5" }, "Add students"),
+      title: "Add students",
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$b({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
-      const values = form.values;
-      form.reset();
-      setOpened(false);
-      props.onCreateMembers && props.onCreateMembers([values]);
-    }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues$b({
-        withAsterisk: true,
-        label: "Email",
-        placeholder: "Email"
-      }, form.getInputProps("email"))
-    ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues$b({
-        label: "Given name",
-        placeholder: "Given name"
-      }, form.getInputProps("givenName"))
-    ), /* @__PURE__ */ React.createElement(
-      TextInput,
-      __spreadValues$b({
-        label: "Family name",
-        placeholder: "Family name"
-      }, form.getInputProps("familyName"))
-    )), /* @__PURE__ */ React.createElement(Button, { type: "submit", fullWidth: true, mt: "md" }, "Submit"))))
-  ), /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
-    Badge$1,
+    /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$b({}, props), { close: () => setOpened(false) }))
+  ), /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-5xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { onClick: props.onBackClick, className: "flex w-max cursor-pointer items-center gap-1 text-xs font-bold text-sky-blue-400" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, props.description || "No description")), !props.loading && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+    "button",
     {
-      variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
-      size: "lg"
+      type: "button",
+      onClick: () => setOpened(true),
+      className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
     },
-    "Back"
-  )), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React.createElement(Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React.createElement(
-    SplitButton$4,
+    /* @__PURE__ */ React.createElement(IconPlus, { size: 13, stroke: 2 }),
+    "Add students"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
     {
-      onAddMembersClick: () => setOpened(true),
-      onCopyClassLinkClick: props.onCopyLinkClick,
-      onExportDataClick: props.onExportDataClick
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+      type: "button",
+      onClick: props.onCopyLinkClick,
+      className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
+    },
+    /* @__PURE__ */ React.createElement(IconLink, { size: 13, stroke: 2 }),
+    "Copy class link"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: props.onExportDataClick,
+      className: "flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3.5 py-2 text-xs font-bold text-dark-blue-400 shadow-[0_3px_12px_rgba(255,212,77,0.35)]"
+    },
+    /* @__PURE__ */ React.createElement(IconDownload, { size: 13, stroke: 2 }),
+    "Export data (.csv)"
+  ))), /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: "# OF STUDENTS",
       value: props.members.filter((a) => !a.isAdmin).length
@@ -1378,10 +1022,30 @@ const Class = (props) => {
       onDelete: props.onDeleteMember,
       onRoleChange: props.onChangeUserRole
     }
-  ))))));
+  )));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$l();
+  const form = useForm({
+    initialValues: {
+      classId: "",
+      userId: "",
+      email: "",
+      givenName: "",
+      familyName: "",
+      avatar: "",
+      role: "",
+      readonly: false,
+      lastActivity: null,
+      hasAccount: false,
+      lessonsCompleted: 0,
+      badgesEarned: 0,
+      href: "",
+      isAdmin: false
+    },
+    validate: {
+      email: (value) => /^\S+@\S+$/.test(value) && props.members.filter((u) => u.email === value).length === 0 ? null : "Invalid email"
+    }
+  });
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -1402,29 +1066,59 @@ const DropzoneButton$1 = (props) => {
       });
     });
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement(
     Dropzone,
     {
       loading,
       openRef,
       onDrop,
-      className: classes.dropzone,
-      radius: "md",
       accept: [MIME_TYPES.csv],
       maxSize: 5 * 1024 ** 2
     },
-    /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, /* @__PURE__ */ React.createElement(IconDownload, { size: 50, color: theme.colors[theme.primaryColor][6], stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, /* @__PURE__ */ React.createElement(IconX, { size: 50, color: theme.colors.red[6], stroke: 1.5 })), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, /* @__PURE__ */ React.createElement(
-      IconCloudUpload,
-      {
-        size: 50,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        stroke: 1.5
-      }
-    ))), /* @__PURE__ */ React.createElement(Text, { align: "center", weight: 700, size: "lg", mt: "xl" }, /* @__PURE__ */ React.createElement(Dropzone.Accept, null, "Drop files here"), /* @__PURE__ */ React.createElement(Dropzone.Reject, null, "Csv file less than 5mb"), /* @__PURE__ */ React.createElement(Dropzone.Idle, null, "Upload multiple")), /* @__PURE__ */ React.createElement(Text, { align: "center", size: "sm", mt: "xs", color: "dimmed" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
-  ), /* @__PURE__ */ React.createElement(Button, { className: classes.control, size: "md", radius: "xl", onClick: () => {
-    var _a;
-    return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
-  } }, "Select file"));
+    /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement(IconCloudUpload, { size: 50, stroke: 1.5 })), /* @__PURE__ */ React.createElement("p", { className: "mt-6 text-center text-lg font-bold text-dark-blue-400" }, "Upload multiple"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-center text-sm text-slate-400" }, "Drag'n'drop files here to upload. We can accept only ", /* @__PURE__ */ React.createElement("i", null, ".csv"), " files that are less than 5mb in size."))
+  ), /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        var _a;
+        return (_a = openRef.current) == null ? void 0 : _a.call(openRef);
+      },
+      className: "rounded-full bg-dark-blue-400 px-6 py-2.5 text-xs font-bold text-white"
+    },
+    "Select file"
+  )), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    const values = form.values;
+    form.reset();
+    props.close();
+    props.onCreateMembers && props.onCreateMembers([values]);
+  }) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
+    TextInput,
+    __spreadValues$b({
+      withAsterisk: true,
+      label: "Email",
+      placeholder: "Email"
+    }, form.getInputProps("email"))
+  ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
+    TextInput,
+    __spreadValues$b({
+      label: "Given name",
+      placeholder: "Given name"
+    }, form.getInputProps("givenName"))
+  ), /* @__PURE__ */ React.createElement(
+    TextInput,
+    __spreadValues$b({
+      label: "Family name",
+      placeholder: "Family name"
+    }, form.getInputProps("familyName"))
+  )), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "submit",
+      className: "mt-2 rounded-lg bg-dark-blue-400 px-4 py-2.5 text-xs font-bold text-white"
+    },
+    "Submit"
+  ))));
 };
 
 function Table$b(props) {
@@ -1509,7 +1203,7 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-const useStyles$k = createStyles((theme) => ({
+const useStyles$j = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1522,7 +1216,7 @@ const useStyles$k = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$j();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1593,7 +1287,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$j = createStyles((theme) => ({
+const useStyles$i = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1607,7 +1301,7 @@ const useStyles$j = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$j();
+  const { classes } = useStyles$i();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
@@ -1745,7 +1439,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$i = createStyles((theme, props) => {
+const useStyles$h = createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1773,7 +1467,7 @@ const useStyles$i = createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$i(props);
+  const { classes } = useStyles$h(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React.createElement(IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1817,7 +1511,7 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$h = createStyles((theme) => ({
+const useStyles$g = createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1862,7 +1556,7 @@ const TenantBanner = (_a) => {
     "className",
     "code"
   ]);
-  const { classes, cx, theme } = useStyles$h();
+  const { classes, cx, theme } = useStyles$g();
   const handleCopy = async () => {
     if (!code)
       return;
@@ -2002,7 +1696,7 @@ function Table$7(props) {
   ));
 }
 
-const useStyles$g = createStyles((theme) => ({
+const useStyles$f = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2017,7 +1711,7 @@ const useStyles$g = createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$g();
+  const { classes, theme } = useStyles$f();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -2195,7 +1889,7 @@ function Stack$2(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$f = createStyles((theme) => ({
+const useStyles$e = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2208,7 +1902,7 @@ const useStyles$f = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$e();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -2352,7 +2046,7 @@ function Table$5(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-const useStyles$e = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2365,7 +2059,7 @@ const useStyles$e = createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$d();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Bite-sized activities and learning experiences accelerating students achievement"))), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -2382,7 +2076,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$d = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2401,7 +2095,7 @@ const useStyles$d = createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$c();
   return /* @__PURE__ */ React.createElement(Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React.createElement(Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React.createElement(TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React.createElement(Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React.createElement(
     Anchor,
     {
@@ -2429,7 +2123,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$c = createStyles((theme) => ({
+const useStyles$b = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2459,7 +2153,7 @@ const useStyles$c = createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$b();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
@@ -2485,7 +2179,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$b = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2500,7 +2194,7 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$b();
+  const { classes, theme } = useStyles$a();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withOrganizationLink;
   return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
@@ -2581,7 +2275,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$a = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2611,7 +2305,7 @@ const useStyles$a = createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$a();
+  const { classes } = useStyles$9();
   const form = useForm({
     initialValues: {
       userId: "",
@@ -2715,7 +2409,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$a();
+  const { classes, theme } = useStyles$9();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -2761,7 +2455,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$9 = createStyles((theme) => ({
+const useStyles$8 = createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2824,7 +2518,7 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$8();
   const [name, setName] = React.useState("");
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Badge$1, { color: "violet" }, "Community"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.title), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "You are now part of ", `${props.educatorName}'s`, " Class")), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(
     TextInput,
@@ -2881,7 +2575,7 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$8 = createStyles((theme) => ({
+const useStyles$7 = createStyles((theme) => ({
   action: {
     backgroundColor: "inherit",
     ":hover": {
@@ -2900,7 +2594,7 @@ const useStyles$8 = createStyles((theme) => ({
   }
 }));
 const TrialHome = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$7();
   return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Badge$1, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -2960,7 +2654,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const useStyles$7 = createStyles((theme, { checked }) => ({
+const useStyles$6 = createStyles((theme, { checked }) => ({
   button: {
     display: "flex",
     alignItems: "center",
@@ -3002,7 +2696,7 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$7({ checked: value });
+  const { classes, cx } = useStyles$6({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
     __spreadProps$4(__spreadValues$5({}, others), {
@@ -3063,7 +2757,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$6 = createStyles((theme) => ({
+const useStyles$5 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -3126,7 +2820,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$6();
+  const { classes } = useStyles$5();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -3241,7 +2935,7 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$5 = createStyles((theme, props) => ({
+const useStyles$4 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3328,7 +3022,7 @@ const useStyles$5 = createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles$5(props);
+  const { classes } = useStyles$4(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
@@ -3424,58 +3118,26 @@ const useAccount = (account, accounts, onAccountChange) => {
 };
 
 function Table$3(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, "Loading\u2026");
+  }
   if (props.items.length === 0) {
-    return /* @__PURE__ */ React.createElement(
-      PlaceholderBanner,
-      {
-        title: "No pathway items to display",
-        description: "We don't have any pathway items to show you just yet.",
-        loading: props.loading,
-        icon: "badges"
-      }
-    );
+    return /* @__PURE__ */ React.createElement("div", { className: "rounded-xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-400 shadow-sm" }, "No pathways to display.");
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.badgeId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
-    UnstyledButton,
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.items.map((row) => /* @__PURE__ */ React.createElement(
+    Link,
     {
-      component: Link,
+      key: row.badgeId,
       to: row.href,
-      sx: (theme) => ({
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.md,
-        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-        "&:hover": {
-          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1]
-        }
-      })
+      className: "flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-4 no-underline shadow-sm hover:bg-slate-50"
     },
-    /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.description)))
-  ))));
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(Table$l, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React.createElement("tbody", null, rows)));
+    /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.name), row.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, row.description)),
+    /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "shrink-0 text-slate-300" })
+  )));
 }
 
-const useStyles$4 = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
 const Pathways = (props) => {
-  const { classes } = useStyles$4();
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled", size: "lg" }, "Pathways"), /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, "Pathways"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore all your unique pathway requirements in one clear space"))), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(
-    Table$3,
-    {
-      loading: props.loading,
-      items: props.pathways
-    }
-  ))));
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, "Pathways"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Explore all your unique pathway requirements in one clear space")), /* @__PURE__ */ React.createElement(Table$3, { loading: props.loading, items: props.pathways }));
 };
 
 const useStyles$3 = createStyles((theme) => ({