@local-civics/mgmt-ui 0.1.213 → 0.1.214

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
-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 { 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, IconPointer, IconChevronDown, IconX, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconExternalLink, IconChevronLeft } 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, Anchor, Box, Menu, Overlay, ThemeIcon, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -41,7 +41,7 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+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: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\\!relative{position:relative!important}.left-3\\.5{left:.875rem}.top-1\\/2{top:50%}.left-3{left:.75rem}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-0\\.5{margin-top:.125rem}.mt-0{margin-top:0}.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}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-full{height:100%}.h-8{height:2rem}.h-7{height:1.75rem}.h-12{height:3rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-\\[30px\\]{height:30px}.w-10{width:2.5rem}.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-64{width:16rem}.w-12{width:3rem}.w-16{width:4rem}.w-36{width:9rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-\\[440px\\]{width:440px}.w-40{width:10rem}.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}.max-w-\\[1100px\\]{max-width:1100px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[18px\\]{gap:18px}.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-3\\.5{gap:.875rem}.gap-0\\.5{gap:.125rem}.gap-0{gap:0}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.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-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-\\[8px\\]{border-radius:8px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-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}.border-l-sky-blue-400{--tw-border-opacity:1;border-left-color:rgb(59 208 242/var(--tw-border-opacity))}.border-l-mint-400{--tw-border-opacity:1;border-left-color:rgb(30 226 175/var(--tw-border-opacity))}.border-l-gold-400{--tw-border-opacity:1;border-left-color:rgb(255 212 77/var(--tw-border-opacity))}.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-mint-100{--tw-bg-opacity:1;background-color:rgb(208 251 240/var(--tw-bg-opacity))}.bg-sky-blue-400\\/20{background-color:rgba(59,208,242,.2)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white\\/90{background-color:hsla(0,0%,100%,.9)}.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-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-sky-blue-400{--tw-gradient-from:#3bd0f2;--tw-gradient-to:rgba(59,208,242,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mint-400{--tw-gradient-from:#1ee2af;--tw-gradient-to:rgba(30,226,175,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.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-dark-blue-400{--tw-gradient-to:#232a3a}.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-1{padding:.25rem}.p-5{padding:1.25rem}.p-2\\.5{padding:.625rem}.p-2{padding:.5rem}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.py-\\[18px\\]{padding-bottom:18px;padding-top:18px}.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}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pl-2\\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-proxima{font-family:ProximaNova}.text-\\[15\\.5px\\]{font-size:15.5px}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[10\\.5px\\]{font-size:10.5px}.text-\\[11px\\]{font-size:11px}.text-\\[28px\\]{font-size:28px}.text-\\[12\\.5px\\]{font-size:12.5px}.text-base{font-size:1rem;line-height:1.5rem}.text-\\[11\\.5px\\]{font-size:11.5px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.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-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.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-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-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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)}*,:after,:before{border-style:solid;border-width:0}button{background-color:transparent;background-image:none;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;text-transform:none}.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\\:scale-\\[1\\.02\\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;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))}.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\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/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-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.hover\\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:border-sky-blue-400:focus{--tw-border-opacity:1;border-color:rgb(59 208 242/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\\:opacity-50:disabled{opacity:.5}";
 styleInject(css_248z);
 
 function UserButton({ image, name, email }) {
@@ -125,25 +125,25 @@ function LinksGroup({ icon: Icon, href, label, accent = "cyan", initiallyOpened,
   ), 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$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$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) => {
   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$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]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const data = [
   { label: "Home", icon: IconHome2, accent: "cyan" },
   { label: "Dashboard", icon: IconGauge, accent: "mint" },
@@ -170,12 +170,12 @@ function Navbar(props) {
     }
     return /* @__PURE__ */ React.createElement(
       LinksGroup,
-      __spreadProps$9(__spreadValues$d(__spreadValues$d({
+      __spreadProps$a(__spreadValues$e(__spreadValues$e({
         key: item.label,
         active: props.active
       }, item), context), {
         links: (item.links || []).map((link) => {
-          return __spreadValues$d(__spreadValues$d({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
+          return __spreadValues$e(__spreadValues$e({}, link), props.links[`${item.label}/${link.label}`] || { notifications: 0, href: "" });
         })
       })
     );
@@ -195,7 +195,7 @@ const UtilLink = (props) => {
   );
 };
 
-const useStyles$o = createStyles((theme) => ({
+const useStyles$k = createStyles((theme) => ({
   inner: {
     paddingTop: theme.spacing.xl,
     paddingBottom: theme.spacing.xl * 4
@@ -231,7 +231,7 @@ const useStyles$o = createStyles((theme) => ({
   }
 }));
 const GettingStarted = (props) => {
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$k();
   return /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -245,7 +245,7 @@ const GettingStarted = (props) => {
   );
 };
 
-const useStyles$n = createStyles((theme) => ({
+const useStyles$j = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -286,7 +286,7 @@ const useStyles$n = createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$n();
+  const { classes, theme } = useStyles$j();
   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")));
   });
@@ -323,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$m = createStyles((theme) => ({
+const useStyles$i = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -338,7 +338,7 @@ const useStyles$m = createStyles((theme) => ({
   }
 }));
 const SplitButton$4 = (props) => {
-  const { classes, theme } = useStyles$m();
+  const { classes, theme } = useStyles$i();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -366,7 +366,7 @@ const SplitButton$4 = (props) => {
   ));
 };
 
-const useStyles$l = createStyles((theme) => ({
+const useStyles$h = createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -417,7 +417,7 @@ const useStyles$l = createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$l();
+  const { classes } = useStyles$h();
   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 }));
@@ -469,28 +469,28 @@ function useSortableData(items, config = { key: "", direction: null }) {
   return { items: sortedItems, requestSort, sortConfig };
 }
 
-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) => {
+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$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 function Table$k(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$8(__spreadValues$c({}, item), {
+    return props.items.map((item) => __spreadProps$9(__spreadValues$d({}, item), {
       status: item.isComplete ? 1 : 0
     }));
   }, [props.items]);
@@ -587,7 +587,7 @@ function Table$j(props) {
   ));
 }
 
-const useStyles$k = createStyles((theme) => ({
+const useStyles$g = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -600,7 +600,7 @@ const useStyles$k = createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$g();
   const [tab, setTab] = useState("lessons");
   const numberOfStudents = props.students.length;
   const numberOfBadges = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -938,25 +938,25 @@ function Table$c(props) {
   }));
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$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$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 const Class = (props) => {
   const [opened, setOpened] = useState(false);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -968,7 +968,7 @@ const Class = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$7(__spreadValues$b({}, props), { close: () => setOpened(false) }))
+    /* @__PURE__ */ React.createElement(DropzoneButton$1, __spreadProps$8(__spreadValues$c({}, 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",
     {
@@ -1094,20 +1094,20 @@ const DropzoneButton$1 = (props) => {
     props.onCreateMembers && props.onCreateMembers([values]);
   }) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
     TextInput,
-    __spreadValues$b({
+    __spreadValues$c({
       withAsterisk: true,
       label: "Email",
       placeholder: "Email"
     }, form.getInputProps("email"))
   ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
     TextInput,
-    __spreadValues$b({
+    __spreadValues$c({
       label: "Given name",
       placeholder: "Given name"
     }, form.getInputProps("givenName"))
   ), /* @__PURE__ */ React.createElement(
     TextInput,
-    __spreadValues$b({
+    __spreadValues$c({
       label: "Family name",
       placeholder: "Family name"
     }, form.getInputProps("familyName"))
@@ -1187,23 +1187,23 @@ function Table$b(props) {
   ));
 }
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-const useStyles$j = createStyles((theme) => ({
+const useStyles$f = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1216,7 +1216,7 @@ const useStyles$j = createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$j();
+  const { classes } = useStyles$f();
   const form = useForm({
     initialValues: {
       classId: "",
@@ -1246,14 +1246,14 @@ const Classes = (props) => {
       props.onCreateClass && props.onCreateClass(values);
     }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$a({
+      __spreadValues$b({
         withAsterisk: true,
         label: "Name",
         placeholder: "Class name"
       }, form.getInputProps("name"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$a({
+      __spreadValues$b({
         label: "Description",
         placeholder: "A class for my first period English students"
       }, form.getInputProps("description"))
@@ -1287,7 +1287,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$i = createStyles((theme) => ({
+const useStyles$e = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1301,7 +1301,7 @@ const useStyles$i = createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$i();
+  const { classes } = useStyles$e();
   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));
 };
 
@@ -1439,129 +1439,36 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$h = createStyles((theme, props) => {
-  const from = props.from || "blue";
-  const to = props.to || "green";
-  return {
-    card: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden",
-      transition: "transform 150ms ease, box-shadow 100ms ease",
-      padding: theme.spacing.xl,
-      paddingLeft: theme.spacing.xl * 2,
-      "&:hover": {
-        boxShadow: theme.shadows.md,
-        transform: "scale(1.02)"
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: 6,
-        backgroundImage: theme.fn.linearGradient(0, theme.colors[from][6], theme.colors[to][6])
-      }
-    }
-  };
-});
+const ACCENT_BORDER = {
+  cyan: "border-l-sky-blue-400",
+  mint: "border-l-mint-400",
+  gold: "border-l-gold-400"
+};
+const ACCENT_GRADIENT = {
+  cyan: "from-sky-blue-400",
+  mint: "from-mint-400",
+  gold: "from-gold-400"
+};
 function CardGradient(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 });
-  return /* @__PURE__ */ React.createElement(Paper, { withBorder: true, radius: "md", className: classes.card, onClick: props.onClick }, /* @__PURE__ */ React.createElement(
-    ThemeIcon,
-    {
-      size: "xl",
-      radius: "md",
-      variant: "gradient",
-      gradient: { deg: 0, from, to }
+  const accent = props.accent || "cyan";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: props.onClick,
+      className: `flex cursor-pointer items-center gap-[18px] rounded-2xl border border-l-4 border-slate-200 bg-white px-[22px] py-[18px] transition-transform hover:scale-[1.02] hover:shadow-md ${ACCENT_BORDER[accent]}`
     },
-    icon
-  ), /* @__PURE__ */ React.createElement(Text, { size: "xl", weight: 500, mt: "md" }, props.title), /* @__PURE__ */ React.createElement(Text, { size: "sm", mt: "sm", color: "dimmed" }, props.description));
+    /* @__PURE__ */ React.createElement("div", { className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-br ${ACCENT_GRADIENT[accent]} to-dark-blue-400 text-white` }, props.icon),
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[15.5px] font-extrabold text-dark-blue-400" }, props.title), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-xs text-slate-500" }, props.description))
+  );
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const useStyles$g = createStyles((theme) => ({
-  card: {
-    height: 240,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    whiteSpace: "pre-line"
-  },
-  content: {
-    position: "absolute",
-    padding: theme.spacing.xl,
-    zIndex: 1,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0
-  },
-  title: {
-    color: theme.white,
-    marginBottom: theme.spacing.xs / 2
-  },
-  description: {
-    color: theme.white,
-    maxWidth: 220
-  },
-  code: {
-    color: theme.white,
-    maxWidth: 220
-  }
-}));
-const TenantBanner = (_a) => {
-  var _b = _a, {
-    title,
-    description,
-    image,
-    style,
-    className,
-    code
-  } = _b, others = __objRest$1(_b, [
-    "title",
-    "description",
-    "image",
-    "style",
-    "className",
-    "code"
-  ]);
-  const { classes, cx, theme } = useStyles$g();
-  const handleCopy = async () => {
-    if (!code)
+const Home = (props) => {
+  const accessCode = props.organization.accessCode;
+  const onCopyAccessCode = async () => {
+    if (!accessCode)
       return;
     try {
-      await navigator.clipboard.writeText(code);
+      await navigator.clipboard.writeText(accessCode);
       showNotification({
         title: "Copied!",
         message: "Community code copied to clipboard.",
@@ -1571,97 +1478,59 @@ const TenantBanner = (_a) => {
       console.error("Failed to copy code", err);
     }
   };
-  return /* @__PURE__ */ React.createElement(
-    Card,
-    __spreadValues$9({
-      radius: "md",
-      style: __spreadValues$9({ backgroundImage: `url(${image})` }, style),
-      className: cx(classes.card, className)
-    }, others),
-    /* @__PURE__ */ React.createElement(
-      Overlay,
-      {
-        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
-        opacity: 0.55,
-        zIndex: 0
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React.createElement(Group, { mt: "sm", spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.code }, "Community Code: ", code || "\u2014"), code && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        size: "xs",
-        variant: "white",
-        onClick: handleCopy,
-        styles: {
-          root: {
-            backgroundColor: "rgba(255,255,255,0.9)"
-          }
-        }
-      },
-      "Copy"
-    )))
-  );
-};
-
-const Home = (props) => {
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "lg" }, /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
-    UserInfo,
-    {
-      variant: "compact",
-      name: props.name,
-      impactStatement: props.impactStatement
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, { md: 6 }, /* @__PURE__ */ React.createElement(
-    TenantBanner,
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-[1100px] flex-col gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-[28px] font-extrabold text-dark-blue-400" }, props.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[12.5px] text-slate-400" }, props.impactStatement)), /* @__PURE__ */ React.createElement("div", { className: "flex w-[440px] shrink-0 flex-col justify-between gap-3 rounded-2xl bg-gradient-to-br from-dark-blue-600 via-dark-blue-400 to-sky-blue-400 p-5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-base font-extrabold text-white" }, props.organization.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-white/70" }, props.organization.description)), accessCode && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-white/70" }, "Community code: ", accessCode), /* @__PURE__ */ React.createElement(
+    "button",
     {
-      title: props.organization.name,
-      description: props.organization.description,
-      image: props.organization.image,
-      code: props.organization.accessCode
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { gutter: "md" }, /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+      onClick: onCopyAccessCode,
+      className: "rounded-md bg-white/90 px-2.5 py-1 text-[10.5px] font-bold text-dark-blue-400 hover:bg-white"
+    },
+    "Copy"
+  )))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(
     CardGradient,
     {
       title: "Dashboard",
       description: "Track your students\u2019 pathway progress",
+      accent: "mint",
+      icon: /* @__PURE__ */ React.createElement(IconGauge, { size: 18, stroke: 1.75 }),
       onClick: props.onDashboardClick
     }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CardGradient,
     {
       title: "Classes",
       description: "Create classes, cohorts, or custom subgroups",
+      accent: "gold",
+      icon: /* @__PURE__ */ React.createElement(IconCategory2, { size: 18, stroke: 1.75 }),
       onClick: props.onClassesClick
     }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CardGradient,
     {
       title: "Pathways",
       description: "Explore all your unique pathway requirements in one clear space",
+      accent: "cyan",
+      icon: /* @__PURE__ */ React.createElement(IconRoute, { size: 18, stroke: 1.75 }),
       onClick: props.onPathwaysClick
     }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CardGradient,
     {
       title: "Badges",
       description: "Key milestones that reflect skill development, micro-credentials, or academic progress",
+      accent: "mint",
+      icon: /* @__PURE__ */ React.createElement(IconAlbum, { size: 18, stroke: 1.75 }),
       onClick: props.onBadgesClick
     }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
-    CardGradient,
-    {
-      title: "Lessons",
-      description: "Bite-sized activities and learning experiences accelerating students achievement",
-      onClick: props.onLessonsClick
-    }
-  )), /* @__PURE__ */ React.createElement(Grid.Col, null, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CardGradient,
     {
       title: "File Locker",
       description: "A secure space to view student-submitted work and provide feedback",
+      accent: "cyan",
+      icon: /* @__PURE__ */ React.createElement(IconClipboard, { size: 18, stroke: 1.75 }),
       onClick: props.onFileLockerClick
     }
-  )))));
+  )));
 };
 
 function Table$7(props) {
@@ -1696,7 +1565,7 @@ function Table$7(props) {
   ));
 }
 
-const useStyles$f = createStyles((theme) => ({
+const useStyles$d = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1711,7 +1580,7 @@ const useStyles$f = createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$f();
+  const { classes, theme } = useStyles$d();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -1748,28 +1617,28 @@ function Stack$3(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 24, sx: { padding: 20, minWidth: 700 } }, rows)));
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function Table$6(props) {
   const preparedItems = React.useMemo(() => {
-    return props.items.map((item) => __spreadProps$6(__spreadValues$8({}, item), {
+    return props.items.map((item) => __spreadProps$7(__spreadValues$a({}, item), {
       status: item.isComplete ? 2 : item.isStarted ? 1 : 0
     }));
   }, [props.items]);
@@ -1889,7 +1758,7 @@ function Stack$2(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "&hellip;" : "");
 
-const useStyles$e = createStyles((theme) => ({
+const useStyles$c = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1902,7 +1771,7 @@ const useStyles$e = createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$c();
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const numberOfLessons = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length : 0;
@@ -2015,68 +1884,38 @@ const Lesson = (props) => {
 };
 
 function Table$5(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 lessons to display",
-        description: "We don't have any lessons to show you just yet.",
-        loading: props.loading,
-        icon: "lessons"
-      }
-    );
+    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 lessons to display.");
   }
-  const rows = props.items.map((row) => /* @__PURE__ */ React.createElement("tr", { key: row.lessonId }, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement(
-    UnstyledButton,
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, "Lesson"), /* @__PURE__ */ React.createElement("div", { className: "w-40 shrink-0" }, "Pathway"), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), props.items.map((row) => /* @__PURE__ */ React.createElement(
+    Link,
     {
-      component: Link,
+      key: row.lessonId,
       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("div", { className: "w-40 shrink-0 text-xs text-slate-500" }, row.pathway || "\u2014"),
+    /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: "w-4 shrink-0 text-slate-300" })
+  )));
 }
 
-const useStyles$d = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
-    }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
 const Lessons = (props) => {
-  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,
+  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" }, "Lessons"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, "Bite-sized activities and learning experiences accelerating students achievement")), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(IconSearch, { size: 16, stroke: 2, className: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React.createElement(
+    "input",
     {
+      type: "text",
       placeholder: "Search for a lesson that fits your needs",
-      data: props.lessons.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$5,
-    {
-      loading: props.loading,
-      items: props.lessons
+      onChange: (e) => props.onAutocompleteChange(e.target.value),
+      className: "w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-dark-blue-400 placeholder:text-slate-400 focus:border-sky-blue-400 focus:outline-none"
     }
-  ))));
+  )), /* @__PURE__ */ React.createElement(Table$5, { loading: props.loading, items: props.lessons }));
 };
 
-const useStyles$c = createStyles((theme) => ({
+const useStyles$b = createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2095,7 +1934,7 @@ const useStyles$c = createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$c();
+  const { classes } = useStyles$b();
   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,
     {
@@ -2123,7 +1962,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$b = createStyles((theme) => ({
+const useStyles$a = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2153,7 +1992,7 @@ const useStyles$b = createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$b();
+  const { classes } = useStyles$a();
   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,
     {
@@ -2179,7 +2018,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$a = createStyles((theme) => ({
+const useStyles$9 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2194,7 +2033,7 @@ const useStyles$a = createStyles((theme) => ({
   }
 }));
 const SplitButton$2 = (props) => {
-  const { classes, theme } = useStyles$a();
+  const { classes, theme } = useStyles$9();
   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(
@@ -2256,26 +2095,26 @@ function Table$4(props) {
   return /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(Table$l, { verticalSpacing: 20, sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Name"), /* @__PURE__ */ React.createElement("th", null, "Role"), /* @__PURE__ */ React.createElement("th", null, "Account Created?"), /* @__PURE__ */ React.createElement("th", null, "# of Classes"), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, rows)));
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$9 = createStyles((theme) => ({
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+const useStyles$8 = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2305,7 +2144,7 @@ const useStyles$9 = createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$8();
   const form = useForm({
     initialValues: {
       userId: "",
@@ -2336,27 +2175,27 @@ const People = (props) => {
       padding: "xl",
       size: "xl"
     },
-    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$5(__spreadValues$7({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
+    /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(DropzoneButton, __spreadProps$6(__spreadValues$9({}, props), { close: () => setOpened(false) })), /* @__PURE__ */ React.createElement(Divider, { label: "or", labelPosition: "center", my: "md", variant: "dashed" }), /* @__PURE__ */ React.createElement("form", { onSubmit: form.onSubmit(() => {
       const values = form.values;
       form.reset();
       setOpened(false);
       props.onCreateUsers && props.onCreateUsers([values]);
     }) }, /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$7({
+      __spreadValues$9({
         withAsterisk: true,
         label: "Email",
         placeholder: "Email"
       }, form.getInputProps("email"))
     ), /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$7({
+      __spreadValues$9({
         label: "Given name",
         placeholder: "Given name"
       }, form.getInputProps("givenName"))
     ), /* @__PURE__ */ React.createElement(
       TextInput,
-      __spreadValues$7({
+      __spreadValues$9({
         label: "Family name",
         placeholder: "Family name"
       }, form.getInputProps("familyName"))
@@ -2409,7 +2248,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$9();
+  const { classes, theme } = useStyles$8();
   const openRef = React.useRef(null);
   const [loading, setLoading] = React.useState(false);
   const onDrop = React.useCallback((acceptedFiles) => {
@@ -2455,7 +2294,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$8 = createStyles((theme) => ({
+const useStyles$7 = createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2518,7 +2357,7 @@ const useStyles$8 = createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$7();
   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,
@@ -2542,24 +2381,24 @@ const StartAnonymousLesson = (props) => {
   ))))));
 };
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
 const BadgeGrid = (props) => {
-  const badges = props.badges.map((b) => /* @__PURE__ */ React.createElement(TaskCard, __spreadValues$6({ key: b.title }, b)));
+  const badges = props.badges.map((b) => /* @__PURE__ */ React.createElement(TaskCard, __spreadValues$8({ key: b.title }, b)));
   return /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
@@ -2575,116 +2414,236 @@ function TaskCard(props) {
   ));
 }
 
-const useStyles$7 = createStyles((theme) => ({
-  action: {
-    backgroundColor: "inherit",
-    ":hover": {
-      textDecoration: "underline"
-    }
-  },
-  title: {
-    color: theme.colorScheme === "dark" ? theme.white : theme.black,
-    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
-    fontSize: theme.fontSizes.xl,
-    lineHeight: 1.5,
-    fontWeight: 900,
-    [theme.fn.smallerThan("xs")]: {
-      fontSize: theme.fontSizes.md
-    }
-  }
-}));
-const TrialHome = (props) => {
-  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,
-    {
-      className: classes.action,
-      variant: "white",
-      component: "a",
-      size: "xs",
-      href: props.upgradeHref,
-      target: "_blank"
-    },
-    "UPGRADE NOW"
-  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
-    UserInfo,
-    {
-      variant: "compact",
-      name: props.name,
-      impactStatement: ""
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TenantBanner,
-    {
-      title: "Trial Account",
-      description: `Welcome to your Local Civics Trial Account${props.firstName ? ", " + props.firstName : ""}!`,
-      image: "https://cdn.localcivics.io/hub/landing.jpg"
-    }
-  )), /* @__PURE__ */ React.createElement(Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
-};
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest = (source, exclude) => {
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const useStyles$6 = createStyles((theme, { checked }) => ({
-  button: {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    transition: "background-color 150ms ease, border-color 150ms ease",
-    border: `1px solid ${checked ? theme.fn.variant({ variant: "outline", color: theme.primaryColor }).border : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
-    borderRadius: theme.radius.sm,
-    padding: theme.spacing.md,
-    paddingTop: theme.spacing.sm,
-    paddingBottom: theme.spacing.sm,
-    backgroundColor: checked ? theme.fn.variant({ variant: "light", color: theme.primaryColor }).background : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white
+const useStyles$6 = createStyles((theme) => ({
+  card: {
+    height: 240,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    whiteSpace: "pre-line"
   },
-  body: {
-    flex: 1,
-    marginLeft: theme.spacing.md
-  }
-}));
-function ImageCheckbox(_a) {
-  var _b = _a, {
-    checked,
-    defaultChecked,
-    onChange,
-    title,
-    description,
-    className,
-    icon: Icon
-  } = _b, others = __objRest(_b, [
-    "checked",
-    "defaultChecked",
-    "onChange",
+  content: {
+    position: "absolute",
+    padding: theme.spacing.xl,
+    zIndex: 1,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  },
+  title: {
+    color: theme.white,
+    marginBottom: theme.spacing.xs / 2
+  },
+  description: {
+    color: theme.white,
+    maxWidth: 220
+  },
+  code: {
+    color: theme.white,
+    maxWidth: 220
+  }
+}));
+const TenantBanner = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    image,
+    style,
+    className,
+    code
+  } = _b, others = __objRest$1(_b, [
+    "title",
+    "description",
+    "image",
+    "style",
+    "className",
+    "code"
+  ]);
+  const { classes, cx, theme } = useStyles$6();
+  const handleCopy = async () => {
+    if (!code)
+      return;
+    try {
+      await navigator.clipboard.writeText(code);
+      showNotification({
+        title: "Copied!",
+        message: "Community code copied to clipboard.",
+        autoClose: 3e3
+      });
+    } catch (err) {
+      console.error("Failed to copy code", err);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Card,
+    __spreadValues$7({
+      radius: "md",
+      style: __spreadValues$7({ backgroundImage: `url(${image})` }, style),
+      className: cx(classes.card, className)
+    }, others),
+    /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
+        opacity: 0.55,
+        zIndex: 0
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React.createElement(Group, { mt: "sm", spacing: "xs" }, /* @__PURE__ */ React.createElement(Text, { size: "sm", className: classes.code }, "Community Code: ", code || "\u2014"), code && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "xs",
+        variant: "white",
+        onClick: handleCopy,
+        styles: {
+          root: {
+            backgroundColor: "rgba(255,255,255,0.9)"
+          }
+        }
+      },
+      "Copy"
+    )))
+  );
+};
+
+const useStyles$5 = createStyles((theme) => ({
+  action: {
+    backgroundColor: "inherit",
+    ":hover": {
+      textDecoration: "underline"
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontSize: theme.fontSizes.xl,
+    lineHeight: 1.5,
+    fontWeight: 900,
+    [theme.fn.smallerThan("xs")]: {
+      fontSize: theme.fontSizes.md
+    }
+  }
+}));
+const TrialHome = (props) => {
+  const { classes } = useStyles$5();
+  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,
+    {
+      className: classes.action,
+      variant: "white",
+      component: "a",
+      size: "xs",
+      href: props.upgradeHref,
+      target: "_blank"
+    },
+    "UPGRADE NOW"
+  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(
+    UserInfo,
+    {
+      variant: "compact",
+      name: props.name,
+      impactStatement: ""
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TenantBanner,
+    {
+      title: "Trial Account",
+      description: `Welcome to your Local Civics Trial Account${props.firstName ? ", " + props.firstName : ""}!`,
+      image: "https://cdn.localcivics.io/hub/landing.jpg"
+    }
+  )), /* @__PURE__ */ React.createElement(Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
+};
+
+var __defProp$6 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useStyles$4 = createStyles((theme, { checked }) => ({
+  button: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    transition: "background-color 150ms ease, border-color 150ms ease",
+    border: `1px solid ${checked ? theme.fn.variant({ variant: "outline", color: theme.primaryColor }).border : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
+    borderRadius: theme.radius.sm,
+    padding: theme.spacing.md,
+    paddingTop: theme.spacing.sm,
+    paddingBottom: theme.spacing.sm,
+    backgroundColor: checked ? theme.fn.variant({ variant: "light", color: theme.primaryColor }).background : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white
+  },
+  body: {
+    flex: 1,
+    marginLeft: theme.spacing.md
+  }
+}));
+function ImageCheckbox(_a) {
+  var _b = _a, {
+    checked,
+    defaultChecked,
+    onChange,
+    title,
+    description,
+    className,
+    icon: Icon
+  } = _b, others = __objRest(_b, [
+    "checked",
+    "defaultChecked",
+    "onChange",
     "title",
     "description",
     "className",
@@ -2696,10 +2655,10 @@ function ImageCheckbox(_a) {
     finalValue: false,
     onChange
   });
-  const { classes, cx } = useStyles$6({ checked: value });
+  const { classes, cx } = useStyles$4({ checked: value });
   return /* @__PURE__ */ React.createElement(
     UnstyledButton,
-    __spreadProps$4(__spreadValues$5({}, others), {
+    __spreadProps$5(__spreadValues$6({}, others), {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
@@ -2720,7 +2679,7 @@ function ImageCheckbox(_a) {
 function SelectGrid(props) {
   const items = props.items.map((item) => /* @__PURE__ */ React.createElement(
     ImageCheckbox,
-    __spreadProps$4(__spreadValues$5({}, item), {
+    __spreadProps$5(__spreadValues$6({}, item), {
       key: item.title,
       onChange: (checked) => props.onChange(item.title, checked)
     })
@@ -2738,26 +2697,26 @@ function SelectGrid(props) {
   );
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$5 = createStyles((theme) => ({
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const useStyles$3 = createStyles((theme) => ({
   wrapper: {
     minHeight: "100%",
     boxSizing: "border-box",
@@ -2820,7 +2779,7 @@ const OPTIONS = [
   { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
-  const { classes } = useStyles$5();
+  const { classes } = useStyles$3();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
@@ -2866,7 +2825,7 @@ const TrialRegistration = (props) => {
       label: "School/Organization Name",
       placeholder: "What's the name of your school?",
       data: props.organizations.map((o) => {
-        return __spreadProps$3(__spreadValues$4({}, o), { value: o.displayName });
+        return __spreadProps$4(__spreadValues$5({}, o), { value: o.displayName });
       }),
       onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
       onChange: (next) => {
@@ -2878,7 +2837,7 @@ const TrialRegistration = (props) => {
     SelectGrid,
     {
       items: OPTIONS,
-      onChange: (e, checked) => setInterests(__spreadProps$3(__spreadValues$4({}, interests), { [e]: checked }))
+      onChange: (e, checked) => setInterests(__spreadProps$4(__spreadValues$5({}, interests), { [e]: checked }))
     }
   ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -2916,26 +2875,26 @@ const AdminProvider = (props) => {
   );
 };
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const useStyles$4 = createStyles((theme, props) => ({
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const useStyles$2 = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
@@ -3022,7 +2981,7 @@ const useStyles$4 = createStyles((theme, props) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles$4(props);
+  const { classes } = useStyles$2(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
@@ -3030,7 +2989,7 @@ const App = (props) => {
       padding: "xs",
       navbar: props.navbar && /* @__PURE__ */ React.createElement(
         Navbar,
-        __spreadProps$2(__spreadValues$3({}, props.navbar.props), {
+        __spreadProps$3(__spreadValues$4({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
       ),
@@ -3140,7 +3099,7 @@ const Pathways = (props) => {
   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) => ({
+const useStyles$1 = createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -3155,7 +3114,7 @@ const useStyles$3 = createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$3();
+  const { classes, theme } = useStyles$1();
   theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Button,
@@ -3191,25 +3150,25 @@ function Stack$1(props) {
   return /* @__PURE__ */ React.createElement(Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 function Table$2(props) {
   const preparedItems = React.useMemo(() => {
-    return (props.items || []).map((item) => __spreadValues$2(__spreadValues$2({}, item), item.categoryPoints));
+    return (props.items || []).map((item) => __spreadValues$3(__spreadValues$3({}, item), item.categoryPoints));
   }, [props.items]);
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(preparedItems);
   if (props.loading && props.items.length === 0) {
@@ -3341,7 +3300,7 @@ function Table$1(props) {
   ));
 }
 
-const useStyles$2 = createStyles((theme) => ({
+const useStyles = createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -3354,7 +3313,7 @@ const useStyles$2 = createStyles((theme) => ({
   }
 }));
 const Pathway = (props) => {
-  const { classes } = useStyles$2();
+  const { classes } = useStyles();
   const [tab, setTab] = useState("badges");
   const numberOfStudents = props.students.length;
   numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -3421,82 +3380,84 @@ const Pathway = (props) => {
   )))))));
 };
 
-const useStyles$1 = createStyles((theme) => ({
-  button: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    marginLeft: 0,
-    marginRight: 0
-  },
-  menuControl: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    border: 0,
-    borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
-  }
-}));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$1();
-  theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  return /* @__PURE__ */ React.createElement(Stack$5, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement(
+    "button",
     {
-      leftIcon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 14 }),
-      onClick: props.onExportDataClick
+      onClick: props.onExportDataClick,
+      className: "flex items-center gap-2 rounded-xl bg-gradient-to-r from-gold-400 to-[#f5c300] px-4 py-2.5 text-xs font-extrabold text-dark-blue-400"
     },
+    /* @__PURE__ */ React.createElement(IconTableExport, { size: 14, stroke: 2 }),
     "Export data (.csv)"
-  ));
+  );
 };
 
 function Stack(props) {
-  const { items, hideBadge, hideLesson } = props;
+  const { items, hideBadge, hideLesson, hidePathway } = props;
   if (!items.length)
     return null;
-  const visibleColumns = [
-    true,
-    !hideBadge,
-    !hideLesson,
-    true
-  ].filter(Boolean).length;
-  const span = 12 / visibleColumns;
-  return /* @__PURE__ */ React.createElement(Grid, { gutter: "md", sx: { padding: 20, minWidth: 700 } }, /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Link")), !hideBadge && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Badge")), !hideLesson && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Lesson")), /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, { weight: "bold" }, "Question")), items.map((row, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      component: "a",
-      href: row.link,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      size: "xs",
-      variant: "light"
-    },
-    "View File"
-  )), !hideBadge && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, null, row.badgeName)), !hideLesson && /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, null, row.lessonName)), /* @__PURE__ */ React.createElement(Grid.Col, { span }, /* @__PURE__ */ React.createElement(Text, null, row.question)))));
+  const columns = [
+    "minmax(0,2fr)",
+    !hidePathway && "minmax(0,1.3fr)",
+    !hideLesson && "minmax(0,1.3fr)",
+    !hideBadge && "minmax(0,1.3fr)",
+    "auto"
+  ].filter(Boolean).join(" ");
+  const headerCell = "border-b border-slate-100 pb-2 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400";
+  const dataCell = "py-3";
+  return /* @__PURE__ */ React.createElement("div", { className: "grid items-center gap-x-3", style: { gridTemplateColumns: columns } }, /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Question"), !hidePathway && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Pathway"), !hideLesson && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Lesson"), !hideBadge && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Badge"), /* @__PURE__ */ React.createElement("div", { className: headerCell }), items.map((row, i) => {
+    const rowBorder = i > 0 ? "border-t border-slate-100" : "";
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} text-xs font-semibold text-dark-blue-400` }, row.question), !hidePathway && /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.pathwayName || "\u2014"), !hideLesson && /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.lessonName), !hideBadge && /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.badgeName), /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} flex shrink-0 gap-2` }, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: row.link,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
+      },
+      /* @__PURE__ */ React.createElement(IconExternalLink, { size: 12, stroke: 2 }),
+      "Preview"
+    ), /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: row.link,
+        download: true,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
+      },
+      /* @__PURE__ */ React.createElement(IconDownload, { size: 12, stroke: 2 }),
+      "Download"
+    )));
+  }));
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const initials$1 = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
 function Table(props) {
+  const [expanded, setExpanded] = React.useState({});
   const preparedItems = React.useMemo(() => {
     return props.items.map((item) => {
       var _a;
-      return __spreadProps$1(__spreadValues$1({}, item), {
+      return __spreadProps$2(__spreadValues$2({}, item), {
         submissionCount: ((_a = item.submissions) == null ? void 0 : _a.length) || 0
       });
     });
@@ -3513,76 +3474,82 @@ function Table(props) {
       }
     );
   }
-  const sortStatus = {
-    columnAccessor: sortConfig.key,
-    direction: sortConfig.direction === "desc" ? "desc" : "asc"
-  };
-  return /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React.createElement(
-    DataTable,
+  const indicator = (key) => sortConfig.key !== key ? "" : sortConfig.direction === "desc" ? " \u25BE" : " \u25B4";
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 px-4 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("name"), className: "flex-1 text-left hover:text-slate-600" }, "Student Name", indicator("name")), /* @__PURE__ */ React.createElement("button", { onClick: () => requestSort("submissionCount"), className: "w-16 shrink-0 text-left hover:text-slate-600" }, "Files", indicator("submissionCount")), props.onReview && /* @__PURE__ */ React.createElement("div", { className: "w-36 shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "w-4 shrink-0" })), sortedItems.map((row) => {
+    const isOpen = !!expanded[row.userId];
+    return /* @__PURE__ */ React.createElement("div", { key: row.userId, className: "rounded-xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onClick: () => setExpanded(__spreadProps$2(__spreadValues$2({}, expanded), { [row.userId]: !isOpen })),
+        className: "flex cursor-pointer items-center gap-4 p-4"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-3" }, row.avatar ? /* @__PURE__ */ React.createElement("img", { src: row.avatar, className: "h-9 w-9 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-xs font-bold text-white" }, initials$1(row.name)), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-sm font-bold text-dark-blue-400" }, row.name), /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs text-slate-400" }, row.email))),
+      /* @__PURE__ */ React.createElement("div", { className: "w-16 shrink-0 text-sm font-bold text-dark-blue-400" }, row.submissions.length),
+      props.onReview && /* @__PURE__ */ React.createElement("div", { className: "w-36 shrink-0" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            props.onReview(row);
+          },
+          className: "rounded-lg bg-gradient-to-r from-gold-400 to-[#f5c300] px-3 py-1.5 text-[11px] font-extrabold text-dark-blue-400"
+        },
+        "Review Submission"
+      )),
+      /* @__PURE__ */ React.createElement(IconChevronRight, { size: 16, stroke: 2, className: `w-4 shrink-0 text-slate-300 transition-transform ${isOpen ? "rotate-90" : ""}` })
+    ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(Stack, { items: row.submissions, hideBadge: props.hideBadge, hideLesson: props.hideLesson, hidePathway: props.hidePathway })));
+  }));
+}
+
+const initials = (name) => name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+function SubmissionDetail(props) {
+  const { student } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-slate-400" }, /* @__PURE__ */ React.createElement("button", { onClick: props.onBack, className: "font-bold text-sky-blue-400 hover:underline" }, "File Locker"), /* @__PURE__ */ React.createElement("span", null, "/"), /* @__PURE__ */ React.createElement("span", { className: "font-bold text-dark-blue-400" }, student.name)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, student.avatar ? /* @__PURE__ */ React.createElement("img", { src: student.avatar, className: "h-12 w-12 shrink-0 rounded-full object-cover", alt: "" }) : /* @__PURE__ */ React.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-dark-blue-400 text-sm font-bold text-white" }, initials(student.name)), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold text-dark-blue-400" }, student.name), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-xs text-slate-400" }, student.email, props.context ? ` \xB7 ${props.context}` : "")), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500" }, student.submissions.length, " file", student.submissions.length === 1 ? "" : "s")), /* @__PURE__ */ React.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, "Files"), /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement(Stack, { items: student.submissions }))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
+    "button",
     {
-      verticalSpacing: "sm",
-      sx: { minWidth: 700 },
-      withBorder: false,
-      borderRadius: "sm",
-      withColumnBorders: true,
-      striped: true,
-      highlightOnHover: true,
-      records: sortedItems,
-      sortStatus,
-      onSortStatusChange: (status) => requestSort(status.columnAccessor),
-      idAccessor: "userId",
-      columns: [{
-        accessor: "name",
-        title: "Student Name",
-        sortable: true,
-        render: (row) => /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(Avatar, { size: 40, src: row.avatar, radius: 40 }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, row.name), /* @__PURE__ */ React.createElement(Text, { size: "xs", color: "dimmed" }, row.email)))
-      }, {
-        accessor: "submissionCount",
-        title: "Files",
-        sortable: true,
-        render: (row) => row.submissions.length
-      }],
-      rowExpansion: {
-        content: ({ record }) => /* @__PURE__ */ React.createElement(
-          Stack,
-          {
-            items: record.submissions,
-            hideBadge: props.hideBadge,
-            hideLesson: props.hideLesson
-          }
-        )
-      }
-    }
-  ));
+      onClick: () => props.onNav(-1),
+      className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50"
+    },
+    /* @__PURE__ */ React.createElement(IconChevronLeft, { size: 14, stroke: 2 }),
+    "Previous Submission"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => props.onNav(1),
+      className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50"
+    },
+    "Next Submission",
+    /* @__PURE__ */ React.createElement(IconChevronRight, { size: 14, stroke: 2 })
+  )));
 }
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const useFilteredStudents = (students) => {
   return React.useMemo(() => {
-    const byBadge = (badgeId) => students.map((s) => __spreadProps(__spreadValues({}, s), {
+    const byBadge = (badgeId) => students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
       submissions: (s.submissions || []).filter(
         (sub) => sub.badgeId === badgeId
       )
     })).filter((s) => s.submissions.length);
-    const byLesson = (lessonName) => students.map((s) => __spreadProps(__spreadValues({}, s), {
+    const byLesson = (lessonName) => students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
       submissions: (s.submissions || []).filter(
         (sub) => sub.lessonName === lessonName
       )
@@ -3593,7 +3560,7 @@ const useFilteredStudents = (students) => {
           (c) => c.startsWith(pathwayId)
         )
       ).map((b) => b.badgeId);
-      return students.map((s) => __spreadProps(__spreadValues({}, s), {
+      return students.map((s) => __spreadProps$1(__spreadValues$1({}, s), {
         submissions: (s.submissions || []).filter(
           (sub) => validBadgeIds.includes(sub.badgeId)
         )
@@ -3603,168 +3570,167 @@ const useFilteredStudents = (students) => {
   }, [students]);
 };
 
-const useStyles = createStyles((theme) => ({
-  title: {
-    fontSize: 34,
-    fontWeight: 900,
-    [theme.fn.smallerThan("sm")]: {
-      fontSize: 24
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  },
-  description: {
-    maxWidth: 600
-  }
-}));
-const BadgeTable = ({ badges, students, loading }) => {
-  const { byBadge } = useFilteredStudents(students);
-  const countFiles = (students2) => students2.reduce((acc, s) => {
-    var _a;
-    return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-  }, 0);
-  return /* @__PURE__ */ React.createElement(Accordion, null, badges.map((b) => {
-    const studentsForBadge = byBadge(b.badgeId);
-    const fileCount = countFiles(studentsForBadge);
-    return /* @__PURE__ */ React.createElement(Accordion.Item, { key: b.badgeId, value: b.badgeId }, /* @__PURE__ */ React.createElement(Accordion.Control, null, /* @__PURE__ */ React.createElement(Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React.createElement(Text, null, b.displayName), /* @__PURE__ */ React.createElement(Badge$1, { size: "sm" }, fileCount))), /* @__PURE__ */ React.createElement(Accordion.Panel, null, /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        loading,
-        items: studentsForBadge,
-        hideBadge: true
-      }
-    )));
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TABS = [
+  { value: "students", label: "By student" },
+  { value: "pathways", label: "By pathway" },
+  { value: "badges", label: "By badge" },
+  { value: "lessons", label: "By lesson" }
+];
+const countFiles = (students) => students.reduce((acc, s) => {
+  var _a;
+  return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
+}, 0);
+const GroupCard = (props) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm" }, /* @__PURE__ */ React.createElement("div", { onClick: () => setOpen(!open), className: "flex cursor-pointer items-center gap-3.5 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-extrabold text-dark-blue-400" }, props.title), props.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs leading-relaxed text-slate-500" }, props.description)), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-mint-100 px-2.5 py-1 text-xs font-bold text-dark-blue-400" }, props.count), /* @__PURE__ */ React.createElement(IconChevronDown, { size: 15, stroke: 2.3, className: `shrink-0 text-slate-400 transition-transform ${open ? "rotate-180" : ""}` })), open && /* @__PURE__ */ React.createElement("div", { className: "border-t border-slate-100 p-4" }, props.children));
+};
+const PathwayGroups = (props) => {
+  const { byPathway } = useFilteredStudents(props.students);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.pathways.map((p) => {
+    const filtered = byPathway(p.pathwayId, props.badges);
+    return /* @__PURE__ */ React.createElement(GroupCard, { key: p.pathwayId, title: p.title, description: p.description, count: countFiles(filtered) }, /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: filtered, hidePathway: true, onReview: (item) => props.onReview(item, filtered, p.title) }));
   }));
 };
-const LessonTableWrapper = ({ lessons, students, loading }) => {
-  const { byLesson } = useFilteredStudents(students);
-  const countFiles = (students2) => students2.reduce((acc, s) => {
-    var _a;
-    return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-  }, 0);
-  return /* @__PURE__ */ React.createElement(Accordion, null, lessons.map((l) => {
-    const studentsForLesson = byLesson(l.lessonName);
-    const fileCount = countFiles(studentsForLesson);
-    return /* @__PURE__ */ React.createElement(Accordion.Item, { key: l.lessonId, value: l.lessonId }, /* @__PURE__ */ React.createElement(Accordion.Control, null, /* @__PURE__ */ React.createElement(Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React.createElement(Text, null, l.lessonName), /* @__PURE__ */ React.createElement(Badge$1, { size: "sm" }, fileCount))), /* @__PURE__ */ React.createElement(Accordion.Panel, null, /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        loading,
-        items: studentsForLesson,
-        hideLesson: true
-      }
-    )));
+const BadgeGroups = (props) => {
+  const { byBadge } = useFilteredStudents(props.students);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.badges.map((b) => {
+    const filtered = byBadge(b.badgeId);
+    const pathwayTitle = props.pathwayNameForBadge[b.badgeId];
+    return /* @__PURE__ */ React.createElement(GroupCard, { key: b.badgeId, title: b.displayName, description: pathwayTitle ? `${pathwayTitle} pathway` : void 0, count: countFiles(filtered) }, /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: filtered, hideBadge: true, hidePathway: true, onReview: (item) => props.onReview(item, filtered, b.displayName) }));
   }));
 };
-const PathwayTable = ({
-  pathways,
-  badges,
-  students,
-  loading
-}) => {
-  const { byPathway } = useFilteredStudents(students);
-  const countFiles = (students2) => students2.reduce((acc, s) => {
-    var _a;
-    return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-  }, 0);
-  return /* @__PURE__ */ React.createElement(Accordion, null, pathways.map((p) => {
-    const studentsForPathway = byPathway(p.pathwayId, badges);
-    const fileCount = countFiles(studentsForPathway);
-    return /* @__PURE__ */ React.createElement(Accordion.Item, { key: p.pathwayId, value: p.pathwayId }, /* @__PURE__ */ React.createElement(Accordion.Control, null, /* @__PURE__ */ React.createElement(Group, { position: "apart", w: "100%" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("strong", null, p.title), /* @__PURE__ */ React.createElement("div", null, p.description)), /* @__PURE__ */ React.createElement(Badge$1, { size: "sm" }, fileCount))), /* @__PURE__ */ React.createElement(Accordion.Panel, null, /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        loading,
-        items: studentsForPathway
-      }
-    )));
+const LessonGroups = (props) => {
+  const { byLesson } = useFilteredStudents(props.students);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.lessons.map((l) => {
+    const filtered = byLesson(l.lessonName);
+    const badge = props.badgeForLesson[l.lessonId];
+    const pathwayTitle = badge ? props.pathwayNameForBadge[badge.badgeId] : void 0;
+    const description = badge ? pathwayTitle ? `${badge.displayName} \xB7 ${pathwayTitle} pathway` : badge.displayName : void 0;
+    return /* @__PURE__ */ React.createElement(GroupCard, { key: l.lessonId, title: l.lessonName, description, count: countFiles(filtered) }, /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: filtered, hideBadge: true, hideLesson: true, hidePathway: true, onReview: (item) => props.onReview(item, filtered, l.lessonName) }));
   }));
 };
 const FileLocker = (props) => {
-  const { classes } = useStyles();
-  const [tab, setTab] = useState("students");
-  props.students.length;
-  const numberOfFiles = props.students.reduce(
-    (acc, s) => {
-      var _a;
-      return acc + (((_a = s.submissions) == null ? void 0 : _a.length) || 0);
-    },
-    0
-  );
-  return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$5, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
-    Badge$1,
-    {
-      variant: "filled",
-      leftSection: /* @__PURE__ */ React.createElement(ActionIcon, { color: "blue", size: "xs", radius: "xl", variant: "filled" }, /* @__PURE__ */ React.createElement(IconArrowLeft, { size: 14 })),
-      size: "lg"
-    },
-    "Back"
-  )), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, /* @__PURE__ */ React.createElement(Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "File"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(Stack$5, { ml: "auto" }, /* @__PURE__ */ React.createElement(
-    SplitButton,
-    {
-      href: props.href,
-      onCopyLinkClick: props.onCopyLinkClick,
-      onExportDataClick: props.onExportDataClick
-    }
-  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$5, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
-    {
-      title: props.trial ? "LESSONS SUBMITTED" : "FILES",
-      value: props.trial ? props.lessonsCompleted || 0 : numberOfFiles,
-      unit: props.trial ? "" : ""
-    }
-  ] }), !props.trial && /* @__PURE__ */ React.createElement(
-    Select,
+  const [tab, setTab] = React.useState("students");
+  const [reviewing, setReviewing] = React.useState(null);
+  const numberOfFiles = countFiles(props.students);
+  const { thisWeek, thisMonth } = React.useMemo(() => {
+    const now = new Date();
+    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1e3);
+    const fom = new Date(now.getFullYear(), now.getMonth(), 1);
+    let week = 0, month = 0;
+    props.students.forEach((s) => {
+      (s.submissions || []).forEach((sub) => {
+        if (!sub.updatedAt)
+          return;
+        const d = new Date(sub.updatedAt);
+        if (d >= weekAgo)
+          week += 1;
+        if (d >= fom)
+          month += 1;
+      });
+    });
+    return { thisWeek: week, thisMonth: month };
+  }, [props.students]);
+  const pathwayNameForBadge = React.useMemo(() => {
+    const map = {};
+    (props.badges || []).forEach((b) => {
+      if (!Array.isArray(b.categories))
+        return;
+      const pathway = (props.pathways || []).find((p) => b.categories.some((c) => c.startsWith(p.pathwayId)));
+      if (pathway)
+        map[b.badgeId] = pathway.title;
+    });
+    return map;
+  }, [props.badges, props.pathways]);
+  const badgeForLesson = React.useMemo(() => {
+    const map = {};
+    (props.badges || []).forEach((b) => {
+      if (!Array.isArray(b.lessonIds))
+        return;
+      b.lessonIds.forEach((lessonId) => {
+        if (!(lessonId in map))
+          map[lessonId] = { displayName: b.displayName, badgeId: b.badgeId };
+      });
+    });
+    return map;
+  }, [props.badges]);
+  const enrichedStudents = React.useMemo(() => {
+    return props.students.map((s) => __spreadProps(__spreadValues({}, s), {
+      submissions: (s.submissions || []).map((sub) => __spreadProps(__spreadValues({}, sub), { pathwayName: pathwayNameForBadge[sub.badgeId] || "" }))
+    }));
+  }, [props.students, pathwayNameForBadge]);
+  const { byPathway } = useFilteredStudents(enrichedStudents);
+  const mostActivePathway = React.useMemo(() => {
+    return (props.pathways || []).reduce((best, p) => {
+      const count = countFiles(byPathway(p.pathwayId, props.badges || []));
+      return count > 0 && (!best || count > best.count) ? { title: p.title, count } : best;
+    }, null);
+  }, [props.pathways, props.badges, byPathway]);
+  const onReview = (item, list, context) => setReviewing({ student: item, list, context });
+  const onNav = (dir) => {
+    if (!reviewing)
+      return;
+    const idx = reviewing.list.findIndex((s) => s.userId === reviewing.student.userId);
+    if (idx === -1)
+      return;
+    const next = reviewing.list[(idx + dir + reviewing.list.length) % reviewing.list.length];
+    setReviewing(__spreadProps(__spreadValues({}, reviewing), { student: next }));
+  };
+  if (reviewing) {
+    return /* @__PURE__ */ React.createElement(
+      SubmissionDetail,
+      {
+        student: reviewing.student,
+        context: reviewing.context,
+        onBack: () => setReviewing(null),
+        onNav
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5 px-4 py-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: props.onBackClick, className: "flex items-center gap-1 text-xs font-bold text-sky-blue-400 hover:underline" }, /* @__PURE__ */ React.createElement(IconChevronLeft, { size: 13, stroke: 2.5 }), "Back"), /* @__PURE__ */ React.createElement("h1", { className: "mt-1.5 text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-sm text-slate-500" }, props.description || "No description")), !props.trial && /* @__PURE__ */ React.createElement(SplitButton, { href: props.href, onCopyLinkClick: props.onCopyLinkClick, onExportDataClick: props.onExportDataClick })), /* @__PURE__ */ React.createElement(StatsGroup, { data: props.trial ? [
+    { title: "LESSONS SUBMITTED", value: props.lessonsCompleted || 0 }
+  ] : [
+    { title: "FILES", value: numberOfFiles },
+    { title: "THIS WEEK", value: thisWeek },
+    { title: "THIS MONTH", value: thisMonth }
+  ] }), !props.trial && mostActivePathway && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-slate-500" }, "Most active pathway: ", /* @__PURE__ */ React.createElement("span", { className: "font-bold text-dark-blue-400" }, mostActivePathway.title), " (", mostActivePathway.count, " submission", mostActivePathway.count === 1 ? "" : "s", ")"), !props.trial && /* @__PURE__ */ React.createElement(
+    "select",
     {
-      clearable: true,
-      clearButtonLabel: "Clear class selection",
-      size: "sm",
-      placeholder: "Select a class",
-      nothingFound: "No options",
       value: props.classId,
-      onChange: props.onClassChange,
-      icon: /* @__PURE__ */ React.createElement(IconCategory2, null),
-      data: props.classes.map((g) => {
-        return { value: g.classId, label: g.name };
-      })
-    }
-  ), /* @__PURE__ */ React.createElement(Stack$5, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
-    Tabs,
-    {
-      value: tab,
-      data: [
-        { label: "By student", value: "students" },
-        { label: "By pathway", value: "pathways" },
-        { label: "By badge", value: "badges" },
-        { label: "By lesson", value: "lessons" }
-      ],
-      onChange: setTab
-    }
-  ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      loading: props.loading,
-      items: props.students
-    }
-  ), tab === "pathways" && /* @__PURE__ */ React.createElement(
-    PathwayTable,
-    {
-      pathways: props.pathways || [],
-      badges: props.badges || [],
-      students: props.students,
-      loading: props.loading
-    }
-  ), tab === "badges" && /* @__PURE__ */ React.createElement(
-    BadgeTable,
-    {
-      badges: props.badges || [],
-      students: props.students,
-      loading: props.loading
-    }
-  ), tab === "lessons" && /* @__PURE__ */ React.createElement(
-    LessonTableWrapper,
+      onChange: (e) => props.onClassChange(e.target.value),
+      className: "w-64 rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-dark-blue-400 focus:border-sky-blue-400 focus:outline-none"
+    },
+    /* @__PURE__ */ React.createElement("option", { value: "" }, "Select a class"),
+    props.classes.map((g) => /* @__PURE__ */ React.createElement("option", { key: g.classId, value: g.classId }, g.name))
+  ), !props.trial && /* @__PURE__ */ React.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS.map((t) => /* @__PURE__ */ React.createElement(
+    "button",
     {
-      lessons: props.lessons,
-      students: props.students,
-      loading: props.loading
-    }
-  )))))));
+      key: t.value,
+      onClick: () => setTab(t.value),
+      className: `rounded-lg px-4 py-2 text-xs font-bold ${tab === t.value ? "bg-sky-blue-400/20 text-dark-blue-400" : "text-slate-400 hover:text-slate-600"}`
+    },
+    t.label
+  ))), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(Table, { loading: props.loading, items: enrichedStudents, onReview: (item) => onReview(item, enrichedStudents) }), !props.trial && tab === "pathways" && /* @__PURE__ */ React.createElement(PathwayGroups, { students: enrichedStudents, loading: props.loading, pathways: props.pathways || [], badges: props.badges || [], onReview }), !props.trial && tab === "badges" && /* @__PURE__ */ React.createElement(BadgeGroups, { students: enrichedStudents, loading: props.loading, badges: props.badges || [], pathwayNameForBadge, onReview }), !props.trial && tab === "lessons" && /* @__PURE__ */ React.createElement(LessonGroups, { students: enrichedStudents, loading: props.loading, lessons: props.lessons, badgeForLesson, pathwayNameForBadge, onReview }));
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, FileLocker, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathway, PathwayTable, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, FileLocker, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, Pathway, Pathways, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map